*{box-sizing:border-box}html,body,main{margin:0;width:100%;height:100%;overflow:hidden}body{background:#eee9dd;color:#262b3d;font-family:Arial,'Hiragino Kaku Gothic ProN',sans-serif}canvas{display:block;width:100%;height:100%}header{position:absolute;top:34px;left:42px;right:42px;display:flex;align-items:start;justify-content:space-between}a{color:inherit;text-decoration:none;font:10px monospace;letter-spacing:1.4px}a span{margin-left:20px}.wordmark{font-size:16px;letter-spacing:3px;font-weight:700}.wordmark i{font-weight:400;color:#9c9c9a;padding:0 6px}.edition{text-align:right;font:9px/1.8 monospace;color:#6f7380;letter-spacing:1px}.overline{position:absolute;top:22%;width:100%;text-align:center;font:10px monospace;letter-spacing:3px;color:#777780;pointer-events:none}.word-sequence{position:absolute;top:75%;display:flex;justify-content:center;gap:23px;width:100%;font:10px monospace;letter-spacing:2px;pointer-events:none}.word-sequence span{color:#929196;transition:color .6s}.word-sequence span.active{color:#2a33ad}.word-sequence b{font-weight:400;color:#b1ada9}footer{position:absolute;bottom:33px;left:42px;right:42px;display:flex;align-items:end;justify-content:space-between;gap:20px}.eyebrow{font:9px monospace;letter-spacing:1.7px;color:#db4b30;margin-bottom:14px}h1{font-size:24px;line-height:1.55;font-weight:400;letter-spacing:2px;margin:0}footer p{font-size:10px;color:#797b80;letter-spacing:1px;margin:12px 0 0}.controls{display:flex;gap:8px}button{font:10px Arial,sans-serif;letter-spacing:.5px;color:#41485a;border:1px solid #afb0b360;border-radius:30px;padding:12px 17px;background:#eee9dd70;cursor:pointer;backdrop-filter:blur(8px)}button:hover{color:#f5efe4;background:#293aca;border-color:#293aca}button:focus-visible,a:focus-visible{outline:2px solid #3240cc;outline-offset:4px}.time{display:flex;justify-content:space-between;margin-top:18px;font:9px monospace;letter-spacing:1px;color:#88858a}.track{position:absolute;bottom:0;left:0;right:0;height:3px;background:#242e6410}#progress{height:100%;background:#dd4d32;width:0}#loading{position:absolute;inset:0;display:grid;place-content:center;background:#eee9dd;font:11px monospace;letter-spacing:3px;transition:opacity .5s;pointer-events:none}#loading.done{opacity:0}#loading.error{padding:35px;font-family:Arial,sans-serif;letter-spacing:1px;line-height:2}@media(max-width:650px){header{top:24px;left:23px;right:23px}header a{font-size:8px;letter-spacing:.5px}header a span{margin-left:5px}.wordmark{font-size:12px;letter-spacing:1.5px}.edition{display:none}.overline{top:29%;font-size:8px;letter-spacing:2px}.word-sequence{top:64%;gap:14px;font-size:8px;letter-spacing:1px}footer{bottom:25px;left:23px;right:23px;display:block}h1{font-size:19px;line-height:1.5}.eyebrow{font-size:8px;margin-bottom:10px}footer p{display:none}.playback{margin-top:20px}.controls{justify-content:space-between}button{padding:11px 12px;flex:1;font-size:9px}.time{margin-top:12px;font-size:8px}}@media(max-height:580px) and (min-width:651px){h1{font-size:16px}footer p{display:none}.overline{top:19%}header{top:20px}footer{bottom:20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}