:root{color-scheme:dark;--night:#0E1832;--cyan:#66D6F4;--lavender:#A697ED;--gold:#F6D996}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030711;color:#f5f1ed;font-family:Arial,Helvetica,sans-serif}body{display:grid;place-items:center}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button{border:1px solid #a697ed55;background:#111c34bd;border-radius:30px;padding:12px 22px}button:hover{border-color:var(--cyan);background:#1b2c46}#movie{position:relative;width:min(100vw,177.7778vh);aspect-ratio:16/9;overflow:hidden;background:var(--night);isolation:isolate}canvas{display:block;width:100%;height:100%}#welcome{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse,#0e18322b,#080f2399);text-align:center;padding:20px}#welcome[hidden],[hidden]{display:none!important}.eyebrow{font-size:clamp(8px,1vw,13px);letter-spacing:.3em;color:var(--cyan);margin:0 0 20px}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(45px,8.5vw,120px);font-weight:400;letter-spacing:.035em;margin:0;text-shadow:0 0 45px #a697ed44}h1 span{display:block;font:italic 400 clamp(13px,2.2vw,30px) Georgia,serif;letter-spacing:.07em;color:#c6bdeb;margin-top:6px}.ornament{color:var(--gold);margin:22px 0 12px;font-size:20px}.dedication{font:italic clamp(10px,1.4vw,18px) Georgia,serif;color:#dbdbe7;margin:0 0 26px}#play{font-size:clamp(10px,1.1vw,15px);border-color:#66d6f477;padding:14px 25px;box-shadow:0 0 30px #66d6f40c}#play span{color:var(--cyan);margin-right:10px}.hint{font-size:clamp(8px,.85vw,12px);color:#b0b6ce;letter-spacing:.06em;margin:16px 0 0}#titles{position:absolute;left:5%;right:5%;top:14%;text-align:center;pointer-events:none;color:#fff2dc;font:400 clamp(19px,3.6vw,52px) Georgia,serif;text-shadow:0 2px 18px #030711,0 0 32px #a697ed55;transition:opacity .6s}#titles small{display:block;font:italic 400 .52em Georgia,serif;color:#ddd4f7;margin-top:.8em}#subtitle{position:absolute;bottom:5.5%;left:12%;right:12%;margin:0;text-align:center;font-size:clamp(11px,1.65vw,23px);line-height:1.5;color:#fff;background:#060b18bd;border-radius:5px;padding:8px 16px;text-shadow:0 1px 3px #000;pointer-events:none}#subtitle:empty{display:none}#ending{position:absolute;bottom:20%;width:100%;text-align:center}#controls{position:fixed;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;width:min(700px,94vw);padding:7px 12px;border:1px solid #a697ed25;border-radius:32px;background:#080f21e6;font-size:11px;color:#bac4db;opacity:.3;transition:opacity .2s}#controls:hover,#controls:focus-within{opacity:1}#controls button{padding:6px 9px;border:0;white-space:nowrap;min-height:32px}#seek{width:100%;min-width:40px;accent-color:var(--cyan);cursor:pointer}#time,.total{font-variant-numeric:tabular-nums}#movie:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;display:grid;place-items:center;background:#030711}#movie:fullscreen canvas{width:min(100vw,177.7778vh);height:min(100vh,56.25vw)}@media(max-width:600px){.eyebrow{margin-bottom:10px}.ornament{margin:10px 0;font-size:12px}.dedication{margin-bottom:12px}#play{padding:9px 14px}.hint{margin-top:10px}#subtitle{left:4%;right:4%;bottom:3%;padding:4px 7px;font-size:11px}#titles{top:9%;font-size:20px}#controls{gap:5px}#controls button{padding:6px}.total{display:none}}