*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:#f1f2ed;color:#233d35;font:15px/1.6 "Segoe UI",Arial,sans-serif}#app{forced-color-adjust:none;max-width:1280px;margin:auto;background:#fff}header{display:flex;justify-content:space-between;padding:24px 34px;color:#647e73;font-size:10px;letter-spacing:2.4px;border-bottom:1px solid #e4eae4}.intro{text-align:center;padding:28px 24px 8px}.eyebrow{letter-spacing:3px;color:#849588;font-size:10px}h1{font:normal clamp(25px,3.5vw,40px)/1.2 Georgia,serif;margin:10px 0 15px}.intro>p:last-child{font-size:13px;color:#6d7e75;max-width:610px;margin:0 auto}#visual{position:relative;background:white;display:flex;justify-content:center;align-items:center;overflow:hidden;min-height:260px}canvas{display:block;width:100%;max-width:800px;height:auto;aspect-ratio:4/3}#cover{position:absolute;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.dot{width:15px;height:15px;background:#386351;border-radius:50%;box-shadow:0 0 0 18px #edf3ee,0 0 0 45px #f7f9f5;margin:35px}.dot+p{font:26px Georgia,serif;margin:28px 0 8px}small{color:#819086}#panel{border-top:1px solid #e0e8df;background:#f8faf5;padding:24px 34px}.progress-row{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#6e8275}#sceneName{font-weight:600;color:#3e6552}time{white-space:nowrap}input{accent-color:#3c7257}#seek{width:100%;margin:12px 0 22px;cursor:pointer}.toolbar{display:flex;flex-wrap:wrap;gap:10px}button{font:inherit;cursor:pointer;border-radius:25px;padding:10px 22px;border:1px solid #c8d7c9;color:#3a5a46;background:#ffffff80}button:hover{background:#e8efe5}button:focus-visible,input:focus-visible{outline:2px solid #599b77;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}#start{background:#315c45;color:#fff;border-color:#315c45;min-width:115px}.settings{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:22px;font-size:13px}.settings label{display:flex;align-items:center;gap:7px}#volume{width:110px}#status{font-size:12px;color:#3c6c50;margin:18px 0 5px}.note{font-size:12px;color:#849083;max-width:830px;margin:0}footer{text-align:center;padding:18px;color:#8c998b;font-size:10px;letter-spacing:1px}#restore{position:absolute;top:16px;right:16px;z-index:3;background:#ffffffd9;font-size:12px;padding:8px 15px}[hidden]{display:none!important}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.compact header,.compact .intro,.compact #panel,.compact footer{display:none}.compact #visual{height:100vh}.compact canvas{width:auto;height:auto;max-width:100%;max-height:100vh;aspect-ratio:4/3}#app:fullscreen{max-width:none;width:100%;overflow:auto}#app:fullscreen.compact{overflow:hidden}@media(max-width:600px){header{padding:17px;font-size:8px;letter-spacing:1.4px}.intro{padding:22px 17px 8px}.intro>p:last-child{font-size:12px}#panel{padding:20px 17px}.toolbar{gap:8px}button{padding:10px 14px;font-size:13px}.settings{gap:16px}.progress-row{font-size:11px}.dot+p{font-size:22px}}