:root{color-scheme:dark;--ground:#080b10;--ivory:#eeeae0;--muted:#999b99;--quiet:#737876}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ground)}
body{color:var(--ivory);font-family:"PingFang SC","Hiragino Sans GB",sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit}
#stage{position:fixed;inset:0;touch-action:none}
canvas{display:block;width:100%;height:100%;outline:none}
.identity{position:fixed;left:4.7vw;top:6.2vh;pointer-events:none}
h1{font-family:"Songti SC","STSong",serif;font-size:29px;font-weight:400;letter-spacing:.22em;margin:0 0 8px}
.identity p{font-family:"Baskerville","Times New Roman",serif;margin:0;font-size:15px;color:var(--muted);letter-spacing:.03em}
.invitation{position:fixed;right:4.7vw;top:6.5vh;color:var(--muted);font-size:11px;font-weight:300;letter-spacing:.07em;transition:opacity 2s;pointer-events:none}
.invitation.dismissed{opacity:0}
.caption{position:fixed;left:4.7vw;bottom:6.2vh;pointer-events:none}
.phase{font-family:"Songti SC","STSong",serif;font-size:17px;letter-spacing:.18em;color:#d1cfc6}
.caption p{margin:10px 0 0;font-size:11px;letter-spacing:.06em;color:var(--muted);font-weight:300}
.transport{position:fixed;right:4.2vw;bottom:5.7vh;display:flex;align-items:center;gap:6px}
button{padding:13px 12px;background:transparent;border:0;color:#aeb1ab;cursor:pointer;font-size:11px;letter-spacing:.035em;min-height:44px;transition:color .25s,background .25s;border-radius:2px}
button:hover{color:#fffdf7;background:rgba(255,255,255,.035)}
button:focus-visible{outline:1px solid #deded1;outline-offset:3px}
button:disabled{opacity:.3;cursor:default}
#pause{font-family:Arial,sans-serif;min-width:43px;font-size:15px;letter-spacing:.1em}
.control-divider{height:12px;width:1px;background:#414542;margin:0 9px 0 1px}
.auto-dot{display:inline-block;width:4px;height:4px;background:#c4c6b7;border-radius:50%;margin:0 8px 2px 0;transition:opacity .25s}
button[aria-pressed=false] .auto-dot{opacity:.25}
.error{position:fixed;left:50%;top:48%;transform:translate(-50%,-50%);max-width:32em;line-height:1.8;font-size:14px}
.hide-ui .identity,.hide-ui .invitation,.hide-ui .caption,.hide-ui .transport{visibility:hidden}
@media(max-width:640px){.identity{left:7vw;top:5vh}h1{font-size:24px}.identity p{font-size:13px}.invitation{right:7vw;top:5.4vh;font-size:10px}.caption{left:7vw;bottom:13vh}.caption p{font-size:10px}.phase{font-size:15px}.transport{right:5vw;bottom:4vh;gap:2px}button{padding:12px 10px}.control-divider{margin-right:4px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

[hidden]{display:none!important}
html[lang=en] h1{font-family:"Baskerville","Times New Roman",serif;font-size:34px;letter-spacing:.05em}
html[lang=en] .phase{font-family:"Baskerville","Times New Roman",serif;font-size:20px;letter-spacing:.035em}
#language{position:fixed;right:4.7vw;top:5.8vh;min-width:44px;padding:10px 0;color:#a5a8a1;letter-spacing:.08em}
.invitation{top:calc(6.2vh + 48px)}
.caption{max-width:65vw}
.caption p{line-height:1.6}
.interface-dispersed [data-interface]{visibility:hidden!important;pointer-events:none}
#restart-center{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;padding:16px 22px;color:#c8c9c1;font-size:12px;letter-spacing:.13em;border-radius:0;min-width:128px;background:transparent;transition:color .3s}
#restart-center:hover{color:#fffaf1;background:transparent}
#restart-center::after{content:"";display:block;height:1px;width:23px;background:#737a70;margin:13px auto 0;transition:width .4s,background .4s}
#restart-center:hover::after{width:42px;background:#c4c9bd}
.hide-ui #language{visibility:hidden}
@media(max-width:640px){
 html[lang=en] h1{font-size:29px}
 html[lang=en] .phase{font-size:18px}
 #language{right:7vw;top:4.4vh}
 .invitation{top:calc(5vh + 47px);max-width:70vw;text-align:right;line-height:1.5}
 .caption{max-width:85vw}
 #restart-center{font-size:12px}
}

.interface-fractured{visibility:hidden!important;pointer-events:none}
.caption{transition:opacity .32s ease}
.caption.changing{opacity:0}
#auto{min-width:82px}
#auto[aria-pressed=true]{color:#d6d8cc}
@media(max-width:640px){#auto{min-width:76px}.transport{right:4vw;gap:0}button{padding-left:8px;padding-right:8px}}

.back-to-work{position:fixed;left:4.7vw;top:2.4vh;color:var(--quiet);font-size:11px;text-decoration:none;min-height:24px;display:flex;align-items:center}
.back-to-work:hover{color:var(--ivory)}
.back-to-work:focus-visible{outline:1px solid var(--ivory);outline-offset:4px}
.sound-controls{position:fixed;right:4.7vw;top:calc(6.2vh + 90px);display:flex;align-items:center;gap:8px}
.sound-controls button{padding:10px 9px;min-width:78px}
.sound-controls label{color:var(--muted);font-size:10px;align-items:center;gap:7px}
.sound-controls label:not([hidden]){display:flex}
.sound-controls input{width:64px;accent-color:#c4c6b7;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hide-ui .sound-controls,.hide-ui .back-to-work{visibility:hidden}
@media(max-width:640px){.back-to-work{left:7vw;top:1.4vh}.sound-controls{right:7vw;top:calc(5vh + 87px);gap:2px}.sound-controls input{width:52px}.sound-controls button{padding:8px;min-width:72px}}