@font-face{font-family:Archivo;font-weight:400;font-display:swap;src:url(/zebraheads/assets/archivo-latin-400-normal-C81ewxNO.woff2) format("woff2")}@font-face{font-family:Archivo;font-weight:700;font-display:swap;src:url(/zebraheads/assets/archivo-latin-700-normal-D9cHMWGj.woff2) format("woff2")}@font-face{font-family:Saira;font-weight:700;font-display:swap;src:url(/zebraheads/assets/saira-latin-700-normal-CObqxJsW.woff2) format("woff2")}@font-face{font-family:Saira;font-weight:900;font-display:swap;src:url(/zebraheads/assets/saira-latin-900-normal-B1LtOuIR.woff2) format("woff2")}:root{--brand: #189cd8;--brand-dark: rgb(31, 115, 155);--accent: #64ffd0;--shell: #07202c;--deep: #020f17;--panel: #123e4f;--text: #123e4f;--white: #ffffff;--muted: #8fb3c4;--good: #1fcf6b;--warn: #ff8a1f;--display: "Saira", system-ui, sans-serif;--body: "Archivo", system-ui, sans-serif;--ease: cubic-bezier(.2, .8, .2, 1)}*,*:before,*:after{box-sizing:border-box}*{margin:0}html,body,#root{height:100%}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}body{font-family:var(--body);color:var(--white);background:var(--deep);overflow-x:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;touch-action:manipulation}input{font:inherit;color:inherit}a{color:inherit;text-decoration:none}ul{list-style:none;padding:0}h1,h2,h3,h4{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.02em;line-height:1.05;color:var(--accent);overflow-wrap:anywhere}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.app{min-height:100dvh;display:flex;flex-direction:column;position:relative;background:radial-gradient(120% 60% at 50% 0,var(--shell),var(--deep) 70%);overflow:hidden}.app.playing{height:100dvh;user-select:none;-webkit-user-select:none;touch-action:none}.audio-control{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:8px 16px;background:var(--deep);font-size:.85rem}.audio-control p{flex:1 1 220px;max-width:640px}.app.playing .audio-control{flex:0 0 auto;padding-top:max(8px,env(safe-area-inset-top))}.app.playing .turn{min-height:0}.app.playing .turn>:not(.termwrap){flex-shrink:0}.app.playing .count{min-height:0}.app:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;background:url(/zebraheads/assets/zebra-BiF59o2u.svg) left -20% bottom -5% / auto 70% no-repeat;transform:scaleX(-1);z-index:0}.topbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(12px,env(safe-area-inset-top)) 18px 8px}.topbar img{height:clamp(34px,7vw,52px);width:auto}.tools{display:flex;gap:8px;align-items:center}.chip{min-height:40px;padding:0 14px;border:2px solid rgba(100,255,208,.5);color:var(--accent);font-family:var(--display);font-weight:700;letter-spacing:.06em;display:inline-flex;align-items:center;gap:6px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);background:#020f1780;transition:transform .15s var(--ease),background .2s}.chip:hover{background:#64ffd026}.chip:active{transform:scale(.94)}.chip[aria-pressed=true],.chip.on{background:var(--accent);color:var(--shell)}.screen{position:relative;z-index:2;flex:1;width:100%;max-width:760px;margin:0 auto;padding:14px 20px max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px;animation:enter .55s var(--ease) both}.screen.wide{max-width:980px}@keyframes enter{0%{opacity:0;transform:translate(34px) skew(-4deg)}to{opacity:1;transform:none}}.wipe{position:fixed;inset:0;z-index:50;pointer-events:none;background:repeating-linear-gradient(115deg,var(--deep) 0 38px,var(--accent) 38px 76px);transform:translate(-110%) skew(-12deg);animation:wipe .6s var(--ease) both}@keyframes wipe{0%{transform:translate(-110%) skew(-12deg)}50%{transform:translate(0) skew(-12deg)}to{transform:translate(110%) skew(-12deg)}}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;font-family:var(--display);font-weight:900;font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;text-align:center;clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);background:var(--brand);color:var(--white);transition:transform .15s var(--ease),filter .2s}.btn:hover{filter:brightness(1.12)}.btn:active{transform:scale(.96)}.btn:focus-visible{outline:none;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:3px}.btn.accent{background:var(--accent);color:var(--shell)}.btn.ghost{background:#ffffff1a;color:var(--white)}.btn.good{background:var(--good);color:var(--deep)}.btn.warn{background:var(--warn);color:var(--deep)}.btn.big{min-height:76px;font-size:1.5rem;width:100%}.btn.small{min-height:42px;padding:0 18px;font-size:.95rem}.btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1 1 auto}.stack{display:flex;flex-direction:column;gap:12px}.muted{color:var(--muted)}.center{text-align:center}.fullscreen-control{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.2)}.fullscreen-control p{margin-top:10px;font-size:.95rem}.fullscreen-state{font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:6px 10px;border:1px solid var(--muted);color:var(--muted)}.fullscreen-state[data-active=true]{color:var(--accent);border-color:var(--accent)}.panel{background:#123e4f8c;border-left:6px solid var(--accent);padding:16px 18px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.panel h3{font-size:1.15rem;margin-bottom:8px}.eyebrow{font-family:var(--display);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);font-size:.9rem}.hero-title{font-size:clamp(2rem,11vw,6rem);line-height:.9;color:var(--white);text-shadow:6px 6px 0 var(--brand);white-space:nowrap}.hero-title span{color:var(--accent)}.hash{font-family:var(--display);font-weight:900;color:var(--accent);letter-spacing:.08em}.checker{height:18px;background:conic-gradient(var(--white) 25%,var(--deep) 0 50%,var(--white) 0 75%,var(--deep) 0) 0 0 / 18px 18px;opacity:.85;animation:checker 1.2s linear infinite}@keyframes checker{to{background-position:36px 0}}.pwa{font-size:.85rem;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap}.dot{width:9px;height:9px;border-radius:50%;background:var(--warn);display:inline-block}.dot.ok{background:var(--good)}.seg{display:flex;flex-wrap:wrap;gap:8px}.opt{min-height:46px;padding:0 18px;border:2px solid rgba(255,255,255,.25);font-family:var(--display);font-weight:700;letter-spacing:.05em;text-transform:uppercase;transition:transform .15s,background .2s,color .2s;flex:1 1 auto;text-align:center}.opt:active{transform:scale(.95)}.opt[aria-pressed=true],.opt[aria-checked=true]{background:var(--accent);border-color:var(--accent);color:var(--shell)}.field{width:100%;min-height:50px;background:#020f17b3;border:2px solid rgba(255,255,255,.25);padding:0 14px;font-size:1.05rem;transition:border-color .2s,box-shadow .2s}.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #64ffd040}.field.bad{border-color:var(--warn)}.err{color:var(--warn);font-weight:700}.label{font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.85rem;color:var(--accent);margin-bottom:8px;display:block}.card{background:#07202ccc;border:1px solid rgba(100,255,208,.25);padding:14px;animation:pop .4s var(--ease) both}@keyframes pop{0%{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}.iconbtn{min-width:44px;min-height:50px;border:2px solid rgba(255,255,255,.25);color:var(--white);display:grid;place-items:center;font-weight:700}.iconbtn:hover{border-color:var(--warn);color:var(--warn)}.iconbtn:disabled{opacity:.3}input[type=range]{width:100%;accent-color:var(--accent);height:36px}.skeleton{height:18px;background:linear-gradient(90deg,#ffffff0f,#ffffff2e,#ffffff0f) 0 0 / 200% 100%;animation:sk 1.1s linear infinite}@keyframes sk{to{background-position:-200% 0}}.meter{height:12px;background:#ffffff1f;position:relative;overflow:hidden}.meter i{position:absolute;top:0;bottom:0;width:4px;background:var(--accent);left:50%;transition:transform .08s linear}.tilt-flag{font-family:var(--display);font-weight:900;font-size:1.6rem;min-height:2em}.count{flex:1;display:grid;place-items:center;text-align:center}.count b{font-family:var(--display);font-weight:900;font-size:clamp(9rem,50vw,20rem);color:var(--white);line-height:1;animation:cnt .95s var(--ease) both;text-shadow:10px 10px 0 var(--brand);display:block}.count b.go{color:var(--accent)}@keyframes cnt{0%{transform:scale(2.4);opacity:0}25%{transform:scale(1);opacity:1}85%{opacity:1}to{transform:scale(.85);opacity:0}}.turn{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;min-height:100dvh;padding:max(10px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom));gap:10px}.hud{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-family:var(--display);font-weight:900;text-transform:uppercase}.hud .who{font-size:clamp(1rem,4vw,1.6rem);color:var(--accent)}.hud small{display:block;font-family:var(--body);font-weight:400;color:var(--muted);text-transform:none;font-size:.9rem}.hud .time{font-size:clamp(2.6rem,11vw,4.5rem);line-height:1;text-align:center;color:var(--white);font-variant-numeric:tabular-nums}.hud .sc{font-size:clamp(2.2rem,9vw,3.6rem);line-height:1;text-align:right;color:var(--accent)}.hud .sc.bump{animation:bump .35s var(--ease)}@keyframes bump{40%{transform:scale(1.35)}}.urgent .time{color:var(--warn);animation:urgent 1s ease-in-out infinite}@keyframes urgent{50%{transform:scale(1.14)}}.drain{height:8px;background:#ffffff26;overflow:hidden}.drain i{display:block;height:100%;background:var(--accent);transform-origin:left;animation:drain linear forwards}.urgent .drain i{background:var(--warn)}@keyframes drain{to{transform:scaleX(0)}}.termwrap{flex:1;display:grid;place-items:center;text-align:center;padding:4px;min-height:0}.term{font-family:var(--display);font-weight:900;text-transform:uppercase;color:var(--white);line-height:1;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;animation:termin .28s var(--ease) both;text-shadow:4px 4px 0 var(--brand)}@keyframes termin{0%{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.actions .btn{min-height:clamp(84px,16dvh,150px);font-size:clamp(1.4rem,6vw,2.4rem)}.flash{position:fixed;inset:0;z-index:20;pointer-events:none;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:clamp(3rem,14vw,7rem);color:var(--deep);animation:flash .55s ease-out both;text-transform:uppercase}.flash.correct{background:var(--good)}.flash.pass{background:var(--warn)}@keyframes flash{0%{opacity:.95}to{opacity:0}}.egg{position:fixed;top:22%;left:0;right:0;z-index:21;text-align:center;pointer-events:none;font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,12vw,6rem);color:var(--accent);text-shadow:4px 4px 0 var(--shell);animation:egg 1.4s var(--ease) both}@keyframes egg{0%{transform:translate(-100%) skew(-12deg);opacity:0}20%,70%{transform:none;opacity:1}to{transform:translate(100%) skew(-12deg);opacity:0}}.notice{text-align:center;color:var(--warn);font-weight:700;font-size:.9rem}.big-title{font-size:clamp(2.4rem,11vw,5rem);color:var(--white);text-shadow:5px 5px 0 var(--brand);animation:pop .5s var(--ease) both}.score-num{font-family:var(--display);font-weight:900;font-size:clamp(5rem,28vw,10rem);line-height:.9;color:var(--accent);animation:pop .6s .1s var(--ease) both}.termlist{display:flex;flex-wrap:wrap;gap:6px}.termlist li{padding:4px 10px;font-weight:700;font-size:.95rem}.termlist.ok li{background:#1fcf6b33;border-left:4px solid var(--good)}.termlist.skip li{background:#ff8a1f2e;border-left:4px solid var(--warn)}.lb li{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;padding:12px 14px;margin-bottom:8px;background:#123e4f99;font-family:var(--display);font-weight:900;font-size:1.3rem;text-transform:uppercase;animation:lbin .5s var(--ease) both}.lb li.lead{background:var(--accent);color:var(--shell);transform-origin:left}.lb .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb small{display:block;font-family:var(--body);font-weight:400;text-transform:none;font-size:.8rem;opacity:.75}@keyframes lbin{0%{opacity:0;transform:translate(-40px) skew(8deg)}to{opacity:1;transform:none}}.podium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:8px;min-height:260px}.pod{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;gap:6px}.pod .nm{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1.1rem;overflow-wrap:anywhere}.pod .blk{width:100%;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:2.6rem;background:var(--panel);border-top:6px solid var(--accent);transform-origin:bottom;animation:rise .9s var(--ease) both;background-image:repeating-linear-gradient(115deg,transparent 0 14px,rgba(255,255,255,.07) 14px 28px)}.pod.p1 .blk{background-color:var(--brand);height:190px;animation-delay:.5s}.pod.p2 .blk{height:135px;animation-delay:.3s}.pod.p3 .blk{height:95px;animation-delay:.1s}@keyframes rise{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.confetti{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-40px;width:14px;height:44px;background:var(--white);animation:fall linear infinite}.confetti i:nth-child(3n){background:var(--accent)}.confetti i:nth-child(3n+1){background:var(--brand)}@keyframes fall{to{transform:translateY(115vh) rotate(480deg)}}details.turnrow{background:#123e4f8c;margin-bottom:8px}details.turnrow summary{cursor:pointer;padding:12px 14px;font-family:var(--display);font-weight:900;text-transform:uppercase;display:flex;justify-content:space-between;gap:10px}details.turnrow>div{padding:0 14px 14px;display:grid;gap:10px}.msg{min-height:1.4em;font-weight:700;color:var(--accent)}@media(orientation:landscape)and (max-height:520px){.turn{gap:6px}.actions .btn{min-height:64px}.hud .time{font-size:2.4rem}}@media(min-width:900px){.screen{padding-top:28px}.actions{max-width:900px;margin:0 auto;width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.wipe,.confetti{display:none}}
