:root, :host {
  --background: #f7f7f7;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .144 0 0 0 -.0558'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --paper-grain-size: 220px;
  --foreground: #252525;
  --surface: #ffffff;
  --surface-glass: color-mix(in srgb, var(--surface) 94%, transparent);
  --surface-glass-panel: color-mix(in srgb, var(--surface) 84%, transparent);
  --surface-hover: #eeeeee;
  --surface-pressed: #e5e5e5;
  --surface-focus: #dedede;
  --glass-wash:
    radial-gradient(110% 88% at 4% 0%, rgb(255 255 255 / .68) 0%, rgb(255 255 255 / .26) 54%, rgb(255 255 255 / 0%) 100%),
    linear-gradient(155deg, rgb(255 255 255 / .56) 0%, rgb(255 255 255 / .3) 50%, rgb(229 229 229 / .48) 100%);
  --glass-base: rgb(247 247 247 / .28);
  --glass-control-base: color-mix(in srgb, var(--surface) 98%, transparent);
  --glass-edge: rgb(255 255 255 / .82);
  --glass-filter: blur(28px) saturate(1.12);
  --glass-elevation: 0 12px 34px rgb(25 25 25 / .13);
  --glass-shadow: 0 0 0 1px var(--glass-edge) inset, var(--glass-elevation);
  --glass-sheet-wash: linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02) 22%, rgb(236 236 236 / .16) 100%);
  --glass-header-wash:
    radial-gradient(90% 160% at 0% 0%, rgb(255 255 255 / .74), rgb(255 255 255 / 0%) 78%),
    linear-gradient(180deg, rgb(255 255 255 / .6), rgb(255 255 255 / .28));
  --glass-header-shadow: inset 0 1px 0 rgb(255 255 255 / .94);
  --glass-rule: linear-gradient(90deg, transparent, rgb(75 75 75 / .08) 20%, rgb(75 75 75 / .08) 80%, transparent);
  --glass-hover: rgb(255 255 255 / .4);
  --menu-selected: color-mix(in srgb, var(--surface-hover) 26%, transparent);
  --menu-hover: color-mix(in srgb, var(--surface-hover) 32%, transparent);
  --stroke-surface: 1px;
  --chrome-surface: color-mix(in srgb, var(--background) 72%, transparent);
  --chrome-foreground: #3b3b3b;
  --chrome-muted: #535353;
  --chrome-blur: 14px;
  --field: #f2f2f2;
  --muted-foreground: #6b6b6b;
  --border: #e7e7e7;
  --border-strong: #a3a3a3;
  --primary: var(--graphite-base);
  --primary-foreground: var(--graphite-foreground);
  --primary-wash: var(--graphite-wash);
  --primary-edge-shadow: var(--graphite-edge-shadow);
  --accent: #eaeaea;
  --accent-foreground: #252525;
  --accent-indicator: #929292;
  --destructive: #b63832;
  --field-invalid: color-mix(in srgb, var(--destructive) 10%, var(--field));
  --destructive-wash: color-mix(in srgb, var(--destructive) 10%, var(--surface));
  --popover: var(--surface);
  --ring: #646464;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --font-code: "SFMono-Regular", Consolas, monospace;
  --text-caption: 11px;
  --text-label: 12px;
  --text-ui: 13px;
  --text-body: 14px;
  --text-input: 16px;
  --text-brand: 28px;
  --leading-ui: 1.4;
  --leading-reading: 1.65;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-control: 8px;
  --radius-panel: 16px;
  --radius-menu: calc(var(--radius-control) + var(--space-1));
  --radius-mark: 2px;
  --radius-preview: 2px;
  --radius-dock: 8px;
  --graphite-base: #242424;
  --graphite-foreground: #f5f5f5;
  --graphite-muted: #b5b5b5;
  --graphite-hover: #383838;
  --graphite-border: #484848;
  --graphite-scrim: color-mix(in srgb, var(--graphite-base) 88%, transparent);
  --graphite-wash-strength: .06;
  --graphite-light: rgb(255 255 255 / var(--graphite-wash-strength));
  --graphite-shade: rgb(0 0 0 / var(--graphite-wash-strength));
  --graphite-wash: linear-gradient(180deg in srgb, var(--graphite-light), var(--graphite-shade));
  --graphite-wash-opacity: 1;
  --graphite-edge-light: rgb(255 255 255 / .14);
  --graphite-edge-shade: rgb(0 0 0 / .24);
  --graphite-edge-shadow: inset 0 var(--stroke-surface) 0 var(--graphite-edge-light), inset 0 calc(var(--stroke-surface) * -1) 0 var(--graphite-edge-shade);
  --graphite-shadow: var(--graphite-edge-shadow), 0 2px 4px rgb(0 0 0 / .04), 0 6px 16px rgb(0 0 0 / .06);
  --agent-light-line: oklch(.96 .018 258);
  --agent-light-wash: oklch(.56 .06 258);
  --agent-light-stroke: 1px;
  --agent-light-inset: 1px;
  --agent-light-band: 3px;
  --agent-light-reach: 150px;
  --radius-round: 999px;
  --shadow-control: 0 1px 2px #00000006, 0 4px 14px #00000005;
  --shadow-floating: 0 2px 5px #00000006, 0 12px 32px #0000000a;
  --selection-edge: var(--border);
  --selection-shadow: var(--shadow-floating);
  --focus-width: 2px;
  --target: 40px;
  --target-compact: 32px;
  --icon: 20px;
  --icon-small: 16px;
  --icon-disclosure: 12px;
  --icon-model: 14px;
  --stroke-icon: 1.5;
  --drawing-palette-width: 240px;
  --drawing-style-width: 288px;
  --drawing-label-width: 72px;
  --drawing-swatch: 20px;
  --drawing-swatch-border: color-mix(in srgb, var(--foreground) 12%, transparent);
  --choice-selected-surface: var(--field);
  --choice-selected-ink: var(--foreground);
  --canvas-gutter: 24px;
  --composer-width: 560px;
  --composer-bottom: 0px;
  --toast-width: 300px;
  --runtime-menu-width: 288px;
  --runtime-menu-text-inset: calc(var(--icon-model) + var(--space-2) * 2);
  --runtime-menu-list-mask: linear-gradient(to bottom, transparent, #000 var(--space-2), #000 calc(100% - var(--space-2)), transparent);
  --runtime-usage-width: 64px;
  --runtime-usage-stroke: 2px;
  --history-tick-gap: 8px;
  --history-session-gap: 16px;
  --history-tick-rest: 6px;
  --history-tick-peak: 26px;
  --history-fan: 30px;
  --history-ruler-height: 52px;
  --history-lane: 6px;
  --history-handle-stroke: 2px;
  --history-handle-cap: 4px;
  --history-menu-width: 280px;
  --object-label-bar-height: 40px;
  --object-label-dot: 5px;
  --object-label-min-width: 160px;
  --layer-history: 1200;
  --layer-tools: 1300;
  --layer-context: 1400;
  --layer-conversation: 1500;
  --layer-notice: 1600;
  --layer-header: 1700;
  --layer-popup: 20000;
  --mark-ink: #000000;
  --mark-paper: #ffffff;
  --mark-ring: 2px;
  --mark-size: 34px;
  --motion-fast: 140ms;
  --motion-panel: 200ms;
  --motion-scroll: 360ms;
  --motion-status: 440ms;
  --motion-shimmer: 440ms;
  --motion-breathe: 1800ms;
  --motion-caret: 1060ms;
  --motion-feedback: 320ms;
  --motion-view-exit: calc(var(--motion-disclosure) * .4);
  --motion-sheet: 420ms;
  --motion-sheet-exit: 280ms;
  --motion-disclosure: 260ms;
  --motion-disclosure-exit: 200ms;
  --motion-contents-lead: .15;
  --motion-contents-exit: .55;
  --motion-follow: 220ms;
  --motion-flight-unit: 520ms;
  --motion-flight-min: 420ms;
  --motion-flight-max: 1100ms;
  --locate-margin: 56px;
  --motion-mark-draw: 560ms;
  --motion-mark: 1800ms;
  --motion-orbit-pace: 150;
  --motion-trace-fade: 480ms;
  --motion-history-step: 160ms;
  --motion-history-snap: 240ms;
  --motion-history-glide: 325ms;
  --motion-history-dissolve: 140ms;
  --motion-history-move: 240ms;
  --motion-history-follow: 420ms;
  --motion-history-travel: 360ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-sheet: cubic-bezier(.32,.72,0,1);
  --ease-settle: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.42,.64,1);
}
[data-theme="graphite"] {
  --foreground: var(--graphite-foreground);
  --background: var(--graphite-base);
  --surface: var(--graphite-base);
  --surface-hover: var(--graphite-hover);
  --surface-pressed: #414141;
  --surface-focus: #505050;
  --surface-glass-panel: color-mix(in srgb, var(--surface) 90%, transparent);
  --field: #303030;
  --muted-foreground: var(--graphite-muted);
  --border: var(--graphite-border);
  --primary: var(--graphite-foreground);
  --primary-foreground: var(--graphite-base);
  --primary-wash: none;
  --primary-edge-shadow: none;
  --border-strong: #858585;
  --destructive: #ffaaa1;
  --ring: #d0d0d0;
}
:root, :host, [data-theme="graphite"] {
  --primary-focus: color-mix(in srgb, var(--primary) 78%, var(--primary-foreground));
}
@media (pointer: coarse) { :root, :host { --target: 44px; --target-compact: 44px; --history-tick-gap: 10px; } }
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  :root, :host {
    --graphite-scrim: var(--graphite-base);
    --graphite-wash: none;
    --graphite-wash-opacity: 0;
    --graphite-edge-light: var(--border-strong);
    --graphite-edge-shade: var(--border-strong);
    --graphite-edge-shadow: inset 0 0 0 var(--stroke-surface) var(--graphite-edge-light);
    --graphite-shadow: var(--graphite-edge-shadow);
    --runtime-menu-list-mask: none;
    --glass-wash: none;
    --glass-base: var(--surface);
    --glass-control-base: var(--surface);
    --glass-edge: var(--border-strong);
    --glass-filter: none;
    --glass-shadow: none;
    --glass-elevation: none;
    --glass-sheet-wash: none;
    --glass-header-wash: none;
    --glass-header-shadow: none;
    --glass-rule: linear-gradient(var(--border-strong), var(--border-strong));
    --glass-hover: var(--surface-hover);
    --selection-edge: var(--border-strong);
    --selection-shadow: none;
    --paper-grain: none;
  }
}
@media (forced-colors: active) {
  :root, :host {
    --paper-grain: none;
    --graphite-base: Canvas;
    --graphite-foreground: CanvasText;
    --graphite-muted: CanvasText;
    --graphite-border: CanvasText;
    --graphite-scrim: Canvas;
    --graphite-wash: none;
    --graphite-wash-opacity: 0;
    --graphite-edge-light: CanvasText;
    --graphite-edge-shade: CanvasText;
    --graphite-edge-shadow: none;
    --graphite-shadow: none;
    --primary: ButtonFace;
    --primary-foreground: ButtonText;
    --runtime-menu-list-mask: none;
    --glass-wash: none;
    --glass-base: Canvas;
    --glass-control-base: Canvas;
    --glass-edge: CanvasText;
    --glass-filter: none;
    --glass-shadow: none;
    --glass-elevation: none;
    --glass-sheet-wash: none;
    --glass-header-wash: none;
    --glass-header-shadow: none;
    --glass-rule: linear-gradient(CanvasText, CanvasText);
    --choice-selected-surface: Highlight;
    --choice-selected-ink: HighlightText;
    --selection-edge: CanvasText;
    --selection-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root, :host { --motion-fast: 0ms; --motion-panel: 0ms; --motion-scroll: 0ms; --motion-sheet: 0ms; --motion-sheet-exit: 0ms; --motion-disclosure: 0ms; --motion-disclosure-exit: 0ms; --motion-follow: 0ms; --motion-history-snap: 0ms; --motion-history-glide: 0ms; --motion-history-dissolve: 0ms; --motion-history-move: 0ms; --motion-history-follow: 0ms; --motion-history-travel: 0ms; }
}
:root { --spring: linear(0, 0.0268, 0.0849, 0.162, 0.2487, 0.3386, 0.4268, 0.5104, 0.5873, 0.6566, 0.7178, 0.771, 0.8166, 0.8552, 0.8874, 0.9139, 0.9355, 0.9528, 0.9666, 0.9773, 0.9855, 0.9917, 0.9962, 0.9995, 1.0017, 1.0032, 1.004, 1.0045, 1.0046, 1.0045, 1.0042, 1.0038, 1.0034, 1.003, 1.0026, 1.0022, 1.0019, 1.0016, 1.0013, 1.0011, 1.0008, 1.0007, 1.0005, 1.0004, 1.0003, 1); }
:root {
  --gutter: clamp(16px, 4vw, 56px);
  --bar: 64px;
  --font: var(--font-ui), "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", "Microsoft YaHei", sans-serif;
  --cap: 360px;
}
:lang(zh-Hant) { --font: var(--font-ui), "PingFang TC", "Hiragino Sans", "Microsoft JhengHei", sans-serif; }
:lang(ja) { --font: var(--font-ui), "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
:lang(ko) { --font: var(--font-ui), "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--background); color: var(--foreground); font-family: var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-padding-top: var(--bar); }
body { margin: 0; font-size: 16px; line-height: 1.5; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus-width) solid var(--ring); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
body::after { content: ""; position: fixed; inset: 0; z-index: 29; pointer-events: none; background: var(--paper-grain) 0 0 / var(--paper-grain-size); }
.skip { position: absolute; left: 16px; top: -48px; z-index: 30; padding: 8px 12px; border-radius: var(--radius-control); background: var(--graphite-base); color: var(--graphite-foreground); text-decoration: none; transition: top var(--motion-fast) var(--ease-out); }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { width: var(--icon); height: var(--icon); flex: none; }
.icon.small { width: var(--icon-small); height: var(--icon-small); }
.icon.tiny { width: var(--icon-disclosure); height: var(--icon-disclosure); }
.galta-mark { display: block; overflow: visible; width: 100%; height: auto; }
.galta-mark__head { fill: var(--mark-ink); }
.galta-mark__ring { fill: none; stroke: var(--mark-paper); stroke-width: var(--mark-ring); paint-order: stroke fill; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.galta-mark__socket { fill: var(--mark-paper); }
.galta-mark__pupil { fill: var(--mark-ink); }
.galta-mark__lip { fill: var(--mark-paper); }
.galta-mark__lid { fill: var(--mark-ink); }
.galta { position: fixed; left: 0; top: 0; z-index: 25; width: var(--size, 58px); height: calc(var(--size, 58px) * .9115); padding: 0; border: 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; will-change: transform; }
.galta.carried { cursor: grabbing; }
.galta:focus-visible { outline: var(--focus-width) solid var(--ring); outline-offset: 4px; border-radius: 8px; }
.galta-body, .galta-face { display: block; width: 100%; height: 100%; }
.galta .galta-mark { width: 100%; height: 100%; }
.galta-layer { position: fixed; inset: 0; z-index: 24; pointer-events: none; }
.galta-layer.front { z-index: 26; }
.galta-pour { position: absolute; display: block; }
.galta-zzz { position: absolute; left: 72%; bottom: 82%; display: flex; gap: 2px; align-items: flex-end; color: var(--word); font: italic 600 calc(var(--size) * .2)/1 var(--font-ui); pointer-events: none; opacity: 0; transition: opacity .6s var(--ease-out); }
.galta-zzz i, .galta-zzz b { font: inherit; }
.galta-zzz i { font-size: 1.3em; translate: 0 -.4em; }
.galta-zzz b { font-size: 1.6em; translate: 0 -1em; }
.galta-zzz[data-on] { opacity: 1; animation: zzz 2.6s ease-in-out infinite; }
@keyframes zzz { 50% { translate: 3px -5px; } }
.bar { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: flex-start; gap: var(--space-2); height: var(--bar); padding: var(--space-4) var(--space-5) 0; pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar::before { content: ""; position: absolute; inset: 0 0 -18px; z-index: -1; background: linear-gradient(var(--background) 58%, color-mix(in oklab, var(--background) 0%, transparent)); pointer-events: none; }
.chrome { display: inline-flex; align-items: center; height: var(--target-compact); border-radius: var(--radius-control); background: var(--chrome-surface); backdrop-filter: blur(var(--chrome-blur)); -webkit-backdrop-filter: blur(var(--chrome-blur)); color: var(--chrome-foreground); }
.brand { gap: var(--space-2); padding: 0 var(--space-3); color: var(--foreground); text-decoration: none; font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.brand-mark { width: 20px; }
.brand .stage { margin-left: 2px; padding: 2px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 16%, transparent); color: var(--muted-foreground); font-size: 11px; font-weight: 500; letter-spacing: .02em; line-height: 1.2; }
.chapters { padding: 0 2px; gap: 2px; }
.chapters a { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; font-size: var(--text-ui); font-weight: 500; text-decoration: none; transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); }
.chapters a:hover { background: var(--menu-hover); }
.chapters a[data-active] { background: var(--accent); color: var(--foreground); }
.bar-end { margin-left: auto; display: inline-flex; gap: var(--space-4); }
.bar-actions { display: inline-flex; gap: var(--space-2); }
.source { gap: 6px; padding: 0 10px; font-size: var(--text-ui); font-weight: 500; text-decoration: none; }
.lang summary { color: var(--muted-foreground); }
.lang summary:hover, .lang[open] summary { color: var(--foreground); }
.source { padding: 0 var(--space-3); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent); }
.source, .lang summary { transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); }
.source:hover, .lang summary:hover { background: var(--menu-hover); }
.lang { position: relative; }
.lang summary { display: inline-flex; align-items: center; gap: 6px; height: var(--target-compact); padding: 0 10px; font-size: var(--text-ui); font-weight: 500; cursor: pointer; list-style: none; border-radius: var(--radius-control); }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; right: 0; top: calc(100% + 6px); min-width: 168px; margin: 0; padding: 4px; list-style: none; border-radius: var(--radius-menu); border: var(--stroke-surface) solid var(--glass-edge); background-color: var(--glass-control-base); background-image: var(--glass-wash); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-filter); }
.lang li a { display: block; padding: 7px 10px; border-radius: var(--radius-control); font-size: var(--text-ui); text-decoration: none; }
.lang li a:hover { background: var(--menu-hover); }
.lang li a[aria-current] { background: var(--menu-selected); font-weight: 600; }
.cta { display: inline-flex; align-items: center; height: var(--target-compact); padding: 0 var(--space-3); border-radius: var(--radius-control); font-size: var(--text-ui); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--motion-fast) var(--ease-out); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--target); padding: 0 18px; border-radius: var(--radius-control); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); }
.button:active { transform: scale(.98); }
.button.primary { background-color: var(--graphite-base); background-image: var(--graphite-wash); box-shadow: var(--graphite-shadow); color: var(--graphite-foreground); }
.button.primary:hover { background-color: var(--graphite-hover); }
.button.chrome { border: var(--stroke-surface) solid var(--glass-edge); background-color: var(--glass-control-base); background-image: var(--glass-wash); box-shadow: var(--glass-shadow); color: var(--foreground); }
.button.chrome:hover { background-color: var(--surface); }
.glass, .badge.primary, .cta {
  border: 0; color: var(--foreground);
  background-color: var(--glass-base); background-image: var(--glass-wash);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  box-shadow: inset 0 0 0 1px var(--glass-edge), var(--glass-header-shadow), 0 0 0 1px color-mix(in srgb, var(--foreground) 8%, transparent), var(--glass-elevation);
  transition: background-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.glass:hover, .badge.primary:hover, .cta:hover { background-color: var(--glass-hover); box-shadow: inset 0 0 0 1px var(--glass-edge), var(--glass-header-shadow), 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent), 0 16px 40px rgb(25 25 25 / .16); }
.cta { box-shadow: inset 0 0 0 1px var(--glass-edge), var(--glass-header-shadow), 0 0 0 1px color-mix(in srgb, var(--foreground) 8%, transparent), 0 3px 10px rgb(25 25 25 / .1); }
.cta:hover { box-shadow: inset 0 0 0 1px var(--glass-edge), var(--glass-header-shadow), 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent), 0 5px 14px rgb(25 25 25 / .14); }
:root {
  --ink: #26221f;
  --word: #a3502f;
  --hot: #b63832;
  --faint: #8f8a84;
  --note-size: 22px;
  --sel: #8a8f98;
}
.scene { container: scene / inline-size; position: relative; }
.stage { --W: var(--sw); --H: var(--sh); --max: var(--smax); --u: calc(min(100cqw, var(--max)) / var(--W)); position: relative; width: calc(var(--W) * var(--u)); height: calc(var(--H) * var(--u)); margin-inline: auto; font-size: calc(var(--u) * 16); }
.item { --x: var(--xw); --y: var(--yw); --w: var(--ww); --h: var(--hw); --ns: var(--nsw, 22); position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.item.moves {
  --x2: var(--xw2); --y2: var(--yw2); --w2: var(--ww2); --h2: var(--hw2);
  --s0: clamp(0, (var(--now) - var(--sort, 0)) / .7, 1); --s: calc(var(--s0) * var(--s0) * (3 - 2 * var(--s0)));
  left: calc((var(--x) + (var(--x2) - var(--x)) * var(--s)) * var(--u)); top: calc((var(--y) + (var(--y2) - var(--y)) * var(--s)) * var(--u));
  width: calc((var(--w) + (var(--w2) - var(--w)) * var(--s)) * var(--u)); height: calc((var(--h) + (var(--h2) - var(--h)) * var(--s)) * var(--u));
}
.off-wide { display: none; }
.links { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.links.tall { display: none; }
@container scene (max-width: 759px) {
  .scene:not(.compact) > .stage { --W: var(--tw); --H: var(--th); --max: var(--tmax); }
  .scene:not(.compact) .item { --x: var(--xt); --y: var(--yt); --w: var(--wt); --h: var(--ht); --ns: var(--nst, 18); }
  .scene:not(.compact) .item.moves { --x2: var(--xt2); --y2: var(--yt2); --w2: var(--wt2); --h2: var(--ht2); }
  .scene:not(.compact) .kept { --fx: var(--fxt); --fy: var(--fyt); --fs: var(--fst); }
  .scene:not(.compact) .off-wide { display: block; }
  .scene:not(.compact) .off-tall { display: none; }
  .scene:not(.compact) .links.wide { display: none; }
  .scene:not(.compact) .links.tall { display: block; }
}
@container scene (max-width: 519px) {
  .compact > .stage { --W: var(--tw); --H: var(--th); --max: var(--tmax); }
  .compact .item { --x: var(--xt); --y: var(--yt); --w: var(--wt); --h: var(--ht); --ns: var(--nst, 18); }
  .compact .off-wide { display: block; }
  .compact .off-tall { display: none; }
  .compact .links.wide { display: none; }
  .compact .links.tall { display: block; }
}
.ink { display: block; width: 100%; height: 100%; overflow: visible; }
.item .ink { --k: calc(var(--vb) / var(--w)); }
:is(.ink, .links) path { fill: none; stroke: var(--ink); stroke-width: calc(var(--pw, var(--pw0, 3)) * var(--k, 1)); stroke-linecap: round; stroke-linejoin: round; }
:is(.ink, .links) path.faint { stroke: var(--faint); }
:is(.ink, .links) path.hot { stroke: var(--hot); }
:is(.ink, .links) path.word { stroke: var(--word); }
.note { display: inline-flex; flex-direction: column; align-items: flex-start; color: var(--word); }
.note .nl { display: block; width: calc(var(--note-size) * var(--nw)); height: calc(var(--note-size) * 1.3); overflow: visible; }
.note path { fill: currentColor; }
.scene .note { --note-size: calc(var(--ns) * var(--u)); }
.hint { color: var(--muted-foreground); }
.obj { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--u, 1px) * 3); background: #ebeae7; }
video.obj { background: #10161b; }
.item:has(> .obj, > .collect, > .circle-me, > .tongues, > .card):hover::before, .item:has(> .obj, > .collect, > .circle-me, > .tongues, > .card):focus-within::before {
  content: ""; position: absolute; inset: -6px; pointer-events: none; z-index: 2;
  border: 1.5px solid var(--sel); border-radius: 4px;
  background: var(--handle) 0 0, var(--handle) 50% 0, var(--handle) 100% 0, var(--handle) 0 50%, var(--handle) 100% 50%, var(--handle) 0 100%, var(--handle) 50% 100%, var(--handle) 100% 100%;
  background-repeat: no-repeat; background-origin: border-box;
  --handle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect x='1' y='1' width='8' height='8' rx='2' fill='white' stroke='%238a8f98' stroke-width='1.5'/%3E%3C/svg%3E");
  margin: -4px; padding: 4px;
}
.card { margin: 0; padding: .9em 1em; border-radius: calc(var(--u, 1px) * 8); background: var(--surface); box-shadow: 0 0 0 1px rgb(0 0 0 / .07); font-size: .86em; line-height: 1.4; }
.tag { font-weight: 600; font-size: 1.05em; letter-spacing: -.01em; }
.group-name .tag { display: block; font-size: 1.5em; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.scene { --now: calc(var(--p, 1) * var(--T, 1)); }
html.js:not(.still) .scene { --p: 0; }
.scene :is(.ink, .links) path { --e: clamp(0, (var(--now) - var(--at, 0) - var(--t0, 0)) / var(--dt, 1), 1); stroke-dasharray: var(--l); stroke-dashoffset: calc(var(--l) * (1 - var(--e))); }
.scene .note .nl { --e: clamp(0, (var(--now) - var(--at, 0) - var(--t0, 0)) / var(--dt, 1), 1); clip-path: inset(-20% calc((1 - var(--e)) * 102%) -20% 0); }
.scene .lands { --e: clamp(0, (var(--now) - var(--at, 0)) / .35, 1); opacity: var(--e); scale: calc(.97 + .03 * var(--e)); }
.scene .lands.if-live, .scene .pick-ink { --gone-e: clamp(0, (var(--now) - var(--hide, 999)) / .3, 1); }
.scene .lands.if-live { opacity: calc(var(--e) * (1 - var(--gone-e))); }
.scene .pick-ink { opacity: calc(1 - var(--gone-e)); }
@keyframes ink { from { stroke-dashoffset: var(--l); } to { stroke-dashoffset: 0; } }
@keyframes write { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -2% -20% 0); } }
@keyframes land { from { opacity: 0; scale: .965; } to { opacity: 1; scale: 1; } }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes travel { to { --a: 360deg; } }
.held { display: none; pointer-events: none; border-radius: calc(var(--u) * 6); }
html.js:not(.still) .scene:not(.done) .held { display: block; background: color-mix(in oklab, var(--agent-light-wash) 7%, transparent); --e: clamp(0, (var(--now) - var(--at, 0)) / .3, 1); --g: clamp(0, (var(--now) - var(--gone, 0)) / .3, 1); opacity: calc(var(--e) * (1 - var(--g))); }
.held .light { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--a), color-mix(in oklab, var(--agent-light-wash) 30%, transparent) 0 62%, var(--agent-light-wash) 78%, color-mix(in oklab, var(--agent-light-wash) 30%, transparent) 94%); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: travel 1.6s linear infinite; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 4vw, 72px); align-items: center; max-width: 1480px; min-height: min(100svh, 960px); margin: 0 auto; padding: calc(var(--bar) + clamp(24px, 5vh, 56px)) var(--gutter) clamp(40px, 7vh, 80px); }
.perch { display: block; aspect-ratio: 272.88 / 248.74; }
.hero-perch { width: clamp(76px, 7vw, 104px); margin: 0 0 clamp(18px, 3vh, 30px); }
html.accompanied .perch > .still-mark { visibility: hidden; }
.hero h1 { font-size: clamp(44px, 4.8vw, 86px); line-height: .95; letter-spacing: -.05em; font-weight: 650; }
.hero h1 .line { display: block; }
.hero h1:lang(zh), .hero h1:lang(ja), .hero h1:lang(ko) { line-height: 1.18; letter-spacing: -.035em; }
.hero h1:lang(ja) { font-size: clamp(1.875rem, .25rem + 2.6vw, 2.875rem); }
.hero h1:lang(ko) { font-size: clamp(36px, 3.4vw, 56px); word-break: keep-all; }
.sub { max-width: 30em; margin: clamp(18px, 3vh, 28px) 0 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; color: var(--muted-foreground); text-wrap: balance; }
:lang(zh-Hans) .sub, :lang(zh-Hant) .sub, :lang(ja) .sub, :lang(ko) .sub { line-height: 1.6; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: clamp(22px, 3.6vh, 32px); }
.hero-canvas { min-width: 0; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted-foreground); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend-mark { width: 26px; height: 13px; flex: none; overflow: visible; }
.legend-mark path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.legend-mark.drawn path { stroke: var(--ink); } .legend-mark.said path { stroke: var(--word); stroke-width: 1.8; }
.legend-mark.made { display: inline-block; width: 18px; height: 14px; border-radius: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Crect width='18' height='14' fill='%2399a9a6'/%3E%3Ccircle cx='13' cy='4' r='2' fill='%23f3dfb0'/%3E%3Cpath d='M0 14 6 7l4 4 3-2 5 5z' fill='%23567069'/%3E%3C/svg%3E") center / cover; }
@media (max-width: 1099px) {
  .hero { grid-template-columns: minmax(0, 1fr); text-align: center; min-height: 0; }
  .hero-perch { margin-inline: auto; }
  .sub { margin-inline: auto; }
  .actions { justify-content: center; }
  .hero-canvas { max-width: 760px; width: 100%; margin: 0 auto; }
}
@media (max-width: 560px) { .hero .actions { flex-direction: column; align-items: center; } }
.chapter { max-width: 1240px; margin: 0 auto; padding: clamp(88px, 14vh, 160px) var(--gutter) 0; scroll-margin-top: var(--bar); }
.chapter-head { max-width: 44em; }
.kicker { font-size: var(--text-ui); font-weight: 500; letter-spacing: .01em; color: var(--muted-foreground); }
.chapter-head h2 { margin-top: var(--space-3); font-size: clamp(34px, 3.8vw, 56px); line-height: 1.04; letter-spacing: -.035em; font-weight: 650; text-wrap: balance; }
.chapter-head p:not(.kicker) { margin-top: var(--space-4); font-size: 18px; line-height: 1.55; color: var(--muted-foreground); max-width: 34em; text-wrap: pretty; }
.moment { margin-top: clamp(56px, 9vh, 104px); }
.captions { display: grid; gap: var(--space-4) clamp(32px, 6vw, 96px); margin-bottom: clamp(24px, 4vh, 40px); }
.captions.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.caption h3, .trio h3 { font-size: clamp(21px, 1.9vw, 27px); line-height: 1.15; letter-spacing: -.025em; font-weight: 650; text-wrap: balance; }
.caption p, .trio .caption p { margin-top: var(--space-2); font-size: 16px; line-height: 1.55; color: var(--muted-foreground); max-width: 32em; text-wrap: pretty; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: start; }
.trio .caption { min-height: 7.5em; margin-bottom: var(--space-4); }
.trio-dots { display: none; }
@media (max-width: 900px) {
  .trio { display: flex; gap: var(--space-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--space-3); scrollbar-width: none; }
  .trio::-webkit-scrollbar { display: none; }
  .trio .part { flex: 0 0 min(84%, 420px); scroll-snap-align: center; }
  .trio .caption { min-height: 6.5em; }
  .trio-dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-2); }
  .trio-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong, #cfcfcf); transition: background-color .2s var(--ease-out), scale .2s var(--ease-out); }
  .trio-dots i[data-on] { background: var(--foreground); scale: 1.15; }
}
@media (max-width: 760px) { .captions.n2 { grid-template-columns: minmax(0, 1fr); } }
.board-title { margin: 0; font-size: 2.5em; line-height: 1.1; letter-spacing: -.03em; font-weight: 600; }
.board-q { font-size: 1.1em; color: var(--muted-foreground); }
.name { display: block; font-size: 1em; font-weight: 600; letter-spacing: -.01em; }
.role { display: block; font-size: .8em; line-height: 1.35; color: var(--muted-foreground); }
.web { display: block; font-size: .78em; line-height: 1.2; color: var(--muted-foreground); white-space: nowrap; }
.web.hot, .outcome.hot { color: var(--hot); }
.web.on { width: fit-content; margin-inline: auto; padding: 0 .35em; background: var(--background); text-align: center; }
@container scene (max-width: 759px) {
  .web.on { margin-inline: 0; padding: 0; background: none; }
  .item:has(> .web.chip) { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
  .web.chip { max-width: 100%; padding: .15em .45em; white-space: normal; text-align: center; background: var(--background); border-radius: .5em; }
  .web.chip .phrase { display: inline-block; }
  .who .name { font-size: .92em; }
}
.suspect { display: block; width: 100%; height: 100%; border: calc(var(--u) * 2.5) dashed var(--hot); border-radius: calc(var(--u) * 6); }
.quote { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.quote p { font-size: 1.05em; line-height: 1.3; }
.quote cite { font-style: normal; font-size: .85em; color: var(--muted-foreground); }
.ev-title { font-size: 1.25em; font-weight: 600; letter-spacing: -.02em; }
.ev { display: flex; flex-direction: column; gap: .3em; height: 100%; }
.ev b { font-weight: 600; }
.ev span { color: var(--muted-foreground); }
.ev .ev-pic { flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover; margin-top: .4em; border-radius: calc(var(--u) * 4); }
.verdict { height: 100%; background: var(--graphite-base); color: var(--graphite-foreground); box-shadow: none; display: flex; flex-direction: column; gap: .3em; }
.verdict b { font-size: 1.2em; font-weight: 600; }
.verdict span { color: var(--graphite-muted, #b8b8b8); }
.act { display: block; font-size: .95em; font-weight: 600; }
.road .wide-end, .road :is(.act, .role).end { text-align: right; }
@container scene (max-width: 759px) { .road :is(.act, .role).end { text-align: left; } }
.outcome { display: block; font-size: .95em; font-weight: 600; }
.tongues { display: flex; flex-direction: column; gap: calc(var(--u) * 12); height: 100%; justify-content: center; }
.tongues .card { font-size: 1.05em; }
.collect { all: unset; display: block; width: 100%; height: 100%; cursor: pointer; }
.collect:focus-visible { outline: var(--focus-width) solid var(--ring); outline-offset: 3px; }
.capture .kept {
  --fx: var(--fxw); --fy: var(--fyw); --fs: var(--fsw);
  --f0: max(var(--eaten, 0), clamp(0, (var(--now) - var(--a, 0)) / .55, 1)); --f: calc(1 - (1 - var(--f0)) * (1 - var(--f0)) * (1 - var(--f0)));
  opacity: min(1, calc(var(--f0) * 5)); transform-origin: 0 0;
  translate: calc((1 - var(--f)) * var(--fx) * var(--u)) calc((1 - var(--f)) * var(--fy) * var(--u)); scale: calc(1 + (var(--fs) - 1) * (1 - var(--f)));
}
.capture .kept.in { --eaten: 1; animation: land .5s var(--spring) both; }
.film-chip { position: absolute; left: calc(var(--u, 1px) * 8); top: calc(var(--u, 1px) * 8); display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 6px; border-radius: 6px; background: rgb(16 22 27 / .74); color: #fff; font: 600 11px/1 var(--font-ui); letter-spacing: .02em; font-variant-numeric: tabular-nums; pointer-events: none; }
.film-chip svg { width: 8px; height: 8px; fill: currentColor; }
.live-chip svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; height: 10px; }
.live-chip { left: auto; right: calc(var(--u, 1px) * 10); top: auto; bottom: calc(var(--u, 1px) * 10); }
.if-live { display: none; }
html.js:not(.still) .if-live { display: block; }
.capture .pick-ink { display: none; }
html.js:not(.still) .capture .pick-ink { display: inline; }
.capture.picking :is(.pick, .pick-ink) { visibility: hidden; }
.circle-me { all: unset; display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.case .stage { cursor: crosshair; }
.case.inking .stage { user-select: none; -webkit-user-select: none; }
.circle-me:focus-visible { outline: var(--focus-width) solid var(--ring); outline-offset: 3px; }
.user-ink path { stroke: var(--word); }
.case.circled :is(.circle-ink, .circle-hint, .frame-held) { visibility: hidden; }
.case.circled.auto .circle-ink { visibility: visible; }
.case.circled.auto .circle-ink path { animation: ink .7s ease-out both; }
.case.circled .story-ink path { animation: ink calc(var(--dt) * 1s) ease-out calc(.2s + var(--t0) * 1s) both; }
.case.circled .story-ask .nl { animation: write calc(var(--dt) * 1s) linear calc(.5s + var(--t0) * 1s) both; }
.case.circled .frame { animation: land .55s var(--spring) calc((var(--after) + var(--k) * .25) * 1s) both; }
.flip-result { transition: opacity .35s var(--ease-out); }
.move .flip-doodle { opacity: calc(1 - clamp(0, (var(--now) - var(--land, 0)) / .35, 1)); }
.move:has(.flip-result:hover, .flip-result.peek) .flip-doodle { opacity: 1; }
.move .flip-result:hover, .move .flip-result.peek { opacity: 0; }
.move .flip-result:focus-visible { outline: var(--focus-width) solid var(--ring); outline-offset: 4px; }
.road .new-road { transition: opacity .3s var(--ease-out); }
.road:has(.new-road:hover) .old-road, .road:has(.old-road:hover) .new-road { opacity: .32; }
.live-page .tide { height: 100%; overflow: hidden; border-radius: calc(var(--u) * 8); box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 calc(var(--u) * 18) calc(var(--u) * 40) rgb(6 12 17 / .22); background: #060c11; }
.facts { max-width: 1240px; margin: 0 auto; padding: clamp(96px, 16vh, 180px) var(--gutter) 0; }
.facts h2 { font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -.03em; font-weight: 650; line-height: 1.08; }
.stickies { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); margin: clamp(32px, 5vh, 52px) 0 0; padding: 0; list-style: none; }
.sticky { position: relative; padding: 20px 22px 26px; background: var(--fill); rotate: var(--r); box-shadow: 0 1px 1px rgb(0 0 0 / .05), 0 14px 26px -16px rgb(60 40 20 / .35); transition: rotate .4s var(--spring), translate .4s var(--spring); }
.sticky:hover { rotate: 0deg; translate: 0 -3px; }
.sticky.s1 { --fill: #f0d5c5; --r: -1.6deg; } .sticky.s2 { --fill: #eee0b5; --r: 1.2deg; } .sticky.s3 { --fill: #d9e0cf; --r: -.8deg; } .sticky.s4 { --fill: #cfdee5; --r: 1.5deg; }
.sticky .icon-doodle { width: 44px; height: 44px; margin-bottom: 10px; --pw0: 4; }
.sticky h3 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.sticky p { margin-top: var(--space-2); font-size: 15px; line-height: 1.55; color: #4d4842; }
@media (max-width: 960px) { .stickies { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stickies { grid-template-columns: minmax(0, 1fr); } }
.launch { max-width: 1120px; margin: clamp(32px, 6vh, 72px) auto 0; padding: 0 var(--gutter); }
.launch-note { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 6px 3%; }
.launch-note .pen-arrow { position: static; width: 40px; height: 44px; margin: 4px 0 0 34px; }
.launch video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; background: var(--surface); box-shadow: 0 0 0 1px rgb(0 0 0 / .07); }
.footnote { margin-top: clamp(28px, 5vh, 48px); max-width: 56em; font-size: 12.5px; line-height: 1.55; color: var(--muted-foreground); }
.facts-link { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-ui); }
.facts-link a { display: inline-flex; align-items: center; gap: var(--space-2); text-underline-offset: .2em; }
.pen-arrow path { fill: none; stroke: var(--word); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.meet { --dusk: clamp(200px, 30vh, 320px); --top: clamp(160px, 24vh, 260px); --amber: #cf9440; position: relative; overflow: clip; padding: var(--top) var(--gutter) clamp(90px, 15vh, 170px); text-align: center; }
.meet > :not(.night):not(.sky) { position: relative; }
.meet > .sky { position: sticky; top: 0; display: block; width: calc(100% + 2 * var(--gutter)); height: 100vh; margin: calc(-1 * var(--top)) calc(-1 * var(--gutter)) calc(var(--top) - 100vh); pointer-events: none; }
.night { position: absolute; inset: 0; pointer-events: none; -webkit-mask: linear-gradient(transparent calc(var(--dusk) * .4), #000 calc(var(--dusk) * 1.1)); mask: linear-gradient(transparent calc(var(--dusk) * .4), #000 calc(var(--dusk) * 1.1)); }
.meet.lit > .night { display: none; }
.sky-front { position: fixed; inset: 0; z-index: 26; width: 100%; height: 100%; pointer-events: none; }
.night .stars { position: absolute; left: 0; top: 0; }
.night .s1 { width: 1px; height: 1px; } .night .s2 { width: 1.5px; height: 1.5px; } .night .s3 { width: 2px; height: 2px; }
.meet h2 .stop { color: var(--amber); }
.meet.lit h2 .stop { color: transparent; }
.meet-scene { width: fit-content; margin: 0 auto clamp(30px, 4.5vh, 44px); }
.meet-perch { width: clamp(110px, 12vw, 150px); }
.meet-note { position: absolute; left: 82%; bottom: calc(100% + 6px); display: flex; flex-direction: column; align-items: flex-start; }
.meet-note .pen-arrow { width: 34px; height: 40px; margin-left: -8px; }
.meet h2 { font-size: clamp(44px, 6.4vw, 92px); line-height: .96; letter-spacing: -.05em; font-weight: 600; }
.meet > p:not(.mail):not(.copy-status):not(.write-to-us):not(.meet-source) { max-width: 32em; margin: var(--space-5) auto 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--muted-foreground); text-wrap: balance; }
.mail { margin-top: var(--space-4); font-size: var(--text-ui); color: var(--muted-foreground); }
.mail a { text-decoration: none; }
.mail a:hover { text-decoration: underline; }
.meet .actions { justify-content: center; margin-top: 36px; }
.needs { max-width: 62rem; margin: clamp(64px, 10vh, 110px) auto 0; }
.needs h3 { font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted-foreground); }
.constellation { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.constellation::before { content: ""; position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 2px; border-top: 1px solid color-mix(in oklab, var(--ink) 22%, transparent); }
.constellation li { display: grid; justify-items: center; align-content: start; gap: 8px; }
.constellation .star { position: relative; width: 5px; height: 5px; margin-bottom: 14px; background: var(--ink); box-shadow: 0 0 0 4px var(--background); }
.constellation b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.constellation > li > span { max-width: 17em; font-size: 14px; line-height: 1.6; color: var(--muted-foreground); text-wrap: balance; }
.marks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; max-width: 18rem; margin: 10px 0 0; padding: 0; list-style: none; color: var(--ink); }
.marks li { display: inline-flex; align-items: center; gap: 6px; }
.marks svg { display: block; width: auto; height: var(--h, 18px); }
.marks span { font-size: 15px; font-weight: 650; letter-spacing: -.02em; }
.marks-note { max-width: 40em; margin: var(--space-6) auto 0; font-size: 12px; line-height: 1.5; color: var(--muted-foreground); }
@media (max-width: 680px) {
  .constellation { grid-template-columns: 1fr; gap: var(--space-5); max-width: 22rem; margin-inline: auto; text-align: left; }
  .constellation::before { left: 2px; right: auto; top: 6px; bottom: 40px; border-top: 0; border-left: 1px solid color-mix(in oklab, var(--ink) 22%, transparent); }
  .constellation li { grid-template-columns: 5px 1fr; column-gap: var(--space-4); justify-items: start; row-gap: 4px; }
  .constellation .star { grid-row: 1 / span 3; margin: 7px 0 0; }
  .marks { grid-column: 2; justify-content: flex-start; }
}
.meet > .write-to-us { margin-top: clamp(80px, 13vh, 132px); font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--foreground); }
.contact { width: min(100%, 28rem); margin: var(--space-5) auto 0; text-align: left; }
.contact fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact label { display: block; margin-bottom: var(--space-2); font-size: var(--text-body); font-weight: 500; }
.contact input:not([type=hidden]), .contact textarea { display: block; width: 100%; border: var(--stroke-surface) solid var(--border); border-radius: var(--radius-control); padding: var(--space-3); font: inherit; font-size: var(--text-input); color: var(--foreground); background: var(--field, var(--surface)); }
.contact textarea { resize: vertical; min-height: 6rem; }
.contact label[for=contact-message] { margin-top: var(--space-5); }
.contact .button { width: 100%; margin-top: var(--space-5); border: 0; cursor: pointer; }
.contact fieldset:disabled { opacity: .6; }
.contact fieldset:disabled .button { cursor: default; }
.contact-field-error { display: none; margin-top: var(--space-2); font-size: var(--text-ui); color: var(--foreground); }
.contact input:user-invalid { border-color: var(--foreground); }
.contact input:user-invalid + .contact-field-error { display: block; }
.contact-note, .contact-status, .contact-noscript, .copy-status { font-size: var(--text-ui); line-height: 1.5; color: var(--muted-foreground); }
.contact-note { margin-top: var(--space-3); text-align: center; }
.contact-status { margin-top: var(--space-3); }
.contact-status:empty, .copy-status:empty { display: none; }
.contact-trap, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.contact-noscript { margin: var(--space-4) auto; max-width: 28rem; }
.mail { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-3); }
.copy-email { min-height: var(--target); border: 0; padding: 0 var(--space-2); border-radius: var(--radius-control); background: transparent; color: var(--foreground); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.meet > .copy-status { max-width: 28rem; margin: var(--space-2) auto 0; font-size: var(--text-ui); }
.meet > .meet-source { margin: var(--space-3) auto 0; font-size: var(--text-ui); }
.meet-source a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); text-decoration: none; transition: color var(--motion-fast) var(--ease-out); }
.meet-source a:hover { color: var(--foreground); }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); max-width: 1240px; margin: 0 auto; padding: var(--space-8) var(--gutter) calc(var(--space-8) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); font-size: var(--text-ui); color: var(--muted-foreground); }
.maker { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--foreground); }
.maker svg { width: 40px; height: 40px; }
.foot-langs { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding: 0; list-style: none; }
.foot-langs a { text-decoration: none; }
.foot-langs a[aria-current] { color: var(--foreground); font-weight: 500; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.foot-links a { display: inline-flex; align-items: center; min-height: var(--target); }
.support-bar { flex-wrap: wrap; max-width: 980px; margin: 0 auto; padding: var(--space-6) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.support-bar nav { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-ui); }
.support-bar nav a { padding: var(--space-2) 0; }
.support-main { max-width: 760px; margin: 0 auto; padding: clamp(32px, 7vh, 80px) var(--gutter) var(--space-8); line-height: 1.7; overflow-wrap: anywhere; }
.support-main h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.support-intro { font-size: 20px; line-height: 1.55; color: var(--muted-foreground); margin: var(--space-4) 0 var(--space-8); }
.support-main h2 { font-size: 23px; line-height: 1.3; letter-spacing: -.02em; margin: var(--space-8) 0 var(--space-3); }
.support-main p { margin-bottom: var(--space-4); }
.support-main a:not(.button) { text-underline-offset: .2em; }
.support-main .support-note { font-size: var(--text-ui); color: var(--muted-foreground); }
.setup-steps { padding-left: var(--space-6); }
.setup-steps > li { padding-left: var(--space-2); margin-bottom: var(--space-8); }
.setup-steps > li::marker { color: var(--muted-foreground); }
.setup-steps h3 { margin-bottom: var(--space-3); font-size: 19px; line-height: 1.4; }
.support-download .support-main { max-width: 760px; padding-top: var(--space-4); }
.support-download .support-bar { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.release-pending { border-left: var(--stroke-surface) solid var(--border); padding-left: var(--space-4); color: var(--muted-foreground); }
.support-main details { margin: var(--space-4) 0; font-size: var(--text-ui); }
.support-main summary { cursor: pointer; padding: var(--space-2) 0; }
.download-checksum { display: block; overflow-wrap: anywhere; }
.support-main dt { font-weight: 600; margin-top: var(--space-4); }
.support-main dd { margin: 0; }
.guide-figure { margin: var(--space-8) 0; }
.guide-figure img { display: block; width: 100%; height: auto; border: var(--stroke-surface) solid var(--border); border-radius: var(--radius-panel); }
.guide-figure figcaption { margin-top: var(--space-3); font-size: var(--text-ui); color: var(--muted-foreground); }
.support-main blockquote { margin: var(--space-6) 0; padding-left: var(--space-4); border-left: var(--stroke-surface) solid var(--border); }
.copy { margin-left: auto; }
.badge { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px 0 18px; border: 0; border-radius: var(--radius-control); font: inherit; text-align: left; text-decoration: none; white-space: nowrap; transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); }
.badge:active { transform: scale(.98); }
.badge .glyph { width: 24px; height: 24px; flex: none; fill: currentColor; }
.badge .words { display: grid; gap: 2px; line-height: 1; }
.badge small { font-size: 11px; font-weight: 500; letter-spacing: .02em; opacity: .72; }
.badge .big { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.badge.quiet { border: var(--stroke-surface) solid var(--border); background-color: var(--surface); box-shadow: var(--shadow-control); color: var(--foreground); }
.badge.quiet:hover { border-color: var(--border-strong); }
.badge[aria-disabled="true"] { opacity: .5; }
html:not([data-visitor]) .v:not([data-v~="mac"]),
html[data-visitor="mac"] .v:not([data-v~="mac"]),
html[data-visitor="safari"] .v:not([data-v~="safari"]),
html[data-visitor="old"] .v:not([data-v~="old"]),
html[data-visitor="other"] .v:not([data-v~="other"]),
html[data-visitor="phone"] .v:not([data-v~="phone"]) { display: none; }
.if-ext { display: none; }
html[data-from="extension"] .if-ext { display: inline; }
html[data-from="extension"] .if-new { display: none; }
.install-hint { margin-top: var(--space-3); font-size: var(--text-ui); color: var(--muted-foreground); }
@media (min-width: 1100px) { .hero .install-hint { text-align: left; } }
.hero .actions .badge { margin: 0; }
.hero .actions { margin-top: clamp(22px, 3.6vh, 32px); }
.install { margin-top: clamp(28px, 5vh, 44px); }
.steps { display: grid; gap: 72px; list-style: none; margin: 0; padding: 0; }
.step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-4); padding: 30px 28px 34px 24px; }
.step-box { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.step-box path, .step-arrow path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.step-arrow { position: absolute; left: 40px; bottom: calc(100% + 8px); width: 34px; height: 54px; overflow: visible; }
.step-perch { display: none; position: absolute; right: 22px; top: 0; width: 58px; translate: 0 -82%; }
.step-perch > .still-mark { display: none; }
html:not([data-from]) .step[data-n="1"] .step-perch, html[data-from="extension"] .step[data-n="2"] .step-perch { display: block; }
html:not([data-from]) .step[data-n="2"] .step-box path, html[data-from="extension"] .step[data-n="1"] .step-box path { stroke: var(--faint); stroke-dasharray: 6 9; }
.step-no { color: var(--muted-foreground); padding-top: 2px; }
.step-no .note { --note-size: 30px; color: currentColor; }
.step-tick { position: absolute; left: 26px; top: 28px; width: 22px; height: 22px; display: none; }
.install .step-title { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--muted-foreground); }
.step-done { display: none; font-weight: 400; }
.live-note { display: none; }
.install .step-desc { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted-foreground); }
.step-act { margin-top: var(--space-6); }
.step-act .v.act { display: inline-block; }
.install .step-meta { margin: var(--space-3) 0 0; font-size: var(--text-ui); line-height: 1.5; color: var(--muted-foreground); }
.pen { position: absolute; overflow: visible; pointer-events: none; }
.pen path { fill: none; stroke: var(--word); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pen-loop path { vector-effect: non-scaling-stroke; }
.pen-wrap { position: relative; display: inline-block; vertical-align: top; }
.pen-wrap > .pen-loop { left: -17px; top: -13px; width: calc(100% + 34px); height: calc(100% + 26px); }
.pen-check { inset: 0; width: 100%; height: 100%; }
.pen-check path { stroke: var(--ink); }
.pen-note { position: absolute; width: max-content; pointer-events: none; }
.pen-note .note { rotate: -3deg; transform-origin: 0 100%; }
.pen-arrow.side { left: calc(100% + 6px); top: 55%; width: 40px; height: 34px; }
.pen-arrow.down { left: 24%; top: calc(100% + 4px); width: 34px; height: 40px; }
.pen-wrap > .pen-note { right: calc(100% + 58px); top: -10px; }
.pen-wrap > .pen-note > .pen-arrow.down { display: none; }
.step .pen-wrap > .pen, .step .pen-wrap > .pen-note { display: none; }
@media (max-width: 959px) {
  .pen-wrap > .pen-note { right: auto; left: 2px; top: auto; bottom: calc(100% + 58px); }
  .pen-wrap > .pen-note > .pen-arrow.side { display: none; }
  .pen-wrap > .pen-note > .pen-arrow.down { display: block; }
  html:not([data-from]) .step[data-n="1"] .step-act, html[data-from="extension"] .step[data-n="2"] .step-act { margin-top: 108px; }
}
@keyframes appear { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .step .pen-wrap > .pen-loop, .step .pen-wrap > .pen-note { animation: appear .6s var(--ease-out) .5s backwards; }
}
html:not([data-from]) .step[data-n="1"] .step-no, html[data-from="extension"] .step[data-n="2"] .step-no,
html:not([data-from]) .install .step[data-n="1"] .step-title, html[data-from="extension"] .install .step[data-n="2"] .step-title { color: var(--foreground); }
html:not([data-from]) .step[data-n="1"] .live-note, html[data-from="extension"] .step[data-n="2"] .live-note { display: block; }
html:not([data-from]) .step[data-n="1"] .pen-wrap > .pen, html[data-from="extension"] .step[data-n="2"] .pen-wrap > .pen { display: block; }
html:not([data-from]) .step[data-n="1"] .pen-wrap > .pen-note, html[data-from="extension"] .step[data-n="2"] .pen-wrap > .pen-note { display: block; }
html[data-from="extension"] .step[data-n="1"] .step-fold { display: none; }
html[data-from="extension"] .step[data-n="1"] { padding-block: 18px; }
html[data-from="extension"] .step[data-n="1"] .step-no { visibility: hidden; }
html[data-from="extension"] .step[data-n="1"] .step-tick { display: block; top: 17px; }
html[data-from="extension"] .install .step[data-n="1"] .step-title { font-size: 16px; font-weight: 500; }
html[data-from="extension"] .step[data-n="1"] .step-done { display: inline; }
html:not([data-from]) .step[data-n="2"] .badge.primary { background: var(--surface); background-image: none; border: var(--stroke-surface) solid var(--border); box-shadow: var(--shadow-control); color: var(--foreground); }
html:not([data-from]) .step[data-n="2"] .badge.primary:hover { border-color: var(--border-strong); }
@media (max-width: 560px) { .step { grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--space-3); padding-inline: 16px 18px; } .step-tick { left: 16px; } }
.lost-main { display: grid; justify-items: center; align-content: center; gap: var(--space-4); min-height: 100svh; padding: var(--gutter); text-align: center; }
.lost-scene { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 8vw, 52px); }
.lost-perch { width: 120px; flex: none; }
.lost-place { position: relative; width: 150px; height: 104px; }
.lost-place .pen-place { position: absolute; inset: 0; width: 100%; height: 100%; }
.lost-place .pen-place path { fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 7 9; }
.lost-note { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; white-space: nowrap; }
.lost-note .pen-arrow { width: 34px; height: 40px; }
.lost h1 { font-size: clamp(32px, 5vw, 56px); letter-spacing: -.04em; }
.lost p { color: var(--muted-foreground); }
@media (max-width: 760px) {
  .chapters { display: none; }
  .bar { padding-inline: var(--space-3); }
  .bar-end { gap: var(--space-3); }
  .source { padding: 0 9px; }
  .source span { display: none; }
}
@media (max-width: 420px) {
  .lang summary { padding: 0 9px; }
  .lang summary > span:not(.sr) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lang summary .tiny { display: none; }
}
@media (max-width: 340px) {
  .bar { padding-inline: var(--space-2); }
  .bar-end { gap: var(--space-2); }
  .bar-actions { gap: var(--space-1); }
  .brand { padding: 0 var(--space-2); }
  .source, .lang summary { padding: 0 7px; }
  .cta { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .cta, .chapters a { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}