/* 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; }
/* when the stickers peel up, a soft pane of frosted glass sits behind them: no edge, no fill you can see, only enough
   blur and veil to read them over anything. It fades out at its edges. */
.tsk-menu::before { content: ""; position: absolute; z-index: -1; left: -34px; right: -40px; top: -34px; bottom: -86px; pointer-events: none;
  background: color-mix(in srgb, var(--paper) 42%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  -webkit-mask: radial-gradient(120% 100% at 0% 100%, #000 52%, transparent 80%); mask: radial-gradient(120% 100% at 0% 100%, #000 52%, transparent 80%);
  opacity: 0; transition: opacity .3s ease; }
.tsk.open .tsk-menu::before { opacity: 1; }
.tsk-l { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 4px 6px; }
.tsk-i[aria-pressed=true] .tsk-l b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (max-width: 1080px) { body:has(.stop) .tsk-menu::before { -webkit-mask: radial-gradient(120% 100% at 100% 0%, #000 52%, transparent 80%); mask: radial-gradient(120% 100% at 100% 0%, #000 52%, transparent 80%); top: -86px; bottom: -34px; } }
/* the studio button's glint is a layer of its own background, not a box laid over it, so no edge can ever show */
.stkbtn::after { content: none; display: none; }
:root[data-skin="holo"] .stkbtn::before { clip-path: inset(0 round 999px); }
.stkbtn { --sheen: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, var(--sk-glow) 50%, rgba(255, 255, 255, 0) 62%);
  background-image: var(--sheen), var(--sk-face); background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 130% 0, 0 0;
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s ease, background-position 0s; }
:root[data-skin="silver"] .stkbtn { --sk-face: linear-gradient(180deg, #ffffff 0%, #e4e4e1 38%, #b9b9b6 52%, #d9d9d6 70%, #f7f7f5 100%); background-image: var(--sheen), var(--sk-face); }
@media (hover: hover) { .stkbtn:hover { background-position: -30% 0, 0 0; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s ease, background-position .9s ease; } .stkbtn:hover::after { animation: none; } }
.tsk.away { opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .25s ease, transform .3s ease; }
.tsk { transition: opacity .3s ease, transform .4s cubic-bezier(.3, 1.4, .5, 1), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .tsk.away { transform: none; } }
.tsk-menu::before { left: -40px; right: -70px; top: -50px; background: color-mix(in srgb, var(--paper) 62%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  -webkit-mask: radial-gradient(150% 125% at 0% 100%, #000 64%, transparent 94%); mask: radial-gradient(150% 125% at 0% 100%, #000 64%, transparent 94%); }
.tsk-menu::before { top: -80px; right: -110px; }
.tsk-l { text-shadow: 0 0 2px var(--paper), 0 0 8px var(--paper), 0 0 16px var(--paper); }

/* Typo off: he is gone, not hiding. His face and name leave the speech (the words stay, as a plain note), and the
   drawings of him that keep you company leave too. The brand page and the home page's "meet Typo" still show him,
   because there he is the subject. */
.typo-off .say { grid-template-columns: minmax(0, 1fr); }
.typo-off .say-typo, .typo-off .say figcaption { display: none; }
.typo-off .say blockquote { border-radius: 14px; border-width: 1px; border-color: var(--line-2); }
.typo-off .say blockquote::before, .typo-off .say blockquote::after { display: none; }
.typo-off .signin-side, .typo-off .launch-in .inkdog, .typo-off .dy-zen-art .inkdog, .typo-off .fd-end-art .inkdog,
.typo-off .va-art .inkdog, .typo-off .prof-empty-art .inkdog, .typo-off .tchat-peek { display: none !important; }
.typo-off .signin-grid { grid-template-columns: minmax(0, 1fr); }
/* 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; } }
/* phones and tablets: Typo alone in the corner (the rest switch lives in the corner sticker's menu), and he steps out
   of the way while you scroll down, back when you scroll up or stop */
@media (max-width: 1023px) { .tchat-hush:not(.inbar) { display: none; } }
.tchat-fab:not(.inbar) { transition: transform var(--dur) var(--ease), opacity .25s ease; }
.tchat-fab.away:not(.on) { opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tchat-fab.away:not(.on) { transform: 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 .sub { display: none; }
.step.on:has(#canvasBox) > .narrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the heading stays for screen readers */
.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: 2px; top: 64px; bottom: auto; flex-direction: column; align-items: flex-end; }
  .tsk .tsk-i { flex-direction: row-reverse; padding: 0 0 0 10px; transform: translateY(calc(var(--k) * -22px - 26px)) scale(.4) rotate(40deg); transform-origin: calc(100% - 26px) 50%; text-align: right; }
  .tsk.open .tsk-i { transform: none; }
  .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; }
/* the save pill keeps one width, saving or saved, so Typo and the bar beside it never jump */
@media (min-width: 1081px) { .savepill { min-width: 92px; justify-content: flex-start; } }

/* ---------- shapes: the bar above the toolbar, and the outline with its handles ---------- */
.shp-bar { position: absolute; z-index: 13; left: 50%; top: 6px; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; width: max-content; max-width: calc(100% - 16px);
  padding: 6px 8px; border-radius: 22px; background: color-mix(in srgb, var(--paper) 78%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--line), 0 14px 28px -16px rgba(0, 0, 0, .4); }
.shp-bar[hidden] { display: none; }
.shp-seg { display: flex; gap: 2px; padding: 2px; border-radius: 16px; }
.shp-seg + .shp-seg, .shp-sides + .shp-seg { border-left: 1px solid var(--line); padding-left: 8px; border-radius: 0; }
.shp-seg button, .shp-sides button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 9px; border: 0; border-radius: 14px; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-12); cursor: pointer; }
.shp-seg button svg, .shp-sides button svg { width: 18px; height: 18px; flex: none; }
.shp-seg button[aria-checked=true] { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .shp-seg button:hover:not([aria-checked=true]), .shp-sides button:hover { color: var(--ink); background: var(--tb-spot); } }
.shp-sides { display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-12); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.shp-sides[hidden] { display: none; }
.shp-sides b { color: var(--ink); }
.shp-done { min-height: 34px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--ink); color: var(--paper); font: inherit; font-size: var(--t-13); font-weight: 600; cursor: pointer; }
.shp-done[hidden] { display: none; }
.shp-hint { flex: 1 0 100%; margin: 0; font-size: var(--t-12); color: var(--ink-3); text-align: center; line-height: 1.3; }
@media (max-width: 1240px) { .shp-l { display: none; } }
@media (pointer: coarse) { .shp-seg button, .shp-sides button, .shp-done { min-height: 42px; } }
body.shape-on .dtb-note { display: none; }
#cvShape { pointer-events: none; }
.shp-out { fill: none; stroke: var(--ink); vector-effect: non-scaling-stroke; }
.shp-out.shp-sub { stroke-dasharray: 10 8; }
.shp-out.shp-int { stroke-dasharray: 2 6; stroke-linecap: round; }
.shp-ghost { opacity: .45; stroke-dasharray: 6 6; }
.shp-arm { stroke: var(--ink-3); vector-effect: non-scaling-stroke; }
.shp-h { fill: var(--paper); stroke: var(--ink); vector-effect: non-scaling-stroke; }
.shp-first { fill: var(--ink); }
.shp-rot { fill: var(--ink); }
body.shape-on .canvasbox svg { cursor: crosshair; }

/* borrowing a letter */
.borrow { position: absolute; z-index: 15; left: 50%; bottom: calc(var(--tbh) + 14px); transform: translateX(-50%); width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - var(--bar) - var(--foot) - var(--tbh) - 60px); overflow-y: auto; padding: 12px 14px 14px; border-radius: 20px;
  background: var(--paper); border: 1px solid var(--line-2); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .45); }
.borrow[hidden] { display: none; }
.bw-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: var(--t-14); }
.bw-x { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.bw-x svg { width: 16px; height: 16px; }
.bw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bw-item { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; }
.bw-item svg { width: 100%; height: 110px; color: var(--ink); }
.bw-n { font-size: var(--t-13); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-b { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-empty { margin: 4px 0; font-size: var(--t-14); color: var(--ink-2); }

body.shape-on .step.on:has(#canvasBox) .firstcard { display: none; }
@media (max-width: 760px) { .shp-hint { display: none; } }
.shp-bar { flex-wrap: nowrap; }
.shp-hint { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); flex: none; width: max-content; max-width: calc(100vw - 48px); padding: 3px 10px; border-radius: 10px; background: color-mix(in srgb, var(--paper) 80%, transparent); pointer-events: none; }
@media (max-width: 760px) { .shp-bar { flex-wrap: wrap; } }
@media (max-width: 1080px) { .tsk { top: calc((var(--bar) - 46px) / 2 + 3px + env(safe-area-inset-top, 0px)); } .tsk .tsk-b { width: 46px; height: 46px; } .tsk .tsk-menu { top: 54px; } }
@media (max-width: 480px) { .stepbtn #stepNow { display: none; } }

/* phones on their side: the bottom bar shrinks to its ring and two buttons, and the frame takes what is left above the
   toolbar, so every tool stays in reach and nothing covers the lines */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --foot: 58px; }
  .nav { padding: 6px 8px; } .nav .navtext { display: none; } .nav .btn { min-height: 38px; }
  .step.on:has(#canvasBox) .reel { padding: 6px 0; }
  .step.on:has(#canvasBox) .reel::before, .step.on:has(#canvasBox) .reel::after { display: none; }
  .step.on:has(#canvasBox) .canvasbox svg { height: max(150px, calc(100dvh - var(--bar) - var(--foot) - var(--tbh) - 22px - env(safe-area-inset-bottom, 0px))); }
  .step.on:has(#canvasBox) .lesson, .step.on:has(#canvasBox) .firstcard { display: none; }
  .step.on:has(#canvasBox) .shp-hint { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) and (max-width: 900px) {
  :root { --tbh: 56px; }
  .dtb { gap: 2px; padding: 4px 6px; flex-wrap: nowrap; }
  .dtb-g { padding: 0 3px; gap: 0; }
  .dtb #dTools { flex-wrap: nowrap; gap: 0; }
  .dtb-b { min-width: 34px; height: 34px; padding: 0 6px; }
  .dtb .dmeta { display: none; } .dtb .dch { font-size: 20px; }
  .dtb .dhead { grid-template-columns: auto minmax(36px, auto) auto; }
  .dtb-sizeb .dtb-l { display: none; } .dtb-sizeb { min-width: 34px; }
}

/* ---------- Round 28: no bottom bar. The name, the step and the way forward live in the top bar ---------- */
:root { --foot: 0px; }
.nav { display: none !important; }
main { padding-bottom: 48px; }
.rail { padding-bottom: 96px; }
.stop { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; }
/* the font's name: a title you can click into, in your own letters as you draw them */
.fname { position: relative; display: flex; align-items: center; min-width: 0; max-width: 420px; justify-self: start; }
.fname input { min-width: 6ch; width: 100%; field-sizing: content; max-width: 100%; height: 40px; padding: 0 30px 0 10px; border: 1px solid transparent; border-radius: 12px; background: transparent;
  font-size: var(--t-17, 17px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-overflow: ellipsis; transition: background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
.fname input::placeholder { color: var(--ink-3); opacity: 1; }
.fname-i { position: absolute; right: 10px; width: 15px; height: 15px; color: var(--ink-3); pointer-events: none; opacity: .6; transition: opacity .18s; }
@media (hover: hover) { .fname:hover input { background: var(--wash); } .fname:hover .fname-i { opacity: 1; } }
.fname input:focus { outline: none; border-color: var(--ink); background: var(--paper); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 12%, transparent); }
.fname input:focus + .fname-i { opacity: 0; }
.railname { display: none; }
/* the step: a ring that fills as the font does, the step's name, and how long is left */
.stepnav { display: flex; align-items: center; gap: 8px; justify-self: end; }
.stepbtn, .stepbtn:is(*) { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 3px 14px 3px 4px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; cursor: pointer; justify-self: auto; }
.sb-ring { position: relative; display: grid; place-items: center; width: 36px; height: 36px; flex: none; }
.sb-ring .navring { position: absolute; inset: 0; width: 36px; height: 36px; }
.sb-n { font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink); }
.sb-t { display: grid; text-align: left; line-height: 1.2; min-width: 0; }
.sb-t b { font-size: var(--t-14); font-weight: 600; white-space: nowrap; }
.stepbtn .sb-t span, .stepbtn #stepNow { display: block; font-size: var(--t-12); color: var(--ink-3); white-space: nowrap; font-variation-settings: "MONO" 1; }
@media (hover: hover) { .stepbtn:hover { border-color: var(--ink); } }
/* the way forward: quiet while you work, solid only when the step is done, so the letter's own Next is never confused with it */
.fwd { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--ink-2); font-size: var(--t-14); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.fwd svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) { .fwd:hover { border-color: var(--ink); color: var(--ink); } }
.fwd.ready { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fwd.pop { animation: fwd-pop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fwd-pop { 40% { transform: scale(1.12); } }
.fwd[hidden] { display: none; }
.no-mode .stepnav { visibility: hidden; }
/* the time and the counts, with the steps */
.railinfo { display: flex; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.railinfo .navtext { display: grid; gap: 2px; }
.railinfo .eta { font-size: var(--t-13); }
.railinfo .sofar { font-size: var(--t-12); line-height: 1.45; color: var(--ink-3); max-width: none; }
@media (min-width: 1081px) { .stepbtn { display: inline-flex !important; } }
@media (max-width: 1080px) { .stools { margin-right: 0; } .stepnav { margin-right: 52px; } }
@media (max-width: 760px) { .stepbtn .sb-t span { display: none; } .stop { gap: 8px; } }
@media (max-width: 560px) {
  .stepbtn { padding: 3px; gap: 0; } .stepbtn .sb-t { display: none; }
  .fwd { width: 44px; padding: 0; justify-content: center; } .fwd-l { display: none; }
  .fname input { font-size: var(--t-15, 15px); padding: 0 26px 0 8px; height: 38px; } .fname-i { right: 8px; width: 13px; height: 13px; }
  .stepnav { gap: 6px; }
}
@media (max-height: 520px) and (orientation: landscape) { .stepbtn, .fwd { min-height: 38px; } .sb-ring, .sb-ring .navring { width: 30px; height: 30px; } }
@media (prefers-reduced-motion: reduce) { .fwd.pop { animation: none; } }
.stepbtn .sb-ring { display: grid !important; color: var(--ink); } .stepbtn .sb-n { display: block !important; color: var(--ink); }
.stepbtn .sb-t b { overflow: visible; }
/* a phone: the name gets the room. The dojo T steps out (the steps sheet and Typo both lead home) and the save light shrinks to its dot */
@media (max-width: 430px) {
  .stop .lockup { display: none; }
  .stop { grid-template-columns: minmax(0, 1fr) auto auto; padding-left: 10px; }
  .fname input { min-width: 0; } .fname-i { display: none; } .fname input { padding-right: 8px; }
  .savepill { min-width: 30px; width: 30px; padding: 0; border-color: transparent; justify-content: center; }
  .stools { gap: 4px; }
  .stepnav { margin-right: 50px; }
}
.fname input { min-width: 0; }
@media (max-width: 1080px) { .stepbtn #stepNow, .stepbtn .sb-t span { display: none !important; } .stop .lockup .lsub { display: none; } }
@media (max-width: 900px) { .stop .lockup .word { display: none; } }
.stepbtn .sb-t b { color: var(--ink); }
/* the toolbar never wraps a tool onto a second line: groups keep their size, the letter's group gives way first */
@media (min-width: 641px) { .dtb { flex-wrap: nowrap; } .dtb-g { flex-shrink: 0; } .dtb #dTools { flex-wrap: nowrap; } .dtb-char { flex-shrink: 0; } }
@media (min-width: 641px) and (max-width: 1240px) { .dtb .dmeta { display: none; } }
/* phones on their side: thumb-sized tools a gap apart, and a frame that fits above them with no scrolling */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 900px) {
  :root { --tbh: 58px; }
  .dtb { gap: 4px; } .dtb-g { gap: 4px; } .dtb #dTools { gap: 4px; }
  .dtb-b { min-width: 40px; height: 40px; }
}
@media (max-height: 520px) and (orientation: landscape) { .step.on:has(#canvasBox) .canvasbox svg { height: max(150px, calc(100dvh - var(--bar) - var(--tbh) - 72px - env(safe-area-inset-bottom, 0px))); } }
@media (min-width: 641px) and (max-width: 1240px) { .dtb-g { padding: 0 4px; } .dtb { gap: 4px; } }
/* the frame's helpers */
.canvasbox.no-lines #cvGuides .hl { display: none; }
.dtb-guides { display: grid; gap: 8px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.dtb-guides .opt { padding: 10px 12px; }
.dtb-gstep { display: grid; gap: 8px; } .dtb-gstep[hidden] { display: none; }
.dtb-gin { display: flex; align-items: center; gap: 8px; font-size: var(--t-13); color: var(--ink-2); }
.dtb-gin input { width: 84px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 10px; background: transparent; font-size: 16px; font-variant-numeric: tabular-nums; }
/* studio tabs: the open font holds its name; the others are one tap away */
.ftabs { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ftab-strip { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.ftab { position: relative; display: flex; align-items: center; min-width: 0; height: 40px; border-radius: 12px; }
.ftab.on { flex: 0 1 auto; min-width: 0; }
.ftab:not(.on) { flex: 0 1 150px; border: 1px solid transparent; }
.ftab-go { min-width: 0; height: 40px; padding: 0 30px 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-3); font: inherit; font-size: var(--t-14); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
@media (hover: hover) { .ftab-go:hover { background: var(--wash); color: var(--ink); } }
.ftab-x { position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; opacity: .7; }
.ftab-x svg { width: 14px; height: 14px; }
@media (hover: hover) { .ftab-x:hover { background: var(--wash); color: var(--ink); opacity: 1; } .ftab:not(:hover):not(.on) .ftab-x { opacity: 0; } }
.ftab.on .ftab-x { position: static; translate: none; margin-left: -4px; }
.ftab.on .fname input { padding-right: 26px; }
.ftab + .ftab { margin-left: 2px; } .ftab:not(.on) + .ftab:not(.on)::before { content: ""; position: absolute; left: -3px; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
.ftab-more { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 8px 0 10px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-12); font-variant-numeric: tabular-nums; cursor: pointer; }
.ftab-more svg { width: 16px; height: 16px; }
@media (hover: hover) { .ftab-more:hover { border-color: var(--ink); color: var(--ink); } }
.ftab-pop { position: fixed; z-index: 90; display: grid; gap: 2px; padding: 8px; border-radius: 18px; background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .42), inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); animation: tf-in2 .22s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes tf-in2 { from { opacity: 0; translate: 0 -6px; } }
.ftab-pop[hidden] { display: none; }
.ftab-pk { margin: 6px 10px 2px; font-size: var(--t-12); color: var(--ink-3); }
.ftab-pi { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: var(--t-14); text-align: left; cursor: pointer; }
.ftab-pi small { color: var(--ink-3); font-size: var(--t-12); }
.ftab-pi.on { background: var(--ink); color: var(--paper); }
.ftab-pi.ftab-new { justify-content: flex-start; } .ftab-pi svg { width: 16px; height: 16px; }
@media (hover: hover) { .ftab-pi:not(.on):hover { background: var(--wash); } }
.ftab-note { margin: 6px 10px; font-size: var(--t-12); color: var(--ink-2); }
@media (pointer: coarse) { .ftab-more { height: 40px; } .ftab-pi { min-height: 44px; } .ftab-x { width: 32px; height: 32px; } }
/* narrow: only the open tab shows; the count opens the rest */
@media (max-width: 900px) { .ftab:not(.on) { display: none; } .ftab.on .ftab-x { display: none; } }
@media (prefers-reduced-motion: reduce) { .ftab-pop { animation: none; } }
.ftab.on { flex: none; max-width: min(300px, 40vw); } .ftab.on .fname { max-width: 100%; }
.ftabs { justify-self: start; max-width: 100%; }
@media (max-width: 430px) { .ftab-more .ftab-n { display: none; } .ftab-more { padding: 0 8px; } .ftab.on { max-width: none; flex: 0 1 auto; } }
/* 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; } }
.pb-art { grid-template-rows: 180px; } .pb-art svg { height: 180px !important; width: auto !important; max-width: 100% !important; }
/* 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, a floating card with the sticker itself, tilted as if just slapped on */
.stk-new { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(420px, calc(100vw - 24px)); padding: 10px 10px 10px 14px; border-radius: 22px;
  background: color-mix(in srgb, var(--ink) 88%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); color: var(--paper); text-decoration: none; font-size: var(--t-14);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .5), inset 0 0 0 1px color-mix(in srgb, var(--paper) 14%, transparent); transform: translate(-50%, 24px) scale(.96); opacity: 0; pointer-events: none; transition: opacity .32s var(--ease), transform .42s cubic-bezier(.3, 1.4, .5, 1); }
.stk-new.on { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.stk-new-i { flex: none; width: 56px; height: 56px; object-fit: contain; margin: -18px 0 -6px -4px; transform: rotate(-9deg) scale(.6); opacity: 0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); transition: transform .5s cubic-bezier(.3, 1.7, .5, 1) .12s, opacity .2s .12s; }
.stk-new.on .stk-new-i { transform: rotate(-9deg) scale(1); opacity: 1; }
.stk-new-t { display: grid; min-width: 0; line-height: 1.3; }
.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-h { font-size: var(--t-12); opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-new-h:empty { display: none; }
.stk-new-go { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent); white-space: nowrap; }

/* tips that float: frosted glass, an arrow pointing at what it is about, the sticker it leads to peeking over the edge */
.tt { position: fixed; z-index: 95; left: 0; top: 0; width: max-content; max-width: min(320px, calc(100vw - 24px)); display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px;
  background: color-mix(in srgb, var(--paper) 78%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); color: var(--ink);
  box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .42), 0 2px 6px -2px rgba(0, 0, 0, .14), inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
  font-size: var(--t-14); line-height: 1.45; opacity: 0; transform: translateY(6px) scale(.97); transform-origin: var(--ax, 50%) 100%; transition: opacity .22s var(--ease), transform .34s cubic-bezier(.3, 1.4, .5, 1); pointer-events: auto; }
.tt[data-side="below"] { transform: translateY(-6px) scale(.97); transform-origin: var(--ax, 50%) 0; }
.tt.on { opacity: 1; transform: none; }
.tt::after { content: ""; position: absolute; left: var(--ax, 50%); width: 14px; height: 14px; margin-left: -7px; background: inherit; -webkit-backdrop-filter: inherit; backdrop-filter: inherit; border-radius: 3px; transform: rotate(45deg); }
.tt[data-side="above"]::after { bottom: -6px; box-shadow: 1px 1px 0 color-mix(in srgb, var(--ink) 12%, transparent); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.tt[data-side="below"]::after { top: -6px; box-shadow: -1px -1px 0 color-mix(in srgb, var(--ink) 12%, transparent); clip-path: polygon(0 0, 100% 0, 0 100%); }
.tt[data-side="none"]::after { display: none; }
.tt-stk { flex: none; width: 56px; height: 56px; object-fit: contain; margin: -26px -4px -4px -10px; transform: rotate(-10deg); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); animation: tt-slap .5s cubic-bezier(.3, 1.7, .5, 1) both .08s; }
@keyframes tt-slap { from { transform: rotate(-24deg) scale(.4); opacity: 0; } to { transform: rotate(-10deg) scale(1); opacity: 1; } }
.tt-in { min-width: 0; }
.tt-in b { display: block; font-weight: 600; font-size: var(--t-15); letter-spacing: -0.01em; }
.tt-in p { margin: 2px 0 0; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.tt-k { font-family: var(--mono, ui-monospace, monospace); font-size: var(--t-12) !important; letter-spacing: .04em; margin: 0 0 4px !important; }
.tt-b { display: flex; gap: 8px; margin-top: 10px; }
.tt-go { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: transparent; cursor: pointer; font-size: var(--t-14); }
.tt-go.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tt-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .tt-go:hover { transform: translateY(-1px); } }
/* a toast: one line of thanks that floats up from the bottom and leaves on its own */
.tt-toast { left: 50%; top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); align-items: center; padding: 12px 18px 12px 14px; border-radius: 22px; transform: translate(-50%, 18px) scale(.97); }
.tt-toast.on { transform: translate(-50%, 0); }
.tt-toast .tt-stk { width: 48px; height: 48px; margin: -18px 0 -8px -4px; }
.tt-toast:not(:has(.tt-stk)) { padding-left: 18px; }
/* the tour: the page steps back around the thing being pointed at */
.tt-veil { position: fixed; z-index: 94; inset: 0; pointer-events: auto; opacity: 0; transition: opacity .25s var(--ease); }
.tt-veil::before { content: ""; position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 16px; box-shadow: 0 0 0 200vmax color-mix(in srgb, #000 42%, transparent); transition: left .3s var(--ease), top .3s var(--ease), width .3s var(--ease), height .3s var(--ease); }
.tt-veil.on { opacity: 1; } .tt-veil:not(.on) { pointer-events: none; }
.tt-veil::after { content: ""; position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 16px; box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3.5px var(--ink); animation: tt-pulse 1.8s ease-in-out infinite; }
@keyframes tt-pulse { 50% { box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 7px color-mix(in srgb, var(--ink) 30%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tt, .tt-veil, .stk-new, .stk-new-i, .tt-veil::before { transition: none; } .tt-stk, .tt-veil::after { animation: none; } }

/* focus you can see: a soft ring that grows out of the field, never the browser's blue */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { transition: box-shadow .18s var(--ease), border-color .18s var(--ease); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.text):focus-visible, textarea:not(.text):focus-visible, select:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 16%, transparent), 0 0 0 1.5px var(--ink); border-radius: 10px; }
.text[aria-invalid="true"] { border-bottom-color: var(--ink); box-shadow: 0 2px 0 0 var(--ink); }
button:focus-visible, a:focus-visible, [tabindex]:not(h1):not(h2):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--paper) 80%, transparent); }
/* while you type on a phone, the corner stickers get out of the way of the keyboard */
@media (pointer: coarse) { body:not(:has(#canvasBox)):has(input:focus, textarea:focus) .tsk, body:has(input:focus, textarea:focus) .tchat-fab:not(.inbar) { opacity: 0; visibility: hidden; transition: opacity .15s, visibility 0s .15s; } }
body:not(:has(#canvasBox)):has(.tt-toast.on) .tsk, body:has(.tt-toast.on) .tchat-fab:not(.inbar) { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }

/* 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; }
.stkimg:not(.lit) > i { display: 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; } }

/* ---------- a sticker on a section's edge ----------
   Slapped across the top edge of a section at an angle. It lifts and straightens a little on hover; after a short
   dwell its name appears beside it. A click opens it full size and lit. */
.sec-stk { position: absolute; z-index: 3; top: 0; right: max(var(--gutter), calc((100vw - 1240px) / 2)); width: clamp(76px, 9vw, 124px); padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateY(-52%) rotate(var(--t, -8deg)); transition: transform .45s cubic-bezier(.3, 1.45, .5, 1), filter .3s ease; -webkit-tap-highlight-color: transparent; }
.sec-stk .stkimg { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .18)); }
@media (hover: hover) { .sec-stk:hover { transform: translateY(-56%) rotate(calc(var(--t, -8deg) * .25)) scale(1.06); } }
.sec-stk:active { transform: translateY(-52%) rotate(0deg) scale(.95); transition-duration: .12s; }
.sec-stk:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 12px; }
.sec-tip { position: absolute; right: calc(100% + 10px); top: 50%; display: grid; gap: 2px; width: max-content; max-width: 220px; padding: 8px 12px; border-radius: 12px; text-align: left;
  background: var(--ink); color: var(--paper); font-size: var(--t-12); line-height: 1.35; pointer-events: none;
  opacity: 0; transform: translate(6px, -50%) rotate(calc(var(--t, -8deg) * -1)); transition: opacity .18s ease, transform .25s ease; }
.sec-tip b { font-size: var(--t-13); }
.sec-tip span { opacity: .75; }
@media (hover: hover) { .sec-stk:hover .sec-tip { opacity: 1; transform: translate(0, -50%) rotate(calc(var(--t, -8deg) * -1)); transition-delay: .55s; } }
.sec-stk:focus-visible .sec-tip { opacity: 1; transform: translate(0, -50%) rotate(calc(var(--t, -8deg) * -1)); }
@media (prefers-reduced-motion: reduce) { .sec-stk, .sec-tip { transition: opacity .15s ease; } }
.stkimg[data-stk] { cursor: pointer; }

/* the brand page: the one under your pointer comes alive */
.stk-live { position: absolute; inset: 0; z-index: 2; line-height: 0; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.stk-live.on { opacity: 1; }
.stk-live svg { display: block; width: 100%; height: auto; }

/* ---------- up close ---------- */
.stkm { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden; }
.stkm::backdrop { background: color-mix(in srgb, var(--paper) 55%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
.stkm[open] { display: block; animation: stkmIn .3s ease both; }
@keyframes stkmIn { from { opacity: 0; } to { opacity: 1; } }
.stkm-in { height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 3vw, 40px); padding: 24px clamp(12px, 4vw, 56px); }
.stkm-fig { margin: 0; display: grid; justify-items: center; gap: 18px; min-width: 0; }
.stkm-art { position: relative; width: min(64vmin, 460px); aspect-ratio: 1; display: grid; place-items: center; }
.stkm-art svg { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .28)); transition: transform .38s cubic-bezier(.3, 1.3, .5, 1), opacity .26s ease; }
.stkm-art svg.from-r { transform: translateX(40%) rotate(10deg) scale(.86); opacity: 0; transition: none; }
.stkm-art svg.from-l { transform: translateX(-40%) rotate(-10deg) scale(.86); opacity: 0; transition: none; }
.stkm-art svg.from-0 { transform: scale(.7) rotate(-14deg); opacity: 0; transition: none; }
.stkm-art svg.out-l { transform: translateX(-40%) rotate(-10deg) scale(.86); opacity: 0; }
.stkm-art svg.out-r { transform: translateX(40%) rotate(10deg) scale(.86); opacity: 0; }
.stkm figcaption { text-align: center; display: grid; gap: 4px; max-width: 34ch; }
.stkm-n { margin: 0; font-size: var(--t-12); color: var(--ink-3); }
.stkm-t { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4vw, 40px); text-transform: lowercase; line-height: 1.05; }
.stkm-d { margin: 0; font-size: var(--t-15); color: var(--ink-2); line-height: 1.45; }
.stkm-s { margin: 4px 0 0; font-size: var(--t-12); color: var(--ink-3); }
.stkm-nav, .stkm-x { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: color-mix(in srgb, var(--paper) 70%, transparent); color: var(--ink); cursor: pointer; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), background .2s ease; }
.stkm-nav svg, .stkm-x svg { width: 22px; height: 22px; }
@media (hover: hover) { .stkm-nav:hover, .stkm-x:hover { background: var(--paper); transform: scale(1.06); } }
.stkm-nav:active { transform: scale(.94); }
.stkm-x { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: 16px; width: 46px; height: 46px; }
.stkm-nav:focus-visible, .stkm-x:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 640px) { .stkm-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; align-content: center; } .stkm-fig { grid-column: 1 / -1; grid-row: 1; } .stkm-prev { grid-row: 2; justify-self: end; } .stkm-next { grid-row: 2; justify-self: start; } .stkm-art { width: min(78vw, 360px); } }
@media (prefers-reduced-motion: reduce) { .stkm[open] { animation: none; } .stkm-art svg { transition: none; } }
html.stkm-on .tsk, html.stkm-on .tchat { visibility: hidden; }
/* in the studio the toast floats above the step bar, never over Next */
body:has(#canvasBox) .tt-toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
/* a new sticker and Typo never share the corner: the fab steps aside while the card is up, the card while Typo talks */
body:has(.stk-new.on) .tchat-fab:not(.on):not(.inbar) { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
body:has(#tchat.open) .stk-new, body:has(.tchat-fab.on) .stk-new, body:has(#tchat.open) .tt-toast { display: none; }
body:has(#hnav.open) .stk-new, body:has(#hnav.open) .tt { display: none; }
/* the floating sheet: a look at something, never a new page */
.tsheet { width: min(760px, calc(100vw - 32px)); max-height: min(860px, calc(100dvh - 48px)); padding: 0; border: 0; border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5), 0 0 0 1px var(--line); overflow: hidden; }
.tsheet::backdrop { background: color-mix(in srgb, var(--paper) 40%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tsheet[open] { animation: tsheet-in .32s cubic-bezier(.3, 1.3, .5, 1); } @keyframes tsheet-in { from { opacity: 0; translate: 0 18px; scale: .985; } }
.tsheet-in { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: inherit; }
.tsheet-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 14px 12px 24px; border-bottom: 1px solid var(--line); }
.tsheet-t { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 3vw, 28px); line-height: 1.1; }
.tsheet-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; } .tsheet-x svg { width: 22px; height: 22px; }
@media (hover: hover) { .tsheet-x:hover { background: var(--wash); } }
.tsheet-b { overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 28px; }
html.tsheet-on { overflow: hidden; }
@media (max-width: 640px) { .tsheet { margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: 92dvh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .tsheet-b { padding: 16px 16px 24px; } .tsheet-h { padding-left: 16px; } }
@media (prefers-reduced-motion: reduce) { .tsheet[open] { animation: none; } }

/* ---------- Lessons, lit: the spotlight, the card, the finish (shared/tour.js) ---------- */
.tour-spot { position: fixed; left: 0; top: 0; z-index: 900; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink), 0 0 0 200vmax rgba(8, 8, 8, .52); transition: transform .4s cubic-bezier(.2, .8, .2, 1), width .4s cubic-bezier(.2, .8, .2, 1), height .4s cubic-bezier(.2, .8, .2, 1); }
.tour-spot::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 2px solid var(--paper); animation: tour-pulse 1.8s ease-out infinite; }
@keyframes tour-pulse { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.06; } }
.tour-tip { position: fixed; left: 0; top: 0; z-index: 901; width: min(340px, calc(100vw - 24px)); padding: 16px 18px 14px; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 22px 50px -12px rgba(0, 0, 0, .45), 0 0 0 1px var(--line); display: grid; gap: 6px; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.tour-tip.in { animation: tour-in .35s cubic-bezier(.2, .8, .2, 1); } @keyframes tour-in { from { opacity: 0; } }
.tour-tip.dock { left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; transform: none !important; }
.tour-k { margin: 0; font-size: var(--t-12); color: var(--ink-3); }
.tour-t { margin: 0; font-size: var(--t-19, 19px); line-height: 1.2; font-weight: 600; }
.tour-b { margin: 0; font-size: var(--t-14); line-height: 1.5; color: var(--ink-2); }
.tour-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.tour-f .linkish { font-size: var(--t-13); color: var(--ink-2); min-height: 44px; }
.tour-next { position: relative; overflow: hidden; min-width: 104px; }
.tour-next.arm::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--paper) 22%, transparent); transform-origin: left; animation: tour-arm 1.6s linear forwards; }
@keyframes tour-arm { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tour-next span { position: relative; }
.tour-wait { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); font-size: var(--t-14); font-weight: 600; }
.tour-wait::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: tw-blink2 1.2s ease-in-out infinite; }
@keyframes tw-blink2 { 50% { opacity: .25; } }
.tour-wait.ok { background: var(--ink); color: var(--paper); } .tour-wait.ok::before { background: var(--paper); animation: none; }
.tour-dots { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 6px; }
.tour-dots li { width: 18px; height: 4px; border-radius: 2px; background: var(--line-2); } .tour-dots li.done { background: var(--ink-3); } .tour-dots li.on { background: var(--ink); width: 28px; }
.tour-done { width: min(440px, calc(100vw - 24px)); padding: 26px 26px 22px; border: 0; border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5), 0 0 0 1px var(--line); text-align: center; overflow: visible; }
.tour-done::backdrop { background: rgba(8, 8, 8, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tour-done[open] { display: grid; gap: 10px; justify-items: center; animation: tsheet-in .32s cubic-bezier(.3, 1.3, .5, 1); }
.tour-stk { width: 120px; height: 120px; object-fit: contain; margin-top: -70px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); animation: tour-stk .8s cubic-bezier(.2, 1.4, .4, 1) .2s both; }
@keyframes tour-stk { from { opacity: 0; rotate: -28deg; scale: .4; } to { opacity: 1; rotate: -6deg; scale: 1; } }
.tour-h { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 6vw, 40px); line-height: 1.05; }
.tour-led { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--wash); font-size: var(--t-13); line-height: 1.45; color: var(--ink-2); } .tour-led b { color: var(--ink); }
.tour-acts { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.tour-acts .btn { justify-content: center; }
@media (max-width: 420px) { .tour-acts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-tip { transition: none; } .tour-spot::after, .tour-tip.in, .tour-next.arm::before, .tour-stk, .tour-wait::before { animation: none; } .tour-next.arm::before { transform: none; } }

#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; } }