:root{color-scheme:dark;--bg:#141c1c;--line:#35423d;--gold:#d8bc79;--muted:#a6b6ab}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#e8ece3;font:14px/1.5 "Segoe UI",Arial,sans-serif}a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline}button,select,input{font:inherit}button,select{color:#e8ece3;background:#202c27;border:1px solid #4b5b4f;border-radius:5px;min-height:44px;padding:9px 16px;cursor:pointer}button:hover{background:#34443a}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button[aria-pressed=true],button.primary{color:#171f1b;background:var(--gold);border-color:var(--gold)}header{display:flex;align-items:center;gap:26px;padding:15px 30px;border-bottom:1px solid var(--line);font-size:12px}.brand{color:#e8ece3;font-weight:700;letter-spacing:2px;margin-right:auto}.brand span{color:var(--muted);font-weight:400;margin-left:10px}header button{font-size:12px}main{max-width:2000px;margin:auto}.viewport{position:relative;height:calc(100dvh - 275px);min-height:440px;overflow:hidden}#stage{position:absolute;inset:0;touch-action:none}canvas{display:block;width:100%;height:100%}.heading{position:absolute;left:32px;top:25px;pointer-events:none}.eyebrow{color:var(--gold);font-size:10px;letter-spacing:2px;margin:0}h1{font-size:clamp(27px,3.5vw,48px);line-height:1.05;font-weight:500;letter-spacing:-1.5px;margin:10px 0}p{color:var(--muted)}.heading p:last-child{margin:10px 0;font-size:13px}.badge{position:absolute;top:30px;right:30px;font-size:10px;color:#c6cfbc;max-width:200px;text-align:right;letter-spacing:.6px}.views{position:absolute;bottom:23px;left:30px;display:flex;gap:6px}.views button{font-size:12px;background:#17231ee8}.views button[aria-pressed=true]{background:var(--gold)}.hint{position:absolute;right:30px;bottom:24px;font-size:11px;pointer-events:none}#loading{position:absolute;top:48%;width:100%;text-align:center;color:var(--gold);pointer-events:none}.transport{padding:18px 30px 22px;border-top:1px solid var(--line);background:#1b2523}.readout{display:flex;align-items:center;gap:18px}.readout>span:first-child{font-size:10px;color:var(--gold);letter-spacing:2px;width:65px}.readout h2{font-size:17px;font-weight:500;margin:0}.readout #clock{margin-left:auto;font:12px Consolas,monospace;color:var(--muted)}.timeline-label{font-size:10px;color:var(--muted);display:flex;justify-content:space-between;margin-top:12px}#timeline{display:block;width:100%;height:24px;accent-color:var(--gold);cursor:ew-resize;margin:0 0 10px}.controls{display:flex;align-items:center;gap:24px}.buttons{display:flex;gap:8px}.controls label{font-size:12px;color:var(--muted)}select{margin-left:8px}.load{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:10px;color:var(--muted)}meter{width:90px}output{width:30px}dialog{background:#1b2523;color:#e8ece3;border:1px solid #596b5e;border-radius:10px;max-width:660px;width:calc(100% - 30px);max-height:85dvh;padding:28px}dialog::backdrop{background:#07100ddd}dialog h2{font-size:27px;font-weight:500}dialog h3{font-size:15px}dialog img{width:100%;max-height:270px;object-fit:cover;border-radius:4px}#close{float:right}dialog p{line-height:1.7}@media(max-width:850px){header{padding:10px 16px;gap:12px}.brand span{display:none}.heading{left:18px;top:20px}.badge{top:100px;left:18px;right:auto;text-align:left;max-width:260px}.hint{display:none}.views{left:16px;bottom:16px}.transport{padding:14px 16px}.controls{flex-wrap:wrap;gap:12px}.load{margin-left:auto}.viewport{height:calc(100dvh - 320px);min-height:380px}.readout h2{font-size:14px}.timeline-label span{font-size:9px}}@media(max-width:500px){header{flex-wrap:wrap}.brand{font-size:10px}header button{padding:6px 10px}.buttons{width:100%;gap:5px}.buttons button{padding:8px 10px;flex:1;font-size:12px}.load span{display:none}.readout{gap:6px}.readout>span:first-child{width:48px;font-size:9px}.readout #clock{font-size:10px}.views button{padding:7px 12px}.viewport{min-height:400px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.language-picker select{font-size:12px;max-width:112px;padding:8px;margin:0}.readout>span:first-child{width:auto;min-width:65px}.readout h2{min-width:0}.hint{max-width:40%;text-align:right}@media(max-width:600px){header{flex-wrap:wrap;gap:8px}header .brand{flex-basis:100%}.readout{flex-wrap:wrap}.readout #clock{white-space:nowrap}.controls .buttons{flex-wrap:wrap}.buttons button{white-space:nowrap}.timeline-label{gap:12px}.timeline-label>span:last-child{text-align:right}}

.views{flex-wrap:wrap;max-width:75%}.hint{bottom:75px}.companion-transport{border-top:1px solid #536859}.companion-transport .readout{justify-content:space-between}.companion-transport input{width:100%;accent-color:var(--gold);margin:10px 0 16px}.companion-transport output{width:auto}.companion-transport .buttons{flex-wrap:wrap}.companion-note{font-size:12px;max-width:850px;margin-bottom:0}#companion-clock{font:12px Consolas,monospace;color:var(--muted)}#companion-step{color:#e8ece3;margin:8px 0}@media(max-width:600px){.views{max-width:calc(100% - 32px)}.companion-transport .buttons button{flex:1 1 40%}}

[hidden]{display:none!important}.operation-tabs{display:flex;gap:8px;padding:8px 30px;background:#141c1c;border-top:1px solid var(--line)}.operation-tabs button{font-size:12px;min-height:36px;padding:5px 12px}.viewport{height:calc(100dvh - 340px)}@media(max-width:600px){.operation-tabs{padding:8px 16px}.viewport{height:calc(100dvh - 440px)}}

.companion-speed{display:block;margin-top:10px;font-size:12px;color:var(--muted)}.companion-transport{padding-top:12px;padding-bottom:12px}.companion-transport .buttons{display:inline-flex;width:auto;margin-right:18px}.companion-speed{display:inline-block}.companion-note{margin-top:7px;font-size:11px}
.camera-tools{position:absolute;right:18px;top:140px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:330px}.camera-tools button{min-width:44px;font-size:12px;background:#17231ef0}.camera-tools #zoom-in,.camera-tools #zoom-out{font-size:22px;padding:3px 12px}#navigation-guide{position:absolute;right:18px;top:200px;max-width:360px;padding:10px 16px;background:#14211af5;border:1px solid #6a796a;border-radius:8px;font-size:12px;z-index:5}#navigation-guide p{color:#e8ece3}.orbit-pivot{position:absolute;width:18px;height:18px;border:1px solid #ffe1a2;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 3px #15201c88}.orbit-pivot:after{content:"";position:absolute;width:4px;height:4px;background:#ffe1a2;border-radius:50%;left:6px;top:6px}.views{max-width:calc(100% - 32px)}@media(max-width:600px){.camera-tools{top:126px;right:12px;max-width:calc(100% - 24px);gap:4px}.camera-tools button{padding:6px 9px}#navigation-guide{top:179px;right:12px;left:12px;max-width:none}.viewport{min-height:480px}.heading p:last-child{max-width:340px}.badge{display:none}.views{bottom:12px;gap:4px}.views button{min-height:44px}.hint{display:none}}
@media(pointer:coarse){#navigation-guide [data-copy="mouseGuide"]{display:none}}
