/* @xxd/css — 小小东原生组件。Copyright (c) 2026 小小东 (xiaoxiaodong.ai). MIT License. */
/* @xxd/tokens — 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: #fdfcfb;
  --paper: #ffffff;
  --wash: #f6f4f1;
  --wash-strong: #eeece9;
  --selected-bg: #eeece9; /* 和 --wash-strong 同一个值（以前差 1，肉眼分不出；设计师评审 V2-4） */
  --switch-on: #111111; /* 开关「开」是墨色（设计师评审 D22：以前的深灰在亮纸上像禁用） */
  --ink: #111111;
  --ink-rgb: 17, 17, 17;
  --on-ink: #ffffff;
  /* #777 在白底只有 4.48:1，小字需要 4.5；#6d6b67 是 5.3（wash 上 4.85、选中底 / wash-strong 上 4.5）。 */
  --muted: #6d6b67;
  --muted-2: #9a968d; /* 只做装饰（图标、分隔点、行号），不当文字色：在白底只有 2.9:1 */
  --line: #e9e7e4;
  --line-strong: #ccc9c5;
  /* 控件的边（输入框、复选、单选、开关、滑块）：要认得出这是个控件，和底色至少 3:1（WCAG 1.4.11）。
     卡片、分隔线、列表线仍然用安静的 --line / --line-strong。 */
  --line-control: #898681;
  /* 抬起来的一层（浮层：对话框、菜单、popover、面板、sheet、toast）：亮色和纸一样（靠阴影托起），
     暗色亮一档——暗底上阴影看不出来，层次靠这一档（设计师评审 E3）。浮层里的悬停底、分隔线也跟着抬一档。 */
  --paper-raised: #ffffff;
  --wash-raised: #f6f4f1;
  --wash-strong-raised: #eeece9;
  --line-raised: #e9e7e4;
  --paper-rgb: 255, 255, 255;
  --shadow-rgb: 17, 17, 17;
  /* 禁用（设计师评审 V2-3）：不用半透明，用这三个值；字不要求 4.5:1（WCAG 对禁用控件豁免），但和可用的一眼分得开 */
  --disabled-ink: #adaaa5;
  --disabled-bg: #f6f4f1;
  --disabled-line: #e9e7e4;

  /* 语义色：只表达意义 */
  --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);
  /* 键盘焦点环：不透明，和底色至少 3:1（--action-text 已经按主色压到 4.5:1 以上） */
  --focus-color: var(--action-text);

  /* ── 圆角：直角（缺省）/ 圆角 ─────────────────── */
  --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 ──
   * 顺序有讲究：先英文字体，再中文字体。浏览器逐字找字体，英文字母落在 Avenir Next / Segoe UI，
   * 中文落在苹方 / 微软雅黑 / 思源黑体。把中文字体放前面，Windows 上的英文就会用雅黑的西文，难看。
   *   macOS / iOS：Avenir Next + 苹方    Windows：Segoe UI + 微软雅黑    Android / Linux：思源黑体（Noto Sans CJK）
   * 标题和正文同一家族，层级只靠字号和字重。繁体页面换成繁体字形，见文件末尾的 :lang(zh-Hant)。 */
  --font-body: "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
  --font-title: var(--font-body);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", "PingFang SC", "Microsoft YaHei", monospace;
  --text-2xs: 11px; /* tooltip、角标 */
  --text-xs: 12px;  /* 菜单、次要信息 */
  --text-sm: 13px;  /* 导航、控件（最常用） */
  --text-base: 14px;
  --text-md: 15px; /* 已不用（设计师评审 D20：阶梯去掉 15）：保留变量名只为兼容老代码，新代码用 --text-base 或 --text-lg */
  --text-lg: 16px;
  --text-xl: 20px;
  --text-xxl: 24px; /* 页面大标题（不叫 --text-2xl，避免和 Tailwind 的同名变量冲突） */
  --text-display: 28px; /* 展示标题 */
  /* 行高落在 4px 网格上，字号和行高成对用（设计师评审 D20）：
   *   11 / 16、12 / 16（一行的标签）、12 / 20（说明文字，会折行）、13 / 20、14 / 20、16 / 24（标题）、16 / 28（阅读正文）、
   *   20 / 28、24 / 32、28 / 36。固定高度的单行控件（按钮、标签页、徽标）行高写 1，由控件高度居中。
   *   门禁：audit「细节」里，文字的行高必须是下面之一，或者等于字号（单行控件）。 */
  --leading-xs: 16px;
  --leading-sm: 20px;
  --leading-md: 24px;
  --leading-lg: 28px;
  --leading-xl: 32px;
  --leading-display: 36px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --read-width: 680px; /* 阅读列：正文、预览、列表 */

  /* ── 间距：4px 基准（设计师评审 V2：组件里的 padding / gap / margin 只用这些，或者由它们和图标尺寸算出来） ──
   * 两个半档只给光学上的小间隔：--space-0-5（2px：托盘内缩、标签和角标）、--space-1-5（6px：图标和字之间）。 */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── 断点（设计师评审 V2-6）：只有三个，出稿也按这三个宽度出。CSS 的 @media 里不能用变量，组件写字面值，测试只放行这三个。
   *   480：手机（窄屏的分页、一列）；640：窄屏（对话框和右侧面板变成底部抽屉、设置一列）；1024：桌面（侧栏和目录同时出现）。 ── */
  --bp-phone: 480px;
  --bp-narrow: 640px;
  --bp-desktop: 1024px;

  /* ── 控件尺寸：会员站 40px；侧边栏用 data-density="compact" ── */
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-h-xs: 24px;
  --icon-button: 40px; /* 和 --control-h 一样高：同一行的图标按钮、输入框、按钮上下对齐 */
  --hit-min: 40px;
  /* 组件级的内边距（标准密度；紧凑密度在下面的 data-density="compact" 里一起收） */
  --control-pad-x: 16px; /* 按钮左右 */
  --control-pad-x-sm: 12px;
  --control-pad-x-lg: 20px;
  --field-pad-x: 12px; /* 输入框、下拉左右 */
  --row-pad-y: 12px; /* 设置行 */
  --row-pad-x: 16px;
  --list-row-pad-y: 8px; /* 列表行 */
  /* 小控件的尺寸（设计师评审 V5-1：组件页的规格表能标出它们是哪个令牌） */
  --choice-size: 16px; /* 复选框、单选的圆点 */
  --switch-w: 36px; /* 开关：36 × 20，滑块 = 高 - 6 */
  --switch-h: 20px;
  --field-icon-slot: 34px; /* 输入框、下拉里给图标 / 箭头留的位置：边距 12 + 图标 14 + 间隔 8 */

  /* ── 图标：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);

  /* ── 质感：实心按钮（主按钮、危险按钮）缺省纯平；data-finish="material" 时有顶部 1px 内高光、深一点的边、按下下沉 0.5px。
   * 原生（@xxd/css）和 React（@xxd/react）都读这几个变量；离按钮最近的 data-finish 说了算（变量会继承）。 ── */
  --btn-edge: 100%; /* 边 = 底色掺多少黑（100% = 不掺） */
  /* 纯平时写成一层看不见的阴影（不写 none）：React 版把它拼进 Tailwind 的多层 box-shadow，none 会让整条失效 */
  --btn-highlight: 0 0 #0000;
  --btn-highlight-pressed: 0 0 #0000;
  --btn-press-y: 0px;

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

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

/* 紧凑密度：整页（<html data-density>，boot.js 写）或者页面里的一块（任何元素上的 data-density="compact"） */
:root[data-density="compact"],
[data-density="compact"] {
  --control-h: 32px;
  --control-h-sm: 26px;
  --control-h-xs: 20px;
  --icon-button: 32px;
  /* 组件级的内边距一起收（高度跟着 --control-h 自己变：标签页 = 控件高，列表行 +4，设置行 +8） */
  --control-pad-x: 12px;
  --control-pad-x-sm: 8px;
  --control-pad-x-lg: 16px;
  --field-pad-x: 8px;
  --row-pad-y: 8px;
  --row-pad-x: 12px;
  --list-row-pad-y: 4px;
}

[data-finish="material"] {
  --btn-edge: 86%;
  --btn-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --btn-highlight-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --btn-press-y: 0.5px;
}

[data-finish="flat"] {
  --btn-edge: 100%;
  --btn-highlight: 0 0 #0000;
  --btn-highlight-pressed: 0 0 #0000;
  --btn-press-y: 0px;
}

/* 暗色：整页（<html data-theme>，boot.js 写）或者页面里的一块（任何元素上的 data-theme="dark"） */
:root[data-theme="dark"],
[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;
  --line-control: #807a6e;
  --paper-raised: #292720;
  --wash-raised: #33302a;
  --wash-strong-raised: #3b3830;
  --line-raised: #3f3c34;
  --paper-rgb: 32, 31, 26;
  --shadow-rgb: 0, 0, 0;
  --disabled-ink: #66635d;
  --disabled-bg: #2a2822;
  --disabled-line: #34322b;
  /* 暗色的语义色和暖黑同一个调子：偏暖、低一档饱和（不用冷的荧光绿 / 红）。字用的版本对暗纸 ≥ 4.5；
     *-strong 是实心底（白字 ≥ 4.5、对暗纸 ≥ 3） */
  --success: #7cc48a;
  --success-rgb: 124, 196, 138;
  --danger: #ec7a6d;
  --danger-rgb: 236, 122, 109;
  --warning: #e8a95a;
  --warning-rgb: 232, 169, 90;
  --success-strong: #2f7d47;
  --warning-strong: #a35f1b;
  --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 上已经按亮色算好再继承下来，换了 --ink 的这一块要重新声明，主按钮、焦点才跟着变 */
  --action: var(--ink);
  --action-rgb: var(--ink-rgb);
  --on-action: var(--on-ink);
  --action-text: var(--ink);
  --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);
  --focus-color: var(--action-text);
}

/* 亮色的一块：暗色页面里某一块要亮（比如并排对比）。只放颜色，和 :root 的亮色值一样（测试会对一遍）。 */
[data-theme="light"] {
  color-scheme: light;
  --bg: #fdfcfb;
  --paper: #ffffff;
  --wash: #f6f4f1;
  --wash-strong: #eeece9;
  --selected-bg: #eeece9;
  --switch-on: #111111;
  --ink: #111111;
  --ink-rgb: 17, 17, 17;
  --on-ink: #ffffff;
  --muted: #6d6b67;
  --muted-2: #9a968d;
  --line: #e9e7e4;
  --line-strong: #ccc9c5;
  --line-control: #898681;
  --paper-raised: #ffffff;
  --wash-raised: #f6f4f1;
  --wash-strong-raised: #eeece9;
  --line-raised: #e9e7e4;
  --paper-rgb: 255, 255, 255;
  --shadow-rgb: 17, 17, 17;
  --disabled-ink: #adaaa5;
  --disabled-bg: #f6f4f1;
  --disabled-line: #e9e7e4;
  --success: #15803d;
  --success-rgb: 21, 128, 61;
  --danger: #b42318;
  --danger-rgb: 180, 35, 24;
  --warning: #b45309;
  --warning-rgb: 180, 83, 9;
  --success-strong: #15803d;
  --danger-strong: #b42318;
  --warning-strong: #b45309;
  /* 派生的强调令牌：:root 上已经按亮色算好再继承下来，换了 --ink 的这一块要重新声明，主按钮、焦点才跟着变 */
  --action: var(--ink);
  --action-rgb: var(--ink-rgb);
  --on-action: var(--on-ink);
  --action-text: var(--ink);
  --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);
  --focus-color: var(--action-text);
  --shadow-popover: 0 18px 44px rgba(var(--shadow-rgb), 0.16);
  --shadow-dialog: 0 28px 76px rgba(var(--shadow-rgb), 0.24);
}

: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],
:root[data-accent] [data-theme="light"] {
  --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, #fdfcfb 97%, var(--action));
  --wash: color-mix(in srgb, #f6f4f1 92%, var(--action));
  --wash-strong: color-mix(in srgb, #eeece9 90%, var(--action));
  --line: color-mix(in srgb, #e9e7e4 90%, var(--action));
  --line-strong: color-mix(in srgb, #ccc9c5 88%, var(--action));
  --wash-raised: var(--wash);
  --wash-strong-raised: var(--wash-strong);
  --line-raised: var(--line);
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--action) 45%, transparent);
}

:root[data-theme="dark"][data-accent],
:root[data-accent] [data-theme="dark"] {
  --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));
  --paper-raised: color-mix(in srgb, #292720 97%, var(--action));
  --wash-raised: color-mix(in srgb, #33302a 94%, var(--action));
  --wash-strong-raised: color-mix(in srgb, #3b3830 92%, var(--action));
  --line-raised: color-mix(in srgb, #3f3c34 90%, var(--action));
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--action) 55%, transparent);
}

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

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

/* 繁体中文页面（<html lang="zh-Hant"> 或 zh-TW / zh-HK）：同一套字体的繁体字形。
 * 只写在根上（Shadow 里是 host）：老项目自己在 :root 上声明的字体照样优先。 */
:root:lang(zh-Hant),
:root:lang(zh-TW),
:root:lang(zh-HK) {
  --font-body: "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Source Han Sans TC", system-ui, sans-serif;
  --font-title: var(--font-body); /* 在这一层重新取一次，局部写 lang 的元素也跟着换 */
}

/* 没有 JS 时也跟随系统暗色（scripts/build.mjs 从暗色块生成；boot.js 写了 data-theme 以后以它为准） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    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;
    --line-control: #807a6e;
    --paper-raised: #292720;
    --wash-raised: #33302a;
    --wash-strong-raised: #3b3830;
    --line-raised: #3f3c34;
    --paper-rgb: 32, 31, 26;
    --shadow-rgb: 0, 0, 0;
    --disabled-ink: #66635d;
    --disabled-bg: #2a2822;
    --disabled-line: #34322b;
    --success: #7cc48a;
    --success-rgb: 124, 196, 138;
    --danger: #ec7a6d;
    --danger-rgb: 236, 122, 109;
    --warning: #e8a95a;
    --warning-rgb: 232, 169, 90;
    --success-strong: #2f7d47;
    --warning-strong: #a35f1b;
    --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);
    --action: var(--ink);
    --action-rgb: var(--ink-rgb);
    --on-action: var(--on-ink);
    --action-text: var(--ink);
    --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);
    --focus-color: var(--action-text);
  }
}

@layer theme, base, xxd, components, utilities, xxd.base, xxd.components;

/* ../xxd-tokens/base.css */
:root[data-accent] ::selection {
  background: color-mix(in srgb, var(--action) 24%, transparent);
}
:root[data-accent] :is(input, textarea) {
  caret-color: var(--action);
}
:where(.ui-icon) :where(path, line, polyline, polygon, rect, circle, ellipse) {
  vector-effect: non-scaling-stroke;
}
@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;
  }
}

/* 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) / var(--leading-sm) var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-wrap: pretty;
  }
  :where(.xxd-page) :where(button, .xxd-btn, .xxd-chip, .xxd-badge, [role=tab], .xxd-menu__item, .xxd-link) {
    text-spacing-trim: trim-both;
  }
  :where(.xxd-page) :where(h1, h2, h3, h4, legend, [class*=__title], [class*=__name]) {
    text-wrap: balance;
  }
  :where(.xxd-page) *,
  :where(.xxd-page) *::before,
  :where(.xxd-page) *::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 var(--focus-color, var(--action-text, currentColor));
    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-], [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-sr-only-focusable:not(:focus, :focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .xxd-sr-only-focusable:is(:focus, :focus-within) {
    position: fixed;
    top: var(--space-2);
    left: var(--space-2);
    z-index: calc(var(--z-toast) + 1);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink);
    font-weight: var(--weight-medium);
  }
  .xxd-title {
    margin: 0;
    font: var(--weight-strong) var(--text-display) / var(--leading-display) var(--font-title);
    color: var(--ink);
  }
  .xxd-heading {
    margin: 0;
    font: var(--weight-strong) var(--text-lg) / var(--leading-md) 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-frame {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
  }
  .xxd-frame[data-surface=page] {
    background: var(--bg);
  }
  .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) / var(--leading-sm) var(--font-body);
  }
  .xxd-text[data-variant=display] {
    font: var(--weight-strong) var(--text-display) / var(--leading-display) var(--font-title);
  }
  .xxd-text[data-variant=heading1] {
    font: var(--weight-strong) var(--text-xxl) / var(--leading-xl) var(--font-body);
  }
  .xxd-text[data-variant=heading2] {
    font: var(--weight-strong) var(--text-xl) / var(--leading-lg) var(--font-body);
  }
  .xxd-text[data-variant=heading3] {
    font: var(--weight-medium) var(--text-lg) / var(--leading-md) 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: var(--leading-xs);
  }
  .xxd-text[data-variant=mono],
  .xxd-text[data-variant=mono-secondary] {
    font-family: var(--font-mono);
    font-size: calc(1em - 1px);
  }
  .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: var(--space-0-5);
  }
}

/* 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: var(--space-1-5);
    height: var(--control-h);
    padding: 0 var(--control-pad-x, 16px);
    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:active:not(:disabled, [aria-disabled=true]) {
    background: var(--btn-bg-active, var(--wash-strong));
  }
  .xxd-btn:is([data-variant=primary], [data-variant=danger]):active:not(:disabled, [aria-disabled=true]) {
    background: color-mix(in srgb, var(--btn-bg-hover) 92%, #000000);
  }
  .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: var(--space-1);
    padding: 0 var(--space-2);
    font-size: var(--text-2xs);
  }
  .xxd-btn[data-size=sm] {
    height: var(--control-h-sm);
    padding: 0 var(--control-pad-x-sm, 12px);
    font-size: var(--text-xs);
  }
  .xxd-btn[data-size=lg] {
    height: calc(var(--control-h) + 8px);
    padding: 0 var(--control-pad-x-lg, 20px);
    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] {
    --btn-fg: var(--disabled-ink);
    --btn-bg: var(--disabled-bg);
    --btn-bd: var(--disabled-line);
    cursor: not-allowed;
    pointer-events: none;
  }
  .xxd-btn:is([data-variant=ghost], [data-variant=outline], .ui-dialog-cancel):is(:disabled, [aria-disabled=true]) {
    --btn-bg: transparent;
  }
  .xxd-btn:is([data-variant=ghost], .ui-dialog-cancel):is(:disabled, [aria-disabled=true]) {
    --btn-bd: transparent;
  }
  .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);
  }
  .xxd-btn:is([data-variant=primary], [data-variant=danger]) {
    --btn-bd: color-mix(in srgb, var(--btn-bg) var(--btn-edge, 100%), #000000);
    box-shadow: var(--btn-highlight, none);
  }
  .xxd-btn:is([data-variant=primary], [data-variant=danger]):active:not(:disabled, [aria-disabled=true]) {
    box-shadow: var(--btn-highlight-pressed, none);
  }
  .xxd-btn:is([data-variant=primary], [data-variant=danger]):is(:disabled, [aria-disabled=true]) {
    --btn-bd: var(--disabled-line);
    box-shadow: none;
  }
  .xxd-btn:not([data-variant=ghost], .ui-dialog-cancel):active:not(:disabled, [aria-disabled=true]) {
    transform: translateY(var(--btn-press-y, 0px));
  }
  .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[data-tone=danger] {
    color: var(--danger);
  }
  .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: var(--space-1-5);
    min-width: 0;
  }
  .xxd-label {
    color: var(--ink);
    font: var(--weight-medium) var(--text-xs) / var(--leading-xs) var(--font-body);
  }
  .xxd-label[data-optional]::after {
    content: attr(data-optional);
    margin-left: var(--space-1-5);
    color: var(--muted);
    font-weight: var(--weight-regular);
  }
  .xxd-help {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: var(--leading-sm);
  }
  .xxd-error {
    margin: 0;
    color: var(--danger);
    font-size: var(--text-xs);
    line-height: var(--leading-sm);
  }
  .xxd-input,
  .xxd-textarea,
  .xxd-select > select {
    width: 100%;
    min-width: 0;
    height: var(--control-h);
    padding: 0 var(--field-pad-x, 12px);
    border: 1px solid var(--line-control);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink);
    font: var(--weight-regular) var(--text-sm) / var(--leading-sm) 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-control));
  }
  .xxd-input[readonly],
  .xxd-textarea[readonly] {
    background: var(--wash);
  }
  .xxd-input:focus,
  .xxd-textarea:focus,
  .xxd-select > select:focus {
    border-color: color-mix(in srgb, var(--action) 70%, var(--line-control));
    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 {
    border-color: var(--disabled-line);
    background: var(--disabled-bg);
    color: var(--disabled-ink);
    cursor: not-allowed;
  }
  .xxd-input[data-size=sm],
  .xxd-select[data-size=sm] > select {
    height: var(--control-h-sm);
    padding-inline: var(--space-3);
    font-size: var(--text-xs);
  }
  .xxd-input[data-size=xs],
  .xxd-select[data-size=xs] > select {
    height: var(--control-h-xs);
    padding-inline: var(--space-2);
    font-size: var(--text-2xs);
  }
  .xxd-input[data-size=lg],
  .xxd-select[data-size=lg] > select {
    height: calc(var(--control-h) + 4px);
    padding-inline: var(--space-4);
    font-size: var(--text-base);
  }
  .xxd-select[data-size=xs] > select,
  .xxd-select[data-size=sm] > select {
    padding-right: calc(var(--space-2) + var(--icon-md) + var(--space-1-5));
  }
  .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: var(--space-3) var(--space-3);
    line-height: var(--leading-sm);
    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: var(--field-icon-slot);
    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: var(--control-h-sm);
    padding: var(--space-1) calc(var(--icon-md) + var(--space-2)) var(--space-1) var(--space-1);
    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: var(--field-icon-slot);
  }
  .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: var(--switch-w);
    height: var(--switch-h);
    margin: 0;
    border: 1px solid var(--line-control);
    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: calc(var(--switch-h) - 6px);
    height: calc(var(--switch-h) - 6px);
    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(calc(var(--switch-w) - var(--switch-h)));
  }
  .xxd-switch:disabled {
    border-color: var(--disabled-line);
    background: var(--disabled-bg);
    cursor: not-allowed;
  }
  .xxd-switch:checked:disabled {
    border-color: var(--disabled-ink);
    background: var(--disabled-ink);
  }
  .xxd-check,
  .xxd-radio {
    appearance: none;
    position: relative;
    flex: none;
    width: var(--choice-size);
    height: var(--choice-size);
    margin: var(--space-0-5) 0 0;
    border: 1px solid var(--line-control);
    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-control));
  }
  .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 {
    border-color: var(--disabled-line);
    background: var(--disabled-bg);
    cursor: not-allowed;
  }
  .xxd-check:is(:checked, :indeterminate):disabled,
  .xxd-radio:checked:disabled {
    border-color: var(--disabled-ink);
    background: var(--disabled-ink);
  }
  .xxd-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--ink);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    cursor: pointer;
  }
  .xxd-choice:has(:disabled) {
    color: var(--disabled-ink);
    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: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
  }
  .xxd-choices > legend {
    margin-bottom: var(--space-2);
    padding: 0;
    color: var(--ink);
    font: var(--weight-medium) var(--text-xs) / var(--leading-xs) 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-control);
  }
  .xxd-range::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -6px;
    border: 1px solid var(--line-control);
    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-control);
  }
  .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-control);
    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: var(--space-1-5);
    min-height: var(--control-h);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--line-control);
    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-control));
  }
  .xxd-taginput > input {
    flex: 1;
    min-width: 80px;
    height: 26px;
    padding: 0 var(--space-1);
    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' vector-effect='non-scaling-stroke'/%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' vector-effect='non-scaling-stroke'/%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' vector-effect='non-scaling-stroke'/%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' vector-effect='non-scaling-stroke'/%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' vector-effect='non-scaling-stroke'/%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-control);
    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-control));
    transition-duration: 0s;
  }
  .xxd-input-group:focus-within {
    border-color: color-mix(in srgb, var(--action) 70%, var(--line-control));
  }
  .xxd-input-group[aria-invalid=true] {
    border-color: var(--danger);
  }
  .xxd-input-group > input {
    flex: 1;
    min-width: 5ch;
    height: 100%;
    padding: 0 var(--space-3);
    border: 0;
    background: transparent;
    color: var(--ink);
    font: var(--weight-regular) var(--text-sm) / var(--leading-sm) var(--font-body);
    outline: none;
  }
  .xxd-input-group > input::placeholder {
    color: var(--muted);
  }
  .xxd-input-group__addon,
  .xxd-input-group__suffix {
    display: block;
    flex: 0 1 auto;
    min-width: 2em;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .xxd-input-group__addon {
    flex-shrink: 0.2;
    padding-left: var(--space-3);
  }
  .xxd-input-group__addon + input {
    padding-left: var(--space-1);
  }
  .xxd-input-group__suffix {
    padding-right: var(--space-3);
  }
  input + .xxd-input-group__suffix {
    margin-left: -8px;
  }
  .xxd-input-group > .xxd-btn {
    flex: none;
    margin-right: var(--space-1);
  }
  .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: var(--space-1);
    max-width: 100%;
    height: var(--control-h);
    padding: 0 var(--space-1) 0 var(--space-3);
    border: 1px solid var(--line-control);
    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: var(--space-0-5);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: copy;
  }
  .xxd-inline-copy > .ui-icon {
    opacity: 0.45;
    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: var(--space-2);
    height: var(--control-h);
    padding: 0 var(--field-icon-slot) 0 var(--space-3);
    border: 1px solid var(--line-control);
    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-control));
    transition-duration: 0s;
  }
  .xxd-picker__trigger[aria-expanded=true] {
    border-color: color-mix(in srgb, var(--action) 70%, var(--line-control));
  }
  .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: var(--space-3);
    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: var(--space-1);
    padding-top: var(--space-1);
    border-top: 1px solid var(--line);
  }
  .xxd-option-group__label {
    padding: var(--space-1-5) var(--space-3) var(--space-0-5);
    color: var(--muted);
    font-size: var(--text-2xs);
  }
  .xxd-option small {
    display: block;
    color: var(--muted);
    font-size: var(--text-2xs);
    line-height: var(--leading-xs);
  }
  .xxd-option > .ui-icon {
    color: var(--muted);
  }
  .xxd-option[aria-disabled=true] {
    color: var(--disabled-ink);
    cursor: not-allowed;
  }
  .xxd-option:has(small) {
    align-items: flex-start;
    padding-block: var(--space-1-5);
  }
  .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: var(--tab-h, var(--control-h));
    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: var(--space-1);
    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: var(--control-h-sm);
    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: var(--space-0-5);
    padding: var(--space-0-5);
    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 var(--space-3);
    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: nowrap;
    align-items: center;
    gap: var(--space-1-5);
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: var(--text-xs);
    list-style: none;
  }
  .xxd-breadcrumbs > li {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .xxd-breadcrumbs > li[aria-current],
  .xxd-breadcrumbs > li:last-child {
    flex-shrink: 0.2;
  }
  .xxd-breadcrumbs > li:not(:first-child):last-child {
    max-width: calc(100% - 3.5em);
  }
  .xxd-breadcrumbs > .xxd-breadcrumbs__gap {
    flex: none;
  }
  .xxd-breadcrumbs > li + li::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: var(--space-1-5);
    vertical-align: -2px;
    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: nowrap;
    align-items: center;
    gap: var(--space-1);
  }
  .xxd-pagination > .xxd-pagination__status {
    display: none;
    padding: 0 var(--space-1-5);
    color: var(--ink);
    font: var(--weight-medium) var(--text-xs) / 1 var(--font-body);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .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 var(--space-2);
    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 {
    color: var(--disabled-ink);
    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: var(--space-1);
    width: 56px;
    padding: var(--space-2) 0;
    border-right: 1px solid var(--line);
    background: var(--bg);
  }
  .xxd-rail > a,
  .xxd-rail > button {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    width: 48px;
    padding: var(--space-1-5) 0 var(--space-1);
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: color-mix(in srgb, var(--ink) 60%, var(--paper));
    font: var(--weight-medium) var(--text-2xs) / var(--leading-xs) 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) / var(--leading-sm) 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: var(--space-1-5);
    min-width: 0;
  }
  .xxd-group__title {
    margin: 0;
    padding: 0 var(--space-0-5);
    color: var(--muted);
    font: var(--weight-medium) var(--text-xs) / var(--leading-xs) 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: var(--space-0-5) var(--space-0-5) 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: var(--leading-sm);
  }
  .xxd-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    min-height: var(--row-h, calc(var(--control-h) + 8px));
    padding: var(--row-pad-y, 12px) var(--row-pad-x, 16px);
  }
  .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) / var(--leading-sm) var(--font-body);
  }
  .xxd-row__desc {
    margin-top: var(--space-0-5);
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: var(--leading-sm);
  }
  .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;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    min-height: var(--list-row-h, calc(var(--control-h) + 4px));
    padding: var(--list-row-pad-y, 8px) var(--row-pad-x, 16px);
    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,
  .xxd-list > .xxd-list__item:not(:has(> .xxd-list__main)) > :first-child:not(:only-child, i, svg, img, button, input, .xxd-avatar, .xxd-sort-handle) {
    flex: 1 1 8em;
    min-width: 0;
  }
  .xxd-list > .xxd-list__item > .xxd-list__main + *,
  .xxd-list > .xxd-list__item:not(:has(> .xxd-list__main)) > :first-child:not(:only-child, i, svg, img, button, input, .xxd-avatar, .xxd-sort-handle) + * {
    margin-inline-start: auto;
  }
  .xxd-list__title {
    overflow: hidden;
    font: var(--weight-medium) var(--text-sm) / var(--leading-sm) 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);
    line-height: 1;
    cursor: pointer;
  }
  .xxd-glyphs > button:hover {
    background: var(--wash);
  }
}

/* src/css/overlay.css */
@layer xxd.components {
  :is(.xxd-surface-float, .xxd-dialog, .xxd-menu, .xxd-popover, .xxd-sheet, .xxd-panel, .xxd-toast, .xxd-palette) {
    --paper: var(--paper-raised);
    --wash: var(--wash-raised);
    --wash-strong: var(--wash-strong-raised);
    --line: var(--line-raised);
  }
  .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));
    margin: auto;
    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: var(--space-4) var(--space-4) 0 var(--space-5);
  }
  .xxd-dialog__title {
    flex: 1;
    margin: 0;
    font: var(--weight-strong) var(--text-lg) / var(--leading-md) var(--font-body);
  }
  .xxd-dialog__body {
    padding: var(--space-2) var(--space-5) var(--space-1);
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
  }
  .xxd-dialog__body > * + * {
    margin-top: var(--space-3);
  }
  .xxd-dialog__body > .xxd-field,
  .xxd-dialog__body > * + .xxd-field {
    margin-top: var(--space-4);
  }
  .xxd-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5) var(--space-5);
  }
  .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: var(--space-3) var(--space-4);
    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: var(--space-1);
  }
  .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: var(--space-3) var(--space-3) var(--space-2) var(--space-4);
  }
  .xxd-sheet__title {
    flex: 1;
    margin: 0;
    font: var(--weight-medium) var(--text-sm) / var(--leading-sm) var(--font-body);
  }
  .xxd-sheet__body {
    flex: 1;
    min-height: 0;
    padding: 0 var(--space-4) var(--space-4);
    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 var(--space-1);
    font: var(--weight-medium) var(--text-sm) / var(--leading-sm) var(--font-body);
  }
  .xxd-popover__text {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: var(--leading-sm);
  }
  .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: var(--space-1);
  }
  .xxd-popover {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }
  .xxd-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 32px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--ink);
    font: var(--weight-medium) var(--text-xs) / var(--leading-xs) 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] {
    color: var(--disabled-ink);
    pointer-events: none;
  }
  .xxd-menu__kbd {
    margin-left: auto;
    color: var(--muted);
    font: var(--text-2xs) / var(--leading-xs) var(--font-mono);
  }
  .xxd-menu__label {
    padding: var(--space-2) var(--space-3) var(--space-1);
    color: var(--muted);
    font-size: var(--text-2xs);
  }
  .xxd-menu__sep {
    height: 1px;
    margin: var(--space-1) -4px;
    background: var(--line);
  }
  .xxd-tooltip {
    position: fixed;
    z-index: var(--z-toast);
    max-width: 240px;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--r-xs);
    background: var(--ink);
    color: var(--on-ink);
    font: var(--weight-medium) var(--text-2xs) / var(--leading-xs) 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] {
    pointer-events: auto;
  }
  .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: var(--space-2);
    padding: 0 var(--space-4);
    pointer-events: none;
  }
  .xxd-toast-region[data-scoped] {
    position: absolute;
    bottom: var(--toast-offset, 16px);
  }
  .xxd-toast-region[popover] {
    top: auto;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
  }
  .xxd-tooltip[popover] {
    inset: auto;
    margin: 0;
    border: 0;
    overflow: visible;
  }
  .xxd-toast {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: min(420px, 100%);
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--ink);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    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: var(--space-1);
  }
  .xxd-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-dialog);
    display: flex;
    flex-direction: column;
    width: min(var(--panel-w, 560px), 100%);
    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-room:has(~ .xxd-panel[data-open]) {
    padding-right: min(var(--panel-w, 560px), 100%);
  }
  .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) / var(--leading-sm) 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: var(--space-1) 0 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: var(--leading-sm);
  }
  .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 > .ui-icon:first-child {
    flex: none;
    margin-inline: 1px;
  }
  .xxd-menu:has(.xxd-menu__item > .ui-icon:first-child, [role=menuitemradio], [role=menuitemcheckbox]) .xxd-menu__item:not(:has(> .ui-icon:first-child), [role=menuitemradio], [role=menuitemcheckbox])::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
  }
  .xxd-menu__item[role=menuitemradio]::before,
  .xxd-menu__item[role=menuitemcheckbox]::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: transparent;
  }
  .xxd-menu__item[role=menuitemradio][aria-checked=true]::before {
    background:
      radial-gradient(
        circle,
        var(--action) 0 3px,
        transparent 3.5px);
  }
  .xxd-menu__item[role=menuitemcheckbox][aria-checked=true]::before {
    background: var(--action);
    -webkit-mask: var(--xxd-check) center / 14px no-repeat;
    mask: var(--xxd-check) center / 14px no-repeat;
  }
  .xxd-menu__item:is([role=menuitemradio], [role=menuitemcheckbox])[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: var(--space-2);
  }
  .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: var(--space-2) auto 0;
      border-radius: var(--r-pill);
      background: var(--line-strong);
    }
    .xxd-panel-room:has(~ .xxd-panel[data-open]) {
      padding-right: 0;
    }
    .xxd-panel {
      top: auto;
      width: 100%;
      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;
    }
  }
}
@layer xxd.components {
  :is(.xxd-dialog, .xxd-menu, .xxd-popover, .xxd-tooltip, .xxd-panel, .xxd-sheet)[data-static] {
    position: relative;
    inset: auto;
    z-index: auto;
    display: block;
    max-width: 100%;
    margin: 0;
    max-height: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    translate: none;
    animation: none;
    pointer-events: auto;
  }
  .xxd-menu[data-static] {
    display: grid;
  }
}

/* src/css/feedback.css */
@layer xxd.components {
  .xxd-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 20px;
    padding: 0 var(--space-2);
    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: var(--space-1);
    height: calc(var(--control-h-xs) + var(--space-1));
    padding: 0 var(--space-3);
    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[data-size=sm] {
    height: var(--control-h-sm);
  }
  .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 {
    container-type: inline-size;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--wash);
    color: var(--ink);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
  }
  .xxd-banner > .ui-icon {
    margin-top: var(--space-0-5);
    color: var(--muted);
  }
  .xxd-banner__title {
    margin: 0;
    font-weight: var(--weight-medium);
  }
  .xxd-banner__text {
    margin: var(--space-0-5) 0 0;
    color: var(--muted);
    font-size: var(--text-xs);
  }
  .xxd-banner__list {
    margin: var(--space-0-5) 0 0;
    padding-inline-start: 1.2em;
    list-style: disc;
  }
  .xxd-banner__list > li + li {
    margin-top: var(--space-0-5);
  }
  .xxd-banner > * {
    grid-row: 1;
    grid-column: 2;
  }
  .xxd-banner > .ui-icon {
    grid-column: 1;
  }
  .xxd-banner > .xxd-banner__actions {
    grid-column: 3;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .xxd-banner > .xxd-banner__close {
    grid-column: 4;
  }
  .xxd-banner:not(:has(> .ui-icon, > [data-xxd-icon])) {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .xxd-banner:not(:has(> .ui-icon, > [data-xxd-icon])) > * {
    grid-column: 1;
  }
  .xxd-banner:not(:has(> .ui-icon, > [data-xxd-icon])) > .xxd-banner__actions {
    grid-column: 2;
  }
  .xxd-banner:not(:has(> .ui-icon, > [data-xxd-icon])) > .xxd-banner__close {
    grid-column: 3;
  }
  .xxd-banner > [data-xxd-icon] {
    grid-column: 1;
  }
  @container (max-width: 440px) {
    .xxd-banner > .xxd-banner__actions {
      grid-row: 2;
      grid-column: 2 / -1;
    }
    .xxd-banner:not(:has(> .ui-icon, > [data-xxd-icon])) > .xxd-banner__actions {
      grid-column: 1 / -1;
    }
  }
  .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: var(--space-2);
    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) / var(--leading-sm) var(--font-body);
  }
  .xxd-empty__text {
    max-width: 320px;
    margin: 0;
    font-size: var(--text-xs);
    line-height: var(--leading-sm);
  }
  .xxd-empty__actions {
    margin-top: var(--space-1-5);
  }
  .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: var(--space-1-5);
    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%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .xxd-spinner {
      animation-name: xxd-breathe !important;
      animation-duration: 2.4s !important;
      animation-timing-function: ease-in-out !important;
      animation-iteration-count: infinite !important;
    }
    .xxd-loadbar::after {
      width: 100%;
      transform: none;
      animation-name: xxd-breathe !important;
      animation-duration: 2.4s !important;
      animation-timing-function: ease-in-out !important;
      animation-iteration-count: infinite !important;
    }
  }
  @keyframes xxd-breathe {
    50% {
      opacity: 0.35;
    }
  }
}

/* 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 var(--space-3);
    border-bottom: 1px solid var(--line-strong);
    color: var(--muted);
    font: var(--weight-medium) var(--text-xs) / var(--leading-xs) var(--font-body);
    text-align: left;
    white-space: nowrap;
  }
  .xxd-table td {
    height: 44px;
    padding: var(--space-1-5) var(--space-3);
    color: var(--ink);
    white-space: nowrap;
  }
  .xxd-table [data-wrap] {
    min-width: 16em;
    white-space: normal;
  }
  .xxd-table tr:has(> [data-wrap]) > :is(td, th) {
    padding-block: calc((44px - var(--leading-sm)) / 2);
    vertical-align: top;
  }
  .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 td > .xxd-logo {
    display: flex;
  }
  .xxd-table td .xxd-badge {
    font-size: var(--text-xs);
  }
  .xxd-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background:
      linear-gradient(
        to right,
        var(--paper) 40%,
        transparent) left / var(--space-6) 100% no-repeat local,
      linear-gradient(
        to left,
        var(--paper) 40%,
        transparent) right / var(--space-6) 100% no-repeat local,
      linear-gradient(
        to right,
        rgba(var(--shadow-rgb), 0.14),
        transparent) left / var(--space-3) 100% no-repeat scroll,
      linear-gradient(
        to left,
        rgba(var(--shadow-rgb), 0.14),
        transparent) right / var(--space-3) 100% no-repeat scroll,
      var(--paper);
  }
  .xxd-collapse > summary {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding-block: var(--space-3);
    color: var(--ink);
    font: var(--weight-medium) var(--text-sm) / var(--leading-sm) 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;
    margin-top: calc((1.4em - 14px) / 2);
    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 var(--space-3) calc(var(--icon-md) + var(--space-2));
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
  }
  .xxd-collapse + .xxd-collapse {
    border-top: 1px solid var(--line);
  }
  .xxd-code-inline,
  .xxd-prose :not(pre) > code {
    padding: 1px var(--space-1);
    border-radius: var(--r-xs);
    background: color-mix(in srgb, var(--action) 12%, transparent);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: calc(1em - 1px);
  }
  .xxd-prose :not(pre) > code {
    font-size: calc(1em - 2px);
  }
  .xxd-code,
  .xxd-prose pre {
    position: relative;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--action) 6%, var(--paper));
    color: var(--ink);
    font: var(--text-xs) / var(--leading-sm) 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 var(--space-1);
    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: var(--space-2);
  }
  .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: var(--space-1);
    padding: var(--space-3) var(--space-3) var(--space-3);
  }
  .xxd-card__title {
    margin: 0;
    overflow: hidden;
    font: var(--weight-medium) var(--text-sm) / var(--leading-sm) 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: var(--space-1);
  }
  .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: var(--space-1-5);
    height: 30px;
    padding: 0 var(--space-3);
    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-lg);
    line-height: var(--leading-lg);
    overflow-wrap: break-word;
  }
  .xxd-prose > * {
    margin: 0;
  }
  .xxd-prose > * + * {
    margin-top: var(--space-4);
  }
  .xxd-prose > * + :is(pre, blockquote, table, figure, ul, ol, img, video),
  .xxd-prose > :is(pre, blockquote, table, figure, ul, ol, img, video) + * {
    margin-top: var(--space-5);
  }
  .xxd-prose h1,
  .xxd-prose h2,
  .xxd-prose h3 {
    color: var(--ink);
    font-family: var(--font-title);
    font-weight: var(--weight-strong);
    line-height: var(--leading-lg);
  }
  .xxd-prose h1 {
    font-size: var(--text-display);
    line-height: var(--leading-display);
  }
  .xxd-prose h2 {
    margin-top: var(--space-8);
    font-size: var(--text-xl);
  }
  .xxd-prose h3 {
    margin-top: var(--space-6);
    font-size: var(--text-lg);
    line-height: var(--leading-md);
  }
  .xxd-prose h2 + *,
  .xxd-prose h3 + * {
    margin-top: var(--space-2);
  }
  .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:not([class]),
  .xxd-prose ol:not([class]) {
    padding-left: 1.4em;
  }
  .xxd-prose ul:not([class]) {
    list-style: disc;
  }
  .xxd-prose ol:not([class]) {
    list-style: decimal;
  }
  .xxd-prose :is(ul, ol):not([class]) > li::marker {
    color: var(--action);
  }
  .xxd-prose :is(ul, ol):not([class]) > li + li {
    margin-top: var(--space-1);
  }
  .xxd-prose blockquote {
    padding-left: var(--space-4);
    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: var(--space-6) 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: var(--space-1-5) var(--space-3);
  }
  .xxd-prose tr + tr td {
    border-top: 1px solid var(--line);
  }
  .xxd-prose mark {
    padding: 0 var(--space-0-5);
    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: min(14vh, 120px) auto auto;
    padding: 0;
  }
  .xxd-palette__search {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    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: var(--space-1);
    overflow: auto;
    list-style: none;
  }
  .xxd-palette__empty {
    padding: var(--space-6) var(--space-4);
    color: var(--muted);
    font-size: var(--text-xs);
    text-align: center;
  }
  .xxd-listbox {
    position: fixed;
    z-index: var(--z-popover);
    margin: 0;
    padding: var(--space-1);
    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: var(--space-2);
    min-height: 32px;
    padding: 0 var(--space-3);
    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: var(--space-2);
    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: var(--space-2);
    min-height: 56px;
    padding: 0 var(--space-3);
  }
  .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: var(--space-2);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .xxd-sidebar__group + .xxd-sidebar__group {
    margin-top: var(--space-4);
  }
  .xxd-sidebar__label {
    padding: var(--space-1) var(--space-2);
    color: var(--muted);
    font: var(--weight-medium) var(--text-2xs) / var(--leading-xs) var(--font-body);
    white-space: nowrap;
  }
  .xxd-sidebar__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 34px;
    padding: 0 var(--space-2);
    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) / var(--leading-sm) 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: var(--space-0-5) 0 var(--space-1) calc(var(--space-2) + var(--icon-rail) / 2);
    padding-left: var(--space-3);
    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: var(--space-0-5);
    min-height: 40px;
    padding: var(--space-1);
  }
  .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: var(--space-1);
    min-width: 30px;
    height: 30px;
    padding: 0 var(--space-1-5);
    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 {
    color: var(--disabled-ink);
    cursor: not-allowed;
  }
  .xxd-toolbar__sep {
    flex: none;
    width: 1px;
    height: 18px;
    margin: 0 var(--space-1);
    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: var(--space-2);
    min-height: 36px;
    padding: var(--space-1-5) var(--space-4);
    color: var(--muted);
    font-size: var(--text-xs);
  }
  .xxd-layer__primary {
    padding: var(--space-4);
    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 {
    --_gap: var(--layout-gap, var(--space-4));
    container-type: inline-size;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--_gap);
  }
  .xxd-layout > * {
    flex: 0 0 100%;
    min-width: 0;
  }
  @container (min-width: 560px) {
    .xxd-layout:is([data-cols="2up"], [data-cols="3up"], [data-cols="4up"]) > * {
      flex-basis: calc((100% - var(--_gap)) / 2);
    }
    .xxd-layout[data-cols="1-2"] > :nth-child(odd),
    .xxd-layout[data-cols="2-1"] > :nth-child(even) {
      flex-basis: calc((100% - var(--_gap)) / 3);
    }
    .xxd-layout[data-cols="1-2"] > :nth-child(even),
    .xxd-layout[data-cols="2-1"] > :nth-child(odd) {
      flex-basis: calc((100% - var(--_gap)) * 2 / 3);
    }
    .xxd-layout[data-cols="1-3"] > :nth-child(odd) {
      flex-basis: calc((100% - var(--_gap)) / 4);
    }
    .xxd-layout[data-cols="1-3"] > :nth-child(even) {
      flex-basis: calc((100% - var(--_gap)) * 3 / 4);
    }
    .xxd-layout[data-cols=side] > :nth-child(odd) {
      flex-basis: 240px;
    }
    .xxd-layout[data-cols=side] > :nth-child(even) {
      flex-basis: calc(100% - 240px - var(--_gap));
    }
  }
  @container (min-width: 760px) {
    .xxd-layout[data-cols="3up"] > * {
      flex-basis: calc((100% - 2 * var(--_gap)) / 3);
    }
  }
  @container (min-width: 880px) {
    .xxd-layout[data-cols="4up"] > * {
      flex-basis: calc((100% - 3 * var(--_gap)) / 4);
    }
  }
  .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 {
    container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    padding: var(--space-6) 0 var(--space-5);
  }
  .xxd-page-header > :not(.xxd-page-header__row, .xxd-page-header__desc) {
    grid-column: 1 / -1;
  }
  .xxd-page-header > .xxd-breadcrumbs {
    margin-bottom: var(--space-2);
  }
  .xxd-page-header__row {
    display: contents;
  }
  .xxd-page-header__title {
    grid-column: 1;
    min-width: min(100%, 12em);
    margin: 0;
    font: var(--weight-strong) var(--text-xl) / var(--leading-lg) var(--font-body);
  }
  .xxd-page-header__desc {
    grid-column: 1;
    max-width: 640px;
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
  }
  .xxd-page-header__actions {
    grid-column: 2;
    grid-row: span 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
  }
  @container (max-width: 480px) {
    .xxd-page-header__actions {
      grid-column: 1 / -1;
      grid-row: auto;
      order: 1;
      justify-content: flex-start;
      margin-top: var(--space-2);
    }
    .xxd-page-header > .xxd-tabs {
      order: 2;
    }
  }
  .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 var(--space-1-5);
    color: var(--muted);
    font: var(--weight-medium) var(--text-2xs) / var(--leading-xs) var(--font-body);
  }
  .xxd-toc a {
    display: block;
    padding: var(--space-1) 0 var(--space-1) var(--space-3);
    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: var(--space-6);
  }
  .xxd-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    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: var(--space-1);
    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: var(--space-1);
    margin: calc(-1 * var(--space-0-5)) calc(-1 * var(--space-1));
    padding: var(--space-0-5) var(--space-1);
    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 {
    container-type: inline-size;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
  }
  @container (max-width: 419px) {
    .xxd-pagination:not([data-simple]) > [data-page-to]:not(:first-child, :last-child),
    .xxd-pagination:not([data-simple]) > .xxd-pagination__gap,
    .xxd-pagination__info {
      display: none;
    }
    .xxd-pagination:not([data-simple]) > .xxd-pagination__status {
      display: inline-block;
    }
  }
  @media (max-width: 480px) {
    .xxd-pagination:not([data-simple]) > [data-page-to]:not(:first-child, :last-child),
    .xxd-pagination:not([data-simple]) > .xxd-pagination__gap {
      display: none;
    }
    .xxd-pagination:not([data-simple]) > .xxd-pagination__status {
      display: inline-block;
    }
  }
  .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: var(--space-1-5);
    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: var(--space-2);
    min-height: 34px;
    padding: 0 var(--space-1-5) 0 var(--space-3);
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--action) 3%, var(--paper));
    color: var(--muted);
    font: var(--text-2xs) / var(--leading-xs) 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: var(--space-3);
    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] {
    background: var(--action-fill);
    color: var(--on-action);
  }
  .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: var(--space-2) var(--space-3);
    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: calc(var(--space-8) * 2) 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: var(--space-1-5);
  }
  .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 var(--space-1);
    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: var(--space-2);
    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) / var(--leading-sm) 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: 1px 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) / var(--leading-sm) 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: var(--space-2);
    padding: var(--space-3) var(--space-3);
    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 calc(var(--icon-button) + var(--space-4));
  }
  .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: var(--space-3);
  }
  .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: var(--space-0-5);
    padding: var(--space-1);
    border-radius: var(--r-pill);
    background: rgba(5, 5, 5, 0.64);
    color: #ffffff;
  }
  .xxd-pill > button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    height: 28px;
    padding: 0 var(--space-3);
    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 > .xxd-link {
    justify-self: start;
  }
  .xxd-history__day {
    margin: 0 0 var(--space-1-5);
    padding: 0 var(--space-0-5);
    color: var(--muted);
    font: var(--weight-medium) var(--text-xs) / var(--leading-xs) var(--font-body);
  }
  .xxd-thumbs {
    display: flex;
    flex: none;
    width: 64px;
  }
  .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: var(--space-1) 0 0;
    font: var(--weight-strong) var(--text-lg) / var(--leading-md) var(--font-body);
  }
  .xxd-auth__line {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: var(--leading-sm);
  }
  .xxd-auth__gift {
    color: var(--action-text);
    font-size: var(--text-xs);
  }
  .xxd-auth form {
    display: grid;
    gap: var(--space-3);
    width: 100%;
    margin-top: var(--space-2);
    text-align: left;
  }
  .xxd-auth__or {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    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 {
    justify-self: stretch;
    margin-top: var(--space-2);
    color: var(--muted);
    font-size: var(--text-2xs);
    line-height: var(--leading-xs);
  }
  .xxd-auth__terms a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
  }
  .xxd-auth [data-step]:not([data-active]) {
    display: none;
  }
  .xxd-auth [data-step][data-active] {
    display: grid;
    gap: var(--space-3);
    animation: xxd-fade-in var(--motion-quick) ease;
  }
  .xxd-account {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
  }
  .xxd-account__main {
    flex: 1 1 8em;
    min-width: 0;
  }
  .xxd-account__name {
    overflow: hidden;
    font: var(--weight-medium) var(--text-sm) / var(--leading-sm) 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: var(--space-3);
    padding: var(--space-3) var(--space-4);
    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) / var(--leading-sm) 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: var(--space-2);
    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: var(--space-2);
    background: #ffffff;
  }
  .xxd-statusline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 32px;
    padding: var(--space-1-5) var(--space-4);
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: var(--leading-sm);
  }
  .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: var(--space-2);
    height: 30px;
    padding: 0 var(--space-3) 0 var(--space-3);
    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: var(--space-2);
    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) / var(--leading-sm) 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;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--weight-strong) var(--text-xl, 22px) / var(--leading-lg) var(--font-body);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }
  .xxd-stat__unit {
    margin-inline-start: var(--space-0-5);
    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%;
  }
  .xxd-stat {
    container-type: inline-size;
    min-width: 0;
  }
  @container (max-width: 259px) {
    .xxd-stat > * {
      grid-column: 1 / -1;
    }
    .xxd-stat > .xxd-stat__spark {
      grid-row: 4;
      width: 100%;
      margin-top: var(--space-2);
    }
  }
}

/* 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: var(--leading-xs);
  }
  .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: var(--space-1) var(--space-2);
    border-radius: var(--r-xs);
    background: var(--ink);
    color: var(--on-ink);
    font: var(--weight-medium) var(--text-2xs) / var(--leading-xs) 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;
    }
    .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 */