/* APTAVIA 2.0 · home (run 6, part home). GENERATED by scripts/dev/public/gen-home-sheet.mjs from walk/home/_src/home.css; never hand-edit. */
/* =============================================================================
   APTAVIA 2.0 · walk · HOME (/) · round 10 — her house from the street, at dusk.
   On top of the public kit (shared/public-shell.css). Tokens and oklch() only, no hex. Motion: opacity and translate,
   once; the radar, the draft line and the flow draw on once (stroke). Nothing loops, nothing scales.
   ============================================================================= */

/* ---------------------------------------------------------------- 1 · page tokens (dark first; light = the same house by day, in ink) */
.hm {
  --hm-roof: oklch(0.205 0.014 48); --hm-roof-hi: oklch(0.36 0.02 60 / .7); --hm-cap: oklch(0.28 0.016 55);
  --hm-a0: oklch(0.90 0.11 80); --hm-a1: oklch(0.68 0.12 60); --hm-a2: oklch(0.38 0.08 46);
  --hm-b0: oklch(0.88 0.09 86); --hm-b1: oklch(0.64 0.10 66); --hm-b2: oklch(0.36 0.07 52);
  --hm-c0: oklch(0.87 0.10 78); --hm-c1: oklch(0.63 0.11 58); --hm-c2: oklch(0.35 0.07 44);
  --hm-unlit: oklch(0.20 0.022 262); --hm-reflect: oklch(0.6 0.03 260 / .10);
  --hm-walnut: oklch(0.33 0.055 46); --hm-walnut-hi: oklch(0.52 0.07 60 / .8);
  --hm-paper: oklch(0.96 0.025 88); --hm-pline: oklch(0.42 0.04 60 / .55); --hm-hl: oklch(0.70 0.16 300 / .35);
  --hm-cone: oklch(0.97 0.09 92 / .30); --hm-lamp-metal: oklch(0.24 0.02 55); --hm-shade: oklch(0.34 0.05 60);
  --hm-key: oklch(0.74 0.14 160); --hm-opt: oklch(0.42 0.04 60 / .45); --hm-card: oklch(0.95 0.025 88);
  --hm-desk: oklch(0.36 0.05 50); --hm-sheet: oklch(0.95 0.02 88); --hm-curtain: oklch(0.80 0.06 75 / .7);
  --hm-shrub: oklch(0.21 0.035 160); --hm-tree: oklch(0.185 0.03 165); --hm-trunk: oklch(0.20 0.02 50);
  --hm-path: oklch(0.40 0.012 70 / .55); --hm-shadow: oklch(0.05 0.01 270 / .5); --hm-line: oklch(0.05 0.01 50 / .55);
  --hm-oculus: oklch(0.70 0.10 70 / .55); --hm-box: oklch(0.17 0.01 60);
  --hm-spill0: oklch(0.82 0.11 72 / .42); --hm-spill1: oklch(0.82 0.11 72 / 0);
  --hm-tag-bg: oklch(0.15 0.02 272 / .74); --hm-tag-edge: oklch(0.86 0.10 80 / .42);
  /* the Studio below (walnut desk at night) */
  --hm-frame: oklch(0.50 0.02 72); --hm-frame-hi: oklch(0.68 0.02 80 / .6);
  --hm-desk-a: oklch(0.29 0.045 46); --hm-desk-b: oklch(0.225 0.038 42); --hm-desk-grain: oklch(0.36 0.05 52 / .35);
  --hm-sheet-ink: oklch(0.25 0.02 60); --hm-sheet-muted: oklch(0.42 0.025 62);
  --hm-good: oklch(0.76 0.13 160); --hm-warn: oklch(0.80 0.12 74);
  --hm-glass: linear-gradient(180deg, oklch(0.26 0.026 282 / .82), oklch(0.20 0.02 280 / .82));
  /* round 11: the house and the readable rooms */
  --hm-wall: var(--fd-wall); --hm-board-lo: var(--fd-board-lo); --hm-board-hi: var(--fd-board-hi);
  --hm-ring: oklch(0.46 0.10 265); --hm-ring-ink: oklch(0.32 0.09 265);
  --hm-gold-ink: oklch(0.47 0.11 70); --hm-gold-bg: oklch(0.86 0.12 85 / .55); --hm-gold-edge: oklch(0.62 0.12 75 / .7);
  --hm-chip-bg: oklch(0.93 0.03 85); --hm-chip-edge: oklch(0.62 0.07 78 / .6); --hm-seal: oklch(0.58 0.09 76); --hm-opt-ring: oklch(0.45 0.03 60 / .55);
  --hm-chalk: oklch(0.29 0.035 165); --hm-chalk-ln: oklch(0.92 0.01 90 / .55);
  --hm-plate-a: oklch(0.80 0.08 86); --hm-plate-b: oklch(0.62 0.085 76); --hm-plate-ink: oklch(0.22 0.03 60);
}
html:not(.dark) .hm {
  --hm-roof: oklch(0.42 0.02 55); --hm-roof-hi: oklch(0.62 0.02 70); --hm-cap: oklch(0.36 0.016 55);
  --hm-a0: oklch(0.97 0.012 230); --hm-a1: oklch(0.92 0.018 230); --hm-a2: oklch(0.85 0.024 235);
  --hm-b0: oklch(0.97 0.012 230); --hm-b1: oklch(0.92 0.018 230); --hm-b2: oklch(0.85 0.024 235);
  --hm-c0: oklch(0.97 0.012 230); --hm-c1: oklch(0.92 0.018 230); --hm-c2: oklch(0.85 0.024 235);
  --hm-unlit: oklch(0.90 0.015 235); --hm-reflect: oklch(1 0 0 / .45);
  --hm-walnut: oklch(0.55 0.05 55); --hm-walnut-hi: oklch(0.72 0.04 65);
  --hm-paper: oklch(1 0 0); --hm-pline: color-mix(in srgb, var(--sp-ink) 40%, transparent); --hm-hl: color-mix(in srgb, var(--sp-primary) 30%, transparent);
  --hm-cone: oklch(1 0 0 / 0); --hm-lamp-metal: color-mix(in srgb, var(--sp-ink) 80%, transparent); --hm-shade: color-mix(in srgb, var(--sp-ink) 70%, transparent);
  --hm-key: oklch(0.55 0.12 160); --hm-opt: color-mix(in srgb, var(--sp-ink) 22%, transparent); --hm-card: oklch(1 0 0);
  --hm-desk: oklch(0.60 0.05 55); --hm-sheet: oklch(1 0 0); --hm-curtain: oklch(0.96 0.02 85 / .95);
  --hm-shrub: oklch(0.42 0.06 150); --hm-tree: oklch(0.38 0.06 152); --hm-trunk: oklch(0.38 0.03 55);
  --hm-path: oklch(0.88 0.006 80); --hm-shadow: color-mix(in srgb, var(--sp-ink) 10%, transparent); --hm-line: color-mix(in srgb, var(--sp-ink) 70%, transparent);
  --hm-oculus: oklch(0.90 0.015 235); --hm-box: color-mix(in srgb, var(--sp-ink) 85%, transparent);
  --hm-tag-bg: oklch(1 0 0 / .92); --hm-tag-edge: color-mix(in srgb, var(--sp-ink) 55%, transparent);
  --hm-frame: oklch(0.995 0.002 85); --hm-frame-hi: oklch(1 0 0);
  --hm-desk-a: oklch(0.975 0.006 82); --hm-desk-b: oklch(0.955 0.008 80); --hm-desk-grain: color-mix(in srgb, var(--sp-ink) 6%, transparent);
  --hm-good: oklch(0.50 0.12 160); --hm-warn: oklch(0.55 0.12 64);
  --hm-glass: var(--pub-card);
  /* round 11 · light: a warm-cream house drawn in ink, the rooms lit amber by day */
  --hm-wall: oklch(0.935 0.034 82); --hm-board-lo: color-mix(in srgb, var(--sp-ink) 13%, transparent); --hm-board-hi: oklch(1 0 0 / .55);
  --hm-roof: oklch(0.40 0.03 45); --hm-cap: oklch(0.34 0.02 50);
  --hm-a0: oklch(0.96 0.07 88); --hm-a1: oklch(0.87 0.11 78); --hm-a2: oklch(0.74 0.12 64);
  --hm-b0: oklch(0.96 0.07 88); --hm-b1: oklch(0.87 0.11 78); --hm-b2: oklch(0.74 0.12 64);
  --hm-c0: oklch(0.96 0.07 88); --hm-c1: oklch(0.87 0.11 78); --hm-c2: oklch(0.74 0.12 64);
  --hm-unlit: oklch(0.82 0.025 235); --hm-cone: oklch(1 0.05 92 / .35); --hm-curtain: oklch(0.97 0.025 85 / .95);
  --hm-chalk: oklch(0.38 0.04 165); --hm-board-wall: oklch(0 0 0 / .05);
  --hm-gold-ink: oklch(0.45 0.11 68);
}

/* ---------------------------------------------------------------- 2 · the hero: the camera pushed in on her house; the lights climb it */
.hm-hero { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); min-height: max(640px, 100svh); }
.hm-climb { color: var(--pub-lamp); }
html:not(.dark) .hm-climb { color: var(--sp-primary); }
.hm-hero .pub-actions { flex-direction: column; align-items: flex-start; gap: 6px; }
/* the second door is a plain link under the violet: one boxed button on the first screen */
.hm-second { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font: 650 16px/1.2 var(--pub-font); color: var(--pub-ink); text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: color-mix(in oklch, var(--pub-lamp) 55%, transparent); transition: text-decoration-color .2s var(--pub-ease); }
.hm-second:hover { text-decoration-color: var(--pub-lamp); }
html:not(.dark) .hm-second { text-decoration-color: color-mix(in srgb, var(--sp-ink) 35%, transparent); } html:not(.dark) .hm-second:hover { text-decoration-color: var(--sp-ink); }
.hm-second:focus-visible { outline: 3px solid var(--sp-focus); outline-offset: 2px; border-radius: 6px; }
/* the frame (drawing units): the figure bleeds to the right edge of the screen, the house fills ~60% of it */
.hm-hero .pub-hero-pic { --vx: 30; --vy: 46; --vw: 700; --vh: 584; position: relative; max-width: none; width: calc(100% + var(--pub-gut)); margin-right: calc(-1 * var(--pub-gut)); }
.hm-hero .hm-house { display: block; width: 100%; height: auto; aspect-ratio: 700 / 584; overflow: hidden; }
@media (max-width: 899px) {
  .hm-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hm-hero .pub-actions { align-items: stretch; } .hm-second { justify-content: center; }
  .hm-hero .pub-hero-pic { justify-self: center; width: min(100%, 680px); margin-right: 0; }
}
/* a phone: the camera closes in on the upstairs (square frame; the Studio window ≥ 160 px wide) */
@media (max-width: 599px) {
  .hm-hero .pub-hero-pic { --vx: 88; --vw: 584; width: calc(100% + 2 * var(--pub-gut)); max-width: none; margin-inline: calc(-1 * var(--pub-gut)); }
  .hm-hero .hm-house { aspect-ratio: 1 / 1; }
}

/* the house's paint */
.hm-house .hm-s-a0 { stop-color: var(--hm-a0); } .hm-house .hm-s-a1 { stop-color: var(--hm-a1); } .hm-house .hm-s-a2 { stop-color: var(--hm-a2); }
.hm-house .hm-s-b0 { stop-color: var(--hm-b0); } .hm-house .hm-s-b1 { stop-color: var(--hm-b1); } .hm-house .hm-s-b2 { stop-color: var(--hm-b2); }
.hm-house .hm-s-c0 { stop-color: var(--hm-c0); } .hm-house .hm-s-c1 { stop-color: var(--hm-c1); } .hm-house .hm-s-c2 { stop-color: var(--hm-c2); }
.hm-s-spill0 { stop-color: var(--hm-spill0); } .hm-s-spill1 { stop-color: var(--hm-spill1); }
.hm-wall { fill: var(--hm-wall); } .hm-board { fill: none; stroke: var(--hm-board-lo); stroke-width: 1.2; } .hm-board-hi { fill: none; stroke: var(--hm-board-hi); stroke-width: 1; }
.hm-roof { fill: var(--hm-roof); } .hm-roof-hi { fill: none; stroke: var(--hm-roof-hi); stroke-width: 2; } .hm-cap { fill: var(--hm-cap); }
.hm-gutter { fill: var(--fd-gutter); } .hm-fascia { fill: var(--fd-fascia); }
.hm-oculus { fill: var(--hm-unlit); } .hm-ocu-lit { fill: var(--hm-a0); }
.hm-spill { fill: url(#hm-spill-g); } .hm-lawn { opacity: .9; }
html:not(.dark) :is(.hm-spill-on, .hm-lawn) { display: none; }
.hm-unlit { fill: var(--hm-unlit); } .hm-reflect { fill: var(--hm-reflect); }
.hm-curtain { fill: var(--hm-curtain); }
.hm-glint { fill: oklch(1 0.02 90); opacity: 0; transition: opacity .2s var(--pub-ease); }
.hm-shelf { fill: var(--hm-walnut); } .hm-books { fill: var(--hm-walnut); opacity: .85; }
.hm-cone { fill: var(--hm-cone); }
.hm-paper { fill: var(--hm-paper); } .hm-hl { fill: var(--hm-hl); }
.hm-pline { fill: none; stroke: var(--hm-pline); stroke-width: 1.8; stroke-linecap: round; }
.hm-seal { fill: var(--pub-brass); } .hm-seal-ring { fill: none; stroke: var(--hm-ring); stroke-width: 2.4; }
.hm-walnut { fill: var(--hm-walnut); } .hm-walnut-hi { fill: none; stroke: var(--hm-walnut-hi); stroke-width: 1.2; }
.hm-lamp { fill: var(--hm-lamp-metal); } .hm-shade { fill: var(--hm-shade); }
.hm-card { fill: var(--hm-card); }
.hm-opt { fill: none; stroke: var(--hm-opt); stroke-width: 1.6; } .hm-key { fill: var(--hm-key); }
.hm-book-open { fill: var(--hm-sheet); }
.hm-board-wall { fill: oklch(0 0 0 / .07); }
.hm-chalk { fill: var(--hm-chalk); } .hm-chalk-ln { fill: none; stroke: var(--hm-chalk-ln); stroke-width: 1.6; stroke-linecap: round; }
.hm-clock { fill: var(--hm-sheet); } .hm-clock-rim { fill: none; stroke: var(--hm-lamp-metal); stroke-width: 2.6; }
.hm-clock-hand, .hm-clock-tick { fill: none; stroke: var(--hm-lamp-metal); stroke-width: 2.2; stroke-linecap: round; } .hm-clock-tick { stroke-width: 1.4; }
.hm-desk { fill: var(--hm-desk); } .hm-desk-leg { fill: var(--hm-desk); } .hm-sheet { fill: var(--hm-sheet); }
.hm-shrub { fill: var(--hm-shrub); } .hm-tree { fill: var(--hm-tree); } .hm-trunk { fill: var(--hm-trunk); }
.hm-path { fill: var(--hm-path); } .hm-shadow { fill: var(--hm-shadow); } .hm-line { fill: none; stroke: var(--hm-line); stroke-width: 1.4; }
.hm-ajar { fill: var(--pd-warm); opacity: 0; transition: opacity .3s var(--pub-ease); }
html:not(.dark) .hm-ajar { fill: color-mix(in srgb, var(--sp-ink) 70%, transparent); }
/* light: a warm-cream house drawn in ink, the rooms lit amber by day */
html:not(.dark) .hm-house .hm-ol { stroke: color-mix(in srgb, var(--sp-ink) 72%, transparent); stroke-width: 1.3; }
html:not(.dark) .hm-house :is(.pp-leaf, .hm-unlit, .hm-oculus, .hm-card, .hm-paper) { stroke: color-mix(in srgb, var(--sp-ink) 55%, transparent); stroke-width: 1; }

/* ---- the HTML over the drawing: each window is one link; its readable room sits exactly over the drawn one */
.hm-win, .hm-door { position: absolute; display: block; text-decoration: none; border-radius: 4px;
  left: calc((var(--x) - var(--vx)) / var(--vw) * 100%); top: calc((var(--y) - var(--vy)) / var(--vh) * 100%);
  width: calc(var(--w) / var(--vw) * 100%); height: calc(var(--h) / var(--vh) * 100%); }
.hm-win:focus-visible { outline: 3px solid var(--sp-focus); outline-offset: 2px; }
.hm-pic:has([data-hm-win="essays"]:is(:hover, :focus-visible)) [data-hm-glint="essays"],
.hm-pic:has([data-hm-win="practice"]:is(:hover, :focus-visible)) [data-hm-glint="practice"],
.hm-pic:has([data-hm-win="mocks"]:is(:hover, :focus-visible)) [data-hm-glint="mocks"] { opacity: .14; }
/* the brass plate on each sill names the room */
.hm-sill { position: absolute; left: 50%; bottom: 0; translate: -50% 52%; padding: 4px 9px 3px; border-radius: 3px; white-space: nowrap;
  font: 700 12px/1 var(--pub-font); letter-spacing: .1em; text-transform: uppercase; color: var(--hm-plate-ink);
  background: linear-gradient(180deg, var(--hm-plate-a), var(--hm-plate-b)); box-shadow: inset 0 1px 0 oklch(1 0 0 / .45), 0 2px 4px -1px oklch(0.05 0.01 50 / .6); transition: box-shadow .2s var(--pub-ease); }
.hm-win:is(:hover, :focus-visible) .hm-sill { box-shadow: inset 0 1px 0 oklch(1 0 0 / .45), 0 0 0 2px var(--pub-lamp), 0 2px 4px -1px oklch(0.05 0.01 50 / .6); }
html:not(.dark) .hm-win:is(:hover, :focus-visible) .hm-sill { box-shadow: inset 0 1px 0 oklch(1 0 0 / .45), 0 0 0 2px var(--sp-ink); }
/* the Studio: the marked essay on its stand (Judge 1 · Judge 2, the mark, the gain) */
.hm-paper-ov, .hm-card-ov { position: absolute; display: block; container-type: size; overflow: hidden; color: var(--hm-sheet-ink); }
.hm-paper-ov { border-radius: 2px; background: var(--hm-paper); box-shadow: 0 1px 0 oklch(1 0 0 / .7) inset, 0 12px 22px -12px oklch(0.05 0.02 40 / .9); }
.hm-card-ov { border-radius: 3px; background: var(--hm-card); box-shadow: 0 1px 0 oklch(1 0 0 / .7) inset, 0 10px 18px -12px oklch(0.05 0.02 40 / .8); }
html:not(.dark) :is(.hm-paper-ov, .hm-card-ov) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sp-ink) 55%, transparent), 0 8px 16px -12px color-mix(in srgb, var(--sp-ink) 60%, transparent); }
.hm-w-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; gap: 6px 12px; height: 100%; padding: 9px 11px 8px; box-sizing: border-box; }
.hm-w-essay { grid-area: 1 / 1; overflow: hidden; font: 400 12px/1.42 var(--font-newsreader), 'Newsreader', Georgia, serif; color: var(--hm-sheet-ink);
  -webkit-mask-image: linear-gradient(180deg, black 62%, transparent); mask-image: linear-gradient(180deg, black 62%, transparent); }
.hm-w-essay mark { color: inherit; background: oklch(0.62 0.2 300 / .15); box-shadow: inset 0 -1.5px 0 oklch(0.55 0.2 300 / .75); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hm-w-mark { grid-area: 1 / 2; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hm-w-ring { position: relative; display: block; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--hm-ring); font: 760 22px/1 var(--pub-font); letter-spacing: -.02em; color: var(--hm-ring-ink); font-variant-numeric: tabular-nums; }
.hm-n { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; } .hm-n--last { opacity: 1; }
.hm-w-band { font: 700 12px/1 var(--pub-font); color: var(--hm-sheet-ink); }
.hm-w-gain { padding: 3px 7px; border-radius: 999px; font: 760 12px/1 var(--pub-font); color: var(--hm-gold-ink); background: var(--hm-gold-bg); box-shadow: inset 0 0 0 1px var(--hm-gold-edge); }
.hm-w-judges { grid-area: 2 / 1 / 3 / 3; display: flex; justify-content: flex-end; gap: 6px; }
.hm-w-j { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 3px; border-radius: 999px; font: 650 12px/1 var(--pub-font); color: var(--hm-sheet-ink); background: var(--hm-chip-bg); box-shadow: inset 0 0 0 1px var(--hm-chip-edge); }
.hm-w-j svg { width: 15px; height: 15px; fill: var(--hm-seal); stroke: var(--hm-paper); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hm-w-j svg circle { stroke: none; }
@container (max-width: 200px) {
  .hm-w-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 6px; padding: 6px 6px; }
  .hm-w-essay { display: none; }
  .hm-w-mark { grid-area: 1 / 1; flex-direction: row; justify-content: center; gap: 6px; }
  .hm-w-ring { width: 36px; height: 36px; font-size: 18px; }
  .hm-w-judges { grid-area: 2 / 1; justify-content: center; gap: 4px; }
  .hm-w-judges { gap: 8px; } .hm-w-j { padding: 0; gap: 3px; background: none; box-shadow: none; } .hm-w-j svg { width: 14px; height: 14px; }
}
/* the practice room: the sample question pinned to the wall, B keyed */
.hm-cv-in { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; height: 100%; padding: 9px 11px 10px; box-sizing: border-box; }
.hm-w-stem { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font: 400 12px/1.4 var(--font-newsreader), 'Newsreader', Georgia, serif; color: var(--hm-sheet-ink); }
.hm-w-opts { display: flex; gap: 8px; }
.hm-w-opts i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 12px/1 var(--pub-font); font-style: normal; color: var(--hm-sheet-muted); box-shadow: inset 0 0 0 1.5px var(--hm-opt-ring); }
.hm-w-opts .hm-w-key { color: oklch(1 0 0); background: var(--hm-key); box-shadow: none; }
@container (max-width: 170px) { .hm-cv-in { padding: 6px 7px 7px; gap: 4px; } .hm-w-stem { -webkit-line-clamp: 1; } .hm-w-opts { gap: 5px; } .hm-w-opts i { width: 20px; height: 20px; } }
@container (max-height: 74px) { .hm-w-stem { -webkit-line-clamp: 1; } }
/* pointing at the way in (mouse or keyboard) sets the blue door ajar (opacity only) */
.hm-hero:has([data-hm-start]:is(:hover, :focus-visible), .hm-door:hover) .hm-ajar { opacity: .95; }

/* ---- the arrival, ONCE (≤ 1.2 s): the first frame is already the house, dim; only the lights arrive, bottom to top:
   the porch lamp · the mock room · the practice room · the Studio, where the mark steps 60 → 67 → 65 → 73 and +8 lands in gold ·
   last, the round window at the top of the gable. Opacity and translate only; numbers swap as text, nothing scales, nothing loops. */
html.pub-arrive [data-pub-arrive] .hm-pic, html.pub-arrive.pub-go [data-pub-arrive] .hm-pic { opacity: 1; translate: none; transition: none; }
html.pub-arrive .hm-hero :is(.hm-lit, .hm-spill, .hm-lawn, .hm-gap, .pp-halo, .hm-ocu-lit, .hm-paper-ov, .hm-card-ov, .hm-sill, .hm-w-gain) { opacity: 0; }
html.pub-arrive .hm-hero .hm-sill { translate: -50% 90%; }
html.pub-arrive .hm-hero .hm-w-gain { translate: 0 5px; }
html.pub-arrive .hm-hero .hm-n { opacity: 0; }
html.pub-arrive.pub-go .hm-hero :is(.hm-lit, .hm-spill, .hm-lawn, .pp-halo, .hm-ocu-lit, .hm-paper-ov, .hm-card-ov, .hm-sill, .hm-w-gain) { opacity: 1; transition: opacity .3s var(--pub-ease), translate .3s var(--pub-ease); }
html.pub-arrive.pub-go .hm-hero .hm-gap { opacity: .9; transition: opacity .3s .06s var(--pub-ease); }
html.pub-arrive.pub-go .hm-hero .hm-lawn { opacity: .9; }
html.pub-arrive.pub-go .hm-hero .hm-sill { translate: -50% 52%; }
html.pub-arrive.pub-go .hm-hero .hm-w-gain { translate: 0 0; }
html.pub-arrive.pub-go .hm-hero .pp-halo { transition-delay: .06s; }
html.pub-arrive.pub-go .hm-hero :is([data-hm-lit="mocks"], [data-hm-spill="mocks"], .hm-lawn) { transition-delay: .14s; }
html.pub-arrive.pub-go .hm-hero [data-hm-win="mocks"] .hm-sill { transition-delay: .24s; }
html.pub-arrive.pub-go .hm-hero :is([data-hm-lit="practice"], [data-hm-spill="practice"], .hm-card-ov) { transition-delay: .32s; }
html.pub-arrive.pub-go .hm-hero [data-hm-win="practice"] .hm-sill { transition-delay: .42s; }
html.pub-arrive.pub-go .hm-hero :is([data-hm-lit="essays"], [data-hm-spill="essays"], .hm-paper-ov) { transition-delay: .5s; transition-duration: .26s; }
html.pub-arrive.pub-go .hm-hero [data-hm-win="essays"] .hm-sill { transition-delay: .6s; }
html.pub-arrive.pub-go .hm-hero .hm-n[data-n="60"] { animation: hm-step .14s .54s both; }
html.pub-arrive.pub-go .hm-hero .hm-n[data-n="67"] { animation: hm-step .14s .68s both; }
html.pub-arrive.pub-go .hm-hero .hm-n[data-n="65"] { animation: hm-step .12s .82s both; }
html.pub-arrive.pub-go .hm-hero .hm-n--last { animation: hm-land .14s .94s both; }
html.pub-arrive.pub-go .hm-hero .hm-w-gain { transition-delay: .98s; transition-duration: .2s; }
html.pub-arrive.pub-go .hm-hero .hm-ocu-lit { transition-delay: .94s; transition-duration: .24s; }
@keyframes hm-step { 0% { opacity: 0; translate: 0 4px; } 25%, 80% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -4px; } }
@keyframes hm-land { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }

/* ---------------------------------------------------------------- 3 · shared bits */
.hm-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hm-center { text-align: center; } .hm-center .pub-sub { margin-inline: auto; }
.hm-eyebrow { margin: 0; font: 650 12px/1.2 var(--pub-font); letter-spacing: .12em; text-transform: uppercase; color: var(--pub-muted); }
.hm-mini-h { margin: 0; font: 650 13px/1.3 var(--pub-font); color: var(--pub-muted); }
.hm-chip { white-space: nowrap; flex: none; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font: 650 12px/1.2 var(--pub-font); color: var(--pub-lamp);
  background: color-mix(in oklch, var(--pub-lamp) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--pub-lamp) 30%, transparent); }
html:not(.dark) .hm-chip { color: var(--pub-ink); background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge-strong); }
.hm-caption { margin: 18px 0 0; text-align: center; font: 500 12.5px/1.4 var(--pub-font); color: var(--pub-muted); }
.hm-two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.hm-two--pic { align-items: center; }
@media (max-width: 899px) { .hm-two { grid-template-columns: minmax(0, 1fr); } }
.hm-more { margin: 22px 0 0; font: 500 15px/1.5 var(--pub-font); color: var(--pub-body); }
.hm-more--top { margin: -12px 0 28px; }
.hm-more a { color: var(--pub-ink); text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--pub-lamp) 60%, transparent); text-underline-offset: 4px; font-weight: 650; }
.hm-link-btn { appearance: none; border: 0; background: none; padding: 10px 4px; min-height: 44px; cursor: pointer; font: 650 15px/1 var(--pub-font); color: var(--pub-ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--pub-edge-strong); }
.hm-link-btn:hover { text-decoration-color: var(--pub-lamp); }
.hm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hm-wordmark { font: 760 17px/1 var(--pub-font); letter-spacing: -.02em; color: var(--pub-ink); } .hm-wordmark > span { color: var(--sp-primary); }
.hm-glass { border-radius: 24px; background: var(--hm-glass); box-shadow: inset 0 0 0 1px var(--pub-edge), inset 1px 1px 0 var(--pub-spec), var(--pub-drop); }
.hm section[id] { scroll-margin-top: 64px; }
html:has(#hm) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(#hm) { scroll-behavior: auto; } }

/* ---------------------------------------------------------------- 4 · the doorstep strip */
.hm-step { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.hm-step-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 899px) { .hm-step-in { grid-template-columns: minmax(0, 1fr); } }
.hm-lede { margin: 0; font: 500 clamp(18px, 1.6vw, 21px)/1.55 var(--pub-font); color: var(--pub-ink); text-wrap: pretty; }
.hm-offer { margin: 18px 0 0; font: 650 14px/1.4 var(--pub-font); color: var(--pub-lamp); }
html:not(.dark) .hm-offer { color: var(--pub-ink); }
.hm-offer span { margin: 0 6px; opacity: .6; }
.hm-sitting { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 16px; font: 500 14px/1.45 var(--pub-font); color: var(--pub-body);
  background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge); }
.hm-sitting b { color: var(--pub-ink); font-weight: 650; } .hm-sitting .hm-i { color: var(--pub-lamp); margin-top: 1px; }
.hm-proof { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.hm-proof li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 999px; font: 650 13px/1.2 var(--pub-font); color: var(--pub-ink);
  background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge); }
.hm-proof .hm-i { width: 16px; height: 16px; color: var(--pub-brass); }
.hm-acer { margin: 12px 0 0; font: 500 12.5px/1.4 var(--pub-font); color: var(--pub-muted); }

/* ---------------------------------------------------------------- 5 · #essays: the Studio window (walnut desk, two lamps) */
.hm-studio { position: relative; padding: 14px; border-radius: 20px; background: linear-gradient(180deg, var(--hm-frame-hi), var(--hm-frame) 6%);
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / .25), 0 40px 80px -40px oklch(0.02 0.01 280 / .95); }
html:not(.dark) .hm-studio { box-shadow: inset 0 0 0 1px var(--pub-edge-strong), var(--pub-drop); }
.hm-studio-in { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(18px, 3vw, 36px); padding: clamp(18px, 3.4vw, 44px);
  border-radius: 10px; overflow: hidden;
  background: repeating-linear-gradient(92deg, transparent 0 22px, var(--hm-desk-grain) 22px 23px, transparent 23px 61px), linear-gradient(180deg, var(--hm-desk-a), var(--hm-desk-b)); }
.hm-studio-lamp { position: absolute; z-index: 1; top: 14px; width: 60%; height: 80%; pointer-events: none; }
.hm-studio-lamp--l { left: 14px; background: radial-gradient(60% 70% at 18% 0%, oklch(0.92 0.10 85 / .22), transparent 70%); }
.hm-studio-lamp--r { right: 14px; background: radial-gradient(60% 70% at 82% 0%, oklch(0.92 0.10 85 / .18), transparent 70%); }
html:not(.dark) .hm-studio-lamp { display: none; }
.hm-studio-in > * { position: relative; z-index: 2; }
@media (max-width: 899px) { .hm-studio-in { grid-template-columns: minmax(0, 1fr); } }
.hm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.hm-essay { padding: clamp(20px, 2.6vw, 30px); border-radius: 6px; background: var(--hm-paper); color: var(--hm-sheet-ink);
  box-shadow: 0 1px 0 oklch(1 0 0 / .6) inset, 0 26px 40px -24px oklch(0.02 0.01 40 / .9); rotate: -.6deg; }
html:not(.dark) .hm-essay { box-shadow: inset 0 0 0 1px var(--pub-edge), var(--pub-drop); rotate: 0deg; }
.hm-essay .hm-eyebrow { color: var(--hm-sheet-muted); }
.hm-essay .hm-chip { color: oklch(0.38 0.12 300); background: oklch(0.92 0.04 300); box-shadow: none; }
.hm-essay-body p { margin: 0 0 14px; font: 400 17px/1.7 var(--font-newsreader), 'Newsreader', Georgia, serif; color: var(--hm-sheet-ink); }
.hm-essay-body mark { color: inherit; background: linear-gradient(transparent 0 calc(100% - 2px), oklch(0.55 0.2 300 / .7) 0) , oklch(0.62 0.2 300 / .16); padding: 0 2px; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hm-jnote { margin-top: 6px; padding: 14px 16px; border-radius: 10px; background: oklch(0.94 0.03 300 / .65); box-shadow: inset 3px 0 0 oklch(0.55 0.2 300); }
.hm-jnote-h { margin: 0 0 4px; font: 650 13px/1.2 var(--pub-font); color: oklch(0.42 0.17 300); }
.hm-jnote-t { margin: 0; font: 400 15px/1.6 var(--font-newsreader), 'Newsreader', Georgia, serif; color: var(--hm-sheet-ink); }
.hm-mark { align-self: start; padding: clamp(20px, 2.4vw, 28px); border-radius: 20px; background: var(--hm-glass); color: var(--pub-body);
  box-shadow: inset 0 0 0 1px var(--pub-edge), inset 1px 1px 0 var(--pub-spec), var(--pub-drop); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hm-score-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: end; padding-bottom: 16px; border-bottom: 1px solid var(--pub-edge); }
.hm-score { display: flex; align-items: flex-end; gap: 12px; margin: 0; }
.hm-score b { font: 760 64px/.9 var(--pub-font); letter-spacing: -.04em; color: var(--pub-ink); font-variant-numeric: tabular-nums; }
.hm-score span { display: grid; font: 650 16px/1.2 var(--pub-font); color: var(--hm-good); }
.hm-score small { font: 650 12px/1.2 var(--pub-font); letter-spacing: .1em; text-transform: uppercase; color: var(--pub-muted); }
.hm-drafts .hm-mini-h { display: flex; justify-content: flex-start; gap: 8px; align-items: center; }
.hm-gain { padding: 2px 8px; border-radius: 999px; font: 650 12px/1.3 var(--pub-font); color: var(--hm-good); background: color-mix(in oklch, var(--hm-good) 14%, transparent); }
.hm-drafts-svg { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.hm-dr-base { stroke: var(--pub-edge); stroke-width: 1; }
.hm-dr-line { fill: none; stroke: var(--pub-lamp); stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
html:not(.dark) .hm-dr-line { stroke: var(--sp-primary); }
.hm-dr-dot { fill: var(--pub-ground); stroke: var(--pub-lamp); stroke-width: 2; } html:not(.dark) .hm-dr-dot { stroke: var(--sp-primary); fill: oklch(1 0 0); }
.hm-dr-dot--last { fill: var(--pub-lamp); } html:not(.dark) .hm-dr-dot--last { fill: var(--sp-primary); }
.hm-dr-num { font: 650 13px/1 var(--pub-font); fill: var(--pub-body); }
.hm-rubric { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.hm-rubric li { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 2.2em; gap: 12px; align-items: center; font: 500 14px/1.3 var(--pub-font); color: var(--pub-body); }
.hm-rubric i { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--pub-lamp) 0 var(--v), var(--pub-field) var(--v)); box-shadow: inset 0 0 0 1px var(--pub-edge); }
html:not(.dark) .hm-rubric i { background: linear-gradient(90deg, var(--sp-primary) 0 var(--v), var(--pub-ground-2) var(--v)); }
.hm-rubric b { font: 650 14px/1 var(--pub-font); color: var(--pub-ink); text-align: right; font-variant-numeric: tabular-nums; }
.hm-good, .hm-fix, .hm-cross { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font: 500 14px/1.5 var(--pub-font); color: var(--pub-body); }
.hm-good b, .hm-fix b { color: var(--pub-ink); font-weight: 650; }
.hm-good .hm-i { color: var(--hm-good); } .hm-fix .hm-i { color: var(--hm-warn); }
.hm-cross { padding-top: 14px; border-top: 1px solid var(--pub-edge); font-size: 13px; color: var(--pub-muted); } .hm-cross .hm-i { color: var(--hm-good); width: 18px; height: 18px; }
html.pub-js .hm-studio:not([data-pub-shown]) .hm-dr-line { stroke-dashoffset: 1; }
html.pub-js .hm-studio[data-pub-shown] .hm-dr-line { transition: stroke-dashoffset .9s .35s var(--pub-ease); }
html.pub-js .hm-studio:not([data-pub-shown]) .hm-rubric i { opacity: 0; translate: -10px 0; }
html.pub-js .hm-studio[data-pub-shown] .hm-rubric i { transition: opacity .5s var(--pub-ease), translate .5s var(--pub-ease); transition-delay: .5s; }

/* ---------------------------------------------------------------- 6 · how marking works: the flow, two lamps */
.hm-flow { position: relative; display: grid; grid-template-columns: 1fr 2fr 1fr 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.hm-st { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 24px 16px 22px; text-align: center; border-radius: 22px;
  background: var(--pub-card); box-shadow: inset 0 0 0 1px var(--pub-edge), inset 1px 1px 0 var(--pub-spec), var(--pub-drop); }
.hm-st + .hm-st::before { content: ""; position: absolute; left: -16px; top: 50%; width: 16px; height: 2px; background: linear-gradient(90deg, var(--pub-edge-strong), var(--pub-lamp)); }
.hm-st--pair { grid-template-columns: 1fr; }
.hm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.hm-pair > div { display: grid; justify-items: center; gap: 2px; }
.hm-pair-svg { display: block; width: 100%; max-width: 340px; height: auto; margin: 2px auto 6px; overflow: visible; }
.hm-pr-cone { fill: color-mix(in oklch, var(--pub-lamp) 22%, transparent); } html:not(.dark) .hm-pr-cone { fill: color-mix(in srgb, var(--sp-ink) 5%, transparent); }
.hm-pr-page { fill: var(--hm-paper); } html:not(.dark) .hm-pr-page { stroke: var(--pub-ink); stroke-width: 1.6; }
.hm-pr-ln { stroke: var(--hm-pline); stroke-width: 2; stroke-linecap: round; }
.hm-pr-desk { stroke: var(--pub-edge-strong); stroke-width: 2; stroke-linecap: round; }
.hm-pr-arm { fill: none; stroke: var(--pub-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hm-pr-shade { fill: var(--pub-brass); }
.hm-st-k { margin: 0 0 6px; font: 650 12px/1.2 var(--pub-font); letter-spacing: .12em; text-transform: uppercase; color: var(--pub-lamp); }
html:not(.dark) .hm-st-k { color: var(--pub-muted); }
.hm-st-t { margin: 4px 0 0; font: 650 16px/1.3 var(--pub-font); color: var(--pub-ink); }
.hm-st-s { margin: 0; font: 500 13px/1.3 var(--pub-font); color: var(--pub-muted); }
.hm-flow-i { width: 64px; height: 64px; margin-top: 18px; overflow: visible; }
.hm-st { align-content: center; }
.hm-flip { scale: -1 1; }
.hm-fl-cone { fill: color-mix(in oklch, var(--pub-lamp) 26%, transparent); } html:not(.dark) .hm-fl-cone { fill: color-mix(in srgb, var(--sp-ink) 6%, transparent); }
.hm-fl-arm, .hm-fl-ln { fill: none; stroke: var(--pub-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hm-fl-shade { fill: var(--pub-brass); }
.hm-fl-page { fill: var(--pub-field); stroke: var(--pub-ink); stroke-width: 2; stroke-linejoin: round; }
.hm-fl-dot { fill: var(--pub-lamp); }
.hm-fl-ring { fill: color-mix(in oklch, var(--hm-good) 16%, transparent); stroke: var(--hm-good); stroke-width: 2.2; }
.hm-fl-tick { fill: none; stroke: var(--hm-good); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hm-st--done { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--hm-good) 45%, transparent), inset 1px 1px 0 var(--pub-spec), var(--pub-drop); }
.hm-foot-note { margin: 20px 0 0; text-align: center; font: 500 13px/1.45 var(--pub-font); color: var(--pub-muted); }
html.pub-js .hm-flow:not([data-pub-shown]) .hm-st { opacity: 0; translate: 0 12px; }
html.pub-js .hm-flow[data-pub-shown] .hm-st { transition: opacity .45s var(--pub-ease), translate .45s var(--pub-ease); }
html.pub-js .hm-flow[data-pub-shown] .hm-st:nth-child(2) { transition-delay: .12s; }
html.pub-js .hm-flow[data-pub-shown] .hm-st:nth-child(3) { transition-delay: .24s; }
html.pub-js .hm-flow[data-pub-shown] .hm-st:nth-child(4) { transition-delay: .36s; }
@media (max-width: 899px) {
  .hm-flow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hm-st + .hm-st::before { left: 50%; top: -14px; width: 2px; height: 14px; background: linear-gradient(180deg, var(--pub-edge-strong), var(--pub-lamp)); }
}

/* ---------------------------------------------------------------- 7 · a raw chatbot */
.hm-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 767px) { .hm-vs { grid-template-columns: minmax(0, 1fr); } }
.hm-vs-col { padding: clamp(20px, 2.6vw, 30px); border-radius: 22px; background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge); }
.hm-vs-col--us { background: var(--pub-card); box-shadow: inset 0 0 0 1px var(--pub-edge-strong), inset 0 3px 0 var(--sp-primary), inset 1px 1px 0 var(--pub-spec), var(--pub-drop); }
.hm-vs-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 16px; font: 650 16px/1.2 var(--pub-font); color: var(--pub-ink); }
.hm-vs-h > span:last-child:not(:first-child) { font: 650 12px/1.2 var(--pub-font); letter-spacing: .1em; text-transform: uppercase; color: var(--pub-muted); }
.hm-vs ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hm-vs li { display: flex; gap: 10px; align-items: flex-start; font: 500 15px/1.5 var(--pub-font); color: var(--pub-body); }
.hm-vs-col--us li { color: var(--pub-ink); } .hm-vs-col--us .hm-i { color: var(--hm-good); } .hm-vs-col:not(.hm-vs-col--us) .hm-i { color: var(--pub-muted); }

/* ---------------------------------------------------------------- 8 · #practice: the sample question (radios + :has, so JS off works) */
.hm-hint { margin: 0; font: 500 15px/1.5 var(--pub-font); color: var(--pub-muted); max-width: 42ch; }
.hm-q { margin: 0; padding: clamp(20px, 2.6vw, 30px); border-radius: 24px; background: var(--pub-card); box-shadow: inset 0 0 0 1px var(--pub-edge), inset 1px 1px 0 var(--pub-spec), var(--pub-drop); }
.hm-q-tag { margin: 0 0 12px; font: 650 12px/1.2 var(--pub-font); letter-spacing: .12em; text-transform: uppercase; color: var(--pub-lamp); }
html:not(.dark) .hm-q-tag { color: var(--pub-muted); }
.hm-q-pass { margin: 0; padding: 0 0 0 16px; border-left: 3px solid color-mix(in oklch, var(--pub-lamp) 55%, transparent); font: 400 17px/1.65 var(--font-newsreader), 'Newsreader', Georgia, serif; color: var(--pub-ink); }
.hm-q-opts { margin: 18px 0 0; padding: 0; border: 0; display: grid; gap: 10px; }
.hm-q-stem { padding: 0; margin-bottom: 12px; font: 600 17px/1.45 var(--font-newsreader), 'Newsreader', Georgia, serif; color: var(--pub-ink); }
.hm-opt { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; border-radius: 14px; cursor: pointer;
  background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge); transition: box-shadow .15s var(--pub-ease), opacity .2s var(--pub-ease), background-color .15s; }
.hm-opt:hover { box-shadow: inset 0 0 0 1px var(--pub-lamp); }
.hm-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hm-opt:has(input:focus-visible) { outline: 3px solid var(--sp-focus); outline-offset: 2px; }
.hm-opt-l { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font: 650 14px/1 var(--pub-font); color: var(--pub-body); background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge-strong); }
.hm-opt-t { font: 400 16px/1.4 var(--font-newsreader), 'Newsreader', Georgia, serif; color: var(--pub-ink); }
.hm-yours { display: none; margin-left: auto; padding: 3px 8px; border-radius: 999px; font: 650 12px/1.2 var(--pub-font); color: var(--pub-ink); background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge-strong); white-space: nowrap; }
.hm-q:has(input:checked) .hm-opt { opacity: .5; }
.hm-q:has(input:checked) .hm-opt[data-keyed] { opacity: 1; background: color-mix(in oklch, var(--hm-good) 13%, transparent); box-shadow: inset 0 0 0 1.5px var(--hm-good); }
.hm-q:has(input:checked) .hm-opt[data-keyed] .hm-opt-l { color: var(--pub-on-action); background: var(--hm-good); box-shadow: none; }
.hm-q .hm-opt:has(input:checked) { opacity: 1; }
.hm-q .hm-opt:not([data-keyed]):has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--pub-edge-strong); }
.hm-q .hm-opt:has(input:checked) .hm-yours { display: inline-block; }
.hm-q-exp { display: none; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--pub-edge); }
.hm-q:has(input:checked) .hm-q-exp { display: block; animation: hm-rise .45s var(--pub-ease) both; }
.hm-q-verdict { margin: 0; font: 650 16px/1.3 var(--pub-font); color: var(--pub-ink); }
.hm-v-right, .hm-v-wrong { display: none; }
.hm-q:has(input[value="B"]:checked) .hm-v-right { display: inline; color: var(--hm-good); }
.hm-q:has(input:checked):not(:has(input[value="B"]:checked)) .hm-v-wrong { display: inline; }
.hm-q-h { margin: 12px 0 6px; font: 650 13px/1.3 var(--pub-font); color: var(--pub-muted); }
.hm-q-why { margin: 0 0 6px; font: 400 16px/1.65 var(--font-newsreader), 'Newsreader', Georgia, serif; color: var(--pub-body); }
@keyframes hm-rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* ---------------------------------------------------------------- 9 · the adaptive engine: the radar */
.hm-radar-card { padding: clamp(20px, 2.6vw, 30px); border-radius: 24px; background: var(--pub-card); box-shadow: inset 0 0 0 1px var(--pub-edge), inset 1px 1px 0 var(--pub-spec), var(--pub-drop); }
.hm-radar { display: block; width: 100%; max-width: 460px; height: auto; margin: 6px auto 0; overflow: visible; }
.hm-rd-ring { fill: none; stroke: var(--pub-edge); stroke-width: 1; } .hm-rd-axis { stroke: var(--pub-edge); stroke-width: 1; }
.hm-rd-shape { fill: color-mix(in oklch, var(--sp-primary) 22%, transparent); stroke: var(--sp-primary); stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hm-rd-dot { fill: var(--sp-primary); } .hm-rd-dot.hm-rd-weak { fill: var(--pub-lamp); stroke: var(--pub-ground); stroke-width: 2; }
html:not(.dark) .hm-rd-dot.hm-rd-weak { fill: var(--hm-warn); stroke: oklch(1 0 0); }
.hm-rd-dot.hm-rd-untested { fill: var(--pub-ground); stroke: var(--pub-muted); stroke-width: 1.6; stroke-dasharray: 2 2; }
.hm-rd-k { font: 650 13px/1 var(--pub-font); letter-spacing: .08em; fill: var(--pub-body); }
.hm-rd-v { font: 650 13px/1 var(--pub-font); fill: var(--pub-muted); font-variant-numeric: tabular-nums; }
text.hm-rd-weak { fill: var(--pub-lamp); } html:not(.dark) text.hm-rd-weak { fill: var(--hm-warn); }
.hm-rd-untested.hm-rd-k { fill: var(--pub-muted); }
html.pub-js .hm-radar-card:not([data-pub-shown]) .hm-rd-shape { stroke-dashoffset: 1; fill-opacity: 0; }
html.pub-js .hm-radar-card[data-pub-shown] .hm-rd-shape { transition: stroke-dashoffset 1s .2s var(--pub-ease), fill-opacity .5s 1s var(--pub-ease); }
.hm-lever { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--pub-edge); }
.hm-lever-v { margin: 2px 0 0; font: 650 17px/1.3 var(--pub-font); color: var(--pub-ink); } .hm-lever-v b { color: var(--pub-lamp); font-weight: 650; }
html:not(.dark) .hm-lever-v b { color: var(--hm-warn); }
.hm-lever-s { margin: 0; font: 500 13px/1.3 var(--pub-font); color: var(--pub-muted); }
.hm-lever-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font: 650 12px/1 var(--pub-font); letter-spacing: .06em; text-transform: uppercase; color: var(--pub-lamp);
  background: color-mix(in oklch, var(--pub-lamp) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--pub-lamp) 32%, transparent); white-space: nowrap; }
html:not(.dark) .hm-lever-pill { color: var(--hm-warn); }
.hm-lever-pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- 10 · the readiness check */
.hm-quiz-card { margin: 0; padding: clamp(20px, 2.6vw, 30px); border-radius: 24px; background: var(--pub-card); box-shadow: inset 0 0 0 1px var(--pub-edge), inset 1px 1px 0 var(--pub-spec), var(--pub-drop); }
.hm-quiz-count { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; font: 650 13px/1.2 var(--pub-font); color: var(--pub-muted); }
.hm-dots { display: inline-flex; gap: 6px; } .hm-dots i { width: 22px; height: 4px; border-radius: 4px; background: var(--pub-edge-strong); }
.hm-dots i.on { background: var(--pub-lamp); } html:not(.dark) .hm-dots i.on { background: var(--pub-ink); }
.hm-quiz-q { margin: 0 0 18px; padding: 0; border: 0; }
.hm-quiz-q legend { padding: 0; margin-bottom: 12px; font: 650 20px/1.3 var(--pub-font); color: var(--pub-ink); }
.hm-quiz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.hm-quiz-o { position: relative; display: grid; gap: 2px; min-height: 52px; align-content: center; padding: 12px 16px; border-radius: 14px; cursor: pointer;
  background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge); transition: box-shadow .15s var(--pub-ease); }
.hm-quiz-o:hover, .hm-quiz-o:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--pub-lamp); }
html:not(.dark) .hm-quiz-o:hover, html:not(.dark) .hm-quiz-o:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--pub-ink); }
.hm-quiz-o:has(input:focus-visible) { outline: 3px solid var(--sp-focus); outline-offset: 2px; }
.hm-quiz-o input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hm-quiz-l { font: 650 15px/1.3 var(--pub-font); color: var(--pub-ink); } .hm-quiz-s { font: 500 13px/1.3 var(--pub-font); color: var(--pub-muted); }
.hm-quiz-nav { display: none; }
html.pub-js .hm-quiz-card .hm-quiz-q { display: none; }
html.pub-js .hm-quiz-card .hm-quiz-q.on { display: block; animation: hm-slide .4s var(--pub-ease) both; }
html.pub-js .hm-quiz-card .hm-quiz-nav { display: block; }
html.pub-js .hm-quiz-card[data-step="0"] .hm-quiz-nav, html.pub-js .hm-quiz-card[data-done] .hm-quiz-nav, .hm-quiz-card[data-done] .hm-quiz-count { display: none; }
@keyframes hm-slide { from { opacity: 0; translate: 14px 0; } to { opacity: 1; translate: 0 0; } }
.hm-quiz-res { animation: hm-rise .5s var(--pub-ease) both; }
.hm-quiz-res[hidden] { display: none; }
.hm-res-h { margin: 8px 0 6px; font: 760 24px/1.2 var(--pub-font); color: var(--pub-ink); }
.hm-quiz-res > p { margin: 8px 0 0; font: 500 15px/1.55 var(--pub-font); color: var(--pub-body); }
.hm-res-acts { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: a; display: grid; gap: 10px; }
.hm-res-acts li { counter-increment: a; display: flex; gap: 12px; align-items: flex-start; font: 500 15px/1.45 var(--pub-font); color: var(--pub-ink); }
.hm-res-acts li::before { content: counter(a); display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font: 650 13px/1 var(--pub-font); color: var(--pub-lamp);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--pub-lamp) 50%, transparent); }
html:not(.dark) .hm-res-acts li::before { color: var(--pub-ink); box-shadow: inset 0 0 0 1px var(--pub-edge-strong); }
.hm-res-note { display: flex; gap: 8px; align-items: center; font-size: 13px !important; color: var(--pub-muted) !important; } .hm-res-note .hm-i { width: 16px; height: 16px; }
.hm-spark { color: var(--pub-lamp); } html:not(.dark) .hm-spark { color: var(--pub-muted); }
.hm-quiz-res .pub-btn svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- 11 · built around you */
.hm-profile { display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr); gap: 20px; align-items: center; padding: clamp(20px, 3vw, 36px); border-radius: 24px;
  background: var(--pub-card); box-shadow: inset 0 0 0 1px var(--pub-edge), inset 1px 1px 0 var(--pub-spec), var(--pub-drop); }
.hm-prof-arrow { width: 80px; height: 40px; fill: none; stroke: var(--pub-lamp); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html:not(.dark) .hm-prof-arrow { stroke: var(--pub-ink); }
@media (max-width: 899px) { .hm-profile { grid-template-columns: minmax(0, 1fr); } .hm-prof-arrow { rotate: 90deg; justify-self: center; } }
.hm-prof-l .hm-mini-h { margin-top: 6px; }
.hm-dl { display: grid; gap: 10px; margin: 14px 0 0; }
.hm-dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge); }
.hm-dl-accent { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--pub-lamp) 45%, transparent) !important; }
.hm-dl dt { font: 650 13px/1.2 var(--pub-font); color: var(--pub-muted); }
.hm-dl dd { margin: 0; display: grid; justify-items: end; gap: 2px; font: 650 16px/1.2 var(--pub-font); color: var(--pub-ink); }
.hm-dl small { font: 500 12.5px/1.2 var(--pub-font); color: var(--pub-muted); }
.hm-num { font-variant-numeric: tabular-nums; }
.hm-changes { display: grid; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.hm-changes li { display: flex; gap: 10px; align-items: flex-start; font: 500 16px/1.45 var(--pub-font); color: var(--pub-ink); } .hm-changes .hm-i { color: var(--hm-good); }

/* ---------------------------------------------------------------- 12 · #mocks: one place for the whole climb */
.hm-show { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
@media (max-width: 899px) { .hm-show { grid-template-columns: minmax(0, 1fr); } }
.hm-show-tabs { display: grid; gap: 8px; }
.hm-show-tab { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; cursor: pointer; background: transparent;
  box-shadow: inset 0 0 0 1px transparent; transition: background-color .15s, box-shadow .15s; }
.hm-show-tab input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hm-show-tab:has(input:focus-visible) { outline: 3px solid var(--sp-focus); outline-offset: 2px; }
.hm-show-tab:hover { background: var(--pub-field); }
.hm-show-tab:has(input:checked) { background: var(--pub-card); box-shadow: inset 0 0 0 1px var(--pub-edge-strong), inset 3px 0 0 var(--pub-lamp), var(--pub-drop); }
html:not(.dark) .hm-show-tab:has(input:checked) { box-shadow: inset 0 0 0 1px var(--pub-edge-strong), inset 3px 0 0 var(--pub-ink), var(--pub-drop); }
.hm-show-tab .hm-i { margin-top: 2px; color: var(--pub-muted); } .hm-show-tab:has(input:checked) .hm-i { color: var(--pub-lamp); }
html:not(.dark) .hm-show-tab:has(input:checked) .hm-i { color: var(--pub-ink); }
.hm-show-tab span { display: grid; gap: 3px; } .hm-show-tab b { font: 650 16px/1.3 var(--pub-font); color: var(--pub-ink); } .hm-show-tab small { font: 500 14px/1.45 var(--pub-font); color: var(--pub-muted); }
.hm-show-panes { position: sticky; top: 88px; min-height: 360px; padding: clamp(20px, 2.6vw, 30px); border-radius: 24px; background: var(--pub-card);
  box-shadow: inset 0 0 0 1px var(--pub-edge), inset 1px 1px 0 var(--pub-spec), var(--pub-drop); }
.hm-show-pane { display: none; }
.hm-show:has(input[value="practice"]:checked) [data-part="practice"], .hm-show:has(input[value="mocks"]:checked) [data-part="mocks"],
.hm-show:has(input[value="lessons"]:checked) [data-part="lessons"], .hm-show:has(input[value="flashcards"]:checked) [data-part="flashcards"],
.hm-show:has(input[value="plan"]:checked) [data-part="plan"], .hm-show:has(input[value="analytics"]:checked) [data-part="analytics"] { display: block; animation: hm-rise .4s var(--pub-ease) both; }
.hm-pv { display: grid; gap: 14px; }
.hm-pv > .hm-chip { justify-self: start; }
.hm-pv-stem { margin: 0; font: 650 18px/1.4 var(--pub-font); color: var(--pub-ink); }
.hm-pv-opt { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 14px; font: 500 15px/1.4 var(--pub-font); color: var(--pub-ink); background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge); }
.hm-pv-opt > span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font: 650 13px/1 var(--pub-font); box-shadow: inset 0 0 0 1px var(--pub-edge-strong); }
.hm-pv-opt--key { box-shadow: inset 0 0 0 1.5px var(--hm-good); background: color-mix(in oklch, var(--hm-good) 12%, transparent); } .hm-pv-opt--key .hm-i { margin-left: auto; color: var(--hm-good); }
.hm-pv-opt--miss { opacity: .7; }
.hm-pv-why { padding: 12px 14px; border-radius: 14px; background: color-mix(in oklch, var(--hm-warn) 10%, transparent); box-shadow: inset 3px 0 0 var(--hm-warn); }
.hm-pv-why p:last-child { margin: 4px 0 0; font: 500 15px/1.5 var(--pub-font); color: var(--pub-body); }
.hm-pv-score { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .hm-pv-score b { font: 760 56px/1 var(--pub-font); color: var(--pub-ink); letter-spacing: -.03em; }
.hm-pv-score > span:not(.hm-chip) { font: 500 15px/1.3 var(--pub-font); color: var(--pub-muted); } .hm-pv-score .hm-chip { margin-left: auto; }
.hm-pv-arc { width: 100%; height: auto; overflow: visible; }
.hm-arc-target { stroke: var(--sp-primary); stroke-width: 1.6; stroke-dasharray: 5 6; } .hm-arc-tl { font: 650 12px/1 var(--pub-font); letter-spacing: .1em; fill: var(--sp-primary); }
.hm-arc-line { fill: none; stroke: var(--pub-lamp); stroke-width: 3; stroke-linecap: round; } html:not(.dark) .hm-arc-line { stroke: var(--pub-ink); }
.hm-arc-dot { fill: var(--pub-ground); stroke: var(--pub-lamp); stroke-width: 2.4; } .hm-arc-dot--now { fill: var(--pub-lamp); }
html:not(.dark) .hm-arc-dot { stroke: var(--pub-ink); fill: oklch(1 0 0); } html:not(.dark) .hm-arc-dot--now { fill: var(--pub-ink); }
.hm-arc-x { font: 650 13px/1 var(--pub-font); fill: var(--pub-muted); }
.hm-pv-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; } .hm-pv-chips span { padding: 6px 12px; border-radius: 999px; font: 650 13px/1.2 var(--pub-font); color: var(--pub-ink); background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge); }
.hm-pv-ph { width: 100%; height: auto; } .hm-ph-0 { stop-color: oklch(0.66 0.17 28); } .hm-ph-1 { stop-color: oklch(0.82 0.15 120); } .hm-ph-2 { stop-color: oklch(0.55 0.15 285); }
.hm-ph-tick { stroke: var(--pub-muted); stroke-width: 1.5; } .hm-ph-t { font: 650 13px/1 var(--pub-font); fill: var(--pub-body); } .hm-ph-step { stroke: var(--pub-lamp); stroke-width: 2; } .hm-ph-x { fill: var(--pub-lamp); }
html:not(.dark) .hm-ph-step { stroke: var(--pub-ink); } html:not(.dark) .hm-ph-x { fill: var(--pub-ink); }
.hm-pv-note { margin: 0; font: 500 14px/1.45 var(--pub-font); color: var(--pub-muted); }
.hm-pv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 599px) { .hm-pv-cards { grid-template-columns: minmax(0, 1fr); } }
.hm-pv-card { padding: 16px; border-radius: 16px; background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge); } .hm-pv-card p:last-child { margin: 6px 0 0; font: 500 15px/1.5 var(--pub-font); color: var(--pub-ink); }
.hm-pv-card--back { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--pub-lamp) 45%, transparent); }
.hm-pv-plan { position: relative; display: grid; gap: 10px; margin: 0; padding: 0 0 0 22px; list-style: none; }
.hm-pv-plan::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--pub-edge-strong); }
.hm-pv-plan li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge); }
.hm-pv-plan li::before { content: ""; position: absolute; left: -21px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--pub-ground); box-shadow: inset 0 0 0 2px var(--pub-edge-strong); }
.hm-pv-plan b { font: 650 13px/1 var(--pub-font); letter-spacing: .06em; color: var(--pub-muted); } .hm-pv-plan span { font: 500 15px/1.4 var(--pub-font); color: var(--pub-ink); }
.hm-pv-plan .hm-now { box-shadow: inset 0 0 0 1.5px var(--pub-lamp); } .hm-pv-plan .hm-now::before { background: var(--pub-lamp); box-shadow: 0 0 10px var(--pub-lamp); }
html:not(.dark) .hm-pv-plan .hm-now { box-shadow: inset 0 0 0 1.5px var(--pub-ink); } html:not(.dark) .hm-pv-plan .hm-now::before { background: var(--pub-ink); box-shadow: none; }
.hm-pv-plan i { position: absolute; right: 12px; top: -9px; padding: 2px 8px; border-radius: 999px; font: 650 12px/1.3 var(--pub-font); font-style: normal; color: var(--pub-ground); background: var(--pub-lamp); }
html:not(.dark) .hm-pv-plan i { color: oklch(1 0 0); background: var(--pub-ink); }
.hm-pv-bars { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.hm-pv-bars p { display: flex; justify-content: space-between; margin: 0 0 8px; font: 650 15px/1.2 var(--pub-font); color: var(--pub-ink); } .hm-pv-bars p span:last-child { font-weight: 500; color: var(--pub-muted); }
.hm-pv-bars i { display: block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--pub-lamp) 0 var(--v), var(--pub-field) var(--v)); box-shadow: inset 0 0 0 1px var(--pub-edge); }
html:not(.dark) .hm-pv-bars i { background: linear-gradient(90deg, var(--sp-primary) 0 var(--v), var(--pub-ground-2) var(--v)); }
.hm-pv-bars .hm-warn i { background: linear-gradient(90deg, var(--hm-warn) 0 var(--v), var(--pub-field) var(--v)); } .hm-pv-bars .hm-warn p span:last-child { color: var(--hm-warn); }

/* ---------------------------------------------------------------- 13 · the coaching team */
.hm-coach { display: flex; flex-direction: column; }
.hm-coach-l { display: flex; align-items: center; gap: 8px; margin: 0 0 14px !important; font: 650 12px/1.2 var(--pub-font) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--pub-lamp) !important; }
html:not(.dark) .hm-coach-l { color: var(--pub-muted) !important; }
.hm-coach-l .hm-i { width: 26px; height: 26px; padding: 4px; border-radius: 8px; background: color-mix(in oklch, var(--pub-lamp) 14%, transparent); }
.hm-explore { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; font: 650 15px/1 var(--pub-font); color: var(--pub-ink); text-decoration: none; }
.hm-explore svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate .15s var(--pub-ease); }
.hm-explore:hover svg { translate: 3px 0; }

/* ---------------------------------------------------------------- 14 · meet your coach */
.hm-sound { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; font: 650 13px/1.2 var(--pub-font); color: var(--pub-lamp);
  background: color-mix(in oklch, var(--pub-lamp) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--pub-lamp) 30%, transparent); }
html:not(.dark) .hm-sound { color: var(--pub-ink); background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge-strong); }
.hm-sound .hm-i { width: 16px; height: 16px; }
.hm-radio { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 1000px; margin: 0 auto; }
@media (max-width: 899px) { .hm-radio { grid-template-columns: minmax(0, 1fr); } }
.hm-face { display: grid; justify-items: center; gap: 12px; }
.hm-face-btn { appearance: none; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; width: min(260px, 70vw); }
.hm-face-btn:focus-visible { outline: 3px solid var(--sp-focus); outline-offset: 4px; }
.hm-face-svg { display: block; width: 100%; height: auto; }
.hm-face-glow { fill: color-mix(in oklch, var(--pub-lamp) 10%, transparent); transition: opacity .3s; }
.hm-face-disc { fill: var(--pub-card-solid); stroke: color-mix(in oklch, var(--pub-lamp) 55%, transparent); stroke-width: 2; }
html:not(.dark) .hm-face-disc { stroke: var(--pub-edge-strong); } html:not(.dark) .hm-face-glow { fill: var(--pub-ground-2); }
.hm-face-eye { fill: none; stroke: var(--pub-ink); stroke-width: 4; stroke-linecap: round; }
.hm-face-cheek { fill: color-mix(in oklch, var(--pub-lamp) 22%, transparent); } html:not(.dark) .hm-face-cheek { fill: oklch(0.85 0.06 30 / .5); }
.hm-face-mouth { fill: oklch(0.30 0.06 30); stroke: var(--pub-lamp); stroke-width: 3; stroke-linejoin: round; } html:not(.dark) .hm-face-mouth { stroke: var(--pub-ink); fill: oklch(0.55 0.12 25); }
.hm-face-status { margin: 0; font: 650 14px/1.3 var(--pub-font); color: var(--pub-muted); text-align: center; }
.hm-asks { display: grid; gap: 10px; }
.hm-ask { border-radius: 16px; background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge); }
.hm-ask[open] { background: var(--pub-card); box-shadow: inset 0 0 0 1.5px var(--pub-lamp), var(--pub-drop); }
html:not(.dark) .hm-ask[open] { box-shadow: inset 0 0 0 1.5px var(--pub-ink), var(--pub-drop); }
.hm-ask > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; cursor: pointer; font: 650 16px/1.35 var(--pub-font); color: var(--pub-ink); }
.hm-ask > summary::-webkit-details-marker { display: none; }
.hm-ask > summary::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--pub-edge-strong); }
.hm-ask[open] > summary::before { background: var(--pub-lamp); box-shadow: none; } html:not(.dark) .hm-ask[open] > summary::before { background: var(--pub-ink); }
.hm-ask-a { padding: 0 16px 16px 38px; }
.hm-ask-a audio { width: 100%; height: 36px; margin-bottom: 8px; }
html.pub-js .hm-ask-a audio { display: none; }
.hm-ask-a p { margin: 0; font: 400 16px/1.6 var(--font-newsreader), 'Newsreader', Georgia, serif; color: var(--pub-body); }
.hm-asks-note { margin: 4px 0 0; font: 500 14px/1.45 var(--pub-font); color: var(--pub-muted); }
.hm-asks-after { display: none; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.hm-asks-after p { flex: 1 1 260px; margin: 0; font: 500 14px/1.45 var(--pub-font); color: var(--pub-body); }
.hm-radio[data-heard] .hm-asks-after { display: flex; animation: hm-rise .4s var(--pub-ease) both; } .hm-radio[data-heard] [data-hm-pre] { display: none; }
html:not(.pub-js) .hm-asks-after { display: flex; }

/* ---------------------------------------------------------------- 15 · the stat band: three brass numerals */
.hm-stats { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.hm-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 auto; padding: 0; list-style: none; }
.hm-stat-row li { display: grid; justify-items: center; gap: 6px; padding: 22px 12px; text-align: center; }
.hm-stat-row li + li { box-shadow: -1px 0 0 var(--pub-edge); }
.hm-stat-row b { font: 760 clamp(40px, 5vw, 64px)/1 var(--pub-font); letter-spacing: -.03em; color: var(--pub-lamp); }
html:not(.dark) .hm-stat-row b { color: var(--pub-ink); }
.hm-stat-row span { font: 500 15px/1.3 var(--pub-font); color: var(--pub-body); }
@media (max-width: 599px) { .hm-stat-row { grid-template-columns: minmax(0, 1fr); } .hm-stat-row li + li { box-shadow: 0 -1px 0 var(--pub-edge); } }

/* ---------------------------------------------------------------- 16 · the honest look */
.hm-compare .pub-mark[data-mark="cross"] { color: var(--pub-muted); --pub-mark-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20a10 10 0 0 0 0-20Zm3.5 5.1l1.4 1.4L11.4 10l3.5 3.5-1.4 1.4L10 11.4l-3.5 3.5-1.4-1.4L8.6 10 5.1 6.5l1.4-1.4L10 8.6Z'/%3E%3C/svg%3E"); }
.hm-compare tbody th { width: 18%; }
.hm-compare .pub-mark[data-mark="yes"] { color: var(--hm-good); }
.hm-compare thead th[data-us] { white-space: nowrap; }

/* ---------------------------------------------------------------- 17 · early days, honestly */
.hm-early-in { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; max-width: 980px; }
@media (max-width: 767px) { .hm-early-in { grid-template-columns: minmax(0, 1fr); } .hm-quote { width: 72px !important; } }
.hm-quote { width: 120px; height: auto; fill: color-mix(in oklch, var(--pub-lamp) 42%, transparent); }
html:not(.dark) .hm-quote { fill: color-mix(in srgb, var(--sp-ink) 18%, transparent); }
.hm-consent { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.3 var(--pub-font); color: var(--pub-muted); }
.hm-consent i { width: 8px; height: 8px; border-radius: 50%; background: var(--hm-good); }

/* ---------------------------------------------------------------- 18 · honest pricing */
.hm-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 899px) { .hm-plans { grid-template-columns: minmax(0, 1fr); } .hm-plan--hi { order: -1; } }
.hm-plan { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 24px; background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge); }
.hm-plan--hi { background: var(--pub-card); box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--sp-primary) 60%, transparent), inset 1px 1px 0 var(--pub-spec), var(--pub-drop); translate: 0 -8px; }
@media (max-width: 899px) { .hm-plan--hi { translate: none; } }
.hm-popular { position: absolute; top: -12px; left: 28px; margin: 0; padding: 4px 12px; border-radius: 999px; font: 650 12px/1.3 var(--pub-font); color: var(--pub-ground); background: var(--pub-lamp); }
html:not(.dark) .hm-popular { color: oklch(1 0 0); background: var(--pub-ink); }
.hm-plan-n { margin: 0; font: 650 16px/1.2 var(--pub-font); color: var(--pub-ink); }
.hm-plan-p { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 0; } .hm-plan-p b { font: 760 44px/1 var(--pub-font); letter-spacing: -.03em; color: var(--pub-ink); } .hm-plan-p span { font: 500 15px/1 var(--pub-font); color: var(--pub-muted); }
.hm-plan-wk { margin: 8px 0 0; font: 650 13px/1.3 var(--pub-font); color: var(--hm-good); }
.hm-plan-d { margin: 10px 0 0; font: 500 15px/1.5 var(--pub-font); color: var(--pub-body); }
.hm-plan ul { display: grid; gap: 10px; margin: 18px 0 22px; padding: 0; list-style: none; }
.hm-plan li { display: flex; gap: 10px; align-items: flex-start; font: 500 15px/1.45 var(--pub-font); color: var(--pub-ink); } .hm-plan li .hm-i { color: var(--hm-good); width: 18px; height: 18px; margin-top: 2px; }
.hm-plan .pub-btn { margin-top: auto; width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
.hm-plan-nc { margin: 10px 0 0; text-align: center; font: 500 13px/1.3 var(--pub-font); color: var(--pub-muted); }
.hm-plans-foot { margin: 26px 0 0; text-align: center; font: 500 15px/1.5 var(--pub-font); color: var(--pub-body); } .hm-plans-foot b { color: var(--pub-ink); font-weight: 650; }

/* ---------------------------------------------------------------- review bar */
.hm-tb { display: inline-flex; align-items: center; gap: 8px; font: 650 12px/1 var(--pub-font); }
.hm-tb select { font: 500 13px/1.2 var(--pub-font); padding: 6px 8px; border-radius: 8px; max-width: 280px; }
.hm-tb-data { font: 500 12px/1.4 var(--pub-font); opacity: .8; max-width: 520px; }

/* ---------------------------------------------------------------- the room she tapped, seen closer (the hero's own window, cropped) */
.hm-head-art { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hm-head-art > .hm-roomart { order: 2; }
.hm-roomart { margin: 0; width: clamp(220px, 24vw, 320px); }
.hm-roomart .hm-room { display: block; overflow: hidden; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 60px -34px oklch(0.02 0.01 280 / .95); }
html:not(.dark) .hm-roomart .hm-room { box-shadow: inset 0 0 0 1px var(--pub-edge), var(--pub-drop); }
.hm-roomart--col { width: min(100%, 360px); margin-top: 28px; }
@media (max-width: 767px) { .hm-head-art { grid-template-columns: minmax(0, 1fr); } .hm-head-art > .hm-roomart { order: 0; width: min(100%, 300px); } .hm-roomart--col { display: none; } }

/* the coaches' objects, in lamp light */
.hm-coach-art { display: block; width: 100%; height: auto; margin: -6px 0 14px; }
.hm-ca-glow { fill: color-mix(in oklch, var(--pub-lamp) 9%, transparent); } html:not(.dark) .hm-ca-glow { fill: var(--pub-ground-2); }
.hm-ca-shelf { stroke: var(--hm-walnut); stroke-width: 5; stroke-linecap: round; }
.hm-ca-wood { fill: var(--hm-walnut); } .hm-ca-grille { fill: oklch(0.22 0.03 50); } html:not(.dark) .hm-ca-grille { fill: oklch(0.42 0.04 55); }
.hm-ca-slot { stroke: color-mix(in oklch, var(--pub-lamp) 55%, transparent); stroke-width: 2.4; stroke-linecap: round; } html:not(.dark) .hm-ca-slot { stroke: oklch(0.85 0.03 80); }
.hm-ca-knob { fill: var(--pub-brass); }
.hm-ca-wave, .hm-ca-route { fill: none; stroke: var(--pub-lamp); stroke-width: 3; stroke-linecap: round; } html:not(.dark) :is(.hm-ca-wave, .hm-ca-route) { stroke: var(--pub-ink); }
.hm-ca-route { stroke-dasharray: 2 7; }
.hm-ca-paper { fill: var(--hm-paper); } html:not(.dark) .hm-ca-paper { stroke: var(--pub-ink); stroke-width: 1.5; }
.hm-ca-ln { stroke: var(--hm-pline); stroke-width: 2.4; stroke-linecap: round; }
.hm-ca-face { fill: var(--hm-paper); } .hm-ca-rim { fill: none; stroke: var(--pub-brass); stroke-width: 4; }
.hm-ca-hand { fill: none; stroke: oklch(0.25 0.02 60); stroke-width: 3; stroke-linecap: round; }
.hm-ca-map { fill: color-mix(in oklch, var(--hm-paper) 85%, transparent); stroke: var(--pub-brass); stroke-width: 1.5; stroke-linejoin: round; } html:not(.dark) .hm-ca-map { fill: oklch(0.98 0.01 85); stroke: var(--pub-ink); }
.hm-ca-pin { fill: var(--pub-lamp); } html:not(.dark) .hm-ca-pin { fill: var(--sp-primary); }
.hm-ca-needle { fill: oklch(0.58 0.18 28); }
/* the readiness signpost: the arm to focus on lights when she finishes */
.hm-post { display: block; width: min(100%, 320px); height: auto; margin-top: 18px; }
.hm-sp-shadow { fill: var(--hm-shadow); } .hm-sp-pole, .hm-sp-cap { fill: var(--hm-walnut); }
.hm-sp-arm path { fill: var(--pub-card-solid); stroke: var(--pub-edge-strong); stroke-width: 1.5; transition: fill .4s var(--pub-ease), stroke .4s var(--pub-ease); }
.hm-sp-arm text { font: 650 15px/1 var(--pub-font); fill: var(--pub-body); transition: fill .4s var(--pub-ease); }
.hm-post[data-focus="s1"] [data-arm="s1"] path, .hm-post[data-focus="s2"] [data-arm="s2"] path, .hm-post[data-focus="s3"] [data-arm="s3"] path { fill: var(--pub-lamp); stroke: var(--pub-lamp); }
.hm-post[data-focus="s1"] [data-arm="s1"] text, .hm-post[data-focus="s2"] [data-arm="s2"] text, .hm-post[data-focus="s3"] [data-arm="s3"] text { fill: var(--pub-ground); }
html:not(.dark) .hm-post[data-focus] [data-arm] path { stroke: var(--pub-edge-strong); }
html:not(.dark) .hm-post[data-focus="s1"] [data-arm="s1"] path, html:not(.dark) .hm-post[data-focus="s2"] [data-arm="s2"] path, html:not(.dark) .hm-post[data-focus="s3"] [data-arm="s3"] path { fill: var(--pub-ink); stroke: var(--pub-ink); }
html:not(.dark) .hm-post[data-focus="s1"] [data-arm="s1"] text, html:not(.dark) .hm-post[data-focus="s2"] [data-arm="s2"] text, html:not(.dark) .hm-post[data-focus="s3"] [data-arm="s3"] text { fill: oklch(1 0 0); }
@media (max-width: 899px) { .hm-post { display: none; } }

/* ---------------------------------------------------------------- phone: drawn labels stay 12 px or larger once the drawings shrink */
@media (max-width: 599px) {
  .hm-score-row { grid-template-columns: minmax(0, 1fr); }
  .hm-studio { padding: 8px; border-radius: 16px; } .hm-studio-in { padding: 12px; gap: 14px; } .hm-essay { padding: 18px; rotate: 0deg; }
  .hm-rd-k, .hm-rd-v { font-size: 17px; }
  .hm-arc-x, .hm-arc-tl { font-size: 20px; }
  .hm-ph-t { font-size: 20px; }
  .hm-rubric li { grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 2em; gap: 8px; font-size: 13px; }
}

/* ---------------------------------------------------------------- round 11 · below the fold, the walk goes on: the sky deepens one
   step per section (dusk → night; static backgrounds, not scroll-linked), the stars come out, and every section's card is the
   same glass. --k1/--k2 (each section's place in the walk) are written by the build. */
.hm { --hm-dusk: var(--pub-ground); --hm-night: oklch(0.128 0.034 268); --hm-star: oklch(0.95 0.03 90 / .7); }
html:not(.dark) .hm { --hm-night: oklch(0.952 0.016 76); }
main.hm > section.hm-sky { isolation: isolate;
  background: linear-gradient(180deg, color-mix(in oklch, var(--hm-night) calc(var(--k1) * 100%), var(--hm-dusk)), color-mix(in oklch, var(--hm-night) calc(var(--k2) * 100%), var(--hm-dusk))); }
main.hm > section.hm-sky::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(.15 + var(--k1) * .85);
  /* round 11 fix: one continuous sky, not a tile. 71 static stars on three fields whose periods (1613×1171, 997×1259, 2111×1523) share no factor, so
     the pattern does not repeat within any screen; each section starts at its own offset (--k1), so the seams between sections do not line up either */
  background-image: radial-gradient(circle at 8px 41px, var(--hm-star) 0 1.1px, transparent 2.0px),
    radial-gradient(circle at 183px 457px, var(--hm-star) 0 1.0px, transparent 1.9px),
    radial-gradient(circle at 79px 889px, var(--hm-star) 0 1.1px, transparent 2.0px),
    radial-gradient(circle at 267px 1018px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 421px 111px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 495px 270px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 411px 507px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 339px 806px, var(--hm-star) 0 1.0px, transparent 1.9px),
    radial-gradient(circle at 527px 967px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 577px 46px, var(--hm-star) 0 1.0px, transparent 1.9px),
    radial-gradient(circle at 767px 578px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 571px 1022px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 876px 278px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 824px 749px, var(--hm-star) 0 1.0px, transparent 1.9px),
    radial-gradient(circle at 1276px 339px, var(--hm-star) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 1195px 647px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 1100px 871px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 1148px 1107px, var(--hm-star) 0 1.3px, transparent 2.2px),
    radial-gradient(circle at 1497px 96px, var(--hm-star) 0 1.3px, transparent 2.2px),
    radial-gradient(circle at 1402px 273px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 1463px 501px, var(--hm-star) 0 1.1px, transparent 2.0px),
    radial-gradient(circle at 1391px 809px, var(--hm-star) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 173px 53px, var(--hm-star) 0 1.1px, transparent 2.0px),
    radial-gradient(circle at 189px 718px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 312px 162px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 225px 1092px, var(--hm-star) 0 1.1px, transparent 2.0px),
    radial-gradient(circle at 501px 130px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 540px 372px, var(--hm-star) 0 1.0px, transparent 1.9px),
    radial-gradient(circle at 499px 675px, var(--hm-star) 0 1.3px, transparent 2.2px),
    radial-gradient(circle at 560px 1022px, var(--hm-star) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 678px 1px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 773px 872px, var(--hm-star) 0 1.1px, transparent 2.0px),
    radial-gradient(circle at 659px 1196px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 871px 16px, var(--hm-star) 0 1.0px, transparent 1.9px),
    radial-gradient(circle at 883px 461px, var(--hm-star) 0 1.0px, transparent 1.9px),
    radial-gradient(circle at 832px 911px, var(--hm-star) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 944px 1217px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 203px 507px, var(--hm-star) 0 1.0px, transparent 1.9px),
    radial-gradient(circle at 129px 747px, var(--hm-star) 0 1.0px, transparent 1.9px),
    radial-gradient(circle at 1px 763px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 214px 1127px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 486px 137px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 458px 364px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 301px 695px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 469px 955px, var(--hm-star) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 341px 1130px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 324px 1413px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 585px 1px, var(--hm-star) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 586px 437px, var(--hm-star) 0 1.1px, transparent 2.0px),
    radial-gradient(circle at 715px 561px, var(--hm-star) 0 1.0px, transparent 1.9px),
    radial-gradient(circle at 682px 1489px, var(--hm-star) 0 1.1px, transparent 2.0px),
    radial-gradient(circle at 977px 164px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 868px 468px, var(--hm-star) 0 1.1px, transparent 2.0px),
    radial-gradient(circle at 1029px 687px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 981px 886px, var(--hm-star) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 905px 1160px, var(--hm-star) 0 1.1px, transparent 2.0px),
    radial-gradient(circle at 1102px 244px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 1073px 883px, var(--hm-star) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 1190px 1395px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 1469px 83px, var(--hm-star) 0 1.0px, transparent 1.9px),
    radial-gradient(circle at 1521px 418px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 1338px 925px, var(--hm-star) 0 1.0px, transparent 1.9px),
    radial-gradient(circle at 1365px 1184px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 1345px 1441px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 1643px 191px, var(--hm-star) 0 1.1px, transparent 2.0px),
    radial-gradient(circle at 1844px 456px, var(--hm-star) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 1747px 699px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 1767px 1021px, var(--hm-star) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 1951px 277px, var(--hm-star) 0 1.1px, transparent 2.0px),
    radial-gradient(circle at 2083px 630px, var(--hm-star) 0 0.8px, transparent 1.7px),
    radial-gradient(circle at 2093px 883px, var(--hm-star) 0 1.1px, transparent 2.0px);
  background-size: 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 1613px 1171px, 997px 1259px, 997px 1259px, 997px 1259px, 997px 1259px, 997px 1259px, 997px 1259px, 997px 1259px, 997px 1259px, 997px 1259px, 997px 1259px, 997px 1259px, 997px 1259px, 997px 1259px, 997px 1259px, 997px 1259px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px, 2111px 1523px;
  background-position: calc(var(--k1) * -731px) calc(var(--k1) * -419px); }
html:not(.dark) main.hm > section.hm-sky::before { display: none; }

/* one glass card, everywhere: the same radius, fill, edge, specular line and drop (accents stay as inner rules) */
.hm :is(.hm-mark, .hm-st, .hm-vs-col, .hm-q, .hm-radar-card, .hm-quiz-card, .hm-profile, .hm-show-panes, .hm-plan, .pub-compare, .pub-card, .hm-roomart .hm-room) {
  border-radius: 24px; background: var(--pub-card); box-shadow: inset 0 0 0 1px var(--pub-edge), inset 1px 1px 0 var(--pub-spec), var(--pub-drop); }
.hm .hm-roomart .hm-room { background: none; }
.hm .hm-vs-col--us { box-shadow: inset 0 0 0 1px var(--pub-edge-strong), inset 0 3px 0 var(--sp-primary), inset 1px 1px 0 var(--pub-spec), var(--pub-drop); }
.hm .hm-plan--hi { box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--sp-primary) 60%, transparent), inset 1px 1px 0 var(--pub-spec), var(--pub-drop); }
.hm .hm-mark { -webkit-backdrop-filter: none; backdrop-filter: none; }
.hm .hm-studio { border-radius: 24px; }
/* pricing opens at her front door (the hero's porch, closer) */
.hm .hm-roomart--door { width: 168px; margin: 0 auto 22px; }
@media (max-width: 767px) { .hm .hm-roomart--door { width: 140px; } }

/* ---------------------------------------------------------------- Round 24 · testimonials when approved ones exist (the honest empty state shows otherwise) */
.hm-testi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.hm-testi-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.hm-testi-who { display: flex; align-items: center; gap: 12px; }
.hm-testi-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; font: 700 15px/1 var(--pub-font); color: var(--pub-ink); background: var(--pub-field); box-shadow: inset 0 0 0 1px var(--pub-edge-strong); }
.hm-testi-who b { display: block; font: 650 15px/1.3 var(--pub-font); color: var(--pub-ink); } .hm-testi-who small { display: block; font: 500 13px/1.3 var(--pub-font); color: var(--pub-muted); }
.hm-testi-card blockquote { margin: 0; font: 400 16px/1.6 var(--pub-font); color: var(--pub-body); }
.hm-testi-tag { margin-top: auto; align-self: flex-start; padding: 2px 8px; border-radius: 999px; font: 650 12px/1.3 var(--pub-font); letter-spacing: .06em; text-transform: uppercase; color: var(--pub-muted); box-shadow: inset 0 0 0 1px var(--pub-edge-strong); }
.hm-testi-note { max-width: 62ch; margin: 18px 0 0; font: 500 14px/1.55 var(--pub-font); color: var(--pub-muted); }
@media (max-width: 899px) { .hm-testi-grid { grid-template-columns: minmax(0, 1fr); } }

/* reading face: walk/shared/spine.css 905 (--r7-serif, --r7-w-read resolved) */
:where([data-reading]:not([data-reading="sans"])) { font-family: var(--font-newsreader), 'Newsreader', Georgia, serif; font-weight: 400; }

/* launch QA: no answer cue in the sample illustration */
#hm .hm-practice .hm-roomart circle.hm-key { fill: none; stroke: var(--hm-opt); stroke-width: 1.6; }

/* round 43 fix 4: the sample card's criteria carry their bars, not three more numbers */
.hm-rubric-h { margin-top: 16px; }
.hm-rubric-h + .hm-rubric { margin-top: 10px; }
.hm-rubric li { grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); }
@media (max-width: 599px) { .hm-rubric li { grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); } }
.hm-plans-in { justify-content: center; margin-top: 8px; }