/* @xxd/css — 小小东原生组件。Copyright (c) 2026 小小东 (xiaoxiaodong.ai). MIT License. */
/*
 * @xxd/tokens — 小小东设计语言的唯一来源（seed v0）
 *
 * 来源：xPoster src/xxd-theme.css（已与会员站 vip.xiaoxiaodong.ai 统一）+ 会员站 styles.css。
 * 黑 / 白 / 灰，秩序，内容优先；默认直角；强调靠墨色而不是颜色。
 * 颜色只留给意义（成功、危险、警告）和可选的「主色」。
 *
 * 三个开关，全部挂在 <html> 上，由 boot.js 在首帧前写入：
 *   data-theme="light|dark"      主题
 *   data-corners="rounded"       圆角（缺省 = 直角）
 *   data-accent + --action-custom*  主色（缺省 = 墨色）
 *   data-density="compact"       紧凑（侧边栏 / popup）
 *   data-finish="material"       实心按钮的质感（顶部 1px 内高光 + 深一点的边 + 按下下沉）；缺省纯平
 *
 * 规则：组件里的任何矩形圆角都只能来自 --r-xs/sm/md/lg/pill；
 * 语义上的圆（状态点、色块、头像）用 --r-circle，不跟开关走。
 */
:root {
  color-scheme: light;

  /* ── 颜色：纸 / 墨 / 线 ───────────────────────── */
  --bg: #fcfcfc;
  --paper: #ffffff;
  --wash: #f4f4f5;
  --wash-strong: #ececee;
  --selected-bg: #ededed;
  --switch-on: #56565b;
  --ink: #111111;
  --ink-rgb: 17, 17, 17;
  --on-ink: #ffffff;
  /* #777 在白底只有 4.48:1，小字需要 4.5；#6b6b6b 是 5.3（wash 上 4.85、选中底 / wash-strong 上 4.5）。 */
  --muted: #6b6b6b;
  --muted-2: #9a968d; /* 只做装饰（图标、分隔点、行号），不当文字色：在白底只有 2.9:1 */
  --line: #e7e7ea;
  --line-strong: #c9c9ce;
  --paper-rgb: 255, 255, 255;
  --shadow-rgb: 17, 17, 17;

  /* 语义色：只表达意义 */
  --success: #15803d;
  --success-rgb: 21, 128, 61;
  --danger: #b42318;
  --danger-rgb: 180, 35, 24;
  --warning: #b45309;
  --warning-rgb: 180, 83, 9;
  /* 语义色做底（实心按钮、徽标）：上面放白字 ≥ 4.5，放在暗纸上做标记 ≥ 3 */
  --success-strong: #15803d;
  --danger-strong: #b42318;
  --warning-strong: #b45309;

  /* 强调色：墨色（缺省）或主色。正文永远用 --ink，只有强调标记用 --action。 */
  --action: var(--ink);
  --action-rgb: var(--ink-rgb);
  --on-action: var(--on-ink);
  --action-text: var(--ink);
  /* 实心底（上面放字）：墨色时就是 --action；主色时由 accent.js 压暗到白字 4.5:1 */
  --action-fill: var(--action);
  --action-fill-hover: color-mix(in srgb, var(--action) 86%, var(--paper));
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--action) 24%, transparent);

  /* ── 圆角：直角（缺省）/ 圆角 ─────────────────── */
  --r-xs: 0px;   /* 小标记 */
  --r-sm: 0px;   /* 控件：按钮、输入框 */
  --r-md: 0px;   /* 面：卡片、菜单、面板 */
  --r-lg: 0px;   /* 大面：对话框、sheet */
  --r-pill: 0px; /* 状态标签、开关：直角模式下开关也是方的 */
  --r-circle: 50%; /* 语义圆：状态点、色块、头像 —— 不跟开关走 */

  /* ── 阴影：只给浮层（tooltip / 菜单 / toast / 对话框 / sheet），卡片、行、按钮没有阴影 ── */
  --shadow-popover: 0 18px 44px rgba(var(--shadow-rgb), 0.16);
  --shadow-dialog: 0 28px 76px rgba(var(--shadow-rgb), 0.24);
  --shadow-sheet: -18px 0 54px rgba(var(--shadow-rgb), 0.14);
  --backdrop: rgba(5, 5, 5, 0.52);

  /* ── 字体：不加载网络字体；字重只用 400 / 500 / 600 ── */
  --font-body: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-title: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-2xs: 11px; /* tooltip、角标 */
  --text-xs: 12px;  /* 菜单、次要信息 */
  --text-sm: 13px;  /* 导航、控件（最常用） */
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-display: 28px; /* 展示标题（不叫 --text-2xl，避免和 Tailwind 的同名变量冲突） */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --read-width: 680px; /* 阅读列：正文、预览、列表 */

  /* ── 间距：4px 基准 ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── 控件尺寸：会员站 40px；侧边栏用 data-density="compact" ── */
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-h-xs: 24px;
  --icon-button: 38px;
  --hit-min: 40px;

  /* ── 图标：24 网格、1.5 线宽、圆头、斜接角（方角） ── */
  --ui-icon-stroke: 1.5;
  --icon-sm: 12px; /* 小字旁的 chevron */
  --icon-md: 14px; /* 与文字同行 */
  --icon-lg: 16px; /* 按钮、控件内 */
  --icon-nav: 18px; /* 工具栏 */
  --icon-rail: 20px; /* 侧栏导航 */

  /* ── 动效：只动 opacity / transform；不弹跳 ── */
  --motion-quick: 140ms;  /* 状态变化：hover、颜色、淡入淡出、完成勾 */
  --motion-panel: 180ms;
  --motion-sheet: 200ms;  /* sheet 升起 */
  --motion-medium: 220ms; /* 小型进入：行、筛选、进度 */
  --motion-sheet-out: 120ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── 层级 ── */
  --z-dock: 20;
  --z-popover: 50;
  --z-dialog: 60;
  --z-toast: 70;
}

@media (pointer: coarse) {
  :root {
    --hit-min: 44px;
  }
}

:root[data-density="compact"] {
  --control-h: 32px;
  --control-h-sm: 26px;
  --control-h-xs: 20px;
  --icon-button: 30px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* 暖黑，不是蓝黑 */
  --bg: #171612;
  --paper: #201f1a;
  --wash: #2a2822;
  --wash-strong: #312f28;
  --selected-bg: #38362e;
  --switch-on: #cfc9bd;
  --ink: #f3f0ea;
  --ink-rgb: 243, 240, 234;
  --on-ink: #171612;
  --muted: #a7a194;
  --muted-2: #837d72;
  --line: #34322b;
  --line-strong: #4c483f;
  --paper-rgb: 32, 31, 26;
  --shadow-rgb: 0, 0, 0;
  --success: #4ade80;
  --success-rgb: 74, 222, 128;
  --danger: #f87171;
  --danger-rgb: 248, 113, 113;
  --warning: #f0b35a;
  --warning-rgb: 240, 179, 90;
  --danger-strong: #d03a2f;
  --shadow-popover: 0 18px 44px rgba(0, 0, 0, 0.42);
  --shadow-dialog: 0 28px 76px rgba(0, 0, 0, 0.5);
}

:root[data-corners="rounded"] {
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
}

/* 主色：一个颜色定整个界面的调子，而不是灰底上一个彩色按钮。
   accent.js 写入 --action-custom*（颜色、rgb、其上文字、加深后的文字；亮/暗各一套）。
   - 强调（主按钮、开关、tab 下划线、选中项、焦点）用这个颜色；
   - 选中与 hover 的底色是它的淡层，而不是灰；
   - 背景、wash、线条掺 3–12% 的它，让灰色和它同调。
   正文 --ink、纸色、成功/危险/警告保持不变。 */
:root[data-accent] {
  --action: var(--action-custom);
  --action-rgb: var(--action-rgb-custom);
  --on-action: var(--on-action-custom);
  --action-text: var(--action-text-custom);
  --action-fill: var(--action-fill-custom);
  --action-fill-hover: var(--action-fill-hover-custom);
  --switch-on: var(--action);
  --selected-bg: color-mix(in srgb, var(--action) 13%, #ffffff);
  --bg: color-mix(in srgb, #fcfcfc 97%, var(--action));
  --wash: color-mix(in srgb, #f4f4f5 92%, var(--action));
  --wash-strong: color-mix(in srgb, #ececee 90%, var(--action));
  --line: color-mix(in srgb, #e7e7ea 90%, var(--action));
  --line-strong: color-mix(in srgb, #c9c9ce 88%, var(--action));
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--action) 45%, transparent);
}

:root[data-theme="dark"][data-accent] {
  --action: var(--action-custom-dark);
  --action-rgb: var(--action-rgb-custom-dark);
  --on-action: var(--on-action-custom-dark);
  --action-text: var(--action-text-custom-dark);
  --action-fill: var(--action-fill-custom-dark);
  --action-fill-hover: var(--action-fill-hover-custom-dark);
  --selected-bg: color-mix(in srgb, var(--action) 18%, #201f1a);
  --bg: color-mix(in srgb, #171612 97%, var(--action));
  --wash: color-mix(in srgb, #2a2822 94%, var(--action));
  --wash-strong: color-mix(in srgb, #312f28 92%, var(--action));
  --line: color-mix(in srgb, #34322b 90%, var(--action));
  --line-strong: color-mix(in srgb, #4c483f 88%, var(--action));
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--action) 55%, transparent);
}

/* 选中文字和输入光标也跟主色 */
:root[data-accent] ::selection {
  background: color-mix(in srgb, var(--action) 24%, transparent);
}

:root[data-accent] :is(input, textarea) {
  caret-color: var(--action);
}

/* 系统要求更高对比度（macOS「增强对比度」、prefers-contrast: more）：
   控件边框到 3:1（WCAG 1.4.11），次要文字到 6:1 以上，线条加深。平时保持安静的发丝线。 */
@media (prefers-contrast: more) {
  :root,
  :root[data-accent] {
    --muted: #595959;
    --muted-2: #6b6b6b;
    --line: #b4b4ba;
    --line-strong: #86868b;
  }

  :root[data-theme="dark"],
  :root[data-theme="dark"][data-accent] {
    --muted: #c9c3b6;
    --muted-2: #a7a194;
    --line: #5a564c;
    --line-strong: #8a8478;
  }
}

/* 减少动效：一次性全部静止，组件不各自例外 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@layer xxd.base, xxd.components;

/* src/css/base.css */
@layer xxd.base {
  :where(html) {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  :where(body.xxd-page, .xxd-page) {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: var(--weight-regular) var(--text-sm) / 1.55 var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  :where(.xxd-page) :where(*, *::before, *::after) {
    box-sizing: border-box;
  }
  :where(.xxd-page) :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
  }
  :where(.xxd-page, [class*=xxd-]) :focus-visible {
    outline: 2px solid color-mix(in srgb, var(--action) 60%, transparent);
    outline-offset: 2px;
  }
  :root[data-input=pointer] :where(.xxd-page, [class*=xxd-]) :focus-visible:not(input, textarea, select, [contenteditable]) {
    outline: none;
  }
  :where(.ui-icon) {
    flex: none;
    display: inline-block;
    vertical-align: -0.125em;
  }
  :where(.xxd-page) ::selection {
    background: color-mix(in srgb, var(--action) 18%, transparent);
  }
  :where([class*=xxd-])[hidden] {
    display: none !important;
  }
  .xxd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .xxd-title {
    margin: 0;
    font: var(--weight-strong) var(--text-display) / 1.25 var(--font-title);
    color: var(--ink);
  }
  .xxd-heading {
    margin: 0;
    font: var(--weight-strong) var(--text-lg) / 1.4 var(--font-body);
    color: var(--ink);
  }
  .xxd-muted {
    color: var(--muted);
  }
  .xxd-small {
    font-size: var(--text-xs);
  }
  .xxd-mono {
    font-family: var(--font-mono);
  }
  .xxd-divider {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--line);
  }
  .xxd-read {
    width: 100%;
    max-width: var(--read-width);
    margin-inline: auto;
  }
  .xxd-stack {
    display: grid;
    gap: var(--stack-gap, var(--space-3));
  }
  .xxd-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-2));
  }
}

/* src/css/text.css */
@layer xxd.components {
  .xxd-text {
    margin: 0;
    color: var(--ink);
    font: var(--weight-regular) var(--text-sm) / 1.6 var(--font-body);
  }
  .xxd-text[data-variant=display] {
    font: var(--weight-strong) var(--text-display) / 1.25 var(--font-title);
  }
  .xxd-text[data-variant=heading1] {
    font: var(--weight-strong) var(--text-xl) / 1.35 var(--font-body);
  }
  .xxd-text[data-variant=heading2] {
    font: var(--weight-strong) var(--text-lg) / 1.4 var(--font-body);
  }
  .xxd-text[data-variant=heading3] {
    font: var(--weight-medium) var(--text-base) / 1.45 var(--font-body);
  }
  .xxd-text[data-variant=secondary] {
    color: var(--muted);
  }
  .xxd-text[data-variant=caption] {
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.5;
  }
  .xxd-text[data-variant=mono],
  .xxd-text[data-variant=mono-secondary] {
    font-family: var(--font-mono);
    font-size: 0.92em;
  }
  .xxd-text[data-variant=mono-secondary] {
    color: var(--muted);
  }
  .xxd-text[data-variant=success] {
    color: var(--success);
  }
  .xxd-text[data-variant=danger] {
    color: var(--danger);
  }
  .xxd-text[data-variant=warning] {
    color: var(--warning);
  }
  .xxd-text[data-size=xs] {
    font-size: var(--text-xs);
  }
  .xxd-text[data-size=sm] {
    font-size: var(--text-sm);
  }
  .xxd-text[data-size=base] {
    font-size: var(--text-base);
  }
  .xxd-text[data-size=lg] {
    font-size: var(--text-lg);
  }
  .xxd-text[data-truncate] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .xxd-text-pair {
    display: grid;
    gap: 2px;
  }
}

/* src/css/button.css */
@layer xxd.components {
  .xxd-btn {
    --btn-fg: var(--ink);
    --btn-bg: var(--paper);
    --btn-bd: var(--line-strong);
    --btn-bg-hover: var(--wash);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--control-h);
    padding: 0 14px;
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font: var(--weight-medium) var(--text-sm) / 1 var(--font-body);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--motion-quick) ease,
      border-color var(--motion-quick) ease,
      color var(--motion-quick) ease,
      box-shadow var(--motion-quick) ease,
      opacity var(--motion-quick) ease;
  }
  .xxd-btn::after {
    content: "";
    position: absolute;
    inset: min(0px, calc((var(--control-h) - var(--hit-min)) / 2)) 0;
  }
  .xxd-btn:hover {
    background: var(--btn-bg-hover);
  }
  .xxd-btn[aria-pressed=true] {
    --btn-bg: var(--selected-bg);
    --btn-bg-hover: var(--selected-bg);
    --btn-bd: color-mix(in srgb, var(--action) 30%, var(--line-strong));
  }
  .xxd-btn[data-variant=primary] {
    --btn-fg: var(--on-action);
    --btn-bg: var(--action-fill);
    --btn-bd: var(--action-fill);
    --btn-bg-hover: var(--action-fill-hover);
  }
  .xxd-btn[data-variant=primary]:hover {
    border-color: var(--btn-bg-hover);
  }
  .xxd-btn[data-variant=ghost],
  .xxd-btn.ui-dialog-cancel {
    --btn-bd: transparent;
    --btn-bg: transparent;
  }
  .xxd-btn[data-variant=outline] {
    --btn-bg: transparent;
    --btn-bd: var(--line-strong);
    --btn-bg-hover: transparent;
  }
  .xxd-btn[data-variant=outline]:hover {
    border-color: color-mix(in srgb, var(--ink) 45%, var(--line-strong));
  }
  .xxd-btn.ui-dialog-cancel {
    --btn-fg: var(--muted);
    flex: none;
    width: auto;
  }
  .xxd-btn.ui-dialog-cancel:hover {
    color: var(--ink);
  }
  .xxd-btn[data-variant=danger] {
    --btn-fg: #ffffff;
    --btn-bg: var(--danger-strong);
    --btn-bd: var(--danger-strong);
    --btn-bg-hover: color-mix(in srgb, var(--danger-strong) 88%, #000000);
  }
  .xxd-btn[data-variant=danger-outline] {
    --btn-fg: var(--danger);
    --btn-bd: color-mix(in srgb, var(--danger) 45%, var(--line));
    --btn-bg-hover: color-mix(in srgb, var(--danger) 8%, var(--paper));
  }
  .xxd-btn[data-size=xs] {
    height: var(--control-h-xs);
    gap: 4px;
    padding: 0 8px;
    font-size: var(--text-2xs);
  }
  .xxd-btn[data-size=sm] {
    height: var(--control-h-sm);
    padding: 0 10px;
    font-size: var(--text-xs);
  }
  .xxd-btn[data-size=lg] {
    height: calc(var(--control-h) + 4px);
    padding: 0 18px;
    font-size: var(--text-base);
  }
  .xxd-btn[data-icon-only] {
    width: var(--icon-button);
    height: var(--icon-button);
    padding: 0;
  }
  .xxd-btn[data-icon-only][data-size=sm] {
    width: var(--control-h-sm);
    height: var(--control-h-sm);
  }
  .xxd-btn[data-icon-only][data-size=xs] {
    width: var(--control-h-xs);
    height: var(--control-h-xs);
  }
  .xxd-btn[data-shape=round] {
    border-radius: var(--r-pill);
  }
  .xxd-btn[data-block] {
    display: flex;
    width: 100%;
  }
  .xxd-btn:disabled,
  .xxd-btn[aria-disabled=true] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }
  .xxd-btn[aria-busy=true] {
    color: transparent;
    cursor: progress;
  }
  .xxd-btn[aria-busy=true] > * {
    visibility: hidden;
  }
  .xxd-btn[aria-busy=true]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 1.5px solid var(--btn-fg);
    border-right-color: transparent;
    border-radius: var(--r-circle);
    animation: xxd-spin 0.7s linear infinite;
  }
  .xxd-btn[data-done]:not([data-variant=primary], [data-variant=danger]) > .ui-icon:first-child {
    color: var(--success);
  }
  [data-finish=material] .xxd-btn:not([data-finish=flat] *):is([data-variant=primary], [data-variant=danger]) {
    --btn-bd: color-mix(in srgb, var(--btn-bg) 86%, #000000);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
  [data-finish=material] .xxd-btn:not([data-finish=flat] *):is([data-variant=primary], [data-variant=danger]):active {
    transform: translateY(0.5px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  [data-finish=material] .xxd-btn:not([data-finish=flat] *, [data-variant=primary], [data-variant=danger], [data-variant=ghost], .ui-dialog-cancel):active {
    transform: translateY(0.5px);
  }
  .xxd-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--action-text);
    font: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .xxd-link:hover {
    text-decoration-color: currentColor;
  }
  .xxd-link[data-variant=plain] {
    color: inherit;
    text-decoration: none;
  }
  .xxd-link[data-variant=plain]:hover {
    color: var(--action-text);
  }
  .xxd-link[data-variant=current] {
    color: inherit;
  }
  .xxd-link[target=_blank]::after,
  .xxd-link[data-external]::after {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.2em;
    vertical-align: -0.05em;
    background: currentColor;
    -webkit-mask: var(--xxd-external) center / contain no-repeat;
    mask: var(--xxd-external) center / contain no-repeat;
  }
  .xxd-btn-group {
    display: inline-flex;
  }
  .xxd-btn-group > .xxd-btn {
    border-radius: 0;
  }
  .xxd-btn-group > .xxd-btn + .xxd-btn {
    margin-left: -1px;
  }
  .xxd-btn-group > .xxd-btn[data-variant=primary] + .xxd-btn[data-variant=primary] {
    margin-left: 0;
    border-left-color: color-mix(in srgb, var(--on-action) 30%, var(--action-fill));
  }
  .xxd-btn-group > .xxd-btn:first-child {
    border-start-start-radius: var(--r-sm);
    border-end-start-radius: var(--r-sm);
  }
  .xxd-btn-group > .xxd-btn:last-child {
    border-start-end-radius: var(--r-sm);
    border-end-end-radius: var(--r-sm);
  }
  .xxd-btn-group > .xxd-btn:hover,
  .xxd-btn-group > .xxd-btn:focus-visible {
    z-index: 1;
  }
  @keyframes xxd-spin {
    to {
      transform: rotate(360deg);
    }
  }
}

/* src/css/form.css */
@layer xxd.components {
  .xxd-field {
    display: grid;
    gap: 6px;
    min-width: 0;
  }
  .xxd-label {
    color: var(--ink);
    font: var(--weight-medium) var(--text-xs) / 1.4 var(--font-body);
  }
  .xxd-label[data-optional]::after {
    content: attr(data-optional);
    margin-left: 6px;
    color: var(--muted);
    font-weight: var(--weight-regular);
  }
  .xxd-help {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.5;
  }
  .xxd-error {
    margin: 0;
    color: var(--danger);
    font-size: var(--text-xs);
    line-height: 1.5;
  }
  .xxd-input,
  .xxd-textarea,
  .xxd-select > select {
    width: 100%;
    min-width: 0;
    height: var(--control-h);
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink);
    font: var(--weight-regular) var(--text-sm) / 1.4 var(--font-body);
    outline: none;
    transition: border-color var(--motion-quick) ease, background-color var(--motion-quick) ease;
  }
  .xxd-input::placeholder,
  .xxd-textarea::placeholder {
    color: var(--muted);
  }
  .xxd-input:hover,
  .xxd-textarea:hover,
  .xxd-select > select:hover {
    border-color: color-mix(in srgb, var(--ink) 28%, var(--line-strong));
  }
  .xxd-input:focus,
  .xxd-textarea:focus,
  .xxd-select > select:focus {
    border-color: color-mix(in srgb, var(--action) 70%, var(--line-strong));
    outline: none;
  }
  .xxd-input[aria-invalid=true],
  .xxd-textarea[aria-invalid=true],
  .xxd-select > select[aria-invalid=true] {
    border-color: var(--danger);
  }
  .xxd-input:disabled,
  .xxd-textarea:disabled,
  .xxd-select > select:disabled {
    background: var(--wash);
    color: var(--muted);
    cursor: not-allowed;
  }
  .xxd-input[data-size=sm],
  .xxd-select[data-size=sm] > select {
    height: var(--control-h-sm);
    padding-inline: 10px;
    font-size: var(--text-xs);
  }
  .xxd-input[data-size=xs],
  .xxd-select[data-size=xs] > select {
    height: var(--control-h-xs);
    padding-inline: 8px;
    font-size: var(--text-2xs);
  }
  .xxd-input[data-size=lg],
  .xxd-select[data-size=lg] > select {
    height: calc(var(--control-h) + 4px);
    padding-inline: 14px;
    font-size: var(--text-base);
  }
  .xxd-select[data-size=xs] > select,
  .xxd-select[data-size=sm] > select {
    padding-right: 28px;
  }
  .xxd-select:is([data-size=xs], [data-size=sm])::after {
    right: 8px;
    width: 12px;
    height: 12px;
  }
  .xxd-help[data-counter] {
    justify-self: end;
    font-variant-numeric: tabular-nums;
  }
  .xxd-help[data-counter][data-over] {
    color: var(--danger);
  }
  .xxd-textarea {
    height: auto;
    min-height: 88px;
    padding: 10px 12px;
    line-height: 1.6;
    resize: vertical;
  }
  .xxd-textarea[data-autosize] {
    field-sizing: content;
    resize: none;
  }
  .xxd-select {
    position: relative;
    display: inline-grid;
    min-width: 0;
  }
  .xxd-select > select {
    appearance: none;
    padding-right: 36px;
    cursor: pointer;
  }
  .xxd-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 14px;
    height: 14px;
    translate: 0 -50%;
    background: var(--muted);
    pointer-events: none;
    -webkit-mask: var(--xxd-chevron-down) center / contain no-repeat;
    mask: var(--xxd-chevron-down) center / contain no-repeat;
  }
  .xxd-select[data-variant=bare] > select {
    height: auto;
    padding: 4px 22px 4px 4px;
    border-color: transparent;
    background: transparent;
    text-align: right;
    text-align-last: right;
  }
  .xxd-select[data-variant=bare] > select:hover {
    color: var(--ink);
    background: var(--wash);
  }
  .xxd-select[data-variant=bare]::after {
    right: 4px;
    width: 12px;
    height: 12px;
  }
  .xxd-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .xxd-input-wrap > .ui-icon {
    position: absolute;
    left: 12px;
    color: var(--muted);
    pointer-events: none;
  }
  .xxd-input-wrap > .xxd-input {
    padding-left: 34px;
  }
  .xxd-input-wrap > .xxd-input-clear {
    position: absolute;
    right: 6px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
  }
  .xxd-input-wrap > .xxd-input-clear:hover {
    background: var(--wash);
    color: var(--ink);
  }
  .xxd-input-wrap > .xxd-input:placeholder-shown ~ .xxd-input-clear {
    display: none;
  }
  .xxd-input[type=search]::-webkit-search-cancel-button {
    display: none;
  }
  .xxd-switch {
    appearance: none;
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    margin: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--wash-strong);
    cursor: pointer;
    transition: background-color var(--motion-quick) ease, border-color var(--motion-quick) ease;
  }
  .xxd-switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: var(--r-pill);
    background: var(--paper);
    box-shadow: 0 0 0 0.5px rgba(var(--shadow-rgb), 0.18);
    transition: transform var(--motion-medium) var(--ease-out-expo);
  }
  .xxd-switch:checked {
    border-color: var(--switch-on);
    background: var(--switch-on);
  }
  .xxd-switch:checked::before {
    transform: translateX(14px);
  }
  .xxd-switch:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .xxd-check,
  .xxd-radio {
    appearance: none;
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    cursor: pointer;
    transition: background-color var(--motion-quick) ease, border-color var(--motion-quick) ease;
  }
  .xxd-check {
    border-radius: var(--r-xs);
  }
  .xxd-radio {
    border-radius: var(--r-circle);
  }
  .xxd-check:hover,
  .xxd-radio:hover {
    border-color: color-mix(in srgb, var(--ink) 40%, var(--line-strong));
  }
  .xxd-check:checked,
  .xxd-check:indeterminate {
    border-color: var(--action-fill);
    background: var(--action-fill);
  }
  .xxd-check:checked::after,
  .xxd-check:indeterminate::after {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--on-action);
    -webkit-mask: var(--xxd-check) center / contain no-repeat;
    mask: var(--xxd-check) center / contain no-repeat;
  }
  .xxd-check:indeterminate::after {
    -webkit-mask-image: var(--xxd-minus);
    mask-image: var(--xxd-minus);
  }
  .xxd-radio:checked {
    border-color: var(--action);
    background: var(--action);
    box-shadow: inset 0 0 0 3.5px var(--paper);
  }
  .xxd-check:disabled,
  .xxd-radio:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .xxd-choice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--ink);
    font-size: var(--text-sm);
    line-height: 1.5;
    cursor: pointer;
  }
  .xxd-choice:has(:disabled) {
    color: var(--muted);
    cursor: not-allowed;
  }
  .xxd-choice > .xxd-switch {
    margin-top: 0;
  }
  .xxd-choice small {
    display: block;
    color: var(--muted);
    font-size: var(--text-xs);
  }
  .xxd-choices {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .xxd-choices > legend {
    margin-bottom: 8px;
    padding: 0;
    color: var(--ink);
    font: var(--weight-medium) var(--text-xs) / 1.4 var(--font-body);
  }
  .xxd-range {
    appearance: none;
    width: 100%;
    height: 20px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    --xxd-range-fill: var(--action);
  }
  .xxd-range::-webkit-slider-runnable-track {
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--line-strong);
  }
  .xxd-range::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -6px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--paper);
  }
  .xxd-range:active::-webkit-slider-thumb {
    border-color: var(--action);
  }
  .xxd-range::-moz-range-track {
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--line-strong);
  }
  .xxd-range::-moz-range-progress {
    height: 2px;
    background: var(--xxd-range-fill);
  }
  .xxd-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--paper);
  }
  .xxd-input[type=date],
  .xxd-input[type=time],
  .xxd-input[type=datetime-local] {
    font-variant-numeric: tabular-nums;
  }
  .xxd-input::-webkit-calendar-picker-indicator {
    opacity: 0.55;
    cursor: pointer;
  }
  :root[data-theme=dark] .xxd-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }
  .xxd-taginput {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: var(--control-h);
    padding: 5px 8px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--paper);
    cursor: text;
  }
  .xxd-taginput:focus-within {
    border-color: color-mix(in srgb, var(--action) 70%, var(--line-strong));
  }
  .xxd-taginput > input {
    flex: 1;
    min-width: 80px;
    height: 26px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    outline: none;
  }
}
:root,
:host {
  --xxd-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='miter'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --xxd-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='miter'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --xxd-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='miter'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E");
  --xxd-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='miter'%3E%3Cpath d='M11 4H4v16h16v-7M14 4h6v6m-10 4L20 4'/%3E%3C/svg%3E");
  --xxd-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

/* src/css/form-plus.css */
@layer xxd.components {
  .xxd-input-group {
    display: flex;
    align-items: center;
    min-width: 0;
    height: var(--control-h);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--paper);
    transition: border-color var(--motion-quick) ease;
  }
  .xxd-input-group:hover {
    border-color: color-mix(in srgb, var(--ink) 28%, var(--line-strong));
    transition-duration: 0s;
  }
  .xxd-input-group:focus-within {
    border-color: color-mix(in srgb, var(--action) 70%, var(--line-strong));
  }
  .xxd-input-group[aria-invalid=true] {
    border-color: var(--danger);
  }
  .xxd-input-group > input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: var(--weight-regular) var(--text-sm) / 1.4 var(--font-body);
    outline: none;
  }
  .xxd-input-group > input::placeholder {
    color: var(--muted);
  }
  .xxd-input-group__addon,
  .xxd-input-group__suffix {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 100%;
    color: var(--muted);
    font-size: var(--text-sm);
    white-space: nowrap;
  }
  .xxd-input-group__addon {
    padding-left: 12px;
  }
  .xxd-input-group__addon + input {
    padding-left: 4px;
  }
  .xxd-input-group__suffix {
    padding-right: 12px;
  }
  input + .xxd-input-group__suffix {
    margin-left: -8px;
  }
  .xxd-input-group > .xxd-btn {
    flex: none;
    margin-right: 4px;
  }
  .xxd-input-group > .xxd-btn + .xxd-btn {
    margin-left: -2px;
  }
  .xxd-input-group[data-size=sm] {
    height: var(--control-h-sm);
  }
  .xxd-input-group[data-size=sm] > input,
  .xxd-input-group[data-size=sm] .xxd-input-group__addon,
  .xxd-input-group[data-size=sm] .xxd-input-group__suffix {
    font-size: var(--text-xs);
  }
  .xxd-secret > input {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0;
  }
  .xxd-secret > input[type=password] {
    letter-spacing: 0.12em;
  }
  .xxd-clipboard {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    height: var(--control-h);
    padding: 0 4px 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--wash);
  }
  .xxd-clipboard > code {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font: var(--text-xs) / 1 var(--font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .xxd-clipboard[data-size=sm] {
    height: var(--control-h-sm);
  }
  .xxd-inline-copy {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: copy;
  }
  .xxd-inline-copy > .ui-icon {
    opacity: 0;
    color: var(--muted);
    transition: opacity var(--motion-quick) ease;
  }
  .xxd-inline-copy:is(:hover, :focus-visible) > .ui-icon,
  .xxd-inline-copy[data-done] > .ui-icon {
    opacity: 1;
  }
  @media (hover: none) {
    .xxd-inline-copy > .ui-icon {
      opacity: 1;
    }
  }
  .xxd-picker {
    position: relative;
    display: inline-grid;
    min-width: 160px;
  }
  .xxd-picker__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--control-h);
    padding: 0 34px 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink);
    font: var(--weight-regular) var(--text-sm) / 1 var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--motion-quick) ease;
  }
  .xxd-picker__trigger:hover {
    border-color: color-mix(in srgb, var(--ink) 28%, var(--line-strong));
    transition-duration: 0s;
  }
  .xxd-picker__trigger[aria-expanded=true] {
    border-color: color-mix(in srgb, var(--action) 70%, var(--line-strong));
  }
  .xxd-picker__trigger::after {
    content: "";
    position: absolute;
    right: 12px;
    width: 14px;
    height: 14px;
    background: var(--muted);
    -webkit-mask: var(--xxd-chevron-down) center / contain no-repeat;
    mask: var(--xxd-chevron-down) center / contain no-repeat;
  }
  .xxd-picker__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .xxd-picker__value[data-placeholder] {
    color: var(--muted);
  }
  .xxd-picker[data-size=sm] .xxd-picker__trigger {
    height: var(--control-h-sm);
    padding-left: 10px;
    font-size: var(--text-xs);
  }
  .xxd-picker[aria-invalid=true] .xxd-picker__trigger {
    border-color: var(--danger);
  }
  .xxd-picker[data-disabled] .xxd-picker__trigger {
    background: var(--wash);
    color: var(--muted);
    cursor: not-allowed;
  }
  .xxd-option-group + .xxd-option-group {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
  }
  .xxd-option-group__label {
    padding: 6px 10px 2px;
    color: var(--muted);
    font-size: var(--text-2xs);
  }
  .xxd-option small {
    display: block;
    color: var(--muted);
    font-size: var(--text-2xs);
    line-height: 1.4;
  }
  .xxd-option > .ui-icon {
    color: var(--muted);
  }
  .xxd-option[aria-disabled=true] {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .xxd-option:has(small) {
    align-items: flex-start;
    padding-block: 6px;
  }
  .xxd-listbox[data-picker] {
    min-width: 200px;
    max-width: min(360px, calc(100vw - 16px));
    transform-origin: var(--xxd-origin, top left);
    animation: xxd-grow var(--motion-quick) var(--ease-out-expo);
  }
  @keyframes xxd-grow {
    from {
      opacity: 0;
      transform: scale(0.96);
    }
  }
}

/* src/css/navigation.css */
@layer xxd.components {
  .xxd-tabs {
    position: relative;
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .xxd-tabs::-webkit-scrollbar {
    display: none;
  }
  .xxd-tabs > [role=tab] {
    position: relative;
    flex: none;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: var(--weight-medium) var(--text-sm) / 1 var(--font-body);
    cursor: pointer;
    transition: color var(--motion-quick) ease;
  }
  .xxd-tabs > [role=tab]:hover {
    color: var(--ink);
  }
  .xxd-tabs > [role=tab][aria-selected=true] {
    color: var(--ink);
  }
  .xxd-tabs > [role=tab] .xxd-count {
    margin-left: 4px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
  }
  .xxd-tabs__ink {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100px;
    height: 2px;
    background: var(--action);
    transform-origin: left center;
    transform: translateX(var(--ink-x, 0px)) scaleX(calc(var(--ink-w, 0) / 100));
    transition: transform var(--motion-medium) var(--ease-out-expo);
    pointer-events: none;
  }
  .xxd-tabs:not(:has(.xxd-tabs__ink)) > [role=tab][aria-selected=true]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--action);
  }
  .xxd-tabs[data-size=sm] > [role=tab] {
    height: 34px;
    font-size: var(--text-xs);
  }
  [role=tabpanel].xxd-tabpanel[hidden] {
    display: none;
  }
  [role=tabpanel].xxd-tabpanel {
    animation: xxd-fade-in var(--motion-quick) ease;
  }
  .xxd-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--r-sm);
    background: var(--wash);
  }
  .xxd-segmented > [role=radio],
  .xxd-segmented > button {
    flex: 1 0 auto;
    height: calc(var(--control-h-sm) - 4px);
    padding: 0 12px;
    border: 0;
    border-radius: calc(var(--r-sm) - 2px);
    background: transparent;
    color: var(--muted);
    font: var(--weight-medium) var(--text-xs) / 1 var(--font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--motion-quick) ease, background-color var(--motion-quick) ease;
  }
  .xxd-segmented > :hover {
    color: var(--ink);
  }
  .xxd-segmented > [aria-checked=true],
  .xxd-segmented > [aria-pressed=true] {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 0 0 1px var(--line);
  }
  .xxd-segmented[data-block] {
    display: flex;
  }
  .xxd-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: var(--text-xs);
    list-style: none;
  }
  .xxd-breadcrumbs > li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .xxd-breadcrumbs > li + li::before {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--muted-2);
    -webkit-mask: var(--xxd-chevron-right) center / contain no-repeat;
    mask: var(--xxd-chevron-right) center / contain no-repeat;
  }
  .xxd-breadcrumbs a {
    color: inherit;
    text-decoration: none;
  }
  .xxd-breadcrumbs a:hover {
    color: var(--ink);
  }
  .xxd-breadcrumbs [aria-current=page] {
    color: var(--ink);
  }
  .xxd-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }
  .xxd-pagination > a,
  .xxd-pagination > button {
    display: inline-grid;
    place-items: center;
    min-width: var(--control-h-sm);
    height: var(--control-h-sm);
    padding: 0 8px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--muted);
    font: var(--weight-medium) var(--text-xs) / 1 var(--font-body);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    cursor: pointer;
  }
  .xxd-pagination > :hover {
    background: var(--wash);
    color: var(--ink);
  }
  .xxd-pagination > [aria-current=page] {
    background: var(--selected-bg);
    color: var(--ink);
  }
  .xxd-pagination > :disabled {
    opacity: 0.4;
    pointer-events: none;
  }
  .xxd-pagination > .xxd-pagination__gap {
    min-width: 20px;
    color: var(--muted);
    pointer-events: none;
  }
  .xxd-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 56px;
    padding: 8px 0;
    border-right: 1px solid var(--line);
    background: var(--bg);
  }
  .xxd-rail > a,
  .xxd-rail > button {
    display: grid;
    justify-items: center;
    gap: 3px;
    width: 48px;
    padding: 6px 0 5px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: color-mix(in srgb, var(--ink) 60%, var(--paper));
    font: var(--weight-medium) 10px / 1.2 var(--font-body);
    text-decoration: none;
    cursor: pointer;
  }
  .xxd-rail > :hover {
    background: var(--wash);
    color: var(--ink);
  }
  .xxd-rail > [aria-current=page],
  .xxd-rail > [aria-selected=true] {
    background: var(--selected-bg);
    color: var(--ink);
  }
  .xxd-rail > * > .ui-icon {
    width: var(--icon-rail);
    height: var(--icon-rail);
  }
  .xxd-rail__spacer {
    flex: 1;
  }
  .xxd-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 56px;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  .xxd-topbar__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font: var(--weight-medium) var(--text-sm) / 1.3 var(--font-body);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @keyframes xxd-fade-in {
    from {
      opacity: 0;
    }
  }
}

/* src/css/settings.css */
@layer xxd.components {
  .xxd-settings {
    display: grid;
    gap: var(--space-6);
  }
  .xxd-group {
    display: grid;
    gap: 6px;
    min-width: 0;
  }
  .xxd-group__title {
    margin: 0;
    padding: 0 2px;
    color: var(--muted);
    font: var(--weight-medium) var(--text-xs) / 1.4 var(--font-body);
  }
  .xxd-group__body {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    overflow: hidden;
  }
  .xxd-group__note {
    margin: 2px 2px 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.5;
  }
  .xxd-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px var(--space-3);
    min-height: 48px;
    padding: 10px 14px;
  }
  .xxd-row + .xxd-row {
    border-top: 1px solid var(--line);
  }
  .xxd-row[data-stack] {
    flex-direction: column;
    align-items: stretch;
  }
  .xxd-row[data-stack] > .xxd-row__text {
    flex: none;
  }
  .xxd-row__text {
    flex: 1 1 7em;
    min-width: 0;
  }
  .xxd-row__title {
    color: var(--ink);
    font: var(--weight-medium) var(--text-sm) / 1.4 var(--font-body);
  }
  .xxd-row__desc {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.5;
  }
  .xxd-row__control {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  a.xxd-row,
  button.xxd-row,
  label.xxd-row {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  a.xxd-row:hover,
  button.xxd-row:hover,
  label.xxd-row:hover {
    background: var(--wash);
  }
  a.xxd-row::after,
  button.xxd-row[data-chevron]::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: var(--muted-2);
    -webkit-mask: var(--xxd-chevron-right) center / contain no-repeat;
    mask: var(--xxd-chevron-right) center / contain no-repeat;
  }
  .xxd-row[data-tone=danger] .xxd-row__title {
    color: var(--danger);
  }
  .xxd-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .xxd-list > .xxd-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: 8px 14px;
    color: var(--ink);
  }
  .xxd-list > .xxd-list__item + .xxd-list__item {
    border-top: 1px solid var(--line);
  }
  .xxd-list[data-interactive] > .xxd-list__item {
    cursor: pointer;
  }
  .xxd-list[data-interactive] > .xxd-list__item:hover {
    background: var(--wash);
  }
  .xxd-list > .xxd-list__item[aria-selected=true],
  .xxd-list > .xxd-list__item[aria-current]:not([aria-current=false]),
  .xxd-list > .xxd-list__item[data-selected] {
    background: var(--selected-bg);
  }
  .xxd-list__main {
    flex: 1;
    min-width: 0;
  }
  .xxd-list__title {
    overflow: hidden;
    font: var(--weight-medium) var(--text-sm) / 1.4 var(--font-body);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .xxd-list__meta {
    color: var(--muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
  }
  .xxd-list__item[data-dragging] {
    opacity: 0.6;
  }
  .xxd-glyphs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  }
  .xxd-glyphs > button {
    height: 36px;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--ink);
    font-size: var(--text-lg);
    cursor: pointer;
  }
  .xxd-glyphs > button:hover {
    background: var(--wash);
  }
}

/* src/css/overlay.css */
@layer xxd.components {
  .xxd-surface-float {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow-popover);
  }
  .xxd-dialog {
    width: min(440px, calc(100vw - 32px));
    max-height: min(680px, calc(100dvh - 48px));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow-dialog);
    overflow: auto;
    opacity: 1;
    transform: none;
    transition:
      opacity var(--motion-medium) var(--ease-out-expo),
      transform var(--motion-medium) var(--ease-out-expo),
      overlay var(--motion-medium) allow-discrete,
      display var(--motion-medium) allow-discrete;
  }
  .xxd-dialog:not([open]) {
    opacity: 0;
    transform: translateY(8px);
  }
  @starting-style {
    .xxd-dialog[open] {
      opacity: 0;
      transform: translateY(8px);
    }
  }
  .xxd-dialog::backdrop {
    background: var(--backdrop);
  }
  .xxd-dialog[data-size=lg] {
    width: min(640px, calc(100vw - 32px));
  }
  .xxd-dialog__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 16px 16px 0 20px;
  }
  .xxd-dialog__title {
    flex: 1;
    margin: 0;
    font: var(--weight-strong) var(--text-lg) / 1.4 var(--font-body);
  }
  .xxd-dialog__body {
    padding: 8px 20px 4px;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.6;
  }
  .xxd-dialog__body > * + * {
    margin-top: var(--space-3);
  }
  .xxd-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: 16px 20px 20px;
  }
  .xxd-dialog__actions > .xxd-btn {
    min-height: var(--hit-min);
  }
  @media (max-width: 480px) {
    .xxd-dialog__actions > .xxd-btn:last-child:not(.ui-dialog-cancel) {
      flex: 1;
    }
  }
  .xxd-dock {
    position: sticky;
    bottom: 0;
    z-index: var(--z-dock);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .xxd-dock__status {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .xxd-dock__status[data-tone=danger] {
    color: var(--danger);
  }
  .xxd-dock__status[data-tone=warning] {
    color: var(--warning);
  }
  .xxd-dock__tools {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .xxd-dock__primary {
    flex: none;
  }
  .xxd-dock__danger {
    padding-right: var(--space-3);
    border-right: 1px solid var(--line);
  }
  .xxd-sheet-host {
    position: relative;
  }
  .xxd-scrim {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-dock) + 1);
    background: rgba(var(--shadow-rgb), 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-sheet-out) ease;
  }
  .xxd-scrim[data-open] {
    opacity: 1;
    pointer-events: auto;
    transition-duration: var(--motion-sheet);
  }
  .xxd-sheet {
    position: absolute;
    right: 8px;
    bottom: 64px;
    left: 8px;
    z-index: calc(var(--z-dock) + 2);
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 96px);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition:
      opacity var(--motion-sheet-out) ease,
      transform var(--motion-sheet-out) ease,
      visibility 0s linear var(--motion-sheet-out);
  }
  .xxd-sheet[data-open] {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition:
      opacity var(--motion-sheet) var(--ease-out-expo),
      transform var(--motion-sheet) var(--ease-out-expo),
      visibility 0s;
  }
  .xxd-sheet__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 12px 10px 8px 16px;
  }
  .xxd-sheet__title {
    flex: 1;
    margin: 0;
    font: var(--weight-medium) var(--text-sm) / 1.4 var(--font-body);
  }
  .xxd-sheet__body {
    flex: 1;
    min-height: 0;
    padding: 0 16px 16px;
    overflow: auto;
  }
  .xxd-menu,
  .xxd-popover {
    position: fixed;
    inset: auto;
    margin: 0;
    min-width: 180px;
    max-width: min(320px, calc(100vw - 16px));
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow-popover);
    opacity: 1;
    transform: none;
    transform-origin: var(--xxd-origin, top left);
    transition:
      opacity var(--motion-quick) ease,
      transform var(--motion-quick) var(--ease-out-expo),
      overlay var(--motion-quick) allow-discrete,
      display var(--motion-quick) allow-discrete;
  }
  .xxd-menu:not(:popover-open),
  .xxd-popover:not(:popover-open) {
    opacity: 0;
    transform: scale(0.96);
    transition-duration: 100ms;
  }
  @starting-style {
    .xxd-menu:popover-open,
    .xxd-popover:popover-open {
      opacity: 0;
      transform: scale(0.96);
    }
  }
  .xxd-popover__title {
    margin: 0 0 4px;
    font: var(--weight-medium) var(--text-sm) / 1.4 var(--font-body);
  }
  .xxd-popover__text {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.6;
  }
  .xxd-popover__close {
    position: absolute;
    top: 6px;
    right: 6px;
  }
  :is(.xxd-popover, .xxd-tooltip)[data-arrow]::before {
    content: "";
    position: absolute;
    left: calc(var(--xxd-arrow-x, 50%) - 4px);
    width: 8px;
    height: 8px;
    background: inherit;
    border: inherit;
    border-radius: 0;
    transform: rotate(45deg);
  }
  :is(.xxd-popover, .xxd-tooltip)[data-arrow][data-side=bottom]::before {
    top: -5px;
    border-right: 0;
    border-bottom: 0;
  }
  :is(.xxd-popover, .xxd-tooltip)[data-arrow][data-side=top]::before {
    bottom: -5px;
    border-top: 0;
    border-left: 0;
  }
  .xxd-menu {
    padding: 4px;
  }
  .xxd-popover {
    padding: 12px 14px;
    font-size: var(--text-sm);
  }
  .xxd-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--ink);
    font: var(--weight-medium) var(--text-xs) / 1.3 var(--font-body);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .xxd-menu__item:hover,
  .xxd-menu__item:focus-visible {
    background: var(--wash);
    outline: none;
  }
  .xxd-menu__item > .ui-icon {
    color: var(--muted);
  }
  .xxd-menu__item[aria-checked=true]::after {
    content: "";
    width: 14px;
    height: 14px;
    margin-left: auto;
    background: var(--action);
    -webkit-mask: var(--xxd-check) center / contain no-repeat;
    mask: var(--xxd-check) center / contain no-repeat;
  }
  .xxd-menu__item[data-tone=danger] {
    color: var(--danger);
  }
  .xxd-menu__item[data-tone=danger] > .ui-icon {
    color: inherit;
  }
  .xxd-menu__item:disabled,
  .xxd-menu__item[aria-disabled=true] {
    opacity: 0.45;
    pointer-events: none;
  }
  .xxd-menu__kbd {
    margin-left: auto;
    color: var(--muted);
    font: var(--text-2xs) var(--font-mono);
  }
  .xxd-menu__label {
    padding: 8px 10px 4px;
    color: var(--muted);
    font-size: var(--text-2xs);
  }
  .xxd-menu__sep {
    height: 1px;
    margin: 4px -4px;
    background: var(--line);
  }
  .xxd-tooltip {
    position: fixed;
    z-index: var(--z-toast);
    max-width: 240px;
    padding: 4px 8px;
    border-radius: var(--r-xs);
    background: var(--ink);
    color: var(--on-ink);
    font: var(--weight-medium) var(--text-2xs) / 1.4 var(--font-body);
    box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.16);
    opacity: 0;
    transform: scale(0.96);
    transform-origin: var(--xxd-origin, bottom center);
    pointer-events: none;
    transition: opacity 100ms ease, transform 100ms var(--ease-out-expo);
  }
  .xxd-tooltip[data-open] {
    opacity: 1;
    transform: none;
    transition-duration: var(--motion-quick);
  }
  .xxd-tooltip[data-open][data-instant] {
    transition: none;
  }
  .xxd-toast-region {
    position: fixed;
    right: 0;
    bottom: 16px;
    left: 0;
    z-index: var(--z-toast);
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 0 16px;
    pointer-events: none;
  }
  .xxd-toast-region[data-scoped] {
    position: absolute;
    bottom: var(--toast-offset, 16px);
  }
  .xxd-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(420px, 100%);
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--ink);
    font-size: var(--text-sm);
    line-height: 1.45;
    box-shadow: var(--shadow-popover);
    pointer-events: auto;
    animation: xxd-rise var(--motion-medium) var(--ease-out-expo);
  }
  .xxd-toast[data-leaving] {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--motion-sheet-out) ease, transform var(--motion-sheet-out) ease;
  }
  .xxd-toast[data-tone=success] > .ui-icon {
    color: var(--success);
  }
  .xxd-toast[data-tone=danger] > .ui-icon {
    color: var(--danger);
  }
  .xxd-toast[data-tone=warning] > .ui-icon {
    color: var(--warning);
  }
  .xxd-toast__action {
    margin-left: 4px;
  }
  .xxd-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-dialog);
    display: flex;
    flex-direction: column;
    width: min(560px, 100vw);
    border-left: 1px solid var(--line);
    background: var(--paper);
    box-shadow: var(--shadow-sheet);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--motion-panel) var(--ease-out-quart), visibility 0s linear var(--motion-panel);
  }
  .xxd-panel[data-open] {
    transform: none;
    visibility: visible;
    transition: transform var(--motion-panel) var(--ease-out-quart), visibility 0s;
  }
  .xxd-panel__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 56px;
    padding: 0 var(--space-3) 0 var(--space-5);
    border-bottom: 1px solid var(--line);
  }
  .xxd-panel__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font: var(--weight-medium) var(--text-sm) / 1.3 var(--font-body);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .xxd-panel__body {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: var(--space-5);
    overflow: auto;
  }
  .xxd-panel-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-dialog) - 1);
    background: rgba(var(--shadow-rgb), 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-panel) ease;
  }
  .xxd-panel-scrim[data-open] {
    opacity: 1;
    pointer-events: auto;
  }
  @keyframes xxd-rise {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}
@layer xxd.components {
  .xxd-sheet-host[data-sheet-open] .xxd-dock__primary {
    visibility: hidden;
  }
}
@layer xxd.components {
  .xxd-dialog[data-size=sm] {
    width: min(360px, calc(100vw - 32px));
  }
  .xxd-dialog[data-size=xl] {
    width: min(880px, calc(100vw - 32px));
  }
  .xxd-dialog__desc {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.6;
  }
  .xxd-menu__item[data-submenu]::after {
    content: "";
    width: 12px;
    height: 12px;
    margin-left: auto;
    background: var(--muted);
    -webkit-mask: var(--xxd-chevron-right) center / contain no-repeat;
    mask: var(--xxd-chevron-right) center / contain no-repeat;
  }
  .xxd-menu__item[aria-expanded=true] {
    background: var(--wash);
  }
  .xxd-menu__item[role=menuitemradio]::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin: 0 4px 0 2px;
    border-radius: var(--r-circle);
    background: transparent;
  }
  .xxd-menu__item[role=menuitemradio][aria-checked=true]::before {
    background: var(--action);
  }
  .xxd-menu__item[role=menuitemradio][aria-checked=true]::after {
    content: none;
  }
  .xxd-toast-region[data-stack] {
    display: grid;
    grid-template-areas: "stack";
    align-items: end;
  }
  .xxd-toast-region[data-stack] > .xxd-toast {
    grid-area: stack;
    transform: translateY(calc(var(--i, 0) * -8px)) scale(calc(1 - var(--i, 0) * 0.04));
    transform-origin: bottom center;
    transition: transform var(--motion-medium) var(--ease-out-expo), opacity var(--motion-quick) ease;
  }
  .xxd-toast-region[data-stack] > .xxd-toast[data-hidden-in-stack] {
    opacity: 0;
    pointer-events: none;
  }
  .xxd-toast-region[data-stack]:is(:hover, :focus-within) {
    grid-template-areas: none;
    gap: 8px;
  }
  .xxd-toast-region[data-stack]:is(:hover, :focus-within) > .xxd-toast {
    grid-area: auto;
    transform: none;
  }
  .xxd-toast-region[data-stack]:is(:hover, :focus-within) > .xxd-toast[data-hidden-in-stack] {
    opacity: 1;
    pointer-events: auto;
  }
  .xxd-toast[data-bump] {
    animation: xxd-bump var(--motion-medium) var(--ease-out-expo);
  }
  .xxd-toast-region > .xxd-toast[data-swiping],
  .xxd-toast-region[data-stack] > .xxd-toast[data-swiping] {
    transition: none;
    transform: translateX(var(--swipe-x, 0px));
    opacity: calc(1 - min(1, var(--swipe-p, 0)));
  }
  .xxd-toast[data-tone=info] > .ui-icon {
    color: var(--muted);
  }
  @keyframes xxd-bump {
    40% {
      transform: translateY(-2px);
    }
  }
}
@layer xxd.components {
  @media (max-width: 640px) {
    .xxd-dialog {
      width: 100vw;
      max-width: 100vw;
      max-height: 88dvh;
      margin: auto 0 0;
      border-bottom: 0;
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }
    .xxd-dialog:not([open]),
    .xxd-dialog[open]:not(.xxd-palette) {
      transform-origin: bottom center;
    }
    .xxd-dialog:not(.xxd-palette)::before,
    .xxd-panel::before {
      content: "";
      display: block;
      width: 36px;
      height: 4px;
      margin: 8px auto 0;
      border-radius: var(--r-pill);
      background: var(--line-strong);
    }
    .xxd-panel {
      top: auto;
      width: 100vw;
      max-height: 88dvh;
      border-top: 1px solid var(--line);
      border-left: 0;
      border-start-start-radius: var(--r-lg);
      border-start-end-radius: var(--r-lg);
      transform: translateY(100%);
    }
    .xxd-palette {
      margin-top: 0;
    }
  }
}

/* src/css/feedback.css */
@layer xxd.components {
  .xxd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--r-pill);
    background: var(--wash-strong);
    color: var(--ink);
    font: var(--weight-medium) var(--text-2xs) / 1 var(--font-body);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .xxd-badge[data-tone=action] {
    background: color-mix(in srgb, var(--action) 12%, var(--paper));
    color: var(--action-text);
  }
  .xxd-badge[data-tone=success] {
    background: color-mix(in srgb, var(--success) 12%, var(--paper));
    color: color-mix(in srgb, var(--success) 78%, var(--ink));
  }
  .xxd-badge[data-tone=danger] {
    background: color-mix(in srgb, var(--danger) 12%, var(--paper));
    color: color-mix(in srgb, var(--danger) 78%, var(--ink));
  }
  .xxd-badge[data-tone=warning] {
    background: color-mix(in srgb, var(--warning) 14%, var(--paper));
    color: color-mix(in srgb, var(--warning) 78%, var(--ink));
  }
  .xxd-badge[data-variant=solid] {
    background: var(--ink);
    color: var(--on-ink);
  }
  .xxd-badge[data-variant=solid][data-tone=action] {
    background: var(--action-fill);
    color: var(--on-action);
  }
  .xxd-badge[data-variant=solid][data-tone=success] {
    background: var(--success-strong);
    color: #ffffff;
  }
  .xxd-badge[data-variant=solid][data-tone=danger] {
    background: var(--danger-strong);
    color: #ffffff;
  }
  .xxd-badge[data-variant=outline] {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--line-strong);
  }
  .xxd-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: var(--wash);
    color: var(--ink);
    font: var(--weight-medium) var(--text-xs) / 1 var(--font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--motion-quick) ease, color var(--motion-quick) ease;
  }
  .xxd-chip:hover {
    background: var(--wash-strong);
  }
  .xxd-chip[aria-pressed=true] {
    background: var(--selected-bg);
    border-color: color-mix(in srgb, var(--action) 28%, transparent);
    color: var(--action-text);
  }
  .xxd-chip > button {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-right: -4px;
    padding: 0;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
  }
  .xxd-chip > button:hover {
    color: var(--ink);
  }
  .xxd-dot {
    display: inline-block;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: var(--r-circle);
    background: var(--muted-2);
  }
  .xxd-dot[data-tone=success] {
    background: var(--success);
  }
  .xxd-dot[data-tone=danger] {
    background: var(--danger);
  }
  .xxd-dot[data-tone=warning] {
    background: var(--warning);
  }
  .xxd-dot[data-tone=action] {
    background: var(--action);
  }
  .xxd-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--wash);
    color: var(--ink);
    font-size: var(--text-sm);
    line-height: 1.55;
  }
  .xxd-banner > .ui-icon {
    margin-top: 2px;
    color: var(--muted);
  }
  .xxd-banner__title {
    margin: 0;
    font-weight: var(--weight-medium);
  }
  .xxd-banner__text {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: var(--text-xs);
  }
  .xxd-banner__actions {
    margin-left: auto;
  }
  .xxd-banner[data-tone=warning] {
    border-color: color-mix(in srgb, var(--warning) 28%, var(--line));
    background: color-mix(in srgb, var(--warning) 8%, var(--paper));
  }
  .xxd-banner[data-tone=warning] > .ui-icon {
    color: var(--warning);
  }
  .xxd-banner[data-tone=danger] {
    border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
    background: color-mix(in srgb, var(--danger) 7%, var(--paper));
  }
  .xxd-banner[data-tone=danger] > .ui-icon {
    color: var(--danger);
  }
  .xxd-banner[data-tone=success] {
    border-color: color-mix(in srgb, var(--success) 28%, var(--line));
    background: color-mix(in srgb, var(--success) 7%, var(--paper));
  }
  .xxd-banner[data-tone=success] > .ui-icon {
    color: var(--success);
  }
  .xxd-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: var(--space-8) var(--space-4);
    color: var(--muted);
    text-align: center;
  }
  .xxd-empty > .ui-icon {
    width: 24px;
    height: 24px;
    color: var(--muted-2);
  }
  .xxd-empty__title {
    margin: 0;
    color: var(--ink);
    font: var(--weight-medium) var(--text-base) / 1.4 var(--font-body);
  }
  .xxd-empty__text {
    max-width: 320px;
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.6;
  }
  .xxd-empty__actions {
    margin-top: 6px;
  }
  .xxd-spinner {
    display: inline-block;
    flex: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--r-circle);
    animation: xxd-spin 0.7s linear infinite;
  }
  .xxd-spinner[data-size=lg] {
    width: 20px;
    height: 20px;
  }
  .xxd-progress {
    appearance: none;
    width: 100%;
    height: 4px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--wash-strong);
    overflow: hidden;
  }
  .xxd-progress::-webkit-progress-bar {
    background: var(--wash-strong);
  }
  .xxd-progress::-webkit-progress-value {
    border-radius: var(--r-pill);
    background: var(--action);
  }
  .xxd-progress::-moz-progress-bar {
    border-radius: var(--r-pill);
    background: var(--action);
  }
  .xxd-progress[data-tone=success]::-webkit-progress-value {
    background: var(--success);
  }
  .xxd-progress[data-tone=success]::-moz-progress-bar {
    background: var(--success);
  }
  .xxd-loadbar {
    position: relative;
    height: 2px;
    background: var(--wash-strong);
    overflow: hidden;
  }
  .xxd-loadbar::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: var(--action);
    transform: translateX(-100%);
    animation: xxd-loadbar 1.1s var(--ease-out-quart) infinite;
  }
  .xxd-skeleton {
    position: relative;
    display: block;
    height: 10px;
    border-radius: var(--r-xs);
    background: var(--wash-strong);
    overflow: hidden;
  }
  .xxd-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(var(--paper-rgb), 0.55),
        transparent);
    transform: translateX(-100%);
    animation: xxd-shimmer 1.4s ease-in-out infinite;
  }
  .xxd-meter {
    display: grid;
    gap: 6px;
    font-size: var(--text-xs);
  }
  .xxd-meter__head {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .xxd-meter__track {
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--wash-strong);
    overflow: hidden;
  }
  .xxd-meter__fill {
    height: 100%;
    width: 100%;
    border-radius: var(--r-pill);
    background: var(--action);
    transform-origin: left center;
    transform: scaleX(var(--value, 0));
    transition: transform var(--motion-medium) var(--ease-out-expo);
  }
  @keyframes xxd-shimmer {
    to {
      transform: translateX(100%);
    }
  }
  @keyframes xxd-loadbar {
    to {
      transform: translateX(250%);
    }
  }
}

/* src/css/content.css */
@layer xxd.components {
  .xxd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }
  .xxd-table th {
    height: 36px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line-strong);
    color: var(--muted);
    font: var(--weight-medium) var(--text-xs) / 1.3 var(--font-body);
    text-align: left;
    white-space: nowrap;
  }
  .xxd-table td {
    height: 44px;
    padding: 6px 12px;
    color: var(--ink);
  }
  .xxd-table tbody tr + tr td {
    border-top: 1px solid var(--line);
  }
  .xxd-table[data-interactive] tbody tr:hover td {
    background: var(--wash);
  }
  .xxd-table tbody tr[aria-selected=true] td {
    background: var(--selected-bg);
  }
  .xxd-table [data-align=end] {
    text-align: right;
  }
  .xxd-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
  }
  .xxd-collapse > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: var(--ink);
    font: var(--weight-medium) var(--text-sm) / 1.4 var(--font-body);
    list-style: none;
    cursor: pointer;
  }
  .xxd-collapse > summary::-webkit-details-marker {
    display: none;
  }
  .xxd-collapse > summary::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: var(--muted);
    -webkit-mask: var(--xxd-chevron-right) center / contain no-repeat;
    mask: var(--xxd-chevron-right) center / contain no-repeat;
    transition: transform var(--motion-quick) var(--ease-out-expo);
  }
  .xxd-collapse[open] > summary::before {
    transform: rotate(90deg);
  }
  .xxd-collapse > :not(summary) {
    padding: 0 0 12px 22px;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.6;
  }
  .xxd-collapse + .xxd-collapse {
    border-top: 1px solid var(--line);
  }
  .xxd-code-inline,
  .xxd-prose :not(pre) > code {
    padding: 1px 5px;
    border-radius: var(--r-xs);
    background: color-mix(in srgb, var(--action) 12%, transparent);
    color: var(--ink);
    font: 0.92em var(--font-mono);
  }
  .xxd-code,
  .xxd-prose pre {
    position: relative;
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--action) 6%, var(--paper));
    color: var(--ink);
    font: var(--text-xs) / 1.65 var(--font-mono);
    overflow-x: auto;
    tab-size: 2;
  }
  .xxd-code > .xxd-copy {
    position: absolute;
    top: 6px;
    right: 6px;
  }
  .xxd-kbd {
    display: inline-flex;
    align-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xs);
    background: var(--paper);
    color: var(--muted);
    font: var(--weight-medium) var(--text-2xs) / 1 var(--font-mono);
  }
  .xxd-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--avatar-size, 28px);
    height: var(--avatar-size, 28px);
    border-radius: var(--r-circle);
    background: var(--wash-strong);
    color: var(--ink);
    font: var(--weight-medium) var(--text-xs) / 1 var(--font-body);
    overflow: hidden;
  }
  .xxd-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .xxd-avatar[data-member] {
    box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--action);
  }
  .xxd-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .xxd-swatch {
    position: relative;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(var(--shadow-rgb), 0.12);
    border-radius: var(--r-circle);
    background: var(--swatch, var(--ink));
    cursor: pointer;
  }
  .xxd-swatch[aria-checked=true] {
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink);
  }
  .xxd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    transition: border-color var(--motion-quick) ease;
  }
  a.xxd-card:hover,
  .xxd-card[data-interactive]:hover {
    border-color: var(--line-strong);
  }
  .xxd-card[aria-selected=true] {
    border-color: var(--action);
  }
  .xxd-card__media {
    position: relative;
    aspect-ratio: var(--ratio, 4 / 3);
    background: var(--wash);
    overflow: hidden;
  }
  .xxd-card__media > img,
  .xxd-card__media > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .xxd-card__body {
    display: grid;
    gap: 4px;
    padding: 10px 12px 12px;
  }
  .xxd-card__title {
    margin: 0;
    overflow: hidden;
    font: var(--weight-medium) var(--text-sm) / 1.4 var(--font-body);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .xxd-card__meta {
    color: var(--muted);
    font-size: var(--text-xs);
  }
  .xxd-card__marks {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 3px;
  }
  .xxd-card__marks > .xxd-dot {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 1.5px #ffffff;
  }
  .xxd-card__rating {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 11px;
    height: 11px;
    background: #f5b301;
  }
  .xxd-card__action {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--r-pill);
    background: rgba(5, 5, 5, 0.64);
    color: #ffffff;
    font: var(--weight-medium) var(--text-xs) / 1 var(--font-body);
    opacity: 0;
    cursor: pointer;
    transition: opacity var(--motion-quick) ease, background-color var(--motion-quick) ease;
  }
  .xxd-card:hover .xxd-card__action,
  .xxd-card:focus-within .xxd-card__action {
    opacity: 1;
  }
  .xxd-card__action:hover {
    background: rgba(5, 5, 5, 0.86);
  }
  @media (hover: none) {
    .xxd-card__action {
      opacity: 1;
    }
  }
  .xxd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 220px), 1fr));
    gap: var(--grid-gap, var(--space-4));
  }
  .xxd-masonry {
    columns: var(--grid-min, 220px);
    column-gap: var(--grid-gap, var(--space-4));
  }
  .xxd-masonry > * {
    margin-bottom: var(--grid-gap, var(--space-4));
    break-inside: avoid;
  }
  .xxd-copy[data-done] {
    color: var(--success);
  }
  .xxd-prose {
    max-width: var(--read-width);
    color: color-mix(in srgb, var(--ink) 88%, var(--muted));
    font-size: var(--text-md);
    line-height: 1.8;
    overflow-wrap: break-word;
  }
  .xxd-prose > * {
    margin: 0;
  }
  .xxd-prose > * + * {
    margin-top: 12px;
  }
  .xxd-prose h1,
  .xxd-prose h2,
  .xxd-prose h3 {
    color: var(--ink);
    font-family: var(--font-title);
    font-weight: var(--weight-strong);
    line-height: 1.35;
  }
  .xxd-prose h1 {
    font-size: var(--text-display);
  }
  .xxd-prose h2 {
    margin-top: 32px;
    font-size: var(--text-xl);
  }
  .xxd-prose h3 {
    margin-top: 24px;
    font-size: var(--text-lg);
  }
  .xxd-prose h2 + *,
  .xxd-prose h3 + * {
    margin-top: 8px;
  }
  .xxd-prose a {
    color: var(--action-text);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--action) 40%, transparent);
    text-underline-offset: 3px;
  }
  .xxd-prose a:hover {
    text-decoration-color: var(--action);
  }
  .xxd-prose ul,
  .xxd-prose ol {
    padding-left: 1.4em;
  }
  .xxd-prose li::marker {
    color: var(--action);
  }
  .xxd-prose li + li {
    margin-top: 4px;
  }
  .xxd-prose blockquote {
    padding-left: 14px;
    border-left: 2px solid color-mix(in srgb, var(--action) 40%, transparent);
    color: color-mix(in srgb, var(--ink) 72%, transparent);
  }
  .xxd-prose hr {
    height: 1px;
    margin: 24px 0;
    border: 0;
    background: color-mix(in srgb, var(--action) 40%, transparent);
  }
  .xxd-prose img,
  .xxd-prose video {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md);
  }
  .xxd-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }
  .xxd-prose th {
    border-bottom: 1px solid color-mix(in srgb, var(--action) 40%, transparent);
    text-align: left;
  }
  .xxd-prose th,
  .xxd-prose td {
    padding: 6px 10px;
  }
  .xxd-prose tr + tr td {
    border-top: 1px solid var(--line);
  }
  .xxd-prose mark {
    padding: 0 2px;
    background: color-mix(in srgb, var(--action) 18%, transparent);
    color: inherit;
  }
  .xxd-hit {
    padding: 0 1px;
    border-radius: var(--r-xs);
    background: color-mix(in srgb, var(--action) 22%, transparent);
    color: inherit;
  }
}

/* src/css/palette.css */
@layer xxd.components {
  .xxd-palette {
    width: min(560px, calc(100vw - 32px));
    margin-top: min(14vh, 120px);
    padding: 0;
  }
  .xxd-palette__search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
  }
  .xxd-palette__search > .ui-icon {
    color: var(--muted);
  }
  .xxd-palette__search > input {
    flex: 1;
    height: 48px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: var(--text-base) var(--font-body);
    outline: none;
  }
  .xxd-palette__list {
    max-height: min(360px, 50vh);
    margin: 0;
    padding: 4px;
    overflow: auto;
    list-style: none;
  }
  .xxd-palette__empty {
    padding: 24px 14px;
    color: var(--muted);
    font-size: var(--text-xs);
    text-align: center;
  }
  .xxd-listbox {
    position: fixed;
    z-index: var(--z-popover);
    margin: 0;
    padding: 4px;
    max-height: 280px;
    overflow: auto;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    box-shadow: var(--shadow-popover);
  }
  .xxd-listbox[hidden] {
    display: none;
  }
  .xxd-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: var(--r-xs);
    color: var(--ink);
    font-size: var(--text-xs);
    cursor: pointer;
  }
  .xxd-option[data-active] {
    background: var(--wash);
  }
  .xxd-option[aria-selected=true]::after {
    content: "";
    width: 14px;
    height: 14px;
    margin-left: auto;
    background: var(--action);
    -webkit-mask: var(--xxd-check) center / contain no-repeat;
    mask: var(--xxd-check) center / contain no-repeat;
  }
  .xxd-option__hint {
    margin-left: auto;
    color: var(--muted);
    font-size: var(--text-2xs);
  }
}

/* src/css/structure.css */
@layer xxd.components {
  .xxd-sidebar {
    --sidebar-w: 248px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: none;
    width: var(--sidebar-w);
    height: 100%;
    min-height: 0;
    border-right: 1px solid var(--line);
    background: var(--bg);
  }
  .xxd-sidebar[data-collapsed] {
    width: 56px;
  }
  .xxd-sidebar[data-variant=floating] {
    margin: 8px;
    height: calc(100% - 16px);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-popover);
  }
  .xxd-sidebar[data-variant=inset] {
    border-right: 0;
    background: transparent;
  }
  .xxd-sidebar__head,
  .xxd-sidebar__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 0 12px;
  }
  .xxd-sidebar__head {
    border-bottom: 1px solid var(--line);
  }
  .xxd-sidebar__foot {
    margin-top: auto;
    border-top: 1px solid var(--line);
  }
  .xxd-sidebar__body {
    flex: 1;
    min-height: 0;
    padding: 8px;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .xxd-sidebar__group + .xxd-sidebar__group {
    margin-top: 16px;
  }
  .xxd-sidebar__label {
    padding: 4px 8px;
    color: var(--muted);
    font: var(--weight-medium) var(--text-2xs) / 1.4 var(--font-body);
    white-space: nowrap;
  }
  .xxd-sidebar__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 34px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: color-mix(in srgb, var(--ink) 78%, var(--muted));
    font: var(--weight-medium) var(--text-sm) / 1.3 var(--font-body);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--motion-quick) ease, color var(--motion-quick) ease;
  }
  .xxd-sidebar__item:hover {
    background: var(--wash);
    color: var(--ink);
  }
  .xxd-sidebar__item[aria-current=page] {
    background: var(--selected-bg);
    color: var(--ink);
  }
  .xxd-sidebar__item > .ui-icon {
    flex: none;
    width: var(--icon-nav);
    height: var(--icon-nav);
  }
  .xxd-sidebar__item > span:not(.xxd-badge) {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--motion-quick) ease;
  }
  .xxd-sidebar__item[aria-expanded]::after {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    background: var(--muted);
    -webkit-mask: var(--xxd-chevron-right) center / contain no-repeat;
    mask: var(--xxd-chevron-right) center / contain no-repeat;
    transition: transform var(--motion-quick) var(--ease-out-expo);
  }
  .xxd-sidebar__item[aria-expanded=true]::after {
    transform: rotate(90deg);
  }
  .xxd-sidebar__sub {
    margin: 2px 0 4px 18px;
    padding-left: 10px;
    border-left: 1px solid var(--line);
  }
  .xxd-sidebar__sub .xxd-sidebar__item {
    min-height: 30px;
    font-size: var(--text-xs);
  }
  .xxd-sidebar[data-collapsed] .xxd-sidebar__label,
  .xxd-sidebar[data-collapsed] .xxd-sidebar__item > span,
  .xxd-sidebar[data-collapsed] .xxd-sidebar__item[aria-expanded]::after,
  .xxd-sidebar[data-collapsed] .xxd-sidebar__sub,
  .xxd-sidebar[data-collapsed] [data-sidebar-hide] {
    opacity: 0;
    pointer-events: none;
  }
  .xxd-sidebar[data-collapsed] .xxd-sidebar__sub,
  .xxd-sidebar[data-collapsed] .xxd-sidebar__label {
    display: none;
  }
  .xxd-sidebar[data-collapsed] .xxd-sidebar__item {
    justify-content: center;
    padding: 0;
  }
  .xxd-sidebar[data-collapsed] .xxd-sidebar__item > span {
    position: absolute;
    width: 1px;
    overflow: hidden;
  }
  .xxd-sidebar__resize {
    position: absolute;
    top: 0;
    right: -3px;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
  }
  .xxd-sidebar__resize::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    width: 2px;
    background: var(--action);
    opacity: 0;
    transition: opacity var(--motion-quick) ease;
  }
  .xxd-sidebar__resize:hover::after,
  .xxd-sidebar[data-resizing] .xxd-sidebar__resize::after {
    opacity: 1;
  }
  .xxd-sidebar[data-collapsed] .xxd-sidebar__resize {
    display: none;
  }
  .xxd-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    min-height: 40px;
    padding: 4px;
  }
  .xxd-toolbar[data-framed] {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
  }
  .xxd-toolbar__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--muted);
    font: var(--weight-medium) var(--text-xs) / 1 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--motion-quick) ease, color var(--motion-quick) ease;
  }
  .xxd-toolbar__item:hover {
    background: var(--wash);
    color: var(--ink);
  }
  .xxd-toolbar__item[aria-pressed=true] {
    background: var(--selected-bg);
    color: var(--ink);
  }
  .xxd-toolbar__item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .xxd-toolbar__sep {
    flex: none;
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: var(--line);
  }
  .xxd-toolbar__spacer {
    flex: 1;
  }
  .xxd-toolbar[data-size=sm] .xxd-toolbar__item {
    min-width: 26px;
    height: 26px;
  }
  .xxd-toolbar[data-size=lg] .xxd-toolbar__item {
    min-width: 36px;
    height: 36px;
    font-size: var(--text-sm);
  }
  .xxd-layer {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--wash);
    overflow: hidden;
  }
  .xxd-layer__secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 14px;
    color: var(--muted);
    font-size: var(--text-xs);
  }
  .xxd-layer__primary {
    padding: 14px;
    border-top: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
  }
  .xxd-layer__primary:first-child {
    border-top: 0;
    border-bottom: 1px solid var(--line);
  }
  .xxd-layout {
    display: grid;
    gap: var(--layout-gap, var(--space-4));
    grid-template-columns: 1fr;
  }
  @media (min-width: 720px) {
    .xxd-layout[data-cols="2up"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .xxd-layout[data-cols="3up"] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .xxd-layout[data-cols="4up"] {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .xxd-layout[data-cols="1-2"] {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
    .xxd-layout[data-cols="2-1"] {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
    .xxd-layout[data-cols="1-3"] {
      grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    }
    .xxd-layout[data-cols=side] {
      grid-template-columns: 240px minmax(0, 1fr);
    }
  }
  .xxd-surface {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
  }
  .xxd-surface[data-level=sunken] {
    background: var(--wash);
  }
  .xxd-surface[data-level=raised] {
    box-shadow: var(--shadow-popover);
  }
  .xxd-page-header {
    display: grid;
    gap: 6px;
    padding: var(--space-6) 0 var(--space-4);
  }
  .xxd-page-header__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .xxd-page-header__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font: var(--weight-strong) var(--text-xl) / 1.35 var(--font-body);
  }
  .xxd-page-header__desc {
    max-width: 640px;
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.6;
  }
  .xxd-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .xxd-page-header > .xxd-tabs {
    margin-top: var(--space-2);
  }
  .xxd-toc {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
  }
  .xxd-toc__title {
    margin: 0 0 6px;
    color: var(--muted);
    font: var(--weight-medium) var(--text-2xs) / 1.4 var(--font-body);
  }
  .xxd-toc a {
    display: block;
    padding: 4px 0 4px 10px;
    border-left: 1px solid var(--line);
    color: var(--muted);
    text-decoration: none;
    transition: color var(--motion-quick) ease, border-color var(--motion-quick) ease;
  }
  .xxd-toc a:hover {
    color: var(--ink);
    transition-duration: 0s;
  }
  .xxd-toc a[aria-current=true] {
    border-left-color: var(--action);
    color: var(--ink);
  }
  .xxd-toc [data-depth="3"] a {
    padding-left: 22px;
  }
  .xxd-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font: var(--weight-strong) var(--text-base) / 1 var(--font-body);
    text-decoration: none;
    white-space: nowrap;
  }
  .xxd-logo__mark {
    --s: var(--logo-size, 20px);
    flex: none;
    width: var(--s);
    height: var(--s);
    border-radius: var(--r-xs);
    background:
      linear-gradient(var(--on-ink), var(--on-ink)) 22% 22% / 22% 22% no-repeat,
      linear-gradient(color-mix(in srgb, var(--on-ink) 72%, transparent), color-mix(in srgb, var(--on-ink) 72%, transparent)) 78% 22% / 22% 22% no-repeat,
      linear-gradient(color-mix(in srgb, var(--on-ink) 46%, transparent), color-mix(in srgb, var(--on-ink) 46%, transparent)) 22% 78% / 22% 22% no-repeat,
      linear-gradient(color-mix(in srgb, var(--on-ink) 22%, transparent), color-mix(in srgb, var(--on-ink) 22%, transparent)) 78% 78% / 22% 22% no-repeat,
      var(--ink);
  }
  .xxd-logo[data-size=sm] {
    --logo-size: 16px;
    font-size: var(--text-sm);
  }
  .xxd-logo[data-size=lg] {
    --logo-size: 32px;
    font-size: var(--text-lg);
  }
  .xxd-collapse[open] > :not(summary) {
    animation: xxd-collapse-in var(--motion-medium) var(--ease-out-expo);
  }
  @keyframes xxd-collapse-in {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
  }
}

/* src/css/data.css */
@layer xxd.components {
  .xxd-table[data-density=compact] th {
    height: 30px;
  }
  .xxd-table[data-density=compact] td {
    height: 34px;
    padding-block: 3px;
    font-size: var(--text-xs);
  }
  .xxd-table .xxd-table__check {
    width: 36px;
    padding-right: 0;
  }
  .xxd-table :is(th, td)[data-sticky=start] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--paper);
  }
  .xxd-table :is(th, td)[data-sticky=end] {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--paper);
  }
  .xxd-table-wrap[data-scrolled-x] :is(th, td)[data-sticky=start] {
    box-shadow: inset -1px 0 0 var(--line);
  }
  .xxd-table-wrap[data-scrollable-end] :is(th, td)[data-sticky=end] {
    box-shadow: inset 1px 0 0 var(--line);
  }
  .xxd-table thead th {
    position: relative;
  }
  .xxd-table[data-sticky-head] thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--paper);
  }
  .xxd-th-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 -4px;
    padding: 2px 4px;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color var(--motion-quick) ease, color var(--motion-quick) ease;
  }
  .xxd-th-sort:hover {
    background: var(--wash);
    color: var(--ink);
  }
  .xxd-th-sort::after {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--muted-2);
    -webkit-mask: var(--xxd-chevron-down) center / contain no-repeat;
    mask: var(--xxd-chevron-down) center / contain no-repeat;
    opacity: 0.4;
  }
  th[aria-sort=ascending] .xxd-th-sort::after,
  th[aria-sort=descending] .xxd-th-sort::after {
    background: var(--ink);
    opacity: 1;
  }
  th[aria-sort=ascending] .xxd-th-sort::after {
    transform: rotate(180deg);
  }
  .xxd-th-resize {
    position: absolute;
    top: 6px;
    right: -3px;
    bottom: 6px;
    width: 6px;
    cursor: col-resize;
  }
  .xxd-th-resize::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    width: 2px;
    background: var(--line-strong);
    opacity: 0;
  }
  th:hover .xxd-th-resize::after,
  .xxd-th-resize[data-active]::after {
    opacity: 1;
  }
  .xxd-th-resize[data-active]::after {
    background: var(--action);
  }
  .xxd-table tfoot td {
    border-top: 1px solid var(--line-strong);
    color: var(--muted);
    font-size: var(--text-xs);
  }
  .xxd-table__actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
  }
  .xxd-pagination-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
  }
  .xxd-pagination__info {
    color: var(--muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
  }
  .xxd-pagination__size {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: var(--muted);
    font-size: var(--text-xs);
  }
  .xxd-pagination[data-simple] > :not(:first-child, :last-child) {
    display: none;
  }
  .xxd-range-pair {
    position: relative;
    height: 20px;
  }
  .xxd-range-pair > .xxd-range {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
  }
  .xxd-range-pair > .xxd-range::-webkit-slider-runnable-track {
    background: transparent;
  }
  .xxd-range-pair > .xxd-range::-webkit-slider-thumb {
    position: relative;
    z-index: 1;
    pointer-events: auto;
  }
  .xxd-range-pair > .xxd-range::-moz-range-thumb {
    pointer-events: auto;
  }
  .xxd-range-pair::before,
  .xxd-range-pair::after {
    content: "";
    position: absolute;
    top: 9px;
    height: 2px;
    border-radius: var(--r-pill);
  }
  .xxd-range-pair::before {
    right: 0;
    left: 0;
    background: var(--line-strong);
  }
  .xxd-range-pair::after {
    left: calc(var(--from, 0) * 1%);
    right: calc(100% - var(--to, 100) * 1%);
    background: var(--action);
  }
  .xxd-range-value {
    color: var(--muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
  }
  .xxd-range[data-fill]::-webkit-slider-runnable-track {
    background:
      linear-gradient(
        to right,
        var(--action) calc(var(--fill, 0) * 1%),
        var(--line-strong) 0);
  }
  .xxd-range[data-ticks] {
    background:
      repeating-linear-gradient(
        to right,
        var(--line-strong) 0 1px,
        transparent 1px calc(100% / var(--ticks, 4))) 7px 15px / calc(100% - 14px) 4px no-repeat;
  }
  .xxd-code .tok-k {
    color: var(--ink);
    font-weight: var(--weight-medium);
  }
  .xxd-code .tok-s {
    color: color-mix(in srgb, var(--action-text) 78%, var(--ink));
  }
  .xxd-code .tok-n {
    color: var(--action-text);
  }
  .xxd-code .tok-c {
    color: var(--muted);
    font-style: italic;
  }
  .xxd-code .tok-p {
    color: var(--muted);
  }
  .xxd-code .tok-t {
    color: color-mix(in srgb, var(--action-text) 60%, var(--ink));
  }
  .xxd-code-block {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .xxd-code-block > .xxd-code {
    border-radius: 0;
  }
  .xxd-code__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 6px 0 12px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--action) 3%, var(--paper));
    color: var(--muted);
    font: var(--text-2xs) var(--font-mono);
  }
  .xxd-code__head > .xxd-btn {
    margin-left: auto;
  }
  .xxd-code[data-lines] {
    counter-reset: line;
  }
  .xxd-code[data-lines] .line {
    display: block;
  }
  .xxd-code[data-lines] .line::before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    width: 2.4em;
    margin-right: 12px;
    color: var(--muted-2);
    text-align: right;
  }
  .xxd-badge[data-appearance=dot] {
    background: transparent;
    padding-left: 0;
    color: var(--ink);
  }
  .xxd-badge[data-appearance=dot]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--r-circle);
    background: var(--muted-2);
  }
  .xxd-badge[data-appearance=dot][data-tone=success]::before {
    background: var(--success);
  }
  .xxd-badge[data-appearance=dot][data-tone=danger]::before {
    background: var(--danger);
  }
  .xxd-badge[data-appearance=dot][data-tone=warning]::before {
    background: var(--warning);
  }
  .xxd-badge[data-appearance=dot][data-tone=action]::before {
    background: var(--action);
  }
  .xxd-badge[data-variant=new] {
    height: 16px;
    padding: 0 5px;
    background: var(--action-fill);
    color: var(--on-action);
    font-size: 10px;
    letter-spacing: 0;
  }
  .xxd-banner__close {
    margin: -4px -6px -4px auto;
  }
  .xxd-banner[data-leaving] {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--motion-sheet-out) ease, transform var(--motion-sheet-out) ease;
  }
  .xxd-banner[data-size=sm] {
    padding: 8px 12px;
    font-size: var(--text-xs);
  }
  .xxd-empty[data-size=sm] {
    padding: var(--space-5) var(--space-3);
  }
  .xxd-empty[data-size=sm] .xxd-empty__title {
    font-size: var(--text-sm);
  }
  .xxd-empty[data-size=lg] {
    padding: 64px var(--space-4);
  }
  .xxd-empty[data-size=lg] > .ui-icon {
    width: 40px;
    height: 40px;
  }
  .xxd-empty[data-size=lg] .xxd-empty__title {
    font-size: var(--text-xl);
  }
  .xxd-empty .xxd-clipboard {
    margin-top: 6px;
  }
  .xxd-tabs[data-overflow-end] {
    -webkit-mask-image:
      linear-gradient(
        to right,
        #000000 calc(100% - 32px),
        transparent);
    mask-image:
      linear-gradient(
        to right,
        #000000 calc(100% - 32px),
        transparent);
  }
  .xxd-tabs[data-overflow-start] {
    -webkit-mask-image:
      linear-gradient(
        to left,
        #000000 calc(100% - 32px),
        transparent);
    mask-image:
      linear-gradient(
        to left,
        #000000 calc(100% - 32px),
        transparent);
  }
  .xxd-tabs[data-overflow-start][data-overflow-end] {
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent,
        #000000 32px,
        #000000 calc(100% - 32px),
        transparent);
    mask-image:
      linear-gradient(
        to right,
        transparent,
        #000000 32px,
        #000000 calc(100% - 32px),
        transparent);
  }
  .xxd-breadcrumbs__more {
    padding: 0 4px;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  .xxd-breadcrumbs__more:hover {
    background: var(--wash);
    color: var(--ink);
  }
  .xxd-breadcrumbs[data-size=sm] {
    font-size: var(--text-2xs);
  }
  .xxd-switch[data-size=sm] {
    width: 28px;
    height: 16px;
  }
  .xxd-switch[data-size=sm]::before {
    width: 10px;
    height: 10px;
  }
  .xxd-switch[data-size=sm]:checked::before {
    transform: translateX(12px);
  }
  .xxd-switch[data-size=lg] {
    width: 42px;
    height: 24px;
  }
  .xxd-switch[data-size=lg]::before {
    width: 18px;
    height: 18px;
  }
  .xxd-switch[data-size=lg]:checked::before {
    transform: translateX(18px);
  }
  .xxd-check[aria-invalid=true],
  .xxd-radio[aria-invalid=true] {
    border-color: var(--danger);
  }
}

/* src/css/patterns.css */
@layer xxd.components {
  .xxd-dropzone {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: var(--space-8) var(--space-4);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--muted);
    text-align: center;
    transition: border-color var(--motion-quick) ease, background-color var(--motion-quick) ease;
  }
  .xxd-dropzone > .ui-icon {
    width: 24px;
    height: 24px;
    color: var(--muted-2);
  }
  .xxd-dropzone__title {
    margin: 0;
    color: var(--ink);
    font: var(--weight-medium) var(--text-sm) / 1.4 var(--font-body);
  }
  .xxd-dropzone[data-over] {
    border-color: var(--action);
    background: color-mix(in srgb, var(--action) 4%, var(--paper));
  }
  .xxd-dropveil {
    position: absolute;
    inset: 8px;
    z-index: var(--z-dialog);
    display: grid;
    place-items: center;
    border: 1.5px dashed var(--action);
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    color: var(--ink);
    font: var(--weight-medium) var(--text-base) / 1.4 var(--font-body);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-quick) ease;
  }
  .xxd-dropveil[data-open] {
    opacity: 1;
  }
  .xxd-viewer {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(12, 11, 9, 0.92);
    color: #ffffff;
    overflow: hidden;
  }
  .xxd-viewer::backdrop {
    background: transparent;
  }
  .xxd-viewer[open] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    animation: xxd-fade-in var(--motion-medium) ease;
  }
  .xxd-viewer__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.72);
    font-variant-numeric: tabular-nums;
  }
  .xxd-viewer__stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 0 56px;
  }
  .xxd-viewer__stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    animation: xxd-fade-in var(--motion-quick) ease;
  }
  .xxd-viewer__nav {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 0;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    cursor: pointer;
  }
  .xxd-viewer__nav:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  .xxd-viewer__nav[data-dir=prev] {
    left: 8px;
  }
  .xxd-viewer__nav[data-dir=next] {
    right: 8px;
  }
  .xxd-viewer .xxd-pill {
    justify-self: center;
    margin: 12px;
  }
  .xxd-viewer .xxd-btn[data-variant=ghost] {
    --btn-fg: #ffffff;
    --btn-bg-hover: rgba(255, 255, 255, 0.12);
  }
  .xxd-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--r-pill);
    background: rgba(5, 5, 5, 0.64);
    color: #ffffff;
  }
  .xxd-pill > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: inherit;
    font: var(--weight-medium) var(--text-xs) / 1 var(--font-body);
    cursor: pointer;
  }
  .xxd-pill > button:hover {
    background: rgba(255, 255, 255, 0.14);
  }
  .xxd-sortable > [data-sort-item] {
    position: relative;
    touch-action: pan-y;
  }
  .xxd-sort-handle {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 28px;
    color: var(--muted);
    cursor: grab;
    touch-action: none;
  }
  .xxd-sort-handle:hover {
    color: var(--ink);
  }
  [data-sort-item][data-dragging] {
    z-index: 2;
    background: var(--paper);
    box-shadow: var(--shadow-popover);
    cursor: grabbing;
  }
  [data-sort-item][data-grabbed] {
    background: var(--selected-bg);
  }
  .xxd-history {
    display: grid;
    gap: var(--space-5);
  }
  .xxd-history__day {
    margin: 0 0 6px;
    padding: 0 2px;
    color: var(--muted);
    font: var(--weight-medium) var(--text-xs) / 1.4 var(--font-body);
  }
  .xxd-thumbs {
    display: flex;
    flex: none;
  }
  .xxd-thumbs > * {
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--paper);
    border-radius: var(--r-xs);
    background: var(--wash-strong);
    object-fit: cover;
  }
  .xxd-thumbs > * + * {
    margin-left: -10px;
  }
  .xxd-btn[data-confirming] {
    --btn-fg: #ffffff;
    --btn-bg: var(--danger-strong);
    --btn-bd: var(--danger-strong);
    --btn-bg-hover: var(--danger-strong);
  }
  .xxd-auth {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4);
    text-align: center;
  }
  .xxd-auth__name {
    margin: 4px 0 0;
    font: var(--weight-strong) var(--text-lg) / 1.3 var(--font-body);
  }
  .xxd-auth__line {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.6;
  }
  .xxd-auth__gift {
    color: var(--action-text);
    font-size: var(--text-xs);
  }
  .xxd-auth form {
    display: grid;
    gap: 10px;
    width: 100%;
    margin-top: var(--space-2);
    text-align: left;
  }
  .xxd-auth__or {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: var(--text-2xs);
  }
  .xxd-auth__or::before,
  .xxd-auth__or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
  }
  .xxd-auth__terms {
    margin-top: var(--space-2);
    color: var(--muted);
    font-size: var(--text-2xs);
    line-height: 1.6;
  }
  .xxd-auth [data-step]:not([data-active]) {
    display: none;
  }
  .xxd-auth [data-step][data-active] {
    display: grid;
    gap: 10px;
    animation: xxd-fade-in var(--motion-quick) ease;
  }
  .xxd-account {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
  }
  .xxd-account__main {
    flex: 1;
    min-width: 0;
  }
  .xxd-account__name {
    overflow: hidden;
    font: var(--weight-medium) var(--text-sm) / 1.4 var(--font-body);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .xxd-plan-line {
    color: var(--muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
  }
  .xxd-plan-line[data-tone=warning] {
    color: var(--warning);
  }
  .xxd-plan-line[data-tone=member] {
    color: var(--action-text);
  }
  .xxd-plans {
    display: grid;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    overflow: hidden;
  }
  .xxd-plan {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
  }
  .xxd-plan + .xxd-plan {
    border-top: 1px solid var(--line);
  }
  .xxd-plan:has(:checked) {
    background: var(--selected-bg);
  }
  .xxd-plan__name {
    flex: 1;
    font: var(--weight-medium) var(--text-sm) / 1.4 var(--font-body);
  }
  .xxd-plan__name small {
    display: block;
    color: var(--muted);
    font-size: var(--text-2xs);
    font-weight: var(--weight-regular);
  }
  .xxd-plan__price {
    font: var(--weight-strong) var(--text-base) / 1 var(--font-body);
    font-variant-numeric: tabular-nums;
  }
  .xxd-qr {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--muted);
    font-size: var(--text-xs);
    text-align: center;
  }
  .xxd-qr__code {
    width: 148px;
    height: 148px;
    padding: 8px;
    background: #ffffff;
  }
  .xxd-statusline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 6px 14px;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.5;
  }
  .xxd-statusline:empty,
  .xxd-statusline[hidden] {
    display: none;
  }
  .xxd-statusline[data-tone=danger] {
    color: var(--danger);
  }
  .xxd-statusline[data-tone=warning] {
    color: var(--warning);
  }
  .xxd-statusline[data-tone=success] {
    color: var(--success);
  }
  .xxd-statusline > .xxd-link {
    margin-left: auto;
    white-space: nowrap;
  }
  .xxd-progress-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px 0 10px;
    border-radius: var(--r-pill);
    background: rgba(17, 17, 17, 0.86);
    color: #ffffff;
    font: var(--weight-medium) var(--text-xs) / 1 var(--font-body);
    font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  }
  .xxd-progress-pill > .xxd-progress {
    width: 72px;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
  }
  .xxd-progress-pill > .xxd-progress::-webkit-progress-bar {
    background: rgba(255, 255, 255, 0.2);
  }
  .xxd-progress-pill > .xxd-progress::-webkit-progress-value {
    background: #ffffff;
  }
  .xxd-roll {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
  }
  .xxd-roll > span {
    display: inline-block;
  }
  .xxd-roll > [data-out] {
    position: absolute;
    left: 0;
    animation: xxd-roll-out var(--motion-medium) var(--ease-out-expo) forwards;
  }
  .xxd-roll > [data-in] {
    animation: xxd-roll-in var(--motion-medium) var(--ease-out-expo);
  }
  @keyframes xxd-roll-out {
    to {
      opacity: 0;
      transform: translateY(-100%);
    }
  }
  @keyframes xxd-roll-in {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
  }
  .xxd-celebrate {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
  }
  .xxd-celebrate__ring {
    width: 44px;
    height: 44px;
    color: var(--success);
  }
  .xxd-celebrate__ring circle,
  .xxd-celebrate__ring path {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
  .xxd-celebrate[data-play] .xxd-celebrate__ring {
    animation: xxd-pop var(--motion-medium) var(--ease-out-expo);
  }
  .xxd-celebrate[data-play] > :not(.xxd-celebrate__ring) {
    animation: xxd-rise var(--motion-medium) var(--ease-out-expo) both;
  }
  .xxd-celebrate[data-play] > :nth-child(3) {
    animation-delay: 80ms;
  }
  .xxd-celebrate[data-play] > :nth-child(4) {
    animation-delay: 160ms;
  }
  .xxd-confetti {
    position: fixed;
    z-index: var(--z-toast);
    width: 6px;
    height: 6px;
    pointer-events: none;
    animation: xxd-confetti 900ms var(--ease-out-quart) forwards;
  }
  @keyframes xxd-pop {
    from {
      opacity: 0;
      transform: scale(0.6);
    }
  }
  @keyframes xxd-confetti {
    to {
      opacity: 0;
      transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
    }
  }
  [data-search-hidden] {
    display: none;
  }
}

/* src/css/chart.css */
@layer xxd.components {
  .xxd-chart {
    position: relative;
    width: 100%;
    height: var(--chart-h, 260px);
  }
  .xxd-chart-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
  }
  .xxd-chart-card__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
  }
  .xxd-chart-card__title {
    margin: 0;
    font: var(--weight-strong) var(--text-sm) / 1.4 var(--font-body);
    color: var(--ink);
  }
  .xxd-chart-card__meta {
    margin-inline-start: auto;
    font-size: var(--text-xs);
    color: var(--muted);
  }
  .xxd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--stat-min, 180px), 1fr));
    gap: var(--space-3);
  }
  .xxd-stat {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label label" "value spark" "delta spark";
    align-items: end;
    column-gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
  }
  .xxd-stat__label {
    grid-area: label;
    margin: 0 0 var(--space-1);
    font-size: var(--text-xs);
    color: var(--muted);
  }
  .xxd-stat__value {
    grid-area: value;
    margin: 0;
    font: var(--weight-strong) var(--text-xl, 22px) / 1.2 var(--font-body);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }
  .xxd-stat__unit {
    margin-inline-start: 2px;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    color: var(--muted);
  }
  .xxd-stat__delta {
    grid-area: delta;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
  }
  .xxd-stat__delta[data-tone=up] {
    color: var(--success);
  }
  .xxd-stat__delta[data-tone=down] {
    color: var(--danger);
  }
  .xxd-stat__spark {
    grid-area: spark;
    display: block;
    width: 96px;
    height: 32px;
    color: var(--action);
  }
  .xxd-stat__spark > svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/* src/css/robust.css */
@layer xxd.components {
  .xxd-btn,
  .xxd-chip,
  .xxd-badge,
  .xxd-kbd,
  .xxd-logo,
  .xxd-progress-pill,
  .xxd-toolbar__item,
  .xxd-btn-group,
  .xxd-segmented,
  .xxd-picker,
  .xxd-picker__trigger,
  .xxd-breadcrumbs > li,
  .xxd-input-group__addon,
  .xxd-input-group__suffix {
    max-width: 100%;
    min-width: 0;
  }
  .xxd-btn,
  .xxd-chip,
  .xxd-badge,
  .xxd-kbd,
  .xxd-logo,
  .xxd-progress-pill,
  .xxd-toolbar__item,
  .xxd-input-group__addon,
  .xxd-input-group__suffix,
  .xxd-segmented > button,
  .xxd-segmented > [role=radio] {
    overflow-x: clip;
  }
  .xxd-picker__trigger {
    width: 100%;
  }
  .xxd-segmented > button,
  .xxd-segmented > [role=radio] {
    flex-shrink: 1;
    min-width: 0;
    text-overflow: ellipsis;
  }
  .xxd-btn-group > .xxd-btn {
    flex-shrink: 1;
  }
  .xxd-input-group__addon,
  .xxd-input-group__suffix {
    flex-shrink: 1;
    max-width: 35%;
  }
  .xxd-dock__primary,
  .xxd-input-group > .xxd-btn {
    flex-shrink: 1;
    min-width: 0;
  }
  .xxd-dock__primary > .xxd-btn {
    max-width: 100%;
  }
  .xxd-page-header__actions,
  .xxd-banner__actions,
  .xxd-dialog__actions,
  .xxd-cluster {
    min-width: 0;
    max-width: 100%;
  }
  .xxd-stack,
  .xxd-field,
  .xxd-choices,
  .xxd-text-pair,
  .xxd-page-header,
  .xxd-settings,
  .xxd-group,
  .xxd-card__body,
  .xxd-chart-card,
  .xxd-empty,
  .xxd-history,
  .xxd-plans,
  .xxd-auth,
  .xxd-auth form,
  .xxd-auth [data-step][data-active] {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(.xxd-btn, .xxd-chip, .xxd-badge, .xxd-toolbar__item, .xxd-logo, .xxd-progress-pill, .xxd-input-group__addon, .xxd-input-group__suffix) > span:not([class]),
  .xxd-label-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
  }
  .xxd-breadcrumbs > li > :is(a, span) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(.xxd-page) {
    overflow-wrap: break-word;
  }
  :where(.xxd-text, .xxd-prose, .xxd-card, .xxd-banner, .xxd-empty, .xxd-stat, .xxd-chart-card, .xxd-toast, .xxd-dialog__body, .xxd-help, .xxd-label, .xxd-list, .xxd-settings, .xxd-statusline, .xxd-panel, .xxd-sheet, .xxd-dock, .xxd-auth, .xxd-account) {
    overflow-wrap: anywhere;
  }
  :where(.xxd-table, .xxd-code, pre, code, kbd) {
    overflow-wrap: normal;
  }
  :where(.xxd-banner, .xxd-stat, .xxd-chart-card__head, .xxd-list__main, .xxd-row, .xxd-empty) > * {
    min-width: 0;
  }
}

/* src/css/interaction.css */
@layer xxd.components {
  :is(.xxd-btn, .xxd-chip, .xxd-input, .xxd-textarea, .xxd-select > select, .xxd-switch, .xxd-check, .xxd-radio, .xxd-tabs > [role=tab], .xxd-segmented > *, .xxd-card, .xxd-card__action, .xxd-menu__item, .xxd-option, .xxd-row, .xxd-list__item, .xxd-pagination > *, .xxd-rail > *, .xxd-picker__trigger, .xxd-input-group, .xxd-sidebar__item, .xxd-toolbar__item, .xxd-th-sort, .xxd-toc a, .xxd-inline-copy, .xxd-dropzone):hover {
    transition-duration: 0s;
  }
  :where([class*=xxd-], .ui-dialog-cancel) :where(a[href], button, summary, label[for], select, [role=button], [role=tab], [role=radio], [role=option], [role=menuitem], [role=menuitemcheckbox], [role=menuitemradio], [role=switch]):where(:not(:disabled, [aria-disabled=true])) {
    cursor: pointer;
  }
  :where([class*=xxd-]) :where(:disabled, [aria-disabled=true]) {
    cursor: not-allowed;
  }
  .xxd-reveal {
    opacity: 0;
    transition: opacity var(--motion-quick) ease;
  }
  :is(:hover, :focus-within) > .xxd-reveal,
  :is(:hover, :focus-within) > * > .xxd-reveal,
  .xxd-reveal:focus-visible,
  .xxd-reveal:focus-within {
    opacity: 1;
  }
  @media (hover: none) {
    .xxd-reveal {
      opacity: 1;
    }
  }
  .xxd-concentric {
    --pad: 4px;
    --outer-r: var(--r-md);
    padding: var(--pad);
    border-radius: var(--outer-r);
  }
  .xxd-concentric > * {
    border-radius: max(0px, calc(var(--outer-r) - var(--pad)));
  }
  .xxd-icon-line {
    display: inline-flex;
    align-items: center;
    height: 1lh;
    flex: none;
  }
  .xxd-num {
    font-variant-numeric: tabular-nums;
  }
  .xxd-bubble {
    position: fixed;
    z-index: var(--z-toast);
    padding: 3px 8px;
    border-radius: var(--r-xs);
    background: var(--ink);
    color: var(--on-ink);
    font: var(--weight-medium) var(--text-2xs) / 1.4 var(--font-body);
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--motion-quick) ease, transform var(--motion-quick) var(--ease-out-expo);
  }
  .xxd-bubble[data-open] {
    opacity: 1;
    transform: none;
  }
}

/* src/css/forced-colors.css */
@layer xxd.components {
  @media (forced-colors: active) {
    .xxd-switch,
    .xxd-check,
    .xxd-radio,
    .xxd-progress,
    .xxd-loadbar,
    .xxd-meter,
    .xxd-dot,
    .xxd-tabs__ink {
      forced-color-adjust: none;
    }
    .xxd-switch,
    .xxd-check,
    .xxd-radio {
      border-color: CanvasText;
      background: Canvas;
    }
    .xxd-switch::before {
      background: CanvasText;
      box-shadow: none;
    }
    .xxd-switch:checked,
    .xxd-check:checked,
    .xxd-check:indeterminate,
    .xxd-radio:checked {
      border-color: Highlight;
      background: Highlight;
    }
    .xxd-switch:checked::before,
    .xxd-check:checked::after,
    .xxd-check:indeterminate::after {
      background: HighlightText;
    }
    .xxd-radio:checked {
      box-shadow: inset 0 0 0 3.5px Canvas;
    }
    .xxd-switch:disabled,
    .xxd-check:disabled,
    .xxd-radio:disabled {
      border-color: GrayText;
      opacity: 1;
    }
    .xxd-progress,
    .xxd-loadbar,
    .xxd-meter {
      border: 1px solid CanvasText;
      background: Canvas;
    }
    .xxd-progress::-webkit-progress-bar {
      background: Canvas;
    }
    .xxd-progress::-webkit-progress-value,
    .xxd-loadbar::after,
    .xxd-meter__fill {
      background: Highlight;
    }
    .xxd-progress::-moz-progress-bar {
      background: Highlight;
    }
    .xxd-dot {
      background: CanvasText;
    }
    .xxd-tabs__ink {
      background: Highlight;
    }
    .xxd-tabs > [role=tab][aria-selected=true] {
      color: Highlight;
      text-decoration: underline 2px;
      text-underline-offset: 6px;
    }
    .xxd-segmented > [aria-checked=true],
    .xxd-segmented > [aria-pressed=true],
    .xxd-chip[aria-pressed=true],
    .xxd-btn[aria-pressed=true],
    .xxd-option[aria-selected=true],
    .xxd-list > .xxd-list__item[aria-selected=true],
    .xxd-list > .xxd-list__item[aria-current],
    .xxd-rail > [aria-current=page],
    .xxd-rail > [aria-selected=true],
    .xxd-menu__item[aria-checked=true] {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }
    .xxd-badge,
    .xxd-chip,
    .xxd-segmented,
    .xxd-kbd {
      border: 1px solid CanvasText;
    }
    .xxd-btn[data-variant=primary],
    .xxd-btn[data-variant=danger] {
      border-color: ButtonText;
    }
    .xxd-btn:disabled,
    .xxd-btn[aria-disabled=true] {
      border-color: GrayText;
      color: GrayText;
    }
  }
}

/* src/index.css */