:root{--bg: #000000;--ink: #d4cccc;--accent: #ffffff}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}html,body{height:100%;background:var(--bg);color:var(--ink);font-family:ui-monospace,SF Mono,Roboto Mono,Menlo,monospace;overscroll-behavior:none}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}#landing{position:fixed;inset:0;overflow-y:auto;background:#0a0a0a;display:flex;align-items:center;justify-content:center;padding:32px 24px calc(24px + env(safe-area-inset-bottom));font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,sans-serif;z-index:10}#landing[hidden]{display:none}.landing-inner{width:100%;max-width:340px;text-align:center}.logo{width:132px;height:132px;margin:0 auto 26px;display:block}.wordmark{font-size:2.6rem;font-weight:700;letter-spacing:.02em;color:#fff}.tagline{margin-top:10px;font-size:1rem;color:#cfcfcf}.btn-light,.btn-dark{width:100%;height:54px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:1rem;font-weight:500;border-radius:10px}.btn-light{background:#d9d3ce;color:#111}.btn-light:active{background:#c6c0bb}.btn-light[disabled]{opacity:.6}.btn-dark{margin-top:12px;background:#0f0f0f;color:#fff;border:1px solid #3a3a3a;justify-content:flex-start;padding-left:18px}.btn-dark:active{background:#171717}#signed-out>.btn-light{margin-top:38px}#email-form{margin-top:12px;display:grid;gap:10px}#email-form[hidden]{display:none}#email-input{width:100%;height:54px;padding:0 18px;font-size:1rem;color:#fff;background:#0f0f0f;border:1px solid #3a3a3a;border-radius:10px;outline:none}#email-input::placeholder{color:#6f6f6f}#email-input:focus{border-color:#8a8a8a}.terms{margin-top:18px;font-size:.78rem;color:#8a8a8a}.terms a{color:#b9b9b9}#signed-in[hidden]{display:none}#signed-in>.btn-light{margin-top:38px}.who{margin-top:14px;font-size:.78rem;color:#8a8a8a}.who button{color:#b9b9b9;text-decoration:underline;font-size:inherit}.landing-msg{margin-top:16px;font-size:.85rem;color:#9ad3a6}.landing-msg.error{color:#e08a80}.landing-msg[hidden]{display:none}.about{display:inline-block;margin-top:46px;font-size:.9rem;color:#d9d9d9;text-decoration:underline}#boot-err{position:absolute;left:16px;right:16px;bottom:16px;max-height:40vh;overflow:auto;padding:10px 12px;background:#240a0a;border:1px solid #ff5b5b;border-radius:4px;color:#ff9b9b;font-size:.6rem;line-height:1.4;white-space:pre-wrap;word-break:break-word;text-align:left}#boot-err[hidden]{display:none}#app{position:fixed;inset:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}#app[hidden]{display:none}header,footer{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;flex:0 0 auto}.key{display:flex;gap:10px}.lbl{letter-spacing:.14em;font-size:.82rem;color:var(--ink);padding:6px 4px;transition:color .12s,opacity .12s}#bpm{touch-action:none}#erase.active{color:var(--accent)}.lbl:active{opacity:.55}#sample{letter-spacing:.12em}#sample.loading{opacity:.4}#stage{position:relative;flex:1 1 auto;min-height:0}canvas#grid{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#view-toggle{display:grid;grid-template-columns:repeat(2,7px);gap:3px;padding:8px}#view-toggle span{width:7px;height:7px;border-radius:50%;background:var(--ink);opacity:.45;transition:opacity .15s}#view-toggle span:first-child{opacity:1}#view-toggle:active span{opacity:.8}#app.mixer #view-toggle,#app.mixer footer{visibility:hidden;pointer-events:none}#mixer-ui{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .18s}#app.mixer #mixer-ui{opacity:1}.slot{position:absolute;display:flex;align-items:center;gap:6px}.slot .name{padding:5px 10px;background:#fff;color:#000;font-size:.68rem;letter-spacing:.12em;white-space:nowrap;pointer-events:auto}.slot .name:active{opacity:.7}.slot .mute{width:30px;height:27px;display:grid;place-items:center;background:#000;border:1px solid #fff;color:#fff;font-size:.8rem;line-height:1;pointer-events:auto}.slot .mute.on{background:#fff;color:#000}.slot[hidden],.slot .name[hidden],.slot .mute[hidden]{display:none}#save-tile{position:absolute;left:10px;right:10px;bottom:10px;height:52px;display:grid;place-items:center;letter-spacing:.16em;font-size:.72rem;color:var(--ink);border:1px solid rgba(255,255,255,.35);pointer-events:auto}#save-tile:active{background:#ffffff1a}