/* Pastel desktop collage: original CSS shapes and locally bundled open-source type. */
@font-face{font-family:Pixelify;src:url('fonts/PixelifySans.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
:root{--ink:#3c3444;--muted:#66566c;--paper:#e5f2fa;--line:#a891a5;--green:#6c3d70;--lime:#f6ffb8;--orange:#e5d2fc;--pink:#f5add3;--lavender:#c7a2f2;--blue:#addcf2;--yellow:#f5ffb7;--edge:#64546c}
body{background-color:var(--paper);background-image:linear-gradient(#fff9 1px,transparent 1px),linear-gradient(90deg,#fff9 1px,transparent 1px);background-size:28px 28px;font-family:Pixelify,'Courier New',monospace;font-size:18px;line-height:1.6;color:var(--ink)}
.shell{max-width:1180px;padding:0 34px}header{border:1px solid var(--edge);border-radius:0;padding:10px 15px;margin-top:22px;background:#f9e6ef;box-shadow:4px 4px 0 #c9a8d5;gap:15px}.brand{font-family:inherit;font-size:16px;font-weight:500;letter-spacing:1px}.brand-icon{background:var(--lavender);color:var(--ink);border:1px solid var(--edge);border-radius:0;padding:0 8px;font-size:24px;line-height:1.3;box-shadow:2px 2px 0 var(--pink);transform:rotate(-5deg)}.course{border-color:var(--edge);font-size:12px;font-weight:400}.duration{font:400 13px Pixelify,monospace;color:var(--ink);letter-spacing:.5px}
.intro{padding:40px 0 25px;gap:20px;grid-template-columns:1.7fr 1fr}.intro .eyebrow{background:var(--yellow);border:1px solid var(--edge);box-shadow:3px 3px 0 var(--lavender);padding:3px 10px;display:inline-block;transform:rotate(-2deg);font-size:12px;color:var(--ink);letter-spacing:.5px}.eyebrow{font-family:inherit;color:#76517e;font-size:13px;letter-spacing:1px;font-weight:500}h1{font-family:Pixelify,monospace;font-size:clamp(38px,5vw,64px);line-height:1.05;font-style:normal;font-weight:500;letter-spacing:-1.2px;color:var(--ink);text-shadow:3px 3px 0 #fff;margin:20px 0}h1 span{color:#785282;letter-spacing:-1.7px;font-size:.88em;text-shadow:2px 2px white}.lead{font:400 17px/1.6 Pixelify,monospace;color:var(--muted);max-width:650px}h2{font:500 34px/1.1 Pixelify,monospace;letter-spacing:-.5px;color:var(--ink)}h3{font:500 25px/1.2 Pixelify,monospace;color:var(--ink)}b,strong{font-weight:600}.hero-art{height:260px;position:relative}.desktop-collage{display:block;width:100%;max-width:360px;height:100%;overflow:visible}.model-note{background:#fff6f0;border:1px solid var(--edge);border-radius:0;box-shadow:4px 4px 0 #efc3d7;color:var(--ink);font-size:15px;padding:13px 17px}.model-note b{color:#754576}
.steps{gap:12px;padding:28px 0 23px}.steps button{background:#f2e5fa;border:1px solid var(--edge);border-radius:0;padding:10px 14px;font-family:inherit;font-weight:400;font-size:17px;color:var(--ink);box-shadow:3px 3px 0 #bc9bc8;text-align:left}.steps span{font:400 14px Pixelify,monospace;border:1px solid var(--edge);border-radius:0;background:#fff9f3;color:var(--ink);width:24px;height:24px}.steps [aria-current]{background:var(--pink);border-color:var(--edge);color:var(--ink);font-weight:500;box-shadow:3px 3px 0 #9f7cae}.steps [aria-current] span{background:var(--yellow);border-color:var(--edge);color:var(--ink)}.steps button:disabled{opacity:1;background:#f5eaf0;color:#746775;box-shadow:3px 3px 0 #d5bfce;border-color:#b29bab}
main{position:relative;background:#fff9f1;border:1px solid var(--edge);border-radius:3px;padding:66px 30px 30px;margin-bottom:26px;box-shadow:6px 6px 0 #c0a2d6;overflow:hidden}main:before{content:'● ● ●    THE_AI_RACE.exe';position:absolute;inset:0 0 auto;height:34px;background:#f7bfcd;color:#574157;border-bottom:1px solid var(--edge);padding-left:13px;font:400 15px/34px Pixelify,monospace}main:after{content:'_  □  ×';position:absolute;right:10px;top:5px;color:#574157;font:400 18px/22px Pixelify,monospace;pointer-events:none}p{font-size:inherit}.two-col{gap:28px;align-items:start}.two-col>div>p{font-size:17px}.tag{background:var(--blue);font:400 13px/1.3 Pixelify,monospace;letter-spacing:.7px;color:var(--ink);border:1px solid var(--edge);border-radius:0;padding:5px 9px;box-shadow:2px 2px #cfbedc}.small{font-size:15px;color:var(--muted)}
.choices{gap:12px}.choice{border:1px solid var(--edge);border-radius:0;background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 #bac888;padding:15px 17px;font-family:inherit;gap:14px}.choice b{font-size:20px;font-weight:500}.choice small{color:var(--muted);font-size:15px;margin-top:0}.choice-icon{font-size:30px;color:#66506f}.rush{background:#e0cef9;border-color:var(--edge);box-shadow:3px 3px 0 #b59fcb}.choice:hover:not(:disabled){filter:none;background:#fffed7;box-shadow:4px 4px 0 #b2c078}.rush:hover:not(:disabled){background:#efe3ff;box-shadow:4px 4px 0 #b59fcb}.choice:active:not(:disabled),.primary:active,.secondary:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #a18caa}.choice:disabled{opacity:.65}
.matrix-card{position:relative;background:#f6ffd7;border:1px solid var(--edge);border-radius:2px;padding:49px 19px 18px;box-shadow:4px 4px 0 #edaac4}.matrix-card:before{content:'PAYOFF_MATRIX';position:absolute;top:0;left:0;right:0;background:#c5adee;border-bottom:1px solid var(--edge);padding:3px 12px;font-size:15px;letter-spacing:1px;color:var(--ink)}.matrix-card h3{font-size:24px}.matrix{font-size:14px;border-spacing:5px}.matrix td,.matrix th{padding:8px 3px;font-weight:400}.matrix td[data-pair]{background:#fffdf3;border:1px solid #9d8ca0;border-radius:0;box-shadow:2px 2px 0 #d9dbaa}.matrix b{font:500 29px/1.2 Pixelify,monospace;color:var(--ink)}.matrix small{font-size:12px;color:#69576c}.matrix caption{font-size:14px;padding-top:12px}.matrix caption b{font:500 14px Pixelify,monospace}.matrix td.selected{outline:3px solid #805193;outline-offset:-3px;background:#f3c1dd}
.result{border:1px solid var(--edge);border-left:5px solid #a97dc6;background:#f3e8fc;color:var(--ink);border-radius:0;font-size:17px;box-shadow:3px 3px 0 #d0b7df}.result h3{font-size:25px}.primary,.secondary{font:400 18px/1.3 Pixelify,monospace;border:1px solid var(--edge);border-radius:0;padding:10px 17px;min-height:44px;color:var(--ink);box-shadow:3px 3px 0 #a791b5;text-shadow:none}.primary{background:var(--pink)}.secondary{background:var(--yellow)}.primary:hover:not(:disabled),.secondary:hover:not(:disabled){filter:none;outline:1px solid #785284;outline-offset:2px}.lesson{border:1px solid var(--edge);border-radius:0;background:#f5edfd;padding:23px;font-size:17px;box-shadow:4px 4px 0 #d7c3e7}.lesson h3{font-size:27px}.callout{background:#eef9ff;border:1px solid var(--edge);border-radius:0;font-size:17px;padding:13px 17px;box-shadow:3px 3px 0 #bad8ea}.controls label{font-size:16px;font-weight:400}select{font:400 18px Pixelify,monospace;background:#fff6fa;color:var(--ink);border:1px solid var(--edge);border-radius:0;box-shadow:3px 3px #d1b2d6;padding:10px}
.scoreboard{border:1px solid var(--edge);border-radius:0;background:#c9e8f8;color:var(--ink);box-shadow:4px 4px #c1a0d6;padding:22px}.scoreboard span{font:400 15px Pixelify,monospace;letter-spacing:1px;color:#5d4c65}.scoreboard b{font:500 42px Pixelify,monospace;text-shadow:2px 2px white}.scoreboard .round b{font:500 21px Pixelify,monospace}.history{font-size:17px}.history caption{font:500 20px Pixelify,monospace;color:var(--ink)}.history th{color:#695170;background:#f7e9f3;font-weight:400;font-size:15px}.history td,.history th{border-color:#c6afc6}.history tbody tr:nth-child(even){background:#f4e9f9}
fieldset{background:#f9f1fc;border:1px solid var(--edge);border-radius:0;box-shadow:4px 4px #d8c6e7;padding:21px;margin-top:30px;min-width:0}legend{font:500 22px/1.35 Pixelify,monospace;color:var(--ink);padding:0 6px;max-width:100%}.answers button{font:400 18px/1.4 Pixelify,monospace;background:#fffdf2;border:1px solid var(--edge);border-radius:0;box-shadow:2px 2px #d6c4dd;color:var(--ink);min-height:44px}.answers button[aria-pressed=true]{border:2px solid #755084;background:#f6c7df;box-shadow:2px 2px #b29bc3;color:var(--ink)}.feedback{font-size:17px;color:#61426d}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #70428c;outline-offset:4px}footer{font:400 14px/1.6 Pixelify,monospace;color:#66516c;padding-top:6px}footer details{font-size:15px;letter-spacing:0}footer p{font-size:15px}a{color:#764185}.skip{background:var(--yellow);color:var(--ink)}
@media(max-width:700px){.shell{padding:0 17px}header{margin-top:17px;padding:9px 12px}.brand{font-size:15px}.brand-icon{font-size:23px}.intro{grid-template-columns:1fr;padding-top:31px;padding-bottom:18px}.intro .eyebrow{font-size:11px}.hero-art{display:none}h1{font-size:42px;letter-spacing:-1px;margin:19px 0}h1 span{font-size:.86em;letter-spacing:-1.3px}.lead{font-size:17px}.model-note{font-size:14px}.steps{gap:7px;padding-top:24px}.steps button{font-size:14px;padding:9px 7px;line-height:1.2}.steps span{display:grid;margin-bottom:7px;font-size:13px}main{padding:59px 17px 23px}main:before{font-size:12px}main:after{font-size:16px}.section-heading{gap:10px}h2{font-size:31px}.tag{font-size:11px;padding:4px 6px}.two-col{gap:23px}.matrix-card{padding:44px 12px 17px}.matrix{font-size:12px}.matrix b{font-size:28px}.matrix small{font-size:11px}.matrix caption,.matrix caption b{font-size:13px}.choice{padding:13px}.choice b{font-size:20px}.choice small{font-size:15px}.scoreboard{padding:19px 8px}.scoreboard span{font-size:12px;letter-spacing:.3px}.scoreboard b{font-size:36px}.scoreboard .round b{font-size:18px}.lesson{padding:18px}.history{font-size:14px}.history th{font-size:13px}.history td,.history th{padding:10px 4px}.controls{gap:15px}.actions{gap:15px}fieldset{padding:16px 13px}legend{font-size:21px}.answers button{font-size:17px}.feedback{font-size:17px}footer{font-size:13px}}
@media(forced-colors:active){h1,h1 span{color:CanvasText;text-shadow:none}.steps button,main,.choice,.primary,.secondary{border:1px solid ButtonText;box-shadow:none}main:before,main:after{display:none}}

.score-rule{margin:18px 0 0;padding:10px 14px;background:var(--yellow);border:1px solid var(--edge);box-shadow:3px 3px #b8c4d8;font:400 17px/1.4 Pixelify,monospace;color:var(--ink)}.score-rule b{font-weight:600}@media(max-width:700px){.score-rule{font-size:16px}}

/* Square-edged reading type echoes the pixel accents with smoother letterforms. */
@font-face{font-family:'Chakra Petch';src:url('fonts/ChakraPetch-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('fonts/ChakraPetch-SemiBold.ttf') format('truetype');font-weight:600 900;font-style:normal;font-display:swap}
:root{--reading-font:'Chakra Petch',Tahoma,Verdana,Arial,sans-serif}
body{font-family:var(--reading-font);font-size:17px;line-height:1.7}
.brand,.eyebrow,.steps button,.choice b,.matrix-card:before{font-family:Pixelify,'Courier New',monospace}
.brand{font-size:16px}.eyebrow{font-size:13px}.steps button{font-size:17px}
.lead{font:400 17px/1.75 var(--reading-font)}
.two-col>div>p{font-size:17px;line-height:1.75}
.model-note{font-size:14px;line-height:1.65}.small{font-size:14px;line-height:1.65}
.choice{font-family:var(--reading-font)}.choice b{font-size:21px}.choice small{font:400 14px/1.6 var(--reading-font)}
.matrix{font-family:var(--reading-font);font-size:13px;line-height:1.5}
.matrix b{font:600 27px/1.3 var(--reading-font);letter-spacing:1px}
.matrix small{font-size:11px;line-height:1.5;margin-top:2px}
.matrix caption,.matrix caption b{font:400 13px/1.6 var(--reading-font);letter-spacing:0}
.result,.lesson,.callout,.feedback{font-family:var(--reading-font);font-size:17px;line-height:1.75}
.controls label{font-family:var(--reading-font);font-size:14px}
select{font:400 16px/1.5 var(--reading-font)}
.score-rule{font:400 15px/1.65 var(--reading-font)}
.scoreboard b{font:600 36px/1.4 var(--reading-font);text-shadow:none}
.history{font:400 14px/1.6 var(--reading-font)}.history th{font-size:13px}
legend{font:600 19px/1.6 var(--reading-font);letter-spacing:0}
.answers button{font:400 17px/1.65 var(--reading-font)}
footer details,footer details p{font:400 13px/1.7 var(--reading-font)}
@media(max-width:700px){
 .brand{font-size:15px}.intro .eyebrow{font-size:11px}.steps button{font-size:14px}
 .lead,.two-col>div>p{font-size:17px}.model-note{font-size:14px}
 .choice b{font-size:20px}.choice small{font-size:14px}
 .matrix{font-size:12px}.matrix b{font-size:26px}.matrix small{font-size:11px}
 .matrix caption,.matrix caption b{font-size:12px}
 .score-rule{font-size:14px}.scoreboard b{font-size:32px}
 .history{font-size:13px}.history th{font-size:12px}
 legend{font-size:18px}.answers button{font-size:16px}
 .result,.lesson,.callout,.feedback{font-size:17px}
}

.mystery-badge{display:inline-block;background:var(--blue);border:1px solid var(--edge);padding:10px 14px;box-shadow:3px 3px #c3abd8;font:400 19px/1.4 Pixelify,monospace}.controls{align-items:center}.controls .secondary{margin-left:auto}#guessFeedback{padding:15px;border:1px solid var(--edge);background:#f6ffd7}#strategyGuesses{margin:18px 0}#strategyGuesses button:disabled{opacity:1}#strategyGuesses button[aria-pressed=true]{background:var(--pink);border:2px solid #755084}#strategyGuesses button[aria-pressed=false]{color:var(--muted)}

#firstExplanation h3:not(:first-child){margin-top:26px}#firstExplanation .tactic-list{margin:10px 0 18px;padding-left:24px}#firstExplanation .tactic-list li{padding:4px 0}#firstExplanation .small{margin-top:22px}
.model-note>b{color:#754576;font-weight:600}
