:root{color-scheme:dark;--bg: #0d0d12;--glass: rgba(18, 18, 24, .62);--glass-strong: rgba(18, 18, 24, .82);--line: rgba(255, 255, 255, .12);--ink: #f5f2ec;--muted: rgba(245, 242, 236, .62);--accent: #a64dff;--radius: 16px;--bar-h: 188px;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:ui-rounded,SF Pro Rounded,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;top:0;right:0;bottom:0;left:0}#scene{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}button{font:inherit;color:inherit;cursor:pointer}.pill{display:inline-flex;align-items:center;gap:6px;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:5px;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}#top{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;pointer-events:none}#top>*{pointer-events:auto}.cluster{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.logo{width:42px;height:42px;border-radius:11px;box-shadow:0 4px 18px #00000073}#shapes button{width:38px;height:38px;border-radius:50%;border:2px solid transparent;padding:0;background:transparent;overflow:hidden;opacity:.55;transition:opacity .15s,border-color .15s,transform .15s}#shapes button img{width:100%;height:100%;object-fit:cover;display:block}#shapes button[aria-checked=true]{opacity:1;border-color:var(--accent);transform:scale(1.06)}#shapes button:hover{opacity:.9}.chip{padding:8px 14px 8px 10px;border-radius:999px;font-weight:600;font-size:14px;border:1px solid var(--line)}.chip img{width:18px;height:18px;opacity:.9}.round{width:40px;height:40px;justify-content:center;padding:0}.round img{width:20px;height:20px;opacity:.9}.xr{padding:10px 16px;font-weight:700;font-size:14px;border-color:color-mix(in srgb,var(--accent) 70%,white);background:color-mix(in srgb,var(--accent) 38%,rgba(18,18,24,.6));box-shadow:0 0 22px color-mix(in srgb,var(--accent) 55%,transparent)}.xr[hidden]{display:none}#status{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) + 58px);left:50%;transform:translate(-50%);font-size:13px;color:var(--muted);background:var(--glass);border:1px solid var(--line);padding:6px 12px;border-radius:999px;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .4s;pointer-events:none}#status.show{opacity:1}#bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;align-items:stretch;padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:linear-gradient(to top,rgba(8,8,12,.85),rgba(8,8,12,.45) 70%,transparent)}.side{display:flex;flex-direction:column;gap:6px;justify-content:center}.tool{width:46px;flex:1;min-height:40px;border-radius:12px;border:1px solid var(--line);background:var(--glass);display:grid;place-items:center;font-size:22px;font-weight:600;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.tool img{width:26px;height:26px;opacity:.85}.tool[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 45%,rgba(18,18,24,.7));border-color:var(--accent)}.tool:disabled{opacity:.35}.octave{align-items:center}#oct-label{font-weight:700;font-size:15px;color:var(--muted)}#keyboard{flex:1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(2,1fr);gap:6px;height:calc(var(--bar-h) - 20px);touch-action:none}.key{position:relative;border-radius:12px;border:1px solid var(--line);background:var(--glass);overflow:hidden;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);touch-action:none;padding:0}.key .fill{position:absolute;left:0;right:0;bottom:0;height:calc(var(--fill, 0) * 100%);background:linear-gradient(to top,color-mix(in srgb,var(--accent) 90%,white),color-mix(in srgb,var(--accent) 45%,transparent));opacity:calc(.35 + var(--fill, 0) * .65);pointer-events:none}.key .label{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-weight:700;font-size:15px;pointer-events:none}.key.down{border-color:#ffffff8c}@media(orientation:landscape)and (max-height:520px){:root{--bar-h: 118px}#keyboard{grid-template-columns:repeat(16,1fr);grid-template-rows:1fr}}@media(max-width:520px){.logo{display:none}#shapes button{width:34px;height:34px}.chip span{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tool{width:40px}}.sheet{border:1px solid var(--line);border-radius:22px;background:var(--glass-strong);color:var(--ink);padding:18px;width:min(560px,calc(100% - 24px));max-height:min(80vh,720px);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3)}.sheet::backdrop{background:#00000059}.sheet h2{margin:0 0 12px;font-size:18px}.grid{display:grid;gap:6px;margin-bottom:12px}.roots{grid-template-columns:repeat(6,1fr)}.modes{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));max-height:42vh;overflow:auto}.grid button{border:1px solid var(--line);background:#ffffff0d;border-radius:10px;padding:9px 6px;font-size:13px;font-weight:600}.grid button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 50%,transparent);border-color:var(--accent)}.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}.row select{background:#ffffff14;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px;max-width:60%}.row input[type=range]{width:55%;accent-color:var(--accent)}details{margin:12px 0;font-size:13px;color:var(--muted);line-height:1.45}summary{cursor:pointer;color:var(--ink);font-weight:600}kbd{border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:12px}.done{width:100%;margin-top:6px;padding:11px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-weight:700}#loading{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--bg);transition:opacity .6s;z-index:5}#loading img{width:96px;height:96px;border-radius:22px;animation:bob 1.6s ease-in-out infinite}#loading p{color:var(--muted);margin:0;font-size:14px}#loading.done{opacity:0;pointer-events:none}@keyframes bob{50%{transform:translateY(-8px) rotate(-4deg)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}