@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400&family=Maven+Pro:wght@500;600;700&family=Permanent+Marker&family=VT323&display=swap');

:root {
  --design-width: 1920;
  --page-scale: calc(100vw / var(--design-width));
  --paper-ground: #44102A;
  --panel-plum: #53142F;
  --deep-plum: #2B1020;
  --cream-ink: #FFF2DD;
  --muted-ink: #D7BFC8;
  --lcd-mint: #42E7D0;
  --mark-mint: #3DDC97;
  --mark-lilac: #C3A6FF;
  --danger: #FF6878;
  --rule-hairline: max(1px, calc(1.1 * var(--page-scale)));
  --rule-standard: max(1px, calc(2.3 * var(--page-scale)));
  --rule-heavy: max(1px, calc(4.2 * var(--page-scale)));
  --rule-cream: #E3D0C2;
  --rule-muted: #9E7486;
  --rule-accent: #6DD5B2;
  --frame-left: calc(21 * var(--page-scale));
  --frame-right: calc(20 * var(--page-scale));
  --radius-shell: calc(12 * var(--page-scale));
  --ease-tape: cubic-bezier(.2, 0, 0, 1);
  --duration-fast: 150ms;
  --duration-route: 220ms;
  --duration-meter: 320ms;
  --dock-h: calc(76 * var(--page-scale));
  --dock-gap: calc(16 * var(--page-scale));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper-ground); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--paper-ground); color: var(--cream-ink); font: 500 calc(16 * var(--page-scale))/1.5 "Maven Pro", sans-serif; }
:where(button, input, select, textarea) { border: 0; font: inherit; color: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: max(2px, calc(2 * var(--page-scale))) solid var(--lcd-mint); outline-offset: max(2px, calc(3 * var(--page-scale))); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }





/* LUAT 62 chrome: N7 brand strip + transport dock (sticky to the viewport floor, rests after the footer) · F6 LCD marquee footer */
[data-chrome="nav"] { position: relative; z-index: 20; height: calc(64 * var(--page-scale)); min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--page-scale)); padding: 0 var(--frame-right) 0 var(--frame-left); background: var(--paper-ground); color: var(--cream-ink); font: 600 max(12px, calc(15 * var(--page-scale)))/1 "Maven Pro", sans-serif; }
[data-chrome="nav"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(6 * var(--page-scale)); background: linear-gradient(to bottom, var(--mark-mint) 0 33%, transparent 33% 66%, var(--mark-lilac) 66% 100%); }
[data-chrome="nav"] .brand { display: flex; align-items: center; gap: calc(12 * var(--page-scale)); font: calc(32 * var(--page-scale))/1 "Permanent Marker", cursive; color: var(--cream-ink); text-decoration: none; min-height: 48px; }
[data-chrome="nav"] .brand img { width: auto; height: calc(48 * var(--page-scale)); min-height: 40px; object-fit: contain; }
[data-chrome="nav"] .social-links { display: flex; align-items: center; gap: calc(10 * var(--page-scale)); }
.social-key { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 40px; padding: 0 calc(18 * var(--page-scale)); border-radius: calc(6 * var(--page-scale)); background: var(--panel-plum); color: var(--cream-ink); font: 500 max(12px, calc(14 * var(--page-scale)))/1 "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.social-key:not([aria-disabled="true"]):hover { background: var(--cream-ink); color: var(--deep-plum); }
[data-chrome] a[aria-disabled="true"] { opacity: .6; cursor: default; }

.rule-dock { border: var(--rule-standard) solid #CAA9AF; border-radius: calc(16 * var(--page-scale)); }
.dock { position: sticky; z-index: 30; bottom: var(--dock-gap); width: max-content; margin: calc(4 * var(--page-scale)) auto var(--dock-gap); height: var(--dock-h); display: flex; align-items: stretch; gap: calc(8 * var(--page-scale)); padding: calc(8 * var(--page-scale)); background: var(--deep-plum); }
.dock-keys { display: flex; gap: calc(6 * var(--page-scale)); }
.dock-keys a { position: relative; width: calc(124 * var(--page-scale)); display: flex; flex-direction: column; justify-content: center; gap: calc(4 * var(--page-scale)); padding: 0 calc(14 * var(--page-scale)); border-radius: calc(8 * var(--page-scale)); background: var(--panel-plum); color: var(--cream-ink); text-decoration: none; cursor: pointer; transition: transform var(--duration-fast) var(--ease-tape), background-color var(--duration-fast) var(--ease-tape); }
.dock-keys a::after { content: ""; position: absolute; top: calc(10 * var(--page-scale)); right: calc(12 * var(--page-scale)); width: calc(8 * var(--page-scale)); height: calc(8 * var(--page-scale)); min-width: 6px; min-height: 6px; border-radius: 50%; background: #6B2A47; }
.dock-keys a:hover { transform: translateY(calc(-2 * var(--page-scale))); }
.dock-keys a.is-active { background: var(--cream-ink); color: var(--deep-plum); transform: translateY(calc(2 * var(--page-scale))); }
.dock-keys a.is-active::after { background: var(--lcd-mint); }
.key-no { font: calc(22 * var(--page-scale))/1 "VT323", monospace; opacity: .72; }
.key-name { font: 600 max(12px, calc(16 * var(--page-scale)))/1 "Maven Pro", sans-serif; }
.dock-skip { width: calc(56 * var(--page-scale)); display: grid; place-items: center; border-radius: calc(8 * var(--page-scale)); background: var(--panel-plum); color: var(--muted-ink); cursor: pointer; }
.dock-skip svg { width: calc(22 * var(--page-scale)); min-width: 14px; fill: currentColor; }
.dock-skip:hover { color: var(--lcd-mint); }
.dock-counter { width: calc(150 * var(--page-scale)); display: flex; flex-direction: column; justify-content: center; padding: 0 calc(14 * var(--page-scale)); border-radius: calc(8 * var(--page-scale)); background: #1B0913; color: var(--lcd-mint); }
.counter-trk { font: calc(28 * var(--page-scale))/1 "VT323", monospace; }
.counter-name { font: 400 max(12px, calc(12 * var(--page-scale)))/1.2 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-ink); }

[data-chrome="footer"] { display: grid; gap: calc(14 * var(--page-scale)); padding: calc(28 * var(--page-scale)) var(--frame-right) calc(10 * var(--page-scale)) var(--frame-left); background: var(--paper-ground); color: var(--cream-ink); font: 500 max(12px, calc(13 * var(--page-scale)))/1.3 "DM Mono", monospace; }
.tape-lcd { display: flex; align-items: center; gap: calc(16 * var(--page-scale)); height: calc(68 * var(--page-scale)); min-height: 52px; padding: 0 calc(20 * var(--page-scale)); background: var(--deep-plum); overflow: hidden; }
.tape-lcd-mark { width: auto; height: calc(40 * var(--page-scale)); min-height: 36px; flex: 0 0 auto; }
.tape-lcd-side { flex: 0 0 auto; padding: calc(6 * var(--page-scale)) calc(10 * var(--page-scale)); border-radius: calc(4 * var(--page-scale)); background: var(--lcd-mint); color: var(--deep-plum); font: 500 max(12px, calc(13 * var(--page-scale)))/1 "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.tape-lcd-window { flex: 1; min-width: 0; overflow: hidden; }
.tape-lcd-track { display: flex; width: max-content; margin: 0; color: var(--lcd-mint); font: calc(30 * var(--page-scale))/1 "VT323", monospace; white-space: nowrap; }
.tape-lcd-track > span { padding-right: calc(48 * var(--page-scale)); }
.tape-lcd-track.is-running { animation: lcd-scroll 42s linear infinite; }
@keyframes lcd-scroll { to { transform: translateX(-50%); } }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--page-scale)); min-height: 48px; }
.foot-tracks, .foot-links { display: flex; align-items: center; gap: calc(22 * var(--page-scale)); }
.foot-row a { display: inline-flex; align-items: center; min-height: 40px; color: var(--muted-ink); text-decoration: none; letter-spacing: .04em; cursor: pointer; }
.foot-row a:not([aria-disabled="true"]):hover, .foot-tracks a.is-active { color: var(--lcd-mint); }
.foot-ca { color: var(--muted-ink); }
.foot-ca button { min-width: 48px; min-height: 40px; margin-left: calc(8 * var(--page-scale)); padding: 0 calc(8 * var(--page-scale)); background: transparent; color: var(--cream-ink); text-decoration: underline; cursor: pointer; }
.foot-ca button:disabled { opacity: .6; cursor: default; }

.page-frame { width: auto; min-height: calc(100vh - max(56px, calc(64 * var(--page-scale)))); margin: 0 var(--frame-right) 0 var(--frame-left); background: var(--paper-ground); opacity: 1; transform: translateX(0); transition: opacity var(--duration-route) var(--ease-tape), transform var(--duration-route) var(--ease-tape); }
.page-frame.is-leaving { opacity: .16; transform: translateX(calc(-8 * var(--page-scale))); }
.page-frame.is-cued { animation: tape-cue var(--duration-route) var(--ease-tape) both; }


/* Shared measured border vocabulary. Route fragments only consume these classes. */
.rule-panel { border: var(--rule-standard) solid #CAA9AF; border-radius: var(--radius-shell); }
.rule-card { border: var(--rule-standard) solid #D5B4B8; border-radius: var(--radius-shell); }
.rule-input { border: var(--rule-standard) solid #EFD8DC; border-radius: calc(6 * var(--page-scale)); padding: calc(12 * var(--page-scale)); }
.rule-row { border-bottom: var(--rule-hairline) solid #9E7486; }
tr.rule-row > td, tr.rule-row > th { border-bottom: var(--rule-hairline) solid #9E7486; }
.rule-tab-strip { border-bottom: var(--rule-standard) solid #E3D0C2; }
.rule-chip { border: var(--rule-standard) solid #D4B2B9; border-radius: calc(6 * var(--page-scale)); }
.rule-control { border: var(--rule-standard) solid #F1D9DC; border-radius: calc(6 * var(--page-scale)); }
.rule-table { border: var(--rule-standard) double #CDABBB; border-radius: var(--radius-shell); }
.rule-jcard { border: var(--rule-standard) solid #E1CAD6; border-radius: var(--radius-shell); }
.rule-readout { border: var(--rule-heavy) solid #1D030E; border-radius: var(--radius-shell); }
.rule-accent { border: var(--rule-standard) solid var(--rule-accent); border-radius: var(--radius-shell); }
.rule-top { border-top: var(--rule-hairline) solid #9E7486; }
.rule-top-thin { border-top-width: var(--rule-hairline); }
.rule-head { border-bottom: var(--rule-hairline) solid #EADCDE; }
.rule-col-r { border-right: var(--rule-hairline) solid #9E7486; }
.rule-col-l { border-left: var(--rule-hairline) solid #9E7486; }
table.rule-col1 tr > :nth-child(1), table.rule-col2 tr > :nth-child(2) { border-right: var(--rule-hairline) solid #9E7486; }
.rule-control[aria-pressed="true"] { border-color: var(--rule-accent); }

.motion-reveal { opacity: 0; transform: translateX(calc(8 * var(--page-scale))); }
.motion-reveal.is-visible { opacity: 1; transform: translateX(0); transition: opacity var(--duration-route) var(--ease-tape), transform var(--duration-route) var(--ease-tape); }
.motion-meter { transition: transform var(--duration-meter) var(--ease-tape), opacity var(--duration-fast) var(--ease-tape); transform-origin: 50% 100%; }
.motion-tick { animation: tape-tick var(--duration-fast) var(--ease-tape); }
.motion-hover { transition: transform var(--duration-fast) var(--ease-tape), opacity var(--duration-fast) var(--ease-tape); }
.motion-hover:hover { transform: translateX(calc(2 * var(--page-scale))); opacity: .88; }
.media-loop { display: block; width: 100%; height: auto; }

@keyframes tape-cue { from { opacity: .2; transform: translateX(calc(8 * var(--page-scale))); } to { opacity: 1; transform: translateX(0); } }
@keyframes tape-tick { 50% { transform: translateX(calc(3 * var(--page-scale))); } }

@media (max-width: 1023px) {
  :root { --dock-h: 64px; --dock-gap: 0px; }
  [data-chrome="nav"] { height: 60px; gap: 8px; }
  [data-chrome="nav"] .brand { font-size: 22px; gap: 8px; }
  [data-chrome="nav"] .brand img { height: 40px; }
  .social-key { padding: 0 12px; font-size: 12px; }
  .dock { width: auto; margin: 0; height: auto; min-height: var(--dock-h); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; border-bottom-width: 0; }
  .dock-skip, .dock-counter { display: none; }
  .dock-keys { flex: 1; gap: 4px; }
  .dock-keys a { flex: 1; width: auto; min-width: 0; min-height: 52px; padding: 0; align-items: center; gap: 3px; }
  .dock-keys a::after { top: 6px; right: 6px; }
  .key-no { font-size: 16px; }
  .key-name { font-size: 11px; }
  [data-chrome="footer"] { padding: 20px 16px 12px; font-size: 12px; }
  .tape-lcd { gap: 10px; padding: 0 12px; }
  .tape-lcd-side { display: none; }
  .tape-lcd-track { font-size: 22px; }
  .foot-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .foot-tracks, .foot-links { flex-wrap: wrap; gap: 4px 16px; }
  :root { --page-scale: 1px; --frame-left: 16px; --frame-right: 16px; }
  body { font-size: 16px; }
  .page-frame { min-height: calc(100vh - 60px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .motion-reveal, .page-frame { opacity: 1 !important; transform: none !important; }
  .tape-lcd-track { width: auto; white-space: normal; line-height: 1.1; }
  .tape-lcd-track > span + span { display: none; }
  video.media-loop { display: none; }
}