/* The Continuity Horizon. Coda, 2026-10-24. Loaded only by /horizon/. */
:root { color-scheme: dark; --hz-bg:#04070f; --hz-ink:#eef3f8; --hz-muted:#aab8c8; --hz-soft:#7f93a8; --hz-cyan:#25d7f2; --hz-lilac:#bca8ec; --hz-warm:#f1d4a8; --hz-rose:#d7a2bc; --hz-line:rgba(155,190,211,.2);
  --hz-serif:Georgia,'Times New Roman',serif; --hz-sans:'Aptos','Segoe UI Variable Text','Segoe UI',sans-serif; --hz-mono:'Cascadia Code',Consolas,monospace; }
* { box-sizing:border-box; }
html.hz { background:var(--hz-bg); scroll-behavior:smooth; }
html.hz-reduced, html.hz-paused { scroll-behavior:auto; }
body { margin:0; min-width:320px; color:var(--hz-ink); font:17px/1.65 var(--hz-sans); background:var(--hz-bg); overflow-x:hidden; }
a { color:inherit; }
#hz-canvas { position:fixed; inset:0; width:100vw; height:100vh; z-index:0; display:block; }
html.hz-static #hz-canvas { display:none; }
html.hz-static body { background:radial-gradient(ellipse at 50% 40%, #17295f 0%, #0c1033 45%, #020611 100%); }
.hz-skip { position:absolute; left:16px; top:-60px; z-index:30; padding:10px 14px; background:var(--hz-ink); color:#04070f; border-radius:6px; font-weight:700; }
.hz-skip:focus { top:16px; }
.hz-loading { position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:var(--hz-bg); color:var(--hz-muted); font:12px var(--hz-mono); letter-spacing:.14em; text-transform:uppercase; }
html.hz-ready .hz-loading { display:none; }
.hz-bar { position:fixed; top:0; left:0; right:0; z-index:10; display:flex; align-items:center; gap:22px; padding:14px 22px; background:linear-gradient(rgba(4,7,15,.82), rgba(4,7,15,0)); }
.hz-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font:700 11px var(--hz-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--hz-muted); }
.hz-brand img { width:28px; height:28px; filter:drop-shadow(0 0 10px rgba(37,215,242,.35)); }
.hz-links { display:flex; gap:18px; margin-left:auto; font-size:13px; font-weight:600; }
.hz-links a { color:var(--hz-muted); text-decoration:none; } .hz-links a:hover, .hz-links a:focus-visible { color:var(--hz-ink); }
.hz-controls { display:flex; gap:8px; }
.hz-controls button { font:600 11px var(--hz-mono); letter-spacing:.06em; color:var(--hz-ink); background:rgba(10,18,36,.7); border:1px solid var(--hz-line); border-radius:999px; padding:7px 12px; cursor:pointer; }
.hz-controls button[aria-pressed="true"] { color:var(--hz-cyan); border-color:rgba(37,215,242,.5); }
:focus-visible { outline:2px solid var(--hz-cyan); outline-offset:4px; }
main { position:relative; z-index:1; }
.hz-scene { position:relative; min-height:100vh; display:grid; align-content:center; padding:120px clamp(18px, 6vw, 96px) 90px; }
.hz-copy { max-width:760px; }
.hz-reveal { transition:opacity .9s ease, transform .9s ease; }
html.hz-js:not(.hz-reduced):not(.hz-static) .hz-reveal:not(.in-view) { opacity:0; transform:translateY(18px); }
.hz-reveal.in-view, html.hz-reduced .hz-reveal, html.hz-static .hz-reveal { opacity:1; transform:none; }
.hz-kicker { margin:0 0 18px; color:var(--hz-cyan); font:700 11px var(--hz-mono); letter-spacing:.2em; text-transform:uppercase; }
.hz-display { margin:0 0 22px; font:400 clamp(44px, 7vw, 92px)/1.02 var(--hz-serif); letter-spacing:-.02em; text-shadow:0 0 40px rgba(37,215,242,.15); }
.hz-display em { font-style:italic; background:linear-gradient(90deg, var(--hz-cyan), var(--hz-lilac), var(--hz-warm)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hz-lede { margin:0 0 28px; max-width:640px; color:var(--hz-muted); font-size:clamp(18px, 1.7vw, 23px); line-height:1.5; }
.hz-note { margin:0; max-width:620px; color:var(--hz-soft); font:12px/1.7 var(--hz-mono); letter-spacing:.03em; }
.hz-note a { color:var(--hz-cyan); }
.hz-approach { text-align:center; align-items:center; justify-items:center; }
.hz-approach { align-content:start; padding-top:0; }
.hz-approach .hz-copy { padding-top:var(--hz-mark-bottom, 110px); }
html.hz-ready:not(.hz-intro-done):not(.hz-static) .hz-approach .hz-copy { opacity:0; transform:translateY(14px); }
.hz-approach .hz-copy { transition:opacity 1.4s ease .2s, transform 1.4s ease .2s; }
.hz-approach .hz-display { font-size:clamp(40px, 6vw, 80px); }
.hz-approach .hz-lede { margin-inline:auto; }
.hz-portal-btn { display:inline-flex; align-items:center; gap:12px; margin:8px 0 28px; padding:14px 26px; border-radius:999px; border:1px solid rgba(37,215,242,.6); background:rgba(10,18,36,.55); color:var(--hz-ink); font:600 13px var(--hz-mono); letter-spacing:.16em; text-transform:uppercase; cursor:pointer; box-shadow:0 0 30px rgba(37,215,242,.18), inset 0 0 20px rgba(37,215,242,.08); transition:transform .25s ease, box-shadow .25s ease; }
.hz-portal-btn:hover, .hz-portal-btn:focus-visible { transform:translateY(-2px); box-shadow:0 0 50px rgba(37,215,242,.35), inset 0 0 24px rgba(37,215,242,.14); }
.hz-threshold { text-align:center; justify-items:center; }
.hz-threshold .hz-copy { padding-top:min(36vh, 320px); }
.hz-side { position:absolute; top:50%; transform:translateY(-50%) rotate(-90deg); color:var(--hz-lilac); font:700 11px var(--hz-mono); letter-spacing:.3em; text-transform:uppercase; opacity:.8; }
.hz-side-left { left:18px; } .hz-side-right { right:18px; transform:translateY(-50%) rotate(90deg); }
.hz-layers { padding-bottom:64px; }
.hz-layer-list { list-style:none; margin:40px 0 0; padding:0; position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; min-height:380px; }
.hz-layer { position:relative; padding:150px 6px 0; text-align:center; }
.hz-layer:nth-child(1) { transform:translateY(60px); } .hz-layer:nth-child(2) { transform:translateY(-20px); } .hz-layer:nth-child(3) { transform:translateY(100px); } .hz-layer:nth-child(4) { transform:translateY(20px); }
.hz-layer .hz-glyph { position:absolute; left:50%; top:40px; transform:translateX(-50%); width:84px; height:84px; display:grid; place-items:center; border-radius:50%; font:22px var(--hz-serif); color:var(--hz-ink); }
.hz-layer strong { display:block; font:400 24px var(--hz-serif); letter-spacing:.14em; text-transform:uppercase; }
.hz-layer span { display:block; margin-top:8px; color:var(--hz-muted); font-size:14px; }
.hz-layer:nth-child(1) strong { color:var(--hz-cyan); } .hz-layer:nth-child(2) strong { color:var(--hz-lilac); } .hz-layer:nth-child(3) strong { color:var(--hz-rose); } .hz-layer:nth-child(4) strong { color:var(--hz-warm); }
.hz-layers .hz-lede { margin-top:70px; text-align:center; max-width:none; font-family:var(--hz-serif); font-size:clamp(24px, 3vw, 38px); letter-spacing:.04em; }
.hz-layers .hz-note { margin:12px auto 0; text-align:center; }
.hz-stations { list-style:none; margin:54px auto 0; padding:18px 0 0; max-width:1100px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; border-top:1px solid var(--hz-line); }
.hz-stations li { position:relative; color:var(--hz-soft); font:11px var(--hz-mono); letter-spacing:.12em; text-transform:uppercase; }
.hz-stations li b { color:var(--hz-cyan); margin-right:6px; font-weight:700; }
.hz-stations li.hz-return { cursor:help; outline-offset:6px; }
.hz-stations li.hz-return:hover::after, .hz-stations li.hz-return:focus::after { content:'One was for emergencies.'; position:absolute; left:50%; top:24px; transform:translateX(-50%); white-space:nowrap; padding:6px 10px; border-radius:6px; background:rgba(10,18,36,.92); border:1px solid rgba(241,212,168,.45); color:var(--hz-warm); font:italic 13px var(--hz-serif); letter-spacing:0; text-transform:none; }
.hz-correction { text-align:center; justify-items:center; }
.hz-records { display:grid; grid-template-columns:1fr 1fr; gap:min(12vw, 160px); width:min(100%, 860px); margin:30px 0 34px; }
.hz-record { padding:22px 24px; border-radius:14px; border:1px solid var(--hz-line); background:rgba(10,18,36,.72); text-align:left; backdrop-filter:blur(6px); transition:opacity .6s ease; }
.hz-record .hz-rid { display:block; color:var(--hz-cyan); font:700 11px var(--hz-mono); letter-spacing:.14em; }
.hz-record p { margin:10px 0 14px; font:italic 24px var(--hz-serif); }
.hz-stamp { display:inline-block; padding:5px 9px; border-radius:999px; border:1px dashed rgba(170,184,200,.5); color:var(--hz-muted); font:11px var(--hz-mono); letter-spacing:.12em; text-transform:uppercase; }
.hz-stamp-new { border-style:solid; border-color:rgba(37,215,242,.6); color:var(--hz-cyan); }
.hz-old { opacity:.55; } .hz-correction.is-active .hz-old { opacity:.7; }
.hz-ways { text-align:center; justify-items:center; }
.hz-portals { display:grid; grid-template-columns:1fr 1fr; gap:min(10vw, 140px); width:min(100%, 960px); margin:34px 0 26px; }
.hz-portal { position:relative; display:grid; justify-items:center; gap:10px; padding:60px 20px 26px; text-decoration:none; }
.hz-portal-ring { width:min(34vw, 240px); height:min(34vw, 240px); border-radius:50%; border:2px solid; transition:transform .4s ease, box-shadow .4s ease; }
.hz-warm .hz-portal-ring { border-color:rgba(241,212,168,.85); overflow:hidden; position:relative; background:linear-gradient(180deg, #1b1738 0%, #4a2d63 42%, #c7703e 64%, #2b2140 64.5%, #141a33 100%); box-shadow:0 0 50px rgba(241,180,90,.25), inset 0 0 40px rgba(241,180,90,.12); }
.hz-warm .hz-portal-ring::before { content:''; position:absolute; left:58%; top:18%; width:22%; height:22%; border-radius:50%; background:radial-gradient(circle, #f4d9b0 0%, #e8c08a 60%, rgba(232,192,138,0) 100%); box-shadow:0 0 30px rgba(244,217,176,.6); }
.hz-warm .hz-portal-ring::after { content:''; position:absolute; left:0; right:0; bottom:0; height:46%; background:linear-gradient(180deg, transparent 0%, #10132a 100%); clip-path:polygon(0 100%, 0 70%, 14% 56%, 24% 64%, 38% 38%, 52% 60%, 64% 48%, 76% 62%, 88% 52%, 100% 66%, 100% 100%); }
.hz-cool .hz-portal-ring { border-color:rgba(37,215,242,.85); position:relative; background:radial-gradient(circle at 50% 50%, rgba(236,240,255,.95) 0 4%, rgba(37,215,242,.45) 6%, rgba(22,133,255,.18) 22%, rgba(10,18,36,.6) 60%), repeating-radial-gradient(circle at 50% 50%, rgba(37,215,242,.16) 0 1px, transparent 1px 15px); box-shadow:0 0 50px rgba(37,215,242,.25), inset 0 0 40px rgba(37,215,242,.12); }
.hz-cool .hz-portal-ring::before { content:''; position:absolute; inset:9%; border-radius:50%; border:1px dotted rgba(37,215,242,.7); }
.hz-cool .hz-portal-ring::after { content:''; position:absolute; inset:22%; border-radius:50%; border:1px solid rgba(188,168,236,.5); transform:rotate(30deg) scaleX(.6); }
.hz-portal:hover .hz-portal-ring, .hz-portal:focus-visible .hz-portal-ring { transform:scale(1.05); box-shadow:0 0 90px rgba(188,168,236,.35); }
.hz-portal strong { font:400 clamp(24px, 3vw, 36px) var(--hz-serif); letter-spacing:.1em; text-transform:uppercase; }
.hz-warm strong { color:var(--hz-warm); } .hz-cool strong { color:var(--hz-cyan); }
.hz-portal > span:last-child { color:var(--hz-muted); font-size:14px; }
.hz-exit { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 26px; margin-top:34px; padding-top:22px; border-top:1px solid var(--hz-line); font:600 12px var(--hz-mono); letter-spacing:.1em; text-transform:uppercase; }
.hz-exit a { color:var(--hz-muted); text-decoration:none; } .hz-exit a:hover, .hz-exit a:focus-visible { color:var(--hz-ink); }
.hz-foot { position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:22px clamp(18px, 6vw, 96px) 36px; color:var(--hz-soft); font:11px/1.6 var(--hz-mono); letter-spacing:.06em; border-top:1px solid var(--hz-line); background:rgba(4,7,15,.6); }
.hz-chip { padding:6px 11px; border:1px solid rgba(241,180,90,.4); border-radius:999px; color:#f1b45a; }
.hz-noscript { position:relative; z-index:2; margin:0; padding:16px; text-align:center; color:var(--hz-muted); font:13px var(--hz-mono); }
@media (max-width: 900px) {
  .hz-bar { flex-wrap:wrap; gap:10px 14px; } .hz-links { margin-left:0; } .hz-controls { margin-left:auto; }
  .hz-layer-list { grid-template-columns:1fr 1fr; min-height:0; } .hz-layer { transform:none !important; padding-top:130px; }
  .hz-records, .hz-portals { grid-template-columns:1fr; gap:22px; } .hz-record p { font-size:20px; }
}
@media (max-width: 560px) { .hz-layer-list { grid-template-columns:1fr; } .hz-layer { padding-top:120px; } .hz-scene { padding-top:150px; } .hz-controls button { padding:6px 9px; } }
@media (prefers-reduced-motion: reduce) { html.hz { scroll-behavior:auto; } .hz-reveal { transition:none; opacity:1; transform:none; } .hz-portal-ring, .hz-portal-btn { transition:none; } }
/* C-22: the threshold invitation breathes once the mark is drawn; still under pause or reduced motion. */
@keyframes hz-breathe { 50% { box-shadow:0 0 52px rgba(37,215,242,.36), inset 0 0 24px rgba(37,215,242,.14); } }
html.hz-intro-done .hz-portal-btn { animation:hz-breathe 3.6s ease-in-out 1.4s infinite; }
html.hz-paused .hz-portal-btn, html.hz-reduced .hz-portal-btn { animation:none; }
/* C-22 fallback: without JavaScript there is no loader and no blank canvas, only the static sky and the full text. */
html:not(.hz-js) .hz-loading, html:not(.hz-js) #hz-canvas, html:not(.hz-js) .hz-controls { display:none; }
html:not(.hz-js) body { background:radial-gradient(ellipse at 50% 40%, #17295f 0%, #0c1033 45%, #020611 100%); }
.hz-bar { background:linear-gradient(rgba(4,7,15,.92), rgba(4,7,15,.7) 70%, rgba(4,7,15,0)); }
/* C-23: on phones the bar stays at the top of the page instead of riding over the text. */
@media (max-width: 700px) {
  .hz-bar { position:absolute; padding:12px 16px; gap:8px 12px; background:linear-gradient(rgba(4,7,15,.92), rgba(4,7,15,.5)); }
  .hz-controls button { padding:5px 9px; font-size:11px; }
  .hz-scene { padding-top:96px; }
  .hz-approach { padding-top:0; }
}
/* C-24: the payoff line, revealed by the crescendo; always visible without JavaScript, when static, or under reduced motion. */
.hz-payoff { margin:4px 0 24px; font:400 clamp(26px, 3.4vw, 44px)/1.2 var(--hz-serif); letter-spacing:.01em; text-shadow:0 0 40px rgba(241,212,168,.16); transition:opacity 1.4s ease, transform 1.4s ease; }
.hz-payoff em { font-style:italic; background:linear-gradient(90deg, var(--hz-warm), var(--hz-lilac), var(--hz-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
html.hz-js:not(.hz-reduced):not(.hz-static) .hz-ways:not(.hz-crescendo) .hz-payoff { opacity:0; transform:translateY(10px); }
.hz-portal-ring { transition:transform .4s ease, box-shadow 1.4s ease; }
.hz-ways.hz-crescendo .hz-warm .hz-portal-ring { box-shadow:0 0 90px rgba(241,180,90,.42), inset 0 0 50px rgba(241,180,90,.18); }
.hz-ways.hz-crescendo .hz-cool .hz-portal-ring { box-shadow:0 0 90px rgba(37,215,242,.42), inset 0 0 50px rgba(37,215,242,.18); }
@media (prefers-reduced-motion: reduce) { .hz-payoff { transition:none; } .hz-portal-btn { animation:none !important; } }
/* C-26: the entrance film (Harmony seq 292). It covers the page from the first paint when horizon-boot.js sets
   hz-gated, shows the film whole (contain, never cropped) on its own edge colour, and fails safe: if the script never runs, the
   overlay lifts by itself after 20 s. No inline styles or scripts, so the preview's CSP allows all of it. */
.hz-gate{display:none}
html.hz-gated .hz-gate{display:block;position:fixed;inset:0;z-index:200;background:#030a18;opacity:1;transition:opacity 1.25s ease;animation:hz-gate-failsafe .6s ease 20s forwards}
.hz-gate-film{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#030a18}
.hz-gate-bar{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:2;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.hz-gate-bar button{font:600 11px/1 var(--hz-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hz-ink);background:rgba(4,10,24,.62);border:1px solid rgba(138,228,230,.4);border-radius:999px;padding:12px 16px;min-height:42px;cursor:pointer}
.hz-gate-bar button:hover,.hz-gate-bar button:focus-visible{border-color:rgba(138,228,230,.85);background:rgba(10,24,44,.85)}
.hz-gate-bar button:focus-visible{outline:2px solid var(--hz-cyan);outline-offset:3px}
html.hz-gated .hz-gate.hz-gate--out{opacity:0;pointer-events:none}
html.hz-gated .hz-gate.hz-gate--quick{transition-duration:.45s}
html.hz-gated body{overflow:hidden;animation:hz-gate-unlock 0s linear 20.6s forwards}
@keyframes hz-gate-failsafe{to{opacity:0;visibility:hidden}}
@keyframes hz-gate-unlock{to{overflow:auto}}
@media (prefers-reduced-motion: reduce){html.hz-gated .hz-gate{transition-duration:.01s}}
#hz-title[tabindex="-1"]:focus{outline:none}
/* C-33: the threshold as a passage. A tall section to travel through; the words sit at the top and scroll away before the tunnel
   thickens; the side labels stay with the opening beat; scripted travel must not fight smooth scrolling. */
.hz-threshold { min-height:250vh; align-content:start; }
.hz-threshold .hz-side { top:50vh; }
html.hz-journey { scroll-behavior:auto; }
@media (max-width: 700px) { .hz-threshold { min-height:210vh; } }
html.hz-reduced .hz-threshold, html.hz-static .hz-threshold, html:not(.hz-js) .hz-threshold { min-height:100vh; }
/* C-33b: the words step aside once the passage deepens */
.hz-threshold .hz-copy, .hz-threshold .hz-side { transition:opacity .6s ease; }
html.hz-deep .hz-threshold .hz-copy, html.hz-deep .hz-threshold .hz-side { opacity:0; }

/* C-34: the arrival, in plain words (Harmony door seq 299). Not a canvas scene: the passage has ended and the sky is calm. */
.hz-arrival { position:relative; display:grid; justify-items:center; padding:110px clamp(18px, 6vw, 96px) 96px; }
.hz-arrival:focus { outline:none; }
.hz-arrive-wrap { width:min(100%, 1120px); }
.hz-arrival .hz-copy { max-width:820px; }
.hz-arrival .hz-display { font-size:clamp(40px, 6vw, 76px); }
.hz-arrival .hz-lede strong { color:var(--hz-ink); font-weight:600; }
.hz-arrive-grid { display:grid; grid-template-columns:1fr 1fr .9fr; gap:22px; margin:8px 0 26px; }
.hz-arrive { padding:22px 22px 20px; border:1px solid var(--hz-line); border-radius:14px; background:rgba(8,14,30,.8); backdrop-filter:blur(6px); }
.hz-arrive h3 { margin:0 0 16px; font:700 12px var(--hz-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--hz-ink); }
.hz-arrive ul { list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.hz-arrive li { display:grid; gap:4px; justify-items:start; }
.hz-arrive li > span:last-child { color:var(--hz-muted); font-size:15px; line-height:1.5; }
.hz-state { display:inline-flex; align-items:center; gap:7px; font:11px/1.6 var(--hz-mono); letter-spacing:.03em; color:#8ae4e6; }
.hz-state::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.hz-state b { font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.hz-state[data-state="observed"] { color:#a9c8ff; } .hz-state[data-state="evaluated"] { color:#c4b2f0; }
.hz-state[data-state="planned"] { color:#e8d2aa; } .hz-state[data-state="held"] { color:#e6adc6; }
.hz-arrive-next a { display:block; padding:11px 0; border-top:1px solid var(--hz-line); color:var(--hz-ink); text-decoration:none; font:400 20px/1.25 var(--hz-serif); }
.hz-arrive-next h3 + a { border-top:0; padding-top:0; }
.hz-arrive-next a span { display:block; margin-top:3px; color:var(--hz-soft); font:12px/1.5 var(--hz-mono); letter-spacing:.02em; }
.hz-arrive-next a:hover, .hz-arrive-next a:focus-visible { color:var(--hz-cyan); }
.hz-arrival .hz-note { max-width:900px; }
@media (max-width: 1000px) { .hz-arrive-grid { grid-template-columns:1fr 1fr; } .hz-arrive-next { grid-column:1 / -1; } }
@media (max-width: 640px) { .hz-arrive-grid { grid-template-columns:1fr; } .hz-arrival { padding-top:90px; } .hz-arrive-next { grid-column:auto; } }
/* C-40: the Illustration marker in the Horizon footer, matching the label key */
.hz-chip[data-state="illustration"] { color:#a7b5c2; border-color:rgba(167,181,194,.45); }
.hz-chip[data-state="illustration"] b { font-weight:700; letter-spacing:.12em; text-transform:uppercase; }