:root{font-family:IBM Plex Sans,Segoe UI,sans-serif;color:#f8fafc;background:radial-gradient(circle at 20% 10%,#0f172a,#020617 60%,#000);--ui-kv-row-height: 1.4rem}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%}.app{position:relative;width:100%;height:100%;overflow:hidden}.launch-gate-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;padding:1rem;background:#0000004d}.launch-gate-dialog{width:min(18rem,100%);padding:1rem;border:1px solid rgba(148,163,184,.42);border-radius:.5rem;background:#020617e0;box-shadow:0 1.4rem 3.6rem #0000006b;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}.launch-gate-form{display:grid;gap:.72rem}.launch-gate-label{color:#f8fafc;font-size:1rem;font-weight:700}.launch-gate-form input{width:100%;min-height:2.75rem;border:1px solid #475569;border-radius:.45rem;padding:0 .68rem;background:#0f172aeb;color:#f8fafc;font:inherit}.launch-gate-form input:focus-visible{outline:2px solid #7dd3fc;outline-offset:1px}.launch-gate-submit{min-height:2.75rem;font:inherit}.menu-root{position:fixed;top:1rem;z-index:24;--menu-button-size: 2.5rem;--menu-gap: .55rem;--menu-offset: calc(var(--menu-button-size) + var(--menu-gap));--menu-panel-width: min(252px, calc(100vw - 2rem - var(--menu-offset)))}.menu-root-left{left:1rem}.menu-root-right{right:1rem}.menu-top-row{display:flex;align-items:flex-start;gap:var(--menu-gap);min-height:var(--menu-button-size)}.menu-root-right .menu-top-row{flex-direction:row-reverse}.menu-toggle{width:var(--menu-button-size);height:var(--menu-button-size);flex:0 0 var(--menu-button-size);display:grid;place-items:center;border:1px solid #475569;background:#020617db;color:#e2e8f0;border-radius:.75rem;font-size:1rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.menu-toggle-icon{width:1.05rem;height:1.05rem;display:block;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;fill:none}.menu-toggle-label{font-size:.68rem;font-weight:700;letter-spacing:.08em}.performance-setup-toggle{position:fixed;top:calc(env(safe-area-inset-top) + .75rem);left:50%;z-index:34;width:2.75rem;height:2.75rem;display:grid;place-items:center;border:1px solid #64748b;border-radius:999px;background:#020617c7;color:#e2e8f0;cursor:pointer;transform:translate(-50%);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);box-shadow:0 14px 30px #00000042;touch-action:manipulation}.performance-setup-toggle:hover,.performance-setup-toggle:focus-visible{border-color:#bae6fd;color:#f8fafc}.performance-canvas-frame{position:fixed;top:0;right:0;bottom:0;left:0;z-index:33;border:4px solid #fff;pointer-events:none}.setup-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:flex-start;justify-content:center;padding:calc(env(safe-area-inset-top) + 4.25rem) 1rem 1rem;pointer-events:auto;background:linear-gradient(180deg,#0206173d,#02061714)}.setup-pane{width:min(980px,100%);max-height:calc(100vh - 5.4rem - env(safe-area-inset-top));display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden;border:1px solid #334155;border-radius:1rem;background:#020617db;box-shadow:0 28px 70px #0000005c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:auto}.setup-pane-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.95rem 1rem .75rem;border-bottom:1px solid rgba(51,65,85,.82)}.setup-pane-header h1{margin:0;font-size:1rem;line-height:1.1;letter-spacing:.02em}.setup-pane-header p{margin:.28rem 0 0;color:#cbd5e1;font-size:.78rem;line-height:1.25}.setup-tabs{display:flex;gap:.45rem;overflow-x:auto;padding:.65rem .75rem;border-bottom:1px solid rgba(51,65,85,.82)}.setup-tab{min-height:2.5rem;padding:0 .85rem;border:1px solid #475569;border-radius:999px;background:#0f172a9e;color:#cbd5e1;font-size:.78rem;font-weight:700;cursor:pointer;touch-action:manipulation}.setup-tab.active{border-color:#38bdf8;background:#075985;color:#f0f9ff}.setup-tab-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:.7rem;overflow:auto;padding:.85rem}.setup-pane .menu-section{margin-bottom:0}.setup-tab-section-hidden{display:none}@media (min-width: 821px){.setup-section-scene{order:1;grid-column:1}.setup-section-postfx{order:2;grid-column:2}.setup-section-calibration{order:3;grid-column:1}.setup-section-projection{order:4;grid-column:2}.setup-section-images{order:5}.setup-section-presets{order:6}}.menu-inline-head{width:var(--menu-panel-width);height:var(--menu-button-size);display:flex;align-items:center;padding:0 .7rem;border:1px solid #334155;border-radius:.75rem;background:#020617cc;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.menu-inline-head h1{margin:0;font-size:.9rem;line-height:1}.menu-inline-head p{margin:.15rem 0 0;color:#cbd5e1;font-size:.72rem;line-height:1.1}.menu-root-right .menu-inline-head{text-align:right}.panel{margin-top:.65rem;margin-left:var(--menu-offset);width:var(--menu-panel-width);max-height:calc(100vh - 5rem);overflow:auto;padding:.8rem;border:1px solid #334155;border-radius:.9rem;background:#020617c7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.menu-root-right .panel{margin-left:0;margin-right:var(--menu-offset)}.menu-section{border:1px solid #334155;border-radius:.7rem;background:#0f172a9e;margin-bottom:.6rem}.section-summary{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.6rem .65rem;border:0;background:transparent;color:#e2e8f0;cursor:pointer}.section-summary span{display:block}.section-summary>span:first-child{flex:1;min-width:0;text-align:left}.section-summary>span:last-child{flex:0 0 1rem;width:1rem;text-align:center}.section-summary strong{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:#bae6fd}.section-summary small{display:block;margin-top:.2rem;color:#cbd5e1;font-size:.79rem}.section-summary-meta{display:grid;gap:.22rem}.section-summary .summary-kv-list{display:grid;gap:.12rem}.section-summary .summary-kv{display:flex;align-items:center;justify-content:space-between;gap:.4rem;min-width:0}.metric-stats li>span,.note-debug-row>span,.note-track-header>span,.note-track-item>span,.handpan-scale-main>*,.handpan-scale-meta>*,.capture-observed-head>span,.capture-observed-meta>span,.pattern-main>*,.pattern-meta>*{display:flex;align-items:center;min-width:0;min-height:var(--ui-kv-row-height);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric-stats li>span:last-child,.note-debug-row>span:last-child,.note-track-header>span:last-child,.note-track-item>span:last-child,.handpan-scale-main>*:last-child,.handpan-scale-meta>*:last-child,.capture-observed-head>span:last-child,.capture-observed-meta>span:last-child,.pattern-main>*:last-child,.pattern-meta>*:last-child{justify-content:flex-end;text-align:right}.section-summary .summary-kv-key,.section-summary .summary-kv-value{display:flex;align-items:center;min-height:var(--ui-kv-row-height);line-height:1.15;white-space:nowrap}.section-summary .summary-kv-key{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.section-summary .summary-kv-value{flex:0 0 auto;margin-left:auto;justify-content:flex-end;text-align:right}.metric-value{display:inline-flex;align-items:center;justify-content:flex-end;min-width:4.2ch;text-align:right;font-variant-numeric:tabular-nums}.metric-value-wide{min-width:7.2ch}.section-body{padding:0 .65rem .65rem}.buttons{display:flex;flex-wrap:wrap;gap:.5rem}.action-button{border:1px solid #475569;background:#0f172a;color:#e2e8f0;border-radius:.5rem;padding:.45rem .8rem;cursor:pointer}.action-button:disabled{opacity:.4;cursor:not-allowed}.action-button.active,.projection-set-button.active{border-color:#38bdf8;background:#075985;color:#f0f9ff}.stats{margin:.6rem 0 0;padding:0;list-style:none;color:#e2e8f0;line-height:1.45;font-size:.83rem}.metric-stats li{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:.45rem;align-items:stretch}.stat-label{color:#cbd5e1}.stat-value{min-width:5.8ch;text-align:right;font-variant-numeric:tabular-nums}.sound-bars{margin-top:.2rem;display:grid;gap:.45rem}.sound-row{display:grid;grid-template-columns:34px 1fr 42px;gap:.45rem;align-items:center}.sound-label,.sound-value{display:flex;align-items:center;min-height:var(--ui-kv-row-height);font-size:.74rem;color:#cbd5e1}.sound-value{justify-content:flex-end;min-width:42px;text-align:right;font-variant-numeric:tabular-nums}.sound-track{height:.48rem;border-radius:999px;background:#334155b8;overflow:hidden}.sound-fill{height:100%;width:0%;border-radius:999px;transition:width 80ms linear}.sound-fill-low{background:linear-gradient(90deg,#1d4ed8,#22d3ee)}.sound-fill-mid{background:linear-gradient(90deg,#22c55e,#eab308)}.sound-fill-high{background:linear-gradient(90deg,#fb7185,#f97316)}.sound-fill-spectrum{background:linear-gradient(90deg,#38bdf8,#f59e0b,#fb7185)}.section-summary .sound-bars-summary{display:table;table-layout:fixed;width:100%;margin-top:.45rem;border-spacing:0 .45rem}.section-summary .sound-bars-summary .sound-row{display:table-row;white-space:nowrap}.section-summary .sound-bars-summary .sound-label,.section-summary .sound-bars-summary .sound-track-cell,.section-summary .sound-bars-summary .sound-value{display:table-cell;vertical-align:middle}.section-summary .sound-bars-summary .sound-label,.section-summary .sound-bars-summary .sound-value{font-size:.74rem}.section-summary .sound-bars-summary .sound-label{width:34px}.section-summary .sound-bars-summary .sound-value{width:42px;min-width:42px}.section-summary .sound-bars-summary .sound-track-cell{padding:0 .45rem}.section-summary .sound-bars-summary .sound-track{display:block;width:100%;min-width:0}.note-debug-panel{display:grid;gap:.28rem;padding:.55rem .6rem;border:1px solid rgba(148,163,184,.32);border-radius:.65rem;background:#0f172a8f}.note-debug-row{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:.5rem;align-items:stretch;font-size:.74rem;color:#cbd5e1;font-variant-numeric:tabular-nums}.note-debug-row span:last-child{min-width:8ch;text-align:right;color:#f8fafc}.note-debug-main span:last-child{color:#bae6fd;font-weight:700;letter-spacing:.03em}.note-track-panel{display:grid;gap:.4rem;padding:.55rem .6rem;border:1px solid rgba(148,163,184,.22);border-radius:.65rem;background:#0206177a}.camera-preview-canvas{display:block;width:100%;aspect-ratio:16 / 9;border-radius:.65rem;border:1px solid rgba(148,163,184,.22);background:#020617}.note-track-header{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:.5rem;align-items:stretch;font-size:.75rem;color:#cbd5e1;font-variant-numeric:tabular-nums}.note-track-list{margin:0;padding:0;list-style:none;display:grid;gap:.24rem}.note-distribution-list{margin:0;padding:0;list-style:none;display:grid;gap:.32rem}.note-distribution-row{display:grid;grid-template-columns:46px minmax(0,1fr) 58px;gap:.45rem;align-items:center;font-size:.74rem;font-variant-numeric:tabular-nums}.note-distribution-label,.note-distribution-value{display:flex;align-items:center;min-height:var(--ui-kv-row-height);color:#cbd5e1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-distribution-value{justify-content:flex-end;min-width:58px;text-align:right}.note-distribution-track{display:block;width:100%;min-width:0}.note-distribution-fill{display:block;box-shadow:0 0 10px #f8fafc2e}.note-track-item{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:.5rem;align-items:stretch;padding:.08rem 0;font-size:.75rem;color:#cbd5e1;font-variant-numeric:tabular-nums}.note-track-item span:last-child{text-align:right;min-width:5.2ch}.note-track-item.active span:first-child{color:#bae6fd;font-weight:700}.note-sequence{margin:0;font-size:.73rem;line-height:1.45;color:#e2e8f0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;word-break:break-word}.handpan-scale-list{margin:0;padding:0;list-style:none;display:grid;gap:.34rem}.handpan-scale-item{display:grid;gap:.16rem;padding:.08rem 0;color:#cbd5e1;font-size:.74rem;font-variant-numeric:tabular-nums}.handpan-scale-main,.handpan-scale-meta{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:.5rem;align-items:stretch}.handpan-scale-main strong{color:#f8fafc;font-size:.74rem;line-height:1.25}.handpan-scale-meta{color:#94a3b8}.handpan-scale-main span:last-child,.handpan-scale-meta span:last-child{text-align:right}.handpan-scale-item.active .handpan-scale-main strong{color:#bae6fd}.capture-observed-list,.pattern-list{margin:0;padding:0;list-style:none;display:grid;gap:.35rem}.capture-observed-item,.pattern-item{display:grid;gap:.18rem;padding:.1rem 0;color:#cbd5e1;font-size:.75rem;font-variant-numeric:tabular-nums}.capture-observed-head,.capture-observed-meta,.pattern-main,.pattern-meta{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:.5rem;align-items:stretch}.capture-observed-head span:last-child,.capture-observed-meta span:last-child,.pattern-main span:last-child,.pattern-meta span:last-child{text-align:right}.pattern-main strong{color:#f8fafc;font-size:.74rem;line-height:1.25}.pattern-meta{color:#94a3b8}.controls{display:grid;gap:.7rem}.control-group{display:grid;gap:.25rem;font-size:.79rem;color:#dbeafe}.control-group input[type=range]{width:100%}.control-group select{width:100%;border:1px solid #475569;background:#0f172a;color:#e2e8f0;border-radius:.45rem;padding:.35rem .45rem}.control-group select:disabled{border-color:#334155;background:#111827;color:#64748b;opacity:.62}.toggle-group{display:flex;align-items:center;gap:.45rem;margin-top:.6rem;font-size:.84rem;color:#dbeafe}.toggle-group-compact{margin-top:0}.handpan-summary-toggle{padding:0 .65rem .65rem;color:#cbd5e1}.projection-submenu{display:grid;gap:.55rem;border:1px solid rgba(148,163,184,.24);border-radius:.65rem;background:#0206174d}.projection-submenu-summary{width:100%;display:flex;justify-content:space-between;gap:.6rem;padding:.55rem .6rem;border:0;background:transparent;color:#e2e8f0;cursor:pointer}.projection-submenu-summary>span:first-child{min-width:0;text-align:left}.projection-submenu-summary>span:last-child{flex:0 0 1rem;text-align:center}.projection-submenu-summary strong,.projection-submenu-summary small{display:block}.projection-submenu-summary strong{color:#bae6fd;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}.projection-submenu-summary small{margin-top:.18rem;color:#cbd5e1;font-size:.75rem}.projection-submenu-body{display:grid;gap:.7rem;padding:0 .6rem .6rem}.projection-actions{align-items:center}.control-group input:disabled{opacity:.4}.control-note{margin:0;font-size:.74rem;line-height:1.4;color:#cbd5e1}.control-note-subtle{color:#94a3b8}.error{margin:.5rem 0 0;color:#fca5a5;font-size:.82rem}.viewport{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;z-index:0}.handpan-spotlight-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;place-items:center;overflow:hidden;perspective:900px;pointer-events:none}.handpan-spotlight-mask.editing{cursor:move;pointer-events:auto}.handpan-spotlight-dimmer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.handpan-spotlight-shell{position:relative;z-index:1;width:min(86vw,148vh);aspect-ratio:2.58 / 1;border-radius:50%;overflow:hidden;border:1px solid rgba(186,230,253,.42);background:radial-gradient(ellipse at 50% 33%,#bae6fd33,#bae6fd00 34%),radial-gradient(ellipse at 50% 68%,#38bdf829,#38bdf800 38%),radial-gradient(ellipse at 50% 50%,#0206170a,#02061738);box-shadow:0 0 2.8rem #38bdf833,inset 0 1.2rem 3.6rem #ffffff1a,inset 0 -1.2rem 3.6rem #00000057;transform-style:preserve-3d;transform-origin:center;will-change:transform}.handpan-spotlight-mode-additive .handpan-spotlight-shell{opacity:.82;mix-blend-mode:screen}.handpan-spotlight-mode-subtractive .handpan-spotlight-shell{opacity:.7;mix-blend-mode:normal}.handpan-spotlight-rim,.handpan-spotlight-dome,.handpan-spotlight-ding,.handpan-spotlight-waist{position:absolute;pointer-events:none}.handpan-spotlight-rim{top:3.5%;right:3.5%;bottom:3.5%;left:3.5%;border:2px solid rgba(224,242,254,.36);border-radius:50%;box-shadow:0 0 1.2rem #7dd3fc2e,inset 0 0 1.4rem #02061747}.handpan-spotlight-dome{left:9%;right:9%;height:45%;border-radius:50%;border:1px solid rgba(186,230,253,.22)}.handpan-spotlight-dome-top{top:7%;background:radial-gradient(ellipse at 50% 100%,#e0f2fe47,#38bdf80a 62%,#02061700);transform:scaleY(.76)}.handpan-spotlight-dome-bottom{bottom:7%;background:radial-gradient(ellipse at 50% 0%,#0f172a52,#38bdf812 64%,#02061700);transform:scaleY(.76)}.handpan-spotlight-ding{top:50%;left:50%;width:10%;aspect-ratio:1 / .58;border-radius:50%;background:radial-gradient(ellipse at 42% 35%,#ffffff85,#7dd3fc3d 45%,#0206172e);box-shadow:0 0 1rem #7dd3fc33,inset 0 -.2rem .8rem #02061761;transform:translate(-50%,-50%)}.handpan-spotlight-waist{left:13%;right:13%;top:50%;height:1px;background:linear-gradient(90deg,#7dd3fc00,#e0f2fe57,#7dd3fc00);box-shadow:0 0 .75rem #7dd3fc2e}.debug-overlay{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:10}.camera-feed{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none}@media (max-width: 820px){.menu-root{--menu-panel-width: min(272px, calc(100vw - 5rem) )}.setup-layer{padding:calc(env(safe-area-inset-top) + 3.9rem) .55rem .55rem}.setup-pane{width:calc(100vw - 1.1rem);max-height:calc(100vh - 4.65rem - env(safe-area-inset-top));border-radius:.85rem}.setup-pane-header{padding:.78rem .8rem .62rem}.setup-pane-header p{font-size:.74rem}.setup-tabs{padding:.55rem .6rem}.setup-tab{min-width:max-content;min-height:2.65rem}.setup-tab-content{grid-template-columns:1fr;padding:.65rem}}