/* APTAVIA 2.0 · the Front door · door. GENERATED by scripts/dev/w11/build-door.mjs from the mock-up build's own CSS order; never hand-edit. */
/* ==== components/liquid/canonical.generated.css (the host page's liquid tokens) ==== */
.fd { color: var(--ink); --ink: var(--sp-ink); --body: var(--sp-body); --muted: var(--sp-muted); --primary: var(--sp-primary); --ease: cubic-bezier(.22,1,.36,1); --type-body: 16px; }
[data-liquid] h1, [data-liquid] h2, [data-liquid] h3, [data-liquid] p{margin:0}
[data-liquid] p{font-size:var(--type-body);line-height:1.6;color:var(--body)}

/* ==== shared/road-window.css ==== */
/* =============================================================================
   APTAVIA 2.0 · walk · THE WINDOW (round 5 kit, 5 Oct 2026) — the Road's room and its one window (tokens only, no hex)
   One file for both Road pages (Today, the Study Plan); built by shared/road-window.mjs, run by shared/road-window.js.
   Read shared/WINDOW.md first.
   GEOMETRY CONTRACT (unchanged from the grid-floor Road, so the door STEP IN and the Today ↔ Plan ALONG still hold):
     .rw is the inline-size container. In .rw-in:
       --hz    the horizon (day axis): 186 px + 0.158345 · min(W, 1280) on desktop (377.9 centre / 377.3 top at 1440×900),
               192 px + 0.158345 · W at 621–767 px viewports, 192 px + W / 3 in a ≤ 620 px container (317 at 375×812)
       --x0    today's x: max(170 px, 22 cqw) desktop · 52 px phone      --x169: W − 300 px desktop · W − 128 px phone
       --pd    px per day = (x169 − x0) / 169; an event at day d stands at x0 + d · pd
       the door: 28 × 63.82 desktop (18 × 41.02 phone), its foot on the horizon at day 8 (Sat 10 Oct)
   THE WINDOW: outer top = max(hz − 214, threshold + 108) (164 at 1440); outer bottom = hz + 50 (428 at 1440) = the sill's
   top; frame 12 px; sill 10 px top face + 18 px front face (446 → 456 at 1440); phone: hz − 142 → hz + 38, frame 8,
   window 351 × 180 at 375. Her light (and the 1/12 ring) rests on the sill's top face at x0, clear of the door's foot.
   Dark first. Light mode = ink and shadow: a paper-white wall, an ink-edged window, crisp cast shadows, no glow
   (blurred light layers carry data-spine-smoke, which the kit removes by day). Evening and night by day: the pane is a
   dark island with a crisp ink edge (design.md §9 Q2).
   ============================================================================= */

/* ---------------------------------------------------------------- the sky's colours glide 400 ms when her clock moves */
@property --rw-land-far { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --rw-land-mid { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --rw-land-near { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --rw-glow-c { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --rw-pool-c { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --rw-hz-c { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --rw-sill-lit { syntax: '<color>'; inherits: true; initial-value: transparent; }

/* ---------------------------------------------------------------- the room's own palette (dark first) */
.rw{position:relative;display:block;container:rw/inline-size;isolation:isolate;color:var(--ink);background:var(--rw-wall-lo);
  transition:--rw-land-far .4s linear,--rw-land-mid .4s linear,--rw-land-near .4s linear,--rw-glow-c .4s linear,--rw-pool-c .4s linear,--rw-hz-c .4s linear,--rw-sill-lit .4s linear}
.rw,.rw-pane{
  /* the wall: warm plaster, chroma ≤ 0.012 (warm material, not a new colour) */
  --rw-wall-hi:oklch(0.222 0.011 62);
  --rw-wall:oklch(0.196 0.010 56);
  --rw-wall-lo:oklch(0.172 0.009 52);
  /* the frame: painted timber, a little lighter than the wall; specular top-left, shade bottom-right */
  --rw-frame-face:oklch(0.345 0.012 66);
  --rw-frame-spec:oklch(0.62 0.012 70 / .75);
  --rw-frame-shade:oklch(0.10 0.008 50 / .9);
  --rw-cast:0 18px 34px -14px oklch(0.06 0.01 40 / .85), 0 2px 0 oklch(0.06 0.01 40 / .5);
  /* the sill: its top face catches the window's light */
  --rw-sill-face:oklch(0.330 0.011 66);
  --rw-sill-back:oklch(0.300 0.011 64);
  --rw-sill-nose:oklch(0.250 0.010 58);
  --rw-sill-foot:oklch(0.212 0.010 54);
  --rw-sill-edge:oklch(0.60 0.012 72 / .55);
  --rw-sill-shadow:oklch(0.06 0.01 40 / .55);
  --rw-engrave:oklch(0.72 0.012 72);
  --rw-engrave-lo:oklch(0.08 0.01 40 / .7);
  /* glass */
  --rw-refl:oklch(1 0 0 / .04);
  --rw-refl-thin:oklch(1 0 0 / .05);
  --rw-spec-c:oklch(1 0 0 / .38);
  /* her light's thread (Today) */
  --rw-thread-c:color-mix(in srgb,var(--sp-primary) 62%,var(--sp-ink));
  /* the lanterns: plain lamps (light, never a section fill) */
  --rw-lamp-core:oklch(0.97 0.02 85);
  --rw-lamp-rim:oklch(0.80 0.03 80 / .7);
  --rw-lamp-glow:0 0 7px 1px oklch(0.92 0.06 80 / .45);
  --rw-post:oklch(0.80 0.02 80 / .45);
}
/* the four skies' room colours (dark) — the land, the light over the next event, the pool, the horizon, the sill's lit edge */
:is(.rw,.rw-pane)[data-sky="morning"]{--rw-land-far:oklch(0.355 0.028 285);--rw-land-mid:oklch(0.300 0.024 270);--rw-land-near:oklch(0.250 0.020 150);
  --rw-glow-c:oklch(0.86 0.085 68 / .45);--rw-pool-c:oklch(0.90 0.075 72);--rw-hz-c:oklch(0.90 0.05 70 / .62);--rw-sill-lit:oklch(0.86 0.07 70 / .16)}
:is(.rw,.rw-pane)[data-sky="day"]{--rw-land-far:oklch(0.395 0.032 232);--rw-land-mid:oklch(0.330 0.026 200);--rw-land-near:oklch(0.272 0.024 145);
  --rw-glow-c:oklch(0.95 0.035 95 / .32);--rw-pool-c:oklch(0.97 0.018 95);--rw-hz-c:oklch(0.95 0.02 95 / .55);--rw-sill-lit:oklch(0.96 0.02 95 / .14)}
:is(.rw,.rw-pane)[data-sky="evening"]{--rw-land-far:oklch(0.290 0.040 330);--rw-land-mid:oklch(0.232 0.032 312);--rw-land-near:oklch(0.182 0.024 300);
  --rw-glow-c:oklch(0.85 0.105 62 / .48);--rw-pool-c:oklch(0.86 0.105 62);--rw-hz-c:oklch(0.88 0.08 62 / .62);--rw-sill-lit:oklch(0.84 0.10 60 / .18)}
:is(.rw,.rw-pane)[data-sky="night"]{--rw-land-far:oklch(0.185 0.030 268);--rw-land-mid:oklch(0.150 0.025 268);--rw-land-near:oklch(0.122 0.020 270);
  --rw-glow-c:oklch(0.93 0.05 85 / .45);--rw-pool-c:oklch(0.82 0.035 255);--rw-hz-c:oklch(0.92 0.04 85 / .45);--rw-sill-lit:oklch(0.80 0.03 255 / .10)}

/* ---------------------------------------------------------------- geometry (dead-JS safe) */
.rw-in{position:relative;min-height:calc(var(--rw-content-top) + 160px);
  --gut:48px;
  --hz:calc(186px + .158345 * min(100cqw, 1280px));
  --x0:max(170px, 22cqw);
  --x169:calc(100cqw - 300px);
  --pd:calc((var(--x169) - var(--x0)) / 169);
  --vpx:calc(var(--x0) + var(--d-door, 8) * var(--pd));
  --door-w:28px;
  --orb:18px;
  --ring:56px;
  --rw-top:max(calc(var(--hz) - 214px), var(--rw-top-min, calc(var(--spn-th-h, 56px) + 108px)));
  --rw-bottom:calc(var(--hz) + 50px);
  --rw-frame:12px;
  --rw-radius:22px;
  --rw-sill-t:10px;
  --rw-sill-f:18px;
  --rw-sill-out:16px;
  --rw-sill-end:calc(var(--rw-bottom) + var(--rw-sill-t) + var(--rw-sill-f));
  --rw-gap:24px;
  --rw-content-top:calc(var(--rw-sill-end) + var(--rw-gap));
  /* the glass, in .rw-in px */
  --rw-gx:calc(var(--gut) + var(--rw-frame));
  --rw-gy:calc(var(--rw-top) + var(--rw-frame));
  --rw-gh:calc(var(--rw-bottom) - var(--rw-frame) - var(--rw-gy));
  --rw-hz-in:calc(var(--hz) - var(--rw-gy));
  /* her light on the sill: the ring stands on the top face, near its front edge */
  --rw-her-y:calc(var(--rw-bottom) + var(--rw-sill-t) * .85 - var(--ring) / 2);
  --rw-light-y:calc(var(--rw-bottom) + var(--rw-sill-t) * .6 - 5px);
}
@media (min-width:1500px){ .rw-in{--hz:calc(186px + .158345 * min(100cqw, 1308px))} }
/* the Plan's sill line hangs a bracket and its label under the sill: the work starts below it */
.rw[data-rw-sill-line] .rw-in{--rw-gap:48px}
@media (max-width:767px){ .rw-in{--hz:calc(192px + .158345 * 100cqw);--gut:16px} }
@container rw (max-width: 620px){
  .rw-in{
    --hz:calc(192px + 33.3333cqw);
    --x0:52px;
    --x169:calc(100cqw - 128px);
    --door-w:18px;
    --orb:14px;
    --ring:44px;
    --gut:12px;
    --rw-top:max(calc(var(--hz) - 142px), var(--rw-top-min, calc(var(--spn-th-h, 92px) + 80px)));
    --rw-bottom:calc(var(--hz) + 38px);
    --rw-frame:8px;
    --rw-radius:16px;
    --rw-sill-t:8px;
    --rw-sill-f:14px;
    --rw-sill-out:6px;
    --rw-gap:18px;
    --rw-light-y:calc(var(--rw-bottom) + var(--rw-sill-t) * .6 - 4px);
  }
  .rw[data-rw-ring-label] .rw-in{--rw-gap:40px}
  .rw[data-rw-sill-line] .rw-in{--rw-gap:56px}
}

/* ---------------------------------------------------------------- layers */
.rw-bg{position:absolute;left:0;right:0;top:0;height:calc(var(--rw-sill-end) + 64px);z-index:0;pointer-events:none}
.rw-hz{position:absolute;left:0;right:0;top:var(--hz);z-index:3;display:block;height:1.2px;margin-top:-.6px;pointer-events:none;background:var(--rw-hz-c);
  /* full width (the move's held line), shown only through the glass */
  -webkit-mask:linear-gradient(90deg,transparent 0,transparent calc(var(--rw-gx) + 2px),black calc(var(--rw-gx) + 24px),black calc(100% - var(--rw-gx) - 24px),transparent calc(100% - var(--rw-gx) - 2px));
          mask:linear-gradient(90deg,transparent 0,transparent calc(var(--rw-gx) + 2px),black calc(var(--rw-gx) + 24px),black calc(100% - var(--rw-gx) - 24px),transparent calc(100% - var(--rw-gx) - 2px))}
.rw-fall{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:clip}
.rw-content{position:relative;z-index:5;pointer-events:none}
.rw-content > *{pointer-events:auto}
.rw-marks{position:absolute;inset:0;z-index:6;pointer-events:none}
.rw-marks > *{pointer-events:auto}
.rw-head{position:absolute;left:var(--gut);right:var(--gut);top:calc(var(--spn-th-h, 56px) + 26px);z-index:6}
.rw-body{position:relative;padding:var(--rw-content-top) var(--gut) 48px}
@container rw (max-width: 620px){ .rw-head{top:calc(var(--spn-th-h, 92px) + 14px);left:16px;right:16px} .rw-body{padding-left:16px;padding-right:16px;padding-bottom:32px} }
/* a page's part that lives outside .rw can stand on the same wall */
.rw-wall-bg{background:var(--rw-wall-lo)}

/* ---------------------------------------------------------------- the wall */
.rw-wall{position:absolute;inset:0;display:block;
  background:
    radial-gradient(120% 70% at 50% 34%,transparent 52%,oklch(0.06 0.01 40 / .22) 100%),
    linear-gradient(180deg,var(--rw-wall-hi) 0%,var(--rw-wall) 46%,var(--rw-wall-lo) 100%)}
/* plaster: a faint, still grain (dark only; by day the wall is paper) */
.rw-wall::after{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------------------------------------------------------------- the window: frame, reveal, glass */
.rw-window{position:absolute;left:var(--gut);right:var(--gut);top:var(--rw-top);height:calc(var(--rw-bottom) - var(--rw-top));display:block}
.rw-cast{position:absolute;inset:0;border-radius:var(--rw-radius);box-shadow:var(--rw-cast)}
.rw-frame{position:absolute;inset:0;border-radius:var(--rw-radius);
  background:
    linear-gradient(135deg,oklch(1 0 0 / .08) 0%,transparent 38%,transparent 64%,oklch(0 0 0 / .20) 100%),
    linear-gradient(180deg,oklch(1 0 0 / .04),transparent 30%,oklch(0 0 0 / .08)),
    var(--rw-frame-face);
  box-shadow:inset 1px 1.5px 0 var(--rw-frame-spec),inset -1px -1.5px 0 var(--rw-frame-shade)}
/* the reveal: the pane is seated in the frame — a dark rebate line and a lit lip */
.rw-reveal{position:absolute;inset:calc(var(--rw-frame) - 2px);border-radius:calc(var(--rw-radius) - var(--rw-frame) + 2px);
  background:oklch(0.12 0.01 50);box-shadow:0 1px 0 oklch(1 0 0 / .10)}
/* the transom: a fixed top light, like most home windows (desktop only: phones keep one clear pane) */
.rw-transom{position:absolute;z-index:2;left:var(--rw-frame);right:var(--rw-frame);top:calc(var(--rw-frame) + (100% - 2 * var(--rw-frame)) * .22);height:7px;display:block;
  background:linear-gradient(180deg,oklch(1 0 0 / .07),transparent 60%),var(--rw-frame-face);
  box-shadow:inset 0 1px 0 var(--rw-frame-spec),inset 0 -1px 0 var(--rw-frame-shade),0 2px 3px -1px oklch(0 0 0 / .35)}
@container rw (max-width: 980px){ .rw-transom{display:none} }
.rw-glass{position:absolute;inset:var(--rw-frame);overflow:hidden;border-radius:calc(var(--rw-radius) - var(--rw-frame));isolation:isolate;
  --rw-glow-x:calc(var(--x0) + var(--d-glow, 8) * var(--pd) - var(--rw-gx));--rw-gw-px:calc(100cqw - 2 * var(--rw-gx));
  box-shadow:inset 0 3px 6px -2px oklch(0 0 0 / .45),inset 0 0 0 1px oklch(0 0 0 / .35)}
.rw-glass > *{position:absolute;display:block}

/* the four skies (dark). One is shown; the runtime cross-fades 400 ms when her clock crosses a slot. Never a loop. */
.rw-sky{inset:0;opacity:0;transition:opacity .4s linear}
.rw[data-sky="morning"] .rw-sky[data-sky-layer="morning"],
.rw[data-sky="day"] .rw-sky[data-sky-layer="day"],
.rw[data-sky="evening"] .rw-sky[data-sky-layer="evening"],
.rw[data-sky="night"] .rw-sky[data-sky-layer="night"],
.rw-pane[data-sky="morning"] .rw-sky[data-sky-layer="morning"],
.rw-pane[data-sky="day"] .rw-sky[data-sky-layer="day"],
.rw-pane[data-sky="evening"] .rw-sky[data-sky-layer="evening"],
.rw-pane[data-sky="night"] .rw-sky[data-sky-layer="night"]{opacity:1}
.rw-sky[data-sky-layer="morning"]{background:
  radial-gradient(60% 38% at var(--rw-glow-x,22%) 100%,oklch(0.52 0.075 70 / .55),transparent 70%),
  radial-gradient(26% 6% at 64% 30%,oklch(0.46 0.035 30 / .45),transparent 72%),
  radial-gradient(18% 4% at 80% 42%,oklch(0.48 0.045 50 / .40),transparent 72%),
  linear-gradient(180deg,oklch(0.300 0.042 242) 0%,oklch(0.340 0.034 262) 42%,oklch(0.385 0.040 330) 72%,oklch(0.440 0.062 68) 100%)}
.rw-sky[data-sky-layer="day"]{background:
  radial-gradient(24% 7% at 28% 30%,oklch(0.50 0.030 240 / .55),transparent 72%),
  radial-gradient(34% 6% at 70% 20%,oklch(0.48 0.028 240 / .45),transparent 72%),
  radial-gradient(14% 4% at 84% 46%,oklch(0.50 0.025 240 / .35),transparent 72%),
  linear-gradient(180deg,oklch(0.312 0.064 252) 0%,oklch(0.362 0.056 245) 52%,oklch(0.430 0.042 236) 100%)}
.rw-sky[data-sky-layer="evening"]{background:
  radial-gradient(70% 44% at var(--rw-glow-x,22%) 100%,oklch(0.50 0.13 42 / .60),transparent 70%),
  radial-gradient(30% 5% at 60% 46%,oklch(0.38 0.09 15 / .55),transparent 72%),
  linear-gradient(180deg,oklch(0.185 0.050 285) 0%,oklch(0.245 0.068 315) 38%,oklch(0.330 0.095 350) 68%,oklch(0.415 0.120 38) 100%)}
.rw-sky[data-sky-layer="night"]{background:
  radial-gradient(40% 30% at var(--rw-glow-x,22%) 100%,oklch(0.30 0.04 80 / .35),transparent 70%),
  linear-gradient(180deg,oklch(0.125 0.030 272) 0%,oklch(0.158 0.040 268) 58%,oklch(0.205 0.046 262) 100%)}
/* night: a few still stars (no twinkle, dark only) and the moon; evening keeps one early star */
.rw-stars{left:0;top:0;width:1.6px;height:1.6px;border-radius:50%;opacity:0;transition:opacity .4s linear;background:oklch(0.95 0.01 90 / .9);
  box-shadow:
    calc(var(--rw-gw-px, 1100px) * .06) 22px 0 -.2px oklch(0.95 0.01 90 / .55),
    calc(var(--rw-gw-px, 1100px) * .13) 64px 0 0 oklch(0.95 0.01 90 / .35),
    calc(var(--rw-gw-px, 1100px) * .27) 18px 0 0 oklch(0.95 0.01 90 / .6),
    calc(var(--rw-gw-px, 1100px) * .36) 88px 0 -.3px oklch(0.95 0.01 90 / .4),
    calc(var(--rw-gw-px, 1100px) * .48) 40px 0 0 oklch(0.95 0.01 90 / .5),
    calc(var(--rw-gw-px, 1100px) * .58) 12px 0 -.2px oklch(0.95 0.01 90 / .45),
    calc(var(--rw-gw-px, 1100px) * .66) 70px 0 0 oklch(0.95 0.01 90 / .35),
    calc(var(--rw-gw-px, 1100px) * .74) 30px 0 0 oklch(0.95 0.01 90 / .55),
    calc(var(--rw-gw-px, 1100px) * .91) 58px 0 -.2px oklch(0.95 0.01 90 / .4),
    calc(var(--rw-gw-px, 1100px) * .96) 16px 0 0 oklch(0.95 0.01 90 / .5)}
.rw[data-sky="night"] .rw-stars,.rw-pane[data-sky="night"] .rw-stars{opacity:1}
.rw[data-sky="evening"] .rw-stars,.rw-pane[data-sky="evening"] .rw-stars{opacity:.45}
.rw-moon{right:9%;top:16%;width:22px;height:22px;opacity:0;transition:opacity .4s linear}
.rw-moon path{fill:oklch(0.93 0.025 90)}
.rw[data-sky="night"] .rw-moon,.rw-pane[data-sky="night"] .rw-moon{opacity:.92}

/* the light over the next dated event (the door), at every hour: a half-ellipse of light standing on the horizon */
.rw-glow{left:calc(var(--x0) + var(--d-glow, 8) * var(--pd) - var(--rw-gx));top:var(--rw-hz-in);width:min(60cqw,640px);height:min(30cqw,260px);translate:-50% -50%;
  background:radial-gradient(closest-side,var(--rw-glow-c),color-mix(in oklab,var(--rw-glow-c) 40%,transparent) 48%,transparent 100%)}
/* by day: a thin warm band low over the door (no glow) */
.rw-band{display:none !important}
/* the far land: two soft bands under the horizon */
.rw-land{left:0;top:var(--rw-hz-in);width:100%;height:calc(100% - var(--rw-hz-in) + 1px);overflow:visible}
.rw-land-far{fill:var(--rw-land-far)}
.rw-land-mid{fill:var(--rw-land-mid)}
.rw-land-near{fill:var(--rw-land-near)}
/* real glass: one reflection band, one thin echo, the crisp specular line top-left */
.rw-refl{inset:0;pointer-events:none;
  background:linear-gradient(124deg,transparent 0 3%,color-mix(in oklab,var(--rw-refl) 55%,transparent) 8%,var(--rw-refl) 13%,color-mix(in oklab,var(--rw-refl) 55%,transparent) 19%,transparent 25%,transparent 100%),
    linear-gradient(124deg,transparent 0 26.5%,var(--rw-refl-thin) 27%,transparent 27.6%,transparent 100%) top left / 100% 34% no-repeat}
.rw-spec{inset:0;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(90deg,var(--rw-spec-c),oklch(1 0 0 / .08) 38%,transparent 70%) top left / 100% 1px no-repeat,
    linear-gradient(180deg,var(--rw-spec-c),oklch(1 0 0 / .06) 50%,transparent 85%) top left / 1px 100% no-repeat}

/* ---------------------------------------------------------------- the sill (always shows) */
.rw-sill{position:absolute;left:calc(var(--gut) - var(--rw-sill-out));right:calc(var(--gut) - var(--rw-sill-out));top:var(--rw-bottom);height:calc(var(--rw-sill-t) + var(--rw-sill-f));display:block}
.rw-sill > i{position:absolute;left:0;right:0;display:block}
.rw-sill-top{top:0;height:var(--rw-sill-t);border-radius:3px 3px 0 0;
  background:
    radial-gradient(60% 260% at 50% 0%,var(--rw-sill-lit),transparent 70%),
    linear-gradient(180deg,var(--rw-sill-back),var(--rw-sill-face));
  box-shadow:inset 0 1px 0 oklch(0 0 0 / .35)}
.rw-sill-front{top:var(--rw-sill-t);height:var(--rw-sill-f);border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,var(--rw-sill-nose),var(--rw-sill-foot));
  box-shadow:inset 0 1px 0 var(--rw-sill-edge),inset 0 -1px 0 oklch(0 0 0 / .35)}
.rw-sill-shadow{top:100%;height:26px;left:6px !important;right:6px !important;
  background:linear-gradient(180deg,var(--rw-sill-shadow),transparent)}

/* the Plan's sill line: phase names engraved on the front face at their dates; one violet "this block" bracket below */
.rw-sill-line{position:absolute;left:0;right:0;top:var(--rw-sill-t);height:var(--rw-sill-f);overflow:hidden;pointer-events:none}
.rw-ph{position:absolute;top:0;height:100%;box-sizing:border-box;
  left:calc(var(--x0) + var(--a) * var(--pd) - var(--gut) + var(--rw-sill-out));width:calc((var(--b) - var(--a)) * var(--pd));
  border-left:1px solid color-mix(in srgb,var(--rw-engrave) 45%,transparent);
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font:650 12px/1 var(--font-ui);letter-spacing:.02em;color:var(--rw-engrave);text-shadow:0 -1px 0 var(--rw-engrave-lo)}
.rw-ph[data-align="start"]{justify-content:flex-start;padding-left:7px;overflow:visible}
.rw-ph-s{display:none}
.rw-block{position:absolute;top:calc(100% + 3px);height:22px;box-sizing:border-box;pointer-events:none;
  left:calc(var(--x0) + var(--a) * var(--pd) - var(--gut) + var(--rw-sill-out));width:calc((var(--b) - var(--a)) * var(--pd));
  display:flex;justify-content:flex-start;font:700 12px/1 var(--font-ui);color:var(--sp-primary);white-space:nowrap}
.rw-block > i{position:absolute;left:0;right:0;top:0;height:6px;border:1.5px solid var(--sp-primary);border-top:0;border-radius:0 0 3px 3px}
.rw-block b{position:relative;top:10px;font-weight:700}
.rw-block-s{display:none}
@container rw (max-width: 620px){
  .rw-ph{font-size:12px;letter-spacing:0}
  .rw-ph[data-phone="off"] .rw-ph-w{display:none}
  .rw-ph:has(.rw-ph-s) .rw-ph-w{display:none}
  .rw-ph-s{display:inline}
  .rw-block:has(.rw-block-s) .rw-block-w{display:none}
  .rw-block-s{display:inline}
}

/* ---------------------------------------------------------------- the window's light in the room */
/* the pool: one soft wash where the page says (data-rw-light; the runtime aims it), brightest there. Dark only. */
.rw-pool{position:absolute;display:block;
  left:var(--rw-pool-x, 50%);top:var(--rw-pool-y, calc(var(--rw-content-top) + 90px));
  width:var(--rw-pool-w, 70%);height:var(--rw-pool-h, 300px);translate:-50% -50%;
  background:radial-gradient(closest-side,color-mix(in oklab,var(--rw-pool-c) 10%,transparent),color-mix(in oklab,var(--rw-pool-c) 6%,transparent) 55%,transparent 100%);
  transition:none}
.rw.rw-aimed .rw-pool{transition:left .5s var(--spine-ease, ease),top .5s var(--spine-ease, ease),width .5s var(--spine-ease, ease),height .5s var(--spine-ease, ease)}
.rw[data-sky="night"] .rw-pool{opacity:.7}
/* her light's thread (Today): a 1.5 px lit line from her light down the left of the list */
.rw-thread{position:absolute;display:block;left:calc(var(--x0) - .75px);top:calc(var(--rw-her-y) + var(--ring) / 2 - 2px);width:1.5px;
  height:var(--rw-thread-h, 300px);border-radius:1px;
  background:linear-gradient(180deg,var(--rw-thread-c) 0,color-mix(in srgb,var(--rw-thread-c) 70%,transparent) 70%,color-mix(in srgb,var(--rw-thread-c) 10%,transparent) 100%)}
.rw:not([data-rw-thread]) .rw-thread{display:none}

/* ---------------------------------------------------------------- the plaques (30 px to the eye, 44 px to the hand) */
.rw-plaque{position:absolute;min-height:30px;height:30px;padding:0 10px;gap:6px;border-radius:9px;font-size:13px;font-weight:600}
.rw-plaque::before{content:"";position:absolute;inset:-7px -3px}
.rw-plaque .sp-arrow{width:14px;height:14px}
.rw-pl-s{display:none}
/* the lamps' numerals lead in ink (the colour budget: sections only as ≤ 24 px chips); lanternInk: true tints them */
.rw-num{font-weight:800;color:inherit}
.rw[data-rw-lantern-ink] .rw-num{color:var(--sec)}
.rw-num[data-sec="1"]{--sec:var(--sec-1)}
.rw-num[data-sec="2"]{--sec:var(--sec-2)}
.rw-num[data-sec="3"]{--sec:var(--sec-3)}
@container rw (max-width: 620px){ .rw-pl-w{display:none} .rw-pl-s{display:inline} .rw-plaque{font-size:13px;padding:0 8px;gap:4px} .rw-plaque .sp-arrow{display:none} }

/* ---------------------------------------------------------------- the door lantern (the Colonnade's own door, unchanged size) */
.rw-door{position:absolute;z-index:9;left:var(--vpx);top:var(--hz);width:0;height:0;color:inherit;text-decoration:none;cursor:pointer;outline:none}
.rw-lantern{position:absolute;left:calc(var(--door-w) / -2);bottom:0;display:block;width:var(--door-w);height:calc(var(--door-w) / .43871)}
.rw-lantern .ia-door--mini{--dw:var(--door-w) !important;width:100%;height:100%}
.rw-stem{position:absolute;left:-.5px;bottom:calc(var(--door-w) / .43871);width:1px;height:14px;display:block;background:color-mix(in srgb,var(--ia-hot) 60%,transparent)}
.rw-door-plaque{left:0;bottom:calc(var(--door-w) / .43871 + 14px);translate:-50% 0}
.rw-pl-door{display:block;width:9px;height:20px;flex:none}
.rw-pl-door svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5}
/* the light under her door: a crisp threshold line on the horizon (brightens on hover / focus) */
.rw-threshold{position:absolute;left:calc(var(--door-w) * -1.1);top:-1px;width:calc(var(--door-w) * 2.2);height:2px;border-radius:2px;background:var(--ia-light);box-shadow:0 0 6px color-mix(in srgb,var(--ia-hot) 70%,transparent)}
.rw-door:focus-visible .rw-plaque,.rw-lan:focus-visible .rw-plaque{outline:3px solid var(--sp-focus);outline-offset:3px}
@container rw (max-width: 620px){
  .rw-stem{height:26px}
  .rw-door-plaque{bottom:calc(var(--door-w) / .43871 + 26px);translate:none;left:calc(var(--rw-gx) + 6px - var(--vpx))}
}

/* ---------------------------------------------------------------- the two sittings: plain lamps on thin posts */
.rw-lan{position:absolute;z-index:8;left:calc(var(--x0) + var(--d) * var(--pd));top:var(--hz);width:0;height:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-decoration:none;outline:none}
span.rw-lan{cursor:default}
.rw-lamp{position:absolute;left:calc(var(--orb) / -2);top:calc(var(--orb) * -1.9);width:var(--orb);height:var(--orb);aspect-ratio:1;border-radius:50%;box-sizing:border-box;display:block;
  background:radial-gradient(circle at 42% 38%,var(--rw-lamp-core) 0 34%,color-mix(in oklab,var(--rw-lamp-core) 55%,transparent) 62%,transparent 100%);
  box-shadow:inset 0 0 0 1px var(--rw-lamp-rim),var(--rw-lamp-glow)}
.rw-lamp[data-status="estimate"]{background:none;border:1.5px dashed var(--rw-lamp-rim);box-shadow:none}
.rw-lan-post{position:absolute;left:-.5px;top:calc(var(--orb) * -.9);width:1px;height:calc(var(--orb) * .9);display:block;background:var(--rw-post)}
.rw-lan-plaque{top:calc(var(--orb) * -1.4 - 15px)}
.rw-lan[data-side="l"] .rw-lan-plaque{right:calc(var(--orb) / 2 + 8px)}
.rw-lan[data-side="r"] .rw-lan-plaque{left:calc(var(--orb) / 2 + 8px)}
.rw-lan:hover .rw-plaque{transform:translateY(-4px);border-color:var(--sp-primary)}
span.rw-lan:hover .rw-plaque{transform:none;border-color:color-mix(in srgb,var(--sp-primary) 46%,var(--sp-line))}
@container rw (max-width: 620px){
  /* I & III stands above the lamps, right-aligned in the glass, with a short leader down to its lamp */
  .rw-lan[data-side="r"] .rw-lan-plaque{left:auto;right:calc(var(--x0) + var(--d) * var(--pd) - 100cqw + var(--rw-gx) + 4px);top:calc(var(--orb) * -1.9 - 38px)}
  .rw-lan[data-side="r"]::after{content:"";position:absolute;left:-.5px;top:calc(var(--orb) * -1.9 - 8px);width:1px;height:8px;background:var(--rw-post)}
}

/* ---------------------------------------------------------------- her light on the sill */
.rw-her{position:absolute;left:var(--x0);top:0;width:0;height:0;z-index:7}
.rw-ring{position:absolute;left:calc(var(--ring) / -2);top:var(--rw-her-y);width:var(--ring);height:var(--ring);aspect-ratio:1;margin:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--raised) 82%,transparent) 0 58%,transparent 59%)}
.rw-ring svg{display:block;width:100%;height:100%;overflow:visible}
.rw-grooves path{fill:none;stroke:color-mix(in srgb,var(--ink) 20%,transparent);stroke-width:3;stroke-linecap:round}
.rw-lit path{fill:none;stroke:var(--primary);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .5s var(--ease, ease),opacity .2s;transition-delay:calc(var(--i,0) * 60ms)}
.rw-lit path.on{opacity:1}
.rw-ring.r1-drawn .rw-lit path.on,html[data-spn-paused="true"] .rw-lit path.on,.rw-lit path.on{stroke-dashoffset:0}
.rw-ring .rw-beacon{left:50%;top:50%}
.rw-her[data-ring-off] .rw-beacon{left:0;top:calc(var(--rw-light-y) + 5px)}
/* contact shadow on the sill's top face (a flat ellipse: never a token) */
.rw-her-shadow{position:absolute;display:block;left:calc(var(--ring) * -.5);top:calc(var(--rw-her-y) + var(--ring) - 4px);width:var(--ring);height:5px;border-radius:50%;
  background:radial-gradient(closest-side,oklch(0.05 0.01 40 / .7),transparent)}
.rw-her[data-ring-off] .rw-her-shadow{left:-9px;width:18px;height:4px;top:calc(var(--rw-light-y) + 8px)}
/* "1/12 questions today": under the sill, in the left column (desktop), beside the ring under the sill (phone) */
.rw-ring-lbl,.rw-light-lbl{position:absolute;margin:0;white-space:nowrap}
.rw-ring-lbl{right:calc(var(--ring) / 2 - 6px);top:calc(var(--rw-sill-end) + 18px);display:flex;align-items:baseline;gap:7px}
.rw-ring-lbl b{font:var(--weight-numeral,700) 24px/1 var(--font-numeral,var(--font-ui));letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.rw-ring-lbl small{font-size:15px;color:var(--muted);font-weight:600}
.rw-ring-lbl > span{font:500 14px/1.2 var(--font-ui);color:var(--body)}
/* the Plan's label by her light: under the sill, ending just left of the block's bracket (its label starts there) */
.rw-light-lbl{right:var(--rw-light-lbl-right, calc(var(--rw-block-a, 0) * -1 * var(--pd) + 14px));top:calc(var(--rw-sill-end) + 9px);font:600 13px/1.2 var(--font-ui);color:var(--body)}
@container rw (max-width: 620px){
  .rw-ring-lbl{right:auto;left:calc(16px - var(--x0));top:calc(var(--rw-sill-end) + 10px)}
  .rw-ring-lbl b{font-size:20px}
  .rw-light-lbl{right:auto;left:calc(16px - var(--x0));top:calc(var(--rw-sill-end) + 4px)}
  .rw[data-rw-sill-line] .rw-light-lbl{top:calc(var(--rw-sill-end) + 30px)}
}

/* ---------------------------------------------------------------- returned from the Colonnade: one settle beat on the light over the door */
html.spine-settling .rw-glow{animation:spine-settle .4s linear both}
/* during a move the travelling door flies above the held horizon line; an ALONG keeps the page's own order */

/* ---------------------------------------------------------------- still: reduced motion, Pause, the first paint */
.rw.rw-instant,.rw.rw-instant *{transition:none !important}
html[data-spn-paused="true"] .rw,html[data-spn-paused="true"] .rw *,
:where(.spine-page[data-paused="true"]) .rw,:where(.spine-page[data-paused="true"]) .rw *{transition-duration:0s !important}
@media (prefers-reduced-motion: reduce){ .rw,.rw *{transition-duration:0s !important} }

/* =============================================================================
   LIGHT MODE — the same room by day: ink and shadow, not haze. Paper-white wall, an ink-edged window, crisp cast
   shadows, clear glass; no glow, no pool, no stars (data-spine-smoke). Evening and night: the pane is a dark island.
   ============================================================================= */
html:not(.dark) :is(.rw,.rw-pane){
  --rw-wall-hi:oklch(0.988 0.004 85);
  --rw-wall:oklch(0.976 0.006 82);
  --rw-wall-lo:oklch(0.966 0.007 80);
  --rw-frame-face:oklch(0.996 0.002 85);
  --rw-frame-spec:oklch(1 0 0);
  --rw-frame-shade:color-mix(in srgb,var(--ink) 24%,transparent);
  --rw-cast:3px 4px 0 color-mix(in srgb,var(--ink) 9%,transparent),0 0 0 1px color-mix(in srgb,var(--ink) 52%,transparent);
  --rw-sill-face:oklch(0.996 0.002 85);
  --rw-sill-back:oklch(0.975 0.004 85);
  --rw-sill-nose:oklch(0.985 0.003 85);
  --rw-sill-foot:oklch(0.958 0.005 82);
  --rw-sill-edge:oklch(1 0 0);
  --rw-sill-shadow:color-mix(in srgb,var(--ink) 11%,transparent);
  --rw-engrave:color-mix(in srgb,var(--ink) 74%,transparent);
  --rw-engrave-lo:oklch(1 0 0);
  --rw-refl:oklch(1 0 0 / .34);
  --rw-refl-thin:oklch(1 0 0 / .5);
  --rw-spec-c:oklch(1 0 0 / .95);
  --rw-thread-c:var(--sp-primary);
  --rw-lamp-core:oklch(0.93 0.06 85);
  --rw-lamp-rim:color-mix(in srgb,var(--ink) 62%,transparent);
  --rw-lamp-glow:0 1px 1px color-mix(in srgb,var(--ink) 22%,transparent);
  --rw-post:color-mix(in srgb,var(--ink) 40%,transparent);
}
html:not(.dark) :is(.rw,.rw-pane)[data-sky="morning"]{--rw-land-far:oklch(0.880 0.020 290);--rw-land-mid:oklch(0.845 0.022 280);--rw-land-near:oklch(0.805 0.022 272);--rw-hz-c:color-mix(in srgb,var(--ink) 32%,transparent);--rw-sill-lit:transparent}
html:not(.dark) :is(.rw,.rw-pane)[data-sky="day"]{--rw-land-far:oklch(0.880 0.024 228);--rw-land-mid:oklch(0.840 0.024 195);--rw-land-near:oklch(0.800 0.024 150);--rw-hz-c:color-mix(in srgb,var(--ink) 32%,transparent);--rw-sill-lit:transparent}
html:not(.dark) :is(.rw,.rw-pane)[data-sky="evening"]{--rw-land-far:oklch(0.350 0.045 325);--rw-land-mid:oklch(0.285 0.036 308);--rw-land-near:oklch(0.230 0.028 296);--rw-hz-c:oklch(0.92 0.04 70 / .7);--rw-sill-lit:transparent}
html:not(.dark) :is(.rw,.rw-pane)[data-sky="night"]{--rw-land-far:oklch(0.240 0.034 268);--rw-land-mid:oklch(0.200 0.030 268);--rw-land-near:oklch(0.168 0.024 270);--rw-hz-c:oklch(0.92 0.03 85 / .55);--rw-sill-lit:transparent}
html:not(.dark) .rw-wall::after{display:none}
html:not(.dark) .rw-wall{background:linear-gradient(180deg,var(--rw-wall-hi) 0%,var(--rw-wall) 46%,var(--rw-wall-lo) 100%)}
html:not(.dark) .rw-frame{background:var(--rw-frame-face);box-shadow:inset 1px 1px 0 var(--rw-frame-spec),inset -1px -1px 0 var(--rw-frame-shade)}
html:not(.dark) .rw-transom{background:var(--rw-frame-face);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 55%,transparent),0 2px 0 color-mix(in srgb,var(--ink) 8%,transparent)}
html:not(.dark) .rw-reveal{background:color-mix(in srgb,var(--ink) 60%,transparent);box-shadow:none}
html:not(.dark) .rw-glass{box-shadow:inset 0 2px 0 color-mix(in srgb,var(--ink) 10%,transparent)}
html:not(.dark) .rw-sky[data-sky-layer="morning"]{background:
  radial-gradient(26% 6% at 64% 30%,oklch(1 0 0 / .7),transparent 72%),
  linear-gradient(180deg,oklch(0.915 0.030 245) 0%,oklch(0.935 0.024 290) 50%,oklch(0.945 0.040 55) 100%)}
html:not(.dark) .rw-sky[data-sky-layer="day"]{background:
  radial-gradient(24% 7% at 28% 30%,oklch(1 0 0 / .8),transparent 72%),
  radial-gradient(34% 6% at 70% 20%,oklch(1 0 0 / .7),transparent 72%),
  linear-gradient(180deg,oklch(0.860 0.058 240) 0%,oklch(0.905 0.040 237) 55%,oklch(0.960 0.016 230) 100%)}
html:not(.dark) .rw-sky[data-sky-layer="evening"]{background:
  linear-gradient(180deg,oklch(0.300 0.060 282) 0%,oklch(0.380 0.078 318) 42%,oklch(0.500 0.098 355) 72%,oklch(0.640 0.110 55) 100%)}
html:not(.dark) .rw-sky[data-sky-layer="night"]{background:
  linear-gradient(180deg,oklch(0.190 0.040 272) 0%,oklch(0.230 0.045 268) 58%,oklch(0.290 0.050 262) 100%)}
html:not(.dark) .rw-band{display:block !important;left:calc(var(--x0) + var(--d-glow, 8) * var(--pd) - var(--rw-gx));top:calc(var(--rw-hz-in) - 26px);width:min(46cqw,520px);height:26px;translate:-50% 0;
  background:linear-gradient(180deg,transparent,oklch(0.86 0.10 68 / .12));
  -webkit-mask:linear-gradient(90deg,transparent,black 30%,black 70%,transparent);mask:linear-gradient(90deg,transparent,black 30%,black 70%,transparent)}
html:not(.dark) .rw-pane .rw-band{left:calc(var(--pane-door) * 100%);width:50%}
html:not(.dark) .rw-sill-top{background:linear-gradient(180deg,var(--rw-sill-back),var(--rw-sill-face));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 40%,transparent),inset 1px 0 0 color-mix(in srgb,var(--ink) 30%,transparent),inset -1px 0 0 color-mix(in srgb,var(--ink) 30%,transparent)}
html:not(.dark) .rw-sill-front{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 22%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--ink) 55%,transparent),inset 1px 0 0 color-mix(in srgb,var(--ink) 40%,transparent),inset -1px 0 0 color-mix(in srgb,var(--ink) 40%,transparent)}
html:not(.dark) .rw-sill-shadow{height:4px;background:var(--rw-sill-shadow)}
html:not(.dark) .rw-stem{background:color-mix(in srgb,var(--ink) 34%,transparent)}
html:not(.dark) .rw-threshold{background:var(--card);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 55%,transparent)}
html:not(.dark) .rw-ring{background:radial-gradient(circle at 50% 50%,var(--card) 0 58%,transparent 59%);filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--ink) 22%,transparent))}
html:not(.dark) .rw-her-shadow{background:radial-gradient(closest-side,color-mix(in srgb,var(--ink) 26%,transparent),transparent)}
/* the dark island (evening and night by day): the far marks read as light on dark */
html:not(.dark) .rw:is([data-sky="evening"],[data-sky="night"]) .rw-glass{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 70%,transparent)}
html:not(.dark) .rw:is([data-sky="evening"],[data-sky="night"]) .rw-band{background:linear-gradient(180deg,transparent,oklch(0.86 0.10 68 / .12))}
html:not(.dark) .rw:is([data-sky="evening"],[data-sky="night"]){--rw-post:oklch(0.92 0.02 85 / .55);--rw-refl:oklch(1 0 0 / .07);--rw-refl-thin:oklch(1 0 0 / .1);--rw-spec-c:oklch(1 0 0 / .5)}
html:not(.dark) .rw:is([data-sky="evening"],[data-sky="night"]) .rw-stem{background:oklch(0.92 0.02 85 / .55)}

/* ---------------------------------------------------------------- the pane (review sheets: four skies side by side) */
.rw-pane{margin:0;display:grid;gap:8px;--rw-hz-in:62%}
.rw-pane-frame{position:relative;aspect-ratio:16 / 7;border-radius:16px;padding:9px;background:var(--rw-frame-face);box-shadow:inset 1px 1.5px 0 var(--rw-frame-spec),inset -1px -1.5px 0 var(--rw-frame-shade),var(--rw-cast)}
.rw-pane .rw-glass{inset:9px;border-radius:8px;--rw-glow-x:calc(var(--pane-door) * 100%);--rw-gw-px:300px}
.rw-pane .rw-glow{left:calc(var(--pane-door) * 100%);width:70%;height:60%}
.rw-pane-hz{left:0;right:0;top:var(--rw-hz-in);height:1px;background:var(--rw-hz-c)}
.rw-pane-door{left:calc(var(--pane-door) * 100%);top:calc(var(--rw-hz-in) - 22px);width:10px;height:22px;translate:-50% 0;border-radius:1px 1px 0 0;background:oklch(0.97 0.01 90);box-shadow:0 0 8px oklch(0.95 0.04 85 / .6)}
.rw-pane-lamp{top:calc(var(--rw-hz-in) - 12px);width:7px;height:7px;border-radius:50%;translate:-50% 0;background:var(--rw-lamp-core);box-shadow:inset 0 0 0 1px var(--rw-lamp-rim)}
.rw-pane-lamp[data-n="2"]{left:80%}
.rw-pane-lamp[data-n="13"]{left:85%}
.rw-pane figcaption{font:600 13px/1.3 var(--font-ui);color:var(--body)}
html:not(.dark) .rw-pane-door{background:var(--card,oklch(1 0 0));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 50%,transparent)}

/* ---------------------------------------------------------------- the review bar's sky control (not product UI) */
.rw-tb{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font-ui)}
.rw-tb select{font:600 12px/1 var(--font-ui);min-height:30px;border-radius:8px;padding:0 6px}

/* =============================================================================
   ROUND 5 · FIXES (the Today fixer, 6 Oct 2026: the Road critic's must-fix 2, 3 and 4). ADDITIVE: every rule below
   overrides the kit above by order or by specificity; nothing above was edited. WINDOW.md §10 lists them.
   ============================================================================= */

/* ---- 1 · the toast: the base layout's [data-liquid]{height:100%} also hit R1Kit's .r1k-toast[data-liquid], so the
   first click on Start dropped a blank 420 × 900 slab. A small pill again, on every page that loads this kit. */
.r1k-toast[data-liquid]{height:auto;top:auto;min-height:0}

/* ---- 2 · Start is the brightest thing in her room. What lies beyond the glass is seen THROUGH it at its own
   strength: the door's light and the lamps are dimmed into the sky in dark mode. The door keeps its drawing, its rect
   and its STEP IN anchor: only its own paint changes (no opacity, no filter on the anchor). */
html.dark .rw{--rw-door-veil:oklch(0.20 0.035 266);--rw-door-k:46%;
  --rw-lamp-core:oklch(0.585 0.085 76);--rw-lamp-rim:oklch(0.55 0.05 76 / .6);--rw-lamp-glow:0 0 5px 0 oklch(0.64 0.09 76 / .16)}
html.dark .rw[data-sky="evening"]{--rw-door-veil:oklch(0.22 0.055 330);--rw-door-k:44%;--rw-lamp-core:oklch(0.55 0.08 76);--rw-lamp-rim:oklch(0.52 0.05 76 / .6)}
html.dark .rw[data-sky="day"]{--rw-door-veil:oklch(0.30 0.06 248);--rw-door-k:38%;--rw-lamp-core:oklch(0.53 0.08 76);--rw-lamp-rim:oklch(0.50 0.05 76 / .6)}
html.dark .rw[data-sky="morning"]{--rw-door-veil:oklch(0.30 0.055 300);--rw-door-k:38%;--rw-lamp-core:oklch(0.53 0.08 76);--rw-lamp-rim:oklch(0.50 0.05 76 / .6)}
html.dark .rw :is(.rw-lantern,.rw-threshold,.rw-stem){
  --rw-dl:color-mix(in oklab,oklch(0.955 0.012 300) var(--rw-door-k),var(--rw-door-veil));
  --sp-door-light:var(--rw-dl);--sp-door-pale:var(--rw-dl);
  --ia-light:var(--rw-dl);--ia-hot:var(--rw-dl);--ia-beam:var(--rw-dl);
  --ia-frame-a:color-mix(in oklab,var(--rw-dl) 62%,var(--rw-door-veil));
  --ia-frame-c:color-mix(in srgb,var(--rw-dl) 46%,transparent);
  --ia-rim:color-mix(in srgb,var(--rw-dl) 74%,transparent);
  --ia-rim-in:color-mix(in srgb,var(--rw-dl) 40%,transparent);
  --ia-glow:color-mix(in srgb,var(--rw-dl) 50%,transparent);
  --ia-reed:color-mix(in srgb,var(--rw-dl) 12%,transparent);
  --ia-dash:color-mix(in srgb,var(--rw-dl) 62%,transparent)}
html.dark .rw .rw-threshold{box-shadow:0 0 4px color-mix(in srgb,var(--rw-dl) 45%,transparent)}
/* light mode, day and morning: the white door on a pale sky gets a crisp ink edge (critic's should-fix) */
html:not(.dark) .rw:is([data-sky="day"],[data-sky="morning"]) .rw-lantern{box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 50%,transparent)}

/* ---- 3 · a warm room with a real window, not a dim lounge with a screen. All still, none of it violet. */
/* a warm wood frame and sill (dark; by day the frame stays painted white with an ink edge) */
html.dark :is(.rw,.rw-pane){
  --rw-frame-face:oklch(0.365 0.050 58);
  --rw-frame-spec:oklch(0.72 0.065 72 / .55);
  --rw-frame-shade:oklch(0.13 0.025 45 / .9);
  --rw-sill-face:oklch(0.395 0.052 60);
  --rw-sill-back:oklch(0.345 0.048 58);
  --rw-sill-nose:oklch(0.305 0.044 55);
  --rw-sill-foot:oklch(0.255 0.038 52);
  --rw-sill-edge:oklch(0.72 0.065 72 / .5)}
html.dark .rw-frame{background:
    linear-gradient(135deg,oklch(1 0 0 / .07) 0%,transparent 34%,transparent 66%,oklch(0 0 0 / .22) 100%),
    linear-gradient(180deg,oklch(0.80 0.08 70 / .06),transparent 30%,oklch(0 0 0 / .10)),
    var(--rw-frame-face)}
html.dark .rw-reveal{background:oklch(0.15 0.02 48)}
/* square-cut corners (a window, not a screen) */
.rw-in{--rw-radius:7px;--rw-mull:10px}
.rw-glass{border-radius:2px}
.rw-reveal{border-radius:3px}
@container rw (max-width: 620px){ .rw-in{--rw-radius:6px;--rw-mull:6px} }
/* no full-width transom; ONE centre mullion: two casements */
.rw-transom{display:none !important}
.rw-window::after{content:"";position:absolute;z-index:3;top:calc(var(--rw-frame) - 2px);bottom:calc(var(--rw-frame) - 2px);left:calc(50% - var(--rw-mull) / 2);width:var(--rw-mull);
  background:linear-gradient(90deg,var(--rw-frame-spec) 0 1px,oklch(1 0 0 / .05) 1px 40%,oklch(0 0 0 / .14) 75%,var(--rw-frame-shade) calc(100% - 1px)),var(--rw-frame-face);
  box-shadow:3px 0 5px -2px oklch(0 0 0 / .4)}
html:not(.dark) .rw-window::after{background:var(--rw-frame-face);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 55%,transparent),2px 0 0 color-mix(in srgb,var(--ink) 8%,transparent)}
/* the horizon is seen through the glass: the mullion hides it */
.rw-hz{
  -webkit-mask:linear-gradient(90deg,transparent 0,transparent calc(var(--rw-gx) + 2px),black calc(var(--rw-gx) + 24px),black calc(100% - var(--rw-gx) - 24px),transparent calc(100% - var(--rw-gx) - 2px)),
    linear-gradient(90deg,black 0 calc(50% - var(--rw-mull) / 2),transparent calc(50% - var(--rw-mull) / 2) calc(50% + var(--rw-mull) / 2),black calc(50% + var(--rw-mull) / 2));
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent 0,transparent calc(var(--rw-gx) + 2px),black calc(var(--rw-gx) + 24px),black calc(100% - var(--rw-gx) - 24px),transparent calc(100% - var(--rw-gx) - 2px)),
    linear-gradient(90deg,black 0 calc(50% - var(--rw-mull) / 2),transparent calc(50% - var(--rw-mull) / 2) calc(50% + var(--rw-mull) / 2),black calc(50% + var(--rw-mull) / 2));
  mask-composite:intersect}
/* the skies keep their lightness (Start still wins) and gain colour: a clear blue day, a peach morning, a deep night */
html.dark .rw-sky[data-sky-layer="day"]{background:
  radial-gradient(24% 7% at 28% 30%,oklch(0.60 0.035 240 / .48),transparent 72%),
  radial-gradient(34% 6% at 70% 20%,oklch(0.58 0.035 240 / .40),transparent 72%),
  radial-gradient(14% 4% at 84% 46%,oklch(0.60 0.030 240 / .30),transparent 72%),
  linear-gradient(180deg,oklch(0.315 0.115 258) 0%,oklch(0.370 0.105 250) 52%,oklch(0.455 0.080 236) 100%)}
html.dark .rw-sky[data-sky-layer="morning"]{background:
  radial-gradient(60% 40% at var(--rw-glow-x,22%) 100%,oklch(0.62 0.115 60 / .62),transparent 70%),
  radial-gradient(26% 6% at 64% 30%,oklch(0.55 0.080 28 / .50),transparent 72%),
  radial-gradient(18% 4% at 80% 42%,oklch(0.58 0.090 48 / .45),transparent 72%),
  linear-gradient(180deg,oklch(0.300 0.075 262) 0%,oklch(0.350 0.065 292) 36%,oklch(0.425 0.080 350) 68%,oklch(0.510 0.105 52) 100%)}
html.dark .rw-sky[data-sky-layer="night"]{background:
  radial-gradient(10% 24% at 89% 22%,oklch(0.42 0.045 250 / .40),transparent 72%),
  radial-gradient(20% 7% at 70% 38%,oklch(0.36 0.040 255 / .45),transparent 72%),
  radial-gradient(14% 5% at 58% 22%,oklch(0.33 0.035 258 / .35),transparent 72%),
  radial-gradient(16% 5% at 34% 30%,oklch(0.31 0.035 260 / .30),transparent 72%),
  linear-gradient(118deg,transparent 0 38%,oklch(0.42 0.035 262 / .07) 50%,transparent 64%),
  radial-gradient(40% 30% at var(--rw-glow-x,22%) 100%,oklch(0.32 0.05 80 / .35),transparent 70%),
  linear-gradient(180deg,oklch(0.135 0.048 272) 0%,oklch(0.170 0.058 266) 58%,oklch(0.222 0.062 258) 100%)}
html.dark :is(.rw,.rw-pane)[data-sky="day"]{--rw-land-far:oklch(0.405 0.045 222);--rw-land-mid:oklch(0.345 0.055 165);--rw-land-near:oklch(0.285 0.058 142)}
html.dark :is(.rw,.rw-pane)[data-sky="morning"]{--rw-land-far:oklch(0.370 0.040 300);--rw-land-mid:oklch(0.310 0.040 250);--rw-land-near:oklch(0.258 0.045 150)}
html.dark :is(.rw,.rw-pane)[data-sky="night"]{--rw-land-far:oklch(0.190 0.040 266);--rw-land-mid:oklch(0.155 0.034 266);--rw-land-near:oklch(0.126 0.028 268)}
/* night: more still stars (no twinkle) and, low on the land, a few warm windows of the town across the fields */
.rw-glass::before,.rw-glass::after{content:"";position:absolute;z-index:1;left:0;top:0;width:1.3px;height:1.3px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s linear}
.rw-glass::before{background:transparent;
  box-shadow:
    calc(var(--rw-gw-px, 1100px) * .03) 46px 0 0 oklch(0.95 0.01 90 / .35),
    calc(var(--rw-gw-px, 1100px) * .10) 34px 0 0 oklch(0.95 0.01 90 / .5),
    calc(var(--rw-gw-px, 1100px) * .17) 96px 0 0 oklch(0.95 0.01 90 / .3),
    calc(var(--rw-gw-px, 1100px) * .21) 52px 0 0 oklch(0.95 0.01 90 / .45),
    calc(var(--rw-gw-px, 1100px) * .31) 70px 0 0 oklch(0.95 0.01 90 / .35),
    calc(var(--rw-gw-px, 1100px) * .40) 22px 0 0 oklch(0.95 0.01 90 / .5),
    calc(var(--rw-gw-px, 1100px) * .44) 104px 0 0 oklch(0.95 0.01 90 / .28),
    calc(var(--rw-gw-px, 1100px) * .53) 60px 0 0 oklch(0.95 0.01 90 / .4),
    calc(var(--rw-gw-px, 1100px) * .62) 36px 0 0 oklch(0.95 0.01 90 / .55),
    calc(var(--rw-gw-px, 1100px) * .69) 98px 0 0 oklch(0.95 0.01 90 / .3),
    calc(var(--rw-gw-px, 1100px) * .79) 14px 0 0 oklch(0.95 0.01 90 / .45),
    calc(var(--rw-gw-px, 1100px) * .83) 82px 0 0 oklch(0.95 0.01 90 / .35),
    calc(var(--rw-gw-px, 1100px) * .94) 100px 0 0 oklch(0.95 0.01 90 / .3)}
.rw-glass::after{top:calc(var(--rw-hz-in) + 5px);width:2px;height:1.6px;border-radius:1px;background:transparent;
  box-shadow:
    calc(var(--rw-gw-px, 1100px) * .05) 2px 0 0 oklch(0.84 0.12 76 / .45),
    calc(var(--rw-gw-px, 1100px) * .065) 3px 0 0 oklch(0.84 0.12 76 / .35),
    calc(var(--rw-gw-px, 1100px) * .34) 1px 0 0 oklch(0.84 0.12 76 / .45),
    calc(var(--rw-gw-px, 1100px) * .36) 3px 0 0 oklch(0.84 0.12 76 / .35),
    calc(var(--rw-gw-px, 1100px) * .47) 6px 0 0 oklch(0.84 0.12 76 / .3),
    calc(var(--rw-gw-px, 1100px) * .58) 2px 0 0 oklch(0.84 0.12 76 / .45),
    calc(var(--rw-gw-px, 1100px) * .60) 4px 0 0 oklch(0.84 0.12 76 / .3),
    calc(var(--rw-gw-px, 1100px) * .88) 3px 0 0 oklch(0.84 0.12 76 / .4),
    calc(var(--rw-gw-px, 1100px) * .93) 1px 0 0 oklch(0.84 0.12 76 / .35)}
html.dark .rw[data-sky="night"] .rw-glass::before{opacity:1}
html.dark .rw[data-sky="night"] .rw-glass::after{opacity:1}
html.dark .rw[data-sky="evening"] .rw-glass::after{opacity:.55}
/* one warm light inside her room: a soft wash high on the wall from the left (a lamp out of frame; dark only, ≤ 8 %) */
.rw-wall::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 58% at 0% 0%,oklch(0.80 0.11 64 / .08),oklch(0.80 0.11 64 / .035) 46%,transparent 76%)}
html:not(.dark) .rw-wall::before{display:none}

/* ---- 4 · (the study-plan fixer, 6 Oct 00:35) the horizon's two-layer mask (glass edges ∩ the mullion, composite
   intersect) does not hold on a 1.2 px line in Chrome 152: the line showed on the wall left of the window (measured at
   1440 dark: +12 levels from the sidebar edge to the frame). ONE layer with the same stops does. Same geometry. */
.rw-hz{
  -webkit-mask:linear-gradient(90deg,transparent 0,transparent calc(var(--rw-gx) + 2px),black calc(var(--rw-gx) + 24px),black calc(50% - var(--rw-mull, 0px) / 2),transparent calc(50% - var(--rw-mull, 0px) / 2),transparent calc(50% + var(--rw-mull, 0px) / 2),black calc(50% + var(--rw-mull, 0px) / 2),black calc(100% - var(--rw-gx) - 24px),transparent calc(100% - var(--rw-gx) - 2px));
  -webkit-mask-composite:source-over;
  mask:linear-gradient(90deg,transparent 0,transparent calc(var(--rw-gx) + 2px),black calc(var(--rw-gx) + 24px),black calc(50% - var(--rw-mull, 0px) / 2),transparent calc(50% - var(--rw-mull, 0px) / 2),transparent calc(50% + var(--rw-mull, 0px) / 2),black calc(50% + var(--rw-mull, 0px) / 2),black calc(100% - var(--rw-gx) - 24px),transparent calc(100% - var(--rw-gx) - 2px));
  mask-composite:add}
/* the wall a shade warmer and lighter (still plaster, chroma ≤ 0.012): her room, not a void */
html.dark :is(.rw,.rw-pane){--rw-wall-hi:oklch(0.226 0.012 62);--rw-wall:oklch(0.204 0.011 57);--rw-wall-lo:oklch(0.186 0.010 53)}
/* a linen curtain gathered at the window's left, tied back: the most familiar sign of a home window (still; desktop) */
.rw-window::before{content:"";position:absolute;z-index:4;left:-22px;top:-6px;bottom:2px;width:74px;pointer-events:none;
  clip-path:polygon(0 0,100% 0,97% 6%,78% 30%,52% 56%,40% 63%,47% 74%,58% 100%,0 100%);
  background:
    linear-gradient(180deg,transparent 0 59.5%,oklch(0.30 0.04 60) 59.5% 60.6%,oklch(0.50 0.06 66) 60.6% 62.4%,oklch(0.30 0.04 60) 62.4% 63.4%,transparent 63.4%),
    linear-gradient(180deg,oklch(0 0 0 / .22) 0 5px,transparent 5px),
    linear-gradient(180deg,transparent 40%,oklch(0 0 0 / .16) 100%),
    linear-gradient(90deg,oklch(0.80 0.10 66 / .12),transparent 40%,oklch(0 0 0 / .22)),
    repeating-linear-gradient(90deg,transparent 0 5px,oklch(0 0 0 / .10) 9px,transparent 13px 23px),
    repeating-linear-gradient(90deg,oklch(0.350 0.030 66) 0,oklch(0.440 0.035 70) 5px,oklch(0.405 0.033 68) 10px,oklch(0.335 0.029 64) 14px,oklch(0.370 0.031 66) 17px);
  filter:drop-shadow(3px 4px 5px oklch(0.04 0.01 40 / .55))}
html:not(.dark) .rw-window::before{
  background:
    linear-gradient(180deg,transparent 0 59.5%,color-mix(in srgb,var(--ink) 55%,transparent) 59.5% 60.3%,oklch(0.93 0.02 75) 60.3% 62.6%,color-mix(in srgb,var(--ink) 55%,transparent) 62.6% 63.4%,transparent 63.4%),
    linear-gradient(90deg,transparent 55%,color-mix(in srgb,var(--ink) 7%,transparent)),
    repeating-linear-gradient(90deg,oklch(0.950 0.010 78) 0,oklch(0.965 0.008 80) 6px,color-mix(in srgb,var(--ink) 20%,oklch(0.955 0.010 78)) 9px,oklch(0.950 0.010 78) 10px,oklch(0.940 0.011 76) 15px);
  filter:drop-shadow(1px 0 0 color-mix(in srgb,var(--ink) 50%,transparent)) drop-shadow(0 1px 0 color-mix(in srgb,var(--ink) 50%,transparent)) drop-shadow(2px 3px 0 color-mix(in srgb,var(--ink) 8%,transparent))}
@container rw (max-width: 620px){ .rw-window::before{display:none} }

/* ---------------------------------------------------------------- kit 2.6 · her own dates (road-window.js §7; First Light's
   own rules made the kit's, onboarding KR2). A lamp she has not set is an honest unlit post (dotted rim, no fill, the words
   "not set yet", never a padlock); a date beyond the glass stands at its far edge with Section II's plaque a line higher so
   the two never collide; a mark the session takes off the glass (the door, for { interview: null }) is gone, not dimmed. */
.rw .rw-lan[data-status="unset"] .rw-lamp{background:none;border:1.5px dotted var(--rw-post);box-shadow:none}
.rw .rw-lan[data-status="unset"] .rw-plaque{color:var(--muted, var(--sp-muted));font-style:italic}
.rw .rw-lan[data-rw-far][data-sit="sectionII"] .rw-lan-plaque{top:calc(var(--orb) * -1.4 - 15px - 38px)}
.rw .rw-lan[data-rw-far][data-sit="sectionII"] .rw-lan-post{top:calc(var(--orb) * -.9 - 38px);height:calc(var(--orb) * .9 + 38px)}
@container rw (max-width: 620px){ .rw .rw-lan[data-rw-far][data-sit="sectionII"] .rw-lan-plaque{top:calc(var(--orb) * -1.4 - 15px - 34px)} }
.rw [data-rw-off]{display:none !important}

/* ==== shared/form-kit.css ==== */
/* =============================================================================
   APTAVIA 2.0 · walk · THE FORM KIT (round 6 kit, 6 Oct 2026) — ONE set of fields and buttons for the front door
   (sign in, sign up), First Light (onboarding), the Gatehouse (settings) and the money pages. Behaviour: shared/form-kit.js.
   Manual: shared/ROUND6-KIT.md §3. Tokens and oklch() only, no hex. Labels ≥ 12 px; every target ≥ 44 px.
   The grammar: INK for everything; ONE VIOLET that means "now" (the one primary button, the focused field's ring, the
   chosen segment's edge); ROSE only for an error ("this costs you": a field that will not go through); a success is
   an INK tick, never green. Fields are glass read by their edges; light mode is white fields with an ink edge and a
   crisp shadow, no glow. Nothing here ever sends anything: a walk form is local (form-kit.js fires fk:submit).
   ============================================================================= */
:is(.fk, [data-liquid]) {
  --fk-font: var(--font-ui, var(--sp-font, system-ui, sans-serif));
  --fk-ink: var(--ink, var(--sp-ink));
  --fk-body: var(--body, var(--sp-body));
  --fk-muted: var(--muted, var(--sp-muted));
  --fk-page: var(--page, var(--sp-page));
  --fk-now: var(--sp-primary);
  --fk-action: var(--gradient-action, var(--sp-action));
  --fk-on-action: var(--on-action, oklch(1 0 0));
  --fk-field: color-mix(in srgb, var(--fk-ink) 6%, transparent);
  --fk-field-hover: color-mix(in srgb, var(--fk-ink) 9%, transparent);
  --fk-edge: color-mix(in srgb, var(--fk-ink) 22%, transparent);
  --fk-edge-strong: color-mix(in srgb, var(--fk-ink) 46%, transparent);
  --fk-spec: color-mix(in srgb, var(--fk-ink) 16%, transparent);
  --fk-card: linear-gradient(180deg, color-mix(in srgb, var(--fk-ink) 9%, transparent), color-mix(in srgb, var(--fk-ink) 4%, transparent));
  --fk-drop: 0 18px 36px -22px oklch(0.04 0.01 40 / .95), 0 2px 4px -2px oklch(0.04 0.01 40 / .5);
  --fk-rose-ink: oklch(0.82 0.1 6);
  --fk-rose-edge: oklch(0.72 0.12 6 / .8);
  --fk-rose-wash: oklch(0.62 0.13 6 / .16);
}
/* the tokens live on every page root ([data-liquid] = .spine-page) so a kit control works anywhere in a page; a .fk wrapper
   also sets the kit's text colour and font for a block of its own */
.fk { color: var(--fk-ink); font: 400 16px/1.5 var(--fk-font); -webkit-font-smoothing: antialiased; }
html:not(.dark) :is(.fk, [data-liquid]) {
  --fk-field: oklch(1 0 0);
  --fk-field-hover: oklch(0.99 0.003 300);
  --fk-edge: color-mix(in srgb, var(--fk-ink) 24%, transparent);
  --fk-edge-strong: color-mix(in srgb, var(--fk-ink) 55%, transparent);
  --fk-spec: oklch(1 0 0);
  --fk-card: linear-gradient(180deg, oklch(1 0 0), oklch(0.988 0.004 300));
  --fk-drop: 0 1px 1px color-mix(in srgb, var(--fk-ink) 10%, transparent), 0 10px 22px -16px color-mix(in srgb, var(--fk-ink) 45%, transparent);
  --fk-rose-ink: oklch(0.45 0.15 6);
  --fk-rose-edge: oklch(0.55 0.15 6 / .7);
  --fk-rose-wash: oklch(0.93 0.045 6);
}
:is(.fk, [data-liquid]) :is([class^="fk-"], [class*=" fk-"]), :is(.fk, .fk-card, .fk-field, .fk-sitting, .fk-btn, .fk-seg, .fk-cards, .fk-chips, .fk-range, .fk-code, .fk-note) :is(*, *::before, *::after) { box-sizing: border-box; }
:is(.fk, [data-liquid]) .fk-vh{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- the card (a form's one surface) */
:is(.fk, [data-liquid]) .fk-card{ position: relative; border-radius: 20px; padding: 26px 26px 24px; background: var(--fk-card);
  box-shadow: inset 0 0 0 1px var(--fk-edge), inset 1px 1px 0 var(--fk-spec), var(--fk-drop); }
:is(.fk, [data-liquid]) .fk-card > h2, :is(.fk, [data-liquid]) .fk-title{ margin: 0 0 4px; font: 750 26px/1.15 var(--fk-font); letter-spacing: -.02em; color: var(--fk-ink); }
:is(.fk, [data-liquid]) .fk-sub{ margin: 0 0 20px; font: 450 15.5px/1.5 var(--fk-font); color: var(--fk-body); }
:is(.fk, [data-liquid]) .fk-stack{ display: grid; gap: 16px; }
:is(.fk, [data-liquid]) .fk-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
:is(.fk, [data-liquid]) .fk-row-between{ justify-content: space-between; }

/* ---------------------------------------------------------------- a field: label · input · hint · inline error */
:is(.fk, [data-liquid]) .fk-field{ display: grid; gap: 6px; min-width: 0; }
:is(.fk, [data-liquid]) .fk-label{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 650 14px/1.3 var(--fk-font); color: var(--fk-ink); }
:is(.fk, [data-liquid]) .fk-label small{ font: 500 13px/1.3 var(--fk-font); color: var(--fk-muted); }
:is(.fk, [data-liquid]) .fk-label a, :is(.fk, [data-liquid]) .fk-label .fk-quiet{ font-size: 13.5px; }
:is(.fk, [data-liquid]) .fk-input, :is(.fk, [data-liquid]) .fk-select, :is(.fk, [data-liquid]) .fk-textarea{
  display: block; width: 100%; min-height: 48px; margin: 0; padding: 12px 14px; border: 0; border-radius: 12px; appearance: none;
  font: 500 16px/1.3 var(--fk-font); color: var(--fk-ink); background: var(--fk-field);
  box-shadow: inset 0 0 0 1px var(--fk-edge), inset 1px 1px 0 var(--fk-spec);
  transition: box-shadow .18s linear, background-color .18s linear;
}
:is(.fk, [data-liquid]) .fk-textarea{ min-height: 96px; resize: vertical; line-height: 1.5; }
:is(.fk, [data-liquid]) .fk-input::placeholder, :is(.fk, [data-liquid]) .fk-textarea::placeholder{ color: var(--fk-muted); opacity: .85; }
:is(.fk, [data-liquid]) .fk-input:hover, :is(.fk, [data-liquid]) .fk-select:hover, :is(.fk, [data-liquid]) .fk-textarea:hover{ background: var(--fk-field-hover); box-shadow: inset 0 0 0 1px var(--fk-edge-strong), inset 1px 1px 0 var(--fk-spec); }
:is(.fk, [data-liquid]) .fk-input:focus-visible, :is(.fk, [data-liquid]) .fk-select:focus-visible, :is(.fk, [data-liquid]) .fk-textarea:focus-visible{ outline: none; box-shadow: inset 0 0 0 1.5px var(--fk-now), 0 0 0 3px color-mix(in srgb, var(--fk-now) 28%, transparent); }
:is(.fk, [data-liquid]) .fk-input[type="date"]{ font-variant-numeric: tabular-nums; }
html.dark :is(.fk, [data-liquid]) .fk-input[type="date"]{ color-scheme: dark; }
:is(.fk, [data-liquid]) .fk-select{ padding-right: 42px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
:is(.fk, [data-liquid]) .fk-input-wrap{ position: relative; }
:is(.fk, [data-liquid]) .fk-input-wrap .fk-input{ padding-right: 56px; }
:is(.fk, [data-liquid]) .fk-adorn{ position: absolute; right: 4px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--fk-body); cursor: pointer; }
:is(.fk, [data-liquid]) .fk-adorn svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(.fk, [data-liquid]) .fk-adorn:hover{ color: var(--fk-ink); background: color-mix(in srgb, var(--fk-ink) 7%, transparent); }
:is(.fk, [data-liquid]) .fk-adorn:focus-visible{ outline: 3px solid var(--sp-focus); outline-offset: -2px; }
:is(.fk, [data-liquid]) .fk-adorn .fk-eye-off, :is(.fk, [data-liquid]) .fk-adorn[aria-pressed="true"] .fk-eye-on{ display: none; }
:is(.fk, [data-liquid]) .fk-adorn[aria-pressed="true"] .fk-eye-off{ display: block; }
:is(.fk, [data-liquid]) .fk-hint{ margin: 0; font: 450 13.5px/1.45 var(--fk-font); color: var(--fk-muted); }
/* an error: rose words under the field and a rose edge on it — never only colour: the words say what to do */
:is(.fk, [data-liquid]) .fk-error{ display: none; margin: 0; font: 600 13.5px/1.45 var(--fk-font); color: var(--fk-rose-ink); }
:is(.fk, [data-liquid]) .fk-error::before{ content: "\2715\00a0"; font-weight: 700; }
:is(.fk, [data-liquid]) .fk-field[data-fk-invalid] .fk-error{ display: block; }
:is(.fk, [data-liquid]) .fk-field[data-fk-invalid] :is(.fk-input, :is(.fk, [data-liquid]) .fk-select, :is(.fk, [data-liquid]) .fk-textarea){ box-shadow: inset 0 0 0 1.5px var(--fk-rose-edge), inset 1px 1px 0 var(--fk-spec); }

/* ---------------------------------------------------------------- buttons: ONE primary; secondary; quiet; danger */
:is(.fk, [data-liquid]) .fk-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px; cursor: pointer;
  font: 700 16px/1 var(--fk-font); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; color: var(--fk-ink);
  transition: translate .18s ease, box-shadow .18s linear, background-color .18s linear, opacity .18s linear;
}
:is(.fk, [data-liquid]) .fk-btn svg{ width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(.fk, [data-liquid]) .fk-btn:focus-visible{ outline: 3px solid var(--sp-focus); outline-offset: 3px; }
:is(.fk, [data-liquid]) .fk-btn[disabled], :is(.fk, [data-liquid]) .fk-btn[aria-disabled="true"]{ cursor: not-allowed; opacity: .5; }
:is(.fk, [data-liquid]) .fk-block{ width: 100%; }
/* kit 2.6 (G1, the brightest-object law): in dark the ONE primary is the brightest object on its page, at least as bright as
   Today's accepted Start row (mean linear luminance 0.166 measured on the 6 Oct screenshot). The old fill (the route's
   --gradient-action, the two route violets) measured 0.11, so every scene light out-shone it. The same two hues, lifted:
   oklch(0.575 0.215 296) → oklch(0.565 0.15 276) is Y 0.168 / 0.172 under the sheen and the white label (white on either
   end is 4.7–4.8 : 1, AA for 16 px bold); the button measures about 0.20. Scene lights in dark are capped BELOW it:
   a lantern, a lamp shade or a lit cover reads ≤ 0.15 mean (ROUND6-KIT §3 · "the brightest object"). */
:is(.fk, [data-liquid]) .fk-primary{ color: var(--fk-on-action);
  background: linear-gradient(180deg, oklch(1 0 0 / .18) 0, oklch(1 0 0 / .04) 45%, transparent 60%), linear-gradient(110deg, oklch(0.575 0.215 296), oklch(0.565 0.15 276));
  box-shadow: inset 0 0 0 1px oklch(0.86 0.09 296 / .55), inset 1px 1.5px 0 oklch(1 0 0 / .36), 0 0 0 1px oklch(0.62 0.2 292 / .35), 0 10px 26px -12px oklch(0.6 0.21 292 / .6), 0 14px 24px -14px oklch(0.04 0.01 40 / .95); }
:is(.fk, [data-liquid]) .fk-primary:hover:not([disabled]):not([aria-disabled="true"]){ translate: 0 -1px;
  background: linear-gradient(180deg, oklch(1 0 0 / .22) 0, oklch(1 0 0 / .06) 45%, transparent 60%), linear-gradient(110deg, oklch(0.6 0.215 296), oklch(0.585 0.15 276)); }
html:not(.dark) :is(.fk, [data-liquid]) .fk-primary{ background: var(--sp-primary); box-shadow: 0 1px 0 oklch(0 0 0 / .12), 0 8px 16px -10px color-mix(in srgb, var(--sp-primary) 70%, transparent); }
html:not(.dark) :is(.fk, [data-liquid]) .fk-primary:hover:not([disabled]):not([aria-disabled="true"]){ background: var(--sp-primary); }
/* kit 2.6 (G4): a HELD or disabled primary (Confirm email before six digits, Save before a change) is an ink outline in both
   themes, never a 50 % violet wash: the same rule as the question card's disabled Submit. A BUSY primary (data-fk-busy,
   "Signing in…") stays the full violet: it is the action under way, not a held one. */
:is(.fk, [data-liquid]) .fk-primary:is([disabled], [aria-disabled="true"]):not([data-fk-busy]),
html:not(.dark) :is(.fk, [data-liquid]) .fk-primary:is([disabled], [aria-disabled="true"]):not([data-fk-busy]){
  opacity: 1; translate: none; color: var(--fk-muted); background: color-mix(in srgb, var(--fk-ink) 7%, transparent); box-shadow: inset 0 0 0 1px var(--fk-edge-strong); }
:is(.fk, [data-liquid]) .fk-primary[data-fk-busy]{ opacity: 1; }
:is(.fk, [data-liquid]) .fk-secondary{ background: var(--fk-field); box-shadow: inset 0 0 0 1px var(--fk-edge-strong), inset 1px 1px 0 var(--fk-spec); }
:is(.fk, [data-liquid]) .fk-secondary:hover:not([disabled]){ background: var(--fk-field-hover); box-shadow: inset 0 0 0 1px var(--fk-ink), inset 1px 1px 0 var(--fk-spec); }
:is(.fk, [data-liquid]) .fk-quiet{ min-height: 44px; padding: 0 4px; border-radius: 8px; background: none; font: 650 14.5px/1 var(--fk-font); color: var(--fk-ink);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--fk-ink) 32%, transparent); text-underline-offset: .25em; }
:is(.fk, [data-liquid]) .fk-quiet:hover{ text-decoration-color: currentColor; }
:is(.fk, [data-liquid]) .fk-danger{ background: none; color: var(--fk-rose-ink); box-shadow: inset 0 0 0 1.5px var(--fk-rose-edge); }
:is(.fk, [data-liquid]) .fk-danger:hover:not([disabled]){ background: var(--fk-rose-wash); }
/* the Google door: the provider's own mark, the words the live page uses; never violet (it is not the "now") */
:is(.fk, [data-liquid]) .fk-google{ background: var(--fk-field); box-shadow: inset 0 0 0 1px var(--fk-edge-strong), inset 1px 1px 0 var(--fk-spec); font-weight: 650; }
:is(.fk, [data-liquid]) .fk-google:hover:not([disabled]){ background: var(--fk-field-hover); }
:is(.fk, [data-liquid]) .fk-g{ width: 18px; height: 18px; flex: none; }
:is(.fk, [data-liquid]) .fk-g .g-b{ fill: oklch(0.63 0.19 259); } :is(.fk, [data-liquid]) .fk-g .g-g{ fill: oklch(0.65 0.16 147); } :is(.fk, [data-liquid]) .fk-g .g-y{ fill: oklch(0.83 0.17 85); } :is(.fk, [data-liquid]) .fk-g .g-r{ fill: oklch(0.63 0.21 28); }
:is(.fk, [data-liquid]) .fk-or{ display: flex; align-items: center; gap: 12px; margin: 2px 0; font: 600 13px/1 var(--fk-font); color: var(--fk-muted); }
:is(.fk, [data-liquid]) .fk-or::before, :is(.fk, [data-liquid]) .fk-or::after{ content: ""; flex: 1; height: 1px; background: var(--fk-edge); }
:is(.fk, [data-liquid]) .fk-btn[data-fk-busy]{ cursor: progress; }
:is(.fk, [data-liquid]) .fk-btn[data-fk-busy] .fk-spin{ display: inline-block; }
:is(.fk, [data-liquid]) .fk-spin{ display: none; width: 16px; height: 16px; aspect-ratio: 1; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: fk-turn .8s linear 3; }
@keyframes fk-turn { to { rotate: 1turn; } }

/* ---------------------------------------------------------------- choices: checkbox · switch · segmented · chips · range */
:is(.fk, [data-liquid]) .fk-check{ display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font: 550 15px/1.3 var(--fk-font); color: var(--fk-ink); }
:is(.fk, [data-liquid]) .fk-check input{ appearance: none; margin: 0; width: 22px; height: 22px; aspect-ratio: 1; flex: none; border-radius: 6px; cursor: pointer;
  background: var(--fk-field); box-shadow: inset 0 0 0 1.5px var(--fk-edge-strong); display: grid; place-items: center; }
:is(.fk, [data-liquid]) .fk-check input::after{ content: ""; width: 10px; height: 5.5px; border-left: 2.4px solid var(--fk-page); border-bottom: 2.4px solid var(--fk-page); rotate: -45deg; translate: 0 -1px; opacity: 0; }
:is(.fk, [data-liquid]) .fk-check input:checked{ background: var(--fk-ink); box-shadow: inset 0 0 0 1.5px var(--fk-ink); }
:is(.fk, [data-liquid]) .fk-check input:checked::after{ opacity: 1; }
:is(.fk, [data-liquid]) .fk-check input:focus-visible{ outline: 3px solid var(--sp-focus); outline-offset: 2px; }
/* the switch: role="switch"; the thumb is a true circle that slides once (a translate, never a scale) */
:is(.fk, [data-liquid]) .fk-switch{ display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: 550 15px/1.3 var(--fk-font); color: var(--fk-ink); text-align: left; }
:is(.fk, [data-liquid]) .fk-switch .fk-track{ position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: color-mix(in srgb, var(--fk-ink) 14%, transparent); box-shadow: inset 0 0 0 1px var(--fk-edge-strong); transition: background-color .2s linear; }
:is(.fk, [data-liquid]) .fk-switch .fk-thumb{ position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; aspect-ratio: 1; border-radius: 50%; background: var(--fk-ink); transition: translate .2s cubic-bezier(.3,.6,.2,1), background-color .2s linear; }
:is(.fk, [data-liquid]) .fk-switch[aria-checked="true"] .fk-track{ background: var(--fk-ink); box-shadow: inset 0 0 0 1px var(--fk-ink); }
:is(.fk, [data-liquid]) .fk-switch[aria-checked="true"] .fk-thumb{ translate: 18px 0; background: var(--fk-page); }
:is(.fk, [data-liquid]) .fk-switch:focus-visible{ outline: 3px solid var(--sp-focus); outline-offset: 3px; border-radius: 12px; }
:is(.fk, [data-liquid]) .fk-switch small{ display: block; font: 450 13.5px/1.4 var(--fk-font); color: var(--fk-muted); }
/* segmented: one choice of a few (role="radiogroup"); the chosen one is an ink well with a violet edge, like the strip's step */
:is(.fk, [data-liquid]) .fk-seg{ display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 16px; background: color-mix(in srgb, var(--fk-ink) 5%, transparent); box-shadow: inset 0 0 0 1px var(--fk-edge); }
html:not(.dark) :is(.fk, [data-liquid]) .fk-seg{ background: oklch(0.975 0.004 300); }
:is(.fk, [data-liquid]) .fk-seg button{ min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: none; cursor: pointer; font: 650 15px/1 var(--fk-font); color: var(--fk-body); white-space: nowrap; }
:is(.fk, [data-liquid]) .fk-seg button:hover{ color: var(--fk-ink); background: color-mix(in srgb, var(--fk-ink) 6%, transparent); }
:is(.fk, [data-liquid]) .fk-seg button[aria-checked="true"]{ color: var(--fk-ink); background: var(--sp-well, var(--fk-page)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fk-now) 60%, var(--fk-edge)), 0 1px 2px oklch(0 0 0 / .18); }
:is(.fk, [data-liquid]) .fk-seg button:focus-visible{ outline: 3px solid var(--sp-focus); outline-offset: 1px; }
:is(.fk, [data-liquid]) .fk-seg-block{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
:is(.fk, [data-liquid]) .fk-seg-block button{ white-space: normal; line-height: 1.2; padding: 8px 10px; }
/* choice cards: a bigger segmented choice with a line under each title (onboarding's "Where are you starting?") */
:is(.fk, [data-liquid]) .fk-cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
:is(.fk, [data-liquid]) .fk-cards button{ display: grid; gap: 4px; min-height: 72px; padding: 12px 14px; border: 0; border-radius: 14px; text-align: left; cursor: pointer; background: var(--fk-field); box-shadow: inset 0 0 0 1px var(--fk-edge); color: var(--fk-ink); }
:is(.fk, [data-liquid]) .fk-cards button b{ font: 700 15.5px/1.25 var(--fk-font); } :is(.fk, [data-liquid]) .fk-cards button span{ font: 450 13.5px/1.35 var(--fk-font); color: var(--fk-muted); }
:is(.fk, [data-liquid]) .fk-cards button:hover{ box-shadow: inset 0 0 0 1px var(--fk-edge-strong); }
:is(.fk, [data-liquid]) .fk-cards button[aria-checked="true"]{ box-shadow: inset 0 0 0 1.5px var(--fk-now), 0 0 0 1px color-mix(in srgb, var(--fk-now) 25%, transparent); background: color-mix(in srgb, var(--fk-now) 8%, var(--fk-field)); }
:is(.fk, [data-liquid]) .fk-cards button:focus-visible{ outline: 3px solid var(--sp-focus); outline-offset: 2px; }
/* chips: tap any (aria-pressed); chosen = ink, never a section colour */
:is(.fk, [data-liquid]) .fk-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
:is(.fk, [data-liquid]) .fk-chips button{ min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: var(--fk-field); box-shadow: inset 0 0 0 1px var(--fk-edge); font: 600 14.5px/1 var(--fk-font); color: var(--fk-body); }
:is(.fk, [data-liquid]) .fk-chips button:hover{ color: var(--fk-ink); box-shadow: inset 0 0 0 1px var(--fk-edge-strong); }
:is(.fk, [data-liquid]) .fk-chips button[aria-pressed="true"]{ color: var(--fk-page); background: var(--fk-ink); box-shadow: inset 0 0 0 1px var(--fk-ink); }
:is(.fk, [data-liquid]) .fk-chips button[aria-pressed="true"]::before{ content: "\2713\00a0"; }
:is(.fk, [data-liquid]) .fk-chips button:focus-visible{ outline: 3px solid var(--sp-focus); outline-offset: 2px; }
/* range: a slider with its value printed beside the label (never a progress fill in violet) */
:is(.fk, [data-liquid]) .fk-range{ display: grid; gap: 8px; }
:is(.fk, [data-liquid]) .fk-range output{ font: 750 22px/1 var(--fk-font); color: var(--fk-ink); font-variant-numeric: tabular-nums; }
:is(.fk, [data-liquid]) .fk-range output small{ font: 600 13px/1 var(--fk-font); color: var(--fk-muted); margin-left: 4px; }
:is(.fk, [data-liquid]) .fk-range input[type="range"]{ -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: none; cursor: pointer; }
:is(.fk, [data-liquid]) .fk-range input[type="range"]::-webkit-slider-runnable-track{ height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--fk-ink) 18%, transparent); }
:is(.fk, [data-liquid]) .fk-range input[type="range"]::-moz-range-track{ height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--fk-ink) 18%, transparent); }
:is(.fk, [data-liquid]) .fk-range input[type="range"]::-webkit-slider-thumb{ -webkit-appearance: none; width: 24px; height: 24px; aspect-ratio: 1; margin-top: -9px; border-radius: 50%; background: var(--fk-ink); box-shadow: 0 0 0 4px var(--fk-page), 0 2px 6px oklch(0 0 0 / .35); }
:is(.fk, [data-liquid]) .fk-range input[type="range"]::-moz-range-thumb{ width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--fk-ink); box-shadow: 0 0 0 4px var(--fk-page); }
:is(.fk, [data-liquid]) .fk-range input[type="range"]:focus-visible{ outline: 3px solid var(--sp-focus); outline-offset: 2px; border-radius: 8px; }
:is(.fk, [data-liquid]) .fk-range-scale{ display: flex; justify-content: space-between; font: 500 12.5px/1 var(--fk-font); color: var(--fk-muted); }

/* ---------------------------------------------------------------- a 6-digit code (an authenticator, an email change) */
:is(.fk, [data-liquid]) .fk-code{ display: flex; gap: 8px; }
:is(.fk, [data-liquid]) .fk-code input{ width: 48px; height: 56px; padding: 0; border: 0; border-radius: 12px; text-align: center; font: 700 22px/1 var(--fk-font); color: var(--fk-ink); font-variant-numeric: tabular-nums;
  background: var(--fk-field); box-shadow: inset 0 0 0 1px var(--fk-edge), inset 1px 1px 0 var(--fk-spec); }
:is(.fk, [data-liquid]) .fk-code input:focus-visible{ outline: none; box-shadow: inset 0 0 0 1.5px var(--fk-now), 0 0 0 3px color-mix(in srgb, var(--fk-now) 28%, transparent); }
@media (max-width: 380px) { :is(.fk, [data-liquid]) .fk-code{ gap: 6px; } :is(.fk, [data-liquid]) .fk-code input{ width: 42px; height: 52px; } }

/* ---------------------------------------------------------------- notes: information · a warning · done */
:is(.fk, [data-liquid]) .fk-note{ display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 12px; font: 500 14.5px/1.5 var(--fk-font); color: var(--fk-body);
  background: color-mix(in srgb, var(--fk-ink) 5%, transparent); box-shadow: inset 0 0 0 1px var(--fk-edge); }
:is(.fk, [data-liquid]) .fk-note svg{ width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--fk-ink); }
:is(.fk, [data-liquid]) .fk-note b{ color: var(--fk-ink); }
:is(.fk, [data-liquid]) .fk-note[data-tone="warn"]{ color: var(--fk-ink); background: var(--fk-rose-wash); box-shadow: inset 0 0 0 1px var(--fk-rose-edge); }
:is(.fk, [data-liquid]) .fk-note[data-tone="warn"] svg{ color: var(--fk-rose-ink); }
:is(.fk, [data-liquid]) .fk-note[data-tone="done"] svg{ color: var(--fk-ink); }
:is(.fk, [data-liquid]) .fk-note[hidden]{ display: none; }

/* ---------------------------------------------------------------- the sitting picker (First Light · the Gatehouse) */
:is(.fk, [data-liquid]) .fk-sitting{ margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 12px; }
:is(.fk, [data-liquid]) .fk-sitting legend{ padding: 0; margin: 0 0 4px; font: 700 17px/1.3 var(--fk-font); color: var(--fk-ink); }
:is(.fk, [data-liquid]) .fk-exact{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
:is(.fk, [data-liquid]) .fk-exact[hidden]{ display: none; }
:is(.fk, [data-liquid]) .fk-lanterns{ display: flex; flex-wrap: wrap; gap: 8px 10px; }
:is(.fk, [data-liquid]) .fk-lan{ display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px 6px 8px; border-radius: 999px; font: 550 14px/1.25 var(--fk-font); color: var(--fk-body);
  background: color-mix(in srgb, var(--fk-ink) 5%, transparent); box-shadow: inset 0 0 0 1px var(--fk-edge); }
:is(.fk, [data-liquid]) .fk-lan b{ color: var(--fk-ink); font-weight: 720; }
:is(.fk, [data-liquid]) .fk-lan .spine-orb{ --s: 34px; font-size: 12px; }
:is(.fk, [data-liquid]) .fk-lan .spine-orb[data-s="13"]{ font-size: 12px; letter-spacing: -.02em; }
:is(.fk, [data-liquid]) .fk-lan .fk-days{ font: 750 15px/1 var(--fk-font); color: var(--fk-ink); font-variant-numeric: tabular-nums; }
:is(.fk, [data-liquid]) .fk-lan[data-status="estimate"]{ font-style: italic; }
:is(.fk, [data-liquid]) .fk-lan[data-status="unset"] .spine-orb{ color: var(--fk-muted); background: none; border: 1.5px dotted var(--fk-edge-strong); box-shadow: none; }
:is(.fk, [data-liquid]) .fk-lan[data-status="unset"] .spine-orb[data-s="13"]{ background: none; }

/* reduced motion / Pause: instant */
html[data-spn-paused="true"] [class^="fk-"], html[data-spn-paused="true"] [class*=" fk-"], .spine-page[data-paused="true"] :is([class^="fk-"], [class*=" fk-"]) { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { [class^="fk-"], [class*=" fk-"], .spine-page[data-paused="true"] :is([class^="fk-"], [class*=" fk-"]) { transition: none !important; animation: none !important; } }
@media (prefers-reduced-motion: reduce) { :is([class^="fk-"], [class*=" fk-"]) { transition: none !important; animation: none !important; } }
/* the base CSS colours every <p> in a page ([data-liquid] p, 0,1,1): inside a kit card a paragraph takes the card's ink */
:is(.fk, [data-liquid]) :is(.fk-card, .fk-sitting, .fk-field) p:not([class]) { color: inherit; }

/* ==== shared/spine.css (14b actbar) ==== */
/* spine.css 14b · the phone action bar */
.sp-actbar-l { font: 600 12px/1.3 var(--sp-font); color: var(--sp-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .sp-actbar[data-sp-actbar-pinned] {
    position: fixed; z-index: 60; left: 10px; right: 10px; bottom: calc(var(--sp-dock-h) + env(safe-area-inset-bottom, 0px) + 8px);
    display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0; padding: 8px; box-sizing: border-box;
    border: 1px solid var(--sp-line); border-radius: 18px; background: var(--sp-card);
    box-shadow: inset 1px 1px 0 var(--sp-spec), 0 -1px 0 color-mix(in srgb, var(--sp-ink) 6%, transparent), 0 12px 28px -10px rgba(0, 0, 0, .55);
  }
  /* r7 kit fix (7 Oct): a neutral ink shadow (chroma ≈ 0); the old rgba(34, 20, 70, .35) at 20 px read as violet smoke to Spine.audit (hue 257) at 375 light */
  html:not(.dark) .sp-actbar[data-sp-actbar-pinned] { box-shadow: 0 1px 1px oklch(0.2 0.004 290 / .12), 0 8px 20px -10px oklch(0.2 0.004 290 / .38); }
  .sp-actbar[data-sp-actbar-pinned] > :is(a, button):not(.sp-actbar-l) { flex: 1 1 auto; min-height: 48px; margin: 0; }
  .sp-actbar[data-sp-actbar-pinned] .sp-actbar-l { flex: 0 1 auto; max-width: 34%; padding-left: 6px; }
  /* the page's last words stay above the bar */
  html[data-sp-actbar-on] .spine-app[data-spine-frame] { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sp-actbar-h, 64px) + 16px); }
  .spine-app[data-spine-frame] .sp-actbar[data-sp-actbar-pinned] { bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }    /* no dock under a door or setup page */
}

/* ==== shared/spine.css (smoke switch, selector as spine-shell.css) ==== */
html:not(.dark) [data-liquid] [data-spn-smoke] { display: none !important; }

/* ==== login/_src/door.css ==== */
/* =============================================================================
   APTAVIA 2.0 · walk · THE FRONT DOOR (round 6) — the porch and the card's place, shared by Sign in and Create account.
   Dark first (dusk, the porch lamp lit); light = the same house by day, ink and shadow (no glow, no pool, no blur).
   Tokens and oklch() only, no hex. The card is the page; the house is a still band around it (function leads).
   ============================================================================= */
.fd { position: relative; min-height: 100svh; isolation: isolate; color: var(--ink, var(--sp-ink)); font-family: var(--font-ui, var(--sp-font));
  --fd-eave: clamp(104px, 13.2svh, 124px);   /* round-6: a lower eave so both cards' one action sits on the first screen */
  --fd-deck: 50px;
  --fd-card-x: clamp(32px, 8.3vw, 120px);
  --fd-card-w: 440px;
  /* ONE house for both pages (round-6 fix): the house stands after a shared card SLOT, never after this page's own card,
     so Sign in ↔ Create account (the ALONG, the porch held) shows the same house in the same place — it jumped 80 px
     when Sign in's 440 px card and Create account's 520 px card each pushed it. The slot is the wider card's. */
  --fd-slot: 520px;
  --fd-house-x: calc(var(--fd-card-x) + var(--fd-slot) + clamp(28px, 5vw, 72px));
  /* the house's height: the room under the eave, and never wider than the wall left of the viewport's edge (its window
     stays whole); both pages compute the same numbers */
  --fd-hh: min(700px, calc(100svh - var(--fd-eave) - var(--fd-deck)), calc((100vw - var(--fd-house-x) - 24px) * 700 / 720));
  /* the outside of her house at dusk: painted weatherboards, a warm grey (chroma ≤ 0.016: paint, not a new colour) */
  --fd-wall: oklch(0.236 0.014 62);
  --fd-wall-lo: oklch(0.205 0.013 58);
  --fd-board-lo: oklch(0.13 0.012 50 / .55);
  --fd-board-hi: oklch(0.42 0.016 70 / .30);
  --fd-fascia: oklch(0.30 0.018 60);
  --fd-fascia-hi: oklch(0.52 0.02 70 / .7);
  --fd-gutter: oklch(0.36 0.012 70);
  --fd-deck-top: oklch(0.33 0.035 58);
  --fd-deck-face: oklch(0.255 0.03 55);
  --fd-deck-seam: oklch(0.15 0.02 50 / .7);
  --fd-card-bg: oklch(0.20 0.012 60 / .94);
  --fd-card-edge: oklch(0.80 0.10 72 / .16);
  --fd-pool: oklch(0.72 0.10 70);
}
html:not(.dark) .fd {
  --fd-wall: oklch(0.972 0.006 82);
  --fd-wall-lo: oklch(0.958 0.007 80);
  --fd-board-lo: color-mix(in srgb, var(--ink) 13%, transparent);
  --fd-board-hi: oklch(1 0 0 / .9);
  --fd-fascia: oklch(0.995 0.002 85);
  --fd-fascia-hi: oklch(1 0 0);
  --fd-gutter: oklch(0.93 0.004 85);
  --fd-deck-top: oklch(0.88 0.03 70);
  --fd-deck-face: oklch(0.83 0.035 66);
  --fd-deck-seam: color-mix(in srgb, var(--ink) 30%, transparent);
  --fd-card-bg: oklch(1 0 0);
  --fd-card-edge: color-mix(in srgb, var(--ink) 30%, transparent);
}
/* ---- the scene: a still band around the work ---- */
.fd-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, var(--fd-board-lo) 27px 28.5px, var(--fd-board-hi) 28.5px 30px),
    linear-gradient(180deg, var(--fd-wall) 0%, var(--fd-wall) 55%, var(--fd-wall-lo) 100%);
  background-position: 0 var(--fd-eave), 0 0; }
.fd-scene > * { position: absolute; display: block; }
/* the sky behind the roof: the Window's own four skies (road-window.css), full width under the eave */
.fd-sky.rw-pane { left: 0; right: 0; top: 0; height: var(--fd-eave); margin: 0; display: block; --rw-hz-in: 100%; }
.fd-sky.rw-pane .rw-glass { inset: 0; border-radius: 0; box-shadow: none; --rw-glow-x: 64%; --rw-gw-px: 1440px; }
.fd-sky .rw-moon { right: 14%; top: 34%; }
html:not(.dark) .fd-sky .rw-glass { box-shadow: none; }
/* the eave: a gutter over a painted fascia board, its shadow on the boards (dark only) */
.fd-eave { left: 0; right: 0; top: calc(var(--fd-eave) - 22px); height: 22px;
  background:
    linear-gradient(180deg, var(--fd-gutter) 0 7px, oklch(0 0 0 / .25) 7px 8px, transparent 8px),
    linear-gradient(180deg, transparent 8px, var(--fd-fascia-hi) 8px 9px, var(--fd-fascia) 9px 100%);
  box-shadow: 0 10px 18px -6px oklch(0.05 0.01 40 / .7); }
html:not(.dark) .fd-eave { box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 55%, transparent), 0 4px 0 color-mix(in srgb, var(--ink) 7%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ink) 40%, transparent); }
/* the deck under her feet */
.fd-deck { left: 0; right: 0; top: calc(100svh - var(--fd-deck)); bottom: 0; min-height: var(--fd-deck);
  background:
    linear-gradient(180deg, var(--fd-fascia-hi) 0 1px, var(--fd-deck-top) 1px 9px, oklch(0 0 0 / .18) 9px 10px, var(--fd-deck-face) 10px 100%),
    repeating-linear-gradient(90deg, transparent 0 158px, var(--fd-deck-seam) 158px 159.5px, transparent 159.5px 160px); background-blend-mode: normal; }
html:not(.dark) .fd-deck { box-shadow: 0 -1px 0 color-mix(in srgb, var(--ink) 55%, transparent); }
/* the porch lamp's pool on the boards and the card (dark only: light mode has no glow) */
.fd-pool { left: calc(var(--fd-house-x) + var(--fd-hh) * 60 / 700); top: calc(100svh - var(--fd-deck) - var(--fd-hh) * 466 / 700); width: 1180px; height: 820px; translate: -50% -50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--fd-pool) 30%, transparent), color-mix(in oklch, var(--fd-pool) 13%, transparent) 42%, color-mix(in oklch, var(--fd-pool) 4%, transparent) 72%, transparent 100%); }
html[data-fd-sky="day"] .fd-pool { opacity: .5; }
html[data-fd-sky="morning"] .fd-pool { opacity: .75; }
/* the house front: one drawing, anchored on the deck beside the card */
.fd-house { left: var(--fd-house-x); top: calc(100svh - var(--fd-deck) - var(--fd-hh)); height: var(--fd-hh); width: calc(var(--fd-hh) * 720 / 700); }
.fd-house > svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---- the drawing's paint (dark: dusk, lit from the lamp and the room) ---- */
.pd { --pd-ink: oklch(0.12 0.01 50); --pd-trim: oklch(0.52 0.018 74); --pd-trim-hi: oklch(0.70 0.02 80 / .65); --pd-trim-lo: oklch(0.32 0.01 60);
  --pd-wood: oklch(0.365 0.050 58); --pd-wood-hi: oklch(0.72 0.065 72 / .55); --pd-wood-lo: oklch(0.13 0.025 45 / .9); --pd-sill: oklch(0.395 0.052 60);
  --pd-paint: oklch(0.345 0.066 255); --pd-paint-in: oklch(0.29 0.06 255); --pd-paint-field: oklch(0.36 0.066 255); --pd-paint-hi: oklch(0.56 0.06 255 / .7); --pd-paint-lo: oklch(0.15 0.03 255 / .95);
  --pd-brass: oklch(0.53 0.078 78); --pd-brass-hi: oklch(0.72 0.07 86 / .65); --pd-brass-lo: oklch(0.42 0.065 72); --pd-iron: oklch(0.17 0.01 60);
  --pd-stone: oklch(0.40 0.012 70); --pd-stone-face: oklch(0.31 0.012 64); --pd-stone-hi: oklch(0.62 0.012 75 / .55);
  --pd-warm: oklch(0.86 0.11 78); --pd-paper: oklch(0.80 0.02 84); }
.pd text { font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; }
/* round-6 fix (G1, the brightest-object law): the lantern, the fanlight and her lit room are DIMMED in dark so the one violet
   action stays the brightest thing on the porch (each scene light <= 0.15 mean linear luminance; Sign in reads ~0.20) */
.pd-s-bulb0 { stop-color: oklch(0.76 0.075 84); } .pd-s-bulb1 { stop-color: oklch(0.62 0.085 76 / .55); } .pd-s-bulb2 { stop-color: oklch(0.60 0.08 74 / 0); }
.pd-s-room0 { stop-color: oklch(0.62 0.10 70); } .pd-s-room1 { stop-color: oklch(0.40 0.07 60); } .pd-s-room2 { stop-color: oklch(0.22 0.035 52); }
.pd-s-fan0 { stop-color: oklch(0.58 0.095 70 / .92); } .pd-s-fan1 { stop-color: oklch(0.40 0.07 60 / .85); }
.pd-s-gap0 { stop-color: oklch(0.68 0.10 76); } .pd-s-gap1 { stop-color: oklch(0.50 0.08 66); }
.pd-s-spill0 { stop-color: oklch(0.70 0.10 78 / .45); } .pd-s-spill1 { stop-color: oklch(0.88 0.11 80 / 0); }
.pd-s-refl0 { stop-color: oklch(1 0 0 / 0); } .pd-s-refl1 { stop-color: oklch(1 0 0 / .07); }
.pd-s-lin0 { stop-color: oklch(0.58 0.05 70); } .pd-s-lin1 { stop-color: oklch(0.72 0.06 76); } .pd-s-lin2 { stop-color: oklch(0.52 0.045 66); }
.pd-s-halo0 { stop-color: oklch(0.80 0.10 78 / .16); } .pd-s-halo1 { stop-color: oklch(0.80 0.10 78 / .06); } .pd-s-halo2 { stop-color: oklch(0.86 0.11 78 / 0); }
.pd-s-pot0 { stop-color: oklch(0.40 0.075 45); } .pd-s-pot1 { stop-color: oklch(0.48 0.08 48); } .pd-s-pot2 { stop-color: oklch(0.33 0.065 42); }
.pd-s-ws0 { stop-color: oklch(0.72 0.10 72 / .10); } .pd-s-ws1 { stop-color: oklch(0.72 0.10 72 / .03); } .pd-s-ws2 { stop-color: oklch(0.78 0.11 72 / 0); }
.pd-cast { fill: oklch(0.05 0.01 40 / .45); transform: translate(4px, 7px); }
.pd-cap { fill: var(--pd-wood); }
.pd-frame, .pd-mull { fill: var(--pd-wood); }
.pd-frame-hi, .pd-mull-hi { fill: none; stroke: var(--pd-wood-hi); stroke-width: 1.5; }
.pd-rebate { fill: oklch(0.14 0.02 48); }
.pd-glass-bg { fill: oklch(0.15 0.02 52); }
.pd-room-shelf, .pd-room-desk { fill: none; stroke: oklch(0.30 0.045 55); stroke-width: 4; stroke-linecap: round; }
.pd-room-book { fill: oklch(0.36 0.05 58); }
.pd-room-frame { fill: oklch(0.56 0.08 66 / .5); stroke: oklch(0.32 0.04 56); stroke-width: 3; }
.pd-room-lamp path { fill: oklch(0.22 0.025 52); stroke: oklch(0.22 0.025 52); stroke-width: 3; stroke-linejoin: round; }
.pd-room-bulb { fill: oklch(0.74 0.07 84); }
.pd-refl { opacity: .8; }
.pd-linen-fold { fill: none; stroke: oklch(0.34 0.035 60 / .55); stroke-width: 1.4; stroke-linecap: round; }
.pd-tie { fill: oklch(0.40 0.05 58); }
.pd-spec { fill: none; stroke: oklch(1 0 0 / .26); stroke-width: 1; }
.pd-sill { fill: var(--pd-sill); } .pd-sill-hi { fill: none; stroke: var(--pd-wood-hi); stroke-width: 1.4; }
.pd-sill-shadow, .pd-hood-shadow { fill: oklch(0.05 0.01 40 / .45); }
.pd-lamp-plate, .pd-lamp-cap, .pd-lamp-fin, .pd-lamp-base { fill: var(--pd-iron); stroke: oklch(0.36 0.02 70 / .8); stroke-width: 1; }
.pd-lamp-arm { fill: none; stroke: var(--pd-iron); stroke-width: 5; stroke-linecap: round; }
.pd-lamp-glass rect { fill: oklch(0.50 0.08 72 / .94); }
.pd-lamp-bars { fill: none; stroke: var(--pd-iron); stroke-width: 2.6; stroke-linecap: square; }
.pd-hood, .pd-bracket, .pd-trim, .pd-transom, .pd-fan-bars { fill: var(--pd-trim); }
.pd-fan-bars { fill: none; stroke: var(--pd-trim); stroke-width: 5; }
.pd-hood-hi, .pd-trim-hi { fill: none; stroke: var(--pd-trim-hi); stroke-width: 1.5; }
.pd-fan-bg { fill: oklch(0.15 0.02 52); }
.pd-leaf-face { fill: var(--pd-paint); }
.pd-leaf-hi { fill: none; stroke: var(--pd-paint-hi); stroke-width: 2; }
.pd-leaf-lo { fill: none; stroke: var(--pd-paint-lo); stroke-width: 2; }
.pd-panel-recess { fill: var(--pd-paint-in); }
.pd-panel-field { fill: var(--pd-paint-field); }
.pd-panel-hi { fill: none; stroke: var(--pd-paint-lo); stroke-width: 2; }
.pd-panel-lo { fill: none; stroke: var(--pd-paint-hi); stroke-width: 1.4; }
.pd-panel-field + .pd-panel-hi { stroke: var(--pd-paint-hi); }
.pd-plate-face, .pd-lb-face, .pd-rose, .pd-knob { fill: var(--pd-brass); stroke: var(--pd-brass-lo); stroke-width: 1.2; }
.pd-plate-hi, .pd-lb-hi { fill: none; stroke: var(--pd-brass-hi); stroke-width: 1.2; }
.pd-screw { fill: var(--pd-brass-lo); }
.pd-plate-t { font-size: 17px; font-weight: 600; letter-spacing: .1em; fill: oklch(0.34 0.05 68); }
.pd-plate-lo { font-size: 17px; font-weight: 600; letter-spacing: .1em; fill: oklch(0.90 0.06 88 / .55); }
.pd-lb-slot { fill: oklch(0.10 0.02 60); }
.pd-lb-flap { fill: oklch(0.60 0.085 78); }
.pd-knob-hi { fill: oklch(0.96 0.05 92 / .9); }
.pd-letter-paper { fill: var(--pd-paper); stroke: oklch(0.55 0.03 75); stroke-width: 1; }
.pd-letter-fold { fill: none; stroke: oklch(0.58 0.03 75); stroke-width: 1.1; }
.pd-letter-stamp { fill: none; stroke: oklch(0.40 0.03 70); stroke-width: 1.2; }
.pd-step-top { fill: var(--pd-stone); } .pd-step-front { fill: var(--pd-stone-face); }
.pd-step-hi { fill: none; stroke: var(--pd-stone-hi); stroke-width: 1.2; }
.pd-leaf-shade { fill: oklch(0.05 0.02 255); opacity: 0; }
.pd-reveal { fill: oklch(0.11 0.015 60); }
.pd-pot-rim { fill: oklch(0.44 0.075 46); }
.pd-leaf-g { fill: oklch(0.38 0.055 145); }
.pd-leaf-b { fill: oklch(0.31 0.045 150); }

/* ---- the states (on .fd-scene): the room lit or waiting, the door shut or open a notch, a letter in the box ---- */
.pd-win-in { transition: opacity .5s linear; }
.fd-scene[data-fd-room="dark"] .pd-win-in { opacity: 0; }
.fd-scene[data-fd-room="dark"] .pd-refl { opacity: 1; }
.fd-scene[data-fd-room="dark"] .pd-s-lin0 { stop-color: oklch(0.30 0.025 66); }
.fd-scene[data-fd-room="dark"] .pd-s-lin1 { stop-color: oklch(0.36 0.028 70); }
.fd-scene[data-fd-room="dark"] .pd-s-lin2 { stop-color: oklch(0.27 0.022 64); }
.fd-scene[data-fd-room="dark"] .pd-fan { opacity: .16; }
.fd-scene[data-fd-room="dark"] .pd-winspill { opacity: 0; }
.pd-fan, .pd-winspill { transition: opacity .5s linear; }
/* the door opens ONE notch on its hinge: the SETTLE before the fade into Today (≤ 400 ms, once, never a loop) */
.pd-leaf { transform-box: fill-box; transform-origin: 0 50%; transition: transform .38s cubic-bezier(.3,.6,.2,1); }
.pd-leaf-shade { transition: opacity .38s linear; }
.pd-spill { opacity: 0; transition: opacity .38s linear; }
.fd-scene[data-fd-door="ajar"] .pd-leaf { transform: scaleX(.84); }
.fd-scene[data-fd-door="ajar"] .pd-leaf-shade { opacity: .28; }
.fd-scene[data-fd-door="ajar"] .pd-spill { opacity: 1; }
.pd-gap { opacity: 1; }
/* a letter rests in the letterbox */
.pd-letter { opacity: 0; transform: translateY(8px); transition: opacity .4s linear, transform .4s cubic-bezier(.3,.6,.2,1); }
.fd-scene[data-fd-letter="on"] .pd-letter { opacity: 1; transform: none; }
/* by day the lamp's glass is still lit, but the room shows less from outside */
html[data-fd-sky="day"] .fd-scene:not([data-fd-room="dark"]) .pd-win-in { opacity: .82; }

/* ---- LIGHT MODE: the same house by day — white paint with ink edges, flat colour, crisp shadows, no glow ---- */
html:not(.dark) .pd { --pd-trim: oklch(0.995 0.002 85); --pd-trim-hi: oklch(1 0 0); --pd-wood: oklch(0.996 0.002 85); --pd-wood-hi: oklch(1 0 0); --pd-sill: oklch(0.99 0.003 85);
  --pd-paint: oklch(0.47 0.085 255); --pd-paint-in: oklch(0.42 0.08 255); --pd-paint-field: oklch(0.49 0.085 255); --pd-paint-hi: oklch(0.66 0.06 255 / .8); --pd-paint-lo: oklch(0.24 0.05 255);
  --pd-brass: oklch(0.80 0.10 84); --pd-brass-hi: oklch(0.96 0.05 92); --pd-brass-lo: color-mix(in srgb, var(--ink) 70%, oklch(0.5 0.08 72));
  --pd-iron: oklch(0.24 0.012 60); --pd-stone: oklch(0.93 0.005 80); --pd-stone-face: oklch(0.87 0.006 78); --pd-stone-hi: oklch(1 0 0); }
html:not(.dark) :is(.pd-frame, .pd-mull, .pd-cap, .pd-sill, .pd-hood, .pd-bracket, .pd-trim, .pd-transom, .pd-leaf-face, .pd-step-top, .pd-step-front, .pd-rebate) {
  stroke: color-mix(in srgb, var(--ink) 60%, transparent); stroke-width: 1; }
html:not(.dark) .pd-cast { fill: color-mix(in srgb, var(--ink) 10%, transparent); transform: translate(4px, 5px); }
html:not(.dark) .pd-rebate { fill: color-mix(in srgb, var(--ink) 70%, transparent); }
html:not(.dark) .pd-glass-bg { fill: oklch(0.86 0.03 236); }
html:not(.dark) .pd-s-refl1 { stop-color: oklch(1 0 0 / .55); }
html:not(.dark) .pd-spec { stroke: oklch(1 0 0 / .95); }
html:not(.dark) .pd-fan-bars { stroke: var(--pd-trim); }
html:not(.dark) .pd-fan-bg { fill: oklch(0.86 0.03 236); }
html:not(.dark) .pd-s-fan0 { stop-color: oklch(0.93 0.07 84 / .9); } html:not(.dark) .pd-s-fan1 { stop-color: oklch(0.86 0.06 80 / .8); }
html:not(.dark) .pd-lamp-glass rect { fill: oklch(0.96 0.05 88); }
html:not(.dark) .pd-s-bulb0 { stop-color: oklch(0.99 0.03 92); } html:not(.dark) .pd-s-bulb1 { stop-color: oklch(0.94 0.08 85 / .5); }
html:not(.dark) .pd-room-bulb { fill: oklch(0.96 0.06 88); }
html:not(.dark) :is(.pd-lamp-plate, .pd-lamp-cap, .pd-lamp-fin, .pd-lamp-base) { stroke: var(--ink); }
html:not(.dark) .pd-s-lin0 { stop-color: oklch(0.93 0.012 78); } html:not(.dark) .pd-s-lin1 { stop-color: oklch(0.97 0.01 80); } html:not(.dark) .pd-s-lin2 { stop-color: oklch(0.90 0.014 76); }
html:not(.dark) .pd-linen { stroke: color-mix(in srgb, var(--ink) 50%, transparent); stroke-width: 1; }
html:not(.dark) .pd-linen-fold { stroke: color-mix(in srgb, var(--ink) 22%, transparent); }
html:not(.dark) .pd-tie { fill: oklch(0.82 0.03 75); stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1; }
/* by day, from outside, her room is seen dimly through clear glass; in the evening and at night it is lit (flat, no glow) */
html:not(.dark) .pd-win-in { opacity: .34; }
html:not(.dark)[data-fd-sky="evening"] .fd-scene:not([data-fd-room="dark"]) .pd-win-in,
html:not(.dark)[data-fd-sky="night"] .fd-scene:not([data-fd-room="dark"]) .pd-win-in { opacity: 1; }
html:not(.dark) .fd-scene[data-fd-room="dark"] .pd-win-in { opacity: 0; }
html:not(.dark) .pd-s-room0 { stop-color: oklch(0.93 0.07 84); } html:not(.dark) .pd-s-room1 { stop-color: oklch(0.80 0.05 76); } html:not(.dark) .pd-s-room2 { stop-color: oklch(0.62 0.03 70); }
html:not(.dark) :is(.pd-room-shelf, .pd-room-desk) { stroke: oklch(0.45 0.03 60); }
html:not(.dark) .pd-room-lamp path { fill: oklch(0.32 0.02 55); stroke: oklch(0.32 0.02 55); }
html:not(.dark) .pd-s-gap0 { stop-color: oklch(0.97 0.05 88); } html:not(.dark) .pd-s-gap1 { stop-color: oklch(0.90 0.06 82); }
html:not(.dark) .pd-s-spill0 { stop-color: oklch(0.86 0.09 82 / .12); } html:not(.dark) .pd-s-spill1 { stop-color: oklch(0.86 0.09 82 / 0); }
html:not(.dark) .pd-plate-t { fill: oklch(0.30 0.05 66); }
html:not(.dark) .pd-letter-paper { fill: oklch(1 0 0); stroke: var(--ink); }
html:not(.dark) .pd-leaf-shade { fill: var(--ink); }
html:not(.dark) .fd-scene[data-fd-door="ajar"] .pd-leaf-shade { opacity: .12; }
html:not(.dark) :is(.pd-pot, .pd-pot-rim, .pd-leaf-g) { stroke: color-mix(in srgb, var(--ink) 62%, transparent); stroke-width: 1; }
html:not(.dark) .pd-leaf-g { fill: oklch(0.62 0.07 145); } html:not(.dark) .pd-leaf-b { fill: oklch(0.54 0.06 150); }
html:not(.dark) .pd-s-pot0 { stop-color: oklch(0.66 0.08 48); } html:not(.dark) .pd-s-pot1 { stop-color: oklch(0.72 0.08 50); } html:not(.dark) .pd-s-pot2 { stop-color: oklch(0.60 0.075 46); } html:not(.dark) .pd-pot-rim { fill: oklch(0.70 0.08 48); }
html:not(.dark) .pd-reveal { fill: color-mix(in srgb, var(--ink) 75%, transparent); }

/* ---- the work: the card stands in the porch light, at hand height ---- */
.fd-work { position: relative; z-index: 2; box-sizing: border-box; width: calc(var(--fd-card-x) + var(--fd-card-w));
  padding: calc(var(--fd-eave) + 18px) 0 calc(var(--fd-deck) + 36px) var(--fd-card-x); }
.fd .fk-card.fd-card { width: var(--fd-card-w); max-width: 100%; box-sizing: border-box; padding: 28px 30px 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fk-ink) 7%, transparent), color-mix(in srgb, var(--fk-ink) 2.5%, transparent)), var(--fd-card-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fk-ink) 14%, transparent), inset -1px 0 0 var(--fd-card-edge), inset 1px 1px 0 color-mix(in srgb, var(--fk-ink) 12%, transparent), 0 24px 48px -26px oklch(0.03 0.01 40 / .95), 0 2px 6px -2px oklch(0.03 0.01 40 / .6); }
html:not(.dark) .fd .fk-card.fd-card { background: var(--fd-card-bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 34%, transparent), 4px 5px 0 color-mix(in srgb, var(--ink) 8%, transparent); }
.fd .fd-card :is(h1, h2).fk-title { margin: 0; font: 760 30px/1.15 var(--fk-font); letter-spacing: -.02em; color: var(--fk-ink); }
.fd .fd-card .fk-sub { margin: 6px 0 0; font: 450 16px/1.45 var(--fk-font); color: var(--fk-body); }
.fd .fd-card .fd-head { display: grid; gap: 0; }
.fd .fd-card .fd-foot { margin: 0; font: 500 15px/1.5 var(--fk-font); color: var(--fk-body); text-align: center; }
.fd .fd-card .fd-foot a, .fd .fd-card .fd-link { color: var(--fk-ink); font-weight: 680; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--fk-ink) 45%, transparent); border-radius: 6px; }
.fd .fd-card .fd-foot a:hover, .fd .fd-card .fd-link:hover { text-decoration-color: var(--fk-now); }
.fd .fd-card .fd-foot a:focus-visible, .fd .fd-card .fd-link:focus-visible { outline: 3px solid var(--sp-focus); outline-offset: 2px; }
.fd .fd-card button.fd-link { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 680; cursor: pointer; min-height: 32px; }
.fd .fd-card .fk-or { margin: 2px 0; }
.fd .fd-card .fd-rule { height: 1px; margin: 4px 0; background: color-mix(in srgb, var(--fk-ink) 12%, transparent); border: 0; }
.fd .fd-card .fd-small { margin: 0; font: 500 13.5px/1.5 var(--fk-font); color: var(--fk-muted); }
.fd .fd-card .fd-small svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fd .fd-card .fd-mono { font: 650 15px/1.4 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--fk-ink); word-break: break-all; }
.fd .fd-face[hidden] { display: none !important; }
.fd .fd-face { display: grid; gap: 16px; }
.fd .fd-face > form { display: grid; gap: 16px; margin: 0; }
/* a short note in the card, in words (ink = information, rose = it costs her; the kit's .fk-note) */
.fd .fd-card .fk-note { margin: 0; }
/* the success beat on the primary: an ink tick in the button, never green */
.fd .fk-btn .fd-ok { display: inline-flex; align-items: center; gap: 8px; }
.fd .fk-btn .fd-ok svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* the security check (the live widget): drawn as a plain well; the walk names no vendor and sends nothing */
.fd .fd-check { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border-radius: 12px; box-sizing: border-box;
  box-shadow: inset 0 0 0 1px var(--fk-edge); background: var(--fk-field); font: 550 14px/1.3 var(--fk-font); color: var(--fk-body); }
.fd .fd-check i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; aspect-ratio: 1; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--fk-ink); }
.fd .fd-check i svg { width: 14px; height: 14px; fill: none; stroke: var(--fk-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fd .fd-check[data-state="waiting"] i { border-style: dotted; border-color: var(--fk-muted); }
.fd .fd-check[data-state="waiting"] i svg { display: none; }
.fd .fd-check small { margin-left: auto; font: 500 12.5px/1.2 var(--fk-font); color: var(--fk-muted); }
/* the review states that tell the founder what the live page does there (never product UI) */
.fd .fd-walknote { margin: 0; padding: 10px 12px; border-radius: 10px; font: 500 13px/1.45 var(--fk-font); color: var(--fk-muted); border: 1px dashed color-mix(in srgb, var(--fk-ink) 26%, transparent); }

/* ---- widths ---- */
@media (max-width: 1180px) { .fd { --fd-card-w: 412px; --fd-slot: 460px; --fd-card-x: clamp(24px, 4vw, 48px); --fd-house-x: calc(var(--fd-card-x) + var(--fd-slot) + 36px); } }
/* phones and narrow tablets: the card comes first; the picture becomes a short band above it (the lit window and the
   door's upper half: its fanlight, hood and lamp). The band is the same drawing, cropped. */
@media (max-width: 860px) {
  .fd { --fd-eave: 40px; --fd-band: 168px; --fd-card-w: 100%; min-height: 0; }
  .fd-scene { position: relative; inset: auto; height: var(--fd-band); margin-top: var(--spn-th-h, 92px); background-position: 0 var(--fd-eave), 0 0; }
  .fd-deck, .fd-pool { display: none !important; }
  .fd-house { --s: var(--fd-band-s, .52); left: 50%; translate: calc(-50% + var(--fd-band-dx, 0px)) 0; bottom: auto; top: calc(var(--fd-eave) - var(--fd-band-y, 112px) * var(--s)); height: calc(700px * var(--s)); width: calc(720px * var(--s)); }
  .fd-eave { box-shadow: 0 6px 10px -4px oklch(0.05 0.01 40 / .6); }
  .fd-work { width: auto; padding: 0 var(--sp-gutter, 16px) 40px; margin-top: -14px; }
  .fd .fk-card.fd-card { width: 100%; padding: 22px 18px 20px; }
  .fd .fd-card :is(h1, h2).fk-title { font-size: 25px; }
  .fd .fd-card .fk-sub { font-size: 15px; }
  .fd .fd-face, .fd .fd-face > form { gap: 14px; }
  /* her engraved name stays readable in the phone band (the band draws the house at about half size: 23 × .52 ≈ 12 px) */
  .pd-plate-t, .pd-plate-lo { font-size: 23px; letter-spacing: .06em; }
}
@media (max-width: 860px) and (min-width: 600px) { .fd-work { max-width: 520px; margin-left: auto; margin-right: auto; } }
@media (prefers-reduced-motion: reduce) { .pd-leaf, .pd-leaf-shade, .pd-spill, .pd-letter, .pd-win-in, .pd-fan, .pd-winspill { transition-duration: 0s !important; } }
html[data-spn-paused="true"] :is(.pd-leaf, .pd-leaf-shade, .pd-spill, .pd-letter, .pd-win-in, .pd-fan, .pd-winspill),
.spine-page[data-paused="true"] :is(.pd-leaf, .pd-leaf-shade, .pd-spill, .pd-letter, .pd-win-in, .pd-fan, .pd-winspill) { transition-duration: 0s !important; }
/* the phone action bar (kit 2.6 §3b): each face's one action is wrapped in .sp-actbar; on a phone the kit pins the first
   live one to the bottom edge (a door page has no dock), on a desktop it stays in the card exactly as before */
.fd .fd-actbar { display: grid; }

/* ==== login/_src/login.css ==== */
/* APTAVIA 2.0 · walk · Sign in — the card's own pieces (the porch is door.css). Tokens and oklch() only. */
.fd .li-pw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fd .li-pw-row .fk-label { margin: 0; }
.fd .fd-card .li-forgot { font: 600 14px/1 var(--fk-font); min-height: 36px; color: var(--fk-ink); }
.fd .li-social { display: grid; gap: 10px; }
.fd .li-totp { display: grid; gap: 8px; padding: 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fk-now) 40%, var(--fk-edge)); background: color-mix(in srgb, var(--fk-now) 6%, transparent); }
.fd .li-totp[hidden] { display: none; }
.fd .li-totp .fk-hint { margin: 0; }
html:not(.dark) .fd .li-totp { background: oklch(1 0 0); }
/* a badge over a face's title: ink in a ring (never a padlock) */
.fd .li-badge { display: grid; place-items: center; width: 48px; height: 48px; aspect-ratio: 1; border-radius: 50%; margin: 0 0 12px; box-sizing: border-box;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fk-ink) 40%, transparent); color: var(--fk-ink); }
.fd .li-badge svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fd .li-center { text-align: center; justify-items: center; }
.fd .li-center .fd-head { justify-items: center; }
.fd .li-center .li-badge { margin: 0; }
.fd .li-p { margin: 0; font: 450 15px/1.55 var(--fk-font); color: var(--fk-body); }
.fd .li-p b { color: var(--fk-ink); }
.fd .li-c { text-align: center; }
.fd .li-resend { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--fk-ink) 12%, transparent); }
.fd .li-resend .fk-quiet { justify-self: start; display: inline-flex; align-items: center; gap: 8px; }
.fd .li-resend .fk-quiet svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* confirmed: an ink tick in a ring, never green */
.fd .li-done { display: grid; justify-items: center; gap: 6px; padding: 14px 0; text-align: center; }
.fd .li-done[hidden] { display: none; }
.fd .li-done-tick { display: grid; place-items: center; width: 52px; height: 52px; aspect-ratio: 1; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--fk-ink); color: var(--fk-ink); }
.fd .li-done-tick svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fd .li-done-big { width: 72px; height: 72px; }
.fd .li-done-big svg { width: 34px; height: 34px; }
.fd .li-done-h { margin: 4px 0 0; font: 720 17px/1.3 var(--fk-font); color: var(--fk-ink); }
.fd .li-stamp { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
/* the strength read: four ink bars and a word (no traffic-light colours) */
.fd .li-meter { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.fd .li-meter[hidden] { display: none; }
.fd .li-bars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.fd .li-bars i { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--fk-ink) 14%, transparent); }
.fd .li-meter[data-score="1"] .li-bars i:nth-child(-n+1), .fd .li-meter[data-score="2"] .li-bars i:nth-child(-n+2),
.fd .li-meter[data-score="3"] .li-bars i:nth-child(-n+3), .fd .li-meter[data-score="4"] .li-bars i:nth-child(-n+4) { background: var(--fk-ink); }
.fd .li-meter b { min-width: 52px; text-align: right; font: 700 13px/1 var(--fk-font); color: var(--fk-ink); }
.fd .li-match { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font: 600 13px/1.3 var(--fk-font); color: var(--fk-muted); }
.fd .li-match[hidden] { display: none; }
.fd .li-match[data-ok="true"] { color: var(--fk-ink); }
.fd .li-match svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fd .li-reqs { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--fk-edge); background: var(--fk-field); }
.fd .li-reqs li { display: flex; align-items: center; gap: 10px; font: 500 14px/1.3 var(--fk-font); color: var(--fk-muted); }
.fd .li-reqs li i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; aspect-ratio: 1; border-radius: 50%; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--fk-ink) 30%, transparent); }
.fd .li-reqs li i svg { width: 11px; height: 11px; fill: none; stroke: var(--fk-page, oklch(1 0 0)); stroke-width: 3; opacity: 0; }
.fd .li-reqs li[data-ok="true"] { color: var(--fk-ink); }
.fd .li-reqs li[data-ok="true"] i { background: var(--fk-ink); border-color: var(--fk-ink); }
.fd .li-reqs li[data-ok="true"] i svg { opacity: 1; }
/* the review bar's own controls (never product UI) */
.fd-tb { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--font-ui, var(--sp-font)); }
.fd-tb select { font: 600 12px/1 var(--font-ui, var(--sp-font)); min-height: 30px; border-radius: 8px; padding: 0 6px; max-width: 260px; }
/* round-6: with the two-factor field showing (a wrong password), the card tightens so Sign in stays on the first screen */
.fd .li-form:has(.li-totp:not([hidden])) { gap: 10px; }
.fd .li-form:has(.li-totp:not([hidden])) > .fk-note { padding: 9px 12px; font-size: 14px; line-height: 1.42; }
.fd .li-totp { gap: 6px; padding: 10px 12px; }
.fd .li-totp .fk-hint { font-size: 13px; line-height: 1.38; }
.fd .li-totp .fk-label { margin-bottom: 0; }

/* ==== forgot-password/_src/helper.css ==== */
/* APTAVIA 2.0 · walk · round 9 · the front-door helpers' own pieces (the porch is login/_src/door.css). Tokens and oklch() only. */
.fd .hp-badge-row { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.fd .fd-mono { margin: 4px 0 0; font: 560 15px/1.4 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--fk-ink); overflow-wrap: anywhere; }
.fd .hp-mail { margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; background: var(--fk-field); box-shadow: inset 0 0 0 1px var(--fk-edge); }
.fd .hp-mail .fk-label { margin: 0 0 2px; }
.fd .hp-mail .fd-mono { margin: 0; }
.fd .hp-stack { display: grid; gap: 12px; }
.fd .hp-actions { display: grid; gap: 10px; }
.fd .hp-actions .fk-quiet { justify-self: center; }
/* the porch lamp goes out with the connection (Offline): the pool, the halo and the bulb fade; the room is dark too */
.fd-scene .pd-lamp-bulb, .fd-scene .pd-halo, .fd-scene .fd-pool { transition: opacity .6s ease; }
.fd-scene[data-fd-lamp="off"] .fd-pool, .fd-scene[data-fd-lamp="off"] .pd-halo { opacity: 0 !important; }
.fd-scene[data-fd-lamp="off"] .pd-lamp-bulb { opacity: .08; }
@media (prefers-reduced-motion: reduce) { .fd-scene .pd-lamp-bulb, .fd-scene .pd-halo, .fd-scene .fd-pool { transition: none; } }


/* ---------------------------------------------------------------- the beat engine (run 1; PORT-CONTRACT §4): r1-kit.js's arrival as CSS.
   The server writes data-r1-beat="<kind>" and --r1-at; fill mode BACKWARDS holds the first frame until --r1-at and lets go at the end (every keyframe set is a from-only set, so the
   end is the element's own style). Never both or forwards: a finished-but-held transform animation makes its element the containing block
   of every position:fixed descendant, and the phone action bar (a fixed bar inside a beat) then sits mid-page instead of on the screen's edge. Played on a cold load
   only (a page entered by a move rests; the spine's sheet lands its data-spn-land words). Nothing loops. */
:where(.fd [data-r1-beat]) { --r1-dur: .7s; --r1-curve: var(--ease, cubic-bezier(.22, 1, .36, 1)); }
:where(.fd [data-r1-beat="fade"]) { --r1-dur: .5s; --r1-curve: linear; }
:where(.fd [data-r1-beat="draw"]) { --r1-dur: 1.3s; --r1-curve: var(--ease-draw, cubic-bezier(.65, 0, .35, 1)); }
:where(.fd [data-r1-beat="grow"]) { --r1-dur: 1.2s; --r1-curve: var(--ease-draw, cubic-bezier(.65, 0, .35, 1)); transform-origin: var(--r1-origin, 0 50%); }
:where(.fd [data-r1-beat="grow-y"]) { --r1-dur: .6s; transform-origin: var(--r1-origin, 50% 100%); }
:where(.fd [data-r1-beat="pop"]) { --r1-dur: .5s; transform-origin: var(--r1-origin, 50% 50%); }
:where(.fd svg [data-r1-beat]) { transform-box: fill-box; }
@keyframes r1k-rise   { from { opacity: 0; transform: translateY(14px); } }
@keyframes r1k-fade   { from { opacity: 0; } }
@keyframes r1k-grow   { from { transform: scaleX(0); } }
@keyframes r1k-grow-y { from { transform: scaleY(0); } }
@keyframes r1k-pop    { from { opacity: 0; transform: scale(.6); } }
@keyframes r1k-draw   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.spn-continued):not([data-spn-paused="true"]) .fd [data-r1-beat] { animation-duration: var(--r1-dur); animation-timing-function: var(--r1-curve); animation-delay: var(--r1-at, 0ms); animation-fill-mode: backwards; animation-iteration-count: 1; }
  html:not(.spn-continued):not([data-spn-paused="true"]) .fd [data-r1-beat="rise"]   { animation-name: r1k-rise; }
  html:not(.spn-continued):not([data-spn-paused="true"]) .fd [data-r1-beat="fade"]   { animation-name: r1k-fade; }
  html:not(.spn-continued):not([data-spn-paused="true"]) .fd [data-r1-beat="grow"]   { animation-name: r1k-grow; }
  html:not(.spn-continued):not([data-spn-paused="true"]) .fd [data-r1-beat="grow-y"] { animation-name: r1k-grow-y; }
  html:not(.spn-continued):not([data-spn-paused="true"]) .fd [data-r1-beat="pop"]    { animation-name: r1k-pop; }
  html:not(.spn-continued):not([data-spn-paused="true"]) .fd [data-r1-beat="draw"]   { animation-name: r1k-draw; stroke-dasharray: 1 1; }
}