:root{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;color:#282331;background:#e9e2f8;font-synthesis:none;--primary:#8741e8;--muted:#8b8297}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 12% 4%,#d8f4ff,transparent 45%),radial-gradient(ellipse at 90% 90%,#f1dfff,transparent 50%),#ece7f5}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #1abcfe;outline-offset:4px}a{color:inherit;text-decoration:none}.app-shell{width:min(100%,920px);height:min(900px,calc(100dvh - 48px));min-height:620px;background:#fcfbfe;border-radius:32px;box-shadow:0 28px 90px #45316922,0 0 0 1px #ffffffaa;display:flex;flex-direction:column;overflow:hidden;position:relative}.grabber{width:34px;height:4px;background:#e0d9e9;border-radius:9px;position:absolute;top:10px;left:calc(50% - 17px)}header{height:65px;padding:10px 28px 0;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-size:18px;font-weight:760;letter-spacing:-.7px}.brand-plus{color:#bcb2c8;font-weight:400}.brand-dot{display:inline-block;background:#0acf83;width:6px;height:6px;border-radius:50%;margin-left:4px}.header-note{font-size:9px;letter-spacing:1.5px;color:#a298af}.quiet{border:0;background:none;color:var(--primary);font-size:13px;padding:8px 0}#how{height:28px;width:28px;border:1px solid #e0d9e9;border-radius:50%;font-weight:650;padding:0;color:#8b8297}main{display:flex;flex-direction:column;min-height:0;flex:1;padding:0 28px}#draw-screen{display:flex;flex-direction:column;flex:1;min-height:0}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 20px}.eyebrow{font-size:9px;letter-spacing:1.5px;font-weight:700;color:var(--muted);margin:0 0 10px}h1{font-size:36px;line-height:1.05;letter-spacing:-1.5px;margin:0;font-weight:730}h1 span{color:var(--primary)}.opponent{display:flex;align-items:center;gap:6px;max-width:300px}.opponent img{width:110px;height:110px;object-fit:contain;mix-blend-mode:multiply}.overline{font-size:8px;letter-spacing:1px;color:var(--muted);font-weight:650}h2{font-size:20px;margin:5px 0;letter-spacing:-.6px}.opponent p{font-size:11px;color:var(--muted);margin:0}.studio{background:#fff;border:1px solid #e9e3f0;border-radius:20px;display:flex;flex-direction:column;flex:1;min-height:190px;overflow:hidden}.canvas-top{display:flex;justify-content:space-between;padding:16px 20px;font-size:9px;letter-spacing:1.3px;color:#aba2b5;flex-shrink:0}#stroke-status{font-size:10px;letter-spacing:0}.paper{position:relative;flex:1;min-height:0;margin:0 10px;background:radial-gradient(#dfd8e94d 1px,transparent 1px);background-size:20px 20px}#drawing{width:100%;height:100%;position:absolute;inset:0;display:block;touch-action:none;cursor:crosshair}#hint{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;text-align:center;color:#b7acbf;padding:20px}.hint-pencil{font-size:44px;color:#c9b6e6;transform:rotate(-12deg)}#hint p{font-size:17px;letter-spacing:-.4px;margin:13px 0 7px}#hint>span:last-child{font-size:12px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px;flex-shrink:0;border-top:1px solid #f5f1fa}#palette{display:flex;gap:13px}.color{width:29px;height:29px;border-radius:50%;background:var(--color);border:4px solid #fff;padding:0;box-shadow:0 0 0 2px transparent}.color[aria-pressed=true]{box-shadow:0 0 0 2px var(--color)}.tools{display:flex;gap:20px}.tool{border:0;background:none;color:#8b8297;font-size:23px;padding:0;display:flex;align-items:center;gap:6px}.tool span{font-size:11px}.draw-bottom{padding:17px 0 0;display:flex;align-items:center;justify-content:space-between;gap:16px}.draw-bottom label{display:block;font-size:8px;letter-spacing:1px;color:var(--muted);margin-bottom:4px}input{width:200px;border:0;background:transparent;color:#382b49;padding:5px 0;font-size:15px}.ready{display:flex;align-items:center;gap:16px}#message{font-size:10px;color:var(--muted);max-width:155px}.primary{background:var(--primary);color:#fff;border:0;border-radius:14px;min-height:48px;padding:14px 23px;font-size:14px;font-weight:650;display:inline-flex;justify-content:center;align-items:center;gap:20px;box-shadow:0 4px 12px #8741e824}.primary:hover{background:#7934d7}.secondary{background:#eee7f7;border:0;color:#7835c9;border-radius:12px;padding:13px 18px;font-size:13px}.sample{font-size:11px;align-self:flex-start;margin:3px 0 0}footer{padding:12px 0 16px;font-size:8px;letter-spacing:1px;color:#b1a5bd;display:flex;justify-content:space-between;flex-shrink:0}footer span:last-child{letter-spacing:0}#help{font-size:12px;line-height:1.6;padding:12px 0;flex-shrink:0}.in-race main{padding:0}.in-race header{border-bottom:1px solid #efe9f7}.in-race footer{display:none}#race-screen{display:flex;flex-direction:column;flex:1;min-height:0;position:relative;background:#f5f3fb}.race-nav{padding:14px 25px 0;display:flex;align-items:center;justify-content:space-between;z-index:1}.pill{font-size:9px;letter-spacing:1px;color:var(--muted)}.race-heading{text-align:center;padding:7px 20px 12px;z-index:1}.race-heading .eyebrow{color:#9b83b7;font-size:8px;margin:0 0 8px}.race-heading h1{font-size:25px;letter-spacing:-.9px}.race-heading h1 br{display:none}.scoreboard{display:flex;justify-content:center;align-items:center;gap:22px;margin:0 20px;z-index:1}.scoreboard>div{display:flex;align-items:center;gap:7px;min-width:120px;font-size:12px}.scoreboard b{font-weight:600;max-width:170px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.scoreboard>div>span:last-child{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.player-dot{width:6px;height:6px;border-radius:50%;display:inline-block}.blue{background:#9747ff}.orange{background:#1abcfe}.versus{font-size:9px;color:#b1a3c1}.race-stage{position:relative;flex:1;min-height:220px;overflow:hidden}#track{display:block;width:100%;height:100%;position:absolute;inset:0}.camera-label{position:absolute;bottom:15px;left:25px;z-index:1;letter-spacing:1.5px;font-size:8px;color:#a18db5;display:flex;gap:7px;align-items:center}.camera-label span{width:5px;height:5px;background:#f24e1e;border-radius:50%}#countdown{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;font-size:100px;font-weight:750;letter-spacing:-5px;color:#9747ff;text-shadow:0 3px 25px #f5f3fb}#race-actions{text-align:center;position:absolute;bottom:28px;left:0;right:0}#race-actions p{font-size:10px;color:var(--muted);margin:10px 0 0}#results{position:absolute;bottom:16px;left:16px;right:16px;background:#ffffffed;border:1px solid #e6dcf1;padding:20px;border-radius:22px;box-shadow:0 10px 50px #40226413;text-align:center;z-index:3;max-height:65%;overflow:auto}#results h2{font-size:23px;margin:0}#result-copy{font-size:12px;line-height:1.5;color:var(--muted);margin:8px 0}ol{list-style:none;padding:0;display:flex;justify-content:center;gap:22px;margin:14px 0}li{display:flex;gap:10px;font-size:12px}li span{color:var(--muted)}.result-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.result-actions .primary{min-height:42px;padding:12px 20px;font-size:13px}@media(max-width:600px){body{padding:12px 0 0;background:#dcd0ee}.app-shell{width:100%;height:calc(100dvh - 12px);min-height:0;border-radius:26px 26px 0 0}header{height:59px;padding:10px 20px 0}.header-note{display:none}.brand{font-size:17px}main{padding:0 18px}.page-heading{padding:12px 0 15px}h1{font-size:31px;letter-spacing:-1.2px}.eyebrow{font-size:8px;letter-spacing:1px}.opponent{flex-direction:column;gap:0;width:95px}.opponent img{width:92px;height:86px}.opponent .overline,.opponent p{display:none}.opponent h2{font-size:12px;margin:0}.studio{min-height:160px}.canvas-top{padding:14px 17px;font-size:8px}#stroke-status{display:none}.toolbar{padding:17px}#palette{gap:11px}.color{width:28px;height:28px}.tool span{display:none}.tools{gap:17px}.draw-bottom{padding-top:14px;align-items:center;gap:8px}input{font-size:14px;width:135px}.ready{gap:0}.primary{padding:14px 18px;font-size:12px;gap:12px}#message{display:none}.sample{font-size:10px;margin-top:4px}footer{padding-bottom:max(12px,env(safe-area-inset-bottom));padding-top:7px;font-size:7px}.race-nav{padding:12px 18px 0}.race-heading{padding:8px 12px 14px}.race-heading h1{font-size:24px}.scoreboard{gap:12px;margin:0 18px}.scoreboard>div{min-width:0;gap:6px;font-size:11px}.scoreboard b{max-width:110px}.scoreboard>div>span:last-child{font-size:9px}#race-actions{bottom:max(30px,env(safe-area-inset-bottom))}.race-stage{min-height:200px}.camera-label{left:18px;bottom:14px;font-size:7px}#results{bottom:max(12px,env(safe-area-inset-bottom));padding:18px 14px}.result-actions{gap:6px}.secondary{padding:12px 14px;font-size:11px}.result-actions .primary{font-size:11px;padding:12px 15px}ol{gap:14px;flex-wrap:wrap}}@media(max-height:650px){.page-heading{padding:5px 0 10px}h1{font-size:25px}.opponent img{height:60px}.eyebrow{margin-bottom:5px}header{height:50px}.toolbar{padding:13px 17px}footer{display:none}.app-shell{min-height:0}.sample{padding:6px 0 10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.opponent p{max-width:180px;line-height:1.4} @media(max-width:600px){.opponent p{display:block;font-size:10px;max-width:115px}}