:root{color:#f7f1e7;font-synthesis:none;text-rendering:optimizelegibility;--ink:#f7f1e7;--muted:#c4b9a8;--surface:#1b1712eb;--surface-solid:#1b1712;--line:#eed5b033;--line-strong:#eed5b061;--bronze:#d3914e;--bronze-bright:#f0bd70;--jade:#5ea58d;--danger:#e05d4f;--shadow:#00000061;--mark-rack:#2b1b11;--mark-rack-edge:#8a5127;--mark-gong-center:#ffd690;--mark-gong:#c67535;--mark-gong-edge:#572912;background:#16130f;font-family:Aptos,Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}html,body,#app{overscroll-behavior:none;width:100%;height:100%;margin:0;overflow:hidden}body{touch-action:none}button,select,input{font:inherit}button{color:inherit}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--bronze-bright);outline-offset:3px}[hidden]{display:none!important}#app{isolation:isolate;background:#16130f;transition:background-color .18s;position:relative}#app[data-theme=light]{--ink:#211c16;--muted:#695e50;--surface:#faf7eff0;--surface-solid:#faf7ef;--line:#3d312329;--line-strong:#3d31234d;--bronze:#a85f28;--bronze-bright:#7f431e;--jade:#237866;--shadow:#46341e2e;--mark-rack:#382116;--mark-rack-edge:#6c3a1d;--mark-gong-center:#f0b761;--mark-gong:#a95525;--mark-gong-edge:#4b220f;color:var(--ink);background:#ded7c9}#scene{touch-action:none;cursor:grab;width:100%;height:100%;display:block;position:absolute;inset:0}#scene:active{cursor:grabbing}.topbar{z-index:10;padding:max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));pointer-events:none;justify-content:space-between;align-items:flex-start;display:flex;position:absolute;top:0;left:0;right:0}.identity{min-width:0;color:var(--ink);pointer-events:auto;align-items:flex-start;gap:11px;display:flex}.identity-copy{min-width:0}.kulintang-mark{filter:drop-shadow(0 4px 7px #00000057);flex:none;justify-content:center;align-items:center;gap:1px;width:62px;height:34px;margin-top:1px;padding:0 4px;display:flex;position:relative}.kulintang-mark:before{border:3px solid var(--mark-rack);border-right-color:var(--mark-rack-edge);border-left-color:var(--mark-rack-edge);content:"";border-radius:4px;position:absolute;inset:4px 0;transform:perspective(36px)rotateX(9deg);box-shadow:inset 0 1px #ffdead29,0 1px #00000047}.kulintang-mark i{z-index:1;border:1px solid var(--mark-gong-edge);background:radial-gradient(circle at 48% 42%, var(--mark-gong-center) 0 26%, var(--mark-gong) 30% 65%, var(--mark-gong-edge) 71% 100%);border-radius:50%;flex:none;width:6px;height:10px;position:relative;box-shadow:0 1px 2px #0000006b}.kulintang-mark i:first-child{transform:scale(1.08)}.kulintang-mark i:nth-child(2){transform:scale(1.05)}.kulintang-mark i:nth-child(3){transform:scale(1.02)}.kulintang-mark i:nth-child(5){transform:scale(.97)}.kulintang-mark i:nth-child(6){transform:scale(.94)}.kulintang-mark i:nth-child(7){transform:scale(.91)}.kulintang-mark i:nth-child(8){transform:scale(.88)}.identity h1{letter-spacing:0;text-shadow:0 2px 3px #0000007a,0 0 18px #00000047;-webkit-text-stroke:.35px #00000052;text-wrap:balance;margin:0;font-family:Iowan Old Style,Palatino Linotype,Georgia,serif;font-size:46px;font-weight:600;line-height:.94}.identity p{color:var(--muted);letter-spacing:0;text-transform:uppercase;text-shadow:0 1px 3px #0009,0 0 10px #00000059;margin:8px 0 0 2px;font-size:12px;font-weight:650}#app[data-theme=light] .identity h1{text-shadow:0 1px 2px #fffffffa,0 0 16px #ffffffe0;-webkit-text-stroke-color:#ffffffb8}#app[data-theme=light] .identity p{text-shadow:0 1px 2px #fffffffa,0 0 12px #ffffffe6}.top-actions{pointer-events:auto;align-items:center;gap:6px;display:flex}.top-actions .icon-button{min-width:42px;min-height:42px}.icon-button,.transport-button{border:1px solid var(--line);width:42px;height:42px;color:var(--ink);background:var(--surface);box-shadow:0 8px 24px var(--shadow);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50%;place-items:center;padding:0;transition:border-color .14s,background-color .14s,color .14s,transform .14s,opacity .14s;display:inline-grid;position:relative}.icon-button:hover,.transport-button:hover:not(:disabled){border-color:var(--line-strong);transform:translateY(-1px)}.icon-button:active,.transport-button:active:not(:disabled){transform:translateY(0)scale(.96)}.icon-button svg,.transport-button svg,.setting-row svg,.rotate-note svg{stroke-width:1.8px;width:18px;height:18px}[data-tooltip]:after{z-index:40;border:1px solid var(--line);color:var(--ink);background:var(--surface-solid);box-shadow:0 6px 18px var(--shadow);content:attr(data-tooltip);white-space:nowrap;opacity:0;pointer-events:none;border-radius:4px;padding:6px 8px;font-size:11px;font-weight:650;line-height:1;transition:opacity .12s,transform .12s;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-3px)}[data-tooltip]:hover:after,[data-tooltip]:focus-visible:after{opacity:1;transform:translate(-50%)}.top-actions [data-tooltip]:after,.scene-tools [data-tooltip]:after{top:50%;left:auto;right:calc(100% + 8px);transform:translate(3px,-50%)}.top-actions [data-tooltip]:nth-child(2):after,.scene-tools [data-tooltip]:nth-child(2):after{right:calc(200% + 14px)}.top-actions [data-tooltip]:hover:after,.top-actions [data-tooltip]:focus-visible:after,.scene-tools [data-tooltip]:hover:after,.scene-tools [data-tooltip]:focus-visible:after{transform:translateY(-50%)}.scene-tools{z-index:8;top:max(66px, calc(env(safe-area-inset-top) + 48px));right:max(20px, env(safe-area-inset-right));gap:6px;display:flex;position:absolute}.scene-tools .surface{width:42px;min-width:42px;height:42px;min-height:42px}.reference-panel{z-index:11;top:max(120px, calc(env(safe-area-inset-top) + 102px));right:max(20px, env(safe-area-inset-right));border:1px solid var(--line);width:min(326px,100vw - 32px);min-height:58px;color:var(--ink);background:var(--surface-solid);box-shadow:0 14px 38px var(--shadow);border-radius:8px;grid-template-columns:minmax(0,1fr) 40px 42px;align-items:center;gap:6px;padding:7px;display:grid;position:absolute}.reference-copy{gap:2px;min-width:0;padding-left:5px;display:grid}.reference-copy>span{color:var(--muted);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:9px;font-weight:750;overflow:hidden}.reference-copy select{width:100%;min-width:0;height:26px;color:var(--ink);cursor:pointer;background:0 0;border:0;padding:0 24px 0 0;font-size:14px;font-weight:700}.reference-play{border:1px solid var(--line-strong);color:#1d150d;background:var(--bronze-bright);cursor:pointer;border-radius:50%;place-items:center;width:38px;height:38px;padding:0;display:grid}.reference-play svg{fill:currentColor;width:17px;height:17px}.reference-time{color:var(--muted);font-variant-numeric:tabular-nums;text-align:center;font-size:11px;font-weight:700}.load-state{z-index:9;top:max(88px, calc(env(safe-area-inset-top) + 72px));left:max(20px, env(safe-area-inset-left));border:1px solid var(--line);min-height:32px;color:var(--muted);background:var(--surface);box-shadow:0 8px 24px var(--shadow);pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:6px;align-items:center;gap:9px;padding:7px 11px;font-size:12px;font-weight:650;transition:opacity .18s,transform .18s;display:flex;position:absolute}.load-state.ready{opacity:0;transform:translateY(-5px)}.spinner{border:2px solid var(--line-strong);border-top-color:var(--bronze-bright);border-radius:50%;width:14px;height:14px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.gong-controls{z-index:9;left:50%;bottom:calc(max(18px, env(safe-area-inset-bottom)) + 66px);border:1px solid var(--line);background:var(--surface);width:min(580px,100vw - 32px);box-shadow:0 12px 32px var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:8px;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;padding:6px;display:grid;position:absolute;transform:translate(-50%)}.gong-key{min-width:0;height:48px;color:var(--ink);cursor:pointer;touch-action:manipulation;background:0 0;border:1px solid #0000;border-radius:5px;grid-template-columns:1fr auto;align-items:center;gap:4px;padding:0 9px;transition:background-color .1s,color .1s,transform .1s;display:grid;position:relative}.gong-key:hover{background:#d3914e21}.gong-key.active{color:#1d150d;background:var(--bronze-bright);transform:translateY(1px)}.gong-key span{text-align:left;min-width:0;font-family:Iowan Old Style,Georgia,serif;font-size:20px;font-weight:700}.gong-key kbd{border:1px solid var(--line-strong);width:22px;height:22px;color:var(--muted);box-shadow:inset 0 -1px 0 var(--line);background:#ffffff0a;border-radius:4px;place-items:center;font-family:inherit;font-size:10px;font-weight:750;display:grid}.transport{z-index:12;left:50%;bottom:max(12px, env(safe-area-inset-bottom));border:1px solid var(--line);background:var(--surface);min-height:52px;box-shadow:0 14px 36px var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:8px;align-items:center;gap:3px;padding:5px;display:flex;position:absolute;transform:translate(-50%)}.transport-button{width:40px;height:40px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border-color:#0000;border-radius:5px}.transport-button:hover:not(:disabled){background:#ffffff12}.transport-button:disabled{opacity:.3;cursor:default}.transport-button.record svg{fill:currentColor;color:var(--danger);stroke:var(--danger)}.transport-button.record.recording{color:#fff;background:var(--danger);animation:1.4s ease-in-out infinite record-pulse}.transport-button.record.recording svg{color:#fff;stroke:#fff}@keyframes record-pulse{50%{box-shadow:inset 0 0 0 2px #ffffff4d}}.transport-button.toggle[aria-pressed=true]{color:#13261f;background:var(--jade)}.transport-readout{min-width:54px;height:40px;color:var(--muted);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;padding:0 8px;font-size:12px;font-weight:700;display:inline-flex}.transport-divider{background:var(--line);width:1px;height:26px;margin:0 2px}.settings-panel{z-index:11;right:max(16px, env(safe-area-inset-right));bottom:calc(max(12px, env(safe-area-inset-bottom)) + 62px);border:1px solid var(--line);width:min(310px,100vw - 32px);color:var(--ink);background:var(--surface-solid);box-shadow:0 18px 46px var(--shadow);border-radius:8px;padding:8px 14px;position:absolute}.setting-row{border-bottom:1px solid var(--line);grid-template-columns:64px minmax(0,1fr);align-items:center;gap:10px;min-height:48px;display:grid}.setting-row:last-child{border-bottom:0}.setting-row label{color:var(--muted);text-transform:uppercase;font-size:11px;font-weight:750}.setting-row select{border:1px solid var(--line-strong);width:100%;height:34px;color:var(--ink);background-color:var(--surface-solid);cursor:pointer;border-radius:4px;padding:0 30px 0 9px}.slider-row{grid-template-columns:64px 18px minmax(0,1fr)}.slider-row svg{width:16px;height:16px;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--bronze);cursor:pointer}.about-dialog{border:1px solid var(--line-strong);width:min(680px,100vw - 32px);max-height:min(760px,100dvh - 32px);color:var(--ink);background:var(--surface-solid);border-radius:8px;padding:0;box-shadow:0 30px 100px #0000008c}.about-dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#080705ad}.dialog-head{z-index:1;border-bottom:1px solid var(--line);background:var(--surface-solid);justify-content:space-between;align-items:flex-start;gap:20px;padding:24px 24px 18px;display:flex;position:sticky;top:0}.eyebrow{color:var(--bronze-bright);text-transform:uppercase;font-size:11px;font-weight:750}.dialog-head h2{letter-spacing:0;margin:6px 0 0;font-family:Iowan Old Style,Georgia,serif;font-size:30px;font-weight:600;line-height:1.1}.dialog-head .icon-button{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;flex:none}.about-body{color:var(--muted);padding:22px 24px 26px;font-family:Iowan Old Style,Georgia,serif;font-size:17px;line-height:1.58;overflow-y:auto}.about-body p{max-width:60ch;margin:0 0 16px}.facts{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;margin:26px 0;display:grid}.facts div{border-bottom:1px solid var(--line);grid-template-columns:90px 1fr;gap:12px;padding:13px 0;display:grid}.facts div:nth-child(odd){padding-right:18px}.facts div:nth-child(2n){border-left:1px solid var(--line);padding-left:18px}.facts dt{color:var(--muted);text-transform:uppercase;font-family:Aptos,Helvetica Neue,Arial,sans-serif;font-size:11px;font-weight:750}.facts dd{color:var(--ink);margin:0}.sources{flex-wrap:wrap;align-items:center;gap:8px 14px;font-family:Aptos,Helvetica Neue,Arial,sans-serif;font-size:12px;display:flex}.sources span{color:var(--muted);text-transform:uppercase;font-weight:750}.sources a{color:var(--bronze-bright);text-underline-offset:3px;text-decoration-thickness:1px}.sources small{color:var(--muted);flex-basis:100%;line-height:1.45}.rotate-note{display:none}@media (max-width:680px){.topbar{padding-top:max(14px, env(safe-area-inset-top));padding-right:max(14px, env(safe-area-inset-right));padding-left:max(14px, env(safe-area-inset-left))}.identity h1{font-size:34px}.kulintang-mark{gap:0;width:50px;height:30px;padding-inline:4px}.kulintang-mark i{width:5px;height:9px}.identity p{margin-top:6px;font-size:10px}.icon-button{width:38px;height:38px}.top-actions .icon-button,.scene-tools .surface{min-width:38px;min-height:38px}.scene-tools{top:max(58px, calc(env(safe-area-inset-top) + 44px));right:max(14px, env(safe-area-inset-right))}.reference-panel{top:max(110px, calc(env(safe-area-inset-top) + 96px));width:calc(100vw - 16px);right:8px}.load-state{top:max(70px, calc(env(safe-area-inset-top) + 56px));left:max(14px, env(safe-area-inset-left));text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 72px);overflow:hidden}.gong-controls{bottom:calc(max(10px, env(safe-area-inset-bottom)) + 58px);gap:2px;width:calc(100vw - 16px);padding:4px}.gong-key{border-right-color:var(--line);border-radius:0;grid-template-columns:1fr;justify-items:center;height:42px;padding:0}.gong-key:last-child{border-right-color:#0000}.gong-key span{text-align:center;font-size:18px}.gong-key kbd{display:none}.transport{bottom:max(6px, env(safe-area-inset-bottom));justify-content:center;gap:1px;width:calc(100vw - 16px);min-height:48px;padding:3px}.transport-button{width:36px;height:38px}.transport-readout{min-width:42px;padding:0 3px}.transport-divider{margin:0}.settings-panel{right:8px;bottom:calc(max(6px, env(safe-area-inset-bottom)) + 54px);width:calc(100vw - 16px)}[data-tooltip]:after{display:none}.about-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.dialog-head{padding:20px 18px 16px}.dialog-head h2{font-size:25px}.about-body{padding:18px;font-size:16px}.facts{grid-template-columns:1fr}.facts div,.facts div:nth-child(odd),.facts div:nth-child(2n){border-left:0;padding:11px 0}}@media (max-width:380px){.identity{gap:7px}.identity h1{font-size:29px}.kulintang-mark{width:47px;height:27px;padding-inline:3px}.kulintang-mark i{width:5px;height:8px}}@media (max-width:900px),(pointer:coarse){.gong-key{grid-template-columns:1fr;justify-items:center}.gong-key kbd{display:none}}@media (max-height:560px) and (orientation:landscape){.identity h1{font-size:30px}.identity p{display:none}.scene-tools,.load-state{top:max(56px, calc(env(safe-area-inset-top) + 44px))}.reference-panel{top:max(54px, calc(env(safe-area-inset-top) + 42px));right:max(8px, env(safe-area-inset-right));width:min(310px,42vw)}.gong-controls{left:max(12px, env(safe-area-inset-left));bottom:max(8px, env(safe-area-inset-bottom));width:min(420px,52vw);transform:none}.transport{right:max(8px, env(safe-area-inset-right));left:auto;transform:none}.settings-panel{right:max(8px, env(safe-area-inset-right));width:min(360px,100vw - 16px);bottom:64px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}