:root{
  color-scheme:dark;
  --bg:#07040c;
  --panel:#0e0915;
  --panel-2:#15101d;
  --line:#332342;
  --text:#f6f0fb;
  --muted:#b8a9c6;
  --purple:#b83cff;
  --purple-soft:#7d22b8;
  --green:#43e89c;
  --red:#ff657a;
}
*{box-sizing:border-box}
/* Stage 3B.4: class display rules otherwise override the HTML hidden attribute. */
[hidden],.loading[hidden],.error[hidden]{display:none!important}

html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
body{min-height:100vh}
button,input{font:inherit}
.viewer-shell{min-height:100vh;display:flex;flex-direction:column}
.viewer-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:20px 24px;border-bottom:1px solid var(--line);background:#09060e}
.viewer-header h1{margin:3px 0 4px;font-size:clamp(20px,2.4vw,30px)}
.viewer-header p{margin:0;color:var(--muted)}
.eyebrow{color:var(--purple);font-size:12px;font-weight:800;letter-spacing:.14em}
.status-group{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.badge{border:1px solid var(--line);border-radius:999px;padding:7px 11px;background:var(--panel-2);font-size:12px;font-weight:700}
.badge.safe{border-color:#1d7650;color:var(--green);background:#0b241b}
.viewer-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:0}
.viewport-panel{position:relative;min-height:560px;overflow:hidden;background:radial-gradient(circle at 50% 42%,#1d1029 0,#0b0711 47%,#050308 100%)}
#viewer-canvas{display:block;width:100%;height:100%;min-height:560px;touch-action:none;cursor:grab;outline:none}
#viewer-canvas:active{cursor:grabbing}
.loading,.error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:rgba(6,3,10,.82)}
.loading span{color:var(--muted)}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid #362044;border-top-color:var(--purple);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.error{color:#ffe8ec;background:rgba(42,5,14,.9)}
.axis-key{position:absolute;left:16px;bottom:14px;display:flex;gap:12px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(8,5,12,.82);font-size:12px}
.axis-key span{display:flex;align-items:center;gap:5px}.axis-key i{display:block;width:12px;height:3px;border-radius:3px}.axis-x{background:var(--red)}.axis-y{background:var(--green)}.axis-z{background:var(--purple)}
.controls-panel{padding:20px;border-left:1px solid var(--line);background:var(--panel);overflow:auto}
.controls-panel section+section{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.controls-panel h2{margin:0 0 12px;font-size:16px}
.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
button{border:1px solid #5d3672;border-radius:10px;padding:10px 12px;color:var(--text);background:#251331;font-weight:750;cursor:pointer}
button:hover{border-color:var(--purple);background:#321641}
button:focus-visible,input:focus-visible{outline:3px solid rgba(184,60,255,.45);outline-offset:2px}
.toggle-row{display:flex;align-items:center;gap:10px;margin-top:13px;color:var(--muted);cursor:pointer}
.toggle-row input{width:18px;height:18px;accent-color:var(--purple)}
.facts{margin:0}.facts div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #251a30}.facts dt{color:var(--muted)}.facts dd{margin:0;text-align:right;font-weight:750}
.safety-note{padding:14px!important;border:1px solid #20573f!important;border-radius:12px;background:#0a2018}.safety-note strong{color:var(--green)}.safety-note p{margin:7px 0 0;color:#c2d9ce;font-size:13px;line-height:1.45}
@media(max-width:860px){.viewer-header{flex-direction:column}.status-group{justify-content:flex-start}.viewer-main{grid-template-columns:1fr}.viewport-panel,#viewer-canvas{min-height:58vh}.controls-panel{border-left:0;border-top:1px solid var(--line)}}
.section-note{margin:-4px 0 12px;color:var(--muted);font-size:13px;line-height:1.4}
.download-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.download-button{display:block;border:1px solid #2a7a55;border-radius:10px;padding:11px 12px;color:var(--green);background:#0c261c;font-weight:800;text-align:center;text-decoration:none}
.download-button:hover{border-color:var(--green);background:#103425}
.download-button.primary{border-color:#7c34a3;color:#fff;background:#351442}
.download-button.primary:hover{border-color:var(--purple);background:#48195a}
.back-link{display:inline-block;margin-top:12px;color:var(--muted);font-size:13px;text-decoration:none}
.back-link:hover{color:var(--text)}
.toggle-row small{color:#8f7f9d}