:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:#e8edf0;background:#091923;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;overflow:hidden}#viewport{position:absolute;inset:0}canvas{display:block;outline:none}
#heading{pointer-events:none;position:absolute;top:28px;left:36px;text-shadow:0 2px 18px #081421d0}
.eyebrow,.miniheading{font-size:10px;letter-spacing:.22em;font-weight:700;color:#d4b06c}
h1{font-weight:800;font-size:31px;letter-spacing:.03em;margin:9px 0 5px;line-height:1}h1 span{font-weight:300;color:#e4c183}
#heading p{font-size:13px;color:#b9cbd2;margin-top:11px}
.panel{position:absolute;right:25px;top:25px;width:295px;padding:22px;background:linear-gradient(145deg,#081824ea,#092431e8);border:1px solid #5772806b;box-shadow:0 20px 60px #0009;border-radius:11px;backdrop-filter:blur(15px);max-height:calc(100vh - 115px);overflow:auto}
.section{margin-top:28px}.panel select,.panel button{display:block;width:100%;background:#142d3c;color:#e6ebea;border:1px solid #486272;border-radius:5px;padding:10px 11px;font-size:12px;margin-top:10px;outline:none}
.panel button{cursor:pointer;background:#bb9552;color:#0f1b20;font-weight:800;letter-spacing:.06em;margin-top:22px;border:0}.panel button:hover{background:#e0ba76}
.control{font-size:13px;display:flex;align-items:center;justify-content:space-between;margin:17px 0;color:#d0dadd}.control input{accent-color:#cfaa69}
.range{display:block;font-size:12px;margin:20px 0 8px;color:#cdd7dc}.range output{float:right;color:#e2bb77}.range input{display:block;width:100%;accent-color:#cfaa69;margin-top:13px}
#equation{font:12px/1.6 ui-monospace,'Cascadia Code',monospace;word-break:break-word;color:#c5d7d9;border:1px solid #39505e83;background:#0d2330;margin-top:13px;padding:13px;border-radius:5px}
.statusbar{display:flex;justify-content:space-between;align-items:center;gap:20px;position:absolute;bottom:0;left:0;right:0;height:54px;background:#071620e8;padding:0 31px;font-size:10px;letter-spacing:.1em;color:#a7bdc4}
.statusbar strong{color:#f4c47b}.statusbar i{font-style:normal;color:#56707f;padding:0 6px}
@media(max-width:760px){#heading{left:20px;top:20px}#heading h1{font-size:22px}#heading p{font-size:11px}.panel{right:9px;top:115px;width:235px;padding:14px;max-height:calc(100vh - 170px)}.statusbar{font-size:9px;padding:0 10px;justify-content:center}.statusbar span:nth-child(2),.statusbar span:nth-child(3){display:none}}