:root{color-scheme:dark;--bg: #101112;--panel: #191c1e;--panel-2: #202529;--line: #343b40;--text: #f4f0e8;--muted: #abb0a8;--cyan: #73d7d7;--green: #a7d76f;--amber: #f1b654;--rose: #ef7f74;--blue: #76a9ff;--steel: #6f7778;--bronze: #b48656;--shadow: 0 20px 64px rgba(0, 0, 0, .38);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 18% 6%,rgba(115,215,215,.16),transparent 31rem),radial-gradient(circle at 84% 12%,rgba(241,182,84,.12),transparent 29rem),linear-gradient(160deg,#101112,#141719 48%,#181612);color:var(--text);overflow:hidden}button{font:inherit;-webkit-tap-highlight-color:transparent}.app-shell{width:min(1320px,100%);min-height:100vh;margin:0 auto;padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:18px;align-items:start}.stage{min-width:0;display:grid;place-items:center}.instrument-wrap{position:relative;width:min(76vh,74vw,860px);min-width:min(88vw,330px);aspect-ratio:1;display:grid;place-items:center}.handpan{position:relative;width:100%;aspect-ratio:1;border-radius:50%;isolation:isolate;touch-action:none;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 50% 44%,rgba(255,220,170,.3) 0 5%,transparent 15%),radial-gradient(circle at 34% 24%,rgba(255,240,220,.22),transparent 13%),radial-gradient(circle at 70% 78%,rgba(20,10,5,.55),transparent 26%),radial-gradient(circle at 22% 58%,rgba(200,140,80,.12),transparent 20%),radial-gradient(circle at 78% 38%,rgba(200,140,80,.1),transparent 18%),conic-gradient(from 18deg,#5a3828,#c88a55,#6a4535,#d49a62,#4a2e22,#8a6545,#5a3525,#5a3828);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 2px 2px #ffffff4d,inset 0 -26px 48px #00000073,0 30px 78px #0000008a}.handpan:before{content:"";position:absolute;top:3.7%;right:3.7%;bottom:3.7%;left:3.7%;border-radius:inherit;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.018) 0deg 2deg,transparent 2deg 5deg),repeating-radial-gradient(circle at 48% 42%,rgba(255,255,255,.04) 0 1px,transparent 1px 5px),radial-gradient(circle at 52% 48%,rgba(255,255,255,.1),transparent 46%),radial-gradient(circle at 50% 72%,rgba(0,0,0,.32),transparent 52%);mix-blend-mode:soft-light;pointer-events:none;z-index:1}.handpan:after{content:"";position:absolute;top:8.8%;right:8.8%;bottom:8.8%;left:8.8%;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 0 42px #00000038;pointer-events:none;z-index:1}.sacred-geometry{position:absolute;top:2%;right:2%;bottom:2%;left:2%;width:96%;height:96%;pointer-events:none;z-index:2;opacity:.7;mix-blend-mode:overlay}.rim{position:absolute;border-radius:50%;pointer-events:none;z-index:2}.rim--outer{top:2.2%;right:2.2%;bottom:2.2%;left:2.2%;border:2px solid rgba(244,240,232,.13);box-shadow:inset 0 0 24px #0000005c}.rim--inner{top:31%;right:31%;bottom:31%;left:31%;border:1px solid rgba(244,240,232,.16)}.tone-field{--strike-force: .75;position:absolute;border:none;color:var(--text);cursor:pointer;display:grid;place-items:center;align-content:center;gap:4px;text-align:center;background:transparent;box-shadow:inset 0 4px 14px #fff0dc0f,inset 0 -6px 20px #0000004d,inset 0 0 30px #0000002e;transition:filter .14s ease;z-index:4}.tone-field:before,.tone-field:after{content:"";position:absolute;top:8%;right:8%;bottom:8%;left:8%;border-radius:inherit;pointer-events:none}.tone-field:before{border:none}.tone-field:after{opacity:0;background:radial-gradient(circle,rgba(255,220,150,.72),rgba(241,182,84,.3) 40%,transparent 65%);transform:scale(.44)}.tone-field:hover{filter:brightness(1.1)}.tone-field:focus-visible{outline:3px solid rgba(115,215,215,.82);outline-offset:5px}.tone-field--ding{width:24%;aspect-ratio:1;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);background:transparent;box-shadow:inset 0 5px 16px #fff0dc0f,inset 0 -8px 22px #00000047,inset 0 0 32px #00000029}.tone-field--outer{width:15%;aspect-ratio:1;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-225%) rotate(calc(-1 * var(--angle)))}.tone-field.is-struck:after{animation:strike-ripple .68s ease-out}.tone-field.is-struck{animation:strike-press .3s ease-out}.maker-mark{position:absolute;left:50%;bottom:12.8%;transform:translate(-50%);z-index:3;color:#f4f0e86b;font-size:clamp(.68rem,1.2vw,.82rem);letter-spacing:.22em;text-transform:uppercase;pointer-events:none}.unlock-panel{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:8;border-radius:50%;background:radial-gradient(circle,#1011127a,#101112d1 64%,#1011121f);transition:opacity .22s ease,visibility .22s ease}.unlock-panel.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.start-button{width:min(230px,50%);aspect-ratio:1;border:1px solid rgba(115,215,215,.54);border-radius:50%;display:grid;place-items:center;align-content:center;gap:8px;color:#0d1616;background:radial-gradient(circle at 40% 24%,rgba(255,255,255,.72),transparent 34%),linear-gradient(145deg,var(--cyan),#b9e09c 56%,var(--amber));box-shadow:0 0 0 12px #73d7d714,0 18px 42px #00000061;cursor:pointer}.start-button span{font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:850;line-height:1}.start-button small{max-width:78%;color:#0d1616b8;font-size:.74rem;line-height:1.25}.start-button:disabled{cursor:progress;filter:saturate(.82)}.key-panel{padding:16px 18px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#191c1edb;box-shadow:var(--shadow)}.key-select{width:100%;margin-top:10px;padding:10px 14px;border:1px solid rgba(255,255,255,.15);border-radius:6px;background:#202529e6;color:var(--text);font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;outline:none}.key-select:focus{border-color:#73d7d780}.intensity-panel{padding:16px 18px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#191c1edb;box-shadow:var(--shadow)}.intensity-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}.intensity-value{color:var(--amber);font-size:.82rem;font-weight:600}.intensity-slider{width:100%;height:6px;-moz-appearance:none;appearance:none;-webkit-appearance:none;border-radius:3px;background:linear-gradient(to right,#73d7d759,#f1b6548c 50%,#ef7f74a6);outline:none;cursor:pointer}.intensity-slider::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.92),var(--text) 65%);border:2px solid rgba(255,255,255,.28);box-shadow:0 2px 10px #00000073;cursor:pointer;transition:transform .12s ease}.intensity-slider::-webkit-slider-thumb:hover{transform:scale(1.12)}.intensity-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.92),var(--text) 65%);border:2px solid rgba(255,255,255,.28);box-shadow:0 2px 10px #00000073;cursor:pointer}.intensity-labels{display:flex;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}.per-key-panel{padding:14px 18px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#191c1edb;box-shadow:var(--shadow)}.per-key-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.reset-btn{padding:4px 10px;border:1px solid rgba(255,255,255,.15);border-radius:5px;background:#202529cc;color:var(--muted);font-size:.68rem;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:.04em}.reset-btn:hover{border-color:#73d7d766;color:var(--cyan)}.per-key-row{display:flex;align-items:center;gap:10px;margin-top:6px}.per-key-note{min-width:36px;color:var(--muted);font-size:.72rem;font-weight:700;font-family:monospace}.fx-panel{padding:16px 18px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#191c1edb;box-shadow:var(--shadow)}.fx-row{display:flex;align-items:center;gap:12px;margin-top:10px}.fx-label{min-width:48px;color:var(--muted);font-size:.78rem;font-weight:600}.fx-slider{flex:1;height:5px;-moz-appearance:none;appearance:none;-webkit-appearance:none;border-radius:3px;background:#ffffff1f;outline:none;cursor:pointer}.fx-slider::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.88),var(--text) 65%);border:2px solid rgba(255,255,255,.24);box-shadow:0 2px 8px #0006;cursor:pointer}.fx-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.88),var(--text) 65%);border:2px solid rgba(255,255,255,.24);box-shadow:0 2px 8px #0006;cursor:pointer}.control-strip{display:grid;gap:12px;align-content:center;min-width:0}.status-panel,.map-panel{border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#191c1edb;box-shadow:var(--shadow)}.status-panel{padding:18px}.eyebrow{display:block;color:var(--muted);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.status-panel strong{display:block;margin-top:10px;font-size:clamp(2.2rem,5vw,4.4rem);line-height:.9;letter-spacing:0}.key-chip{display:inline-grid;min-width:54px;min-height:32px;margin-top:14px;padding:6px 10px;place-items:center;border:1px solid rgba(115,215,215,.36);border-radius:8px;color:var(--cyan);background:#73d7d714}.map-panel{padding:14px}.key-grid{display:grid;gap:7px;margin-top:12px}.key-row{min-height:38px;display:grid;grid-template-columns:58px 1fr;align-items:center;gap:10px;padding:6px 8px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#2025299e}.key-row span{color:var(--cyan);font-weight:750}.key-row b{font-size:.95rem}@keyframes strike-ripple{0%{opacity:calc(.9 * var(--strike-force));transform:scale(.36)}to{opacity:0;transform:scale(1.95)}}@keyframes strike-press{0%,to{filter:brightness(1)}35%{filter:brightness(calc(1.1 + var(--strike-force) * .22))}}.build-stamp{position:fixed;bottom:6px;right:10px;color:#ffffff2e;font-size:.6rem;font-family:monospace;pointer-events:none;z-index:0}@media(max-width:980px){body{overflow:auto}.app-shell{min-height:100svh;grid-template-columns:1fr;align-content:center}.instrument-wrap{width:min(82svh,92vw,760px)}.control-strip{width:min(720px,100%);margin:0 auto;grid-template-columns:minmax(170px,.38fr) 1fr}.intensity-panel{grid-column:1 / -1}.key-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.key-row{grid-template-columns:1fr;gap:2px;min-height:48px}}@media(max-width:640px){.app-shell{padding:14px;gap:14px}.instrument-wrap{width:min(92vw,72svh)}.control-strip{grid-template-columns:1fr}.map-panel{display:none}.maker-mark{bottom:11%}}