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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Header */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
.hdr-in { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); height: 64px; display: flex; align-items: center; gap: 28px; }
.hnav { display: flex; gap: 4px; flex: 1; min-width: 0; }
.hnav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; font-size: var(--t-15); text-decoration: none; color: var(--ink-2); border-radius: var(--r-pill); transition: color var(--dur) var(--ease); }
.hnav a[aria-current=page] { color: var(--ink); font-weight: 600; }
@media (hover: hover) { .hnav a:hover { color: var(--ink); } }
.htools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.menu { display: none; width: var(--tap); height: var(--tap); border: 1px solid var(--line-2); border-radius: 50%; background: transparent; cursor: pointer; padding: 10px; }
.menu svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1180px) {
  .hdr-in { gap: 12px; }
  .menu { display: inline-block; }
  .hnav { position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px; background: var(--paper); border-bottom: 1px solid var(--ink); display: none; }
  .hnav.open { display: flex; z-index: 60; max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }
  .hnav a { font-size: var(--t-20); color: var(--ink); min-height: 52px; padding: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .hdr .theme { display: none; }
  .hnav .theme { display: inline-flex; margin-top: 16px; align-self: flex-start; }
}
.hnav .theme { display: none; }
@media (max-width: 1180px) { .hnav.open .theme { display: inline-flex; } }
@media (max-width: 420px) { .htools .btn { padding: 0 12px; } }

/* Type */
.eyebrow { font-size: var(--t-13); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; font-weight: 500; }
.display { font-size: var(--t-hero); line-height: 1; letter-spacing: -0.02em; }
.h1 { font-size: var(--t-72); line-height: 1; letter-spacing: -0.015em; }
.h2 { font-size: var(--t-48); line-height: 1.06; letter-spacing: -0.01em; }
.h3 { font-size: var(--t-24); line-height: 1.2; letter-spacing: -0.02em; }
.lede { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 36em; margin: 0; }
.body { color: var(--ink-2); max-width: 62ch; margin: 0; }
.body b, .lede b { color: var(--ink); font-weight: 600; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Sections sit on a rule */
.sec { padding-block: clamp(44px, 6vw, 84px); }
.sec + .sec { border-top: 1px solid var(--line); }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 64px; align-items: end; margin-bottom: clamp(32px, 5vw, 64px); }
.sec-head > * { min-width: 0; }
@media (max-width: 860px) { .sec-head { grid-template-columns: minmax(0, 1fr); } }

/* Hero */
.hero { padding-block: clamp(28px, 4.5vw, 64px) clamp(36px, 5vw, 72px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-grid > * { min-width: 0; }
.hero-copy { display: grid; gap: 28px; transition: opacity 240ms var(--ease); }
.hero.drawing .hero-copy { opacity: var(--dim); }
.hero-grid .display { font-size: clamp(60px, 8.4vw, 136px); }
@media (max-width: 900px) { .hero-grid .display { font-size: clamp(56px, 15vw, 150px); } .hero-grid [data-pad] { max-width: 560px; } }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-height: 520px) and (orientation: landscape) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hero-grid .display { font-size: clamp(44px, 7vw, 80px); } }

/* Drawing pad */
.pad { display: grid; gap: 14px; }
.pad-surface { position: relative; aspect-ratio: 1 / 1; max-width: 100%; border: 1px solid var(--ink); border-radius: var(--r-m); overflow: hidden; background: var(--paper); touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
@media (pointer: coarse) { .pad-surface { cursor: default; } }
.pad-surface svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.pad-surface .gl { stroke: var(--guide); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pad-surface .gl.base { stroke: var(--ink); }
.pad-surface .ink { stroke: var(--ink); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pad-lbl { position: absolute; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-12); line-height: 1; color: var(--ink-3); pointer-events: none; transform: translateY(calc(-100% - 5px)); }
.pad-lbl span:last-child { font-variant-numeric: tabular-nums; }
.pad-lbl.base { color: var(--ink); }
.pad-hint { position: absolute; left: 12px; bottom: 12px; font-size: var(--t-12); color: var(--ink-3); pointer-events: none; transition: opacity var(--dur) var(--ease); }
.pad.used .pad-hint { opacity: 0; }
.pad-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pad-bar .chips { gap: 6px; }
.spec-row { display: flex; align-items: flex-end; gap: clamp(12px, 3vw, 28px); padding: 16px 0 0; border-top: 1px solid var(--line); overflow: hidden; }
.spec-row figure { margin: 0; display: grid; gap: 8px; justify-items: start; }
.spec-row svg { display: block; width: auto; }
.spec-row figcaption { font-size: var(--t-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Rule-set lists: items separated by hairlines, never boxed */
.cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); }
.cols > * { min-width: 0; border-top: 1px solid var(--ink); padding-top: 20px; display: grid; gap: 10px; align-content: start; }
.cols h3 { font-size: var(--t-20); letter-spacing: -0.02em; }
.cols > * > a { display: inline-flex; align-items: center; min-height: var(--tap); justify-self: start; }
.cols p { margin: 0; color: var(--ink-2); font-size: var(--t-15); line-height: 1.55; }
@media (max-width: 860px) { .cols { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (min-width: 600px) and (max-width: 860px) { .cols.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Steps by phase */
.phases { --n: 4; }
.phases ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.phases li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.phases li:last-child { border-bottom: 0; }
.phases li .i { font-size: var(--t-12); color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 4px; }
.phases li b { font-weight: 600; font-size: var(--t-15); }
.phases li p { grid-column: 2; font-size: var(--t-14); }
.phases .ph { font-size: var(--t-13); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }

/* Rows: a label column and a content column */
.rows { display: grid; border-top: 1px solid var(--ink); }
.row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: 8px 32px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.row > * { min-width: 0; margin: 0; }
.row h3 { font-size: var(--t-24); }
.row .for { color: var(--ink-3); font-size: var(--t-14); }
.row p { color: var(--ink-2); font-size: var(--t-15); }
@media (max-width: 760px) { .row { grid-template-columns: minmax(0, 1fr); } }

/* Formats and facts */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.fact { padding: 20px 20px 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; align-content: start; }
.fact b { font-size: var(--t-32); letter-spacing: -0.03em; font-weight: 600; line-height: 1.1; }
.fact span { font-size: var(--t-14); color: var(--ink-2); }

/* Plans */
.plans { --n: 3; }
.plans .price { font-size: var(--t-48); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plans .price small { font-size: var(--t-15); font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.plans ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.plans li { font-size: var(--t-14); color: var(--ink-2); padding: 9px 0; border-bottom: 1px solid var(--line); }
.plans .btn { justify-self: start; margin-top: 12px; }

/* Pulp block */
.pulp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 40px; align-items: start; }
@media (max-width: 600px) { .pulp { grid-template-columns: minmax(0, 1fr); } }

/* Price calculator on the marketplace page */
.calc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.calc > * { min-width: 0; }
.calc .base { font-size: var(--t-72); font-weight: 600; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr); } }

/* Example record */
.record { border: 1px solid var(--ink); border-radius: var(--r-m); padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; max-width: 720px; }
.record .tag { font-size: var(--t-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.record dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0; margin: 0; border-top: 1px solid var(--line); }
.record dt, .record dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t-14); }
.record dt { color: var(--ink-3); padding-right: 16px; }
.record dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Platforms */
.plat { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) auto; gap: 8px 32px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.plat > * { min-width: 0; margin: 0; }
.plat h3 { font-size: var(--t-24); }
.plat p { color: var(--ink-2); font-size: var(--t-15); }
.plat .state { font-size: var(--t-13); color: var(--ink-3); white-space: nowrap; }
.plat.here { border-top: 1px solid var(--ink); }
@media (max-width: 760px) { .plat { grid-template-columns: minmax(0, 1fr); } }

/* Big closing line */
.closer { display: grid; gap: 28px; justify-items: start; }

/* Footer */
.ftr { border-top: 1px solid var(--ink); padding-block: 48px calc(32px + env(safe-area-inset-bottom, 0px)); }
.ftr-in { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(32px, 6vw, 96px); }
.ftr-in > * { min-width: 0; }
.ftr h2 { font-size: var(--t-13); font-weight: 600; margin: 12px 0 12px; letter-spacing: 0; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ftr li a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-14); color: var(--ink-2); text-decoration: none; }
@media (hover: hover) { .ftr li a:hover { color: var(--ink); text-decoration: underline; } }
.ftr p { margin: 0; font-size: var(--t-14); color: var(--ink-2); max-width: 36ch; }
.ftr-brand p { margin-top: 12px; }
.ftr-base { max-width: var(--max); margin: 40px auto 0; padding-inline: var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: var(--t-13); color: var(--ink-3); }
@media (max-width: 760px) { .ftr-in { grid-template-columns: minmax(0, 1fr); } }

/* Brand type on the site: Typo Display for display lines and big figures. */
.display, .h1, .h2, .plans .price, .calc .base, .fact b, .phases .ph { font-family: var(--display); font-weight: 400; text-transform: lowercase; font-synthesis: none; }
.plans .price small { font-family: var(--sans); text-transform: none; }
.fact b { letter-spacing: 0; }
.phases .ph { font-size: var(--t-24); letter-spacing: 0; color: var(--ink); }
.eyebrow { font-weight: 600; color: var(--ink-2); }

/* Made in typodojo: the specimen with its pen path. */
.specimen { font-family: var(--display); text-transform: lowercase; font-size: clamp(44px, 9.6vw, 148px); line-height: 1.08; letter-spacing: 0.01em; margin: 0; overflow-wrap: anywhere; }
.spec-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.spec-bar p { margin: 0; font-size: var(--t-14); color: var(--ink-2); max-width: 52ch; }
.madein { font-size: var(--t-14); color: var(--ink-2); margin: 0; }
.madein b { color: var(--ink); }

/* Ink bands */
.inverse .rows { border-top-color: var(--ink); }
.inverse .row h3 { font-family: var(--display); font-weight: 400; text-transform: lowercase; font-size: var(--t-48); letter-spacing: 0; line-height: 1; }
.inverse .row { align-items: center; }

/* The pad fits Typo Display's lines. */
.ftr-line { font-family: var(--display); text-transform: lowercase; font-size: var(--t-32); line-height: 1.12; color: var(--ink); max-width: none !important; }
.ftr .madein { margin-top: 12px; }
.ftr { border-top: 0; }

/* Meet Typo */
.meet-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); align-items: center; }
.meet-grid > * { min-width: 0; }
.meet-dog { max-width: 420px; }
@media (max-width: 760px) { .meet-grid { grid-template-columns: minmax(0, 1fr); } .meet-dog { max-width: 260px; } }
.row .for b { color: var(--ink); font-weight: 600; }
.spec-bar p.mono { font-size: var(--t-13); }

/* ---------- The story: guarded scrollytelling ---------- */
.story { position: relative; border-top: 1px solid var(--line); }
.story-snap { position: absolute; margin-top: calc(-1 * var(--hdr, 64px)); left: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }
html.story-snap-on { scroll-snap-type: y proximity; }
.story-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px clamp(32px, 6vw, 88px); align-items: center; padding-block: clamp(32px, 6vh, 72px); }
.story-grid > * { min-width: 0; }
.story-copy { display: grid; gap: 28px; align-content: center; }
.story-beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.story-beats li { display: grid; gap: 14px; }
.story-beats .h2 { font-size: var(--t-72); line-height: 1; }
.story-beats .k { font-size: var(--t-13); color: var(--ink-3); font-variation-settings: "MONO" 1; }
.story-say { max-width: 460px; }
.story-art { position: relative; }
.story-box { position: relative; aspect-ratio: 1 / 1; max-width: min(100%, 560px); margin-inline: auto; }
.story-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.story-svg .gl { stroke: var(--guide); stroke-width: 1; vector-effect: non-scaling-stroke; }
.story-svg .gl.base { stroke: var(--ink); }
.story-svg .s-ink { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.story-svg .s-hole { fill: none; stroke: var(--paper); stroke-linecap: round; stroke-linejoin: round; }
.story-svg .s-spine { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 4 5; }
.story-svg .s-guide { stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 4; }
.story-svg .s-word { fill: var(--ink); font-family: var(--display); }
.story-box .pad-lbl { transition: none; }
.story-chips { position: absolute; left: 0; right: 0; bottom: 2%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.story-meter { position: absolute; right: 0; bottom: 2%; font-size: var(--t-13); color: var(--ink-2); }
/* Static (the guarded default): every beat is a readable block; the drawing shows its finished state. */
.story.static .story-beats li { opacity: 1; }
.story.static .story-rail { display: none; }
/* Live: the stage locks under the header while the track scrolls past. */
.story.live { height: calc(var(--beats) * 50vh + 100vh - var(--hdr, 64px)); }
.story.live .story-stage { position: sticky; top: var(--hdr, 64px); height: calc(100dvh - var(--hdr, 64px)); display: grid; align-items: center; overflow: hidden; }
.story.live .story-beats { display: grid; }
/* Beats hand over in sequence: the old one leaves before the new one arrives, so two lines never overlap. */
.story.live .story-beats li { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 120ms var(--ease), transform 120ms var(--ease), visibility 0s linear 120ms; pointer-events: none; }
.story.live .story-beats li[aria-current] { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 240ms var(--ease) 130ms, transform 240ms var(--ease) 130ms, visibility 0s linear 0s; }
.story.live .story-say blockquote { transition: opacity 200ms var(--ease); }
/* Rail: done beats dim, the current one at full strength, upcoming ones waiting; all light up at the finish. */
.story-rail { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); }
@media (min-width: 901px) { .story.live .story-grid { padding-right: calc(var(--gutter) + 132px); } }
.story-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.story-rail button { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: var(--tap); min-width: var(--tap); padding: 0 4px; border: 0; background: transparent; cursor: pointer; color: var(--ink); font-size: var(--t-13); transition: opacity var(--dur) var(--ease); }
.story-rail .dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.story-rail .now .dot { background: currentColor; transform: scale(1.3); }
.story-rail .done { opacity: var(--dim); }
.story-rail .done .dot { background: currentColor; }
.story-rail .next { opacity: var(--dim-soft); }
.story-rail.finish button { opacity: 1; }
.story-rail .lbl { opacity: 0; transform: translateX(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.story-rail .now .lbl { opacity: 1; transform: none; }
@media (hover: hover) { .story-rail button:hover { opacity: 1; } .story-rail button:hover .lbl { opacity: 1; transform: none; } }
.story-rail button:focus-visible .lbl { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 16px; }
  .story.live .story-art { order: -1; }
  .story.live .story-box { max-width: min(100%, 38dvh); }
  .story-beats .h2 { font-size: var(--t-48); }
  .story.live .story-say { display: none; }
  .story-rail { top: auto; bottom: 8px; transform: none; right: 50%; translate: 50% 0; }
  .story-rail ol { grid-auto-flow: column; gap: 0; }
  .story-rail .lbl { display: none; }
  .story-rail button { justify-content: center; }
}
@media (max-width: 900px) { .story.static .story-box { max-width: 360px; } }

/* ---------- Pinned sections: they lock while read, only when they fit (story.js decides) ---------- */
.pinned { position: sticky; top: var(--pin-top, 64px); }
.sec { background: var(--paper); position: relative; }
.sec.pinned + .sec, .sec.pinned + .story { box-shadow: 0 -1px 0 var(--line); }

/* ---------- Interaction details ---------- */
.hdr { transition: border-color var(--dur) var(--ease); }
.hdr.flat { border-bottom-color: transparent; }
.btn { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 120ms var(--ease); }
@media (hover: hover) { .btn:not(.ink):not([disabled]):hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } }
.btn:active:not([disabled]) { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } .story.live .story-beats li { transition: none; transform: none; } }
/* Small stages keep the rule labels short, so they stay clear of the drawing. */
.story-box { container-type: inline-size; }
.story-box .pad-lbl .short { display: none; }
@container (max-width: 480px) { .story-box .pad-lbl .full { display: none; } .story-box .pad-lbl .short { display: inline; } }

/* ---------- The belts ---------- */
.belts { display: grid; gap: 18px; align-content: center; }
.belts-q { font-family: var(--display); text-transform: lowercase; font-size: var(--t-32); line-height: 1.1; margin: 0; }
.belts-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--ink); }
.belts-list li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; grid-template-areas: "n b t" "bar bar bar"; gap: 6px 16px; align-items: baseline; padding: 16px 0 14px; border-bottom: 1px solid var(--line); transition: opacity var(--dur) var(--ease); }
.belts-list .bn { grid-area: n; font-family: var(--display); text-transform: lowercase; font-size: var(--t-32); line-height: 1; }
.belts-list .bb { grid-area: b; font-size: var(--t-14); font-weight: 600; }
.belts-list .bt { grid-area: t; font-size: var(--t-13); color: var(--ink-2); white-space: nowrap; }
.belts-list .bar { grid-area: bar; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.belts-list .bar i { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--ink); transform-origin: left; transform: scaleX(var(--f, 1)); border-radius: 2px; }
/* Focus by brightness: earned belts dim, the current one full, upcoming ones waiting; all light up at the finish. */
.belts-list li.done { opacity: var(--dim); }
.belts-list li.next { opacity: var(--dim-soft); }
.belts.finish .belts-list li { opacity: 1; }
.belts-note { margin: 0; font-size: var(--t-14); color: var(--ink-2); }

@media (max-width: 900px) { .story.live .belts { align-content: end; gap: 12px; } .story.live .belts .belts-note { display: none; } .story.live .belts .belts-q { font-size: var(--t-24); } .belts-list li { padding: 10px 0; } .belts-list .bn { font-size: var(--t-24); } }

/* The footer always paints above whatever scrolls behind it. */
.ftr { position: relative; z-index: 2; }

/* ---------- Brand: the dojo T at size ---------- */


/* ---------- Words that move ---------- */
.move-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); align-items: center; }
.move-grid > * { min-width: 0; }
.move-demo { border: 1px solid var(--line); border-radius: var(--r-m); padding: clamp(16px, 3vw, 36px); }
@media (max-width: 860px) { .move-grid { grid-template-columns: minmax(0, 1fr); } }
.hero-demo { align-self: center; }
.mstory-word { width: 100%; }
.mstory-word .tdm { max-height: 46vh; margin: 0 auto; }
.mstory-word .sorts rect { fill: none; stroke: var(--line-2); stroke-width: 6; }
.rules4 { counter-reset: r; }
.rules4 > div { counter-increment: r; }
.rules4 h3::before { content: counter(r, decimal-leading-zero); display: block; font-family: var(--sans); font-variation-settings: "MONO" 1; font-size: var(--t-12); color: var(--ink-3); margin-bottom: 8px; }

/* ---------- 404 ---------- */
.lost { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); align-items: center; }
.lost .pose { max-width: 360px; }
@media (max-width: 760px) { .lost { grid-template-columns: minmax(0, 1fr); } .lost .pose { max-width: 220px; } }
/* ---------- Ways through: a way back at the top of a sub-page, one next step at the bottom of every page ---------- */
.crumb { padding-top: clamp(16px, 2.4vw, 28px); }
.crumb + .hero, .crumb + section { padding-top: clamp(12px, 3vw, 40px); }
.crumb a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px 0 6px; margin-left: -6px; border-radius: 18px; color: var(--ink-2); text-decoration: none; font-size: var(--t-14); }
.crumb a svg { width: 16px; height: 16px; }
@media (hover: hover) { .crumb a:hover { color: var(--ink); background: radial-gradient(circle at center, color-mix(in srgb, var(--ink) 7%, transparent) 0, transparent 72%); } }
.wnext { padding-block: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); }
.next-in { display: grid; gap: 14px; justify-items: start; }
.next-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 24px; width: 100%; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line-2); border-radius: var(--r-l, 24px); color: var(--ink); text-decoration: none; transition: border-color var(--dur) var(--ease); }
.next-k { grid-column: 1; font-size: var(--t-14); color: var(--ink-2); }
.next-t { grid-column: 1; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.01em; }
.next-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: clamp(48px, 6vw, 64px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--paper); transition: transform var(--dur) var(--ease); }
.next-go svg { width: 45%; height: 45%; }
@media (hover: hover) { .next-main:hover { border-color: var(--ink); } .next-main:hover .next-go { transform: translateX(4px); } }
.next-alt { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--ink-2); font-size: var(--t-15); text-underline-offset: 3px; }
.next-alt svg { width: 16px; height: 16px; }
@media (hover: hover) { .next-alt:hover { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .next-main:hover .next-go { transform: none; } }
.story.live .story-stage.advance .story-art { cursor: pointer; }
/* The formats you take home: each opens a short, friendly word on what it is for */
.story-chips .chip { cursor: pointer; }
.story-chips .chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.story-tour { position: absolute; z-index: 4; left: 50%; bottom: calc(2% + 52px); transform: translateX(-50%); width: min(380px, 94%); display: grid; gap: 8px; padding: 14px 16px 14px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--paper); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line), 0 18px 40px -20px color-mix(in srgb, var(--ink) 40%, transparent); text-align: left; }
.story-tour[hidden] { display: none; }
.st-h { display: flex; align-items: center; gap: 10px; }
.st-t { font-weight: 600; font-size: var(--t-15); }
.st-n { margin-left: auto; font-size: var(--t-12); color: var(--ink-3); }
.st-x { display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px -6px 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.st-x svg { width: 16px; height: 16px; }
.st-p { margin: 0; font-size: var(--t-14); line-height: 1.5; color: var(--ink); }
.st-more { margin: 0; font-size: var(--t-13); color: var(--ink-3); line-height: 1.45; }
.st-f { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
@media (pointer: coarse) { .st-x { width: 44px; height: 44px; } .story-chips .chip { min-height: 44px; } }

/* the formats: an (i) in the sentence that names them, opening one floating card with a tab each */
.fmt-i { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; margin: 0 0 0 .18em; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); vertical-align: -.12em; cursor: pointer; position: relative; transition: color .2s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.fmt-i::before { content: ""; position: absolute; inset: -12px; }
.fmt-i svg { width: 100%; height: 100%; }
@media (hover: hover) { .fmt-i:hover { color: var(--ink); transform: scale(1.12); } }
.fmt-i[aria-expanded=true] { color: var(--ink); }
.fmt-i:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fmt-pop { position: fixed; z-index: 80; width: min(400px, calc(100vw - 24px)); padding: 10px 14px 14px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .2s ease, transform .28s cubic-bezier(.3, 1.3, .5, 1); }
.fmt-pop.on { opacity: 1; transform: none; }
.fmt-pop[hidden] { display: none; }
.fmt-h { display: flex; align-items: center; gap: 6px; }
.fmt-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.fmt-tabs button { min-height: 32px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-13); font-variation-settings: "MONO" 1; cursor: pointer; transition: background .2s ease, color .2s ease; }
.fmt-tabs button[aria-selected=true] { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .fmt-tabs button:hover:not([aria-selected=true]) { color: var(--ink); background: var(--wash); } }
.fmt-x { display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.fmt-x svg { width: 16px; height: 16px; }
.fmt-p { display: grid; gap: 10px; justify-items: start; padding: 12px 4px 0; }
.fmt-t { margin: 0; font-size: var(--t-15); line-height: 1.5; }
.fmt-more { margin: 0; font-size: var(--t-13); line-height: 1.45; color: var(--ink-3); }
@media (pointer: coarse) { .fmt-tabs button { min-height: 40px; } .fmt-x { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .fmt-pop, .fmt-i { transition: none; transform: none; } }
/* the modes: the same three columns on every row, so the names, the scope and the time each line up */
.belts-list li { grid-template-columns: minmax(0, 1fr) minmax(9rem, 12rem) 7.5rem; }
.belts-list .bb { text-align: left; }
.belts-list .bt { text-align: right; justify-self: end; }
@media (max-width: 520px) { .belts-list li { grid-template-columns: minmax(0, 1fr) minmax(0, 8rem) 5.5rem; gap: 4px 10px; } }
/* Round 14: Typo, the prints, the poster and stickers, the marketplace, Your fonts, typodojo.js and sign in.
   Prints are bands at the turns of a page: one per page, never behind text you need to read. */

/* ---------- Typo ---------- */
.inkdog { display: block; width: 100%; height: auto; color: var(--ink); overflow: visible; }
.say-typo .inkdog { width: 64px; }
.meet-dog .inkdog { max-width: 400px; margin-inline: auto; }

/* ---------- Bands ---------- */
.band { width: 100%; overflow: hidden; color: var(--ink); line-height: 0; }
.band-art { display: block; width: 100%; height: 100%; }
.band-ribbon, .band-wave, .band-signature { height: clamp(116px, 15.5vw, 216px); }
.band-textura { height: clamp(150px, 19vw, 300px); }
.band-practice { height: clamp(96px, 11vw, 146px); }
.band-year { height: clamp(110px, 12vw, 160px); }
.band-drip { height: clamp(144px, 17vw, 240px); }
.band-tatami { height: clamp(64px, 8vw, 96px); opacity: .5; }
.band-seals { position: absolute; inset: 0; height: auto; opacity: .16; }
.band-current { position: absolute; inset: 0; height: auto; }
.hero-band { padding-bottom: 0; }
.hero-band > .band { margin-top: clamp(40px, 6vw, 72px); }
.hero-band + .sec, .hero-band + .story { border-top: 0; }

/* ---------- Footer: the tatami floor, and a switch for Typo ---------- */
.ftr { padding-top: 0; }
.ftr > .band-tatami { margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.typo-switch { display: inline-flex; align-items: center; gap: 12px; min-height: var(--tap); margin: 16px 0 8px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--t-14); cursor: pointer; }
.typo-switch[aria-checked="true"] .sw { background: var(--ink); border-color: var(--ink); }
.typo-switch[aria-checked="true"] .sw::after { transform: translateX(16px); background: var(--paper); }
.typo-switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }

/* ---------- Home: Typo's voice, the poster ---------- */
.voice { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.voice li { display: grid; gap: 10px; align-content: start; padding-top: 14px; border-top: 1px solid var(--ink); }
.voice b { font-family: var(--display); font-weight: 400; font-size: var(--t-20); text-transform: lowercase; }
.voice p { margin: 0; font-size: var(--t-17); line-height: 1.45; color: var(--ink); }
.voice-rules { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .voice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .voice, .voice-rules { grid-template-columns: minmax(0, 1fr); } }

.poster-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(32px, 6vw, 96px); align-items: center; }
.poster-grid > * { min-width: 0; }
@media (max-width: 860px) { .poster-grid { grid-template-columns: minmax(0, 1fr); } .poster { max-width: 460px; } }
.poster { margin: 0; aspect-ratio: 600 / 840; display: flex; flex-direction: column; background: #0a0a0a; color: #f3f2ee; border: 1px solid #2a2a29; border-radius: 4px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.35); container-type: inline-size; }
.poster-rib { flex: 0 0 39%; color: #f3f2ee; }
.poster-rib svg { display: block; width: 100%; height: 100%; }
.poster-in { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4cqw; padding: 6cqw 8cqw 7cqw; }
.poster-k { font-size: max(10px, 2.1cqw); color: #b5b4af; font-variation-settings: "MONO" 1; }
.poster-tx { display: block; width: 100%; height: auto; color: #f3f2ee; }
.poster-line { margin: 0; font-family: var(--display); font-size: 6.6cqw; line-height: 1.05; color: #f3f2ee; }
.poster-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.poster-mark { display: inline-flex; align-items: center; gap: 1.6cqw; font-family: var(--display); font-size: 4cqw; color: #f3f2ee; }
.poster-mark svg { width: 4.4cqw; height: 4.4cqw; }

/* ---------- Stickers ---------- */
.sticker { display: block; width: 100%; height: auto; overflow: visible; }
.stickers-sec { background: var(--wash); }
.sticker-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); align-items: end; }
.sticker-grid li { display: grid; gap: 4px; justify-items: center; }
.sticker-grid span { font-size: var(--t-13); color: var(--ink-2); font-variation-settings: "MONO" 1; }
@media (max-width: 860px) { .sticker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Brand page ---------- */
.inkdog-row { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.inkdog-row li { display: grid; gap: 8px; justify-items: center; font-size: var(--t-13); color: var(--ink-3); }
.inkdog-row .inkdog { max-width: 140px; }
.prints { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.prints li { display: grid; gap: 8px; }
.prints .band { border: 1px solid var(--line); border-radius: var(--r-m); height: 140px; }
.prints b { font-family: var(--display); font-weight: 400; font-size: var(--t-24); }
.prints span { font-size: var(--t-14); color: var(--ink-2); }
@media (max-width: 760px) { .prints { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 404: water around the stone ---------- */
.lost-sec { position: relative; min-height: min(78vh, 760px); display: grid; align-items: end; overflow: hidden; }
.lost-sec .band-current { color: var(--ink); opacity: .9; }
.lost-sec .lost { position: relative; display: block; padding-block: clamp(32px, 6vw, 64px); }
.lost-card { max-width: 560px; background: var(--paper); border: 1px solid var(--ink); border-radius: var(--r-m); padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; }
.lost-card .eyebrow { margin: 0; }

/* ---------- Pricing: a year of practice ---------- */
.price-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px clamp(32px, 5vw, 72px); align-items: center; }
.price-grid > * { min-width: 0; }
.year-fig { margin: 0; display: grid; gap: 10px; }
.year-box { position: relative; justify-self: start; width: min(100% - 100px, 360px); }
.year-grid { display: block; width: 100%; height: auto; color: var(--ink); }
.year-fig figcaption { max-width: 360px; }
.year-fig figcaption { font-size: var(--t-13); color: var(--ink-3); }
@media (max-width: 860px) { .price-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Marketplace ---------- */
.mk-hero { padding-bottom: clamp(48px, 7vw, 96px); }
.mk-hero .band-textura { opacity: .9; }
.mk-head { padding-top: clamp(32px, 5vw, 56px); display: grid; gap: 22px; }
.mk-head .eyebrow { margin: 0; }
.mk-tools { display: grid; gap: 20px; margin-bottom: 32px; }
.pv-bar { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 16px 24px; align-items: end; }
.pv-bar label { display: grid; gap: 8px; }
.pv-bar .text { width: 100%; box-sizing: border-box; }
.pv-size input { width: 100%; }
@media (max-width: 640px) { .pv-bar { grid-template-columns: minmax(0, 1fr); } }
.mk-count { margin: 0; font-size: var(--t-13); color: var(--ink-3); }
.mk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .mk-grid { grid-template-columns: minmax(0, 1fr); } }
.mk-card[hidden] { display: none; }
.mk-card a { height: 100%; box-sizing: border-box; display: grid; grid-template-rows: minmax(140px, auto) auto; gap: 18px; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--r-m); color: var(--ink); text-decoration: none; transition: border-color var(--dur) var(--ease); }
@media (hover: hover) { .mk-card a:hover { border-color: var(--ink); } }
.mk-card a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pv-line { margin: 0; font-size: 56px; line-height: 1.15; overflow-wrap: normal; word-break: normal; padding-inline: .05em; min-width: 0; align-self: center; color: var(--ink); }
.pv-miss { font-family: var(--sans); font-size: .62em; color: var(--ink-3); }
.pv-note { margin: -12px 0 24px; font-size: var(--t-13); color: var(--ink-3); max-width: 70ch; }
.mk-meta { display: grid; gap: 2px; font-size: var(--t-14); color: var(--ink-2); }
.mk-meta b { font-size: var(--t-17); color: var(--ink); font-weight: 600; }
.mk-lic { color: var(--ink); font-variation-settings: "MONO" 1; font-size: var(--t-13); margin-top: 6px; }
.mk-yours a { border-style: dashed; border-color: var(--line-2); }
.mk-empty .masu-art { width: min(220px, 70%); height: auto; color: var(--ink); opacity: .55; display: block; }

/* ---------- A font's page ---------- */
.font-hero { border-bottom: 1px solid var(--line); }
.font-head { padding-block: clamp(32px, 5vw, 56px); display: grid; gap: 18px; }
.font-head .eyebrow { margin: 0; }
.font-head .eyebrow a { color: inherit; }
.font-name { margin: 0; font-weight: 400; font-size: clamp(56px, 11vw, 150px); line-height: 1; overflow-wrap: anywhere; }
[data-preview] > .wrap > .pv-bar { margin-bottom: 28px; }
.pv-line[style*="font-size: 1"] { line-height: 1.05; }
.waterfall { margin-top: clamp(32px, 5vw, 56px); display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 24px; }
.waterfall p { margin: 0; line-height: 1.15; overflow-wrap: anywhere; color: var(--ink); }
.spec-strokes { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: 12px; }
.spec-art { display: block; width: 100%; height: auto; max-height: 160px; color: var(--ink); }
.lic-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(32px, 6vw, 96px); align-items: center; }
.lic-grid > * { min-width: 0; }
@media (max-width: 860px) { .lic-grid { grid-template-columns: minmax(0, 1fr); } }

/* License certificate, on stamped seals */
.cert-wrap { position: relative; display: grid; gap: 16px; padding: clamp(24px, 5vw, 56px); border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); }
.cert { position: relative; max-width: 440px; width: 100%; margin-inline: auto; box-sizing: border-box; padding: clamp(20px, 3vw, 30px); background: #ffffff; color: #0a0a0a; border: 1.5px solid #0a0a0a; border-radius: 14px; display: grid; gap: 12px; box-shadow: 0 20px 40px rgba(0,0,0,.25); }
.cert-k { font-size: var(--t-12); letter-spacing: .08em; text-transform: uppercase; color: #4a4a48; }
.cert-font { margin: 0; font-weight: 400; font-size: clamp(32px, 4vw, 44px); line-height: 1.05; color: #0a0a0a; }
.cert-dl { margin: 0; display: grid; gap: 8px; }
.cert-dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding-top: 8px; border-top: 1px solid #e3e2de; font-size: var(--t-14); }
.cert-dl dt { color: #7c7b77; } .cert-dl dd { margin: 0; color: #0a0a0a; overflow-wrap: anywhere; }
.cert-seal { justify-self: end; width: 64px; }
.cert-seal .inkdog { color: #0a0a0a; }
.cert-in { position: relative; display: grid; gap: 8px; max-width: 440px; width: 100%; margin-inline: auto; }
.cert-in .label { color: var(--ink-2); }
.cert-in .text { width: 100%; box-sizing: border-box; background: var(--paper); }
.cert-note { position: relative; margin: 0 auto; max-width: 440px; font-size: var(--t-13); color: var(--ink-2); background: var(--paper); padding: 2px 6px; border-radius: 4px; }

/* ---------- Your fonts ---------- */
.y-year { margin: 0; display: grid; gap: 18px; }
.y-year figcaption { display: grid; gap: 8px; }
.y-year figcaption .eyebrow { margin: 0; }
.y-year figcaption > span:last-child { color: var(--ink-2); font-size: var(--t-15); }
.y-art svg { display: block; width: 100%; max-width: 420px; height: auto; color: var(--ink); }
.y-cols { margin-top: clamp(48px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(32px, 6vw, 96px); padding-top: 32px; border-top: 1px solid var(--line); }
.y-cols > * { min-width: 0; }
@media (max-width: 860px) { .y-cols { grid-template-columns: minmax(0, 1fr); } }
.y-cols h2, .y-motions h2 { margin: 0 0 20px; }
.where { list-style: none; margin: 0; padding: 0; counter-reset: w; }
.where li { counter-increment: w; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.where li::before { content: counter(w, decimal-leading-zero); grid-row: span 2; font-size: var(--t-13); color: var(--ink-3); font-variation-settings: "MONO" 1; padding-top: 3px; }
.where b { font-weight: 600; } .where p { margin: 0; color: var(--ink-2); font-size: var(--t-15); line-height: 1.45; }
.y-motions { margin-top: clamp(48px, 7vw, 96px); padding-top: 32px; border-top: 1px solid var(--line); }
.ym { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .ym { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ym { grid-template-columns: minmax(0, 1fr); } }
.ym-card { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; }
.ym-stage { display: grid; place-items: center; min-height: 110px; padding: 8px; border: 0; border-radius: var(--r-s); background: var(--wash); color: var(--ink); cursor: pointer; }
.ym-stage svg { width: 100%; max-height: 90px; }
.ym-stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ym-meta { display: grid; gap: 2px; font-size: var(--t-14); color: var(--ink-2); }
.ym-meta b { color: var(--ink); } .ym-meta code { font-size: var(--t-12); color: var(--ink-3); overflow-wrap: anywhere; }
.ym-none { grid-column: 1 / -1; color: var(--ink-2); display: grid; gap: 12px; justify-items: start; }
.ym-none p { margin: 0; }

/* ---------- Sign in ---------- */
.signin-sec .band-practice { border-bottom: 1px solid var(--line); }
.signin-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 40px clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(40px, 6vw, 80px); }
.signin-grid > * { min-width: 0; }
@media (max-width: 860px) { .signin-grid { grid-template-columns: minmax(0, 1fr); } .signin-side { display: none; } }
.signin-card { max-width: 520px; display: grid; gap: 20px; }
.signin-card .eyebrow { margin: 0; }
.signin-btns { display: grid; gap: 10px; }
.btn.sso { justify-content: center; gap: 10px; width: 100%; }
.btn.sso svg { width: 20px; height: 20px; flex: none; }
.or { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--ink-3); font-size: var(--t-13); }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.signin-form { display: grid; gap: 12px; }
.signin-form label { display: grid; gap: 8px; }
.signin-form .text { width: 100%; box-sizing: border-box; }
.signin-status { margin: 0; min-height: 1.4em; font-size: var(--t-15); color: var(--ink); }
.signin-fine { margin: 0; font-size: var(--t-13); color: var(--ink-3); }
.signin-side { display: grid; gap: 16px; justify-items: center; text-align: center; color: var(--ink-2); }
.signin-side .inkdog { max-width: 300px; }

/* ---------- typodojo.js ---------- */
.lib-demo { display: grid; gap: 8px; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-m); }
.lib-word { margin: 0; font-size: clamp(48px, 7vw, 96px); line-height: 1.1; color: var(--ink); }
.lib-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); align-items: center; }
.lib-grid > * { min-width: 0; }
@media (max-width: 860px) { .lib-grid { grid-template-columns: minmax(0, 1fr); } }
.code { margin: 0; padding: 20px 22px; border-radius: var(--r-m); background: var(--wash); color: var(--ink); font-size: var(--t-14); line-height: 1.6; overflow-x: auto; white-space: pre; }
@media (max-width: 640px) { .code { white-space: pre-wrap; overflow-wrap: anywhere; } }
.code:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.typo-move { display: inline-block; max-width: 100%; }
.typo-move svg { display: block; overflow: visible; }

/* ---------- small art ---------- */
.rings-art, .loop-art, .masu-art, .beltline { display: block; color: var(--ink); }
.rings-art .rg { transform-origin: 200px 200px; animation: rg 2400ms var(--ease) infinite; animation-delay: calc(var(--i) * 90ms); }
@keyframes rg { 0% { opacity: .1; transform: scale(.94); } 50% { opacity: 1; } 100% { opacity: .1; transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .rings-art .rg { animation: none; } }

/* ---------- Round 15 ---------- */
/* Prints at the turns between sections */
.turn { line-height: 0; }
.turn .band { height: clamp(80px, 10vw, 136px); }
.turn .band-practice { height: clamp(88px, 11vw, 146px); }
.turn .band-textura { height: clamp(104px, 12.7vw, 196px); }
.turn .band-wave { height: clamp(88px, 10.9vw, 164px); }
.turn .band-seals { position: static; height: clamp(90px, 11vw, 150px); opacity: .55; }
.turn + .sec, .turn + .story { border-top: 0; }
.y-cols + .turn, .yours-hero .turn { margin-top: clamp(48px, 7vw, 96px); }
/* A brush for each plan: hairline, then heavier */
.grade-art { display: block; width: 100%; height: 34px; margin-bottom: 14px; color: var(--ink); }
/* The poster stays in theme with its section; the sticker is stuck on it, at a slant */
.poster-wrap { position: relative; }
@media (max-width: 860px) { .poster-wrap { max-width: 460px; } }
.sticker-grid li:nth-child(8n+1) .sticker { transform: rotate(-4deg); } .sticker-grid li:nth-child(8n+2) .sticker { transform: rotate(3deg); }
.sticker-grid li:nth-child(8n+3) .sticker { transform: rotate(-2deg); } .sticker-grid li:nth-child(8n+4) .sticker { transform: rotate(5deg); }
.sticker-grid li:nth-child(8n+5) .sticker { transform: rotate(-3deg); } .sticker-grid li:nth-child(8n+6) .sticker { transform: rotate(2deg); }
.sticker-grid li:nth-child(8n+7) .sticker { transform: rotate(-5deg); } .sticker-grid li:nth-child(8n) .sticker { transform: rotate(3deg); }
/* The footer follows the theme */
.ftr { background: var(--paper); color: var(--ink); }
.ftr > .band-tatami { opacity: .35; }

/* ---------- Accounts: the header link, sign up, profile, practice calendar ---------- */
.su-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; font-size: var(--t-13); color: var(--ink-3); counter-reset: s; }
.su-steps li { counter-increment: s; display: inline-flex; align-items: center; gap: 8px; }
.su-steps li::before { content: counter(s); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 12px; }
.su-steps li[aria-current] { color: var(--ink); font-weight: 600; }
.su-steps li[aria-current]::before { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.su-steps li.done { color: var(--ink-2); }
.su-steps li.done::before { content: "✓"; border-color: var(--ink); color: var(--ink); }
.su-step { display: grid; gap: 20px; }
.su-step[hidden] { display: none; }
.su-step h1:focus { outline: none; }
.su-field { display: grid; gap: 8px; }
.su-field .text { width: 100%; box-sizing: border-box; }
.su-handle { display: flex; align-items: center; gap: 6px; }
.su-handle > span { font-size: var(--t-20); color: var(--ink-3); }
.su-note { font-size: var(--t-13); color: var(--ink-3); }
.su-note.bad { color: var(--ink); font-weight: 600; }
.su-rings .rings-art { width: 120px; height: 120px; }
.su-local { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: var(--t-14); color: var(--ink-2); }

.prof-sec { padding-top: clamp(32px, 5vw, 64px); }
.prof-empty { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); align-items: center; }
.prof-empty > * { min-width: 0; }
.prof-empty-art .inkdog { max-width: 320px; }
@media (max-width: 760px) { .prof-empty { grid-template-columns: minmax(0, 1fr); } .prof-empty-art .inkdog { max-width: 200px; } }
.prof { display: grid; gap: clamp(32px, 5vw, 56px); }
.prof-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 28px; align-items: center; }
@media (max-width: 760px) { .prof-head { grid-template-columns: auto minmax(0, 1fr); } .prof-acts { grid-column: 1 / -1; } }
.prof-av { position: relative; width: clamp(88px, 12vw, 132px); aspect-ratio: 1; color: var(--ink); }
.prof-av .inkdog { position: absolute; inset: 0; }
.prof-av span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: clamp(40px, 6vw, 64px); line-height: 1; padding-bottom: 6%; }
.prof-name { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--t-48); line-height: 1.05; text-transform: lowercase; overflow-wrap: anywhere; }
.prof-handle { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: var(--t-17); color: var(--ink-2); }
.prof-vis { font-size: var(--t-12); padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--ink); color: var(--ink); }
.prof-vis.priv { border-style: dashed; color: var(--ink-2); border-color: var(--line-2); }
.prof-bio { margin: 10px 0 0; font-size: var(--t-17); color: var(--ink); max-width: 46ch; }
.prof-meta { margin: 8px 0 0; font-size: var(--t-13); color: var(--ink-3); }
.prof-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.prof-local { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: var(--t-14); color: var(--ink-2); max-width: 760px; }
.prof-stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.prof-stats > div { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--ink); }
.prof-stats dt { font-size: var(--t-13); color: var(--ink-3); }
.prof-stats dd { margin: 0; font-family: var(--display); font-size: var(--t-48); line-height: 1.05; }
.prof-stats span { font-size: var(--t-13); color: var(--ink-2); }
@media (max-width: 760px) { .prof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prof-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.prof-row h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--t-32); text-transform: lowercase; }
.prof-belt { font-size: var(--t-13); color: var(--ink-2); }
.pcal { padding: 18px 18px 14px; border: 1px solid var(--line); border-radius: var(--r-m); }
.pcal-svg svg { display: block; max-width: 100%; height: auto; color: var(--ink); font-family: var(--sans); }
.pcal-svg svg:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.pcal .pc { stroke-width: 1; }
.pcal .l0 { fill: none; stroke: var(--line-2); }
.pcal .l1 { fill: var(--ink); opacity: .28; } .pcal .l2 { fill: var(--ink); opacity: .52; } .pcal .l3 { fill: var(--ink); opacity: .76; } .pcal .l4 { fill: var(--ink); }
.pcal .today { stroke: var(--ink); stroke-width: 1.5; }
.pcal .pcur { fill: none; stroke: var(--ink); stroke-width: 1.5; pointer-events: none; }
.pcal .pm, .pcal .pd { font-size: 10px; fill: var(--ink-3); }
.pcal-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font-size: var(--t-12); color: var(--ink-3); }
.pcal-legend span { margin: 0 4px; }
.pcal-legend i { width: 11px; height: 11px; border-radius: 2.5px; box-sizing: border-box; }
.pcal-legend .l0 { border: 1px solid var(--line-2); } .pcal-legend .l1 { background: var(--ink); opacity: .28; } .pcal-legend .l2 { background: var(--ink); opacity: .52; } .pcal-legend .l3 { background: var(--ink); opacity: .76; } .pcal-legend .l4 { background: var(--ink); }
.pcal-line { margin: 8px 0 0; min-height: 1.4em; font-size: var(--t-14); color: var(--ink-2); }
.pf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } }
.pf-card > a, .pf-none { height: 100%; box-sizing: border-box; display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-m); color: var(--ink); text-decoration: none; }
.pf-none { border-style: dashed; border-color: var(--line-2); }
@media (hover: hover) { .pf-card > a:hover { border-color: var(--ink); } }
.pf-art { min-height: 80px; display: grid; align-items: center; }
.pf-art svg { display: block; height: 72px; width: auto; max-width: 100%; color: var(--ink); }
.pf-ph { margin: 0; font-family: var(--display); font-size: 40px; }
.pf-meta { display: grid; gap: 2px; font-size: var(--t-14); color: var(--ink-2); }
.pf-meta b { color: var(--ink); font-size: var(--t-17); }
.pf-tag { font-size: var(--t-12); color: var(--ink-3); }
.pedit { width: min(520px, calc(100vw - 24px)); box-sizing: border-box; padding: 24px; border: 1.5px solid var(--ink); border-radius: 20px; background: var(--paper); color: var(--ink); }
.pedit::backdrop { background: rgba(0,0,0,.45); }
.pedit form { display: grid; gap: 16px; }
.pedit h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 32px; text-transform: lowercase; }
.pedit-out { margin: 0; font-size: var(--t-13); color: var(--ink-3); }
@media (max-width: 860px) { .signin-side { display: none; } }

/* ---------- Round 16: the bar, the account menu, and the footer in two columns ---------- */
.hnav a { white-space: nowrap; }
.hsub { position: relative; display: flex; }
.hsub-menu { position: absolute; top: 100%; left: -8px; z-index: 40; min-width: 260px; padding: 8px; display: none; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 16px; box-shadow: 0 14px 34px rgba(0,0,0,.12); }
.hsub-menu a { display: grid !important; gap: 2px; min-height: 0 !important; padding: 10px 12px !important; border-radius: 10px !important; color: var(--ink) !important; }
.hsub-menu a b { font-weight: 600; font-size: var(--t-15); }
.hsub-menu a span { font-size: var(--t-13); color: var(--ink-3); font-weight: 400; }
.hsub-menu a[aria-current=page] { background: var(--wash); }
@media (hover: hover) and (min-width: 1181px) { .hsub:hover .hsub-menu, .hsub:focus-within .hsub-menu { display: grid; } .hsub-menu a:hover { background: var(--wash); } }
@media (max-width: 1180px) {
  .hsub { flex-direction: column; }
  .hsub-menu { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; min-width: 0; padding: 6px 0 10px 18px; border: 0; box-shadow: none; background: transparent; border-radius: 0; }
  .hsub-menu a { min-height: 44px !important; padding: 0 !important; align-content: center; border-bottom: 0 !important; }
  .hsub-menu a span { display: none; }
}
.nav-acct { display: none; }
@media (max-width: 1180px) { .nav-acct { display: grid; } }
.acct { display: flex; align-items: center; position: relative; }
.acct-in { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 10px; font-size: var(--t-15); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .acct-in:hover { color: var(--ink); } }
@media (max-width: 1180px) { .acct-in { display: none; } }
.acct-btn { width: var(--tap); height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.acct-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink); font-family: var(--display); font-size: 19px; line-height: 1; color: var(--ink); padding-bottom: 2px; box-sizing: border-box; }
.acct-btn[aria-expanded=true] .acct-av { background: var(--ink); color: var(--paper); }
.acct-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; width: 240px; padding: 8px; display: grid; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 16px; box-shadow: 0 14px 34px rgba(0,0,0,.14); }
.acct-menu[hidden] { display: none; }
.acct-who { margin: 0 0 6px; padding: 8px 12px 10px; display: grid; gap: 2px; border-bottom: 1px solid var(--line); font-size: var(--t-14); }
.acct-who span { color: var(--ink-3); font-size: var(--t-13); }
.acct-menu a, .acct-menu button { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 0; background: none; font: inherit; font-size: var(--t-15); color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; }
.acct-menu button { color: var(--ink-2); font-size: var(--t-14); margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
@media (hover: hover) { .acct-menu a:hover, .acct-menu button:hover { background: var(--wash); } }
.acct-menu :focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.ftr-brand > p:not(.ftr-line) { margin-top: 16px; }
.ftr-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
@media (max-width: 480px) { .ftr-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.poster-hero { padding-bottom: clamp(40px, 6vw, 72px); }
.poster-hero .poster-h { font-size: clamp(46px, 6.4vw, 96px); line-height: .98; }
.poster-hero .poster { max-width: 460px; }
.meet-dog { position: relative; }
.sticker-slant { position: absolute; width: 60%; right: -14%; bottom: -6%; transform: rotate(-9deg); pointer-events: none; }
@media (max-width: 860px) { .sticker-slant { right: -2%; width: 52%; bottom: -10%; } }
.lic-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.lic-list li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.lic-list b { font-weight: 600; } .lic-list span { color: var(--ink-2); font-size: var(--t-15); }
@media (max-width: 760px) { .lic-list { grid-template-columns: minmax(0, 1fr); } .lic-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.draw-cta .display { font-size: clamp(56px, 9vw, 136px); }
/* Animation: Motion and Interaction */
.subnav { display: flex; gap: 6px; margin-top: clamp(28px, 4vw, 48px); }
.subnav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--ink-2); text-decoration: none; font-size: var(--t-15); }
.subnav a[aria-current=page] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: hover) { .subnav a:not([aria-current]):hover { color: var(--ink); border-color: var(--ink); } }
.ix-hero { min-height: 220px; display: grid; place-items: center; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-m); color: var(--ink); cursor: default; }
.ix-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .ix-grid { grid-template-columns: minmax(0, 1fr); } }
.ix { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.ix-stage { min-height: 170px; display: grid; place-items: center; padding: 20px 28px; background: var(--wash); color: var(--ink); touch-action: manipulation; user-select: none; -webkit-user-select: none; overflow: hidden; }
.ix-stage svg, .ix-hero svg { width: min(100%, 420px); height: auto; max-height: 150px; overflow: visible; }
.ix-drag { touch-action: none; cursor: grab; } .ix-drag.held { cursor: grabbing; }
.ix-stage:focus-visible, .ix-hero:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.ix-meta { display: grid; gap: 8px; align-content: start; padding: 18px 20px 20px; }
.ix-meta h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--t-24); text-transform: lowercase; }
.ix-meta p { margin: 0; color: var(--ink-2); font-size: var(--t-15); line-height: 1.45; }
.ix-meta code { font-size: var(--t-13); color: var(--ink); }
.ix-keys { font-size: var(--t-13); color: var(--ink-3); }
.ix-in .text { width: 100%; box-sizing: border-box; }
/* Bands keep their print legible on phones: taller, so the art is not shrunk to a thread */
@media (max-width: 640px) {
  .turn .band { height: 96px; } .turn .band-practice { height: 104px; } .turn .band-seals { height: 110px; }
  .band-ribbon, .band-wave, .band-signature { height: 124px; } .band-textura { height: 146px; } .band-drip { height: 144px; }
}
@media (max-width: 480px) { .acct { display: none; } }
.poster-hero .poster-h { font-size: clamp(44px, 5.4vw, 84px); }
.ix-copy { justify-self: start; margin-top: 4px; }
/* ---------- Your fonts: the library ---------- */
.lib-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; }
.lib-top .hero-copy { max-width: 640px; }
.lib-cta { margin: 0; }
.lib { margin-top: clamp(40px, 6vw, 72px); }
.lib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.lib-head h2 { margin: 0; }
.lib-count { font-size: var(--t-13); color: var(--ink-3); }
.lib-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.lib-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); min-width: 0; transition: border-color var(--dur) var(--ease); }
.lib-card.is-open { border-color: var(--ink); }
.lib-art { display: grid; place-items: center; min-height: 120px; padding: 12px; border-radius: var(--r-s); background: var(--wash); color: var(--ink); text-decoration: none; overflow: hidden; }
.lib-art svg { display: block; max-width: 100%; height: 76px; width: auto; }
.lib-art:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fl-word { font-family: var(--display); font-size: var(--t-32); line-height: 1.1; overflow-wrap: anywhere; text-align: center; }
.lib-meta { min-width: 0; }
.lib-name { margin: 0 0 4px; font-family: var(--display); font-weight: 400; font-size: var(--t-24); line-height: 1.15; overflow-wrap: anywhere; }
.lib-meta p { margin: 0; color: var(--ink-2); font-size: var(--t-14); }
.lib-now { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border: 1px solid var(--ink); border-radius: var(--r-pill); font-size: var(--t-12); font-weight: 600; color: var(--ink); }
.lib-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; align-self: end; }
.lib-acts .btn.ink { min-width: 88px; }
.lib-del { color: var(--ink-2); }
.lib-del.armed, .chip.armed { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.lib-rename { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 6px; }
.lib-rename .text { flex: 1 1 160px; min-width: 0; font-size: var(--t-18); }
.lib-vers { border-top: 1px solid var(--line); padding-top: 10px; }
.lib-vers summary { cursor: pointer; font-size: var(--t-14); color: var(--ink-2); min-height: 32px; display: flex; align-items: center; }
.lib-vers ol { list-style: none; margin: 6px 0 0; padding: 0; }
.lib-vers li, .lc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.lv-n, .lc-n { font-weight: 500; overflow-wrap: anywhere; }
.lv-d, .lc-d { grid-column: 1; font-size: var(--t-13); color: var(--ink-3); }
.lv-a, .lc-a { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.lc-row .lib-rename { grid-column: 1; }
@media (max-width: 520px) { .lv-a, .lc-a { grid-column: 1; grid-row: auto; justify-content: flex-start; } }
.lib-none { grid-column: 1 / -1; color: var(--ink-2); }
.lib-empty { display: grid; gap: 10px; justify-items: start; padding: 28px; border: 1px dashed var(--line-2); border-radius: var(--r-m); }
.lib-empty h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--t-24); color: var(--ink); }
.lib-empty p { margin: 0 0 6px; }
.lib-note { margin: 0; color: var(--ink-2); font-size: var(--t-15); }
.lib-note a { color: var(--ink); }
.lc { list-style: none; margin: 0 0 24px; padding: 0; }
.lib-cloud .label { margin-top: 4px; }
.ym-card { position: relative; }
.ym-del { justify-self: start; }
.yours-hero .y-motions { margin-top: 0; }
.yours-hero .y-cols { margin-top: clamp(48px, 7vw, 96px); }
.lib-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 20px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: var(--t-14); max-width: calc(100vw - 32px); z-index: 70; opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.lib-toast.on { opacity: 1; transform: translate(-50%, 0); }
.lib-toast .btn { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 40%, transparent); }
.lib-toast:has([data-lib-undo][hidden]) { padding-right: 20px; }
.lib-toast[hidden] { display: none; }
.lib-hero { padding-top: clamp(24px, 4vw, 56px); }
.lib-hero .h1.lib-h1 { font-size: clamp(40px, 5.4vw, 72px); }
.lib-top .hero-copy { max-width: 760px; }
.lib-hero .lede { margin-bottom: 0; }
/* How a font was made: one label on every font */
.prov { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 4px 12px 4px 8px; border: 1px solid var(--ink); border-radius: 999px; font-size: var(--t-12); font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.3; }
.prov i { width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--pi) center / contain no-repeat; mask: var(--pi) center / contain no-repeat; }
.prov[data-prov="hand"] { --pi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 18c3-1 4-9 7-9s1 7 4 7 3-5 5-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.prov[data-prov="ai"] { --pi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2z' fill='black'/%3E%3C/svg%3E"); border-style: dashed; }
.prov[data-prov="upload"] { --pi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16V5M7 10l5-5 5 5M5 19h14' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); border-color: var(--line-2); color: var(--ink-2); }
.mk-meta .prov { margin-bottom: 6px; }
.prov-lg { margin: 6px 0 14px; padding: 6px 16px 6px 10px; font-size: var(--t-14); }
.prov-lg span { font-weight: 400; color: var(--ink-2); margin-left: 4px; }
@media (max-width: 560px) { .prov-lg span { display: none; } }
.prov-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .prov-legend { grid-template-columns: minmax(0, 1fr); } }
.prov-legend li { display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line-2); }
.prov-legend p { margin: 0; color: var(--ink-2); line-height: 1.5; }

/* draft rules (unlisted) */
.dr-bars{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:12px}
.dr-bars li{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) 6.5rem;gap:16px;align-items:center}
.dr-l{font-size:15px;line-height:1.3;color:var(--ink-2)}
.dr-l b{display:block;color:var(--ink);font-weight:600}
.dr-b{position:relative;height:14px;border-radius:7px;background:var(--line);overflow:hidden}
.dr-b::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v) / 20 * 100%);background:var(--ink);border-radius:7px}
.dr-b i{position:absolute;top:0;bottom:0;background:var(--ink-3);z-index:1}
.dr-n{text-align:right;font-size:15px;color:var(--ink)}
.dr-later{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:62rem}
.dr-later li{color:var(--ink-2);line-height:1.5}
.dr-later b{color:var(--ink)}
@media (max-width:640px){.dr-bars li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}.dr-b{grid-column:1/-1;grid-row:2}}
/* The dojo: daily practice, the challenge sheet, zen, ranks and seals, the goal picker and dojo challenges.
   Black and white only: state is carried by fill, outline, hatching and shape, never color, so light, dark and mono
   read the same. Motion is ink-like (a stamp lands, a ring spreads) and stops for reduced motion. */

/* ---------- Segmented control (tiers, plans) ---------- */
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 3px; gap: 2px; max-width: 100%; }
.seg button { min-height: 38px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-14); cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.seg button[aria-checked=true] { background: var(--ink); color: var(--paper); }
.seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .seg button:not([aria-checked=true]):hover { color: var(--ink); } }
@media (max-width: 420px) { .seg { display: flex; } .seg button { flex: 1; padding: 0 8px; font-size: var(--t-13); } }

/* ---------- Daily: the top ---------- */
.dy-hero { padding-block: clamp(40px, 7vw, 96px) clamp(32px, 5vw, 64px); }
.dy-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 860px) { .dy-top { grid-template-columns: minmax(0, 1fr); } }
.dy-copy { display: grid; gap: 22px; }
.dy-copy .eyebrow { margin: 0; }
.dy-tier { display: grid; gap: 10px; justify-items: start; margin-top: 6px; }
.dy-tier-about { margin: 0; font-size: var(--t-13); color: var(--ink-3); min-height: 1.5em; }
.dy-ring { margin: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: center; position: relative; }
@media (max-width: 520px) { .dy-ring { grid-template-columns: 148px minmax(0, 1fr); gap: 18px; } }
.dy-ring svg { width: 100%; height: auto; grid-row: 1; grid-column: 1; transform: rotate(-90deg); overflow: visible; }
.dy-ring circle { fill: none; stroke: currentColor; stroke-linecap: round; }
.dy-ring .r-base { stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 1 7.4; }
.dy-ring .r-track { stroke: var(--line); }
.dy-ring .r-q, .dy-ring .r-c, .dy-ring .r-z { stroke-dasharray: 100; transition: stroke-dashoffset 900ms var(--ease); }
.dy-ring .r-q { stroke-width: 12; stroke-dashoffset: calc(100 - var(--q, 0) * 100); }
.dy-ring .r-c { stroke-width: 9; stroke-dashoffset: calc(100 - var(--c, 0) * 100); }
.dy-ring .r-z { stroke-width: 6; stroke-dashoffset: calc(100 - var(--z, 0) * 100); }
.dy-ring-in { grid-row: 1; grid-column: 1; display: grid; justify-items: center; align-content: center; text-align: center; }
.dy-ring-in b { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 7vw, 72px); line-height: 1; }
.dy-ring-in span { font-size: var(--t-12); color: var(--ink-3); max-width: 9em; }
.dy-ring figcaption { display: grid; gap: 12px; }
.dy-status { margin: 0; font-weight: 600; font-size: var(--t-17); }
.dy-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--t-14); color: var(--ink-2); }
.dy-ways li { display: flex; gap: 10px; align-items: center; }
.dy-ways i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; transition: background var(--dur) var(--ease); }
.dy-ways li.met { color: var(--ink); }
.dy-ways li.met i { background: currentColor; }
/* The day counted: the rings settle, and one slow ripple of ink goes out. */
.dy-ring.done .dy-ring-in b { animation: dy-settle 700ms var(--ease) both; }
.dy-ring.done::after { content: ""; position: absolute; left: 0; top: 0; width: 236px; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: dy-ripple 2400ms ease-out 300ms 1; pointer-events: none; }
@media (max-width: 520px) { .dy-ring.done::after { width: 148px; } }
@keyframes dy-settle { from { transform: scale(.86); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes dy-ripple { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(1.35); opacity: 0; } }

/* ---------- Quiz ---------- */
.dy-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 960px) { .dy-split { grid-template-columns: minmax(0, 1fr); } }
.dy-head { grid-template-columns: minmax(0, 1fr); margin: 0; align-items: start; gap: 18px; }
.dq-dots { display: flex; gap: 12px; }
.dq-dots i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2); box-sizing: border-box; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.dq-dots i.ok { background: var(--ink); border-color: var(--ink); }
.dq-dots i.no { border-color: var(--ink); border-width: 4px; }
.dq-dots i.now { border-color: var(--ink); }
.dq { border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 3.4vw, 36px); display: grid; gap: 18px; min-height: 360px; align-content: start; }
.dq-k { margin: 0; font-size: var(--t-13); color: var(--ink-3); }
.dq-q { margin: 0; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; outline: none; text-wrap: pretty; }
.dq-opts { display: grid; gap: 10px; }
.dq-opt { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; min-height: 54px; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: var(--r-m); background: transparent; color: var(--ink); font: inherit; font-size: var(--t-17); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.dq-opt .dq-l { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); font-size: var(--t-13); color: var(--ink-3); }
@media (hover: hover) { .dq-opt:not([disabled]):hover { border-color: var(--ink); } }
.dq-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dq-opt[disabled] { cursor: default; opacity: var(--dim); }
.dq-opt.right { opacity: 1; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dq-opt.right .dq-l { border-color: var(--paper); color: var(--paper); }
.dq-opt.wrong { opacity: 1; border-color: var(--ink); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.dq-after { display: grid; gap: 10px; justify-items: start; animation: dy-up 320ms var(--ease) both; }
.dq-verdict { margin: 0; font-weight: 600; font-size: var(--t-17); }
.dq-why { margin: 0; color: var(--ink-2); font-size: var(--t-15); line-height: 1.55; max-width: 40em; }
.dq-end { display: grid; gap: 14px; }
.dq-review { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.dq-review li { display: grid; gap: 4px; padding: 14px 0 14px 28px; border-top: 1px solid var(--line); position: relative; font-size: var(--t-14); }
.dq-review li::before { content: ""; position: absolute; left: 0; top: 18px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink); box-sizing: border-box; }
.dq-review li.ok::before { background: var(--ink); }
.dq-review li.no::before { border-width: 3.5px; }
.dq-review b { font-weight: 600; }
.dq-review span { color: var(--ink-2); }
/* The stamp: lands a little rotated, then settles; its ink spreads once. */
.dy-press { position: fixed; z-index: 60; width: 44px; height: 44px; margin: -22px 0 0 -22px; color: var(--ink); pointer-events: none; }
.dq-opt.right ~ * .dy-press, .dy-press { mix-blend-mode: normal; }
.dy-press svg { width: 100%; height: 100%; display: block; animation: dy-stamp 520ms cubic-bezier(.2, 1.4, .3, 1) both; filter: drop-shadow(0 0 0 var(--paper)); }
.dy-press i { position: absolute; inset: -6px; border-radius: 14px; border: 1.5px solid var(--ink); opacity: 0; animation: dy-spread 900ms ease-out 180ms both; }

/* ---------- Challenge cards ---------- */
.dc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .dc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dc-grid { grid-template-columns: minmax(0, 1fr); } }
.dc { border: 1px solid var(--line); border-radius: 20px; padding: clamp(18px, 2.4vw, 26px); display: grid; gap: 10px; align-content: start; grid-template-rows: auto auto auto 1fr auto auto auto; transition: border-color var(--dur) var(--ease); }
@media (hover: hover) { .dc:hover { border-color: var(--line-2); } }
.dc-prev { height: 104px; display: flex; align-items: center; color: var(--ink); overflow: hidden; margin-bottom: 6px; }
.dc-prev svg { height: 100%; width: auto; max-width: 100%; }
.dc-prev .dc-art.minims path { stroke: currentColor; stroke-width: 9; stroke-linecap: square; fill: none; }
.dc-k { margin: 0; font-size: var(--t-12); color: var(--ink-3); letter-spacing: .02em; }
.dc-t { margin: 0; font-family: var(--sans); font-size: var(--t-20); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; text-transform: none; }
.dc-how { margin: 0; color: var(--ink-2); font-size: var(--t-14); line-height: 1.5; }
.dc-meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--t-12); color: var(--ink-3); }
.dc-res { margin: 4px 0 0; display: flex; align-items: center; gap: 10px; font-size: var(--t-13); color: var(--ink-2); }
.dc-res b { font-family: var(--display); font-weight: 400; font-size: var(--t-24); color: var(--ink); }
.dc-stamp { width: 22px; height: 22px; flex: none; border: 1.5px solid var(--ink); box-sizing: border-box; border-radius: 50%; }
.dc-res.pass .dc-stamp { background: var(--ink); }
.dc-res.t-practitioner .dc-stamp { border-radius: 4px; }
.dc-res.t-master .dc-stamp { border-radius: 3px; transform: rotate(45deg) scale(.86); }
.dc-go { justify-self: start; margin-top: 8px; }
.cta .dc-go { margin-top: 0; }
.dc-you { grid-column: 1 / -1; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: none; gap: 24px clamp(24px, 4vw, 56px); border-style: dashed; border-color: var(--line-2); }
@media (max-width: 760px) { .dc-you { grid-template-columns: minmax(0, 1fr); } }
.dc-goal, .dc-body { display: grid; gap: 10px; align-content: start; }
.dc-goal .chips { margin-top: 6px; }
.dc-you.nogoal .dc-body { opacity: var(--dim); pointer-events: none; }
.dc-you.nogoal .dc-body > * { visibility: hidden; }
.dc-you.nogoal .dc-body::before { content: ""; visibility: visible; display: block; height: 100%; min-height: 160px; border-radius: 14px; background: repeating-linear-gradient(-38deg, transparent 0 9px, var(--line) 9px 10px); }

/* ---------- Master's seal ---------- */
.dy-master { overflow: hidden; }
.dy-master-in { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .dy-master-in { grid-template-columns: minmax(0, 1fr); } }
.dc-master { border: 0; padding: 0; grid-template-rows: none; gap: 14px; }
.dc-master .eyebrow { margin: 0; }
.dc-master .dc-prev { height: clamp(110px, 16vw, 180px); }
.dc-master .dc-t { font-family: var(--display); font-weight: 400; font-size: var(--t-48); text-transform: lowercase; line-height: 1.05; }
.dc-master .dc-how { font-size: clamp(17px, 1.7vw, 20px); max-width: 32em; }
.dc-master .cta { margin-top: 6px; }
.dy-gallery { border: 1px solid var(--line-2); border-radius: 20px; padding: clamp(18px, 2.4vw, 26px); display: grid; gap: 10px; }
.dy-gallery h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--t-32); text-transform: lowercase; }
.dy-gallery p { margin: 0; color: var(--ink-2); font-size: var(--t-14); line-height: 1.5; }
.dy-gal-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; counter-reset: g; }
.dy-gal-list li { padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--t-14); }
.dy-gal-empty { color: var(--ink-3); }

/* ---------- Zen card ---------- */
.dy-zen-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 760px) { .dy-zen-in { grid-template-columns: minmax(0, 1fr); } .dy-zen-art { max-width: 220px; } }
.dy-zen-art svg { width: 100%; height: auto; display: block; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .dy-zen-art svg { animation: dy-breathe 6s ease-in-out infinite; transform-origin: 50% 50%; } }
@keyframes dy-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }

/* ---------- Share card ---------- */
.dy-card { border: 1.5px solid var(--ink); border-radius: 22px; padding: clamp(18px, 3vw, 32px); display: grid; gap: 18px; max-width: 520px; }
.dy-card-art svg { width: 100%; height: auto; display: block; color: var(--ink); }
.dy-card-text { margin: 0; font-size: var(--t-13); line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; border-top: 1px solid var(--line); padding-top: 14px; }

/* ---------- Together ---------- */
.dy-together { --n: 2; }
.dy-board h3 { font-family: var(--display); font-weight: 400; font-size: var(--t-32); text-transform: lowercase; margin: 0; }
.dy-board > p { margin: 0; }
.dy-board .btn { justify-self: start; margin-top: 6px; }
.dy-rows { list-style: none; margin: 0; padding: 0; }
.dy-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--t-15); }
.dy-w { display: flex; gap: 5px; }
.dy-w i { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--line-2); box-sizing: border-box; }
.dy-w i.on { background: var(--ink); border-color: var(--ink); }
.dy-w i[data-today] { outline: 1.5px solid var(--ink); outline-offset: 2px; }
.dy-s { font-size: var(--t-13); color: var(--ink-3); min-width: 4.5em; text-align: right; }
.dy-fine { margin: 0; font-size: var(--t-13); color: var(--ink-3); line-height: 1.5; }
.dy-dojo { list-style: none; margin: 4px 0; padding: 0; display: flex; }
.dy-dojo li { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); margin-right: -10px; box-sizing: border-box; position: relative; }
.dy-dojo li::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--ink); }
.dy-dojo li.off { border-style: dashed; border-color: var(--line-2); }
.dy-dojo li.off::after { display: none; }

/* ---------- Events ---------- */
.dy-news { padding-block: clamp(40px, 6vw, 72px); }
.dy-news-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; }
@media (max-width: 760px) { .dy-news-in { grid-template-columns: minmax(0, 1fr); } }
.dy-news-in > div { display: grid; gap: 10px; }
.dy-news-in .eyebrow { margin: 0; }
.dy-news-in p { margin: 0; color: var(--ink-2); }
.dy-news-in .h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--t-32); text-transform: lowercase; }
.dy-news-in .linkish { justify-self: start; }
.dy-news-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: end; }
.dy-news-form label { display: grid; gap: 8px; }
.dy-news-form .dy-fine { grid-column: 1 / -1; min-height: 1.5em; }

/* ---------- Ranks: the ladder ---------- */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rung { display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 56px); align-items: center; padding: 22px 0; border-top: 1px solid var(--line); }
.rung:last-child { border-bottom: 1px solid var(--line); }
.rbelt { width: 100%; height: auto; display: block; color: var(--ink); overflow: visible; }
.rung-t { display: grid; gap: 6px; }
.rung-t h3 { margin: 0; font-size: var(--t-20); font-weight: 600; letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rung-t p { margin: 0; color: var(--ink-2); }
.rung-tag { font-size: var(--t-12); font-weight: 400; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--ink-2); }
.rung.now .rung-tag { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rung-needs { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-14); color: var(--ink-2); }
.rung-needs li { padding-left: 18px; position: relative; }
.rung-needs li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1.5px; background: var(--ink-3); }
.rung.later .rbelt, .rung.next .rbelt { opacity: var(--dim-soft); }
.rung.later .rung-t h3, .rung.later .rung-t p { color: var(--ink-2); }
@media (max-width: 640px) { .rung { grid-template-columns: minmax(0, 1fr); } .rbelt { max-width: 240px; } }
.ladder.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 20px; margin-bottom: 36px; }
.ladder.compact .rung { grid-template-columns: minmax(0, 1fr); border: 0; padding: 0; align-items: start; gap: 10px; }
.ladder.compact .rung-t h3 { font-size: var(--t-15); }
.ladder.compact .rung-t p { font-size: var(--t-13); }
@media (max-width: 980px) { .ladder.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ladder.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tying on: each belt draws in from the knot as it scrolls up, one after another. */
.ladder.tie .rung .rbelt { clip-path: inset(0 50% 0 50%); transition: clip-path 900ms var(--ease) calc(var(--i) % 3 * 90ms); }
.ladder.tie .rung.tied .rbelt { clip-path: inset(0 0 0 0); }
.home-ranks .cta { margin-top: 8px; }

/* ---------- Ranks: where you stand ---------- */
.rk-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .rk-top { grid-template-columns: minmax(0, 1fr); } }
.rk-mine { border: 1.5px solid var(--ink); border-radius: 22px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; }
.my-belt .rbelt { max-width: 320px; }
.my-t { display: grid; gap: 10px; }
.my-t .eyebrow, .my-t p { margin: 0; }
.my-t .h2 { margin: 0; font-size: var(--t-32); }
.my-t p { color: var(--ink-2); font-size: var(--t-15); }
.my-next b { color: var(--ink); }
.my-days { font-size: var(--t-13) !important; color: var(--ink-3) !important; }

/* ---------- Seals ---------- */
.seals { display: grid; gap: 48px; }
.seal-h { margin: 0 0 18px; font-family: var(--display); font-weight: 400; font-size: var(--t-32); text-transform: lowercase; }
.seal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 32px; }
.seal { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: start; }
.rseal { width: 76px; height: 76px; display: block; color: var(--ink); }
.seal b { display: block; font-weight: 600; margin-bottom: 4px; }
.seal p { margin: 0 0 8px; color: var(--ink-2); font-size: var(--t-14); line-height: 1.5; }
.seal .mono { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--t-12); color: var(--ink-3); }
.seal .mono i { font-style: normal; padding: 1px 8px; border: 1px solid var(--line-2); border-radius: var(--r-pill); }
.seal .mono i.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .seal .rseal { transition: transform 240ms cubic-bezier(.2, 1.4, .3, 1); } .seal:hover .rseal { transform: rotate(-5deg) scale(1.04); } }

/* ---------- Ranks: honesty ---------- */
.rk-honest { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .rk-honest { grid-template-columns: minmax(0, 1fr); } }
.rk-rules { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.rk-rules li { counter-increment: r; display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0; border-top: 1px solid var(--ink); font-size: var(--t-17); line-height: 1.45; }
.rk-rules li::before { content: counter(r, decimal-leading-zero); font-variation-settings: "MONO" 1; font-size: var(--t-13); color: var(--ink-3); padding-top: 3px; }

/* ---------- Dojo challenges ---------- */
.ch-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .ch-top { grid-template-columns: minmax(0, 1fr); } }
.ch-news { margin-top: 10px; max-width: 520px; }
.ch-brief { margin: 0; border: 1.5px solid var(--ink); border-radius: 22px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 12px; transform: rotate(-1.2deg); }
@media (prefers-reduced-motion: no-preference) { .ch-brief { transition: transform 600ms var(--ease); } .ch-brief:hover { transform: rotate(0); } }
.ch-brief-k { margin: 0; font-size: var(--t-12); color: var(--ink-3); }
.ch-brief-t { margin: 0; font-family: var(--display); font-size: var(--t-48); line-height: 1; }
.ch-brief-p { margin: 0; color: var(--ink-2); }
.ch-brief-dl { margin: 10px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.ch-brief-dl dt { font-size: var(--t-12); color: var(--ink-3); }
.ch-brief-dl dd { margin: 2px 0 0; font-weight: 600; }
.ch-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(20px, 3vw, 40px); }
@media (max-width: 900px) { .ch-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ch-steps { grid-template-columns: minmax(0, 1fr); } }
.ch-steps li { border-top: 1px solid var(--ink); padding-top: 18px; display: grid; gap: 8px; align-content: start; }
.ch-steps h3 { margin: 0; font-size: var(--t-20); }
.ch-steps p { margin: 0; color: var(--ink-2); font-size: var(--t-15); }
.ch-n { font-size: var(--t-13); color: var(--ink-3); }
.ch-art { height: 64px; margin-top: 8px; display: flex; gap: 6px; align-items: flex-end; }
.ch-art i { display: block; width: 52px; height: 52px; border: 1.5px solid var(--ink); border-radius: 10px; }
.ch-art.draw i { width: 14px; height: calc(10px + var(--k, 0) * 6px); border-radius: 3px; background: var(--ink); border: 0; }
.ch-art.draw i:nth-child(1) { --k: 1; } .ch-art.draw i:nth-child(2) { --k: 3; } .ch-art.draw i:nth-child(3) { --k: 2; } .ch-art.draw i:nth-child(4) { --k: 5; } .ch-art.draw i:nth-child(5) { --k: 4; } .ch-art.draw i:nth-child(6) { --k: 6; } .ch-art.draw i:nth-child(7) { --k: 7; }
.ch-art.vote i { width: 36px; height: 48px; border-radius: 8px; }
.ch-art.vote i:nth-child(2) { background: var(--ink); }
.ch-art.seal i { background: var(--ink); border-radius: 12px; transform: rotate(-6deg); }
.ch-gal { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .ch-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ch-gal li { aspect-ratio: 4 / 5; border: 1px dashed var(--line-2); border-radius: 16px; background: repeating-linear-gradient(-38deg, transparent 0 11px, var(--line) 11px 12px); }

/* ---------- Sign up: the goal ---------- */
.goal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 480px) { .goal-grid { grid-template-columns: minmax(0, 1fr); } }
.goal { display: grid; grid-template-rows: 64px auto auto; gap: 4px; text-align: left; padding: 14px 16px 16px; border: 1px solid var(--line-2); border-radius: var(--r-m); background: transparent; color: var(--ink); font: inherit; cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.goal:last-child:nth-child(odd) { grid-column: 1 / -1; }
.goal-art { height: 56px; display: flex; align-items: center; overflow: hidden; padding-right: 30px; }
.goal-art svg { height: 100%; width: auto; max-width: 100%; }
.goal-art { position: relative; }
.goal-ghost { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; opacity: .16; }
.goal b { font-weight: 600; }
.goal small { color: var(--ink-2); font-size: var(--t-13); }
@media (hover: hover) { .goal:hover { border-color: var(--ink); } }
.goal:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.goal { position: relative; }
.goal[aria-checked=true] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--wash); }
.goal::before { content: ""; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--paper); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.goal[aria-checked=true]::before { border-color: var(--ink); background: var(--ink); }
.goal[aria-checked=true]::after { content: ""; position: absolute; top: 17px; right: 20px; width: 6px; height: 11px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
[data-step="goal"] .cta { align-items: center; }

/* ---------- Profile: rank and seals ---------- */
.pr-grid { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr) auto; gap: 20px clamp(24px, 4vw, 48px); align-items: center; padding: 20px 0 8px; }
@media (max-width: 860px) { .pr-grid { grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); } .pr-seals { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pr-grid { grid-template-columns: minmax(0, 1fr); } .pr-belt { max-width: 220px; } }
.pr-t { display: grid; gap: 4px; }
.pr-name { margin: 0; font-family: var(--display); font-size: var(--t-32); line-height: 1.1; text-transform: lowercase; }
.pr-next { margin: 0; color: var(--ink-2); font-size: var(--t-14); max-width: 36em; }
.pr-seals { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.pr-seals li { display: grid; justify-items: center; gap: 6px; width: 72px; text-align: center; font-size: var(--t-12); color: var(--ink-3); line-height: 1.3; }
.pr-seals .rseal { width: 52px; height: 52px; }
.pr-none { width: auto !important; }

/* ---------- Brand: how typodojo writes ---------- */
.wr-rules { margin-top: 0; }
.wr-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 5vw, 48px); }
@media (max-width: 640px) { .wr-pair { grid-template-columns: minmax(0, 1fr); } }
.wr-pair > div { border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; display: grid; gap: 8px; }
.wr-pair p { margin: 0; font-size: var(--t-20); line-height: 1.4; }
.wr-pair > div:last-child p { font-family: var(--display); }
.wr-cut { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ladder.compact .rung-t h3 { min-height: 28px; }
.dy-ring svg { pointer-events: none; position: relative; z-index: 0; }
.dy-ring-in { position: relative; z-index: 1; }
.seg { gap: 8px; padding: 3px; }
.dy-news-in .linkish, .dy-tier .linkish { min-height: var(--tap); display: inline-flex; align-items: center; }
.plan-soon > *:not(h3) { opacity: var(--dim-soft); }
.plan-soon .btn { opacity: 1; }
.soon { font-size: var(--t-12); font-weight: 400; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: var(--r-pill); margin-left: 8px; vertical-align: middle; }

/* ---------- Values ---------- */
.va-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 860px) { .va-top { grid-template-columns: minmax(0, 1fr); } .va-art { max-width: 240px; } }
.va-art { margin: 0; }
.va-art svg { width: 100%; height: auto; display: block; color: var(--ink); }
.va-items { list-style: none; margin: 0; padding: 0; display: grid; }
.va-items > li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 clamp(16px, 3vw, 40px); padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--ink); scroll-margin-top: 96px; }
.va-items > li:last-child { border-bottom: 1px solid var(--line); }
.va-items h2 { margin: 0 0 16px; max-width: 18em; }
.va-n { font-size: var(--t-13); color: var(--ink-3); padding-top: .9em; }
.va-facts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; max-width: 760px; }
@media (max-width: 560px) { .va-facts { grid-template-columns: minmax(0, 1fr); } .va-items > li { grid-template-columns: minmax(0, 1fr); } .va-n { padding: 0 0 8px; } }
.va-facts li { padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--t-15); }
/* The four commitments are read one at a time: the one in view is full strength, the rest wait dim. */
@media (prefers-reduced-motion: no-preference) {
  .va-items.focus > li { opacity: var(--dim-soft); transition: opacity 500ms var(--ease); }
  .va-items.focus > li.on, .va-items.focus.all > li { opacity: 1; }
}
.nav-values { display: none; }
@media (max-width: 1180px) { .hnav .nav-values { display: flex; font-size: var(--t-14); color: var(--ink-2); } }

/* ---------- The feed ---------- */
.fd-hero { padding-block: clamp(40px, 7vw, 88px) clamp(24px, 4vw, 48px); }
.fd-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
@media (max-width: 900px) { .fd-top { grid-template-columns: minmax(0, 1fr); } }
.fd-top .eyebrow { margin: 0 0 16px; }
.fd-top .lede { margin-top: 20px; }
.fd-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fd-how li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.fd-how .fd-mini { grid-row: span 2; width: 40px; height: 40px; color: var(--ink); }
.fd-how b { font-weight: 600; }
.fd-how span:not(.fd-mini) { font-size: var(--t-14); color: var(--ink-2); }
.fd-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 960px) { .fd-wrap { grid-template-columns: minmax(0, 1fr); } }
.fd-side { position: sticky; top: 96px; display: grid; gap: 28px; }
@media (max-width: 960px) { .fd-side { position: static; } }
.fd-end { display: grid; gap: 10px; justify-items: start; }
.fd-end svg { width: 120px; height: auto; color: var(--ink); }
.fd-end h2, .fd-end p { margin: 0; }
.fd-end p { color: var(--ink-2); }
.fd-search label { display: grid; gap: 8px; }
.fd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fd-loading { color: var(--ink-3); padding: 40px 0; }
.fd-post { padding: clamp(24px, 3.5vw, 40px) 0; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.fd-post.spine { border-top-color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .fd-list.focus .fd-post { opacity: var(--dim-soft); transition: opacity 400ms var(--ease); } .fd-list.focus .fd-post.on, .fd-list.focus .fd-post:focus-within { opacity: 1; } }
.fd-k { margin: 0; font-size: var(--t-12); color: var(--ink-3); text-transform: capitalize; }
.fd-k b { color: var(--ink); font-weight: 600; text-transform: none; }
.fd-hook { margin: 0; font-family: var(--sans); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.22; font-weight: 600; letter-spacing: -0.015em; text-transform: none; text-wrap: balance; }
.fd-vis { margin: 4px 0; height: clamp(72px, 10vw, 112px); color: var(--ink); }
.fd-vis svg { height: 100%; width: auto; max-width: 100%; }
.fd-body { margin: 0; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--ink); max-width: 38em; }
.fd-body.quoted { border-left: 0; padding: 0; }
.fd-body.quoted p { margin: 0; font-size: clamp(19px, 1.9vw, 22px); line-height: 1.5; }
.fd-body.quoted p::before { content: "\201C"; } .fd-body.quoted p::after { content: "\201D"; }
.fd-body cite { display: block; margin-top: 8px; font-style: normal; font-size: var(--t-13); color: var(--ink-3); font-variation-settings: "MONO" 1; }
.fd-line { border-radius: 4px; cursor: default; position: relative; -webkit-touch-callout: none; user-select: text; transition: background var(--dur) var(--ease); }
.fd-line:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fd-line.held { background: var(--wash); }
.fd-lg { display: inline-block; width: .9em; height: .9em; margin-left: .25em; vertical-align: -.08em; background: var(--ink); -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.fd-lg[data-g=heart] { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20 C 4 14, 3 7, 8 6 C 10 6, 12 8, 12 9 C 12 8, 14 6, 16 6 C 21 7, 20 14, 12 20 Z'/%3E%3C/svg%3E"); }
.fd-lg[data-g=check] { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 L 10 17 L 19 7' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fd-lg[data-g=star] { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 L 14.6 9 L 21 9.6 L 16 13.8 L 17.6 20 L 12 16.6 L 6.4 20 L 8 13.8 L 3 9.6 L 9.4 9 Z'/%3E%3C/svg%3E"); }
.fd-lg[data-g=circle] { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7.5' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E"); }
.fd-lg[data-g=underline] { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 18 H 20' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fd-refs-row { margin: 0; }
.fd-refs-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--t-14); color: var(--ink); }
.fd-refs-btn { text-decoration: none; }
.fd-refs-l { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fd-refs-n { font-size: var(--t-12); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 0 7px; line-height: 18px; }
.fd-refs-btn[aria-expanded=true] .fd-refs-n { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fd-bank { position: absolute; z-index: 65; display: grid; gap: 8px; padding: 14px 16px 16px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 12px 40px -12px color-mix(in srgb, var(--ink) 30%, transparent); opacity: 0; transform: translateY(4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.fd-bank.on { opacity: 1; transform: none; }
.fd-bank[hidden] { display: none; }
.fd-bank-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fd-bank-h b { font-size: var(--t-14); font-weight: 600; }
.fd-bank-x { display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px -6px 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.fd-bank-x svg { width: 16px; height: 16px; }
.fd-bank-x:hover { background: radial-gradient(circle, var(--wash) 0 60%, transparent 70%); color: var(--ink); }
.fd-bank-p { margin: 0; font-size: var(--t-13); color: var(--ink-3); }
.fd-refs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: var(--t-14); }
.fd-refs li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--t-13); }
.fd-refs a { color: var(--ink); font-size: var(--t-14); font-weight: 500; text-underline-offset: 3px; min-height: 24px; display: inline-flex; align-items: center; }
.fd-typo { margin: 0; font-size: var(--t-14); color: var(--ink-2); display: flex; gap: 10px; align-items: baseline; }
.fd-typo b { font-family: var(--display); font-weight: 400; font-size: var(--t-17); color: var(--ink); }
.fd-act { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 6px; }
.fd-pad { width: 112px; height: 112px; border: 1px dashed var(--line-2); border-radius: 18px; color: var(--ink); touch-action: none; position: relative; }
.fd-pad svg { width: 100%; height: 100%; display: block; cursor: crosshair; }
.fd-ghost { color: var(--line-2); }
.fd-mark { opacity: 0; transform-origin: 50% 50%; }
.fd-post.reacted .fd-pad { border-style: solid; border-color: var(--line); }
.fd-post.reacted .fd-ghost, .fd-post.reacted .fd-pad-ink { display: none; }
.fd-post.reacted .fd-mark { opacity: 1; }
.fd-post.reacted .fd-pad svg { cursor: default; }
.fd-pad.land .fd-mark { animation: dy-stamp 560ms cubic-bezier(.2, 1.4, .3, 1) both; }
.fd-pad.nope { animation: fd-nope 360ms ease both; }
@keyframes fd-nope { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.fd-act-t { display: grid; gap: 6px; justify-items: start; }
.fd-hint { margin: 0; font-size: var(--t-15); }
.fd-kb { font-size: var(--t-13); color: var(--ink-3); min-height: 32px; }
.fd-post.reacted .fd-kb { display: none; }
.fd-cta { margin-top: 4px; }
.fd-com { display: grid; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px dashed var(--line); animation: dy-up 320ms var(--ease) both; }
.fd-com-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fd-com-none { color: var(--ink-3); font-size: var(--t-14); }
.fd-c { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 6px; outline: none; position: relative; overflow: hidden; }
.fd-c:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fd-c-in { padding: 6px 4px; transition: transform 200ms var(--ease); touch-action: pan-y; }
.fd-c-in p { margin: 0; }
.fd-c-meta { font-size: var(--t-12); color: var(--ink-3); margin-top: 4px !important; display: flex; gap: 10px; flex-wrap: wrap; }
.fd-who.hidden { letter-spacing: .02em; }
.fd-c-no, .fd-c-yes { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease); }
.fd-c-no svg, .fd-c-yes svg { width: 20px; height: 20px; }
@media (hover: hover) { .fd-c:hover .fd-c-no, .fd-c:hover .fd-c-yes, .fd-c:focus-visible .fd-c-no, .fd-c:focus-visible .fd-c-yes { opacity: 1; } .fd-c-no:hover, .fd-c-yes:hover { color: var(--ink); } }
@media (hover: none) { .fd-c { grid-template-columns: minmax(0, 1fr); } .fd-c-no, .fd-c-yes { display: none; } }
.fd-c.known .fd-c-no, .fd-c.known .fd-c-yes { display: none; }
.fd-c.known { grid-template-columns: minmax(0, 1fr); }
.fd-c.lean-right { border-color: var(--ink); } .fd-c.lean-left { border-style: dashed; border-color: var(--ink); }
.fd-c.go-right .fd-c-in { transform: translateX(14px); } .fd-c.go-left .fd-c-in { transform: translateX(-14px); }
.fd-com-form { display: grid; gap: 8px; }
.fd-com-form textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; font: inherit; }
.fd-com-bar { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-12); color: var(--ink-3); }
.fd-pop { position: absolute; z-index: 70; display: flex; gap: 4px; padding: 6px; border: 1.5px solid var(--ink); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); }
.fd-pop button { width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.fd-pop button svg { width: 22px; height: 22px; }
.fd-pop button:focus-visible { outline: 2px solid var(--ink); }
@media (hover: hover) { .fd-pop button:hover { background: var(--wash); } }
.fd-com[hidden], .fd-pop[hidden], .fd-end[hidden] { display: none; }
@media (min-width: 1181px) { .hnav .nav-values { display: none; } }
.fd-cta { white-space: normal; text-align: left; max-width: 100%; height: auto; min-height: 36px; padding-block: 6px; }
.fd-act-t { min-width: 0; }

/* ---------- Stickers, stuck on: placed where nothing needs reading, never on a control ---------- */
.stk { position: absolute; width: var(--s, 140px); transform: rotate(var(--r, -8deg)); pointer-events: none; z-index: 1; }
.dy-zen-art, .rk-mine-wrap, .year-fig, .mk-yours, .va-art, .fd-end-art, .ch-brief, .su-rings { position: relative; }
.stk-zen { --s: 34%; --r: 9deg; right: -4%; bottom: 2%; }
.rk-mine-wrap .stk-rank { --s: 104px; --r: 11deg; right: -18px; top: -34px; }
.stk-year { --s: 96px; --r: 9deg; right: -104px; bottom: 24px; }
.mk-yours { overflow: visible; }
.stk-mk { --s: 92px; --r: 12deg; right: -14px; top: -22px; }
.stk-va { --s: 42%; --r: 8deg; right: -6%; bottom: -4%; }
.fd-end-art { width: 120px; }
.stk-fd { --s: 64px; --r: -12deg; right: -40px; bottom: -6px; }
.ch-brief .stk-ch { --s: 120px; --r: 14deg; right: -26px; top: -44px; }
.su-rings .stk-su { --s: 150px; --r: -7deg; left: 58%; bottom: 0; }
@media (max-width: 640px) { .stk-year, .stk-mk { display: none; } .rk-mine-wrap .stk-rank { --s: 80px; right: -6px; top: -28px; } .ch-brief .stk-ch { --s: 88px; right: -8px; top: -36px; } }
@media (pointer: coarse) { .fd-refs a, .fd-refs-btn { min-height: var(--tap); } .fd-kb { min-height: var(--tap); } }
.fd-com-form[hidden] { display: none; }
/* the tip: a small bubble above the pad, kind and specific, gone after a few seconds */
.fd-tip { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 3; width: max-content; max-width: min(260px, 70vw); margin: 0; padding: 8px 12px; border-radius: 14px; background: var(--ink); color: var(--paper); font-size: var(--t-13); line-height: 1.4; text-align: left; transform: translateY(4px); opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events: none; }
.fd-tip::after { content: ""; position: absolute; left: 50px; top: 100%; border: 6px solid transparent; border-top-color: var(--ink); }
.fd-tip.on { opacity: 1; transform: none; }
.fd-pad.resting { opacity: .45; border-style: dotted; }
.fd-pad.resting svg { cursor: not-allowed; }
.dc-left { margin: 0; font-size: var(--t-13); color: var(--ink-3); }
/* ---------- The sticker book ---------- */
.sbook-count { margin: 0 0 18px; font-size: var(--t-13); color: var(--ink-3); }
.sbook { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 20px; }
@media (max-width: 1080px) { .sbook { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sbook { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .sbook { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } }
.sb { display: grid; grid-template-rows: auto auto auto auto; gap: 2px; justify-items: center; text-align: center; min-width: 0; }
.sb-art { width: 100%; aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 6px; }
.sb-art .sticker { width: 86%; height: auto; max-height: 100%; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.sb:not(.got) .sb-art .sticker { opacity: .2; transform: scale(.92); }
.sb b { font-size: var(--t-14); font-weight: 600; }
.sb-how { font-size: var(--t-13); color: var(--ink-2); line-height: 1.4; }
.sb-when { font-size: var(--t-12); color: var(--ink-3); margin-top: 2px; }
.sb.got .sb-when { color: var(--ink-2); }
@media (hover: hover) { .sb.got:hover .sb-art .sticker { transform: rotate(-3deg) scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .sb .sb-art .sticker { transition: none; transform: none !important; } }
.sbook-invite { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line-2); border-radius: var(--r-m); }
.sbook-invite h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 400; font-size: var(--t-24); }
.sbook-invite p { margin: 0; color: var(--ink-2); }
.sbook-invite .dy-fine { grid-column: 1 / -1; }
@media (max-width: 560px) { .sbook-invite { grid-template-columns: minmax(0, 1fr); } .sbook-invite .btn { justify-self: start; } }
.dy-gallery { position: relative; }
.stk-master { --s: 104px; --r: 10deg; right: -10px; top: -46px; }
@media (max-width: 640px) { .stk-master { --s: 84px; right: -4px; top: -40px; } }
.sbook-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; }
.sbp-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.sbp-n, .sbp-b { display: grid; place-items: center; min-width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 20px; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-14); font-variant-numeric: tabular-nums; cursor: pointer; }
.sbp-b svg { width: 18px; height: 18px; }
.sbp-n[aria-current=page] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sbp-b[disabled] { opacity: .3; cursor: default; }
@media (hover: hover) { .sbp-n:not([aria-current=page]):hover, .sbp-b:not([disabled]):hover { border-color: var(--ink); color: var(--ink); } }
@media (pointer: coarse) { .sbp-n, .sbp-b { min-width: 44px; height: 44px; } }
/* ---------- The typing room ---------- */
.ty-top { position: relative; }
.stk-ty { --s: 120px; --r: -9deg; right: 4%; top: 10px; }
@media (max-width: 760px) { .stk-ty { --s: 84px; right: 0; top: -10px; } }
.ty-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 16px; }
.ty-modes { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line-2); border-radius: 999px; }
.ty-modes button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-14); cursor: pointer; }
.ty-modes button[aria-checked=true] { background: var(--ink); color: var(--paper); }
.ty-live { display: flex; gap: 28px; margin: 0; }
.ty-live div { display: grid; gap: 2px; }
.ty-live dt { font-size: var(--t-12); color: var(--ink-3); }
.ty-live dd { margin: 0; font-size: var(--t-24); font-variant-numeric: tabular-nums; font-weight: 600; }
.ty-stage { position: relative; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line-2); border-radius: var(--r-m); cursor: text; transition: border-color var(--dur) var(--ease); }
.ty-stage:focus-within { border-color: var(--ink); }
.ty-text { margin: 0; font-size: clamp(22px, 2.8vw, 34px); line-height: 1.55; font-variation-settings: "MONO" 1; color: var(--ink-3); overflow-wrap: anywhere; }
.ty-text .ok { color: var(--ink); }
.ty-text .no { color: var(--paper); background: var(--ink); border-radius: 3px; }
.ty-text .cur { box-shadow: inset 0 -3px 0 var(--ink); color: var(--ink-2); }
.ty-stage.done .ty-text .cur { box-shadow: none; }
.ty-in { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; resize: none; border: 0; padding: 0; caret-color: transparent; font-size: 16px; overflow: hidden; }
.ty-hint { margin: 16px 0 0; font-size: var(--t-14); color: var(--ink-2); }
.ty-cta { margin-top: 16px; }
.ty-results { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: 28px; scroll-margin-top: 90px; }
.ty-head .eyebrow { margin-bottom: 8px; }
.ty-head h2 { margin: 0; }
.ty-big { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; }
@media (max-width: 640px) { .ty-big { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ty-big div { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-m); display: grid; gap: 4px; }
.ty-big dt { font-size: var(--t-13); color: var(--ink-3); }
.ty-big dd { margin: 0; font-family: var(--display); font-size: clamp(28px, 4vw, 44px); line-height: 1; }
.ty-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 860px) { .ty-cols { grid-template-columns: minmax(0, 1fr); } }
.ty-fig { margin: 0; display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-m); min-width: 0; }
.ty-fig figcaption { display: grid; gap: 4px; }
.ty-fig figcaption span { font-size: var(--t-13); color: var(--ink-2); }
.ty-rhythm svg { display: block; width: 100%; height: 120px; color: var(--ink); }
.ty-sub { margin: 8px 0 0; font-size: var(--t-12); color: var(--ink-3); }
.ty-keys { display: grid; gap: 6px; }
.ty-row { display: flex; gap: 6px; padding-left: calc(var(--o) * 22px); }
.ty-k { flex: 0 0 auto; width: clamp(24px, 3.6vw, 38px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line-2); font-size: var(--t-13); font-variation-settings: "MONO" 1; background: color-mix(in srgb, var(--ink) calc(var(--v) * 85%), transparent); color: var(--ink); }
.ty-k[style*="--v:0.6"], .ty-k[style*="--v:0.7"], .ty-k[style*="--v:0.8"], .ty-k[style*="--v:0.9"], .ty-k[style*="--v:1.0"] { color: var(--paper); }
.ty-k.miss { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.ty-pairs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.ty-pairs li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.ty-pairs li b { font-size: var(--t-24); }
.ty-pairs li span { font-size: var(--t-12); color: var(--ink-3); }
.ty-pairs li.fast { border-color: var(--ink); }
.ty-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: f; }
@media (max-width: 960px) { .ty-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ty-facts { grid-template-columns: minmax(0, 1fr); } }
.ty-facts li { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.ty-facts p { margin: 0; color: var(--ink-2); font-size: var(--t-15); line-height: 1.5; }
/* ---------- The pen ---------- */
.pt-top { position: relative; }
.stk-pt { --s: 120px; --r: 8deg; right: 4%; top: 6px; }
@media (max-width: 760px) { .stk-pt { --s: 84px; right: 0; top: -10px; } }
.pt-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) { .pt-grid { grid-template-columns: minmax(0, 1fr); } .pt-work { order: -1; } }
.pt-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 2px; }
.pt-steps button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-3); font: inherit; font-size: var(--t-14); text-align: left; cursor: pointer; }
.pt-steps button .mono { width: 18px; font-size: var(--t-12); }
.pt-steps button.done { color: var(--ink-2); }
.pt-steps button.done .mono::after { content: " ✓"; }
.pt-steps button.now { color: var(--ink); background: var(--wash); font-weight: 600; }
.pt-lesson { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r-m); }
.pt-k { margin: 0; font-size: var(--t-12); color: var(--ink-3); }
.pt-lesson h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--t-32); }
.pt-how { margin: 0; color: var(--ink-2); line-height: 1.5; }
.pt-check { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--wash); font-size: var(--t-14); }
.pt-check.ok { background: var(--ink); color: var(--paper); }
.pt-lesson .say { margin: 0; }
.pt-lesson .cta { margin: 0; }
.pt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.pt-tools .chip[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pt-legend { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--ink-3); }
.pt-legend i { display: inline-block; width: 10px; height: 10px; border: 1.5px solid var(--ink); margin-left: 8px; }
.pt-legend .ci { border-radius: 50%; } .pt-legend .hd { border-radius: 50%; width: 8px; height: 8px; background: var(--paper); border-color: var(--ink-2); }
.pt-svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 680; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--paper); touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.pt-grid-lines line { stroke: var(--line); stroke-width: 1; }
.pt-ghost { fill: none; stroke: var(--ink-3); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; opacity: .16; }
.pt-line { fill: none; stroke: var(--ink); stroke-width: 3; }
.pt-line.closed { fill: color-mix(in srgb, var(--ink) 10%, transparent); }
.pt-hline { stroke: var(--ink-2); stroke-width: 1.5; }
.pt-handle { fill: var(--paper); stroke: var(--ink-2); stroke-width: 2; cursor: grab; }
.pt-pt { fill: var(--paper); stroke: var(--ink); stroke-width: 3; cursor: move; }
.pt-pt.first { fill: var(--ink); }
.pt-keys { margin: 10px 0 0; font-size: var(--t-13); color: var(--ink-3); }
@media (pointer: coarse) { .pt-handle { r: 14; } .pt-steps button { min-height: 44px; } }
/* The full-screen sheet shared by daily challenges and zen, on the site and in the studio. */
/* ---------- The challenge sheet, and zen ---------- */
html.dy-lock { overflow: hidden; }
.run [hidden] { display: none !important; }
.run { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); }
.run[open] { display: block; animation: dy-in 260ms var(--ease) both; }
.run::backdrop { background: var(--paper); }
@keyframes dy-in { from { opacity: 0; } to { opacity: 1; } }
.run-in { height: 100%; box-sizing: border-box; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; padding: max(16px, env(safe-area-inset-top)) var(--gutter) max(16px, env(safe-area-inset-bottom)); max-width: 1240px; margin: 0 auto; }
.run-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: start; }
.run-id { display: grid; gap: 4px; min-width: 0; }
.run-k { margin: 0; font-size: var(--t-12); color: var(--ink-3); }
.run-id h2 { margin: 0; font-family: var(--sans); font-size: clamp(18px, 2.4vw, 24px); font-weight: 600; letter-spacing: -0.01em; text-transform: none; line-height: 1.25; }
.zen .run-id h2 { font-family: var(--display); font-weight: 400; text-transform: lowercase; font-size: clamp(26px, 3.4vw, 36px); }
.run-how { margin: 0; color: var(--ink-2); font-size: var(--t-14); max-width: 44em; min-height: 1.5em; }
.run-timer { width: 64px; height: 64px; position: relative; display: grid; place-items: center; }
.run-timer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.run-timer path { fill: none; stroke: currentColor; stroke-linecap: round; }
.run-timer .enso-base { stroke: var(--line); stroke-width: 2; }
/* An ensō that closes as the time runs: brushed, heavier where it began. */
.run-timer .enso { stroke-width: 7; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
.run-timer span { font-size: var(--t-13); font-variant-numeric: tabular-nums; font-variation-settings: "MONO" 1; }
.run-timer.late span { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .run-timer.late .enso { animation: dy-late 1s ease-in-out infinite; } }
@keyframes dy-late { 50% { stroke-width: 10; } }
.run-x { width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.run-x svg { width: 20px; height: 20px; }
.run-part { margin: 0; font-size: var(--t-13); color: var(--ink-3); min-height: 1.4em; }
.run-stage { min-height: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; position: relative; }
.run-stage > div { width: 100%; height: 100%; display: grid; place-items: center; }
.run-svg { width: 100%; height: 100%; max-height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.run-svg.space { cursor: default; }
.run-lines line { stroke: var(--guide); stroke-width: 2; vector-effect: non-scaling-stroke; }
.run-lines line.strong { stroke: var(--line-2); stroke-width: 1.5; }
.run-tpl { color: var(--guide); opacity: 1; }
.run-tpl.compare { color: var(--ink); opacity: .2 !important; }
.run-ink { color: var(--ink); }
.run-l { cursor: grab; outline: none; }
.run-l.held { cursor: grabbing; }
.run-l .run-lg { color: var(--ink); transition: color var(--dur) var(--ease); }
.run-l.fixed { cursor: default; }
.run-l.fixed .run-lg { color: var(--ink-3); }
.run-l:focus-visible rect { stroke: var(--ink); stroke-width: 4; stroke-dasharray: 10 10; vector-effect: non-scaling-stroke; }
.run-tick { stroke: var(--ink); stroke-width: 3; vector-effect: non-scaling-stroke; }
.run-bar { fill: var(--ink); opacity: .7; }
.run-tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.run-tools .btn.ink { min-width: 120px; }
.is-space [data-run-undo] { display: none; }
.run-res { display: grid; gap: 6px; justify-items: start; align-items: center; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; padding-top: 4px; animation: dy-up 360ms var(--ease) both; }
.run-res .cta { grid-column: 1 / -1; margin-top: 8px; }
.run-seal { grid-row: span 3; width: 72px; height: 72px; position: relative; color: var(--ink); }
.run-res:not(.pass) .run-seal path:first-child { fill: none; stroke: var(--line-2); stroke-width: 2.5; stroke-dasharray: 5 6; }
.run-res:not(.pass) .run-seal path:last-child { display: none; }
.run-seal svg { width: 100%; height: 100%; display: block; }
.run-res.pass .run-seal { opacity: 1; animation: dy-stamp 600ms cubic-bezier(.2, 1.4, .3, 1) both; transform: rotate(-6deg); }
.run-seal i { position: absolute; inset: -8px; border-radius: 20px; border: 1.5px solid var(--ink); opacity: 0; }
.run-res.pass .run-seal i { animation: dy-spread 1100ms ease-out 220ms both; }
.run-res.pass .run-seal i + i { animation-delay: 520ms; }
.run-n { margin: 0; font-family: var(--display); font-size: clamp(44px, 7vw, 72px); line-height: .95; }
.run-need { margin: 0; font-size: var(--t-13); color: var(--ink-3); }
.run-say { margin: 0; font-size: var(--t-17); }
.zen-stage > div { position: relative; }
.zen-svg { position: absolute; inset: 0; transition: opacity 500ms var(--ease), transform 500ms var(--ease), filter 500ms var(--ease); }
.zen-svg.leaving { opacity: 0; transform: translateY(-3%) scale(.98); filter: blur(2px); pointer-events: none; }
.zen-end { grid-row: 3 / -1; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; align-content: center; }
.zen.ended .run-timer { opacity: var(--dim); }
@media (max-width: 640px) {
  .run-top { grid-template-columns: minmax(0, 1fr) auto; }
  .run-timer { grid-row: 1; grid-column: 2; width: 56px; height: 56px; }
  .run-x { position: absolute; right: var(--gutter); bottom: max(16px, env(safe-area-inset-bottom)); width: 40px; height: 40px; display: none; }
  .run-tools { justify-content: stretch; } .run-tools .btn { flex: 1; padding: 0 10px; }
  .run-how { font-size: var(--t-13); }
  .run-res { grid-template-columns: auto minmax(0, 1fr); }
  .run-seal { width: 56px; height: 56px; }
}
@media (max-width: 640px) { .run-top { position: relative; } .run-top .run-x { display: grid; position: static; grid-row: 1; grid-column: 3; } .run-top { grid-template-columns: minmax(0, 1fr) auto auto; } }
@media (prefers-reduced-motion: reduce) { .run[open], .dq-after, .run-res, .dy-press svg, .dy-press i, .run-res.pass .run-seal, .dy-ring.done::after, .dy-ring.done .dy-ring-in b { animation: none !important; } .dy-ring.done::after { display: none; } }
.zen .run-stage { grid-row: 3; }
@media (max-width: 520px) { .dy-ring-in span { display: none; } .dy-ring-in b { font-size: 44px; } }
.price-note { margin: 28px 0 0; font-size: var(--t-15); color: var(--ink-2); max-width: 46em; }
.price-note b { color: var(--ink); }


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

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

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

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