/* ramtt.css · RAMTT design system · built from tokens/tokens.css and components/*.css
   Do not edit. Change a source file and run: node source/build-css.mjs */
@layer tokens, base, components;
/* tokens.css · RAMTT design system, edition 2026-09-28
   GENERATED by source/build-tokens.mjs from color.source.mjs, identity.source.mjs
   and system.source.mjs. Never edit this file: change a source and rebuild.
   hash: ba0c4fbadb610614
   The 380 neutrals, roles and states locked on 2 September 2026
   (8da117309bf227e4) are reproduced exactly; the build stops if one of them drifts. */

@layer tokens {
:root {
  color-scheme: light;
  /* ── ramps: 9 hues × 35 steps, one lightness per step (L = 1 − 0.85·step/900) ── */
  --gray-0: #ffffff;
  --gray-10: #fcfcfb;
  --gray-20: #f9f9f7;
  --gray-30: #f6f6f4;
  --gray-40: #f3f3f0;
  --gray-50: #f0efec;
  --gray-60: #edece8;
  --gray-70: #eae9e4;
  --gray-80: #e7e6e1;
  --gray-90: #e4e3dd;
  --gray-100: #e1e0d9;
  --gray-150: #d2d1c7;
  --gray-200: #c3c2b7;
  --gray-250: #b4b3a8;
  --gray-300: #a5a49a;
  --gray-350: #97958d;
  --gray-400: #898781;
  --gray-450: #7b7974;
  --gray-500: #6d6b67;
  --gray-550: #5f5e5a;
  --gray-600: #52514e;
  --gray-650: #444442;
  --gray-700: #383835;
  --gray-750: #2c2c2a;
  --gray-800: #20201f;
  --gray-810: #1e1e1d;
  --gray-820: #1c1c1b;
  --gray-830: #1a1a19;
  --gray-840: #181817;
  --gray-850: #151515;
  --gray-860: #131313;
  --gray-870: #111111;
  --gray-880: #0f0f0f;
  --gray-890: #0d0d0d;
  --gray-900: #0b0b0b;
  --red-0: #ffffff;
  --red-10: #fffbfb;
  --red-20: #fef7f7;
  --red-30: #fef3f3;
  --red-40: #fdefef;
  --red-50: #fbebeb;
  --red-60: #fae7e7;
  --red-70: #fae3e3;
  --red-80: #fadfdf;
  --red-90: #fadada;
  --red-100: #fad6d6;
  --red-150: #f7c1c1;
  --red-200: #f4abab;
  --red-250: #f09595;
  --red-300: #ec7e7e;
  --red-350: #e66767;
  --red-400: #e34948;
  --red-450: #d03b3b;
  --red-500: #b93535;
  --red-550: #a32c2c;
  --red-600: #8e2626;
  --red-650: #791e1e;
  --red-700: #641919;
  --red-750: #511212;
  --red-800: #3c0e0e;
  --red-810: #380d0d;
  --red-820: #340c0c;
  --red-830: #310b0b;
  --red-840: #2d0a0a;
  --red-850: #280a0a;
  --red-860: #230b0a;
  --red-870: #1d0b0a;
  --red-880: #170c0b;
  --red-890: #110c0b;
  --red-900: #0b0b0b;
  --orange-0: #ffffff;
  --orange-10: #fefbfa;
  --orange-20: #fdf7f5;
  --orange-30: #fcf4f0;
  --orange-40: #faf0ec;
  --orange-50: #f9ece7;
  --orange-60: #f8e9e2;
  --orange-70: #f7e5dd;
  --orange-80: #f7e1d7;
  --orange-90: #f7dcd1;
  --orange-100: #f7d8cb;
  --orange-150: #f3c5b2;
  --orange-200: #f4ae94;
  --orange-250: #f09978;
  --orange-300: #ec835a;
  --orange-350: #eb6834;
  --orange-400: #d95926;
  --orange-450: #c25124;
  --orange-500: #ae461c;
  --orange-550: #993d19;
  --orange-600: #863311;
  --orange-650: #712b0f;
  --orange-700: #5d230b;
  --orange-750: #4b1b08;
  --orange-800: #371407;
  --orange-810: #341307;
  --orange-820: #301106;
  --orange-830: #2d1006;
  --orange-840: #290f06;
  --orange-850: #240e07;
  --orange-860: #1f0e08;
  --orange-870: #1a0e09;
  --orange-880: #150d0a;
  --orange-890: #100c0b;
  --orange-900: #0b0b0b;
  --yellow-0: #ffffff;
  --yellow-10: #fefcf8;
  --yellow-20: #fcf8f1;
  --yellow-30: #fbf5ea;
  --yellow-40: #f9f2e4;
  --yellow-50: #f9eeda;
  --yellow-60: #faebce;
  --yellow-70: #fae7c2;
  --yellow-80: #fae3b8;
  --yellow-90: #f9e0b0;
  --yellow-100: #f9dca4;
  --yellow-150: #f9c868;
  --yellow-200: #fab219;
  --yellow-250: #eda104;
  --yellow-300: #da9303;
  --yellow-350: #c98500;
  --yellow-400: #b77701;
  --yellow-450: #a66a00;
  --yellow-500: #945d01;
  --yellow-550: #835100;
  --yellow-600: #724500;
  --yellow-650: #623900;
  --yellow-700: #512e00;
  --yellow-750: #412400;
  --yellow-800: #311a00;
  --yellow-810: #2e1800;
  --yellow-820: #2b1700;
  --yellow-830: #271500;
  --yellow-840: #231402;
  --yellow-850: #1f1204;
  --yellow-860: #1b1106;
  --yellow-870: #171007;
  --yellow-880: #130e09;
  --yellow-890: #0f0d0a;
  --yellow-900: #0b0b0b;
  --green-0: #ffffff;
  --green-10: #fafdfa;
  --green-20: #f5fbf4;
  --green-30: #f0f9ef;
  --green-40: #ebf7e9;
  --green-50: #e5f4e4;
  --green-60: #e0f2de;
  --green-70: #dbf0d8;
  --green-80: #d5eed3;
  --green-90: #d0eccd;
  --green-100: #caeac7;
  --green-150: #aee0a9;
  --green-200: #91d68b;
  --green-250: #73cb6d;
  --green-300: #55bf50;
  --green-350: #34b231;
  --green-400: #0da30e;
  --green-450: #009300;
  --green-500: #028301;
  --green-550: #017301;
  --green-600: #006300;
  --green-650: #005400;
  --green-700: #074505;
  --green-750: #0f350d;
  --green-800: #11260f;
  --green-810: #10230f;
  --green-820: #10210f;
  --green-830: #101e0f;
  --green-840: #101b0f;
  --green-850: #0f180e;
  --green-860: #0e160e;
  --green-870: #0e130d;
  --green-880: #0d100d;
  --green-890: #0c0e0c;
  --green-900: #0b0b0b;
  --aqua-0: #ffffff;
  --aqua-10: #f9fdfb;
  --aqua-20: #f3fbf8;
  --aqua-30: #edf9f4;
  --aqua-40: #e8f7f1;
  --aqua-50: #e2f4ed;
  --aqua-60: #dcf2ea;
  --aqua-70: #d5f0e6;
  --aqua-80: #ceefe2;
  --aqua-90: #c7eddf;
  --aqua-100: #bfebdb;
  --aqua-150: #a0e1c9;
  --aqua-200: #7ad7b4;
  --aqua-250: #5acba0;
  --aqua-300: #3cbd8c;
  --aqua-350: #1baf7a;
  --aqua-400: #1a9e70;
  --aqua-450: #148e65;
  --aqua-500: #0f7e5c;
  --aqua-550: #0f6e53;
  --aqua-600: #065f49;
  --aqua-650: #095040;
  --aqua-700: #034235;
  --aqua-750: #02342b;
  --aqua-800: #022720;
  --aqua-810: #02241e;
  --aqua-820: #02221c;
  --aqua-830: #021f1a;
  --aqua-840: #031c18;
  --aqua-850: #051a16;
  --aqua-860: #071713;
  --aqua-870: #081411;
  --aqua-880: #0a110f;
  --aqua-890: #0b0e0d;
  --aqua-900: #0b0b0b;
  --blue-0: #ffffff;
  --blue-10: #fafcff;
  --blue-20: #f5f9fe;
  --blue-30: #f0f7fe;
  --blue-40: #ebf4fc;
  --blue-50: #e7f1fb;
  --blue-60: #e2eefa;
  --blue-70: #ddebfa;
  --blue-80: #d7e8fa;
  --blue-90: #d2e5fa;
  --blue-100: #cde2fb;
  --blue-150: #b7d3f6;
  --blue-200: #9ec5f4;
  --blue-250: #86b6ef;
  --blue-300: #6da7ec;
  --blue-350: #5598e7;
  --blue-400: #3987e5;
  --blue-450: #2a78d6;
  --blue-500: #256abf;
  --blue-550: #1c5cab;
  --blue-600: #184f95;
  --blue-650: #114281;
  --blue-700: #0d366b;
  --blue-750: #062b57;
  --blue-800: #032042;
  --blue-810: #031e3d;
  --blue-820: #021c39;
  --blue-830: #021a36;
  --blue-840: #021831;
  --blue-850: #03162c;
  --blue-860: #051426;
  --blue-870: #07121f;
  --blue-880: #091018;
  --blue-890: #0a0d11;
  --blue-900: #0b0b0b;
  --violet-0: #ffffff;
  --violet-10: #fcfbff;
  --violet-20: #f8f8ff;
  --violet-30: #f5f4ff;
  --violet-40: #f2f1ff;
  --violet-50: #efedff;
  --violet-60: #ebeafe;
  --violet-70: #e8e6fe;
  --violet-80: #e5e2fd;
  --violet-90: #e2dffd;
  --violet-100: #dfdbfd;
  --violet-150: #cfcafb;
  --violet-200: #bfb9f5;
  --violet-250: #b0a7f2;
  --violet-300: #a096eb;
  --violet-350: #9085e9;
  --violet-400: #8173e3;
  --violet-450: #7161e0;
  --violet-500: #6250d6;
  --violet-550: #5645be;
  --violet-600: #4a3aa7;
  --violet-650: #3e318e;
  --violet-700: #322777;
  --violet-750: #271e60;
  --violet-800: #1d1649;
  --violet-810: #1b1544;
  --violet-820: #19133f;
  --violet-830: #17123b;
  --violet-840: #151036;
  --violet-850: #130f32;
  --violet-860: #110e2b;
  --violet-870: #0f0e23;
  --violet-880: #0e0d1b;
  --violet-890: #0c0c13;
  --violet-900: #0b0b0b;
  --magenta-0: #ffffff;
  --magenta-10: #fefbfc;
  --magenta-20: #fef6f9;
  --magenta-30: #fdf2f6;
  --magenta-40: #fbeff3;
  --magenta-50: #faebf0;
  --magenta-60: #f9e6ed;
  --magenta-70: #f9e2eb;
  --magenta-80: #f9dee8;
  --magenta-90: #f9d9e5;
  --magenta-100: #f9d4e2;
  --magenta-150: #f3c0d3;
  --magenta-200: #f3a8c3;
  --magenta-250: #ed93b4;
  --magenta-300: #e87ba4;
  --magenta-350: #e46191;
  --magenta-400: #d55181;
  --magenta-450: #c04873;
  --magenta-500: #ad3d66;
  --magenta-550: #993458;
  --magenta-600: #862a4c;
  --magenta-650: #722340;
  --magenta-700: #5e1c34;
  --magenta-750: #4c1429;
  --magenta-800: #390f1f;
  --magenta-810: #360d1c;
  --magenta-820: #320c1a;
  --magenta-830: #2f0b18;
  --magenta-840: #2b0a16;
  --magenta-850: #270a14;
  --magenta-860: #220a12;
  --magenta-870: #1c0b11;
  --magenta-880: #170b0f;
  --magenta-890: #110b0d;
  --magenta-900: #0b0b0b;
  /* ── colour roles, light ── */
  --raised: #ffffff;
  --raised-hover: #f6f6f3;
  --raised-selected: #efede8;
  --raised-selected-hover: #eae9e2;
  --paper: #fcfcfb;
  --paper-hover: #f4f3ef;
  --paper-selected: #eceae4;
  --paper-selected-hover: #e7e6de;
  --mat: #f9f9f7;
  --mat-hover: #f1f0ec;
  --mat-selected: #e9e7e0;
  --mat-selected-hover: #e4e3db;
  --ground: #f4f3f0;
  --ground-hover: #ebeae5;
  --ground-selected: #e3e1da;
  --ground-selected-hover: #dfddd4;
  --well: #f1f0ed;
  --well-hover: #e8e7e2;
  --well-selected: #e0ded7;
  --well-selected-hover: #dcdad1;
  --pill: #eeede9;
  --pill-hover: #e5e4de;
  --pill-selected: #dddbd3;
  --pill-selected-hover: #d9d7ce;
  --rule: #e9e8e4;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --ink-3: #6c6b69;
  --ink-4: #888784;
  --ink-disabled: rgb(11 11 11 / 35%);
  --a5: rgb(11 11 11 / 5%);
  --a10: rgb(11 11 11 / 10%);
  --a20: rgb(11 11 11 / 20%);
  --a35: rgb(11 11 11 / 35%);
  --a50: rgb(11 11 11 / 50%);
  --a60: rgb(11 11 11 / 60%);
  --a70: rgb(11 11 11 / 70%);
  --a85: rgb(11 11 11 / 85%);
  --a95: rgb(11 11 11 / 95%);
  --rank-1: rgb(11 11 11 / 20%);
  --rank-2: rgb(11 11 11 / 35%);
  --rank-3: rgb(11 11 11 / 60%);
  --rank-4: rgb(11 11 11 / 85%);
  --line-1: rgb(11 11 11 / 6%);
  --line-2: rgb(11 11 11 / 8%);
  --line-3: rgb(11 11 11 / 10%);
  --line-4: rgb(11 11 11 / 15%);
  --line-5: rgb(11 11 11 / 20%);
  --accent: #6250d6;
  --accent-hover: #5645be;
  --accent-ink: #4a3aa7;
  --accent-glyph: #6250d6;
  --accent-tint: #dfdbfd;
  --accent-line: #b0a7f2;
  --on-accent: #ffffff;
  --ring-glow: #dddffd;
  --selection: rgb(113 97 224 / 24%);
  --danger: #d03b3b;
  --danger-hover: #b93535;
  --danger-ink: #8e2626;
  --danger-tint: #fad6d6;
  --danger-line: #f09595;
  --danger-dot: #e34948;
  --success-ink: #006300;
  --success-tint: #caeac7;
  --success-line: #73cb6d;
  --success-dot: #0da30e;
  --warning-ground: #fab219;
  --warning-ink: #724500;
  --warning-tint: #f9dca4;
  --warning-line: #eda104;
  --warning-dot: #b77701;
  --info: #256abf;
  --info-hover: #1c5cab;
  --info-ink: #184f95;
  --info-tint: #cde2fb;
  --info-line: #86b6ef;
  --info-dot: #3987e5;
  --on-fill: #ffffff;
  --ring-glow-danger: #fcd8d4;
  --on-warning: #0b0b0b;
  --label-violet-bg: rgb(164 152 249 / 35%);
  --label-violet-fg: #4a3aa7;
  --label-violet-dot: #8173e3;
  --label-blue-bg: rgb(112 172 244 / 35%);
  --label-blue-fg: #184f95;
  --label-blue-dot: #3987e5;
  --label-red-bg: rgb(241 138 138 / 35%);
  --label-red-fg: #8e2626;
  --label-red-dot: #e34948;
  --label-green-bg: rgb(104 195 95 / 35%);
  --label-green-fg: #006300;
  --label-green-dot: #0da30e;
  --label-yellow-bg: rgb(238 155 0 / 35%);
  --label-yellow-fg: #724500;
  --label-yellow-dot: #b77701;
  --label-orange-bg: rgb(232 144 106 / 35%);
  --label-orange-fg: #863311;
  --label-orange-dot: #d95926;
  --label-aqua-bg: rgb(72 198 152 / 35%);
  --label-aqua-fg: #065f49;
  --label-aqua-dot: #1a9e70;
  --label-magenta-bg: rgb(238 132 172 / 35%);
  --label-magenta-fg: #862a4c;
  --label-magenta-dot: #d55181;
  --label-neutral-bg: rgb(11 11 11 / 6%);
  --avatar-violet: #7161e0;
  --avatar-blue: #256abf;
  --avatar-red: #d03b3b;
  --avatar-green: #028301;
  --avatar-yellow: #945d01;
  --avatar-orange: #c25124;
  --avatar-aqua: #0f7e5c;
  --avatar-magenta: #c04873;
  --label-neutral-fg: #52514e;
  --chart-1: #6250d6;
  --chart-2: #eb6834;
  --chart-3: #1baf7a;
  --chart-4: #eda104;
  --chart-5: #e87ba4;
  --chart-6: #028301;
  --chart-7: #2a78d6;
  --chart-8: #e34948;
  --chart-grid: rgb(11 11 11 / 7%);
  --chart-axis: #c3c2b7;
  --chart-reference: #898781;
  --ch-power: #1F925B;
  --ch-hr: #CC6660;
  --ch-speed: #488FD6;
  --ch-cadence: #8267BD;
  --ch-pace: #B9649E;
  --ch-kjmin: #969017;
  --ch-torque: #B3621B;
  --ch-carb: #B77610;
  --ch-fructose: #DAAF75;
  --ch-fluid: #0290A7;
  --ch-power-estimated: #6D967C;
  --ch-power-area: #77AD8B;
  --zone-1: #E3E8EC;
  --zone-2: #B7C8DA;
  --zone-3: #80AAD1;
  --zone-4: #518ABE;
  --zone-5: #326797;
  --zone-6: #1A466D;
  --tomrum-hand: #5f5e5a;
  --tomrum-hand-light: #9fa4ab;
  --tomrum-hand-fine: #c4c8cd;
  --key-face: #ffffff;
  --key-lip: #e9e8e4;
  --key-ring: rgb(11 11 11 / 13%);
  --key-down: #f1f0ed;
  --lit: inset 0 1px 0 rgb(255 255 255 / 16%), inset 0 0 0 var(--px) rgb(0 0 0 / 6%);
  --knob: #ffffff;
  --knob-shadow: 0 1px 1px rgb(0 0 0 / .08), 0 0 0 .5px rgb(0 0 0 / .04);
  --handle-shadow: 0 0 0 var(--px) rgb(0 0 0 / .16), 0 1px 2px rgb(0 0 0 / .14);
  --cursor: #0b0b0b;
  --cursor-edge: #ffffff;
  --on-knob: #383835;
  --on-fill-line: rgb(255 255 255 / 30%);
  --on-fill-key-face: rgb(0 0 0 / 14%);
  --on-fill-key-lip: rgb(0 0 0 / 24%);
  --on-fill-key-ring: rgb(255 255 255 / 18%);
  --ring-raised: 0.088;
  --ring-raised-hover: 0.147;
  --ring-paper: 0.089;
  --ring-paper-hover: 0.148;
  --ring-mat: 0.09;
  --ring-mat-hover: 0.15;
  --ring-ground: 0.092;
  --ring-ground-hover: 0.153;
  --ring-well: 0.093;
  --ring-well-hover: 0.155;
  --ring-rgb: 11 11 11;
  --e1: 0 3px 6px -2px rgb(0 0 0 / .02), 0 1px 1px rgb(0 0 0 / .04);
  --e2: 0 6px 18px rgb(0 0 0 / .02), 0 3px 9px rgb(0 0 0 / .04), 0 1px 1px rgb(0 0 0 / .04);
  --e3: 0 9px 48px rgb(0 0 0 / .08), 0 6px 24px rgb(0 0 0 / .10), 0 1px 1px rgb(0 0 0 / .04);
  --dock-shadow: 0 18px 44px -8px rgb(0 0 0 / .2), 0 4px 12px -2px rgb(0 0 0 / .08);
  --backdrop: transparent;
  /* ── the plane you stand on (default: paper) ── */
  --plane: var(--paper); --plane-hover: var(--paper-hover); --plane-selected: var(--paper-selected); --plane-selected-hover: var(--paper-selected-hover);
  --ring: var(--ring-paper); --ring-hover: var(--ring-paper-hover); --pill-rest: var(--raised);
  /* ── one device pixel ── */
  --px: 1px;
  /* ── system ── */
  --r-press: 9999px;
  --r-value: 8px;
  --r-mark: 9999px;
  --r-key: 4px;
  --r-contain: 12px;
  --r-row: 8px;
  --r-round: 50%;
  --inset: 4px;
  --h-20: 20px;
  --h-24: 24px;
  --h-28: 28px;
  --h-32: 32px;
  --h-36: 36px;
  --h-44: 44px;
  --row-24: 24px;
  --row-28: 28px;
  --row-32: 32px;
  --row-36: 36px;
  --row-40: 40px;
  --row-44: 44px;
  --row-52: 52px;
  --row-60: 60px;
  --space-0: 0px;
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;
  --font: "Inter Variable","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-features: "kern" 1,"calt" 1,"liga" 1,"tnum" 1,"ss01" 1,"ss04" 1,"ss07" 1,"ss08" 1,"cv01" 1,"cv02" 1,"cv03" 1,"cv04" 1,"cv05" 1,"cv06" 1,"cv07" 1,"cv08" 1,"cv09" 1,"cv10" 1,"cv11" 1,"cv12" 1,"cv13" 1,"zero" 0;
  --tracking: -0.006em;
  --fs-9: 9px;
  --lh-9: 14px;
  --fs-11: 11px;
  --lh-11: 16px;
  --fs-12: 12px;
  --lh-12: 17px;
  --fs-13: 13px;
  --lh-13: 19px;
  --fs-16: 16px;
  --lh-16: 22px;
  --fs-15: 15px;
  --lh-15: 24px;
  --fs-20: 20px;
  --lh-20: 26px;
  --fs-24: 24px;
  --lh-24: 30px;
  --font-mono: ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --fw-400: 400;
  --fw-450: 450;
  --fw-500: 500;
  --fw-550: 550;
  --icon-12: 12px;
  --icon-14: 14px;
  --icon-16: 16px;
  --icon-20: 20px;
  --icon-stroke: 1.25;
  --tau: 50ms;
  --state-in: 0s;
  --state-out: 150ms;
  --opacity-in: 40ms;
  --opacity-out: 120ms;
  --scale-in: 200ms;
  --scale-out: 30ms;
  --scale-from: .98;
  --section: 190ms;
  --toggle-move: 100ms;
  --toggle-lag: 50ms;
  --key-out: 90ms;
  --spin: 700ms;
  --shimmer: 1400ms;
  --indeterminate: 1200ms;
  --draw: 600ms;
  --draw-fade: 400ms;
  --ease-expo: cubic-bezier(.19,1,.22,1);
  --ease-quad: cubic-bezier(.25,.46,.45,.94);
  --ring-in: 60ms;
  --ease-ring: cubic-bezier(.4,0,.2,1);
  --z-sticky: 20;
  --z-dock: 40;
  --z-popover: 70;
  --z-backdrop: 80;
  --z-dialog: 81;
  --z-toast: 90;
  --z-tooltip: 95;
  --col-prose: 640px;
  --col-feed: 768px;
  --col-collection: 1024px;
  --panel-list: 320px;
  --panel-props: 285px;
  --panel-peek: 380px;
  --panel-inspector: 352px;
  --status-bar: 28px;
  --ring-field: inset 0 0 0 1px var(--ring-gap, var(--raised)), 0 0 0 1px var(--accent), 0 0 6px 1px var(--ring-glow);
  --ring-field-danger: inset 0 0 0 1px var(--ring-gap, var(--raised)), 0 0 0 1px var(--danger), 0 0 6px 1px var(--ring-glow-danger);
  --ring-inline: inset 0 0 0 1px var(--accent);
  /* ── scales: colour for every chart (28 September) ── */
  --intensity-1: #bad5ed;
  --intensity-1-lit: #cadff3;
  --intensity-1-deep: #abccea;
  --intensity-1-edge: #7c95ad;
  --intensity-1-on: #0b0b0b;
  --intensity-2: #95ccb5;
  --intensity-2-lit: #a7d5c2;
  --intensity-2-deep: #84c4ab;
  --intensity-2-edge: #5e937e;
  --intensity-2-on: #0b0b0b;
  --intensity-3: #d0ab64;
  --intensity-3-lit: #d8b778;
  --intensity-3-deep: #c9a150;
  --intensity-3-edge: #97742a;
  --intensity-3-on: #0b0b0b;
  --intensity-4: #df8261;
  --intensity-4-lit: #e78f71;
  --intensity-4-deep: #da7552;
  --intensity-4-edge: #a34b2b;
  --intensity-4-on: #0b0b0b;
  --intensity-5: #d2615b;
  --intensity-5-lit: #da6f69;
  --intensity-5-deep: #cc534f;
  --intensity-5-edge: #952828;
  --intensity-5-on: #0b0b0b;
  --intensity-6: #b84451;
  --intensity-6-lit: #c0535d;
  --intensity-6-deep: #b23547;
  --intensity-6-edge: #7c0021;
  --intensity-6-on: #ffffff;
  --ch-load: #2a78d6;
  --ch-load-planned: #9ec5f4;
  --ch-capacity: #6250d6;
  --ch-pressure: #e87ba4;
  --ch-form: #eda104;
  --rim: rgb(255 255 255 / 38%);
}
@media (min-resolution: 2dppx) { :root { --px: .5px; } }
@media (min-resolution: 3dppx) { :root { --px: calc(1px / 3); } }

/* ── dark: a proposal, not a lock (identity.source.mjs) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --raised: #1a1a19;
    --raised-hover: #20201e;
    --raised-selected: #272623;
    --raised-selected-hover: #2b2a26;
    --paper: #131313;
    --paper-hover: #1a1918;
    --paper-selected: #20201d;
    --paper-selected-hover: #242320;
    --mat: #111111;
    --mat-hover: #171716;
    --mat-selected: #1e1d1b;
    --mat-selected-hover: #21211e;
    --ground: #0d0d0d;
    --ground-hover: #131312;
    --ground-selected: #191917;
    --ground-selected-hover: #1d1c1a;
    --well: #0b0b0b;
    --well-hover: #111110;
    --well-selected: #171715;
    --well-selected-hover: #1b1a18;
    --pill: #20201f;
    --pill-hover: #272725;
    --pill-selected: #2e2d2a;
    --pill-selected-hover: #32312d;
    --rule: rgb(255 255 255 / 10%);
    --ink: #f0efec;
    --ink-2: #c3c2b7;
    --ink-3: #888784;
    --ink-4: #6c6b69;
    --ink-disabled: rgb(255 255 255 / 35%);
    --a5: rgb(255 255 255 / 5%);
    --a10: rgb(255 255 255 / 10%);
    --a20: rgb(255 255 255 / 20%);
    --a35: rgb(255 255 255 / 35%);
    --a50: rgb(255 255 255 / 50%);
    --a60: rgb(255 255 255 / 60%);
    --a70: rgb(255 255 255 / 70%);
    --a85: rgb(255 255 255 / 85%);
    --a95: rgb(255 255 255 / 95%);
    --rank-1: rgb(255 255 255 / 10%);
    --rank-2: rgb(255 255 255 / 20%);
    --rank-3: rgb(255 255 255 / 50%);
    --rank-4: rgb(255 255 255 / 85%);
    --line-1: rgb(255 255 255 / 6%);
    --line-2: rgb(255 255 255 / 8%);
    --line-3: rgb(255 255 255 / 10%);
    --line-4: rgb(255 255 255 / 15%);
    --line-5: rgb(255 255 255 / 20%);
    --accent-ink: #a096eb;
    --accent-glyph: #9085e9;
    --accent-tint: #1d1649;
      --accent-line: #322777;
    --ring-glow: #18172d;
    --danger-ink: #ec7e7e;
    --danger-tint: #3c0e0e;
    --danger-line: #641919;
    --danger-dot: #b93535;
    --success-ink: #0da30e;
    --success-tint: #11260f;
    --success-line: #074505;
    --success-dot: #028301;
    --warning-ink: #da9303;
    --warning-tint: #311a00;
    --warning-line: #512e00;
    --warning-dot: #945d01;
    --info-ink: #6da7ec;
    --info-tint: #032042;
    --info-line: #0d366b;
    --info-dot: #256abf;
    --ring-glow-danger: #301715;
    --label-violet-bg: rgb(30 21 89 / 75%);
    --label-violet-fg: #a096eb;
    --label-violet-dot: #6250d6;
    --label-blue-bg: rgb(0 34 80 / 75%);
    --label-blue-fg: #6da7ec;
    --label-blue-dot: #256abf;
    --label-red-bg: rgb(71 10 10 / 75%);
    --label-red-fg: #ec7e7e;
    --label-red-dot: #b93535;
    --label-green-bg: rgb(14 42 12 / 75%);
    --label-green-fg: #55bf50;
    --label-green-dot: #028301;
    --label-yellow-bg: rgb(57 26 0 / 75%);
    --label-yellow-fg: #da9303;
    --label-yellow-dot: #945d01;
    --label-orange-bg: rgb(65 18 1 / 75%);
    --label-orange-fg: #ec835a;
    --label-orange-dot: #ae461c;
    --label-aqua-bg: rgb(0 43 34 / 75%);
    --label-aqua-fg: #3cbd8c;
    --label-aqua-dot: #0f7e5c;
    --label-magenta-bg: rgb(67 11 33 / 75%);
    --label-magenta-fg: #e87ba4;
    --label-magenta-dot: #ad3d66;
    --label-neutral-bg: rgb(255 255 255 / 8%);
    --label-neutral-fg: #c3c2b7;
    --chart-1: #9085e9;
    --chart-2: #d95926;
    --chart-3: #1a9e70;
    --chart-4: #c98500;
    --chart-5: #d55181;
    --chart-7: #3987e5;
    --chart-8: #e66767;
    --chart-grid: rgb(255 255 255 / 8%);
    --chart-axis: #383835;
    --chart-reference: #97958d;
    --tomrum-hand: #969590;
    --tomrum-hand-light: #4d5157;
    --tomrum-hand-fine: #303337;
    --key-face: #20201f;
    --key-lip: #0b0b0b;
    --key-ring: rgb(255 255 255 / 12%);
    --key-down: #1a1a19;
    --lit: inset 0 1px 0 rgb(255 255 255 / 12%), inset 0 0 0 var(--px) rgb(0 0 0 / 10%);
    --knob-shadow: 0 1px 1px rgb(0 0 0 / .30), 0 0 0 .5px rgb(0 0 0 / .20);
    --handle-shadow: 0 0 0 var(--px) rgb(0 0 0 / .40), 0 1px 2px rgb(0 0 0 / .40);
    --ring-raised: 0.1;
    --ring-raised-hover: 0.16;
    --ring-paper: 0.11;
    --ring-paper-hover: 0.17;
    --ring-mat: 0.11;
    --ring-mat-hover: 0.17;
    --ring-ground: 0.12;
    --ring-ground-hover: 0.18;
    --ring-well: 0.12;
    --ring-well-hover: 0.18;
    --ring-rgb: 255 255 255;
    --e1: 0 1px 1px rgb(0 0 0 / .30), 0 0 0 .5px rgb(0 0 0 / .20);
    --e2: 0 3px 8px rgb(0 0 0 / .125), 0 2px 5px rgb(0 0 0 / .125), 0 1px 1px rgb(0 0 0 / .125);
    --e3: 0 4px 40px rgb(0 0 0 / .10), 0 3px 20px rgb(0 0 0 / .125), 0 3px 12px rgb(0 0 0 / .125), 0 2px 8px rgb(0 0 0 / .125), 0 1px 1px rgb(0 0 0 / .125);
    --dock-shadow: 0 18px 44px -8px rgb(0 0 0 / .5), 0 4px 12px -2px rgb(0 0 0 / .3);
    --backdrop: transparent;
    /* ── scales: colour for every chart (28 September) ── */
    --intensity-1: #94aec6;
    --intensity-1-lit: #a4b9cb;
    --intensity-1-deep: #86a6c2;
    --intensity-1-edge: #bad5ed;
    --intensity-1-on: #0b0b0b;
    --intensity-2: #70a690;
    --intensity-2-lit: #82af9c;
    --intensity-2-deep: #5f9e86;
    --intensity-2-edge: #95ccb5;
    --intensity-2-on: #0b0b0b;
    --intensity-3: #a9863e;
    --intensity-3-lit: #b29253;
    --intensity-3-deep: #a37c27;
    --intensity-3-edge: #d0ab64;
    --intensity-3-on: #0b0b0b;
    --intensity-4: #b75d3d;
    --intensity-4-lit: #be6b4d;
    --intensity-4-deep: #b1512d;
    --intensity-4-edge: #df8261;
    --intensity-4-on: #ffffff;
    --intensity-5: #a93c39;
    --intensity-5-lit: #b14b46;
    --intensity-5-deep: #a32c2d;
    --intensity-5-edge: #d2615b;
    --intensity-5-on: #ffffff;
    --intensity-6: #901c31;
    --intensity-6-lit: #982e3c;
    --intensity-6-deep: #890027;
    --intensity-6-edge: #b84451;
    --intensity-6-on: #ffffff;
    --ch-load: #3987e5;
    --ch-load-planned: #114281;
    --ch-capacity: #9085e9;
    --ch-pressure: #d55181;
    --ch-form: #c98500;
    --rim: rgb(255 255 255 / 12%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --raised: #1a1a19;
  --raised-hover: #20201e;
  --raised-selected: #272623;
  --raised-selected-hover: #2b2a26;
  --paper: #131313;
  --paper-hover: #1a1918;
  --paper-selected: #20201d;
  --paper-selected-hover: #242320;
  --mat: #111111;
  --mat-hover: #171716;
  --mat-selected: #1e1d1b;
  --mat-selected-hover: #21211e;
  --ground: #0d0d0d;
  --ground-hover: #131312;
  --ground-selected: #191917;
  --ground-selected-hover: #1d1c1a;
  --well: #0b0b0b;
  --well-hover: #111110;
  --well-selected: #171715;
  --well-selected-hover: #1b1a18;
  --pill: #20201f;
  --pill-hover: #272725;
  --pill-selected: #2e2d2a;
  --pill-selected-hover: #32312d;
  --rule: rgb(255 255 255 / 10%);
  --ink: #f0efec;
  --ink-2: #c3c2b7;
  --ink-3: #888784;
  --ink-4: #6c6b69;
  --ink-disabled: rgb(255 255 255 / 35%);
  --a5: rgb(255 255 255 / 5%);
  --a10: rgb(255 255 255 / 10%);
  --a20: rgb(255 255 255 / 20%);
  --a35: rgb(255 255 255 / 35%);
  --a50: rgb(255 255 255 / 50%);
  --a60: rgb(255 255 255 / 60%);
  --a70: rgb(255 255 255 / 70%);
  --a85: rgb(255 255 255 / 85%);
  --a95: rgb(255 255 255 / 95%);
  --rank-1: rgb(255 255 255 / 10%);
  --rank-2: rgb(255 255 255 / 20%);
  --rank-3: rgb(255 255 255 / 50%);
  --rank-4: rgb(255 255 255 / 85%);
  --line-1: rgb(255 255 255 / 6%);
  --line-2: rgb(255 255 255 / 8%);
  --line-3: rgb(255 255 255 / 10%);
  --line-4: rgb(255 255 255 / 15%);
  --line-5: rgb(255 255 255 / 20%);
  --accent-ink: #a096eb;
  --accent-glyph: #9085e9;
  --accent-tint: #1d1649;
  --accent-line: #322777;
  --ring-glow: #18172d;
  --danger-ink: #ec7e7e;
  --danger-tint: #3c0e0e;
  --danger-line: #641919;
  --danger-dot: #b93535;
  --success-ink: #0da30e;
  --success-tint: #11260f;
  --success-line: #074505;
  --success-dot: #028301;
  --warning-ink: #da9303;
  --warning-tint: #311a00;
  --warning-line: #512e00;
  --warning-dot: #945d01;
  --info-ink: #6da7ec;
  --info-tint: #032042;
  --info-line: #0d366b;
  --info-dot: #256abf;
  --ring-glow-danger: #301715;
  --label-violet-bg: rgb(30 21 89 / 75%);
  --label-violet-fg: #a096eb;
  --label-violet-dot: #6250d6;
  --label-blue-bg: rgb(0 34 80 / 75%);
  --label-blue-fg: #6da7ec;
  --label-blue-dot: #256abf;
  --label-red-bg: rgb(71 10 10 / 75%);
  --label-red-fg: #ec7e7e;
  --label-red-dot: #b93535;
  --label-green-bg: rgb(14 42 12 / 75%);
  --label-green-fg: #55bf50;
  --label-green-dot: #028301;
  --label-yellow-bg: rgb(57 26 0 / 75%);
  --label-yellow-fg: #da9303;
  --label-yellow-dot: #945d01;
  --label-orange-bg: rgb(65 18 1 / 75%);
  --label-orange-fg: #ec835a;
  --label-orange-dot: #ae461c;
  --label-aqua-bg: rgb(0 43 34 / 75%);
  --label-aqua-fg: #3cbd8c;
  --label-aqua-dot: #0f7e5c;
  --label-magenta-bg: rgb(67 11 33 / 75%);
  --label-magenta-fg: #e87ba4;
  --label-magenta-dot: #ad3d66;
  --label-neutral-bg: rgb(255 255 255 / 8%);
  --label-neutral-fg: #c3c2b7;
  --chart-1: #9085e9;
  --chart-2: #d95926;
  --chart-3: #1a9e70;
  --chart-4: #c98500;
  --chart-5: #d55181;
  --chart-7: #3987e5;
  --chart-8: #e66767;
  --chart-grid: rgb(255 255 255 / 8%);
  --chart-axis: #383835;
  --chart-reference: #97958d;
  --tomrum-hand: #969590;
  --tomrum-hand-light: #4d5157;
  --tomrum-hand-fine: #303337;
  --key-face: #20201f;
  --key-lip: #0b0b0b;
  --key-ring: rgb(255 255 255 / 12%);
  --key-down: #1a1a19;
  --lit: inset 0 1px 0 rgb(255 255 255 / 12%), inset 0 0 0 var(--px) rgb(0 0 0 / 10%);
  --knob-shadow: 0 1px 1px rgb(0 0 0 / .30), 0 0 0 .5px rgb(0 0 0 / .20);
  --handle-shadow: 0 0 0 var(--px) rgb(0 0 0 / .40), 0 1px 2px rgb(0 0 0 / .40);
  --ring-raised: 0.1;
  --ring-raised-hover: 0.16;
  --ring-paper: 0.11;
  --ring-paper-hover: 0.17;
  --ring-mat: 0.11;
  --ring-mat-hover: 0.17;
  --ring-ground: 0.12;
  --ring-ground-hover: 0.18;
  --ring-well: 0.12;
  --ring-well-hover: 0.18;
  --ring-rgb: 255 255 255;
  --e1: 0 1px 1px rgb(0 0 0 / .30), 0 0 0 .5px rgb(0 0 0 / .20);
  --e2: 0 3px 8px rgb(0 0 0 / .125), 0 2px 5px rgb(0 0 0 / .125), 0 1px 1px rgb(0 0 0 / .125);
  --e3: 0 4px 40px rgb(0 0 0 / .10), 0 3px 20px rgb(0 0 0 / .125), 0 3px 12px rgb(0 0 0 / .125), 0 2px 8px rgb(0 0 0 / .125), 0 1px 1px rgb(0 0 0 / .125);
  --dock-shadow: 0 18px 44px -8px rgb(0 0 0 / .5), 0 4px 12px -2px rgb(0 0 0 / .3);
  --backdrop: transparent;
  /* ── scales: colour for every chart (28 September) ── */
  --intensity-1: #94aec6;
  --intensity-1-lit: #a4b9cb;
  --intensity-1-deep: #86a6c2;
  --intensity-1-edge: #bad5ed;
  --intensity-1-on: #0b0b0b;
  --intensity-2: #70a690;
  --intensity-2-lit: #82af9c;
  --intensity-2-deep: #5f9e86;
  --intensity-2-edge: #95ccb5;
  --intensity-2-on: #0b0b0b;
  --intensity-3: #a9863e;
  --intensity-3-lit: #b29253;
  --intensity-3-deep: #a37c27;
  --intensity-3-edge: #d0ab64;
  --intensity-3-on: #0b0b0b;
  --intensity-4: #b75d3d;
  --intensity-4-lit: #be6b4d;
  --intensity-4-deep: #b1512d;
  --intensity-4-edge: #df8261;
  --intensity-4-on: #ffffff;
  --intensity-5: #a93c39;
  --intensity-5-lit: #b14b46;
  --intensity-5-deep: #a32c2d;
  --intensity-5-edge: #d2615b;
  --intensity-5-on: #ffffff;
  --intensity-6: #901c31;
  --intensity-6-lit: #982e3c;
  --intensity-6-deep: #890027;
  --intensity-6-edge: #b84451;
  --intensity-6-on: #ffffff;
  --ch-load: #3987e5;
  --ch-load-planned: #114281;
  --ch-capacity: #9085e9;
  --ch-pressure: #d55181;
  --ch-form: #c98500;
  --rim: rgb(255 255 255 / 12%);
}

/* ── planes: a container says which surface it is, and everything on it takes
      that surface's hover, selected and ring ── */
[data-plane="raised"] {
  --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover);
  --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised);
}
[data-plane="paper"] {
  --plane: var(--paper); --plane-hover: var(--paper-hover); --plane-selected: var(--paper-selected); --plane-selected-hover: var(--paper-selected-hover);
  --ring: var(--ring-paper); --ring-hover: var(--ring-paper-hover); --pill-rest: var(--raised);
}
[data-plane="mat"] {
  --plane: var(--mat); --plane-hover: var(--mat-hover); --plane-selected: var(--mat-selected); --plane-selected-hover: var(--mat-selected-hover);
  --ring: var(--ring-mat); --ring-hover: var(--ring-mat-hover); --pill-rest: var(--raised);
}
[data-plane="ground"] {
  --plane: var(--ground); --plane-hover: var(--ground-hover); --plane-selected: var(--ground-selected); --plane-selected-hover: var(--ground-selected-hover);
  --ring: var(--ring-ground); --ring-hover: var(--ring-ground-hover); --pill-rest: var(--paper);
}
[data-plane="well"] {
  --plane: var(--well); --plane-hover: var(--well-hover); --plane-selected: var(--well-selected); --plane-selected-hover: var(--well-selected-hover);
  --ring: var(--ring-well); --ring-hover: var(--ring-well-hover); --pill-rest: var(--paper);
}
}

/* ═══ 00-base.css ═══ */
@layer base {
@font-face {
  font-family: "Inter Variable";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root { font-family: var(--font); font-feature-settings: var(--font-features); font-optical-sizing: none; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); letter-spacing: var(--tracking); color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; cursor: default; }
*,
*::before,
*::after { box-sizing: border-box; cursor: inherit; }
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"]), textarea, [contenteditable="true"]) { cursor: text; }
:where(button, a, [role="button"], [role="menuitem"], [role="option"], [role="tab"], label, summary, select) { cursor: default; }
:where(button, input, select, textarea) { font: inherit; font-feature-settings: inherit; letter-spacing: inherit; color: inherit; }
:where(button) { background: none; border: 0; padding: 0; margin: 0; -webkit-tap-highlight-color: transparent; }
:where(a) { color: inherit; text-decoration: none; }
:where(img, svg) { display: block; }
:where(svg[data-icon]) { flex: none; }
:where(em, i, cite, address, dfn) { font-style: normal; }
:where(b, strong) { font-weight: var(--fw-550); }
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote) { margin: 0; }
:where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: var(--fw-550); }
::selection { background: var(--selection); }
:where(input, textarea) { caret-color: var(--accent); }
:where([data-r]):focus-visible,
:where([data-r] [data-focusable]):focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
:where([data-r])[data-force~="focus"],
:where([data-r] [data-focusable])[data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 0; }
:where([data-r]):focus:not(:focus-visible) { outline: none; }
@media (forced-colors: active) {
  :where([data-r]):focus-visible { outline-color: Highlight; }
}
:where([data-r]) { scrollbar-width: thin; scrollbar-color: var(--a10) transparent; }
:where([data-num], td, th, time) { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  :where([data-r], [data-r] *) { transition-duration: 0s !important; animation-duration: 0s !important; }
}
:where([hidden]:not([hidden="until-found"])) { display: none !important; }
:where([data-r][popover]) { position: fixed; inset: auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; overflow: visible; color: inherit; background: none; }
:where(dialog[data-r]) { width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: visible; color: inherit; background: none; }
:where(dialog[data-r])::backdrop { background: transparent; }
:root[data-adjusting],
:root[data-adjusting] * { cursor: var(--held-cursor, default) !important; -webkit-user-select: none; user-select: none; }
[data-r="vcursor"] { position: fixed; left: 0; top: 0; z-index: var(--z-tooltip); width: 22px; height: 22px; pointer-events: none; }
[data-r="vcursor"][data-axis="y"] > svg { transform: rotate(90deg); }
[data-r="vcursor"] path { fill: var(--cursor); stroke: var(--cursor-edge); stroke-width: 1.4; stroke-linejoin: round; }
:where(.r-sr) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:where(svg[data-icon]) { width: var(--icon-16); height: var(--icon-16); stroke-width: var(--icon-stroke); }
:where(svg[data-icon][data-size="12"]) { width: var(--icon-12); height: var(--icon-12); }
:where(svg[data-icon][data-size="14"]) { width: var(--icon-14); height: var(--icon-14); }
:where(svg[data-icon][data-size="20"]) { width: var(--icon-20); height: var(--icon-20); }
:where([data-plane]) { background: var(--plane); }
}

/* ═══ 10-button.css ═══ */
@layer components {
[data-r="button"] { --h: var(--h-28); --pad: 10px; --pad-icon: 8px; --gap: 6px; --fs: var(--fs-12); --lh: var(--lh-12); --icon: var(--icon-16); --pad-l: var(--pad); --pad-r: var(--pad); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--gap); flex: none; height: var(--h); min-width: var(--h); padding: 0 var(--pad-r) 0 var(--pad-l); border: .5px solid transparent; background-clip: padding-box; border-radius: var(--r-press); background-color: var(--pill-rest); color: var(--ink-2); font-size: var(--fs); line-height: var(--lh); font-weight: var(--fw-500); white-space: nowrap; user-select: none; -webkit-user-select: none; text-decoration: none; transition: background-color var(--state-out), color var(--state-out), opacity var(--state-out); }
[data-r="button"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); transition: box-shadow var(--state-out); }
[data-r="button"] > svg[data-icon] { width: var(--icon); height: var(--icon); }
[data-r="button"] > [data-r="dot"] { margin-inline: calc((var(--icon) - 8px) / 2); }
[data-r="button"] > [data-r="status"] { margin-inline: calc((var(--icon) - 14px) / 2); }
[data-r="button"] > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-r="button"]:where(:has(> :is(svg[data-icon], [data-r="status"], [data-r="avatar"], [data-r="dot"]):first-child)) { --pad-l: var(--pad-icon); }
[data-r="button"]:where(:has(> svg[data-icon]:last-child:not(:first-child))) { --pad-r: var(--pad-icon); }
[data-r="button"][data-size="32"] { --h: var(--h-32); --pad: 12px; --pad-icon: 10px; --fs: var(--fs-13); --lh: var(--lh-13); }
[data-r="button"][data-size="24"] { --h: var(--h-24); --pad: 8px; --pad-icon: 6px; --gap: 4px; --icon: var(--icon-14); }
[data-r="button"][data-size="20"] { --h: var(--h-20); --pad: 6px; --pad-icon: 4px; --gap: 4px; --icon: var(--icon-12); --fs: var(--fs-11); --lh: var(--lh-11); }
[data-r="button"][data-size="36"] { --h: var(--h-36); --pad: 14px; --pad-icon: 12px; --fs: var(--fs-13); --lh: var(--lh-13); }
[data-r="button"][data-size="44"] { --h: var(--h-44); --pad: 18px; --pad-icon: 16px; --gap: 8px; --fs: var(--fs-16); --lh: var(--lh-16); --icon: var(--icon-20); }
[data-r="button"][data-icon-only] { width: var(--h); padding: 0; }
[data-r="button"][aria-expanded="true"] { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="button"]:hover { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="button"][data-force~="hover"] { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
[data-r="button"][aria-expanded="true"]::after { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e1); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="button"]:hover::after { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e1); transition-duration: 0s; }
}
[data-r="button"][data-force~="hover"]::after { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e1); transition-duration: 0s; }
[data-r="button"]:is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"], [aria-current="true"]) { background-color: var(--plane-selected); color: var(--ink); }
[data-r="button"]:is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"], [aria-current="true"])::after { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)); }
@media (hover: hover) {
  [data-r="button"]:is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"], [aria-current="true"]):hover { background-color: var(--plane-selected-hover); }
}
[data-r="button"]:is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"], [aria-current="true"])[data-force~="hover"] { background-color: var(--plane-selected-hover); }
[data-r="button"][data-variant="ghost"] { background-color: transparent; }
[data-r="button"][data-variant="ghost"]::after { box-shadow: none; }
[data-r="button"][data-variant="ghost"][aria-expanded="true"] { background-color: var(--plane-hover); color: var(--ink); }
@media (hover: hover) {
  [data-r="button"][data-variant="ghost"]:hover { background-color: var(--plane-hover); color: var(--ink); }
}
[data-r="button"][data-variant="ghost"][data-force~="hover"] { background-color: var(--plane-hover); color: var(--ink); }
[data-r="button"][data-variant="ghost"]:is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"]) { background-color: var(--plane-selected); color: var(--ink); }
[data-r="button"][data-variant="ghost"]:is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"])::after { box-shadow: none; }
[data-r="button"][data-variant="primary"] { background-color: var(--accent); color: var(--on-accent); }
[data-r="button"][data-variant="primary"]::after { box-shadow: var(--lit), var(--e1); }
[data-r="button"][data-variant="primary"][aria-expanded="true"] { background-color: var(--accent-hover); color: var(--on-accent); }
@media (hover: hover) {
  [data-r="button"][data-variant="primary"]:hover { background-color: var(--accent-hover); color: var(--on-accent); }
}
[data-r="button"][data-variant="primary"][data-force~="hover"] { background-color: var(--accent-hover); color: var(--on-accent); }
@media (hover: hover) {
  [data-r="button"][data-variant="primary"]:hover::after { box-shadow: var(--lit), var(--e1); }
}
[data-r="button"][data-variant="primary"][data-force~="hover"]::after { box-shadow: var(--lit), var(--e1); }
[data-r="button"][data-variant="danger"] { background-color: var(--danger); color: var(--on-fill); }
[data-r="button"][data-variant="danger"]::after { box-shadow: var(--lit), var(--e1); }
@media (hover: hover) {
  [data-r="button"][data-variant="danger"]:hover { background-color: var(--danger-hover); color: var(--on-fill); }
}
[data-r="button"][data-variant="danger"][data-force~="hover"] { background-color: var(--danger-hover); color: var(--on-fill); }
@media (hover: hover) {
  [data-r="button"][data-variant="danger"]:hover::after { box-shadow: var(--lit), var(--e1); }
}
[data-r="button"][data-variant="danger"][data-force~="hover"]::after { box-shadow: var(--lit), var(--e1); }
[data-r="button"]:is(:disabled, [aria-disabled="true"]) { opacity: .45; pointer-events: none; }
[data-r="button"][aria-busy="true"] { pointer-events: none; }
[data-r="button"][aria-busy="true"] > :not([data-r="spinner"]) { visibility: hidden; }
[data-r="button"][aria-busy="true"] > [data-r="spinner"] { position: absolute; inset: 0; margin: auto; color: var(--ink-2); }
[data-r="button"][data-variant="primary"][aria-busy="true"] > [data-r="spinner"],
[data-r="button"][data-variant="danger"][aria-busy="true"] > [data-r="spinner"] { color: var(--on-accent); }
[data-r="button"][data-hold] { color: var(--danger-ink); }
@media (hover: hover) {
  [data-r="button"][data-hold]:hover { color: var(--danger-ink); }
}
[data-r="button"][data-hold][data-force~="hover"] { color: var(--danger-ink); }
[data-r="button"][data-hold] > [data-part="fill"] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--gap); padding: 0 var(--pad-r) 0 var(--pad-l); border-radius: inherit; background: var(--danger); color: var(--on-fill); pointer-events: none; clip-path: inset(0 calc((1 - var(--k, 0)) * 100%) 0 0); }
[data-r="button"][data-hold] > [data-part="fill"] > svg[data-icon] { width: var(--icon); height: var(--icon); }
[data-r="button"][data-hold] > [data-part="fill"] > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-r="button"][data-hold][data-done] { opacity: 1; }
[data-r="button"] > [data-part="count"] { font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-450); color: var(--ink-3); margin-left: 0; }
@media (hover: hover) {
  [data-r="button"]:is(:hover, [aria-pressed="true"], [aria-selected="true"], [aria-current="page"]) > [data-part="count"] { color: var(--ink-2); }
}
[data-r="button"]:is([data-force~="hover"], [aria-pressed="true"], [aria-selected="true"], [aria-current="page"]) > [data-part="count"] { color: var(--ink-2); }
[data-r="button"] > [data-part="keys"] { display: inline-flex; gap: 2px; margin-right: -4px; }
[data-r="button"][data-variant="primary"] > [data-part="keys"] [data-r="key"],
[data-r="button"][data-variant="danger"] > [data-part="keys"] [data-r="key"] { --key-face: var(--on-fill-key-face); --key-lip: var(--on-fill-key-lip); --key-ring: var(--on-fill-key-ring); color: var(--on-accent); }
[data-r="split-button"] { position: relative; display: inline-flex; flex: none; height: var(--h-28); border-radius: var(--r-press); background-color: var(--pill-rest); }
[data-r="split-button"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); }
[data-r="split-button"] > [data-r="button"] { background-color: transparent; }
[data-r="split-button"] > [data-r="button"]::after { box-shadow: none; }
[data-r="split-button"] > [data-r="button"]:first-child { border-radius: var(--r-press) 0 0 var(--r-press); --pad-r: 8px; }
[data-r="split-button"] > [data-r="button"]:last-child { border-radius: 0 var(--r-press) var(--r-press) 0; --pad-l: 6px; --pad-r: 8px; }
[data-r="split-button"] > [data-r="button"]:last-child::before { content: ""; position: absolute; left: -.5px; top: 6px; bottom: 6px; width: var(--px); background: rgb(var(--ring-rgb) / var(--ring-hover)); }
[data-r="split-button"] > [data-r="button"][aria-expanded="true"] { background-color: var(--plane-hover); }
@media (hover: hover) {
  [data-r="split-button"] > [data-r="button"]:hover { background-color: var(--plane-hover); }
}
[data-r="split-button"] > [data-r="button"][data-force~="hover"] { background-color: var(--plane-hover); }
[data-r="split-button"][data-variant="primary"] { background-color: var(--accent); }
[data-r="split-button"][data-variant="primary"]::after { box-shadow: var(--lit), var(--e1); }
[data-r="split-button"][data-variant="primary"] > [data-r="button"] { color: var(--on-accent); }
[data-r="split-button"][data-variant="primary"] > [data-r="button"][aria-expanded="true"] { background-color: var(--accent-hover); color: var(--on-accent); }
@media (hover: hover) {
  [data-r="split-button"][data-variant="primary"] > [data-r="button"]:hover { background-color: var(--accent-hover); color: var(--on-accent); }
}
[data-r="split-button"][data-variant="primary"] > [data-r="button"][data-force~="hover"] { background-color: var(--accent-hover); color: var(--on-accent); }
[data-r="split-button"][data-variant="primary"] > [data-r="button"]:last-child::before { background: var(--on-fill-line); }
[data-r="toolbar"] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
[data-r="toolbar"] > [data-part="spacer"] { flex: 1; }
[data-r="toolbar-separator"] { flex: none; width: var(--px); height: 16px; margin: 0 4px; background: var(--line-3); }
[data-r="spinner"] { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: var(--r-round); border: 1.5px solid currentColor; border-right-color: transparent; animation: r-spin var(--spin) linear infinite; }
[data-r="spinner"][data-size="12"] { width: 12px; height: 12px; border-width: 1.25px; }
@keyframes r-spin { to { transform: rotate(360deg); } }
}

/* ═══ 11-tabs.css ═══ */
@layer components {
[data-r="tabs"] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
[data-r="tabs"] > [data-r="button"][aria-selected="true"] { pointer-events: none; }
[data-r="tabs"][data-variant="quiet"] > [data-r="button"] { background-color: transparent; color: var(--ink-3); }
[data-r="tabs"][data-variant="quiet"] > [data-r="button"]::after { box-shadow: none; }
@media (hover: hover) {
  [data-r="tabs"][data-variant="quiet"] > [data-r="button"]:hover { background-color: var(--plane-hover); color: var(--ink); }
}
[data-r="tabs"][data-variant="quiet"] > [data-r="button"][data-force~="hover"] { background-color: var(--plane-hover); color: var(--ink); }
[data-r="tabs"][data-variant="quiet"] > [data-r="button"][aria-selected="true"] { background-color: var(--plane-selected); color: var(--ink); }
[data-r="tabs"][data-fill] { display: flex; flex-wrap: nowrap; gap: 2px; width: 100%; }
[data-r="tabs"][data-fill] > [data-r="button"] { flex: 1 0 auto; --pad: 6px; }
[data-r="tabs"][data-variant="panel"] > [data-r="button"] { --pad: 12px; }
[data-r="tabs"][data-variant="panel"] > [data-r="button"][aria-selected="true"]::after { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)); }
[data-r="segmented"] { display: inline-flex; align-items: center; gap: 4px; flex: none; }
[data-r="segmented"][data-fill] { display: flex; width: 100%; }
[data-r="segmented"][data-fill] > [data-r="button"] { flex: 1 0 auto; --pad: 8px; }
[data-r="segmented"] > [data-r="button"][aria-checked="true"] { background-color: var(--plane-selected); color: var(--ink); }
[data-r="segmented"] > [data-r="button"][aria-checked="true"]::after { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)); }
@media (hover: hover) {
  [data-r="segmented"] > [data-r="button"][aria-checked="true"]:hover { background-color: var(--plane-selected-hover); }
}
[data-r="segmented"] > [data-r="button"][aria-checked="true"][data-force~="hover"] { background-color: var(--plane-selected-hover); }
[data-r="tabs"][data-overflow] { flex-wrap: nowrap; flex: 1 1 0%; }
[data-r="tabs"] > [data-part="more"] { flex: none; }
}

/* ═══ 12-chip.css ═══ */
@layer components {
[data-r="chip"] { position: relative; display: inline-flex; align-items: center; gap: 4px; flex: none; height: var(--h-24); padding: 0 8px; border: .5px solid transparent; background-clip: padding-box; border-radius: var(--r-press); background-color: var(--pill-rest); color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); white-space: nowrap; user-select: none; transition: background-color var(--state-out), color var(--state-out); }
[data-r="chip"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); transition: box-shadow var(--state-out); }
[data-r="chip"] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); margin-left: -2px; }
@media (hover: hover) {
  [data-r="chip"]:hover { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="chip"][data-force~="hover"] { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="chip"]:hover::after { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e1); transition-duration: 0s; }
}
[data-r="chip"][data-force~="hover"]::after { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e1); transition-duration: 0s; }
[data-r="chip"][aria-pressed="true"] { background-color: var(--plane-selected); color: var(--ink); }
[data-r="chip"][aria-pressed="true"]::after { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)); }
[data-r="chips"] { display: flex; flex-wrap: wrap; gap: 4px; }
[data-r="fact"] { display: inline-flex; align-items: center; gap: 0; flex: none; height: var(--h-24); padding: 0 8px; border: .5px solid var(--line-4); border-radius: var(--r-press); background-color: var(--plane); color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); white-space: nowrap; transition: background-color var(--state-out), color var(--state-out), border-color var(--state-out); }
[data-r="fact"]:has(> [data-part="dot"], > svg[data-icon]:first-child, > [data-r="avatar"]:first-child) { padding-left: 5px; }
[data-r="fact"] > [data-part="dot"] { display: inline-block; flex: none; width: 14px; height: 14px; margin-right: 4px; background: radial-gradient(circle at center, var(--c, var(--ink-3)) 4.5px, transparent 5px); }
[data-r="fact"] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); margin-right: 4px; color: var(--ink-3); }
[data-r="fact"] > [data-r="avatar"] { margin-right: 5px; }
@media (hover: hover) {
  :is(button, a, [tabindex])[data-r="fact"]:hover { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
:is(button, a, [tabindex])[data-r="fact"][data-force~="hover"] { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
[data-r="facts"] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
[data-r="filter"] { display: inline-flex; align-items: stretch; flex: none; height: var(--h-24); border: .5px solid var(--line-4); border-radius: var(--r-value); background-color: var(--pill-rest); color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); white-space: nowrap; overflow: hidden; }
[data-r="filter"] > [data-part] { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; background: transparent; border: 0; color: inherit; transition: background-color var(--state-out), color var(--state-out); }
[data-r="filter"] > [data-part] + [data-part] { box-shadow: inset var(--px) 0 0 var(--line-4); }
[data-r="filter"] > [data-part="field"] { color: var(--ink); font-weight: var(--fw-500); }
[data-r="filter"] > [data-part="operator"] { color: var(--ink-3); }
[data-r="filter"] > [data-part="remove"] { padding: 0 6px; color: var(--ink-3); }
[data-r="filter"] > [data-part] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); }
[data-r="filter"] > [data-part] > [data-r="dot"] { width: 8px; height: 8px; }
@media (hover: hover) {
  [data-r="filter"] > button[data-part]:hover { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="filter"] > button[data-part][data-force~="hover"] { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}

/* ═══ 13-toggle.css ═══ */
@layer components {
[data-r="switch"] { --w: 30px; --hh: 20px; --k: 14px; --kp: 3px; position: relative; display: inline-block; flex: none; width: var(--w); height: var(--hh); padding: 0; border: 0; border-radius: var(--r-press); background-color: var(--a20); transition: background-color var(--state-out) ease-out, opacity var(--state-out) ease-out; }
[data-r="switch"]::before { content: ""; position: absolute; inset: -6px; }
[data-r="switch"]::after { content: ""; position: absolute; top: var(--kp); left: var(--kp); right: calc(var(--w) - var(--kp) - var(--k)); height: var(--k); border-radius: var(--r-press); background: var(--knob); box-shadow: var(--knob-shadow); transition: left var(--toggle-move) ease-out var(--toggle-lag), right var(--toggle-move) ease-out; }
[data-r="switch"][aria-checked="true"] { background-color: var(--accent); box-shadow: var(--lit); }
[data-r="switch"][aria-checked="true"]::after { left: calc(var(--w) - var(--kp) - var(--k)); right: var(--kp); transition: left var(--toggle-move) ease-out, right var(--toggle-move) ease-out var(--toggle-lag); }
@media (hover: hover) {
  [data-r="switch"]:hover:not([aria-checked="true"]) { background-color: var(--a35); transition-duration: 0s; }
}
[data-r="switch"][data-force~="hover"]:not([aria-checked="true"]) { background-color: var(--a35); transition-duration: 0s; }
[data-r="switch"][data-size="mini"] { --w: 22px; --hh: 14px; --k: 10px; --kp: 2px; }
[data-r="switch"]:is(:disabled, [aria-disabled="true"]) { opacity: .45; pointer-events: none; }
[data-r="checkbox"] { position: relative; display: inline-block; flex: none; width: 14px; height: 14px; border-radius: var(--r-key); background: var(--raised); box-shadow: inset 0 0 0 1px var(--ink-4); transition: background-color var(--state-out), box-shadow var(--state-out); }
[data-r="checkbox"]::before { content: ""; position: absolute; inset: -6px; }
:is([data-r="checkbox"], [data-r="radio"]) { --ring-gap: var(--plane); }
:is([data-r="checkbox"], [data-r="radio"]):focus-visible { outline: none; box-shadow: var(--ring-field); transition: box-shadow var(--ring-in) var(--ease-ring); }
:is([data-r="checkbox"], [data-r="radio"])[data-force~="focus"] { outline: none; box-shadow: var(--ring-field); transition: box-shadow var(--ring-in) var(--ease-ring); }
@media (hover: hover) {
  [data-r="checkbox"]:hover { box-shadow: inset 0 0 0 1px var(--ink-3); transition-duration: 0s; }
}
[data-r="checkbox"][data-force~="hover"] { box-shadow: inset 0 0 0 1px var(--ink-3); transition-duration: 0s; }
[data-r="checkbox"]:is([aria-checked="true"], [aria-checked="mixed"]) { background: var(--accent); box-shadow: var(--lit); }
[data-r="checkbox"][aria-checked="true"]::after { content: ""; position: absolute; left: 4.75px; top: 2px; width: 3.5px; height: 7px; border: solid var(--on-accent); border-width: 0 1.5px 1.5px 0; transform: rotate(42deg); }
[data-r="checkbox"][aria-checked="mixed"]::after { content: ""; position: absolute; left: 3.5px; right: 3.5px; top: 6.25px; height: 1.5px; border-radius: 1px; background: var(--on-accent); /* allow: radius · a drawn mark */ }
[data-r="checkbox"]:is(:disabled, [aria-disabled="true"]) { opacity: .45; pointer-events: none; }
[data-r="radio"] { position: relative; display: inline-block; flex: none; width: 14px; height: 14px; border-radius: var(--r-round); background: var(--raised); box-shadow: inset 0 0 0 1px var(--ink-4); transition: background-color var(--state-out), box-shadow var(--state-out); }
[data-r="radio"]::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; }
@media (hover: hover) {
  [data-r="radio"]:hover { box-shadow: inset 0 0 0 1px var(--ink-3); transition-duration: 0s; }
}
[data-r="radio"][data-force~="hover"] { box-shadow: inset 0 0 0 1px var(--ink-3); transition-duration: 0s; }
[data-r="radio"][aria-checked="true"] { background: var(--accent); box-shadow: var(--lit); }
[data-r="radio"][aria-checked="true"]::after { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: var(--on-accent); }
[data-r="radio"]:is(:disabled, [aria-disabled="true"]) { opacity: .45; pointer-events: none; }
[data-r="option"] { display: inline-flex; align-items: center; gap: 8px; min-height: var(--h-24); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); color: var(--ink); user-select: none; }
[data-r="option"] [data-part="hint"] { display: block; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="option"]:has([data-part="hint"]) { align-items: flex-start; padding: 2.5px 0; }
[data-r="option"]:has([data-part="hint"]) > :is([data-r="checkbox"], [data-r="radio"]) { margin-top: 2.5px; }
[data-r="option"]:has(:disabled, [aria-disabled="true"]) { color: var(--ink-disabled); }
[data-r="option"][data-size="12"] { gap: 6px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="options"] { display: flex; flex-direction: column; gap: 4px; }
[data-r="options"][data-direction="row"] { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
}

/* ═══ 20-field.css ═══ */
@layer components {
[data-r="field"] { --h: var(--h-32); --pad: 10px; --fs: var(--fs-13); --lh: var(--lh-13); --icon: var(--icon-16); --gap: 8px; position: relative; display: flex; align-items: center; gap: var(--gap); min-width: 0; height: var(--h); padding: 0 var(--pad); border: .5px solid var(--line-4); border-radius: var(--r-value); background-color: var(--raised); color: var(--ink); font-size: var(--fs); line-height: var(--lh); font-weight: var(--fw-450); --ring-gap: var(--raised); transition: border-color var(--state-out), box-shadow var(--ring-in) var(--ease-ring); }
[data-r="field"] > input,
[data-r="field"] > textarea { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; letter-spacing: inherit; }
[data-r="field"] > input::placeholder,
[data-r="field"] > textarea::placeholder { color: var(--ink-3); opacity: 1; }
[data-r="field"] > svg[data-icon] { width: var(--icon); height: var(--icon); color: var(--ink-3); }
[data-r="field"] > [data-part="unit"] { flex: none; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); user-select: none; }
[data-r="field"] > [data-part="unit"][data-scrub] { cursor: ew-resize; }
[data-r="field"] > [data-part="clear"] { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; margin-right: -4px; border-radius: var(--r-round); color: var(--ink-3); transition: background-color var(--state-out), color var(--state-out); }
@media (hover: hover) {
  [data-r="field"] > [data-part="clear"]:hover { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="field"] > [data-part="clear"][data-force~="hover"] { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
[data-r="field"] > [data-part="clear"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); }
@media (hover: hover) {
  [data-r="field"]:hover { border-color: var(--line-5); transition-duration: 0s; }
}
[data-r="field"][data-force~="hover"] { border-color: var(--line-5); transition-duration: 0s; }
[data-r="field"]:is(:focus-within, [data-force~="focus"]) { border-color: transparent; box-shadow: var(--ring-field); outline: none; }
[data-r="field"]:is([data-invalid], [aria-invalid="true"]):not(:focus-within, [data-force~="focus"]) { border-color: var(--danger); }
[data-r="field"]:is([data-invalid], [aria-invalid="true"]):is(:focus-within, [data-force~="focus"]) { border-color: transparent; box-shadow: var(--ring-field-danger); }
[data-r="field"]:has(> input:disabled, > textarea:disabled) { opacity: .5; pointer-events: none; }
[data-r="field"][data-readonly] { background-color: var(--well); border-color: transparent; }
[data-r="field"][data-size="28"] { --h: var(--h-28); --pad: 8px; --fs: var(--fs-12); --lh: var(--lh-12); --gap: 6px; }
[data-r="field"][data-size="24"] { --h: var(--h-24); --pad: 7px; --fs: var(--fs-12); --lh: var(--lh-12); --gap: 4px; --icon: var(--icon-14); }
[data-r="field"][data-kind="number"] { padding-right: 4px; }
[data-r="field"][data-kind="number"] > input { text-align: right; font-variant-numeric: tabular-nums; }
[data-r="field"][data-kind="number"] > [data-part="unit"] { display: flex; align-items: center; align-self: stretch; padding: 0 6px 0 2px; transition: color var(--state-out); }
@media (hover: hover) {
  [data-r="field"][data-kind="number"] > [data-part="unit"][data-scrub]:hover { color: var(--ink-2); transition-duration: 0s; }
}
[data-r="field"][data-kind="number"] > [data-part="unit"][data-scrub][data-force~="hover"] { color: var(--ink-2); transition-duration: 0s; }
[data-r="field"][data-kind="stepper"] { padding: 0 3px; }
[data-r="field"][data-kind="stepper"] > input { text-align: center; font-variant-numeric: tabular-nums; }
[data-r="field"][data-kind="stepper"] > button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: calc(var(--h) - 8px); height: calc(var(--h) - 8px); border-radius: var(--r-press); color: var(--ink-3); transition: background-color var(--state-out), color var(--state-out); }
@media (hover: hover) {
  [data-r="field"][data-kind="stepper"] > button:hover { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="field"][data-kind="stepper"] > button[data-force~="hover"] { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
[data-r="field"][data-kind="stepper"] > button:active { background-color: var(--plane-selected); color: var(--ink); transition-duration: 0s; }
[data-r="field"][data-kind="stepper"] > button[data-force~="active"] { background-color: var(--plane-selected); color: var(--ink); transition-duration: 0s; }
[data-r="field"][data-kind="stepper"] > button[aria-disabled="true"] { background-color: transparent; color: var(--ink-disabled); }
[data-r="field"][data-kind="stepper"] > button > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); }
[data-r="field"][data-kind="duration"] > input { font-variant-numeric: tabular-nums; }
[data-r="field"][data-kind="area"] { height: auto; align-items: stretch; padding: 7px var(--pad); }
[data-r="field"][data-kind="area"] > textarea { min-height: 57px; resize: vertical; line-height: var(--lh-13); }
[data-r="field-label"] { display: block; margin: 0 0 6px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-2); }
[data-r="field-hint"] { margin: 6px 0 0; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="field-hint"][data-tone="danger"] { color: var(--danger-ink); }
[data-r="field-hint"][data-tone="success"] { color: var(--success-ink); }
[data-r="field-error"] { display: flex; align-items: flex-start; gap: 5px; margin: 6px 0 0; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--danger-ink); }
[data-r="field-error"] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); margin-top: 1.5px; }
[data-r="form-row"] { display: flex; flex-direction: column; min-width: 0; }
[data-r="form-row"] > [data-r="button"] { align-self: flex-start; }
[data-r="form-grid"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 20px; }
[data-r="search"] { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: var(--h-28); width: 220px; padding: 0 6px 0 9px; border: .5px solid transparent; background-clip: padding-box; border-radius: var(--r-press); background-color: var(--pill-rest); color: var(--ink); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); }
[data-r="search"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); }
[data-r="search"] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); color: var(--ink-3); }
[data-r="search"] > input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0; background: transparent; font: inherit; color: inherit; }
[data-r="search"] > input::placeholder { color: var(--ink-3); opacity: 1; }
@media (hover: hover) {
  [data-r="search"]:hover::after { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e1); }
}
[data-r="search"][data-force~="hover"]::after { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e1); }
[data-r="search"] { --ring-gap: var(--pill-rest); transition: box-shadow var(--ring-in) var(--ease-ring); }
[data-r="search"]:is(:focus-within, [data-force~="focus"], :has(> input:not(:placeholder-shown))) { box-shadow: var(--ring-field); outline: none; }
[data-r="search"]:is(:focus-within, [data-force~="focus"], :has(> input:not(:placeholder-shown)))::after { box-shadow: none; }
[data-r="search"][data-size="32"] { height: var(--h-32); font-size: var(--fs-13); line-height: var(--lh-13); padding: 0 8px 0 10px; }
[data-r="search"][data-size="32"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); }
}

/* ═══ 21-select.css ═══ */
@layer components {
[data-r="select"] { --h: var(--h-28); --pad-l: 9px; --pad-r: 6px; --fs: var(--fs-12); --lh: var(--lh-12); position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; min-width: 0; max-width: 100%; height: var(--h); padding: 0 var(--pad-r) 0 var(--pad-l); border: .5px solid transparent; background-clip: padding-box; border-radius: var(--r-value); background-color: var(--pill-rest); color: var(--ink); font-size: var(--fs); line-height: var(--lh); font-weight: var(--fw-450); text-align: left; white-space: nowrap; user-select: none; transition: background-color var(--state-out), color var(--state-out); }
[data-r="select"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); transition: box-shadow var(--state-out); }
[data-r="select"] > svg[data-icon]:not([data-part="chevron"]) { width: var(--icon-14); height: var(--icon-14); color: var(--ink-2); margin-left: -1px; }
[data-r="select"] > [data-part="value"] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-r="select"] > [data-part="value"]:empty::before,
[data-r="select"] > [data-part="value"][data-empty] { color: var(--ink-3); }
[data-r="select"] > [data-part="value"]:empty::before { content: attr(data-placeholder); }
[data-r="select"] > [data-part="chevron"] { width: var(--icon-12); height: var(--icon-12); color: var(--ink-3); margin-left: auto; }
[data-r="select"][aria-expanded="true"] { background-color: var(--plane-hover); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="select"]:hover { background-color: var(--plane-hover); transition-duration: 0s; }
}
[data-r="select"][data-force~="hover"] { background-color: var(--plane-hover); transition-duration: 0s; }
[data-r="select"][aria-expanded="true"]::after { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e1); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="select"]:hover::after { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e1); transition-duration: 0s; }
}
[data-r="select"][data-force~="hover"]::after { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e1); transition-duration: 0s; }
[data-r="select"]:is(:disabled, [aria-disabled="true"]) { opacity: .5; pointer-events: none; }
[data-r="select"][data-size="24"] { --h: var(--h-24); --pad-l: 8px; --pad-r: 5px; }
[data-r="select"][data-size="32"] { --h: var(--h-32); --pad-l: 10px; --pad-r: 8px; --fs: var(--fs-13); --lh: var(--lh-13); }
[data-r="select"][data-size="32"] > svg[data-icon]:not([data-part="chevron"]) { width: var(--icon-16); height: var(--icon-16); }
[data-r="select"][data-width="fill"] { display: flex; width: 100%; }
[data-r="select"][data-variant="quiet"] { background-color: transparent; color: var(--ink-2); }
[data-r="select"][data-variant="quiet"]::after { box-shadow: none; }
[data-r="select"][data-variant="quiet"] > svg[data-icon]:not([data-part="chevron"]) { color: inherit; }
[data-r="select"][data-variant="quiet"][aria-expanded="true"] { background-color: var(--plane-hover); color: var(--ink); }
@media (hover: hover) {
  [data-r="select"][data-variant="quiet"]:hover { background-color: var(--plane-hover); color: var(--ink); }
}
[data-r="select"][data-variant="quiet"][data-force~="hover"] { background-color: var(--plane-hover); color: var(--ink); }
[data-r="select"][data-variant="quiet"][aria-expanded="true"]::after { box-shadow: none; }
@media (hover: hover) {
  [data-r="select"][data-variant="quiet"]:hover::after { box-shadow: none; }
}
[data-r="select"][data-variant="quiet"][data-force~="hover"]::after { box-shadow: none; }
}

/* ═══ 22-slider.css ═══ */
@layer components {
[data-r="slider"] { position: relative; display: block; flex: 1; min-width: 120px; height: 20px; touch-action: none; user-select: none; -webkit-user-select: none; }
[data-r="slider"][data-marks] { margin-top: 18px; }
[data-r="slider"][data-words] { margin-bottom: 20px; }
[data-r="slider"]:has(> [data-part="handle"][aria-disabled="true"]) { opacity: .5; pointer-events: none; }
[data-r="slider"] > [data-part="track"] { position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: var(--r-press); background: var(--a10); transition: background-color var(--state-out); }
[data-r="slider"] > [data-part="track"] > [data-part="fill"] { position: absolute; top: 0; bottom: 0; left: var(--from, 0%); right: calc(100% - var(--to, 50%)); border-radius: inherit; background: var(--accent); }
@media (hover: hover) {
  [data-r="slider"]:hover > [data-part="track"] { background: var(--a20); transition-duration: 0s; }
}
[data-r="slider"][data-force~="hover"] > [data-part="track"] { background: var(--a20); transition-duration: 0s; }
[data-r="slider"] > [data-part="band"] { position: absolute; top: 4px; left: var(--at); width: var(--w); height: 12px; border-radius: var(--r-press); background: var(--a5); pointer-events: none; }
[data-r="slider"] > [data-part="mark"] { position: absolute; top: 2px; bottom: 2px; left: var(--at); width: 0; pointer-events: none; }
[data-r="slider"] > [data-part="mark"]::before { content: ""; position: absolute; left: -.5px; top: 0; bottom: 0; width: 1px; background: var(--ink-2); }
[data-r="slider"] > [data-part="mark"] > span { position: absolute; bottom: 100%; left: 0; margin-bottom: 3px; transform: translateX(-50%); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-450); color: var(--ink-2); white-space: nowrap; }
[data-r="slider"] > [data-part="words"] { position: absolute; left: 0; right: 0; top: 24px; height: 16px; pointer-events: none; }
[data-r="slider"] > [data-part="words"] > span { position: absolute; left: var(--at); transform: translateX(-50%); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-450); color: var(--ink-3); white-space: nowrap; }
[data-r="slider"] > [data-part="words"] > span:first-child { transform: none; }
[data-r="slider"] > [data-part="words"] > span:last-child { transform: translateX(-100%); }
[data-r="slider"] > [data-part="handle"] { position: absolute; top: 3px; left: var(--at, 50%); z-index: 1; width: 14px; height: 14px; margin-left: -7px; border-radius: var(--r-round); background: var(--knob); box-shadow: var(--handle-shadow); transition: transform var(--state-out); }
[data-r="slider"] > [data-part="handle"]::before { content: ""; position: absolute; inset: -7px; border-radius: inherit; }
@media (hover: hover) {
  [data-r="slider"]:hover > [data-part="handle"] { transform: scale(1.14); transition-duration: 0s; }
}
[data-r="slider"][data-force~="hover"] > [data-part="handle"] { transform: scale(1.14); transition-duration: 0s; }
[data-r="slider"] > [data-part="handle"][data-held] { transform: scale(1.22); transition: none; }
[data-r="slider"] > [data-part="handle"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="slider"] > [data-part="handle"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="slider"] > [data-part="tick"] { position: absolute; top: 15px; left: var(--at); width: 1px; height: 3px; margin-left: -.5px; background: var(--ink-4); }
[data-r="slider"] > [data-part="bubble"] { position: absolute; bottom: calc(100% + 8px); left: var(--at, 50%); z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 8px; border-radius: var(--r-row); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e1); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-450); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
[data-r="slider"] > [data-part="bubble"] > b { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-550); color: var(--ink); }
[data-r="slider"][data-marks] > [data-part="bubble"] { bottom: calc(100% + 24px); }
[data-r="slider-row"] { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
[data-r="slider-row"] > output { min-width: 64px; text-align: right; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) {
  [data-r="slider-row"]:has(> [data-r="slider"]:is([data-words], [data-marks])) { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  [data-r="slider-row"]:has(> [data-r="slider"]:is([data-words], [data-marks])) > output { order: -1; text-align: left; }
}
}

/* ═══ 23-date.css ═══ */
@layer components {
[data-r="calendar"] { display: inline-flex; flex-direction: column; gap: 8px; width: 256px; color: var(--ink); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); user-select: none; }
[data-r="calendar"] > [data-part="head"] { display: flex; align-items: center; gap: 2px; height: var(--h-24); }
[data-r="calendar"] > [data-part="head"] > b { flex: 1; padding-left: 6px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); }
[data-r="calendar"] > [data-part="grid"] { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
[data-r="calendar"] [data-part="weekday"] { display: flex; align-items: center; justify-content: center; height: var(--h-24); font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }
[data-r="calendar"] [data-part="day"] { position: relative; display: flex; align-items: center; justify-content: center; height: var(--h-28); border-radius: var(--r-press); color: var(--ink); font-variant-numeric: tabular-nums; transition: background-color var(--state-out), color var(--state-out); }
@media (hover: hover) {
  [data-r="calendar"] [data-part="day"]:hover { background-color: var(--plane-hover); transition-duration: 0s; }
}
[data-r="calendar"] [data-part="day"][data-force~="hover"] { background-color: var(--plane-hover); transition-duration: 0s; }
[data-r="calendar"] [data-part="day"][data-outside] { color: var(--ink-disabled); }
[data-r="calendar"] [data-part="day"][data-today] { color: var(--accent-ink); font-weight: var(--fw-550); }
[data-r="calendar"] [data-part="day"][data-in-range] { background-color: var(--plane-selected); border-radius: 0; }
[data-r="calendar"] [data-part="day"][data-range-start] { border-radius: var(--r-press) 0 0 var(--r-press); }
[data-r="calendar"] [data-part="day"][data-range-end] { border-radius: 0 var(--r-press) var(--r-press) 0; }
[data-r="calendar"] [data-part="day"][aria-selected="true"] { background-color: var(--accent); color: var(--on-accent); font-weight: var(--fw-550); box-shadow: var(--lit); }
[data-r="calendar"] [data-part="day"][data-has]::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; /* allow: spacing · centres a 3 px dot */ border-radius: var(--r-round); background: currentColor; opacity: .5; }
[data-r="calendar"] > [data-part="foot"] { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: var(--px) solid var(--line-3); }
[data-r="date-picker"] { display: flex; flex-direction: column; gap: 12px; width: 304px; padding: 12px; }
[data-r="date-picker"] > [data-r="calendar"] { width: 100%; }
[data-r="popover"]:has(> [data-r="date-picker"]) { padding: 0; }
[data-r="time"] { display: inline-flex; align-items: center; gap: 1px; font-variant-numeric: tabular-nums; }
[data-r="time"] > [data-part="segment"] { padding: 2px 2px; border-radius: var(--r-key); outline: none; }
[data-r="time"] > [data-part="segment"]:focus { background: var(--selection); color: var(--ink); }
[data-r="time"] > [data-part="colon"] { color: var(--ink-3); }
}

/* ═══ 24-token.css ═══ */
@layer components {
[data-r="field"][data-kind="tokens"] { height: auto; min-height: var(--h); flex-wrap: wrap; gap: 4px; padding: 3px 4px; }
[data-r="field"][data-kind="tokens"] > input { min-width: 90px; height: var(--h-24); padding: 0 4px; }
[data-r="token"] { display: inline-flex; align-items: center; gap: 4px; flex: none; height: var(--h-24); padding: 0 3px 0 8px; border-radius: var(--r-press); background: var(--plane-selected); color: var(--ink); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); white-space: nowrap; }
[data-r="token"] > [data-r="avatar"] { margin-left: -5px; }
[data-r="token"] > [data-part="remove"] { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--r-round); color: var(--ink-3); transition: background-color var(--state-out), color var(--state-out); }
[data-r="token"] > [data-part="remove"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); }
@media (hover: hover) {
  [data-r="token"] > [data-part="remove"]:hover { background: var(--plane-selected-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="token"] > [data-part="remove"][data-force~="hover"] { background: var(--plane-selected-hover); color: var(--ink); transition-duration: 0s; }
[data-r="token"][data-armed] { box-shadow: inset 0 0 0 1px var(--accent); }
[data-r="drop"] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: 20px; border-radius: var(--r-contain); background: var(--well); box-shadow: inset 0 0 0 1px var(--line-3); background-image: none; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); text-align: center; outline: 1px dashed var(--line-5); outline-offset: -1px; }
[data-r="drop"] > svg[data-icon] { width: var(--icon-20); height: var(--icon-20); color: var(--ink-3); }
[data-r="drop"] > b { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-500); color: var(--ink); }
[data-r="drop"][data-over] { outline-color: var(--accent); outline-style: solid; color: var(--ink-2); }
[data-r="drop"][data-over] > svg[data-icon] { color: var(--accent-glyph); }
[data-r="file"] { display: flex; align-items: center; gap: 10px; height: var(--row-40); padding: 0 6px 0 10px; border-radius: var(--r-row); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-raised)), var(--e1); font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="file"] > [data-part="icon"] { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--r-key); background: var(--well); color: var(--ink-2); }
[data-r="file"] > [data-part="icon"] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); }
[data-r="file"] > [data-part="name"] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
[data-r="file"] > [data-part="meta"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="file"] > [data-part="progress"] { width: 64px; }
[data-r="swatches"] { display: flex; flex-wrap: wrap; gap: 6px; }
[data-r="swatch"] { position: relative; width: 18px; height: 18px; border-radius: var(--r-round); background: var(--c); box-shadow: inset 0 0 0 var(--px) rgb(var(--ring-rgb) / 10%); }
[data-r="swatch"]::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; }
[data-r="swatch"][aria-checked="true"] { box-shadow: 0 0 0 2px var(--plane), 0 0 0 3.5px var(--c); }
}

/* ═══ 25-adjust.css ═══ */
@layer components {
[data-r="field-slider"] { --fill: var(--raised-selected); --rest: var(--raised); --grip: .32; --ring-gap: var(--raised); position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; height: var(--h-32); padding: 0 10px; border: .5px solid var(--line-4); border-radius: var(--r-value); background: linear-gradient(90deg, var(--fill) var(--p, 0%), var(--rest) var(--p, 0%)); cursor: ew-resize; touch-action: none; transition: border-color var(--state-out), box-shadow var(--ring-in) var(--ease-ring); }
[data-r="field-slider"] > * { position: relative; z-index: 1; }
[data-r="field-slider"]::after { content: ""; position: absolute; z-index: 0; top: 50%; left: clamp(5px, var(--p, 0%), calc(100% - 5px)); width: 3px; height: 14px; translate: -50% -50%; border-radius: var(--r-press); background: var(--ink-2); opacity: var(--grip); transition: opacity var(--state-out); }
[data-r="field-slider"] > [data-part="label"] { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-r="field-slider"] > input { flex: 1; min-width: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; text-align: right; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-500); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="field-slider"]:not(:focus-within) > input { cursor: ew-resize; pointer-events: none; }
[data-r="field-slider"] > [data-part="unit"] { flex: none; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
@media (hover: hover) {
  [data-r="field-slider"]:hover { --rest: var(--raised-hover); --fill: var(--raised-selected-hover); --grip: .62; border-color: var(--line-5); transition-duration: 0s; }
}
[data-r="field-slider"][data-force~="hover"] { --rest: var(--raised-hover); --fill: var(--raised-selected-hover); --grip: .62; border-color: var(--line-5); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="field-slider"]:hover::after { transition-duration: 0s; }
}
[data-r="field-slider"][data-force~="hover"]::after { transition-duration: 0s; }
[data-r="field-slider"][data-scrub] { --rest: var(--raised-hover); --fill: var(--raised-selected-hover); --grip: 1; border-color: var(--line-5); }
[data-r="field-slider"][data-scrub]::after { height: 18px; transition-duration: 0s; }
[data-r="field-slider"]:is(:focus-within, [data-force~="focus"]) { --fill: var(--raised); --rest: var(--raised); --grip: 0; border-color: transparent; box-shadow: var(--ring-field); cursor: text; }
[data-r="field-slider"][data-size="28"] { height: var(--h-28); padding: 0 8px; }
[data-r="field-slider"][data-size="28"] > input { font-size: var(--fs-12); line-height: var(--lh-12); }
[data-r="knob"] { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; min-width: 96px; }
[data-r="knob"] > [data-part="dial"] { position: relative; width: 64px; height: 64px; border-radius: var(--r-round); cursor: ns-resize; touch-action: none; }
[data-r="knob"] > [data-part="dial"] > svg { position: absolute; inset: 0; width: 64px; height: 64px; overflow: visible; }
[data-r="knob"] [data-part="track"] { fill: none; stroke: var(--a10); stroke-width: 4; stroke-linecap: round; transition: stroke var(--state-out); }
[data-r="knob"] [data-part="arc"] { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
[data-r="knob"] > [data-part="dial"]::before { content: ""; position: absolute; inset: 14px; border-radius: var(--r-round); background: var(--knob); box-shadow: var(--handle-shadow); transition: transform var(--state-out); }
[data-r="knob"] > [data-part="dial"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: var(--r-round); background: var(--ink); transform: rotate(var(--a, 0deg)) translateY(-11px); }
@media (hover: hover) {
  [data-r="knob"] > [data-part="dial"]:hover [data-part="track"] { stroke: var(--a20); transition-duration: 0s; }
}
[data-r="knob"] > [data-part="dial"][data-force~="hover"] [data-part="track"] { stroke: var(--a20); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="knob"] > [data-part="dial"]:hover::before { transform: scale(1.05); transition-duration: 0s; }
}
[data-r="knob"] > [data-part="dial"][data-force~="hover"]::before { transform: scale(1.05); transition-duration: 0s; }
[data-r="knob"] > [data-part="dial"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="knob"] > [data-part="dial"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="knob"] > [data-part="value"] { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="knob"] > [data-part="value"] > [data-part="unit"] { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="knob"] > [data-part="label"] { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-2); text-align: center; }
[data-r="linked"] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 8px; }
[data-r="linked"] > [data-part="link"] { flex: none; }
[data-r="linked"] > [data-part="hint"] { flex-basis: 100%; margin: 0; }
[data-r="linked"][data-unlinked] > [data-part="hint"] { color: var(--ink-2); }
[data-r="code"] { display: flex; align-items: center; gap: 6px; }
[data-r="code"] > [data-part="gap"] { flex: none; width: 4px; }
[data-r="code"] > input { --ring-gap: var(--raised); flex: none; width: 40px; height: var(--h-44); margin: 0; padding: 0; border: .5px solid var(--line-4); border-radius: var(--r-value); outline: none; background: var(--raised); text-align: center; font-size: var(--fs-16); line-height: 1; font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; caret-color: var(--accent); transition: border-color var(--state-out), box-shadow var(--ring-in) var(--ease-ring); }
@media (hover: hover) {
  [data-r="code"] > input:hover { border-color: var(--line-5); transition-duration: 0s; }
}
[data-r="code"] > input[data-force~="hover"] { border-color: var(--line-5); transition-duration: 0s; }
[data-r="code"] > input:is(:focus, [data-force~="focus"]) { border-color: transparent; box-shadow: var(--ring-field); }
@media (max-width: 560px) {
  [data-r="code"] > input { width: 36px; }
}
}

/* ═══ 30-badge.css ═══ */
@layer components {
[data-r="badge"] { --bg: var(--label-neutral-bg); --fg: var(--label-neutral-fg); --dot: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; flex: none; height: var(--h-20); padding: 0 8px; border-radius: var(--r-mark); background: var(--bg); color: var(--fg); font-size: var(--fs-12); line-height: 1; font-weight: var(--fw-500); white-space: nowrap; vertical-align: middle; }
[data-r="badge"] > [data-part="dot"] { width: 6px; height: 6px; border-radius: var(--r-round); background: var(--dot); flex: none; }
[data-r="badge"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); }
[data-r="badge"]:has(> [data-part="dot"]:first-child) { padding-left: 7px; }
[data-r="badge"]:has(> svg[data-icon]:first-child) { padding-left: 5px; }
[data-r="badge"][data-color="violet"],
[data-r="badge"][data-color="accent"] { --bg: var(--label-violet-bg);  --fg: var(--label-violet-fg);  --dot: var(--label-violet-dot); }
[data-r="badge"][data-color="blue"] { --bg: var(--label-blue-bg);    --fg: var(--label-blue-fg);    --dot: var(--label-blue-dot); }
[data-r="badge"][data-color="red"] { --bg: var(--label-red-bg);     --fg: var(--label-red-fg);     --dot: var(--label-red-dot); }
[data-r="badge"][data-color="green"] { --bg: var(--label-green-bg);   --fg: var(--label-green-fg);   --dot: var(--label-green-dot); }
[data-r="badge"][data-color="yellow"] { --bg: var(--label-yellow-bg);  --fg: var(--label-yellow-fg);  --dot: var(--label-yellow-dot); }
[data-r="badge"][data-color="orange"] { --bg: var(--label-orange-bg);  --fg: var(--label-orange-fg);  --dot: var(--label-orange-dot); }
[data-r="badge"][data-color="aqua"] { --bg: var(--label-aqua-bg);    --fg: var(--label-aqua-fg);    --dot: var(--label-aqua-dot); }
[data-r="badge"][data-color="magenta"] { --bg: var(--label-magenta-bg); --fg: var(--label-magenta-fg); --dot: var(--label-magenta-dot); }
[data-r="dot"] { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: var(--r-round); background: var(--c, var(--ink-3)); }
[data-r="dot"][data-size="6"] { width: 6px; height: 6px; }
[data-r="count"] { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-press); background: var(--plane-selected); color: var(--ink-2); font-size: var(--fs-11); line-height: 1; font-weight: var(--fw-500); font-variant-numeric: tabular-nums; }
[data-r="count"][data-tone="danger"] { background: var(--danger); color: var(--on-fill); }
[data-r="provenance"] { position: relative; display: inline-block; flex: none; width: 7px; height: 7px; border-radius: var(--r-round); box-shadow: inset 0 0 0 1.25px var(--ink-3); vertical-align: middle; }
[data-r="provenance"][data-source="measured"] { background: var(--ink-3); }
[data-r="provenance"][data-source="observed"]::after { content: ""; position: absolute; inset: 2.25px; border-radius: inherit; background: var(--ink-3); }
[data-r="provenance"][data-source="estimated"] { background: linear-gradient(to top, var(--ink-3) 50%, transparent 50%); }
[data-r="provenance"][data-source="typical"] { background: transparent; }
[data-r="status"] { position: relative; display: inline-block; flex: none; width: 14px; height: 14px; border-radius: var(--r-round); color: var(--ink-3); }
[data-r="status"]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
[data-r="status"][data-state="planned"]::before { box-shadow: none; background: repeating-conic-gradient(currentColor 0 18deg, transparent 18deg 45deg); -webkit-mask: radial-gradient(circle, transparent 5px, #000 5.5px); mask: radial-gradient(circle, transparent 5px, #000 5.5px); }
[data-r="status"][data-state="today"] { color: var(--accent); }
[data-r="status"][data-state="today"]::after { content: ""; position: absolute; inset: 3.5px; border-radius: inherit; background: conic-gradient(currentColor 0 50%, transparent 50%); }
[data-r="status"][data-state="done"] { color: var(--success-dot); }
[data-r="status"][data-state="done"]::before { background: currentColor; box-shadow: none; }
[data-r="status"][data-state="done"]::after { content: ""; position: absolute; left: 4.5px; top: 3.5px; width: 3.5px; height: 6px; border: solid var(--raised); border-width: 0 1.5px 1.5px 0; transform: rotate(42deg); }
[data-r="status"][data-state="missed"] { color: var(--danger-dot); }
[data-r="status"][data-state="missed"]::after { content: ""; position: absolute; left: 3px; right: 3px; top: 6.25px; height: 1.5px; border-radius: 1px; background: currentColor; }
[data-r="status"][data-state="skipped"] { color: var(--ink-4); }
[data-r="status"][data-state="skipped"]::before { background: currentColor; box-shadow: none; }
[data-r="status"][data-state="skipped"]::after { content: ""; position: absolute; left: 3.5px; right: 3.5px; top: 6.25px; height: 1.5px; border-radius: 1px; background: var(--raised); }
[data-r="intensity"] { display: inline-flex; align-items: flex-end; gap: 1.5px; flex: none; width: 14px; height: 12px; }
[data-r="intensity"] > i { flex: 1; border-radius: 1px; background: var(--a20); }
[data-r="intensity"] > i:nth-child(1) { height: 35%; }
[data-r="intensity"] > i:nth-child(2) { height: 58%; }
[data-r="intensity"] > i:nth-child(3) { height: 80%; }
[data-r="intensity"] > i:nth-child(4) { height: 100%; }
[data-r="intensity"][data-level="1"] > i:nth-child(-n+1),
[data-r="intensity"][data-level="2"] > i:nth-child(-n+2),
[data-r="intensity"][data-level="3"] > i:nth-child(-n+3),
[data-r="intensity"][data-level="4"] > i:nth-child(-n+4) { background: var(--ink-2); }
}

/* ═══ 31-key.css ═══ */
@layer components {
[data-r="key"] { --kh: 20px; --kpad: 5px; --lip: 1.5px; display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: var(--kh); height: var(--kh); padding: 0 var(--kpad) var(--lip); border-radius: var(--r-key); background: var(--key-face); box-shadow: inset 0 calc(-1 * var(--lip)) 0 var(--key-lip), 0 0 0 var(--px) var(--key-ring); color: var(--ink-2); font-family: var(--font); font-size: var(--fs-11); line-height: 1; font-weight: var(--fw-500); letter-spacing: 0; white-space: nowrap; user-select: none; transition: transform var(--key-out) var(--ease-quad), box-shadow var(--key-out) var(--ease-quad), background-color var(--key-out) var(--ease-quad), color var(--key-out) var(--ease-quad); }
[data-r="key"][data-size="16"] { --kh: 16px; --kpad: 3px; --lip: 1px; font-size: var(--fs-11); }
[data-r="key"][data-size="28"] { --kh: 28px; --kpad: 8px; --lip: 2px; font-size: var(--fs-13); }
[data-r="key"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); stroke-width: 1.5; }
[data-r="key"][data-down] { transform: translateY(1px); background: var(--key-down); box-shadow: inset 0 0 0 var(--key-lip), 0 0 0 var(--px) var(--key-ring); color: var(--ink); transition: none; }
[data-r="keys"] { display: inline-flex; align-items: center; gap: 3px; flex: none; }
[data-r="keys"] > [data-part="then"] { font-size: var(--fs-11); line-height: 1; color: var(--ink-3); margin: 0 2px; }
[data-r="shortcut"] { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: var(--fs-12); line-height: 1; font-weight: var(--fw-450); letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }
}

/* ═══ 32-avatar.css ═══ */
@layer components {
[data-r="avatar"] { --s: 18px; position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--s); height: var(--s); border-radius: var(--r-round); background: var(--c, var(--ink-3)); color: var(--on-fill); font-size: var(--fs-9); line-height: 1; font-weight: var(--fw-500); letter-spacing: 0; overflow: visible; user-select: none; }
[data-r="avatar"] > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
[data-r="avatar"][data-size="16"] { --s: 16px; }
[data-r="avatar"][data-size="20"] { --s: 20px; }
[data-r="avatar"][data-size="24"] { --s: 24px; font-size: var(--fs-11); }
[data-r="avatar"][data-size="32"] { --s: 32px; font-size: var(--fs-12); }
[data-r="avatar"] > [data-part="presence"] { position: absolute; right: -1px; bottom: -1px; width: 7px; height: 7px; border-radius: var(--r-round); background: var(--success-dot); box-shadow: 0 0 0 1.5px var(--plane); }
[data-r="avatar-stack"] { display: inline-flex; align-items: center; }
[data-r="avatar-stack"] > [data-r="avatar"] { box-shadow: 0 0 0 1.5px var(--plane); }
[data-r="avatar-stack"] > [data-r="avatar"] + [data-r="avatar"] { margin-left: -3px; }
[data-r="avatar-stack"] > [data-part="more"] { margin-left: 4px; font-size: var(--fs-12); line-height: 1; color: var(--ink-3); }
}

/* ═══ 40-menu.css ═══ */
@layer components {
[data-r="menu"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); --hi: var(--raised-selected); position: relative; display: flex; flex-direction: column; width: max-content; min-width: 180px; max-width: 360px; background: var(--raised); border-radius: var(--r-contain); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); overflow: hidden; user-select: none; -webkit-user-select: none; }
[data-r="menu"]:focus-visible { outline: none; }
[data-r="menu"][data-level="2"] { box-shadow: 0 0 0 var(--px) var(--line-3), var(--e3); }
[data-r="menu"] > [data-part="search"] { display: flex; align-items: center; gap: 10px; flex: none; height: 36px; padding: 0 12px; border-bottom: var(--px) solid var(--line-3); }
[data-r="menu"] > [data-part="search"] > input { flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; outline: 0; background: transparent; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); color: var(--ink); }
[data-r="menu"] > [data-part="search"] > input::placeholder { color: var(--ink-3); opacity: 1; }
[data-r="menu"] > [data-part="list"] { display: flex; flex-direction: column; padding: var(--inset); max-height: var(--menu-max, 420px); overflow: hidden auto; overscroll-behavior: contain; }
[data-r="menu"] > [data-part="footer"] { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; min-height: 36px; padding: 0 8px 0 12px; border-top: var(--px) solid var(--line-3); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="menu-item"] { position: relative; display: flex; align-items: center; gap: 8px; flex: none; height: var(--row-32); padding: 0 8px; border-radius: var(--r-row); color: var(--ink-2); white-space: nowrap; outline: none; }
[data-r="menu-item"] > svg[data-icon],
[data-r="menu-item"] > [data-part="icon"] { width: var(--icon-16); height: var(--icon-16); flex: none; color: var(--ink-2); }
[data-r="menu-item"] > [data-part="label"] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-r="menu-item"] > [data-part="description"] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); }
[data-r="menu-item"] > [data-part="end"] { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; padding-left: 16px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="menu-item"] [data-part="check"] { display: none; width: var(--icon-16); height: var(--icon-16); color: var(--accent-glyph); }
[data-r="menu-item"] [data-part="check"]::before { content: ""; display: block; width: 5px; height: 9.5px; margin: 1.75px 0 0 5.5px; /* allow: spacing · the drawn check */ border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(42deg); }
[data-r="menu-item"][aria-checked="true"] [data-part="check"] { display: block; }
[data-r="menu-item"] > [data-part="end"] > [data-part="submenu"] { width: var(--icon-12); height: var(--icon-12); color: var(--ink-4); margin-right: -2px; }
[data-r="menu-item"][data-highlighted],
[data-r="menu-item"][aria-expanded="true"] { background: var(--hi); color: var(--ink); }
[data-r="menu-item"]:is([data-highlighted], [aria-expanded="true"]) > svg[data-icon],
[data-r="menu-item"]:is([data-highlighted], [aria-expanded="true"]) > [data-part="icon"] { color: var(--ink); }
[data-r="menu-item"]:is([data-highlighted], [aria-expanded="true"]) > [data-part="description"],
[data-r="menu-item"]:is([data-highlighted], [aria-expanded="true"]) > [data-part="end"],
[data-r="menu-item"]:is([data-highlighted], [aria-expanded="true"]) [data-r="shortcut"] { color: var(--ink-2); }
[data-r="menu-item"][data-tone="danger"],
[data-r="menu-item"][data-tone="danger"] > svg[data-icon] { color: var(--danger-ink); }
[data-r="menu-item"]:is([aria-disabled="true"], [data-disabled]) { color: var(--ink-disabled); pointer-events: none; }
[data-r="menu-item"]:is([aria-disabled="true"], [data-disabled]) > svg[data-icon] { color: var(--ink-disabled); }
[data-r="menu-item"][data-lines="2"] { height: var(--row-44); align-items: center; }
[data-r="menu-item"] > [data-part="stack"] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
[data-r="menu-item"] > [data-part="stack"] > :last-child { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
[data-r="menu-item"][data-highlighted] > [data-part="stack"] > :last-child { color: var(--ink-2); }
[data-r="menu-item"] > [data-r="avatar"] { margin: 0 -1px; }
[data-r="menu-item"] > [data-r="dot"] { margin: 0 4px; }
[data-r="menu-item"] > [data-r="checkbox"] { margin: 0 1px; }
[data-r="menu-group-label"] { display: flex; align-items: center; gap: 6px; flex: none; height: var(--row-28); padding: 0 8px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="menu-separator"] { flex: none; height: var(--px); margin: 6px calc(-1 * var(--inset)); background: var(--line-3); }
[data-r="menu-empty"] { padding: 6px 8px 8px; color: var(--ink-3); white-space: nowrap; }
[data-r="menu"][data-size="wide"] { min-width: 280px; }
[data-r="menu"][data-density="compact"] { min-width: 120px; font-size: var(--fs-12); line-height: var(--lh-12); }
[data-r="menu"][data-density="compact"] [data-r="menu-item"] { height: var(--row-24); padding: 0 8px; gap: 6px; }
[data-r="menu"][data-density="compact"] [data-r="menu-item"] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); }
[data-r="menu"][data-density="compact"] [data-r="menu-item"] > [data-part="end"] { padding-left: 12px; gap: 6px; }
[data-r="menu"][data-density="compact"] [data-r="menu-item"] [data-part="check"] { width: var(--icon-14); height: var(--icon-14); }
[data-r="menu"][data-density="compact"] [data-r="menu-item"] [data-part="check"]::before { width: 4px; height: 7.5px; margin: 2px 0 0 5px; }
[data-r="menu"][data-density="compact"] [data-r="menu-group-label"] { height: var(--row-24); font-size: var(--fs-11); line-height: var(--lh-11); }
[data-float] { transform-origin: var(--origin, 0 0); transition: opacity var(--opacity-in) linear, transform var(--scale-in) var(--ease-expo); }
[data-float][data-state="from"] { opacity: 0; transform: scale(var(--scale-from)); transition: none; }
[data-float][data-state="leaving"] { opacity: 0; transform: scale(var(--scale-from)); transition: opacity var(--opacity-out) ease-out, transform var(--scale-out) linear; }
[data-layer] { position: fixed; z-index: var(--z-popover); }
}

/* ═══ 41-popover.css ═══ */
@layer components {
[data-r="popover"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); position: relative; max-width: 320px; padding: 12px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); }
[data-r="popover"] > [data-part="title"] { margin-bottom: 4px; font-weight: var(--fw-550); color: var(--ink); }
[data-r="popover"][data-variant="row"] { display: flex; align-items: center; gap: 2px; padding: 4px; }
[data-r="popover"][data-variant="row"] > [data-r="field"] { flex: 1; min-width: 0; margin-right: 2px; }
[data-r="tooltip"] { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 5px 8px; border-radius: var(--r-row); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e1); color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); white-space: nowrap; pointer-events: none; }
[data-r="tooltip"][data-wide] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; white-space: normal; font-weight: var(--fw-450); }
[data-r="tooltip"][data-wide] > b { color: var(--ink); font-weight: var(--fw-550); }
[data-r="hover-card"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); display: flex; flex-direction: column; gap: 10px; width: 280px; padding: 12px 14px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="hover-card"] > [data-part="head"] { display: flex; align-items: center; gap: 10px; }
[data-r="hover-card"] > [data-part="head"] b { display: block; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="hover-card"] > [data-part="figures"] { display: flex; gap: 20px; }
[data-r="hover-card"] > [data-part="figures"] b { display: block; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="hover-card"] > [data-part="note"] { display: flex; align-items: center; gap: 6px; }
}

/* ═══ 42-panel.css ═══ */
@layer components {
[data-r="view-options"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); display: flex; flex-direction: column; width: 300px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); user-select: none; }
[data-r="view-options"] > [data-part="section"] { display: flex; flex-direction: column; padding: 8px 16px; }
[data-r="view-options"] > [data-part="section"]:first-child { padding-top: 12px; }
[data-r="view-options"] > [data-part="section"] + [data-part="section"] { border-top: var(--px) solid var(--line-3); }
[data-r="view-options"] [data-part="row"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--row-32); }
[data-r="view-options"] [data-part="label"] { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-2); white-space: nowrap; }
[data-r="view-options"] [data-part="title"] { margin: 6px 0 8px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink); }
[data-r="view-options"] [data-r="select"] { min-width: 112px; }
[data-r="view-options"] [data-r="chips"] { margin-bottom: 6px; }
[data-r="view-options"] > [data-part="footer"] { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 8px; border-top: var(--px) solid var(--line-3); }
}

/* ═══ 43-dialog.css ═══ */
@layer components {
[data-r="dialog"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); --w: 440px; --origin: 50% 0%; position: relative; display: flex; flex-direction: column; width: min(var(--w), calc(100vw - 32px)); max-height: calc(100dvh - 64px); border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e3); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); overflow: hidden; }
[data-r="dialog"][data-size="md"] { --w: 560px; }
[data-r="dialog"][data-size="lg"] { --w: 750px; }
[data-r="dialog"][data-size="xl"] { --w: 920px; }
[data-r="dialog"]:modal { position: fixed; inset: 13vh 0 auto; margin: 0 auto; max-height: calc(100dvh - 13vh - 32px); }
:is(dialog[data-r="dialog"], dialog[data-r="sheet"]):not([open]) { display: none; }
[data-r="dialog"] > [data-part="header"] { display: flex; align-items: flex-start; gap: 12px; padding: 16px 12px 4px 20px; }
[data-r="dialog"] > [data-part="header"] > [data-part="title"] { flex: 1; padding-top: 3px; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
[data-r="dialog"] > [data-part="body"] { padding: 6px 20px 16px; overflow: auto; }
[data-r="dialog"] > [data-part="body"] > p + p { margin-top: 8px; }
[data-r="dialog"] > [data-part="footer"] { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px 20px; }
[data-r="dialog"] > [data-part="footer"] > [data-part="start"] { margin-right: auto; display: flex; align-items: center; gap: 8px; }
[data-r="dialog"] > [data-part="footer"][data-ruled] { border-top: var(--px) solid var(--line-3); padding-top: 12px; }
[data-r="dialog"][data-kind="composer"] > [data-part="header"] { align-items: center; padding: 12px 12px 0 16px; }
[data-r="dialog"][data-kind="composer"] [data-part="crumbs"] { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
[data-r="dialog"][data-kind="composer"] [data-part="crumbs"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); color: var(--ink-4); }
[data-r="dialog"][data-kind="composer"] > [data-part="body"] { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 6px; }
[data-r="dialog"] [data-part="title-input"],
[data-r="dialog"] [data-part="note-input"] { width: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; resize: none; font: inherit; letter-spacing: inherit; color: var(--ink); }
[data-r="dialog"] [data-part="title-input"] { font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); }
[data-r="dialog"] [data-part="note-input"] { min-height: 76px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
[data-r="dialog"] [data-part="title-input"]::placeholder,
[data-r="dialog"] [data-part="note-input"]::placeholder { color: var(--ink-3); opacity: 1; }
[data-r="dialog"] [data-part="properties"] { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 16px 12px; }
[data-r="dialog"][data-kind="composer"] > [data-part="footer"] { padding: 0 12px 12px 16px; gap: 16px; }
[data-r="sheet"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); --origin: 100% 50%; position: fixed; z-index: var(--z-dialog); top: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; width: min(420px, calc(100vw - 16px)); border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e3); color: var(--ink-2); overflow: hidden; }
[data-r="sheet"]:modal { left: auto; margin: 0; height: auto; }
[data-r="sheet"][data-static] { position: relative; top: auto; right: auto; bottom: auto; height: 420px; z-index: auto; }
[data-r="sheet"] > [data-part="header"] { display: flex; align-items: center; gap: 8px; height: 44px; flex: none; padding: 0 8px 0 16px; border-bottom: var(--px) solid var(--line-3); }
[data-r="sheet"] > [data-part="header"] > [data-part="title"] { flex: 1; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="sheet"] > [data-part="body"] { flex: 1; padding: 16px; overflow: auto; }
[data-r="sheet"] > [data-part="body"] > [data-r="properties"] { padding: 0; }
[data-r="sheet"] > [data-part="footer"] { display: flex; justify-content: flex-end; gap: 8px; flex: none; padding: 12px; border-top: var(--px) solid var(--line-3); }
}

/* ═══ 44-palette.css ═══ */
@layer components {
[data-r="palette"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); position: relative; display: flex; flex-direction: column; width: min(720px, calc(100vw - 32px)); max-height: min(480px, 72dvh); border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e3); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); overflow: hidden; --origin: 50% 50%; }
[data-r="palette"]:modal { position: fixed; inset: 13vh 0 auto; margin: 0 auto; }
dialog[data-r="palette"]:not([open]) { display: none; }
[data-r="palette"] > [data-part="input"] { display: flex; align-items: center; gap: 10px; flex: none; height: 52px; padding: 0 16px 0 18px; }
[data-r="palette"] > [data-part="input"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); color: var(--ink-3); }
[data-r="palette"] > [data-part="input"] > input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-450); color: var(--ink); }
[data-r="palette"] > [data-part="input"] > input::placeholder { color: var(--ink-3); opacity: 1; }
[data-r="palette"] > [data-part="scopes"] { flex: none; padding: 0 12px 10px 14px; border-bottom: var(--px) solid var(--line-3); gap: 4px; }
[data-r="palette"] > [data-part="list"] { flex: 1; min-height: 0; padding: var(--inset); overflow: hidden auto; overscroll-behavior: contain; }
[data-r="palette"] > [data-part="list"] > [data-r="menu-group-label"] { padding: 0 12px; height: 30px; }
[data-r="palette"] > [data-part="footer"] { display: flex; align-items: center; gap: 16px; flex: none; height: 36px; padding: 0 12px; border-top: var(--px) solid var(--line-3); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="palette"] > [data-part="footer"] > span { display: inline-flex; align-items: center; gap: 6px; }
[data-r="palette-item"] { display: flex; align-items: center; gap: 10px; height: var(--row-40); padding: 0 12px; border-radius: var(--r-row); color: var(--ink-2); white-space: nowrap; }
[data-r="palette-item"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); color: var(--ink-3); }
[data-r="palette-item"] > [data-part="label"] { color: var(--ink); font-weight: var(--fw-500); overflow: hidden; text-overflow: ellipsis; }
[data-r="palette-item"] > [data-part="meta"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); }
[data-r="palette-item"] > [data-part="end"] { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--ink-3); }
[data-r="palette-item"] > [data-part="attention"] { width: 6px; height: 6px; border-radius: var(--r-round); background: var(--warning-dot); flex: none; }
[data-r="palette-item"][data-highlighted] { background: var(--raised-selected); }
[data-r="palette-item"][data-highlighted] > svg[data-icon] { color: var(--ink); }
[data-r="palette-item"][data-highlighted] > [data-part="meta"],
[data-r="palette-item"][data-highlighted] > [data-part="end"] { color: var(--ink-2); }
[data-r="palette"] > [data-part="input"] > [data-part="back"] { margin-left: -6px; margin-right: -4px; }
[data-r="palette"] > [data-part="input"] > [data-part="back"]:not([hidden]) + svg[data-icon] { display: none; }
[data-r="palette"] > [data-part="input"] > [data-part="context"] { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 40%; height: var(--h-24); padding: 0 8px; border: .5px solid var(--line-4); border-radius: var(--r-mark); background-color: var(--plane); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-r="palette"] > [data-part="input"] > [data-part="context"]:has(> [data-r="status"], > svg[data-icon]) { padding-left: 5px; }
[data-r="palette"] > [data-part="input"] > [data-part="context"] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); color: var(--ink-2); }
[data-r="palette"] > [data-part="list"] > [data-part="page"] { display: flex; flex-direction: column; }
[data-r="palette"] > [data-part="list"] > [data-part="page"] > [data-r="menu-group-label"] { padding: 0 12px; height: 30px; }
[data-r="palette"] > [data-part="list"] [data-r="menu-empty"] { padding: 10px 12px; }
[data-r="palette-item"] > [data-part="end"] > [data-part="check"] { display: none; width: var(--icon-16); height: var(--icon-16); color: var(--accent-glyph); }
[data-r="palette-item"] > [data-part="end"] > [data-part="check"]::before { content: ""; display: block; width: 5px; height: 9.5px; margin: 1.75px 0 0 5.5px; /* allow: spacing · the drawn check */ border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(42deg); }
[data-r="palette-item"][aria-selected="true"] > [data-part="end"] > [data-part="check"] { display: block; }
[data-r="palette-item"] > [data-part="end"] > [data-part="opens"] { width: var(--icon-12); height: var(--icon-12); color: var(--ink-4); }
[data-r="palette-item"][data-highlighted] > [data-part="end"] > [data-part="opens"] { color: var(--ink-2); }
[data-r="palette-item"][data-tone="danger"] > [data-part="label"],
[data-r="palette-item"][data-tone="danger"] > svg[data-icon] { color: var(--danger-ink); }
[data-r="palette-item"][aria-disabled="true"] { pointer-events: none; }
[data-r="palette-item"][aria-disabled="true"] > :is([data-part="label"], svg[data-icon], [data-part="end"]) { color: var(--ink-disabled); }
[data-r="palette-item"][aria-disabled="true"] > [data-r="status"] { opacity: .45; }
[data-r="palette-item"] > [data-part="reason"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-disabled); }
}

/* ═══ 45-toast.css ═══ */
@layer components {
[data-r="toasts"] { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast); display: flex; flex-direction: column-reverse; gap: 8px; width: min(380px, calc(100vw - 32px)); }
[data-r="toasts"][data-static] { position: relative; right: auto; bottom: auto; z-index: auto; }
[data-r="toast"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 8px 8px 12px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); color: var(--ink); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); --origin: 50% 100%; }
[data-r="toast"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); color: var(--ink-3); }
[data-r="toast"][data-tone="success"] > svg[data-icon] { color: var(--success-dot); }
[data-r="toast"][data-tone="danger"] > svg[data-icon] { color: var(--danger-dot); }
[data-r="toast"] > [data-part="text"] { flex: 1; min-width: 0; }
[data-r="toast"] > [data-part="text"] > span { display: block; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="toast"][data-state="from"] { opacity: 0; transform: translateY(6px) scale(var(--scale-from)); }
[data-r="banner"] { --glyph: var(--ink-3); display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 6px 6px 12px; border-radius: var(--r-contain); background: var(--plane); box-shadow: inset 0 0 0 var(--px) var(--line-3); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); }
[data-r="banner"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); color: var(--glyph); }
[data-r="banner"] > [data-part="text"] { flex: 1; min-width: 0; padding: 4px 0; }
[data-r="banner"] > [data-part="text"] > b { font-weight: var(--fw-550); color: var(--ink); }
[data-r="banner"][data-tone="info"] { --glyph: var(--info-dot); }
[data-r="banner"][data-tone="warning"] { --glyph: var(--warning-dot); }
[data-r="banner"][data-tone="danger"] { --glyph: var(--danger-dot); }
[data-r="banner"][data-tone="success"] { --glyph: var(--success-dot); }
}

/* ═══ 50-shell.css ═══ */
@layer components {
[data-r="shell"] { display: grid; grid-template-columns: var(--sidebar-w, 240px) minmax(0, 1fr); height: 100%; min-height: 0; background: var(--ground); }
[data-r="shell"][data-sidebar="closed"] { grid-template-columns: 0 minmax(0, 1fr); }
[data-r="panel"] { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 8px 8px 8px 0; border-radius: var(--r-contain); background: var(--paper); box-shadow: 0 0 0 var(--px) var(--line-2); overflow: hidden; }
[data-r="panel"] > [data-part="scroll"] { flex: 1; min-height: 0; overflow: auto; }
[data-r="panel"][data-split] { flex-direction: row; }
[data-r="panel"] > [data-part="side"] { flex: none; width: 300px; border-left: var(--px) solid var(--line-2); overflow: auto; }
[data-r="sidebar"] { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 8px; background: var(--ground); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); user-select: none; overflow: hidden auto; }
[data-r="sidebar"] > [data-part="head"] { display: flex; align-items: center; gap: 4px; height: var(--h-32); margin-bottom: 8px; padding-left: 6px; }
[data-r="sidebar"] > [data-part="head"] > [data-part="workspace"] { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: var(--h-28); padding: 0 6px; margin-left: -6px; border-radius: var(--r-row); font-weight: var(--fw-550); color: var(--ink); transition: background-color var(--state-out); }
@media (hover: hover) {
  [data-r="sidebar"] > [data-part="head"] > [data-part="workspace"]:hover { background: var(--plane-hover); transition-duration: 0s; }
}
[data-r="sidebar"] > [data-part="head"] > [data-part="workspace"][data-force~="hover"] { background: var(--plane-hover); transition-duration: 0s; }
[data-r="sidebar"] > [data-part="head"] > [data-part="workspace"] > [data-part="mark"] { display: flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: var(--r-key); background: var(--ink); color: var(--paper); }
[data-r="sidebar"] > [data-part="head"] > [data-part="workspace"] > [data-part="mark"] > svg { width: 13px; height: auto; }
[data-r="sidebar"] > [data-part="foot"] { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 1px; }
[data-r="sidebar-item"] { display: flex; align-items: center; gap: 8px; flex: none; height: var(--row-28); padding: 0 8px; border-radius: var(--r-row); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-500); white-space: nowrap; transition: background-color var(--state-out), color var(--state-out); }
[data-r="sidebar-item"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); color: var(--ink-2); }
[data-r="sidebar-item"] > [data-part="label"] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-r="sidebar-item"] > [data-part="count"] { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-2); font-variant-numeric: tabular-nums; }
[data-r="sidebar-item"] > [data-r="dot"] { background: var(--ink-2); }
@media (hover: hover) {
  [data-r="sidebar-item"]:hover { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="sidebar-item"][data-force~="hover"] { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="sidebar-item"]:hover > svg[data-icon] { color: var(--ink); }
}
[data-r="sidebar-item"][data-force~="hover"] > svg[data-icon] { color: var(--ink); }
[data-r="sidebar-item"][aria-current="page"] { background: var(--plane-selected); color: var(--ink); }
@media (hover: hover) {
  [data-r="sidebar-item"][aria-current="page"]:hover { background: var(--plane-selected); color: var(--ink); }
}
[data-r="sidebar-item"][aria-current="page"][data-force~="hover"] { background: var(--plane-selected); color: var(--ink); }
[data-r="sidebar-item"][aria-current="page"] > svg[data-icon] { color: var(--ink); }
[data-r="sidebar-item"][data-depth="1"] { padding-left: 32px; }
[data-r="sidebar-section"] { display: flex; align-items: center; gap: 4px; flex: none; height: var(--row-28); margin-top: 12px; padding: 0 8px; border-radius: var(--r-row); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="sidebar-section"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); opacity: 0; }
@media (hover: hover) {
  [data-r="sidebar-section"]:hover > svg[data-icon] { opacity: 1; }
}
[data-r="sidebar-section"][data-force~="hover"] > svg[data-icon] { opacity: 1; }
[data-r="sidebar-section"][aria-expanded="false"] > svg[data-icon] { transform: rotate(-90deg); }
[data-r="page-header"] { display: flex; flex-direction: column; flex: none; }
[data-r="page-header"] > [data-part="bar"] { display: flex; align-items: center; gap: 8px; min-width: 0; height: 44px; padding: 0 12px 0 16px; }
[data-r="page-header"] > [data-part="bar"]:first-child { border-bottom: var(--px) solid var(--line-2); }
[data-r="page-header"] > [data-part="bar"] > [data-part="title"] { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-r="page-header"] > [data-part="bar"] > [data-part="spacer"] { flex: 1; }
[data-r="page-header"] > [data-part="bar"] > [data-part="actions"] { display: flex; align-items: center; gap: 6px; flex: none; }
[data-r="breadcrumbs"] { display: flex; align-items: center; gap: 2px; min-width: 0; font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="breadcrumbs"] > [data-r="button"] { --pad: 8px; font-size: var(--fs-13); font-weight: var(--fw-450); color: var(--ink-2); }
[data-r="breadcrumbs"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); color: var(--ink-4); flex: none; }
[data-r="breadcrumbs"] > [aria-current="page"] { padding: 0 8px; font-weight: var(--fw-550); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-r="filter-bar"] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 40px; padding: 6px 12px 6px 16px; border-bottom: var(--px) solid var(--line-1); }
[data-r="properties"] { display: flex; flex-direction: column; gap: 20px; padding: 16px 12px 16px 16px; }
[data-r="properties"] > [data-part="section"] { display: flex; flex-direction: column; gap: 2px; }
[data-r="properties"] > [data-part="section"] > [data-part="title"] { height: var(--row-28); display: flex; align-items: center; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="property"] { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; min-height: var(--row-32); gap: 8px; }
[data-r="property"] > [data-part="label"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-r="property"] > [data-r="button"] { justify-self: start; max-width: 100%; --pad: 6px; --pad-icon: 6px; font-size: var(--fs-13); font-weight: var(--fw-450); color: var(--ink); }
[data-r="dock"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px 0 14px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 1px var(--line-4), var(--dock-shadow); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); }
[data-r="dock"] > [data-part="count"] { font-weight: var(--fw-550); margin-right: 6px; font-variant-numeric: tabular-nums; }
[data-r="shell"][data-resizable] { position: relative; display: block; overflow: hidden; }
[data-r="shell"][data-resizable] > [data-r="sidebar"] { position: absolute; left: 0; top: 0; bottom: 0; width: var(--sidebar-w, 220px); }
[data-r="shell"][data-resizable] > [data-r="sidebar"] > * { min-width: 184px; }
[data-r="shell"][data-resizable] > [data-r="panel"] { position: absolute; top: 0; bottom: 0; left: var(--paper-l, 220px); width: var(--paper-w, 480px); }
[data-r="details"] { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-2); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); overflow: hidden; transition: box-shadow var(--state-out) ease-out; }
[data-r="details"][data-over] { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e3); transition: box-shadow var(--state-out) ease-in; }
[data-r="shell"][data-resizable] > [data-r="details"] { position: absolute; z-index: 1; top: 8px; bottom: 8px; right: 8px; width: calc(var(--details-w, 300px) - 8px); }
[data-r="details"] > [data-part="head"] { display: flex; align-items: center; gap: 4px; flex: none; height: var(--row-44); padding: 0 8px 0 16px; border-bottom: var(--px) solid var(--line-1); }
[data-r="details"] > [data-part="head"] > b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-550); color: var(--ink); }
[data-r="details"] > [data-part="body"] { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px; }
[data-r="shell"][data-resizable] > :is([data-part="edge"], [data-part="seam"]) { position: absolute; z-index: 2; width: 10px; cursor: ew-resize; touch-action: none; outline: none; }
[data-r="shell"][data-resizable] > [data-part="edge"] { top: 0; bottom: 0; left: calc(var(--sidebar-w, 220px) - 5px); }
[data-r="shell"][data-resizable] > [data-part="seam"] { top: 8px; bottom: 8px; right: calc(var(--details-w, 300px) - 5px); }
[data-r="shell"][data-resizable] > :is([data-part="edge"], [data-part="seam"])::after { content: ""; position: absolute; left: 4.5px; top: 12px; bottom: 12px; width: 1px; background: transparent; transition: background-color var(--state-out); }
@media (hover: hover) {
  [data-r="shell"][data-resizable] > :is([data-part="edge"], [data-part="seam"]):hover::after { background: var(--line-5); transition-duration: 0s; }
}
[data-r="shell"][data-resizable] > :is([data-part="edge"], [data-part="seam"])[data-force~="hover"]::after { background: var(--line-5); transition-duration: 0s; }
[data-r="shell"][data-resizable] > :is([data-part="edge"], [data-part="seam"]):focus-visible::after { background: var(--accent); transition-duration: 0s; }
[data-r="shell"][data-resizable] > :is([data-part="edge"], [data-part="seam"])[data-force~="focus"]::after { background: var(--accent); transition-duration: 0s; }
[data-r="shell"][data-resizable] [data-part="info"] { margin: 12px 0 0; padding: 0 20px; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); font-variant-numeric: tabular-nums; }
}

/* ═══ 51-disclosure.css ═══ */
@layer components {
[data-r="accordion"] { display: flex; flex-direction: column; }
[data-r="accordion"] > [data-part="item"] + [data-part="item"] { border-top: var(--px) solid var(--line-1); }
[data-r="accordion"] [data-part="header"] { display: flex; align-items: center; gap: 8px; width: 100%; height: var(--row-40); padding: 0 8px; border-radius: var(--r-row); text-align: left; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-500); color: var(--ink); transition: background-color var(--state-out); }
@media (hover: hover) {
  [data-r="accordion"] [data-part="header"]:hover { background: var(--plane-hover); transition-duration: 0s; }
}
[data-r="accordion"] [data-part="header"][data-force~="hover"] { background: var(--plane-hover); transition-duration: 0s; }
[data-r="accordion"] [data-part="header"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); color: var(--ink-3); }
[data-r="accordion"] [data-part="header"][aria-expanded="true"] > svg[data-icon]:first-child { transform: rotate(90deg); }
[data-r="accordion"] [data-part="header"] > [data-part="meta"] { margin-left: auto; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="accordion"] [data-part="panel"] { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--section) var(--ease-expo); }
[data-r="accordion"] [data-part="header"][aria-expanded="true"] + [data-part="panel"] { grid-template-rows: 1fr; }
[data-r="accordion"] [data-part="panel"] > div { overflow: hidden; }
[data-r="accordion"] [data-part="panel"] > div > [data-part="body"] { padding: 2px 8px 14px 28px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
[data-r="tree"] { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="tree-item"] { --d: 0; display: flex; align-items: center; gap: 6px; height: var(--row-28); padding: 0 8px 0 calc(6px + var(--d) * 16px); border-radius: var(--r-row); color: var(--ink-2); white-space: nowrap; transition: background-color var(--state-out), color var(--state-out); }
[data-r="tree-item"] > [data-part="caret"] { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: var(--ink-3); flex: none; }
[data-r="tree-item"] > [data-part="caret"] > svg[data-icon] { width: 10px; height: 10px; }
[data-r="tree-item"][aria-expanded="true"] > [data-part="caret"] > svg[data-icon] { transform: rotate(90deg); }
[data-r="tree-item"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); color: var(--ink-3); }
[data-r="tree-item"] > [data-part="label"] { overflow: hidden; text-overflow: ellipsis; }
[data-r="tree-item"] > [data-part="meta"] { margin-left: auto; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
@media (hover: hover) {
  [data-r="tree-item"]:hover { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="tree-item"][data-force~="hover"] { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
[data-r="tree-item"][aria-selected="true"] { background: var(--plane-selected); color: var(--ink); }
[data-r="tree-item"][aria-selected="true"] > [data-part="meta"] { color: var(--ink-2); }
[data-r="pagination"] { display: flex; align-items: center; gap: 4px; }
[data-r="pagination"] > [data-r="button"] { min-width: var(--h-28); --pad: 8px; font-variant-numeric: tabular-nums; }
[data-r="pagination"] > [data-part="gap"] { width: 20px; text-align: center; color: var(--ink-3); }
[data-r="pagination"] > [data-part="info"] { margin-left: 8px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
}

/* ═══ 52-scroll.css ═══ */
@layer components {
[data-r="scroll-area"] { position: relative; min-width: 0; min-height: 0; }
[data-r="scroll-area"] > [data-part="viewport"] { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
[data-r="scroll-area"] > [data-part="viewport"]::-webkit-scrollbar { display: none; }
[data-r="scroll-area"] > [data-part="viewport"]:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
[data-r="scroll-area"] > [data-part="viewport"][data-force~="focus"] { box-shadow: inset 0 0 0 1px var(--accent); }
[data-r="scroll-area"][data-fade][data-more] > [data-part="viewport"] { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
[data-r="scroll-area"] > [data-part="thumb"] { position: absolute; z-index: 2; top: 0; right: 2px; width: 4px; min-height: 28px; border-radius: var(--r-round); background: var(--a20); opacity: 0; touch-action: none; transition: opacity var(--state-out) ease-out, width var(--state-out) ease-out; }
[data-r="scroll-area"]:is([data-scrolling], [data-near]) > [data-part="thumb"],
[data-r="scroll-area"] > [data-part="thumb"][data-held] { opacity: 1; transition-duration: 0s; }
[data-r="scroll-area"][data-near] > [data-part="thumb"],
[data-r="scroll-area"] > [data-part="thumb"][data-held] { width: 6px; background: var(--a35); }
[data-r="scroll-area"][data-still] > [data-part="thumb"] { display: none; }
}

/* ═══ 53-frame.css ═══ */
@layer components {
[data-r="page-header"] [data-part="history"] { display: flex; align-items: center; gap: 2px; flex: none; margin-left: -5px; }
[data-r="breadcrumbs"] > [data-part="siblings"] { display: inline-flex; align-items: center; gap: 4px; min-width: 0; height: var(--h-24); padding: 0 6px 0 8px; border-radius: var(--r-press); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); white-space: nowrap; overflow: hidden; transition: background-color var(--state-out); }
[data-r="breadcrumbs"] > [data-part="siblings"] > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-r="breadcrumbs"] > [data-part="siblings"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); color: var(--ink-3); flex: none; }
[data-r="breadcrumbs"] > [data-part="siblings"][aria-expanded="true"] { background-color: var(--plane-hover); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="breadcrumbs"] > [data-part="siblings"]:hover { background-color: var(--plane-hover); transition-duration: 0s; }
}
[data-r="breadcrumbs"] > [data-part="siblings"][data-force~="hover"] { background-color: var(--plane-hover); transition-duration: 0s; }
[data-r="breadcrumbs"] > [data-part="siblings"][aria-expanded="true"] > svg[data-icon] { color: var(--ink-2); }
@media (hover: hover) {
  [data-r="breadcrumbs"] > [data-part="siblings"]:hover > svg[data-icon] { color: var(--ink-2); }
}
[data-r="breadcrumbs"] > [data-part="siblings"][data-force~="hover"] > svg[data-icon] { color: var(--ink-2); }
[data-r="page-header"] [data-r="button"][data-part="favorite"] > svg[data-icon] { transition: fill var(--state-out); }
[data-r="page-header"] [data-r="button"][data-part="favorite"][aria-pressed="true"] > svg[data-icon] { fill: currentColor; transition-duration: 0s; }
[data-r="page-header"] [data-r="button"][data-part="favorite"] + [data-r="button"][data-part="more"] { margin-left: -6px; }
[data-r="page-header"] [data-part="position"] { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="page-header"] [data-part="position"] > [data-part="of"] { padding: 0 6px; }
[data-r="page-header"] [data-part="position"]:last-child { margin-right: -4px; }
[data-r="shell"] > [data-part="work"] { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
[data-r="shell"] > [data-part="work"] > [data-r="panel"] { flex: 1 1 auto; margin-bottom: 0; }
[data-r="status-bar"] { --plane: var(--ground); --plane-hover: var(--ground-hover); --plane-selected: var(--ground-selected); --plane-selected-hover: var(--ground-selected-hover); --ring: var(--ring-ground); --ring-hover: var(--ring-ground-hover); --pill-rest: var(--ground); container: status / inline-size; align-self: stretch; display: flex; align-items: center; gap: 16px; flex: none; height: var(--status-bar); min-width: 0; padding: 0 8px 0 12px; margin-right: 8px; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-variant-numeric: tabular-nums; white-space: nowrap; user-select: none; -webkit-user-select: none; }
[data-r="status-bar"] > [data-part="spacer"] { flex: 1; min-width: 0; }
[data-r="status-bar"] > [data-part="control"] { display: inline-flex; align-items: center; gap: 8px; flex: none; }
[data-r="status-bar"] > [data-part="control"] > [data-part="label"] { color: var(--ink-3); }
[data-r="status-bar"] > [data-r="sync"] + [data-r="button"] { margin-left: -12px; }
@container status (width < 600px) {
  [data-r="status-bar"] > [data-part="control"] > [data-part="label"] { display: none; }
}
[data-r="sequence-hint"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); --origin: 50% 100%; position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 16px 12px 12px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); user-select: none; -webkit-user-select: none; }
[data-r="sequence-hint"][data-static] { position: relative; left: auto; bottom: auto; translate: none; z-index: auto; width: max-content; }
[data-r="sequence-hint"] > [data-part="lead"] { display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
[data-r="sequence-hint"] > [data-part="targets"] { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 4), auto); gap: 6px 24px; }
[data-r="sequence-hint"] [data-part="target"] { display: flex; align-items: center; gap: 8px; min-width: 0; height: 20px; color: var(--ink-2); white-space: nowrap; text-decoration: none; transition: color var(--state-out); }
[data-r="sequence-hint"] [data-part="target"] > [data-r="key"] { min-width: 16px; }
[data-r="sequence-hint"] [data-part="target"][data-chosen] { color: var(--ink); transition-duration: 0s; }
[data-r="sidebar"] > [data-part="head"] > [data-part="workspace"] > [data-part="caret"] { width: var(--icon-12); height: var(--icon-12); margin-left: -2px; color: var(--ink-3); flex: none; }
[data-r="sidebar"] > [data-part="head"] > [data-part="workspace"][aria-expanded="true"] { background: var(--plane-hover); }
[data-r="sidebar"] > [data-part="head"] > [data-part="workspace"] > span:not([data-part]) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-r="sidebar"] [data-part="section"] { display: flex; flex-direction: column; flex: none; }
[data-r="sidebar"] [data-part="heading"] { position: relative; display: flex; flex-direction: column; }
[data-r="sidebar"] [data-part="heading"] > [data-r="sidebar-section"] { text-align: left; transition: color var(--state-out); }
@media (hover: hover) {
  [data-r="sidebar"] [data-part="heading"] > [data-r="sidebar-section"]:hover { color: var(--ink-2); transition-duration: 0s; }
}
[data-r="sidebar"] [data-part="heading"] > [data-r="sidebar-section"][data-force~="hover"] { color: var(--ink-2); transition-duration: 0s; }
[data-r="sidebar"] [data-part="heading"] > [data-part="tools"] { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 2px; opacity: 0; transition: opacity var(--state-out); }
[data-r="sidebar"] [data-part="heading"]:focus-within > [data-part="tools"],
[data-r="sidebar"] [data-part="heading"] > [data-part="tools"]:has([aria-expanded="true"]) { opacity: 1; transition-duration: 0s; }
@media (hover: hover) {
  [data-r="sidebar"] [data-part="heading"]:hover > [data-part="tools"] { opacity: 1; transition-duration: 0s; }
}
[data-r="sidebar"] [data-part="heading"][data-force~="hover"] > [data-part="tools"] { opacity: 1; transition-duration: 0s; }
[data-r="sidebar"] [data-part="heading"] > [data-part="tools"] > [data-r="button"] { --plane-hover: var(--plane-selected); }
[data-r="sidebar"] [data-part="group"] { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--section) var(--ease-expo); }
[data-r="sidebar"] [data-part="group"] > * { display: flex; flex-direction: column; gap: 1px; min-width: 0; min-height: 0; overflow: clip; overflow-clip-margin: 2px; }
[data-r="sidebar"] [data-part="heading"]:has(> [aria-expanded="false"]) + [data-part="group"] { grid-template-rows: 0fr; }
[data-r="sidebar"] [data-part="heading"]:has(> [aria-expanded="false"]) + [data-part="group"] > * { visibility: hidden; transition: visibility 0s linear var(--section); }
[data-r="sidebar-item"][data-keep="off"],
[data-r="sidebar-item"][data-keep="active"]:not([aria-current="page"]) { display: none; }
[data-r="sidebar-item"]:where([data-stale]),
[data-r="sidebar-item"]:where([data-stale]) > svg[data-icon] { color: var(--ink-3); }
[data-r="sidebar-item"] > [data-part="age"] { flex: none; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  [data-r="sidebar-item"]:is(:hover, [aria-current="page"], [data-highlighted]) > [data-part="age"] { color: var(--ink-2); }
}
[data-r="sidebar-item"]:is([data-force~="hover"], [aria-current="page"], [data-highlighted]) > [data-part="age"] { color: var(--ink-2); }
[data-r="favorites"] { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-r="favorites"] > [data-r="sidebar-item"] { -webkit-user-drag: none; }
[data-r="favorites"][data-grab] { cursor: grab; }
[data-r="sidebar-item"][data-kind="folder"] { width: 100%; text-align: left; }
[data-r="sidebar-item"][data-kind="folder"] > [data-part="caret"] { width: var(--icon-12); height: var(--icon-12); margin-left: -4px; flex: none; }
[data-r="sidebar-item"][data-kind="folder"][aria-expanded="false"] > [data-part="caret"] { transform: rotate(-90deg); }
[data-r="sidebar-item"][data-kind="folder"][aria-expanded="true"] > [data-part="count"] { display: none; }
[data-r="favorites"] > [data-r="sidebar-item"][data-over] { background: var(--plane-selected); color: var(--ink); }
[data-r="favorites"] > [data-r="sidebar-item"][data-over] > svg[data-icon] { color: var(--ink); }
[data-r="favorites"] > [data-part="slot"] { flex: none; height: var(--row-28); border: var(--px) dashed var(--line-4); border-radius: var(--r-row); }
[data-r="favorites"] > [data-part="slot"][data-depth="1"] { margin-left: 24px; }
[data-r="favorites"] > [data-r="sidebar-item"]:is([data-lifted], [data-held]) { z-index: 3; background: var(--raised); color: var(--ink); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e3); }
[data-r="favorites"] > [data-r="sidebar-item"]:is([data-lifted], [data-held]) > svg[data-icon] { color: var(--ink); }
[data-r="favorites"] > [data-r="sidebar-item"][data-lifted] { position: absolute; pointer-events: none; }
[data-r="sidebar-item"] > input[data-part="name"] { flex: 1 1 0; width: 0; min-width: 0; height: var(--h-24); margin: 0 -4px; padding: 0 4px; border: 0; border-radius: var(--r-key); outline: none; background: var(--raised); box-shadow: var(--ring-inline); font: inherit; letter-spacing: inherit; color: var(--ink); }
[data-r="sidebar"] [data-part="account"] { display: flex; align-items: center; gap: 8px; flex: none; width: 100%; height: var(--row-32); padding: 0 8px 0 6px; border-radius: var(--r-row); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-500); color: var(--ink-2); text-align: left; transition: background-color var(--state-out), color var(--state-out); }
[data-r="sidebar"] [data-part="account"] > [data-part="label"] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="sidebar"] [data-part="account"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); color: var(--ink-3); flex: none; }
[data-r="sidebar"] [data-part="account"][aria-expanded="true"] { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="sidebar"] [data-part="account"]:hover { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="sidebar"] [data-part="account"][data-force~="hover"] { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="sidebar"] [data-part="account"]:is(:hover, [aria-expanded="true"]) > svg[data-icon] { color: var(--ink-2); }
}
[data-r="sidebar"] [data-part="account"]:is([data-force~="hover"], [aria-expanded="true"]) > svg[data-icon] { color: var(--ink-2); }
[data-r="sidebar-options"] { display: flex; flex-direction: column; gap: 20px; }
[data-r="sidebar-options"] > [data-part="group"] { display: flex; flex-direction: column; }
[data-r="sidebar-options"] > [data-part="group"] > h3 { margin-bottom: 4px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="sidebar-options"] [data-part="row"] { display: flex; align-items: center; gap: 10px; min-height: var(--row-36); border-bottom: var(--px) solid var(--line-1); color: var(--ink); }
[data-r="sidebar-options"] [data-part="row"]:last-child { border-bottom: 0; }
[data-r="sidebar-options"] [data-part="row"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); color: var(--ink-2); flex: none; }
[data-r="sidebar-options"] [data-part="row"] > [data-part="label"] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="sidebar-options"] [data-part="row"] > [data-part="meta"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="sidebar-options"] [data-part="row"] > [data-r="select"] { width: 136px; }
[data-r="sidebar-options"] [data-part="row"][data-off] > :is(svg[data-icon], [data-part="label"]) { color: var(--ink-3); }
[data-r="settings-shell"] { container: settings / inline-size; position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 100%; min-width: 0; min-height: 0; color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="settings-shell"] > [data-part="nav"] { display: flex; flex-direction: column; gap: 1px; min-width: 0; min-height: 0; padding: 12px 12px 16px 8px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; box-shadow: inset calc(-1 * var(--px)) 0 0 var(--line-2); }
[data-r="settings-shell"] > [data-part="nav"] > [data-part="title"] { display: none; }
[data-r="settings-shell"] > [data-part="nav"] > [data-r="search"] { flex: none; margin-bottom: 4px; }
[data-r="settings-shell"] > [data-part="nav"] > [data-r="sidebar-section"] { flex: none; }
[data-r="settings-shell"] > [data-part="nav"] > [data-r="sidebar-section"]:first-of-type { margin-top: 8px; }
[data-r="settings-shell"] > [data-part="nav"] > [data-part="empty"] { padding: 8px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="settings-shell"] > [data-part="nav"] [data-r="sidebar-item"] > mark { background: none; color: var(--ink); font-weight: var(--fw-550); }
[data-r="settings-shell"] > [data-part="content"] { min-width: 0; min-height: 0; }
[data-r="settings-shell"] [data-part="pane"] { display: flex; flex-direction: column; gap: 24px; max-width: 680px; margin: 0 auto; padding: 32px 32px 80px; }
[data-r="settings-shell"] [data-part="pane"] > header { display: flex; flex-direction: column; gap: 4px; }
[data-r="settings-shell"] [data-part="pane"] > header > h2 { font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
[data-r="settings-shell"] [data-part="pane"] > header > p { color: var(--ink-2); }
[data-r="settings-shell"] > [data-part="close"] { display: none; }
[data-r="settings-shell"][data-in="dialog"] { height: min(640px, calc(100dvh - 13vh - 32px)); }
[data-r="settings-shell"][data-in="dialog"] > [data-part="nav"] { --plane: var(--mat); --plane-hover: var(--mat-hover); --plane-selected: var(--mat-selected); --plane-selected-hover: var(--mat-selected-hover); --ring: var(--ring-mat); --ring-hover: var(--ring-mat-hover); --pill-rest: var(--raised); padding-top: 16px; background: var(--mat); }
[data-r="settings-shell"][data-in="dialog"] > [data-part="nav"] > [data-part="title"] { display: block; padding: 0 8px 12px; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
[data-r="settings-shell"][data-in="dialog"] > [data-part="content"] { --plane: var(--paper); --plane-hover: var(--paper-hover); --plane-selected: var(--paper-selected); --plane-selected-hover: var(--paper-selected-hover); --ring: var(--ring-paper); --ring-hover: var(--ring-paper-hover); --pill-rest: var(--raised); background: var(--paper); }
[data-r="settings-shell"][data-in="dialog"] [data-part="pane"] { padding-top: 28px; }
[data-r="settings-shell"][data-in="dialog"] > [data-part="close"] { display: inline-flex; position: absolute; top: 12px; right: 12px; z-index: 2; }
[data-r="dialog"]:has(> [data-r="settings-shell"]) { overflow: hidden; }
[data-r="panel"] > [data-r="settings-shell"] { flex: 1 1 auto; height: auto; }
@container settings (width < 600px) {
  [data-r="settings-shell"] [data-part="pane"] { padding: 24px 16px 64px; }
}
}

/* ═══ 54-templates.css ═══ */
@layer components {
[data-r="page"] { --side-w: var(--panel-peek); container: page / inline-size; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "header header" "main side" "bottom bottom"; flex: 1 1 auto; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="page"] > [data-part="header"] { grid-area: header; min-width: 0; }
[data-r="page"] > [data-part="main"] { grid-area: main; min-width: 0; min-height: 0; }
[data-r="page"] > [data-part="bottom"] { grid-area: bottom; min-width: 0; }
[data-r="page"] > :is([data-part="side"], [data-part="rail"]) { grid-area: side; position: relative; display: flex; flex-direction: column; align-items: flex-end; width: var(--side-w); min-width: 0; min-height: 0; overflow: hidden; box-shadow: inset var(--px) 0 0 var(--line-2); transition: width var(--section) var(--ease-expo); }
[data-r="page"] > :is([data-part="side"], [data-part="rail"]) > * { flex: 1 1 auto; width: var(--side-w); min-height: 0; }
[data-r="page"] > :is([data-part="side"], [data-part="rail"]) > [data-part="head"] { flex: none; }
[data-r="page"][data-side="closed"] > :is([data-part="side"], [data-part="rail"]) { width: 0; visibility: hidden; transition: width var(--section) var(--ease-expo), visibility 0s linear var(--section); }
[data-r="page"] > :is([data-part="side"], [data-part="rail"]) > [data-part="head"] { display: flex; align-items: center; gap: 4px; height: var(--row-44); padding: 0 8px 0 16px; border-bottom: var(--px) solid var(--line-1); font-weight: var(--fw-550); color: var(--ink); }
[data-r="page"] > :is([data-part="side"], [data-part="rail"]) > [data-part="head"] > [data-part="title"] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="page"][data-template="collection"] { --side-w: var(--panel-peek); }
[data-r="page"][data-template="detail"] { --side-w: var(--panel-props); }
[data-r="page"] > [data-part="main"] > [data-part="viewport"] > [data-part="column"] { margin: 0 auto; }
[data-r="page"][data-template="detail"] > [data-part="main"] > [data-part="viewport"] > [data-part="column"] { display: flex; flex-direction: column; gap: 28px; max-width: calc(var(--col-prose) + 96px); padding: 40px 48px 96px; }
[data-r="page"][data-template="split"] { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "list header" "list main"; }
[data-r="page"] > [data-part="list"] { grid-area: list; display: flex; flex-direction: column; width: var(--panel-list); min-width: 0; min-height: 0; border-right: var(--px) solid var(--line-2); }
[data-r="page"] > [data-part="list"] > [data-part="head"] { display: flex; align-items: center; gap: 8px; flex: none; height: 44px; padding: 0 8px 0 16px; border-bottom: var(--px) solid var(--line-2); }
[data-r="page"] > [data-part="list"] > [data-part="head"] > [data-part="title"] { flex: 1; min-width: 0; font-weight: var(--fw-550); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-r="page"] > [data-part="list"] > [data-r="scroll-area"] { flex: 1 1 auto; }
[data-r="page"][data-template="split"] > [data-part="main"] > [data-part="viewport"] > [data-part="column"] { display: flex; flex-direction: column; gap: 24px; max-width: calc(var(--col-prose) + 64px); padding: 32px 32px 80px; }
[data-r="page"][data-template="split"] [data-part="up"] { display: none; }
[data-r="page"][data-template="document"] > [data-part="main"] > [data-part="viewport"] > [data-part="column"] { display: grid; grid-template-columns: minmax(0, 1fr) min(100%, var(--col-prose)) minmax(0, 1fr); column-gap: 32px; padding: 48px 24px 120px; }
[data-r="page"][data-template="document"] [data-part="column"] > [data-part="rail"] { grid-column: 1; justify-self: end; align-self: start; position: sticky; top: 48px; z-index: 2; max-width: 100%; }
[data-r="page"][data-template="document"] [data-part="column"] > [data-part="text"] { grid-column: 2; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
[data-r="page"][data-template="feed"] > [data-part="main"] > [data-part="viewport"] > [data-part="column"] { display: flex; flex-direction: column; gap: 4px; max-width: var(--col-feed); padding: 24px 24px 96px; }
[data-r="page"][data-template="feed"] [data-part="column"] > [data-part="composer"] { margin-bottom: 20px; }
[data-r="page"][data-template="chat"] > [data-part="main"] { height: auto; }
[data-r="page"][data-template="canvas"] { --side-w: var(--panel-inspector); }
[data-r="page"][data-template="canvas"] > [data-part="main"] { position: relative; overflow: hidden; }
[data-r="page"][data-template="explore"] { --side-w: var(--panel-inspector); }
[data-r="page"][data-template="explore"] > [data-part="rail"] { grid-area: side; }
[data-r="page"][data-template="explore"] > [data-part="main"] > [data-part="viewport"] > [data-part="column"] { display: flex; flex-direction: column; gap: 20px; padding: 24px 24px 80px; }
[data-r="page"] [data-part="slot"][data-slot] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 320px; padding: 24px; border: var(--px) dashed var(--line-4); border-radius: var(--r-contain); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); text-align: center; }
[data-r="page"] [data-part="slot"][data-slot] > b { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink-2); }
[data-r="page"][data-state="loading"]:not([data-skeleton]) > :is([data-part="main"], [data-part="side"], [data-part="rail"], [data-part="list"], [data-part="bottom"]) { visibility: hidden; }
[data-r="page"] [data-part="skeleton"] { display: flex; flex-direction: column; gap: 12px; }
[data-r="page"] [data-part="skeleton"] > [data-part="row"] { display: flex; align-items: center; gap: 12px; height: var(--row-40); padding: 0 20px; }
[data-r="page"] [data-part="skeleton"] > [data-part="row"] > [data-r="skeleton"] { flex: none; }
@container page (width < 720px) {
  [data-r="page"] > :is([data-part="side"], [data-part="rail"]) { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); grid-area: main; justify-self: end; z-index: 2; width: min(var(--side-w), calc(100% - 24px)); margin: 8px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e3); transition: opacity var(--opacity-in) linear, transform var(--scale-in) var(--ease-expo); }
  [data-r="page"] > :is([data-part="side"], [data-part="rail"]) > * { width: 100%; }
  [data-r="page"][data-side="closed"] > :is([data-part="side"], [data-part="rail"]) { width: min(var(--side-w), calc(100% - 24px)); opacity: 0; transform: translateX(8px); transition: opacity var(--opacity-out) ease-out, transform var(--opacity-out) ease-out, visibility 0s linear var(--opacity-out); }
  [data-r="page"][data-template="detail"] > [data-part="main"] > [data-part="viewport"] > [data-part="column"] { padding: 24px 16px 80px; }
  [data-r="page"][data-template="split"] > [data-part="main"] > [data-part="viewport"] > [data-part="column"] { padding: 24px 16px 80px; }
  [data-r="page"][data-template="feed"] > [data-part="main"] > [data-part="viewport"] > [data-part="column"] { padding: 16px 16px 80px; }
  [data-r="page"][data-template="explore"] > [data-part="main"] > [data-part="viewport"] > [data-part="column"] { padding: 16px 16px 80px; }
  [data-r="page"][data-template="split"] > [data-part="list"] { width: auto; border-right: 0; grid-column: 1 / -1; }
  [data-r="page"][data-template="split"]:not([data-view="list"]) > [data-part="list"],
  [data-r="page"][data-template="split"][data-view="list"] > :is([data-part="header"], [data-part="main"]) { display: none; }
  [data-r="page"][data-template="split"] [data-part="up"] { display: inline-flex; }
  [data-r="page"][data-template="split"] > :is([data-part="header"], [data-part="main"]) { grid-column: 1 / -1; }
}
@container page (width < 840px) {
  [data-r="page"][data-template="document"] > [data-part="main"] > [data-part="viewport"] > [data-part="column"] { grid-template-columns: minmax(0, 1fr); padding: 32px 24px 96px; }
  [data-r="page"][data-template="document"] [data-part="column"] > [data-part="rail"] { display: none; }
  [data-r="page"][data-template="document"] [data-part="column"] > [data-part="text"] { grid-column: 1; width: min(100%, var(--col-prose)); justify-self: center; }
}
[data-r="page-state"] { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 48px 24px 64px; text-align: center; color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="page-state"] > svg[data-icon] { width: var(--icon-20); height: var(--icon-20); margin-bottom: 14px; color: var(--ink-3); }
[data-r="page-state"] > [data-part="art"] { display: flex; justify-content: center; width: 140px; margin-bottom: 16px; color: var(--tomrum-hand); }
[data-r="page-state"] > [data-part="art"] > svg { width: 100%; height: auto; overflow: visible; }
[data-r="page-state"] > [data-part="title"] { max-width: 46ch; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); text-wrap: balance; }
[data-r="page-state"] > [data-part="text"] { max-width: 46ch; margin-top: 6px; color: var(--ink-2); text-wrap: pretty; }
[data-r="page-state"] > [data-part="again"] { margin-top: 4px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="page-state"] > [data-part="actions"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; }
[data-r="page-state"] > [data-part="details"] { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(100%, 520px); margin-top: 16px; }
[data-r="page-state"] > [data-part="details"] > summary { list-style: none; }
[data-r="page-state"] > [data-part="details"] > summary::-webkit-details-marker { display: none; }
[data-r="page-state"] > [data-part="details"] > summary > svg[data-icon]:first-child { transition: none; }
[data-r="page-state"] > [data-part="details"][open] > summary > svg[data-icon]:first-child { transform: rotate(90deg); }
[data-r="page-state"] > [data-part="details"] > [data-part="trace"] { align-self: stretch; max-height: 160px; margin: 0; padding: 10px 12px; overflow: auto; border-radius: var(--r-value); background: var(--well); font-family: var(--font); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; user-select: text; -webkit-user-select: text; }
[data-r="page-state"] > [data-part="lists"] { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 32px; margin-top: 24px; text-align: left; }
[data-r="page-state"] > [data-part="lists"] > section { display: flex; flex-direction: column; gap: 6px; }
[data-r="page-state"] > [data-part="lists"] > section > h3 { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="page-state"] > [data-part="lists"] > section > ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
[data-r="page-state"] > [data-part="lists"] > section > ul > li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
[data-r="page-state"] > [data-part="lists"] > section > ul > li > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); color: var(--ink-3); }
@container page (width < 520px) {
  [data-r="page-state"] > [data-part="lists"] { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
}

/* ═══ 55-query.css ═══ */
@layer components {
[data-r="query"] { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 40px; padding: 8px 8px 8px 16px; border-bottom: var(--px) solid var(--line-1); color: var(--ink); font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="query"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); flex: none; margin-right: 4px; color: var(--ink-3); }
[data-r="query"] > input { flex: 1 1 160px; min-width: 120px; height: var(--h-24); margin: 0; padding: 0; border: 0; outline: 0; background: transparent; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); color: var(--ink); }
[data-r="query"] > input::placeholder { color: var(--ink-3); opacity: 1; }
[data-r="query"] > [data-part="end"] { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
[data-r="query"] > [data-part="end"] > [data-part="count"] { padding: 0 6px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="query"] > script { display: none; }
[data-r="query"] > [data-r="filter"] { max-width: 100%; }
[data-r="query"] > [data-r="filter"] > [data-part="value"] { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
[data-r="query"] > [data-r="filter"] > [data-part="value"] > span { overflow: hidden; text-overflow: ellipsis; }
[data-r="query"] > [data-r="filter"][data-armed] { box-shadow: 0 0 0 var(--px) var(--ink-2); }
[data-r="query"] > [data-r="filter"][data-armed] > [data-part="remove"] { background-color: var(--plane-hover); color: var(--ink); }
[data-r="query"][data-text] > [data-r="filter"] { display: none; }
[data-r="query"][data-text] > input { height: var(--h-24); margin: 0 -8px; padding: 0 8px; border-radius: var(--r-value); background: var(--raised); box-shadow: var(--ring-inline); font-size: var(--fs-12); line-height: var(--lh-12); }
[data-r="menu"][data-part="suggest"] { width: 340px; }
[data-r="menu"][data-part="suggest"] [data-r="menu-item"] > [data-part="end"] { font-variant-numeric: tabular-nums; }
[data-r="menu"][data-part="suggest"] [data-r="menu-item"] > [data-part="label"] > b { font-weight: var(--fw-500); color: var(--ink); }
[data-r="menu"] [data-r="menu-item"] > [data-part="end"] > [data-part="n"] { min-width: 16px; text-align: right; font-variant-numeric: tabular-nums; }
[data-r="menu"] [data-r="menu-item"][data-zero] > [data-part="label"] { color: var(--ink-3); }
[data-r="menu"] [data-r="menu-item"][data-zero][data-highlighted] > [data-part="label"] { color: var(--ink-2); }
[data-r="menu"] [data-r="menu-item"][data-zero] > :is([data-r="status"], [data-r="dot"], svg[data-icon]) { opacity: .5; }
[data-r="condition"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); display: flex; flex-direction: column; width: 300px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); outline: none; }
[data-r="condition"][data-level="2"] { box-shadow: 0 0 0 var(--px) var(--line-3), var(--e3); }
[data-r="condition"] > [data-part="head"] { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-bottom: var(--px) solid var(--line-3); font-weight: var(--fw-500); color: var(--ink); }
[data-r="condition"] > [data-part="head"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); color: var(--ink-2); }
[data-r="condition"] > [data-part="head"] > [data-part="unit"] { margin-left: auto; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="condition"] > [data-part="row"] { display: flex; align-items: center; gap: 6px; padding: 12px 12px 0; }
[data-r="condition"] > [data-part="row"] > [data-r="select"] { flex: none; min-width: 112px; }
[data-r="condition"] > [data-part="row"] > [data-r="field"] { flex: 1; min-width: 0; }
[data-r="condition"] > [data-part="row"] > [data-part="and"] { flex: none; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="condition"] > [data-part="row"] > [data-part="none"] { flex: 1; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="condition"] > [data-part="distribution"] { display: flex; align-items: flex-end; gap: 2px; height: 48px; margin: 16px 12px 0; }
[data-r="condition"] > [data-part="distribution"] > [data-part="bar"] { position: relative; flex: 1; min-width: 0; height: calc(var(--v, 0) * 100%); min-height: var(--px); border-radius: var(--r-key) var(--r-key) 0 0; background: var(--a10); overflow: hidden; }
[data-r="condition"] > [data-part="distribution"] > [data-part="bar"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--k, 0) * 100%); background: var(--ink-2); }
[data-r="condition"] > [data-part="axis"] { display: flex; justify-content: space-between; gap: 8px; margin: 4px 12px 0; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="condition"] > [data-part="axis"] > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="condition"] > [data-part="foot"] { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 8px 8px 12px; border-top: var(--px) solid var(--line-3); }
[data-r="condition"] > [data-part="foot"] > [data-part="keeps"] { flex: 1; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); font-variant-numeric: tabular-nums; }
[data-r="condition"] > [data-part="foot"] > [data-part="keeps"] > b { font-weight: var(--fw-500); color: var(--ink); }
}

/* ═══ 56-side-panel.css ═══ */
@layer components {
[data-r="side-panel"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); position: relative; display: flex; flex-direction: column; flex: none; width: var(--panel-peek); min-width: 0; min-height: 0; margin: 8px 8px 8px 0; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-2); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); overflow: hidden; transition: box-shadow var(--state-out) ease-out; }
[data-r="side-panel"]:is([data-variant="inspector"], [data-variant="control-rail"]) { width: var(--panel-inspector); }
@container page (width >= 720px) {
  [data-r="page"] > [data-r="side-panel"]:is([data-part="side"], [data-part="rail"]):not([data-over]) { margin: 0; border-radius: 0; }
  [data-r="page"] > :is([data-part="side"], [data-part="rail"]) > [data-r="side-panel"]:not([data-over]) { margin: 0; border-radius: 0; box-shadow: none; }
}
:where(:has(> [data-r="side-panel"][data-over])) { position: relative; }
[data-r="side-panel"][data-over] { position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; max-width: calc(100% - 24px); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e3); transition: box-shadow var(--state-out) ease-in; }
[data-r="side-panel"] > [data-part="head"] { display: flex; align-items: center; gap: 4px; flex: none; height: var(--row-44); padding: 0 8px 0 16px; border-bottom: var(--px) solid var(--line-1); }
[data-r="side-panel"] > [data-part="head"] > [data-part="title"] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="side-panel"] > [data-part="head"] > [data-part="actions"] { display: flex; align-items: center; gap: 4px; flex: none; }
[data-r="side-panel"] > [data-part="body"] { display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; padding: 12px 16px 16px; overflow: hidden auto; overscroll-behavior: contain; }
[data-r="side-panel"] [data-part="record"] { display: flex; flex-direction: column; gap: 4px; }
[data-r="side-panel"] [data-part="record"] > [data-part="name"] { font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
[data-r="side-panel"] [data-part="record"] > [data-part="meta"] { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="side-panel"] [data-part="section"] { display: flex; flex-direction: column; min-width: 0; }
[data-r="side-panel"] [data-part="section-head"] { display: flex; align-items: center; gap: 4px; height: var(--row-28); margin: 0 -6px 2px; }
[data-r="side-panel"] [data-part="section-head"] > [data-part="label"] { display: inline-flex; align-items: center; gap: 4px; height: var(--h-24); padding: 0 6px; border-radius: var(--r-press); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-3); transition: background-color var(--state-out), color var(--state-out); }
[data-r="side-panel"] [data-part="section-head"] > [data-part="label"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); opacity: 0; transition: opacity var(--state-out), transform var(--state-out); }
@media (hover: hover) {
  [data-r="side-panel"] [data-part="section-head"] > [data-part="label"]:hover { background: var(--plane-hover); color: var(--ink-2); transition-duration: 0s; }
}
[data-r="side-panel"] [data-part="section-head"] > [data-part="label"][data-force~="hover"] { background: var(--plane-hover); color: var(--ink-2); transition-duration: 0s; }
[data-r="side-panel"] [data-part="section-head"] > [data-part="label"][aria-expanded="false"] > svg[data-icon] { opacity: 1; transition-duration: 0s; }
@media (hover: hover) {
  [data-r="side-panel"] [data-part="section-head"] > [data-part="label"]:is(:hover, :focus-visible) > svg[data-icon] { opacity: 1; transition-duration: 0s; }
}
[data-r="side-panel"] [data-part="section-head"] > [data-part="label"]:is([data-force~="hover"], :focus-visible) > svg[data-icon] { opacity: 1; transition-duration: 0s; }
[data-r="side-panel"] [data-part="section-head"] > [data-part="label"][aria-expanded="false"] > svg[data-icon] { transform: rotate(-90deg); }
[data-r="side-panel"] [data-part="section-head"] > [data-r="button"] { margin-left: auto; }
[data-r="side-panel"] [data-part="section"]:has(> [data-part="section-head"] > [data-part="label"][aria-expanded="false"]) > [data-part="content"] { display: none; }
[data-r="side-panel"] [data-part="content"] > [data-r="properties"] { padding: 0; gap: 0; }
[data-r="side-panel"] [data-part="content"] [data-r="property"] > [data-r="button"] { max-width: 100%; }
[data-r="side-panel"] [data-part="numbers"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; font-size: var(--fs-12); line-height: var(--lh-12); font-variant-numeric: tabular-nums; }
[data-r="side-panel"] [data-part="numbers"] > [data-part="line"] { display: contents; }
[data-r="side-panel"] [data-part="numbers"] > [data-part="line"] > span { display: flex; align-items: center; gap: 6px; min-height: var(--row-28); color: var(--ink-3); }
[data-r="side-panel"] [data-part="numbers"] > [data-part="line"] > b { font-weight: var(--fw-500); color: var(--ink); text-align: right; white-space: nowrap; }
[data-r="side-panel"] [data-part="numbers"] > [data-part="line"] > b [data-part="unit"] { font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="side-panel"] [data-part="numbers"] > [data-part="line"][data-empty] > b { font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="side-panel"] [data-part="numbers"]:not([data-show-empty]) > [data-part="line"][data-empty] { display: none; }
[data-r="side-panel"] [data-part="fields"] { display: flex; flex-direction: column; gap: 4px; }
[data-r="side-panel"] [data-part="field-row"] { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; min-height: var(--row-32); }
[data-r="side-panel"] [data-part="field-row"] > [data-part="label"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-r="side-panel"] [data-part="field-row"] > :is([data-r="field"], [data-r="select"], [data-r="segmented"]) { min-width: 0; }
[data-r="side-panel"] [data-part="field-row"] > [data-part="pair"] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 0; }
[data-r="side-panel"] [data-part="control"] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
[data-r="side-panel"] [data-part="control"] + [data-part="control"] { margin-top: 10px; }
[data-r="side-panel"] [data-part="control"] > [data-part="label"] { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-2); }
[data-r="side-panel"] [data-part="control"] > [data-part="label"] > span { font-weight: var(--fw-450); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="side-panel"] [data-part="control"] > [data-part="switch-row"] { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--row-28); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
}

/* ═══ 60-list.css ═══ */
@layer components {
[data-r="list"] { display: flex; flex-direction: column; padding: 4px 0 8px; font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="list-row"] { --h: var(--row-44); position: relative; display: flex; align-items: center; gap: 10px; flex: none; height: var(--h); margin: 0 8px; padding: 0 12px; border-radius: var(--r-row); color: var(--ink-2); white-space: nowrap; transition: background-color var(--state-out), color var(--state-out); }
[data-r="list-row"][data-size="32"] { --h: var(--row-32); gap: 8px; }
[data-r="list-row"][data-size="36"] { --h: var(--row-36); }
[data-r="list-row"][data-size="40"] { --h: var(--row-40); }
[data-r="list-row"][data-size="52"] { --h: var(--row-52); }
[data-r="list-row"][data-size="60"] { --h: var(--row-60); }
[data-r="list-row"] > [data-part="title"] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-500); color: var(--ink); }
[data-r="list-row"] > [data-part="id"] { flex: none; min-width: 52px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="list-row"] > [data-part="meta"] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); }
[data-r="list-row"] > [data-part="end"] { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; padding-left: 12px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="list-row"] > [data-part="end"] > time { min-width: 72px; text-align: right; }
[data-r="list-row"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); color: var(--ink-3); }
[data-r="list-row"] > [data-part="stack"] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-r="list-row"] > [data-part="stack"] > :first-child { font-weight: var(--fw-500); color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
[data-r="list-row"] > [data-part="stack"] > :last-child { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
[data-r="list-row"] > [data-part="select"] { display: flex; align-items: center; justify-content: center; width: 14px; margin-left: -4px; margin-right: -4px; opacity: 0; transition: opacity var(--state-out); }
[data-r="list-row"][aria-selected="true"] > [data-part="select"],
[data-r="list"][data-selecting] [data-r="list-row"] > [data-part="select"] { opacity: 1; transition-duration: 0s; }
@media (hover: hover) {
  [data-r="list-row"]:hover > [data-part="select"] { opacity: 1; transition-duration: 0s; }
}
[data-r="list-row"][data-force~="hover"] > [data-part="select"] { opacity: 1; transition-duration: 0s; }
[data-r="list-row"][data-highlighted] { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="list-row"]:hover { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="list-row"][data-force~="hover"] { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
[data-r="list-row"][aria-selected="true"] { background: var(--plane-selected); }
@media (hover: hover) {
  [data-r="list-row"][aria-selected="true"]:hover { background: var(--plane-selected-hover); }
}
[data-r="list-row"][aria-selected="true"][data-force~="hover"] { background: var(--plane-selected-hover); }
[data-r="list-row"][aria-selected="true"] > :is([data-part="meta"], [data-part="id"], [data-part="end"]),
[data-r="list-row"][aria-selected="true"] > [data-part="stack"] > :last-child { color: var(--ink-2); }
[data-r="list-group"] { --plane: var(--mat); --plane-hover: var(--mat-hover); --plane-selected: var(--mat-selected); --plane-selected-hover: var(--mat-selected-hover); --ring: var(--ring-mat); --ring-hover: var(--ring-mat-hover); --pill-rest: var(--mat); position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; flex: none; height: var(--row-36); margin: 6px 8px 2px; padding: 0 12px; border-radius: var(--r-row); background: var(--mat); box-shadow: inset 0 0 0 var(--px) var(--line-1); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-500); color: var(--ink); }
[data-r="list-group"] > [data-part="count"] { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="list-group"] > [data-part="toggle"] { display: flex; color: var(--ink-3); }
[data-r="list-group"] > [data-part="toggle"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); }
[data-r="list-group"][aria-expanded="false"] > [data-part="toggle"] > svg[data-icon] { transform: rotate(-90deg); }
[data-r="list-group"] > [data-part="end"] { margin-left: auto; display: flex; gap: 4px; }
[data-r="list-header"] { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; height: var(--row-32); margin: 0 8px; padding: 0 12px; background: var(--plane); border-bottom: var(--px) solid var(--line-1); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="list-header"] > [data-part="select"] { display: flex; align-items: center; justify-content: center; width: 14px; margin-left: -4px; margin-right: -4px; }
[data-r="list-create"] { position: relative; display: flex; align-items: center; gap: 10px; flex: none; height: var(--row-32); margin: 0 8px; padding: 0 12px; border-radius: var(--r-row); color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); transition: background-color var(--state-out), color var(--state-out); }
[data-r="list-create"] > [data-part="start"] { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; height: 100%; margin: 0 -12px; padding: 0 12px 0 28px; border-radius: inherit; color: inherit; text-align: left; white-space: nowrap; }
[data-r="list-create"] > [data-part="start"] > svg[data-icon],
[data-r="list-create"] > [data-part="icon"] { width: var(--icon-14); height: var(--icon-14); margin: 0 1px; flex: none; }
[data-r="list-create"] > [data-part="icon"] { display: flex; align-items: center; justify-content: center; width: var(--icon-16); margin: 0 0 0 16px; }
[data-r="list-create"] > [data-part="start"] > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) {
  [data-r="list-create"]:not([data-editing]):hover { background: var(--plane-hover); color: var(--ink-2); transition-duration: 0s; }
}
[data-r="list-create"]:not([data-editing])[data-force~="hover"] { background: var(--plane-hover); color: var(--ink-2); transition-duration: 0s; }
[data-r="list-create"][data-editing] { color: var(--ink-2); }
[data-r="list-create"] > input { flex: 1; min-width: 0; height: var(--h-24); margin: 0 -8px; padding: 0 8px; border: 0; outline: 0; border-radius: var(--r-value); background: var(--raised); box-shadow: var(--ring-inline); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); color: var(--ink); }
[data-r="list-create"] > input::placeholder { color: var(--ink-3); opacity: 1; }
[data-r="aggregate"] { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; flex: none; height: var(--h-24); margin: 0 -6px; padding: 0 6px; border-radius: var(--r-press); color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color var(--state-out), color var(--state-out); }
[data-r="aggregate"] > [data-part="value"] { font-weight: var(--fw-500); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
[data-r="aggregate"] > [data-part="value"] > [data-part="unit"] { font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="aggregate"] > [data-part="value"][data-none] { font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="aggregate"]:has(> [data-part="value"][data-none]) > [data-part="kind"] { display: none; }
[data-r="aggregate"][aria-expanded="true"] { background: var(--plane-hover); color: var(--ink-2); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="aggregate"]:hover { background: var(--plane-hover); color: var(--ink-2); transition-duration: 0s; }
}
[data-r="aggregate"][data-force~="hover"] { background: var(--plane-hover); color: var(--ink-2); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="aggregate"]:is(:hover, [aria-expanded="true"]) > [data-part="value"] { color: var(--ink); }
}
[data-r="aggregate"]:is([data-force~="hover"], [aria-expanded="true"]) > [data-part="value"] { color: var(--ink); }
@media (hover: hover) {
  [data-r="aggregate"]:is(:hover, [aria-expanded="true"]) > [data-part="value"] > [data-part="unit"] { color: var(--ink-2); }
}
[data-r="aggregate"]:is([data-force~="hover"], [aria-expanded="true"]) > [data-part="value"] > [data-part="unit"] { color: var(--ink-2); }
[data-r="list"][data-mode="grid"] { --lead: 3; container: collection / inline-size; padding-top: 0; }
[data-r="list"][data-mode="grid"] :is([data-r="list-header"], [data-r="list-row"], [data-r="list-group"], [data-r="list-subgroup"], [data-r="list-create"], [data-r="list-total"]) { display: grid; grid-template-columns: var(--cols); column-gap: 10px; align-items: center; }
[data-r="list"][data-mode="grid"] :is([data-r="list-header"], [data-r="list-row"]) > [data-part="select"] { margin: 0; justify-self: center; }
[data-r="list"][data-mode="grid"] [data-r="list-row"] > * { min-width: 0; }
[data-r="list"][data-mode="grid"] [data-r="list-row"] > :is([data-r="status"], [data-r="provenance"], [data-r="avatar"], [data-r="dot"], svg[data-icon]) { justify-self: center; }
[data-r="list"][data-mode="grid"] [data-r="list-row"] > [data-col] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="list"][data-mode="grid"] [data-r="list-row"] > [data-col]:has(> [data-r="fact"], > [data-r="status"], > [data-r="avatar"], > svg[data-icon], > [data-r="dot"]) { display: flex; align-items: center; gap: 6px; }
[data-r="list"][data-mode="grid"] [data-col][data-num] { justify-self: end; text-align: right; font-variant-numeric: tabular-nums; }
[data-r="list"][data-mode="grid"] [data-r="list-row"] > [data-col] [data-part="unit"] { color: var(--ink-3); }
[data-r="list"][data-mode="grid"] [data-r="list-row"] > [data-col][data-empty] { color: var(--ink-3); }
[data-r="list"][data-mode="grid"] [data-r="list-row"][aria-selected="true"] > [data-col]:is([data-empty], [data-muted]),
[data-r="list"][data-mode="grid"] [data-r="list-row"][aria-selected="true"] > [data-col] [data-part="unit"] { color: var(--ink-2); }
[data-r="list"][data-mode="grid"] > [data-r="list-header"] { top: 0; }
[data-r="list-header"] > [data-col] { position: relative; display: flex; align-items: center; min-width: 0; height: 100%; }
[data-r="list-header"] > [data-col][data-num] { justify-content: flex-end; }
[data-r="list-header"] > [data-col] > [data-part="sort"] { display: inline-flex; align-items: center; gap: 4px; min-width: 0; height: var(--h-24); margin: 0 -6px; padding: 0 6px; border-radius: var(--r-press); color: inherit; font: inherit; white-space: nowrap; transition: background-color var(--state-out), color var(--state-out); }
[data-r="list-header"] > [data-col][data-num] > [data-part="sort"] { flex-direction: row-reverse; }
[data-r="list-header"] > [data-col] > [data-part="sort"] > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-r="list-header"] > [data-col] > [data-part="sort"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); flex: none; opacity: 0; }
@media (hover: hover) {
  [data-r="list-header"] > [data-col] > [data-part="sort"]:hover { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="list-header"] > [data-col] > [data-part="sort"][data-force~="hover"] { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="list-header"] > [data-col] > [data-part="sort"]:hover > svg[data-icon] { opacity: .6; }
}
[data-r="list-header"] > [data-col] > [data-part="sort"][data-force~="hover"] > svg[data-icon] { opacity: .6; }
[data-r="list-header"] > [data-col][aria-sort] > [data-part="sort"] { color: var(--ink); }
[data-r="list-header"] > [data-col][aria-sort] > [data-part="sort"] > svg[data-icon] { opacity: 1; }
[data-r="list-header"] > [data-col][aria-sort="ascending"] > [data-part="sort"] > svg[data-icon] { transform: rotate(180deg); }
[data-r="list-header"] > [data-col] > [data-part="edge"] { position: absolute; z-index: 1; top: 4px; bottom: 4px; right: -10px; width: 9px; cursor: col-resize; touch-action: none; outline: none; }
[data-r="list-header"] > [data-col] > [data-part="edge"]::after { content: ""; position: absolute; left: 4px; top: 2px; bottom: 2px; width: var(--px); background: transparent; transition: background-color var(--state-out); }
[data-r="list-header"] > [data-col] > [data-part="edge"][data-held]::after { background: var(--line-5); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="list-header"] > [data-col] > [data-part="edge"]:hover::after { background: var(--line-5); transition-duration: 0s; }
}
[data-r="list-header"] > [data-col] > [data-part="edge"][data-force~="hover"]::after { background: var(--line-5); transition-duration: 0s; }
[data-r="list-header"] > [data-col] > [data-part="edge"]:focus-visible::after { background: var(--accent); transition-duration: 0s; }
[data-r="list-header"] > [data-col] > [data-part="edge"][data-force~="focus"]::after { background: var(--accent); transition-duration: 0s; }
[data-r="list"][data-mode="grid"]:has(> [data-r="list-header"]) > [data-r="list-group"] { top: var(--row-32); }
[data-r="list-group"] > [data-part="name"] { display: flex; align-items: center; gap: 4px; min-width: 0; grid-column: 1 / span var(--lead); }
[data-r="list-group"] [data-part="fold"] { display: flex; align-items: center; gap: 10px; min-width: 0; height: var(--h-24); margin-left: -6px; padding: 0 6px; border-radius: var(--r-press); color: inherit; font: inherit; white-space: nowrap; }
[data-r="list-group"] [data-part="fold"] > [data-part="label"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-r="list-group"] [data-part="fold"] > [data-part="count"] { margin-left: -2px; }
[data-r="list-group"] [data-part="fold"] > [data-part="count"],
[data-r="list-subgroup"] [data-part="count"] { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="list-group"] [data-part="fold"] > [data-part="toggle"],
[data-r="list-subgroup"] [data-part="toggle"] { display: flex; justify-content: center; width: 14px; flex: none; color: var(--ink-3); }
[data-r="list-group"] [data-part="fold"] > [data-part="toggle"] > svg[data-icon],
[data-r="list-subgroup"] [data-part="toggle"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); transition: transform var(--state-out); }
[data-r="list-group"][aria-expanded="false"] [data-part="fold"] > [data-part="toggle"] > svg[data-icon],
[data-r="list-subgroup"][aria-expanded="false"] [data-part="toggle"] > svg[data-icon] { transform: rotate(-90deg); }
[data-r="list-group"] > [data-part="name"] > [data-part="more"] { opacity: 0; transition: opacity var(--state-out); }
[data-r="list-group"] > [data-part="name"] > [data-part="more"][aria-expanded="true"] { opacity: 1; transition-duration: 0s; }
@media (hover: hover) {
  [data-r="list-group"]:is(:hover, :focus-within) > [data-part="name"] > [data-part="more"] { opacity: 1; transition-duration: 0s; }
}
[data-r="list-group"]:is([data-force~="hover"], :focus-within) > [data-part="name"] > [data-part="more"] { opacity: 1; transition-duration: 0s; }
[data-r="list-group"][data-menu-open] { box-shadow: inset 0 0 0 var(--px) var(--line-3); }
:is([data-r="list-group"], [data-r="list-subgroup"]) > [data-part="agg"] { justify-self: end; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-2); font-variant-numeric: tabular-nums; }
:is([data-r="list-group"], [data-r="list-subgroup"]) > [data-part="agg"] > [data-part="unit"] { color: var(--ink-3); }
[data-r="list-subgroup"] { display: flex; align-items: center; gap: 10px; flex: none; height: var(--row-28); margin: 4px 8px 0; padding: 0 12px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-2); }
[data-r="list-subgroup"] > [data-part="name"] { display: flex; align-items: center; min-width: 0; grid-column-start: 2; grid-column-end: calc(var(--lead) + 1); }
[data-r="list-subgroup"] [data-part="fold"] { display: flex; align-items: center; gap: 6px; min-width: 0; height: var(--h-20); margin-left: -6px; padding: 0 6px; border-radius: var(--r-press); color: inherit; font: inherit; white-space: nowrap; }
[data-r="list-subgroup"] [data-part="fold"] > [data-part="label"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-r="list-subgroup"] > [data-part="agg"] { color: var(--ink-3); }
@media (hover: hover) {
  :is([data-r="list-group"], [data-r="list-subgroup"]) [data-part="fold"]:hover { background: var(--plane-hover); transition-duration: 0s; }
}
:is([data-r="list-group"], [data-r="list-subgroup"]) [data-part="fold"][data-force~="hover"] { background: var(--plane-hover); transition-duration: 0s; }
[data-r="list-total"] { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 10px; flex: none; height: var(--row-36); margin: 4px 8px 0; padding: 0 12px; background: var(--plane); box-shadow: 0 calc(-1 * var(--px)) 0 var(--line-2); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="list-total"] > [data-part="label"] { grid-column: 1 / span var(--lead); min-width: 0; font-weight: var(--fw-500); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-r="list-total"] > [data-r="aggregate"] { justify-self: end; }
[data-r="list"][data-mode="grid"] [data-r="list-create"] > [data-part="start"] { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin: 0; padding: 0; border-radius: 0; }
[data-r="list"][data-mode="grid"] [data-r="list-create"] > [data-part="start"] > svg[data-icon],
[data-r="list"][data-mode="grid"] [data-r="list-create"] > [data-part="icon"] { grid-column: calc(var(--lead) - 1); justify-self: center; margin: 0; }
[data-r="list"][data-mode="grid"] [data-r="list-create"] > [data-part="start"] > span { grid-column: var(--lead) / -1; }
[data-r="list"][data-mode="grid"] [data-r="list-create"] > input { grid-column: var(--lead) / -1; }
@container collection (width < 620px) {
  [data-r="list"][data-mode="grid"] :is([data-r="list-row"], [data-r="list-group"], [data-r="list-subgroup"], [data-r="list-create"], [data-r="list-total"]) { display: flex; }
  [data-r="list"][data-mode="grid"] > [data-r="list-header"] { display: none; }
  [data-r="list"][data-mode="grid"] [data-r] > [data-wide][data-wide][data-wide] { display: none; }
  [data-r="list"][data-mode="grid"]:has(> [data-r="list-header"]) > [data-r="list-group"] { top: 0; }
  [data-r="list"][data-mode="grid"] [data-r="list-row"] > [data-part="select"] { margin: 0 -4px; }
  [data-r="list"][data-mode="grid"] [data-r="list-row"] > [data-part="title"] { flex: 1 1 auto; }
  [data-r="list"][data-mode="grid"] [data-r="list-row"] > [data-col] { flex: none; }
  [data-r="list"][data-mode="grid"] [data-r="list-row"] > [data-col][data-num] { min-width: 44px; }
  [data-r="list"][data-mode="grid"] :is([data-r="list-group"], [data-r="list-subgroup"]) > [data-part="name"],
  [data-r="list"][data-mode="grid"] [data-r="list-total"] > [data-part="label"] { flex: 1 1 auto; }
  [data-r="list"][data-mode="grid"] :is([data-r="list-group"], [data-r="list-subgroup"]) > [data-part="agg"] { min-width: 44px; text-align: right; }
  [data-r="list"][data-mode="grid"] [data-r="list-create"] > [data-part="start"] { display: flex; flex: 1; margin: 0 -12px; padding: 0 12px 0 28px; }
  [data-r="list"][data-mode="grid"] [data-r="list-create"] > [data-part="icon"] { margin-left: 16px; }
}
}

/* ═══ 61-table.css ═══ */
@layer components {
[data-r="table"] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); color: var(--ink-2); font-variant-numeric: tabular-nums; }
[data-r="table"] th { position: sticky; top: 0; z-index: 1; height: var(--row-32); padding: 0 12px; background: var(--plane); border-bottom: var(--px) solid var(--line-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-3); text-align: left; white-space: nowrap; }
[data-r="table"] th[data-num],
[data-r="table"] td[data-num] { text-align: right; }
[data-r="table"] th > [data-part="sort"] { display: inline-flex; align-items: center; gap: 4px; height: var(--h-24); margin: 0 -6px; padding: 0 6px; border-radius: var(--r-press); color: inherit; font: inherit; transition: background-color var(--state-out), color var(--state-out); }
[data-r="table"] th > [data-part="sort"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); opacity: 0; }
@media (hover: hover) {
  [data-r="table"] th > [data-part="sort"]:hover { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="table"] th > [data-part="sort"][data-force~="hover"] { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="table"] th > [data-part="sort"]:hover > svg[data-icon] { opacity: .6; }
}
[data-r="table"] th > [data-part="sort"][data-force~="hover"] > svg[data-icon] { opacity: .6; }
[data-r="table"] th > [data-part="sort"][aria-sort] { color: var(--ink); }
[data-r="table"] th > [data-part="sort"][aria-sort] > svg[data-icon] { opacity: 1; }
[data-r="table"] th > [data-part="sort"][aria-sort="ascending"] > svg[data-icon] { transform: rotate(180deg); }
[data-r="table"] td { height: var(--row-40); padding: 0 12px; border-bottom: var(--px) solid var(--line-1); white-space: nowrap; transition: background-color var(--state-out); }
[data-r="table"] td:first-child { color: var(--ink); font-weight: var(--fw-500); }
[data-r="table"] td > [data-part="unit"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="table"] td > [data-part="muted"] { color: var(--ink-3); }
@media (hover: hover) {
  [data-r="table"] tbody tr:hover > td { background: var(--plane-hover); transition-duration: 0s; }
}
[data-r="table"] tbody tr[data-force~="hover"] > td { background: var(--plane-hover); transition-duration: 0s; }
[data-r="table"] tbody tr[aria-selected="true"] > td { background: var(--plane-selected); }
@media (hover: hover) {
  [data-r="table"] tbody tr[aria-selected="true"]:hover > td { background: var(--plane-selected-hover); }
}
[data-r="table"] tbody tr[aria-selected="true"][data-force~="hover"] > td { background: var(--plane-selected-hover); }
[data-r="table"] tbody tr[aria-selected="true"] > td > [data-part="unit"],
[data-r="table"] tbody tr[aria-selected="true"] > td > [data-part="muted"] { color: var(--ink-2); }
[data-r="table"] tbody tr > td:first-child { border-radius: var(--r-row) 0 0 var(--r-row); }
[data-r="table"] tbody tr > td:last-child { border-radius: 0 var(--r-row) var(--r-row) 0; }
[data-r="table"] tbody tr:last-child > td { border-bottom: 0; }
[data-r="table"] tfoot td { height: var(--row-36); border-top: var(--px) solid var(--line-3); border-bottom: 0; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink); }
[data-r="table"][data-density="comfortable"] td { height: var(--row-44); }
[data-r="table"][data-density="compact"] td { height: var(--row-32); }
[data-r="table"][data-density="dense"] th { height: var(--row-24); padding: 0 8px; }
[data-r="table"][data-density="dense"] td { height: var(--row-24); padding: 0 8px; font-size: var(--fs-12); line-height: var(--lh-12); }
[data-r="table"][data-density="dense"] :is(th, td)[data-hide~="dense"] { display: none; }
[data-r="table"] [data-r="avatar"]:not([data-size]) { --s: 20px; }
[data-r="table"][data-density="comfortable"] [data-r="avatar"]:not([data-size]) { --s: 24px; font-size: var(--fs-11); }
[data-r="table"][data-density="dense"] [data-r="avatar"]:not([data-size]) { --s: 18px; }
[data-r="table"] td > [data-part="who"] { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
[data-r="table"][data-density="dense"] td > [data-part="who"] { gap: 6px; }
[data-r="table"] td > [data-r="meter"] { display: inline-block; width: 56px; margin-right: 8px; vertical-align: middle; }
[data-r="table"][data-wrap] td { height: auto; padding-top: 8px; padding-bottom: 8px; white-space: normal; vertical-align: top; }
[data-r="table"][data-wrap] td:first-child { white-space: nowrap; }
[data-r="table"][data-columns] { table-layout: fixed; min-width: var(--table-min, 100%); }
[data-r="table"][data-columns] :is(th, td) { overflow: hidden; text-overflow: ellipsis; }
[data-r="table"][data-columns] th { position: sticky; }
[data-r="table"][data-columns] th[data-col] { overflow: visible; }
[data-r="table"][data-columns] th > [data-part="sort"] { max-width: calc(100% + 12px); vertical-align: middle; }
[data-r="table"][data-columns] th > [data-part="sort"] > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-r="table"][data-columns] th[data-num] > [data-part="sort"] { flex-direction: row-reverse; }
[data-r="table"][data-columns] th > [data-part="menu"] { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 0; height: var(--h-20); margin: 0; border-radius: var(--r-press); overflow: hidden; color: var(--ink-3); opacity: 0; transition: opacity var(--state-out), background-color var(--state-out), color var(--state-out); }
[data-r="table"][data-columns] th > [data-part="menu"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); }
@media (hover: hover) {
  [data-r="table"][data-columns] th:is(:hover, :focus-within) > [data-part="menu"],
  [data-r="table"][data-columns] th > [data-part="menu"]:is(:hover, [aria-expanded="true"]) { width: var(--h-20); margin: 0 0 0 8px; opacity: 1; transition-duration: 0s; }
}
[data-r="table"][data-columns] th:is([data-force~="hover"], :focus-within) > [data-part="menu"],
[data-r="table"][data-columns] th > [data-part="menu"]:is([data-force~="hover"], [aria-expanded="true"]) { width: var(--h-20); margin: 0 0 0 8px; opacity: 1; transition-duration: 0s; }
@media (hover: hover) {
  [data-r="table"][data-columns] th[data-num]:is(:hover, :focus-within) > [data-part="menu"],
  [data-r="table"][data-columns] th[data-num] > [data-part="menu"]:is(:hover, [aria-expanded="true"]) { margin: 0 8px 0 0; }
}
[data-r="table"][data-columns] th[data-num]:is([data-force~="hover"], :focus-within) > [data-part="menu"],
[data-r="table"][data-columns] th[data-num] > [data-part="menu"]:is([data-force~="hover"], [aria-expanded="true"]) { margin: 0 8px 0 0; }
[data-r="table"][data-columns] th > [data-part="menu"][aria-expanded="true"] { background: var(--plane-hover); color: var(--ink); }
@media (hover: hover) {
  [data-r="table"][data-columns] th > [data-part="menu"]:hover { background: var(--plane-hover); color: var(--ink); }
}
[data-r="table"][data-columns] th > [data-part="menu"][data-force~="hover"] { background: var(--plane-hover); color: var(--ink); }
@media (hover: hover) {
  [data-r="table"][data-columns] th:is(:hover, :focus-within) > [data-part="sort"],
  [data-r="table"][data-columns] th:has(> [data-part="menu"]:is(:hover, [aria-expanded="true"])) > [data-part="sort"] { max-width: calc(100% + 12px - 28px); }
}
[data-r="table"][data-columns] th:is([data-force~="hover"], :focus-within) > [data-part="sort"],
[data-r="table"][data-columns] th:has(> [data-part="menu"]:is([data-force~="hover"], [aria-expanded="true"])) > [data-part="sort"] { max-width: calc(100% + 12px - 28px); }
[data-r="table"][data-columns] th > [data-part="edge"] { position: absolute; z-index: 1; top: 4px; bottom: 4px; right: 0; width: 9px; cursor: col-resize; touch-action: none; outline: none; }
[data-r="table"][data-columns] th > [data-part="edge"]::after { content: ""; position: absolute; right: 0; top: 2px; bottom: 2px; width: var(--px); background: transparent; transition: background-color var(--state-out); }
[data-r="table"][data-columns] th > [data-part="edge"][data-held]::after { background: var(--line-5); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="table"][data-columns] th > [data-part="edge"]:hover::after { background: var(--line-5); transition-duration: 0s; }
}
[data-r="table"][data-columns] th > [data-part="edge"][data-force~="hover"]::after { background: var(--line-5); transition-duration: 0s; }
[data-r="table"][data-columns] th > [data-part="edge"]:focus-visible::after { background: var(--accent); transition-duration: 0s; }
[data-r="table"][data-columns] th > [data-part="edge"][data-force~="focus"]::after { background: var(--accent); transition-duration: 0s; }
[data-r="table"][data-columns] th[data-part="end"] { text-align: right; padding-right: 8px; }
[data-r="table"][data-columns] th[data-part="end"] > [data-r="button"] { vertical-align: middle; }
[data-r="table"][data-pin] :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background-color: var(--plane); }
[data-r="table"][data-pin] thead th:first-child { z-index: 2; }
@media (hover: hover) {
  [data-r="table"][data-pin] tbody tr:hover > td:first-child { background-color: var(--plane-hover); }
}
[data-r="table"][data-pin] tbody tr[data-force~="hover"] > td:first-child { background-color: var(--plane-hover); }
[data-r="table"][data-pin] tbody tr[aria-selected="true"] > td:first-child { background-color: var(--plane-selected); }
@media (hover: hover) {
  [data-r="table"][data-pin] tbody tr[aria-selected="true"]:hover > td:first-child { background-color: var(--plane-selected-hover); }
}
[data-r="table"][data-pin] tbody tr[aria-selected="true"][data-force~="hover"] > td:first-child { background-color: var(--plane-selected-hover); }
[data-r="table"][data-pin][data-scrolled] :is(th, td):first-child { box-shadow: inset calc(-1 * var(--px)) 0 0 var(--line-3); }
[data-r="table"] tfoot td > [data-r="aggregate"] { vertical-align: middle; }
[data-r="table"] tfoot td[data-num] > [data-r="aggregate"] { margin-right: -6px; }
}

/* ═══ 62-card.css ═══ */
@layer components {
[data-r="card"] { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="card"] > :is([data-part="header"], [data-part="body"], [data-part="footer"]) { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); }
[data-r="card"] > [data-part="header"] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; padding: 12px 12px 0 16px; }
[data-r="card"] > [data-part="header"] > [data-part="title"] { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="card"] > [data-part="header"] > [data-part="meta"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); white-space: nowrap; }
[data-r="card"] > [data-part="header"] > [data-part="actions"] { margin-left: auto; display: flex; gap: 4px; }
[data-r="card"] > [data-part="body"] { padding: 12px 16px 16px; }
[data-r="card"] [data-part="figures"] { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="card"] [data-part="figures"] b { display: block; margin-top: 2px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="card"] > [data-part="footer"] { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 16px; border-top: var(--px) solid var(--line-1); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="card"][data-interactive] { transition: background-color var(--state-out); }
@media (hover: hover) {
  [data-r="card"][data-interactive]:hover { background: var(--raised-hover); transition-duration: 0s; }
}
[data-r="card"][data-interactive][data-force~="hover"] { background: var(--raised-hover); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="card"][data-interactive]:hover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)); }
}
[data-r="card"][data-interactive][data-force~="hover"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)); }
[data-r="stat"] { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px 12px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); }
[data-r="stat"] > [data-part="label"] { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="stat"] > [data-part="value"] { display: block; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="stat"] > [data-part="value"] > [data-part="unit"] { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="stat"] > [data-part="foot"] { display: flex; align-items: center; gap: 8px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="stats"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
[data-r="board"] { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding: 4px 16px 16px; }
[data-r="board-column"] { position: relative; display: flex; flex-direction: column; gap: 6px; flex: none; width: 280px; padding: 4px; border-radius: var(--r-contain); transition: background-color var(--state-out); }
[data-r="board-column"][data-over] { background: var(--plane-hover); transition-duration: 0s; }
[data-r="board-column"] > [data-part="slot"] { flex: none; box-sizing: border-box; border: var(--px) dashed var(--line-4); border-radius: var(--r-row); }
[data-r="board-column"] > [data-part="header"] { display: flex; align-items: center; gap: 8px; height: var(--row-36); padding: 0 4px 0 8px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="board-column"] > [data-part="header"] > [data-part="count"] { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="board-column"] > [data-part="header"] > [data-r="button"] { margin-left: auto; }
[data-r="board-column"] > [data-part="header"] > [data-r="button"] + [data-r="button"] { margin-left: -2px; }
[data-r="board-column"] > [data-part="header"] > [data-part="more"] { opacity: 0; transition: opacity var(--state-out); }
@media (hover: hover) {
  [data-r="board-column"] > [data-part="header"]:is(:hover, :focus-within) > [data-part="more"],
  [data-r="board-column"] > [data-part="header"] > [data-part="more"]:is(:hover, [aria-expanded="true"]) { opacity: 1; transition-duration: 0s; }
}
[data-r="board-column"] > [data-part="header"]:is([data-force~="hover"], :focus-within) > [data-part="more"],
[data-r="board-column"] > [data-part="header"] > [data-part="more"]:is([data-force~="hover"], [aria-expanded="true"]) { opacity: 1; transition-duration: 0s; }
[data-r="board-card"] { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-radius: var(--r-row); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); cursor: grab; transition: background-color var(--state-out); }
@media (hover: hover) {
  [data-r="board-card"]:hover { background: var(--raised-hover); transition-duration: 0s; }
}
[data-r="board-card"][data-force~="hover"] { background: var(--raised-hover); transition-duration: 0s; }
[data-r="board-card"] > [data-part="title"] { font-weight: var(--fw-500); color: var(--ink); }
[data-r="board-card"] > [data-part="meta"] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="board-card"]:is([data-lifted], [data-held]) { z-index: 3; background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e3); }
[data-r="board-card"][data-lifted] { cursor: grabbing; pointer-events: none; }
[data-r="board-card"][aria-selected="true"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 var(--px) var(--accent), 0 0 0 var(--px) var(--accent); }
[data-r="board-column"] > [data-part="create"] { display: flex; align-items: center; gap: 8px; flex: none; height: var(--h-32); padding: 0 8px; border-radius: var(--r-row); background: var(--raised); box-shadow: var(--ring-inline); }
[data-r="board-column"] > [data-part="create"] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); flex: none; color: var(--ink-3); }
[data-r="board-column"] > [data-part="create"] > input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); color: var(--ink); }
[data-r="board-column"] > [data-part="create"] > input::placeholder { color: var(--ink-3); opacity: 1; }
[data-r="board-strip"] { display: flex; flex: none; align-self: stretch; }
[data-r="board-strip"] > [data-part="open"] { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 40px; min-height: 160px; padding: 10px 0 12px; border-radius: var(--r-contain); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); box-shadow: inset 0 0 0 var(--px) var(--line-2); transition: background-color var(--state-out), color var(--state-out); }
[data-r="board-strip"] > [data-part="open"] > [data-part="count"] { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="board-strip"] > [data-part="open"] > [data-part="name"] { writing-mode: vertical-rl; white-space: nowrap; color: var(--ink); }
[data-r="board-strip"] > [data-part="open"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); color: var(--ink-3); }
[data-r="board-strip"] > [data-part="open"][aria-expanded="true"] { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="board-strip"] > [data-part="open"]:hover { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="board-strip"] > [data-part="open"][data-force~="hover"] { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
[data-r="board-strip"][data-kind="hidden"] > [data-part="open"] { box-shadow: none; }
[data-r="board-strip"][data-kind="hidden"] > [data-part="open"] > [data-part="name"] { font-weight: var(--fw-500); color: var(--ink-2); }
[data-r="board"] > [data-part="kept"] { display: contents; }
[data-r="board-column"][data-refusing] { background: transparent; }
[data-r="board-column"] > [data-part="reason"] { display: flex; align-items: flex-start; gap: 8px; flex: none; padding: 8px 10px; border-radius: var(--r-row); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="board-column"] > [data-part="reason"] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); flex: none; color: var(--ink-2); }
[data-r="board-column"]:not([data-refusing]) > [data-part="reason"] { display: none; }
[data-r="board-lanes"] { position: relative; overflow: auto; overscroll-behavior: contain; }
[data-r="board-lanes"] > [data-part="columns"] { position: sticky; top: 0; z-index: 3; display: flex; gap: 12px; width: max-content; min-width: 100%; padding: 0 16px; background: var(--plane); border-bottom: var(--px) solid var(--line-1); }
[data-r="board-lanes"] > [data-part="columns"] > [data-part="name"] { display: flex; align-items: center; gap: 8px; flex: none; width: 280px; height: var(--row-36); padding: 0 12px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="board-lanes"] > [data-part="columns"] > [data-part="name"] > [data-part="count"] { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="board-lane"] { display: flex; flex-direction: column; width: max-content; min-width: 100%; }
[data-r="board-lane"] > [data-part="head"] { position: sticky; top: var(--row-36); z-index: 2; display: flex; align-items: center; height: var(--row-36); margin: 6px 8px 0; padding: 0 8px; border-radius: var(--r-row); background: var(--mat); box-shadow: inset 0 0 0 var(--px) var(--line-1); --plane-hover: var(--mat-hover); }
[data-r="board-lane"] > [data-part="head"] > [data-part="fold"] { position: sticky; left: 16px; display: flex; align-items: center; gap: 8px; height: var(--h-24); padding: 0 6px; border-radius: var(--r-press); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-500); color: var(--ink); transition: background-color var(--state-out); }
@media (hover: hover) {
  [data-r="board-lane"] > [data-part="head"] > [data-part="fold"]:hover { background: var(--plane-hover); transition-duration: 0s; }
}
[data-r="board-lane"] > [data-part="head"] > [data-part="fold"][data-force~="hover"] { background: var(--plane-hover); transition-duration: 0s; }
[data-r="board-lane"] > [data-part="head"] > [data-part="fold"] > svg[data-icon]:first-child { width: var(--icon-12); height: var(--icon-12); color: var(--ink-3); transition: transform var(--state-out); }
[data-r="board-lane"][aria-expanded="false"] > [data-part="head"] > [data-part="fold"] > svg[data-icon]:first-child { transform: rotate(-90deg); }
[data-r="board-lane"] > [data-part="head"] > [data-part="fold"] > [data-part="count"] { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="board-lane"][aria-expanded="false"] > [data-r="board"] { display: none; }
[data-r="board-lane"] > [data-r="board"] { overflow: visible; padding: 8px 16px 12px; }
[data-r="board-lane"] > [data-r="board"] > [data-r="board-column"] { min-height: 64px; }
}

/* ═══ 63-feedback.css ═══ */
@layer components {
[data-r="empty"] { display: flex; flex-direction: column; align-items: center; max-width: 460px; margin: 0 auto; padding: 48px 20px; text-align: center; }
[data-r="empty"] > [data-part="art"] { display: flex; justify-content: center; width: 140px; color: var(--tomrum-hand); }
[data-r="empty"] > [data-part="art"] > svg { width: 100%; height: auto; overflow: visible; }
[data-r="empty"] > [data-part="title"] { margin-top: 16px; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
[data-r="empty"] > [data-part="text"] { margin-top: 7px; max-width: 46ch; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); text-wrap: pretty; }
[data-r="empty"] > [data-part="text"] + [data-part="text"] { margin-top: 2px; }
[data-r="empty"] > [data-part="actions"] { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
[data-r="empty"] [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: r-draw var(--draw) var(--ease-expo) var(--d, 0ms) both; }
[data-r="empty"] [data-fade] { opacity: 0; animation: r-fade var(--draw-fade) linear var(--d, 0ms) forwards; }
@keyframes r-draw { to { stroke-dashoffset: 0; } }
@keyframes r-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-r="empty"] :is([data-draw], [data-fade]) { animation: none; stroke-dashoffset: 0; opacity: 1; }
}
[data-r="skeleton"] { position: relative; display: block; height: 10px; border-radius: var(--r-key); background: var(--a5); overflow: hidden; }
[data-r="skeleton"]::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--a5), transparent); animation: r-shimmer var(--shimmer) var(--ease-quad) infinite; }
@keyframes r-shimmer { to { transform: translateX(100%); } }
[data-r="skeleton"][data-size="line"] { height: 10px; }
[data-r="skeleton"][data-size="title"] { height: 14px; width: 40%; }
[data-r="progress"] { position: relative; display: block; height: 4px; border-radius: var(--r-press); background: var(--a10); overflow: hidden; }
[data-r="progress"] > [data-part="fill"] { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); border-radius: inherit; background: var(--accent); transition: width var(--scale-in) var(--ease-expo); }
[data-r="progress"][data-tone="ink"] > [data-part="fill"] { background: var(--ink-2); }
[data-r="progress"][data-indeterminate] > [data-part="fill"] { width: 30%; animation: r-indeterminate var(--indeterminate) var(--ease-quad) infinite; }
@keyframes r-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
[data-r="meter"] { position: relative; display: block; height: 6px; border-radius: var(--r-press); background: var(--well); overflow: hidden; }
[data-r="meter"] > [data-part="fill"] { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); border-radius: inherit; background: var(--ink-3); }
[data-r="meter"] > [data-part="estimate"] { position: absolute; top: 0; bottom: 0; left: var(--from, 0%); width: var(--w, 0%); border-radius: inherit; outline: 1px dashed var(--ink-3); outline-offset: -1px; }
[data-r="ring"] { width: 14px; height: 14px; flex: none; transform: rotate(-90deg); }
[data-r="ring"] > circle { fill: none; stroke-width: 2; }
[data-r="ring"] > circle:first-child { stroke: var(--a10); }
[data-r="ring"] > circle:last-child { stroke: var(--accent); stroke-linecap: round; }
}

/* ═══ 64-feed.css ═══ */
@layer components {
[data-r="activity"] { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
[data-r="activity"] > [data-part="event"] { position: relative; display: flex; align-items: center; gap: 8px; min-height: var(--row-32); padding: 0 4px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="activity"] > [data-part="event"] b { font-weight: var(--fw-500); color: var(--ink-2); }
[data-r="activity"] > [data-part="event"] > time { margin-left: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="activity"] > [data-part="event"] + [data-part="event"]::before { content: ""; position: absolute; left: 11.5px; top: -8px; height: 16px; border-left: 1px solid var(--line-3); }
[data-r="comment"] { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; border-radius: var(--r-row); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
[data-r="comment"] > [data-part="head"] { display: flex; align-items: center; gap: 8px; }
[data-r="comment"] > [data-part="head"] > b { font-weight: var(--fw-550); color: var(--ink); }
[data-r="comment"] > [data-part="head"] > time { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="comment"] > [data-part="head"] > [data-r="button"] { margin-left: auto; }
[data-r="comment"] > [data-part="reactions"] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
[data-r="comment"] > :is(p, [data-part="body"]) { margin: 0; }
[data-r="comment"] > [data-part="body"] > div + div { margin-top: 2px; }
[data-r="reaction"][data-add] { background: transparent; color: var(--ink-3); }
@media (hover: hover) {
  [data-r="reaction"][data-add]:hover { background: var(--plane-hover); color: var(--ink-2); }
}
[data-r="reaction"][data-add][data-force~="hover"] { background: var(--plane-hover); color: var(--ink-2); }
[data-r="reaction"] { position: relative; display: inline-flex; align-items: center; gap: 4px; height: var(--h-24); padding: 0 8px 0 6px; border-radius: var(--r-press); background: var(--plane-selected); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-2); font-variant-numeric: tabular-nums; transition: background-color var(--state-out); }
@media (hover: hover) {
  [data-r="reaction"]:hover { background: var(--plane-selected-hover); transition-duration: 0s; }
}
[data-r="reaction"][data-force~="hover"] { background: var(--plane-selected-hover); transition-duration: 0s; }
[data-r="reaction"][aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)); }
[data-r="notification"] { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; min-height: var(--row-52); margin: 0 8px; padding: 8px 12px 8px 12px; border-radius: var(--r-row); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); transition: background-color var(--state-out); }
[data-r="notification"][data-highlighted] { background: var(--plane-hover); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="notification"]:hover { background: var(--plane-hover); transition-duration: 0s; }
}
[data-r="notification"][data-force~="hover"] { background: var(--plane-hover); transition-duration: 0s; }
[data-r="notification"][aria-selected="true"] { background: var(--plane-selected); }
[data-r="notification"] > [data-r="avatar"] { grid-row: 1 / 3; }
[data-r="notification"] > [data-part="title"] { font-weight: var(--fw-500); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="notification"] > [data-part="text"] { grid-column: 2; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="notification"] > time { grid-column: 3; grid-row: 1; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="notification"][data-unread]::before { content: ""; position: absolute; left: 3px; top: calc(50% - 2.5px); width: 5px; height: 5px; border-radius: var(--r-round); background: var(--ink-2); }
[data-r="notification"]:not([data-unread]) > [data-part="title"] { font-weight: var(--fw-450); color: var(--ink-2); }
[data-r="notification"][aria-selected="true"] > :is([data-part="text"], time) { color: var(--ink-2); }
}

/* ═══ 65-everyday.css ═══ */
@layer components {
[data-r="goal"] { display: flex; align-items: center; gap: 12px; min-width: 0; }
[data-r="goal"] > [data-part="ring"] { position: relative; flex: none; width: 80px; height: 80px; }
[data-r="goal"] > [data-part="ring"] > svg { position: absolute; inset: 0; width: 80px; height: 80px; transform: rotate(-90deg); }
[data-r="goal"] circle { fill: none; stroke-width: 6; }
[data-r="goal"] circle[data-part="track"] { stroke: var(--plane-selected); }
[data-r="goal"] circle[data-part="done"] { stroke: var(--c, var(--ch-load)); stroke-linecap: round; stroke-dasharray: var(--v, 0) 100; }
[data-r="goal"] > [data-part="ring"] > b { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-13); line-height: 1; font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="goal"] > [data-part="text"] { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="goal"] > [data-part="text"] > strong { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="goal"][data-size="56"] > [data-part="ring"],
[data-r="goal"][data-size="56"] > [data-part="ring"] > svg { width: 56px; height: 56px; }
[data-r="goal"][data-size="56"] circle { stroke-width: 8; }
[data-r="goal"][data-size="56"] > [data-part="ring"] > b { font-size: var(--fs-12); }
[data-r="bulk-bar"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); position: absolute; left: 50%; bottom: 16px; z-index: 3; translate: -50% 0; display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e2); white-space: nowrap; transform-origin: 50% 100%; }
[data-r="bulk-bar"] > [data-part="count"] { margin-right: 8px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="diff"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); display: flex; flex-direction: column; min-width: 0; padding: 14px 8px 8px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); }
[data-r="diff"] > [data-part="head"] { display: flex; align-items: flex-start; gap: 12px; padding: 0 8px 6px; }
[data-r="diff"] > [data-part="head"] > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
[data-r="diff"] > [data-part="head"] b { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="diff"] > [data-part="head"] [data-part="count"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="diff"] [data-part="row"] { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: var(--row-52); padding: 8px; border-radius: var(--r-row); }
[data-r="diff"] [data-part="row"] + [data-part="row"]::before { content: ""; position: absolute; left: 36px; right: 8px; top: 0; height: var(--px); background: var(--line-1); }
[data-r="diff"] [data-part="row"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); color: var(--ink-3); }
[data-r="diff"] [data-part="what"] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
[data-r="diff"] [data-part="what"] > b { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-500); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="diff"] [data-part="change"] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="diff"] [data-part="change"] > s { text-decoration-color: var(--ink-4); }
[data-r="diff"] [data-part="change"] > em { color: var(--ink); }
[data-r="diff"] [data-part="change"] > [data-part="delta"] { color: var(--ink-2); }
[data-r="diff"] [data-part="change"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); }
[data-r="diff"] [data-part="actions"] { display: flex; align-items: center; gap: 4px; }
[data-r="diff"] [data-part="state"] { display: none; margin-right: 4px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="diff"] [data-part="row"][data-state] [data-part="actions"] > [data-diff] { display: none; }
[data-r="diff"] [data-part="row"]:not([data-state]) [data-diff-reset] { display: none; }
[data-r="diff"] [data-part="row"][data-state] [data-part="state"] { display: inline; }
[data-r="diff"] [data-part="row"][data-state="undone"] [data-part="change"] > em { text-decoration: line-through; text-decoration-color: var(--ink-4); color: var(--ink-3); }
[data-r="diff"] [data-part="row"][data-state="undone"] [data-part="change"] > s { text-decoration: none; color: var(--ink); }
@media (max-width: 560px) {
  [data-r="diff"] [data-part="row"] { grid-template-columns: 16px minmax(0, 1fr); }
  [data-r="diff"] [data-part="actions"] { grid-column: 2; }
}
}

/* ═══ 66-talk.css ═══ */
@layer components {
[data-r="comment-box"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --pill-rest: var(--raised); --ring-gap: var(--raised); display: flex; flex-direction: column; min-width: 0; border: .5px solid var(--line-4); border-radius: var(--r-contain); background: var(--raised); transition: border-color var(--state-out), box-shadow var(--ring-in) var(--ease-ring); }
[data-r="comment-box"]:is(:focus-within, [data-force~="focus"]) { border-color: transparent; box-shadow: var(--ring-field); }
[data-r="comment-box"] > [data-part="text"] { position: relative; min-height: 44px; max-height: 240px; overflow: auto; padding: 10px 12px 4px; outline: none; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); cursor: text; caret-color: var(--accent); }
[data-r="comment-box"] > [data-part="text"] * { cursor: text; }
[data-r="comment-box"] > [data-part="text"][data-empty]::before { content: attr(data-placeholder); position: absolute; color: var(--ink-3); pointer-events: none; }
[data-r="comment-box"] > [data-part="bar"] { display: flex; align-items: center; gap: 2px; padding: 4px 6px 6px 8px; }
[data-r="comment-box"] > [data-part="bar"] > [data-part="hint"] { margin-left: auto; margin-right: 6px; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }
[data-r="mention"] { display: inline-flex; align-items: center; height: 20px; margin: 0 1px; padding: 0 6px; vertical-align: 1px; border-radius: var(--r-press); background: var(--plane-selected); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink); white-space: nowrap; }
[data-r="embed"] { display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 8px 10px; border-radius: var(--r-row); background: var(--well); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="embed"] > svg[data-icon] { flex: none; width: var(--icon-14); height: var(--icon-14); color: var(--ink-3); }
[data-r="embed"] > b { font-weight: var(--fw-500); color: var(--ink); }
:is([data-r="comment-box"] > [data-part="text"], [data-r="comment"] > [data-part="body"]) > hr[data-part="rule"] { height: 0; margin: 10px 0; border: 0; border-top: var(--px) solid var(--line-2); }
[data-r="thread"] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
[data-r="thread"] > [data-part="head"] { display: flex; align-items: center; gap: 8px; min-height: var(--h-28); padding: 0 2px 0 4px; }
[data-r="thread"] > [data-part="head"] > svg[data-icon] { flex: none; width: var(--icon-16); height: var(--icon-16); color: var(--ink-3); }
[data-r="thread"] > [data-part="head"] > b { flex: 1; min-width: 0; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="thread"] > [data-part="comments"] { display: flex; flex-direction: column; gap: 8px; }
[data-r="thread"][data-resolved] > [data-part="comments"] > [data-r="comment"]:not(:first-child),
[data-r="thread"][data-resolved] > [data-r="comment-box"] { display: none; }
[data-r="emoji-picker"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --ring-gap: var(--raised); width: 292px; padding: 8px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); }
[data-r="emoji-picker"] > [data-r="field"] { margin-bottom: 8px; }
[data-r="emoji-picker"] > [data-part="grid"] { display: grid; grid-template-columns: repeat(8, 28px); gap: 4px 6px; max-height: 220px; overflow: auto; }
[data-r="emoji-picker"] [data-part="group"] { grid-column: 1 / -1; padding: 6px 2px 0; font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="emoji-picker"] [data-part="cell"] { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-round); background: transparent; font-size: var(--fs-16); line-height: 1; outline: none; transition: background-color var(--state-out); }
@media (hover: hover) {
  [data-r="emoji-picker"] [data-part="cell"]:hover { background: var(--plane-hover); transition-duration: 0s; }
}
[data-r="emoji-picker"] [data-part="cell"][data-force~="hover"] { background: var(--plane-hover); transition-duration: 0s; }
[data-r="emoji-picker"] [data-part="cell"]:focus-visible { background: var(--plane-hover); outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="emoji-picker"] [data-part="cell"][data-force~="focus"] { background: var(--plane-hover); outline: 1px solid var(--accent); outline-offset: 0; }
}

/* ═══ 67-phone.css ═══ */
@layer components {
[data-r="phone"] { --plane: var(--paper); --plane-hover: var(--paper-hover); --plane-selected: var(--paper-selected); --pill-rest: var(--raised); position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--paper); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="phone"] > [data-part="status"] { display: flex; align-items: center; justify-content: space-between; flex: none; height: var(--h-44); padding: 0 24px 0 28px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="phone"] > [data-part="status"] > i { position: relative; width: 24px; height: 11px; border-radius: 2px; box-shadow: inset 0 0 0 var(--px) var(--ink-2); }
[data-r="phone"] > [data-part="status"] > i::after { content: ""; position: absolute; inset: 2px 5px 2px 2px; border-radius: 1px; background: var(--ink); }
[data-r="phone"] > [data-part="head"] { display: flex; align-items: center; gap: 4px; flex: none; padding: 4px 12px 10px 20px; }
[data-r="phone"] > [data-part="head"] > b { flex: 1; min-width: 0; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
[data-r="phone"] > [data-part="range"] { flex: none; padding: 0 16px 6px; }
[data-r="phone"] > [data-part="scroll"] { flex: 1; min-height: 0; overflow: auto; padding-bottom: 96px; }
[data-r="phone"] [data-part="group"] { padding: 14px 20px 4px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="mobile-row"] { display: flex; align-items: center; gap: 12px; min-height: var(--row-60); margin: 0 8px; padding: 8px 12px; border-radius: var(--r-row); outline: none; transition: background-color var(--state-out); }
@media (hover: hover) {
  [data-r="mobile-row"]:is(:hover, :active) { background: var(--plane-hover); transition-duration: 0s; }
}
[data-r="mobile-row"]:is([data-force~="hover"], :active) { background: var(--plane-hover); transition-duration: 0s; }
[data-r="mobile-row"]:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
[data-r="mobile-row"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: -1px; }
[data-r="mobile-row"] > [data-part="tile"] { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-row); background: color-mix(in srgb, var(--c, var(--ink-3)) 15%, transparent); color: var(--c, var(--ink-2)); }
[data-r="mobile-row"] > [data-part="tile"] > svg[data-icon] { width: var(--icon-20); height: var(--icon-20); }
[data-r="mobile-row"] > [data-part="text"] { flex: 1; min-width: 0; }
[data-r="mobile-row"] > [data-part="text"] > b { display: block; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-500); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="mobile-row"] > [data-part="text"] > span { display: block; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="tab-bar"] { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 8px 24px; border-top: var(--px) solid var(--line-2); background: var(--paper); }
[data-r="tab-bar"] > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 48px; padding: 0; border: 0; border-radius: var(--r-press); background: transparent; color: var(--ink-3); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); outline: none; }
[data-r="tab-bar"] > button > svg[data-icon] { width: var(--icon-20); height: var(--icon-20); }
[data-r="tab-bar"] > button[aria-current] { color: var(--accent-ink); }
[data-r="tab-bar"] > button:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; }
[data-r="tab-bar"] > button[data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: -2px; }
[data-r="phone"] > [data-part="dim"] { position: absolute; inset: 0; z-index: 2; background: var(--backdrop); opacity: 0; pointer-events: none; }
[data-r="bottom-sheet"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --pill-rest: var(--raised); position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; flex-direction: column; height: 100%; border-radius: var(--r-contain) var(--r-contain) 0 0; background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e3); transform: translateY(100%); }
[data-r="bottom-sheet"] > [data-part="grab"] { display: flex; flex-direction: column; align-items: center; flex: none; padding: 8px 12px 4px 20px; cursor: ns-resize; touch-action: none; outline: none; }
[data-r="bottom-sheet"] > [data-part="grab"]::before { content: ""; width: 36px; height: 5px; margin-bottom: 10px; border-radius: var(--r-press); background: var(--line-5); }
[data-r="bottom-sheet"] > [data-part="grab"]:focus-visible::before { background: var(--accent); }
[data-r="bottom-sheet"] > [data-part="grab"][data-force~="focus"]::before { background: var(--accent); }
[data-r="bottom-sheet"] > [data-part="grab"] > div { display: flex; align-items: center; gap: 8px; width: 100%; }
[data-r="bottom-sheet"] > [data-part="grab"] [data-part="title"] { flex: 1; min-width: 0; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
[data-r="bottom-sheet"] > [data-part="body"] { flex: 1; min-height: 0; overflow: auto; padding: 6px 20px 120px; }
[data-r="bottom-sheet"] > [data-part="body"] > * + * { margin-top: 14px; }
[data-r="bottom-sheet"] > [data-part="body"] > [data-r="stats"] { grid-template-columns: 1fr 1fr; }
[data-r="bottom-sheet"] > [data-part="body"] [data-r="button"][data-size="44"][data-variant="primary"] { width: 100%; }
[data-r="action-sheet"] { position: absolute; left: 8px; right: 8px; bottom: 30px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
[data-r="action-sheet"] > [data-part="actions"] { overflow: hidden; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e3); }
[data-r="action-sheet"] > [data-part="actions"] > button { display: flex; align-items: center; gap: 12px; width: 100%; height: var(--row-52); padding: 0 18px; border: 0; background: transparent; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-450); color: var(--ink); text-align: left; outline: none; transition: background-color var(--state-out); }
[data-r="action-sheet"] > [data-part="actions"] > button + button { border-top: var(--px) solid var(--line-1); }
@media (hover: hover) {
  [data-r="action-sheet"] > [data-part="actions"] > button:is(:hover, :active, :focus-visible) { background: var(--raised-hover); transition-duration: 0s; }
}
[data-r="action-sheet"] > [data-part="actions"] > button:is([data-force~="hover"], :active, :focus-visible) { background: var(--raised-hover); transition-duration: 0s; }
[data-r="action-sheet"] > [data-part="actions"] > button[data-tone="danger"] { color: var(--danger-ink); }
[data-r="action-sheet"] > [data-r="button"] { width: 100%; }
}

/* ═══ 68-patterns.css ═══ */
@layer components {
[data-r="settings"] { width: 100%; max-width: 680px; }
[data-r="settings"] > [data-part="group"] + [data-part="group"] { margin-top: 24px; }
[data-r="settings"] > [data-part="group"] > h3 { margin: 0 0 8px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="settings"] > [data-part="group"] > [data-part="box"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --pill-rest: var(--raised); --ring-gap: var(--raised); padding: 0 16px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); }
[data-r="setting"] { display: flex; align-items: center; gap: 16px; min-height: var(--row-52); padding: 10px 0; }
[data-r="setting"] + [data-r="setting"] { border-top: var(--px) solid var(--line-1); }
[data-r="setting"] > [data-part="label"] { flex: 1; min-width: 0; }
[data-r="setting"] > [data-part="label"] > b { display: block; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-500); color: var(--ink); }
[data-r="setting"] > [data-part="label"] > span { display: block; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="setting"] > :is([data-r="select"], [data-r="field"]) { flex: none; width: 196px; }
[data-r="setting"] > [data-r="field"][data-kind="number"] { width: 120px; }
[data-r="inline-edit"] { display: inline-flex; align-items: center; min-height: var(--h-28); margin-left: -6px; padding: 0 6px; border-radius: var(--r-value); outline: none; transition: background-color var(--state-out); }
@media (hover: hover) {
  [data-r="inline-edit"]:not([data-editing]):hover { background: var(--plane-hover); transition-duration: 0s; }
}
[data-r="inline-edit"]:not([data-editing])[data-force~="hover"] { background: var(--plane-hover); transition-duration: 0s; }
[data-r="inline-edit"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="inline-edit"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="inline-edit"] > input { height: var(--h-28); margin: 0 -6px; padding: 0 6px; border: 0; border-radius: var(--r-value); background: var(--raised); box-shadow: var(--ring-field); outline: none; font: inherit; letter-spacing: inherit; color: inherit; }
[data-r="steps"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --pill-rest: var(--raised); --ring-gap: var(--raised); display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; width: 100%; padding: 20px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); }
[data-r="steps"] > [data-part="list"] { display: flex; flex-direction: column; gap: 2px; }
[data-r="steps"] [data-part="step"] { display: flex; align-items: center; gap: 10px; height: var(--h-36); padding: 0 8px; border: 0; border-radius: var(--r-row); background: transparent; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-500); color: var(--ink-3); text-align: left; transition: background-color var(--state-out); }
[data-r="steps"] [data-part="step"] > i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: var(--r-round); box-shadow: inset 0 0 0 var(--px) var(--line-4); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-550); font-style: normal; color: var(--ink-3); }
[data-r="steps"] [data-part="step"][aria-current] { background: var(--plane-selected); color: var(--ink); }
[data-r="steps"] [data-part="step"][aria-current] > i { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-ink); }
[data-r="steps"] [data-part="step"][data-done] { color: var(--ink-2); }
@media (hover: hover) {
  [data-r="steps"] [data-part="step"][data-done]:hover { background: var(--plane-hover); transition-duration: 0s; }
}
[data-r="steps"] [data-part="step"][data-done][data-force~="hover"] { background: var(--plane-hover); transition-duration: 0s; }
[data-r="steps"] [data-part="step"][data-done] > i { background: var(--ink); box-shadow: none; color: var(--paper); }
[data-r="steps"] [data-part="step"] > i > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); }
[data-r="steps"] [data-part="step"]:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
[data-r="steps"] [data-part="step"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: -1px; }
[data-r="steps"] > [data-part="list"] > [data-r="progress"] { margin: 14px 8px 0; }
[data-r="steps"] [data-part="pane"] > :is(h3, h4) { margin: 0 0 4px; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); outline: none; }
[data-r="steps"] [data-part="pane"] > p { max-width: 52ch; margin: 0 0 16px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
[data-r="steps"] [data-part="foot"] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
[data-r="steps"] [data-part="devices"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
[data-r="steps"] [data-part="device"] { display: flex; align-items: center; gap: 10px; height: var(--row-52); padding: 0 12px; border-radius: var(--r-row); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-500); color: var(--ink); }
[data-r="steps"] [data-part="device"] small { display: block; margin-top: 2px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); }
@media (max-width: 700px) {
  [data-r="steps"] { grid-template-columns: minmax(0, 1fr); }
}
[data-r="season"] { position: relative; width: 100%; min-width: 640px; padding: 28px 0 8px; }
[data-r="season"] > [data-part="lanes"] { position: relative; display: flex; flex-direction: column; gap: 22px; }
[data-r="season"] [data-part="lane"] { position: relative; height: var(--h-32); }
[data-r="season"] [data-part="lane"] > [data-part="lane-name"] { position: absolute; left: 0; top: -18px; font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="season"] [data-part="block"] { position: absolute; z-index: 1; top: 0; display: flex; align-items: center; gap: 6px; height: var(--h-32); padding: 0 10px; box-sizing: border-box; border-radius: var(--r-row); background: var(--scale-rank-1); color: var(--scale-rank-1-on); overflow: hidden; white-space: nowrap; outline: none; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); box-shadow: inset 1px 0 0 var(--raised); }
[data-r="season"] [data-part="block"][data-step="2"] { background: var(--scale-rank-2); color: var(--scale-rank-2-on); }
[data-r="season"] [data-part="block"][data-step="3"] { background: var(--scale-rank-3); color: var(--scale-rank-3-on); }
[data-r="season"] [data-part="block"][data-step="4"] { background: var(--scale-rank-4); color: var(--scale-rank-4-on); }
[data-r="season"] [data-part="block"][data-step="rest"] { background: var(--well); color: var(--ink-2); }
[data-r="season"] [data-part="block"] small { font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-450); font-variant-numeric: tabular-nums; }
[data-r="season"] [data-part="block"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
[data-r="season"] [data-part="block"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 1px; }
[data-r="season"] [data-part="race"] { position: absolute; z-index: 0; top: -24px; bottom: 0; width: 1px; background: repeating-linear-gradient(to bottom, var(--chart-reference) 0 4px, transparent 4px 7px); }
[data-r="season"] [data-part="race"] > span { position: absolute; top: 0; left: 4px; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink); white-space: nowrap; }
[data-r="season"] [data-part="race"] > span > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); }
[data-r="season"] [data-part="today"] { position: absolute; z-index: 2; top: -26px; bottom: 0; width: 1px; background: var(--accent); }
[data-r="season"] [data-part="today"] > span { position: absolute; top: 0; left: 50%; translate: -50% 0; padding: 0 5px; border-radius: var(--r-press); background: var(--accent); color: var(--on-accent); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-550); white-space: nowrap; }
[data-r="season"] > [data-part="months"] { position: relative; height: 20px; margin-top: 10px; border-top: var(--px) solid var(--line-2); }
[data-r="season"] > [data-part="months"] > span { position: absolute; top: 6px; translate: -50% 0; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }
[data-r="virtual-list"] { width: 100%; }
[data-r="virtual-list"] > [data-part="viewport"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); position: relative; height: 324px; overflow: auto; contain: strict; outline: none; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); }
[data-r="virtual-list"] > [data-part="viewport"]:focus-visible { box-shadow: 0 0 0 var(--px) var(--accent), var(--e1); }
[data-r="virtual-list"] > [data-part="viewport"][data-force~="focus"] { box-shadow: 0 0 0 var(--px) var(--accent), var(--e1); }
[data-r="virtual-list"] [data-part="inner"] { position: relative; }
[data-r="virtual-list"] [data-part="row"] { position: absolute; left: 6px; right: 6px; display: grid; grid-template-columns: 8px minmax(0, 1fr) 110px 48px; align-items: center; gap: 10px; height: var(--row-36); padding: 0 10px; border-radius: var(--r-row); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); }
@media (hover: hover) {
  [data-r="virtual-list"] [data-part="row"]:hover { background: var(--plane-hover); }
}
[data-r="virtual-list"] [data-part="row"][data-force~="hover"] { background: var(--plane-hover); }
[data-r="virtual-list"] [data-part="row"][aria-selected="true"] { background: var(--plane-selected); }
[data-r="virtual-list"] [data-part="row"] > [data-part="title"] { font-weight: var(--fw-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="virtual-list"] [data-part="row"] > [data-part="date"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="virtual-list"] [data-part="row"][aria-selected="true"] > [data-part="date"] { color: var(--ink-2); }
[data-r="virtual-list"] [data-part="row"] > [data-part="load"] { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
[data-r="virtual-list"] > [data-part="info"] { margin: 8px 0 0; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="dialog"][data-kind="shortcuts"] [data-part="shortcuts"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 24px; }
[data-r="dialog"][data-kind="shortcuts"] [data-part="shortcut-group"] > h3 { margin: 8px 0 2px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="dialog"][data-kind="shortcuts"] [data-part="shortcut"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--row-32); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
}

/* ═══ 69-tools.css ═══ */
@layer components {
[data-r="haptics"] { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; }
[data-r="haptics"] [data-part="pattern"] { position: relative; display: block; width: 120px; height: 14px; border-radius: var(--r-key); background: var(--well); }
[data-r="haptics"] [data-part="pattern"] > i { position: absolute; top: 3px; bottom: 3px; border-radius: 1px; background: var(--ink-3); }
[data-r="haptics"] [data-part="pattern"][data-play] > i { animation: r-felt var(--draw-fade) linear var(--at, 0s) 1; }
@keyframes r-felt { from { background-color: var(--ink); } to { background-color: var(--ink-3); } }
[data-r="haptics"] > [data-part="can"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="haptics"] > [data-part="log"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); font-variant-numeric: tabular-nums; }
[data-r="sticker"] { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; width: 100%; min-width: 0; }
[data-r="sticker"] > [data-part="paper"] { position: relative; flex: none; padding: 18px 20px 18px 36px; border-radius: var(--r-contain); background: var(--well); }
[data-r="sticker"] > [data-part="paper"] > [data-part="ruler"] { position: absolute; left: 8px; top: 18px; width: 24px; pointer-events: none; }
[data-r="sticker"] > [data-part="paper"] > [data-part="ruler"] > svg { display: block; overflow: visible; }
[data-r="sticker"] [data-part="ruler"] [data-part="tick"] { stroke: var(--ink-4); stroke-width: 1; shape-rendering: crispEdges; }
[data-r="sticker"] [data-part="ruler"] text { font-size: var(--fs-9); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="sticker"] > [data-part="paper"] > [data-part="strip"] { width: 38mm; height: 210mm; border-radius: var(--r-contain); box-shadow: var(--e1); }
[data-r="sticker"] > [data-part="paper"] > [data-part="strip"] > svg { display: block; }
[data-r="sticker"] > [data-part="side"] { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1; min-width: 220px; }
[data-r="sticker"] > [data-part="side"] > [data-part="actions"] { display: flex; flex-wrap: wrap; gap: 6px; }
[data-r="sticker"] > [data-part="side"] > p { max-width: 44ch; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
@media print {
  html[data-printing] body * { visibility: hidden; }
  html[data-printing] [data-r="sticker"][data-printing] [data-part="strip"],
  html[data-printing] [data-r="sticker"][data-printing] [data-part="strip"] * { visibility: visible; }
  html[data-printing] [data-r="sticker"][data-printing] [data-part="strip"] { position: fixed; top: 56px; left: 56px; box-shadow: none; }
}
[data-r="editor"][data-kind="sweat"] > [data-part="fields"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px 14px; }
[data-r="editor"][data-kind="sweat"] > [data-part="fields"] > [data-r="form-row"] > [data-r="field"] { width: 100%; }
[data-r="editor"][data-kind="gut"] > [data-part="head"] > [data-part="word"] { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="editor"][data-kind="gut"] > [data-part="scale"] { display: flex; flex-direction: column; gap: 4px; }
[data-r="editor"][data-kind="gut"] > [data-part="scale"] > [data-r="segmented"] { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
[data-r="editor"][data-kind="gut"] > [data-part="scale"] > [data-r="segmented"] > [data-r="button"] { --pad: 0px; width: 100%; }
[data-r="editor"][data-kind="gut"] > [data-part="scale"] > [data-part="ends"] { display: flex; justify-content: space-between; padding: 0 2px; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }
[data-r="editor"][data-kind="gut"] > [data-r="plot"] { height: 110px; touch-action: pan-y; }
[data-r="editor"][data-kind="route"] > [data-r="plot"] { height: 150px; touch-action: pan-y; }
[data-r="editor"][data-kind="route"] > [data-r="plot"] > [data-part="marker"] { position: absolute; top: 0; z-index: 2; translate: -50% 0; display: inline-flex; align-items: center; gap: 3px; height: var(--h-20); padding: 0 7px 0 5px; border-radius: var(--r-press); background: var(--raised); color: var(--ink); font-size: var(--fs-11); line-height: 1; font-weight: var(--fw-500); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); cursor: grab; touch-action: none; transition: box-shadow var(--state-out); }
[data-r="editor"][data-kind="route"] > [data-r="plot"] [data-part="stem"] { stroke: var(--ink-4); stroke-width: 1; shape-rendering: crispEdges; }
[data-r="editor"][data-kind="route"] > [data-r="plot"] text[data-part="grade"] { paint-order: stroke; stroke: var(--plane); stroke-width: 4px; stroke-linejoin: round; }
[data-r="editor"][data-kind="route"] > [data-r="plot"] > [data-part="marker"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); color: var(--ch-carb); }
[data-r="editor"][data-kind="route"] > [data-r="plot"] > [data-part="marker"][data-tone="warning"] > svg[data-icon] { color: var(--warning-dot); }
@media (hover: hover) {
  [data-r="editor"][data-kind="route"] > [data-r="plot"] > [data-part="marker"]:hover { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e2); transition-duration: 0s; }
}
[data-r="editor"][data-kind="route"] > [data-r="plot"] > [data-part="marker"][data-force~="hover"] { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e2); transition-duration: 0s; }
[data-r="editor"][data-kind="route"] > [data-r="plot"] > [data-part="marker"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
[data-r="editor"][data-kind="route"] > [data-r="plot"] > [data-part="marker"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 2px; }
[data-r="editor"][data-kind="route"] > [data-part="stops"] { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
[data-r="editor"][data-kind="route"] > [data-part="stops"] > li { display: grid; grid-template-columns: 20px 136px minmax(0, 1fr); align-items: center; gap: 10px; min-height: var(--row-32); border-bottom: var(--px) solid var(--line-1); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="editor"][data-kind="route"] > [data-part="stops"] > li:last-child { border-bottom: 0; }
[data-r="editor"][data-kind="route"] > [data-part="stops"] > li > [data-part="n"] { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--r-round); background: var(--well); color: var(--ink); font-size: var(--fs-11); line-height: 1; font-weight: var(--fw-500); }
[data-r="editor"][data-kind="route"] > [data-part="stops"] > li > [data-part="at"] { color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="editor"][data-kind="route"] > [data-part="stops"] > li[data-tone="warning"] > [data-part="word"] { color: var(--warning-ink); }
[data-r="editor"][data-kind="weather"] > [data-part="hours"] { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(72px, 1fr); overflow-x: auto; }
[data-r="editor"][data-kind="weather"] > [data-part="hours"] > [data-part="hour"] { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; text-align: center; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="editor"][data-kind="weather"] > [data-part="hours"] > [data-part="hour"] + [data-part="hour"] { border-left: var(--px) solid var(--line-1); }
[data-r="editor"][data-kind="weather"] > [data-part="hours"] > [data-part="hour"] > [data-part="time"] { font-weight: var(--fw-500); color: var(--ink-2); }
[data-r="editor"][data-kind="weather"] > [data-part="hours"] > [data-part="hour"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); color: var(--ink-2); }
[data-r="editor"][data-kind="weather"] > [data-part="hours"] > [data-part="hour"] > b { font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
[data-r="editor"][data-kind="weather"] > [data-part="hours"] > [data-part="hour"] > [data-part="plan"] > b { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="editor"][data-kind="weather"] > [data-part="legend"] { margin-top: -4px; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }
@media (max-width: 640px) {
  [data-r="editor"][data-kind="route"] > [data-part="stops"] > li { grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; padding: 6px 0; }
  [data-r="editor"][data-kind="route"] > [data-part="stops"] > li > [data-part="word"] { grid-column: 2; }
}
}

/* ═══ 70-domain.css ═══ */
@layer components {
[data-r="figure"] { display: inline-flex; align-items: baseline; gap: 0; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
[data-r="figure"] > b { font-weight: var(--fw-550); }
[data-r="figure"] > [data-part="unit"] { color: var(--ink-3); font-weight: var(--fw-450); }
[data-r="figure"] > [data-r="provenance"] { margin-left: 5px; align-self: center; }
[data-r="figure"][data-size="16"] { font-size: var(--fs-16); line-height: var(--lh-16); }
[data-r="figure"][data-size="16"] > [data-part="unit"] { font-size: var(--fs-12); line-height: var(--lh-12); }
[data-r="delta"] { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="delta"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); }
[data-r="delta"][data-direction="noise"] { color: var(--ink-3); font-weight: var(--fw-450); }
[data-r="workout"] { --wh: 28px; position: relative; display: flex; align-items: flex-end; height: var(--wh); min-width: 0; }
[data-r="workout"][data-size="14"] { --wh: 14px; }
[data-r="workout"][data-size="20"] { --wh: 20px; }
[data-r="workout"][data-size="44"] { --wh: 44px; }
[data-r="workout"][data-size="64"] { --wh: 64px; }
[data-workout-axis]:not([data-workout-axis="off"]) [data-r="workout"][data-axis="shared"] { flex: none; width: calc(var(--total, 60) * var(--ppm, 2) * 1px); max-width: 100%; }
[data-r="workout"] > i { --z-lit: var(--scale-2-lit); --z-deep: var(--scale-2-deep); --z-edge: var(--scale-2-edge); flex: var(--min, 1) 0 0; min-width: 1px; height: var(--h, max(1px, min(100%, calc((var(--pct, 60) - 35) * 100% / 85)))); border-right: var(--px) solid transparent; background: linear-gradient(var(--z-lit), var(--z-deep)) padding-box; }
[data-r="workout"] > i { border-radius: 2px 2px 0 0; }
[data-r="workout"] > i[data-thin] { border-right-width: 0; }
[data-r="workout"] > i:is([data-zone="1"]) { --z-lit: var(--scale-1-lit); --z-deep: var(--scale-1-deep); --z-edge: var(--scale-1-edge); }
[data-r="workout"] > i:is([data-zone="2"], [data-level="1"]) { --z-lit: var(--scale-2-lit); --z-deep: var(--scale-2-deep); --z-edge: var(--scale-2-edge); }
[data-r="workout"] > i:is([data-zone="3"], [data-level="2"]) { --z-lit: var(--scale-3-lit); --z-deep: var(--scale-3-deep); --z-edge: var(--scale-3-edge); }
[data-r="workout"] > i:is([data-zone="4"], [data-level="3"]) { --z-lit: var(--scale-4-lit); --z-deep: var(--scale-4-deep); --z-edge: var(--scale-4-edge); }
[data-r="workout"] > i:is([data-zone="5"], [data-level="4"]) { --z-lit: var(--scale-5-lit); --z-deep: var(--scale-5-deep); --z-edge: var(--scale-5-edge); }
[data-r="workout"] > i[data-zone="6"] { --z-lit: var(--scale-6-lit); --z-deep: var(--scale-6-deep); --z-edge: var(--scale-6-edge); }
[data-r="workout"] > i[data-level="1"] { --pct: 60; }
[data-r="workout"] > i[data-level="2"] { --pct: 80; }
[data-r="workout"] > i[data-level="3"] { --pct: 97; }
[data-r="workout"] > i[data-level="4"] { --pct: 115; }
[data-r="workout"]:is(:not([data-size]), [data-size="28"], [data-size="44"], [data-size="64"]) > i { box-shadow: inset 0 1px 0 var(--rim); }
[data-r="workout"]:is([data-size="44"], [data-size="64"]) > i { border-radius: 3px 3px 0 0; }
[data-r="workout"] > i[data-focus] { box-shadow: inset 0 0 0 1px var(--z-edge); }
[data-r="workout"][data-reading]::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--hair, 0); width: 1px; background: var(--a35); pointer-events: none; }
[data-r="workout"][data-state="done"] > i { background: none; box-shadow: inset 0 0 0 var(--px) var(--z-edge); opacity: .6; }
[data-r="workout"] > svg[data-part="actual"] { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--wh); overflow: visible; pointer-events: none; }
[data-r="workout"] > svg[data-part="actual"] > [data-part="band"] { fill: var(--ch-power); fill-opacity: .28; stroke: none; }
[data-r="workout"] > svg[data-part="actual"] > [data-part="line"] { fill: none; stroke: var(--ch-power); stroke-width: 1px; stroke-linejoin: round; }
[data-r="workout"][data-state="missed"] > i { background: none; box-shadow: none; outline: var(--px) dashed var(--line-4); outline-offset: calc(var(--px) * -1); }
[data-r="workout"] > svg[data-part="reserve"] { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--wh); overflow: visible; pointer-events: none; }
[data-r="workout"] > svg[data-part="reserve"] > [data-part="mass"] { fill: var(--a10); stroke: none; }
[data-r="workout"] > svg[data-part="reserve"] > [data-part="line"] { fill: none; stroke: var(--a50); stroke-width: 1px; stroke-linejoin: round; }
[data-r="workout"][data-empty] > svg[data-part="reserve"] > [data-part="line"] { stroke: var(--a85); }
[data-r="workout"] > svg[data-part="reserve"] > [data-part="ceiling"] { fill: none; stroke: var(--a35); stroke-width: 1px; stroke-dasharray: 3 3; }
[data-r="workout"] > [data-part="empty"] { position: absolute; bottom: -2px; left: var(--at, 0); width: 5px; height: 5px; background: var(--ink); transform: translateX(-50%) rotate(45deg); pointer-events: none; }
[data-r="workout"]:has(> [data-part="sets"]) { height: calc(var(--wh) + 22px); padding-bottom: 22px; }
[data-r="workout"] > [data-part="sets"] { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; pointer-events: none; }
[data-r="workout"] > [data-part="sets"] > [data-part="set"] { position: absolute; top: 3px; height: 4px; left: calc(var(--at) / var(--total) * 100%); width: calc(var(--span) / var(--total) * 100%); border: var(--px) solid var(--line-4); border-top: 0; }
[data-r="workout"] > [data-part="sets"] > [data-part="set"] > span { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-r="workout"] > [data-part="sets"] > [data-part="set"] > span[data-lean="end"] { left: auto; right: 0; transform: none; }
[data-r="workout"] > [data-part="sets"] > [data-part="set"] > span[data-lean="start"] { left: 0; transform: none; }
[data-r="workout"]:is([data-size="14"], [data-size="20"], :not([data-size])) > [data-part="sets"] { display: none; }
[data-r="workout"]:is([data-size="14"], [data-size="20"], :not([data-size])):has(> [data-part="sets"]) { height: var(--wh); padding-bottom: 0; }
[data-r="session"] { display: grid; grid-template-columns: 16px minmax(0, 1fr) 120px auto; align-items: center; gap: 10px; height: var(--row-44); margin: 0 8px; padding: 0 12px; border-radius: var(--r-row); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); transition: background-color var(--state-out); }
@media (hover: hover) {
  [data-r="session"]:hover { background: var(--plane-hover); transition-duration: 0s; }
}
[data-r="session"][data-force~="hover"] { background: var(--plane-hover); transition-duration: 0s; }
[data-r="session"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); color: var(--ink-3); }
[data-r="session"] > [data-part="name"] { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
[data-r="session"] > [data-part="name"] > b { font-weight: var(--fw-500); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="session"] > [data-part="name"] > span { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); white-space: nowrap; }
[data-r="session"] > [data-part="figures"] { display: flex; gap: 14px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="interval"] { display: grid; grid-template-columns: 20px 20px minmax(0, 1fr) 104px 112px auto; align-items: center; gap: 8px; height: var(--row-44); padding: 0 6px 0 4px; border-radius: var(--r-row); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); transition: background-color var(--state-out); }
@media (hover: hover) {
  [data-r="interval"]:hover { background: var(--plane-hover); transition-duration: 0s; }
}
[data-r="interval"][data-force~="hover"] { background: var(--plane-hover); transition-duration: 0s; }
[data-r="interval"] + [data-r="interval"] { margin-top: 2px; }
[data-r="interval"] > [data-part="index"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
[data-r="interval"] > [data-part="name"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-500); color: var(--ink); }
[data-r="interval"] > [data-part="name"] > small { margin-left: 6px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="interval"] > [data-r="select"] { width: 100%; }
[data-r="interval"] > [data-r="select"] > [data-part="value"] { flex: 1; min-width: 0; text-align: left; }
[data-part="add-steps"] { display: flex; gap: 4px; padding: 8px 4px 0; }
@media (max-width: 640px) {
  [data-r="interval"] { grid-template-columns: 20px minmax(0, 1fr) 92px auto; }
  [data-r="interval"] > :is([data-part="index"], [data-r="select"]) { display: none; }
}
}

/* ═══ 71-editors.css ═══ */
@layer components {
[data-r="editor"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; width: 100%; padding: 14px 16px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); }
[data-r="editor"] > [data-part="head"] { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 12px; }
[data-r="editor"] > [data-part="head"] > div:first-child { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px; }
[data-r="editor"] > [data-part="head"] > div:first-child > b { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="editor"] > [data-part="head"] > div:first-child > span { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="editor"] > [data-part="head"] > [data-part="actions"] { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
[data-r="editor"] > [data-part="figures"] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 22px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="editor"] > [data-part="figures"] > span { display: flex; flex-direction: column; gap: 1px; }
[data-r="editor"] > [data-part="figures"] b { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="editor"] > :is([data-part="note"], [data-part="live"]) { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="editor"] > [data-part="notes"] { display: flex; flex-direction: column; gap: 6px; }
[data-r="editor"] > [data-part="notes"] > p { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="editor"] > [data-part="notes"] > p > svg[data-icon] { flex: none; width: var(--icon-14); height: var(--icon-14); margin-top: 1.5px; }
[data-r="editor"] > [data-part="notes"] > p[data-tone="check"] > svg[data-icon] { color: var(--success-dot); }
[data-r="editor"] > [data-part="notes"] > p[data-tone="warning"] > svg[data-icon] { color: var(--warning-dot); }
[data-r="editor"] > [data-part="notes"] > p[data-tone="info"] > svg[data-icon] { color: var(--info-dot); }
[data-r="editor"] > [data-r="chips"] { margin-top: -2px; }
[data-r="editor"][data-kind="workout"] > [data-r="plot"] { height: 200px; }
[data-r="editor"][data-kind="ramp"] > [data-r="plot"] { height: 190px; }
[data-r="editor"][data-kind="ramp"] [data-part="point"] { --c: var(--ch-carb); }
[data-r="editor"][data-kind="taper"] > [data-r="plot"][data-name="load"] { height: 170px; }
[data-r="editor"][data-kind="taper"] > [data-r="plot"][data-name="form"] { height: 74px; margin-top: -8px; }
[data-r="editor"][data-kind="bottle"] > [data-r="plot"] { height: 220px; }
[data-r="editor"][data-strong] > [data-part="note"] { color: var(--warning-ink); }
[data-r="editor"][data-kind="split"] > [data-part="track"] { position: relative; height: 28px; border-radius: var(--r-press); background: var(--plane-selected); touch-action: none; }
[data-r="editor"][data-kind="split"] [data-part="segment"] { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 10px; overflow: hidden; background: var(--tone); box-shadow: inset -1px 0 0 var(--raised); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink); white-space: nowrap; }
[data-r="editor"][data-kind="split"] [data-part="segment"]:first-child { border-radius: var(--r-press) 0 0 var(--r-press); }
[data-r="editor"][data-kind="split"] [data-part="segment"]:nth-last-child(1 of [data-part="segment"]) { border-radius: 0 var(--r-press) var(--r-press) 0; box-shadow: none; }
[data-r="editor"][data-kind="split"] [data-step] { --tone: var(--scale-rank-1); color: var(--scale-rank-1-on); }
[data-r="editor"][data-kind="split"] [data-step="2"] { --tone: var(--scale-rank-2); color: var(--scale-rank-2-on); }
[data-r="editor"][data-kind="split"] [data-step="3"] { --tone: var(--scale-rank-3); color: var(--scale-rank-3-on); }
[data-r="editor"][data-kind="split"] [data-step="4"] { --tone: var(--scale-rank-4); color: var(--scale-rank-4-on); }
[data-r="editor"][data-kind="split"] [data-part="grip"] { position: absolute; top: -6px; bottom: -6px; z-index: 1; width: 16px; translate: -50% 0; cursor: ew-resize; touch-action: none; outline: none; }
[data-r="editor"][data-kind="split"] [data-part="grip"]::after { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 6px; border-radius: var(--r-press); background: var(--knob); box-shadow: var(--handle-shadow); transition: scale var(--state-out); }
@media (hover: hover) {
  [data-r="editor"][data-kind="split"] [data-part="grip"]:hover::after { scale: 1.14 1; transition-duration: 0s; }
}
[data-r="editor"][data-kind="split"] [data-part="grip"][data-force~="hover"]::after { scale: 1.14 1; transition-duration: 0s; }
[data-r="editor"][data-kind="split"] [data-part="grip"]:focus-visible::after { outline: 1px solid var(--accent); outline-offset: 1px; }
[data-r="editor"][data-kind="split"] [data-part="grip"][data-force~="focus"]::after { outline: 1px solid var(--accent); outline-offset: 1px; }
[data-r="editor"][data-kind="split"] > [data-part="legend"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px 12px; }
[data-r="editor"][data-kind="split"] > [data-part="legend"] > span { display: grid; grid-template-columns: 8px auto 1fr; column-gap: 6px; align-items: center; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="editor"][data-kind="split"] > [data-part="legend"] i { width: 8px; height: 8px; border-radius: 2px; background: var(--tone); }
[data-r="editor"][data-kind="split"] > [data-part="legend"] b { grid-column: 2; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="editor"][data-kind="split"] > [data-part="legend"] small { grid-column: 3; grid-row: 2; padding-left: 6px; font-size: var(--fs-11); line-height: var(--lh-13); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="editor"][data-kind="mix"] > [data-part="bar"] { position: relative; height: 12px; margin: 22px 9px 4px; border-radius: var(--r-press); touch-action: none; background: linear-gradient(90deg, var(--ch-carb) calc(100% - var(--f, 40%)), var(--ch-fructose) calc(100% - var(--f, 40%))); }
[data-r="editor"][data-kind="mix"] [data-part="handle"] { position: absolute; top: -4px; width: 20px; height: 20px; translate: -50% 0; border-radius: var(--r-round); background: var(--knob); box-shadow: var(--handle-shadow); cursor: ew-resize; touch-action: none; outline: none; transition: scale var(--state-out); }
[data-r="editor"][data-kind="mix"] [data-part="handle"]::before { content: ""; position: absolute; inset: -8px; border-radius: inherit; }
@media (hover: hover) {
  [data-r="editor"][data-kind="mix"] [data-part="handle"]:hover { scale: 1.14; transition-duration: 0s; }
}
[data-r="editor"][data-kind="mix"] [data-part="handle"][data-force~="hover"] { scale: 1.14; transition-duration: 0s; }
[data-r="editor"][data-kind="mix"] [data-part="handle"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="editor"][data-kind="mix"] [data-part="handle"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="editor"][data-kind="mix"] [data-part="cap"] { position: absolute; bottom: 100%; margin-bottom: 4px; translate: -50% 0; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); white-space: nowrap; pointer-events: none; }
[data-r="editor"][data-kind="mix"] [data-part="cap"]::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 20px; background: var(--ink-2); }
[data-r="editor"][data-kind="mix"] > [data-part="legend"] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="editor"][data-kind="mix"] > [data-part="legend"] > span { display: inline-flex; align-items: center; gap: 6px; }
[data-r="editor"][data-kind="mix"] > [data-part="legend"] i { width: 8px; height: 8px; border-radius: 2px; background: var(--ch-carb); }
[data-r="editor"][data-kind="mix"] > [data-part="legend"] [data-sugar="fructose"] i { background: var(--ch-fructose); }
[data-r="editor"][data-kind="mix"] > [data-part="legend"] b { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="editor"][data-kind="mix"] > [data-part="legend"] > [data-part="ratio"] { margin-left: auto; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="editor"][data-kind="mix"] > [data-part="head"] [data-r="field"][data-kind="stepper"] { width: 132px; }
[data-r="editor"][data-kind="fuel"] > [data-part="body"] { padding-left: 44px; }
[data-r="editor"][data-kind="fuel"] [data-part="track"] { position: relative; height: 64px; margin-bottom: 22px; }
[data-r="editor"][data-kind="fuel"] [data-part="lane"] { position: absolute; left: 0; right: 0; height: 28px; border-radius: var(--r-press); background: var(--a5); }
[data-r="editor"][data-kind="fuel"] [data-part="lane"][data-lane="0"] { top: 2px; }
[data-r="editor"][data-kind="fuel"] [data-part="lane"][data-lane="1"] { top: 34px; }
[data-r="editor"][data-kind="fuel"] [data-part="lane-name"] { position: absolute; right: 100%; top: 2px; margin-right: 8px; font-size: var(--fs-11); line-height: 28px; color: var(--ink-3); white-space: nowrap; }
[data-r="editor"][data-kind="fuel"] [data-part="lane-name"][data-lane="1"] { top: 34px; }
[data-r="editor"][data-kind="fuel"] [data-part="hour-tick"] { position: absolute; top: 0; bottom: -4px; width: 1px; background: var(--chart-grid); pointer-events: none; }
[data-r="editor"][data-kind="fuel"] [data-part="hour-label"] { position: absolute; top: 100%; margin-top: 7px; translate: -50% 0; font-size: var(--fs-11); line-height: var(--lh-11); font-style: normal; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
[data-r="editor"][data-kind="fuel"] [data-part="hour-label"][data-edge="start"] { translate: 0 0; }
[data-r="editor"][data-kind="fuel"] [data-part="hour-label"][data-edge="end"] { translate: -100% 0; }
[data-r="editor"][data-kind="fuel"] [data-part="item"] { position: absolute; z-index: 1; height: var(--h-24); padding: 0 9px 0 8px; display: inline-flex; align-items: center; gap: 6px; border: .5px solid transparent; border-radius: var(--r-press); background: var(--raised); background-clip: padding-box; box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); font-size: var(--fs-11); line-height: 1; font-weight: var(--fw-500); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; cursor: grab; touch-action: none; transition: background-color var(--state-out), color var(--state-out); }
[data-r="editor"][data-kind="fuel"] [data-part="item"]::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--r-round); background: var(--ch-carb); }
[data-r="editor"][data-kind="fuel"] [data-part="item"]:not([data-kind="bottle"]) { translate: -50% 0; }
@media (hover: hover) {
  [data-r="editor"][data-kind="fuel"] [data-part="item"]:hover { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="editor"][data-kind="fuel"] [data-part="item"][data-force~="hover"] { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
[data-r="editor"][data-kind="fuel"] [data-part="item"][aria-pressed="true"] { background-color: var(--plane-selected); color: var(--ink); }
[data-r="editor"][data-kind="fuel"] [data-part="hours"] { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
[data-r="editor"][data-kind="fuel"] [data-part="hour"] { display: flex; flex-direction: column; align-items: center; gap: 6px; border-left: var(--px) solid var(--line-1); }
[data-r="editor"][data-kind="fuel"] [data-part="hour"]:first-child { border-left: 0; }
[data-r="editor"][data-kind="fuel"] [data-part="column"] { position: relative; width: 100%; height: 56px; }
[data-r="editor"][data-kind="fuel"] [data-part="column"] > i { position: absolute; bottom: 0; left: 50%; width: 24px; translate: -50% 0; border-radius: 4px 4px 0 0; background: var(--ch-carb); }
[data-r="editor"][data-kind="fuel"] [data-part="column"] > b { position: absolute; left: 18%; right: 18%; height: 0; border-top: 1px dashed var(--ink-2); }
[data-r="editor"][data-kind="fuel"] [data-part="hour"] > span { display: flex; flex-direction: column; align-items: center; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="editor"][data-kind="fuel"] [data-part="hour"] > span > strong { font-weight: var(--fw-550); color: var(--ink); }
[data-r="night"] { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
[data-r="night"] > [data-part="face"] { position: relative; flex: none; width: 200px; height: 200px; touch-action: none; }
[data-r="night"] > [data-part="face"] > svg { display: block; width: 200px; height: 200px; overflow: visible; }
[data-r="night"] [data-part="track"] { fill: none; stroke: var(--plane-selected); stroke-width: 18; }
[data-r="night"] [data-part="tick"] { stroke: var(--ink-4); stroke-width: 1; }
[data-r="night"] [data-part="arc"] { fill: none; stroke: var(--accent); stroke-width: 18; stroke-linecap: round; }
[data-r="night"] text { font-size: var(--fs-11); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="night"] [data-part="handle"] { position: absolute; z-index: 1; width: 24px; height: 24px; translate: -50% -50%; display: grid; place-items: center; border-radius: var(--r-round); background: var(--knob); box-shadow: var(--handle-shadow); color: var(--on-knob); cursor: grab; touch-action: none; outline: none; transition: scale var(--state-out); }
[data-r="night"] [data-part="handle"]::before { content: ""; position: absolute; inset: -8px; border-radius: inherit; }
[data-r="night"] [data-part="handle"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); }
@media (hover: hover) {
  [data-r="night"] [data-part="handle"]:hover { scale: 1.14; transition-duration: 0s; }
}
[data-r="night"] [data-part="handle"][data-force~="hover"] { scale: 1.14; transition-duration: 0s; }
[data-r="night"] [data-part="handle"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="night"] [data-part="handle"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="night"] [data-part="centre"] { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
[data-r="night"] [data-part="centre"] > b { font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="night"] [data-part="centre"] > span { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="night"] > [data-part="side"] { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; }
[data-r="night"] > [data-part="side"] > b { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="night"] > [data-part="side"] > span { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="night"] > [data-part="side"] > [data-part="note"] { margin-top: 6px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="night"][data-short] > [data-part="side"] > [data-part="note"] { color: var(--warning-ink); }
@media (max-width: 560px) {
  [data-r="editor"][data-kind="fuel"] > [data-part="body"] { padding-left: 0; }
  [data-r="editor"][data-kind="fuel"] [data-part="lane-name"] { display: none; }
  [data-r="editor"][data-kind="mix"] > [data-part="legend"] > [data-part="ratio"] { margin-left: 0; }
  [data-r="night"] { justify-content: center; }
}
}

/* ═══ 72-plot.css ═══ */
@layer components {
[data-r="plot"] { position: relative; min-width: 0; border-radius: var(--r-row); touch-action: none; user-select: none; -webkit-user-select: none; }
[data-r="plot"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
[data-r="plot"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 4px; }
[data-r="plot"] > svg { display: block; width: 100%; overflow: visible; }
[data-r="plot"] text { font-size: var(--fs-11); font-weight: var(--fw-450); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="plot"] text[data-tone="strong"] { font-weight: var(--fw-500); fill: var(--ink); }
[data-r="plot"] [data-part="grid"] { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
[data-r="plot"] [data-part="axis"] { stroke: var(--chart-axis); stroke-width: 1; shape-rendering: crispEdges; }
[data-r="plot"] [data-part="zero"] { stroke: var(--ink-4); stroke-width: 1; shape-rendering: crispEdges; }
[data-r="plot"] [data-part="ref"] { fill: none; stroke: var(--chart-reference); stroke-width: 1; stroke-dasharray: 4 3; }
[data-r="plot"] [data-part="diagonal"] { fill: none; stroke: var(--chart-grid); stroke-width: 1; stroke-dasharray: 2 3; }
[data-r="plot"] [data-part="band"] { fill: var(--a5); stroke: none; }
[data-r="plot"] [data-part="line"] { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
[data-r="plot"] [data-part="line"]:is([data-kind="projection"], [data-kind="estimate"]) { stroke-dasharray: 6 4; }
[data-r="plot"] [data-part="area"] { stroke: none; opacity: .10; }
[data-r="plot"] [data-part="point"] { fill: var(--c, var(--ink)); stroke: var(--raised); stroke-width: 2; }
[data-r="plot"] [data-part="point"][data-on] { fill: var(--ink); }
[data-r="plot"] [data-part="crosshair"] { stroke: var(--a35); stroke-width: 1; shape-rendering: crispEdges; pointer-events: none; }
[data-r="plot"] [data-part="missing"] { stroke: none; }
[data-r="plot"] [data-part="hatch"] { fill: var(--a20); stroke: none; }
[data-r="plot"] [data-part="block"] { fill: var(--scale-rank-2); stroke: var(--raised); stroke-width: 0; transition: stroke var(--state-out); }
[data-r="plot"] [data-part="block"][data-step="1"] { fill: var(--scale-rank-1); }
[data-r="plot"] [data-part="block"][data-step="2"] { fill: var(--scale-rank-2); }
[data-r="plot"] [data-part="block"][data-step="3"] { fill: var(--scale-rank-3); }
[data-r="plot"] [data-part="block"][data-step="4"] { fill: var(--scale-rank-4); }
[data-r="plot"] [data-part="block"][data-step="race"] { fill: var(--scale-6); }
[data-r="plot"] [data-part="block"][data-on] { stroke: var(--accent); stroke-width: 1.5; transition-duration: 0s; }
[data-r="plot"] [data-part="form"] { fill: var(--ch-form); fill-opacity: .7; }
[data-r="plot"] [data-part="form"][data-kind="projection"] { fill-opacity: .35; }
[data-r="plot"] [data-part="form"][data-on] { fill-opacity: 1; }
[data-r="plot"] [data-part="bar"] { fill: var(--scale-rank-2); stroke: none; transition: opacity var(--state-out); }
[data-r="plot"] [data-part="bar"][data-step="1"] { fill: var(--scale-rank-1); }
[data-r="plot"] [data-part="bar"][data-step="2"] { fill: var(--scale-rank-2); }
[data-r="plot"] [data-part="bar"][data-step="3"] { fill: var(--scale-rank-3); }
[data-r="plot"] [data-part="bar"][data-step="4"] { fill: var(--scale-rank-4); }
[data-r="plot"][data-hovering] [data-part="bar"]:not([data-on]) { opacity: .45; transition-duration: 0s; }
[data-r="plot"] [data-part="cell"] { fill: var(--scale-cell-2); stroke: transparent; stroke-width: 1.5; transition: stroke var(--state-out); }
[data-r="plot"] [data-part="cell"][data-step="0"] { fill: var(--well); }
[data-r="plot"] [data-part="cell"][data-step="1"] { fill: var(--scale-cell-1); }
[data-r="plot"] [data-part="cell"][data-step="2"] { fill: var(--scale-cell-2); }
[data-r="plot"] [data-part="cell"][data-step="3"] { fill: var(--scale-cell-3); }
[data-r="plot"] [data-part="cell"][data-step="4"] { fill: var(--scale-cell-4); }
[data-r="plot"] [data-part="cell"][data-step="5"] { fill: var(--scale-cell-5); }
[data-r="plot"] [data-part="cell"][data-on] { stroke: var(--ink); transition-duration: 0s; }
[data-r="plot"] > [data-part="grip"] { position: absolute; z-index: 2; touch-action: none; outline: none; }
[data-r="plot"] > [data-part="grip"]::after { content: ""; position: absolute; border-radius: var(--r-press); background: var(--knob); box-shadow: var(--handle-shadow); transition: scale var(--state-out); }
[data-r="plot"] > [data-part="grip"][data-axis="y"] { height: 12px; cursor: ns-resize; }
[data-r="plot"] > [data-part="grip"][data-axis="y"]::after { left: 50%; top: 4px; width: 24px; height: 4px; translate: -50% 0; }
[data-r="plot"] > [data-part="grip"][data-axis="x"] { width: 14px; cursor: ew-resize; }
[data-r="plot"] > [data-part="grip"][data-axis="x"]::after { top: 50%; left: 5px; width: 4px; height: 24px; translate: 0 -50%; }
[data-r="plot"] > [data-part="grip"][data-axis="x"][data-line]::before { content: ""; position: absolute; left: 6.5px; top: 0; bottom: 0; width: 1px; background: var(--ink-3); }
@media (hover: hover) {
  [data-r="plot"] > [data-part="grip"]:hover::after { scale: 1.14; transition-duration: 0s; }
}
[data-r="plot"] > [data-part="grip"][data-force~="hover"]::after { scale: 1.14; transition-duration: 0s; }
[data-r="plot"] > [data-part="grip"]:focus-visible::after { outline: 1px solid var(--accent); outline-offset: 1px; }
[data-r="plot"] > [data-part="grip"][data-force~="focus"]::after { outline: 1px solid var(--accent); outline-offset: 1px; }
[data-r="plot"] > [data-part="handle"] { position: absolute; z-index: 2; width: 18px; height: 18px; translate: -50% -50%; border-radius: var(--r-round); background: var(--knob); box-shadow: var(--handle-shadow); cursor: grab; touch-action: none; outline: none; transition: scale var(--state-out); }
[data-r="plot"] > [data-part="handle"]::before { content: ""; position: absolute; inset: -9px; border-radius: inherit; }
[data-r="plot"] > [data-part="handle"]::after { content: ""; position: absolute; inset: 5px; border-radius: inherit; background: var(--ch-carb); }
@media (hover: hover) {
  [data-r="plot"] > [data-part="handle"]:hover { scale: 1.14; transition-duration: 0s; }
}
[data-r="plot"] > [data-part="handle"][data-force~="hover"] { scale: 1.14; transition-duration: 0s; }
[data-r="plot"] > [data-part="handle"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="plot"] > [data-part="handle"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="plot"] > [data-part="tag"] { position: absolute; z-index: 3; translate: -50% 0; padding: 3px 7px; border-radius: var(--r-row); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e1); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
[data-r="plot"] > [data-part="tip"] { position: absolute; z-index: 3; min-width: 120px; padding: 6px 8px 7px; border-radius: var(--r-row); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e1); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-450); color: var(--ink-3); white-space: nowrap; pointer-events: none; }
[data-r="plot"] > [data-part="tip"] > [data-part="head"] { margin-bottom: 3px; font-weight: var(--fw-500); color: var(--ink-2); }
[data-r="plot"] > [data-part="tip"] > [data-part="row"] { display: flex; align-items: center; gap: 6px; }
[data-r="plot"] > [data-part="tip"] > [data-part="row"] > i { flex: none; width: 10px; height: 2px; border-radius: 1px; background: var(--c, var(--ink-2)); }
[data-r="plot"] > [data-part="tip"] > [data-part="row"] > i[data-kind="dash"] { background: repeating-linear-gradient(90deg, var(--c, var(--ink-2)) 0 3px, transparent 3px 5px); }
[data-r="plot"] > [data-part="tip"] > [data-part="row"] > i[data-kind="block"] { height: 8px; border-radius: 2px; }
[data-r="plot"] > [data-part="tip"] > [data-part="row"] > i[data-kind="none"] { visibility: hidden; }
[data-r="plot"] > [data-part="tip"] > [data-part="row"] > b { min-width: 44px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="plot"] > [data-part="span"] { position: absolute; z-index: 1; box-sizing: border-box; border-inline: 1px solid var(--ink-3); background: var(--a5); pointer-events: none; }
[data-r="plot"] > [data-part="pin"] { position: absolute; top: -2px; z-index: 3; display: grid; place-items: center; width: 20px; height: 20px; margin-left: -10px; padding: 0; border: 0; border-radius: var(--r-round); background: var(--ink); color: var(--raised); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-550); font-variant-numeric: tabular-nums; transition: scale var(--state-out); }
@media (hover: hover) {
  [data-r="plot"] > [data-part="pin"]:is(:hover, [data-on]) { scale: 1.18; transition-duration: 0s; }
}
[data-r="plot"] > [data-part="pin"]:is([data-force~="hover"], [data-on]) { scale: 1.18; transition-duration: 0s; }
[data-r="plot"] > [data-part="pin"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
[data-r="plot"] > [data-part="pin"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 2px; }
[data-r="plot"] > [data-part="compose"] { position: absolute; top: 26px; z-index: 3; width: 240px; border-radius: var(--r-value); box-shadow: var(--e2); }
[data-r="plot"] > [data-part="compose"] > [data-r="field"] { width: 100%; }
}

/* ═══ 73-truth.css ═══ */
@layer components {
button[data-r="figure"] { margin: 0 -6px; padding: 1px 6px; border: 0; border-radius: var(--r-press); background: transparent; font: inherit; color: var(--ink); text-align: left; transition: background-color var(--state-out); }
button[data-r="figure"][aria-expanded="true"] { background-color: var(--plane-hover); transition-duration: 0s; }
@media (hover: hover) {
  button[data-r="figure"]:hover { background-color: var(--plane-hover); transition-duration: 0s; }
}
button[data-r="figure"][data-force~="hover"] { background-color: var(--plane-hover); transition-duration: 0s; }
[data-r="term"] { display: inline; margin: 0; padding: 0; border: 0; border-radius: 2px; background: none; /* allow: radius · the hover plate of a word in running text */ font: inherit; color: inherit; letter-spacing: inherit; text-decoration: underline dotted var(--ink-4); text-decoration-thickness: 1.25px; text-underline-offset: 3px; transition: background-color var(--state-out); }
[data-r="term"][aria-expanded="true"] { text-decoration-style: solid; text-decoration-color: var(--ink-3); background-color: var(--plane-hover); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="term"]:hover { text-decoration-style: solid; text-decoration-color: var(--ink-3); background-color: var(--plane-hover); transition-duration: 0s; }
}
[data-r="term"][data-force~="hover"] { text-decoration-style: solid; text-decoration-color: var(--ink-3); background-color: var(--plane-hover); transition-duration: 0s; }
[data-r="delta"][data-noise] { gap: 8px; font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="delta"][data-noise] > b { min-width: 44px; text-align: right; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink-2); }
[data-r="delta"][data-noise]:not([data-direction="noise"]) > b { color: var(--ink); }
[data-r="delta"][data-noise]:not([data-direction="noise"]) > [data-part="word"] { color: var(--ink-2); }
[data-r="delta"] > [data-part="noise"] { position: relative; flex: none; width: 56px; height: 12px; }
[data-r="delta"] > [data-part="noise"]::before { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1px; translate: 0 -50%; background: var(--line-3); }
[data-r="delta"] > [data-part="noise"]::after { content: ""; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 1px; translate: -50% 0; background: var(--ink-4); }
[data-r="delta"] > [data-part="noise"] > [data-part="band"] { position: absolute; top: 2px; height: 8px; left: calc(50% - var(--n)); width: calc(var(--n) * 2); border-radius: var(--r-press); background: var(--a10); }
[data-r="delta"] > [data-part="noise"] > [data-part="value"] { position: absolute; z-index: 1; top: 3px; left: var(--at); width: 6px; height: 6px; translate: -50% 0; border-radius: var(--r-round); background: var(--raised); box-shadow: inset 0 0 0 1.25px var(--ink-2); }
[data-r="delta"][data-noise]:not([data-direction="noise"]) > [data-part="noise"] > [data-part="value"] { background: var(--ink); box-shadow: none; }
[data-r="age"] { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="age"] > svg { flex: none; transform: rotate(-90deg); }
[data-r="age"] circle { fill: none; stroke-width: 2; }
[data-r="age"] circle[data-part="track"] { stroke: var(--plane-selected); }
[data-r="age"] circle[data-part="left"] { stroke: currentColor; stroke-linecap: round; }
[data-r="age"][data-state="stale"] { color: var(--warning-ink); }
[data-r="hover-card"] > [data-part="head"] > span:not([data-r]) { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="hover-card"] > [data-part="head"] > [data-part="unit"] { margin-left: auto; }
[data-r="hover-card"] > [data-part="lead"] { color: var(--ink-2); }
[data-r="hover-card"] > dl[data-part="facts"] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; }
[data-r="hover-card"] > dl[data-part="facts"] > dt { color: var(--ink-3); }
[data-r="hover-card"] > dl[data-part="facts"] > dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="hover-card"] > [data-part="foot"] { display: flex; align-items: flex-start; gap: 6px; padding-top: 8px; border-top: var(--px) solid var(--line-1); color: var(--ink-2); }
[data-r="hover-card"] > [data-part="foot"] > svg[data-icon] { flex: none; width: var(--icon-12); height: var(--icon-12); margin-top: 2.5px; color: var(--ink-3); }
[data-r="chart-card"][data-kind="cold"] > [data-r="plot"] { height: 150px; }
[data-r="chart-card"] > [data-part="progress"] { display: flex; align-items: center; gap: 10px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="chart-card"] > [data-part="progress"] > [data-r="progress"] { flex: 1; max-width: 220px; }
[data-r="chart-card"] > [data-part="note"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="chart-card"] > [data-part="note"] > b { font-weight: var(--fw-550); color: var(--ink); }
[data-r="reschedule"] { display: flex; flex-direction: column; gap: 12px; min-width: 0; width: 100%; }
[data-r="reschedule"] > [data-part="days"] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
[data-r="reschedule"] [data-part="day"] { display: flex; flex-direction: column; gap: 6px; min-height: 132px; padding: 6px; border-radius: var(--r-contain); background: var(--ground); transition: background-color var(--state-out), box-shadow var(--state-out); }
[data-r="reschedule"] [data-part="day"][data-over] { background: var(--plane-hover); box-shadow: inset 0 0 0 var(--px) var(--line-4); transition-duration: 0s; }
[data-r="reschedule"] [data-part="day"][data-warn] { box-shadow: inset 0 0 0 1px var(--warning-line); }
[data-r="reschedule"] [data-part="date"] { padding: 2px 4px 0; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }
[data-r="reschedule"] [data-part="date"] > b { font-weight: var(--fw-550); color: var(--ink); }
[data-r="reschedule"] [data-part="session"] { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px; border-radius: var(--r-row); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-raised)), var(--e1); cursor: grab; touch-action: none; outline: none; transition: box-shadow var(--state-out); }
[data-r="reschedule"] [data-part="session"] > b { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink); overflow-wrap: anywhere; }
@media (hover: hover) {
  [data-r="reschedule"] [data-part="session"]:hover { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-raised-hover)), var(--e1); transition-duration: 0s; }
}
[data-r="reschedule"] [data-part="session"][data-force~="hover"] { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-raised-hover)), var(--e1); transition-duration: 0s; }
[data-r="reschedule"] [data-part="session"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="reschedule"] [data-part="session"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="reschedule"] [data-part="session"][data-held] { z-index: 3; box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-raised-hover)), var(--e3); transition: none; }
[data-r="reschedule"] [data-part="session"][data-fixed] { background: transparent; box-shadow: inset 0 0 0 var(--px) var(--line-3); cursor: default; }
[data-r="reschedule"] [data-part="session"][data-fixed] > svg[data-icon] { position: absolute; top: 9px; right: 8px; width: var(--icon-12); height: var(--icon-12); color: var(--ink-3); }
[data-r="reschedule"] > [data-part="checks"] { display: flex; flex-direction: column; gap: 6px; min-height: 44px; }
[data-r="reschedule"] > [data-part="checks"] > p { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="reschedule"] > [data-part="checks"] > p[data-part="if"] { font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="reschedule"] > [data-part="checks"] > p > svg[data-icon] { flex: none; width: var(--icon-14); height: var(--icon-14); margin-top: 1.5px; }
[data-r="reschedule"] > [data-part="checks"] > p[data-tone="warning"] > svg[data-icon] { color: var(--warning-dot); }
[data-r="reschedule"] > [data-part="checks"] > p[data-tone="info"] > svg[data-icon] { color: var(--info-dot); }
[data-r="reschedule"] > [data-part="checks"] > p[data-tone="check"] > svg[data-icon] { color: var(--success-dot); }
[data-r="sandbox"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); display: flex; flex-direction: column; gap: 14px; min-width: 0; width: 100%; padding: 14px 16px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); }
[data-r="sandbox"][data-open] { background: var(--paper); box-shadow: none; outline: 1px dashed var(--ink-4); outline-offset: -1px; }
[data-r="sandbox"] > [data-part="head"] { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 12px; }
[data-r="sandbox"] > [data-part="head"] > div:first-child { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
[data-r="sandbox"] > [data-part="head"] > div:first-child > b { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="sandbox"] > [data-part="head"] > div:first-child > span { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="sandbox"] > [data-part="head"] > [data-part="actions"] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
[data-r="sandbox"]:not([data-open]) [data-part="state"] { display: none; }
[data-r="sandbox"] > [data-part="controls"] { display: flex; flex-wrap: wrap; gap: 14px 20px; }
[data-r="sandbox"] > table[data-part="table"] { width: 100%; border-collapse: collapse; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); font-variant-numeric: tabular-nums; }
[data-r="sandbox"] > table[data-part="table"] :is(th, td) { height: var(--row-32); padding: 0 0 0 8px; border-bottom: var(--px) solid var(--line-1); text-align: right; font-weight: var(--fw-450); }
[data-r="sandbox"] > table[data-part="table"] tr > :first-child { padding-left: 0; text-align: left; }
[data-r="sandbox"] > table[data-part="table"] thead th { height: 26px; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }
[data-r="sandbox"] > table[data-part="table"] tbody td:nth-child(2),
[data-r="sandbox"] > table[data-part="table"] tbody td:nth-child(3) { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="sandbox"]:not([data-open]) > table[data-part="table"] tbody td:nth-child(3) { color: var(--ink-3); }
[data-r="sandbox"] > table[data-part="table"] td[data-none] { color: var(--ink-3); }
[data-r="sandbox"] > table[data-part="table"] tr > :not(:first-child) { white-space: nowrap; }
[data-r="sandbox"] > table[data-part="table"] tbody tr:last-child > * { border-bottom: 0; }
[data-r="sandbox"] > [data-part="changes"] { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="sandbox"] > [data-part="changes"]:empty { display: none; }
[data-r="sandbox"] > [data-part="changes"] > li[data-none] { color: var(--ink-3); }
[data-r="grammar"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); display: flex; flex-direction: column; gap: 10px; min-width: 0; width: 100%; padding: 14px 16px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); }
[data-r="grammar"] > [data-part="edit"] { --ring-gap: var(--raised); position: relative; border: .5px solid var(--line-4); border-radius: var(--r-value); background: var(--raised); transition: border-color var(--state-out), box-shadow var(--ring-in) var(--ease-ring); }
@media (hover: hover) {
  [data-r="grammar"] > [data-part="edit"]:hover { border-color: var(--line-5); transition-duration: 0s; }
}
[data-r="grammar"] > [data-part="edit"][data-force~="hover"] { border-color: var(--line-5); transition-duration: 0s; }
[data-r="grammar"] > [data-part="edit"]:is(:focus-within, [data-force~="focus"]) { border-color: transparent; box-shadow: var(--ring-field); }
[data-r="grammar"][data-invalid] > [data-part="edit"]:not(:focus-within) { border-color: var(--danger); }
[data-r="grammar"][data-invalid] > [data-part="edit"]:focus-within { border-color: transparent; box-shadow: var(--ring-field-danger); }
[data-r="grammar"] > [data-part="edit"] > :is(textarea, [data-part="mirror"]) { display: block; width: 100%; min-height: 66px; margin: 0; padding: 10px 12px; border: 0; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-450); letter-spacing: 0; white-space: pre-wrap; overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
[data-r="grammar"] > [data-part="edit"] > textarea { position: relative; z-index: 1; resize: vertical; outline: none; background: transparent; color: transparent; caret-color: var(--ink); }
[data-r="grammar"] > [data-part="edit"] > textarea::selection { background: var(--selection); color: transparent; }
[data-r="grammar"] > [data-part="edit"] > [data-part="mirror"] { position: absolute; inset: 0; overflow: hidden; color: var(--ink-2); pointer-events: none; }
[data-r="grammar"] [data-token="length"],
[data-r="grammar"] [data-token="repeat"] { font-weight: var(--fw-550); color: var(--ink); }
[data-r="grammar"] [data-token="target"] { font-weight: var(--fw-550); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-4); text-underline-offset: 4px; }
[data-r="grammar"] [data-token="word"] { color: var(--ink-2); }
[data-r="grammar"] [data-token="joint"] { color: var(--ink-3); }
[data-r="grammar"] > [data-part="reads"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="grammar"] > [data-part="reads"] > span { margin-right: 4px; color: var(--ink-3); }
[data-r="grammar"] > [data-part="errors"]:empty { display: none; }
[data-r="grammar"] > [data-part="errors"] > p { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--danger-ink); }
[data-r="grammar"] > [data-part="errors"] > p > svg[data-icon] { flex: none; width: var(--icon-14); height: var(--icon-14); margin-top: 1.5px; }
[data-r="grammar"] > [data-r="plot"] { height: 120px; }
[data-r="grammar"] > [data-part="figures"] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 22px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="grammar"] > [data-part="figures"] > span { display: flex; flex-direction: column; gap: 1px; }
[data-r="grammar"] > [data-part="figures"] b { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="number-grammar"] { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
[data-r="number-grammar"] > [data-part="try"] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
[data-r="number-grammar"] > [data-part="result"] { min-height: var(--lh-16); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; white-space: pre; }
[data-r="number-grammar"] > [data-part="rule"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
@media (max-width: 480px) {
  [data-r="sandbox"] > table[data-part="table"],
  [data-r="sandbox"] > table[data-part="table"] > :is(thead, tbody) { display: block; }
  [data-r="sandbox"] > table[data-part="table"] tr { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px 80px; border-bottom: var(--px) solid var(--line-1); }
  [data-r="sandbox"] > table[data-part="table"] tbody tr:last-child { border-bottom: 0; }
  [data-r="sandbox"] > table[data-part="table"] :is(th, td) { border-bottom: 0; }
  [data-r="sandbox"] > table[data-part="table"] tr > :first-child { grid-column: 1 / -1; height: auto; padding-top: 10px; }
  [data-r="sandbox"] > table[data-part="table"] thead tr > :first-child { display: none; }
  [data-r="sandbox"] > table[data-part="table"] tr > :nth-child(2) { grid-column-start: 2; }
}
@media (max-width: 640px) {
  [data-r="reschedule"] > [data-part="days"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-r="delta"][data-noise] { flex-wrap: wrap; white-space: normal; }
  [data-r="delta"][data-noise] > b { min-width: 0; text-align: left; }
}
}

/* ═══ 74-charts.css ═══ */
@layer components {
[data-r="chart-card"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px 12px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); }
[data-r="chart-card"] > [data-part="header"] { display: flex; align-items: center; gap: 12px; min-height: var(--h-24); }
[data-r="chart-card"] > [data-part="header"] > [data-part="title"] { flex: 1; min-width: 0; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="chart-card"] > [data-part="header"] > [data-part="title"] > b { display: block; font-weight: var(--fw-550); }
[data-r="chart-card"] > [data-part="header"] > [data-part="title"] > span { display: block; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="chart-card"] > [data-part="header"] > :is([data-r="legend"], [data-r="segmented"]) { flex: none; }
[data-r="chart-card"] > [data-r="plot"] { touch-action: pan-y; }
[data-r="chart-card"] > [data-r="plot"] + [data-r="plot"] { margin-top: -4px; }
[data-r="chart-card"] > [data-r="plot"]:is([data-name="power"], [data-name="gut"]) { height: 190px; }
[data-r="chart-card"] > [data-r="plot"][data-name="wbal"] { height: 104px; }
[data-r="chart-card"] > [data-r="plot"][data-name="load"] { height: 180px; }
[data-r="chart-card"] > [data-r="plot"][data-name="form"] { height: 92px; }
[data-r="chart-card"] > [data-r="plot"][data-name="weeks"] { height: 200px; }
[data-r="chart-card"] > [data-r="plot"][data-name="curve"] { height: 210px; }
[data-r="chart-card"] > [data-r="plot"][data-name="days"] { height: 132px; }
[data-r="chart-card"] > [data-r="plot"][data-name="line"] { height: 188px; }
[data-r="chart-card"] > [data-r="plot"][data-name="ghost"] { height: 170px; }
[data-r="chart-card"] > [data-r="plot"][data-name="notes"] { height: 120px; margin-top: 6px; }
[data-r="chart-card"] > [data-part="figures"],
[data-r="chart-card"] > [data-part="selection"] > [data-part="figures"] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 20px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="chart-card"] > [data-part="figures"] { padding-top: 8px; border-top: var(--px) solid var(--line-1); }
:is([data-r="chart-card"] > [data-part="figures"], [data-r="chart-card"] > [data-part="selection"] > [data-part="figures"]) b { display: flex; align-items: center; gap: 5px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="chart-card"] > [data-part="selection"] { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: var(--px) solid var(--line-1); }
[data-r="chart-card"] > [data-part="selection"] > [data-part="figures"] { min-height: 34px; }
[data-r="chart-card"] > [data-part="selection"] [data-part="hint"] { align-self: center; margin: 0; }
[data-r="chart-card"] > [data-part="selection"] [data-clear-span] { margin-left: auto; align-self: center; }
[data-r="chart-card"] > [data-part="reps"] { display: flex; flex-direction: column; }
[data-r="chart-card"] > [data-part="reps"] > [data-part="rep"] { display: grid; grid-template-columns: 52px 64px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 30px; border-bottom: var(--px) solid var(--line-1); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="chart-card"] > [data-part="reps"] > [data-part="rep"]:last-child { border-bottom: 0; }
[data-r="chart-card"] > [data-part="reps"] > [data-part="rep"] > b { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
[data-r="chart-card"] > [data-part="notes"] { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
[data-r="chart-card"] > [data-part="notes"] > li { display: flex; gap: 10px; padding: 8px; border-radius: var(--r-row); transition: background-color var(--state-out); }
[data-r="chart-card"] > [data-part="notes"] > li[data-on] { background: var(--plane-hover); transition-duration: 0s; }
[data-r="chart-card"] > [data-part="notes"] [data-part="n"] { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-round); background: var(--ink); color: var(--raised); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-550); font-variant-numeric: tabular-nums; }
[data-r="chart-card"] > [data-part="notes"] [data-part="meta"] { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="chart-card"] > [data-part="notes"] [data-part="meta"] > b { font-weight: var(--fw-550); color: var(--ink); }
[data-r="chart-card"] > [data-part="notes"] p { margin: 3px 0 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); }
[data-r="chart-card"] > [data-part="table"] > [data-part="scroll"] { max-height: 280px; overflow: auto; }
[data-r="chart-card"] > [data-part="live"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[data-r="legend"] { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="legend"] > span { display: inline-flex; align-items: center; gap: 6px; }
[data-r="legend"] > span > i { display: inline-block; flex: none; width: 12px; height: 2px; border-radius: 1px; background: var(--c, var(--ink-2)); }
[data-r="legend"] > span > i:is([data-kind="dash"], [data-kind="estimate"]) { background: repeating-linear-gradient(90deg, var(--c, var(--ink-2)) 0 4px, transparent 4px 6px); }
[data-r="legend"] > span > i[data-kind="ref"] { height: 1px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--chart-reference) 0 3px, transparent 3px 5px); }
[data-r="legend"] > span > i[data-kind="block"] { width: 8px; height: 8px; border-radius: 2px; }
[data-r="legend"] > span > i[data-kind="area"] { height: 8px; border-radius: 2px; background: var(--c, var(--ink-2)); opacity: .25; }
[data-r="legend"] > span > i[data-kind="band"] { height: 8px; border-radius: 2px; background: var(--a10); }
[data-r="legend"] > span > i[data-kind="hatch"] { height: 8px; border-radius: 2px; background: repeating-linear-gradient(-45deg, var(--a20) 0 1.4px, transparent 1.4px 4px); }
[data-r="legend"] > span > i[data-kind="well"] { width: 8px; height: 8px; border-radius: 2px; background: var(--well); box-shadow: inset 0 0 0 var(--px) var(--line-2); }
[data-r="legend"] > [data-part="scale"] { gap: 3px; }
[data-r="legend"] > [data-part="scale"] > span { margin: 0 3px; }
}

/* ═══ 75-hand.css ═══ */
@layer components {
[data-r="sortable"] { position: relative; display: flex; flex-direction: column; }
[data-r="sortable"] > [data-part="item"]:is([data-lifted], [data-held]) { z-index: 3; background-color: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e3); }
[data-r="sortable"] > [data-part="item"][data-lifted] { pointer-events: none; }
[data-r="sortable"] > [data-part="slot"] { flex: none; box-sizing: border-box; border: var(--px) dashed var(--line-4); border-radius: var(--r-row); }
[data-r="sortable"] > [data-part="slot"] + [data-part="item"],
[data-r="sortable"] > [data-part="item"] + [data-part="slot"] { margin-top: 2px; }
[data-r="sortable"] [data-part="handle"] { display: grid; place-items: center; flex: none; width: 20px; height: var(--h-28); padding: 0; border: 0; border-radius: var(--r-press); background: transparent; color: var(--ink-4); cursor: grab; touch-action: none; transition: color var(--state-out); }
@media (hover: hover) {
  [data-r="sortable"] [data-part="handle"]:hover { color: var(--ink-2); transition-duration: 0s; }
}
[data-r="sortable"] [data-part="handle"][data-force~="hover"] { color: var(--ink-2); transition-duration: 0s; }
[data-r="sortable"] [data-part="handle"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="sortable"] [data-part="handle"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="sortable"] [data-part="handle"] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); }
}

/* ═══ 76-calendar-views.css ═══ */
@layer components {
[data-r="calendar-session"] { position: relative; display: flex; flex-direction: column; gap: 4px; flex: none; min-width: 0; padding: 7px 8px 8px; border-radius: var(--r-row); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); cursor: grab; user-select: none; -webkit-user-select: none; transition: background-color var(--state-out), box-shadow var(--state-out); }
[data-r="calendar-session"] > [data-part="head"] { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
[data-r="calendar-session"] > [data-part="head"] > [data-r="status"] { margin-top: 1.5px; }
[data-r="calendar-session"] [data-part="title"] { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-weight: var(--fw-500); color: var(--ink); }
[data-r="calendar-session"] > [data-part="meta"] { display: flex; align-items: center; gap: 6px; min-width: 0; padding-left: 20px; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="calendar-session"] > [data-part="meta"] > [data-part="rs"] { margin-left: auto; }
[data-r="calendar-session"] > [data-r="workout"] { margin-left: 20px; margin-top: 2px; }
[data-r="calendar-session"] > [data-part="sig"] { display: none; min-width: 0; padding-left: 20px; font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-r="calendar-session"] > [data-part="meta"] > [data-part="figs"] { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; flex: 1; min-width: 0; }
[data-r="calendar-session"] > [data-part="meta"] > [data-part="figs"] > * { white-space: nowrap; }
[data-r="calendar-session"] [data-part="figs"] > :is([data-part="power"], [data-part="zone"], [data-part="cho"], [data-part="wprime"]) { display: none; }
[data-r="calendar-session"] [data-part="figs"] > [data-part="wprime"][data-empty] { color: var(--ink); font-weight: var(--fw-500); }
[data-r="calendar-session"][aria-selected="true"] > [data-part="sig"] { color: var(--ink); }
[data-show] [data-r="calendar-session"] > [data-r="workout"],
[data-show] [data-r="calendar-session"] > [data-part="meta"] > :is([data-r="dot"], [data-part="rs"]),
[data-show] [data-r="calendar-session"] [data-part="figs"] > [data-part="duration"] { display: none; }
[data-show~="strip"] [data-r="calendar-session"] > [data-r="workout"] { display: flex; }
[data-show~="signature"] [data-r="calendar-session"] > [data-part="sig"] { display: block; }
[data-show~="intent"] [data-r="calendar-session"] > [data-part="meta"] > [data-r="dot"] { display: inline-block; }
[data-show~="duration"] [data-r="calendar-session"] [data-part="figs"] > [data-part="duration"],
[data-show~="power"] [data-r="calendar-session"] [data-part="figs"] > [data-part="power"],
[data-show~="zone"] [data-r="calendar-session"] [data-part="figs"] > [data-part="zone"],
[data-show~="cho"] [data-r="calendar-session"] [data-part="figs"] > [data-part="cho"],
[data-show~="wprime"] [data-r="calendar-session"] [data-part="figs"] > [data-part="wprime"],
[data-show~="rs"] [data-r="calendar-session"] > [data-part="meta"] > [data-part="rs"] { display: inline; }
[data-r="calendar-session"] > [data-part="meta"]:has(> [data-part="figs"]) { align-items: flex-start; }
[data-r="calendar-session"] > [data-part="meta"]:has(> [data-part="figs"]) > [data-r="dot"] { margin-top: 5px; }
@media (hover: hover) {
  [data-r="calendar-session"]:hover { background: var(--raised-hover); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e1); transition-duration: 0s; }
}
[data-r="calendar-session"][data-force~="hover"] { background: var(--raised-hover); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e1); transition-duration: 0s; }
[data-r="calendar-session"]:is([data-previewing], [data-detailed]) { background: var(--raised-hover); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e1); }
[data-r="calendar-session"][aria-selected="true"] { background: var(--raised-selected); }
[data-r="calendar-session"][aria-selected="true"] > [data-part="meta"] { color: var(--ink-2); }
[data-r="calendar-session"]:is([data-held], [data-lifted]) { z-index: 3; background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e3); }
[data-r="calendar-session"][data-lifted] { cursor: grabbing; pointer-events: none; }
[data-r="calendar-session"][data-lifted][data-leaving] { opacity: 0; transition: opacity var(--opacity-out) ease-out; }
[data-r="calendar-session"][data-state="missed"] { padding: 6px 7px 7px; border: var(--px) dashed var(--line-4); background: transparent; box-shadow: none; }
[data-r="calendar-session"][data-state="missed"] [data-part="title"] { color: var(--ink-2); }
@media (hover: hover) {
  [data-r="calendar-session"][data-state="missed"]:hover { background: var(--plane-hover); box-shadow: none; }
}
[data-r="calendar-session"][data-state="missed"][data-force~="hover"] { background: var(--plane-hover); box-shadow: none; }
[data-r="calendar-session"][data-size="line"] { flex-direction: row; align-items: center; gap: 4px; height: var(--h-20); padding: 0 6px 0 3px; box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)); font-size: var(--fs-11); line-height: var(--lh-11); }
@media (hover: hover) {
  [data-r="calendar-session"][data-size="line"]:hover { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)); }
}
[data-r="calendar-session"][data-size="line"][data-force~="hover"] { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)); }
[data-r="calendar-session"][data-size="line"]:is([data-held], [data-lifted]) { box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e3); }
[data-r="calendar-session"][data-size="line"][data-state="missed"] { padding: 0 5px 0 2px; box-shadow: none; }
[data-r="calendar-session"][data-size="line"] > [data-r="status"] { transform: scale(.86); margin: 0 -1px; }
[data-r="calendar-session"][data-size="line"] > [data-part="title"] { display: block; white-space: nowrap; text-overflow: ellipsis; }
[data-r="calendar-session"][data-size="line"] > [data-part="rs"] { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="calendar-session"][data-size="line"][aria-selected="true"] > [data-part="rs"] { color: var(--ink-2); }
[data-r="budget-bar"] { position: relative; display: block; flex: 1 1 auto; min-width: 48px; height: 6px; }
[data-r="budget-bar"][data-size="4"] { height: 4px; }
[data-r="budget-bar"] > [data-part="track"] { position: absolute; inset: 0; border-radius: var(--r-press); background: var(--well); box-shadow: inset 0 0 0 var(--px) var(--line-1); overflow: hidden; }
[data-r="budget-bar"] > [data-part="track"] > [data-part="done"] { position: absolute; top: 0; bottom: 0; left: 0; width: var(--done, 0%); background: var(--ch-load); transition: width var(--scale-in) var(--ease-expo); }
[data-r="budget-bar"] > [data-part="track"] > [data-part="planned"] { position: absolute; top: 0; bottom: 0; left: var(--done, 0%); width: calc(var(--total, 0%) - var(--done, 0%)); background: var(--ch-load-planned); transition: left var(--scale-in) var(--ease-expo), width var(--scale-in) var(--ease-expo); }
[data-r="budget-bar"] > [data-part="budget"] { position: absolute; top: -3px; bottom: -3px; left: var(--budget, 100%); width: 2px; margin-left: -1px; border-radius: var(--r-press); background: var(--ink); box-shadow: 0 0 0 var(--px) var(--plane); }
[data-r="budget-bar"] > [data-part="typical"] { position: absolute; top: -2px; bottom: -2px; left: var(--typical, 0%); width: 1px; background: var(--chart-reference); }
[data-r="move-cost"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px 12px; width: max-content; min-width: min(100%, 320px); max-width: 100%; padding: 12px 8px 12px 14px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); --origin: 0 100%; }
[data-r="move-cost"] > [data-part="head"] { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
[data-r="move-cost"] > [data-part="head"] > b { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="move-cost"] > [data-part="head"] > span { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="move-cost"] > [data-part="actions"] { display: flex; align-items: center; gap: 4px; }
[data-r="move-cost"] > [data-part="rows"] { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(96px, auto) auto 12px auto minmax(0, 1fr); align-items: center; gap: 6px 8px; margin-right: 6px; padding-top: 10px; border-top: var(--px) solid var(--line-2); font-variant-numeric: tabular-nums; }
[data-r="move-cost"] [data-part="row"] { display: contents; }
[data-r="move-cost"] [data-part="row"] > [data-part="name"] { padding-right: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-r="move-cost"] [data-part="row"] > [data-part="before"] { justify-self: end; color: var(--ink-3); white-space: nowrap; }
[data-r="move-cost"] [data-part="row"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); color: var(--ink-4); }
[data-r="move-cost"] [data-part="row"] > [data-part="after"] { justify-self: start; font-weight: var(--fw-550); color: var(--ink); white-space: nowrap; }
[data-r="move-cost"] [data-part="row"] > [data-part="note"] { font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); white-space: nowrap; }
[data-r="week-grid"] { container: week-grid / inline-size; position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="week-grid"] > [data-part="head"] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
[data-r="week-grid"] > [data-part="head"] > [data-part="title"] { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="week-grid"] > [data-part="head"] > [data-part="range"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="week-grid"] > [data-part="head"] > [data-part="block"] { margin-left: auto; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="week-grid"] > [data-part="summary"] { display: grid; grid-template-columns: auto auto minmax(180px, 1fr) auto; gap: 10px 28px; margin: 0; padding: 2px 0 14px; border-bottom: var(--px) solid var(--line-2); }
[data-r="week-grid"] [data-part="stat"] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
[data-r="week-grid"] [data-part="stat"] > dt { font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-3); white-space: nowrap; }
[data-r="week-grid"] [data-part="stat"] > dd { display: flex; align-items: center; gap: 5px; min-height: 19px; margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="week-grid"] [data-part="stat"] > dd > b { font-weight: var(--fw-550); }
[data-r="week-grid"] [data-part="stat"] > dd > span { color: var(--ink-3); }
[data-r="week-grid"] [data-part="stat"] > dd > b + span { margin-right: 6px; }
[data-r="week-grid"] [data-part="stat"] > dd > [data-r="budget-bar"] { flex: 1 1 120px; max-width: 220px; margin-right: 6px; }
[data-r="week-grid"] [data-part="stat"] > dd > [data-part="budget-text"] { color: var(--ink-3); }
[data-r="week-grid"] [data-part="stat"] > dd > [data-part="budget-text"] > b { font-weight: var(--fw-550); color: var(--ink); }
[data-r="week-grid"] [data-part="progress"] { display: inline-flex; gap: 2px; margin-right: 6px; }
[data-r="week-grid"] [data-part="progress"] > i { width: 8px; height: 4px; border-radius: var(--r-press); background: var(--a10); }
[data-r="week-grid"] [data-part="progress"] > i[data-done] { background: var(--ink-2); }
[data-r="week-grid"] [data-part="progress"] > i[data-today] { background: var(--accent); }
[data-r="week-grid"] > [data-part="days"] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto minmax(168px, 1fr) auto; }
[data-r="week-grid"] [data-part="day"] { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; min-width: 0; border-left: var(--px) solid var(--line-1); transition: background-color var(--state-out); }
[data-r="week-grid"] [data-part="day"]:first-child { border-left: 0; }
[data-r="week-grid"] [data-part="day"][data-over] { background: var(--plane-hover); transition-duration: 0s; }
[data-r="week-grid"] [data-part="day-head"] { display: flex; align-items: center; gap: 5px; min-width: 0; height: var(--h-28); margin: 0 4px 6px; padding: 0 6px; border-radius: var(--r-row); font-size: var(--fs-12); line-height: var(--lh-12); white-space: nowrap; outline: none; transition: background-color var(--state-out); }
[data-r="week-grid"] [data-part="day-head"][aria-expanded="true"] { background: var(--plane-hover); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="week-grid"] [data-part="day-head"]:hover { background: var(--plane-hover); transition-duration: 0s; }
}
[data-r="week-grid"] [data-part="day-head"][data-force~="hover"] { background: var(--plane-hover); transition-duration: 0s; }
[data-r="week-grid"] [data-part="day-head"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="week-grid"] [data-part="day-head"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="week-grid"] [data-part="day-head"] > [data-part="weekday"] { font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="week-grid"] [data-part="day-head"] > [data-part="date"] { font-weight: var(--fw-500); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="week-grid"] [data-part="day"][data-today] [data-part="day-head"] > [data-part="date"] { font-weight: var(--fw-550); color: var(--accent-ink); }
[data-r="week-grid"] [data-part="day-head"] > [data-part="total"] { display: inline-flex; align-items: baseline; gap: 4px; margin-left: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="week-grid"] [data-part="day"][data-hard] [data-part="day-head"] > [data-part="total"] { font-weight: var(--fw-550); color: var(--ink-2); }
[data-r="week-grid"] [data-part="day"] [data-part="day-head"] > [data-part="total"][data-change] { font-weight: var(--fw-550); color: var(--ink); }
[data-r="week-grid"] [data-part="day-head"] > [data-part="total"] > [data-part="delta"] { font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="week-grid"] [data-part="lane"] { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 6px 10px; }
[data-r="week-grid"] [data-part="lane"] > [data-part="slot"] { flex: none; box-sizing: border-box; border: var(--px) dashed var(--line-4); border-radius: var(--r-row); }
[data-r="week-grid"] [data-part="lane"] > [data-part="reason"] { align-self: center; max-width: 100%; padding: 5px 8px; border-radius: var(--r-row); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e1); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-2); text-align: center; white-space: normal; }
[data-r="week-grid"] [data-part="day"][data-refuse] > [data-part="lane"] > [data-r="calendar-session"] { opacity: .6; }
[data-r="calendar-session"] + [data-part="match"] { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 20px; margin-top: -2px; padding: 0 2px 0 4px; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); white-space: nowrap; }
[data-r="calendar-session"] + [data-part="match"] > svg[data-icon] { flex: none; width: var(--icon-12); height: var(--icon-12); color: var(--ink-3); }
[data-r="calendar-session"] + [data-part="match"] > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-r="calendar-session"] + [data-part="match"][data-match="none"] > span { color: var(--ink-2); }
[data-r="calendar-session"] + [data-part="match"][data-match="none"] { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 2px; }
[data-r="calendar-session"] + [data-part="match"] > [data-r="button"] { margin-left: -6px; }
[data-r="week-grid"] [data-part="context"] { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 28px; margin: 0 6px; padding: 6px 2px; border-top: var(--px) solid var(--line-1); font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); white-space: nowrap; overflow: hidden; }
[data-r="week-grid"] [data-part="context"] > svg[data-icon] { flex: none; width: var(--icon-12); height: var(--icon-12); }
[data-r="week-grid"] > [data-part="next"] { display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--row-40); border: var(--px) dashed var(--line-4); border-radius: var(--r-row); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-2); transition: background-color var(--state-out), color var(--state-out); }
[data-r="week-grid"] > [data-part="next"] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); color: var(--ink-3); }
[data-r="week-grid"] > [data-part="next"] > small { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="week-grid"] > [data-part="next"][data-over] { border-color: var(--line-5); background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
[data-r="week-grid"] > [data-r="move-cost"] { align-self: flex-start; }
@container week-grid (max-width: 699px) {
  [data-r="week-grid"] > [data-part="summary"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-r="week-grid"] > [data-part="head"] > [data-part="block"] { flex-basis: 100%; margin-left: 0; }
  [data-r="week-grid"] > [data-part="days"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  [data-r="week-grid"] [data-part="day"] { display: flex; flex-direction: column; grid-row: auto; border-left-width: 0; border-top: var(--px) solid var(--line-1); padding-top: 6px; }
  [data-r="week-grid"] [data-part="day"]:first-child { border-top: 0; padding-top: 0; }
  [data-r="week-grid"] [data-part="day-head"] { margin-bottom: 4px; }
  [data-r="week-grid"] [data-part="lane"] { padding-bottom: 6px; }
  [data-r="week-grid"] [data-part="context"] { border-top: 0; min-height: 0; padding-top: 0; }
  [data-r="week-grid"] [data-part="context"]:empty { display: none; }
  [data-r="week-grid"] [data-r="calendar-session"]:not([data-size]) { flex-direction: row; align-items: center; gap: 8px; }
  [data-r="week-grid"] [data-r="calendar-session"]:not([data-size]) > [data-part="head"] { flex: 1; align-items: center; }
  [data-r="week-grid"] [data-r="calendar-session"]:not([data-size]) > [data-part="head"] > [data-r="status"] { margin-top: 0; }
  [data-r="week-grid"] [data-r="calendar-session"]:not([data-size]) [data-part="title"] { -webkit-line-clamp: 1; }
  [data-r="week-grid"] [data-r="calendar-session"]:not([data-size]) > [data-r="workout"] { flex: 0 0 auto; width: 96px; margin: 0; }
  [data-r="week-grid"][data-workout-axis]:not([data-workout-axis="off"]) [data-r="calendar-session"]:not([data-size]) > [data-r="workout"] { width: calc(var(--total, 60) * var(--ppm-row, 0.4) * 1px); }
  [data-r="week-grid"] [data-r="calendar-session"]:not([data-size]) > [data-part="sig"] { flex: none; padding-left: 0; }
  [data-r="week-grid"] [data-r="calendar-session"]:not([data-size]) > [data-part="meta"] { flex: none; }
  [data-r="week-grid"] [data-r="calendar-session"]:not([data-size]) > [data-part="meta"] { flex: none; gap: 8px; padding-left: 0; }
}
[data-r="calendar-session"][data-layout="row"] { flex-direction: row; align-items: center; gap: 8px; }
[data-r="calendar-session"][data-layout="row"] > [data-part="head"] { flex: 1; align-items: center; }
[data-r="calendar-session"][data-layout="row"] > [data-part="head"] > [data-r="status"] { margin-top: 0; }
[data-r="calendar-session"][data-layout="row"] [data-part="title"] { -webkit-line-clamp: 1; }
[data-r="calendar-session"][data-layout="row"] > [data-part="meta"] { flex: none; gap: 8px; padding-left: 0; }
[data-r="month-grid"] { --week-w: 96px; container: month-grid / inline-size; position: relative; display: flex; flex-direction: column; gap: 0; min-width: 0; color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); }
[data-r="month-grid"] > [data-part="head"] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; }
[data-r="month-grid"] > [data-part="head"] > [data-part="title"] { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="month-grid"] > [data-part="head"] > [data-part="range"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="month-grid"] > [data-part="weekdays"],
[data-r="month-grid"] > [data-part="week"] { display: grid; grid-template-columns: var(--week-w) repeat(7, minmax(0, 1fr)); }
[data-r="month-grid"] > [data-part="weekdays"] { border-bottom: var(--px) solid var(--line-2); }
[data-r="month-grid"] > [data-part="weekdays"] > span { padding: 0 8px 6px; font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="month-grid"] > [data-part="weekdays"] > span:first-child { padding-left: 0; }
[data-r="month-grid"] > [data-part="week"] { min-height: 116px; border-bottom: var(--px) solid var(--line-2); }
[data-r="month-grid"] [data-part="week-head"] { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 12px 8px 0; font-variant-numeric: tabular-nums; }
[data-r="month-grid"] [data-part="week-head"] > b { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-550); color: var(--ink); }
[data-r="month-grid"] [data-part="week-head"] > [data-part="total"] { display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }
[data-r="month-grid"] [data-part="week-head"] > [data-part="total"] > b { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-550); color: var(--ink-2); }
[data-r="month-grid"] [data-part="week-head"] > [data-part="total"][data-change] > b { color: var(--ink); }
[data-r="month-grid"] [data-part="week-head"] > [data-part="total"] > [data-part="delta"] { color: var(--ink-3); }
[data-r="month-grid"] [data-part="week-head"] > [data-r="budget-bar"] { flex: none; margin-top: 2px; }
[data-r="month-grid"] [data-part="day"] { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px 4px 6px; border-left: var(--px) solid var(--line-1); transition: background-color var(--state-out); }
[data-r="month-grid"] [data-part="day"][data-over] { background: var(--plane-hover); outline: var(--px) dashed var(--line-4); outline-offset: -3px; transition-duration: 0s; }
[data-r="month-grid"] [data-part="day-head"] { display: flex; align-items: center; justify-content: center; align-self: flex-start; flex: none; min-width: 24px; height: var(--h-20); margin-bottom: 2px; padding: 0 5px; border-radius: var(--r-press); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-2); font-variant-numeric: tabular-nums; outline: none; transition: background-color var(--state-out); }
[data-r="month-grid"] [data-part="day-head"][aria-expanded="true"] { background: var(--plane-hover); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="month-grid"] [data-part="day-head"]:hover { background: var(--plane-hover); transition-duration: 0s; }
}
[data-r="month-grid"] [data-part="day-head"][data-force~="hover"] { background: var(--plane-hover); transition-duration: 0s; }
[data-r="month-grid"] [data-part="day-head"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="month-grid"] [data-part="day-head"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="month-grid"] [data-part="day"][data-today] > [data-part="day-head"] { font-weight: var(--fw-550); color: var(--accent-ink); }
[data-r="month-grid"] [data-part="day"][data-outside] > [data-part="day-head"] { color: var(--ink-disabled); }
[data-r="month-grid"] [data-part="lane"] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-r="month-grid"] [data-part="lane"] > [data-overflow] { display: none; }
[data-r="month-grid"] [data-part="more"] { display: flex; align-items: center; align-self: flex-start; flex: none; height: var(--h-20); padding: 0 6px; border-radius: var(--r-row); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-2); transition: background-color var(--state-out); }
[data-r="month-grid"] [data-part="more"][aria-expanded="true"] { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="month-grid"] [data-part="more"]:hover { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="month-grid"] [data-part="more"][data-force~="hover"] { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
[data-r="month-grid"] [data-part="more"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="month-grid"] [data-part="more"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="month-grid"] > [data-r="move-cost"] { margin-top: 12px; }
[data-r="popover"] > [data-part="day-list"] { display: flex; flex-direction: column; gap: 4px; width: 220px; }
[data-r="popover"] > [data-part="day-list"] > [data-r="calendar-session"] { flex: none; }
@container month-grid (max-width: 619px) {
  [data-r="month-grid"] > :is([data-part="weekdays"], [data-part="week"]) { --week-w: 40px; }
  [data-r="month-grid"] [data-part="week-head"] { padding-right: 6px; }
  [data-r="month-grid"] [data-part="week-head"] [data-part="word"],
  [data-r="month-grid"] [data-part="week-head"] > [data-part="total"] > span,
  [data-r="month-grid"] > [data-part="weekdays"] > span:first-child { visibility: hidden; }
  [data-r="month-grid"] [data-part="week-head"] [data-part="word"],
  [data-r="month-grid"] [data-part="week-head"] > [data-part="total"] > span { display: none; }
  [data-r="month-grid"] [data-part="day"] { align-items: center; padding: 4px 2px 6px; }
  [data-r="month-grid"] [data-part="day-head"] { align-self: center; }
  [data-r="month-grid"] [data-part="lane"] { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px; }
  [data-r="month-grid"] [data-part="lane"] > [data-r="calendar-session"] { padding: 0; background: transparent; box-shadow: none; border: 0; }
  [data-r="month-grid"] [data-part="lane"] > [data-r="calendar-session"] > :not([data-r="status"]) { display: none; }
  [data-r="month-grid"] [data-part="lane"] > [data-overflow] { display: flex; }
  [data-r="month-grid"] [data-part="more"] { display: none; }
}
[data-r="season-grid"] { --cell: 22px; --r1: var(--scale-rank-1); --r2: var(--scale-rank-2); --r3: var(--scale-rank-3); --r4: var(--scale-rank-4); container: season-grid / inline-size; display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); }
[data-r="season-grid"] > [data-part="head"] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
[data-r="season-grid"] > [data-part="head"] > [data-part="title"] { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="season-grid"] > [data-part="head"] > [data-part="range"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="season-grid"] > [data-part="grid"] { display: flex; flex-direction: column; gap: 3px; outline: none; }
[data-r="season-grid"] [data-part="weekdays"],
[data-r="season-grid"] [data-part="week"] { display: grid; grid-template-columns: 72px repeat(7, var(--cell)) minmax(0, 1fr); align-items: center; column-gap: 3px; }
[data-r="season-grid"] [data-part="weekdays"] { margin-bottom: 2px; font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="season-grid"] [data-part="weekdays"] > span { text-align: center; }
[data-r="season-grid"] [data-part="weekdays"] > span:first-child,
[data-r="season-grid"] [data-part="weekdays"] > span:last-child { text-align: left; }
[data-r="season-grid"] [data-part="weekdays"] > span:last-child { padding-left: 16px; }
[data-r="season-grid"] [data-part="block"] { display: flex; align-items: flex-end; height: 28px; padding-bottom: 5px; font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="season-grid"] [data-part="weekdays"] + [data-part="block"] { height: 20px; }
[data-r="season-grid"] [data-part="label"] { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="season-grid"] [data-part="label"] > b { min-width: 16px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-2); }
[data-r="season-grid"] [data-part="week"][data-current] [data-part="label"] > b { font-weight: var(--fw-550); color: var(--ink); }
@media (hover: hover) {
  [data-r="season-grid"] [data-part="week"]:is(:hover, :focus-within) [data-part="label"] > b { color: var(--ink); }
}
[data-r="season-grid"] [data-part="week"]:is([data-force~="hover"], :focus-within) [data-part="label"] > b { color: var(--ink); }
[data-r="season-grid"] [data-part="cell"] { position: relative; display: block; width: var(--cell); height: var(--cell); border-radius: var(--r-key); background: var(--well); box-shadow: inset 0 0 0 var(--px) var(--line-1); outline: none; }
[data-r="season-grid"] [data-part="cell"][data-step="1"] { background: var(--r1); box-shadow: none; }
[data-r="season-grid"] [data-part="cell"][data-step="2"] { background: var(--r2); box-shadow: none; }
[data-r="season-grid"] [data-part="cell"][data-step="3"] { background: var(--r3); box-shadow: none; }
[data-r="season-grid"] [data-part="cell"][data-step="4"] { background: var(--r4); box-shadow: none; }
[data-r="season-grid"] [data-part="cell"][data-state="planned"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--r1); }
[data-r="season-grid"] [data-part="cell"][data-state="planned"][data-step="2"] { box-shadow: inset 0 0 0 1.5px var(--r2); }
[data-r="season-grid"] [data-part="cell"][data-state="planned"][data-step="3"] { box-shadow: inset 0 0 0 1.5px var(--r3); }
[data-r="season-grid"] [data-part="cell"][data-state="planned"][data-step="4"] { box-shadow: inset 0 0 0 1.5px var(--r4); }
[data-r="season-grid"] [data-part="cell"][data-state="missed"] { background: transparent; border: var(--px) dashed var(--ink-4); box-shadow: none; }
[data-r="season-grid"] [data-part="cell"][data-today]::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -3px; height: 2px; border-radius: var(--r-press); background: var(--accent); }
@media (hover: hover) {
  [data-r="season-grid"] [data-part="cell"]:hover { outline: 1px solid var(--ink-3); outline-offset: 1px; }
}
[data-r="season-grid"] [data-part="cell"][data-force~="hover"] { outline: 1px solid var(--ink-3); outline-offset: 1px; }
[data-r="season-grid"] [data-part="cell"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
[data-r="season-grid"] [data-part="cell"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 1px; }
[data-r="season-grid"] [data-part="total"] { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 16px; }
[data-r="season-grid"] [data-part="total"] > [data-r="budget-bar"] { max-width: 240px; }
[data-r="season-grid"] [data-part="total"] > [data-part="figure"] { flex: none; min-width: 28px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
[data-r="season-grid"] [data-part="total"] > [data-part="figure"][data-over] { font-weight: var(--fw-550); color: var(--ink); }
[data-r="season-grid"] > [data-part="legend"] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 12px; border-top: var(--px) solid var(--line-1); font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }
[data-r="season-grid"] [data-part="key"] { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
[data-r="season-grid"] [data-part="key"] > small { font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="season-grid"] [data-part="swatch"] { position: relative; flex: none; width: 12px; height: 12px; border-radius: var(--r-key); background: var(--well); box-shadow: inset 0 0 0 var(--px) var(--line-1); }
[data-r="season-grid"] [data-part="swatch"][data-step="1"] { background: var(--r1); box-shadow: none; }
[data-r="season-grid"] [data-part="swatch"][data-step="2"] { background: var(--r2); box-shadow: none; }
[data-r="season-grid"] [data-part="swatch"][data-step="3"] { background: var(--r3); box-shadow: none; }
[data-r="season-grid"] [data-part="swatch"][data-step="4"] { background: var(--r4); box-shadow: none; }
[data-r="season-grid"] [data-part="swatch"][data-state="planned"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--r3); }
[data-r="season-grid"] [data-part="swatch"][data-state="missed"] { background: transparent; border: var(--px) dashed var(--ink-4); box-shadow: none; }
[data-r="season-grid"] [data-part="swatch"][data-today] { background: transparent; box-shadow: none; }
[data-r="season-grid"] [data-part="swatch"][data-today]::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 2px; border-radius: var(--r-press); background: var(--accent); }
[data-r="season-grid"] [data-part="mark"] { flex: none; width: 2px; height: 12px; border-radius: var(--r-press); background: var(--ink); }
[data-r="season-grid"] [data-part="mark"][data-kind="typical"] { width: 1px; border-radius: 0; background: var(--chart-reference); }
@container season-grid (max-width: 519px) {
  [data-r="season-grid"] > :is([data-part="grid"], [data-part="legend"]) { --cell: 18px; }
  [data-r="season-grid"] :is([data-part="weekdays"], [data-part="week"]) { grid-template-columns: 40px repeat(7, var(--cell)) minmax(0, 1fr); }
  [data-r="season-grid"] [data-part="label"] > span { display: none; }
  [data-r="season-grid"] [data-part="total"] > [data-r="budget-bar"] { display: none; }
  [data-r="season-grid"] [data-part="weekdays"] > span:last-child { padding-left: 10px; }
  [data-r="season-grid"] [data-part="total"] { justify-content: flex-start; padding-left: 10px; }
}
}

/* ═══ 77-timeline.css ═══ */
@layer components {
[data-r="timeline"] { --name-w: 184px; --row-h: var(--row-36); --axis-h: 48px; --dpx: 8px; container: timeline / inline-size; position: relative; display: flex; flex-direction: column; min-width: 0; color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="timeline"] > [data-part="head"] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 40px; padding-bottom: 8px; }
[data-r="timeline"] > [data-part="head"] > [data-part="title"] { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); }
[data-r="timeline"] > [data-part="head"] > [data-part="range"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="timeline"] > [data-part="head"] > [data-part="spacer"] { flex: 1; }
[data-r="timeline"] > [data-part="viewport"] { position: relative; overflow: auto hidden; overscroll-behavior-x: contain; border-top: var(--px) solid var(--line-2); border-bottom: var(--px) solid var(--line-2); outline: none; }
[data-r="timeline"] > [data-part="viewport"]:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
[data-r="timeline"] > [data-part="viewport"][data-force~="focus"] { box-shadow: inset 0 0 0 1px var(--accent); }
[data-r="timeline"] [data-part="canvas"] { position: relative; width: calc(var(--name-w) + var(--days) * var(--dpx)); min-width: 100%; }
[data-r="timeline"] [data-part="axis"] { position: sticky; top: 0; z-index: 2; display: flex; height: var(--axis-h); background: var(--plane); border-bottom: var(--px) solid var(--line-2); }
[data-r="timeline"] [data-part="corner"] { position: sticky; left: 0; z-index: 3; flex: none; display: flex; align-items: flex-end; width: var(--name-w); padding: 0 12px 8px 16px; background: var(--plane); border-right: var(--px) solid var(--line-2); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="timeline"] [data-part="scale"] { position: relative; flex: none; width: calc(var(--days) * var(--dpx)); overflow: hidden; }
[data-r="timeline"] [data-part="scale"] > [data-part="upper"] > span { position: absolute; top: 7px; left: calc(var(--d) * var(--dpx)); padding-left: 6px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-2); white-space: nowrap; }
[data-r="timeline"] [data-part="scale"] > [data-part="upper"] > span::before { content: ""; position: absolute; left: 0; top: -7px; height: var(--axis-h); width: 1px; background: var(--line-2); }
[data-r="timeline"] [data-part="scale"] > [data-part="lower"] > span { position: absolute; top: 27px; left: calc(var(--d) * var(--dpx)); width: calc(var(--n, 1) * var(--dpx)); font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; }
[data-r="timeline"] [data-part="scale"] > [data-part="lower"][data-align="start"] > span { padding-left: 5px; text-align: left; }
[data-r="timeline"] [data-part="scale"] > [data-part="lower"] > span[data-covered] { visibility: hidden; }
[data-r="timeline"] [data-part="scale"] > [data-part="lower"] > span[data-today] { font-weight: var(--fw-550); color: var(--accent-ink); }
[data-r="timeline"][data-zoom="weeks"] [data-part="scale"] > [data-part="today-label"] { display: none; }
[data-r="timeline"] [data-part="scale"] > [data-part="today-label"] { position: absolute; z-index: 1; bottom: 4px; left: calc((var(--today) + .5) * var(--dpx)); translate: -50% 0; padding: 0 5px; border-radius: var(--r-press); background: var(--accent); color: var(--on-accent); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-550); white-space: nowrap; pointer-events: none; }
[data-r="timeline"] [data-part="lines"] { position: absolute; z-index: 0; top: var(--axis-h); bottom: 0; left: var(--name-w); width: calc(var(--days) * var(--dpx)); pointer-events: none; }
[data-r="timeline"] [data-part="lines"] > span { position: absolute; top: 0; bottom: 0; left: calc(var(--d) * var(--dpx)); width: 1px; background: var(--line-1); }
[data-r="timeline"] [data-part="lines"] > span[data-kind="month"] { background: var(--line-2); }
[data-r="timeline"] [data-part="row"] { position: relative; display: flex; height: var(--row-h); border-bottom: var(--px) solid var(--line-1); }
[data-r="timeline"] [data-part="row"]:last-of-type { border-bottom: 0; }
[data-r="timeline"] [data-part="name"] { position: sticky; left: 0; z-index: 2; flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; width: var(--name-w); padding: 0 12px 0 16px; background: var(--plane); border-right: var(--px) solid var(--line-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-500); color: var(--ink); }
[data-r="timeline"] [data-part="name"] > [data-part="label"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="timeline"] [data-part="name"] > [data-part="meta"] { margin-left: auto; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="timeline"] [data-part="row"][data-kind="marks"] [data-part="name"] { font-weight: var(--fw-450); color: var(--ink-2); }
[data-r="timeline"] [data-part="track"] { position: relative; z-index: 1; flex: none; width: calc(var(--days) * var(--dpx)); }
[data-r="timeline"] [data-part="bar"] { position: absolute; top: 6px; left: calc(var(--d) * var(--dpx)); display: flex; align-items: center; gap: 6px; width: max(8px, calc(var(--n) * var(--dpx))); height: var(--h-24); padding: 0 10px; box-sizing: border-box; border-radius: var(--r-row); background: var(--scale-rank-1); color: var(--scale-rank-1-on); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); white-space: nowrap; overflow: clip; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; transition: box-shadow var(--state-out); }
[data-r="timeline"] [data-part="bar"][data-step="2"] { background: var(--scale-rank-2); color: var(--scale-rank-2-on); }
[data-r="timeline"] [data-part="bar"][data-step="3"] { background: var(--scale-rank-3); color: var(--scale-rank-3-on); }
[data-r="timeline"] [data-part="bar"][data-step="4"] { background: var(--scale-rank-4); color: var(--scale-rank-4-on); }
[data-r="timeline"] [data-part="bar"][data-step="rest"] { background: var(--well); color: var(--ink-2); box-shadow: inset 0 0 0 var(--px) var(--line-3); }
[data-r="timeline"] [data-part="bar"] > [data-part="text"] { position: sticky; left: calc(var(--name-w) + 10px); display: flex; align-items: center; gap: 6px; min-width: 0; }
[data-r="timeline"] [data-part="bar"] [data-part="label"] { flex: none; }
[data-r="timeline"] [data-part="bar"] [data-part="dates"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-450); font-variant-numeric: tabular-nums; }
[data-r="timeline"] [data-part="bar"] > [data-part="edge"] { position: absolute; z-index: 1; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
[data-r="timeline"] [data-part="bar"] > [data-part="edge"][data-side="start"] { left: 0; }
[data-r="timeline"] [data-part="bar"] > [data-part="edge"][data-side="end"] { right: 0; }
[data-r="timeline"] [data-part="bar"] > [data-part="edge"]::after { content: ""; position: absolute; top: 7px; bottom: 7px; left: 3px; width: 2px; border-radius: var(--r-press); background: currentColor; opacity: 0; transition: opacity var(--state-out); }
@media (hover: hover) {
  [data-r="timeline"] [data-part="bar"]:is(:hover, :focus-visible, [data-held]) > [data-part="edge"]::after { opacity: .5; transition-duration: 0s; }
}
[data-r="timeline"] [data-part="bar"]:is([data-force~="hover"], :focus-visible, [data-held]) > [data-part="edge"]::after { opacity: .5; transition-duration: 0s; }
@media (hover: hover) {
  [data-r="timeline"] [data-part="bar"]:hover { box-shadow: 0 0 0 var(--px) var(--line-4); transition-duration: 0s; }
}
[data-r="timeline"] [data-part="bar"][data-force~="hover"] { box-shadow: 0 0 0 var(--px) var(--line-4); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="timeline"] [data-part="bar"][data-step="rest"]:hover { box-shadow: inset 0 0 0 var(--px) var(--line-4); }
}
[data-r="timeline"] [data-part="bar"][data-step="rest"][data-force~="hover"] { box-shadow: inset 0 0 0 var(--px) var(--line-4); }
[data-r="timeline"] [data-part="bar"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
[data-r="timeline"] [data-part="bar"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 1px; }
[data-r="timeline"] [data-part="bar"][data-held] { z-index: 2; box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e3); }
[data-r="timeline"] [data-part="milestone"] { position: absolute; top: 6px; left: calc((var(--d) + .5) * var(--dpx)); display: flex; align-items: center; gap: 6px; height: var(--h-24); margin-left: -10px; padding: 0 6px 0 3px; border-radius: var(--r-press); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-2); white-space: nowrap; transition: background-color var(--state-out), color var(--state-out); }
@media (hover: hover) {
  [data-r="timeline"] [data-part="milestone"]:hover { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="timeline"] [data-part="milestone"][data-force~="hover"] { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
[data-r="timeline"] [data-part="milestone"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="timeline"] [data-part="milestone"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="timeline"] [data-part="milestone"][data-compact] { padding-right: 3px; }
[data-r="timeline"] [data-part="milestone"][data-compact] > [data-part="label"] { display: none; }
[data-r="timeline"] [data-part="milestone"] > [data-part="diamond"] { flex: none; width: 10px; height: 10px; margin: 0 2px; background: var(--ink); transform: rotate(45deg); }
[data-r="timeline"] [data-part="today"] { position: absolute; z-index: 1; top: var(--axis-h); bottom: 0; left: calc(var(--name-w) + (var(--today) + .5) * var(--dpx)); width: 1px; background: var(--accent); pointer-events: none; }
@container timeline (max-width: 559px) {
  [data-r="timeline"] > [data-part="viewport"] { --name-w: 124px; }
  [data-r="timeline"] [data-part="name"] { padding: 0 8px 0 12px; }
  [data-r="timeline"] [data-part="name"] > [data-part="meta"] { display: none; }
  [data-r="timeline"] [data-part="corner"] { padding-left: 12px; }
}
}

/* ═══ 78-detail.css ═══ */
@layer components {
[data-r="title-block"] { display: flex; flex-direction: column; min-width: 0; max-width: var(--col-prose); }
[data-r="title-block"] > [data-part="eyebrow"] { display: flex; align-items: center; gap: 8px; min-height: 20px; margin-bottom: 4px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="title-block"] > [data-part="eyebrow"] > [data-part="id"] { font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="title-block"] > [data-part="eyebrow"] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); color: var(--ink-3); }
[data-r="title-block"] > [data-part="title"] { min-height: 30px; margin: 0 0 0 -6px; padding: 0 6px; border-radius: var(--r-value); color: var(--ink); font-size: var(--fs-24); line-height: var(--lh-24); font-weight: var(--fw-550); text-wrap: balance; overflow-wrap: break-word; outline: none; cursor: text; transition: background-color var(--state-out), box-shadow var(--ring-in) var(--ease-ring); }
[data-r="title-block"] > [data-part="title"]:not([contenteditable]) { cursor: auto; }
@media (hover: hover) {
  [data-r="title-block"] > [data-part="title"][contenteditable]:hover:not(:focus) { background-color: var(--plane-hover); transition-duration: 0s; }
}
[data-r="title-block"] > [data-part="title"][contenteditable][data-force~="hover"]:not(:focus) { background-color: var(--plane-hover); transition-duration: 0s; }
[data-r="title-block"] > [data-part="title"]:is(:focus, [data-force~="focus"]) { background-color: transparent; box-shadow: var(--ring-inline); }
[data-r="title-block"] > [data-part="title"]:empty::before { content: attr(data-placeholder); color: var(--ink-3); pointer-events: none; }
[data-r="title-block"] > [data-part="summary"] { margin-top: 4px; font-size: var(--fs-15); line-height: var(--lh-15); color: var(--ink-2); text-wrap: pretty; }
[data-r="title-block"] > [data-part="meta"] { margin-top: 4px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); text-wrap: pretty; }
[data-r="title-block"] > [data-part="properties"] { margin-top: 12px; }
[data-r="title-block"] [data-r="fact"] > [data-r="status"] { width: 14px; height: 14px; margin-right: 4px; }
[data-r="title-block"] [data-r="fact"]:has(> [data-r="status"]:first-child) { padding-left: 5px; }
[data-r="update-card"] { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 12px 12px 16px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="update-card"] > *,
[data-r="latest-update"] > [data-part="writer"] > * { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); --ring-gap: var(--raised); }
[data-r="update-card"] > [data-part="head"] { display: flex; align-items: center; gap: 8px; min-height: var(--h-24); min-width: 0; }
[data-r="update-card"] > [data-part="head"] > [data-part="author"] { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: var(--fw-500); color: var(--ink); white-space: nowrap; }
[data-r="update-card"] > [data-part="head"] > time { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); white-space: nowrap; }
[data-r="update-card"] > [data-part="head"] > [data-part="menu"] { margin-left: auto; }
[data-r="update-card"] > [data-r="prose"] { max-width: none; padding-right: 4px; }
[data-r="update-card"] > [data-part="foot"] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; }
[data-r="update-card"] > [data-part="foot"] > [data-part="comments"] { margin-left: auto; }
[data-r="update-card"] > [data-part="foot"] > [data-part="comments"] > [data-part="count"] { color: inherit; font-size: inherit; font-weight: inherit; }
[data-r="latest-update"] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
[data-r="latest-update"] > [data-part="head"] { display: flex; align-items: center; gap: 8px; min-height: var(--h-28); }
[data-r="latest-update"] > [data-part="head"] > [data-part="title"] { margin: 0; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="latest-update"] > [data-part="head"] > [data-part="actions"] { display: flex; align-items: center; gap: 4px; margin-left: auto; }
[data-r="latest-update"] > [data-part="empty"] { display: flex; align-items: center; gap: 12px; min-height: var(--row-52); padding: 8px 8px 8px 16px; border: var(--px) dashed var(--line-4); border-radius: var(--r-contain); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); }
[data-r="latest-update"] > [data-part="empty"] > span { flex: 1; min-width: 0; }
[data-r="latest-update"] > [data-part="writer"] { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); }
[data-r="latest-update"] > [data-part="writer"] > [data-part="row"] { display: flex; align-items: center; gap: 8px; min-width: 0; }
[data-r="latest-update"] > [data-part="writer"] > [data-part="row"] > [data-part="label"] { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="latest-update"] > [data-part="writer"] > [data-part="bar"] { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
[data-r="latest-update"] > [data-part="writer"] > [data-part="bar"] > [data-part="hint"] { margin-right: auto; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }
[data-r="latest-update"] > [data-part="writer"] [data-r="field"][data-kind="area"] > textarea { min-height: 76px; }
[data-r="latest-update"] > [data-r="update-card"][data-arrived] { animation: r-update-in var(--scale-in) var(--ease-expo); }
@keyframes r-update-in { from { opacity: 0; transform: translateY(4px); } }
[data-r="link-row"] { position: relative; display: flex; align-items: center; gap: 4px; height: var(--row-40); padding: 0 6px 0 0; border-radius: var(--r-row); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); transition: background-color var(--state-out); }
[data-r="link-row"]:has(> [data-part="menu"][aria-expanded="true"]) { background-color: var(--plane-hover); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="link-row"]:hover { background-color: var(--plane-hover); transition-duration: 0s; }
}
[data-r="link-row"][data-force~="hover"] { background-color: var(--plane-hover); transition-duration: 0s; }
[data-r="link-row"]:has(> [data-part="link"]:focus-visible) { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="link-row"]:has(> [data-part="link"][data-force~="focus"]) { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="link-row"] > [data-part="link"] { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; height: 100%; padding: 0 4px 0 9px; border-radius: inherit; color: inherit; outline: none; }
[data-r="link-row"] > [data-part="link"] > [data-part="tile"] { display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: var(--r-key); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3); color: var(--ink-2); overflow: hidden; }
[data-r="link-row"] > [data-part="link"] > [data-part="tile"] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); }
[data-r="link-row"] > [data-part="link"] > [data-part="tile"] > img { width: 16px; height: 16px; }
[data-r="link-row"] > [data-part="link"] > [data-part="title"] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-500); color: var(--ink); }
[data-r="link-row"] > [data-part="link"] > [data-part="host"] { flex: 0 10 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="link-row"] > [data-part="link"] > [data-part="end"] { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="link-row"] > [data-part="menu"] { opacity: 0; transition: opacity var(--state-out), background-color var(--state-out), color var(--state-out); }
[data-r="link-row"]:has(> [data-part="link"]:foc) > [data-part="menu"] { opacity: 1; transition-duration: 0s; }
[data-r="link-row"] > [data-part="menu"]:is([aria-expanded="true"], :focus-visible),
[data-r="link-row"]:has(> [data-part="link"]:focus-visible) > [data-part="menu"] { opacity: 1; transition-duration: 0s; }
@media (hover: hover) {
  [data-r="link-row"]:is(:hover, :focus-within) > [data-part="menu"] { opacity: 1; transition-duration: 0s; }
}
[data-r="link-row"]:is([data-force~="hover"], :focus-within) > [data-part="menu"],
[data-r="link-row"] > [data-part="menu"]:is([aria-expanded="true"], [data-force~="focus"]),
[data-r="link-row"]:has(> [data-part="link"][data-force~="focus"]) > [data-part="menu"] { opacity: 1; transition-duration: 0s; }
@media (hover: none) {
  [data-r="link-row"] > [data-part="menu"] { opacity: 1; }
}
[data-r="link-row"][data-size="28"] { height: var(--row-28); padding-right: 2px; }
[data-r="link-row"][data-size="28"] > [data-part="link"] { gap: 8px; padding: 0 4px 0 8px; }
[data-r="link-row"][data-size="28"] > [data-part="link"] > svg[data-icon] { flex: none; width: var(--icon-16); height: var(--icon-16); color: var(--ink-2); }
[data-r="link-row"][data-size="28"] > [data-part="link"] > [data-part="title"] { font-weight: var(--fw-450); color: var(--ink-2); transition: color var(--state-out); }
[data-r="link-row"][data-size="28"]:hov > [data-part="link"] > svg[data-icon] { color: var(--ink); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="link-row"][data-size="28"]:hover > [data-part="link"] > [data-part="title"],
  [data-r="link-row"][data-size="28"]:hover > [data-part="link"] > svg[data-icon] { color: var(--ink); transition-duration: 0s; }
}
[data-r="link-row"][data-size="28"][data-force~="hover"] > [data-part="link"] > [data-part="title"],
[data-r="link-row"][data-size="28"][data-force~="hover"] > [data-part="link"] > svg[data-icon] { color: var(--ink); transition-duration: 0s; }
[data-r="link-row"][data-size="28"] > [data-part="menu"] { width: var(--h-20); height: var(--h-20); min-width: var(--h-20); }
[data-r="link-rows"] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-r="link-row"] > [data-part="link"] > [data-part="title"][contenteditable] { margin: 0 -4px; padding: 0 4px; border-radius: var(--r-key); background: var(--raised); box-shadow: var(--ring-inline); outline: none; text-overflow: clip; cursor: text; }
[data-r="link-row"][data-leaving] { overflow: hidden; opacity: 0; transition: height var(--section) var(--ease-expo), opacity var(--opacity-out) linear; }
}

/* ═══ 79-prose.css ═══ */
@layer components {
[data-r="prose"] { --prose-gap: 12px; min-width: 0; max-width: var(--col-prose); color: var(--ink); font-size: var(--fs-15); line-height: var(--lh-15); font-weight: var(--fw-450); overflow-wrap: break-word; text-wrap: pretty; }
[data-r="prose"] > * { margin-top: 0; margin-bottom: 0; }
[data-r="prose"] > * + * { margin-top: var(--prose-gap); }
[data-r="prose"] :is(h1, h2, h3, h4) { color: var(--ink); font-weight: var(--fw-550); text-wrap: balance; }
[data-r="prose"] :is(h1, h2) { font-size: var(--fs-20); line-height: var(--lh-20); }
[data-r="prose"] h3 { font-size: var(--fs-16); line-height: var(--lh-16); }
[data-r="prose"] h4 { font-size: var(--fs-15); line-height: var(--lh-15); }
[data-r="prose"] > * + :is(h1, h2) { margin-top: 32px; }
[data-r="prose"] > * + h3 { margin-top: 24px; }
[data-r="prose"] > * + h4 { margin-top: 20px; }
[data-r="prose"] > :is(h1, h2) + * { margin-top: 8px; }
[data-r="prose"] > h3 + * { margin-top: 6px; }
[data-r="prose"] > h4 + * { margin-top: 4px; }
[data-r="prose"] :is(ul, ol) { padding-left: 24px; }
[data-r="prose"] li { padding-left: 2px; }
[data-r="prose"] li + li,
[data-r="prose"] li > :is(ul, ol, p) { margin-top: 4px; }
[data-r="prose"] li > p { margin-bottom: 0; }
[data-r="prose"] li::marker { color: var(--ink-3); }
[data-r="prose"] ul { list-style-type: disc; }
[data-r="prose"] ul ul { list-style-type: circle; }
[data-r="prose"] ul ul ul { list-style-type: square; }
[data-r="prose"] ol { list-style-type: decimal; }
[data-r="prose"] ol ol { list-style-type: lower-alpha; }
[data-r="prose"] [data-part="checklist"] { list-style: none; padding-left: 0; }
[data-r="prose"] [data-part="checklist"] > li { display: flex; align-items: flex-start; gap: 10px; padding-left: 0; }
[data-r="prose"] [data-part="checklist"] > li > [data-r="checkbox"] { margin-top: calc((var(--lh-15) - 14px) / 2); }
[data-r="prose"] [data-part="checklist"] > li > [data-part="text"] { flex: 1; min-width: 0; transition: color var(--state-out); }
[data-r="prose"] [data-part="checklist"] > li:has(> [data-r="checkbox"][aria-checked="true"]) > [data-part="text"] { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--ink-3); }
[data-r="prose"] [data-part="checklist"] > li > [data-part="text"] > [data-part="meta"] { margin-left: 6px; color: var(--ink-3); font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="prose"] blockquote { margin: 0; padding: 0 0 0 16px; border-left: var(--px) solid var(--line-5); color: var(--ink-2); }
[data-r="prose"] blockquote > * + * { margin-top: 8px; }
[data-r="prose"] > * + blockquote,
[data-r="prose"] > :where(blockquote + *) { margin-top: 20px; }
[data-r="prose"] blockquote > footer { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-3); }
[data-r="prose"] :not(pre) > code { padding: 1px 4px; border-radius: var(--r-key); background: var(--well); color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-13); font-feature-settings: normal; font-variant-ligatures: none; letter-spacing: 0; overflow-wrap: anywhere; }
[data-r="prose"] :is(h1, h2, h3, h4) code { font-size: inherit; }
[data-r="prose"] a { border-radius: var(--r-key); color: var(--ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--a35); transition: text-decoration-color var(--state-out); }
@media (hover: hover) {
  [data-r="prose"] a:hover { text-decoration-color: var(--ink); transition-duration: 0s; }
}
[data-r="prose"] a[data-force~="hover"] { text-decoration-color: var(--ink); transition-duration: 0s; }
[data-r="prose"] a:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
[data-r="prose"] a[data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 1px; }
[data-r="prose"] > figure:not([data-r]) { margin-left: 0; margin-right: 0; }
[data-r="prose"] > :where(* + figure:not([data-r]), figure:not([data-r]) + *) { margin-top: 24px; }
[data-r="prose"] figure > :is(img, svg, video, [data-part="media"]) { display: block; width: 100%; border-radius: var(--r-value); }
[data-r="prose"] figure > [data-part="media"] { padding: 16px; background: var(--well); }
[data-r="prose"] figure > img { box-shadow: 0 0 0 var(--px) var(--line-1); }
[data-r="prose"] figure > figcaption { margin-top: 8px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-3); }
[data-r="prose"] > [data-part="table"] { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--a20) transparent; }
[data-r="prose"] > :where(* + [data-part="table"], [data-part="table"] + *) { margin-top: 20px; }
[data-r="prose"] > hr { height: 0; margin-left: 0; margin-right: 0; border: 0; border-top: var(--px) solid var(--line-3); }
[data-r="prose"] > :where(* + [data-r="code-block"], [data-r="code-block"] + *) { margin-top: 16px; }
[data-r="prose"] > :where([data-r="embed"]) { margin-bottom: 0; }
[data-r="prose"] > :where(* + [data-r="embed"]) { margin-top: 12px; }
[data-r="prose"] > :where(* + hr, hr + *) { margin-top: 28px; }
[data-r="prose"] [data-r="mention"] { vertical-align: 1px; }
[data-r="prose"] [data-r="provenance"] { margin: 0 1px 0 4px; vertical-align: 1px; }
[data-r="prose"][data-size="13"] { --prose-gap: 8px; font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="prose"][data-size="13"] :is(h1, h2) { font-size: var(--fs-16); line-height: var(--lh-16); }
[data-r="prose"][data-size="13"] :is(h3, h4) { font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="prose"][data-size="13"] > * + :is(h1, h2) { margin-top: 20px; }
[data-r="prose"][data-size="13"] > * + :is(h3, h4) { margin-top: 16px; }
[data-r="prose"][data-size="13"] > :is(h1, h2, h3, h4) + * { margin-top: 4px; }
[data-r="prose"][data-size="13"] :is(ul, ol) { padding-left: 20px; }
[data-r="prose"][data-size="13"] li + li,
[data-r="prose"][data-size="13"] li > :is(ul, ol, p) { margin-top: 2px; }
[data-r="prose"][data-size="13"] [data-part="checklist"] > li { gap: 8px; }
[data-r="prose"][data-size="13"] [data-part="checklist"] > li > [data-r="checkbox"] { margin-top: calc((var(--lh-13) - 14px) / 2); }
[data-r="prose"][data-size="13"] :not(pre) > code { font-size: var(--fs-12); }
[data-r="prose"][data-size="13"] blockquote { padding-left: 12px; }
[data-r="prose"][data-size="13"] blockquote > footer,
[data-r="prose"][data-size="13"] figure > figcaption,
[data-r="prose"][data-size="13"] [data-part="checklist"] > li > [data-part="text"] > [data-part="meta"] { font-size: var(--fs-12); line-height: var(--lh-12); }
[data-r="code-block"] { --plane: var(--well); --plane-hover: var(--well-hover); --plane-selected: var(--well-selected); --plane-selected-hover: var(--well-selected-hover); --ring: var(--ring-well); --ring-hover: var(--ring-well-hover); --pill-rest: var(--raised); position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; border-radius: var(--r-value); background: var(--well); color: var(--ink); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); }
[data-r="code-block"] > [data-part="head"] { display: flex; align-items: center; gap: 8px; flex: none; height: var(--h-32); padding: 0 4px 0 12px; }
[data-r="code-block"] > [data-part="head"] > [data-part="lang"] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="code-block"] > [data-part="head"] > [data-part="copy"][data-copied] { color: var(--ink); }
[data-r="code-block"] > [data-part="body"] { position: relative; display: flex; min-width: 0; }
[data-r="code-block"] :is(pre, [data-part="gutter"]) { margin: 0; font-family: var(--font-mono); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); font-feature-settings: normal; font-variant-ligatures: none; font-variant-numeric: normal; letter-spacing: 0; tab-size: 2; }
[data-r="code-block"] pre { flex: 1; min-width: 0; padding: 2px 16px 12px 12px; border-radius: 0 0 var(--r-value) var(--r-value); white-space: pre; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--a20) transparent; outline: none; }
[data-r="code-block"] pre > code { font: inherit; color: inherit; }
[data-r="code-block"] pre:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
[data-r="code-block"] pre[data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: -1px; }
[data-r="code-block"] pre:has(> code[contenteditable]):focus-within { outline: none; }
[data-r="code-block"] pre[contenteditable]:focus-visible { outline: none; }
[data-r="code-block"] pre[contenteditable][data-force~="focus"] { outline: none; }
[data-r="code-block"]:not(:has(> [data-part="head"])) pre { padding-top: 12px; border-radius: var(--r-value); }
[data-r="code-block"] [data-part="gutter"] { flex: none; min-width: 36px; padding: 2px 0 12px 12px; color: var(--ink-3); text-align: right; white-space: pre; user-select: none; -webkit-user-select: none; }
[data-r="code-block"]:not(:has(> [data-part="head"])) [data-part="gutter"] { padding-top: 12px; }
[data-r="code-block"] [data-part="gutter"] + pre { padding-left: 16px; }
[data-r="code-block"][data-wrap]:not([data-lines]) pre { white-space: pre-wrap; overflow-wrap: anywhere; }
[data-r="code-block"][data-lang="workout"] pre { color: var(--ink-2); }
[data-r="code-block"] [data-t="num"],
[data-r="code-block"] [data-t="label"] { color: var(--ink); }
[data-r="code-block"] [data-t="unit"],
[data-r="code-block"] [data-t="word"] { color: var(--ink-2); }
[data-r="code-block"] [data-t="op"],
[data-r="code-block"] [data-t="note"] { color: var(--ink-3); }
}

/* ═══ 79-scale-swatch.css ═══ */
@layer components {
[data-r="swatch-strip"] { display: inline-flex; align-items: flex-end; gap: 1px; flex: none; height: 12px; }
[data-r="swatch-strip"] > i { width: 3px; height: 100%; border-radius: 1px 1px 0 0; background: var(--scale-1); }
[data-r="swatch-strip"] > i:nth-child(1) { height: 40%; background: var(--scale-1); }
[data-r="swatch-strip"] > i:nth-child(2) { height: 52%; background: var(--scale-2); }
[data-r="swatch-strip"] > i:nth-child(3) { height: 64%; background: var(--scale-3); }
[data-r="swatch-strip"] > i:nth-child(4) { height: 76%; background: var(--scale-4); }
[data-r="swatch-strip"] > i:nth-child(5) { height: 88%; background: var(--scale-5); }
[data-r="swatch-strip"] > i:nth-child(6) { height: 100%; background: var(--scale-6); }
[data-r="swatch-strip"][data-size="20"] { height: 20px; }
[data-r="swatch-strip"][data-size="20"] > i { width: 6px; }
[data-r="menu-item"] > [data-r="swatch-strip"],
[data-r="select"] > [data-r="swatch-strip"] { margin-right: 2px; }
}

/* ═══ 79-scale.css ═══ */
@layer components {
:root,
[data-scale="intensity"] { --scale-1: var(--intensity-1); --scale-1-lit: var(--intensity-1-lit); --scale-1-deep: var(--intensity-1-deep); --scale-1-edge: var(--intensity-1-edge); --scale-1-on: var(--intensity-1-on); --scale-2: var(--intensity-2); --scale-2-lit: var(--intensity-2-lit); --scale-2-deep: var(--intensity-2-deep); --scale-2-edge: var(--intensity-2-edge); --scale-2-on: var(--intensity-2-on); --scale-3: var(--intensity-3); --scale-3-lit: var(--intensity-3-lit); --scale-3-deep: var(--intensity-3-deep); --scale-3-edge: var(--intensity-3-edge); --scale-3-on: var(--intensity-3-on); --scale-4: var(--intensity-4); --scale-4-lit: var(--intensity-4-lit); --scale-4-deep: var(--intensity-4-deep); --scale-4-edge: var(--intensity-4-edge); --scale-4-on: var(--intensity-4-on); --scale-5: var(--intensity-5); --scale-5-lit: var(--intensity-5-lit); --scale-5-deep: var(--intensity-5-deep); --scale-5-edge: var(--intensity-5-edge); --scale-5-on: var(--intensity-5-on); --scale-6: var(--intensity-6); --scale-6-lit: var(--intensity-6-lit); --scale-6-deep: var(--intensity-6-deep); --scale-6-edge: var(--intensity-6-edge); --scale-6-on: var(--intensity-6-on); --scale-rank-1: var(--scale-1); --scale-rank-1-on: var(--scale-1-on); --scale-rank-2: var(--scale-2); --scale-rank-2-on: var(--scale-2-on); --scale-rank-3: var(--scale-4); --scale-rank-3-on: var(--scale-4-on); --scale-rank-4: var(--scale-5); --scale-rank-4-on: var(--scale-5-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
[data-scale="zone"] { --scale-1: var(--zone-1); --scale-1-lit: var(--zone-1); --scale-1-deep: var(--zone-1); --scale-1-edge: var(--zone-3); --scale-1-on: var(--gray-900); --scale-2: var(--zone-2); --scale-2-lit: var(--zone-2); --scale-2-deep: var(--zone-2); --scale-2-edge: var(--zone-4); --scale-2-on: var(--gray-900); --scale-3: var(--zone-3); --scale-3-lit: var(--zone-3); --scale-3-deep: var(--zone-3); --scale-3-edge: var(--zone-5); --scale-3-on: var(--gray-900); --scale-4: var(--zone-4); --scale-4-lit: var(--zone-4); --scale-4-deep: var(--zone-4); --scale-4-edge: var(--zone-6); --scale-4-on: var(--gray-900); --scale-5: var(--zone-5); --scale-5-lit: var(--zone-5); --scale-5-deep: var(--zone-5); --scale-5-edge: var(--zone-6); --scale-5-on: var(--gray-0); --scale-6: var(--zone-6); --scale-6-lit: var(--zone-6); --scale-6-deep: var(--zone-6); --scale-6-edge: var(--zone-6); --scale-6-on: var(--gray-0); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-2); --scale-cell-2: var(--scale-3); --scale-cell-3: var(--scale-4); --scale-cell-4: var(--scale-5); --scale-cell-5: var(--scale-6); }
[data-scale="violet"] { --scale-1: var(--violet-150); --scale-1-lit: var(--violet-100); --scale-1-deep: var(--violet-200); --scale-1-edge: var(--violet-400); --scale-1-on: var(--gray-900); --scale-2: var(--violet-250); --scale-2-lit: var(--violet-200); --scale-2-deep: var(--violet-300); --scale-2-edge: var(--violet-500); --scale-2-on: var(--gray-900); --scale-3: var(--violet-350); --scale-3-lit: var(--violet-300); --scale-3-deep: var(--violet-400); --scale-3-edge: var(--violet-600); --scale-3-on: var(--gray-900); --scale-4: var(--violet-450); --scale-4-lit: var(--violet-400); --scale-4-deep: var(--violet-500); --scale-4-edge: var(--violet-700); --scale-4-on: var(--gray-0); --scale-5: var(--violet-550); --scale-5-lit: var(--violet-500); --scale-5-deep: var(--violet-600); --scale-5-edge: var(--violet-750); --scale-5-on: var(--gray-0); --scale-6: var(--violet-650); --scale-6-lit: var(--violet-600); --scale-6-deep: var(--violet-700); --scale-6-edge: var(--violet-750); --scale-6-on: var(--gray-0); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
[data-scale="blue"] { --scale-1: var(--blue-150); --scale-1-lit: var(--blue-100); --scale-1-deep: var(--blue-200); --scale-1-edge: var(--blue-400); --scale-1-on: var(--gray-900); --scale-2: var(--blue-250); --scale-2-lit: var(--blue-200); --scale-2-deep: var(--blue-300); --scale-2-edge: var(--blue-500); --scale-2-on: var(--gray-900); --scale-3: var(--blue-350); --scale-3-lit: var(--blue-300); --scale-3-deep: var(--blue-400); --scale-3-edge: var(--blue-600); --scale-3-on: var(--gray-900); --scale-4: var(--blue-500); --scale-4-lit: var(--blue-450); --scale-4-deep: var(--blue-550); --scale-4-edge: var(--blue-750); --scale-4-on: var(--gray-0); --scale-5: var(--blue-550); --scale-5-lit: var(--blue-500); --scale-5-deep: var(--blue-600); --scale-5-edge: var(--blue-750); --scale-5-on: var(--gray-0); --scale-6: var(--blue-650); --scale-6-lit: var(--blue-600); --scale-6-deep: var(--blue-700); --scale-6-edge: var(--blue-750); --scale-6-on: var(--gray-0); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
[data-scale="aqua"] { --scale-1: var(--aqua-150); --scale-1-lit: var(--aqua-100); --scale-1-deep: var(--aqua-200); --scale-1-edge: var(--aqua-400); --scale-1-on: var(--gray-900); --scale-2: var(--aqua-250); --scale-2-lit: var(--aqua-200); --scale-2-deep: var(--aqua-300); --scale-2-edge: var(--aqua-500); --scale-2-on: var(--gray-900); --scale-3: var(--aqua-350); --scale-3-lit: var(--aqua-300); --scale-3-deep: var(--aqua-400); --scale-3-edge: var(--aqua-600); --scale-3-on: var(--gray-900); --scale-4: var(--aqua-450); --scale-4-lit: var(--aqua-400); --scale-4-deep: var(--aqua-500); --scale-4-edge: var(--aqua-700); --scale-4-on: var(--gray-900); --scale-5: var(--aqua-550); --scale-5-lit: var(--aqua-500); --scale-5-deep: var(--aqua-600); --scale-5-edge: var(--aqua-750); --scale-5-on: var(--gray-0); --scale-6: var(--aqua-650); --scale-6-lit: var(--aqua-600); --scale-6-deep: var(--aqua-700); --scale-6-edge: var(--aqua-750); --scale-6-on: var(--gray-0); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
[data-scale="green"] { --scale-1: var(--green-150); --scale-1-lit: var(--green-100); --scale-1-deep: var(--green-200); --scale-1-edge: var(--green-400); --scale-1-on: var(--gray-900); --scale-2: var(--green-250); --scale-2-lit: var(--green-200); --scale-2-deep: var(--green-300); --scale-2-edge: var(--green-500); --scale-2-on: var(--gray-900); --scale-3: var(--green-350); --scale-3-lit: var(--green-300); --scale-3-deep: var(--green-400); --scale-3-edge: var(--green-600); --scale-3-on: var(--gray-900); --scale-4: var(--green-450); --scale-4-lit: var(--green-400); --scale-4-deep: var(--green-500); --scale-4-edge: var(--green-700); --scale-4-on: var(--gray-900); --scale-5: var(--green-550); --scale-5-lit: var(--green-500); --scale-5-deep: var(--green-600); --scale-5-edge: var(--green-750); --scale-5-on: var(--gray-0); --scale-6: var(--green-650); --scale-6-lit: var(--green-600); --scale-6-deep: var(--green-700); --scale-6-edge: var(--green-750); --scale-6-on: var(--gray-0); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
[data-scale="yellow"] { --scale-1: var(--yellow-150); --scale-1-lit: var(--yellow-100); --scale-1-deep: var(--yellow-200); --scale-1-edge: var(--yellow-400); --scale-1-on: var(--gray-900); --scale-2: var(--yellow-250); --scale-2-lit: var(--yellow-200); --scale-2-deep: var(--yellow-300); --scale-2-edge: var(--yellow-500); --scale-2-on: var(--gray-900); --scale-3: var(--yellow-350); --scale-3-lit: var(--yellow-300); --scale-3-deep: var(--yellow-400); --scale-3-edge: var(--yellow-600); --scale-3-on: var(--gray-900); --scale-4: var(--yellow-500); --scale-4-lit: var(--yellow-450); --scale-4-deep: var(--yellow-550); --scale-4-edge: var(--yellow-750); --scale-4-on: var(--gray-0); --scale-5: var(--yellow-550); --scale-5-lit: var(--yellow-500); --scale-5-deep: var(--yellow-600); --scale-5-edge: var(--yellow-750); --scale-5-on: var(--gray-0); --scale-6: var(--yellow-650); --scale-6-lit: var(--yellow-600); --scale-6-deep: var(--yellow-700); --scale-6-edge: var(--yellow-750); --scale-6-on: var(--gray-0); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
[data-scale="orange"] { --scale-1: var(--orange-150); --scale-1-lit: var(--orange-100); --scale-1-deep: var(--orange-200); --scale-1-edge: var(--orange-400); --scale-1-on: var(--gray-900); --scale-2: var(--orange-250); --scale-2-lit: var(--orange-200); --scale-2-deep: var(--orange-300); --scale-2-edge: var(--orange-500); --scale-2-on: var(--gray-900); --scale-3: var(--orange-350); --scale-3-lit: var(--orange-300); --scale-3-deep: var(--orange-400); --scale-3-edge: var(--orange-600); --scale-3-on: var(--gray-900); --scale-4: var(--orange-450); --scale-4-lit: var(--orange-400); --scale-4-deep: var(--orange-500); --scale-4-edge: var(--orange-700); --scale-4-on: var(--gray-0); --scale-5: var(--orange-550); --scale-5-lit: var(--orange-500); --scale-5-deep: var(--orange-600); --scale-5-edge: var(--orange-750); --scale-5-on: var(--gray-0); --scale-6: var(--orange-650); --scale-6-lit: var(--orange-600); --scale-6-deep: var(--orange-700); --scale-6-edge: var(--orange-750); --scale-6-on: var(--gray-0); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
[data-scale="red"] { --scale-1: var(--red-150); --scale-1-lit: var(--red-100); --scale-1-deep: var(--red-200); --scale-1-edge: var(--red-400); --scale-1-on: var(--gray-900); --scale-2: var(--red-250); --scale-2-lit: var(--red-200); --scale-2-deep: var(--red-300); --scale-2-edge: var(--red-500); --scale-2-on: var(--gray-900); --scale-3: var(--red-350); --scale-3-lit: var(--red-300); --scale-3-deep: var(--red-400); --scale-3-edge: var(--red-600); --scale-3-on: var(--gray-900); --scale-4: var(--red-450); --scale-4-lit: var(--red-400); --scale-4-deep: var(--red-500); --scale-4-edge: var(--red-700); --scale-4-on: var(--gray-0); --scale-5: var(--red-550); --scale-5-lit: var(--red-500); --scale-5-deep: var(--red-600); --scale-5-edge: var(--red-750); --scale-5-on: var(--gray-0); --scale-6: var(--red-650); --scale-6-lit: var(--red-600); --scale-6-deep: var(--red-700); --scale-6-edge: var(--red-750); --scale-6-on: var(--gray-0); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
[data-scale="magenta"] { --scale-1: var(--magenta-150); --scale-1-lit: var(--magenta-100); --scale-1-deep: var(--magenta-200); --scale-1-edge: var(--magenta-400); --scale-1-on: var(--gray-900); --scale-2: var(--magenta-250); --scale-2-lit: var(--magenta-200); --scale-2-deep: var(--magenta-300); --scale-2-edge: var(--magenta-500); --scale-2-on: var(--gray-900); --scale-3: var(--magenta-350); --scale-3-lit: var(--magenta-300); --scale-3-deep: var(--magenta-400); --scale-3-edge: var(--magenta-600); --scale-3-on: var(--gray-900); --scale-4: var(--magenta-450); --scale-4-lit: var(--magenta-400); --scale-4-deep: var(--magenta-500); --scale-4-edge: var(--magenta-700); --scale-4-on: var(--gray-0); --scale-5: var(--magenta-550); --scale-5-lit: var(--magenta-500); --scale-5-deep: var(--magenta-600); --scale-5-edge: var(--magenta-750); --scale-5-on: var(--gray-0); --scale-6: var(--magenta-650); --scale-6-lit: var(--magenta-600); --scale-6-deep: var(--magenta-700); --scale-6-edge: var(--magenta-750); --scale-6-on: var(--gray-0); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
[data-scale="ink"] { --scale-1: var(--gray-150); --scale-1-lit: var(--gray-100); --scale-1-deep: var(--gray-200); --scale-1-edge: var(--gray-400); --scale-1-on: var(--gray-900); --scale-2: var(--gray-250); --scale-2-lit: var(--gray-200); --scale-2-deep: var(--gray-300); --scale-2-edge: var(--gray-500); --scale-2-on: var(--gray-900); --scale-3: var(--gray-350); --scale-3-lit: var(--gray-300); --scale-3-deep: var(--gray-400); --scale-3-edge: var(--gray-600); --scale-3-on: var(--gray-900); --scale-4: var(--gray-450); --scale-4-lit: var(--gray-400); --scale-4-deep: var(--gray-500); --scale-4-edge: var(--gray-700); --scale-4-on: var(--gray-900); --scale-5: var(--gray-550); --scale-5-lit: var(--gray-500); --scale-5-deep: var(--gray-600); --scale-5-edge: var(--gray-750); --scale-5-on: var(--gray-0); --scale-6: var(--gray-650); --scale-6-lit: var(--gray-600); --scale-6-deep: var(--gray-700); --scale-6-edge: var(--gray-750); --scale-6-on: var(--gray-0); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-scale="violet"] { --scale-1: var(--violet-750); --scale-1-lit: var(--violet-700); --scale-1-deep: var(--violet-800); --scale-1-edge: var(--violet-450); --scale-1-on: var(--gray-0); --scale-2: var(--violet-650); --scale-2-lit: var(--violet-600); --scale-2-deep: var(--violet-700); --scale-2-edge: var(--violet-350); --scale-2-on: var(--gray-0); --scale-3: var(--violet-550); --scale-3-lit: var(--violet-500); --scale-3-deep: var(--violet-600); --scale-3-edge: var(--violet-250); --scale-3-on: var(--gray-0); --scale-4: var(--violet-450); --scale-4-lit: var(--violet-400); --scale-4-deep: var(--violet-500); --scale-4-edge: var(--violet-150); --scale-4-on: var(--gray-0); --scale-5: var(--violet-350); --scale-5-lit: var(--violet-300); --scale-5-deep: var(--violet-400); --scale-5-edge: var(--violet-100); --scale-5-on: var(--gray-900); --scale-6: var(--violet-250); --scale-6-lit: var(--violet-200); --scale-6-deep: var(--violet-300); --scale-6-edge: var(--violet-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
  :root:not([data-theme="light"]) [data-scale="blue"] { --scale-1: var(--blue-750); --scale-1-lit: var(--blue-700); --scale-1-deep: var(--blue-800); --scale-1-edge: var(--blue-450); --scale-1-on: var(--gray-0); --scale-2: var(--blue-650); --scale-2-lit: var(--blue-600); --scale-2-deep: var(--blue-700); --scale-2-edge: var(--blue-350); --scale-2-on: var(--gray-0); --scale-3: var(--blue-550); --scale-3-lit: var(--blue-500); --scale-3-deep: var(--blue-600); --scale-3-edge: var(--blue-250); --scale-3-on: var(--gray-0); --scale-4: var(--blue-400); --scale-4-lit: var(--blue-350); --scale-4-deep: var(--blue-450); --scale-4-edge: var(--blue-100); --scale-4-on: var(--gray-900); --scale-5: var(--blue-350); --scale-5-lit: var(--blue-300); --scale-5-deep: var(--blue-400); --scale-5-edge: var(--blue-100); --scale-5-on: var(--gray-900); --scale-6: var(--blue-250); --scale-6-lit: var(--blue-200); --scale-6-deep: var(--blue-300); --scale-6-edge: var(--blue-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
  :root:not([data-theme="light"]) [data-scale="aqua"] { --scale-1: var(--aqua-750); --scale-1-lit: var(--aqua-700); --scale-1-deep: var(--aqua-800); --scale-1-edge: var(--aqua-450); --scale-1-on: var(--gray-0); --scale-2: var(--aqua-650); --scale-2-lit: var(--aqua-600); --scale-2-deep: var(--aqua-700); --scale-2-edge: var(--aqua-350); --scale-2-on: var(--gray-0); --scale-3: var(--aqua-550); --scale-3-lit: var(--aqua-500); --scale-3-deep: var(--aqua-600); --scale-3-edge: var(--aqua-250); --scale-3-on: var(--gray-0); --scale-4: var(--aqua-450); --scale-4-lit: var(--aqua-400); --scale-4-deep: var(--aqua-500); --scale-4-edge: var(--aqua-150); --scale-4-on: var(--gray-900); --scale-5: var(--aqua-350); --scale-5-lit: var(--aqua-300); --scale-5-deep: var(--aqua-400); --scale-5-edge: var(--aqua-100); --scale-5-on: var(--gray-900); --scale-6: var(--aqua-250); --scale-6-lit: var(--aqua-200); --scale-6-deep: var(--aqua-300); --scale-6-edge: var(--aqua-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
  :root:not([data-theme="light"]) [data-scale="green"] { --scale-1: var(--green-750); --scale-1-lit: var(--green-700); --scale-1-deep: var(--green-800); --scale-1-edge: var(--green-450); --scale-1-on: var(--gray-0); --scale-2: var(--green-650); --scale-2-lit: var(--green-600); --scale-2-deep: var(--green-700); --scale-2-edge: var(--green-350); --scale-2-on: var(--gray-0); --scale-3: var(--green-550); --scale-3-lit: var(--green-500); --scale-3-deep: var(--green-600); --scale-3-edge: var(--green-250); --scale-3-on: var(--gray-0); --scale-4: var(--green-450); --scale-4-lit: var(--green-400); --scale-4-deep: var(--green-500); --scale-4-edge: var(--green-150); --scale-4-on: var(--gray-900); --scale-5: var(--green-350); --scale-5-lit: var(--green-300); --scale-5-deep: var(--green-400); --scale-5-edge: var(--green-100); --scale-5-on: var(--gray-900); --scale-6: var(--green-250); --scale-6-lit: var(--green-200); --scale-6-deep: var(--green-300); --scale-6-edge: var(--green-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
  :root:not([data-theme="light"]) [data-scale="yellow"] { --scale-1: var(--yellow-750); --scale-1-lit: var(--yellow-700); --scale-1-deep: var(--yellow-800); --scale-1-edge: var(--yellow-450); --scale-1-on: var(--gray-0); --scale-2: var(--yellow-650); --scale-2-lit: var(--yellow-600); --scale-2-deep: var(--yellow-700); --scale-2-edge: var(--yellow-350); --scale-2-on: var(--gray-0); --scale-3: var(--yellow-550); --scale-3-lit: var(--yellow-500); --scale-3-deep: var(--yellow-600); --scale-3-edge: var(--yellow-250); --scale-3-on: var(--gray-0); --scale-4: var(--yellow-400); --scale-4-lit: var(--yellow-350); --scale-4-deep: var(--yellow-450); --scale-4-edge: var(--yellow-100); --scale-4-on: var(--gray-900); --scale-5: var(--yellow-350); --scale-5-lit: var(--yellow-300); --scale-5-deep: var(--yellow-400); --scale-5-edge: var(--yellow-100); --scale-5-on: var(--gray-900); --scale-6: var(--yellow-250); --scale-6-lit: var(--yellow-200); --scale-6-deep: var(--yellow-300); --scale-6-edge: var(--yellow-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
  :root:not([data-theme="light"]) [data-scale="orange"] { --scale-1: var(--orange-750); --scale-1-lit: var(--orange-700); --scale-1-deep: var(--orange-800); --scale-1-edge: var(--orange-450); --scale-1-on: var(--gray-0); --scale-2: var(--orange-650); --scale-2-lit: var(--orange-600); --scale-2-deep: var(--orange-700); --scale-2-edge: var(--orange-350); --scale-2-on: var(--gray-0); --scale-3: var(--orange-550); --scale-3-lit: var(--orange-500); --scale-3-deep: var(--orange-600); --scale-3-edge: var(--orange-250); --scale-3-on: var(--gray-0); --scale-4: var(--orange-450); --scale-4-lit: var(--orange-400); --scale-4-deep: var(--orange-500); --scale-4-edge: var(--orange-150); --scale-4-on: var(--gray-0); --scale-5: var(--orange-350); --scale-5-lit: var(--orange-300); --scale-5-deep: var(--orange-400); --scale-5-edge: var(--orange-100); --scale-5-on: var(--gray-900); --scale-6: var(--orange-250); --scale-6-lit: var(--orange-200); --scale-6-deep: var(--orange-300); --scale-6-edge: var(--orange-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
  :root:not([data-theme="light"]) [data-scale="red"] { --scale-1: var(--red-750); --scale-1-lit: var(--red-700); --scale-1-deep: var(--red-800); --scale-1-edge: var(--red-450); --scale-1-on: var(--gray-0); --scale-2: var(--red-650); --scale-2-lit: var(--red-600); --scale-2-deep: var(--red-700); --scale-2-edge: var(--red-350); --scale-2-on: var(--gray-0); --scale-3: var(--red-550); --scale-3-lit: var(--red-500); --scale-3-deep: var(--red-600); --scale-3-edge: var(--red-250); --scale-3-on: var(--gray-0); --scale-4: var(--red-450); --scale-4-lit: var(--red-400); --scale-4-deep: var(--red-500); --scale-4-edge: var(--red-150); --scale-4-on: var(--gray-0); --scale-5: var(--red-350); --scale-5-lit: var(--red-300); --scale-5-deep: var(--red-400); --scale-5-edge: var(--red-100); --scale-5-on: var(--gray-900); --scale-6: var(--red-250); --scale-6-lit: var(--red-200); --scale-6-deep: var(--red-300); --scale-6-edge: var(--red-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
  :root:not([data-theme="light"]) [data-scale="magenta"] { --scale-1: var(--magenta-750); --scale-1-lit: var(--magenta-700); --scale-1-deep: var(--magenta-800); --scale-1-edge: var(--magenta-450); --scale-1-on: var(--gray-0); --scale-2: var(--magenta-650); --scale-2-lit: var(--magenta-600); --scale-2-deep: var(--magenta-700); --scale-2-edge: var(--magenta-350); --scale-2-on: var(--gray-0); --scale-3: var(--magenta-550); --scale-3-lit: var(--magenta-500); --scale-3-deep: var(--magenta-600); --scale-3-edge: var(--magenta-250); --scale-3-on: var(--gray-0); --scale-4: var(--magenta-450); --scale-4-lit: var(--magenta-400); --scale-4-deep: var(--magenta-500); --scale-4-edge: var(--magenta-150); --scale-4-on: var(--gray-0); --scale-5: var(--magenta-350); --scale-5-lit: var(--magenta-300); --scale-5-deep: var(--magenta-400); --scale-5-edge: var(--magenta-100); --scale-5-on: var(--gray-900); --scale-6: var(--magenta-250); --scale-6-lit: var(--magenta-200); --scale-6-deep: var(--magenta-300); --scale-6-edge: var(--magenta-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
  :root:not([data-theme="light"]) [data-scale="ink"] { --scale-1: var(--gray-750); --scale-1-lit: var(--gray-700); --scale-1-deep: var(--gray-800); --scale-1-edge: var(--gray-450); --scale-1-on: var(--gray-0); --scale-2: var(--gray-650); --scale-2-lit: var(--gray-600); --scale-2-deep: var(--gray-700); --scale-2-edge: var(--gray-350); --scale-2-on: var(--gray-0); --scale-3: var(--gray-550); --scale-3-lit: var(--gray-500); --scale-3-deep: var(--gray-600); --scale-3-edge: var(--gray-250); --scale-3-on: var(--gray-0); --scale-4: var(--gray-450); --scale-4-lit: var(--gray-400); --scale-4-deep: var(--gray-500); --scale-4-edge: var(--gray-150); --scale-4-on: var(--gray-900); --scale-5: var(--gray-350); --scale-5-lit: var(--gray-300); --scale-5-deep: var(--gray-400); --scale-5-edge: var(--gray-100); --scale-5-on: var(--gray-900); --scale-6: var(--gray-250); --scale-6-lit: var(--gray-200); --scale-6-deep: var(--gray-300); --scale-6-edge: var(--gray-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
}
:root[data-theme="dark"] [data-scale="violet"] { --scale-1: var(--violet-750); --scale-1-lit: var(--violet-700); --scale-1-deep: var(--violet-800); --scale-1-edge: var(--violet-450); --scale-1-on: var(--gray-0); --scale-2: var(--violet-650); --scale-2-lit: var(--violet-600); --scale-2-deep: var(--violet-700); --scale-2-edge: var(--violet-350); --scale-2-on: var(--gray-0); --scale-3: var(--violet-550); --scale-3-lit: var(--violet-500); --scale-3-deep: var(--violet-600); --scale-3-edge: var(--violet-250); --scale-3-on: var(--gray-0); --scale-4: var(--violet-450); --scale-4-lit: var(--violet-400); --scale-4-deep: var(--violet-500); --scale-4-edge: var(--violet-150); --scale-4-on: var(--gray-0); --scale-5: var(--violet-350); --scale-5-lit: var(--violet-300); --scale-5-deep: var(--violet-400); --scale-5-edge: var(--violet-100); --scale-5-on: var(--gray-900); --scale-6: var(--violet-250); --scale-6-lit: var(--violet-200); --scale-6-deep: var(--violet-300); --scale-6-edge: var(--violet-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
:root[data-theme="dark"] [data-scale="blue"] { --scale-1: var(--blue-750); --scale-1-lit: var(--blue-700); --scale-1-deep: var(--blue-800); --scale-1-edge: var(--blue-450); --scale-1-on: var(--gray-0); --scale-2: var(--blue-650); --scale-2-lit: var(--blue-600); --scale-2-deep: var(--blue-700); --scale-2-edge: var(--blue-350); --scale-2-on: var(--gray-0); --scale-3: var(--blue-550); --scale-3-lit: var(--blue-500); --scale-3-deep: var(--blue-600); --scale-3-edge: var(--blue-250); --scale-3-on: var(--gray-0); --scale-4: var(--blue-400); --scale-4-lit: var(--blue-350); --scale-4-deep: var(--blue-450); --scale-4-edge: var(--blue-100); --scale-4-on: var(--gray-900); --scale-5: var(--blue-350); --scale-5-lit: var(--blue-300); --scale-5-deep: var(--blue-400); --scale-5-edge: var(--blue-100); --scale-5-on: var(--gray-900); --scale-6: var(--blue-250); --scale-6-lit: var(--blue-200); --scale-6-deep: var(--blue-300); --scale-6-edge: var(--blue-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
:root[data-theme="dark"] [data-scale="aqua"] { --scale-1: var(--aqua-750); --scale-1-lit: var(--aqua-700); --scale-1-deep: var(--aqua-800); --scale-1-edge: var(--aqua-450); --scale-1-on: var(--gray-0); --scale-2: var(--aqua-650); --scale-2-lit: var(--aqua-600); --scale-2-deep: var(--aqua-700); --scale-2-edge: var(--aqua-350); --scale-2-on: var(--gray-0); --scale-3: var(--aqua-550); --scale-3-lit: var(--aqua-500); --scale-3-deep: var(--aqua-600); --scale-3-edge: var(--aqua-250); --scale-3-on: var(--gray-0); --scale-4: var(--aqua-450); --scale-4-lit: var(--aqua-400); --scale-4-deep: var(--aqua-500); --scale-4-edge: var(--aqua-150); --scale-4-on: var(--gray-900); --scale-5: var(--aqua-350); --scale-5-lit: var(--aqua-300); --scale-5-deep: var(--aqua-400); --scale-5-edge: var(--aqua-100); --scale-5-on: var(--gray-900); --scale-6: var(--aqua-250); --scale-6-lit: var(--aqua-200); --scale-6-deep: var(--aqua-300); --scale-6-edge: var(--aqua-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
:root[data-theme="dark"] [data-scale="green"] { --scale-1: var(--green-750); --scale-1-lit: var(--green-700); --scale-1-deep: var(--green-800); --scale-1-edge: var(--green-450); --scale-1-on: var(--gray-0); --scale-2: var(--green-650); --scale-2-lit: var(--green-600); --scale-2-deep: var(--green-700); --scale-2-edge: var(--green-350); --scale-2-on: var(--gray-0); --scale-3: var(--green-550); --scale-3-lit: var(--green-500); --scale-3-deep: var(--green-600); --scale-3-edge: var(--green-250); --scale-3-on: var(--gray-0); --scale-4: var(--green-450); --scale-4-lit: var(--green-400); --scale-4-deep: var(--green-500); --scale-4-edge: var(--green-150); --scale-4-on: var(--gray-900); --scale-5: var(--green-350); --scale-5-lit: var(--green-300); --scale-5-deep: var(--green-400); --scale-5-edge: var(--green-100); --scale-5-on: var(--gray-900); --scale-6: var(--green-250); --scale-6-lit: var(--green-200); --scale-6-deep: var(--green-300); --scale-6-edge: var(--green-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
:root[data-theme="dark"] [data-scale="yellow"] { --scale-1: var(--yellow-750); --scale-1-lit: var(--yellow-700); --scale-1-deep: var(--yellow-800); --scale-1-edge: var(--yellow-450); --scale-1-on: var(--gray-0); --scale-2: var(--yellow-650); --scale-2-lit: var(--yellow-600); --scale-2-deep: var(--yellow-700); --scale-2-edge: var(--yellow-350); --scale-2-on: var(--gray-0); --scale-3: var(--yellow-550); --scale-3-lit: var(--yellow-500); --scale-3-deep: var(--yellow-600); --scale-3-edge: var(--yellow-250); --scale-3-on: var(--gray-0); --scale-4: var(--yellow-400); --scale-4-lit: var(--yellow-350); --scale-4-deep: var(--yellow-450); --scale-4-edge: var(--yellow-100); --scale-4-on: var(--gray-900); --scale-5: var(--yellow-350); --scale-5-lit: var(--yellow-300); --scale-5-deep: var(--yellow-400); --scale-5-edge: var(--yellow-100); --scale-5-on: var(--gray-900); --scale-6: var(--yellow-250); --scale-6-lit: var(--yellow-200); --scale-6-deep: var(--yellow-300); --scale-6-edge: var(--yellow-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
:root[data-theme="dark"] [data-scale="orange"] { --scale-1: var(--orange-750); --scale-1-lit: var(--orange-700); --scale-1-deep: var(--orange-800); --scale-1-edge: var(--orange-450); --scale-1-on: var(--gray-0); --scale-2: var(--orange-650); --scale-2-lit: var(--orange-600); --scale-2-deep: var(--orange-700); --scale-2-edge: var(--orange-350); --scale-2-on: var(--gray-0); --scale-3: var(--orange-550); --scale-3-lit: var(--orange-500); --scale-3-deep: var(--orange-600); --scale-3-edge: var(--orange-250); --scale-3-on: var(--gray-0); --scale-4: var(--orange-450); --scale-4-lit: var(--orange-400); --scale-4-deep: var(--orange-500); --scale-4-edge: var(--orange-150); --scale-4-on: var(--gray-0); --scale-5: var(--orange-350); --scale-5-lit: var(--orange-300); --scale-5-deep: var(--orange-400); --scale-5-edge: var(--orange-100); --scale-5-on: var(--gray-900); --scale-6: var(--orange-250); --scale-6-lit: var(--orange-200); --scale-6-deep: var(--orange-300); --scale-6-edge: var(--orange-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
:root[data-theme="dark"] [data-scale="red"] { --scale-1: var(--red-750); --scale-1-lit: var(--red-700); --scale-1-deep: var(--red-800); --scale-1-edge: var(--red-450); --scale-1-on: var(--gray-0); --scale-2: var(--red-650); --scale-2-lit: var(--red-600); --scale-2-deep: var(--red-700); --scale-2-edge: var(--red-350); --scale-2-on: var(--gray-0); --scale-3: var(--red-550); --scale-3-lit: var(--red-500); --scale-3-deep: var(--red-600); --scale-3-edge: var(--red-250); --scale-3-on: var(--gray-0); --scale-4: var(--red-450); --scale-4-lit: var(--red-400); --scale-4-deep: var(--red-500); --scale-4-edge: var(--red-150); --scale-4-on: var(--gray-0); --scale-5: var(--red-350); --scale-5-lit: var(--red-300); --scale-5-deep: var(--red-400); --scale-5-edge: var(--red-100); --scale-5-on: var(--gray-900); --scale-6: var(--red-250); --scale-6-lit: var(--red-200); --scale-6-deep: var(--red-300); --scale-6-edge: var(--red-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
:root[data-theme="dark"] [data-scale="magenta"] { --scale-1: var(--magenta-750); --scale-1-lit: var(--magenta-700); --scale-1-deep: var(--magenta-800); --scale-1-edge: var(--magenta-450); --scale-1-on: var(--gray-0); --scale-2: var(--magenta-650); --scale-2-lit: var(--magenta-600); --scale-2-deep: var(--magenta-700); --scale-2-edge: var(--magenta-350); --scale-2-on: var(--gray-0); --scale-3: var(--magenta-550); --scale-3-lit: var(--magenta-500); --scale-3-deep: var(--magenta-600); --scale-3-edge: var(--magenta-250); --scale-3-on: var(--gray-0); --scale-4: var(--magenta-450); --scale-4-lit: var(--magenta-400); --scale-4-deep: var(--magenta-500); --scale-4-edge: var(--magenta-150); --scale-4-on: var(--gray-0); --scale-5: var(--magenta-350); --scale-5-lit: var(--magenta-300); --scale-5-deep: var(--magenta-400); --scale-5-edge: var(--magenta-100); --scale-5-on: var(--gray-900); --scale-6: var(--magenta-250); --scale-6-lit: var(--magenta-200); --scale-6-deep: var(--magenta-300); --scale-6-edge: var(--magenta-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
:root[data-theme="dark"] [data-scale="ink"] { --scale-1: var(--gray-750); --scale-1-lit: var(--gray-700); --scale-1-deep: var(--gray-800); --scale-1-edge: var(--gray-450); --scale-1-on: var(--gray-0); --scale-2: var(--gray-650); --scale-2-lit: var(--gray-600); --scale-2-deep: var(--gray-700); --scale-2-edge: var(--gray-350); --scale-2-on: var(--gray-0); --scale-3: var(--gray-550); --scale-3-lit: var(--gray-500); --scale-3-deep: var(--gray-600); --scale-3-edge: var(--gray-250); --scale-3-on: var(--gray-0); --scale-4: var(--gray-450); --scale-4-lit: var(--gray-400); --scale-4-deep: var(--gray-500); --scale-4-edge: var(--gray-150); --scale-4-on: var(--gray-900); --scale-5: var(--gray-350); --scale-5-lit: var(--gray-300); --scale-5-deep: var(--gray-400); --scale-5-edge: var(--gray-100); --scale-5-on: var(--gray-900); --scale-6: var(--gray-250); --scale-6-lit: var(--gray-200); --scale-6-deep: var(--gray-300); --scale-6-edge: var(--gray-100); --scale-6-on: var(--gray-900); --scale-rank-1: var(--scale-2); --scale-rank-1-on: var(--scale-2-on); --scale-rank-2: var(--scale-3); --scale-rank-2-on: var(--scale-3-on); --scale-rank-3: var(--scale-5); --scale-rank-3-on: var(--scale-5-on); --scale-rank-4: var(--scale-6); --scale-rank-4-on: var(--scale-6-on); --scale-cell-1: var(--scale-1); --scale-cell-2: var(--scale-2); --scale-cell-3: var(--scale-3); --scale-cell-4: var(--scale-4); --scale-cell-5: var(--scale-5); }
}

/* ═══ 80-rich-text.css ═══ */
@layer components {
[data-r="rich-text"] { position: relative; min-width: 0; color: var(--ink); font-size: var(--fs-15); line-height: var(--lh-15); font-weight: var(--fw-450); overflow-wrap: break-word; }
[data-r="rich-text"] > [data-part="doc"] { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: var(--lh-15); outline: none; caret-color: var(--accent); cursor: text; }
[data-r="rich-text"][data-readonly] > [data-part="doc"] { cursor: default; }
[data-r="rich-text"] [data-part="item"] { --gap: 12px; --line: var(--lh-15); --indent: 0; --indent-w: calc(var(--indent) * 26px); position: relative; display: flex; align-items: flex-start; min-width: 0; margin-top: var(--gap); }
[data-r="rich-text"] [data-part="item"]:first-child { --gap: 0px; }
[data-r="rich-text"] [data-part="item"]::after { content: ""; position: absolute; left: -32px; right: 0; bottom: 100%; height: var(--gap); pointer-events: auto; }
[data-r="rich-text"] [data-part="text"] { position: relative; flex: 1; min-width: 0; margin: 0; white-space: pre-wrap; outline: none; }
[data-r="rich-text"] [data-part="text"][data-empty][data-placeholder]::before { content: attr(data-placeholder); position: absolute; left: 0; top: 0; right: 0; color: var(--ink-3); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-r="rich-text"] [data-block="quote"] > [data-part="text"][data-empty][data-placeholder]::before { left: 16px; }
[data-r="rich-text"] [data-block="heading"] > [data-part="text"] { font-weight: var(--fw-550); color: var(--ink); }
[data-r="rich-text"] [data-block="heading"][data-level="1"] { --line: var(--lh-20); }
[data-r="rich-text"] [data-block="heading"][data-level="1"] > [data-part="text"] { font-size: var(--fs-20); line-height: var(--lh-20); }
[data-r="rich-text"] [data-block="heading"][data-level="2"] { --line: var(--lh-16); }
[data-r="rich-text"] [data-block="heading"][data-level="2"] > [data-part="text"] { font-size: var(--fs-16); line-height: var(--lh-16); }
[data-r="rich-text"] [data-block="heading"][data-level="3"] > [data-part="text"] { font-size: var(--fs-15); line-height: var(--lh-15); }
[data-r="rich-text"] [data-part="item"] + [data-block="heading"][data-level="1"] { --gap: 32px; }
[data-r="rich-text"] [data-part="item"] + [data-block="heading"][data-level="2"] { --gap: 24px; }
[data-r="rich-text"] [data-part="item"] + [data-block="heading"][data-level="3"] { --gap: 20px; }
[data-r="rich-text"] [data-block="heading"][data-level="1"] + [data-part="item"] { --gap: 8px; }
[data-r="rich-text"] [data-block="heading"][data-level="2"] + [data-part="item"] { --gap: 6px; }
[data-r="rich-text"] [data-block="heading"][data-level="3"] + [data-part="item"] { --gap: 4px; }
[data-r="rich-text"] [data-block="bullet"] + [data-block="bullet"],
[data-r="rich-text"] [data-block="numbered"] + [data-block="numbered"],
[data-r="rich-text"] [data-block="todo"] + [data-block="todo"],
[data-r="rich-text"] :is([data-block="bullet"], [data-block="numbered"], [data-block="todo"]) + :is([data-block="bullet"], [data-block="numbered"], [data-block="todo"]):not([data-indent="0"]),
[data-r="rich-text"] :is([data-block="bullet"], [data-block="numbered"], [data-block="todo"]):not([data-indent="0"]) + :is([data-block="bullet"], [data-block="numbered"], [data-block="todo"]) { --gap: 4px; }
[data-r="rich-text"] [data-part="item"] + :is([data-block="code"], [data-block="callout"]),
[data-r="rich-text"] :is([data-block="code"], [data-block="callout"]) + [data-part="item"] { --gap: 16px; }
[data-r="rich-text"] [data-part="item"] + :is([data-block="table"], [data-block="image"]),
[data-r="rich-text"] :is([data-block="table"], [data-block="image"]) + [data-part="item"] { --gap: 20px; }
[data-r="rich-text"] [data-part="item"] + [data-block="divider"],
[data-r="rich-text"] [data-block="divider"] + [data-part="item"] { --gap: 16px; }
[data-r="rich-text"] [data-part="doc"] > [data-part="slot"] { margin-top: 12px; }
[data-r="rich-text"] [data-part="item"] > [data-part="handle"] { position: absolute; z-index: 1; top: calc((var(--line) - var(--h-24)) / 2); left: calc(var(--indent-w) - 28px); width: 20px; height: var(--h-24); opacity: 0; transition: opacity var(--state-out), color var(--state-out), background-color var(--state-out); }
[data-r="rich-text"] [data-part="item"] > [data-part="handle"]::before { content: ""; position: absolute; inset: 0 -8px 0 0; }
[data-r="rich-text"] [data-part="item"] > [data-part="handle"]:is(:focus-visible, [aria-expanded="true"]),
[data-r="rich-text"] [data-part="item"]:is([data-lifted], [data-held]) > [data-part="handle"] { opacity: 1; transition-duration: 0s; }
@media (hover: hover) {
  [data-r="rich-text"] [data-part="item"]:hover > [data-part="handle"],
  [data-r="rich-text"] [data-part="item"] > [data-part="handle"]:hover { opacity: 1; transition-duration: 0s; }
}
[data-r="rich-text"] [data-part="item"][data-force~="hover"] > [data-part="handle"],
[data-r="rich-text"] [data-part="item"] > [data-part="handle"][data-force~="hover"] { opacity: 1; transition-duration: 0s; }
[data-r="rich-text"] [data-part="item"] > [data-part="handle"][aria-expanded="true"] { background-color: var(--plane-hover); color: var(--ink-2); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="rich-text"] [data-part="item"] > [data-part="handle"]:hover { background-color: var(--plane-hover); color: var(--ink-2); transition-duration: 0s; }
}
[data-r="rich-text"] [data-part="item"] > [data-part="handle"][data-force~="hover"] { background-color: var(--plane-hover); color: var(--ink-2); transition-duration: 0s; }
[data-r="rich-text"][data-typing] [data-part="item"] > [data-part="handle"]:not([aria-expanded="true"]):not(:focus-visible) { opacity: 0; }
[data-r="rich-text"][data-readonly] [data-part="item"] > [data-part="handle"] { display: none; }
[data-r="rich-text"] [data-part="doc"] > [data-part="item"]:is([data-lifted], [data-held]) { border-radius: var(--r-row); background-color: var(--raised); box-shadow: 0 0 0 4px var(--raised), 0 0 0 5px rgb(var(--ring-rgb) / var(--ring-hover)), var(--e3); }
[data-r="rich-text"] [data-part="item"][data-selected] { border-radius: var(--r-row); background-color: var(--selection); box-shadow: 0 0 0 4px var(--selection); }
[data-r="rich-text"] [data-part="item"][data-selected] ::selection { background: transparent; }
[data-r="rich-text"] :is([data-block="bullet"], [data-block="numbered"], [data-block="todo"]) { padding-left: var(--indent-w); }
[data-r="rich-text"] [data-block="bullet"]::before { content: ""; flex: none; width: 26px; height: var(--line); background: radial-gradient(circle 2.75px at 16px 50%, var(--ink-3) 2.25px, transparent 2.75px); }
[data-r="rich-text"] [data-block="bullet"]:is([data-indent="1"], [data-indent="4"])::before { background: radial-gradient(circle 3px at 16px 50%, transparent 1.75px, var(--ink-3) 2.1px, var(--ink-3) 2.6px, transparent 3px); }
[data-r="rich-text"] [data-block="bullet"][data-indent="2"]::before { background: linear-gradient(var(--ink-3), var(--ink-3)) 14px 50% / 4.5px 4.5px no-repeat; }
[data-r="rich-text"] [data-block="numbered"]::before { content: attr(data-n) "."; flex: none; min-width: 22px; margin-right: 4px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="rich-text"] [data-block="todo"] > [data-r="checkbox"] { margin: calc((var(--line) - 14px) / 2) 10px 0 2px; }
[data-r="rich-text"] [data-block="todo"] > [data-part="text"] { transition: color var(--state-out); }
[data-r="rich-text"] [data-block="todo"][data-checked] > [data-part="text"] { color: var(--ink-2); text-decoration-line: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--ink-3); }
[data-r="rich-text"] [data-block="quote"] > [data-part="text"] { padding-left: 16px; border-left: var(--px) solid var(--line-5); color: var(--ink-2); }
[data-r="rich-text"] [data-block="callout"] > [data-part="box"] { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; padding: 12px 16px 12px 12px; border-radius: var(--r-value); background: var(--well); }
[data-r="rich-text"] [data-block="callout"] [data-part="icon"] { display: flex; align-items: center; flex: none; height: var(--line); color: var(--ink-2); }
[data-r="rich-text"] [data-block="callout"] [data-part="icon"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); }
[data-r="rich-text"] [data-block="callout"][data-icon="info"] [data-part="icon"] { color: var(--info-dot); }
[data-r="rich-text"] [data-block="callout"][data-icon="warning"] [data-part="icon"] { color: var(--warning-dot); }
[data-r="rich-text"] [data-block="callout"][data-icon="alert"] [data-part="icon"] { color: var(--danger-dot); }
[data-r="rich-text"] [data-block="code"] > [data-r="code-block"] { flex: 1; min-width: 0; }
[data-r="rich-text"] [data-block="code"] [data-part="text"] { flex: none; display: block; min-height: var(--lh-13); font-family: var(--font-mono); font-size: var(--fs-13); line-height: var(--lh-13); white-space: pre; }
[data-r="rich-text"] [data-block="code"] > [data-part="handle"] { top: calc((var(--h-32) - var(--h-24)) / 2); }
[data-r="rich-text"] [data-block="divider"] { --line: 24px; align-items: center; height: 24px; }
[data-r="rich-text"] [data-block="divider"] > hr { flex: 1; height: 0; margin: 0; border: 0; border-top: var(--px) solid var(--line-3); }
[data-r="rich-text"] [data-block="table"] { --line: var(--row-32); display: grid; grid-template-columns: minmax(0, max-content) 20px; grid-template-rows: auto 20px; gap: 4px; }
[data-r="rich-text"] [data-block="table"] > [data-part="scroll"] { min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--a20) transparent; }
[data-r="rich-text"] [data-block="table"] [data-r="table"] { width: auto; min-width: 100%; }
[data-r="rich-text"] [data-block="table"] [data-r="table"] :is(th, td) { position: static; min-width: 120px; flex: none; vertical-align: top; white-space: pre-wrap; outline: none; }
[data-r="rich-text"] [data-block="table"] [data-r="table"] th { height: var(--row-32); padding-top: 7px; padding-bottom: 7px; }
[data-r="rich-text"] [data-block="table"] [data-r="table"] :is(th, td) + :is(th, td) { border-left: var(--px) solid var(--line-1); }
@media (hover: hover) {
  [data-r="rich-text"] [data-block="table"] [data-r="table"] tbody tr:hover > td { background: transparent; }
}
[data-r="rich-text"] [data-block="table"] [data-r="table"] tbody tr[data-force~="hover"] > td { background: transparent; }
[data-r="rich-text"] [data-block="table"] > [data-part="add"] { display: grid; place-items: center; padding: 0; border-radius: var(--r-press); color: var(--ink-3); opacity: 0; transition: opacity var(--state-out), background-color var(--state-out), color var(--state-out); }
[data-r="rich-text"] [data-block="table"] > [data-part="add"][data-add="column"] { grid-column: 2; grid-row: 1; }
[data-r="rich-text"] [data-block="table"] > [data-part="add"][data-add="row"] { grid-column: 1; grid-row: 2; }
[data-r="rich-text"] [data-block="table"] > [data-part="add"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); }
@media (hover: hover) {
  [data-r="rich-text"] [data-block="table"]:hover > [data-part="add"] { opacity: 1; transition-duration: 0s; }
}
[data-r="rich-text"] [data-block="table"][data-force~="hover"] > [data-part="add"] { opacity: 1; transition-duration: 0s; }
@media (hover: hover) {
  [data-r="rich-text"] [data-block="table"] > [data-part="add"]:hover { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="rich-text"] [data-block="table"] > [data-part="add"][data-force~="hover"] { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
[data-r="rich-text"][data-readonly] [data-block="table"] > [data-part="add"] { display: none; }
[data-r="rich-text"] [data-block="image"] { --line: var(--lh-13); }
[data-r="rich-text"] [data-block="image"] > figure { flex: 1; min-width: 0; margin: 0; }
[data-r="rich-text"] [data-block="image"] [data-part="media"] { display: block; }
[data-r="rich-text"] [data-block="image"] [data-part="media"] > img { display: block; max-width: 100%; height: auto; border-radius: var(--r-value); box-shadow: 0 0 0 var(--px) var(--line-1); }
[data-r="rich-text"] [data-block="image"] figcaption[data-part="text"] { display: block; margin-top: 8px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-3); }
[data-r="rich-text"] [data-block="image"] [data-part="empty"] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: var(--row-52); padding: 8px 12px 8px 14px; border-radius: var(--r-value); background: var(--well); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); cursor: default; }
[data-r="rich-text"] [data-block="image"] [data-part="empty"] > svg[data-icon] { color: var(--ink-3); }
[data-r="rich-text"] [data-block="session"] { --line: var(--row-36); }
[data-r="rich-text"] [data-block="session"] > [data-r="embed"] { flex: 1; min-width: 0; min-height: var(--row-36); margin: 0; padding: 8px 12px; font-size: var(--fs-13); line-height: var(--lh-13); cursor: default; }
[data-r="rich-text"] [data-block="session"] > [data-r="embed"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); }
[data-r="rich-text"] [data-part="text"] strong { font-weight: var(--fw-550); }
[data-r="rich-text"] [data-part="text"] s { text-decoration-thickness: 1px; }
[data-r="rich-text"] [data-part="text"]:not([data-r="code-block"] *) code { padding: 1px 4px; border-radius: var(--r-key); background: var(--well); color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-13); font-feature-settings: normal; font-variant-ligatures: none; letter-spacing: 0; overflow-wrap: anywhere; }
[data-r="rich-text"] [data-block="heading"] [data-part="text"] code { font-size: inherit; }
[data-r="rich-text"] [data-part="text"] a { border-radius: var(--r-key); color: var(--ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--a35); transition: text-decoration-color var(--state-out); }
@media (hover: hover) {
  [data-r="rich-text"] [data-part="text"] a:hover { text-decoration-color: var(--ink); transition-duration: 0s; }
}
[data-r="rich-text"] [data-part="text"] a[data-force~="hover"] { text-decoration-color: var(--ink); transition-duration: 0s; }
[data-r="rich-text"] [data-r="mention"] { vertical-align: 1px; cursor: default; }
[data-r="rich-text"] [data-r="mention"][data-kind="date"] { gap: 4px; padding-left: 5px; }
[data-r="rich-text"] [data-r="mention"][data-kind="date"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); color: var(--ink-2); }
[data-r="rich-text"] [data-block="heading"] [data-r="mention"] { vertical-align: 2px; }
[data-r="menu"][data-kind="blocks"] [data-r="menu-item"][data-lines="2"] > [data-part="stack"] > :first-child { color: inherit; }
[data-r="menu"][data-kind="blocks"] [data-r="menu-item"] > [data-part="end"] > [data-r="keys"] { gap: 2px; }
[data-r="format-bar"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); white-space: nowrap; user-select: none; -webkit-user-select: none; }
[data-r="format-bar"] > [data-r="toolbar-separator"] { margin: 0 3px; }
[data-r="format-bar"] > [data-part="turn"] { --pad: 8px; --pad-icon: 6px; }
[data-r="format-bar"] > [data-part="turn"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); color: var(--ink-3); }
@media (hover: hover) {
  [data-r="format-bar"] > [data-part="turn"]:is(:hover, [aria-expanded="true"]) > svg[data-icon] { color: var(--ink-2); }
}
[data-r="format-bar"] > [data-part="turn"]:is([data-force~="hover"], [aria-expanded="true"]) > svg[data-icon] { color: var(--ink-2); }
[data-r="popover"][data-kind="link"] { width: 340px; max-width: calc(100vw - 16px); }
[data-r="outline"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); position: relative; width: 32px; font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="outline"] > [data-part="lines"] { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 0 8px 6px; }
[data-r="outline"] [data-part="line"] { display: block; flex: none; width: 20px; height: 2px; border-radius: var(--r-press); background: var(--ink-4); transition: background-color var(--state-out); }
[data-r="outline"] [data-part="line"][data-level="2"] { width: 14px; }
[data-r="outline"] [data-part="line"][data-level="3"] { width: 8px; }
[data-r="outline"] [data-part="line"][data-current] { background: var(--ink); transition-duration: 0s; }
[data-r="outline"] > [data-part="panel"] { position: absolute; z-index: 3; top: -4px; left: 0; display: flex; flex-direction: column; width: 248px; max-height: min(420px, 70vh); padding: var(--inset); overflow: hidden auto; overscroll-behavior: contain; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); opacity: 0; pointer-events: none; transform: scale(var(--scale-from)); transform-origin: 0 0; transition: opacity var(--opacity-out) ease-out, transform var(--scale-out) linear; }
[data-r="outline"] > [data-part="panel"][popover] { position: fixed; inset: auto; height: auto; margin: 0; border: 0; color: inherit; }
@media (hover: hover) {
  [data-r="outline"]:is(:hover, :focus-within, [data-open]) > [data-part="panel"] { opacity: 1; pointer-events: auto; transform: none; transition: opacity var(--opacity-in) linear, transform var(--scale-in) var(--ease-expo); }
}
[data-r="outline"]:is([data-force~="hover"], :focus-within, [data-open]) > [data-part="panel"] { opacity: 1; pointer-events: auto; transform: none; transition: opacity var(--opacity-in) linear, transform var(--scale-in) var(--ease-expo); }
[data-r="outline"] [data-part="row"] { display: flex; align-items: center; flex: none; width: 100%; height: var(--row-28); padding: 0 8px; border-radius: var(--r-row); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); text-align: left; white-space: nowrap; transition: background-color var(--state-out), color var(--state-out); }
[data-r="outline"] [data-part="row"] > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-r="outline"] [data-part="row"][data-level="2"] { padding-left: 20px; }
[data-r="outline"] [data-part="row"][data-level="3"] { padding-left: 32px; }
@media (hover: hover) {
  [data-r="outline"] [data-part="row"]:hover { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="outline"] [data-part="row"][data-force~="hover"] { background: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
[data-r="outline"] [data-part="row"][aria-current="true"] { background: var(--plane-selected); color: var(--ink); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="outline"] [data-part="row"][aria-current="true"]:hover { background: var(--plane-selected); color: var(--ink); transition-duration: 0s; }
}
[data-r="outline"] [data-part="row"][aria-current="true"][data-force~="hover"] { background: var(--plane-selected); color: var(--ink); transition-duration: 0s; }
[data-r="outline"] [data-part="row"]:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
[data-r="outline"] [data-part="row"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: -1px; }
[data-r="outline"][data-empty] { display: none; }
}

/* ═══ 80-session-preview.css ═══ */
@layer components {
[data-r="session-preview"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); position: relative; display: flex; flex-direction: column; width: 320px; max-width: calc(100vw - 16px); border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); outline: none; }
[data-r="session-preview"][hidden] { display: none; }
[data-r="session-preview"] > [data-part="head"] { display: flex; align-items: flex-start; gap: 8px; padding: 12px 8px 4px 14px; }
[data-r="session-preview"] > [data-part="head"] > [data-r="status"] { margin-top: 2px; flex: none; }
[data-r="session-preview"] > [data-part="head"] > [data-part="heading"] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
[data-r="session-preview"] [data-part="heading"] > [data-part="title"] { font-weight: var(--fw-550); color: var(--ink); overflow-wrap: anywhere; }
[data-r="session-preview"] [data-part="heading"] > [data-part="when"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="session-preview"] > [data-part="body"] { display: flex; flex-direction: column; gap: 12px; padding: 8px 14px 12px; }
[data-r="session-preview"] > [data-part="body"] > [data-r="workout"] { margin-top: 2px; }
[data-r="session-preview"] [data-part="figures"] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
[data-r="session-preview"] [data-part="figures"] > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-r="session-preview"] [data-part="figures"] dt { font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-r="session-preview"] [data-part="figures"] dd { margin: 0; font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="session-preview"] [data-part="figures"] dd > small { font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="session-preview"] [data-part="figures"] dd[data-empty] { color: var(--ink); }
[data-r="session-preview"] [data-part="facts"] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="session-preview"] [data-part="facts"] > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
[data-r="session-preview"] [data-part="facts"] > span > b { font-weight: var(--fw-500); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="session-preview"] > [data-part="actions"] { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
[data-r="session-preview"] > [data-part="foot"] { display: flex; align-items: center; gap: 8px; min-height: var(--row-40); padding: 4px 8px 4px 6px; border-top: var(--px) solid var(--line-1); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="session-preview"] > [data-part="foot"] > [data-part="browse"] { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
[data-r="side-panel"] [data-part="structure"] { display: flex; flex-direction: column; gap: 10px; }
[data-r="side-panel"] [data-part="structure"] > [data-part="written"] { padding: 8px 10px; border-radius: var(--r-value); background: var(--well); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
[data-r="side-panel"] [data-part="record"] > [data-part="meta"] > [data-part="keys"] { margin-left: auto; white-space: nowrap; }
}

/* ═══ 81-chat.css ═══ */
@layer components {
[data-r="conversation"] { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); container-type: inline-size; --chat-side: 24px; --chat-foot: 16px; min-width: 0; min-height: 0; height: 100%; background: var(--plane); color: var(--ink); font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="conversation"] > [data-r="scroll-area"] { min-height: 0; }
[data-r="conversation"] [data-part="feed"] { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: var(--col-feed); margin: 0 auto; padding: 24px var(--chat-side) 32px; }
[data-r="conversation"] > [data-part="dock"] { position: relative; z-index: 2; width: 100%; max-width: var(--col-feed); margin: 0 auto; padding: 0 var(--chat-side) var(--chat-foot); }
[data-r="conversation"] > [data-part="dock"] > [data-part="greeting"] { display: none; }
@container (max-width: 560px) {
  [data-r="conversation"] > * { --chat-side: 12px; --chat-foot: 12px; }
  [data-r="conversation"] [data-part="feed"] { padding-top: 16px; padding-bottom: 24px; }
  [data-r="conversation"] [data-r="message"] > [data-part="bubble"] { max-width: 92%; }
}
[data-r="conversation"] > [data-part="dock"] > [data-part="latest"] { position: absolute; top: -40px; left: 50%; margin-left: -14px; display: flex; opacity: 0; pointer-events: none; transition: opacity var(--opacity-out) linear; }
[data-r="conversation"][data-away] > [data-part="dock"] > [data-part="latest"] { opacity: 1; pointer-events: auto; transition: opacity var(--opacity-in) linear; }
[data-r="conversation"][data-empty] { grid-template-rows: auto; align-content: center; padding-bottom: 48px; }
[data-r="conversation"][data-empty] > [data-r="scroll-area"] { display: none; }
[data-r="conversation"][data-empty] > [data-part="dock"] > [data-part="greeting"] { display: block; margin: 0 0 16px; text-align: center; text-wrap: balance; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); }
[data-r="conversation"][data-empty] > [data-part="dock"] > [data-part="latest"] { display: none; }
[data-r="message"] { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; color: var(--ink); font-size: var(--fs-15); line-height: var(--lh-15); font-weight: var(--fw-450); }
[data-r="message"][data-from="me"] { align-items: flex-end; }
[data-r="message"] > [data-part="bubble"] { max-width: min(85%, 600px); padding: 8px 14px; border-radius: var(--r-contain); background: var(--plane-selected); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; outline: none; }
[data-r="message"] > [data-r="prose"] { max-width: none; }
[data-r="message"] [data-part="caret"] { display: inline-block; width: 2px; height: 17px; margin-left: 2px; vertical-align: -3px; background: var(--ink); animation: r-caret var(--indeterminate) var(--ease-quad) infinite alternate; }
[data-r="message"] [data-part="caret"] { border-radius: 1px; }
@keyframes r-caret { to { opacity: .2; } }
[data-r="message"] > [data-part="note"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="message"] > [data-part="actions"] { display: flex; align-items: center; gap: 2px; height: var(--h-24); margin: -4px -4px 0; opacity: 0; transition: opacity var(--state-out); }
[data-r="message"]:not([data-last]) > [data-part="actions"] { position: absolute; top: 100%; left: 0; right: 0; margin: 0 -4px; }
[data-r="message"][data-from="me"] > [data-part="actions"] { justify-content: flex-end; }
[data-r="message"][data-last]:not([aria-busy="true"]) > [data-part="actions"] { opacity: 1; transition-duration: 0s; }
@media (hover: hover) {
  [data-r="message"]:is(:hover, :focus-within) > [data-part="actions"] { opacity: 1; transition-duration: 0s; }
}
[data-r="message"]:is([data-force~="hover"], :focus-within) > [data-part="actions"] { opacity: 1; transition-duration: 0s; }
[data-r="message"][aria-busy="true"] > [data-part="actions"] { visibility: hidden; }
[data-r="message"] > [data-part="actions"] > [data-part="copy"][data-copied] { color: var(--ink); }
@media (hover: none) {
  [data-r="message"] > [data-part="actions"] { opacity: 1; }
}
[data-r="message"][data-editing] > [data-part="bubble"] { --ring-gap: var(--raised); width: min(85%, 600px); background: var(--raised); box-shadow: var(--ring-field); cursor: text; }
[data-r="message"][data-editing] > [data-part="actions"] { display: none; }
[data-r="message"] > [data-part="edit"] { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
[data-r="message"] > [data-part="edit"] > [data-part="hint"] { margin-right: 6px; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }
[data-r="message"] > [data-r="banner"] { margin-top: 4px; }
[data-r="message"] > [data-r="message-step"] + [data-r="message-step"] { margin-top: -6px; }
[data-r="message"] > [data-r="message-changes"] { margin-top: 4px; }
[data-r="message-step"] { display: flex; flex-direction: column; min-width: 0; color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); }
[data-r="message-step"] > [data-part="head"] { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: var(--h-28); margin-left: -6px; padding: 0 6px; border-radius: var(--r-row); color: var(--ink-2); text-align: left; transition: background-color var(--state-out), color var(--state-out); }
[data-r="message-step"] > [data-part="head"] > :is(svg[data-icon]:first-child, [data-r="spinner"]) { flex: none; width: var(--icon-14); height: var(--icon-14); color: var(--ink-3); }
[data-r="message-step"] > [data-part="head"] > [data-part="label"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="message-step"] > [data-part="head"] > [data-part="meta"] { flex: none; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="message-step"] > [data-part="head"] > [data-part="chevron"] { flex: none; width: var(--icon-12); height: var(--icon-12); color: var(--ink-3); }
[data-r="message-step"] > [data-part="head"][aria-expanded="true"] > [data-part="chevron"] { transform: rotate(90deg); }
[data-r="message-step"] > [data-part="head"][aria-expanded="true"] { color: var(--ink); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="message-step"] > [data-part="head"]:hover { color: var(--ink); transition-duration: 0s; }
}
[data-r="message-step"] > [data-part="head"][data-force~="hover"] { color: var(--ink); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="message-step"] > [data-part="head"]:hover { background-color: var(--plane-hover); }
}
[data-r="message-step"] > [data-part="head"][data-force~="hover"] { background-color: var(--plane-hover); }
@media (hover: hover) {
  [data-r="message-step"] > [data-part="head"]:is(:hover, [aria-expanded="true"]) > :is(svg[data-icon], [data-part="meta"]) { color: var(--ink-2); }
}
[data-r="message-step"] > [data-part="head"]:is([data-force~="hover"], [aria-expanded="true"]) > :is(svg[data-icon], [data-part="meta"]) { color: var(--ink-2); }
[data-r="message-step"]:is([data-state="running"], [data-state="stopped"]) > [data-part="head"] > [data-part="chevron"] { display: none; }
[data-r="message-step"] > [data-part="panel"] { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--section) var(--ease-expo); }
[data-r="message-step"] > [data-part="head"][aria-expanded="true"] + [data-part="panel"] { grid-template-rows: 1fr; }
[data-r="message-step"] > [data-part="panel"] > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--section); }
[data-r="message-step"] > [data-part="head"][aria-expanded="true"] + [data-part="panel"] > div { visibility: visible; transition-delay: 0s; }
[data-r="message-step"] [data-part="body"] { display: flex; flex-direction: column; margin: 2px 0 6px 7px; padding: 2px 0 2px 12px; border-left: var(--px) solid var(--line-3); }
[data-r="message-step"] [data-part="body"] > [data-part="item"] { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: var(--row-28); color: var(--ink-2); white-space: nowrap; }
[data-r="message-step"] [data-part="body"] > [data-part="item"] > span:not([data-r]) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-r="message-step"] [data-part="body"] > [data-part="item"] > time { margin-left: auto; padding-left: 12px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="message-step"] [data-part="body"] > [data-part="item"] > svg[data-icon] { flex: none; width: var(--icon-14); height: var(--icon-14); color: var(--ink-3); }
[data-r="message-step"] [data-part="body"] > p { margin: 4px 0; color: var(--ink-2); }
[data-r="message-changes"] { display: flex; flex-direction: column; min-width: 0; padding: 4px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)), var(--e1); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); }
[data-r="message-changes"] > * { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); }
[data-r="message-changes"] > [data-part="head"] { display: flex; align-items: center; gap: 8px; min-height: var(--row-36); padding: 0 2px 0 8px; }
[data-r="message-changes"] > [data-part="head"] > svg[data-icon] { flex: none; width: var(--icon-16); height: var(--icon-16); color: var(--ink-3); }
[data-r="message-changes"] > [data-part="head"] > b { font-weight: var(--fw-550); color: var(--ink); white-space: nowrap; }
[data-r="message-changes"] > [data-part="head"] > [data-part="count"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="message-changes"] > [data-part="head"] > [data-part="actions"] { display: flex; align-items: center; gap: 4px; margin-left: auto; }
[data-r="message-changes"] > [data-part="row"] { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; min-height: var(--row-44); padding: 6px 2px 6px 8px; border-radius: var(--r-row); }
[data-r="message-changes"] > [data-part="row"]::before { content: ""; position: absolute; left: 34px; right: 8px; top: 0; height: var(--px); background: var(--line-1); }
[data-r="message-changes"] > [data-part="row"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); color: var(--ink-3); }
[data-r="message-changes"] [data-part="what"] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-r="message-changes"] [data-part="what"] > b { font-weight: var(--fw-500); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--state-out); }
[data-r="message-changes"] [data-part="change"] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="message-changes"] [data-part="change"] > s { text-decoration-color: var(--ink-4); }
[data-r="message-changes"] [data-part="change"] > span { color: var(--ink-2); }
[data-r="message-changes"] [data-part="change"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); }
[data-r="message-changes"] [data-part="end"] { display: flex; align-items: center; gap: 6px; }
[data-r="message-changes"] [data-part="state"] { display: none; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="message-changes"] > [data-part="row"][data-state="undone"] [data-part="state"] { display: inline; }
[data-r="message-changes"] > [data-part="row"][data-state="undone"] [data-part="what"] > b { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--ink-3); }
[data-r="message-box"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); --ring-gap: var(--raised); display: flex; flex-direction: column; min-width: 0; border: .5px solid var(--line-4); border-radius: var(--r-contain); background: var(--raised); box-shadow: var(--e1); color: var(--ink); font-size: var(--fs-13); line-height: var(--lh-13); transition: border-color var(--state-out), box-shadow var(--ring-in) var(--ease-ring); }
[data-r="message-box"]:is(:focus-within, [data-force~="focus"]) { border-color: transparent; box-shadow: var(--ring-field), var(--e1); }
[data-r="message-box"] > [data-part="text"] { display: block; width: 100%; min-height: 43px; max-height: 240px; margin: 0; padding: 12px 14px 4px; border: 0; outline: 0; resize: none; background: transparent; font: inherit; letter-spacing: inherit; color: var(--ink); field-sizing: content; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--a20) transparent; }
[data-r="message-box"] > [data-part="text"]::placeholder { color: var(--ink-3); opacity: 1; }
[data-r="message-box"] > [data-part="bar"] { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 4px 6px 6px 8px; }
[data-r="message-box"] > [data-part="bar"] > [data-part="spacer"] { flex: 1; min-width: 8px; }
[data-r="message-box"] > [data-part="bar"] > [data-r="token"] { min-width: 0; max-width: 220px; }
[data-r="message-box"] > [data-part="bar"]:has(> [data-r="token"]) > [data-part="add-context"] { display: none; }
[data-r="message-box"] > [data-part="bar"] > [data-r="token"] > svg[data-icon] { flex: none; width: var(--icon-12); height: var(--icon-12); margin-left: -2px; color: var(--ink-2); }
[data-r="message-box"] > [data-part="bar"] > [data-r="token"] > [data-part="label"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-r="message-box"] > [data-part="bar"] > [data-part="hint"] { margin-right: 6px; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); white-space: nowrap; opacity: 0; transition: opacity var(--opacity-out) linear; }
[data-r="message-box"][data-filled] > [data-part="bar"] > [data-part="hint"] { opacity: 1; transition: opacity var(--opacity-in) linear; }
[data-r="message-box"]:not([data-streaming]) > [data-part="bar"] > [data-part="stop"],
[data-r="message-box"][data-streaming] > [data-part="bar"] > [data-part="send"] { display: none; }
}

/* ═══ 81-workout-library.css ═══ */
@layer components {
[data-r="side-panel"][data-variant="library"] { width: var(--panel-props); margin: 8px 0 8px 8px; }
[data-r="side-panel"][data-variant="library"][data-over] { left: 0; right: auto; }
[data-r="side-panel"][data-variant="library"] > [data-part="head"] > [data-part="count"] { margin-right: auto; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="side-panel"][data-variant="library"] > [data-part="head"] > [data-part="title"] { flex: none; margin-right: 6px; }
[data-r="side-panel"][data-variant="library"] > [data-part="body"] { gap: 10px; padding: 10px 8px 12px; }
[data-r="side-panel"][data-variant="library"] > [data-part="body"] > [data-r="search"] { flex: none; width: auto; margin: 0 4px; }
[data-r="side-panel"][data-variant="library"] [data-part="hint"] { padding: 0 8px; font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); }
[data-r="tree-item"][data-pick] { cursor: grab; }
[data-r="tree-item"][data-pick] > [data-r="workout"] { flex: none; width: 56px; margin-left: auto; }
[data-r="tree-item"][data-pick] > [data-r="workout"] + [data-part="meta"] { flex: none; width: 30px; margin-left: 0; text-align: right; font-variant-numeric: tabular-nums; }
[data-r="tree-item"][data-folder] > [data-r="dot"] { margin: 0 3px; }
[data-r="tree-item"][data-pick] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); }
[data-r="tree-item"][data-lifted] { z-index: var(--z-dock); cursor: grabbing; pointer-events: none; background: var(--raised); color: var(--ink); box-shadow: 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)), var(--e3); }
[data-r="tree-item"][data-lifted][data-leaving] { opacity: 0; transition: opacity var(--opacity-out) ease-out; }
}

/* ═══ 82-inbox.css ═══ */
@layer components {
[data-r="day-header"] { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; flex: none; height: var(--row-32); margin: 0; padding: 0 16px; background: var(--plane); color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); font-variant-numeric: tabular-nums; white-space: nowrap; transition: box-shadow var(--state-out); }
[data-r="day-header"] > time { color: inherit; }
[data-r="day-header"] > [data-part="count"] { font-weight: var(--fw-450); }
[data-r="day-header"] > [data-part="end"] { margin-left: auto; font-weight: var(--fw-450); }
[data-r="day-header"][data-stuck] { box-shadow: 0 var(--px) 0 var(--line-2); transition-duration: 0s; }
[data-r="day-header"][data-flush] { padding: 0; }
[data-r="day-header"] + * { scroll-margin-top: 32px; }
[data-r="inbox"] { container-type: inline-size; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; background: var(--plane); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); }
[data-r="inbox"] > [data-part="head"] { display: flex; align-items: center; gap: 8px; flex: none; height: 44px; padding: 0 12px 0 16px; border-bottom: var(--px) solid var(--line-2); }
[data-r="inbox"] > [data-part="head"] > [data-r="tabs"] { flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
[data-r="inbox"] > [data-part="head"] > [data-part="actions"] { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
@container (max-width: 480px) {
  [data-r="inbox"] > [data-part="head"] [data-part="read-all"] { width: var(--h-24); padding: 0; }
  [data-r="inbox"] > [data-part="head"] [data-part="read-all"] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
[data-r="inbox"] > [data-part="panel"] { position: relative; flex: 1; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--a20) transparent; }
[data-r="inbox"] [data-part="list"] { display: flex; flex-direction: column; min-height: 100%; padding: 0 0 8px; outline: none; }
[data-r="inbox"] [data-part="group"] { display: flex; flex-direction: column; }
[data-r="inbox"] [data-part="group"]:not(:has([data-r="inbox-row"]:not([hidden]))) { display: none; }
[data-r="inbox"] [data-part="list"] > [data-r="empty"] { flex: 1; justify-content: center; padding-top: 32px; }
[data-r="inbox"] [data-part="list"]:has([data-r="inbox-row"]:not([hidden])) > [data-r="empty"] { display: none; }
[data-r="inbox-row"] { position: relative; display: grid; grid-template-columns: 6px 24px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; flex: none; min-height: var(--row-52); margin: 0 8px; padding: 8px 8px 8px 8px; border-radius: var(--r-row); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); transition: background-color var(--state-out); }
[data-r="inbox-row"] > [data-part="unread"] { width: 6px; height: 6px; border-radius: var(--r-round); background: transparent; }
[data-r="inbox-row"][data-unread] > [data-part="unread"] { background: var(--ink-2); }
[data-r="inbox-row"] > [data-r="avatar"],
[data-r="inbox-row"] > [data-part="icon"] { grid-column: 2; }
[data-r="inbox-row"] > [data-part="icon"] { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--r-round); background: var(--well); color: var(--ink-2); }
[data-r="inbox-row"] > [data-part="icon"] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); }
[data-r="inbox-row"] > [data-part="text"] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-r="inbox-row"] > [data-part="text"] > [data-part="title"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-450); color: var(--ink-2); }
[data-r="inbox-row"][data-unread] > [data-part="text"] > [data-part="title"] { font-weight: var(--fw-500); color: var(--ink); }
[data-r="inbox-row"] > [data-part="text"] > [data-part="summary"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="inbox-row"] > [data-part="end"] { display: grid; align-items: center; justify-items: end; min-width: 56px; }
[data-r="inbox-row"] > [data-part="end"] > * { grid-area: 1 / 1; }
[data-r="inbox-row"] > [data-part="end"] > time { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); white-space: nowrap; }
[data-r="inbox-row"] > [data-part="end"] > [data-part="actions"] { display: flex; align-items: center; gap: 2px; margin-right: -4px; opacity: 0; }
[data-r="inbox-row"][data-highlighted] { background: var(--plane-hover); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="inbox-row"]:hover { background: var(--plane-hover); transition-duration: 0s; }
}
[data-r="inbox-row"][data-force~="hover"] { background: var(--plane-hover); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="inbox-row"]:is(:hover, [data-highlighted], :has([aria-expanded="true"])) > [data-part="end"] > time { visibility: hidden; }
}
[data-r="inbox-row"]:is([data-force~="hover"], [data-highlighted], :has([aria-expanded="true"])) > [data-part="end"] > time { visibility: hidden; }
@media (hover: hover) {
  [data-r="inbox-row"]:is(:hover, [data-highlighted], :has([aria-expanded="true"])) > [data-part="end"] > [data-part="actions"] { opacity: 1; }
}
[data-r="inbox-row"]:is([data-force~="hover"], [data-highlighted], :has([aria-expanded="true"])) > [data-part="end"] > [data-part="actions"] { opacity: 1; }
[data-r="inbox"] [data-part="list"]:focus-visible [data-r="inbox-row"][data-highlighted] { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="inbox-row"][aria-selected="true"] { background: var(--plane-selected); }
@media (hover: hover) {
  [data-r="inbox-row"][aria-selected="true"]:is(:hover, [data-highlighted]) { background: var(--plane-selected-hover); }
}
[data-r="inbox-row"][aria-selected="true"]:is([data-force~="hover"], [data-highlighted]) { background: var(--plane-selected-hover); }
[data-r="inbox-row"][aria-selected="true"] > [data-part="text"] > [data-part="summary"],
[data-r="inbox-row"][aria-selected="true"] > [data-part="end"] > time { color: var(--ink-2); }
[data-r="inbox-row"][data-leaving] { min-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; transition: height var(--section) var(--ease-expo), min-height var(--section) var(--ease-expo), padding var(--section) var(--ease-expo), opacity var(--opacity-out) linear; }
[data-r="inbox"] > [data-part="pick-day"] [data-part="day"]:disabled { color: var(--ink-disabled); pointer-events: none; }
}

/* ═══ 83-pickers.css ═══ */
@layer components {
[data-r="icon-picker"],
[data-r="colour-picker"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); }
[data-r="icon-picker"] { position: relative; display: flex; flex-direction: column; width: 376px; max-width: calc(100vw - 16px); border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); user-select: none; -webkit-user-select: none; }
[data-r="icon-picker"] > [data-part="search"] { display: flex; align-items: center; gap: 10px; flex: none; height: 36px; padding: 0 12px; border-bottom: var(--px) solid var(--line-3); }
[data-r="icon-picker"] > [data-part="search"] > svg[data-icon] { width: var(--icon-14); height: var(--icon-14); color: var(--ink-3); }
[data-r="icon-picker"] > [data-part="search"] > input { flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; outline: 0; background: transparent; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); color: var(--ink); }
[data-r="icon-picker"] > [data-part="search"] > input::placeholder { color: var(--ink-3); opacity: 1; }
[data-r="icon-picker"] > [data-part="categories"] { flex: none; width: auto; padding: 8px 8px 0; }
[data-r="icon-picker"] > [data-part="grid"] { display: grid; grid-template-columns: repeat(12, 28px); grid-auto-rows: 28px; gap: 2px; justify-content: center; align-content: start; height: 244px; padding: 8px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; }
[data-r="icon-picker"] > [data-part="grid"]::-webkit-scrollbar { display: none; }
[data-r="icon-picker"] > [data-part="grid"] > [data-part="label"] { grid-column: 1 / -1; display: flex; align-items: flex-end; padding: 0 6px 4px; font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="icon-picker"] > [data-part="grid"] > [data-part="label"]:not(:first-child) { margin-top: 4px; }
[data-r="icon-picker"] [data-part="cell"] { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-row); color: var(--c, var(--ink-2)); }
[data-r="icon-picker"] [data-part="cell"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); pointer-events: none; }
[data-r="icon-picker"] [data-part="cell"][data-highlighted] { background: var(--plane-selected); }
[data-r="icon-picker"] [data-part="cell"][aria-selected="true"] { background: var(--plane-selected); box-shadow: inset 0 0 0 var(--px) var(--accent); }
[data-r="icon-picker"] > [data-part="grid"] > [data-part="empty"] { grid-column: 1 / -1; padding: 16px 6px; color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); }
[data-r="icon-picker"] > [data-part="foot"] { display: flex; align-items: center; gap: 12px; flex: none; min-height: 44px; padding: 0 12px; border-top: var(--px) solid var(--line-3); }
[data-r="icon-picker"] > [data-part="foot"] > [data-r="swatches"] { flex-wrap: nowrap; gap: 6px; padding: 4px; margin: -4px; }
[data-r="icon-picker"] > [data-part="foot"] > [data-part="name"] { flex: 1; min-width: 0; text-align: right; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-r="button"] > [data-part="icon"] { display: inline-flex; color: var(--c, var(--ink-2)); }
[data-r="button"] > [data-part="icon"] > svg[data-icon] { width: var(--icon); height: var(--icon); }
[data-r="colour-picker"] { position: relative; display: flex; flex-direction: column; gap: 12px; width: 264px; padding: 12px; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); color: var(--ink-2); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); user-select: none; -webkit-user-select: none; }
[data-r="colour-picker"] > [data-r="swatches"] { flex-wrap: nowrap; justify-content: space-between; gap: 4px; padding: 4px; margin: -4px; }
[data-r="colour-picker"] [data-r="swatch"][data-part="custom"] { display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
[data-r="colour-picker"] [data-r="swatch"][data-part="custom"]:not([style]) { background: var(--plane); box-shadow: inset 0 0 0 var(--px) var(--line-4); }
[data-r="colour-picker"] [data-r="swatch"][data-part="custom"]:not([style])[aria-checked="true"] { box-shadow: inset 0 0 0 var(--px) var(--line-4), 0 0 0 2px var(--plane), 0 0 0 3.5px var(--ink-3); }
[data-r="colour-picker"] [data-r="swatch"][data-part="custom"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); }
[data-r="colour-picker"] [data-r="swatch"][data-part="custom"][style] > svg[data-icon] { display: none; }
[data-r="colour-picker"]:not([data-custom]) > [data-part="custom"] { display: none; }
[data-r="colour-picker"] > [data-part="custom"] { display: flex; flex-direction: column; gap: 10px; }
[data-r="colour-picker"] [data-part="plane"] { position: relative; height: 152px; border-radius: var(--r-row); background: var(--well); box-shadow: inset 0 0 0 var(--px) var(--line-2); touch-action: none; cursor: crosshair; outline: none; }
[data-r="colour-picker"] [data-part="plane"] > canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
[data-r="colour-picker"] [data-part="plane"]:focus-visible { box-shadow: inset 0 0 0 var(--px) var(--accent); }
[data-r="colour-picker"] [data-part="plane"][data-force~="focus"] { box-shadow: inset 0 0 0 var(--px) var(--accent); }
[data-r="colour-picker"] [data-part="plane"] > [data-part="lock"] { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
[data-r="colour-picker"] [data-part="plane"] > [data-part="lock"] > i { position: absolute; left: 0; top: var(--at); width: var(--w, 100%); height: var(--px); background: var(--line-2); }
[data-r="colour-picker"] [data-part="plane"] > [data-part="lock"] > i[data-on] { background: var(--line-5); }
[data-r="colour-picker"] [data-part="thumb"] { position: absolute; z-index: 1; left: var(--x, 50%); top: var(--y, 50%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--knob); border-radius: var(--r-round); background: var(--c, var(--ink-4)); box-shadow: var(--handle-shadow); pointer-events: none; transition: transform var(--state-out); }
@media (hover: hover) {
  [data-r="colour-picker"] :is([data-part="plane"], [data-part="hue"]):hover > [data-part="thumb"] { transform: scale(1.14); transition-duration: 0s; }
}
[data-r="colour-picker"] :is([data-part="plane"], [data-part="hue"])[data-force~="hover"] > [data-part="thumb"] { transform: scale(1.14); transition-duration: 0s; }
[data-r="colour-picker"] :is([data-part="plane"], [data-part="hue"])[data-held] > [data-part="thumb"] { transform: scale(1.22); transition: none; }
[data-r="colour-picker"] [data-part="hue"] { position: relative; height: 12px; margin: 2px 7px; border-radius: var(--r-press); touch-action: none; outline: none; }
[data-r="colour-picker"] [data-part="hue"] > canvas { position: absolute; left: -7px; right: -7px; top: 0; width: calc(100% + 14px); height: 100%; border-radius: inherit; box-shadow: inset 0 0 0 var(--px) var(--line-2); }
[data-r="colour-picker"] [data-part="hue"] > [data-part="thumb"] { top: 50%; }
[data-r="colour-picker"] [data-part="hue"]:focus-visible > [data-part="thumb"] { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="colour-picker"] [data-part="hue"][data-force~="focus"] > [data-part="thumb"] { outline: 1px solid var(--accent); outline-offset: 0; }
[data-r="colour-picker"] [data-part="value"] { display: flex; align-items: center; gap: 8px; }
[data-r="colour-picker"] [data-part="value"] > [data-part="preview"] { flex: none; width: 18px; height: 18px; border-radius: var(--r-round); background: var(--c, var(--ink-4)); box-shadow: inset 0 0 0 var(--px) rgb(var(--ring-rgb) / 10%); }
[data-r="colour-picker"] [data-part="value"] > [data-r="field"] { flex: 1; font-variant-numeric: tabular-nums; }
[data-r="colour-picker"] [data-part="snap"] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
[data-r="colour-picker"] [data-part="snap"] > [data-part="step"] { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="colour-picker"] [data-part="contrast"] { display: flex; flex-direction: column; gap: 4px; }
[data-r="colour-picker"] [data-part="contrast"] > [data-part="check"] { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
[data-r="colour-picker"] [data-part="contrast"] > [data-part="check"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); flex: none; }
[data-r="colour-picker"] [data-part="contrast"] > [data-part="check"][data-ok] > svg[data-icon] { color: var(--success-dot); }
[data-r="colour-picker"] [data-part="contrast"] > [data-part="check"]:not([data-ok]) > svg[data-icon] { color: var(--warning-dot); }
[data-r="colour-picker"] [data-part="contrast"] > [data-part="check"] > b { font-weight: var(--fw-500); color: var(--ink); }
[data-r="colour-picker"] [data-part="contrast"] > [data-part="check"] > span { color: var(--ink-2); }
}

/* ═══ 84-scene-chart.css ═══ */
@layer components {
[data-r="scene-chart"] { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; border-radius: var(--r-row); color: var(--ink-3); font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-450); font-variant-numeric: tabular-nums; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
[data-r="scene-chart"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
[data-r="scene-chart"][data-force~="focus"] { outline: 1px solid var(--accent); outline-offset: 4px; }
[data-r="scene-chart"] > [data-part="data"] { display: none; }
[data-r="scene-chart"] > [data-part="plot"] { position: relative; min-width: 0; }
[data-r="scene-chart"] > [data-part="plot"] > [data-part="drawing"] > :is(svg, canvas) { display: block; overflow: visible; }
[data-r="scene-chart"] > [data-part="plot"] > [data-part="drawing"] text { font-weight: var(--fw-450); }
[data-r="scene-chart"] [data-part="drawing"] [data-part="bar"] { transition: opacity var(--state-out) ease-out; }
[data-r="scene-chart"][data-dim] [data-part="drawing"] [data-part="bar"] { opacity: .45; transition-duration: 0s; }
[data-r="scene-chart"] > [data-part="plot"] > [data-part="overlay"] { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
[data-r="scene-chart"] [data-part="overlay"] [data-part="crosshair"] { stroke: var(--a35); stroke-width: 1; shape-rendering: crispEdges; }
[data-r="scene-chart"] [data-part="overlay"] [data-part="highlight"] { stroke: var(--raised); stroke-width: 2; }
[data-r="scene-chart"] [data-part="overlay"] [data-part="ring"] { fill: none; stroke: var(--ink); stroke-width: 1.5; }
[data-r="scene-chart"] [data-part="overlay"] [data-part="knockout"] { fill: var(--raised); }
[data-r="scene-chart"] > [data-part="plot"] > [data-r="tooltip"] { position: absolute; left: 0; top: 0; z-index: 3; min-width: 120px; gap: 3px; }
[data-r="scene-chart"] [data-r="tooltip"] > b { font-size: var(--fs-12); line-height: var(--lh-12); }
[data-r="scene-chart"] [data-r="tooltip"] [data-part="row"] { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); line-height: var(--lh-12); }
[data-r="scene-chart"] [data-r="tooltip"] [data-part="row"] > i { flex: none; width: 10px; height: 2px; border-radius: 1px; background: var(--c, var(--ink-2)); }
[data-r="scene-chart"] [data-r="tooltip"] [data-part="row"] > i[data-kind="block"] { height: 8px; border-radius: 2px; }
[data-r="scene-chart"] [data-r="tooltip"] [data-part="row"] > i[data-kind="none"] { visibility: hidden; }
[data-r="scene-chart"] [data-r="tooltip"] [data-part="row"] > b { min-width: 40px; font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="scene-chart"] [data-r="tooltip"] [data-part="row"] > span { font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="scene-chart"] [data-r="tooltip"] [data-part="row"][data-total] { margin-top: 2px; padding-top: 4px; border-top: var(--px) solid var(--line-1); }
[data-r="scene-chart"] [data-r="tooltip"] > [data-part="note"] { font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-450); color: var(--ink-3); }
[data-r="scene-chart"] > [data-r="legend"] [data-part="scale"] { gap: 3px; }
[data-r="scene-chart"] > [data-r="legend"] [data-part="scale"] > span { margin: 0 3px; }
[data-r="scene-chart"] > [data-part="live"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[data-r="scene-chart"]:not([data-view="table"]) > [data-part="table"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[data-r="scene-chart"][data-view="table"] > :is([data-part="plot"], [data-r="legend"]) { display: none; }
[data-r="scene-chart"][data-view="table"] > [data-part="table"] { display: block; max-height: 280px; overflow: auto; }
[data-r="scene-chart"] > [data-part="nothing"] { display: flex; align-items: center; justify-content: center; min-height: 120px; margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-2); text-align: center; }
[data-r="page"][data-template="explore"] [data-r="chart-card"] > [data-part="header"] > [data-part="title"] > [data-part="sub"] { max-width: 640px; }
[data-r="page"][data-template="explore"] [data-part="distribution"] td > [data-part="why"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="side-panel"] [data-part="control"] > [data-part="label"] > [data-part="note"] { font-weight: var(--fw-450); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="side-panel"] [data-part="control"] > [data-r="select"] { align-self: flex-start; max-width: 100%; }
[data-r="side-panel"] [data-part="control"] > [data-r="segmented"] { align-self: flex-start; }
[data-r="side-panel"] > [data-part="body"] > [data-part="share"] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: auto -8px 0; padding-top: 12px; border-top: var(--px) solid var(--line-1); }
}

/* ═══ 85-viewer.css ═══ */
@layer components {
[data-r="lightbox"],
[data-r="file-browser"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); }
[data-r="lightbox"] { --origin: 50% 50%; position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e3); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); overflow: hidden; }
[data-r="lightbox"]:modal { position: fixed; inset: 8px; width: auto; height: auto; margin: 0; }
dialog[data-r="lightbox"]:not([open]) { display: none; }
[data-r="lightbox"][data-static] { height: 480px; }
[data-r="lightbox"] > [data-part="bar"] { display: flex; align-items: center; gap: 6px; flex: none; height: 44px; padding: 0 8px 0 16px; border-bottom: var(--px) solid var(--line-3); }
[data-r="lightbox"] > [data-part="bar"] > [data-part="title"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-550); color: var(--ink); }
[data-r="lightbox"] > [data-part="bar"] > [data-part="count"] { flex: none; margin-left: 4px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-r="lightbox"] > [data-part="bar"] > [data-part="spacer"] { flex: 1; }
[data-r="lightbox"] > [data-part="bar"] > [data-part="zoom"] { flex: none; min-width: 44px; text-align: center; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-2); font-variant-numeric: tabular-nums; }
[data-r="lightbox"] > [data-part="stage"] { position: relative; flex: 1; min-height: 0; background: var(--well); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
[data-r="lightbox"] > [data-part="stage"][data-zoomed] { cursor: grab; }
[data-r="lightbox"] > [data-part="stage"][data-panning] { cursor: grabbing; }
[data-r="lightbox"] > [data-part="stage"] > [data-part="image"] { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; box-shadow: 0 0 0 var(--px) var(--line-2); -webkit-user-drag: none; pointer-events: none; }
[data-r="lightbox"] > [data-part="stage"][data-glide] > [data-part="image"] { transition: transform var(--scale-in) var(--ease-expo); }
[data-r="lightbox"] > [data-part="stage"] > :is([data-part="prev"], [data-part="next"]) { position: absolute; top: 50%; z-index: 1; margin-top: -16px; }
[data-r="lightbox"] > [data-part="stage"] > [data-part="prev"] { left: 12px; }
[data-r="lightbox"] > [data-part="stage"] > [data-part="next"] { right: 12px; }
[data-r="lightbox"] > [data-part="strip"] { display: flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: 52px; padding: 0 12px; border-top: var(--px) solid var(--line-3); overflow-x: auto; scrollbar-width: none; }
[data-r="lightbox"] > [data-part="strip"] > [data-part="shot"] { position: relative; flex: none; width: 44px; height: 32px; border-radius: var(--r-row); overflow: hidden; background: var(--well); box-shadow: 0 0 0 var(--px) var(--line-3); opacity: .72; transition: opacity var(--state-out), box-shadow var(--state-out); }
@media (hover: hover) {
  [data-r="lightbox"] > [data-part="strip"] > [data-part="shot"]:hover { opacity: 1; transition-duration: 0s; }
}
[data-r="lightbox"] > [data-part="strip"] > [data-part="shot"][data-force~="hover"] { opacity: 1; transition-duration: 0s; }
[data-r="lightbox"] > [data-part="strip"] > [data-part="shot"][aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--plane), 0 0 0 3px var(--accent); }
[data-r="lightbox"] > [data-part="strip"] > [data-part="shot"] > img,
[data-r="thumb"] > img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
[data-r="thumb"] { position: relative; display: block; flex: none; width: var(--w, 132px); aspect-ratio: 3 / 2; border-radius: var(--r-row); overflow: hidden; background: var(--well); }
[data-r="thumb"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring)); transition: box-shadow var(--state-out); }
@media (hover: hover) {
  [data-r="thumb"]:hover::after { box-shadow: inset 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)); transition-duration: 0s; }
}
[data-r="thumb"][data-force~="hover"]::after { box-shadow: inset 0 0 0 var(--px) rgb(var(--ring-rgb) / var(--ring-hover)); transition-duration: 0s; }
[data-r="thumb"][data-shape="square"] { aspect-ratio: 1; }
[data-r="thumb"][data-shape="tall"] { aspect-ratio: 2 / 3; }
[data-r="file-browser"] { --w: 720px; --origin: 50% 0%; position: relative; display: flex; flex-direction: column; width: min(var(--w), calc(100vw - 32px)); height: min(560px, calc(100dvh - 64px)); border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e3); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); overflow: hidden; transition: width var(--scale-in) var(--ease-expo); }
[data-r="file-browser"][data-open-file] { --w: 1152px; }
[data-r="file-browser"]:modal { position: fixed; inset: 13vh 0 auto; margin: 0 auto; height: min(560px, calc(100dvh - 13vh - 32px)); }
dialog[data-r="file-browser"]:not([open]) { display: none; }
[data-r="file-browser"] > [data-part="header"] { display: flex; align-items: center; gap: 8px; flex: none; height: 52px; padding: 0 12px 0 20px; border-bottom: var(--px) solid var(--line-3); }
[data-r="file-browser"] > [data-part="header"] > [data-part="title"] { font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-550); color: var(--ink); white-space: nowrap; }
[data-r="file-browser"] > [data-part="header"] > [data-part="meta"] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="file-browser"] > [data-part="body"] { display: flex; flex: 1; min-height: 0; }
[data-r="file-browser"] [data-part="files"] { flex: 1 0 0%; min-width: 0; overflow: hidden auto; overscroll-behavior: contain; }
[data-r="file-browser"][data-open-file] [data-part="files"] { flex: none; width: 384px; border-right: var(--px) solid var(--line-3); }
[data-r="file-browser"] [data-part="files"] > [data-r="list"] { outline: none; }
[data-r="file-browser"] [data-part="files"] > [data-r="list"]:focus-visible { box-shadow: none; }
[data-r="file-browser"] [data-part="files"] > [data-r="list"][data-force~="focus"] { box-shadow: none; }
[data-r="file-browser"] [data-part="files"] [data-part="group"] { display: flex; align-items: center; height: var(--row-28); margin-top: 6px; padding: 0 20px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="file-browser"] [data-part="files"] [data-r="list-row"] > [data-part="kind"] { display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-row); background: var(--plane-selected); color: var(--ink-2); }
[data-r="file-browser"] [data-part="files"] [data-r="list-row"] > [data-part="kind"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); }
[data-r="file-browser"] [data-part="files"] [data-r="list-row"][aria-selected="true"] > [data-part="kind"] { background: var(--plane); color: var(--ink); }
[data-r="file-browser"] [data-part="viewer"] { display: flex; flex-direction: column; flex: 1; min-width: 0; }
[data-r="file-browser"] [data-part="viewer"][hidden] { display: none; }
[data-r="file-browser"] [data-part="viewer-head"] { display: flex; align-items: center; gap: 8px; flex: none; height: 44px; padding: 0 8px 0 20px; border-bottom: var(--px) solid var(--line-1); }
[data-r="file-browser"] [data-part="viewer-head"] > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-550); color: var(--ink); }
[data-r="file-browser"] [data-part="viewer-head"] > [data-part="meta"] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="file-browser"] [data-part="viewer-body"] { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px 20px 20px; }
[data-r="file-browser"] [data-part="viewer-body"] > [data-part="caption"] { margin-bottom: 8px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="file-browser"] [data-part="viewer-body"] > [data-part="picture"] { display: flex; align-items: center; justify-content: center; height: 100%; }
[data-r="file-browser"] [data-part="viewer-body"] > [data-part="picture"] > img { max-width: 100%; max-height: 100%; border-radius: var(--r-row); box-shadow: 0 0 0 var(--px) var(--line-2); }
[data-r="file-browser"] [data-part="viewer-body"] > [data-part="none"] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; color: var(--ink-3); text-align: center; }
[data-r="file-browser"] [data-part="profile"] { display: flex; flex-direction: column; gap: 16px; }
[data-r="file-browser"] [data-part="profile"] > [data-part="figures"] { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="file-browser"] [data-part="profile"] > [data-part="figures"] b { display: block; margin-top: 2px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="file-browser"] [data-part="profile"] > [data-part="chart"] { position: relative; height: 200px; }
[data-r="file-browser"] [data-part="profile"] > [data-part="chart"] > svg { display: block; width: 100%; height: 100%; overflow: visible; }
[data-r="file-browser"] [data-part="profile"] [data-part="area"] { fill: var(--a5); stroke: none; }
[data-r="file-browser"] [data-part="profile"] [data-part="line"] { fill: none; stroke: var(--ink-2); stroke-width: 1.25; stroke-linejoin: round; }
[data-r="file-browser"] [data-part="profile"] [data-part="grid"] { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
[data-r="file-browser"] [data-part="profile"] [data-part="tick"] { fill: var(--ink-3); font-size: var(--fs-11); font-variant-numeric: tabular-nums; }
[data-r="file-browser"] [data-part="profile"] :is([data-part="cursor"], [data-part="dot"]) { visibility: hidden; }
[data-r="file-browser"] [data-part="profile"] [data-part="chart"][data-hover] :is([data-part="cursor"], [data-part="dot"]) { visibility: visible; }
[data-r="file-browser"] [data-part="profile"] [data-part="cursor"] { stroke: var(--ink-3); stroke-width: 1; shape-rendering: crispEdges; }
[data-r="file-browser"] [data-part="profile"] [data-part="dot"] { fill: var(--raised); stroke: var(--ink); stroke-width: 1.5; }
[data-r="file-browser"] [data-part="profile"] [data-part="readout"] { position: absolute; top: 0; left: var(--x, 0); transform: translateX(-50%); padding: 4px 8px; border-radius: var(--r-row); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e1); font-size: var(--fs-11); line-height: var(--lh-11); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
[data-r="file-browser"] [data-part="profile"] [data-part="readout"] > b { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-550); color: var(--ink); }
[data-r="dialog"][data-kind="share"] > [data-part="body"] { display: flex; flex-direction: column; gap: 20px; padding-top: 10px; padding-bottom: 20px; }
[data-r="dialog"][data-kind="share"] [data-part="section"] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
[data-r="dialog"][data-kind="share"] [data-part="section"] > [data-part="heading"] { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-500); color: var(--ink-2); }
[data-r="dialog"][data-kind="share"] [data-part="section"] > [data-part="row"] { display: flex; align-items: center; gap: 8px; min-width: 0; }
[data-r="dialog"][data-kind="share"] [data-part="section"] > [data-part="row"] > [data-r="field"] { flex: 1; font-variant-numeric: tabular-nums; }
[data-r="dialog"][data-kind="share"] [data-part="section"] > [data-part="note"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="dialog"][data-kind="share"] [data-r="option"] > [data-r="select"] { margin-left: auto; }
[data-r="dialog"][data-kind="share"][data-shared="private"] [data-part="section"][data-needs-link] > :not([data-part="heading"], [data-part="note"]) { opacity: .45; pointer-events: none; }
[data-r="dialog"][data-kind="share"] [data-part="preview"] { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 2px 12px; padding: 12px 14px 14px 12px; border-radius: var(--r-contain); background: var(--mat); box-shadow: inset 0 0 0 var(--px) var(--line-2); }
[data-r="dialog"][data-kind="share"] [data-part="preview"] > [data-part="glyph"] { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-row); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3); color: var(--ink-2); }
[data-r="dialog"][data-kind="share"] [data-part="preview"] > [data-part="glyph"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); }
[data-r="dialog"][data-kind="share"] [data-part="preview"] > b { padding-top: 1px; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-550); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="dialog"][data-kind="share"] [data-part="preview"] > [data-part="meta"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="dialog"][data-kind="share"] [data-part="preview"] > [data-part="shape"] { grid-column: 2; margin-top: 10px; }
[data-r="dialog"][data-kind="share"] [data-part="weeks"] { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; max-width: 232px; }
[data-r="dialog"][data-kind="share"] [data-part="weeks"] > i { height: 10px; border-radius: var(--r-key); background: var(--wo, transparent); box-shadow: inset 0 0 0 var(--px) var(--line-2); }
[data-r="dialog"][data-kind="share"] [data-part="weeks"] > i[data-level="1"] { --wo: var(--scale-rank-1); box-shadow: none; }
[data-r="dialog"][data-kind="share"] [data-part="weeks"] > i[data-level="2"] { --wo: var(--scale-rank-2); box-shadow: none; }
[data-r="dialog"][data-kind="share"] [data-part="weeks"] > i[data-level="3"] { --wo: var(--scale-rank-3); box-shadow: none; }
[data-r="dialog"][data-kind="share"] [data-part="weeks"] > i[data-level="4"] { --wo: var(--scale-rank-4); box-shadow: none; }
[data-r="dialog"][data-kind="share"] > [data-part="footer"] > [data-part="ask"] { flex: 1; min-width: 0; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="dialog"][data-kind="share"] > [data-part="footer"] > [data-part="ask"] > b { font-weight: var(--fw-550); color: var(--ink); }
}

/* ═══ 86-sync.css ═══ */
@layer components {
[data-r="sync"] { display: inline-flex; align-items: center; gap: 6px; flex: none; height: var(--h-24); padding: 0 8px 0 6px; border-radius: var(--r-press); color: var(--ink-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color var(--state-out), color var(--state-out); }
[data-r="sync"] > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); flex: none; }
[data-r="sync"]:is([data-state="waiting"], [data-state="offline"]) { color: var(--ink-2); }
[data-r="sync"][data-state="conflict"] { color: var(--ink); font-weight: var(--fw-500); }
[data-r="sync"][data-state="conflict"] > svg[data-icon] { color: var(--warning-dot); }
[data-r="sync"][aria-expanded="true"] { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
@media (hover: hover) {
  [data-r="sync"]:hover { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
}
[data-r="sync"][data-force~="hover"] { background-color: var(--plane-hover); color: var(--ink); transition-duration: 0s; }
[data-r="sync-panel"] { --plane: var(--raised); --plane-hover: var(--raised-hover); --plane-selected: var(--raised-selected); --plane-selected-hover: var(--raised-selected-hover); --ring: var(--ring-raised); --ring-hover: var(--ring-raised-hover); --pill-rest: var(--raised); position: relative; display: flex; flex-direction: column; width: 440px; max-width: calc(100vw - 16px); border-radius: var(--r-contain); background: var(--raised); box-shadow: 0 0 0 var(--px) var(--line-3), var(--e2); color: var(--ink-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-450); }
[data-r="sync-panel"][data-kind="offline"] { width: 320px; }
[data-r="sync-panel"] > [data-part="head"] { display: flex; align-items: flex-start; gap: 8px; padding: 14px 16px 12px; }
[data-r="sync-panel"] > [data-part="head"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); flex: none; margin-top: 1.5px; color: var(--ink-2); }
[data-r="sync-panel"] > [data-part="head"][data-tone="warning"] > svg[data-icon] { color: var(--warning-dot); }
[data-r="sync-panel"] > [data-part="head"][data-tone="success"] > svg[data-icon] { color: var(--success-dot); }
[data-r="sync-panel"] > [data-part="head"] > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-r="sync-panel"] > [data-part="head"] b { font-weight: var(--fw-550); color: var(--ink); font-variant-numeric: tabular-nums; }
[data-r="sync-panel"] > [data-part="head"] p { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); }
[data-r="sync-panel"] > [data-part="list"] { max-height: 420px; padding: 0 8px 8px; overflow: hidden auto; overscroll-behavior: contain; }
[data-r="sync-panel"] > [data-part="works"] { display: flex; flex-direction: column; gap: 8px; padding: 2px 16px 16px 40px; font-size: var(--fs-12); line-height: var(--lh-12); }
[data-r="sync-panel"] > [data-part="works"] > span { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); }
[data-r="sync-panel"] > [data-part="works"] > span > svg[data-icon] { width: var(--icon-12); height: var(--icon-12); flex: none; margin-top: 2.5px; color: var(--success-dot); }
[data-r="sync-panel"] > [data-part="works"] > span[data-waits] { color: var(--ink-3); }
[data-r="sync-panel"] > [data-part="works"] > span[data-waits] > svg[data-icon] { color: var(--ink-3); }
[data-r="sync-panel"] [data-part="conflict"] { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 8px; border-radius: var(--r-row); }
[data-r="sync-panel"] [data-part="conflict"] + [data-part="conflict"]::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: var(--px); background: var(--line-1); }
[data-r="sync-panel"] [data-part="what"] { display: flex; align-items: center; gap: 8px; min-width: 0; }
[data-r="sync-panel"] [data-part="what"] > svg[data-icon] { width: var(--icon-16); height: var(--icon-16); flex: none; color: var(--ink-3); }
[data-r="sync-panel"] [data-part="what"] > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-500); color: var(--ink); }
[data-r="sync-panel"] [data-part="what"] > [data-part="meta"] { flex: none; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
[data-r="sync-panel"] :is([data-part="sides"], [data-part="field"]) { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 6px; }
[data-r="sync-panel"] [data-part="sides"] { margin-top: 4px; padding-left: 24px; font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-500); color: var(--ink-3); }
[data-r="sync-panel"] [data-part="sides"] > span { padding-left: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="sync-panel"] [data-part="field"] { padding-left: 24px; }
[data-r="sync-panel"] [data-part="field"] > [data-part="name"] { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-r="sync-panel"] [data-part="choice"] { position: relative; display: flex; align-items: center; min-width: 0; min-height: var(--h-28); padding: 5px 8px; border: .5px solid var(--line-4); border-radius: var(--r-value); background: var(--raised); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-450); color: var(--ink-2); text-align: left; font-variant-numeric: tabular-nums; transition: background-color var(--state-out), border-color var(--state-out), color var(--state-out); }
[data-r="sync-panel"] [data-part="choice"] > span { min-width: 0; overflow-wrap: anywhere; }
@media (hover: hover) {
  [data-r="sync-panel"] [data-part="choice"]:hover { background: var(--plane-hover); border-color: var(--line-5); color: var(--ink); transition-duration: 0s; }
}
[data-r="sync-panel"] [data-part="choice"][data-force~="hover"] { background: var(--plane-hover); border-color: var(--line-5); color: var(--ink); transition-duration: 0s; }
[data-r="sync-panel"] [data-part="choice"][aria-checked="true"] { background: var(--plane-selected); border-color: transparent; color: var(--ink); box-shadow: inset 0 0 0 var(--px) var(--accent); }
[data-r="sync-panel"] [data-part="field"][data-chosen="mine"] > [data-part="choice"][data-side="theirs"] > span,
[data-r="sync-panel"] [data-part="field"][data-chosen="theirs"] > [data-part="choice"][data-side="mine"] > span { text-decoration: line-through; text-decoration-color: var(--ink-4); color: var(--ink-3); }
[data-r="sync-panel"] [data-part="actions"],
[data-r="sync-panel"] [data-part="outcome"] { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; padding-left: 24px; }
[data-r="sync-panel"] [data-part="outcome"] > [data-part="said"] { flex: 1; min-width: 0; font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-2); }
[data-r="sync-panel"] [data-part="conflict"]:not([data-state]) > [data-part="outcome"],
[data-r="sync-panel"] [data-part="conflict"][data-state] > :is([data-part="sides"], [data-part="field"], [data-part="actions"]) { display: none; }
}