:root{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color-scheme:dark;background:#090a0c;color:#f7f7f8}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#090a0c;overflow-x:hidden}button,input{font:inherit}
.page{width:min(1400px,100%);margin:0 auto;padding:0 clamp(14px,3.2vw,48px) 55px}
.top{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 0;border-bottom:1px solid #292b30}
.top a{color:inherit;text-decoration:none}.brand{font-weight:750;font-size:14px;letter-spacing:-.02em}.brand span{color:#a2a6b2;font-weight:400}.back{font:600 10px/1.4 ui-monospace,monospace;letter-spacing:.09em;color:#c4c6d0!important}
.back:hover{text-decoration:underline}
.intro{padding:clamp(30px,5vw,67px) 0 clamp(22px,3vw,41px)}
.kicker,.index{font:600 10px/1.3 ui-monospace,SFMono-Regular,monospace;letter-spacing:.135em;color:#9297a5}
.intro h1{font-size:clamp(37px,6.1vw,78px);font-weight:550;letter-spacing:-.074em;line-height:1.05;margin:13px 0 17px}
.intro h1 em{font-style:normal;color:#a0a4ba}
.intro p{color:#a5a8b2;max-width:710px;font-size:clamp(13px,1.3vw,16px);line-height:1.75;margin:0}
.catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px}
.specimen{border:1px solid #2a2b31;border-radius:10px;background:#111216;overflow:hidden;min-width:0}
.specimen-head{height:82px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 13px}
.specimen-head h2{font-size:19px;letter-spacing:-.045em;margin:6px 0 0;font-weight:550}
.play-hint{font:500 9px ui-monospace,monospace;letter-spacing:.07em;color:#7e8390;text-align:right}
.viewport{position:relative;overflow:hidden;background:#050608;isolation:isolate}
.viewport canvas{display:block;width:100%;height:auto;aspect-ratio:720/520;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.viewport canvas.grabbing{cursor:grabbing}
.viewport canvas:focus-visible{outline:2px solid #bdbaff;outline-offset:-3px}
.round-hud{position:absolute;top:10px;left:50%;transform:translateX(-50%);min-width:120px;display:flex;justify-content:space-between;font-size:14px;font-variant-numeric:tabular-nums;pointer-events:none;color:#fff;z-index:3}
.round-hud[hidden],.goal-line[hidden],.result[hidden]{display:none}
.goal-line{position:absolute;top:5px;left:50%;width:25%;height:2px;background:#fff;transform:translateX(-50%);box-shadow:0 0 15px #fff8;pointer-events:none;z-index:2}
.specimen-foot{min-height:59px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.specimen-foot>span{font-size:12px;color:#8b909d}
.specimen-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
button{border:1px solid #42444d;background:transparent;color:#e6e7eb;border-radius:5px;font-size:11px;padding:8px 10px;cursor:pointer;transition:border-color .2s,background .2s}
button:hover{border-color:#e5e5e7;background:#23242d}button:focus-visible{outline:2px solid #e5e5e7;outline-offset:2px}
button[data-challenge]{background:#f2f2f2;border-color:#f2f2f2;color:#09090b}
button[data-challenge]:hover{background:#d0cfe1}
button[aria-pressed=true]{border-color:#cfccff;color:#cfccff}
.settings{border-top:1px solid #25262d;font-size:11px;color:#9d9fab}.settings summary{cursor:pointer;padding:11px 17px;letter-spacing:.02em}
.settings summary:hover{color:#fff}.settings-inner{padding:8px 17px 18px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.settings label{display:grid;grid-template-columns:1fr auto;gap:8px;color:#b8bbc7}
.settings output{font-variant-numeric:tabular-nums;color:#fff}.settings input[type=range]{grid-column:1 / -1;width:100%;accent-color:#ccc8ff}
.result{position:absolute;z-index:5;inset:0;background:#050608f2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.result h3{font-weight:500;font-size:clamp(25px,3vw,43px);margin:0;letter-spacing:-.06em}
.result p{font-size:13px;color:#aeb2bf;margin:2px 0 24px}
.leader-label{font:700 11px/1.2 ui-monospace,monospace;color:#f0f0f0;letter-spacing:.12em}
.result ol{list-style:none;margin:10px auto 18px;padding:0;max-height:86px;overflow:auto;font-size:12px;min-width:150px}
.result li{display:flex;justify-content:space-between;padding:3px 0;gap:30px;color:#dedfe6}
.result li span:last-child{font-variant-numeric:tabular-nums}
.result form label{display:block;color:#c5c8d2;font-size:11px;margin-bottom:9px}
.name-line{display:flex;gap:6px;justify-content:center}
.name-line input{width:75px;background:#15161c;border:1px solid #444650;border-radius:5px;padding:8px;text-align:center;font:600 16px ui-monospace,monospace;text-transform:uppercase;color:white}
.result-actions{display:flex;gap:9px;margin-top:17px}.result-actions button{min-width:85px}
footer{padding:23px 0 0;color:#9699a4;font-size:12px;line-height:1.8;display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap}footer strong{font-weight:600;color:#f2f2f2}footer a{color:#d7d1ff}
@media(max-width:870px){.catalog{grid-template-columns:1fr}.specimen{max-width:770px;width:100%;margin-inline:auto}}
@media(max-width:480px){.specimen-head{height:70px;padding:12px}.play-hint{font-size:8px}.specimen-foot{align-items:flex-start;flex-direction:column;padding:12px;gap:10px}.specimen-actions{justify-content:flex-start}.intro h1{letter-spacing:-.05em}.settings-inner{grid-template-columns:1fr}.viewport canvas{aspect-ratio:720/520}.top{padding:15px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}