/* Typo Display: the typodojo brand face, drawn in the studio with one round pen. Built by tools/make_font.mjs. */
@font-face { font-family: "Typo Display"; src: url(/assets/typo-display.7cf196fd71.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Recursive (SIL OFL) by Arrow Type, set to its Casual style: letters based on single-stroke brush lettering.
   One file carries the weight and Mono axes; text is Sans, and .mono opts a spot into Mono Casual. */
@font-face { font-family: "Recursive Casual"; src: url(/assets/recursive-casual.e47f6585f3.woff2) format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
/* typodojo design tokens. Shared by the site and the studio.
   Layout concept: every page hangs from the five lines a letter hangs from.
   Color: black and white. Three modes: light, dark, mono (1-bit, no greys). */
:root {
  /* Light: Paper ground, Ink type. */
  --paper: #ffffff; --ink: #0a0a0a; --ink-2: #4a4a48; --ink-3: #7c7b77; --line: #e3e2de; --line-2: #c8c7c2; --wash: #f4f3f0; --guide: #cfcec9;
  --inv-paper: #0a0a0a; --inv-ink: #f3f2ee; --inv-ink-2: #b5b4af; --inv-ink-3: #8a8985; --inv-line: #2a2a29; --inv-line-2: #464644; --inv-wash: #171716;
  --dim: 0.42; --dim-soft: 0.68;
  --sans: "Recursive Casual", "Google Sans", Arial, Helvetica, sans-serif;
  --display: "Typo Display", "Google Sans", Arial, sans-serif;
  --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-15: 15px; --t-17: 17px; --t-20: 20px;
  --t-24: clamp(20px, 2.2vw, 24px);
  --t-32: clamp(26px, 3.2vw, 32px);
  --t-48: clamp(34px, 5vw, 48px);
  --t-72: clamp(44px, 8vw, 88px);
  --t-hero: clamp(56px, 13vw, 168px);
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px; --s-96: 96px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1240px;
  --r-s: 8px; --r-m: 12px; --r-pill: 999px;
  --tap: 44px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;
  color-scheme: light;
}
/* The switch test: changing modes changes colors only. Every mode keeps the same shapes, weights and dimming. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="mono"]) {
    --paper: #0b0b0b; --ink: #f3f2ee; --ink-2: #b5b4af; --ink-3: #85847f; --line: #262625; --line-2: #3d3d3b; --wash: #161615; --guide: #403f3d;
    --inv-paper: #f3f2ee; --inv-ink: #0b0b0b; --inv-ink-2: #45453f; --inv-ink-3: #6b6a65; --inv-line: #d7d6d1; --inv-line-2: #b9b8b3; --inv-wash: #e8e7e2;
    color-scheme: dark;
  }
}
/* Dark: Ink ground, Paper type. */
:root[data-theme="dark"] {
  --paper: #0b0b0b; --ink: #f3f2ee; --ink-2: #b5b4af; --ink-3: #85847f; --line: #262625; --line-2: #3d3d3b; --wash: #161615; --guide: #403f3d;
  --inv-paper: #f3f2ee; --inv-ink: #0b0b0b; --inv-ink-2: #45453f; --inv-ink-3: #6b6a65; --inv-line: #d7d6d1; --inv-line-2: #b9b8b3; --inv-wash: #e8e7e2;
  color-scheme: dark;
}
/* Mono: Graphite ground, Paper type, Ash line work. A true gray mode, not a copy of light. */
:root[data-theme="mono"] {
  --paper: #2a2b2a; --ink: #f3f2ee; --ink-2: #c9c9c5; --ink-3: #9b9c98; --line: #3e3f3d; --line-2: #585956; --wash: #333433; --guide: #5b5c59;
  --inv-paper: #c9c9c5; --inv-ink: #2a2b2a; --inv-ink-2: #3f403e; --inv-ink-3: #575855; --inv-line: #b2b2ad; --inv-line-2: #9a9a95; --inv-wash: #bdbdb8;
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }
/* typodojo shared components. Class names match the studio engine's markup (btn, chip, opt, sw, text, slider). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-variation-settings: "MONO" 0; font-size: var(--t-15); line-height: 1.5; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; margin: 0; font-style: normal; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
.sr, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* Brand lockup: an ink drop resting on a baseline. */
.lockup { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--ink); min-height: var(--tap); }
.lockup .mark { width: 28px; height: 28px; flex: none; display: block; overflow: visible; }
.lockup .word { font-weight: 600; font-size: 19px; letter-spacing: -0.03em; line-height: 1; }
.lockup .lsub { font-size: var(--t-13); color: var(--ink-3); letter-spacing: 0; padding-left: 10px; border-left: 1px solid var(--line-2); line-height: 1; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); border: 1px solid var(--line-2); background: transparent; border-radius: var(--r-pill); padding: 0 20px; cursor: pointer; font-weight: 500; font-size: var(--t-15); white-space: nowrap; text-decoration: none; color: var(--ink); transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); touch-action: manipulation; }
.btn.ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.small { min-height: 36px; padding: 0 14px; font-size: var(--t-14); }
.btn[disabled] { opacity: 0.35; cursor: default; }
.linkish { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--ink-2); font-size: inherit; }
@media (hover: hover) {
  .btn:not(.ink):not([disabled]):hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .btn.ink:not([disabled]):hover { opacity: 0.84; }
  .linkish:hover { color: var(--ink); }
}
.btn:active:not([disabled]) { transform: translateY(1px); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 40px; border: 1px solid var(--line-2); background: transparent; border-radius: var(--r-pill); padding: 0 15px; cursor: pointer; font-size: var(--t-14); color: var(--ink); touch-action: manipulation; transition: background var(--dur) var(--ease); }
.chip.sm { min-height: 34px; padding: 0 12px; font-size: var(--t-13); }
.chip[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[disabled] { opacity: 0.45; cursor: default; }
.chip.static { cursor: default; }
@media (hover: hover) { .chip:not([aria-pressed=true]):not([disabled]):not(.static):hover { border-color: var(--ink); } }

/* Fields */
.label { display: block; font-size: var(--t-13); color: var(--ink-2); margin: 0 0 8px; letter-spacing: 0.01em; }
.field { margin: 0 0 24px; }
.text { width: 100%; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; padding: 8px 0 10px; outline: none; border-radius: 0; transition: border-color var(--dur) var(--ease); }
.text:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.text.huge { font-size: var(--t-72); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.text.mid { font-size: var(--t-17); }
select { border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--paper); padding: 0 14px; min-height: 36px; font-size: var(--t-14); }

/* Option rows with switch */
.list { display: grid; gap: 8px; }
.opt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: transparent; cursor: pointer; width: 100%; transition: border-color var(--dur) var(--ease); }
.opt[aria-pressed=true] { border-color: var(--ink); }
.opt b { display: block; font-weight: 600; }
.opt small { display: block; color: var(--ink-2); margin-top: 3px; font-size: var(--t-13); line-height: 1.45; }
.opt .n { font-size: var(--t-13); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.opt.fixed { cursor: default; }
@media (hover: hover) { .opt:not(.fixed):hover { border-color: var(--ink); } }
.sw { width: 40px; height: 24px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper); position: relative; flex: none; transition: background var(--dur) var(--ease); }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-3); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.opt[aria-pressed=true] .sw { background: var(--ink); border-color: var(--ink); }
.opt[aria-pressed=true] .sw::after { transform: translateX(16px); background: var(--paper); }

/* Range */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; margin: 0; cursor: pointer; touch-action: pan-y; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--line-2); }
input[type=range]::-moz-range-track { height: 2px; background: var(--line-2); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); margin-top: -9px; }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
@media (pointer: coarse) { input[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -13px; } input[type=range] { height: 44px; } }
.slider { margin: 0 0 12px; }
.slider .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--t-14); }
.slider output { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Theme switch (light / dark / mono) */
.theme { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 3px; gap: 4px; }
.theme button { border: 0; background: transparent; border-radius: var(--r-pill); min-height: 34px; min-width: 34px; padding: 0 11px; font-size: var(--t-12); cursor: pointer; color: var(--ink-2); }
.theme button[aria-pressed=true] { background: var(--ink); color: var(--paper); }
@media (pointer: coarse) { .theme button { min-height: 38px; min-width: 44px; } }

/* Tables */
.tablewrap { overflow-x: auto; border-top: 1px solid var(--ink); -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-14); }
.table th, .table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.table th { font-weight: 600; font-size: var(--t-13); }
.table td:first-child, .table th:first-child { padding-left: 0; }
.table .num, .table td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: var(--r-pill); font-size: var(--t-14); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); max-width: calc(100vw - 32px); text-align: center; z-index: 60; }
.toast.on { opacity: 1; }

/* ---------- Character ---------- */
/* Display type: Typo Display, always lowercase, never faux bold or slanted. */
.fd { font-family: var(--display); font-weight: 400; font-style: normal; text-transform: lowercase; letter-spacing: -0.005em; font-synthesis: none; }
/* An ink band: the section swaps paper and ink. */
/* No inverted sections: every section stays in the theme you chose. The class remains only as a hook for layout. */
.inverse { background: var(--paper); color: var(--ink); }
/* Self-drawing letters (ink.js). */
[data-ink] { position: relative; }
.ic { position: relative; }
.iw { white-space: nowrap; }
.ib { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.inking { color: transparent !important; }
.ink-layer { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ink-path { fill: none; stroke: var(--paper); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ink-node { fill: var(--paper); }
[data-ink-view="path"] { color: var(--line-2); }
[data-ink-view="path"] .ink-path { stroke: var(--ink); }
[data-ink-view="path"] .ink-node { fill: var(--ink); }
/* The dojo T: the roof lifts a little when you reach for it, like a bow in reverse. */
.lockup .mark .mk-roof { transition: transform 260ms var(--ease); }
@media (hover: hover) { .lockup:hover .mark .mk-roof { transform: translateY(-5px); } }
.lockup:active .mark .mk-roof { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) { .lockup .mark .mk-roof { transition: none; transform: none !important; } }
.lockup .word { font-family: var(--display); font-weight: 400; text-transform: lowercase; font-size: 24px; letter-spacing: 0; line-height: 1; padding-bottom: 2px; }

/* Mono Casual, opted into only where characters line up: metrics, sizes, code points, the clock. */
.mono { font-variation-settings: "MONO" 1; font-variant-numeric: normal; letter-spacing: 0; }

/* ---------- Typo, the dojo's dog ---------- */
.typo { display: block; width: 100%; height: auto; color: var(--ink); overflow: visible; }
.typo .tail { transform-origin: 655px 800px; transform-box: view-box; }
@keyframes wag { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-16deg); } 60% { transform: rotate(8deg); } }
@media (hover: hover) { .typo:hover .tail, .say:hover .tail { animation: wag 700ms var(--ease) 2; } }
@media (prefers-reduced-motion: reduce) { .typo .tail { animation: none !important; } }
/* Typo speaking: a bubble that points at him. Border only, same weight all round. */
.say { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 16px; align-items: end; margin: 0; max-width: 560px; }
.say-typo { grid-row: 1 / span 2; width: 64px; }
.say blockquote { position: relative; margin: 0; padding: 14px 18px; border: 1.5px solid var(--ink); border-radius: 18px 18px 18px 4px; font-size: var(--t-17); line-height: 1.45; color: var(--ink); background: var(--paper); }
.say figcaption { font-size: var(--t-12); color: var(--ink-3); }

/* Typo's poses, drawn with the same pen as everything else. */
.pose { display: block; width: 100%; height: auto; color: var(--ink); overflow: visible; }

/* ---------- The motion playground (Animation tab and the studio) ---------- */
.tdm { display: block; width: 100%; height: auto; color: var(--ink); }
.mplay { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(24px, 4vw, 48px); align-items: start; }
.mplay-stage { min-height: 220px; display: grid; place-items: center; padding: clamp(16px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); position: sticky; top: calc(var(--hdr, 64px) + 16px); }
.mplay-stage .tdm { max-height: 52vh; }
.mplay-empty { margin: 0; color: var(--ink-3); }
.mplay-miss { grid-column: 1; margin: -12px 0 0; font-size: var(--t-13); color: var(--ink-2); }
.mplay-ctl { display: grid; gap: 18px; min-width: 0; grid-column: 2; grid-row: 1 / span 2; }
.mplay-ctl fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mplay-ctl legend { padding: 0; margin-bottom: 8px; }
.mplay-field { display: grid; gap: 8px; min-width: 0; }
.mplay-field .label b { font-weight: 500; color: var(--ink-2); margin-left: 6px; }
.mplay-field select { min-height: var(--tap); }
.mplay-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; }
.mplay-loop { min-height: var(--tap); padding: 10px 14px; }
.mplay-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mplay-note { margin: 0; font-size: var(--t-13); color: var(--ink-2); line-height: 1.45; }
.mplay-code { display: grid; gap: 8px; }
.mplay-code textarea { width: 100%; box-sizing: border-box; font-size: 12px; resize: vertical; }
@media (max-width: 860px) {
  .mplay { grid-template-columns: minmax(0, 1fr); }
  .mplay-stage { position: relative; top: 0; min-height: 160px; }
  .mplay-miss { margin: -8px 0 0; }
  .mplay-ctl { grid-column: 1; grid-row: auto; }
}
@media (max-width: 420px) { .mplay-row { grid-template-columns: minmax(0, 1fr); } .mplay-actions .btn { flex: 1 1 auto; } }
.mplay-field .label, .mplay-ctl legend.label { margin: 0; } .mplay-ctl legend.label { margin-bottom: 8px; }
.mplay-code[hidden] { display: none; }

/* ---------- Sticker skins: silver (light), black vinyl (dark), holo (mono) ----------
   Each is a die-cut sticker: a thin paper edge, a soft drop, and its own surface. */
.skin-silver, :root[data-skin="silver"] .tsk-face, :root[data-skin="silver"] .stkbtn {
  --sk-fg: #121211; --sk-edge: #ffffff;
  --sk-face: conic-gradient(from 200deg at 38% 34%, #fdfdfb, #b4b4b1 14%, #f4f4f2 26%, #8f8f8c 40%, #e6e6e3 54%, #a3a3a0 68%, #ffffff 82%, #fdfdfb);
  --sk-glow: rgba(255, 255, 255, .9); }
.skin-black, :root[data-skin="black"] .tsk-face, :root[data-skin="black"] .stkbtn {
  --sk-fg: #f2f2ef; --sk-edge: #d9d9d6;
  --sk-face: radial-gradient(120% 90% at 30% 20%, #3b3b3a 0%, #151515 46%, #050505 100%);
  --sk-glow: rgba(255, 255, 255, .5); }
.skin-holo, :root[data-skin="holo"] .tsk-face, :root[data-skin="holo"] .stkbtn {
  --sk-fg: #141414; --sk-edge: #f1f1ee;
  --sk-face: conic-gradient(from 120deg at 50% 50%, #d9dcdf, #f4efe9 12%, #c9cfd6 24%, #eef1ec 36%, #d6d0dc 48%, #f7f7f4 60%, #c8d3d2 72%, #ece6ee 84%, #d9dcdf);
  --sk-glow: rgba(255, 255, 255, .85); }
.tsk-sw { position: relative; display: block; flex: none; border-radius: 50%; background: var(--sk-face); color: var(--sk-fg);
  box-shadow: 0 0 0 2px var(--sk-edge), 0 0 0 3px color-mix(in srgb, #000 14%, transparent), 0 6px 14px -6px rgba(0, 0, 0, .45); overflow: hidden; isolation: isolate; }
.tsk-sw::after { content: ""; position: absolute; inset: -30%; background: linear-gradient(115deg, transparent 38%, var(--sk-glow) 50%, transparent 62%); transform: translateX(-70%); pointer-events: none; mix-blend-mode: soft-light; }
.skin-holo::before, :root[data-skin="holo"] .tsk-face::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(60deg, rgba(255, 255, 255, .0) 0 5px, rgba(255, 255, 255, .45) 5px 6px, rgba(0, 0, 0, .04) 6px 9px); mix-blend-mode: overlay; }

/* the corner sticker: the mode you are in, as a free die-cut sticker (a silver sun, a black-vinyl moon, a gray holo
   cloud). Tap it and the others peel up out of the corner, with Typo on paper at the top. No panel behind them. */
.tsk { position: fixed; z-index: 70; left: calc(14px + env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); line-height: 1; }
.ms { display: block; width: 100%; height: 100%; overflow: visible; }
.ms-cut { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .28)) drop-shadow(0 0 .6px rgba(0, 0, 0, .35)); }
.ms-sheen { transform-box: view-box; translate: 0 0; transition: translate 0s; }
.tsk-b { position: relative; display: block; width: 58px; height: 58px; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 50%; }
.tsk-f { position: absolute; inset: 0; display: none; transform: rotate(-10deg); transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
:root[data-skin="silver"] .tsk-f-silver, :root[data-skin="black"] .tsk-f-black, :root[data-skin="holo"] .tsk-f-holo, :root:not([data-skin]) .tsk-f-silver { display: block; }
.tsk-b:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) {
  .tsk-b:hover .tsk-f { transform: rotate(4deg) translateY(-3px) scale(1.08); }
  .tsk-b:hover .ms-sheen, .tsk-i:hover .ms-sheen { translate: 100px 0; transition: translate .8s ease; }
}
.tsk-b:active .tsk-f { transform: rotate(0deg) scale(.9); transition-duration: .12s; }
.tsk.open .tsk-f { transform: rotate(18deg) scale(.94); }
.tsk-menu { position: absolute; left: 2px; bottom: 64px; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; width: max-content; padding: 0; border: 0; border-radius: 0; background: none; pointer-events: none; }
.tsk.open .tsk-menu { pointer-events: auto; }
.tsk-i { --r: -6deg; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 10px 0 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  opacity: 0; transform: translateY(calc(var(--k) * 22px + 26px)) scale(.4) rotate(-40deg); transform-origin: 26px 50%;
  transition: opacity .18s ease, transform .42s cubic-bezier(.3, 1.45, .45, 1); transition-delay: 0s; }
.tsk-i:nth-child(1) { --k: 1; --r: -7deg; } .tsk-i:nth-child(2) { --k: 2; --r: 5deg; } .tsk-i:nth-child(3) { --k: 3; --r: -4deg; } .tsk-i:nth-child(4) { --k: 4; --r: 6deg; }
.tsk.open .tsk-i { opacity: 1; transform: none; }
.tsk.open .tsk-i:nth-child(2) { transition-delay: .035s; } .tsk.open .tsk-i:nth-child(3) { transition-delay: .07s; } .tsk.open .tsk-i:nth-child(4) { transition-delay: .105s; }
.tsk-i .ms { flex: none; width: 52px; height: 52px; transform: rotate(var(--r)); transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.tsk-l { display: grid; gap: 1px; padding: 6px 11px; border-radius: 12px; background: color-mix(in srgb, var(--paper) 92%, transparent); box-shadow: 0 0 0 1px var(--line); line-height: 1.15;
  opacity: .0; transform: translateX(-6px); transition: opacity .2s ease .12s, transform .3s ease .12s; }
.tsk.open .tsk-l { opacity: 1; transform: none; }
.tsk-l b { font-size: var(--t-14); font-weight: 600; }
.tsk-l small { font-size: var(--t-12); color: var(--ink-3); }
@media (hover: hover) { .tsk-i:hover .ms { transform: rotate(0deg) scale(1.1) translateY(-2px); } }
.tsk-i:active .ms { transform: scale(.88); transition-duration: .12s; }
.tsk-i[aria-pressed=true] .ms { transform: rotate(0deg) scale(1.08); }
.tsk-i[aria-pressed=true] .tsk-l { box-shadow: 0 0 0 1.5px var(--ink); }
.tsk-i[aria-pressed=true] .tsk-l b::after { content: " \2713"; }
.tsk-i:focus-visible { outline: none; } .tsk-i:focus-visible .tsk-l { box-shadow: 0 0 0 2px var(--ink); }
.tsk-i.stamp .ms { animation: skStamp .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes skStamp { 0% { transform: rotate(var(--r)) scale(1); } 40% { transform: rotate(0deg) scale(.78); } 100% { transform: rotate(0deg) scale(1.08); } }
.tsk-typo[aria-checked="false"] .ms-ink { opacity: .3; }
.tsk-typo[aria-checked="false"] .ms { filter: grayscale(1); transform: rotate(var(--r)) scale(.94); }
@media (prefers-reduced-motion: reduce) { .tsk-f, .tsk-i, .tsk-i .ms, .tsk-l { transition: opacity .15s ease; transform: none !important; } .ms-sheen { transition: none !important; } .tsk-i.stamp .ms { animation: none; } }

/* the studio, as a sticker */
.stkbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px; border-radius: 999px; background: var(--sk-face); color: var(--sk-fg);
  font-size: var(--t-14); font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; isolation: isolate; transform: rotate(-1.5deg);
  box-shadow: 0 0 0 2px var(--sk-edge), 0 0 0 3px color-mix(in srgb, #000 14%, transparent), 0 8px 16px -8px rgba(0, 0, 0, .45);
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s ease; }
.stkbtn span { position: relative; z-index: 1; }
.stkbtn::after { content: ""; position: absolute; inset: -40% -20%; background: linear-gradient(115deg, transparent 40%, var(--sk-glow) 50%, transparent 60%); transform: translateX(-70%); pointer-events: none; mix-blend-mode: soft-light; }
:root[data-skin="holo"] .stkbtn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(60deg, rgba(255, 255, 255, 0) 0 5px, rgba(255, 255, 255, .45) 5px 6px, rgba(0, 0, 0, .04) 6px 9px); mix-blend-mode: overlay; }
@media (hover: hover) { .stkbtn:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 0 0 2px var(--sk-edge), 0 0 0 3px color-mix(in srgb, #000 14%, transparent), 0 14px 22px -10px rgba(0, 0, 0, .5); } }
.stkbtn:active { transform: rotate(0deg) scale(.96); transition-duration: .12s; }
.stkbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (pointer: coarse) { .stkbtn { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .tsk-face, .tsk-menu, .tsk-modes button, .tsk-modes .tsk-sw, .stkbtn { transition: none; transform: none !important; } .tsk-sw::after, .stkbtn::after { animation: none !important; } }
:root[data-skin="silver"] .stkbtn { background: linear-gradient(180deg, #ffffff 0%, #e4e4e1 38%, #b9b9b6 52%, #d9d9d6 70%, #f7f7f5 100%); }
.tsk-menu[hidden] { display: none; }
.tsk-menu .tsk-i, .tsk-menu .tsk-i[aria-pressed=true] { background: none; color: var(--ink); border-radius: 0; min-width: 0; font-size: inherit; }
@keyframes skSheen { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
@media (hover: hover) { .stkbtn:hover::after { animation: skSheen .9s ease forwards; } }
.ms-ink .inkdog { width: 44px; height: 44px; color: #0b0b0b !important; }
.tsk-l { box-shadow: none; background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tsk-i[aria-pressed=true] .tsk-l { box-shadow: none; }
.tsk-i:focus-visible .tsk-l { box-shadow: 0 0 0 2px var(--ink); }
/* the corner sticker steps aside while Typo talks or a new sticker is announced */
.tsk { transition: opacity .25s ease, visibility 0s; }
body:has(#tchat.open) .tsk, body:has(.stk-new.on) .tsk { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
/* Typo, on call: a corner button, a short peek, and a panel (a bottom sheet on phones). */
.tchat { --fab: 60px; --fab-b: calc(20px + env(safe-area-inset-bottom, 0px)); --fab-r: calc(20px + env(safe-area-inset-right, 0px)); }
.tchat-fab { position: fixed; right: var(--fab-r); bottom: var(--fab-b); z-index: 60; width: var(--fab); height: var(--fab); border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,.14); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.tchat-fab svg { width: 42px; height: 42px; display: block; }
.tchat-fab .x { display: none; width: 22px; height: 22px; }
.tchat-fab.on { background: var(--ink); color: var(--paper); }
.tchat-fab.on .head { display: none; } .tchat-fab.on .x { display: block; }
@media (hover: hover) { .tchat-fab:hover { transform: translateY(-2px); } }
.tchat-fab.muted:not(.on) { opacity: var(--dim-soft); }
.tchat-fab:focus-visible, .tchat-panel :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.tchat-peek { position: fixed; right: calc(var(--fab-r) + var(--fab) + 12px); bottom: calc(var(--fab-b) + 6px); z-index: 59; width: min(280px, calc(100vw - var(--fab) - 64px)); box-sizing: border-box; padding: 12px 14px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 16px 16px 4px 16px; box-shadow: 0 10px 28px rgba(0,0,0,.12); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 6px; align-items: start; animation: peek-in 260ms var(--ease); }
.tchat-peek.at { right: auto; bottom: auto; border-radius: 16px 4px 16px 16px; }
.tchat-peek[hidden] { display: none; }
.tchat-peek p { margin: 0; font-size: var(--t-14); line-height: 1.4; }
.tchat-peek .tchat-open { grid-column: 1; justify-self: start; }
.tchat-peek .tchat-x { grid-column: 2; grid-row: 1; width: 32px; height: 32px; margin: -6px -6px 0 0; border: 0; background: none; color: var(--ink-3); border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
@keyframes peek-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tchat-panel { position: fixed; right: var(--fab-r); bottom: calc(var(--fab-b) + var(--fab) + 14px); z-index: 61; width: min(380px, calc(100vw - 32px)); height: min(580px, calc(100dvh - var(--fab) - 120px)); box-sizing: border-box; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 20px; box-shadow: 0 18px 50px rgba(0,0,0,.16); overflow: hidden; animation: peek-in 220ms var(--ease); }
.tchat-panel[hidden] { display: none; }
.tchat-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--line); }
.tchat-av { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; flex: none; }
.tchat-av svg { width: 27px; height: 27px; display: block; }
.tchat-id { flex: 1 1 auto; min-width: 0; }
.tchat-id h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.05; }
.tchat-id p { margin: 1px 0 0; font-size: var(--t-12); color: var(--ink-3); }
.tchat-head .chip { min-height: 36px; }
.tchat-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.tchat-log { list-style: none; margin: 0; padding: 16px 14px; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; }
.tchat-log li { display: flex; flex-direction: column; gap: 8px; max-width: 86%; }
.tchat-log li p { margin: 0; padding: 10px 13px; font-size: var(--t-15); line-height: 1.42; overflow-wrap: anywhere; }
.tchat-log .typo { align-self: flex-start; }
.tchat-log .typo p { border: 1.5px solid var(--ink); border-radius: 16px 16px 16px 4px; }
.tchat-log .me { align-self: flex-end; }
.tchat-log .me p { background: var(--ink); color: var(--paper); border-radius: 16px 16px 4px 16px; }
.tchat-log .typing p { color: var(--ink-3); border-color: var(--line-2); }
.tchat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tchat-chips .chip { min-height: 38px; }
.tchat-chips .chip:disabled { opacity: var(--dim); }
.tchat-form { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.tchat-form input { flex: 1 1 auto; min-width: 0; min-height: var(--tap); box-sizing: border-box; padding: 10px 16px; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--r-pill); }
.tchat-form input::placeholder { color: var(--ink-3); }
.tchat-send { width: var(--tap); height: var(--tap); flex: none; border-radius: 50%; border: 0; background: var(--ink); color: var(--paper); display: grid; place-items: center; cursor: pointer; }
.tchat-scrim { position: fixed; inset: 0; z-index: 58; background: rgba(0,0,0,.28); }
.tchat-scrim[hidden] { display: none; }
@media (min-width: 641px) { .tchat-scrim { display: none !important; } }
/* Phones: the panel is a sheet from the bottom edge, over a scrim, above the keyboard. */
@media (max-width: 640px) {
  .tchat { --fab: 56px; --fab-b: calc(16px + env(safe-area-inset-bottom, 0px)); --fab-r: calc(16px + env(safe-area-inset-right, 0px)); }
  .tchat-panel { left: 0; right: 0; bottom: 0; width: auto; height: min(78dvh, 640px); border-radius: 20px 20px 0 0; border-bottom: 0; }
  .tchat-fab.on:not(.inbar) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tchat-peek, .tchat-panel { animation: none; } .tchat-fab { transition: none; } }
/* Room at the end of every page, so the corner button never sits on the last line. */
.ftr-base { padding-bottom: calc(var(--fab, 60px) + 32px); }
.tchat-chips a.chip { text-decoration: none; }
/* Studio: Typo is a round button in the top bar, and his panel drops from it. */
.tchat-fab.inbar { position: static; width: var(--tap); height: var(--tap); box-shadow: none; border-width: 1px; border-color: var(--line-2); flex: none; }
.tchat-fab.inbar svg { width: 30px; height: 30px; }
.tchat-fab.inbar .x { width: 18px; height: 18px; }
@media (hover: hover) { .tchat-fab.inbar:hover { transform: none; border-color: var(--ink); } }
@media (min-width: 641px) { .tchat.inbar .tchat-panel { top: calc(var(--bar, 60px) + 8px); bottom: auto; right: calc(12px + env(safe-area-inset-right, 0px)); height: min(580px, calc(100dvh - var(--bar, 60px) - 100px)); } }
/* Round 14: Typo in the button, 48px; Hush beside him; peeks rise above him so Hush keeps its place. */
.tchat { --fab: 48px; }
.tchat-fab { box-shadow: 0 8px 22px rgba(0,0,0,.14); }
.tchat-fab svg.inkdog { width: 38px; height: 38px; transition: transform 400ms var(--ease); }
.tchat-fab.inbar svg.inkdog { width: 32px; height: 32px; }
.tchat-fab.muted:not(.on) svg.inkdog { transform: rotate(16deg) translate(-2px, 3px); }
.tchat-av svg.inkdog { width: 32px; height: 32px; }
.tchat-hush { position: fixed; z-index: 60; right: calc(var(--fab-r) + var(--fab) + 8px); bottom: calc(var(--fab-b) + (var(--fab) - 40px) / 2); height: 40px; min-width: 64px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2); font: inherit; font-size: var(--t-14); cursor: pointer; }
.tchat-hush[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
@media (hover: hover) { .tchat-hush:hover { color: var(--ink); border-color: var(--ink); } }
.tchat-hush:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.tchat.open .tchat-hush:not(.inbar) { display: none; }
.tchat-hush.inbar { position: static; height: var(--tap); flex: none; }
.tchat-peek { right: var(--fab-r); bottom: calc(var(--fab-b) + var(--fab) + 12px); border-radius: 16px 16px 4px 16px; width: min(300px, calc(100vw - 32px)); }
.tchat[hidden] { display: none !important; }
@media (max-width: 640px) { .tchat { --fab: 48px; } .tchat-hush { height: 40px; } }
@media (prefers-reduced-motion: reduce) { .tchat-fab svg.inkdog { transition: none; } }
/* Prints that move, patiently. Nothing moves until it is in view, and nothing moves with reduced motion:
   every print's resting state is its finished frame. */
.mvart * { animation-play-state: paused; }
.mvart.play * { animation-play-state: running; }
.mv.drift { animation: pr-drift var(--t) linear infinite; }
@keyframes pr-drift { from { transform: none; } to { transform: translateX(var(--d)); } }
.mv.boil { opacity: 0; animation: pr-boil 780ms linear infinite; animation-delay: calc(var(--f) * -260ms); }
.mv.boil.b0 { opacity: 1; }
@keyframes pr-boil { 0%, 33.2% { opacity: 1; } 33.4%, 100% { opacity: 0; } }
.mv.ink1 { animation: pr-ink 10ms steps(1, end) both; animation-delay: calc(var(--c) * 160ms + 300ms); }
@keyframes pr-ink { from { opacity: 0; } to { opacity: 1; } }
.mv.dr .st { transform-box: fill-box; transform-origin: 50% 0; animation: pr-stem var(--t) steps(8, end) infinite; animation-delay: var(--dl); }
.mv.dr .dp { animation: pr-drop var(--t) steps(8, end) infinite; animation-delay: var(--dl); }
@keyframes pr-stem { 0% { transform: scaleY(.35); } 70%, 100% { transform: scaleY(1); } }
@keyframes pr-drop { 0% { transform: translateY(calc(var(--L) * -.65px)); opacity: 1; } 70% { transform: none; opacity: 1; } 86% { transform: translateY(90px); opacity: 0; } 100% { transform: translateY(90px); opacity: 0; } }
.mv.rp { transform-origin: 200px 200px; vector-effect: non-scaling-stroke; transform: scale(calc(1 - var(--i) * .088)); opacity: calc(1 - var(--i) * .07); animation: pr-ripple 7.2s cubic-bezier(.2, .6, .3, 1) infinite; animation-delay: calc(var(--i) * -720ms); }
@keyframes pr-ripple { 0% { transform: scale(.06); opacity: 0; } 12% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.mv.rdrop { transform-origin: 200px 200px; animation: pr-drop0 7.2s ease-in-out infinite; }
@keyframes pr-drop0 { 0%, 100% { transform: scale(1); } 6% { transform: scale(.7); } 14% { transform: scale(1.08); } 24% { transform: scale(1); } }
.mv.sl { opacity: var(--o); animation: pr-press 520ms steps(4, end) both; animation-delay: calc(var(--i) * 300ms + 200ms); }
@keyframes pr-press { 0% { opacity: 0; transform: scale(1.3); } 60% { opacity: var(--o); transform: scale(.96); } 100% { opacity: var(--o); transform: scale(1); } }
.mv.write { stroke-dasharray: 1; stroke-dashoffset: 0; animation: pr-write 2600ms cubic-bezier(.45, .05, .25, 1) both; }
@keyframes pr-write { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.mv.bob { animation: pr-bob 9s ease-in-out infinite; animation-delay: calc(var(--i) * -460ms); }
@keyframes pr-bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .mvart *, .mvart.play * { animation: none !important; } }
@media (max-width: 640px) { .mv.dr:nth-of-type(2n) { display: none; } }
/* typodojo Studio. Shell layout plus the engine's step components, on the shared tokens. */
:root { --rail: 264px; --bar: 60px; --foot: 76px; }
html { scroll-padding-top: calc(var(--bar) + 16px); }
body { min-height: 100%; }

/* Top bar */
.stop { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: var(--bar); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 0 var(--gutter); background: var(--paper); border-bottom: 1px solid var(--line); }
.stepbtn { display: none; justify-self: center; align-items: center; gap: 8px; min-height: var(--tap); border: 1px solid var(--line-2); border-radius: var(--r-pill); background: transparent; padding: 0 16px; cursor: pointer; font-size: var(--t-14); max-width: 100%; min-width: 0; }
.stepbtn span { color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stepbtn b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.stools { display: flex; align-items: center; gap: 10px; justify-self: end; }

/* Shell */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); align-items: start; }
.rail { position: sticky; top: calc(var(--bar) + env(safe-area-inset-top, 0px)); height: calc(100dvh - var(--bar) - env(safe-area-inset-top, 0px)); overflow-y: auto; border-right: 1px solid var(--line); padding: 24px 16px calc(var(--foot) + 16px) var(--gutter); display: flex; flex-direction: column; gap: 22px; background: var(--paper); overscroll-behavior: contain; }
.railhead .label { margin-bottom: 4px; }
.railname { font-size: var(--t-24); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.phase { display: grid; gap: 2px; }
.phase h2 { font-size: var(--t-12); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.phase ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rstep { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) 14px; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--r-s); background: transparent; cursor: pointer; text-align: left; font-size: var(--t-14); color: var(--ink); transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease); }
.rstep .i { font-size: var(--t-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rstep .d { width: 14px; height: 14px; }
/* Focus by brightness: the current step at full strength, finished steps faded, the rest in between. */
.rstep.done { opacity: var(--dim); }
.rstep.next { opacity: var(--dim-soft); }
.rstep[aria-current=step] { opacity: 1; background: var(--wash); font-weight: 600; }
.rail.finish .rstep { opacity: 1; }
@media (hover: hover) { .rstep:hover { opacity: 1; background: var(--wash); } }
.scrim { display: none; }
@media (max-width: 1080px), (pointer: coarse) { .rstep { min-height: 44px; } .phase ol { gap: 4px; } }

/* Main column */
main { min-width: 0; padding: clamp(24px, 5vh, 56px) var(--gutter) calc(var(--foot) + 64px); max-width: 1180px; }
.step { display: none; }
.step.on { display: block; animation: stepIn var(--dur) var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.narrow { max-width: 760px; }
.step h1 { font-size: var(--t-48); line-height: 1.06; letter-spacing: -0.035em; margin: 0 0 14px; }
.step h3 { font-size: var(--t-15); font-weight: 600; margin: 28px 0 10px; letter-spacing: -0.01em; }
.sub { font-size: var(--t-17); line-height: 1.55; color: var(--ink-2); margin: 0 0 32px; max-width: 64ch; }
.kicker { font-size: var(--t-13); color: var(--ink-3); margin: 0 0 12px; letter-spacing: 0.02em; }
.note { font-size: var(--t-14); color: var(--ink-2); line-height: 1.55; margin: 12px 0 0; max-width: 72ch; }
.note b { color: var(--ink); }
.fit { margin-top: 20px; font-size: var(--t-15); color: var(--ink-2); line-height: 1.5; }
.fit b { color: var(--ink); font-weight: 600; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.two > * { min-width: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.toolbar .label { margin: 0 4px 0 10px; }
.inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; font-size: var(--t-14); color: var(--ink-2); }
.inline label { display: flex; gap: 8px; align-items: center; }

/* Bottom bar */
.nav { position: fixed; left: var(--rail); right: 0; bottom: 0; z-index: 15; min-height: var(--foot); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--paper); border-top: 1px solid var(--line); }
.sofar { font-size: var(--t-13); color: var(--ink-2); line-height: 1.45; min-width: 0; }
.sofar b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.btns { display: flex; gap: 10px; flex: none; }
.btns .btn { min-width: 96px; }

/* 2 style guides */
.guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.gcard { text-align: left; border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px; background: transparent; cursor: pointer; min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; transition: border-color var(--dur) var(--ease); min-width: 0; }
.gcard[aria-pressed=true] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
@media (hover: hover) { .gcard:hover { border-color: var(--ink); } }
.gcard .spec { font-size: 40px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.gcard b { font-weight: 600; display: block; }
.gcard small { color: var(--ink-2); font-size: var(--t-13); line-height: 1.4; display: block; margin-top: 2px; }
.gdetail { border-top: 1px solid var(--ink); padding: 24px 0 0; margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; }
.gdetail .spec { font-size: clamp(64px, 10vw, 120px); line-height: 1; }
.gdetail p { margin: 0 0 10px; line-height: 1.55; font-size: var(--t-15); color: var(--ink-2); }
.gdetail p b { color: var(--ink); }

/* 4 lines */
.diagram { border: 1px solid var(--line); border-radius: var(--r-m); padding: 8px; }
.diagram svg { display: block; width: 100%; height: auto; }

/* 5 draw */
.drawwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.drawwrap > * { min-width: 0; }
.canvasbox { border: 1px solid var(--line-2); border-radius: var(--r-m); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: var(--paper); }
.canvasbox svg { display: block; width: 100%; height: min(62vh, 640px); cursor: crosshair; touch-action: none; }
@media (pointer: coarse) { .canvasbox svg { cursor: default; } }
.strip { display: flex; gap: 6px; overflow-x: auto; padding: 12px 2px 6px; scroll-snap-type: x proximity; }
.strip .tile { flex: 0 0 48px; aspect-ratio: auto; height: 56px; scroll-snap-align: start; }

/* 6 drawings */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.work > * { min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; max-height: calc(100dvh - 400px); min-height: 280px; overflow-y: auto; padding: 2px; align-content: start; }
.gh { grid-column: 1 / -1; font-size: var(--t-12); color: var(--ink-3); margin: 12px 0 2px; letter-spacing: 0.04em; text-transform: uppercase; }
.gh:first-child { margin-top: 0; }
.tile { position: relative; aspect-ratio: 1 / 1.15; border: 1px solid var(--line); border-radius: var(--r-s); background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: border-color var(--dur) var(--ease); }
@media (hover: hover) { .tile:hover { border-color: var(--ink); } }
.tile.built { border-style: dashed; border-color: var(--ink-3); }
.tile.waiting { border-style: dashed; }
.tile.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tile .ch { font-size: 21px; color: var(--ink-3); }
.tile svg { width: 80%; height: 80%; }
.tile .tag { position: absolute; left: 6px; top: 4px; font-size: 10px; color: var(--ink-3); }
.tile .flag { position: absolute; right: 6px; top: 3px; font-size: 12px; font-weight: 700; }
.legend { font-size: var(--t-13); color: var(--ink-3); margin: 10px 0 0; }
.panel { border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px; position: sticky; top: calc(var(--bar) + 16px); max-height: calc(100dvh - var(--bar) - var(--foot) - 32px); overflow-y: auto; }
.panel h2 { font-size: var(--t-24); margin: 0; }
.panel .meta { font-size: var(--t-13); color: var(--ink-3); margin: 4px 0 12px; font-variant-numeric: tabular-nums; }
.panel .big { border: 1px solid var(--line); border-radius: var(--r-s); margin-bottom: 14px; }
.panel .big svg { display: block; width: 100%; height: 230px; }
.row2 { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
textarea.code { width: 100%; min-height: 110px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: transparent; padding: 10px; font-size: var(--t-13); }
.parts button { font-size: 20px; }
.unmatched { border: 1px solid var(--ink); border-radius: var(--r-m); padding: 12px 14px; margin: 0 0 12px; font-size: var(--t-14); }
.unmatched .u { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.unmatched input { width: 70px; border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 6px 8px; background: transparent; }

/* 7 check */
.stats { display: flex; gap: 40px; flex-wrap: wrap; margin: 0 0 24px; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
.stats div { font-size: var(--t-13); color: var(--ink-2); }
.stats b { display: block; font-size: var(--t-48); font-weight: 600; color: var(--ink); letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.issues { display: grid; gap: 6px; }
.issue { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-m); }
.issue .g { font-size: 26px; text-align: center; }
.issue .g svg { width: 40px; height: 46px; display: block; }
.issue p { margin: 0; font-size: var(--t-15); line-height: 1.4; }
.issue small { color: var(--ink-3); font-size: var(--t-13); }

/* 8 unicode */
.uwrap { max-height: calc(100dvh - 400px); min-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-m); }
.utable { width: 100%; border-collapse: collapse; font-size: var(--t-14); }
.utable th { text-align: left; font-weight: 600; font-size: var(--t-13); padding: 10px 12px; border-bottom: 1px solid var(--ink); position: sticky; top: 0; background: var(--paper); z-index: 1; white-space: nowrap; }
.utable td { padding: 6px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.utable tr:last-child td { border-bottom: 0; }
.utable .c { font-size: 22px; width: 50px; text-align: center; }
.utable input { border: 1px solid transparent; border-radius: 6px; padding: 5px 7px; background: transparent; width: 100%; min-width: 90px; font-variant-numeric: tabular-nums; }
.utable input:focus { border-color: var(--ink); outline: none; }
.utable input.bad { border-color: var(--ink); border-style: dashed; }
@media (hover: hover) { .utable input:hover { border-color: var(--line-2); } }
.utable .st { color: var(--ink-3); white-space: nowrap; }
.search { border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 0 16px; min-height: 40px; background: transparent; min-width: 0; width: 260px; max-width: 100%; }

/* 9 to 11 spacing, kerning, features */
.preview { font-size: clamp(36px, 6vw, 64px); line-height: 1.25; word-break: break-word; font-kerning: normal; padding: 20px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin: 0 0 24px; min-height: 110px; }
.pairs { display: grid; gap: 8px; margin-top: 12px; max-height: 42vh; overflow-y: auto; }
.pair { display: grid; grid-template-columns: 88px minmax(0, 1fr) 48px auto; gap: 12px; align-items: center; }
.pair .ps { font-size: 36px; line-height: 1; font-kerning: normal; }
.pair output { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--t-14); }
.addpair { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.addpair input { width: 96px; min-height: 40px; border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 0 14px; background: transparent; text-align: center; font-size: var(--t-17); }
.xrows { display: grid; gap: 8px; margin-top: 12px; }
.xrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-m); }
.xrow .t { width: 58px; height: 64px; border: 1px solid var(--line); border-radius: var(--r-s); display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 20px; }
.xrow .t svg { width: 85%; height: 85%; }
.xrow b { font-weight: 600; }
.xrow small { display: block; color: var(--ink-3); font-size: var(--t-13); margin-top: 2px; }

/* 12 to 14 family, details, try */
.famrows { display: grid; gap: 0; margin-top: 8px; border-top: 1px solid var(--ink); }
.famrow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.famrow span { font-size: var(--t-13); color: var(--ink-2); }
.famrow svg { display: block; height: 52px; width: auto; max-width: 100%; }
.svgprev svg { display: block; width: 100%; height: auto; max-height: 140px; }
.para { font-size: 28px; line-height: normal; margin: 0 0 12px; max-width: 640px; }
.trybox { width: 100%; min-height: 24vh; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); background: transparent; resize: vertical; outline: none; line-height: 1.2; font-kerning: normal; padding: 16px 0; }
.missing { font-size: var(--t-14); color: var(--ink-2); margin: 8px 0 0; }
.dl { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.summary { font-size: var(--t-15); line-height: 1.7; color: var(--ink-2); margin: 0 0 16px; }
.summary b { color: var(--ink); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.drop { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: color-mix(in srgb, var(--paper) 90%, transparent); font-size: var(--t-32); font-weight: 600; z-index: 50; outline: 2px dashed var(--ink); outline-offset: -16px; }
.drop.on { display: flex; }

/* Tablet and below: the rail becomes a sheet opened from the step button. */
@media (max-width: 1080px) {
  :root { --rail: 0px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .stepbtn { display: inline-flex; }
  .rail { position: fixed; z-index: 40; top: calc(var(--bar) + env(safe-area-inset-top, 0px)); left: 0; bottom: 0; height: auto; width: min(320px, 86vw); border-right: 1px solid var(--ink); transform: translateX(-100%); visibility: hidden; transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .rail.open { transform: none; visibility: visible; transition: transform var(--dur) var(--ease); }
  .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: var(--paper); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
  .scrim.on { opacity: 0.7; pointer-events: auto; }
  .work, .drawwrap { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; max-height: none; }
}
@media (max-width: 760px) {
  :root { --bar: 56px; --foot: 68px; }
  .two, .gdetail { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .stop { gap: 10px; }
  .stop .lockup .lsub, .stools .home { display: none; }
  .stepbtn span { display: none; }
  .grid, .uwrap { max-height: none; }
  .famrow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sofar { font-size: var(--t-12); }
  .btns .btn { min-width: 0; padding: 0 16px; }
  .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcard { padding: 14px; min-height: 140px; }
  .gcard .spec { font-size: 32px; }
  .pair { grid-template-columns: 64px minmax(0, 1fr) 40px auto; gap: 8px; }
  .pair .ps { font-size: 28px; }
}
@media (max-width: 480px) {
  .stools .theme { display: none; }
  .rail .theme { display: inline-flex; }
  .sofar br + * , .sofar { max-width: 55vw; }
}
.rail .theme { display: none; }
@media (max-width: 480px) { .rail .theme { display: inline-flex; align-self: flex-start; } }
/* Short landscape screens: slimmer bars, room for the drawing surface. */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --bar: 48px; --foot: 56px; }
  .canvasbox svg { height: calc(100dvh - var(--bar) - var(--foot) - 40px); }
  main { padding-top: 16px; }
  .step h1 { font-size: 28px; }
  .sub { margin-bottom: 16px; }
}

/* ---------- Modes ---------- */
.modebtn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: transparent; cursor: pointer; font-size: var(--t-13); white-space: nowrap; }
.modebtn b { font-weight: 600; }
.modebtn span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .modebtn:hover { border-color: var(--ink); } }
.railmode { display: grid; gap: 2px; text-align: left; margin-top: 10px; width: 100%; min-height: var(--tap); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: transparent; cursor: pointer; font-size: var(--t-13); }
.railmode b { font-weight: 600; }
.railmode span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .railmode:hover { border-color: var(--ink); } }
.pick { display: none; }
.picking .pick { display: block; animation: stepIn var(--dur) var(--ease); }
.picking .step, .picking .step.on { display: none; }
.picking .nav { display: none; }
.pick h1 { font-size: var(--t-48); line-height: 1.06; letter-spacing: -0.035em; margin: 0 0 14px; }
.mlist { display: grid; border-top: 1px solid var(--ink); margin: 0 0 20px; }
.mrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 5fr) auto; gap: 8px 28px; align-items: baseline; width: 100%; text-align: left; padding: 22px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease); min-width: 0; }
.mrow > * { min-width: 0; }
.mrow .mn { font-size: var(--t-32); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.mrow .mt { font-size: var(--t-15); font-weight: 600; font-variant-numeric: tabular-nums; }
.mrow .mw { font-size: var(--t-15); color: var(--ink-2); line-height: 1.5; }
.mrow .mgo { font-size: var(--t-13); color: var(--ink-3); white-space: nowrap; }
.mrow[aria-pressed=true] .mgo { color: var(--ink); font-weight: 600; }
/* Focus by brightness: the row under the pointer or focus stays full, the rest fade. */
@media (hover: hover) { .mlist:hover .mrow:not(:hover) { opacity: var(--dim-soft); } .mrow:hover { background: var(--wash); } }
.mlist:focus-within .mrow:not(:focus-visible) { opacity: var(--dim-soft); }
.mlist:not(:focus-within) .mrow { opacity: 1; }
@media (max-width: 760px) { .mrow { grid-template-columns: minmax(0, 1fr) auto; } .mrow .mt { grid-row: 2; } .mrow .mw { grid-column: 1 / -1; } .mrow .mgo { grid-column: 2; grid-row: 1; } }
.navinfo { display: grid; gap: 2px; min-width: 0; }
.eta { font-size: var(--t-13); font-weight: 600; font-variant-numeric: tabular-nums; }
.autobar { height: 2px; margin-top: 8px; background: var(--line); position: relative; overflow: hidden; border-radius: 1px; }
.autobar::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.autobar.going::after { transform: scaleX(1); transition: transform 2400ms linear; }
@media (prefers-reduced-motion: reduce) { .autobar.going::after { transition: none; opacity: 0.5; } }
.autowrap { margin-top: 12px; max-width: 520px; }

/* ---------- Foundry: project panel and proof sheet ---------- */
.proj { display: grid; border-top: 1px solid var(--line); padding-top: 18px; gap: 12px; }
.proj .vsave, .proj .vlist { display: none; }
.is-foundry .proj .vsave, .is-foundry .proj .vlist { display: grid; }
.projbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.proj h2 { font-size: var(--t-12); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.proj .btn { justify-self: start; }
.vsave { display: grid; gap: 8px; }
.vsave .text { font-size: var(--t-14); padding: 6px 0 8px; }
.vsave .btn { justify-self: start; }
.vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.vlist li { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t-13); }
.vlist .vn { font-weight: 600; overflow-wrap: anywhere; }
.vlist .vd { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.vlist .va { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.vlist .vnote { color: var(--ink-3); border-bottom: 0; }
.proof { width: min(1100px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--ink); border-radius: var(--r-m); background: var(--paper); color: var(--ink); }
.proof::backdrop { background: var(--paper); opacity: 0.8; }
.proof-in { padding: clamp(20px, 4vw, 40px); display: grid; gap: 16px; }
.proof-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.proof-head h2 { font-size: var(--t-48); letter-spacing: -0.03em; line-height: 1.05; overflow-wrap: anywhere; }
.proof .kicker { margin-bottom: 6px; }
.pwater { display: grid; border-top: 1px solid var(--ink); }
.pw { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.pw .ps { font-size: var(--t-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pw .inFont { white-space: nowrap; line-height: 1.15; }
.proof h3 { font-size: var(--t-15); margin: 12px 0 0; }
.pchars { font-size: 36px; line-height: 1.4; margin: 0; overflow-wrap: anywhere; }
.ppara { font-size: 22px; line-height: 1.45; margin: 0; max-width: 60ch; }
@media (max-width: 760px) { .modebtn span { display: none; } }
/* Before a mode is chosen, the picker stands alone. */
.no-mode .rail, .no-mode .modebtn, .no-mode .stepbtn, .no-mode .scrim { display: none !important; }
.no-mode .shell { grid-template-columns: minmax(0, 1fr); }
.no-mode main { margin-inline: auto; }
/* Tablet and phone top bar: lockup, step, mode. Theme moves into the step sheet; home stays on the lockup. */
@media (max-width: 1080px) {
  .stools .theme, .stools .home, .modebtn span { display: none; }
  .rail .theme { display: inline-flex; align-self: flex-start; }
  .stepbtn { overflow: hidden; }
  .stepbtn span { flex: none; }
}

/* Brand type in the studio: prompts and big figures in Typo Display. */
.step h1, .pick h1, .mrow .mn, .stats b { font-family: var(--display); font-weight: 400; text-transform: lowercase; letter-spacing: -0.005em; font-synthesis: none; }
.step h1, .pick h1 { font-size: clamp(38px, 5.6vw, 60px); line-height: 1.02; }
.mrow .mn { font-size: clamp(32px, 4vw, 44px); line-height: 1; }

/* The drop fills with ink as the font gets drawn. */
#markFill path { stroke-dasharray: 1; transition: stroke-dashoffset 600ms var(--ease); }
@media (prefers-reduced-motion: reduce) { #markFill path { transition: none; } }

/* Belts in the picker, and Mono Casual where characters line up. */
.mrow .mt { display: grid; gap: 2px; font-weight: 400; color: var(--ink-2); }
.mrow .mt b { color: var(--ink); font-weight: 600; }
.pick .say { margin: 0 0 28px; }
.dmeta, .panel .meta, .utable input, .utable .st, .eta, .modebtn span, .railmode span, .pw .ps, .rstep .i { font-variation-settings: "MONO" 1; }
/* Phone: the drop alone links home (and still fills as you draw), so the step name has room. */
@media (max-width: 480px) { .stop .lockup .word { display: none; } .stepbtn { padding: 0 14px; } }
.motion-sheet .mplay { margin-top: 4px; }

/* ---------- 5 draw: the floating toolbar ----------
   One pill, like a sticker: a paper face, a die-cut edge and a soft shadow. Groups are spaced, not boxed; a hover is a
   soft neutral spotlight, never a filled button. Trays open above the pill and never cover it. */
.panel.dtb-host { position: sticky; z-index: 12; top: auto; bottom: calc(var(--foot) + 14px + env(safe-area-inset-bottom, 0px)); max-height: none; overflow: visible; border: 0; padding: 0; margin: 14px auto 4px; width: max-content; max-width: 100%; display: grid; justify-items: center; gap: 10px; background: none; }
.dtb { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 26px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-2); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line), 0 14px 30px -14px color-mix(in srgb, var(--ink) 38%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--ink) 16%, transparent); max-width: 100%; }
.dtb-g { display: flex; align-items: center; gap: 2px; padding: 0 6px; }
.dtb-g + .dtb-g { border-left: 1px solid var(--line); }
.dtb-b { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 38px; padding: 0 9px; border: 0; border-radius: 19px; background: transparent; color: var(--ink-2); cursor: pointer; font-size: var(--t-13); font-weight: 500; touch-action: manipulation; transition: color var(--dur) var(--ease); }
.dtb-b::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at center, color-mix(in srgb, var(--ink) 9%, transparent) 0, transparent 70%); opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; }
@media (hover: hover) { .dtb-b:hover { color: var(--ink); } .dtb-b:hover::before { opacity: 1; } }
.dtb-b:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.dtb-b[disabled] { opacity: .35; cursor: default; }
.dtb-i { width: 18px; height: 18px; flex: none; }
.dtb-tool[aria-pressed=true], .dtb-b.on { color: var(--ink); }
.dtb-tool[aria-pressed=true]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 14px; height: 2px; margin-left: -7px; border-radius: 1px; background: var(--ink); }
.dtb-tool[aria-pressed=true]::before, .dtb-b.on::before { opacity: 1; }
.dtb #dTools { display: flex; gap: 2px; margin: 0; }
.dtb .dhead { display: grid; grid-template-columns: auto minmax(64px, auto) auto; align-items: center; gap: 2px; margin: 0; }
.dtb .dch { font-size: 26px; font-weight: 600; text-align: center; line-height: 1; }
.dtb .dmeta { display: block; text-align: center; font-size: 10px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.dtb-dot { display: inline-block; width: var(--d); height: var(--d); border-radius: 50%; background: currentColor; }
.dtb-sizeb { min-width: 64px; font-variant-numeric: tabular-nums; }
.dtb-tray { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); max-height: min(60vh, 520px); overflow-y: auto; width: min(340px, calc(100vw - 32px)); padding: 12px 16px 16px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line-2); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line), 0 18px 40px -18px color-mix(in srgb, var(--ink) 40%, transparent); display: grid; gap: 12px; }
.dtb-tray-h { display: flex; align-items: center; justify-content: space-between; }
.dtb-tray-h b { font-size: var(--t-13); font-weight: 600; letter-spacing: .02em; }
.dtb-x { display: grid; place-items: center; width: 30px; height: 30px; margin: -4px -8px -4px 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.dtb-x svg { width: 16px; height: 16px; }
@media (hover: hover) { .dtb-x:hover { background: radial-gradient(circle, color-mix(in srgb, var(--ink) 9%, transparent) 0, transparent 70%); color: var(--ink); } }
.dtb-tray .slider { margin: 0; }
.dtb-tray #dSliders { display: grid; gap: 14px; }
.dtb-tray #dOpts { display: grid; gap: 8px; }
.dtb-tray .opt { padding: 10px 12px; }
.dtb-tray .note { margin: 0; font-size: var(--t-13); color: var(--ink-2); }
.dtb-clear2 { justify-self: start; display: none; }
.dtb-note { margin: 0; max-width: min(560px, calc(100vw - 32px)); padding: 6px 14px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); font-size: var(--t-13); color: var(--ink-2); text-align: center; }
.dtb-note:empty { display: none; }
@media (max-width: 1240px) { .dtb .dtb-l { display: none; } .dtb-sizeb .dtb-l { display: inline; } }
@media (max-width: 640px) {
  .panel.dtb-host { width: 100%; }
  .dtb { flex-wrap: wrap; justify-content: center; row-gap: 4px; padding: 6px; border-radius: 22px; }
  .dtb-char { order: -1; flex: 1 0 100%; justify-content: center; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
  .dtb-g + .dtb-g { border-left: 0; }
  .dtb-g { padding: 0 1px; gap: 0; }
  .dtb { gap: 2px; }
  .dtb-b { min-width: 36px; height: 36px; padding: 0 6px; }
  .dtb #dTools { gap: 0; }
  .dtb-edit #dClear { display: none; }
  .dtb-clear2 { display: inline-flex; }
  .dtb-sizeb .dtb-l { display: none; } .dtb-sizeb { min-width: 38px; }
  .dtb .dch { font-size: 22px; }
}

/* The rail can be hidden on wide screens; the step button in the bar brings it back. */
.railtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.railhide { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 6px; margin-right: -6px; border: 0; border-radius: 16px; background: transparent; color: var(--ink-3); font-size: var(--t-12); cursor: pointer; }
.railhide svg { width: 16px; height: 16px; }
@media (hover: hover) { .railhide:hover { color: var(--ink); background: radial-gradient(circle at center, color-mix(in srgb, var(--ink) 8%, transparent) 0, transparent 72%); } }
@media (max-width: 1080px) { .railhide { display: none; } }
@media (min-width: 1081px) {
  body.rail-hidden { --rail: 0px; }
  body.rail-hidden .shell { grid-template-columns: minmax(0, 1fr); }
  body.rail-hidden .rail { display: none; }
  body.rail-hidden main { margin: 0 auto; }
}
@media (pointer: coarse) {
  .dtb-b, .dtb-x { min-width: 44px; height: 44px; }
  .dtb-g, .dtb #dTools, .dtb .dhead { gap: 4px; }
  .dtb { gap: 6px; }
}
@media (pointer: coarse) and (max-width: 640px) { .dtb-b { min-width: 44px; height: 44px; padding: 0 8px; } .dtb-g { gap: 4px; } .dtb #dTools { gap: 4px; } }

/* ---------- The bottom bar, docked: one rounded bar like the toolbar, the progress ring and counts on the left ---------- */
:root { --foot: 92px; }
@media (max-width: 760px) { :root { --foot: 84px; } }
@media (max-height: 520px) and (orientation: landscape) { :root { --foot: 70px; } }
html, body { overscroll-behavior-y: none; }   /* no rubber band: the bars stay put */
.nav { left: calc(var(--rail) + 12px); right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); min-height: 0; padding: 10px 10px 10px 14px; border: 1px solid var(--line-2); border-radius: 24px;
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line), 0 14px 34px -16px color-mix(in srgb, var(--ink) 40%, transparent); }
body.rail-hidden .nav { left: 12px; }
.navinfo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.navring { flex: none; width: 40px; height: 40px; transform: rotate(-90deg); }
.navring circle { fill: none; stroke-width: 3.2; }
.navring .nr-t { stroke: var(--line); }
.navring .nr-f { stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .6s var(--ease); }
.navtext { display: grid; gap: 1px; min-width: 0; }
.navtext .eta { font-size: var(--t-13); }
.navtext .sofar { font-size: var(--t-12); line-height: 1.4; color: var(--ink-3); }
.navtext .sofar b { color: var(--ink-2); }
@media (max-width: 760px) { .navring { width: 34px; height: 34px; } .navinfo { gap: 8px; } .nav { padding: 8px 8px 8px 10px; left: 8px; right: 8px; } .navtext .eta { font-size: var(--t-12); } }
@media (max-width: 480px) { .navtext .sofar { display: none; } }

/* ---------- 5 draw: the frame is the point ----------
   A reel: the frame you are drawing in, larger, with the letters before and after it out of focus at either side and a
   row of sprocket holes above and below. Nothing in the side frames is meant to be read. */
.step:has(#canvasBox) h1 { font-size: clamp(32px, 4vw, 48px); }
.step:has(#canvasBox) .sub { font-size: var(--t-15); margin-bottom: 18px; max-width: 640px; }
.reel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7fr) minmax(0, 1fr); gap: 14px; align-items: stretch; padding: 22px 0; margin: 0 calc(-1 * var(--gutter)); overflow: hidden; }
.reel::before, .reel::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: var(--line-2); opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='10'%3E%3Crect x='6' y='0' width='14' height='10' rx='3'/%3E%3C/svg%3E") 0 0 / 26px 10px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='10'%3E%3Crect x='6' y='0' width='14' height='10' rx='3'/%3E%3C/svg%3E") 0 0 / 26px 10px repeat-x; }
.reel::before { top: 4px; } .reel::after { bottom: 4px; }
.reel-f { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); overflow: hidden; display: grid; opacity: .55; transition: opacity var(--dur) var(--ease); }
.reel-f { position: relative; }
.reel-g { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; filter: blur(9px); opacity: .32; color: var(--ink); }
.reel-g svg { width: 100%; height: 100%; }
.reel-g .ch { font-size: clamp(56px, 7vw, 130px); line-height: 1; color: var(--ink-3); }
.reel-prev .reel-g { justify-items: end; } .reel-next .reel-g { justify-items: start; }
.reel-g .tag { display: none; }
.reel .canvasbox { box-shadow: 0 0 0 1px var(--line-2), 0 18px 40px -24px color-mix(in srgb, var(--ink) 35%, transparent); }
.canvasbox svg { height: min(72vh, 780px); transform: scale(var(--zoom, 1)); transform-origin: 50% 50%; transition: transform .35s var(--ease); }
@media (prefers-reduced-motion: reduce) { .canvasbox svg { transition: none; } }
@media (max-width: 760px) { .reel { grid-template-columns: minmax(0, 1fr); padding: 16px 0; margin: 0; } .reel-f { display: none; } }
/* while the pen is down, everything but the frame steps back */
.rail, .stop, .strip, .styleBar, .step:has(#canvasBox) > .narrow, .lesson, .reel-f { transition: opacity .4s var(--ease); }
body.inking .rail, body.inking .stop, body.inking .strip, body.inking .styleBar, body.inking .step:has(#canvasBox) > .narrow { opacity: .3; }
body.inking .reel-f { opacity: .25; }
/* the view tray */
.dtb-view { display: grid; gap: 12px; }
.dtb-zrow { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 18px; }
.dtb-z { flex: 1; min-height: 34px; border: 0; border-radius: 14px; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-13); font-variant-numeric: tabular-nums; cursor: pointer; }
.dtb-z[aria-pressed=true] { background: var(--ink); color: var(--paper); }
@media (pointer: coarse) { .dtb-z { min-height: 44px; } }
.dtb-sub { margin: 0; font-size: var(--t-12); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.dtb-sizes { list-style: none; margin: 0; padding: 0; display: grid; }
.dtb-sizes li { display: grid; grid-template-columns: 52px 76px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); overflow: hidden; }
.dtb-sz { font-size: var(--t-12); color: var(--ink-3); }
.dtb-sn { font-size: var(--t-12); color: var(--ink-2); }
.dtb-sp { white-space: nowrap; overflow: hidden; text-overflow: clip; line-height: 1.1; }
.dtb-lesson summary { cursor: pointer; font-size: var(--t-13); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.dtb-lesson p { margin: 6px 0 0; font-size: var(--t-13); color: var(--ink-2); line-height: 1.5; }
.dtb-tray[data-tray-panel="view"] { width: min(420px, calc(100vw - 32px)); }
.reel-f { align-items: center; }
@media (max-width: 760px) { .canvasbox svg { height: min(60vh, 520px); } }
@media (max-height: 520px) and (orientation: landscape) { .canvasbox svg { height: calc(100dvh - var(--bar) - var(--foot) - 40px); } .reel { padding: 12px 0; } }
/* nothing shows through around the docked bar: a paper fade from the screen edge up past its top */
.nav { isolation: isolate; }
.nav::after { content: ""; position: absolute; z-index: -1; left: -14px; right: -14px; top: -18px; bottom: calc(-12px - env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--paper) 62%, color-mix(in srgb, var(--paper) 0%, transparent)); pointer-events: none; }
.nav { background: var(--paper); }

/* With the steps hidden, the way back stays where the steps were: a tab at the left edge. */
.railshow { display: none; }
@media (min-width: 1081px) {
  body.rail-hidden .railshow { position: fixed; z-index: 16; left: 0; top: calc(var(--bar) + 20px); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 48px; padding: 0 2px 0 0; border: 1px solid var(--line-2); border-left: 0; border-radius: 0 24px 24px 0; background: var(--paper); color: var(--ink-2); font: inherit; font-size: var(--t-13); cursor: pointer; box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--ink) 40%, transparent); }
  body.rail-hidden .railshow svg { width: 16px; height: 16px; }
  body.rail-hidden .railshow:hover { color: var(--ink); }
  body.no-mode .railshow, body.picking .railshow { display: none; }
}
/* in the studio a new sticker says so at the top, clear of the toolbar and the bar */
.stk-new { top: calc(var(--bar) + 12px); bottom: auto; transform: translate(-50%, -12px); }
.stk-new.on { transform: translate(-50%, 0); }

/* ---------- The toolbar's face: a soft chrome, lighter than the stickers ----------
   A brushed gradient with a lit top edge and a quiet sheen, so the pill reads as an object above the page. Buttons
   take full ink for contrast; the hover spotlight and the pressed tool follow the theme. */
:root { --tb-a: #ffffff; --tb-b: #e7e6e2; --tb-hi: rgba(255, 255, 255, .95); --tb-lo: rgba(0, 0, 0, .07); --tb-sheen: rgba(255, 255, 255, .55); --tb-spot: rgba(10, 10, 10, .09); --tb-press-a: #e2e1dd; --tb-press-b: #f7f6f3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="mono"]) { --tb-a: #2b2b2a; --tb-b: #121212; --tb-hi: rgba(255, 255, 255, .16); --tb-lo: rgba(0, 0, 0, .5); --tb-sheen: rgba(255, 255, 255, .08); --tb-spot: rgba(243, 242, 238, .14); --tb-press-a: #0d0d0d; --tb-press-b: #262625; } }
:root[data-theme="dark"] { --tb-a: #2b2b2a; --tb-b: #121212; --tb-hi: rgba(255, 255, 255, .16); --tb-lo: rgba(0, 0, 0, .5); --tb-sheen: rgba(255, 255, 255, .08); --tb-spot: rgba(243, 242, 238, .14); --tb-press-a: #0d0d0d; --tb-press-b: #262625; }
:root[data-theme="mono"] { --tb-a: #4a4b49; --tb-b: #2e2f2d; --tb-hi: rgba(255, 255, 255, .2); --tb-lo: rgba(0, 0, 0, .35); --tb-sheen: rgba(255, 255, 255, .1); --tb-spot: rgba(243, 242, 238, .16); --tb-press-a: #262725; --tb-press-b: #3c3d3b; }
.dtb, .dtb-tray, .nav { background: linear-gradient(180deg, var(--tb-a) 0%, var(--tb-b) 100%); box-shadow: inset 0 1px 0 var(--tb-hi), inset 0 -1px 0 var(--tb-lo), 0 0 0 4px var(--paper), 0 0 0 5px var(--line), 0 14px 32px -14px color-mix(in srgb, #000 42%, transparent), 0 2px 6px -2px color-mix(in srgb, #000 18%, transparent); }
.dtb { position: relative; overflow: hidden; isolation: isolate; }
.dtb::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(112deg, transparent 22%, var(--tb-sheen) 38%, transparent 52%, transparent 70%, var(--tb-sheen) 80%, transparent 90%); opacity: .8; }
.dtb-b { color: var(--ink); }
.dtb-b::before { background: radial-gradient(circle at center, var(--tb-spot) 0, transparent 72%); }
.dtb-tool[aria-pressed=true], .dtb-b.on { background: linear-gradient(180deg, var(--tb-press-a), var(--tb-press-b)); box-shadow: inset 0 1px 2px var(--tb-lo), 0 1px 0 var(--tb-hi); }
.dtb-tool[aria-pressed=true]::before, .dtb-b.on::before { opacity: 0; }
.dtb-g + .dtb-g { border-left-color: color-mix(in srgb, var(--ink) 14%, transparent); }
.dtb-x::before { display: none; }
@media (hover: hover) { .dtb-x:hover { background: radial-gradient(circle, var(--tb-spot) 0, transparent 72%); } }
.reel .canvasbox { box-shadow: 0 0 0 1px var(--line-2), 0 18px 40px -24px color-mix(in srgb, #000 35%, transparent); }

/* ---------- Toolbar finishes: Standard (plain paper), Matte (brushed), Metallic (polished, the default) ---------- */
:root { --tm-1: #fdfdfc; --tm-2: #d9d8d4; --tm-3: #f4f3f0; --tm-4: #c9c8c4; --tm-sheen: rgba(255, 255, 255, .85); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="mono"]) { --tm-1: #3a3a39; --tm-2: #121212; --tm-3: #2a2a29; --tm-4: #0a0a0a; --tm-sheen: rgba(255, 255, 255, .16); } }
:root[data-theme="dark"] { --tm-1: #3a3a39; --tm-2: #121212; --tm-3: #2a2a29; --tm-4: #0a0a0a; --tm-sheen: rgba(255, 255, 255, .16); }
:root[data-theme="mono"] { --tm-1: #5c5d5a; --tm-2: #2c2d2b; --tm-3: #4a4b48; --tm-4: #252624; --tm-sheen: rgba(255, 255, 255, .18); }
:root[data-finish="metallic"] .dtb, :root[data-finish="metallic"] .dtb-tray, :root[data-finish="metallic"] .nav {
  background: linear-gradient(180deg, var(--tm-1) 0%, var(--tm-3) 38%, var(--tm-2) 52%, var(--tm-3) 74%, var(--tm-4) 100%); }
:root[data-finish="metallic"] .dtb::after { opacity: 1; background: linear-gradient(105deg, transparent 18%, var(--tm-sheen) 30%, transparent 40%, transparent 62%, var(--tm-sheen) 72%, transparent 80%); }
:root[data-finish="standard"] .dtb, :root[data-finish="standard"] .dtb-tray, :root[data-finish="standard"] .nav { background: var(--paper); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line), 0 14px 30px -14px color-mix(in srgb, #000 30%, transparent); }
:root[data-finish="standard"] .dtb::after { display: none; }
:root[data-finish="standard"] .dtb-tool[aria-pressed=true], :root[data-finish="standard"] .dtb-b.on { background: transparent; box-shadow: none; }
:root[data-finish="standard"] .dtb-tool[aria-pressed=true]::before, :root[data-finish="standard"] .dtb-b.on::before { opacity: 1; }
.dtb-prefs { display: grid; gap: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
.dtb-pref { display: grid; gap: 8px; }
.dtb-pref b { font-size: var(--t-13); }
.dtb-pref .note { margin: 0; font-size: var(--t-12); color: var(--ink-3); line-height: 1.45; }
.canvasbox[data-ink="on"] { box-shadow: 0 0 0 2px var(--ink), 0 18px 40px -24px color-mix(in srgb, #000 35%, transparent) !important; }
.canvasbox[data-ink="on"]::after { content: "Pen down"; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: var(--t-12); pointer-events: none; }
.canvasbox { position: relative; }

/* ---------- Round 27: the draw step is a workspace ----------
   One screen, no page scroll: the frame takes every pixel the bars leave, the toolbar sits under it, and the
   extras (the first-letter hint, the stroke-order lesson, the letter strip) float where nothing else is. */
:root { --tbh: 62px; }
@media (max-width: 640px) { :root { --tbh: 104px; } }
html:has(.step.on #canvasBox), html:has(.step.on #canvasBox) body { height: 100%; overflow: hidden; }
main:has(.step.on #canvasBox) { max-width: none; padding-top: 10px; padding-bottom: 0; }
.step.on:has(#canvasBox) > .narrow { display: none; }
.step.on:has(#canvasBox) .drawwrap { gap: 0; }
.step.on:has(#canvasBox) .drawwrap > div { position: relative; }
.step.on:has(#canvasBox) .reel { padding: 16px 0; }
.step.on:has(#canvasBox) .canvasbox svg { height: max(260px, calc(100dvh - var(--bar) - var(--foot) - var(--tbh) - 78px - env(safe-area-inset-bottom, 0px))); }
.step.on:has(#canvasBox) .panel.dtb-host { position: relative; bottom: auto; margin: 2px auto 0; }
.step.on:has(#canvasBox) .dtb-note { position: absolute; bottom: calc(100% + 26px); left: 50%; transform: translateX(-50%); width: max-content; pointer-events: none; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .35); }
.step.on:has(#canvasBox) .autobar { position: absolute; left: 50%; bottom: calc(var(--tbh) + 8px); width: 120px; margin: 0 0 0 -60px; height: 3px; border-radius: 2px; }
.step.on:has(#canvasBox) .autowrap { display: none; }
/* the first letter: a quiet line at the top of the frame, not a card above it */
.step.on:has(#canvasBox) .firstcard { position: absolute; z-index: 3; top: 30px; left: 50%; transform: translateX(-50%); margin: 0; display: flex; gap: 10px; padding: 8px 16px; border-radius: 999px; background: var(--paper); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .4); pointer-events: none; white-space: nowrap; transition: opacity .5s ease; }
.step.on:has(#canvasBox) .firstcard[hidden] { display: none; }
.step.on:has(#canvasBox) .firstcard .fc-art, .step.on:has(#canvasBox) .firstcard h2 { display: none; }
.step.on:has(#canvasBox) .firstcard p { font-size: var(--t-13); white-space: nowrap; }
@media (max-width: 640px) { .step.on:has(#canvasBox) .firstcard { white-space: normal; width: calc(100% - 40px); justify-content: center; text-align: center; border-radius: 18px; } .step.on:has(#canvasBox) .firstcard p { white-space: normal; } }
body.inking .firstcard { opacity: 0; }
/* the lesson: in the left frame of the reel, where the last letter blurs */
.step.on:has(#canvasBox) .lesson { position: absolute; z-index: 3; left: calc(-1 * var(--gutter)); top: 16px; width: calc((100% + 2 * var(--gutter) - 28px) / 9); margin: 0; padding: 10px 6px; grid-template-columns: 1fr; gap: 6px; background: var(--paper); justify-items: center; text-align: center; }
.step.on:has(#canvasBox) .lesson-art { width: 100%; } .step.on:has(#canvasBox) .lesson-art svg { width: 100%; height: auto; max-width: 104px; margin: 0 auto; }
.step.on:has(#canvasBox) .lesson h2, .step.on:has(#canvasBox) .lesson p:not(.lesson-k) { display: none; }
.step.on:has(#canvasBox) .lesson-k { font-size: 10px; letter-spacing: .06em; }
.step.on:has(#canvasBox) .lesson .linkish { font-size: var(--t-12); }
@media (max-width: 1080px) { .step.on:has(#canvasBox) .lesson { display: none; } }
/* the letters: tap the letter in the toolbar to see them all */
.step.on:has(#canvasBox) .strip { position: absolute; z-index: 14; left: 50%; bottom: calc(var(--tbh) + 14px); transform: translate(-50%, 8px) scale(.98); width: min(720px, calc(100% - 24px)); padding: 10px; border-radius: 20px;
  background: var(--paper); border: 1px solid var(--line-2); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.3, .5, 1), visibility 0s .25s; }
body.letters-open .step.on:has(#canvasBox) .strip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.3, .5, 1); }
.dtb .dhead > div { cursor: pointer; border-radius: 14px; padding: 2px 6px; }
@media (hover: hover) { .dtb .dhead > div:hover { background: var(--tb-spot); } }
/* the pen going down is quiet: the rest steps back slowly, a beat after the stroke starts */
.rail, .stop, .strip, .styleBar, .step:has(#canvasBox) > .narrow, .lesson, .reel-f { transition: opacity .8s var(--ease) .25s; }
body.inking .rail, body.inking .stop, body.inking .styleBar { opacity: .55; }
body.inking .reel-f { opacity: .4; }
/* the corner sticker: in the rail's corner on a wide screen, in the top bar on a narrow one */
.rail { padding-bottom: calc(var(--foot) + 76px); }
body.rail-hidden .nav { left: 80px; }
@media (max-width: 1080px) {
  .tsk { left: auto; right: calc(var(--gutter) - 4px); top: calc((var(--bar) - 52px) / 2 + env(safe-area-inset-top, 0px)); bottom: auto; }
  .tsk .tsk-menu { left: auto; right: 0; top: 60px; bottom: auto; transform-origin: calc(100% - 24px) -30px; }
  .stools { margin-right: 52px; }
}
.stools .home { display: none; }
.step.on:has(#canvasBox) .strip { flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; max-height: calc(100dvh - var(--bar) - var(--foot) - var(--tbh) - 60px); width: min(820px, calc(100% - 24px)); gap: 4px; scroll-snap-type: none; }
.step.on:has(#canvasBox) .strip .tile { flex: 0 0 40px; height: 46px; }
/* Studio, round 14. */
.inkdog { display: block; width: 100%; height: auto; color: var(--ink); overflow: visible; }
.say-typo .inkdog { width: 64px; }
.band { width: 100%; overflow: hidden; line-height: 0; color: var(--ink); }
.band-art { display: block; width: 100%; height: 100%; }

/* Launch: Typo in the ensō, for a breath, in the theme you chose */
.launch { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--paper); color: var(--ink); transition: opacity 400ms var(--ease); }
.launch.out { opacity: 0; pointer-events: none; }
.launch-in { display: grid; justify-items: center; gap: 14px; padding: 24px; text-align: center; }
.launch .inkdog { width: min(220px, 52vw); color: var(--ink); }
.launch-word { margin: 0; font-family: var(--display); font-size: 30px; color: var(--ink); }
.launch-line { margin: 0; font-size: var(--t-14); color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .launch { transition: none; } }

/* The save pill and its popover */
.savepill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-13); cursor: pointer; white-space: nowrap; flex: none; }
.savepill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex: none; }
.savepill[data-state="saving"] .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.savepill[data-state="fail"] { color: var(--ink); border-color: var(--ink); font-weight: 600; }
.savepill[data-state="fail"] .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (hover: hover) { .savepill:hover { color: var(--ink); border-color: var(--ink); } }
.savepill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wherepop { position: fixed; z-index: 70; box-sizing: border-box; padding: 18px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 16px; box-shadow: 0 18px 44px rgba(0,0,0,.16); display: grid; gap: 12px; }
.wherepop[hidden] { display: none; }
.wherepop h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 22px; text-transform: lowercase; }
.wp-now { margin: 0; font-size: var(--t-14); color: var(--ink); }
.wp-list { margin: 0; padding: 0; list-style: none; }
.wp-list li { display: grid; gap: 1px; padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--t-13); }
.wp-list span { color: var(--ink-2); }
.wp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-links { margin: 0; display: flex; gap: 18px; font-size: var(--t-13); }
.wp-links a { color: var(--ink); min-height: 32px; display: inline-flex; align-items: center; }
@media (max-width: 1080px) { .savepill { padding: 0; width: 36px; justify-content: center; } .savepill .st { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tchat-hush.inbar { display: none; } }

/* Belts by brush weight in the picker */
.mrow { position: relative; }
.mbelt { grid-column: 1 / -1; display: block; height: 28px; margin-top: 4px; color: var(--ink); }
.mbelt svg { display: block; width: min(420px, 100%); height: 28px; }

/* The first letter, on practice squares */
.firstcard { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px 18px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-m); }
.firstcard[hidden] { display: none; }
.firstcard .masu-art { width: 120px; height: auto; color: var(--ink); opacity: .6; }
.firstcard h2 { margin: 0 0 4px; font-family: var(--display); font-weight: 400; font-size: 26px; text-transform: lowercase; }
.firstcard p { margin: 0; color: var(--ink-2); font-size: var(--t-14); }
.firstcard b { color: var(--ink); }
@media (max-width: 520px) { .firstcard { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; } .firstcard .masu-art { width: 72px; } }

/* The stroke-order lesson */
.lesson { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-m); }
.lesson[hidden] { display: none; }
.lesson-art svg { display: block; width: 120px; height: 120px; color: var(--ink); }
.lesson-k { margin: 0; font-size: var(--t-12); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lesson h2 { margin: 2px 0 4px; font-family: var(--display); font-weight: 400; font-size: 22px; text-transform: lowercase; }
.lesson p { margin: 0 0 4px; font-size: var(--t-14); color: var(--ink-2); }
#lessonHide { min-height: 44px; display: inline-flex; align-items: center; }

/* Building: ink rings, a quiet wait */
.building { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: color-mix(in srgb, var(--paper) 94%, transparent); color: var(--ink); }
.building[hidden] { display: none; }
.building-in { display: grid; justify-items: center; gap: 16px; }
.building .rings-art { width: min(200px, 50vw); height: auto; color: var(--ink); }
.building p { margin: 0; font-size: var(--t-15); color: var(--ink-2); }

/* Download: the drip, the publish switch, and the font-ready sheet */
.sheet14 { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); box-sizing: border-box; padding: 0; border: 1.5px solid var(--ink); border-radius: 20px; background: var(--paper); color: var(--ink); overflow: auto; }
.sheet14::backdrop { background: rgba(0,0,0,.45); }
.sheet14 .band-drip { height: 110px; }
.sheet14-in { padding: 24px 26px 26px; display: grid; gap: 14px; }
.sheet14 h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(32px, 6vw, 44px); line-height: 1; text-transform: lowercase; }
.lede14 { margin: 0; font-size: var(--t-17); color: var(--ink-2); }
.ready-steps { margin: 0; padding-left: 20px; font-size: var(--t-15); color: var(--ink); display: grid; gap: 4px; }
.ready-pub { margin: 0; font-size: var(--t-14); color: var(--ink-2); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); }
.sheet14.belt { width: min(720px, calc(100vw - 24px)); }
.belt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.belt-art { padding: 24px; }
.belt-art .loop-art { width: 100%; height: auto; color: var(--ink); }
.belt-k { margin: 0; font-size: var(--t-12); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 560px) { .belt-grid { grid-template-columns: minmax(0, 1fr); } .belt-art { padding: 20px 60px 0; } }
.loop-art .loop { stroke-dasharray: none; }
@media (max-width: 640px) { .stop { gap: 8px; } .stools { gap: 6px; } }
.belt-rank { width: min(260px, 80%); color: var(--ink); }
.belt-rank .rbelt { width: 100%; height: auto; display: block; overflow: visible; }
.mrow.mzen { border-bottom-style: dashed; }
/* Stroke-order playback */
.pb { display: grid; gap: 14px; padding: 18px 0 24px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.pb-head h3, .pb-why h4 { margin: 0; font-family: var(--display); font-weight: 400; text-transform: lowercase; font-size: var(--t-24); }
.pb-head .note { margin: 6px 0 0; max-width: 660px; }
.pb-ctl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 120px; gap: 14px 24px; align-items: end; transition: opacity var(--dur) var(--ease); }
.pb-ctl.off { opacity: var(--dim); }
.pb-ctl label { display: grid; gap: 8px; }
.pb-ctl input[type=range] { width: 100%; }
@media (max-width: 640px) { .pb-ctl { grid-template-columns: minmax(0, 1fr); } }
.pb-why { display: grid; gap: 10px; }
.pb-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 480px) { .pb-pair { grid-template-columns: minmax(0, 1fr); } }
.pb-pair figure { margin: 0; border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 8px; justify-items: start; }
.pb-pair figcaption { font-size: var(--t-13); color: var(--ink-3); }
.pb-art { width: 100%; height: 180px; display: grid; place-items: center; color: var(--ink); }
.pb-art svg { height: 100%; width: auto; max-width: 100%; }
/* Stickers in the studio: one on the download sheet's drip, one beside the mode picker on wide screens */
.stk { position: absolute; width: var(--s, 120px); transform: rotate(var(--r, -8deg)); pointer-events: none; z-index: 2; }
.sheet14.ready { position: relative; }
.stk-ready { --s: 136px; --r: 8deg; right: 14px; top: 18px; }
.pick { position: relative; }
.stk-pick { --s: 220px; --r: -8deg; right: 0; top: 40px; }
@media (max-width: 1080px) { .stk-pick { display: none; } }
/* The full-screen sheet shared by daily challenges and zen, on the site and in the studio. */
/* ---------- The challenge sheet, and zen ---------- */
html.dy-lock { overflow: hidden; }
.run [hidden] { display: none !important; }
.run { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); }
.run[open] { display: block; animation: dy-in 260ms var(--ease) both; }
.run::backdrop { background: var(--paper); }
@keyframes dy-in { from { opacity: 0; } to { opacity: 1; } }
.run-in { height: 100%; box-sizing: border-box; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; padding: max(16px, env(safe-area-inset-top)) var(--gutter) max(16px, env(safe-area-inset-bottom)); max-width: 1240px; margin: 0 auto; }
.run-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: start; }
.run-id { display: grid; gap: 4px; min-width: 0; }
.run-k { margin: 0; font-size: var(--t-12); color: var(--ink-3); }
.run-id h2 { margin: 0; font-family: var(--sans); font-size: clamp(18px, 2.4vw, 24px); font-weight: 600; letter-spacing: -0.01em; text-transform: none; line-height: 1.25; }
.zen .run-id h2 { font-family: var(--display); font-weight: 400; text-transform: lowercase; font-size: clamp(26px, 3.4vw, 36px); }
.run-how { margin: 0; color: var(--ink-2); font-size: var(--t-14); max-width: 44em; min-height: 1.5em; }
.run-timer { width: 64px; height: 64px; position: relative; display: grid; place-items: center; }
.run-timer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.run-timer path { fill: none; stroke: currentColor; stroke-linecap: round; }
.run-timer .enso-base { stroke: var(--line); stroke-width: 2; }
/* An ensō that closes as the time runs: brushed, heavier where it began. */
.run-timer .enso { stroke-width: 7; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
.run-timer span { font-size: var(--t-13); font-variant-numeric: tabular-nums; font-variation-settings: "MONO" 1; }
.run-timer.late span { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .run-timer.late .enso { animation: dy-late 1s ease-in-out infinite; } }
@keyframes dy-late { 50% { stroke-width: 10; } }
.run-x { width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.run-x svg { width: 20px; height: 20px; }
.run-part { margin: 0; font-size: var(--t-13); color: var(--ink-3); min-height: 1.4em; }
.run-stage { min-height: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; position: relative; }
.run-stage > div { width: 100%; height: 100%; display: grid; place-items: center; }
.run-svg { width: 100%; height: 100%; max-height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.run-svg.space { cursor: default; }
.run-lines line { stroke: var(--guide); stroke-width: 2; vector-effect: non-scaling-stroke; }
.run-lines line.strong { stroke: var(--line-2); stroke-width: 1.5; }
.run-tpl { color: var(--guide); opacity: 1; }
.run-tpl.compare { color: var(--ink); opacity: .2 !important; }
.run-ink { color: var(--ink); }
.run-l { cursor: grab; outline: none; }
.run-l.held { cursor: grabbing; }
.run-l .run-lg { color: var(--ink); transition: color var(--dur) var(--ease); }
.run-l.fixed { cursor: default; }
.run-l.fixed .run-lg { color: var(--ink-3); }
.run-l:focus-visible rect { stroke: var(--ink); stroke-width: 4; stroke-dasharray: 10 10; vector-effect: non-scaling-stroke; }
.run-tick { stroke: var(--ink); stroke-width: 3; vector-effect: non-scaling-stroke; }
.run-bar { fill: var(--ink); opacity: .7; }
.run-tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.run-tools .btn.ink { min-width: 120px; }
.is-space [data-run-undo] { display: none; }
.run-res { display: grid; gap: 6px; justify-items: start; align-items: center; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; padding-top: 4px; animation: dy-up 360ms var(--ease) both; }
.run-res .cta { grid-column: 1 / -1; margin-top: 8px; }
.run-seal { grid-row: span 3; width: 72px; height: 72px; position: relative; color: var(--ink); }
.run-res:not(.pass) .run-seal path:first-child { fill: none; stroke: var(--line-2); stroke-width: 2.5; stroke-dasharray: 5 6; }
.run-res:not(.pass) .run-seal path:last-child { display: none; }
.run-seal svg { width: 100%; height: 100%; display: block; }
.run-res.pass .run-seal { opacity: 1; animation: dy-stamp 600ms cubic-bezier(.2, 1.4, .3, 1) both; transform: rotate(-6deg); }
.run-seal i { position: absolute; inset: -8px; border-radius: 20px; border: 1.5px solid var(--ink); opacity: 0; }
.run-res.pass .run-seal i { animation: dy-spread 1100ms ease-out 220ms both; }
.run-res.pass .run-seal i + i { animation-delay: 520ms; }
.run-n { margin: 0; font-family: var(--display); font-size: clamp(44px, 7vw, 72px); line-height: .95; }
.run-need { margin: 0; font-size: var(--t-13); color: var(--ink-3); }
.run-say { margin: 0; font-size: var(--t-17); }
.zen-stage > div { position: relative; }
.zen-svg { position: absolute; inset: 0; transition: opacity 500ms var(--ease), transform 500ms var(--ease), filter 500ms var(--ease); }
.zen-svg.leaving { opacity: 0; transform: translateY(-3%) scale(.98); filter: blur(2px); pointer-events: none; }
.zen-end { grid-row: 3 / -1; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; align-content: center; }
.zen.ended .run-timer { opacity: var(--dim); }
@media (max-width: 640px) {
  .run-top { grid-template-columns: minmax(0, 1fr) auto; }
  .run-timer { grid-row: 1; grid-column: 2; width: 56px; height: 56px; }
  .run-x { position: absolute; right: var(--gutter); bottom: max(16px, env(safe-area-inset-bottom)); width: 40px; height: 40px; display: none; }
  .run-tools { justify-content: stretch; } .run-tools .btn { flex: 1; padding: 0 10px; }
  .run-how { font-size: var(--t-13); }
  .run-res { grid-template-columns: auto minmax(0, 1fr); }
  .run-seal { width: 56px; height: 56px; }
}
@media (max-width: 640px) { .run-top { position: relative; } .run-top .run-x { display: grid; position: static; grid-row: 1; grid-column: 3; } .run-top { grid-template-columns: minmax(0, 1fr) auto auto; } }
@media (prefers-reduced-motion: reduce) { .run[open], .dq-after, .run-res, .dy-press svg, .dy-press i, .run-res.pass .run-seal, .dy-ring.done::after, .dy-ring.done .dy-ring-in b { animation: none !important; } .dy-ring.done::after { display: none; } }
.zen .run-stage { grid-row: 3; }
@media (max-width: 520px) { .dy-ring-in span { display: none; } .dy-ring-in b { font-size: 44px; } }
.price-note { margin: 28px 0 0; font-size: var(--t-15); color: var(--ink-2); max-width: 46em; }
.price-note b { color: var(--ink); }


@keyframes dy-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dy-stamp { 0% { transform: scale(1.9) rotate(-14deg); opacity: 0; } 55% { transform: scale(.94) rotate(-5deg); opacity: 1; } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }
@keyframes dy-spread { 0% { transform: scale(.8); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }

/* a new sticker: once, quietly */
.stk-new { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-size: var(--t-14); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.stk-new.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.stk-new-k { font-size: var(--t-12); opacity: .7; white-space: nowrap; }
.stk-new b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-new-go { padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent); white-space: nowrap; }

/* stickers as pictures, with a light that moves: chrome bands slide through the foil, the raised edges glint
   from the side the light is on, and a soft pool crosses the vinyl. Only transform and opacity change. */
.stkimg { position: relative; display: block; width: 100%; line-height: 0; isolation: isolate; container-type: inline-size; --mx: .3; --my: .25; }
.stkimg img { display: block; width: 100%; height: auto; }
.stkimg > i { position: absolute; inset: 0; pointer-events: none; }
.stk-foil, .stk-pool { overflow: hidden; }
.stk-foil { -webkit-mask: var(--f) center / 100% 100% no-repeat; mask: var(--f) center / 100% 100% no-repeat; }
.stk-pool { -webkit-mask: var(--b) center / 100% 100% no-repeat; mask: var(--b) center / 100% 100% no-repeat; }
.stk-band { position: absolute; left: -60%; top: -30%; width: 220%; height: 160%; background: repeating-linear-gradient(126deg, #5e5e5c 0.0cqw, #f7f7f5 10.8cqw, #9d9d9b 18.0cqw, #ffffff 26.4cqw, #6f6f6d 33.6cqw, #e9e9e7 42.0cqw, #858583 50.4cqw, #d8d8d6 60.0cqw, #858583 69.6cqw, #e9e9e7 78.0cqw, #6f6f6d 86.4cqw, #ffffff 93.6cqw, #9d9d9b 102.0cqw, #f7f7f5 109.2cqw, #5e5e5c 120.0cqw);
  transform: translate3d(calc((.5 - var(--mx)) * 27%), 0, 0); }
.stk-glint, .stk-pool > i { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; transform: translate3d(calc((var(--mx) - .5) * 50%), calc((var(--my) - .5) * 50%), 0); }
.stk-glint { background: radial-gradient(closest-side, rgba(255, 255, 255, .62), rgba(255, 255, 255, .22) 38%, rgba(255, 255, 255, 0) 72%); }
.stk-pool > i { background: radial-gradient(closest-side, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, 0) 80%); }
.stk-hl { background: var(--f) center / 100% 100% no-repeat; mix-blend-mode: screen; opacity: calc(1 - var(--mx)); }
.stk-h2 { background-image: var(--g); opacity: var(--mx); }
.stkimg.live .stk-band, .stkimg.live .stk-glint, .stkimg.live .stk-pool > i { will-change: transform; }
.stkimg.live .stk-hl { will-change: opacity; }
/* ---------- zen, mixed up: the letters, the tips, and a light score ---------- */
.zen-opts { grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.zen-seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line-2); border-radius: 999px; }
.zen-seg button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-13); cursor: pointer; }
.zen-seg button[aria-checked=true] { background: var(--ink); color: var(--paper); }
.zen-sw { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--t-14); cursor: pointer; }
.zen-sw .sw { position: relative; width: 40px; height: 24px; border-radius: 12px; border: 1px solid var(--line-2); transition: background var(--dur) var(--ease); }
.zen-sw .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-2); transition: transform var(--dur) var(--ease); }
.zen-sw[aria-checked=true] .sw { background: var(--ink); border-color: var(--ink); }
.zen-sw[aria-checked=true] .sw::after { transform: translateX(16px); background: var(--paper); }
.zen-ask { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: var(--t-14); white-space: nowrap; pointer-events: none; }
.zen-ask:empty { display: none; }
.zen-tips { grid-row: 4; display: flex; justify-content: center; gap: 8px; }
.zen-tips button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: var(--t-14); cursor: pointer; }
.zen-tips button .mono { font-size: var(--t-12); color: var(--ink-3); }
.zen-tips button[aria-checked=true] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.zen-tips button[aria-checked=true] .mono { color: var(--paper); opacity: .7; }
.zen-score { display: grid; gap: 14px; justify-items: center; margin: 4px 0 8px; }
.zen-big { margin: 0; display: grid; justify-items: center; }
.zen-big b { font-family: var(--display); font-weight: 400; font-size: clamp(56px, 9vw, 96px); line-height: 1; }
.zen-big span { font-size: var(--t-13); color: var(--ink-3); }
.zen-stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; width: min(720px, 100%); }
.zen-stats div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; text-align: left; }
.zen-stats dt { font-size: var(--t-12); color: var(--ink-3); }
.zen-stats dd { margin: 2px 0 0; font-size: var(--t-15); font-variant-numeric: tabular-nums; }
.zen-stats dd b { font-family: var(--display); font-weight: 400; font-size: var(--t-24); margin-right: 4px; }
.zen-how { margin: 0; font-size: var(--t-13); color: var(--ink-3); max-width: 36em; }
.run-ink.nib path { stroke-linecap: butt; }
@media (max-width: 560px) { .zen-tips button { padding: 0 12px; } .zen-seg button { padding: 0 10px; } }

#gate { display: none; }
html.gated, html.gated body { overflow: hidden; height: 100%; }
html.gated body > *:not(#gate) { display: none !important; }
html.gated #gate { display: grid; }
.gate { position: fixed; inset: 0; z-index: 1000; place-items: center; padding: 24px 16px; background: var(--paper); color: var(--ink); overflow-y: auto; transition: opacity .6s ease; }
.gate.open { opacity: 0; }
.gate-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.gate-scene { position: absolute; inset: -4vh 0; display: grid; grid-template-rows: repeat(3, 1fr); opacity: 0; transition: opacity 1.8s ease; }
.gate-scene.on { opacity: .15; }
.gate-row { display: block; background: var(--ink); -webkit-mask: var(--art) 0 50% / auto 100% repeat-x; mask: var(--art) 0 50% / auto 100% repeat-x; animation: gate-drift var(--t) linear infinite; animation-direction: normal; }
.gate-row:nth-child(even) { animation-direction: reverse; }
@keyframes gate-drift { from { -webkit-mask-position: 0 50%; mask-position: 0 50%; } to { -webkit-mask-position: calc(36vh * var(--ar) * 2) 50%; mask-position: calc(36vh * var(--ar) * 2) 50%; } }
@media (prefers-reduced-motion: reduce) { .gate-row { animation: none; } .gate-scene { transition-duration: .01s; } }
.gate-card { position: relative; width: min(560px, 100%); display: grid; gap: 14px; padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: var(--paper); border: 1px solid var(--line-2); box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--line), 0 30px 80px -30px color-mix(in srgb, var(--ink) 45%, transparent); }
.gate-mark { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.gate-mark svg { width: 30px; height: 30px; }
.gate-eye { margin: 6px 0 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.gate-h { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 6vw, 52px); line-height: 1.04; letter-spacing: -.01em; }
.gate-p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.gate-form { display: grid; gap: 8px; margin-top: 6px; }
.gate-form label { font-size: 13px; color: var(--ink-2); }
.gate-in { display: flex; gap: 8px; padding: 6px; border: 1px solid var(--line-2); border-radius: 999px; transition: border-color .2s ease; }
.gate-in:focus-within { border-color: var(--ink); }
.gate-in input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 14px; font: inherit; font-size: 16px; color: inherit; outline: none; min-height: 44px; }
.gate-in button { flex: none; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: inherit; font-weight: 600; cursor: pointer; }
.gate-msg { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--ink-2); }
.gate.nope .gate-in { animation: gate-no .32s ease; }
@keyframes gate-no { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .gate.nope .gate-in { animation: none; } }
.gate-cap { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); font-variation-settings: "MONO" 1; }
.gate-cap.in span { animation: gate-cap .8s ease; }
@keyframes gate-cap { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 420px) { .gate-in { flex-direction: column; border-radius: 22px; } .gate-in button { width: 100%; } }
.gate-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line-2); border-radius: 999px; margin-top: 4px; }
.gate-tabs button { flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.gate-tabs button[aria-selected=true] { background: var(--ink); color: var(--paper); }
.gate-list, .gate-pwp { display: grid; gap: 8px; }
.gate-list[hidden], .gate-pwp[hidden] { display: none; }
.gl-form { display: grid; gap: 10px; }
.gl-track { min-height: 150px; display: grid; }
.gl-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; align-content: start; }
.gl-step[hidden] { display: none; }
.gl-step.in { animation: gl-in .32s ease both; }
@keyframes gl-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gl-step.in { animation: none; } }
.gl-step legend { padding: 0; margin: 0 0 12px; font-family: var(--display); font-size: clamp(24px, 4vw, 30px); line-height: 1.1; }
.gl-in { width: 100%; min-height: 52px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 16px; background: transparent; color: inherit; font: inherit; font-size: 17px; outline: none; transition: border-color .2s ease; }
.gl-in:focus { border-color: var(--ink); }
.gl-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gl-opts.gl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl-opts button { min-height: 68px; border: 1.5px solid var(--line-2); border-radius: 20px; background: transparent; color: var(--ink); font: inherit; font-size: 19px; font-weight: 600; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.gl-opts button[aria-checked=true] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (hover: hover) { .gl-opts button:hover { border-color: var(--ink); } }
.gl-note { margin: 0; font-size: 13px; color: var(--ink-3); }
.gl-why { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.gl-why b { color: var(--ink); }
.gl-yes { margin: 0; font-family: var(--display); font-size: clamp(28px, 5vw, 38px); line-height: 1.1; }
.gl-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.gl-back, .gl-next { min-height: 44px; padding: 0 20px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
@media (max-width: 420px) { .gl-dots i { width: 12px; } .gl-back, .gl-next { padding: 0 16px; } }
.gl-back { border: 1px solid var(--line-2); background: transparent; color: var(--ink); }
.gl-back[hidden] { visibility: hidden; display: inline-block; }
.gl-next { border: 0; background: var(--ink); color: var(--paper); grid-column: 3; }
.gl-next[hidden] { display: none; }
.gl-dots { display: flex; justify-content: center; gap: 6px; grid-column: 2; grid-row: 1; }
.gl-dots i { width: 22px; height: 4px; border-radius: 2px; background: var(--line-2); transition: background .3s ease; }
.gl-dots i.done { background: var(--ink-3); } .gl-dots i.now { background: var(--ink); }
.gl-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.is-done .gl-dots i { background: var(--ink); }
.gl-fine { margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.gate.nope .gl-step.in .gl-in, .gate.nope .gl-step.in .gl-opts { animation: gate-no .32s ease; }
@media (prefers-reduced-motion: reduce) { .gate.nope .gl-step.in .gl-in, .gate.nope .gl-step.in .gl-opts { animation: none; } }