:root{color-scheme:dark;background:#070e1b;color:#e0eef6;font:14px/1.5 'Segoe UI',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}main{height:100dvh;display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 23px;border-bottom:1px solid #a2c9d61e;font-size:11px;letter-spacing:.17em}header span{display:block;color:#86aabb;font-size:10px;letter-spacing:.04em}nav{display:flex;gap:8px;align-items:center}button,a{font:inherit;color:#c9dfe8;border:1px solid #a3d3e535;border-radius:30px;background:#0e202e;padding:8px 13px;cursor:pointer;text-decoration:none;touch-action:manipulation}button:hover,a:hover{border-color:#c3e6dd80}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #ffdd9e;outline-offset:3px}canvas:focus-visible{outline-offset:-4px}#pool{flex:1;min-height:220px;position:relative;overflow:hidden}canvas{height:100%;width:100%;display:block;touch-action:none}#notice{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:90%;margin:0;text-align:center;pointer-events:none;color:#ffdf9a;font-size:14px;text-shadow:0 2px 12px #000}#progress{position:absolute;left:21px;bottom:14px;font-size:11px;color:#a7c7d8;pointer-events:none}#meter{position:absolute;bottom:19px;left:50%;transform:translateX(-50%);width:100px;height:4px;border-radius:9px;background:#a6cddd20;pointer-events:none;overflow:hidden}#meter i{display:block;height:100%;width:0;background:#a6e9e1}footer{padding:12px 24px 15px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid #a2c9d61e;background:#080f1c}h1{font-weight:400;font-size:22px;line-height:1.2;margin:0}footer p{font-size:12px;color:#9fbfce;margin:5px 0 0}.keys{font-size:10px;color:#779bad}dialog{color:inherit;background:linear-gradient(145deg,#162c37f5,#091522fa);border:1px solid #a9d6cf55;border-radius:23px;width:min(470px,calc(100vw - 30px));padding:30px;box-shadow:0 20px 100px #0009}dialog::backdrop{background:#04091370;backdrop-filter:blur(3px)}dialog h2{font-weight:400;font-size:30px;line-height:1.2}dialog p{color:#aecbd8;font-size:14px;line-height:1.7}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:10px!important;color:#ffdd9e!important}#begin{background:#c1ebda;color:#152a2b;padding:11px 21px}#motion[aria-pressed=true]{color:#ffdd9e}@media(max-width:600px){header{padding:11px 13px;align-items:flex-start}nav{flex-wrap:wrap;justify-content:flex-end;max-width:225px;gap:5px}nav button,nav a{font-size:10px;padding:6px 9px}header span{max-width:92px}footer{padding:10px 14px;gap:10px}h1{font-size:18px}footer p{font-size:11px}.keys{font-size:9px}#restart{font-size:11px;padding:8px 10px}}@media(max-height:520px){header{padding:7px 15px}footer{padding:7px 15px}h1{font-size:17px}.keys{display:none}dialog{padding:18px;max-height:90dvh;overflow:auto}dialog h2{font-size:24px}}