/* 设计系统 0.7 · 钻瓷
   - 光：一盏灯，固定在正上方——影直落、亮边在上沿；没有脚本，没有太阳，不跟倾斜。
   - 所有尺寸、颜色、影、动效都来自 tokens.json（--ds-*）。
   - 这里留下的数字只有材质公式本身的常数：釉的晕染比例、釉边的明暗。
   - 不改任何元素的全局样式：一切都在 .ds-screen 里面，或者是 .ds-* 类。可以直接放进任何 app。
   - 深色：tokens.css 用 [data-theme="dark"]；跟随系统时见「实现指南 · 深色」。 */

/* 用到会随深浅色变的颜色的组合变量，也在每个 [data-theme] 上重新算：
   深色可以只放在一块上（应用设计页的画板），变量里的 var() 在哪里定义就在哪里算好。 */
:root,[data-theme]{
  /* 地面那张画：屏幕的底和烟云共用，所以烟云落在渐变的、被场景染了色的地面上也接得上 */
  --ds-ground-paint:linear-gradient(180deg,var(--ds-bg),var(--ds-bg-low));
  /* 字重：浅色屏照旧；深色屏上浅字显得粗，各减一点（ds-weight-*-dark）。固定字重的字体仍落到原来那一档 */
  --ds-w-500:500;--ds-w-600:600;--ds-w-700:700;
}
[data-theme="dark"]{--ds-w-500:var(--ds-weight-500-dark);--ds-w-600:var(--ds-weight-600-dark);--ds-w-700:var(--ds-weight-700-dark)}

/* 膜在边上的那一线：一个整的设备像素（ds-hairline），不画成糊的半个。1× 1px · 2× 0.5px · 3× 两个设备像素 */
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){:root{--ds-hairline:.5px}}
@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){:root{--ds-hairline:calc(2px / 3)}}

/* ── 屏幕：地面 ─────────────────────────────
   地面是固定的一层，不随长页面拉伸，所以总能和烟云的颜色接上（iOS 不支持 background-attachment: fixed）。 */
.ds-screen{position:relative;isolation:isolate;min-height:100%;color:var(--ds-ink);font-family:var(--font-ds-ui);-webkit-font-smoothing:antialiased}
/* 地面铺多高：整屏的 app 是屏幕高；画板里（.ds-screen 不占整屏，用 transform 把 fixed 关在里面）设成画板的高，烟云才接得上 */
.ds-screen{--ds-screen-h:100vh}
@supports (height:100dvh){.ds-screen{--ds-screen-h:100dvh}}
.ds-screen::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--ds-ground-paint)}
/* 用 :where 把特异性降到 0，任何 .ds-* 类都能覆盖它 */
:where(.ds-screen) :where(button){font:inherit;color:inherit;cursor:pointer}
.ds-ground{background:var(--ds-ground-paint)}
.ds-column{max-width:var(--ds-column);margin-left:auto;margin-right:auto}
/* 字样类的字重跟着深浅色（tokens.css 里写的是浅色的数） */
.ds-ui{font-weight:var(--ds-w-500)}
.ds-title-page,.ds-title-content,.ds-text-cta{font-weight:var(--ds-w-600)}
/* 标题几行一样长；正文最后一行不留一个孤字；会变的数字等宽，读数滑动时不抖（app 自己的读数加 .ds-num） */
.ds-title-page,.ds-title-content{text-wrap:balance}
.ds-body,.ds-content-caption{text-wrap:pretty}
.ds-num,.ds-section-head>small{font-variant-numeric:tabular-nums}
/* 内容文字：任何字号都用内容字体——输入框、选择里的内容也是（盖过它们的 font:inherit） */
.ds-content,.ds-field.ds-content,.ds-select.ds-content{font-family:var(--font-ds-content)}

/* ── 钻瓷 · 凸：卡片、列表行、按键 ───────────── */
.ds-raised{position:relative;box-sizing:border-box;border:0;text-align:left;color:var(--ds-ink);
  background:var(--ds-surface);border-radius:var(--ds-radius-card);padding:var(--ds-pad-card);box-shadow:var(--ds-shadow-raised);
  transition:transform var(--ds-duration) var(--ds-ease),box-shadow var(--ds-duration) var(--ds-ease)}
.ds-raised-list{display:flex;flex-direction:column;gap:var(--ds-space-group-10)}
.ds-thumb{border-radius:var(--ds-radius-thumb);overflow:hidden}          /* 卡片里的缩图，内距 10 */

/* ── 钻瓷 · 整页 ───────────── */
.ds-sheet{position:relative;box-sizing:border-box;color:var(--ds-ink);background:var(--ds-surface);border-radius:var(--ds-radius-page);padding:var(--ds-pad-page);box-shadow:var(--ds-shadow-page)}

/* ── 浮层 · 底部面板 ─────────────
   一层自己的：可以有自己的一个釉钮。后面是透明的遮罩，点它 = 取消。 */
.ds-scrim{position:fixed;inset:0;z-index:var(--ds-z-scrim);background:var(--ds-scrim)}
.ds-panel{position:relative;box-sizing:border-box;z-index:var(--ds-z-panel);width:100%;max-width:var(--ds-column);margin:0 auto;
  max-height:calc(100dvh - var(--ds-hand-top) - var(--ds-size-control));overflow:auto;overscroll-behavior:contain;
  color:var(--ds-ink);background:var(--ds-surface);border-radius:var(--ds-radius-sheet) var(--ds-radius-sheet) 0 0;
  padding:0 var(--ds-pad-page) var(--ds-pad-page);box-shadow:var(--ds-shadow-overlay)}
.ds-panel.ds-docked{position:fixed;left:0;right:0;bottom:0}
/* 面板这块瓷在它的下沿以下还连着（屏幕边、键盘后面）：往上拉露出的是瓷，不是缝 */
.ds-panel::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:400px;background:var(--ds-surface);pointer-events:none}
/* 把手：整宽的按钮，点它 = 取消。没有拖动时，它不假装能拖。 */
.ds-grab{display:block;width:100%;height:var(--ds-size-grab);padding:0;border:0;background:none;position:relative}
.ds-grab::before{content:"";position:absolute;left:50%;top:50%;width:var(--ds-size-grab-bar-w);height:var(--ds-size-grab-bar-h);transform:translate(-50%,-50%);border-radius:var(--ds-size-grab-bar-h);background:var(--ds-ink-caption);opacity:.35}

/* ── 浮 · 2：拿起 ─────────────
   拿起的东西只是离地更高：上移 3，影更远更淡。没有星芒。 */
.ds-lifted{position:relative;transform:translateY(var(--ds-lift-offset));box-shadow:var(--ds-shadow-lifted)}

/* ── 手 · 同一块瓷 ─────────────
   浮在内容上的顶部按钮、托盘、胶囊、撤销条：和卡片同一种不透明的钻瓷，同一档高度（凸 · 1）。没有薄胎、没有模糊。 */
.ds-hand,.ds-icon-btn,.ds-text-btn,.ds-chip,.ds-tray,.ds-undo{
  background:var(--ds-surface);box-shadow:var(--ds-shadow-raised);
  transition:transform var(--ds-duration) var(--ds-ease),box-shadow var(--ds-duration) var(--ds-ease)}
.ds-icon-btn{position:relative;box-sizing:border-box;width:var(--ds-size-control);height:var(--ds-size-control);padding:0;border:0;border-radius:50%;display:inline-grid;place-items:center;color:var(--ds-ink)}
.ds-icon-btn svg{width:var(--ds-size-icon-hand);height:var(--ds-size-icon-hand)}
.ds-text-btn{position:relative;box-sizing:border-box;height:var(--ds-size-text-btn);padding:0 var(--ds-pad-text-btn);border:0;border-radius:calc(var(--ds-size-text-btn) / 2);display:inline-flex;align-items:center;gap:var(--ds-space-in-8);font-size:15px;font-weight:var(--ds-w-500);color:var(--ds-ink)}
.ds-chip{position:relative;box-sizing:border-box;height:var(--ds-size-chip);padding:0 var(--ds-pad-chip);border:0;border-radius:calc(var(--ds-size-chip) / 2);display:inline-flex;align-items:center;gap:var(--ds-space-in-8);font-size:14px;color:var(--ds-ink)}
/* 顶部的手 */
.ds-hands{position:sticky;top:var(--ds-hand-top);z-index:var(--ds-z-hand);display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-in-8);padding:0 var(--ds-hand-side)}

/* ── 底部：托盘、釉钮、撤销条对齐同一栏 ─────────────
   托盘停靠时填满这一栏；同一屏两样都有时，釉钮在托盘上面，间距 12。 */
.ds-dock{position:fixed;left:0;right:0;bottom:var(--ds-dock-bottom);z-index:var(--ds-z-dock);box-sizing:border-box;max-width:var(--ds-column);margin:0 auto;padding:0 var(--ds-space-page-20);display:flex;flex-direction:column;gap:var(--ds-space-group-12)}
.ds-dock>.ds-tray{display:flex}

/* ── 托盘 ───────────── */
/* 托盘是一道槽（凹，inset）：和 app 里所有的凹一样，几乎和它周围的底色一样，只有内影说明那是一道槽；场景的光那一层的凹是那里的底色再深一步，不混釉（见 .ds-scene-lit）。不用 app 的釉：那颜色在没有别的釉的屏上「从哪儿都不来」；明显深一档又「发灰」（主人，2026-11-02）。透镜在槽里滑；凸起的白瓷上透镜看不见。 */
.ds-tray{position:relative;display:inline-flex;gap:var(--ds-space-in-4);padding:var(--ds-space-in-4);border-radius:var(--ds-radius-tray);background:var(--ds-inset);box-shadow:var(--ds-shadow-inset)}
.ds-tray>button{position:relative;z-index:2;flex:1 1 0;min-width:auto;height:var(--ds-size-segment);padding:0 var(--ds-pad-segment);border:0;border-radius:var(--ds-radius-tray-segment);background:transparent;font-size:15px;font-weight:var(--ds-w-500);color:var(--ds-ink-secondary);white-space:nowrap;
  transition:transform var(--ds-duration) var(--ds-ease),color var(--ds-duration) var(--ds-ease)}
/* 透镜里要有气：一格最窄是它的字加左右内距（min-width:auto，字不折行），字长的一格宽一点，其余均分；::after 把最窄撑到 size-segment-min（64）。
   lens.js 再按选中时的字（600、放大 lens-magnify）写 min-width，所以字到透镜边至少 lens-air（14），选中时格子不变宽。 */
.ds-tray>button::after{content:"";display:block;width:calc(var(--ds-size-segment-min) - 2 * var(--ds-pad-segment));height:0}

/* ── 内容里的托盘 ─────────────
   同一块瓷、同一片透镜，矮一档：格 36（size-option），托盘 44，圆角同心。放在内容里（版本、速度、档位）；停靠或浮着的用 .ds-tray。 */
.ds-options{position:relative;display:inline-flex;gap:var(--ds-space-in-4);padding:var(--ds-space-in-4);border-radius:calc(var(--ds-size-option) / 2 + var(--ds-space-in-4));background:var(--ds-inset);box-shadow:var(--ds-shadow-inset)}
.ds-options>button{position:relative;z-index:2;height:var(--ds-size-option);padding:0 var(--ds-pad-option);border:0;border-radius:calc(var(--ds-size-option) / 2);background:transparent;font-size:14px;color:var(--ds-ink-secondary);white-space:nowrap;
  transition:transform var(--ds-duration) var(--ds-ease),color var(--ds-duration) var(--ds-ease)}

/* ── 透镜 ─────────────
   选中 = 一滴厚的清釉落在槽里、字的下面。字不动、不换底色；选中的字放大 7%、变 ink、600，印在釉滴上面（按钮 z-index:2，自带的透镜 z-index:-1，滑的那片 z-index:1）。
   透镜是一滴清釉：透的，有一点身（lens-fill），没有边、没有上沿的亮、没有膜（2026-11-02：玻璃和瓷不同步，而且盖住字，字发灰）；只有瓷的影（shadow-lens）。
   不加滤镜、不发灰：透过它看得见槽，一眼认得出那里有一滴釉。
   单选的透镜可以拖：手指横着拖过 lens-drag-min，透镜跟着手指走，经过每一格「选择」，松手落在哪一格就选哪一格（lens.js）。
   .ds-lens        这个元素自己带一片透镜（::before，跟着它缩回原尺寸）。多选、或脚本还没量好时用。
   .ds-lens-slide  单选组里唯一的一片透镜，由 lens.js 量出选中项的位置，滑过去（200 ms）。
   单选组标 data-ds-choice="single"；lens.js 接管后组上有 .ds-sliding，每个按钮自己的透镜就不画了。 */
.ds-tray>button[aria-pressed="true"],.ds-tray>button[aria-selected="true"],.ds-tray>button[aria-checked="true"],
.ds-options>button[aria-pressed="true"],.ds-options>button[aria-selected="true"],.ds-options>button[aria-checked="true"],
.ds-index>button[aria-current="true"],.ds-lens{
  color:var(--ds-ink);font-weight:var(--ds-w-600);transform:scale(var(--ds-lens-magnify))}
.ds-tray>button[aria-pressed="true"]::before,.ds-tray>button[aria-selected="true"]::before,.ds-tray>button[aria-checked="true"]::before,
.ds-options>button[aria-pressed="true"]::before,.ds-options>button[aria-selected="true"]::before,.ds-options>button[aria-checked="true"]::before,
.ds-index>button[aria-current="true"]::before,.ds-lens::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;transform:scale(var(--ds-lens-unscale))}   /* 在字下面 */
.ds-tray>button[aria-pressed="true"]::before,.ds-tray>button[aria-selected="true"]::before,.ds-tray>button[aria-checked="true"]::before,
.ds-options>button[aria-pressed="true"]::before,.ds-options>button[aria-selected="true"]::before,.ds-options>button[aria-checked="true"]::before,
.ds-index>button[aria-current="true"]::before,.ds-lens::before,.ds-lens-slide{
  background:var(--ds-lens-fill);
  box-shadow:var(--ds-shadow-lens)}
.ds-lens-slide{position:absolute;left:0;top:0;z-index:1;pointer-events:none;border-radius:var(--ds-radius-tray-segment);
  transition:transform var(--ds-duration) var(--ds-ease),width var(--ds-duration) var(--ds-ease),opacity var(--ds-duration) var(--ds-ease)}
.ds-options .ds-lens-slide{border-radius:calc(var(--ds-size-option) / 2)}
.ds-lens-slide.ds-dragging{transition:width var(--ds-duration) var(--ds-ease),opacity var(--ds-duration) var(--ds-ease)}   /* 拖动时 1:1 跟手 */
.ds-sliding{touch-action:pan-y}                                                   /* 横向拖动交给透镜，竖向仍然滚动 */
.ds-sliding>button::before{content:none!important}

/* ── 釉钮 ─────────────
   素釉：只有 160° 的晕染（淡的一头在上），没有光泽。--ds-en 是釉色，--ds-on-en 是釉上的字；默认乌金釉（深色是月白釉）。 */
.ds-cta,.ds-rim{--ds-en:var(--ds-solid);--ds-on-en:var(--ds-on-solid)}   /* 在 .ds-en-* 之前：粉彩盖得过默认 */
.ds-cta{position:relative;box-sizing:border-box;width:100%;height:var(--ds-size-cta);padding:0 var(--ds-pad-cta);border:0;border-radius:var(--ds-radius-pill);
  display:flex;align-items:center;justify-content:center;gap:var(--ds-gap-cta);font-size:17px;font-weight:var(--ds-w-600);letter-spacing:-.01em;color:var(--ds-on-en);
  background:
    linear-gradient(160deg,color-mix(in srgb,var(--ds-en) 82%,white) 0%,var(--ds-en) 55%,color-mix(in srgb,var(--ds-en) 90%,black) 100%);
  /* 影由高度定，不由颜色定：釉钮和同高度的钻瓷落一样的中性影（带釉色的影像在发光） */
  box-shadow:var(--ds-shadow-glaze),var(--ds-shadow-glaze-drop);
  transition:transform var(--ds-duration) var(--ds-ease),box-shadow var(--ds-duration) var(--ds-ease)}
.ds-cta.ds-inline{width:auto;display:inline-flex}
.ds-en-rouge{--ds-en:var(--ds-en-rouge);--ds-on-en:var(--ds-on-en-rouge)}
.ds-en-coral{--ds-en:var(--ds-en-coral);--ds-on-en:var(--ds-on-en-coral)}
.ds-en-turquoise{--ds-en:var(--ds-en-turquoise);--ds-on-en:var(--ds-on-en-turquoise)}
.ds-en-jilan{--ds-en:var(--ds-en-jilan);--ds-on-en:var(--ds-on-en-jilan)}
.ds-en-lemon{--ds-en:var(--ds-en-lemon);--ds-on-en:var(--ds-on-en-lemon)}
.ds-en-celadon{--ds-en:var(--ds-en-celadon);--ds-on-en:var(--ds-on-en-celadon)}
.ds-cta.ds-en-rouge,.ds-cta.ds-en-coral,.ds-cta.ds-en-turquoise,.ds-cta.ds-en-jilan,.ds-cta.ds-en-lemon,.ds-cta.ds-en-celadon{color:var(--ds-on-en)}

/* ── 釉边钮 ─────────────
   这一层里主操作以外、值得做成按钮的事：一块白瓷的长钮，边上一圈凸起的釉珠（ds-size-rim 2px），字是墨。
   釉珠是一圈真的凸起：上面的一头浅、下面的一头深（和釉钮的晕染同一个 160°）。它就是这块瓷的边，所以不再覆膜；
   瓷身 surface、影和同高度的钻瓷一样（ds-shadow-glaze-drop）。一层可以有几个；它从不单独当主操作。
   尺寸、字、按下、禁用、忙都和釉钮一样；颜色跟 .ds-en-*，字不跟（永远 ink）。 */
.ds-rim{position:relative;box-sizing:border-box;width:100%;height:var(--ds-size-cta);padding:0 var(--ds-pad-cta);border:var(--ds-size-rim) solid transparent;border-radius:var(--ds-radius-pill);
  display:flex;align-items:center;justify-content:center;gap:var(--ds-gap-cta);font-size:17px;font-weight:var(--ds-w-600);letter-spacing:-.01em;color:var(--ds-ink);
  background:
    linear-gradient(var(--ds-surface),var(--ds-surface)) padding-box,
    linear-gradient(160deg,color-mix(in srgb,var(--ds-en) 55%,white) 0%,var(--ds-en) 45%,color-mix(in srgb,var(--ds-en) 72%,black) 100%) border-box;
  box-shadow:var(--ds-shadow-glaze-drop);
  transition:transform var(--ds-duration) var(--ds-ease),box-shadow var(--ds-duration) var(--ds-ease)}
[data-theme="dark"] .ds-rim{background:
    linear-gradient(var(--ds-surface),var(--ds-surface)) padding-box,
    linear-gradient(160deg,color-mix(in srgb,var(--ds-en) 70%,white) 0%,var(--ds-en) 45%,color-mix(in srgb,var(--ds-en) 60%,black) 100%) border-box}
.ds-rim.ds-inline{width:auto;display:inline-flex}
.ds-rim.ds-en-rouge,.ds-rim.ds-en-coral,.ds-rim.ds-en-turquoise,.ds-rim.ds-en-jilan,.ds-rim.ds-en-lemon,.ds-rim.ds-en-celadon{color:var(--ds-ink)}

/* ── 撤销条：刚做完、还能反悔的事 ───────────── */
.ds-undo{box-sizing:border-box;height:var(--ds-size-undo);border-radius:calc(var(--ds-size-undo) / 2);display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-group-12);padding:0 var(--ds-pad-text-btn) 0 var(--ds-pad-card);font-size:14px;color:var(--ds-ink-secondary)}
.ds-undo>button{position:relative;height:var(--ds-size-text-btn);padding:0 var(--ds-pad-text-btn);border:0;border-radius:calc(var(--ds-size-text-btn) / 2);background:none;font-weight:var(--ds-w-600);color:var(--ds-ink)}

/* ── 凹 · 输入 ───────────── */
.ds-field{box-sizing:border-box;width:100%;height:var(--ds-size-control);padding:0 var(--ds-pad-input);border:0;outline:none;border-radius:var(--ds-radius-input);background:var(--ds-inset);box-shadow:var(--ds-shadow-inset);font:inherit;font-size:15px;color:var(--ds-ink)}
textarea.ds-field{height:auto;min-height:var(--ds-size-textarea-min);padding:var(--ds-pad-textarea-y) var(--ds-pad-input);line-height:1.6;resize:none}
.ds-field::placeholder{color:var(--ds-ink-caption)}
.ds-field[aria-invalid="true"]{box-shadow:var(--ds-shadow-inset),inset 0 0 0 1px var(--ds-danger)}
.ds-status{margin-top:var(--ds-space-in-8);font-size:13px;line-height:1.45;color:var(--ds-ink-caption)}
.ds-status.ds-error{color:var(--ds-danger)}
/* 搜索：输入框 + 清除 */
.ds-search{position:relative}
.ds-search>.ds-field{padding-right:var(--ds-size-control)}
.ds-search>button{position:absolute;right:0;top:0;width:var(--ds-size-control);height:var(--ds-size-control);padding:0;border:0;background:none;color:var(--ds-ink-caption);display:grid;place-items:center}

/* ── 单开关：开是槽里凸起的一块钻瓷，关是空槽 ── */
.ds-switch{position:relative;box-sizing:border-box;width:var(--ds-size-switch-w);height:var(--ds-size-switch-h);padding:var(--ds-pad-switch);border:0;border-radius:var(--ds-radius-switch);background:var(--ds-inset);box-shadow:var(--ds-shadow-inset)}
.ds-switch>span{position:relative;display:block;height:100%;border-radius:var(--ds-radius-switch-knob);transition:background var(--ds-duration) var(--ds-ease),box-shadow var(--ds-duration) var(--ds-ease)}
.ds-switch[aria-checked="true"]>span{background:var(--ds-surface);box-shadow:var(--ds-shadow-segment)}
.ds-switch[aria-checked="true"]>span::after{content:"";position:absolute;left:50%;top:50%;width:var(--ds-size-switch-dot);height:var(--ds-size-switch-dot);transform:translate(-50%,-50%);border-radius:50%;background:var(--ds-en,var(--ds-solid))}
/* 开关那一点用本 app 的釉色：在开关或它的祖先上加 .ds-en-* */

/* ── 勾选：多选列表里每行一格 ─────────────
   刻进地面的一个小槽；选中时槽里放进一块乌金釉（深色是月白釉）：内距 3，圆角同心，和开关一家。不画勾。
   釉面见下面「釉面」；它不跟 app 的粉彩走，坐在槽里只有贴地的一线影。 */
.ds-check{position:relative;flex:none;box-sizing:border-box;width:var(--ds-size-check);height:var(--ds-size-check);border-radius:var(--ds-radius-check);background:var(--ds-inset);box-shadow:var(--ds-shadow-inset)}
.ds-check::before{content:"";position:absolute;inset:var(--ds-pad-switch);border-radius:calc(var(--ds-radius-check) - var(--ds-pad-switch));
  opacity:0;transform:scale(.8);transition:opacity var(--ds-duration) var(--ds-ease),transform var(--ds-duration) var(--ds-ease)}
[aria-checked="true"]>.ds-check::before,[aria-selected="true"]>.ds-check::before,.ds-check[aria-checked="true"]::before{opacity:1;transform:none}
[aria-checked="true"]>.ds-row-label,[aria-selected="true"]>.ds-row-label{font-weight:var(--ds-w-600)}

/* ── 进度、范围 ───────────── */
.ds-progress{position:relative;height:var(--ds-size-progress);border-radius:var(--ds-size-progress);background:var(--ds-inset);overflow:hidden}
.ds-progress>i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:var(--ds-solid)}
.ds-range{position:relative;height:var(--ds-size-control);display:flex;align-items:center}
.ds-range>.ds-track{position:relative;flex:1;height:var(--ds-size-track);border-radius:var(--ds-size-track);background:var(--ds-inset);box-shadow:var(--ds-shadow-inset)}
/* 按高度叠：−1 凹槽和槽里的釉（一段的淡釉在下，已走的满釉在上）；1 坐在轨上的釉珠；1.5 手指下的透镜柄。
   谁在上面只由高度决定，不由写的先后决定。 */
.ds-range .ds-fill{position:absolute;top:0;bottom:0;z-index:1;border-radius:inherit;background:var(--ds-en,var(--ds-solid))}
/* 一段（循环、选段）：一层淡釉嵌在凹槽里，两端各一颗小釉珠坐在轨上（釉面见下面「釉面」） */
.ds-range .ds-span{position:absolute;top:0;bottom:0;border-radius:inherit;background:color-mix(in srgb,var(--ds-en,var(--ds-solid)) var(--ds-span-inlay),transparent)}
.ds-range .ds-span::before,.ds-range .ds-span::after{content:"";position:absolute;top:50%;z-index:2;width:var(--ds-size-span-bead);height:var(--ds-size-span-bead);margin:calc(var(--ds-size-span-bead) / -2) 0 0 calc(var(--ds-size-span-bead) / -2);border-radius:50%}
.ds-range .ds-span::before{left:0}
.ds-range .ds-span::after{left:100%}
/* 柄：一滴清釉（和透镜同一滴），透过它看得见轨、釉和釉珠 */
.ds-range .ds-thumb-knob{position:absolute;top:50%;z-index:3;width:var(--ds-size-thumb);height:var(--ds-size-thumb);margin-left:calc(var(--ds-size-thumb) / -2);transform:translateY(-50%);border-radius:50%;
  background:var(--ds-lens-fill);
  box-shadow:var(--ds-shadow-lens)}

/* ── 索引条：当前一格盖透镜 ───────────── */
.ds-index{position:relative;display:flex;gap:var(--ds-space-in-4)}
.ds-index>button{position:relative;z-index:2;width:var(--ds-size-index);height:var(--ds-size-chip);padding:0;border:0;border-radius:var(--ds-radius-check);background:transparent;font-size:14px;color:var(--ds-ink-secondary)}

/* ── 旋钮：一块圆的钻瓷，一点釉色指向当前值 ───────────── */
.ds-knob{position:relative;box-sizing:border-box;width:var(--ds-knob-size,var(--ds-size-knob-min));aspect-ratio:1;border-radius:50%;background:var(--ds-surface);box-shadow:var(--ds-shadow-lifted);touch-action:none}
/* 釉点是刻进去再填釉的：上沿里面一道暗，下面的唇接光（不是画在上面的一点） */
.ds-knob .ds-knob-mark{position:absolute;left:50%;top:8%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--ds-en,var(--ds-solid));box-shadow:inset 0 1.2px 1.5px rgba(0,0,0,.5),0 .6px 0 var(--ds-coat-edge)}
/* 在走时整个旋钮随拍子轻轻一跳（--ds-beat 0…1，每一帧由 app 写） */
.ds-knob{transform:translateY(calc(var(--ds-beat, 0) * -2px)) scale(calc(1 + var(--ds-beat, 0) * .025))}
.ds-knob>.ds-knob-face{position:absolute;inset:0;border-radius:50%;transform:rotate(var(--ds-knob-angle,0deg));transition:transform var(--ds-duration) var(--ds-ease)}
/* 叠起来的旋钮（像调音台上的同心旋钮）：下面一圈大的定目标，上面坐着一个小的定当前值。
   各转各的；上面那个投影落在下面的圈上（按高度叠：圈 1，上面的 2）。
   .ds-knob-stack 定 --ds-knob-ring（圈的直径）；圈里 .ds-knob-face 按 --ds-knob-goal-angle 转。 */
.ds-knob-stack{position:relative;width:var(--ds-knob-ring,var(--ds-size-knob-min));aspect-ratio:1}
.ds-knob-stack>.ds-knob-ring{position:absolute;inset:0;z-index:1;border-radius:50%;background:var(--ds-surface);box-shadow:var(--ds-shadow-raised);touch-action:none}
.ds-knob-ring>.ds-knob-face{position:absolute;inset:0;border-radius:50%;transform:rotate(var(--ds-knob-goal-angle,0deg));transition:transform var(--ds-duration) var(--ds-ease)}
.ds-knob-ring .ds-knob-mark{position:absolute;left:50%;top:calc((1 - var(--ds-knob-top-ratio)) * 25% - 4.5px);width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--ds-en,var(--ds-solid));box-shadow:inset 0 1.2px 1.5px rgba(0,0,0,.5),0 .6px 0 var(--ds-coat-edge)}
.ds-knob-stack>.ds-knob{position:absolute;left:50%;top:50%;z-index:2;width:calc(var(--ds-knob-ring,var(--ds-size-knob-min)) * var(--ds-knob-top-ratio));translate:-50% -50%}

/* ── 按住的小菜单：按住一个东西（不动）打开的，它自己的几件事 ─────────────
   钻瓷，浮层 3，圆角 22，每行 48；危险的一行用 danger 字。开在那个东西下面（下面放不下就上面），
   后面是透明的 .ds-scrim（不压暗），点别处关掉。 */
.ds-menu{position:absolute;z-index:40;box-sizing:border-box;width:230px;padding:6px 0;border-radius:var(--ds-radius-card);background:var(--ds-surface);box-shadow:var(--ds-shadow-overlay)}
.ds-menu>button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:48px;padding:0 18px;border:0;background:transparent;font-size:17px;color:var(--ds-ink);text-align:left}
.ds-menu>button>svg{width:20px;height:20px;flex:none}
.ds-menu>button.ds-danger{color:var(--ds-danger)}
.ds-menu>button:active{opacity:.6}

/* ── 釉面：釉钮、录音键、釉珠共用的一块釉 ───────────── */
.ds-record::before,.ds-range .ds-span::before,.ds-range .ds-span::after,.ds-check::before{--ds-en-face:var(--ds-en,var(--ds-solid));
  background:
    linear-gradient(160deg,color-mix(in srgb,var(--ds-en-face) 82%,white) 0%,var(--ds-en-face) 55%,color-mix(in srgb,var(--ds-en-face) 90%,black) 100%);
  box-shadow:var(--ds-shadow-glaze),var(--ds-shadow-glaze-drop)}
.ds-range .ds-span::before,.ds-range .ds-span::after{box-shadow:var(--ds-shadow-glaze),var(--ds-shadow-segment)}   /* 坐在轨上：投一点影，满釉上也看得出 */
.ds-check::before{--ds-en-face:var(--ds-solid);box-shadow:var(--ds-shadow-glaze),var(--ds-shadow-glaze-pressed)}   /* 勾选：总是乌金釉（深色月白釉），坐在槽里 */

/* ── 录音键：人人都认得的形状，只是一块釉 ─────────────
   没有底座、没有描边：一枚釉的圆片（size-record）；录音中收成一块圆角方（停止）。它就是这一层的主操作。
   aria-pressed="true" = 正在录。上面的时间用 .ds-record-time。 */
.ds-record{position:relative;width:var(--ds-size-record-hit);height:var(--ds-size-record-hit);padding:0;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.ds-record::before{content:"";width:var(--ds-size-record);height:var(--ds-size-record);border-radius:calc(var(--ds-size-record) / 2);
  transition:width var(--ds-duration) var(--ds-ease),height var(--ds-duration) var(--ds-ease),border-radius var(--ds-duration) var(--ds-ease),transform var(--ds-duration) var(--ds-ease)}
.ds-record[aria-pressed="true"]::before{width:var(--ds-size-record-stop);height:var(--ds-size-record-stop);border-radius:var(--ds-radius-record-stop)}
.ds-record-time{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ds-ink);text-align:center}

/* ── 场景：图片（封面、照片）─────────────
   场景保持自己的材质：不托底、不描边、不覆膜、不盖光；只有按高度落的影。
   方形，圆角和 Apple Music 的封面一样：大图 10，小图边长的 5%。没有图时是凹面的颜色，不放图标。 */
.ds-scene{position:relative;box-sizing:border-box;aspect-ratio:1;border-radius:min(var(--ds-radius-scene),var(--ds-radius-scene-ratio));overflow:hidden;background:var(--ds-inset);box-shadow:var(--ds-shadow-scene)}
/* 材质场景：这一屏的面是一种材质（纸、布），不是图。它自己的颜色，只有外影；能点的按下和钻瓷一样朝手指沉 */
.ds-material-scene{position:relative;box-sizing:border-box;border:0;border-radius:var(--ds-radius-scene);color:var(--ds-ink);background:var(--ds-scene-color,var(--ds-surface));box-shadow:var(--ds-shadow-scene);transition:transform var(--ds-duration) var(--ds-ease),box-shadow var(--ds-duration) var(--ds-ease)}
button.ds-material-scene:active{box-shadow:var(--ds-shadow-scene-pressed);
  transform:perspective(var(--ds-press-perspective)) translateY(var(--ds-press-offset)) rotateX(calc(var(--ds-press-y,0) * var(--ds-press-tilt) * -1)) rotateY(calc(var(--ds-press-x,0) * var(--ds-press-tilt)))}
.ds-scene>img{display:block;width:100%;height:100%;object-fit:cover}
/* 场景的光：主角是一张图时它照亮这一层——地面带上图的色相（明度不变），这一层的釉取图里最显眼的颜色。app 从图里算好写进四个变量（算法见组件「场景」） */
/* 这一层的釉都取场景的：根上、釉钮和录音键上（它们自己定了默认的釉，要点名才盖得过） */
.ds-scene-lit,.ds-scene-lit .ds-cta,.ds-scene-lit .ds-rim,.ds-scene-lit .ds-record{--ds-en:var(--ds-scene-glaze,var(--ds-solid));--ds-on-en:var(--ds-scene-on-glaze,var(--ds-on-solid))}
.ds-scene-lit{--ds-inset:oklch(from var(--ds-scene-middle,var(--ds-bg)) calc(l - var(--ds-inset-depth)) c h)}   /* 这一层的凹：场景的底色减一步亮度，不混釉——釉和底不是一种色时，混釉的槽成了紫灰（主人，2026-11-02 晚） */
.ds-screen.ds-scene-lit{--ds-ground-paint:linear-gradient(180deg,var(--ds-scene-top,var(--ds-bg)),var(--ds-scene-middle,var(--ds-scene-top,var(--ds-bg))) 50%,var(--ds-scene-bottom,var(--ds-bg-low)))}   /* 上面围着图最浓，到中间回到守得住小字的淡色 */

/* ── 分组头、平、危险、选择 ───────────── */
.ds-section-head{display:flex;align-items:baseline;gap:var(--ds-space-in-8);font-size:15px;font-weight:var(--ds-w-500);color:var(--ds-ink-secondary)}
.ds-section-head>small{font-size:13px;font-weight:400;color:var(--ds-ink-caption)}
.ds-quiet{position:relative;min-height:var(--ds-hit-min);min-width:var(--ds-hit-min);padding:0 10px;border:0;background:none;font-size:15px;color:var(--ds-ink-secondary);transition:opacity var(--ds-duration) var(--ds-ease),color var(--ds-duration) var(--ds-ease)}
.ds-danger{min-height:var(--ds-hit-min);padding:0 10px;border:0;background:none;font-size:15px;color:var(--ds-danger)}
.ds-select{box-sizing:border-box;min-height:var(--ds-hit-min);padding:0 calc(var(--ds-pad-text-btn) + 14px) 0 0;border:0;background:transparent;-webkit-appearance:none;appearance:none;font:inherit;font-size:15px;color:var(--ds-ink-secondary);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 6px) 55%,100% 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}

/* ── 印刷层 ───────────── */
.ds-rule{height:1px;background:var(--ds-rule);border:0}
.ds-drop{position:relative}
.ds-drop.ds-over::after{content:"";position:absolute;inset:var(--ds-space-in-8);border-radius:calc(var(--ds-radius-card) - var(--ds-space-in-8));border:1.5px dashed var(--ds-rule);pointer-events:none}   /* 落位：东西拖到上面时印出来的一圈 */

/* ── 边缘淡出（烟云） ─────────────
   底部：dock-bottom + 56 + 24 纯地面色，再往上 140 渐变；顶部：手顶 + 44 + 12 纯色，再往下 72 渐变。
   只在有内容可淡的时候出现：顶部滚动之后、底部还有内容的时候（加 .ds-off 隐藏）。
   画的是地面本身（--ds-ground-paint，和 .ds-screen::before 一样按屏幕高铺），所以渐变的地面、场景染的色都接得上；
   淡出用遮罩：一条平滑的曲线，仍在 28% 的位置到 92%，两头都不折，不出色带。 */
.ds-fade-bottom,.ds-fade-top{position:fixed;left:0;right:0;z-index:var(--ds-z-fade);pointer-events:none;transition:opacity var(--ds-duration) var(--ds-ease);
  background:var(--ds-ground-paint);background-repeat:no-repeat;background-size:100% var(--ds-screen-h);
  --ds-fade-mask:#000 var(--ds-fade-solid),rgba(0,0,0,.985) calc(var(--ds-fade-solid) + var(--ds-fade-g) * .15),rgba(0,0,0,.92) calc(var(--ds-fade-solid) + var(--ds-fade-g) * .28),
    rgba(0,0,0,.805) calc(var(--ds-fade-solid) + var(--ds-fade-g) * .4),rgba(0,0,0,.59) calc(var(--ds-fade-solid) + var(--ds-fade-g) * .55),
    rgba(0,0,0,.34) calc(var(--ds-fade-solid) + var(--ds-fade-g) * .7),rgba(0,0,0,.115) calc(var(--ds-fade-solid) + var(--ds-fade-g) * .85),transparent 100%}
.ds-fade-bottom{--ds-fade-solid:calc(var(--ds-dock-bottom) + var(--ds-size-cta) + var(--ds-fade-gap));--ds-fade-g:var(--ds-fade-gradient);bottom:0;height:calc(var(--ds-fade-solid) + var(--ds-fade-gradient));
  background-position:bottom;-webkit-mask-image:linear-gradient(to top,var(--ds-fade-mask));mask-image:linear-gradient(to top,var(--ds-fade-mask))}
.ds-fade-top{--ds-fade-solid:calc(var(--ds-hand-top) + var(--ds-size-control) + var(--ds-fade-top-gap));--ds-fade-g:var(--ds-fade-top-gradient);top:0;height:calc(var(--ds-fade-solid) + var(--ds-fade-top-gradient));
  background-position:top;-webkit-mask-image:linear-gradient(to bottom,var(--ds-fade-mask));mask-image:linear-gradient(to bottom,var(--ds-fade-mask))}
.ds-fade-bottom.ds-off,.ds-fade-top.ds-off{opacity:0}

/* ── 可点区域：小于 44 的控件，用透明的 ::after 扩到 44 × 44 ── */
.ds-text-btn::after,.ds-chip::after,.ds-options>button::after,.ds-switch::after,.ds-check::after,.ds-index>button::after,.ds-undo>button::after{
  content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--ds-hit-min));height:max(100%,var(--ds-hit-min));transform:translate(-50%,-50%)}

/* ── 状态 ─────────────
   静止 / 悬停 / 按下 / 禁用 / 忙 / 聚焦 / 出错，见 README「状态」。 */
/* 按下 */
/* 按下朝手指倾斜：press.js 在按下的元素上写 --ds-press-x / --ds-press-y（-1…1，手指离中心多远）；没有脚本时只是平平地下沉 */
button.ds-raised:active,.ds-pressed{box-shadow:var(--ds-shadow-pressed);
  transform:perspective(var(--ds-press-perspective)) translateY(var(--ds-press-offset)) rotateX(calc(var(--ds-press-y,0) * var(--ds-press-tilt) * -1)) rotateY(calc(var(--ds-press-x,0) * var(--ds-press-tilt)))}
.ds-icon-btn:active,.ds-text-btn:active,.ds-chip:active{transform:translateY(var(--ds-press-offset));box-shadow:var(--ds-shadow-pressed)}
.ds-cta:active{box-shadow:var(--ds-shadow-glaze),var(--ds-shadow-glaze-pressed);
  transform:perspective(var(--ds-press-perspective)) translateY(var(--ds-press-offset)) rotateX(calc(var(--ds-press-y,0) * var(--ds-press-tilt) * -1)) rotateY(calc(var(--ds-press-x,0) * var(--ds-press-tilt)))}
.ds-rim:active{box-shadow:var(--ds-shadow-glaze-pressed);
  transform:perspective(var(--ds-press-perspective)) translateY(var(--ds-press-offset)) rotateX(calc(var(--ds-press-y,0) * var(--ds-press-tilt) * -1)) rotateY(calc(var(--ds-press-x,0) * var(--ds-press-tilt)))}
.ds-record:active::before{transform:translateY(var(--ds-press-offset));box-shadow:var(--ds-shadow-glaze),var(--ds-shadow-glaze-pressed)}
.ds-tray>button:active,.ds-options>button:active,.ds-index>button:active{color:var(--ds-ink)}
.ds-switch:active>span{box-shadow:var(--ds-shadow-pressed)}
.ds-quiet:active,.ds-danger:active,.ds-undo>button:active{opacity:.6}
/* 悬停（只在有指针的设备上）：高度不变，只有平的文字变深 */
@media (hover:hover){.ds-quiet:hover,.ds-select:hover{color:var(--ds-ink)}.ds-tray>button:hover,.ds-options>button:hover{color:var(--ds-ink)}}
/* 禁用：任何钻瓷都变平——没有瓷身和影，字用说明色 */
.ds-raised:disabled,.ds-raised[aria-disabled="true"],.ds-icon-btn:disabled,.ds-icon-btn[aria-disabled="true"],.ds-text-btn:disabled,.ds-text-btn[aria-disabled="true"],
.ds-chip:disabled,.ds-chip[aria-disabled="true"],.ds-cta:disabled,.ds-cta[aria-disabled="true"],.ds-rim:disabled,.ds-rim[aria-disabled="true"]{
  background:transparent;border-color:transparent;box-shadow:none;color:var(--ds-ink-caption);transform:none;cursor:default}
.ds-tray>button:disabled,.ds-options>button:disabled,.ds-quiet:disabled,.ds-danger:disabled{color:var(--ds-ink-caption);cursor:default}
.ds-switch:disabled>span,.ds-switch[aria-disabled="true"]>span{background:transparent;box-shadow:none}
.ds-switch:disabled>span::after{background:var(--ds-ink-caption)}
.ds-field:disabled{color:var(--ds-ink-caption)}
/* 忙：釉钮还是釉钮（这件事正在发生，不是不能做），字换成进行中的说法，不再接受点按 */
.ds-cta[aria-busy="true"],.ds-rim[aria-busy="true"]{pointer-events:none}
/* 聚焦：键盘或旁白 */
.ds-raised:focus-visible,.ds-cta:focus-visible,.ds-rim:focus-visible,.ds-icon-btn:focus-visible,.ds-text-btn:focus-visible,.ds-chip:focus-visible,.ds-tray>button:focus-visible,.ds-options>button:focus-visible,
.ds-switch:focus-visible,.ds-index>button:focus-visible,.ds-quiet:focus-visible,.ds-danger:focus-visible,.ds-grab:focus-visible,.ds-field:focus-visible,.ds-select:focus-visible,.ds-undo>button:focus-visible{outline:2px solid var(--ds-ink);outline-offset:3px}

/* ── 退路 ───────────── */
@media (prefers-reduced-motion:reduce){
  .ds-raised,.ds-hand,.ds-icon-btn,.ds-text-btn,.ds-chip,.ds-tray,.ds-cta,.ds-rim,.ds-tray>button,.ds-options>button,.ds-lens-slide,.ds-knob>.ds-knob-face,.ds-knob-ring>.ds-knob-face,.ds-record::before,.ds-switch>span{transition:none}
  button.ds-raised:active,.ds-pressed,.ds-cta:active,.ds-rim:active{transform:translateY(var(--ds-press-offset))}}