:root {
  --navy: #071628;
  --navy-2: #0c2137;
  --navy-3: #122b46;
  --ivory: #f1eadc;
  --paper: #e7dece;
  --gold: #c7a15a;
  --gold-bright: #e4c47b;
  --rust: #a7472c;
  --sage: #99a894;
  --ink: #0a1727;
  --line-light: rgba(241,234,220,.18);
  --line-dark: rgba(10,23,39,.18);
  --serif: "Iowan Old Style", "Songti SC", "STSong", Georgia, serif;
  --sans: "Avenir Next", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ivory); background: var(--navy); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
::selection { color: var(--navy); background: var(--gold-bright); }
.skip-link { position: fixed; left: 18px; top: -70px; z-index: 200; background: var(--ivory); color: var(--navy); padding: 12px 16px; }.skip-link:focus{top:18px}
.grain { position: fixed; z-index: 100; inset: 0; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E") }

.start-overlay { position: fixed; z-index: 150; inset: 0; display:grid; place-items:center; background:var(--navy); overflow:hidden; }
.start-overlay::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 42%, rgba(199,161,90,.13), transparent 40%), linear-gradient(90deg, transparent 49.9%, rgba(241,234,220,.1) 50%, transparent 50.1%); }
.start-bg i { position:absolute; border:1px solid rgba(199,161,90,.13); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }.start-bg i:nth-child(1){width:42vw;height:42vw}.start-bg i:nth-child(2){width:70vw;height:70vw}.start-bg i:nth-child(3){width:105vw;height:105vw}
.entry-step { width:min(820px,90vw); position:relative; text-align:center; }
.entry-index { font:9px var(--mono); letter-spacing:.18em; color:var(--gold); }
.entry-step h1 { margin:35px 0 24px; font:400 clamp(70px,10vw,150px)/.86 var(--serif); letter-spacing:-.075em; }.entry-step h1 em { color:var(--gold-bright); font-style:italic; }
.entry-step > p { width:min(580px,90%); margin:0 auto 38px; font-size:14px; line-height:1.9; color:#aeb6bc; }
.sound-entry { margin:auto; min-width:280px; display:flex; align-items:center; gap:16px; text-align:left; border:1px solid var(--gold); background:rgba(199,161,90,.09); padding:13px 16px; cursor:pointer; transition:.3s; }.sound-entry:hover { background:var(--gold); color:var(--navy); transform:translateY(-3px); }.sound-entry > span:nth-child(2){display:flex;flex-direction:column;gap:3px}.sound-entry b{font-size:12px}.sound-entry small{font-size:9px;color:#9ea9b2}.sound-entry:hover small{color:var(--navy)}.sound-entry .arrow{margin-left:auto}
.sound-rings { width:38px;height:38px;position:relative;display:grid;place-items:center}.sound-rings i{position:absolute;border:1px solid currentColor;border-radius:50%;animation:pulse 2s infinite}.sound-rings i:nth-child(1){width:10px;height:10px;background:currentColor}.sound-rings i:nth-child(2){width:24px;height:24px;animation-delay:.2s}.sound-rings i:nth-child(3){width:38px;height:38px;animation-delay:.4s}@keyframes pulse{50%{opacity:.2;transform:scale(.8)}}
.entry-note { margin:50px auto 0; width:min(580px,80%); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; font:8px var(--mono); color:#667687; }.entry-note i{height:1px;background:linear-gradient(90deg,var(--gold),#33455b,var(--gold))}
.blind-step { width:min(1080px,92vw); position:relative; display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:center; }.blind-heading>span,.drawer-kicker{font:9px var(--mono);letter-spacing:.18em;color:var(--gold)}.blind-heading h2{font:400 clamp(48px,6.5vw,90px)/.96 var(--serif);letter-spacing:-.055em;margin:24px 0}.blind-heading p{font-size:13px;line-height:1.8;color:#9facb6}.blind-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.blind-sample{height:280px;border:1px solid #36485c;background:rgba(255,255,255,.025);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:25px 14px;cursor:pointer}.blind-sample:hover,.blind-sample.playing{border-color:var(--gold);background:rgba(199,161,90,.08)}.blind-sample>span{font:52px var(--serif);color:var(--gold-bright)}.blind-sample b{font-size:10px}.mini-wave{width:100%;height:60px;background:repeating-linear-gradient(90deg,transparent 0 5px,var(--gold) 5px 6px,transparent 6px 10px);mask-image:radial-gradient(ellipse at center,black,transparent 70%);opacity:.45}.blind-sample.playing .mini-wave{animation:wave .45s ease-in-out infinite alternate}@keyframes wave{to{transform:scaleY(.35)}}.prototype-warning{grid-column:2;font:8px/1.5 var(--mono);color:#6f7e8b;margin:-48px 0 0}.blind-guess{grid-column:2;display:flex;align-items:center;justify-content:center;gap:8px}.blind-guess span{font-size:11px;color:#9facb6;margin-right:8px}.blind-guess button{width:42px;height:36px;background:transparent;border:1px solid #536477;cursor:pointer}.blind-guess button:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}

.museum-header { height:72px; display:grid; grid-template-columns:1fr .8fr 1fr; align-items:center; gap:35px; padding:0 28px; border-bottom:1px solid var(--line-light); background:rgba(7,22,40,.92); backdrop-filter:blur(20px); position:sticky;top:0;z-index:50; }
.museum-brand{display:flex;align-items:center;gap:12px}.museum-brand>span:last-child{display:flex;flex-direction:column}.museum-brand b{font:600 14px var(--serif);letter-spacing:.04em}.museum-brand small{font:7px var(--mono);letter-spacing:.12em;color:#778795;margin-top:4px}.brand-keyboard{display:flex;align-items:stretch;width:34px;height:26px;border:1px solid var(--gold)}.brand-keyboard i{flex:1;border-right:1px solid var(--gold);position:relative}.brand-keyboard i:last-child{border:0}.brand-keyboard i:nth-child(2)::after,.brand-keyboard i:nth-child(4)::after{content:"";position:absolute;left:-3px;top:0;width:5px;height:15px;background:var(--gold)}
.header-progress{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font:7px var(--mono);color:#71808f}.header-progress>i{height:1px;background:#33455a}.header-progress b{display:block;width:0;height:100%;background:var(--gold);transition:width .5s}.museum-header nav{display:flex;justify-content:flex-end;align-items:center;gap:8px}.museum-header nav button{border:1px solid #314359;background:transparent;padding:9px 11px;font-size:9px;cursor:pointer}.museum-header nav button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}.museum-header nav button:disabled{opacity:.35;cursor:not-allowed}.museum-header nav button>i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--rust);margin-right:5px}.museum-header nav button.unlocked>i{background:var(--gold);box-shadow:0 0 10px var(--gold)}.sound-toggle{width:38px;height:34px;padding:7px!important;display:flex;align-items:center;justify-content:center;gap:2px}.sound-toggle i{width:2px!important;height:var(--h,10px)!important;border-radius:0!important;background:var(--gold)!important;margin:0!important;animation:soundbar .7s infinite alternate}.sound-toggle i:nth-child(2){--h:18px;animation-delay:.2s}.sound-toggle i:nth-child(3){--h:13px;animation-delay:.4s}.sound-toggle.muted i{animation:none;height:2px!important;background:#677789!important}@keyframes soundbar{to{height:4px}}

.experience{min-height:calc(100vh - 72px);display:grid;grid-template-columns:minmax(260px,23vw) 1fr minmax(210px,17vw);grid-template-rows:1fr 146px;background:var(--navy);}
.era-panel{padding:clamp(28px,3vw,48px);border-right:1px solid var(--line-light);min-width:0;display:flex;flex-direction:column;position:relative;z-index:3}.era-number{display:flex;align-items:baseline;gap:8px;font:8px var(--mono);color:#718193}.era-number b{font:42px var(--serif);font-weight:400;color:var(--gold)}.era-number i{font-style:normal}.era-period{font:8px var(--mono);letter-spacing:.15em;color:var(--gold);margin:30px 0 15px}.era-panel h2{font:400 clamp(29px,3.1vw,50px)/1.05 var(--serif);letter-spacing:-.045em;margin:0 0 18px}.era-summary{font-size:12px;line-height:1.8;color:#a7b0b7}.era-change{border-left:2px solid var(--gold);padding:2px 0 2px 15px;margin:22px 0}.era-change span{font:7px var(--mono);letter-spacing:.1em;color:#788895}.era-change p{font-size:11px;line-height:1.6;margin:8px 0}.era-specs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-light);border-left:1px solid var(--line-light);margin:8px 0 20px}.era-specs div{padding:11px;border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}.era-specs dt{font:7px var(--mono);color:#718091;margin-bottom:5px}.era-specs dd{margin:0;font-size:10px}.fact-source{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-light);display:flex;justify-content:space-between;gap:8px;font:7px var(--mono);color:#6f8090}.fact-source b{color:var(--gold);font-weight:400}
.instrument-stage{position:relative;overflow:hidden;min-width:0;background:radial-gradient(circle at 50% 45%,#17344e 0,#0b2137 42%,#071628 77%)}.instrument-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(241,234,220,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(241,234,220,.045) 1px,transparent 1px);background-size:7.2vw 7.2vw;mask-image:radial-gradient(circle at center,black,transparent 78%)}.year-ghost{position:absolute;left:50%;top:7%;transform:translateX(-50%);font:400 clamp(100px,16vw,260px)/1 var(--serif);color:rgba(241,234,220,.035);letter-spacing:-.07em}.stage-label{position:absolute;z-index:4;font:7px var(--mono);letter-spacing:.13em;color:#66788a}.top-left{top:22px;left:24px}.top-right{top:22px;right:24px}.bottom-left{bottom:172px;left:24px;color:var(--gold)}
.instrument-photo-wrap{position:absolute;z-index:2;left:50%;top:44%;width:min(52vw,690px);height:min(37vw,470px);transform:translate(-50%,-50%);display:grid;place-items:center}.instrument-photo-wrap img{position:relative;z-index:2;max-width:84%;max-height:83%;object-fit:contain;filter:sepia(.25) saturate(.7) contrast(1.06);mix-blend-mode:screen;opacity:.66;transition:opacity .25s,transform .7s cubic-bezier(.2,.75,.2,1);transform:scale(var(--instrument-scale,1))}.photo-aura{position:absolute;width:65%;height:58%;border-radius:50%;background:radial-gradient(circle,rgba(199,161,90,.19),transparent 68%);filter:blur(25px)}.photo-credit{position:absolute;bottom:0;right:4%;font:6px var(--mono);letter-spacing:.1em;color:#66778a;writing-mode:vertical-rl}
.instrument-blueprint{position:absolute;z-index:3;left:8%;right:8%;top:17%;height:53%;opacity:.38;pointer-events:none;transition:.6s}.instrument-blueprint svg{width:100%;height:100%}.instrument-blueprint path,.instrument-blueprint circle{stroke:var(--gold-bright);stroke-width:1;vector-effect:non-scaling-stroke}.instrument-blueprint .string-line{opacity:.35}.instrument-blueprint .hammer-group{opacity:0}.instrument-blueprint.action-hammer .plectrum-group{opacity:0}.instrument-blueprint.action-hammer .hammer-group{opacity:1}.instrument-blueprint.modern .case-line{stroke-width:2}.instrument-blueprint.modern{transform:scaleX(1.08)}
.play-main{position:absolute;z-index:6;left:50%;bottom:189px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;border:1px solid var(--gold);background:rgba(7,22,40,.82);backdrop-filter:blur(10px);padding:10px 16px;cursor:pointer;min-width:230px;text-align:left}.play-main:hover,.play-main.playing{background:var(--gold);color:var(--navy)}.play-symbol{width:28px;height:28px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:9px}.play-main>span:last-child{display:flex;flex-direction:column;gap:2px}.play-main b{font-size:10px}.play-main small{font-size:7px;color:#788a99}.play-main:hover small,.play-main.playing small{color:var(--navy)}
.keyboard-shell{position:absolute;z-index:5;left:8%;right:8%;bottom:28px}.keyboard-topline{display:flex;justify-content:space-between;margin-bottom:8px;font:7px var(--mono);letter-spacing:.09em;color:#718293}.keyboard-topline b{color:var(--gold);font-weight:400}.keyboard-range{width:56%;height:85px;margin:auto;transition:width .8s cubic-bezier(.2,.8,.2,1)}.keys{position:relative;width:100%;height:100%;background:var(--ivory);border:1px solid #09121c;box-shadow:0 12px 35px rgba(0,0,0,.3)}.piano-key{position:absolute;top:0;height:100%;background:linear-gradient(#fbf7ec,#d8cfbf);border-right:1px solid #53606b;cursor:pointer;transform-origin:top}.piano-key:hover,.piano-key.active{background:var(--gold-bright);transform:perspective(140px) rotateX(-5deg)}.piano-key.black{z-index:2;height:61%;background:linear-gradient(90deg,#101a23,#263440,#050b11);border:1px solid #000}.piano-key.black:hover,.piano-key.black.active{background:var(--rust)}.piano-key.extra{background:linear-gradient(#192634,#060d14)}.keyboard-scale{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:8px;font:6px var(--mono);color:#5d6e7d}.keyboard-scale i{height:1px;background:#33465a}
.mechanism-button{position:absolute;z-index:6;right:24px;bottom:163px;border:0;border-bottom:1px solid #526479;background:transparent;padding:8px 0;font-size:8px;cursor:pointer}.mechanism-button span{color:var(--gold);margin-left:10px}.mechanism-button:hover{color:var(--gold)}

.compare-panel{padding:clamp(24px,2.3vw,38px);border-left:1px solid var(--line-light);min-width:0;display:flex;flex-direction:column}.compare-index{display:flex;justify-content:space-between;font:7px var(--mono);color:#718193}.compare-index b{color:var(--gold);font-weight:400}.compare-panel h3{font:400 clamp(23px,2.4vw,37px)/1.12 var(--serif);letter-spacing:-.035em;margin:35px 0 28px}.compare-slot{display:grid;grid-template-columns:28px 1fr 22px;gap:8px;align-items:center;padding:12px 0;border-top:1px solid var(--line-light)}.compare-slot>span{width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--gold);font:11px var(--serif);color:var(--gold)}.compare-slot div{display:flex;flex-direction:column}.compare-slot small{font:6px var(--mono);color:#657689}.compare-slot b{font-size:10px;margin-top:3px}.compare-slot button{border:0;background:transparent;color:#68798a;cursor:pointer}.pin-button{border:1px solid #34475b;background:transparent;padding:9px;cursor:pointer;font-size:8px;margin-bottom:15px}.pin-button:hover{border-color:var(--gold);color:var(--gold)}.compare-play{display:grid;grid-template-columns:28px 1fr;gap:3px 8px;align-items:center;text-align:left;border:1px solid var(--gold);background:rgba(199,161,90,.06);padding:13px;margin-top:auto;cursor:pointer}.compare-play:disabled{opacity:.3;cursor:not-allowed}.compare-play>span{grid-row:1/3;width:25px;height:25px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:8px}.compare-play b{font-size:9px}.compare-play small{font:6px var(--mono);color:#708192}.compare-panel>p{font-size:8px;line-height:1.6;color:#657686}
.timeline-console{grid-column:1/-1;display:grid;grid-template-columns:220px 1fr 200px;align-items:center;border-top:1px solid var(--line-light);background:#081a2e}.timeline-readout{padding:22px 30px;border-right:1px solid var(--line-light);display:grid;grid-template-columns:auto 1fr;align-items:end}.timeline-readout>span{grid-column:1/-1;font:6px var(--mono);color:#657789}.timeline-readout b{font:52px/1 var(--serif);font-weight:400;color:var(--gold-bright);letter-spacing:-.05em}.timeline-readout i{font-style:normal;font-size:9px;margin:0 0 7px 8px;color:#9ba7b0}.timeline-control{padding:10px 30px}.timeline-track{height:50px;position:relative}.timeline-track::before{content:"";position:absolute;left:0;right:0;top:25px;height:1px;background:#48586b}.timeline-fill{position:absolute;left:0;top:24px;height:3px;width:0;background:var(--gold);pointer-events:none}.timeline-nodes{position:absolute;inset:0;pointer-events:none}.timeline-node{position:absolute;top:18px;transform:translateX(-50%);width:15px;height:15px;border:1px solid #6c7a88;border-radius:50%;background:#081a2e;transition:.3s}.timeline-node::before{content:attr(data-year);position:absolute;bottom:19px;left:50%;transform:translateX(-50%);font:6px var(--mono);color:#69798b;white-space:nowrap}.timeline-node.active{width:20px;height:20px;top:15px;border-color:var(--gold);background:var(--gold);box-shadow:0 0 18px rgba(199,161,90,.55)}.timeline-node.bonus{border-style:dashed;opacity:0;transition:.5s}.timeline-node.bonus.revealed{opacity:1}.timeline-track input{position:absolute;z-index:3;inset:0;width:100%;height:50px;margin:0;opacity:0;cursor:ew-resize}.timeline-hint{display:flex;justify-content:space-between;font:6px var(--mono);color:#5f7182}.timeline-hint b{font-weight:400;color:#8292a0}.timeline-status{padding:22px 28px;border-left:1px solid var(--line-light);font:6px var(--mono);color:#6f8192}.timeline-status span{display:flex;align-items:center;gap:7px;margin-bottom:8px}.timeline-status b{font-weight:400;color:#9ba7b0}.live-dot{width:5px;height:5px;border-radius:50%;background:#9ebd79;box-shadow:0 0 8px #9ebd79}

.interlude{min-height:680px;background:var(--ivory);color:var(--ink);display:grid;grid-template-columns:1.15fr .85fr;padding:clamp(70px,9vw,140px);gap:9vw;align-items:center}.interlude-copy>span,.archive-heading>span{font:8px var(--mono);letter-spacing:.16em;color:#8a672e}.interlude h2,.archive-heading h2{font:400 clamp(46px,6.5vw,96px)/.98 var(--serif);letter-spacing:-.06em;margin:28px 0}.interlude-copy p,.archive-heading p{max-width:600px;font-size:13px;line-height:1.9;color:#57616a}.change-score{border-top:1px solid var(--line-dark)}.change-score>div{display:grid;grid-template-columns:1fr 1fr 45px;gap:14px;align-items:center;border-bottom:1px solid var(--line-dark);padding:23px 0}.change-score span{font:16px var(--serif)}.change-score i{height:3px;background:linear-gradient(90deg,var(--rust) var(--score),rgba(10,23,39,.1) var(--score))}.change-score b{font:7px var(--mono);color:#7b6a4b}
.archive-preview{padding:clamp(70px,9vw,140px) clamp(24px,6vw,90px);background:#d8d0c1;color:var(--ink)}.archive-heading{display:grid;grid-template-columns:.6fr 1.2fr .8fr;gap:50px;align-items:start;margin-bottom:70px}.archive-heading h2{margin:0}.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink)}.archive-grid a{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);min-width:0}.archive-grid a:nth-child(3n){border-right:0}.archive-grid a:nth-last-child(-n+3){border-bottom:0}.archive-grid figure{margin:0;overflow:hidden}.archive-grid img{display:block;width:100%;aspect-ratio:1.25;object-fit:cover;filter:grayscale(1) sepia(.2);transition:.5s}.archive-grid a:hover img{filter:none;transform:scale(1.035)}.archive-grid figcaption{min-height:110px;padding:18px;display:flex;flex-direction:column;gap:6px}.archive-grid span{font:7px var(--mono);color:#8a672e}.archive-grid b{font:500 15px var(--serif)}.archive-grid small{font:7px var(--mono);color:#6b706f;margin-top:auto}
.site-footer{min-height:150px;padding:35px clamp(24px,6vw,90px);display:flex;justify-content:space-between;align-items:center;gap:30px;background:var(--navy);border-top:1px solid var(--line-light)}.site-footer>div{display:flex;flex-direction:column;gap:5px}.site-footer b{font:18px var(--serif)}.site-footer span,.site-footer p{font:7px var(--mono);color:#6e7f8e}.site-footer button{border:1px solid #3a4d61;background:transparent;padding:10px 14px;font-size:8px;cursor:pointer}.site-footer button:hover{border-color:var(--gold);color:var(--gold)}

.drawer,.mechanism-drawer,.reveal-modal{position:fixed;inset:0;z-index:120}.drawer-backdrop{position:absolute;inset:0;background:rgba(1,8,16,.72);backdrop-filter:blur(8px)}.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(620px,92vw);overflow:auto;background:var(--ivory);color:var(--ink);padding:clamp(35px,5vw,70px);box-shadow:-30px 0 80px rgba(0,0,0,.3)}.drawer-close{position:absolute;right:20px;top:20px;width:36px;height:36px;border:1px solid currentColor;background:transparent;cursor:pointer;font-size:20px}.drawer-panel h2,.mechanism-panel h2{font:400 clamp(38px,5vw,66px)/1 var(--serif);letter-spacing:-.05em;margin:22px 0 35px}.source-legend{display:grid;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);margin-bottom:40px}.source-legend>div{display:grid;grid-template-columns:12px 100px 1fr;gap:10px;align-items:center;background:var(--ivory);padding:14px}.source-legend i{width:8px;height:8px;border-radius:50%;background:var(--gold)}.source-legend .model{background:var(--sage)}.source-legend .sound{background:var(--rust)}.source-legend b{font-size:9px}.source-legend span{font-size:9px;color:#657078}.source-list{list-style:none;padding:0;margin:0}.source-list li{display:grid;grid-template-columns:36px 1fr;gap:15px;padding:20px 0;border-top:1px solid var(--line-dark)}.source-list>li>span{font:11px var(--mono);color:#9a7236}.source-list b{font:500 15px var(--serif)}.source-list p{font-size:10px;line-height:1.6;color:#5c6870}.source-list a{font:7px var(--mono);color:#8e6429}
.mechanism-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(780px,92vw);background:var(--ivory);color:var(--ink);padding:clamp(35px,5vw,65px);box-shadow:20px 20px 0 var(--gold)}.mechanism-demo{height:250px;position:relative;border:1px solid var(--line-dark);background:repeating-linear-gradient(0deg,transparent 0 49px,rgba(10,23,39,.05) 49px 50px),repeating-linear-gradient(90deg,transparent 0 49px,rgba(10,23,39,.05) 49px 50px);overflow:hidden}.demo-string{position:absolute;left:8%;right:8%;top:28%;height:2px;background:var(--ink)}.demo-key{position:absolute;left:16%;bottom:18%;width:44%;height:28px;background:white;border:1px solid var(--ink);transform-origin:left}.demo-lever{position:absolute;left:47%;bottom:28%;width:5px;height:42%;background:var(--rust);transform-origin:bottom;transform:rotate(15deg)}.demo-head{position:absolute;left:52%;top:37%;width:35px;height:22px;background:var(--gold);border-radius:50% 50% 35% 35%;transform:rotate(-18deg)}.demo-motion{position:absolute;left:54%;top:20%;width:1px;height:55%;border-left:1px dashed var(--rust)}.mechanism-demo.pluck .demo-head{width:7px;height:40px;border-radius:0;left:53%;top:33%}.mechanism-demo.pluck .demo-lever{height:49%;transform:none}.mechanism-panel>p{font-size:12px;line-height:1.8;color:#58636c}.mechanism-compare{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink);margin-top:25px}.mechanism-compare div{padding:14px;border-right:1px solid var(--ink)}.mechanism-compare div:last-child{border:0}.mechanism-compare span{display:block;font:7px var(--mono);color:#7d6a4b;margin-bottom:8px}.mechanism-compare b{font:500 13px var(--serif)}
.reveal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(700px,92vw);background:var(--navy);border:1px solid var(--gold);padding:clamp(35px,6vw,75px);text-align:center}.reveal-card>span{font:8px var(--mono);letter-spacing:.16em;color:var(--gold)}.reveal-card h2{font:400 clamp(50px,7vw,90px) var(--serif);margin:20px 0}.reveal-card h2 em{color:var(--gold);font-style:italic}.answer-row{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-light)}.answer-row div{padding:20px;border-right:1px solid var(--line-light);display:flex;flex-direction:column;gap:8px}.answer-row div:last-child{border:0}.answer-row b{font:36px var(--serif);color:#718193}.answer-row span{font-size:9px}.answer-row .oldest{background:var(--gold);color:var(--navy)}.answer-row .oldest b{color:var(--navy)}.reveal-card>p{font-size:11px;line-height:1.8;color:#9ba6af;margin-top:25px}
.bonus-overlay{position:fixed;z-index:140;inset:0;background:var(--gold);color:var(--navy);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;padding:7vw;overflow:hidden}.bonus-number{font:400 52vw/.7 var(--serif);letter-spacing:-.12em;color:rgba(7,22,40,.12);position:absolute;left:-3vw;bottom:-5vw}.bonus-copy{position:relative;grid-column:2}.bonus-copy>span{font:8px var(--mono);letter-spacing:.18em}.bonus-copy h2{font:400 clamp(60px,8vw,120px)/.88 var(--serif);letter-spacing:-.07em;margin:30px 0}.bonus-copy p{max-width:520px;font-size:13px;line-height:1.9}.bonus-copy button{border:1px solid var(--navy);background:transparent;padding:14px 18px;margin-top:20px;cursor:pointer;font-weight:700}.bonus-copy button:hover{background:var(--navy);color:var(--gold)}
.toast{position:fixed;z-index:180;left:50%;bottom:25px;transform:translate(-50%,25px);opacity:0;background:var(--ivory);color:var(--navy);border-left:3px solid var(--gold);padding:12px 18px;font-size:9px;box-shadow:0 16px 40px rgba(0,0,0,.3);transition:.3s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1100px){
  .museum-header{grid-template-columns:1fr auto}.header-progress{display:none}.experience{grid-template-columns:250px 1fr;grid-template-rows:1fr auto 140px}.compare-panel{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:auto auto 1fr auto 1fr auto;gap:10px;align-items:center;border-left:0;border-top:1px solid var(--line-light);padding:18px 25px}.compare-panel h3,.compare-index,.compare-panel>p{display:none}.compare-slot{border:0}.pin-button{margin:0}.compare-play{margin:0}.timeline-console{grid-row:3}.archive-heading{grid-template-columns:1fr}.archive-heading h2{max-width:800px}
}
@media(max-width:760px){
  .museum-header{height:64px;padding:0 14px}.museum-brand b{font-size:12px}.museum-brand small{display:none}.museum-header nav button:not(.sound-toggle){display:none}.experience{grid-template-columns:1fr;grid-template-rows:auto 620px auto auto}.era-panel{border-right:0;border-bottom:1px solid var(--line-light);padding:28px 22px}.era-panel h2{font-size:40px}.era-summary{max-width:560px}.instrument-stage{grid-row:2}.instrument-photo-wrap{width:95%;height:380px;top:42%}.instrument-photo-wrap img{max-width:79%;max-height:74%}.instrument-blueprint{left:-8%;right:-8%;top:15%;height:48%}.year-ghost{top:10%;font-size:34vw}.keyboard-shell{left:4%;right:4%;bottom:24px}.keyboard-range{height:72px}.play-main{bottom:156px}.bottom-left{bottom:148px;left:15px}.mechanism-button{right:15px;bottom:140px}.compare-panel{grid-row:3;grid-column:1;grid-template-columns:1fr 1fr;padding:22px}.compare-slot{display:none}.pin-button{min-height:40px}.compare-play{grid-column:1/-1}.timeline-console{grid-row:4;grid-column:1;grid-template-columns:1fr;padding:0}.timeline-readout{border-right:0;border-bottom:1px solid var(--line-light);padding:15px 22px;grid-template-columns:72px auto 1fr}.timeline-readout>span{grid-column:auto;align-self:center}.timeline-readout b{font-size:38px}.timeline-readout i{align-self:end}.timeline-control{padding:25px 22px}.timeline-status{display:none}.timeline-hint b{display:none}.interlude{grid-template-columns:1fr;padding:80px 24px}.archive-preview{padding:80px 18px}.archive-grid{grid-template-columns:1fr 1fr}.archive-grid a:nth-child(3n){border-right:1px solid var(--ink)}.archive-grid a:nth-child(2n){border-right:0}.archive-grid a:nth-last-child(-n+3){border-bottom:1px solid var(--ink)}.archive-grid a:nth-last-child(-n+2){border-bottom:0}.archive-grid figcaption{min-height:120px}.site-footer{flex-direction:column;align-items:flex-start}.blind-step{grid-template-columns:1fr;gap:30px;padding:30px 0;overflow:auto;max-height:94vh}.blind-heading h2{font-size:54px}.prototype-warning,.blind-guess{grid-column:1}.prototype-warning{margin:0}.blind-sample{height:190px}.bonus-overlay{grid-template-columns:1fr}.bonus-copy{grid-column:1}.bonus-number{font-size:100vw;bottom:20%}.source-legend>div{grid-template-columns:12px 80px 1fr}
}
@media(max-width:480px){.entry-step h1{font-size:72px}.blind-options{gap:5px}.blind-sample{height:160px;padding:15px 6px}.blind-sample>span{font-size:40px}.era-specs{grid-template-columns:1fr 1fr}.archive-grid{grid-template-columns:1fr}.archive-grid a{border-right:0!important;border-bottom:1px solid var(--ink)!important}.archive-grid a:last-child{border-bottom:0!important}.mechanism-compare{grid-template-columns:1fr}.mechanism-compare div{border-right:0;border-bottom:1px solid var(--ink)}.mechanism-compare div:last-child{border:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}