*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#0a0e1c;color:#eee8d8;font:15px/1.55 Segoe UI,Arial,sans-serif}#app{--color:#ff586e;max-width:1600px;margin:auto;forced-color-adjust:none}#scene{height:760px;height:clamp(590px,80vh,850px);position:relative;overflow:hidden;background:#080b16}canvas{position:absolute;inset:0;width:100%;height:100%}header{position:absolute;top:24px;left:30px;right:30px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:3px;color:#c6b58d}.heading{position:absolute;top:62px;left:15%;right:15%;text-align:center;pointer-events:none}#stage{font-size:10px;letter-spacing:2px;color:#cbbda8}h1{font:normal 40px/1.1 Georgia,serif;margin:12px 0}#hint{font-size:12px;color:#b4b4c2;margin:0}#rail{position:absolute;bottom:46px;left:15%;right:15%;display:flex;justify-content:center;gap:24px}#rail button{width:34px;height:34px;border-radius:50%;padding:0;background:radial-gradient(circle at 35% 28%,#ffffffcc,var(--c) 52%,#16172d);border:1px solid #ffffff55;box-shadow:0 0 15px color-mix(in srgb,var(--c) 30%,transparent);position:relative}#rail button[aria-pressed=true]{outline:1px solid #ffe0a2;outline-offset:5px;box-shadow:0 0 25px color-mix(in srgb,var(--c) 70%,transparent)}#rail button span{position:absolute;bottom:-19px;left:0;right:0;font-size:9px;color:#c9bcc4}footer{position:absolute;bottom:13px;left:25px;right:25px;display:flex;justify-content:space-between;font-size:10px;color:#c4b7ac;gap:20px}.progress{position:absolute;bottom:0;height:2px;background:#ffffff12;width:100%}.progress i{display:block;background:var(--color);width:0;height:100%}button,input{font:inherit}button{border:1px solid #ffffff29;background:#ffffff05;color:inherit;border-radius:25px;padding:10px 20px;cursor:pointer}button:hover{background:#ffffff15}button:focus-visible,input:focus-visible{outline:2px solid #ffe0a2;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}#panel{padding:25px 30px;background:#111726;border-top:1px solid #e3c58a25}.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.modes button{border-radius:13px;text-align:left;padding:15px 20px}.modes strong{display:block;font-size:17px;font-weight:500}.modes span{display:block;font-size:12px;color:#9ca6b5;margin-top:3px}.modes .selected{border-color:#c5a575;background:#c5a57512}.toolbar{display:flex;gap:10px;flex-wrap:wrap}#start{background:#e7cf9f;color:#1a2232;border-color:#e7cf9f;min-width:110px}.settings{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:20px;font-size:13px;color:#c1c5ce}.settings label{display:flex;gap:7px;align-items:center}input{accent-color:#e7cf9f}input[type=range]{width:125px}#description{font-size:12px;color:#919bab;max-width:850px;margin:20px 0 0}#restore{position:absolute;right:18px;top:18px;background:#101828bb;font-size:12px;z-index:3}[hidden]{display:none!important}.compact #panel,.compact header,.compact .heading,.compact footer,.compact #rail,.compact .progress{display:none}.compact #scene{height:100vh;min-height:400px}#app:fullscreen{width:100%;max-width:none;overflow:auto;background:#0a0e1c}#app:fullscreen.compact{overflow:hidden}#app:fullscreen:not(.compact) #scene{height:70vh;min-height:490px}@media(max-width:600px){#scene{height:640px;min-height:640px}header{font-size:8px;left:20px;right:20px}.heading{left:20px;right:20px;top:65px}h1{font-size:32px}#stage{font-size:8px}#hint{font-size:11px;max-width:290px;margin:auto}#rail{gap:13px;left:10px;right:10px}#rail button{width:28px;height:28px}#panel{padding:17px}.modes{gap:8px}.modes button{padding:12px}.modes strong{font-size:15px}.modes span{font-size:11px}.toolbar{gap:7px}.toolbar button{font-size:13px;padding:10px 13px}.settings{gap:16px}footer{left:15px;right:15px;font-size:9px}.compact #scene{min-height:400px}}