:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#d8e4de;background:#091419}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0,#243b36,transparent 55%),#091419}main{max-width:1440px;padding:32px;margin:auto}.eyebrow{color:#c6bb83;letter-spacing:.16em;font-size:11px}h1,h2{font-family:Georgia,serif;font-weight:400;color:#f0e5c9}h1{font-size:clamp(34px,4vw,60px);margin:20px 0}h2{font-size:30px}.intro{max-width:870px;line-height:1.7;color:#b2c9c5}.instrument{border:1px solid #53756b;border-radius:20px;overflow:hidden;margin-top:30px;box-shadow:0 20px 70px #0003}.instrument:hover{box-shadow:0 0 30px #7bdac21c}.tools,.controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:20px;background:#14262b}.tools label{display:grid;gap:7px;font-size:12px;color:#cdbf94}button,select{font:inherit;font-size:13px;background:#243c40;color:#e9dfbf;border:1px solid #5d796e;border-radius:9px;padding:10px 14px;cursor:pointer}button:hover,select:hover,button:focus-visible{border-color:#bbebc4;box-shadow:0 0 20px #93e3b638}input{accent-color:#b1d5ae;cursor:pointer}output{color:#f0d587}.controls label{font-size:13px}.controls input[type=range]{display:block;width:220px;margin-top:12px}.viewport{position:relative;background:radial-gradient(ellipse at 50% 50%,#173038,#091519 70%)}canvas{width:100%;height:auto;display:block;touch-action:none}#badge,.gesture{position:absolute;padding:9px 12px;background:#08191dcc;border-radius:8px;font-size:11px;pointer-events:none}#badge{left:16px;top:16px;color:#bfe0d3}.gesture{right:16px;bottom:16px;color:#bccec8}#status{margin:0;padding:18px;font-size:13px;color:#c4d6cc;background:#102226}.explain{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:38px}.explain p,.reference{font-size:14px;line-height:1.75;color:#a8c2bd}a{color:#ecd599}.reference{max-width:1050px;margin-top:35px}@media(max-width:700px){main{padding:16px}.explain{grid-template-columns:1fr;gap:8px}.tools,.controls{gap:12px;padding:14px}.tools select{max-width:290px}.gesture{font-size:9px;bottom:5px;right:5px}#badge{font-size:9px;top:5px;left:5px}}