@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";:root{font-family:DM Sans,sans-serif;color:#fff9e9;background:#a9ceca;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{position:fixed;top:0;right:0;bottom:0;left:0;display:block}#app{position:relative;height:100svh;pointer-events:none;background:linear-gradient(90deg,rgba(9,40,40,.4),transparent 57%)}body.running #app{background:linear-gradient(180deg,rgba(9,40,40,.25),transparent 24%)}header{display:flex;align-items:center;justify-content:space-between;padding:28px 38px;gap:20px}.brand{display:flex;gap:11px;align-items:center;font-size:13px;font-weight:800;letter-spacing:.19em;color:inherit;text-decoration:none;pointer-events:auto}.brand small{display:block;font-size:8px;letter-spacing:.34em;margin-top:6px;font-weight:500}.brand-icon{font-size:37px;font-weight:400;line-height:1}.metrics{display:flex;gap:32px;text-align:center}.metrics small{display:block;font-size:8px;letter-spacing:.2em;opacity:.8;margin-bottom:6px}.metrics b{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}.metrics div:last-child b{color:#ffd489}.tools{display:flex;gap:8px}button{pointer-events:auto;cursor:pointer;color:inherit;font-family:inherit;border:1px solid #fff4;background:#143b3c45;padding:11px 13px;border-radius:5px;font-size:9px;letter-spacing:.08em;touch-action:none}button:hover{background:#fff2}button:focus-visible{outline:3px solid #ffc978;outline-offset:4px}button:disabled{opacity:.6;cursor:wait}.course{position:absolute;right:38px;top:120px;text-align:right;font-size:8px;letter-spacing:.16em}.course-track{display:flex;gap:6px;margin:12px 0}.course-track i{width:17px;height:4px;background:#fff5}.course-track i.up{background:#ed897c}.course-track i.pass{background:#b1f0a0}.course-track i.miss{background:#ff573b}.course-track i.next{box-shadow:0 0 0 2px #fff}.panel{position:absolute;top:23%;left:7%;max-width:500px}.eyebrow{font-size:9px;letter-spacing:.24em;font-weight:700;display:flex;align-items:center;gap:9px}.eyebrow i,footer i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#f7c66d}.panel h1{font:500 clamp(50px,6.4vw,94px)/.99 "Manrope",sans-serif;letter-spacing:-.065em;margin:25px 0 23px}.panel h1 em{font-family:Georgia,serif;font-weight:400;color:#ffd385;letter-spacing:-.055em}.panel p{font-size:13px;line-height:1.8;color:#edf1e7}.primary{display:flex;align-items:center;justify-content:space-between;gap:45px;padding:16px 22px;margin-top:27px;background:#f8cd7e;color:#193c3d;font-size:11px;font-weight:800;border:0;border-radius:4px;letter-spacing:.1em;min-width:210px;box-shadow:0 7px 28px #163f3420}.primary:hover{background:#ffe2a3}.primary span{font-size:21px;font-weight:400}.instructions{display:grid;gap:10px;font-size:10px;margin-top:25px;color:#e9eee3}.instructions span{display:flex;align-items:center;gap:6px}kbd{font:9px inherit;min-width:19px;text-align:center;border:1px solid #fff6;border-radius:3px;padding:3px 5px;margin-left:4px}.gate-guide{display:flex;gap:18px;margin-top:18px;font-size:9px;color:#d7e7df}.gate-guide i{display:inline-block;width:5px;height:12px;vertical-align:middle;margin-right:5px}.green{background:#99e7b0}.red{background:#ff9680}footer{position:absolute;bottom:23px;left:38px;right:38px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.13em}footer i{margin-right:7px;width:4px;height:4px}#feedback{position:absolute;top:24%;left:50%;transform:translate(-50%);font-size:18px;font-weight:600;text-shadow:0 2px 15px #123;transition:opacity .3s;text-align:center}#next-gate{position:absolute;bottom:70px;left:50%;transform:translate(-50%);background:#103d40b8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #fff3;padding:13px 24px;border-radius:30px;font-size:11px;letter-spacing:.07em;text-align:center;white-space:nowrap}.pause-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#143b3df2;border:1px solid #fff4;border-radius:12px;padding:35px;pointer-events:auto}.pause-panel h2{font-size:32px;margin:0}.pause-panel #reset-run{margin-top:15px}#splash{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;background:radial-gradient(ellipse at 20% 85%,#d5ffffaa,transparent 26%),radial-gradient(ellipse at 83% 68%,#dbffff88,transparent 22%);transition:opacity .1s}#touch{display:none;position:absolute;bottom:60px;left:15px;right:15px;gap:9px;justify-content:center}#touch button{height:52px;min-width:48px;background:#19474dc9;border:1px solid #fff7;font-weight:700}#touch button.active{background:#e8bf78;color:#123}.hidden{display:none!important}@media (pointer:coarse){body.running #touch{display:flex}body.running #next-gate{bottom:127px}}@media (max-width:700px){header{padding:18px;flex-wrap:wrap;gap:15px}.brand{font-size:10px}.brand-icon{font-size:29px}.brand small{font-size:6px}.metrics{gap:18px}.metrics b{font-size:17px}.metrics small{font-size:7px}.tools{position:absolute;right:18px;top:78px}.tools button{font-size:7px;padding:9px}.course{display:none}.panel{left:8%;top:23%;right:5%}.panel h1{font-size:clamp(48px,10vw,70px);margin:18px 0}.panel p{font-size:12px}.instructions{margin-top:18px}.primary{margin-top:19px}.gate-guide{gap:12px}footer{left:18px;right:18px;bottom:20px;font-size:6px}footer span:first-child{display:none}#next-gate{font-size:9px;padding:12px 16px}#feedback{top:23%;font-size:14px;width:80%}}@media (max-height:650px){.panel{top:20%}.panel h1{font-size:49px;margin:15px 0}.panel p{line-height:1.5}.instructions{margin-top:15px;gap:5px}.gate-guide{margin-top:12px}.primary{margin-top:15px;padding:12px 20px}footer{bottom:12px}}@media (min-width:701px){.panel{top:22%;max-width:560px}.panel h1{font-size:clamp(50px,5.5vw,80px)}.panel h1 em{white-space:nowrap}.panel p{margin-top:20px}}@media (max-width:450px){.tools{top:111px}.panel{top:24%}.panel h1{font-size:48px}header .metrics{width:100%;justify-content:flex-start;gap:25px}header .metrics div{text-align:left}}#feedback.contact{color:#ffda8b;font-size:23px;background:#4d251cbf;border:1px solid #ffc57890;border-radius:8px;padding:15px 25px;box-shadow:0 0 45px #ffb45130}.penalty-hit{animation:penalty-hit .7s ease-out}@keyframes penalty-hit{0%,35%{color:#fff;transform:scale(1.7);text-shadow:0 0 20px #ff9b34}to{transform:scale(1)}}#splash{background:radial-gradient(ellipse 12px 24px at 14% 37%,#e3ffff44 30%,#b1e7ec66 55%,transparent 70%),radial-gradient(ellipse 8px 15px at 81% 28%,#e3ffff55 30%,#b1e7ec77 55%,transparent 70%),radial-gradient(ellipse 16px 32px at 90% 68%,#e3ffff44 30%,#b1e7ec66 55%,transparent 70%),radial-gradient(ellipse 9px 20px at 25% 76%,#e3ffff66 30%,#b1e7ec88 55%,transparent 70%),radial-gradient(ellipse at 10% 95%,#d5ffffbb,transparent 25%),radial-gradient(ellipse at 94% 80%,#dbffffaa,transparent 24%);-webkit-backdrop-filter:blur(.2px);backdrop-filter:blur(.2px)}@media (max-width:700px){#feedback.contact{font-size:15px;padding:12px 15px}}