:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#e9edf4;background:#101319;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1560px;margin:auto;padding:32px 38px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.eyebrow,.tag,.control-title{font-size:11px;font-weight:650;letter-spacing:1.8px;color:#94a4bb}.eyebrow{margin:0 0 9px}h1{font-size:34px;letter-spacing:-1px;margin:0;font-weight:600}.intro{color:#9fa9b9;font-size:14px;margin:9px 0 0}button{font:inherit;font-size:12px;border:1px solid #394252;border-radius:6px;background:#202630;color:#dce3ee;padding:8px 13px;cursor:pointer}button:hover{background:#303947}button:focus-visible,input:focus-visible{outline:2px solid #f6c879;outline-offset:4px}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px}article{overflow:hidden;border:1px solid #303744;border-radius:12px;background:#141922}.panel-head{padding:22px 24px 0}h2{font-size:23px;font-weight:550;margin:7px 0}.amber{color:#ebbb78}.formula{font:16px ui-monospace,SFMono-Regular,monospace;color:#b8c4d7;margin:10px 0 0}canvas{display:block;width:100%;height:clamp(260px,33vw,465px)}.readout{border-top:1px solid #29313d;display:flex;justify-content:space-between;padding:14px 24px;color:#91a0b4;font-size:12px}.readout strong{font-variant-numeric:tabular-nums;color:#f5d39d;font-size:14px}.controls{display:grid;grid-template-columns:1fr 2.25fr;gap:30px;margin-top:25px;padding:22px 24px;border:1px solid #303744;border-radius:12px;background:#181d26}.control-title{display:flex;align-items:center;justify-content:space-between;height:30px;margin-bottom:18px}.control-title button{letter-spacing:0;padding:6px 17px}.controls label{display:flex;align-items:center;gap:8px;font-size:14px}.controls label span{font-size:11px;color:#8e9bb0}output{margin-left:auto;font:13px ui-monospace,monospace;color:#f4cd8a}.controls input[type=range]{width:100%;accent-color:#e6b973;margin:15px 0 6px}.controls p{font-size:12px;line-height:1.5;color:#97a5b9;margin:8px 0 0}.sliders{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}#presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}#presets button{padding:6px 10px;font-size:11px}#presets button[aria-pressed=true]{border-color:#d4aa6d;background:#3a3024;color:#f4d39d}footer{display:flex;justify-content:space-between;gap:24px;font-size:11px;line-height:1.5;color:#7f8ca1;margin-top:17px}#error{color:#ffb5a7}@media(max-width:760px){main{padding:20px 15px}.comparison{gap:10px}.panel-head{padding:16px 12px 0}h2{font-size:19px}.formula{font-size:11px;min-height:28px}canvas{height:280px}.readout{padding:12px;gap:8px;flex-direction:column}.controls{grid-template-columns:1fr;gap:24px;padding:18px}.sliders{gap:12px}footer{flex-direction:column;gap:5px}h1{font-size:29px}}
@media(min-width:761px) and (max-height:850px){main{padding:20px 30px}header{margin-bottom:18px}h1{font-size:29px}.eyebrow{margin-bottom:6px}.intro{margin-top:6px}.panel-head{padding:15px 20px 0}h2{font-size:21px;margin:5px 0}.formula{margin-top:6px;font-size:14px}canvas{height:clamp(190px,32vh,270px)}.readout{padding:10px 20px}.controls{margin-top:16px;padding:15px 20px}.control-title{margin-bottom:10px}.controls input[type=range]{margin-top:10px}footer{margin-top:12px}}

.motion-buttons{display:flex;gap:8px}