/* ============================================================
   VND TypeKit — the typographic instrument.
   One specimen word, "TypeKit", carries the whole page: the hero
   stage, the Feel and Auto Fit demos, Ink, Scribble, the Effects
   stage and the range demonstration are all the same word in the
   same typeface, so what changes between sections is the
   TREATMENT rather than the subject.
   ============================================================ */

/* Tracking in the Inspector retracks the page's own display type. */
.section-title, .cal-month, .pnum { letter-spacing: var(--page-track, .01em); }
/* Section titles break themselves evenly rather than stranding a last word. */
.section-title { text-wrap: balance; }

.tk-hero { padding-top: clamp(2rem, 5vw, 3.4rem); }
.tk-thesis {
  font-size: clamp(1.05rem, 2.05vw, 1.62rem); font-weight: 600; letter-spacing: -.022em;
  line-height: 1.25; margin: 1.3rem auto .85rem; max-width: 100%; text-wrap: balance;
}
.honest {
  max-width: 86ch; margin: 1.6rem auto 0; text-align: center;
  font-size: .7rem; line-height: 1.9; color: var(--text-faint); letter-spacing: .02em;
}

/* ---------- the specimen stage (hero) ---------- */
.spec-stage {
  position: relative; margin: 1.4rem auto 0; max-width: 940px;
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(5.5rem, 14vw, 10rem);
}
.spec-word {
  position: relative; z-index: 2;
  font-size: clamp(3.2rem, 13vw, 9.5rem); line-height: 1.02;
  letter-spacing: var(--page-track, .01em);
  transition: color .4s ease;
}
.spec-word .ch { line-height: 1.02; }
.spec-word .ch { display: inline-block; will-change: transform, opacity; }
.spec-word.drawn { color: transparent; }
.spec-pen {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.spec-pen.on { opacity: 1; }
.spec-read {
  font-size: .74rem; color: var(--text-faint); letter-spacing: .06em;
  margin: .9rem 0 0; min-height: 1.2em;
}

/* ---------- Highlight, drawn the way the engine draws it ----------
   A translucent block behind the words plus two grab handles: the knob
   sits ON TOP at the start of the span and UNDERNEATH at the end, which
   is what makes the pair read as one selection rather than two carets.
   The block and the handles are separate marks because they are not the
   same weight of ink - the handles run at three times the wash. */
.hl-mark {
  position: absolute; z-index: 1; pointer-events: none;
  border-radius: 2px; opacity: 0;
}
.hl-handles { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.hl-handles .hbar { position: absolute; border-radius: 1px; }
.hl-handles .hknob { position: absolute; border-radius: 50%; }

/* ---------- shared demo furniture ---------- */
.demo-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: clamp(8rem, 16vw, 12rem);
  padding: 1.4rem clamp(1rem, 3vw, 2rem);
  background:
    radial-gradient(60% 90% at 50% 40%, rgba(255,255,255,.05), transparent 70%),
    var(--bg-deep);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
html[data-theme="dark"] .demo-stage { background: #101116; }

/* Motion is about what a title does inside a timeline, so those two demos
   sit on a viewer ground; Ink and Scribble are about the surface of the
   letter, so they stay on paper. The difference is the argument, not
   decoration. */
.feel-win .demo-stage, .fit-win .demo-stage {
  background: radial-gradient(120% 130% at 50% 30%, #24262E 0%, #0B0C10 68%);
  border-bottom-color: rgba(255,255,255,.08);
}
.feel-win .demo-word, .fit-win .demo-word { color: #F2F3F5; }
.demo-word {
  font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.15;
  letter-spacing: var(--page-track, .01em); color: var(--text);
}
.demo-word .ch { display: inline-block; }
.demo-body { padding: clamp(1.2rem, 3vw, 1.9rem); }

.win-tag {
  flex: none; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); border: 1px solid var(--border);
  border-radius: 6px; padding: .16rem .42rem; background: var(--surface);
}

.ichips { display: flex; flex-wrap: wrap; gap: 6px; }
.ichips button {
  appearance: none; cursor: pointer; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted);
  font: 600 .78rem/1 "Inter", ui-sans-serif, system-ui, sans-serif; padding: .5rem .8rem;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.ichips button:hover { color: var(--text); border-color: var(--accent-ring); }
.ichips button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ichips.small button { font-size: .72rem; padding: .42rem .68rem; }

.proof-title { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin: 1.3rem 0 .55rem; }
.proof-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.proof-list li {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: .74rem; color: var(--text-muted);
  padding: .4rem .6rem; border-radius: 7px; background: var(--surface-2);
}
.proof-list li span { flex: 1; }
.proof-list li b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.proof-note { font-size: .82rem; line-height: 1.6; color: var(--text-muted); margin: .9rem 0 0; }
.btn-sm { padding: .6rem 1rem; font-size: .82rem; border-radius: 11px; }

/* ---------- TYPE: the character style range ---------- */
.cs-win { max-width: 1060px; margin: 0 auto; }
.cs-stage {
  padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1rem, 4vw, 3rem);
  background: var(--bg-deep); border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
html[data-theme="dark"] .cs-stage { background: #101116; }
.cs-line {
  font-size: clamp(1.7rem, 5.4vw, 4rem); line-height: 1.15; margin: 0;
  text-align: center; white-space: nowrap; letter-spacing: var(--page-track, .01em);
}
.cs-line .ch { display: inline-block; transition: color .18s ease; }
.cs-line .ch.sp { width: .28em; }

.cs-rail { padding: 1.1rem clamp(1rem, 4vw, 3rem) .3rem; }
.cs-track {
  position: relative; height: 30px; margin: 0 auto;
  border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border);
}
.cs-band {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 34%;
  border-radius: 6px; background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-ring);
}
.cs-handle {
  position: absolute; inset: 0; width: 100%; margin: 0;
  appearance: none; background: transparent; pointer-events: none;
}
.cs-handle::-webkit-slider-thumb {
  appearance: none; pointer-events: auto; cursor: ew-resize;
  width: 14px; height: 24px; border-radius: 5px;
  background: var(--surface); border: 1px solid var(--accent);
  box-shadow: 0 1px 3px rgba(23,24,28,.22);
}
.cs-handle::-moz-range-thumb {
  pointer-events: auto; cursor: ew-resize;
  width: 14px; height: 24px; border-radius: 5px;
  background: var(--surface); border: 1px solid var(--accent);
}
.cs-handle::-webkit-slider-runnable-track { background: transparent; }
.cs-handle::-moz-range-track { background: transparent; }
.cs-hint { font-size: .68rem; color: var(--text-faint); margin: .7rem 0 0; text-align: center; }

.cs-controls {
  display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem; align-items: center;
  padding: 1.2rem clamp(1rem, 4vw, 3rem);
}
.cs-group { display: flex; align-items: center; gap: .6rem; }
.cs-group-wide { flex: 1 1 260px; }
.cs-group-wide .cs-track { flex: 1; width: 100%; }
.cs-group-btn { margin-left: auto; gap: .8rem; flex-wrap: wrap; }
.cs-label { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.cs-group input[type="range"]:not(.cs-handle) { width: 108px; }
.cs-note {
  font-size: .82rem; line-height: 1.65; color: var(--text-muted);
  border-top: 1px solid var(--border); background: var(--surface-2);
  padding: 1rem clamp(1rem, 4vw, 3rem); margin: 0;
}

.iswatches { display: inline-flex; gap: 5px; }
.iswatch {
  width: 20px; height: 20px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border-strong); padding: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.iswatch:hover { transform: translateY(-1px); }
.iswatch.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }

/* ---------- the control census ---------- */
.census {
  max-width: 720px; margin: clamp(2rem, 5vw, 3.2rem) auto 0;
  border: 1px solid var(--border); border-radius: 18px;
  background: var(--surface); padding: 1.5rem clamp(1.1rem, 3vw, 2rem);
  box-shadow: var(--shadow-soft);
}
.census-title { font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 1rem; }
.census-rows { display: grid; gap: 9px; }
.cbar { display: grid; grid-template-columns: 74px 1fr 44px; align-items: center; gap: 12px; }
.clab { font-size: .84rem; font-weight: 600; }
.ctrack { height: 18px; border-radius: 5px; background: var(--bg-deep); overflow: hidden; }
.cfill { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.cbar:not(:first-child) .cfill { background: var(--text-faint); }
.cnum { font-size: .76rem; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.census-foot { font-size: .68rem; line-height: 1.7; color: var(--text-faint); margin: 1.1rem 0 0; }

/* The rest of the Text tab, as a caption band rather than a card grid —
   these are specifications, and specifications do not need boxes. */
.typo-strip {
  display: grid; gap: 1.4rem 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  max-width: 900px; margin: clamp(1.6rem, 3.5vw, 2.4rem) auto 0;
  padding-top: 1.4rem; border-top: 1px solid var(--border);
}
.typo-h {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 .5rem;
}
.typo-b { font-size: .82rem; line-height: 1.62; color: var(--text-muted); margin: 0; }

/* ---------- MOTION ---------- */
.motion-grid {
  display: grid; gap: clamp(1rem, 2.5vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  max-width: 1200px; margin: 0 auto;
}
.fit-lead { font-size: .95rem; font-weight: 600; margin: 0 0 1rem; }

/* The Auto Fit timeline. The In and Out blocks are drawn at a fixed
   frames-per-pixel, so moving the cut visibly does NOT resize them - which
   is the whole claim the section is making. */
.tl {
  position: relative; height: 66px; border-radius: 10px;
  background: var(--bg-deep); border: 1px solid var(--border);
  overflow: hidden; user-select: none; touch-action: none;
}
.tl-ruler {
  position: absolute; inset: 0 0 auto 0; height: 13px;
  background-image: repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 22px);
}
.tl-track { position: absolute; left: 6px; right: 6px; top: 19px; bottom: 8px; }
.tl-clip {
  position: absolute; top: 0; bottom: 0; border-radius: 6px; overflow: hidden;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong);
  display: flex; align-items: stretch;
}
.tl-in, .tl-out { background: var(--accent); opacity: .85; flex: none; }
.tl-hold { flex: 1; background: var(--accent-soft); min-width: 0; }
.tl-clip .tl-name {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  font-size: .6rem; color: var(--text); white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 4px var(--surface), 0 0 4px var(--surface);
}
.tl-play {
  position: absolute; top: 0; bottom: 0; width: 13px; margin-left: -6px;
  cursor: ew-resize; z-index: 3;
}
.tl-play::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 4px; width: 3px;
  background: var(--text); border-radius: 2px;
}
.tl-play::after {
  content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 9px;
  background: var(--text); border-radius: 2px 2px 4px 4px;
}
.tl-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-legend {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center;
  font-size: .66rem; color: var(--text-faint); margin-top: .7rem;
}
.tl-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.sw-in, .sw-out { background: var(--accent); opacity: .85; }
.sw-hold { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.tl-total { margin-left: auto; color: var(--text-muted); }

.fx-strip {
  max-width: 1200px; margin: clamp(1.4rem, 3vw, 2rem) auto 0;
  border: 1px solid var(--border); border-radius: 18px;
  background: var(--surface); padding: 1.4rem clamp(1.1rem, 3vw, 2rem);
  box-shadow: var(--shadow-soft);
}
.fx-title { font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 1rem; }
.fx-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-pill {
  appearance: none; cursor: pointer; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-muted);
  font: 600 .76rem/1 "Inter", ui-sans-serif, system-ui, sans-serif; padding: .48rem .85rem;
  display: inline-flex; align-items: center; gap: .45rem;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.fx-pill .fx-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); }
.fx-pill.on { color: var(--text); border-color: var(--accent-ring); background: var(--accent-soft); }
.fx-pill.on .fx-dot { background: var(--accent); }
.fx-foot { font-size: .82rem; line-height: 1.65; color: var(--text-muted); margin: 1.1rem 0 0; max-width: 74ch; }

/* ---------- MARKS: pen ---------- */
.pen-win { max-width: 1060px; margin: 0 auto; }
.pen-stage {
  position: relative; padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1rem, 4vw, 3rem);
  background: #0F1015; border-bottom: 1px solid var(--border);
}
.pen-frame {
  position: relative; aspect-ratio: 1000 / 340; width: 100%;
  border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 140% at 20% 10%, #23262F 0%, #0C0D11 62%);
}
.pen-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the accent rule a lower third sits on, so the frame reads as a broadcast
   title rather than as text floating on black */
.pen-frame::after {
  content: ""; position: absolute; left: 9%; top: 45.5%;
  width: 6.2%; height: 1.6%; background: var(--accent); border-radius: 2px;
}
.pen-alt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pen-controls {
  display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem; align-items: center;
  padding: 1.2rem clamp(1rem, 4vw, 3rem);
}
.pen-track { width: 100%; }
.pen-note {
  font-size: .82rem; line-height: 1.65; color: var(--text-muted);
  border-top: 1px solid var(--border); background: var(--surface-2);
  padding: 1rem clamp(1rem, 4vw, 3rem); margin: 0;
}

.marks-pair {
  display: grid; gap: clamp(1rem, 2.5vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  max-width: 1060px; margin: clamp(1.4rem, 3vw, 2rem) auto 0;
}
.mark-h { font-size: .95rem; font-weight: 650; margin: 0 0 .5rem; }
.mark-b { font-size: .84rem; line-height: 1.65; color: var(--text-muted); margin: 0 0 1rem; }
.mark-note { font-size: .64rem; line-height: 1.7; color: var(--text-faint); margin: .9rem 0 0; }
.ink-read { margin-top: .9rem; grid-template-columns: repeat(4, 1fr); display: grid; gap: 4px; }
.ink-read li { flex-direction: column; align-items: flex-start; gap: .15rem; }
.ink-stage .demo-word { paint-order: stroke fill; -webkit-text-stroke: 0 currentColor; }

/* ---------- EFFECTS: highlight + light sweep + glow, stacked ---------- */
.fx-win { max-width: 1060px; margin: 0 auto; }
.fx-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: clamp(10rem, 20vw, 15rem); padding: 2rem clamp(1rem, 4vw, 3rem);
  background: radial-gradient(120% 130% at 50% 25%, #24262E 0%, #0B0C10 68%);
  border-bottom: 1px solid var(--border); overflow: hidden;
}
.fx-line {
  position: relative; z-index: 2; text-align: center; color: #F2F3F5;
  font-size: clamp(1.4rem, 4.4vw, 3rem); line-height: 1.2;
  letter-spacing: var(--page-track, .01em); white-space: nowrap;
}
/* The sweep is a WHITE copy of the same letters, revealed only inside a soft
   angled band - the same structure the macro uses, where a white version of
   the title is merged back through a rectangle mask. It is clipped to the
   text, so it lights the letters and never the shot. */
.fx-sweep-layer {
  position: absolute; z-index: 3; left: 50%; top: 50%;
  transform: translate(-50%, -50%); color: #FFFFFF;
  opacity: 0; pointer-events: none; padding: 2rem clamp(1rem, 4vw, 3rem);
}
.fx-panel {
  display: grid; gap: 1px; background: var(--border);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  border-bottom: 1px solid var(--border);
}
.fxg { background: var(--surface); padding: 1.1rem clamp(1rem, 2.5vw, 1.5rem) 1.3rem; }
.fxg-head {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  font-size: .92rem; font-weight: 650; margin-bottom: .9rem;
}
.fxg-head input { accent-color: var(--accent); width: 15px; height: 15px; }
.fxg-body { display: grid; gap: .7rem; opacity: .45; transition: opacity .25s ease; }
.fxg.on .fxg-body { opacity: 1; }
.fxg-body .cs-group { flex-wrap: wrap; }
.cs-group-col { flex-direction: column; align-items: stretch; gap: .4rem; }
.hl-track { width: 100%; height: 24px; }
.hl-track .cs-handle::-webkit-slider-thumb { height: 18px; }
.hl-track .cs-handle::-moz-range-thumb { height: 18px; }
.fxg-note { font-size: .76rem; line-height: 1.6; color: var(--text-muted); margin: .3rem 0 0; }

/* ---------- THE INSPECTOR — the whole panel, no preview ---------- */
.insp-win { max-width: 1200px; margin: 0 auto; }
.look-rail {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: .85rem clamp(.9rem, 2.5vw, 1.4rem);
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.look-label { font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint); margin-right: .3rem; }
.look {
  appearance: none; cursor: pointer; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted);
  font: 600 .76rem/1 "Inter", ui-sans-serif, system-ui, sans-serif; padding: .48rem .8rem;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.look:hover { color: var(--text); border-color: var(--accent-ring); }
.look.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.insp { display: flex; flex-direction: column; background: var(--surface-2); min-width: 0; }
.insp-tabs { display: flex; gap: 2px; padding: .5rem .5rem 0; border-bottom: 1px solid var(--border); }
.insp-tab {
  appearance: none; cursor: pointer; border: 0; background: transparent; color: var(--text-faint);
  font: 600 .82rem/1 "Inter", ui-sans-serif, system-ui, sans-serif;
  padding: .7rem .8rem; border-radius: 8px 8px 0 0; flex: 1;
  display: inline-flex; align-items: baseline; justify-content: center; gap: .45rem;
  transition: color .2s ease, background-color .2s ease;
}
.insp-tab .tabn { font-size: .62rem; color: var(--text-faint); opacity: .8; }
.insp-tab:hover { color: var(--text-muted); }
.insp-tab.active { background: var(--surface); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.insp-tab.active .tabn { color: var(--accent); opacity: 1; }
.insp-body { padding: .9rem 1rem 1.1rem; }
.insp-pane { display: none; }
.insp-pane.active { display: block; columns: 1; column-gap: 1rem; }
@media (min-width: 860px)  { .insp-pane.active { columns: 2; } }
@media (min-width: 1180px) { .insp-pane.active { columns: 3; } }

.irow { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; flex-wrap: wrap; }
.ilabel { font-size: .72rem; color: var(--text-muted); width: 96px; flex: none; }
.irow input[type="range"] { flex: 1; min-width: 70px; accent-color: var(--accent); }
.irow input[type="text"] {
  flex: 1; min-width: 90px; font: 500 .78rem/1 "Inter", ui-sans-serif, system-ui, sans-serif;
  padding: .4rem .55rem; border-radius: 7px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
}
.ival { font-size: .68rem; color: var(--text-faint); width: 46px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.istatus { font-size: .68rem; color: var(--text-faint); flex: 1; padding: .4rem .55rem; border-radius: 7px; background: var(--bg-deep); }
.iselect {
  flex: 1; min-width: 100px; appearance: none; cursor: pointer;
  font: 500 .76rem/1 "Inter", ui-sans-serif, system-ui, sans-serif;
  padding: .42rem 1.6rem .42rem .55rem; border-radius: 7px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.iseg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--bg-deep); border: 1px solid var(--border); flex-wrap: wrap; }
.iseg button {
  appearance: none; cursor: pointer; border: 0; background: transparent; color: var(--text-faint);
  font: 600 .68rem/1 "Inter", ui-sans-serif, system-ui, sans-serif; padding: .34rem .5rem; border-radius: 6px;
}
.iseg button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft); }
.icheck { display: inline-flex; align-items: center; gap: .38rem; font-size: .72rem; color: var(--text-muted); cursor: pointer; }
.icheck input { accent-color: var(--accent); }

.inest {
  border: 1px solid var(--border); border-radius: 10px; margin: 0 0 .7rem;
  background: var(--surface); overflow: hidden;
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  transition: box-shadow .35s ease, border-color .35s ease;
}
.inest-head {
  display: flex; align-items: center; gap: .45rem; cursor: pointer; user-select: none;
  font-size: .76rem; font-weight: 650; color: var(--text);
  padding: .55rem .7rem; background: var(--surface-2);
}
.inest .caret { font-size: .5rem; color: var(--text-faint); transition: transform .2s ease; }
.inest.open .caret { transform: rotate(90deg); }
.inest-body { display: none; padding: .5rem .7rem .7rem; }
.inest.open .inest-body { display: block; }
.imore { display: block; font-size: .64rem; color: var(--text-faint); margin-top: .5rem; line-height: 1.6; }
.ipagenote { font-size: .62rem; color: var(--accent); margin: .1rem 0 .2rem; letter-spacing: .04em; }

/* Loading a look flashes the rows it actually writes — the fastest way to
   learn which controls a preset is made of. */
.inest.touched { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.irow.touched { background: var(--accent-soft); border-radius: 6px; }

.insp-foot {
  font-size: .62rem; color: var(--text-faint); text-align: center;
  padding: .6rem .8rem; border-top: 1px solid var(--border); background: var(--surface-2);
}

/* ---------- PROOF ---------- */
.proof-grid {
  display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-width: 1060px; margin: 0 auto;
}
.pcard { background: var(--surface); padding: 1.5rem 1.4rem; }
.pnum { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1; margin: 0 0 .5rem; letter-spacing: -.01em; }
.punit { font-size: .42em; color: var(--text-faint); margin-left: .18em; }
.pcap { font-size: .78rem; line-height: 1.55; color: var(--text-muted); margin: 0; }
.proof-method {
  max-width: 68ch; margin: 1.4rem auto 0; text-align: center;
  font-size: .82rem; line-height: 1.7; color: var(--text-muted);
}
.facts {
  display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 1060px; margin: clamp(1.6rem, 3.5vw, 2.4rem) auto 0;
}
.fact { background: var(--surface); padding: 1.3rem 1.4rem; }
.fact-h { font-size: .9rem; font-weight: 650; margin: 0 0 .45rem; }
.fact-b { font-size: .82rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
.limits { max-width: 1060px; margin: clamp(1.2rem, 3vw, 1.8rem) auto 0; }
.limits-h { font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 .7rem; }
.limits-list { margin: 0; padding-left: 1.1rem; max-width: 74ch; }
.limits-list li { font-size: .82rem; line-height: 1.65; color: var(--text-muted); margin-bottom: .45rem; }

/* ---------- INSTALL ---------- */
.steps-win { max-width: 720px; margin: 0 auto; }
.steps { list-style: none; margin: 0; padding: .6rem 0; }
.steps li { display: flex; gap: .9rem; align-items: flex-start; padding: .85rem clamp(1.1rem, 3vw, 1.8rem); border-bottom: 1px solid var(--border); }
.steps li:last-child { border-bottom: 0; }
.step-n { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-size: .66rem; display: inline-flex; align-items: center; justify-content: center; margin-top: .1rem; }
.step-t { font-size: .88rem; line-height: 1.6; color: var(--text-muted); }
.step-t b { color: var(--text); font-weight: 650; }
.buy-note { font-size: .68rem; color: var(--text-faint); margin: .8rem 0 0; }

/* ---------- narrow ---------- */
@media (max-width: 620px) {
  .cs-group-btn { margin-left: 0; }
  .ink-read { grid-template-columns: repeat(2, 1fr); }
  .cbar { grid-template-columns: 62px 1fr 38px; }
  .cs-line { font-size: clamp(1.3rem, 7vw, 2rem); }
  .fx-line { font-size: clamp(1.15rem, 6vw, 1.8rem); }
  .ilabel { width: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .spec-pen, .spec-word, .fx-sweep-layer, .inest { transition: none; }
}

/* ---------------------------------------------------------------- CUTOUT */
/* Each letter is its own scrap: an inline-block with its own stock colour
   behind it, its own ink, its own rotation and - when Mixed Fonts is on -
   its own family. That is what the plugin does, so the page can do it
   honestly rather than approximating. The paper lift is the same idea as
   the plugin's Paper Shadow: a small offset shadow, not a glow. */
.fx-line.cut .ch {
  display: inline-block;
  padding: var(--cut-pad, .10em) calc(var(--cut-pad, .10em) * 1.1);
  margin: 0 .012em;
  background: var(--cut-paper, #E5E0D3);
  color: var(--cut-ink, #1D1B19);
  transform: rotate(var(--cut-rot, 0deg));
  box-shadow: 0 .035em .06em rgba(0, 0, 0, .38);
  transition: background .2s ease, color .2s ease;
}
.fx-line.cut .ch.sp {
  background: none; box-shadow: none; padding-left: 0; padding-right: 0;
}
/* Torn edges: the plugin tears the stock rather than trimming it, so the
   scrap loses its straight edge. A clip-path with jittered vertices is the
   closest an element can get; it is per-letter, set from the same seed. */
.fx-line.cut.torn .ch { clip-path: var(--cut-clip, none); }
/* A letter cut to its own outline instead of a rectangle - the plugin does
   this every Nth letter, and the Look decides N. */
.fx-line.cut .ch.sil {
  background: none; box-shadow: none;
  color: var(--cut-paper, #E5E0D3);
  -webkit-text-stroke: .022em var(--cut-ink, #1D1B19);
}
@media (prefers-reduced-motion: reduce) {
  .fx-line.cut .ch { transition: none; }
}

/* The panel fits three groups to a row, so a fourth sat alone and left two
   dead cells beside it. Cutout takes the whole row instead and lays its own
   controls out across it - it has the most of the four, so it earns the
   width rather than just filling it. */
#fxg-cut { grid-column: 1 / -1; }
#fxg-cut .fxg-body {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: start; column-gap: clamp(1rem, 3vw, 2.2rem);
}
#fxg-cut .fxg-note { grid-column: 1 / -1; margin-top: .2rem; }
#fxg-cut .cs-group-btn { grid-column: 1 / -1; }

/* ------------------------------------------------------------- CUT PAPER */
/* The outline here is the plugin's own, exported from the engine and drawn
   as vector, so what the visitor judges is the real silhouette rather than
   a rounded rectangle standing in for it. */
.fx-paper { background: var(--surface); border-top: 1px solid var(--border); padding: 1.3rem clamp(1rem, 2.5vw, 1.5rem) 1.5rem; }
.fx-paper-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.fx-paper-title { font-size: .92rem; font-weight: 650; }
/* The self-healing cutting mat the reference photographs were shot on, and
   the same one tools/qa_sheet.py lays every rendered frame onto: base
   rgb(61,133,118) with rgb(86,158,142) ruling every 40px, and a heavier line
   every fifth the way a real mat marks its 5cm. The vignette sits on top of
   the ruling, so the grid falls away at the edges instead of ending flat. */
.fx-paper-stage {
  display: flex; justify-content: center; padding: 1.6rem 1rem;
  border-radius: 10px;
  background-color: #3D8576;
  background-image:
    radial-gradient(125% 150% at 50% 18%, rgba(255, 255, 255, .06) 0%, rgba(0, 0, 0, .22) 100%),
    repeating-linear-gradient(to right,  rgba(86, 158, 142, .95) 0 1px, transparent 1px 200px),
    repeating-linear-gradient(to bottom, rgba(86, 158, 142, .95) 0 1px, transparent 1px 200px),
    repeating-linear-gradient(to right,  rgba(86, 158, 142, .55) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgba(86, 158, 142, .55) 0 1px, transparent 1px 40px);
}
.pap-svg {
  width: min(560px, 100%); height: auto; display: block;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .32));
}
.fx-paper-note { margin-top: .9rem; }
.pap-set { display: block; margin-bottom: .35rem; opacity: .75; }
/* display:block on its own beats the hidden attribute, which is how all
   four settings lines showed at once. */
.pap-set[hidden] { display: none; }