:root{
    --paper:#f4f0e6;
    --paper-2:#fffbee;
    --ink:#111;
    --ink-soft:#444;
    --rust:#E94326;
    --aqua:#23A2B5;
    --line:#111;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{background-color:var(--paper);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
    color:var(--ink);
    font-family:'IBM Plex Mono',monospace;-webkit-font-smoothing:antialiased;
    height:100%;overflow:hidden;}
  body { display:flex;flex-direction:column; }



  /* ---------- 3D viewport ---------- */
  #viewport{position:relative;z-index:10;height:45vh;min-height:250px;background:#8cbbe6;overflow:hidden;flex:none;border-bottom:3px solid var(--line)}
  #scene{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
  .cross{position:absolute;color:rgba(127,209,201,.5);font-size:26px;line-height:1;
    pointer-events:none;font-family:'IBM Plex Mono',monospace}
  .cross.tl{top:8px;left:12px}.cross.tr{top:8px;right:12px}
  .cross.bl{bottom:8px;left:12px}.cross.br{bottom:8px;right:12px}
  #hudCard{position:absolute;top:10px;left:10px;width:190px;
    background:rgba(74,90,99,.92);color:#EDF2F1;border-radius:4px;
    padding:12px 14px;box-shadow:0 4px 16px rgba(0,0,0,.45);
    transform:scale(0.7);transform-origin:top left;}
  #hudCard label{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
    color:#B9C6C4;margin-bottom:3px}
  #hudCard b{display:block;font-size:19px;font-weight:600;margin-bottom:7px}
  #hudCard b.sm{font-size:15px;margin-bottom:0}
  #hudCard .bar{height:4px;background:rgba(255,255,255,.25);border-radius:2px;
    overflow:hidden;margin-bottom:11px}
  #hudCard .bar i{display:block;height:100%;background:#63d08e;width:0%}
  #caption{position:absolute;bottom:12px;right:12px;background:rgba(35,46,53,.9);
    color:#DFE7E5;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
    padding:6px 11px;border-radius:3px;pointer-events:none}
  #valve{position:absolute;top:14px;right:14px;padding:5px 9px;border:1px solid #E8B44A;
    color:#E8B44A;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
    background:rgba(11,29,38,.8);opacity:0;transition:opacity .3s;pointer-events:none;
    display:flex;align-items:center;gap:7px;border-radius:3px}
  #valve .dot{width:7px;height:7px;border-radius:50%;background:#E8B44A;animation:blink 1s infinite}
  @keyframes blink{50%{opacity:.2}}
  #hint{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:8.5px;
    color:rgba(242,234,217,.55);letter-spacing:.12em;text-transform:uppercase;
    pointer-events:none;transition:opacity 1s}
  @media (max-width:899px){ #caption { display: none; } }

  /* ---------- instrument panel ---------- */
  #panel{padding:20px 16px 40px;max-width:780px;margin:0 auto;width:100%;flex:1;overflow-y:auto;overscroll-behavior-y:contain;-ms-overflow-style:none;scrollbar-width:none;}
  #panel::-webkit-scrollbar { display: none; }
  #panel h2{font-family:Georgia,'Times New Roman',serif;font-size:30px;font-weight:700;
    margin-bottom:4px}
  #panel .lede{color:var(--ink-soft);font-size:12.5px;line-height:1.5;margin-bottom:16px;
    font-family:Georgia,serif;font-style:italic}

  /* tabs / controls */
  #controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
  .tab{font-family:Georgia,serif;font-style:italic;font-size:14px;
    background:var(--paper-2);color:var(--ink);border:2px solid var(--line);
    padding:9px 14px;cursor:pointer;border-radius:0px;flex:1 1 28%;min-width:0;
    box-shadow: 3px 3px 0px var(--line); transition: transform 0.1s, box-shadow 0.1s;}
  .tab:active{transform:translate(3px, 3px);box-shadow: 0px 0px 0px var(--line);}
  .tab.active{background:var(--rust);border-color:var(--line);color:#fff;
    font-weight:700;font-style:normal;transform:translate(3px, 3px);box-shadow: 0px 0px 0px var(--line);}
  .execute-btn{flex:none; width:100%; margin-bottom:4px; font-size:15px; padding:12px;}

  .kicker{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--rust);
    font-weight:600;margin:20px 0 10px}

  /* readout cards */
  #cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .card{background-color:var(--paper-2);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    border:2px solid var(--line);border-radius:0px;
    padding:12px 14px;box-shadow: 4px 4px 0px var(--line)}
  .card label{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:5px}
  .card b{font-size:20px;font-weight:600;color:var(--rust);letter-spacing:.04em}
  .card.aqua b{color:var(--aqua)}

  /* sequence */
  #stepline{display:flex;align-items:center;gap:10px;margin-bottom:6px}
  #stepnum{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
    white-space:nowrap;font-weight:600}
  #progress{flex:1;height:8px;background:var(--paper-2);position:relative;overflow:hidden;border:2px solid var(--line);border-radius:0px}
  #progress i{position:absolute;inset:0;right:auto;background:var(--rust);width:0%;border-right:2px solid var(--line)}
  #steplabel{font-family:Georgia,serif;font-size:20px;font-weight:700;margin:4px 0 8px;
    text-transform:none}
  #stepdesc{font-size:13px;line-height:1.65;color:var(--ink)}
  #fact{margin-top:12px;padding:10px 12px;border:2px solid var(--line);
    background-color:var(--paper-2);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    font-size:12px;line-height:1.55;color:#111;box-shadow: 4px 4px 0px var(--line)}
  #fact b{color:var(--rust)}
  footer{margin-top:28px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink-soft);text-align:center}

  /* ---------- large screens: full-height 3D + fixed right sidebar ---------- */
  @media (min-width:900px){
    html,body{height:100%;min-height:650px;overflow:hidden;}
    body{display:grid;grid-template-columns:1fr 400px;grid-template-rows:1fr}
    #viewport{grid-column:1;grid-row:1;height:auto;min-height:0;border-bottom:none}
    #panel{grid-column:2;grid-row:1;overflow-y:auto;max-width:none;margin:0;
      border-left:1px solid var(--line);padding:18px 20px 48px;background:var(--paper);width:auto;}
    #panel h2{font-size:22px}
    #panel .lede{font-size:11.5px;margin-bottom:12px}
    .tab{flex:1 1 30%;font-size:13px;padding:8px 8px}
    #cards{grid-template-columns:1fr 1fr}
    .card b{font-size:17px}
    #hudCard{width:210px;transform:none;top:16px;left:16px;}
  }
  @media (min-width:1500px){
    body{grid-template-columns:1fr 460px}
  }