*{box-sizing:border-box}body{margin:0;background:#08151f;color:#dcebea;font:16px system-ui,sans-serif}main{max-width:1220px;margin:auto;padding:40px 28px}header{border-bottom:1px solid #29414a;padding-bottom:24px}.eyebrow{color:#79cbbd;font-size:11px;letter-spacing:.22em;font-weight:700}h1{font-size:clamp(36px,5vw,62px);letter-spacing:-.05em;margin:9px 0}h1 i{font:300 .65em Georgia,serif;color:#9cb9bf;letter-spacing:-.03em}p{color:#a1b9c0;line-height:1.65}header p{margin:0}.controls{display:flex;gap:10px;flex-wrap:wrap;padding:22px 0}button,select{font:inherit;color:#deefed;background:#142c37;border:1px solid #35505a;border-radius:8px;min-height:44px;padding:10px 15px;cursor:pointer}button:hover,button[aria-pressed=true]{background:#244b51;border-color:#70cfbe}button:focus-visible,select:focus-visible,canvas:focus-visible,input:focus-visible{outline:3px solid #ffd38a;outline-offset:3px}#guide{margin-left:auto}.studio{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:25px}.viewport{min-width:0;background:#0a1c27;padding:16px;border:1px solid #29414a;border-radius:14px}canvas{display:block;width:100%;height:auto;image-rendering:auto;touch-action:none;border-radius:6px;background:#08151f;cursor:crosshair}.legend{display:flex;align-items:center;gap:12px;justify-content:center;font-size:11px;color:#b6c9ca;margin-top:15px}.gradient{height:8px;width:120px;background:linear-gradient(90deg,#45d9cd,#0b1b2a,#ff987b);border-radius:9px}#status{font-size:13px;margin-bottom:0}aside{background:#10232c;border:1px solid #29414a;border-radius:14px;padding:24px}h2{font:26px Georgia,serif;margin:12px 0 22px}label{display:block;font-size:13px;margin:17px 0}select{display:block;width:100%;margin-top:8px;font-size:14px;padding:10px}input[type=range]{display:block;width:100%;accent-color:#75d0bc;min-height:30px}output{float:right;color:#83d8c5}.check{display:flex;align-items:center;gap:8px;min-height:32px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.actions button{font-size:13px;padding:10px 4px}.hint,#meter{font-size:12px}footer{margin-top:24px;font-size:10px;letter-spacing:.12em;color:#7897a0;display:flex;justify-content:space-between}dialog{background:#102631;color:#deefed;border:1px solid #618982;border-radius:16px;max-width:600px;width:90%;padding:30px}dialog::backdrop{background:#000b}dialog p{font-size:14px}@media(max-width:760px){main{padding:25px 16px}.studio{grid-template-columns:1fr}.viewport{padding:10px}aside{padding:20px}#guide{margin-left:0}.controls{gap:8px}.controls button{font-size:12px;padding:10px}footer{display:block}footer span{display:block;margin-top:12px}}