/* Fonts are progressive enhancement only; preview remains functional offline. */
:root{color-scheme:dark;--bg:#070b12;--panel:#0c131c;--accent:#7fe7de;--muted:#748291;--line:#23313b;--text:#ebf4f4}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:'DM Sans',Inter,Arial,sans-serif}
body{background:radial-gradient(ellipse at 43% 32%,#0c1a25 0%,transparent 51%),#070b12}button,input,select{font:inherit}button{cursor:pointer}
.app{min-height:100vh;max-width:1800px;margin:auto}.masthead{height:69px;border-bottom:1px solid #1d2a33;display:flex;align-items:center;justify-content:space-between;padding:0 42px;gap:20px}
.brand{display:flex;align-items:center;gap:13px;letter-spacing:.15em;font-size:11px;font-weight:500;white-space:nowrap}.brand b{font-weight:700;color:var(--accent)}.brand-icon{font-size:30px;color:var(--accent);line-height:1}.brand-sep{height:18px;width:1px;background:#2c3e45;margin:0 5px}.label-lab{color:#6b8a92;font-size:10px}
.top-actions{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:700;letter-spacing:.11em;color:#8da0a9;white-space:nowrap}.live-led,.dot{width:6px;height:6px;border-radius:50%;background:#6ee6b7;box-shadow:0 0 10px #6ee6b7;display:inline-block}.header-rule{width:1px;height:15px;background:#34444d;margin:0 14px}
.main-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:calc(100vh - 69px)}.viewer-section{min-width:0;padding:39px 44px 30px 44px}
.title-group{padding-bottom:24px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.21em;color:#77b8bb}.thin{color:#3b5760;margin:0 8px}.title-group h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(37px,4vw,61px);font-weight:600;letter-spacing:-.063em;margin:11px 0 3px;line-height:1.02}.title-group h1 em{font-style:normal;font-weight:400;color:var(--accent)}.title-group p{font-size:12px;color:#8b9da8;margin:12px 0 0;letter-spacing:.025em}
.viewport-shell{position:relative;height:min(57vh,590px);min-height:420px;background:radial-gradient(ellipse at 50% 40%,#102532 0%,#071019 69%);border:1px solid #253843;overflow:hidden}
#viewport{display:block;width:100%;height:100%;outline:none}.top-viewport{position:absolute;pointer-events:none;left:25px;right:25px;top:20px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.16em;color:#73939e}.corner-symbol{color:#7ce6da;margin-right:6px;font-size:13px}
.left-ruler{pointer-events:none;position:absolute;left:22px;top:26%;bottom:22%;display:flex;justify-content:space-between;flex-direction:column;color:#536877;font-size:9px;font-family:monospace}.left-ruler span::before{content:'─';margin-right:7px;color:#4a6772}
.viewport-foot{position:absolute;bottom:19px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}.viewport-foot strong{font-size:10px;letter-spacing:.16em;display:block;color:#abece3;margin-bottom:7px}.subtle{color:#526c78;font-size:9px;letter-spacing:.12em}.realtime{display:flex;gap:7px;align-items:baseline;font-family:monospace}.realtime span{font-size:14px;color:#d7f7f1}.realtime small{font-size:9px;color:#5f8991;margin-right:6px}.divider-small{width:1px;height:12px;background:#39505b;margin:0 8px}
.viewport-controls{display:flex;align-items:center;position:absolute;left:50%;bottom:18px;transform:translateX(-50%);gap:7px}.viewport-controls button{height:42px;border:1px solid #355b63;color:#d6f5f1;background:#0a1922d8;font-size:16px;min-width:42px;transition:.16s}.viewport-controls button:hover{background:#173743}.viewport-controls .primary-action{font-size:10px;font-weight:700;letter-spacing:.1em;background:#92e5dd;color:#081d22;padding:0 21px;border:1px solid #92e5dd;white-space:nowrap}.viewport-controls .primary-action:hover{background:#c6fff5}
.bottom-notes{display:flex;justify-content:space-between;padding:15px 0 22px;color:#6d8b95;font-size:9px;letter-spacing:.12em;border-bottom:1px solid #253440}.bottom-notes .dot{margin-right:4px;width:5px;height:5px}
.specifications{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-top:24px}.specifications>div{border-left:1px solid #2a4b50;padding-left:13px;display:flex;flex-direction:column;gap:7px}.specifications small{font-size:9px;color:#5e969b;letter-spacing:.13em}.specifications strong{font-size:10px;letter-spacing:.07em;color:#cedce3}.specifications span{color:#6e8693;font-size:11px}
.inspector{background:linear-gradient(125deg,#0d1721 0%,#0b121b 100%);border-left:1px solid #20313b;padding:37px 27px 25px;display:flex;flex-direction:column}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}.panel-header h2{font-family:'Space Grotesk',sans-serif;font-size:26px;letter-spacing:-.05em;font-weight:500;margin:9px 0 0}.panel-header h2 span{font-size:15px;color:#6b979b}.param-count{font-size:9px;border:1px solid #2d454f;color:#8197a1;padding:7px 9px;letter-spacing:.08em}.section-head{border-bottom:1px solid #2e3e48;padding-bottom:11px;color:#68b9be;font-family:monospace;font-size:10px;letter-spacing:.15em}.section-head span{color:#c1dadb;margin-left:14px;font-size:9px;font-family:'DM Sans',sans-serif;font-weight:700}.section-head.second{margin-top:25px}.section-head.third{margin-top:25px}
.presets{display:flex;gap:5px;margin-top:16px}.preset{height:34px;flex:1;background:#121f2a;color:#718f9a;border:1px solid #2b3f49;font-size:9px;font-weight:700;letter-spacing:.07em}.preset:hover{border-color:#679995}.preset.active{color:#0a2d30;background:#91e2d9;border-color:#91e2d9}
.control{margin-top:18px}.control label{display:flex;justify-content:space-between;font-size:11px;color:#b4c6cb;margin-bottom:10px}.control output{color:#a8ece6;font-family:monospace;font-size:11px}input[type=range]{appearance:none;width:100%;height:3px;background:#27434b;display:block;outline:0;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;background:#95e8df;border-radius:50%;box-shadow:0 0 0 3px #172a33}input[type=range]::-moz-range-thumb{width:11px;height:11px;background:#95e8df;border:0;border-radius:50%}
.color-row,.select-row,.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:20px;font-size:11px;color:#b4c6cb}.color-row input{width:48px;height:25px;padding:0;border:1px solid #4d6d75;background:transparent;cursor:pointer}.select-row{margin-top:16px}.select-row select{width:166px;height:30px;padding:0 8px;background:#12232b;color:#b5d2d4;border:1px solid #304751;font-size:9px;letter-spacing:.045em;outline:none}.toggle-row{margin-top:19px}.toggle-row strong,.toggle-row span{display:block}.toggle-row span{font-size:10px;color:#65818d;margin-top:3px}.switch{position:relative;display:block;width:34px;height:19px}.switch input{opacity:0}.switch-ui{position:absolute;inset:0;border-radius:20px;background:#263b44;cursor:pointer}.switch-ui:before{content:'';position:absolute;height:13px;width:13px;left:3px;top:3px;border-radius:50%;background:#81929b;transition:.15s}.switch input:checked+.switch-ui{background:#2c7777}.switch input:checked+.switch-ui:before{transform:translateX(15px);background:#9aeee3}
.audio-btn{margin-top:24px;width:100%;height:43px;background:#12252d;color:#8fdbd5;border:1px solid #2d6d70;font-size:10px;font-weight:700;letter-spacing:.1em}.audio-btn:hover{background:#1c373d}.audio-btn.active{color:#081c21;background:#83ddd2}.inspector-end{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #2c3f47;margin-top:auto;padding-top:22px;font-size:9px;letter-spacing:.05em;color:#668490}.inspector-end b{color:#b9e7df;font-family:monospace;margin-left:5px}
@media(max-width:1000px){.main-layout{grid-template-columns:minmax(0,1fr) 310px}.viewer-section{padding:35px 25px}.inspector{padding:32px 19px}.viewport-controls{bottom:72px}.viewport-foot{bottom:15px}}
@media(max-width:720px){.masthead{padding:0 18px;height:58px}.brand{font-size:10px;gap:7px}.top-actions{display:none}.main-layout{grid-template-columns:1fr}.viewer-section{padding:24px 16px}.title-group h1{font-size:41px}.viewport-shell{height:57vh;min-height:380px}.viewport-controls{bottom:62px}.viewport-controls .primary-action{padding:0 11px}.viewport-foot{left:13px;right:13px}.left-ruler{display:none}.specifications{gap:7px}.specifications strong{font-size:9px}.specifications span{font-size:9px}.inspector{border-left:none;border-top:1px solid #243941;padding:25px 22px;gap:0}.inspector-end{margin-top:38px}.title-group p{line-height:1.5}}