/* Shared markup keeps the existing narrow-screen shell available. */
.desktop-crumb, .nav-group-name { display:none; }
.nav-icon { width:17px; height:17px; flex:0 0 17px; stroke:currentColor; stroke-width:1.55; fill:none; }
h1, h2, h3, p { text-wrap:pretty; }

@media (min-width:1050px) {
  :root {
    --ground:#0b0f18;
    --rail:#10151f;
    --layer:#141b28;
    --inset:#0e141f;
    --raised:#1b2535;
    --line:#303c50;
    --text:#f0f3f8;
    --muted:#acb8cb;
    --edge:#4d607d;
    --active:#2b2528;
    --radius:8px;
    --rail-width:232px;
    --bar-height:68px;
    --page-gutter:clamp(24px,2.3vw,40px);
    font-size:16px;
  }

  /* Keep the moving scene and the login form in separate planes. */
  #entry { padding:32px 40px; }
  #entry::after {
    content:""; position:absolute; z-index:-1; inset:0 0 0 58%; pointer-events:none;
    background:var(--rail); border-left:1px solid var(--line);
  }
  .entry-frame {
    grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);
    align-items:stretch; gap:0; padding-block:48px;
  }
  .entry-glow {
    background:radial-gradient(ellipse at 31% 42%,#31243a,transparent 57%),
      radial-gradient(ellipse at 9% 91%,#18253a,transparent 57%);
  }
  .orbital { left:29%; top:43%; width:min(72vw,1040px); }
  .entry-title { padding:0 24px 32px 0; max-width:580px; }
  .entry-title h1 {
    font-size:clamp(3.6rem,5.6vw,6.4rem); line-height:1.02; letter-spacing:-.075em;
    margin:12px 0 14px;
  }
  .entry-title > p:last-child { max-width:42ch; font-size:1.05rem; color:#d1d9e8; }
  .access-card {
    justify-self:center; width:min(100% - 48px,390px); background:transparent;
    border:0; border-radius:0; padding:0; box-shadow:none;
  }
  .access-card h2 { font-size:2.45rem; margin:10px 0 8px; letter-spacing:-.054em; }
  .access-card form { margin-top:24px; gap:16px; }
  .access-card label { gap:6px; }
  .access-card input { min-height:46px; }
  .access-card .primary { min-height:46px; margin-top:8px; }
  .brand { font-weight:720; letter-spacing:.015em; gap:12px; }
  .brand small { margin-top:4px; color:var(--muted); }
  .entry-footer { display:grid; grid-template-columns:auto minmax(0,1fr) auto minmax(0,41%); gap:12px; }
  .entry-footer i { background:var(--line); }
  .entry-footer > i:nth-of-type(2) { display:none; }
  .entry-footer > span:last-child { grid-column:3; grid-row:1; }
  .entry-footer #intro-controls { grid-column:4; grid-row:1; }

  /* Two sticky regions in the desktop shell. Content uses the page scroll. */
  #console {
    display:grid;
    grid-template-columns:var(--rail-width) minmax(0,1fr);
    grid-template-rows:var(--bar-height) auto minmax(0,1fr);
    min-height:100dvh;
  }
  .command, .command-top { display:contents; }
  .command-top > .brand, .command-tools {
    position:sticky; top:0; z-index:6; min-width:0; height:var(--bar-height);
    border-bottom:1px solid var(--line);
  }
  .command-top > .brand {
    grid-column:1; grid-row:1; background:var(--rail); padding:0 20px;
    border-right:1px solid var(--line);
  }
  .command-tools {
    grid-column:2; grid-row:1; padding:0 var(--page-gutter);
    background:var(--ground); gap:8px; flex-wrap:nowrap;
  }
  .desktop-crumb {
    margin-right:auto; display:flex; align-items:center; gap:10px;
    font-size:.83rem; color:var(--muted); min-width:0;
  }
  .desktop-crumb strong { color:var(--text); font-weight:650; }
  .command-tools button { flex:none; min-height:40px; }
  .identity { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:14ch; }
  #navigation {
    grid-column:1; grid-row:2 / span 2; align-self:start; position:sticky; top:var(--bar-height);
    width:100%; height:calc(100dvh - var(--bar-height)); margin:0; padding:12px 15px 20px;
    background:var(--rail); border-right:1px solid var(--line);
    display:flex; flex-direction:column; gap:2px; overflow:auto; scrollbar-width:thin;
  }
  .nav-group-name {
    display:block; flex:none; padding:12px 8px 5px; margin:4px 0 0;
    color:var(--muted); font:650 .64rem/1.45 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  }
  #navigation a {
    min-height:36px; flex:none; padding:6px 9px; gap:11px; border-radius:6px;
    font-size:.86rem; font-weight:590;
  }
  #navigation a:hover { background:var(--raised); }
  #navigation a[aria-current] { background:var(--active); border-color:#77594f; }
  .nav-icon { color:var(--ice); }
  [aria-current] > .nav-icon { color:var(--copper); }
  #demo-flag { grid-column:2; grid-row:2; }
  .stage {
    grid-column:2; grid-row:3; width:100%; max-width:1680px; min-width:0;
    padding:24px var(--page-gutter) 48px;
  }
  button, .button { background:var(--raised); border-color:var(--edge); }
  input:not([type=checkbox]), select, textarea { background:var(--inset); border-color:var(--edge); }
  :focus-visible { outline-color:var(--ice); }

  /* Keep each view's moving diagram beside its heading, above the controls. */
  .chapter {
    align-items:center; min-height:156px; margin-bottom:24px; border:0;
    border-bottom:1px solid var(--line); border-radius:0; background:transparent;
  }
  .chapter-copy { max-width:73%; padding:12px 16px 24px 0; animation-duration:.30s; }
  .chapter h1 { font-size:clamp(2.05rem,3.2vw,3.55rem); line-height:1.08; letter-spacing:-.057em; }
  .chapter-copy > p:last-child { color:var(--muted); max-width:60ch; font-size:.93rem; }
  .chapter-art { width:clamp(220px,31%,368px); opacity:.87; animation-duration:.44s; }
  .chapter-grid { inset:6px 0 6px auto; width:34%; opacity:.55; }
  .chapter-glow { opacity:.34; background:radial-gradient(ellipse at 92% 50%,var(--scene-light,#20324c),transparent 46%); }
  .chapter-sweep { width:26%; left:68%; animation-duration:.55s; }
  .chapter-corners { display:none; }

  /* Working surfaces share an eight-pixel rhythm and a quiet border. */
  .panel {
    padding:clamp(16px,1.8vw,24px); margin-bottom:16px;
    background:var(--layer); border:1px solid var(--line); border-radius:var(--radius);
  }
  .panel h2 { font-size:1.13rem; font-weight:690; }
  .panel > * + *, .panel-body > * + * { margin-top:12px; }
  .duo { gap:16px; margin-bottom:16px; }
  .table-wrap, .term, .wide-frame { border-radius:6px; }
  th { background:var(--raised); color:#dce5f4; }
  th, td { padding:10px 12px; }
  td .tools { min-width:0; }
  .table-wrap button { min-height:36px; padding:6px 10px; }
  tbody tr:hover { background:#ffffff05; }
  .state { max-width:100%; }
  .term { background:var(--inset); }
  dialog { background:var(--layer); border-color:var(--edge); border-radius:var(--radius); }
  .topology-panel .readout {
    grid-template-columns:minmax(0,1fr) clamp(88px,12%,132px) minmax(0,1fr);
    gap:12px; margin:0;
  }
  .topology-panel .readout .panel { background:var(--inset); padding:16px; border-radius:6px; }
  .topology-panel .readout .panel:not(.tunnel) {
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:start;
  }
  .topology-panel .readout .panel:not(.tunnel) > * { margin:0; min-width:0; }
  .topology-panel .readout .panel > :is(.stat-grid,.note,a) { grid-column:1 / -1; }
  .topology-panel .readout .tunnel {
    padding:8px 0; background:transparent; border:0;
  }
  .tunnel .eyebrow { color:var(--ice); letter-spacing:.09em; }
  .tunnel .wire-track { grid-row:2; width:100%; }
  .readout .stat { padding:.5rem 0 0; border-color:var(--line); }
  .stat strong { font-size:clamp(1rem,1.6vw,1.45rem); }
  .monitor-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .monitor-split { display:grid; grid-template-columns:minmax(0,1.42fr) minmax(0,1fr); gap:16px; align-items:start; }
  .priority-stack { min-width:0; }
  .monitor-split .chart { min-height:160px; }
}

/* Signal sculpture: the canvas owns the moving frame, SVG remains the quiet fallback. */
:root[data-cinema=on] .signal-sphere img { opacity:.14; }
.signal-sphere img { transition:opacity .5s ease; }
.chapter-art .mesh-ring { transform-origin:396px 161px; animation:mesh-turn 32s linear infinite; }
.chapter-art .mesh-ring.reverse { animation-direction:reverse; animation-duration:44s; }
.chapter-art .node-halo { transform-box:fill-box; transform-origin:center; animation:node-breathe 4s ease-in-out infinite; }
.chapter-art .signal-thread { stroke-dasharray:120 740; animation:signal-thread 8s linear infinite; }
@keyframes mesh-turn { to { transform:rotate(360deg); } }
@keyframes node-breathe { 0%,100% { opacity:.16; transform:scale(.8); } 50% { opacity:.38; transform:scale(1.3); } }
@keyframes signal-thread { to { stroke-dashoffset:-860; } }
@media (min-width:1050px) {
  .entry-title { text-shadow:0 2px 32px #0b0f18; }
  .chapter-art { width:clamp(260px,38%,440px); }
  #navigation a { transition:background .18s ease, color .18s ease, border-color .18s ease; }
  #navigation a:hover .nav-icon { transform:translateX(2px); }
  .nav-icon { transition:transform .18s ease; }
  dialog[open] { animation:dialog-focus .22s cubic-bezier(.16,1,.3,1); }
  @keyframes dialog-focus { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
}

/* Spatial header set pieces, isolated from the reading and working surfaces. */
.epic-chapter .hero-sculpture { animation:sculpture-arrive .85s cubic-bezier(.16,1,.3,1) both; }
.epic-chapter .floating-module { animation:module-hover 6s ease-in-out infinite; }
.epic-chapter .floating-module:nth-child(2n) { animation-delay:-2s; }
.epic-chapter .floating-module:nth-child(3n) { animation-delay:-4s; }
.epic-chapter .hero-link { stroke-dasharray:28 8; animation:bridge-current 5s linear infinite; }
.epic-chapter .hero-spark { animation:spark-drift 7s ease-in-out infinite alternate; }
.epic-chapter .hero-spark:nth-child(2n) { animation-delay:-3s; }
@keyframes sculpture-arrive { from { opacity:.25; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes module-hover { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes bridge-current { to { stroke-dashoffset:-72; } }
@keyframes spark-drift { from { transform:translateY(4px); opacity:.2; } to { transform:translateY(-10px); opacity:.8; } }
@media (min-width:1050px) {
  .epic-chapter { min-height:238px; overflow:hidden; }
  .epic-chapter .chapter-copy { max-width:52%; padding-block:28px; }
  .epic-chapter .chapter-art { width:55%; height:100%; opacity:1; }
  .epic-chapter .chapter-grid { width:55%; opacity:.32; }
  .epic-chapter .chapter-glow { opacity:.8; background:radial-gradient(ellipse at 80% 58%,#193c524d,transparent 51%); }
}