:root{color-scheme:dark;font-family:Inter,'Segoe UI',Arial,sans-serif;background:#080e18;color:#e5f4fb;font-synthesis:none;--bg:#07111d;--edge:#24354a;--muted:#7791a6;--cyan:#58deff}*{box-sizing:border-box}body{margin:0}.app{max-width:1770px;min-height:100vh;margin:0 auto;padding:0 20px}.topbar{height:79px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #243447}.brand{display:flex;align-items:center;gap:14px}.brand-mark{font-size:40px;color:#62e8f5;text-shadow:0 0 22px #30abf6}.brand b{display:block;font-size:13px;letter-spacing:.22em}.brand small{display:block;margin-top:6px;color:#7893a9;font-size:9px;letter-spacing:.26em}.chip{font-size:10px;color:#adc9d9;letter-spacing:.14em;border:1px solid #294055;border-radius:30px;padding:10px 14px}.chip i{display:inline-block;margin-right:9px;width:6px;height:6px;border-radius:50%;background:#58e7b2;box-shadow:0 0 10px #58e7b2}.chip-id{color:#587389}.layout{min-height:calc(100vh - 130px);display:grid;grid-template-columns:minmax(0,1fr) 358px;gap:13px;padding:14px 0}.viewport{position:relative;min-height:735px;background:#071423;border:1px solid #203249;overflow:hidden;border-radius:9px;isolation:isolate}.viewport::after{content:'';pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at 58% 48%,transparent 10%,#050c16aa 94%)}.viewer{position:absolute;inset:0}.viewer canvas{display:block;width:100%;height:100%}.viewport-top{position:absolute;z-index:2;top:37px;left:40px;pointer-events:none}.kicker{font-size:10px;letter-spacing:.25em;color:#5df5ee;font-weight:700}.kicker span{color:#799eb8}.viewport-top h1{font-size:clamp(48px,6vw,100px);font-weight:800;letter-spacing:-.06em;line-height:.93;margin:22px 0 6px;color:#edf9ff;text-shadow:0 8px 45px #0009}.viewport-top h1 span{color:#53def5}.viewport-top p{font-size:13px;letter-spacing:.18em;color:#a8c1d1;text-transform:uppercase}.viewport-bottom{position:absolute;left:39px;bottom:32px;display:flex;gap:24px;flex-wrap:wrap;z-index:2;font-size:9px;letter-spacing:.16em;color:#7395ad}.data-card{position:absolute;top:45px;right:32px;z-index:2;text-align:right;pointer-events:none}.data-card small,.data-card span{display:block;color:#819eb2;font-size:9px;letter-spacing:.14em}.data-card strong{display:block;color:#d0faff;font-size:40px;font-weight:300;margin:7px 0 1px}.data-card span{font-size:11px;text-transform:none}.scale-legend{position:absolute;right:29px;bottom:66px;z-index:2;color:#7396aa;font-size:9px;letter-spacing:.08em}.scale-legend b{color:#8bd8ef;margin-left:10px}.line{display:inline-block;width:27px;border-top:1px solid #47dbec;margin:0 7px 3px 0}.viewer-instructions{position:absolute;left:50%;transform:translateX(-50%);bottom:67px;z-index:2;white-space:nowrap;font-size:9px;letter-spacing:.12em;color:#87a5b7}.controls{padding:25px 24px;background:#101b29;border:1px solid #26384d;border-radius:9px;display:flex;flex-direction:column;gap:0;box-shadow:0 15px 40px #0003}.aside-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.aside-head small{color:#59deec;font-size:10px;letter-spacing:.2em}.aside-head h2{margin:7px 0 0;font-size:23px;letter-spacing:-.03em;font-weight:600}.rev{background:#223348;color:#a0c4d5;font-size:10px;border:1px solid #365065;border-radius:4px;padding:6px 9px}.controls>label,.inline-settings label{font-size:9px;letter-spacing:.17em;color:#7897ac;font-weight:700;margin-bottom:8px}.controls select{appearance:none;background:#0a1522;color:#d5ecf7;border:1px solid #34495f;padding:12px;border-radius:5px;margin-bottom:18px;min-height:42px;width:100%;font-size:12px;outline-color:#50d7ec}.section-title{display:flex;align-items:center;justify-content:space-between;padding:10px 0;margin:4px 0 14px;font-size:10px;color:#e5f6ff;font-weight:700;letter-spacing:.17em;border-top:1px solid #2d4051}.section-title span{color:#4b7389}.control{margin:0 0 18px}.control>div{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}.control label{font-size:12px;color:#a7c1ce}.control output{font-size:12px;font-variant-numeric:tabular-nums;color:#7ee7ff}.control input{width:100%;height:4px;accent-color:#55d3f3;cursor:pointer}.inline-settings{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:3px 0 16px}.inline-settings>div{display:flex;flex-direction:column}.inline-settings input[type=color]{width:100%;height:41px;padding:3px;background:#081420;border:1px solid #355068;border-radius:4px;cursor:pointer}.inline-settings select{min-width:0;margin:0}.buttons{display:flex;gap:8px;margin-bottom:9px}.buttons button{width:50%;min-height:41px;background:#1a2b3c;border:1px solid #365166;color:#cfdfed;border-radius:4px;cursor:pointer;transition:background .15s,border-color .15s;font-size:11px;font-weight:700;letter-spacing:.02em}.buttons button:hover{background:#2b435b;border-color:#5d91ad}.buttons button.primary{color:#071521;background:#58d8ee;border-color:#58d8ee}.buttons button.accent{color:#cef9ff;background:#164255;border-color:#3789a0}.footer-stat{display:flex;justify-content:space-between;margin-top:15px;color:#74cecc;font-size:9px;letter-spacing:.09em}.helper{margin-top:20px;border-top:1px solid #294057;padding-top:15px;color:#7895a9;font-size:11px;line-height:1.65}.helper code{color:#b8e8fa}.foot{height:38px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #26374b;color:#68879d;font-size:9px;letter-spacing:.1em}#error{position:fixed;z-index:99;bottom:15px;left:15px;max-width:680px;padding:14px 19px;background:#5c1717;color:#fff;border-radius:6px;font-size:13px;white-space:pre-wrap}@media(max-width:1050px){.layout{grid-template-columns:1fr}.viewport{min-height:570px}.controls{display:block}.app{padding:0 12px}.foot{flex-wrap:wrap;height:auto;padding:14px 0}}@media(max-width:600px){.topbar{height:65px}.chip{display:none}.viewport{min-height:510px}.viewport-top{left:20px;top:25px}.viewport-top h1{font-size:55px}.data-card{right:17px;top:182px}.data-card strong{font-size:29px}.viewport-bottom{left:16px;bottom:19px;gap:9px}.scale-legend,.viewer-instructions{display:none}.controls{padding:20px}.foot{font-size:8px}}
