:root{color-scheme:dark;--bg:#0e141b;--panel:#11181e;--hair:#303a40;--text:#eaf0ef;--muted:#8c9a9f;--gold:#d9ae68}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:var(--bg);font-family:Manrope,'Segoe UI',sans-serif;color:var(--text)}
#app{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 370px}
#stage{position:relative;min-width:0;height:100vh;overflow:hidden;background:radial-gradient(ellipse at 51% 34%,#28343d,#111a23 66%,#0d1218 100%)}
#viewport{width:100%;height:100%;display:block;outline:0;touch-action:none}
.stage-top,.stage-bottom{pointer-events:none;position:absolute;left:35px;right:35px;display:flex;justify-content:space-between;align-items:center;gap:18px}
.stage-top{top:29px}.stage-bottom{bottom:29px;font-size:9px;letter-spacing:.19em;color:#abb5b7;opacity:.75}
.brandmark{font-size:13px;letter-spacing:.23em;font-weight:800;color:white}.brandmark span{color:#cea76c}.brandmark .point{font-size:20px}
.tinyline{font-size:10px;letter-spacing:.2em;color:#89949d}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;font-size:10px;letter-spacing:.21em;background:#121a23e8;transition:opacity .45s;pointer-events:none}
#loading.hide{opacity:0}.loading-circle{width:35px;height:35px;border-radius:50%;border:2px solid #e9d1a14a;border-top-color:#e2b36a;animation:turn 1s linear infinite}@keyframes turn{to{transform:rotate(360deg)}}
#panel{height:100vh;overflow-y:auto;padding:37px 32px 25px;border-left:1px solid #35404a;background:linear-gradient(164deg,#19232a,#11181e 66%)}
.eyebrow{font-size:9px;letter-spacing:.15em;font-weight:800;color:#d9bd89;display:flex;align-items:center;gap:8px;white-space:nowrap}.signal{width:6px;height:6px;background:#caa56e;border-radius:50%;box-shadow:0 0 11px #caa56e}
.seed{margin-left:auto;font-size:9px;color:#7d9299}h1{font-size:38px;letter-spacing:-.045em;line-height:1.1;margin:27px 0 8px;font-weight:800}h1 em{font-style:normal;color:var(--gold);font-weight:500}
.subtitle{font-size:12px;color:#a0afb3;margin:0 0 26px}.divider{border-top:1px solid var(--hair);margin:25px 0 22px}
.section-label{letter-spacing:.18em;font-size:9px;color:#93a4a8;font-weight:800}.main-readout{display:flex;align-items:baseline;gap:7px;padding:15px 0 11px}
.readout-prefix{font-size:18px;color:var(--gold)}#fvalue{font-family:'DM Sans',sans-serif;font-size:56px;letter-spacing:-.06em;font-weight:600;line-height:1}
.unit{margin-left:auto;font-size:10px;color:#82929a}
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold),#5b6467)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:50%;border:3px solid #e8d3b1;background:#bb7d43;cursor:pointer;box-shadow:0 0 0 4px #d4b27b23}
input[type=range]::-moz-range-thumb{height:12px;width:12px;border-radius:50%;border:3px solid #e8d3b1;background:#bb7d43;cursor:pointer}
.scale-labels{font-size:10px;color:#8a9aa2;display:flex;justify-content:space-between;margin-top:12px}.button-row{display:flex;gap:10px;margin-top:23px}
button{font:700 10px Manrope,sans-serif;letter-spacing:.11em;padding:13px 10px;cursor:pointer;border-radius:3px;transition:background .15s,border .15s}.primary{flex:1;border:1px solid var(--gold);background:#c7a06d;color:#0a1116}.primary:hover{background:#e0b77d}.secondary{border:1px solid #5b6569;color:#cbd5d7;background:transparent}.secondary:hover{border-color:var(--gold)}
.metric{display:flex;justify-content:space-between;align-items:center;font-size:11px;gap:20px;margin:17px 0}.metric>span{color:#a0adb3}.metric strong{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;color:#eceee9;font-variant-numeric:tabular-nums}
.light-meter{height:4px;background:#364046;border-radius:6px;overflow:hidden;margin-top:-7px;margin-bottom:21px}#meter-fill{background:linear-gradient(90deg,#8e6739,#e7bd81);height:100%;width:25%;transition:width .12s}
.check{display:flex;align-items:center;gap:9px;font-size:11px;color:#cbd3d5;margin:15px 0;cursor:pointer}.check input{accent-color:#c6a572;width:15px;height:15px}
.tip{border:1px solid #3b4143;border-left:2px solid #caa66f;padding:17px;margin-top:29px;background:#ffffff05}.tip b{font-size:9px;letter-spacing:.18em;color:#ddbb85}.tip p{font-size:11px;line-height:1.85;color:#bdc8c9;margin:10px 0 0}
.disclaimer{font-size:9px;line-height:1.75;color:#78888f;margin-top:21px}
@media(max-width:850px){#app{display:flex;flex-direction:column}#stage{height:min(65vh,660px);min-height:350px}#panel{height:auto;padding:32px 26px}.stage-top,.stage-bottom{left:20px;right:20px}.stage-bottom{font-size:7px}.tinyline{font-size:8px}}
@media(max-width:470px){#stage{height:50vh;min-height:340px}.stage-bottom span:nth-child(2){display:none}h1{font-size:35px}}