:root{color-scheme:dark;font-family:"Hiragino Sans","Yu Gothic",YuGothic,system-ui,sans-serif;font-synthesis:none;color:#f1f0d9;background:#334337}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:280px}.landscape{position:relative;width:100%;height:100%;height:100svh;background:#293e2b url("./stills/golden.webp") center/cover no-repeat}#scene{width:100%;height:100%;display:block;position:absolute;inset:0}.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,24,25,.13),transparent 32%,transparent 70%,rgba(4,18,9,.43));pointer-events:none}.title-block{position:absolute;left:5.1%;top:6.8%;text-shadow:0 1px 24px #30403333}.eyebrow{font-size:9px;letter-spacing:.28em;font-weight:500;opacity:.65;margin:0 0 20px}h1{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif;font-size:clamp(24px,2.15vw,32px);letter-spacing:.23em;font-weight:400;margin:0 0 15px}.subtitle{font-size:11px;letter-spacing:.16em;font-weight:400;opacity:.7;margin:0}.scene-note{position:absolute;right:4.4%;top:7.7%;display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.15em;opacity:.67}.sun-mark{width:8px;height:8px;border:1px solid #eeeacb99;border-radius:50%;box-shadow:0 0 10px #ede6b133}.bottom{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);text-align:center}.invitation{font-size:11px;letter-spacing:.18em;margin:0 0 18px;color:#eff0d1b3;text-shadow:0 1px 12px #0009;transition:opacity .5s}.controls{display:flex;align-items:center;justify-content:center;gap:17px;padding:10px 15px 10px 18px;min-height:58px;background:#152318b3;border:1px solid #c4cbb323;box-shadow:0 8px 40px #06100620;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:14px}button{font:inherit;color:inherit;background:transparent;border:none;cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:2px solid #e7e4b9;outline-offset:5px;border-radius:5px}button:hover{color:#fffef0}button:disabled{opacity:.5;cursor:wait}.sound-start{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:12px;letter-spacing:.06em;padding:9px 2px;min-height:36px}.sound-start svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.divider{width:1px;height:19px;background:#dfe4c723}.volume-control{display:flex;align-items:center;gap:10px}.volume-control input{width:88px;height:24px;margin:0;cursor:pointer;accent-color:#c0c7a2}.volume-control output{font-size:10px;min-width:18px;letter-spacing:.06em;color:#e1e5caa8;font-variant-numeric:tabular-nums}.icon-button{display:flex;justify-content:center;align-items:center;width:32px;height:36px;padding:5px;color:#e1e5cabf}.icon-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.footnote{font-size:8px;letter-spacing:.18em;opacity:.4;margin:16px 0 0}.footnote span{padding:0 7px}.notice{position:absolute;top:25%;left:50%;transform:translateX(-50%);width:min(90%,520px);text-align:center;font-size:12px;line-height:1.9;color:#f7f3d7;text-shadow:0 1px 7px #24382c}.notice:empty{display:none}.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}.noscript{position:absolute;top:40%;width:100%;text-align:center;font-size:13px}@media(max-width:600px){.title-block{top:7%;left:7%}.eyebrow{font-size:8px;letter-spacing:.2em;margin-bottom:17px}h1{font-size:28px}.subtitle{font-size:10px}.scene-note{top:8%;right:7%;font-size:9px}.scene-note span:last-child{display:none}.bottom{bottom:max(22px,env(safe-area-inset-bottom));max-width:calc(100% - 28px)}.controls{gap:12px;padding:8px 12px}.volume-control input{width:64px}.sound-start{font-size:11px;gap:7px}.fullscreen-button{display:none}.footnote{font-size:7px}.invitation{font-size:10px;margin-bottom:15px}}@media(max-width:350px){.controls{gap:8px}.volume-control input{width:45px}.volume-control{gap:5px}.sound-start{letter-spacing:0}.bottom{max-width:calc(100% - 16px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

[hidden]{display:none!important}

.scene-picker{display:inline-block;font-size:10px;letter-spacing:.1em;color:inherit;text-decoration:none;opacity:.7;margin:0 0 21px;padding:5px 0}.scene-picker:hover{opacity:1}.scene-picker:focus-visible{outline:2px solid #e7e4b9;outline-offset:5px;border-radius:2px}

.look-picker{position:absolute;right:5%;top:7%;display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:360px;font-size:10px;color:#f0efdc;z-index:4}.look-picker label{opacity:.65;letter-spacing:.1em}.look-picker select{appearance:none;font:inherit;font-size:12px;color:inherit;border:1px solid #e7ecd333;background:#1e302ed9;padding:11px 30px 11px 14px;border-radius:22px;cursor:pointer}.look-picker a{color:inherit;opacity:.75;text-decoration:none}.look-picker select:focus-visible,.look-picker a:focus-visible{outline:2px solid #eadca8;outline-offset:4px}.subtitle{max-width:380px;line-height:1.8}.title-block{max-width:calc(100% - 440px)}@media(max-width:800px){.look-picker{top:auto;bottom:175px;left:5%;right:5%;max-width:none;justify-content:center}.title-block{max-width:85%}.look-picker label{display:none}.look-picker select{padding-top:9px;padding-bottom:9px}.look-picker a{font-size:9px}.subtitle{font-size:10px;max-width:260px}}