:root{color:#26282b;font-synthesis:none;background:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0}[hidden]{display:none!important}button,select{font:inherit}button,select,a{-webkit-tap-highlight-color:transparent}button,select{color:#737b85;cursor:pointer;background:0 0;border:0}button:hover,select:hover{color:#24282d}button:focus-visible,select:focus-visible,a:focus-visible{outline-offset:5px;border-radius:4px;outline:2px solid #487fbf}button:disabled{opacity:.25;cursor:default}header{justify-content:space-between;align-items:flex-start;gap:32px;display:flex;position:absolute;top:32px;left:32px;right:32px}.logo{width:22px;height:44px;display:block}.logo img{width:22px;height:44px}.header-controls{align-items:center;gap:24px;padding-top:6px;display:flex}.connection{font-size:13px}.connect-button{align-items:center;gap:8px;padding:7px 0 7px 10px;display:flex}.port-icon{font-size:22px;line-height:14px}#device-control{align-items:center;gap:9px;display:flex}#device{max-width:min(290px,58vw);padding:6px 0;font-size:12px}.connection-dot{background:#487fbf;border-radius:50%;flex-shrink:0;width:5px;height:5px}.connection-dot.offline{background:#b7bcc3}main{width:min(100% - 96px,1040px);margin:0 auto;padding-top:max(180px,25svh)}#task{min-height:clamp(80px,15svh,170px)}#task:not(:empty){padding:0 24px 32px}.task-instructions{white-space:pre-wrap;overflow-wrap:anywhere;max-width:800px;margin:0 auto 24px;font-size:20px;line-height:1.6}.task-score{max-width:800px;margin:0 auto;overflow-x:auto}.task-score svg{max-width:100%;height:auto;display:block}.task-warnings{color:#818894;white-space:pre-wrap;font-size:12px}#live{width:100%;animation:.4s ease-out reveal}.canvas-wrap{width:100%;height:360px}canvas{width:100%;height:100%;display:block}.strip-tools{justify-content:space-between;align-items:center;min-height:34px;padding:0 8px 0 68px;display:flex}.strip-actions{align-items:center;gap:18px;display:flex}#window{color:#9aa1aa;padding:5px 0;font-size:11px}.icon-button{color:#929ba6;padding:8px;display:flex}#activity{opacity:0;background:#487fbf;border-radius:50%;width:4px;height:4px;transition:opacity .2s}#activity.on{opacity:.65}#message{color:#818894;text-align:center;max-width:490px;margin:20px auto;font-size:13px;line-height:1.7}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}#password-screen{place-items:center;min-height:100svh;display:grid}.gate-logo{position:absolute;top:32px;left:32px}.gate-content{width:min(280px,100% - 64px)}#password-form{border-bottom:1px solid #dce0e5;align-items:center;display:flex}#password-form:focus-within{border-color:#487fbf}#password{width:100%;min-width:0;height:48px;font:inherit;color:#26282b;background:0 0;border:0;border-radius:0;outline:none;font-size:16px}#password::placeholder{color:#9aa1aa}#password-form button{place-items:center;min-width:44px;height:48px;padding:0;display:grid}#password-error,.gate-content noscript{color:#818894;margin:12px 0 0;font-size:12px;line-height:1.6}#app main:focus{outline:none}@keyframes reveal{0%{opacity:0}to{opacity:1}}@media (width<=600px){header{top:24px;left:24px;right:24px}main{width:calc(100% - 32px);padding-top:180px}#task{min-height:50px}.canvas-wrap{height:360px}}#keyboard{width:min(920px,100% - 64px);padding-bottom:env(safe-area-inset-bottom);z-index:2;background:#fff;position:fixed;bottom:0;left:50%;transform:translate(-50%)}#keyboard svg{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%;height:auto;display:block;overflow:visible}.piano-key{cursor:pointer;outline:none}.piano-key rect{stroke-width:1px}.piano-key.white rect{fill:#fff;stroke:#dce0e5}.piano-key.black rect{fill:#292e35;stroke:#292e35}.piano-key text{pointer-events:none;fill:#a2a9b2;font:12px -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.piano-key.black text{fill:#8e99a7}.piano-key.active rect{fill:#487fbf;stroke:#487fbf}.piano-key.active text{fill:#fff}.piano-key:focus-visible rect{stroke:#487fbf;stroke-width:3px}body.has-keyboard{padding-bottom:calc(min(168px, 18vw) + 48px + env(safe-area-inset-bottom))}.has-keyboard main{padding-top:clamp(120px,16svh,160px)}.has-keyboard #task{min-height:clamp(36px,7svh,80px)}.has-keyboard .canvas-wrap{height:clamp(260px,38svh,320px)}@media (width<=600px){#keyboard{width:calc(100% - 16px)}.gate-logo{top:24px;left:24px}.header-controls{gap:12px}.header-controls .room-panel{width:auto;position:fixed;top:80px;left:16px;right:16px}#device{max-width:42vw}#task:not(:empty){padding-left:8px;padding-right:8px}.task-instructions{font-size:17px}.piano-key text{font-size:16px}}@media (prefers-reduced-motion:reduce){#live{animation:none}}