:root{
  color-scheme:dark;
  font-family:Manrope,'Segoe UI',Arial,sans-serif;
  --bg:#101714;--panel:rgba(22,27,24,.89);--line:rgba(231,217,184,.15);
  --cream:#e8e2d3;--muted:#b2b8aa;--bronze:#d8a870;--dark:#0e1412;
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#171b1a}
body{color:var(--cream);font-size:13px;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #f0bd80;outline-offset:3px}
a{color:inherit}
#viewport{position:absolute;inset:0;overflow:hidden}#viewport canvas{display:block;width:100%;height:100%;touch-action:none}
#viewport:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,16,14,.71),transparent 42%,rgba(5,8,7,.17) 73%,rgba(8,11,9,.31)),linear-gradient(0deg,rgba(10,13,12,.75),transparent 22%,transparent 78%,rgba(7,10,9,.18))}
#interface{position:absolute;inset:0;pointer-events:none}
#interface button,#interface input,#interface a,#interface aside{pointer-events:auto}
.topbar{position:absolute;left:0;right:0;top:0;height:91px;display:flex;align-items:center;justify-content:space-between;padding:24px 46px;z-index:10;border-bottom:1px solid rgba(255,240,214,.08)}
.identity{display:flex;align-items:center;gap:14px;white-space:nowrap}.identity-symbol{color:#d7a66d;font-size:36px;line-height:1}
.identity-text{display:flex;flex-direction:column;gap:4px;letter-spacing:.18em}.identity-text b{font-size:11px;font-weight:800}.identity-text span{font-size:8px;color:#b9c0b6;letter-spacing:.23em}
.top-meta{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:9px;font-weight:800;letter-spacing:.18em;color:#b8bdaf}.top-meta i{width:1px;height:17px;background:#6a6558;margin:0 8px}
.status-dot,.foot-dot{width:7px;height:7px;display:inline-block;border-radius:100%;background:#d9b377;box-shadow:0 0 0 5px #c9ad7220}
.icon-btn{width:33px;height:33px;border:1px solid #d8c5a744;background:#1b1e1a88;color:#f1d5a6;border-radius:50%;font-size:15px}
.intro{position:absolute;top:clamp(142px,19vh,205px);left:clamp(28px,4.2vw,82px);width:clamp(240px,24vw,385px);pointer-events:none;z-index:2}
.eyebrow{color:#ddaf75;font-size:10px;letter-spacing:.24em;font-weight:800;display:flex;align-items:center;gap:11px;white-space:nowrap}
.eyebrow-line{height:1px;width:25px;background:#dcab76;display:block}.intro-separator{opacity:.43}
.intro h1{margin:22px 0 17px;font-family:Georgia,'Times New Roman',serif;letter-spacing:-.035em;font-weight:500;font-size:clamp(48px,5.4vw,99px);line-height:.93}
.intro h1 em{color:#e0c69f;font-style:italic;font-weight:400;font-size:.62em;letter-spacing:-.035em}
.title-mark{color:#ca985a}.intro p{font-size:12px;line-height:1.85;color:#d9ded4;max-width:300px;opacity:.84}
.intro-details{display:flex;align-items:center;gap:10px;margin-top:21px;white-space:nowrap}.intro-details span{border-top:1px solid #b7a58a77;padding-top:12px;font-size:9px;letter-spacing:.1em;font-weight:800;color:#cfb997}
.hotspot-layer{position:absolute;inset:0;z-index:4}.hotspot-layer[hidden]{display:none}
.hotspot{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#f6e7cf;white-space:nowrap;padding:4px 6px}
.hotspot-number{display:grid;place-items:center;width:28px;height:28px;background:rgba(18,25,20,.80);border:1px solid #e3b57b99;border-radius:50%;font-weight:800;font-size:9px;letter-spacing:.04em;box-shadow:0 0 0 6px #efd5a419;transition:background .2s,transform .2s}
.hotspot-name{font-size:10px;letter-spacing:.06em;font-weight:600;text-shadow:0 1px 6px black;opacity:0;transform:translateX(-5px);transition:all .17s}
.hotspot:hover .hotspot-name,.hotspot.selected .hotspot-name{opacity:1;transform:translateX(0)}.hotspot:hover .hotspot-number,.hotspot.selected .hotspot-number{background:#e3b57b;color:#13150f;transform:scale(1.1)}
.part-pill{position:absolute;bottom:121px;left:50%;transform:translateX(-50%);height:35px;padding:0 16px;display:flex;align-items:center;gap:10px;border:1px solid #b8c0b12a;background:#111b16ba;border-radius:30px;backdrop-filter:blur(9px);z-index:4;white-space:nowrap}.part-pill-text{font-size:9px;letter-spacing:.17em;font-weight:800}.part-pill-dot{width:5px;height:5px;border-radius:100%;background:#dca971}
.side-panel{position:absolute;right:27px;top:112px;bottom:128px;width:354px;background:var(--panel);border:1px solid rgba(240,219,184,.2);box-shadow:0 20px 80px #0006;border-radius:8px;backdrop-filter:blur(25px);display:flex;flex-direction:column;overflow:hidden;z-index:8}
.panel-top{display:flex;justify-content:space-between;padding:24px 24px 20px;border-bottom:1px solid var(--line);flex-shrink:0}.panel-top small{font-size:9px;color:var(--bronze);font-weight:800;letter-spacing:.22em}
.panel-top h2{margin:8px 0 0;font-family:Georgia,serif;font-size:21px;font-weight:400;color:#f2e5d0}
.panel-toggle{border:1px solid #ffffff25;color:#d9c8ac;border-radius:50%;width:26px;height:26px;background:#ffffff0c;font-size:19px;line-height:1}
.panel-body{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#ae956b55 transparent;overscroll-behavior:contain}
.tabs{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--line);padding:0 15px;position:sticky;top:0;background:#1a201cbf;backdrop-filter:blur(18px);z-index:3}
.tabs button{padding:18px 0 16px;background:transparent;border:0;border-bottom:2px solid transparent;color:#8f9b92;font-size:9px;font-weight:800;letter-spacing:.13em}
.tabs button[aria-selected=true]{border-color:#dbad75;color:#e8c391}.tab-page{padding:24px 24px 28px}.tab-page[hidden]{display:none}
.section-label{display:flex;justify-content:space-between;align-items:center;color:#d8b483;font-size:9px;letter-spacing:.15em;font-weight:800;margin-bottom:21px}.section-label span+span{font-size:8px;color:#83968b}.section-label.second{margin:26px 0 16px}
.range-block{margin-bottom:22px}.range-heading{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:13px}.range-heading label{font-size:12px;font-weight:700}.range-heading output{font-size:10px;color:#cab189}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:linear-gradient(90deg,#8d6747,#e2be84);border-radius:3px;margin:7px 0;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;background:#e8d1a9;border:3px solid #bd9661;border-radius:50%;box-shadow:0 0 0 4px #d5b18a2b}
input[type=range]::-moz-range-thumb{width:10px;height:10px;background:#e8d1a9;border:2px solid #bd9661;border-radius:50%}
.range-limits{display:flex;justify-content:space-between;margin-top:7px;color:#7b877d;font-size:8px;letter-spacing:.14em}
.control-switch{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid #ffffff12;gap:11px;cursor:pointer}.control-switch span:first-child{display:flex;flex-direction:column;gap:4px}.control-switch b{font-size:11px;font-weight:700}.control-switch small{font-size:9px;color:#92a099}
.control-switch input{position:absolute;opacity:0;width:1px;height:1px}.switch-ui{flex:none;width:33px;height:19px;border-radius:14px;border:1px solid #778278;background:#404a44;position:relative;transition:background .2s}.switch-ui:after{content:"";position:absolute;width:13px;height:13px;top:2px;left:2px;border-radius:100%;background:#d1d5c8;transition:transform .2s}.control-switch input:checked+.switch-ui{background:#b38854;border-color:#b38854}.control-switch input:checked+.switch-ui:after{transform:translateX(14px);background:#fff5dc}
.control-switch:has(input:focus-visible){outline:2px solid #eac091;outline-offset:3px}
.note-help{font-size:10px;line-height:1.6;color:#99a79d;margin:-3px 0 13px}.notes{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.note-pad{height:31px;border:1px solid #a59f8933;background:#b5a4810c;color:#c8c8bb;border-radius:3px;font-size:10px;font-weight:700;transition:all .12s}.note-pad:hover,.note-pad.played{color:#131711;background:#d9af77;border-color:#d9af77;transform:translateY(-2px)}
.sound-actions{display:flex;gap:8px;margin-top:11px}.action-secondary{flex:1;background:#b58b59;color:#101510;border:0;border-radius:3px;padding:11px 9px;font-size:9px;font-weight:800;letter-spacing:.1em}.action-secondary span{margin-right:7px}.action-secondary:hover{background:#e6b982}.mini-control{width:42px;border:1px solid var(--line);background:#ffffff0c;color:#d9bc90;border-radius:3px;font-size:19px}.mini-control.muted{color:#b9776d}
.panel-lead{font-size:11px;line-height:1.9;color:#a9b8af;margin:0 0 15px}
.part-row{display:flex;gap:13px;align-items:center;width:100%;padding:13px 4px;border:0;border-bottom:1px solid #ffffff15;background:transparent;text-align:left;color:inherit;transition:background .2s}
.part-row:hover,.part-row.selected{background:#e0b57810}.part-index{display:grid;place-items:center;font-size:9px;font-weight:800;color:#cfb087;border:1px solid #c3a27766;width:29px;height:29px;border-radius:50%;flex:none}
.part-label{display:flex;flex-direction:column;gap:5px;flex:1}.part-label strong{font-size:12px;font-weight:700}.part-label small{color:#97a69c;font-size:9px}.part-arrow{color:#b9ab95;font-size:17px}
.info-card{border:1px solid #c4a57b40;border-radius:3px;background:#e1b9810c;padding:19px;margin-top:21px}.info-overline,.context-overline{font-size:8px;letter-spacing:.16em;color:#d5ab73;font-weight:800}.info-card h3{font-size:20px;font-family:Georgia,serif;font-weight:400;margin:8px 0 11px;color:#f0ddbd}.info-card p{font-size:11px;line-height:1.9;color:#b3bdb3}.info-card small{font-size:8px;letter-spacing:.12em;color:#919e94}
#history-page h3{font-family:Georgia,serif;font-size:25px;font-weight:400;line-height:1.25;margin:12px 0}#history-page p{line-height:1.87;color:#b5c0b3;font-size:11px}#history-page h4{font-size:11px;color:#e6d3ae;letter-spacing:.06em;margin:20px 0 3px}.context-divider{height:1px;background:var(--line);margin:21px 0}
.reference-links{display:flex;flex-direction:column;gap:10px;margin-top:25px}.reference-links a{font-size:9px;letter-spacing:.06em;color:#d4b47f;text-decoration:none;border-bottom:1px solid #ffffff20;padding-bottom:9px}.reference-links a:hover{text-decoration:underline}
.panel-foot{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:14px 23px;border-top:1px solid var(--line);font-size:8px;letter-spacing:.11em;font-weight:800;color:#9ea99c}.panel-foot span:first-child{display:flex;align-items:center;gap:9px}.panel-foot .foot-dot{width:5px;height:5px}
.side-panel.collapsed{bottom:auto;height:84px}.side-panel.collapsed .panel-body,.side-panel.collapsed .panel-foot{display:none}
.bottom-left{position:absolute;bottom:30px;left:45px;display:flex;align-items:center;gap:12px}.bottom-indicator{font-size:23px;color:#d3aa72}.bottom-left div{display:flex;flex-direction:column;gap:4px}.bottom-left strong{letter-spacing:.12em;font-size:9px}.bottom-left small{letter-spacing:.12em;color:#aeb5ac;font-size:8px}
.toolstrip{position:absolute;bottom:27px;right:32px;display:flex;align-items:center;gap:4px;padding:6px;border-radius:6px;border:1px solid #e7dcbb35;background:#151e19d9;backdrop-filter:blur(22px);box-shadow:0 8px 50px #0005}
.toolstrip button{height:51px;min-width:62px;padding:5px 8px;border:0;background:transparent;color:#d8d7cd;border-radius:4px;display:flex;flex-direction:column;align-items:center;gap:4px}
.toolstrip button:hover,.toolstrip button.active{background:#e7bf8627;color:#f0bd80}.toolstrip button span{font-size:20px;height:24px;line-height:24px}.toolstrip button em{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.12em}.toolstrip i{width:1px;height:35px;background:#ffffff22;margin:0 2px}
.gesture-guide{position:absolute;left:50%;bottom:38px;transform:translateX(-50%);font-size:8px;letter-spacing:.1em;color:#99aa9b;white-space:nowrap}.gesture-guide span{margin:0 5px;color:#d3b78a}
.guide-modal{position:absolute;inset:0;background:#050906cc;backdrop-filter:blur(12px);display:grid;place-items:center;z-index:30;pointer-events:auto}.guide-modal[hidden]{display:none}.guide-dialog{position:relative;width:min(460px,calc(100vw - 30px));padding:35px;background:#1b2520;border:1px solid #d5b48044;box-shadow:0 18px 100px #000c}.guide-close{position:absolute;right:15px;top:14px;background:none;border:0;color:#ebdcc1;font-size:26px}.guide-dialog>small{letter-spacing:.19em;color:#d8b076}.guide-dialog h2{font-family:Georgia,serif;font-weight:400;font-size:38px;margin:12px 0}.guide-dialog p{font-size:12px;color:#bdc9be;line-height:1.75}.key-rows{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin-top:17px}.key-rows p{font-size:10px}.key-rows kbd{display:inline-block;padding:3px 7px;margin-right:5px;border:1px solid #baa57855;background:#ffffff10;border-radius:3px;font-family:inherit;font-size:10px;color:#f0d3a5}.guide-small{border-top:1px solid #ffffff1a;margin-top:20px;padding-top:17px}
#loading{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:#161d1a;transition:opacity .6s ease,visibility .6s ease}#loading.is-loaded{opacity:0;visibility:hidden;pointer-events:none}#loading[hidden]{display:none}
.loading-content{text-align:center}.loading-symbol{font-size:70px;color:#cc9e68;margin:25px 0 8px}.loading-kicker{font-size:10px;letter-spacing:.27em;color:#c7ac89}.loading-content h2{font-family:Georgia,serif;font-weight:400;letter-spacing:.05em;font-size:40px;margin:14px 0}.loading-content p{color:#929f94;font-size:12px}.loading-bar{height:2px;width:240px;background:#ffffff16;margin:35px auto 0;overflow:hidden}.loading-bar>div{height:100%;background:#ca9c5f;animation:load 1.1s ease forwards}@keyframes load{from{width:0}to{width:100%}}
#error{position:absolute;z-index:50;inset:0;background:#1a201b;color:#ebc89e;display:grid;place-content:center;text-align:center;padding:30px}#error[hidden]{display:none}#error h2{font-family:Georgia,serif;font-size:30px}#error p{max-width:530px;line-height:1.65}
@media(max-width:1270px){.intro{width:285px;left:29px}.intro h1{font-size:58px}.intro p{max-width:240px}.gesture-guide{display:none}.bottom-left{left:28px}.side-panel{right:15px;width:326px}}
@media(max-width:860px){.topbar{padding:16px 23px;height:74px}.identity-symbol{font-size:29px}.identity-text b{font-size:9px}.identity-text span{font-size:7px}.top-meta{display:none}.intro{top:112px;left:25px;width:275px}.intro h1{font-size:55px;margin:17px 0 13px}.intro p{font-size:11px;max-width:255px}.intro-details{gap:7px}.intro-details span{font-size:7px}.side-panel{top:auto;bottom:96px;right:15px;width:min(335px,44vw);height:min(600px,65vh)}.panel-top{padding:17px}.panel-top h2{font-size:17px}.tab-page{padding:19px}.toolstrip{bottom:18px;right:15px}.bottom-left{left:20px;bottom:31px}.part-pill{bottom:91px;left:26%;font-size:8px}.hotspot-name{display:none}}
@media(max-width:630px){.topbar{padding:11px 17px;height:64px}.identity-text span{display:none}.identity{gap:9px}.identity-symbol{font-size:27px}.intro{top:84px;left:17px;width:190px}.eyebrow{font-size:8px;letter-spacing:.12em;gap:5px}.eyebrow-line{width:12px}.intro h1{font-size:44px;margin:12px 0}.intro p{display:none}.intro-details{flex-wrap:wrap;margin-top:12px}.intro-details span{font-size:7px;padding-top:7px}
  .side-panel{width:calc(100% - 20px);left:10px;right:10px;bottom:79px;top:auto;height:clamp(250px,38vh,395px);border-radius:8px}.side-panel.collapsed{height:69px;bottom:79px}.panel-top{padding:12px 16px}.panel-top h2{font-size:16px;margin-top:3px}.panel-top small{font-size:7px}.panel-body .tabs{padding:0 10px}.tabs button{padding:12px 0;font-size:8px}.tab-page{padding:17px}.panel-foot{padding:9px 15px}
  .part-pill{left:50%;bottom:calc(clamp(250px,38vh,395px) + 91px);height:28px;font-size:7px;padding:0 11px;max-width:85vw}.part-pill-text{font-size:8px;overflow:hidden;text-overflow:ellipsis;max-width:74vw}
  .bottom-left{display:none}.toolstrip{left:10px;right:10px;bottom:11px;justify-content:space-around}.toolstrip button{height:45px;min-width:51px}.toolstrip button em{font-size:7px}.toolstrip button span{font-size:18px}
  .hotspot-number{width:23px;height:23px;font-size:8px}.hotspot-name{display:none}#viewport:after{background:linear-gradient(90deg,#0a11119a,transparent 55%),linear-gradient(0deg,#0a111150,transparent 45%)}
}