@font-face{font-family:Aroma;src:url('assets/CormorantGaramond-Italic.ttf') format('truetype');font-style:italic;font-weight:300 700;font-display:swap}
*{box-sizing:border-box}html{background:#181611;color:#e9e1d4}body{margin:0;font-family:Arial,'Hiragino Kaku Gothic ProN',sans-serif}main{max-width:1800px;margin:auto;padding:0 3.8vw}a{color:inherit;text-decoration:none}header{height:70px;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.14em}header>a:first-child{font-family:Georgia,serif;font-size:21px;letter-spacing:-.04em}header .board{font-size:11px;letter-spacing:.02em;color:#b8afa0}.scene{position:relative;width:min(100%,max(540px,calc((100svh - 172px)*1.5)));margin-inline:auto;height:calc(100svh - 172px);min-height:360px;max-height:1060px;overflow:hidden;background:#211d18;border-radius:3px;touch-action:pan-y pinch-zoom;isolation:isolate}.photo,#steam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;pointer-events:none}#steam{opacity:0;transition:opacity .65s ease-out}.ready #steam{opacity:1}.scene-title{position:absolute;left:3.4%;top:5.5%;pointer-events:none;z-index:2}.scene-title>span{font-size:9px;letter-spacing:.22em;color:#d7c7ae}.scene-title h1{font-family:'Hiragino Mincho ProN','Yu Mincho',serif;font-size:clamp(21px,2.2vw,34px);font-weight:400;letter-spacing:.14em;margin:14px 0}.scene-bottom{position:absolute;left:3.4%;right:3.4%;bottom:4%;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:2;pointer-events:none;color:#f5eadb;text-shadow:0 1px 6px #20180e}.scene-bottom p{font-size:11px;letter-spacing:.1em;margin:0}.scene-bottom>span{font-size:10px;letter-spacing:.07em;min-width:130px;text-align:right}footer{min-height:102px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;line-height:1.85}footer p{margin:12px 0}footer p>span:last-child{color:#a99e8d}.controls{display:flex;gap:8px;align-items:center}button{background:transparent;border:1px solid #5c5346;border-radius:100px;padding:13px 22px;color:#e9e1d4;font:inherit;font-size:11px;cursor:pointer;transition:background .2s,border-color .2s}button:hover{background:#312c24;border-color:#938570}#play span{margin-left:24px}#pause{font-size:13px;padding:13px 16px}.mobile-hint{display:none}a:focus-visible,button:focus-visible{outline:2px solid #e2bd7d;outline-offset:5px}.fallback{color:#cfbaa1;font-size:12px;line-height:1.7}.fallback[hidden]{display:none}
@media(max-width:700px){main{padding:0 16px}header{height:58px;font-size:9px}.scene{width:100%;height:min(calc(100svh - 190px),calc((100vw - 32px)*1.55));min-height:400px;max-height:800px;border-radius:3px}.scene-title{left:22px;top:28px}.scene-title>span{font-size:8px}.scene-title h1{font-size:25px;margin-top:10px}.scene-bottom{left:20px;right:20px;bottom:20px}.scene-bottom>span{min-width:unset;font-size:9px}.scene-bottom p{font-size:10px}.desktop-hint{display:none}.mobile-hint{display:inline}footer{min-height:122px;gap:8px;font-size:10px}button{padding:12px 15px;font-size:10px}#play span{margin-left:10px}#pause{padding:11px 13px}.controls{gap:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}