/* Paper, ink, and a few loud colors. Music keeps its engraved geometry. */
:root{color-scheme:light;--paper:#f8f5ec;--ink:#262a31;--muted:#65625b;--blue:#1659a4;--line:#c7c0af;--lime:#247641;--pink:#db3461;--red:#ba2539;--green:#247641;--paint:#df3f29}
body{background:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.055' d='M0 0h170v170H0z'/%3E%3C/svg%3E");font-family:Arial,Helvetica,sans-serif;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1;width:100%}button,select,input{font-family:inherit}select option{background:var(--paper);color:var(--ink)}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.masthead{width:100%;max-width:1320px;height:110px;padding:0 5%;gap:28px}.logo{display:block;font-family:Arial,Helvetica,sans-serif;font-size:clamp(26px,3.2vw,40px);font-weight:950;letter-spacing:-2px;font-style:italic;transform:rotate(-3deg);color:var(--paint);text-transform:uppercase;line-height:1.1;text-shadow:1px 1px #f8f5ec,2px 2px #d5b993}.masthead nav{margin-left:auto;gap:30px}.nav{font-size:17px;line-height:1.3}.nav.active:after{background:var(--paint);height:4px;transform:rotate(-2deg);border-radius:30% 40% 35% 20%}.tools{gap:15px}.icon-button[aria-pressed=false]{opacity:.55}
.lobby{max-width:1080px;margin:18px auto 36px;padding:0 35px}.lobby h1{font-size:27px;font-weight:700;letter-spacing:-.6px;margin:0 0 23px}.practice-switch{justify-content:space-between;gap:20px;margin:0 0 38px;border-bottom:1px solid var(--line);padding:0 0 17px}.practice-switch button{font-size:19px;letter-spacing:0;font-weight:600;color:var(--muted);line-height:1.35;white-space:nowrap;padding:4px 0}.practice-switch button[aria-pressed=true]{color:var(--ink)}.practice-switch button[aria-pressed=true]:after{bottom:-10px;background:var(--paint);height:5px;border-radius:35% 45% 25% 25%;transform:rotate(-2deg)}
.setup{max-width:none;text-align:left;display:grid;grid-template-columns:minmax(240px,.82fr) minmax(300px,1.18fr);gap:18px 65px;align-items:center}.setup-controls{max-width:350px;width:100%;display:flex;flex-direction:column;gap:25px;align-self:center}.instrument-label,.field-label,.piece-controls label{display:block;color:var(--muted);font-size:15px;margin:0 0 4px}select,#instrument,.piece-controls select{font-size:23px;font-weight:500;letter-spacing:0;padding:9px 28px 12px 0;border-bottom:2px solid var(--ink);margin:0;background:transparent;line-height:1.4}select option{font-size:18px}.earned-levels{justify-content:flex-start;gap:23px;margin:0;min-height:43px}.level-choice{font-size:18px;font-weight:600;line-height:1.4;padding:7px 0;border-bottom:3px solid transparent}.level-choice[aria-pressed=true]{color:var(--blue);border-color:var(--blue)}.level-field:has(.level-choice:only-child) .field-label{display:none}.level-choice:only-child{cursor:default}.garage{position:relative;min-height:252px;text-align:center;padding:15px 0 12px}.vehicle-level{position:absolute;left:10px;top:0;transform:rotate(-6deg);background:#f2cb50;padding:6px 16px;font-size:16px;font-weight:700;box-shadow:2px 2px 0 #6f60311a}.vehicle-art{height:220px;display:flex;align-items:center;justify-content:center}.vehicle-art img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(2px 4px 0 #5148300c);transform:rotate(-2deg)}.vehicle-name{display:inline-block;color:var(--muted);font-size:17px;letter-spacing:.02em;transform:rotate(-2deg)}.start-line{grid-column:1/-1;border-top:2px dashed var(--line);padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:24px}.race-details{display:flex;flex-direction:column;gap:5px}.race-details #roundSize{font-weight:600;font-size:20px}.race-details #unlockRule{font-size:14px;color:var(--muted)}.begin{background:var(--paint);color:#fffaf1;font-size:20px;font-weight:700;letter-spacing:.01em;border-radius:4px 7px 3px 6px;min-width:210px;padding:16px 33px;transform:rotate(-1deg);box-shadow:2px 3px 0 #802817;transition:transform .1s}.begin:hover:not(:disabled){background:#c83222;transform:rotate(0) translateY(-1px);box-shadow:2px 3px 0 #802817}.begin:active:not(:disabled){transform:rotate(0) translateY(2px);box-shadow:none}.status{font-size:14px;line-height:1.5}.status:empty{min-height:0;margin:0}#setupStatus{grid-column:1/-1}.piece-controls,.tempo-controls{margin:0}.tempo-controls label{font-size:15px;align-items:center}.tempo-controls output{font-size:21px;font-weight:600}.tempo-controls input{margin:11px 0 5px;accent-color:var(--paint);height:25px}.tempo-stake{text-align:left;font-size:14px;color:var(--muted)}
footer{width:100%;max-width:1320px;margin-top:20px;align-items:center;gap:18px;font-size:14px;padding:22px 5%}.footer-links{margin-left:auto}.text-button,.footer-links>a{font-size:14px;color:var(--muted)}.access{max-width:440px;margin:48px auto 70px}.access h1{font-size:36px;letter-spacing:-1px;font-weight:700}.access-tabs button[aria-pressed=true]{color:var(--ink);border-color:var(--paint)}.access #codeHint{font-size:15px}.code-entry{border-bottom:2px solid var(--ink)}.access .begin{margin-top:3px}
.arena{max-width:1140px;margin:4px auto 40px;padding:0 40px}.game-top{font-size:15px}.game-top .text-button{font-size:15px}.game-metrics{margin-top:24px}.prompt{color:#20242a}.answer:not(.tap-answer){background:#fffdf6;border:2px solid #b8b2a4;border-radius:3px 5px 3px 4px;color:var(--ink);box-shadow:1px 2px 0 #bdb5a544;transition:background .08s}.answer:not(.tap-answer):hover:not(:disabled){background:#efe8d6;color:var(--blue);border-color:var(--blue)}.answer:active:not(:disabled){background:#d6e3f0;color:var(--ink)}.answer.is-wrong,.answer.is-wrong:disabled{background:#f9dad7!important;color:var(--red)!important;border:3px solid var(--red);opacity:1}.answer.is-correct,.answer.is-correct:hover:not(:disabled){background:#daecd7!important;color:var(--green)!important;border:3px solid var(--green);border-radius:3px}.answer:disabled:not(.is-wrong){opacity:.3}.answer kbd{font-size:14px}.tap-answer,.tap-answer:hover:not(:disabled){color:white;background:var(--blue);border-radius:5px}.tap-answer kbd{color:white}.tap-tools .begin{color:white}.key{background:#ebe3d2;color:var(--ink)}.feedback{font-weight:500}.streak{color:var(--green)}.term-prompt{font-weight:600;letter-spacing:-1px}.term-pronunciation{color:var(--muted)}
.finish{margin:35px auto 50px}.finish h1{font-weight:750;color:var(--ink);font-size:clamp(36px,6vw,66px)}.result-kicker{color:var(--muted)}.result-metrics span{font-size:14px}.result-actions .begin{color:white}.stats-heading h1{font-weight:700;font-size:50px}.scope button[aria-pressed=true]{color:var(--ink);border-color:var(--paint)}.stat-grid strong{font-weight:600}.stat-grid span,.history th,.history td small{font-size:14px}.your-standing{background:#1659a410}.history{overflow-x:auto}.stats-filters select{border-bottom:1px solid var(--ink)}
dialog{border:1px solid var(--line);border-radius:3px;box-shadow:6px 8px 0 #29261930;background:var(--paper)}dialog::backdrop{background:#26231c77;backdrop-filter:blur(3px)}dialog .begin{color:white}.name-invite{border-style:dashed}#answerBorder.right{box-shadow:inset 0 0 38px #24764120}#answerBorder.wrong{box-shadow:inset 0 0 38px #ba253930}
@media(min-width:1000px){.lobby{margin-top:35px}.setup{min-height:340px}.garage{min-height:290px}.vehicle-art{height:255px}}
@media(max-width:800px){.masthead{height:96px;padding:0 25px;gap:20px}.logo{font-size:30px;letter-spacing:-1.6px}.masthead nav{gap:22px}.lobby{padding:0 26px;margin-top:18px}.practice-switch{gap:17px;flex-wrap:wrap;justify-content:flex-start;row-gap:24px}.practice-switch button{font-size:18px}.setup{gap:25px 35px;grid-template-columns:minmax(220px,1fr) minmax(250px,1fr)}.vehicle-art{height:200px}.garage{min-height:240px}.vehicle-level{left:0}.lobby h1{font-size:26px}.stats-heading h1{font-size:44px}}
@media(max-width:600px){.masthead{height:auto;min-height:99px;padding:22px 21px 18px;flex-wrap:wrap;gap:18px}.logo{font-size:30px;width:100%;letter-spacing:-1.8px}.masthead nav{margin-left:0}.nav{font-size:16px}.tools{margin-left:auto;gap:16px}.icon-button{width:30px;height:30px}.lobby{padding:0 22px;margin:20px auto 30px}.lobby h1{font-size:25px;margin-bottom:20px}.practice-switch{display:flex;justify-content:flex-start;gap:19px 22px;margin-bottom:28px;padding-bottom:15px}.practice-switch button{font-size:17px;letter-spacing:0}.practice-switch button[aria-pressed=true]:after{bottom:-6px;height:4px}.setup{grid-template-columns:1fr;gap:20px}.setup-controls{max-width:none;gap:22px}.garage{min-height:185px;grid-row:2;padding:0 0 4px}.vehicle-art{height:172px;max-width:350px;margin:auto}.vehicle-level{left:calc(50% - 155px);font-size:14px;padding:4px 12px;top:6px}.vehicle-name{font-size:15px}.start-line{padding-top:20px;gap:20px;flex-wrap:wrap}.race-details{gap:5px}.race-details #roundSize{font-size:19px}.start-line .begin{width:100%;min-height:54px}.earned-levels{gap:27px}.level-choice{font-size:18px}.piece-controls select,#instrument{font-size:23px;margin:0}.tempo-controls output{font-size:22px}.begin{font-size:19px}.arena{padding-inline:18px;margin-top:5px}.game-top{font-size:14px}.game-top #gameContext{max-width:67%}.game-top .text-button{font-size:14px}.game-metrics{margin-top:16px}#clock{font-size:25px}.term-answers .answer{font-size:17px;min-height:65px}.term-prompt{font-size:35px}.stats-heading h1{font-size:42px}.stats-filters{gap:20px}.stats-page{margin-top:25px}.scope{font-size:16px}.result-metrics{gap:24px}.result-metrics strong{font-size:30px}.result-metrics span{font-size:14px}.finish h1{font-size:40px}.access{margin:30px auto 60px}.access h1{font-size:34px}footer{padding:18px 22px;flex-wrap:wrap;font-size:14px}.footer-links{gap:20px}}
@media(prefers-reduced-motion:reduce){.begin,.begin:hover:not(:disabled){transition:none;transform:none}}
.garage .level-field{position:relative;z-index:1}.garage .field-label{display:none}.garage .earned-levels{justify-content:center;gap:17px;margin:0 0 10px;min-height:36px}.garage .level-choice{font-size:16px;color:var(--muted);padding:5px 13px;border:0;border-radius:0;transform:rotate(-3deg)}.garage .level-choice:nth-child(2){transform:rotate(2deg)}.garage .level-choice[aria-pressed=true]{background:#f2cb50;color:var(--ink);box-shadow:2px 2px 0 #6f60311a}.garage{padding-top:0}.vehicle-art{height:210px}.vehicle-name{font-size:16px}.lobby[data-mode=terms] .setup-controls,.lobby[data-mode=rhythm-identify] .setup-controls{display:none}.lobby[data-mode=terms] .garage,.lobby[data-mode=rhythm-identify] .garage{grid-column:1/-1;width:100%;max-width:540px;justify-self:center}
body[data-view=arena] .masthead{height:80px;min-height:0;padding-block:16px;max-width:1140px;flex-wrap:nowrap}body[data-view=arena] .logo{font-size:26px;width:auto}body[data-view=arena] .masthead nav{display:none}body[data-view=arena] .tools{margin-left:auto}body[data-view=arena] .icon-button:disabled{display:none}
.race-track{position:relative;height:82px;margin-top:11px;background:none;border-bottom:3px solid #a8a197;border-radius:0 0 38% 4%;padding-right:145px}.race-track .track-lane{height:100%;position:relative;width:100%;background:none}.race-track #raceFill{position:absolute;bottom:-3px;left:0;background:var(--paint);width:0;height:3px;opacity:.65}.race-car{position:absolute;left:0;bottom:0;width:145px;height:74px;transition:left .2s ease-out;will-change:left}.race-car img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}.race-car.scoot img{animation:scoot .24s ease-out}.finish-line{position:absolute;right:5px;bottom:-3px;width:15px;height:47px;background:repeating-conic-gradient(#363632 0% 25%,#f8f5ec 0% 50%) 50%/10px 10px;transform:rotate(5deg);opacity:.85}.game-metrics{margin-top:16px}.exhaust-glitter{position:fixed;width:6px;height:6px;animation:exhaust .5s ease-out forwards;animation-delay:var(--delay);opacity:0;pointer-events:none;border-radius:0 2px 0 1px;box-shadow:0 0 2px #fff}#answerSplash{z-index:10}.splash-bubble{width:35px;height:35px;opacity:.35}
@keyframes scoot{0%,100%{transform:rotate(0)}35%{transform:translateY(-4px) rotate(-3deg)}65%{transform:translateY(1px) rotate(1deg)}}
@keyframes exhaust{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1.4)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.2)}}
dialog.victory{background:var(--paper);color:var(--ink)}dialog.victory::backdrop{background:var(--paper)}.victory-content{text-shadow:none;padding:32px 24px;justify-content:center;overflow:auto}.victory-content>p{color:var(--ink);font-size:20px;margin-bottom:12px}.victory h1{font-style:italic;font-weight:900;letter-spacing:-.035em;font-size:clamp(42px,7vw,88px);color:var(--paint);margin:0 0 16px}.victory #victoryScore{font-size:27px}.victory-drive{width:min(620px,90vw);height:clamp(140px,24vh,300px);margin:10px 0;animation:finish-drive 1.2s cubic-bezier(.2,.75,.25,1) both}.victory-drive img{width:100%;height:100%;object-fit:contain;animation:victory-scoot .6s ease-in-out 1.2s 6 alternate}.victory #victoryVehicle{font-size:20px;font-weight:600;transform:rotate(-2deg)}.victory .begin{margin-top:20px;background:var(--blue);box-shadow:2px 3px 0 #12385f;color:white}.victory #celebration{opacity:.8}
@keyframes finish-drive{from{transform:translateX(-100vw) rotate(-7deg)}to{transform:translateX(0) rotate(-2deg)}}
@keyframes victory-scoot{to{transform:translateY(-6px) rotate(1deg)}}
@media(min-width:1000px){.vehicle-art{height:245px}.garage{min-height:290px}}
@media(max-width:600px){.garage{min-height:0}.vehicle-art{height:172px}.garage .earned-levels{margin-bottom:6px}.race-track{height:65px;padding-right:113px}.race-car{width:113px;height:61px}.finish-line{height:38px}.arena .notation{height:230px}.arena:has(.note-answers) .notation{height:200px}.arena:has(.note-answers) .prompt{min-height:200px}body[data-view=arena] .masthead{height:72px;padding-inline:20px}.victory h1{font-size:46px}.victory #victoryScore{font-size:24px}.victory-drive{height:185px}.garage .level-choice{font-size:16px}.lobby[data-mode=terms] .garage,.lobby[data-mode=rhythm-identify] .garage{grid-row:1}}
@media(prefers-reduced-motion:reduce){.race-car{transition:none}.exhaust-glitter{display:none}.victory-drive,.victory-drive img,.race-car.scoot img{animation:none}}
@media(max-width:600px){.masthead{padding-block:16px 8px;gap:12px}.lobby{margin-top:14px}.lobby h1{font-size:24px;margin-bottom:15px}.practice-switch{gap:12px 22px;margin-bottom:20px;padding-bottom:12px}.setup{gap:14px}.setup-controls{gap:18px}.vehicle-art{height:135px}.start-line{padding-top:16px;gap:14px}.start-line .begin{padding-block:14px;min-height:52px}.race-details{gap:2px}}
/* Cut paper and felt-tip lettering. */
@font-face{font-family:Kalam;src:url('/Kalam-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Kalam;src:url('/Kalam-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Rock Salt';src:url('/RockSalt.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--paper:#fbf7e9;--ink:#242c46;--muted:#5e605f;--paint:#c6382c;--blue:#225aab;--hand:'Kalam',cursive;--marker:'Rock Salt','Kalam',cursive}
body{font-family:var(--hand);font-size:20px;line-height:1.5;background-color:#decfa7;background-image:repeating-linear-gradient(28deg,#8e755308 0 1px,transparent 1px 6px),repeating-linear-gradient(100deg,#fff8d826 0 1px,transparent 1px 9px)}
body:before{content:'';position:fixed;z-index:0;pointer-events:none;inset:12px 14px;background:var(--paper);box-shadow:3px 5px 10px #594a3035;clip-path:polygon(0 .5%,13% 0,26% .35%,49% 0,71% .4%,91% 0,100% .4%,99.75% 21%,100% 43%,99.7% 64%,100% 86%,99.6% 100%,83% 99.6%,63% 100%,42% 99.6%,23% 100%,0 99.7%,.2% 78%,0 54%,.2% 27%)}
body:after{content:'';position:fixed;inset:10px 14px;z-index:0;pointer-events:none;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}
.masthead{height:135px;padding-top:10px}.logo{font:400 clamp(26px,3.6vw,41px)/1.65 var(--marker);letter-spacing:-1.8px;text-transform:none;font-style:normal;transform:rotate(-4deg);text-shadow:1px 1px #f9dd98,2px 2px #b7432544;position:relative;isolation:isolate}.logo:before{content:'';position:absolute;inset:8px -17px 0;z-index:-1;background:#fffef6;box-shadow:1px 3px 1px #61563927;transform:rotate(1deg);clip-path:polygon(0 7%,20% 0,47% 3%,69% 0,99% 6%,100% 85%,78% 97%,50% 92%,25% 100%,1% 94%)}
.nav{font:700 23px/1.6 var(--hand)}.text-button,.footer-links>a{font:400 18px/1.4 var(--hand)}.icon-button{font-family:var(--hand)}.masthead nav{gap:28px}.nav.active:after,.practice-switch button[aria-pressed=true]:after{height:6px;opacity:.8;background:repeating-linear-gradient(1deg,var(--paint) 0 2px,#e46249 2px 3px);clip-path:polygon(0 25%,10% 0,80% 8%,100% 55%,87% 82%,3% 100%)}
.lobby{position:relative;margin-top:30px;padding:28px 34px 30px;background:#fffdf3;box-shadow:-11px 10px 0 -3px #e9c94f,10px 18px 0 -6px #7aa5c4,2px 5px 12px #51463225;border-radius:1px 4px 2px 3px;isolation:isolate;max-width:1080px}.lobby:before,.lobby:after{content:'';position:absolute;pointer-events:none;width:90px;height:27px;top:-10px;background:repeating-linear-gradient(94deg,#e4c78970 0 4px,#eadcb781 4px 7px);border-inline:2px dotted #bd995341;box-shadow:1px 1px 1px #5a503710}.lobby:before{left:26px;transform:rotate(-12deg)}.lobby:after{right:35px;transform:rotate(9deg)}
.lobby h1,.access h1,.stats-heading h1,.finish h1,dialog h2,.victory h1{font-family:var(--marker);font-weight:400;letter-spacing:-1px;font-style:normal;line-height:1.8;transform:rotate(-1deg)}.lobby h1{font-size:25px;margin:0 0 20px}.practice-switch{gap:18px;margin-bottom:30px;padding-bottom:17px;border-bottom:2px dashed #7f90a855}.practice-switch button{font:700 23px/1.4 var(--hand);padding:0 3px}.practice-switch button:nth-child(2n){transform:rotate(2deg)}.practice-switch button:nth-child(2n+1){transform:rotate(-1deg)}.practice-switch button[aria-pressed=true]{color:var(--blue)}
.setup{gap:15px 48px;min-height:320px}.setup-controls{gap:26px}select,#instrument,.piece-controls select{font-family:var(--hand);font-size:28px;font-weight:400;border-bottom:2px solid #303855;border-radius:0 0 30% 2%;padding:4px 26px 8px 0}.instrument-label,.field-label,.piece-controls label,.tempo-controls label{font:400 18px/1.4 var(--hand);color:var(--muted)}select option{font-family:var(--hand);font-size:20px}.garage{position:relative;padding:5px 0 0;min-height:275px}.garage:before{content:'';position:absolute;z-index:-1;inset:29px -3px 0;background:repeating-linear-gradient(0deg,transparent 0 25px,#799ac529 25px 26px),#f6f1d9;clip-path:polygon(1% 1%,10% 0,43% 2%,69% 0,99% 3%,100% 45%,99% 95%,65% 100%,43% 97%,3% 100%,0 64%);transform:rotate(3deg);box-shadow:2px 3px 2px #473a2424}.vehicle-art{height:236px;position:relative;z-index:1}.garage .level-choice{font:700 21px/1.4 var(--hand);padding:3px 15px}.garage .level-choice[aria-pressed=true]{background:#f5cf4e;box-shadow:2px 2px 0 #86712026;clip-path:polygon(1% 8%,98% 0,100% 91%,0 100%)}
.start-line{border-top:3px dashed #50637f60;padding-top:23px}.race-details #roundSize{font:700 24px/1.35 var(--hand)}.race-details #unlockRule{font:400 18px/1.4 var(--hand)}.begin{font:700 26px/1.2 var(--hand);color:#fffbed;padding:16px 37px;min-width:210px;background:repeating-linear-gradient(3deg,#c6382c 0 4px,#cc4136 4px 5px);border-radius:3px 8px 4px 7px;box-shadow:3px 4px 0 #a8835759;clip-path:polygon(1% 9%,8% 2%,95% 0,100% 12%,99% 92%,91% 99%,4% 97%,0 87%)}.begin:hover:not(:disabled){background:#b82e24;box-shadow:3px 4px 0 #a8835759}.tempo-controls output{font:700 25px/1.2 var(--hand)}.tempo-stake,.status,footer{font-size:17px}.access{padding:25px 28px;background:#fffdf4;box-shadow:-8px 8px 0 #efcc50,5px 13px 0 #79a5ca;transform:rotate(-.4deg)}.access h1{font-size:25px}.access-tabs button{font-size:20px}.access label,.access #codeHint{font-size:18px}
.answer:not(.tap-answer){font:700 32px/1.15 var(--hand);border:2px solid #7e7a6c;border-radius:6px 3px 8px 4px;background:#fffdf5;box-shadow:2px 3px 0 #a58c5c25;min-height:58px}.answers.note-answers{grid-template-rows:repeat(3,minmax(58px,auto));gap:8px 12px}.note-answers .answer{font-size:31px;min-height:58px}.note-answers .answer:nth-child(2n){border-radius:3px 7px 3px 6px}.note-answers .answer[style*='grid-row:1']{background:#e8f1fa}.note-answers .answer[style*='grid-row:3']{background:#fff0d5}.term-prompt{font-family:var(--hand);font-size:54px;letter-spacing:0}.term-pronunciation{font-family:var(--hand);font-size:24px}.term-answers .answer{font-size:22px;font-weight:400;line-height:1.35}.tap-answer{font-family:var(--hand);font-size:29px}.answer kbd{font-family:var(--hand);font-size:17px}.game-top,.game-top .text-button,.feedback{font-size:19px}#clock{font-family:var(--hand);font-size:33px}.streak{font-size:21px}.game-metrics{font-family:var(--hand)}.stats-page{background:#fffdf5;padding:25px 35px;box-shadow:-7px 8px 0 #f3d265,5px 15px 0 #8db0c5}.stats-heading h1{font-size:35px}.scope{font-size:21px}.stats-filters label,.stats-filters select,.stat-grid span,.history table,.history th,.history td small{font-size:18px}.stat-grid strong{font-family:var(--hand)}.finish h1{font-size:38px}.result-metrics span,.finish>p{font-size:19px}.result-actions .begin{font-size:23px}.victory h1{font-size:clamp(29px,5vw,62px);max-width:1100px}.victory .begin{font-family:var(--hand);font-size:25px}.victory-content>p{font-family:var(--hand);font-size:26px}
@media(max-width:800px){.logo{font-size:29px;letter-spacing:-1.5px}.masthead{height:125px;padding-inline:34px}.lobby{margin:25px 30px 32px;padding:26px 26px}.lobby h1{font-size:22px}.practice-switch{gap:15px 24px}.practice-switch button{font-size:22px}.setup{gap:18px 24px;grid-template-columns:minmax(195px,1fr) minmax(220px,1fr)}.vehicle-art{height:210px}.garage{min-height:250px}.stats-page{margin-inline:26px}.stats-heading h1{font-size:28px}}
@media(max-width:600px){.masthead{height:auto;min-height:120px;padding:16px 31px 4px;gap:8px}.logo{font-size:27px;width:100%;letter-spacing:-1.6px;line-height:1.75}.masthead nav{gap:26px}.nav{font-size:22px}.tools{gap:16px}.lobby{margin:18px 24px 30px;padding:24px 17px 20px}.lobby h1{font-size:20px;line-height:1.8;margin-bottom:19px}.practice-switch{gap:14px 17px;margin-bottom:21px;padding-bottom:13px}.practice-switch button{font-size:21px}.setup{grid-template-columns:1fr;gap:17px;min-height:0}.setup-controls{gap:16px}#instrument,.piece-controls select{font-size:27px}.garage{min-height:0}.garage:before{inset:22px 0 0}.vehicle-art{height:145px}.garage .earned-levels{margin:0}.garage .level-choice{font-size:20px}.start-line{gap:13px;padding-top:17px}.race-details #roundSize{font-size:23px}.race-details #unlockRule{font-size:16px}.start-line .begin{font-size:25px;padding-block:14px}.tempo-controls output{font-size:25px}.tempo-stake{font-size:17px}.access{margin:30px 30px 50px}.access h1{font-size:23px}.access-tabs{gap:22px}.access-tabs button{font-size:18px}.note-answers .answer{font-size:27px;min-height:49px;padding:2px 0}.answers.note-answers{grid-template-rows:repeat(3,minmax(49px,auto));gap:7px 4px}.term-answers .answer{font-size:19px}.term-prompt{font-size:37px}.term-pronunciation{font-size:20px}.stats-page{padding:20px 16px;margin-inline:24px}.scope{font-size:19px;gap:21px}.stats-filters label,.stats-filters select{font-size:17px}.finish h1{font-size:28px}.result-metrics{gap:22px}.result-metrics span{font-size:17px}.result-actions .begin{font-size:22px}.victory h1{font-size:33px}footer{font-size:16px;padding-inline:32px}.text-button,.footer-links>a{font-size:17px}}
/* One lap around the reading surface. */
.perimeter-track{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden}.perimeter-track svg,.perimeter-track canvas{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.track-bed{fill:none;stroke:#d4c4a4;stroke-width:29;opacity:.36}.track-edge{fill:none;stroke:#6e6a5d;stroke-width:2.6;stroke-linecap:round;filter:url(#crayonEdge)}.track-grain{fill:none;stroke:#57513f;stroke-width:3;stroke-dasharray:2 8;opacity:.24}.lap-progress{fill:none;stroke:#2877bb;stroke-width:4;opacity:.6;stroke-dasharray:0 10000;filter:url(#crayonEdge)}.track-finish{position:absolute;width:17px;height:31px;transform:translate(-50%,-50%) rotate(-3deg);background:repeating-conic-gradient(#27324b 0% 25%,#fcf8e8 0% 50%) 50%/9px 9px}.perimeter-track .race-car{position:absolute;left:0;top:0;bottom:auto;width:112px;height:57px;transition:none;transform-origin:0 0;will-change:transform}.vehicle-sprite{position:relative;width:100%;height:100%;isolation:isolate}.vehicle-art .vehicle-sprite{width:100%;max-width:520px;height:100%}.vehicle-sprite .car-base{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain;transform:none}.vehicle-sprite .instrument-driver{position:absolute;z-index:1;object-fit:contain;width:24%;height:69%;left:25%;bottom:35%;transform:rotate(8deg);transform-origin:50% 90%;filter:drop-shadow(1px 2px 0 #54402b35)}.vehicle-sprite[data-car-level="2"] .instrument-driver{left:36%;bottom:30%;width:18%;height:56%;z-index:3;clip-path:polygon(0 0,100% 0,100% 74%,0 74%)}.vehicle-sprite[data-car-level="3"] .instrument-driver{left:35%;bottom:37%;width:18%;height:62%}.race-car .vehicle-sprite .instrument-driver{filter:none}.vehicle-art .vehicle-sprite{transform:rotate(-2deg)}.victory-drive .vehicle-sprite{animation:victory-scoot .6s ease-in-out 1.2s 6 alternate}.victory-drive img{animation:none}
body[data-view=arena] .masthead{height:104px;padding:20px 110px 0;max-width:1220px;position:relative;z-index:9}body[data-view=arena] .logo{font-family:var(--marker);font-size:22px;letter-spacing:-1px;line-height:1.6}body[data-view=arena] .logo:before{inset:0 -8px}.arena{max-width:1080px;margin:12px auto 92px;padding:0 70px;min-height:calc(100dvh - 208px)}.arena .game-top{font-size:18px;line-height:1.4}.game-metrics{margin-top:16px}.arena .prompt{min-height:240px}.arena .notation{height:270px}.arena:has(.note-answers) .prompt{min-height:220px}.arena:has(.note-answers) .notation{height:260px}.arena .answers{margin-top:8px}.arena .feedback{margin-top:15px}.arena .rhythm-notation.multi-measure{height:320px}.arena .prompt:has(.multi-measure){min-height:320px}.arena .prompt:has(.fingerdiagram){min-height:305px}
@media(max-width:800px){.arena{padding:0 80px}.perimeter-track .race-car{width:100px;height:52px}.arena .answers.note-answers{gap:7px 5px}.arena .note-answers .answer{font-size:28px}.arena .game-top{font-size:17px}}
@media(max-width:600px){body:before,body:after{inset:6px}body[data-view=arena] .masthead{height:80px;padding:13px 50px 0;gap:12px}body[data-view=arena] .logo{font-size:18px;letter-spacing:-1px;white-space:nowrap}body[data-view=arena] .tools{gap:0}body[data-view=arena] .icon-button{width:25px;height:25px}.perimeter-track .race-car{width:65px;height:35px}.track-bed{stroke-width:19}.track-edge{stroke-width:2}.track-grain{stroke-width:2;stroke-dasharray:2 6}.track-finish{width:14px;height:22px}.arena,.arena:has(.note-answers){padding:0 48px;margin:10px auto 73px;min-height:calc(100dvh - 165px)}.arena .game-top{font-size:15px;gap:9px}.arena .game-top .text-button{font-size:17px}.arena .game-metrics{margin:15px 0 0}.arena:has(.note-answers) .game-top,.arena:has(.note-answers) .game-metrics{margin-inline:0}.arena #clock{font-size:27px}.arena .streak{font-size:17px}.arena .prompt,.arena:has(.note-answers) .prompt{min-height:180px}.arena .notation,.arena:has(.note-answers) .notation{height:205px}.arena .answers.note-answers{gap:7px 3px;grid-template-rows:repeat(3,minmax(46px,auto))}.arena .note-answers .answer{font-size:23px;min-height:46px}.arena .answer:not(.tap-answer){border-width:1.5px;box-shadow:1px 2px 0 #a58c5c25}.arena .term-answers .answer{font-size:18px;padding:12px;min-height:62px}.arena .term-prompt{font-size:32px;padding:14px 4px}.arena .term-pronunciation{font-size:19px}.arena .feedback{font-size:17px;line-height:1.4;padding-inline:0}.arena .tap-answer{max-width:100%;width:100%;font-size:25px}.arena .tap-beat{font-size:22px}.arena .rhythm-notation.multi-measure{height:auto}.arena .prompt:has(.multi-measure){min-height:245px}.arena .prompt:has(.fingerdiagram){min-height:260px}.arena .fingerdiagram{height:265px}.arena .tap-tools{flex-wrap:wrap;gap:10px}.arena .answer.brass{font-size:23px;min-height:115px}.arena .valve-stack{font-family:var(--hand);font-size:23px}}
@media(prefers-reduced-motion:reduce){.victory-drive .vehicle-sprite{animation:none}.perimeter-track .race-car{transition:none}}
.vehicle-sprite[data-car-level="1"] .instrument-driver{left:48%;bottom:30%;width:23%;height:70%;transform:rotate(5deg)}.vehicle-sprite[data-car-level="2"] .instrument-driver{left:41%;bottom:40%;width:19%;height:68%;z-index:1;clip-path:none;transform:rotate(4deg)}

/* Notebook pages, cut-out letters, and a handmade flag. */
@font-face{font-family:'Sade Kids';src:url('/Sadekids-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:Schoolbell;src:url('/Schoolbell-Regular.ttf') format('truetype');font-display:swap}
:root{--hand:Schoolbell,cursive;--marker:'Sade Kids',Schoolbell,cursive}
.logo{width:355px;transform:rotate(-3deg);line-height:0}.logo:before{display:none}.logo img{display:block;width:100%;height:auto;filter:drop-shadow(1px 4px 0 #6f57332c)}
.lobby,.access,.stats-page,.finish{background-color:#fffdf4;background-image:linear-gradient(90deg,transparent 0 24px,#e9555360 24px 26px,transparent 26px),repeating-linear-gradient(0deg,transparent 0 30px,#629dcc40 30px 31px);box-shadow:-7px 7px 0 #9cc5dd,4px 13px 0 #fffdf4,6px 15px 0 #c6c1b5,12px 21px 0 -5px #e9bf40;padding-left:44px}
.lobby h1{font-size:35px;line-height:1.3}.practice-switch button,.nav,.begin,.garage .level-choice{font-family:var(--marker);font-weight:400}.practice-switch button{font-size:24px}.begin{font-size:28px}.garage:before{box-shadow:4px 5px 0 #d4c5a7}.garage .level-choice{font-size:26px}.race-details #roundSize{font-weight:400}.answer:not(.tap-answer){font-family:var(--hand);font-weight:400}
body[data-view=arena] .logo{width:200px;max-width:55%;font-size:inherit}.finish{padding:25px 45px;max-width:900px}.stats-heading h1,.finish h1{font-size:45px}
@media(max-width:600px){.logo{width:280px;max-width:100%;margin-bottom:8px}.masthead{padding-top:16px}.lobby{padding-left:31px}.lobby h1{font-size:29px}.practice-switch button{font-size:22px}.garage .level-choice{font-size:24px}body[data-view=arena] .logo{width:185px;max-width:78%}.access{padding-left:35px}.finish{margin:25px 27px;padding:25px 28px}.finish h1{font-size:33px}}

/* Racing surface and notebook controls. */
.track-curb{fill:none;stroke:#d94640;stroke-width:44;filter:url(#crayonEdge)}.track-curb-white{fill:none;stroke:#fff8e9;stroke-width:44;stroke-dasharray:16 17}.track-bed{stroke:#54585b;stroke-width:34;opacity:1}.track-edge{stroke:#282b30;stroke-width:35;opacity:.25;filter:url(#crayonEdge)}.track-grain{stroke:#fbefbd;stroke-width:1.5;stroke-dasharray:10 12;opacity:.75}.lap-progress{stroke:#88dfff;stroke-width:2;opacity:.5}.track-finish{height:38px;width:20px;transform:translate(-50%,-50%);z-index:1;background:repeating-conic-gradient(#171c26 0% 25%,#fffdf3 0% 50%) 50%/10px 10px}.finish-flag{position:absolute;bottom:35px;left:3px;width:2px;height:44px;background:#303039;transform:rotate(-8deg)}.finish-flag:after{content:'';position:absolute;left:2px;top:0;width:35px;height:25px;background:repeating-conic-gradient(#202631 0% 25%,#fff8e9 0% 50%) 50%/10px 10px;clip-path:polygon(0 0,100% 7%,95% 96%,0 100%);box-shadow:2px 2px 0 #0003}.perimeter-track .race-car{width:132px;height:71px;z-index:3}.tow-truck{position:absolute;left:0;top:0;width:106px;height:68px;transform-origin:0 0;object-fit:contain;z-index:4}.race-format,.duration-controls{display:flex;gap:17px;align-items:center;flex-wrap:wrap}.race-format button{font:27px/1.2 var(--marker);padding:5px 0;border-bottom:3px solid transparent;color:var(--muted)}.race-format button[aria-pressed=true]{color:var(--blue);border-color:var(--blue);transform:rotate(-2deg)}.duration-controls{gap:12px}.duration-controls button{font:22px/1.2 var(--hand);padding:7px 8px;transform:rotate(2deg);background:#f3e8b8}.duration-controls button[aria-pressed=true]{background:#f0c547;box-shadow:2px 3px 0 #87651230}.setup-controls{gap:20px}.lobby[data-mode=terms] .setup-controls,.lobby[data-mode=rhythm-identify] .setup-controls{display:flex}.lobby[data-mode=terms] .garage,.lobby[data-mode=rhythm-identify] .garage{grid-column:auto;grid-row:auto}.note-answers{grid-template-columns:repeat(14,minmax(0,1fr))!important;column-gap:5px!important}.answers.note-answers .answer{grid-column-end:span 2;font-size:31px}.start-lights{position:absolute;left:50%;top:155px;transform:translateX(-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none}.light-bulbs{display:flex;gap:9px;background:#393b44;padding:11px 16px;border:4px solid #f2d345;border-radius:3px 7px 3px 8px;box-shadow:4px 5px 0 #2224;transform:rotate(-1deg)}.light-bulbs i{display:block;width:23px;height:23px;border-radius:48% 52% 49% 47%;background:#191b25;box-shadow:inset 2px 2px 4px #0008;border:2px solid #0b0f17}.light-bulbs i.on{background:#ff352e;box-shadow:0 0 13px #ff5347,inset 2px 2px 2px #ffa282}.start-lights[data-phase=go] .light-bulbs{border-color:#29aa57}.start-lights span{font:25px/1.2 var(--marker);background:#fff9e6;transform:rotate(2deg);padding:1px 14px;color:var(--blue)}body[data-starting=true] .arena .prompt,body[data-starting=true] .arena .answers{visibility:hidden}.arena .prompt{background:repeating-linear-gradient(0deg,transparent 0 30px,#6097ca17 30px 31px)}.arena:has(.tap-answer) .start-lights{top:151px;transform:translateX(-50%) scale(.8)}.arena:has(.tap-answer) .prompt{margin-top:65px}.vehicle-art{filter:drop-shadow(4px 7px 0 #74614635)}
@media(max-width:600px){.track-curb,.track-curb-white{stroke-width:27}.track-bed{stroke-width:21}.track-edge{stroke-width:22}.track-grain{stroke-width:1;stroke-dasharray:7 9}.track-finish{height:26px;width:15px}.finish-flag{bottom:22px;height:28px}.finish-flag:after{width:25px;height:17px}.perimeter-track .race-car{width:78px;height:44px}.tow-truck{width:65px;height:40px}.race-format button{font-size:25px}.duration-controls{gap:8px}.duration-controls button{font-size:21px}.setup-controls{gap:16px}.lobby[data-mode=terms] .garage,.lobby[data-mode=rhythm-identify] .garage{grid-row:2}.answers.note-answers{column-gap:2px!important}.answers.note-answers .answer{font-size:23px;min-height:47px}.start-lights{top:180px}.light-bulbs{gap:6px;padding:9px 12px}.light-bulbs i{width:20px;height:20px}.arena:has(.tap-answer) .start-lights{top:160px}.arena:has(.tap-answer) .prompt{margin-top:80px}}
/* Keep the logo and controls inside the circuit, clear of the cars. */
body[data-view=arena] .masthead{height:155px;padding-top:63px}.arena{min-height:calc(100dvh - 260px)}
@media(max-width:600px){body[data-view=arena] .masthead{height:116px;padding-top:35px}.arena,.arena:has(.note-answers){min-height:calc(100dvh - 201px)}}
@media(max-width:600px){.lobby h1{font-size:24px;white-space:nowrap}.practice-switch{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}.practice-switch button{font:400 21px/1.3 var(--hand);text-align:left;white-space:normal}.garage .level-choice{font-family:var(--hand);font-size:23px}}

/* Playable mallet-instrument geometry: two groups of raised bars per octave. */
.answers.mallet-answers{display:block;max-width:850px;margin-top:14px}
.mallet-keyboard{display:grid;grid-template-columns:repeat(var(--bar-columns),minmax(0,1fr));grid-template-rows:100px 144px 25px;column-gap:3px;row-gap:8px;position:relative;isolation:isolate;padding:10px 5px 0;background:linear-gradient(0deg,transparent 0 53px,#785131 53px 64px,transparent 64px 192px,#785131 192px 202px,transparent 202px)}
.mallet-keyboard .mallet-bar{width:100%;max-width:none;min-height:0;height:var(--bar-height);align-self:start;padding:0;position:relative;border:2px solid #59301b;border-radius:3px;box-shadow:2px 4px 0 #50331c70;transform:none;background:linear-gradient(90deg,#a66632,#ba804c 50%,#a66a3c);color:#fff8e8;touch-action:manipulation}
.mallet-keyboard .mallet-bar.raised{background:linear-gradient(90deg,#684025,#895130 50%,#684025);border-color:#432b1c;margin-inline:0;align-self:end}
.mallet-keyboard .mallet-bar:before,.mallet-keyboard .mallet-bar:after{content:'';position:absolute;left:calc(50% - 2px);width:4px;height:4px;background:#482c1a;border-radius:50%}
.mallet-keyboard .mallet-bar:before{top:20%}.mallet-keyboard .mallet-bar:after{bottom:20%}
.mallet-keyboard .mallet-bar:hover:not(:disabled){background:#c88f55;color:#fff;border-color:#263e74}
.mallet-keyboard .mallet-bar:active:not(:disabled){transform:translateY(2px);box-shadow:1px 1px 0 #50331c70}
.mallet-keyboard .mallet-bar.is-correct,.mallet-keyboard .mallet-bar.is-correct:disabled{background:#258f4e!important;border:3px solid #075e30!important;color:#fff!important;opacity:1;box-shadow:0 0 0 3px #a9e5b9}
.mallet-keyboard .mallet-bar.is-wrong,.mallet-keyboard .mallet-bar.is-wrong:disabled{background:#be353b!important;border:3px solid #7a1424!important;color:#fff!important;opacity:1}
.mallet-keyboard .bar-label{font:18px/1 var(--hand);writing-mode:vertical-rl;text-orientation:mixed;opacity:0;pointer-events:none}
.mallet-keyboard .is-correct .bar-label,.mallet-keyboard .is-wrong .bar-label{opacity:1}
.mallet-register{grid-row:3;grid-column:1 / span 2;font-size:14px;text-align:center;white-space:nowrap}.mallet-register.last{grid-column:-3 / -1}
@media(max-width:600px){.arena:has(.mallet-answers){padding-inline:27px}.arena:has(.mallet-answers) .game-top,.arena:has(.mallet-answers) .game-metrics{margin-inline:21px}.mallet-keyboard{column-gap:1px;padding-inline:0;grid-template-rows:82px 126px 24px}.mallet-keyboard .bar-label{font-size:16px}.arena .mallet-keyboard .mallet-bar{border-width:1px}.arena:has(.mallet-answers) .prompt{min-height:165px}.arena:has(.mallet-answers) .notation{height:190px}}
.arena .feedback:not(:empty){position:relative;z-index:9;background:var(--paper);width:fit-content;max-width:100%;padding:3px 10px}

/* Adobe web project supplied by the site owner. Apply only after it is ready. */
:root.adobe-font-ready{--marker:'schoolbell-pro','Sade Kids',Schoolbell,cursive}
h1,h2,h3{font-family:var(--marker);font-weight:400;letter-spacing:0}
.perimeter-track .race-car,.perimeter-track .tow-truck{transform-origin:50% 80%;backface-visibility:visible}
@media(max-width:600px){.practice-switch button,.garage .level-choice{font-family:var(--marker)}}

.perimeter-track .race-car{height:64px}.perimeter-track .tow-truck{height:58px}
@media(max-width:600px){.perimeter-track .race-car{height:34px}.perimeter-track .tow-truck{height:32px}}

/* Clean score sheets keep the handmade headings, with quiet, readable data. */
.stats-page{background-image:none;padding:30px 36px;color:#17283d;max-width:1120px}
.stats-page,.stats-page select,.stats-page button,.stats-page table{font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5}
.stats-page h1,.stats-page h2{font-family:var(--marker)}
.stats-heading{gap:20px;flex-wrap:wrap;margin-bottom:25px}.stats-heading h1{margin:0;font-size:42px}
.stats-page .scope{gap:6px;display:flex;flex-wrap:wrap}.stats-page .scope button{padding:8px 14px;font-size:16px;border:1px solid #acb7c4;border-radius:5px;color:#25394f;background:#fff;transform:none}
.stats-page .scope button[aria-pressed=true]{background:#183b60;color:white;border-color:#183b60}
.stats-filters{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:26px}.stats-filters label{flex:1 1 160px;font-size:14px;font-weight:600;color:#334a61}.stats-filters select{display:block;width:100%;margin-top:6px;min-height:44px;background:#fff;border:1px solid #9caabb;padding:8px 30px 8px 10px;color:#17283d;border-radius:4px}
.stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-block:1px solid #c6cfda;padding:19px 0;margin-bottom:28px}.stat-grid>div{padding:0 14px;border-right:1px solid #d9dfe6}.stat-grid>div:last-child{border:0}.stat-grid strong{font:700 30px/1.3 Arial,Helvetica,sans-serif;color:#153f66;font-variant-numeric:tabular-nums}.stat-grid span{display:block;font-size:14px;color:#465b70;line-height:1.4;margin-top:4px}
.stats-page .history-head h2{font-size:30px}.stats-page .history{overflow-x:auto}.stats-page table{width:100%;border-collapse:collapse;background:#fff}.stats-page th{font-size:14px;text-transform:none;letter-spacing:0;color:#435770;background:#edf2f6;padding:11px 14px;white-space:nowrap;text-align:left}.stats-page td{padding:14px;font-size:16px;border-bottom:1px solid #dce2e9;font-variant-numeric:tabular-nums}.stats-page td strong{font-weight:600}.stats-page td small{display:block;font-size:14px;color:#516378;line-height:1.6}.stats-page td:not(:first-child){white-space:nowrap}.stats-page tr.your-standing{background:#e8f3ff}.stats-page .status,.stats-page .empty{font-size:15px}.stats-page .reward-star{color:#1f7441}
@media(max-width:700px){.stats-page{padding:24px 18px;margin:20px 22px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.stat-grid>div{border:0;padding:0 5px}.stat-grid strong{font-size:28px}.stats-page td,.stats-page th{padding:10px}.stats-heading h1{font-size:35px}.stats-page .scope button{padding:7px 10px;font-size:15px}.stats-filters{gap:12px}.stats-filters label{flex-basis:140px}}

/* A player's notebook and garage. */
.player-page{max-width:1080px;margin:35px auto 55px;padding:30px 42px;background:#fffdf4;box-shadow:-7px 7px 0 #9cc5dd,4px 13px 0 #fffdf4,6px 15px 0 #c6c1b5,12px 21px 0 -5px #e9bf40}.player-page h1{font-size:42px;margin:0 0 25px}.player-layout{display:grid;grid-template-columns:minmax(270px,1fr) 1fr;gap:45px;align-items:start}.player-page form>label,.player-page legend{font:23px/1.4 var(--hand);display:block;margin:0 0 8px}.player-page input[type=text],#profileName,.player-page select{background:#fff;border:1px solid #8b9db0;border-radius:4px;padding:10px 12px;min-height:46px;width:100%;font:18px/1.5 Arial,Helvetica,sans-serif;color:#17283d}.player-page .optional{font-size:17px;color:#56697d}.player-page #profilePrivacy{font:14px/1.5 Arial,Helvetica,sans-serif;color:#435b72;margin:9px 0 25px}.player-page fieldset{padding:0;margin:25px 0;border:0}.secondary-instruments{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}.secondary-instruments label{display:flex;align-items:center;gap:9px;min-height:36px;font:16px/1.4 Arial,Helvetica,sans-serif;color:#273d51}.secondary-instruments input{width:19px;height:19px;accent-color:#245786;flex-shrink:0}.secondary-instruments label:has(input:disabled){opacity:.4}.player-garage{background:repeating-linear-gradient(0deg,transparent 0 30px,#629dcc40 30px 31px),#fbf9ef;transform:rotate(2deg);box-shadow:4px 5px 0 #8e75572b;padding:12px;margin-top:40px}.player-garage img{width:100%;height:260px;object-fit:contain;filter:drop-shadow(3px 5px 0 #715c3733)}.player-garage p{text-align:center;font:26px/1.4 var(--marker);margin:0 0 20px}.favorite-instruments{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.favorite-instruments button{font:17px/1.3 var(--hand);padding:6px 10px;border:1px solid #8094a8;background:#fffdf4;color:#254765;border-radius:3px}.favorite-instruments button[aria-pressed=true]{background:#ddebf5;border-color:#245786}.masthead nav{gap:23px}
@media(max-width:800px){.player-page{margin:25px 30px;padding:27px}.player-layout{gap:24px}.player-garage img{height:210px}}
@media(max-width:600px){.player-page{margin:20px 25px;padding:25px}.player-layout{grid-template-columns:1fr}.player-page h1{font-size:33px}.player-garage{grid-row:1;margin:0 0 5px;padding:0}.player-garage img{height:150px}.player-garage p{font-size:23px;margin:0 0 10px}.player-page .begin{min-width:0;width:100%}.secondary-instruments{gap:9px}.secondary-instruments label{font-size:15px}.masthead nav{gap:24px}}

/* A single overhead perspective follows the entire circuit. */
.overhead-car{display:block;width:100%;height:100%;object-fit:contain}.perimeter-track .race-car,.perimeter-track .race-car[data-view=overhead]{width:60px;height:98px;transform-origin:50% 50%}.race-car .vehicle-sprite{display:none}.perimeter-track .tow-truck{width:54px;height:88px;transform-origin:50% 50%}.runoff-grass{fill:none;stroke:url(#runoffGrass);stroke-width:190}.runoff-gravel{fill:none;stroke:url(#runoffGravel);stroke-width:99}
body[data-view=arena] .masthead{padding-top:124px;height:210px}.arena{padding-inline:132px;min-height:calc(100dvh - 315px)}
@media(max-width:600px){.perimeter-track .race-car,.perimeter-track .race-car[data-view=overhead]{width:36px;height:58px}.perimeter-track .tow-truck{width:31px;height:51px}.runoff-grass{stroke-width:102}.runoff-gravel{stroke-width:52}body[data-view=arena] .masthead{padding-top:69px;height:151px}body[data-view=arena] .masthead nav{gap:16px}body[data-view=arena] .masthead .nav{font-size:18px}.arena,.arena:has(.note-answers){padding-inline:64px;min-height:calc(100dvh - 236px)}.arena:has(.mallet-answers){padding-inline:56px}.arena:has(.mallet-answers) .game-top,.arena:has(.mallet-answers) .game-metrics{margin-inline:8px}}

/* Recovery is a timed game state; motion only illustrates the penalty. */
.recovery-status{position:relative;width:max-content;max-width:100%;margin:16px auto 0;padding:3px 4px 8px;font:20px/1.3 var(--hand);color:var(--red)}
.recovery-status:after{content:'';position:absolute;bottom:0;left:0;height:4px;background:var(--red);width:100%;transform-origin:left;animation:recovery-fill 3s linear both;border-radius:40%}
body:has(#pauseDialog[open]) .recovery-status:after{animation-play-state:paused}
.answer.is-correct:disabled{opacity:1!important}
@keyframes recovery-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.recovery-status:after{animation:none}}

/* A layered cartoon: readable lettering, a helmeted note, and cloth in motion. */
.logo{overflow:visible;padding:0;flex-shrink:0;background:none;border:0;cursor:pointer}
.logo:disabled{opacity:1;cursor:default}
.logo .logo-stage{display:block;width:100%;height:auto;aspect-ratio:1800 / 650;filter:drop-shadow(1px 4px 0 #6f57332c);pointer-events:none}
.logo:focus-visible{outline:3px solid var(--blue);outline-offset:7px}
@media(prefers-reduced-motion:reduce){.logo .logo-stage{transform:none!important}}

.volume-control{display:flex;flex-direction:column;gap:0;min-width:100px;width:120px;font:17px/1.2 var(--hand);color:var(--ink)}.volume-control>span{display:flex;align-items:center;justify-content:space-between;gap:10px}.volume-control output{font:14px/1.2 Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted)}.volume-control input{width:100%;min-height:32px;margin:0;accent-color:var(--paint);cursor:pointer}.volume-control input:focus-visible{outline:2px solid var(--paint);outline-offset:3px;border-radius:4px}
@media(max-width:800px){.volume-control{width:100px;min-width:80px}.masthead{gap:18px}.masthead nav{gap:20px}}
@media(max-width:600px){.masthead .tools{gap:10px}.masthead nav{gap:18px}.volume-control{width:90px;font-size:16px}.volume-control output{font-size:12px}body[data-view=arena] .volume-control{width:85px}}