@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--cream:#f3f0e8;--muted:#aaaeb8;--gold:#d3b883;--line:rgba(230,228,221,.17)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#080b14;color:var(--cream);font:400 16px/1.6 Manrope,"Noto Sans JP",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,main:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button{border:0}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}
#viewer{position:fixed;inset:0;touch-action:none;cursor:grab;overflow:hidden;outline-offset:-6px}#viewer.dragging{cursor:grabbing}#universe{position:absolute;inset:0;will-change:transform;transform-origin:center}#galaxy{position:absolute;max-width:none;user-select:none;pointer-events:none;opacity:0;transition:opacity 1.6s ease}#galaxy.loaded{opacity:1}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,5,12,.57),transparent 24%,transparent 49%,rgba(3,5,12,.5) 84%,rgba(3,5,12,.91)),linear-gradient(90deg,rgba(3,5,12,.33),transparent 55%)}
.chrome{transition:opacity .5s ease,visibility .5s ease}body.focus-mode .chrome{opacity:0;visibility:hidden;pointer-events:none}.header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:34px 48px;pointer-events:none}.header>*{pointer-events:auto}.brand{color:var(--cream);text-decoration:none;display:flex;align-items:center;gap:14px}.brand>svg{width:42px;height:42px;color:var(--gold);stroke-width:1}.brand>svg circle{fill:var(--gold);stroke:none}.brand>span{font-size:21px;font-weight:500;letter-spacing:.3em;line-height:1.5}.brand small{display:block;font-size:10px;letter-spacing:.18em;font-weight:400;color:#a6a9b3;margin-top:2px}.header-right{display:flex;align-items:center;gap:24px}.edition{font-size:11px;letter-spacing:.16em;color:#b5b5be}.edition>span{color:var(--gold);margin-left:18px}.header-divider{height:22px;width:1px;background:var(--line)}.icon-button{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:transparent;transition:background .2s,color .2s}.icon-button:hover{color:var(--gold);background:rgba(255,255,255,.07)}.header .icon-button{border:1px solid var(--line)}
.introduction{position:absolute;bottom:178px;left:50px;pointer-events:none}.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.22em;color:var(--gold)}.eyebrow .line{width:29px;height:1px;background:var(--gold)}h1{font-family:"Noto Serif JP",serif;font-size:clamp(28px,3.5vw,48px);font-weight:400;letter-spacing:.1em;line-height:1.55;margin:15px 0 12px;text-shadow:0 2px 24px #080b14}p{color:#c5c7cf;font-size:14px;letter-spacing:.09em;margin:0}.art-label{display:flex;align-items:center;gap:7px;color:#898d9c;font-size:12px;margin-top:22px;letter-spacing:.03em}.tiny-star{font-size:15px;color:#b4a27e}.navigation-map{position:absolute;right:50px;bottom:177px;width:185px}.map-heading{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.13em;color:#a9acb7;margin-bottom:10px}#map{display:block;position:relative;width:100%;height:89px;border:1px solid rgba(255,255,255,.24);border-radius:3px;overflow:hidden;background:#0b0b15;padding:0}#map img{width:100%;height:100%;object-fit:fill;opacity:.6;pointer-events:none}#map-frame{position:absolute;left:15%;top:15%;width:70%;height:70%;border:1px solid #ded5bd;background:rgba(230,215,180,.07);pointer-events:none;box-shadow:0 0 0 200px rgba(0,0,0,.15)}.map-cross{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:100%;background:#fff;pointer-events:none}
.controls{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:8px 13px;background:rgba(16,19,29,.73);border:1px solid rgba(221,222,237,.17);border-radius:60px;backdrop-filter:blur(20px);box-shadow:0 10px 55px rgba(0,0,0,.2)}.tour-button{display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 15px;border-radius:28px;background:transparent;white-space:nowrap;font-size:14px;color:#e9e6de;transition:background .2s}.tour-button:hover{background:rgba(255,255,255,.07)}.tour-button[aria-pressed=true]{color:var(--gold)}.tour-button svg{width:19px;height:19px}.tour-button svg path{fill:currentColor;stroke:none}.control-divider{width:1px;height:22px;background:var(--line);margin:0 6px}#zoom-value{font-size:14px;letter-spacing:.05em;width:52px;text-align:center;font-variant-numeric:tabular-nums}#zoom-value span{font-size:11px;margin-left:3px;color:var(--muted)}.footer{position:absolute;left:50px;right:50px;bottom:24px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#9296a2}.instruction{display:flex;align-items:center;gap:10px}.instruction svg{width:13px;height:19px}.instruction i{font-style:normal;margin:0 10px;color:#5b6170}.footer-note{font-size:10px;letter-spacing:.18em}.mobile-help{display:none}
#restore{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;color:#ddd9cd;background:rgba(12,14,22,.6);backdrop-filter:blur(15px);border:1px solid var(--line);border-radius:30px;padding:11px 18px;font-size:13px;opacity:.6;transition:opacity .2s}#restore:hover{opacity:1}#restore svg{width:18px;height:18px}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:25px;font-size:14px;color:#c8c4b8;letter-spacing:.1em;background:#080b14;z-index:3;transition:opacity .8s}.loading-orbit{width:48px;height:48px;border:1px solid #494237;border-top-color:var(--gold);border-radius:50%;animation:orbit 1.8s linear infinite}#loading.done{opacity:0;pointer-events:none}#image-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;z-index:5;background:#080b14;padding:24px}#reload{padding:10px 20px;background:#393126;border-radius:25px}#notice{position:fixed;left:50%;top:110px;transform:translateX(-50%);background:rgba(12,14,22,.9);border:1px solid var(--line);border-radius:30px;padding:10px 20px;opacity:0;pointer-events:none;font-size:14px;transition:opacity .25s;max-width:90vw;text-align:center}#notice.show{opacity:1}@keyframes orbit{to{transform:rotate(360deg)}}
@media(min-width:1700px){.header{padding:42px 65px}.introduction{left:65px;bottom:200px}.navigation-map{right:65px;bottom:202px;width:225px}#map{height:110px}.footer{left:65px;right:65px}}
@media(max-width:700px){.header{padding:25px 23px}.brand{gap:9px}.brand>svg{width:32px;height:32px}.brand>span{font-size:17px;letter-spacing:.23em}.brand small{font-size:8px;letter-spacing:.11em}.edition,.header-divider{display:none}.header-right{gap:0}.header .icon-button{width:39px;height:39px}.introduction{left:26px;bottom:176px}.eyebrow{font-size:10px;letter-spacing:.16em}h1{font-size:29px;letter-spacing:.05em;margin-top:12px}p{font-size:13px;letter-spacing:.04em}.art-label{font-size:12px;margin-top:17px}.navigation-map{display:none}.controls{bottom:70px;padding:7px 7px;gap:0;max-width:calc(100vw - 28px)}.controls .icon-button{width:36px;height:40px}.tour-button{padding:9px 10px;gap:6px;font-size:13px}.tour-button svg{width:16px;height:16px}.control-divider{margin:0 3px}#zoom-value{width:44px;font-size:13px}.footer{bottom:27px;left:0;right:0;justify-content:center;font-size:12px}.footer-note,.desktop-help{display:none}.mobile-help{display:inline}.instruction i{margin:0 6px}.controls svg{width:20px;height:20px}#notice{top:95px}.vignette{background:linear-gradient(180deg,rgba(3,5,12,.5),transparent 28%,transparent 45%,rgba(3,5,12,.8) 100%)} }
@media(max-height:520px){.header{padding:18px 26px}.introduction{bottom:110px;left:28px}h1{font-size:28px;margin:5px 0}.introduction p,.art-label{display:none}.navigation-map{bottom:114px;right:28px;width:130px}#map{height:60px}.controls{bottom:39px}.footer{bottom:9px;left:28px;right:28px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
#sky{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}#sky.loaded{opacity:1}#galaxy{display:none}body.flat-fallback #galaxy{display:block}body.flat-fallback #sky{display:none}.vignette{background:linear-gradient(180deg,rgba(3,5,12,.28),transparent 20%,transparent 65%,rgba(3,5,12,.36))}.introduction{bottom:158px}h1{font-size:clamp(25px,2.8vw,38px)}.art-label{margin-top:12px}.source-credit{position:fixed;right:32px;bottom:22px;display:flex;align-items:center;gap:8px;font-size:12px;color:#c0c3cb;text-shadow:0 1px 4px #000;z-index:2}.source-credit a{color:inherit;text-decoration:none}.source-credit a:hover{text-decoration:underline}.footer{right:300px}.navigation-map{bottom:156px}#map-frame{box-shadow:none}.map-cross{display:none}.map-frame-copy{position:absolute;border:1px solid #ded5bd;background:rgba(230,215,180,.07);pointer-events:none}body.focus-mode #restore{bottom:48px}
@media(max-width:700px){.introduction{bottom:185px}.controls{bottom:90px}.footer{bottom:56px;right:0}.source-credit{left:0;right:0;bottom:20px;justify-content:center;font-size:12px}.source-credit span{color:#78808c}h1{font-size:28px}.art-label{margin-top:10px}.vignette{background:linear-gradient(180deg,rgba(3,5,12,.3),transparent 20%,transparent 60%,rgba(3,5,12,.4))}}
@media(max-height:520px){.introduction{bottom:98px}.navigation-map{bottom:100px}.controls{bottom:43px}.footer{bottom:12px;justify-content:flex-start;right:260px}.source-credit{bottom:10px;left:auto;right:26px}h1{font-size:25px}}