:root{font-family:ui-rounded,"Segoe UI",system-ui,sans-serif;color:#233653;background:#eef5ff;font-synthesis:none;--blue:#245bc4;--muted:#576980;--line:#dbe5f1}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 8% 30%,#dceff5 0,transparent 48%),radial-gradient(ellipse at 96% 80%,#e8e5ff 0,transparent 46%),#eef5ff}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #245bc4;outline-offset:4px}button{border:0}svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.app-header{display:flex;align-items:center;justify-content:space-between;width:min(960px,100%);margin:0 auto;padding:24px 28px}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;font-size:15px;line-height:1.3}.brand img{border-radius:11px}.brand small{display:block;font-size:12px;color:var(--muted);margin-top:3px}.header-label{font-size:12px;color:#536983;border:1px solid #d4e2f2;border-radius:30px;padding:8px 12px;background:#ffffff80}main{width:min(600px,100%);margin:auto;flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 24px 38px}.remote{width:100%;background:#fff;border:1px solid #e0e9f4;border-radius:30px;padding:36px;box-shadow:0 20px 65px #2336530a;text-align:center}.screen-mark{display:grid;place-items:center;width:76px;height:76px;border-radius:24px;background:#e7f0ff;color:var(--blue);margin:0 auto 24px;transform:rotate(-5deg)}.screen-mark svg{width:44px;height:44px;transform:rotate(5deg)}.eyebrow{font-size:11px;font-weight:750;letter-spacing:.13em;color:#617793;margin:0 0 12px}h1{font-size:clamp(29px,5vw,38px);line-height:1.15;letter-spacing:-.035em;margin:0;color:#20334f}h1:focus{outline:none}.screen-description{color:var(--muted);font-size:16px;line-height:1.55;margin:14px 0 30px;min-height:25px}form{text-align:left}form label{display:block;font-size:13px;font-weight:650;margin-bottom:10px}#join-code{display:block;width:100%;height:74px;text-align:center;font-size:30px;font-weight:750;letter-spacing:.17em;border:2px solid var(--line);border-radius:16px;background:#f8faff;color:#233653;padding:12px}#join-code::placeholder{color:#8493a8;opacity:1}#join-code:disabled{opacity:1;-webkit-text-fill-color:#8493a8}.primary-button{width:100%;display:flex;align-items:center;justify-content:center;gap:18px;padding:16px 20px;border-radius:15px;background:var(--blue);color:#fff;margin-top:14px;font-weight:700;font-size:17px;min-height:56px}.primary-button:disabled{background:#e3eaf4;color:#617188}.availability{font-size:13px;line-height:1.6;color:var(--muted);margin:15px 0 24px}.privacy{display:flex;gap:8px;align-items:center;justify-content:center;font-size:12px;color:#62748b;border-top:1px solid #edf1f7;padding-top:20px}.privacy svg{width:17px;height:17px;color:#458267}.practice-start{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center;justify-content:center;margin-top:22px;color:var(--muted);font-size:13px}.text-button{background:transparent;color:var(--blue);font-weight:700;padding:12px 4px;min-height:44px}.quiet-button{background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 13px;min-height:44px;color:#30486a;font-size:13px;font-weight:650}.practice-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;font-size:12px;line-height:1.5;color:#526984}.practice-banner strong{color:#245bc4}.practice-banner button{flex-shrink:0}.practice-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:20px}.practice-controls label{font-size:12px;color:var(--muted);width:100%;text-align:center}.practice-controls select{border:1px solid var(--line);border-radius:11px;background:#fff;color:#30486a;padding:10px;min-height:44px;font-size:13px}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.answer{min-height:132px;border-radius:22px;background:var(--tile-bg);color:var(--tile-fg);border:2px solid var(--tile-border);font-size:clamp(25px,6vw,34px);font-weight:750;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 0 var(--tile-border);transition:transform .12s,box-shadow .12s}.answer svg{width:28px;height:28px}.answer:hover{filter:brightness(.98)}.answer:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tile-border)}.answer:nth-child(6n+1){--tile-bg:#e6f2ff;--tile-fg:#2456a4;--tile-border:#c8ddf8}.answer:nth-child(6n+2){--tile-bg:#ffece7;--tile-fg:#a64130;--tile-border:#f7d7cc}.answer:nth-child(6n+3){--tile-bg:#fff3cc;--tile-fg:#846015;--tile-border:#eedda8}.answer:nth-child(6n+4){--tile-bg:#e3f5ed;--tile-fg:#24694d;--tile-border:#bfe5d3}.answer:nth-child(6n+5){--tile-bg:#eee8ff;--tile-fg:#684ba3;--tile-border:#dad0f5}.answer:nth-child(6n+6){--tile-bg:#fce6f0;--tile-fg:#99406b;--tile-border:#efc9db}.state-message{padding:24px 15px;border-radius:18px;background:#f4f7fc;color:#586d88;line-height:1.6;margin:0}.submitted-answer{display:inline-block;font-weight:750;font-size:24px;color:#277055;background:#e6f5ed;border:1px solid #cbe7d7;padding:14px 28px;border-radius:16px;margin:0 0 20px}.remote[data-state=submitted] .screen-mark{color:#277055;background:#e6f5ed}.remote[data-state=waiting] .screen-mark{animation:breathe 2s ease-in-out infinite}.remote[data-state=closed] .screen-mark{background:#fff2d8;color:#926526}.status-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;width:min(960px,100%);margin:0 auto;padding:16px 28px max(22px,env(safe-area-inset-bottom));color:#677991;font-size:11px}footer a{text-underline-offset:3px}@keyframes breathe{50%{transform:rotate(-5deg) scale(1.05)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}@media(max-width:480px){.app-header{padding:18px 20px}.header-label{display:none}main{padding:16px 16px 26px}.remote{padding:28px 22px;border-radius:25px}.screen-mark{width:64px;height:64px;margin-bottom:20px}.screen-description{font-size:15px}.answer{min-height:116px}.choices{gap:12px}.practice-banner{flex-wrap:wrap}footer{justify-content:center;text-align:center;padding:14px 20px}footer span{width:100%}}@media(max-height:650px) and (min-width:600px){main{padding-top:8px}.remote{padding:24px}.screen-mark{width:50px;height:50px;margin-bottom:12px}.screen-mark svg{width:32px;height:32px}.screen-description{margin-bottom:18px}.answer{min-height:92px}}

.remote[data-state]:not([data-state=join]){padding:26px}.remote[data-state]:not([data-state=join]) .eyebrow{display:none}.remote[data-state]:not([data-state=join]) .screen-mark{width:48px;height:48px;margin-bottom:16px;border-radius:16px}.remote[data-state]:not([data-state=join]) .screen-mark svg{width:30px;height:30px}.remote[data-state]:not([data-state=join]) .screen-description{margin:12px 0 24px}.remote[data-state=open] .answer{min-height:110px}@media(max-width:480px){.remote[data-state]:not([data-state=join]){padding:24px 20px}.remote[data-state=open] .answer{min-height:94px}}