:root{
    --black: #060504;
    --panel: #100e0a;
    --panel-2: #17140e;
    --panel-3: #1e1a12;
    --line: rgba(201,166,90,0.16);
    --line-strong: rgba(201,166,90,0.42);
    --gold-1: #f2d99a;
    --gold-2: #c9a24e;
    --gold-3: #8a6a2a;
    --text: #f1ead9;
    --text-dim: #9c9280;
    --text-faint: #6b6455;
    --danger: #c96a4e;
    --ok: #7fae7a;
  }
  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; background:var(--black); color:var(--text);
    font-family:'Jost', system-ui, sans-serif; font-weight:400; }
  body{
    background-image:
      radial-gradient(ellipse at top, rgba(201,166,90,0.05), transparent 60%),
      repeating-linear-gradient(115deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
  }
  h1,h2,h3{ font-family:'Cinzel', serif; margin:0; }
  .mono{ font-family:'IBM Plex Mono', monospace; }
  a{ color: var(--gold-2); }

  ::selection{ background: rgba(201,166,90,0.35); }

  /* ---------- header / brand ---------- */
  header.brand{
    padding: 16px 32px 12px;
    border-bottom: 1px solid var(--line-strong);
    background: linear-gradient(180deg, #0b0a07 0%, var(--black) 100%);
    display:flex; flex-direction:column; gap:8px;
  }
  header.brand .brand-top{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  header.brand .brand-top img{ height:46px; width:auto; display:block; filter: drop-shadow(0 0 10px rgba(201,166,90,0.15)); }
  header.brand .brand-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  header.brand .brand-row h1{ font-size:19px; font-weight:600; color:var(--text); letter-spacing:0.02em; }
  header.brand .back-btn{
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--gold-1);
    border:1px solid var(--gold-3); padding:7px 14px; border-radius:2px;
    background: rgba(201,166,90,0.05); letter-spacing:0.04em; cursor:pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  header.brand .back-btn:hover{ background: rgba(201,166,90,0.14); color: var(--gold-2); }
  header.brand .badge{
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--gold-1);
    border:1px solid var(--gold-3); padding:7px 12px; border-radius:2px;
    white-space:nowrap; background: rgba(201,166,90,0.05); letter-spacing:0.04em;
  }

  .goldrule{ height:1px; margin: 0; background: linear-gradient(90deg, transparent, var(--gold-3) 15%, var(--gold-2) 50%, var(--gold-3) 85%, transparent); opacity:0.6; }

  .quicknav{
    display:flex; width:100%;
    background: linear-gradient(180deg, #100d08 0%, #0a0806 100%);
    border-bottom:1px solid var(--line-strong);
  }
  .quicknav button{
    flex:1 1 0; min-width:0;
    background:none; border:none; border-right:1px solid var(--line);
    cursor:pointer; padding:14px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    color:var(--text-dim); font-size:11.5px; letter-spacing:0.09em; text-transform:uppercase;
    font-family:'Jost',sans-serif;
    position:relative; transition:color 0.2s ease, background 0.2s ease;
  }
  .quicknav button .label{ white-space:nowrap; }
  .quicknav button::after{
    content:""; position:absolute; left:50%; bottom:0; width:0; height:2px;
    background:var(--gold-2); transform:translateX(-50%); transition:width 0.2s ease;
  }
  .quicknav button:last-child{ border-right:none; }
  .quicknav button:hover{ color:var(--gold-1); background:rgba(201,166,90,0.05); }
  .quicknav button:hover::after{ width:44%; }
  .quicknav button .num{
    font-family:'IBM Plex Mono',monospace; color:var(--gold-3); font-size:10px; letter-spacing:0.04em;
    border:1px solid var(--gold-3); border-radius:2px; padding:2.5px 6.5px;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .quicknav button:hover .num{ color:var(--gold-1); border-color:var(--gold-1); }
  .quicknav button.active{ color:var(--gold-1); background:rgba(201,166,90,0.09); }
  .quicknav button.active::after{ width:44%; }
  .quicknav button.active .num{ color:var(--gold-1); border-color:var(--gold-1); }
  .quicknav button.nav-3d{ flex-grow:0.8; border-left:1px solid var(--line-strong); }
  @media (max-width: 900px){
    .quicknav{ flex-wrap:wrap; }
    .quicknav button{ flex:1 1 33.33%; padding:13px 10px; font-size:10.5px; }
    .quicknav button.nav-3d{ border-left:1px solid var(--line); }
  }
  @media (max-width: 560px){
    .quicknav button{ flex:1 1 50%; }
  }

  /* Step navigation: only the section picked in #quickNav is shown at a time; the 2D
     drawings in .preview-col are unaffected and stay in place (see position:sticky above). */
  .form-col > *{ display:none; }
  .form-col > .active-section{ display:block; }
  .unlock-bar{ padding:14px 32px; background:#0d0b07; border-bottom:1px solid var(--line); }
  .unlock-bar-inner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .unlock-status{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.05em; color:var(--text-dim); margin-right:6px; white-space:nowrap; }
  .unlock-status.is-unlocked{ color:var(--gold-2); }
  .unlock-input{
    background:var(--panel); border:1px solid var(--line); border-radius:2px; color:var(--text);
    font-family:'Jost',sans-serif; font-size:12.5px; padding:7px 10px; width:220px;
  }
  .unlock-input:focus{ outline:none; border-color:var(--gold-3); }
  .unlock-code-input{ width:140px; text-transform:uppercase; letter-spacing:0.08em; font-family:'IBM Plex Mono',monospace; }
  .unlock-btn{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.04em; color:var(--gold-1);
    border:1px solid var(--gold-3); padding:8px 14px; border-radius:2px; background:rgba(201,166,90,0.05);
    cursor:pointer; text-decoration:none; display:inline-block;
  }
  .unlock-btn:hover{ background:rgba(201,166,90,0.12); }
  .unlock-btn.secondary{ color:var(--text-dim); border-color:var(--line-strong); background:transparent; }
  .unlock-bar .hint{ margin-top:8px; max-width:820px; }
  #purchaseRow{ margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }

  .info-panel{ margin-top:16px; border-top:1px dashed var(--line-strong); padding-top:16px; position:relative; }
  .info-panel-header{
    display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:11px;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-2); margin-bottom:12px;
  }
  .info-panel-body{ transition: filter 0.2s; }
  .info-panel.locked .info-panel-body{ filter: blur(5px); user-select:none; pointer-events:none; }
  .info-panel-teaser{
    display:none; position:absolute; inset:36px 0 0 0; align-items:center; justify-content:center;
    text-align:center; background:linear-gradient(180deg, rgba(10,9,6,0.15), rgba(10,9,6,0.55));
    border-radius:4px;
  }
  .info-panel.locked .info-panel-teaser{ display:flex; }
  .info-panel-teaser-msg{
    background:var(--panel); border:1px solid var(--gold-3); border-radius:3px; padding:14px 20px;
    font-family:'Jost',sans-serif; font-size:12.5px; color:var(--text-dim); max-width:320px;
  }
  .info-panel-teaser-msg b{ color:var(--gold-1); }
  .info-table{ width:100%; border-collapse:collapse; font-size:12px; }
  .info-table th{ text-align:left; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-faint); padding:5px 8px; border-bottom:1px solid var(--line-strong); }
  .info-table td{ padding:5px 8px; border-bottom:1px solid var(--line); color:var(--text-dim); }
  .info-table tr:last-child td{ border-bottom:none; }
  .info-table input[type=number]{
    width:74px; background: var(--panel-2); border:1px solid var(--line-strong);
    color: var(--text); padding: 5px 7px; border-radius:2px; font-size:12px;
    font-family:'IBM Plex Mono', monospace;
  }
  .info-table input[type=number]:focus{ outline:none; border-color: var(--gold-2); }
  .info-status{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; padding:2px 7px; border-radius:2px; white-space:nowrap; }
  .info-status.ref{ color:#8fd18a; border:1px solid rgba(143,209,138,0.4); background:rgba(143,209,138,0.08); }
  .info-status.ext{ color:#e0b45c; border:1px solid rgba(224,180,92,0.4); background:rgba(224,180,92,0.08); }
  .info-status.out{ color:#e0805c; border:1px solid rgba(224,128,92,0.4); background:rgba(224,128,92,0.08); }
  .info-panel-body p{ font-size:12.5px; color:var(--text-dim); line-height:1.6; margin:0 0 10px; }
  .info-panel-body h4{ font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-faint); margin:16px 0 8px; font-family:'IBM Plex Mono',monospace; }
  .info-panel-body h4:first-child{ margin-top:0; }

  .layout{
    display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 0; align-items:start;
  }
  @media (max-width: 1000px){ .layout{ grid-template-columns: 1fr; } }

  .form-col{ padding: 26px 32px 70px; }
  .preview-col{
    position: sticky; top:0; padding: 26px 28px 40px;
    border-left: 1px solid var(--line-strong);
    min-height: 100vh;
    background: linear-gradient(180deg, rgba(201,166,90,0.02), transparent 200px);
  }
  @media (max-width: 1000px){ .preview-col{ position:static; border-left:none; border-top:1px solid var(--line-strong); min-height:auto; } }

  .card{
    background: var(--panel); border:1px solid var(--line); border-radius:3px;
    padding: 20px 22px 22px; margin-bottom: 18px;
    position:relative;
  }
  .card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg, transparent, var(--gold-3), transparent); opacity:0.5;
  }
  .card > summary{
    cursor:pointer; list-style:none; display:block;
  }
  .card > summary::-webkit-details-marker{ display:none; }
  .card > summary::marker{ content:""; }
  .card h2{
    font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-1);
    display:flex; align-items:center; gap:12px; margin-bottom: 16px; font-weight:600;
  }
  .card > summary h2{ margin-bottom:0; }
  .card[open] > summary h2{ margin-bottom:16px; }
  .card h2::before{ content:"◆"; color:var(--gold-2); font-size:8px; transition:transform .15s; flex-shrink:0; }
  .card[open] > summary h2::before{ transform:rotate(90deg); }
  .card > summary:hover h2{ color:var(--gold-2); }
  .card h2 .num{ font-family:'IBM Plex Mono',monospace; color:var(--gold-3); font-size:11px; border:1px solid var(--gold-3); padding:2px 6px; border-radius:2px; }
  .card h2 .sub{ margin-left:auto; font-family:'Jost',sans-serif; text-transform:none; letter-spacing:0; color:var(--text-faint); font-size:11px; font-weight:400; }

  .field{ margin-bottom: 15px; }
  .field:last-child{ margin-bottom:0; }
  .field label{
    display:block; font-size:12.5px; color:var(--text); margin-bottom:5px; font-weight:500; letter-spacing:0.01em;
  }
  .field .hint{ font-size:11px; color:var(--text-dim); margin-top:5px; line-height:1.5; }
  .field .hint.warn{ color: var(--danger); }
  .field .hint.good{ color: var(--ok); }
  .field input[type=number], .field input[type=text], .field select{
    width:100%; background: var(--panel-2); border:1px solid var(--line-strong);
    color: var(--text); padding: 10px 11px; border-radius:2px; font-size:13.5px;
    font-family:'IBM Plex Mono', monospace;
  }
  .field input:focus, .field select:focus{ outline:none; border-color: var(--gold-2); }
  .field select{ appearance:none; background-image: linear-gradient(45deg, transparent 50%, var(--gold-2) 50%), linear-gradient(135deg, var(--gold-2) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat:no-repeat; }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
  .unit{ color:var(--text-dim); font-size:11.5px; margin-left:6px; }

  .field input[type=range]{ width:100%; accent-color: var(--gold-2); }
  .field input[type=range]:disabled{ accent-color: var(--text-faint); opacity: 0.45; cursor: not-allowed; }
  .range-val{ font-family:'IBM Plex Mono',monospace; color:var(--gold-1); font-size:12px; }

  .toggle-group{ display:flex; border:1px solid var(--line-strong); border-radius:2px; overflow:hidden; }
  .toggle-group button{
    flex:1; background:var(--panel-2); color:var(--text-dim); border:none; padding:9px 10px;
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; cursor:pointer; letter-spacing:0.03em;
    border-right:1px solid var(--line-strong);
  }
  .toggle-group button:last-child{ border-right:none; }
  .toggle-group button.active{ background: linear-gradient(180deg, var(--gold-2), var(--gold-3)); color:#1a1206; font-weight:600; }
  .toggle-group button:disabled{ opacity:0.4; cursor:not-allowed; }

  details.advanced{ background:var(--panel); border:1px solid var(--line); border-radius:3px; padding: 16px 22px; margin-bottom:18px; }
  details.advanced > summary{ cursor:pointer; list-style:none; display:block; }
  details.advanced > summary::-webkit-details-marker{ display:none; }
  details.advanced > summary::marker{ content:""; }
  details.advanced h2{
    font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); margin:0;
    display:flex; align-items:center; gap:9px; font-family:'Jost',sans-serif; font-weight:500;
  }
  details.advanced h2 .num{ font-family:'IBM Plex Mono',monospace; color:var(--gold-3); font-size:11px; border:1px solid var(--gold-3); padding:2px 6px; border-radius:2px; text-transform:none; letter-spacing:normal; }
  details.advanced h2::before{ content:"◆"; color:var(--gold-2); font-size:8px; transition:transform .15s; flex-shrink:0; }
  details.advanced[open] > summary h2::before{ transform:rotate(90deg); }
  details.advanced .adv-grid{ margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:15px; }
  @media (max-width:600px){ details.advanced .adv-grid{ grid-template-columns:1fr; } }

  .note-box{
    background: rgba(201,166,90,0.05); border:1px solid var(--line-strong); border-radius:2px;
    padding:12px 14px; font-size:11.5px; color:var(--text-dim); line-height:1.6; margin-top:10px;
  }
  .note-box b{ color: var(--gold-1); font-weight:600; }
  .note-box.warn{ border-color: rgba(201,106,78,0.5); background: rgba(201,106,78,0.06); color:#d8b8ac; }

  .checkline{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .checkline input[type=checkbox]{ width:16px; height:16px; accent-color: var(--gold-2); }
  .checkline label{ font-size:13px; color:var(--text); font-weight:500; }

  /* preview */
  .stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:18px; }
  @media (max-width:700px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
  .stat{ background:var(--panel); border:1px solid var(--line); border-radius:2px; padding:10px 12px; }
  .stat.full{ grid-column: 1/-1; }
  .stat .label{ font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.07em; }
  .stat .value{ font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--gold-1); margin-top:4px; }
  .stat .value small{ color:var(--text-dim); font-size:10.5px; }
  .stat .value.flag-ok{ color: var(--ok); }
  .stat .value.flag-warn{ color: var(--danger); }

  .schematic-wrap{ background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:14px; margin-bottom:14px; }
  .schematic-wrap .tag{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-3); margin-bottom:8px; }
  .schematic-wrap svg{ width:100%; height:auto; display:block; }
  #schematicTop{ cursor: ew-resize; }
  .legend{ display:flex; flex-wrap:wrap; gap: 9px 14px; margin-top:12px; font-size:10.5px; color:var(--text-dim); }
  .legend span{ display:inline-flex; align-items:center; gap:6px; }
  .swatch{ width:9px; height:9px; border-radius:50%; display:inline-block; }
  .schematic-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin:16px 0; }
  .schematic-grid .schematic-wrap{ margin-bottom:0; }

  /* angle status colours */
  .range-val.status-ref{ color: var(--ok); }
  .range-val.status-ext{ color: #d9b25f; }
  .range-val.status-out{ color: var(--danger); }
  .field .refband{ font-size:10.5px; color:var(--text-faint); margin-top:3px; }

  /* lock switch */
  .lockrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:5px; }
  .lockrow label{ margin-bottom:0; }
  .lockswitch{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; }
  .lockswitch input{ display:none; }
  .lockswitch .track{
    width:30px; height:16px; border-radius:9px; background:var(--panel-2); border:1px solid var(--line-strong);
    position:relative; transition:background .15s, border-color .15s;
  }
  .lockswitch .track::after{
    content:""; position:absolute; top:1px; left:1px; width:12px; height:12px; border-radius:50%;
    background: var(--text-faint); transition: transform .15s, background .15s;
  }
  .lockswitch input:checked + .track{ background: rgba(201,166,90,0.18); border-color:var(--gold-2); }
  .lockswitch input:checked + .track::after{ transform:translateX(14px); background: var(--gold-1); }
  .lockswitch .locklabel{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em; }
  .lockswitch input:checked ~ .locklabel{ color:var(--gold-2); }

  button.primary{
    width:100%; background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3)); color:#1a1206; border:none; border-radius:2px;
    padding: 13px 16px; font-family:'Cinzel',serif; font-weight:600; font-size:13px;
    cursor:pointer; letter-spacing:0.08em; text-transform:uppercase;
  }
  button.primary:hover{ filter:brightness(1.08); }
  button.secondary{
    width:100%; margin-top:9px; background:transparent; color:var(--gold-2); border:1px solid var(--gold-3);
    border-radius:2px; padding:10px 16px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; cursor:pointer; letter-spacing:0.03em;
  }
  button.secondary:hover{ border-color:var(--gold-2); }

  pre.json-preview{
    display:none; background:#0a0906; border:1px solid var(--line); border-radius:2px;
    padding:12px; font-size:10.5px; color:var(--text-dim); overflow:auto; max-height:260px; margin-top:10px;
    font-family:'IBM Plex Mono',monospace; line-height:1.5;
  }
  pre.json-preview.show{ display:block; }

  select.custom-trigger + input{ margin-top:8px; }

  footer.brand-foot{ padding: 24px 32px 40px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
  footer.brand-foot .brand-foot-row{ display:flex; align-items:center; gap:14px; }
  footer.brand-foot span{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-faint); letter-spacing:0.05em; }
  footer.brand-foot .brand-foot-copyright{ font-size:10px; opacity:0.7; }

  /* modals */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(5,4,3,0.82); backdrop-filter: blur(3px);
    z-index:1000; align-items:center; justify-content:center; padding:24px;
  }
  .modal-overlay.show{ display:flex; }
  .modal-panel{
    background:var(--panel); border:1px solid var(--line-strong); border-radius:4px;
    width:100%; max-width:900px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  }
  .modal-panel-design{ max-width:560px; }
  .modal-head{
    display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
    border-bottom:1px solid var(--line-strong); background: linear-gradient(180deg, #14110b, transparent);
  }
  .modal-title{ font-family:'Cinzel',serif; font-weight:600; font-size:14px; letter-spacing:0.04em; color:var(--gold-1); }
  .modal-close{
    background:transparent; border:1px solid var(--line-strong); color:var(--text-dim); border-radius:2px;
    width:30px; height:30px; cursor:pointer; font-size:13px; line-height:1;
  }
  .modal-close:hover{ color:var(--gold-1); border-color:var(--gold-2); }
  .modal-body{ padding:20px; overflow-y:auto; }
  #canvas3DContainer{ width:100%; height:min(64vh, 560px); position:relative; background:#050403; }
  #canvas3DContainer canvas{ display:block; }

  /* PDF generating overlay — shown while buildPdfReport()/buildStarCeilingLayoutPdf() run; a spinning
     Starz star (not the full logo, which has a wordmark under the star that would look broken spinning),
     since the combined report can now take a few minutes and needs something more visible than a static
     button label to show it's genuinely still working. Above modals (z-index 1000) since PDF generation
     can in principle be triggered while one is open. */
  .pdf-generating-overlay{
    display:none; position:fixed; inset:0; z-index:2000;
    background:rgba(8,7,4,0.9); backdrop-filter: blur(2px);
    flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:24px;
  }
  .pdf-generating-overlay.show{ display:flex; }
  .pdf-generating-star{ width:84px; height:84px; animation: pdfStarSpin 1.7s linear infinite; filter: drop-shadow(0 0 10px rgba(201,162,78,0.5)); }
  @keyframes pdfStarSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  .pdf-generating-text{ font-family:'Cinzel',serif; font-weight:600; font-size:15px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-1); }
  .pdf-generating-hint{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-faint); max-width:320px; }

  /* 3D full screen mode — only the title bar and viewport remain; every toggle/legend row hides */
  #modal3D.fs3d{ padding:0; background:#050403; }
  #modal3D.fs3d .modal-panel{ max-width:100vw; width:100vw; max-height:100vh; height:100vh; border-radius:0; border:none; box-shadow:none; }
  #modal3D.fs3d .legend{ display:none !important; }
  #modal3D.fs3d #canvas3DContainer{ flex:1 1 auto; height:auto; }

  #coverPage{
    position:fixed; inset:0; z-index:1000;
    background:#000;
    /* align-items was "center" — fine while the cover was short enough to always fit the viewport,
       but now that the intro/highlights below the button make it much taller on smaller windows, a
       vertically-centered overflow shows the middle of the stack by default, clipping the logo off
       the top with no obvious way to scroll up to it. Top-aligning instead means the page always
       loads showing the logo first, with the rest reachable by scrolling down. */
    display:flex; align-items:flex-start; justify-content:center;
    overflow-y:auto; overflow-x:hidden;
  }
  #coverSky{ position:absolute; top:0; left:0; width:100%; height:100%; display:block; }
  #coverContent{
    position:relative; z-index:2; width:100%;
    display:flex; flex-direction:column; align-items:center;
    text-align:center; padding:56px 32px 40px; max-width:1300px;
  }
  #coverLogo{
    /* Doubled from the original min(78vw,620px) cap. The source artwork itself has large
       built-in transparent margins (roughly a third of the image height on both top and
       bottom), so proportional negative margins on both sides collapse that invisible space
       away — otherwise the top padding alone pushes the whole visible block (logo art, title,
       description, button) down toward the bottom of the screen, since #coverPage centers the
       full box including that empty space, not just what's actually visible in it. */
    width:min(92vw, 1240px); height:auto; display:block; margin:-33% auto -32%;
    opacity:0; transform:scale(0.85);
    filter: drop-shadow(0 0 32px rgba(212,175,106,0.25));
    animation: coverLogoIn 1.6s cubic-bezier(0.16,0.9,0.3,1) 0.2s forwards;
  }
  #coverTitle{
    font-family:'Cinzel', serif; font-weight:600; color:var(--text, #eee);
    font-size:clamp(22px, 4vw, 34px); letter-spacing:0.03em; margin:0 0 6px;
    opacity:0; transform:translateY(10px);
    animation: coverFadeUp 1s ease 1.1s forwards;
  }
  #coverEyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.24em;
    color: var(--gold-2, #c9a65a); text-transform:uppercase; margin-bottom:10px;
    opacity:0; transform:translateY(10px);
    animation: coverFadeUp 1s ease 1.4s forwards;
  }
  #coverDesc{
    font-family:'Jost', sans-serif; color:var(--text-dim, #b8b3a8); font-size:13px;
    line-height:1.6; max-width:520px; margin:0 0 20px;
    opacity:0; transform:translateY(10px);
    animation: coverFadeUp 1s ease 1.65s forwards;
  }
  #enterBtn{
    font-family:'Cinzel', serif; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
    font-size:13px; color:#0a0806; background:linear-gradient(180deg, var(--gold-1,#e8c988), var(--gold-3,#a3823f));
    border:none; padding:14px 46px; border-radius:2px; cursor:pointer;
    box-shadow:0 0 0 1px rgba(212,175,106,0.4), 0 8px 24px rgba(212,175,106,0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    opacity:0; transform:translateY(10px);
    animation: coverFadeUp 1s ease 1.9s forwards;
  }
  #enterBtn:hover{ transform:translateY(-1px); box-shadow:0 0 0 1px rgba(212,175,106,0.6), 0 10px 28px rgba(212,175,106,0.3); }
  #enterBtn:active{ transform:translateY(0); }

  #coverIntro{
    font-family:'Jost', sans-serif; color:var(--text-dim, #b8b3a8); font-size:13px;
    line-height:1.7; max-width:640px; margin:32px 0 0; text-align:left;
    padding-top:24px; border-top:1px dashed rgba(212,175,106,0.25);
    opacity:0; transform:translateY(10px);
    animation: coverFadeUp 1s ease 2.15s forwards;
  }
  #coverIntro p{ margin:0 0 14px; }
  #coverIntro p:last-child{ margin-bottom:0; }
  #coverHighlights{
    font-family:'Jost', sans-serif; color:var(--text-dim, #b8b3a8); font-size:12.5px;
    line-height:1.5; max-width:640px; margin:22px 0 0; text-align:left;
    list-style:none; padding:0;
    opacity:0; transform:translateY(10px);
    animation: coverFadeUp 1s ease 2.4s forwards;
  }
  #coverHighlights li{ position:relative; padding-left:20px; margin-bottom:8px; }
  #coverHighlights li:last-child{ margin-bottom:0; }
  #coverHighlights li::before{
    content:'\2726'; position:absolute; left:0; top:0; color:var(--gold-2, #c9a65a); font-size:11px;
  }

  @keyframes coverLogoIn{ to{ opacity:1; transform:scale(1); } }
  @keyframes coverFadeUp{ to{ opacity:1; transform:translateY(0); } }

  #coverPage.hide{ animation: coverFadeOut 0.5s ease forwards; pointer-events:none; }
  @keyframes coverFadeOut{ to{ opacity:0; } }