:root { color-scheme: dark; --bg:#061016; --panel:rgba(9,20,27,.94); --line:rgba(180,220,231,.16); --text:#eaf5f7; --muted:#9eb4bc; --accent:#5ddebF; }
* { box-sizing:border-box; }
html,body,.surface-app { width:100%; height:100%; margin:0; overflow:hidden; }
body { color:var(--text); background:var(--bg); font:13px/1.35 Inter,ui-sans-serif,system-ui,sans-serif; }
.surface-app { display:flex; flex-direction:column; }
.surface-toolbar { position:relative; z-index:3; display:flex; align-items:flex-end; flex-wrap:wrap; gap:9px 16px; min-height:68px; padding:9px 14px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(13,35,43,.98),rgba(6,17,23,.98)); box-shadow:0 10px 28px rgba(0,0,0,.25); }
.surface-identity { display:grid; gap:1px; min-width:190px; margin-right:auto; }
.surface-identity strong { font-size:18px; }
.eyebrow { color:var(--accent); font-size:9px; font-weight:800; letter-spacing:.11em; }
label { display:grid; gap:3px; color:var(--muted); font-size:10px; }
label.check { display:flex; align-items:center; min-height:34px; color:var(--text); font-size:12px; }
select,button { min-height:34px; padding:5px 9px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:rgba(255,255,255,.06); font:inherit; }
button { cursor:pointer; } button:hover { background:rgba(255,255,255,.12); }
input[type=range] { width:130px; accent-color:var(--accent); }
.surface-stage { position:relative; flex:1; min-height:0; background:radial-gradient(circle at 50% 25%,#14303a 0,transparent 45%),#061016; }
#surface-canvas { display:block; width:100%; height:100%; outline:none; }
.axis-contract,.surface-metrics,.surface-readout,.surface-loading { position:absolute; z-index:2; border:1px solid var(--line); border-radius:9px; background:rgba(3,10,14,.78); backdrop-filter:blur(10px); box-shadow:0 8px 24px rgba(0,0,0,.25); }
.axis-contract { top:12px; left:12px; padding:6px 9px; color:var(--muted); font:10px ui-monospace,monospace; }
.surface-metrics { top:12px; right:12px; display:grid; grid-template-columns:repeat(2,minmax(110px,1fr)); gap:1px; margin:0; padding:5px; }
.surface-metrics div { padding:6px 8px; border-radius:6px; background:rgba(255,255,255,.035); }
.surface-metrics dt { color:var(--muted); font-size:9px; }.surface-metrics dd { margin:2px 0 0; font-weight:750; font-variant-numeric:tabular-nums; }
.surface-readout { left:12px; bottom:12px; padding:7px 10px; color:#d9f6ee; font-variant-numeric:tabular-nums; }
.surface-loading { inset:50% auto auto 50%; padding:12px 16px; color:#dff8f1; transform:translate(-50%,-50%); }
.surface-loading.error { color:#ffd0c8; border-color:rgba(255,121,95,.48); }
.surface-loading[hidden] { display:none; }
@media(max-width:760px){.surface-toolbar{max-height:132px;overflow:auto}.surface-identity{width:100%}.surface-metrics{top:auto;bottom:48px;grid-template-columns:1fr}.axis-contract{display:none}.surface-readout{right:12px;font-size:10px}}