*{box-sizing:border-box}html,body{color:#e8efdf;background:#10282d;width:100%;height:100%;margin:0;font:13px -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}canvas{touch-action:none;outline:none;width:100%;height:100%;position:absolute;inset:0}header{pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;top:27px;left:34px;right:34px}.brand{align-items:center;gap:21px;display:flex}.brand strong{letter-spacing:-2px;font-size:35px;font-weight:650}.brand strong span{color:#f7ca83;margin-left:3px}.subtitle{letter-spacing:2px;color:#a8bdb4;font-size:9px}button{color:#f6efdc;cursor:pointer;background:#e5efe313;border:1px solid #aac3b950;font:500 13px inherit;transition:background .2s,transform .2s}#teach{pointer-events:auto;border-radius:24px;align-items:center;gap:9px;padding:12px 25px;font:500 13px -apple-system,sans-serif;display:flex}#teach:hover{background:#e5efe325}#teach[aria-pressed=true]{color:#233736;background:#f6ce8c;border-color:#f6ce8c}button:focus-visible{outline-offset:4px;outline:2px solid #f6ce8c}#hint{color:#b6cbc2;pointer-events:none;max-width:70%;font-size:12px;line-height:1.5;position:absolute;top:83px;left:35px}#status{color:#f6ce8c;pointer-events:none;font:10px ui-monospace,monospace;position:absolute;top:89px;right:35px}footer{color:#829d96;pointer-events:none;justify-content:space-between;font-size:10px;display:flex;position:absolute;bottom:15px;left:35px;right:35px}kbd{border:1px solid #63817855;border-radius:3px;margin:0 3px 0 8px;padding:2px 4px;font:9px ui-monospace,monospace;display:inline-block}#tooltip{pointer-events:none;color:#e0e9d9;white-space:pre-line;background:#0b1b20ee;border:1px solid #63817870;border-radius:8px;max-width:235px;padding:10px 13px;font:11px/1.6 ui-monospace,monospace;display:none;position:absolute}#touch{pointer-events:none;gap:8px;display:none;position:absolute;bottom:208px;left:22px;right:22px}#touch button{pointer-events:auto;touch-action:none;background:#10282d80;border-radius:50%;width:44px;height:44px;font-size:20px}#touch button:last-child{margin-left:auto}@media (pointer:coarse){#touch{display:flex}}@media (width<=650px){header{top:21px;left:22px;right:22px}.brand{gap:13px}.brand strong{font-size:29px}.subtitle{letter-spacing:1.5px;font-size:8px}#teach{padding:10px 18px}#hint{max-width:75%;font-size:11px;top:72px;left:22px}#status{top:114px;left:22px;right:auto}footer{font-size:9px;bottom:12px;left:18px;right:18px}footer span:first-child{display:none}footer span:last-child{margin:auto}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}#tuning{z-index:5;font-size:10px;position:absolute;bottom:145px;right:34px}#tuning summary{cursor:pointer;color:#aac7b7;background:#0c1e23;border:1px solid #698b7c44;border-radius:15px;padding:6px 10px;list-style:none}#tuning summary:before{content:"⚙ ";color:#d2c399}#tuning[open] summary{color:#f6ce8c}.tune-panel{background:#0c2025f5;border:1px solid #729a8155;border-radius:12px;width:320px;max-height:calc(100dvh - 210px);padding:18px;position:absolute;bottom:35px;right:0;overflow-y:auto;box-shadow:0 12px 40px #0006}.tune-heading{letter-spacing:1px;color:#b3cebc;justify-content:space-between;margin-bottom:15px;font:9px ui-monospace,monospace;display:flex}.tune-heading span{color:#789b8c}.tune-row{grid-template-columns:1fr auto 18px;align-items:center;gap:7px 10px;margin-bottom:13px;display:grid}.tune-row label{color:#c7d7c9;font-size:11px}.tune-row output{color:#efd09b;grid-column:2;font:9px ui-monospace,monospace}.tune-row input[type=range]{accent-color:#a4cbb2;grid-column:1/3;width:100%;height:12px}.tune-row input[type=checkbox]{accent-color:#a4cbb2;grid-area:auto/3;width:13px;height:13px;margin:0}.tune-panel p{color:#789b8c;margin:12px 0 0;font-size:10px;line-height:1.5}#tuning:focus-within summary{outline-color:#f6ce8c}@media (width<=650px){#tuning{bottom:155px;right:18px}.tune-panel{width:300px}}body:not(.teaching) #tuning,body:not(.teaching) .teach-only{display:none}body:not(.teaching) #touch{bottom:64px}body:not(.teaching) #status{top:141px}body:not(.teaching) .subtitle{display:none}body:not(.teaching) footer{color:#a5b8a5}@media (width<=650px){body:not(.teaching) #status{max-width:65%;top:116px}}.teachable-home{z-index:6;color:#9aafa3;opacity:.75;font:10px -apple-system,sans-serif;text-decoration:none;position:fixed;bottom:14px;left:20px}.teachable-home:hover{opacity:1}.teachable-home{top:45px;bottom:auto;left:150px}