:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f4eee2;background:#111719;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--gold:#d7aa75;--line:rgba(218,205,177,.14);--muted:#a2a5a2;--panel:rgba(15,20,22,.86)}
*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;height:100%;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #e3bc86;outline-offset:4px}button:disabled{cursor:default;opacity:.4}#app{position:relative;isolation:isolate}#scene{position:absolute;inset:0;z-index:0;touch-action:none}#scene canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.atmosphere{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(9,14,16,.70) 0%,transparent 35%,transparent 69%,rgba(7,12,14,.40) 100%),linear-gradient(0deg,rgba(7,12,14,.70) 0%,transparent 27%);opacity:.8}
.topbar{position:absolute;inset:0 0 auto;z-index:12;min-height:104px;padding:26px 42px 0 44px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.topbar>*{pointer-events:auto}.identity{display:flex;gap:14px;align-items:flex-start}.logo-mark{width:30px;height:42px;display:flex;gap:4px;align-items:center;transform:skewY(-8deg);padding-top:6px}.logo-mark span{width:3px;background:var(--gold);height:16px}.logo-mark span:nth-child(2){height:35px}.logo-mark span:nth-child(3){height:25px}.logo-mark span:nth-child(4){height:39px}.eyebrow{font-size:9px;letter-spacing:2.1px;font-weight:700;color:#bac1c0}.eyebrow b{color:var(--gold);padding:0 5px}.identity h1{font-size:40px;letter-spacing:-1.7px;font-weight:500;line-height:.94;margin:9px 0 5px;font-family:Georgia,serif}.title-dot{color:var(--gold)}.subhead{font-size:8px;letter-spacing:2.5px;color:#c6ab8a;font-weight:700}.center-heading{font-size:9px;letter-spacing:2.3px;font-weight:700;color:#d8d0c2;padding-top:20px;white-space:nowrap}.live-mark{display:inline-block;width:5px;height:5px;border-radius:50%;background:#bfaa79;box-shadow:0 0 10px #ddbb7e;margin-right:12px;vertical-align:middle}.divider-vertical{padding:0 11px;color:#7f8786}.top-actions{display:flex;align-items:center;gap:12px}.seed-tag{font-size:10px;letter-spacing:1.4px;color:#d1c3ac;border:1px solid var(--line);padding:12px 14px;background:rgba(15,20,22,.5)}.icon-button{height:39px;width:39px;border:1px solid var(--line);background:rgba(18,23,26,.58);color:#ece0c9;font-size:18px;transition:background .2s}.icon-button:hover{background:rgba(155,118,73,.4)}.mobile-only{display:none}
.artifact-intro{position:absolute;left:57px;top:29%;width:min(320px,30vw);z-index:4;pointer-events:none}.section-kicker{font-size:10px;color:#ccae82;font-weight:600;letter-spacing:1.8px}.section-kicker span{display:inline-block;height:1px;background:#907557;vertical-align:middle;width:32px;margin:0 10px 3px}.artifact-intro h2{font:normal clamp(34px,3.5vw,60px)/1.05 Georgia,serif;letter-spacing:-1.6px;margin:23px 0 15px}.artifact-intro em{color:var(--gold);font-weight:normal}.artifact-intro p{font-size:13px;line-height:1.8;color:#bdc3c0;max-width:258px}.micro-metadata{display:flex;flex-direction:column;gap:12px;color:#c5bbab;font-size:9px;letter-spacing:1.6px;margin-top:32px}.micro-metadata i{width:26px;height:1px;background:var(--gold)}
.control-panel{position:absolute;right:24px;top:104px;bottom:24px;width:338px;z-index:10;background:var(--panel);border:1px solid rgba(216,206,180,.15);box-shadow:0 20px 70px rgba(0,0,0,.35);backdrop-filter:blur(26px);overflow:auto;scrollbar-width:thin;scrollbar-color:#554b3c transparent;padding:22px 24px 15px}.control-panel:before{content:"";position:absolute;left:0;top:0;width:65px;height:2px;background:var(--gold)}.panel-top{font-size:10px;letter-spacing:1.6px;font-weight:800;color:#ece4d3;display:flex;align-items:center;justify-content:space-between;padding-bottom:16px}.panel-index{font-size:9px;color:#857e72}.panel-group{border-top:1px solid var(--line);padding:18px 0 20px}.control-label{font-size:10px;letter-spacing:1.6px;color:#e5dfd4;font-weight:800;margin-bottom:16px}.control-label>span{font-weight:400;color:#d2a977;margin-right:11px}.control-label small{color:#858785;font-size:9px;float:right;letter-spacing:1.1px}.view-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.view-btn{padding:11px 7px;background:#1d2526;color:#9fa5a2;font-size:11px;border:1px solid transparent;transition:all .2s}.view-btn:hover{color:#fff;background:#2c3433}.view-btn.selected{border-color:#b39064;color:#f5dfbd;background:#493a29}.tiny-legend{font-size:8px;letter-spacing:.45px;color:#8c928e;margin-top:14px;line-height:1.7}.tiny-legend span{color:var(--gold);margin:0 4px}.toggle-line{display:flex;justify-content:space-between;align-items:center;margin:14px 0;gap:15px;cursor:pointer}.toggle-line>span:first-child{display:flex;flex-direction:column;gap:3px}.toggle-line b{font-weight:500;font-size:12px}.toggle-line small{font-size:10px;color:#888f8c}.toggle-line input{position:absolute;opacity:0}.switch{display:block;width:34px;height:18px;background:#3b4140;border:1px solid #64615a;border-radius:20px;flex-shrink:0;position:relative;transition:background .2s}.switch:before{content:"";position:absolute;top:3px;left:3px;width:10px;height:10px;background:#d7d1c6;border-radius:50%;transition:transform .2s}.toggle-line input:checked+.switch{background:#ac8052;border-color:#ac8052}.toggle-line input:checked+.switch:before{transform:translateX(16px);background:#211e1b}.range-line,.range-ends{display:flex;align-items:center;justify-content:space-between}.range-line label{font-size:12px;color:#d9d2c5}.range-line span{font-size:9px;color:#d2a977;letter-spacing:.7px}.range{width:100%;margin:15px 0 8px;height:3px;appearance:none;-webkit-appearance:none;border:0;outline:none;background:linear-gradient(90deg,#ba9263 0%,#ba9263 65%,#414747 65%,#414747 100%);cursor:pointer}.range::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:#e7c18c;border:2px solid #1d2322;box-shadow:0 0 0 1px #b18b63}.range::-moz-range-thumb{height:10px;width:10px;border-radius:50%;background:#e7c18c;border:2px solid #1d2322}.range-ends{color:#808783;font-size:8px;letter-spacing:1.2px}.sound-hint{font-size:11px;line-height:1.6;color:#949d98;margin:0 0 15px}kbd{font-size:10px;border:1px solid #77716a;padding:1px 5px;color:#d7bea1;border-radius:3px}.note-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.note-pad{min-width:0;min-height:106px;text-align:left;background:#242a29;color:#e4d5bd;border:1px solid #3c403b;padding:11px 10px;display:flex;flex-direction:column;gap:5px;transition:all .16s;position:relative;overflow:hidden}.note-pad:hover,.note-pad.sounding{border-color:#c39a6d;background:#433829;transform:translateY(-2px)}.note-number{color:#9c988f;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.8px}.note-number small{font-size:8px;color:#727f7c}.note-pad strong{font:normal 21px Georgia,serif;letter-spacing:1px}.note-pad>small{color:#a4a196;font-size:8px;letter-spacing:.7px}.note-bar{height:2px;background:#c49a6f;width:50%;margin:1px 0}.note-pad:nth-child(2) .note-bar{width:70%}.note-pad:nth-child(3) .note-bar{width:90%;background:#a4c2c9}.volume-label{margin-top:14px}.text-button{background:transparent;border:0;color:#c9a372;font-size:9px;font-weight:700;letter-spacing:1px;padding:4px}.text-button:hover{color:#fff}.sequencer-heading{display:flex;align-items:center;justify-content:space-between;margin-top:23px;border-top:1px solid var(--line);padding-top:17px;gap:8px}.sequencer-heading b{font-size:10px;letter-spacing:1.3px}.sequencer-heading small{display:block;color:#90958f;font-size:8px;line-height:1.6;margin-top:4px;max-width:185px}.play-btn{border:1px solid #b49163;background:#9c744a;color:#161d1d;font-size:9px;letter-spacing:.8px;font-weight:900;padding:11px 9px;white-space:nowrap}.play-btn.playing{background:#a3c6bc;border-color:#a3c6bc}.sequencer{margin-top:13px;display:grid;grid-template-columns:24px repeat(8,minmax(0,1fr));gap:5px;align-items:center}.seq-name{font-size:9px;color:#aaa799}.seq-step{height:23px;padding:0;border:1px solid #46504c;background:#26302f;cursor:pointer;transition:background .13s,border-color .13s}.seq-step.active{background:#b48a58;border-color:#cca775}.seq-step.current{box-shadow:0 0 0 1px #dfd7c3,inset 0 0 0 1px #dfd7c3}.seq-step:hover{border-color:#fff}.seq-bottom{display:flex;align-items:center;gap:10px;margin-top:15px}.seq-bottom label{font-size:9px;line-height:1.6;color:#aaa99e;flex-shrink:0}.seq-bottom label b{color:#e2ba8a;display:block}.seq-bottom .range{margin:0;flex:1;min-width:0}.control-footer{border-top:1px solid var(--line);padding:17px 0 3px;display:flex;align-items:center;gap:9px;color:#929b95;font-size:8px;letter-spacing:1px}.control-footer strong{font-size:8px;color:#d1b591;font-weight:600;margin-right:auto}.status-led{height:6px;width:6px;border-radius:50%;background:#94b89e;box-shadow:0 0 9px #94b89e}
.artifact-info{position:absolute;left:56px;bottom:49px;width:322px;z-index:5;border:1px solid rgba(230,209,176,.18);border-top-color:rgba(226,195,151,.47);background:rgba(13,19,21,.8);backdrop-filter:blur(20px);padding:20px 24px 17px;transition:background .2s;pointer-events:auto}.info-top{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:2px;color:#cba477}.diamond{font-size:20px;color:#b19775}.artifact-info h3{font:normal 26px Georgia,serif;letter-spacing:-.5px;margin:12px 0}.artifact-info p{font-size:12px;line-height:1.7;color:#b7bbb5;min-height:80px}.info-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:19px;border-top:1px solid var(--line);padding-top:14px;color:#9e9c8f;font-size:9px;letter-spacing:1px}.info-bottom button{background:none;border:0;color:#e2bb86;font-size:9px;letter-spacing:.7px;cursor:pointer}.bottom-center{position:absolute;bottom:45px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;font-size:9px;font-weight:600;letter-spacing:2px;color:#d9c3a5;white-space:nowrap;pointer-events:none;z-index:3}.bottom-center .line{width:40px;height:1px;background:#a88762}.credit{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:1.3px;color:#737e7d;white-space:nowrap;pointer-events:none;z-index:3}.credit span{color:#c4a177;padding:0 4px}
#hotspots{position:absolute;inset:0;pointer-events:none;z-index:6}.hotspot{position:absolute;display:flex;gap:8px;align-items:center;background:rgba(17,23,24,.69);border:1px solid rgba(227,195,144,.31);border-radius:3px;color:#e9d4b1;transform:translate(-50%,-50%);font-size:8px;font-weight:700;letter-spacing:.7px;padding:7px 9px;white-space:nowrap;pointer-events:auto;backdrop-filter:blur(8px);box-shadow:0 2px 12px rgba(0,0,0,.3);transition:background .15s}.hotspot:hover{background:#5e432c}.hotspot-dot{height:5px;width:5px;border-radius:50%;background:#efba79;box-shadow:0 0 9px #f0c28a}.hotspot[hidden]{display:none!important}
.loading{position:absolute;inset:0;background:#101819;z-index:30;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;transition:opacity .65s,visibility .65s}.loading.done{opacity:0;visibility:hidden;pointer-events:none}.loading-symbol{font:normal 42px Georgia,serif;color:var(--gold)}.loading span{font-size:10px;letter-spacing:3px;color:#e8d3b7}.loading-track{width:170px;background:#354040;height:1px;overflow:hidden}.loading-track i{display:block;width:40%;background:#d5a879;height:100%;animation:loading-slide 1.4s infinite alternate ease-in-out}@keyframes loading-slide{to{transform:translateX(150%)}}
.help-dialog{max-width:600px;width:calc(100vw - 32px);background:#182021;color:#f4e9d8;border:1px solid #9b7851;box-shadow:0 15px 80px rgba(0,0,0,.7);padding:27px 33px;overflow:auto;max-height:calc(100vh - 50px)}.help-dialog::backdrop{background:rgba(3,7,9,.77);backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;color:var(--gold);font-size:10px;letter-spacing:2px}.dialog-head button{background:transparent;border:0;color:#ded4c7;font-size:18px}.help-dialog h2{font:normal 35px Georgia,serif;margin:25px 0}.help-dialog p{font-size:13px;line-height:1.95;color:#c9d0c9}.help-dialog b{color:#e4c091;font-weight:700}.dialog-sources{font-size:10px;color:#ada997;line-height:1.7;margin-top:20px;border-top:1px solid var(--line);padding-top:15px}.dialog-dismiss{border:1px solid #bd9165;background:#aa8054;color:#141b1b;font-size:10px;letter-spacing:1.1px;font-weight:800;padding:13px 16px;margin-top:22px}
@media(max-width:1250px){.center-heading{display:none}.artifact-intro{width:250px;left:35px;top:26%}.artifact-info{left:32px;bottom:42px;width:285px}.control-panel{width:315px;right:14px}.topbar{padding-left:25px;padding-right:20px}.bottom-center{display:none}}
@media(max-width:900px){.artifact-intro{top:21%;width:220px}.artifact-intro h2{font-size:38px}.artifact-intro p{font-size:11px;max-width:195px}.micro-metadata{font-size:8px}.artifact-info{width:260px;padding:15px 17px}.control-panel{width:293px}.note-pad{padding:10px 7px}.topbar{padding-top:20px}}
@media(max-width:690px){.topbar{min-height:77px;padding:18px 15px 0}.identity h1{font-size:29px;margin-top:4px}.identity{gap:7px}.logo-mark{height:32px;transform:scale(.75);transform-origin:top}.eyebrow{font-size:7px;letter-spacing:1.3px}.subhead{font-size:7px;letter-spacing:1.3px}.seed-tag{display:none}.mobile-only{display:block}.icon-button{height:36px;width:36px}.artifact-intro{top:103px;left:16px;width:200px}.artifact-intro h2{font-size:31px;margin:9px 0 6px}.artifact-intro p{font-size:10px;line-height:1.5;margin:5px 0}.micro-metadata{display:none}.section-kicker{font-size:8px}.artifact-info{bottom:26px;left:12px;max-width:calc(100vw - 24px);width:285px;padding:13px 16px}.artifact-info h3{font-size:21px;margin:5px 0}.artifact-info p{font-size:10px;min-height:0;line-height:1.5;margin:7px 0}.info-bottom{margin-top:7px;padding-top:9px}.credit,.bottom-center{display:none}.control-panel{right:8px;top:69px;bottom:10px;width:min(336px,calc(100vw - 16px));max-height:80vh;display:none}.control-panel.open{display:block}.hotspot{font-size:7px;padding:5px 6px}.hotspot-text{max-width:115px;overflow:hidden;text-overflow:ellipsis}}
@media(max-height:700px) and (min-width:691px){.artifact-intro{top:24%}.artifact-intro p{display:none}.artifact-info{padding:12px 16px;bottom:30px}.artifact-info h3{margin:8px 0}.artifact-info p{min-height:0;margin:6px 0}.info-bottom{margin-top:7px;padding-top:8px}.control-panel{top:90px;bottom:9px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
