:root{color-scheme:light dark;--bg:#f3f1eb;--panel:#faf9f5;--text:#292f2b;--muted:#667066;--line:#d5d8cf;--line-strong:#9a9f92;--accent:#72583b;--accent-soft:#e8e3d7;--chart:#61785f;--wave:#72583b;--danger:#8a4034;--danger-bg:#f3e6df;--stage:#111413;--stage-text:#ecefe8;--stage-muted:#acb4aa;--stage-line:#485046;--font-sans:"Helvetica Neue","Noto Sans CJK TC","PingFang TC","Microsoft JhengHei",sans-serif;--font-voice:"Noto Serif CJK TC","Source Han Serif TC","Songti TC","PMingLiU",serif;--font-mono:"SFMono-Regular",Consolas,monospace}@media(prefers-color-scheme:dark){:root{--bg:#191c19;--panel:#222621;--text:#e6e9e1;--muted:#acb5a6;--line:#3a4237;--line-strong:#737e6b;--accent:#cbb68d;--accent-soft:#35372b;--chart:#a1b699;--wave:#cbb68d;--danger:#edb0a0;--danger-bg:#3a2923}}*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.7 var(--font-sans);-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit;border-radius:0}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;background:none;border:0}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}a{color:inherit;text-decoration:none}svg{width:18px;height:18px;flex-shrink:0}h1,h2,p{margin:0}h1{font:500 22px/1.65 var(--font-voice);letter-spacing:.035em}h2{font-size:18px;font-weight:500}#app{max-width:1600px;margin:auto;padding:0 48px}.masthead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;min-height:100px;border-bottom:.5px solid var(--line)}.identity{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:500;line-height:1.7;width:fit-content}.seal{width:37px;height:43px;display:grid;place-items:center;border:.5px solid var(--accent);color:var(--accent);font:400 24px var(--font-voice);flex-shrink:0}.identity-sub{display:block;font-size:12px;color:var(--muted);font-weight:400}nav{display:flex;align-items:stretch;align-self:stretch;gap:28px}.nav-button{position:relative;display:flex;align-items:center;gap:8px;padding:0;color:var(--muted);font-size:14px;white-space:nowrap}.nav-button.selected,.nav-button:hover{color:var(--text)}.nav-button.selected:after{content:"";position:absolute;left:0;right:0;bottom:-.5px;height:1px;background:var(--accent)}.nav-button small{font:400 11px var(--font-mono)}.locale-switch{display:flex;align-items:center;justify-self:end;gap:10px;font-size:12px;color:var(--muted);white-space:nowrap}.locale-switch button{padding:4px 0;font-size:12px;color:var(--muted)}.locale-switch button[aria-pressed=true]{color:var(--text);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:.5px}main{padding-top:32px}.exhibit-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:27px}.collection-meta{display:flex;align-items:center;gap:23px;flex-shrink:0;font-size:13px;color:var(--muted);white-space:nowrap}.collection-meta b{font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;margin-right:3px}.gallery{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:34px}.stage{position:relative;min-width:0;height:470px;overflow:hidden;background:var(--stage);color:var(--stage-text)}#scene{position:absolute;inset:0;touch-action:none}#scene canvas{display:block;width:100%;height:100%;outline:none}.stage-label{position:absolute;left:22px;top:19px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--stage-muted);pointer-events:none}.status-dot{width:4px;height:4px;display:inline-block;background:currentColor;border-radius:50%;flex-shrink:0}.view-toolbar{position:absolute;right:14px;top:12px;display:flex;align-items:center;gap:2px}.icon-button{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:.5px solid transparent;color:var(--muted);padding:0}.icon-button:hover,.icon-button[aria-pressed=true]{color:var(--accent);background:var(--accent-soft);border-color:var(--line)}.stage .icon-button{color:var(--stage-muted)}.stage .icon-button:hover,.stage .icon-button[aria-pressed=true]{color:var(--stage-text);border-color:var(--stage-line);background:var(--stage)}.stage button:focus-visible{outline-color:var(--stage-text)}.tool-divider{width:.5px;height:17px;background:var(--line);margin:0 7px;flex-shrink:0}.stage .tool-divider{background:var(--stage-line)}.stage-caption{position:absolute;left:22px;right:22px;bottom:18px;display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--stage-muted);pointer-events:none}.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;background:var(--stage);font-size:12px;color:var(--stage-muted)}.loading-mark{font:400 42px var(--font-voice);color:var(--stage-text)}progress{width:120px;height:2px;accent-color:var(--stage-text);border:0}.analysis-rail{min-width:0;display:flex;flex-direction:column;padding:0 0 1px}.rail-heading,.spectrum-heading{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}.live-badge{font-size:11px}.live-badge.sounding{color:var(--accent)}.note-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:21px}.note-header h2{font:500 32px/1.4 var(--font-voice);letter-spacing:.06em;white-space:nowrap}.note-pitch{font-size:19px;color:var(--accent);text-align:right}.reference-reading{display:flex;align-items:baseline;gap:10px;margin-top:4px}.reference-reading>span{font-size:23px;line-height:1.6;font-variant-numeric:tabular-nums}.reference-reading small{font-size:11px;color:var(--muted)}.note-facts{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);padding-bottom:18px;border-bottom:.5px solid var(--line)}.spectrum-heading{margin:17px 0 7px;font-size:11px}#spectrum{display:block;width:100%;height:82px}.frequency-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.wave-wrap{padding:8px 0 14px}#waveform{display:block;width:100%;height:27px}.field-label{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;margin-top:auto}.field-label>span:last-child{font-size:11px}.take-control{display:flex;gap:9px;margin-top:7px}select{min-width:0;min-height:38px;padding:0 28px 0 10px;background:var(--panel);border:.5px solid var(--line);font-size:12px;cursor:pointer}.take-control select{flex:1;width:0;text-overflow:ellipsis}.take-control .icon-button{border-color:var(--line)}.mapping-line{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font-size:11px;min-height:19px;margin-top:8px}#mapping-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uncertain{color:var(--danger)}.text-link{display:inline-flex;align-items:center;gap:4px;padding:0;color:var(--muted);font-size:inherit;white-space:nowrap}.text-link:hover{color:var(--accent)}.text-link svg{width:14px;height:14px}.instrument{margin-top:29px}.instrument-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px}.section-name{display:flex;align-items:baseline;gap:18px;min-width:0}.section-name h2{font-size:16px;flex-shrink:0}#play-status{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.instrument-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}#layout-select{max-width:192px;margin-right:12px}#volume{width:75px;margin:0 0 0 5px;accent-color:var(--accent);cursor:pointer}.bell-row{display:flex;min-width:0}.bell-row+.bell-row{margin-top:11px}.row-label{width:27px;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-size:11px;color:var(--muted);flex-shrink:0;letter-spacing:.15em}.pads{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:100%;min-width:0;border-top:.5px solid var(--line);border-bottom:.5px solid var(--line)}.bell-pad{height:105px;padding:10px 14px 11px;border-left:.5px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;min-width:0;text-align:left}.bell-pad:last-child{border-right:.5px solid var(--line)}.bell-pad:hover{background:var(--panel)}.bell-pad.active,.bell-pad.is-active,.bell-pad.striking{background:var(--accent-soft)}.bell-pad.pending{opacity:.65}.bell-pad:focus-visible{outline-offset:-3px}.pad-top,.pad-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.pad-name,.bell-pad strong{font:500 18px/1.4 var(--font-voice);letter-spacing:.06em;color:var(--text)}.pad-indicator{width:4px;height:4px;border:.5px solid var(--muted);border-radius:50%;flex-shrink:0}.bell-pad.active .pad-indicator,.bell-pad.striking .pad-indicator{background:var(--accent);border-color:var(--accent)}footer{display:flex;align-items:center;gap:21px;margin-top:28px;padding:19px 0 25px;border-top:.5px solid var(--line);color:var(--muted);font-size:11px}.footer-identity{margin-left:auto}#error-banner{margin-top:20px;padding:12px 16px;background:var(--danger-bg);color:var(--danger);border:.5px solid var(--danger);font-size:13px}dialog{width:780px;max-width:calc(100vw - 48px);max-height:86dvh;padding:0;background:var(--bg);color:var(--text);border:.5px solid var(--line-strong);overflow:auto}dialog::backdrop{background:#00000094}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 27px 18px;border-bottom:.5px solid var(--line)}.dialog-top h2{font-size:18px}.dialog-top small{margin-left:8px;font-size:12px;color:var(--muted);font-weight:400}.archive-filters{display:flex;align-items:center;gap:15px;padding:18px 27px;border-bottom:.5px solid var(--line)}.search-field{display:flex;align-items:center;gap:9px;flex:1;min-width:0;color:var(--muted);border-bottom:.5px solid var(--line-strong)}.search-field svg{width:16px;height:16px}.search-field input{width:100%;min-width:0;height:38px;border:0;background:transparent;font-size:13px;outline-offset:2px}.search-field input::placeholder{color:var(--muted);opacity:1}.archive-list{max-height:min(48dvh,470px);overflow-y:auto;padding:0 27px}.archive-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:.5px solid var(--line)}.archive-play{width:36px;height:36px;border-color:var(--line)}.record-info{min-width:0;flex:1}.record-name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.record-meta{font-size:11px;color:var(--muted);margin-top:2px}.empty-state{padding:27px 0;color:var(--muted);font-size:13px}.archive-transport{display:flex;align-items:center;gap:13px;padding:14px 27px;background:var(--panel);border-top:.5px solid var(--line);font-size:11px}#archive-now{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#archive-seek{flex:1;min-width:0;width:0;accent-color:var(--accent);cursor:pointer}#archive-time{min-width:70px;text-align:right;font-variant-numeric:tabular-nums}.archive-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 27px;border-top:.5px solid var(--line);font-size:11px;color:var(--muted)}.research-dialog{width:720px}#research-content{padding:6px 27px 23px;overflow-x:auto}.reference-table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}.reference-table th,.reference-table td{padding:11px 12px;border-bottom:.5px solid var(--line);text-align:left;white-space:nowrap}.reference-table th{font-size:11px;color:var(--muted);font-weight:400}.reference-table td:first-child{font:400 15px var(--font-voice)}.reference-table th:last-child,.reference-table td:last-child{text-align:right}.stage:fullscreen{width:100%;height:100dvh}html[data-locale=en] h1{font-family:Georgia,Times New Roman,serif;letter-spacing:0;max-width:920px}html[data-locale=en] .identity{font-size:12px}html[data-locale=en] .identity-sub{font-size:11px}html[data-locale=en] .note-header h2{font-family:Arial,Helvetica Neue,sans-serif;font-size:29px;letter-spacing:0}html[data-locale=en] .bell-pad strong{font-family:Arial,Helvetica Neue,sans-serif;font-size:15px;line-height:1.25;letter-spacing:0}html[data-locale=en] .row-label{writing-mode:horizontal-tb;transform:rotate(-90deg);letter-spacing:0}@media(min-width:1700px){.stage{height:530px}.gallery{grid-template-columns:minmax(0,1fr) 304px;gap:40px}#spectrum{height:112px}}@media(max-width:1100px){#app{padding:0 30px}.masthead{grid-template-columns:1fr auto auto;gap:24px}nav{gap:20px}.gallery{grid-template-columns:minmax(0,1fr) 253px;gap:25px}.stage{height:450px}.bell-pad{padding:10px}.bell-pad strong{font-size:16px}}@media(max-width:850px){#app{padding:0 26px}.masthead{grid-template-columns:1fr auto;min-height:133px;padding-top:20px;gap:0 24px}nav{grid-column:1/-1;grid-row:2;justify-content:center;gap:34px;min-height:53px;margin-top:11px}.locale-switch{grid-row:1;grid-column:2}.exhibit-heading{flex-direction:column;gap:12px;align-items:flex-start;margin-bottom:22px}main{display:flex;flex-direction:column;padding-top:25px}.exhibit-heading{order:0}.gallery{display:contents}.stage{order:1;height:clamp(300px,53vw,440px)}.instrument{order:2;margin-top:22px}.analysis-rail{order:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;margin-top:30px;padding-top:20px;border-top:.5px solid var(--line)}.rail-heading{grid-column:1;grid-row:1}.note-header{grid-column:1;grid-row:2;margin-top:15px}.reference-reading{grid-column:1;grid-row:3}.note-facts{grid-column:1;grid-row:4;border:0;padding-bottom:15px}.spectrum-heading{grid-column:2;grid-row:1;margin:0}#spectrum{grid-column:2;grid-row:2/4;height:85px;align-self:end}.frequency-axis{grid-column:2;grid-row:4;align-self:start}.wave-wrap{grid-column:2;grid-row:5/7;align-self:center;padding:0}.field-label{grid-column:1;grid-row:5}.take-control{grid-column:1;grid-row:6}.mapping-line{grid-column:1/-1;grid-row:7}.instrument-top{flex-wrap:wrap;gap:12px}.instrument-actions{margin-left:auto}.bell-row{overflow-x:auto;padding-bottom:2px}.pads{grid-template-columns:repeat(8,minmax(84px,1fr));flex-shrink:0;width:calc(100% - 27px)}html[data-locale=en] .pads{grid-template-columns:repeat(8,minmax(126px,1fr))}html[data-locale=en] .note-header{flex-wrap:wrap;justify-content:flex-start;gap:4px 10px}html[data-locale=en] .note-header h2{flex-basis:100%;min-width:0;white-space:normal;overflow-wrap:normal}html[data-locale=en] .note-pitch{text-align:left}.bell-pad{height:99px}footer{margin-top:25px}.footer-identity{display:none}#error-banner{order:4}}@media(max-width:520px){#app{padding:0 18px}.identity{font-size:12px;gap:10px}.identity-sub{font-size:11px}.seal{width:30px;height:37px;font-size:22px}.locale-switch{gap:8px}nav{gap:27px}.nav-button{font-size:13px}h1{font-size:20px;line-height:1.7}.collection-meta{font-size:12px;gap:20px}.stage{height:295px}.view-toolbar{right:6px;top:7px;gap:0}.stage .icon-button{width:32px;height:36px}.stage .tool-divider{margin:0 4px}.stage-label{left:14px;top:15px}.stage-caption{left:14px;right:14px;font-size:11px}.section-name{width:100%;justify-content:space-between;gap:12px}.instrument-actions{width:100%;gap:2px}#layout-select{max-width:170px;margin-right:auto;font-size:11px;padding:0 4px}.instrument-actions .icon-button{width:33px}.instrument-actions .tool-divider{margin:0 2px}#volume{width:48px;margin-left:3px}.row-label{width:22px}.pads{width:calc(100% - 22px)}.analysis-rail{column-gap:22px}.note-header h2{font-size:28px}.reference-reading{flex-wrap:wrap;gap:0 8px}.reference-reading>span{font-size:21px}.field-label{flex-wrap:wrap;gap:0 8px}.take-control{gap:6px}.take-control select{font-size:11px;padding:0 6px}.take-control .icon-button{width:32px}footer{flex-wrap:wrap;gap:9px 20px}dialog{max-width:calc(100vw - 24px);max-height:90dvh}.dialog-top{padding:16px}.archive-filters{padding:14px 16px;gap:10px}.archive-filters select{max-width:112px;padding:0 6px}.search-field input{font-size:12px}.archive-list{padding:0 16px}.archive-row{gap:11px}.archive-transport{flex-wrap:wrap;padding:12px 16px;gap:10px}#archive-now{max-width:none;flex:1}#archive-seek{order:3;flex-basis:100%;width:100%;margin:5px 0}#archive-time{min-width:60px}.archive-footer{padding:13px 16px}#research-content{padding:5px 16px 20px}.reference-table th,.reference-table td{padding:11px 9px}html[data-locale=en] .identity{font-size:11px}html[data-locale=en] .identity>span:last-child{max-width:165px}html[data-locale=en] .note-header h2{font-size:19px}}@media(max-width:360px){#app{padding:0 12px}.locale-switch{gap:5px}nav{gap:24px}.stage-label{display:none}#layout-select{max-width:139px}.instrument-actions .icon-button{width:31px}#volume{width:43px}.analysis-rail{column-gap:16px}html[data-locale=en] .identity>span:last-child{max-width:147px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
