/* Palette, surfaces and typography */
:root {
  color-scheme: dark;
  --ground:#090c17; --layer:#101525; --raised:#171d30; --line:#2c354e;
  --text:#f0f1f8; --muted:#b1b9cf; --copper:#ffb084; --ice:#9dcaff;
  --green:#8ee5bc; --red:#ffabb2; --amber:#ffdb8c;
  --mono:"Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  font: 15px/1.55 "Segoe UI", system-ui, sans-serif;
  background:var(--ground); color:var(--text);
}
*, *::before, *::after { box-sizing:border-box; }
body, h1, h2, h3, p, figure { margin:0; }
a { color:var(--ice); text-underline-offset:.2em; }
[hidden] { display:none !important; }
button, input, select, textarea { font:inherit; color:inherit; }
button, select, input:not([type=checkbox]), textarea { min-height:43px; }
button, .button {
  display:inline-flex; align-items:center; justify-content:center; gap:.65em;
  padding:.6rem .95rem; border:1px solid #44516b; border-radius:8px;
  background:#192136; color:var(--text); font-weight:650; cursor:pointer;
  transition:transform .18s, background-color .18s, border-color .18s;
}
button:hover:not(:disabled), .button:hover { background:#26314b; border-color:#7b8eac; }
button:active:not(:disabled) { transform:translateY(2px); }
button:disabled { opacity:.56; cursor:not-allowed; }
button.primary { background:var(--copper); border-color:var(--copper); color:#261821; }
button.primary:hover:not(:disabled) { background:#ffd0b0; border-color:#ffd0b0; }
button.danger { background:#342130; border-color:#875568; color:var(--red); }
button.danger:hover:not(:disabled) { background:#513145; }
input:not([type=checkbox]), select, textarea {
  padding:.65rem .75rem; background:#0c1020; border:1px solid #46526e; border-radius:8px;
  min-width:0; max-width:100%;
}
input[type=checkbox] { accent-color:var(--copper); width:1.15rem; height:1.15rem; }
label { display:grid; gap:.35rem; font-weight:600; }
.check-label { display:flex; align-items:center; gap:.45rem; min-height:43px; }
label input:not([type=checkbox]), label textarea { width:100%; }
:focus-visible { outline:2px solid #ffd2b7; outline-offset:3px; }
.skip { position:fixed; z-index:30; transform:translateY(-150%); top:.7rem; left:.7rem; background:#252c42; padding:.8rem; }
.skip:focus { transform:none; }
.muted, small { color:var(--muted); }
.eyebrow, .instrument, kbd { font:600 .73rem/1.45 var(--mono); letter-spacing:.13em; }
.eyebrow { color:var(--copper); display:flex; align-items:center; gap:.65em; }
.eyebrow > span, .entry-secure i { width:.55em; height:.55em; border-radius:50%; background:currentColor; box-shadow:0 0 13px currentColor; }

/* The opening shot: a globe, halo and orbit under a readable foreground. */
.scene { position:relative; isolation:isolate; overflow:hidden; }
.entry { display:flex; flex-direction:column; min-height:100svh; padding:clamp(18px,3.4vw,60px); }
.entry-grid, .entry-glow { position:absolute; inset:0; pointer-events:none; }
.entry-grid { z-index:-3; background:linear-gradient(#bac9fc0a 1px,transparent 1px),linear-gradient(90deg,#bac9fc0a 1px,transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse at 48% 50%,black,transparent 81%); }
.entry-glow { z-index:-2; background:radial-gradient(ellipse at 49% 46%,#351f36,transparent 66%),radial-gradient(ellipse at 100% 95%,#142849,transparent 61%); }
.orbital { position:absolute; z-index:-1; width:min(83vw,1280px); top:47%; left:47%; transform:translate(-50%,-50%); pointer-events:none; }
.orbital img { display:block; width:100%; height:auto; }
.orbit-motion { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
@keyframes signal { 50% { opacity:.35; } }
.entry-header, .entry-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:inline-flex; align-items:center; gap:.85rem; color:var(--text); text-decoration:none; font-weight:780; letter-spacing:.09em; line-height:1.2; }
.brand small { display:block; margin-top:.35rem; font:600 .64rem/1.2 var(--mono); letter-spacing:.14em; }
.entry-secure, .entry-footer { color:var(--muted); font:600 .7rem/1.3 var(--mono); letter-spacing:.12em; }
.entry-secure { display:flex; align-items:center; gap:.7rem; color:var(--ice); }
.entry-frame {
  display:grid; grid-template-columns:minmax(0, 1fr) clamp(300px,29vw,414px);
  align-items:end; gap:clamp(24px,5vw,100px); flex:1; padding-block:clamp(50px,9vh,138px);
}
.entry-title { align-self:end; text-shadow:0 4px 32px #080812; animation:entrance .75s cubic-bezier(.2,.75,.18,1) both; }
.entry-title h1 { font-size:clamp(3rem,7.1vw,8.4rem); line-height:.93; font-weight:720; letter-spacing:-.092em; margin:.65rem 0 1.2rem; }
.entry-title h1 span { display:block; color:var(--copper); }
.entry-title > p:last-child { font-size:clamp(.95rem,1.5vw,1.24rem); color:#d1d6e8; }
.access-card { align-self:center; background:#111625f5; border:1px solid #5c4c63; border-radius:16px; padding:clamp(22px,3vw,44px); box-shadow:0 28px 90px #05060bbf; animation:entrance .68s .12s cubic-bezier(.2,.75,.18,1) both; }
.access-card h2 { margin-top:.6rem; font-size:2.5rem; line-height:1.15; letter-spacing:-.06em; }
.access-card form { display:grid; gap:1rem; margin-top:1.4rem; }
.access-card label { color:#dce0ed; font-size:.88rem; }
.access-card button { margin-top:.35rem; justify-content:space-between; }
#login-status { min-height:1.3rem; font-size:.8rem; color:var(--muted); }
#login-status[data-error=true] { color:var(--red); }
.entry-footer i { height:1px; flex:1; background:linear-gradient(90deg,#fcb28250,#729fff50); }
.entry-footer #intro-controls { display:flex; align-items:center; justify-content:center; gap:.6rem; font:600 .77rem/1.35 "Segoe UI",system-ui,sans-serif; letter-spacing:0; }
.motion-control label { max-width:20rem; }
.motion-control .note { margin-top:.65rem; }
.motion-compact label { display:flex; align-items:center; gap:.45rem; }
.motion-compact select, .replay { min-height:40px; background:#131829; }
.replay { white-space:nowrap; color:var(--copper); }
@keyframes entrance { from { opacity:.74; transform:translateY(19px); } to { opacity:1; transform:none; } }

/* Command bar and view choreography */
.command { position:sticky; top:0; z-index:5; background:#0c1020f7; border-bottom:1px solid var(--line); }
.command-top, #navigation, .stage { width:min(100% - 48px, 1480px); margin-inline:auto; }
.command-top { min-height:70px; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.command-tools, .tools { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; }
.command-tools button { font-size:.83rem; }
.identity { font:600 .74rem/1.3 var(--mono); color:var(--muted); }
kbd { border:1px solid var(--line); border-radius:4px; padding:.15rem .35rem; color:#c3cde2; background:#11182a; letter-spacing:0; }
#navigation { display:flex; gap:.4rem; overflow-x:auto; padding:2px 4px 11px; scrollbar-width:thin; }
#navigation a { flex:none; display:flex; align-items:center; gap:.5rem; min-height:42px; padding:.45rem .75rem; color:#ccd3e8; text-decoration:none; border:1px solid transparent; border-radius:7px; font-size:.82rem; font-weight:650; }
#navigation a:hover { background:#182036; }
#navigation a[aria-current] { border-color:#805e52; color:var(--copper); background:#2b2030; }
.nav-mark { color:var(--ice); font:700 .96rem var(--mono); }
#navigation a[aria-current] .nav-mark { color:inherit; }
#demo-flag { background:#33243a; padding:.45rem; text-align:center; font-size:.8rem; color:#ffdfd1; }
.stage { padding-block:clamp(16px,3vw,42px) 60px; }
.chapter { min-height:clamp(205px,24vw,320px); display:grid; align-items:end; margin-bottom:1.4rem; border:1px solid #4e4563; border-radius:14px; background:#151a2d; }
.chapter-grid, .chapter-glow, .chapter-art { position:absolute; inset:0; pointer-events:none; }
.chapter-grid { z-index:-3; background:linear-gradient(#b4c4f012 1px,transparent 1px),linear-gradient(90deg,#b4c4f012 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(90deg,transparent 14%,black); }
.chapter-glow { z-index:-2; background:radial-gradient(ellipse at 84% 61%,var(--scene-light,#543151) 0,transparent 66%),linear-gradient(90deg,#111626,#14182b44); }
.chapter[data-scene=dns], .chapter[data-scene=routes], .chapter[data-scene=vps1] { --scene-light:#283c64; }
.chapter[data-scene=storage], .chapter[data-scene=updates] { --scene-light:#644237; }
.chapter[data-scene=logs], .chapter[data-scene=shell] { --scene-light:#244552; }
.chapter[data-scene=risks] { --scene-light:#5e293e; }
.chapter[data-scene=ollama], .chapter[data-scene=docker] { --scene-light:#453263; }
.chapter-art { z-index:-1; left:auto; width:65%; height:100%; opacity:.9; animation:chapter-cut .8s cubic-bezier(.18,.86,.19,1) both; }
.chapter-sweep { position:absolute; z-index:-1; pointer-events:none; width:51%; inset-block:0; left:36%; background:linear-gradient(106deg,transparent 34%,#91b1ed2a 48%,#ffdebb52 50%,transparent 62%); animation:sweep 1s ease-out both; }
.chapter-corners { position:absolute; inset:12px; pointer-events:none; background:
  linear-gradient(#a3aace80,#a3aace80) left top/22px 1px,
  linear-gradient(#a3aace80,#a3aace80) left top/1px 14px,
  linear-gradient(#a3aace80,#a3aace80) right top/22px 1px,
  linear-gradient(#a3aace80,#a3aace80) right top/1px 14px,
  linear-gradient(#a3aace80,#a3aace80) right bottom/22px 1px,
  linear-gradient(#a3aace80,#a3aace80) right bottom/1px 14px;
  background-repeat:no-repeat;
}
@keyframes chapter-cut {
  from { clip-path:inset(0 60% 0 0); transform:translateX(34px) scale(1.06); opacity:.45; }
  to { clip-path:inset(0); transform:none; }
}
@keyframes sweep { from { transform:translateX(-55%); opacity:.2; } 46% { opacity:.8; } to { transform:translateX(90%); opacity:0; } }
.chapter-art .trace { stroke-dasharray:4 13; opacity:.5; }
.chapter-art .pulse { transform-box:fill-box; transform-origin:center; animation:pulse 4.7s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.42; transform:scale(.94); } }
.chapter-copy { padding:clamp(23px,4.1vw,65px); max-width:74%; animation:entrance .48s cubic-bezier(.2,.75,.18,1) both; }
.chapter h1 { margin:.4rem 0 .5rem; font-size:clamp(2.4rem,5vw,5.3rem); line-height:.94; letter-spacing:-.075em; overflow-wrap:anywhere; }
.chapter-copy > p:last-child { color:#d4d9e9; max-width:41ch; }
.chapter:not(.in-frame) .chapter-art * { animation-play-state:paused; }
.panel { min-width:0; margin-block:0 1.05rem; padding:clamp(13px,2vw,26px); background:var(--layer); border:1px solid var(--line); border-radius:11px; }
.panel h2 { font-size:1.2rem; letter-spacing:-.025em; }
.panel > * + *, .panel-body > * + * { margin-top:.85rem; }
.panel-title { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:space-between; }
.duo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.duo > .panel { margin:0; }
.duo { margin-bottom:1.05rem; }
.state { display:inline-flex; align-items:center; gap:.45em; padding:.25rem .55rem; border:1px solid #44516b; border-radius:5px; color:#d1d8e7; font:600 .73rem/1.3 var(--mono); }
.state::before { content:"◇"; }
.state[data-tone=ok] { color:var(--green); border-color:#476c64; background:#162a2b; }
.state[data-tone=ok]::before { content:"●"; }
.state[data-tone=warning] { color:var(--amber); border-color:#795e46; background:#30261f; }
.state[data-tone=warning]::before { content:"▲"; }
.state[data-tone=bad] { color:var(--red); border-color:#854f68; background:#32202f; }
.state[data-tone=bad]::before { content:"×"; }
.note { font-size:.88rem; color:var(--muted); overflow-wrap:anywhere; }
.note[data-tone=bad] { color:var(--red); }
.stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.stat { border-top:1px solid #4c4f69; padding:.65rem .15rem; }
.stat strong { display:block; font:600 clamp(1.04rem,2vw,1.65rem)/1.15 var(--mono); letter-spacing:-.05em; overflow-wrap:anywhere; }
.stat small { display:block; margin-bottom:.35rem; }
.stat meter { margin-top:.5rem; width:100%; height:8px; accent-color:var(--copper); }
.readout { display:grid; grid-template-columns:1fr minmax(132px,.6fr) 1fr; gap:.8rem; margin-bottom:1.1rem; }
.readout .panel { margin:0; }
.tunnel { display:grid; align-content:center; justify-items:center; gap:.6rem; text-align:center; position:relative; background:#151829; overflow:hidden; }
.wire-track { position:relative; width:85%; height:8px; margin-bottom:.25rem; overflow:hidden; }
.wire-track::before { content:""; position:absolute; inset:3px 0 auto; height:1px; background:linear-gradient(90deg,#6681aa30,#b0d2ff,#6681aa30); }
.wire-track i { display:none; width:100%; height:6px; background:radial-gradient(ellipse 19px 3px at 50% 50%,#fff2ce,#ffb282 24%,#91baff54 70%,transparent); }
.tunnel[data-signal=live] .wire-track i { display:block; animation:wire-pass 2.8s linear infinite; }
@keyframes wire-pass { from { transform:translateX(-51%); } to { transform:translateX(51%); } }
.readout a { font-weight:650; }
.table-wrap { max-width:100%; overflow:auto; border:1px solid var(--line); border-radius:8px; scrollbar-width:thin; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:.86rem; }
th, td { padding:.75rem .82rem; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; }
th { color:#ccd8ef; background:#1a2339; font-weight:650; white-space:nowrap; }
tr:last-child td { border-bottom:0; }
tr:nth-child(even) td { background:#ffffff03; }
td .tools { min-width:min(225px,52vw); }
td .stack { min-width:110px; }
.stack { display:grid; gap:.35rem; justify-items:start; }
.chart { width:100%; display:block; min-height:150px; }
.legend { display:flex; gap:1.25rem; font:600 .76rem var(--mono); color:var(--muted); }
.legend b:first-child { color:var(--copper); }
.legend b:last-child { color:var(--ice); }
.term { background:#080c19; border:1px solid #303952; border-radius:8px; padding:1rem; overflow:auto; max-height:410px; min-height:90px; white-space:pre-wrap; overflow-wrap:anywhere; color:#cfdef7; font: .86rem/1.65 var(--mono); }
.terminal { min-height:300px; }
.command-line { display:grid; align-items:center; grid-template-columns:auto minmax(80px,1fr) auto; gap:.7rem; }
.command-line input { font-family:var(--mono); }
.command-line code { color:var(--copper); }
.list { list-style:none; padding:0; margin-left:0; }
.list li { padding:.6rem 0; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.wide-frame { width:100%; height:74vh; min-height:440px; border:1px solid var(--line); border-radius:10px; background:var(--layer); }
progress { width:min(100%,300px); accent-color:var(--copper); }
dialog { width:min(92vw,530px); max-height:86dvh; padding:1.3rem; border:1px solid #665978; border-radius:14px; color:var(--text); background:#151b2d; box-shadow:0 26px 100px #000a; }
dialog::backdrop { background:#060810bf; }
dialog > * + *, dialog form > * + * { margin-top:.95rem; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.matches { display:grid; gap:.4rem; max-height:52dvh; overflow:auto; }
.matches button { justify-content:space-between; text-align:left; }
#toast { position:fixed; z-index:10; bottom:1rem; right:1rem; width:min(380px,calc(100% - 2rem)); pointer-events:none; }
#toast p { padding:.9rem; border:1px solid #685973; border-radius:8px; background:#252036; margin-top:.4rem; overflow-wrap:anywhere; }
@media (max-width:900px) {
  .entry-frame { grid-template-columns:minmax(0,1fr) minmax(280px, .9fr); }
  .command-tools .identity, .command-tools kbd { display:none; }
  .chapter-art { width:76%; opacity:.64; }
  .chapter-copy { max-width:87%; }
  .readout { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tunnel { grid-row:2; grid-column:1/-1; padding-block:1rem; }
}
@media (max-width:680px) {
  .entry-frame { grid-template-columns:1fr; align-items:start; padding-block:2rem; gap:1.6rem; }
  .entry-title h1 { font-size:clamp(3rem,13vw,5.1rem); }
  .orbital { width:138%; top:220px; left:65%; opacity:.62; }
  .entry-secure { font-size:.6rem; }
  .entry-footer { font-size:.58rem; letter-spacing:0; flex-wrap:wrap; }
  .entry-footer i { display:none; }
  .entry-footer #intro-controls { flex:0 0 100%; order:-1; flex-wrap:wrap; justify-content:flex-start; }
  .motion-compact label { gap:.3rem; }
  .command-top, #navigation, .stage { width:calc(100% - 24px); }
  .command-top .brand { font-size:.78rem; gap:.55rem; }
  .command-top .brand small { font-size:.55rem; }
  .command-tools { gap:.3rem; flex-wrap:nowrap; }
  .command-tools button { min-width:42px; padding:.35rem; font-size:1rem; }
  .command-tools button span { display:none; }
  .chapter { min-height:215px; }
  .chapter-copy { max-width:100%; }
  .chapter-art { width:100%; opacity:.43; }
  .chapter h1 { font-size:clamp(2.25rem,10vw,3.7rem); }
  .duo, .readout { grid-template-columns:1fr; }
  .tunnel { grid-row:auto; grid-column:auto; }
  .command-line { grid-template-columns:minmax(0,1fr) auto; }
  .command-line code { grid-column:1/-1; }
}
/* Automatic honors the OS. An explicit preference is scoped to this portal. */
:root[data-cinema=off] *, :root[data-cinema=off] *::before, :root[data-cinema=off] *::after {
  animation:none !important; transition:none !important; scroll-behavior:auto !important;
}
:root[data-cinema=off] :is(.orbit-motion,.chapter-sweep,.signal-travel,.wire-track i) { display:none; }
@media (prefers-reduced-motion:reduce) {
  :root:not([data-cinema=on]) *, :root:not([data-cinema=on]) *::before, :root:not([data-cinema=on]) *::after {
    animation:none !important; transition:none !important; scroll-behavior:auto !important;
  }
  :root:not([data-cinema=on]) :is(.orbit-motion,.chapter-sweep,.signal-travel,.wire-track i) { display:none; }
}