:root{--app-accent:#FF8A1F;--accent-text:#FFAD62;--bg:#0b1016;--panel:#111a23;--raised:#1c2834;--line:#2b3743;--fg:#edf1f5;--muted:#a5b3c0;--cyan:#68d5e5;--green:#86d9a5;--danger:#f299a5}
:root[data-theme=light]{--bg:#f1f0eb;--panel:#fffefa;--raised:#eae9e3;--line:#d8d7ce;--fg:#202a34;--muted:#586674;--accent-text:#9b4700;--cyan:#087f91;--green:#277647;--danger:#a92f45}
.app-header{min-height:66px}.app-header>strong{font:12px var(--mono);letter-spacing:.1em}.app-header>strong>span{color:var(--muted);font-size:10px;margin-left:12px}.app-main{max-width:1560px;padding-top:38px}.eyebrow{color:var(--accent-text);font-size:10px}button{touch-action:manipulation}button.primary,button.primary[aria-pressed=true]{color:#211407;background:var(--app-accent)}button[aria-pressed=true]{color:var(--fg)}input,select,textarea{font-size:16px}input[type=checkbox]{width:17px;height:17px;min-height:17px;accent-color:var(--app-accent)}button:disabled{opacity:.4}.arena-intro{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin-bottom:32px}.arena-intro h1{font-family:var(--font);font-size:clamp(44px,5.4vw,78px);font-weight:600;letter-spacing:-.065em}.arena-intro h1 span{color:var(--app-accent)}.intro-copy{max-width:490px;justify-self:end}.intro-copy>p:first-child{font-size:19px;font-weight:600;color:var(--fg);margin-bottom:8px}.intro-copy>p{color:var(--muted);font-size:13px;line-height:1.7}.intro-facts{display:flex;gap:23px;margin-top:18px;color:var(--muted);font-size:10px}.intro-facts b{color:var(--accent-text);font:15px var(--mono);margin-right:4px}
.family-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:20px}.family-nav button{text-align:left;padding:15px 14px;background:var(--panel);border-radius:12px;min-width:0;position:relative}.family-nav button>span{display:block;font:10px var(--mono);color:var(--muted);margin-bottom:12px}.family-nav button>b{display:block;font-size:14px;line-height:1.4}.family-nav button>small{display:block;font-size:10px;font-weight:400;line-height:1.5;color:var(--muted);margin-top:5px}.family-nav button[aria-pressed=true]{background:color-mix(in srgb,var(--app-accent) 9%,var(--panel));border-color:var(--app-accent)}.family-nav button[aria-pressed=true]>span{color:var(--accent-text)}.family-nav button[aria-pressed=true]:after{content:'';width:6px;height:6px;border-radius:50%;background:var(--app-accent);position:absolute;right:13px;top:17px}
.arena-workbench{border:1px solid var(--line);border-radius:16px;background:var(--panel);min-width:0;overflow:clip;scroll-margin-top:16px}.problem-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 26px 20px}.problem-header>div:first-child{min-width:0;flex:1}.problem-header .eyebrow{margin-bottom:8px}.problem-header h2{font:600 clamp(22px,2.5vw,31px)/1.2 var(--font);letter-spacing:-.04em}.problem-header p:not(.eyebrow){font-size:12px;color:var(--muted);margin-top:9px}.problem-actions{display:flex;gap:7px;flex-wrap:wrap}.problem-actions button{font-size:11px;background:transparent;padding-inline:12px}.strategy-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:14px 26px;border-block:1px solid var(--line);background:color-mix(in srgb,var(--bg) 45%,var(--panel))}.strategy-row>label{display:flex;align-items:center;gap:10px;font-size:11px}.strategy-row select{width:auto;min-width:180px}.strategy-row .compare-toggle{cursor:pointer;min-height:44px}.complexity-badge{margin-left:auto;font:10px/1.5 var(--mono);color:var(--muted);max-width:250px}
.input-deck{padding:18px 26px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 25%,var(--panel))}.input-heading{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:13px}.input-heading strong{font:10px var(--mono);color:var(--accent-text)}.input-heading span{font-size:11px;color:var(--muted)}.input-fields{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.input-fields>label{flex:1 1 160px;min-width:0;max-width:260px;font-size:11px}.input-fields>label.wide{flex:3 1 320px;max-width:none}.input-fields>label.short{flex:0 1 125px}.input-fields input,.input-fields select,.input-fields textarea{display:block;margin-top:5px}.input-fields textarea{min-height:54px;line-height:1.5;font-size:14px;resize:vertical}.input-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-top:12px}.preset-buttons{display:flex;gap:6px;flex-wrap:wrap}.preset-buttons button{font-size:11px;padding:7px 11px;background:transparent}.input-bottom>.primary{font-size:12px}.field-error{color:var(--danger);font-size:12px;margin-top:10px}.input-fields [aria-invalid=true]{border-color:var(--danger)}.paint-deck{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 26px;border-bottom:1px solid var(--line)}.paint-tools{display:flex;flex-wrap:wrap;gap:5px}.paint-tools button{font-size:11px;padding-inline:12px}.paint-deck>label{display:flex;align-items:center;gap:8px;font-size:11px}.paint-deck select{width:65px}.cell-editor{display:flex;align-items:center;gap:8px;margin-left:auto}.cell-editor label{display:flex;align-items:center;gap:6px;font-size:10px}.cell-editor input{width:64px;padding-inline:8px}.cell-editor button{font-size:11px;padding-inline:10px}
.transport{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:10;box-shadow:0 4px 14px #0000000a}.transport-actions{display:flex;gap:6px;flex-wrap:wrap}.transport-actions button{font-size:11px;padding-inline:13px}.speed-control{display:flex;align-items:center;gap:8px;font-size:11px;margin-left:auto}.speed-control select{width:146px;font-size:14px}.step-count{font:10px var(--mono);color:var(--muted);min-width:98px;text-align:right}.experiment-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;min-width:0}.visual-stage{min-width:0;align-self:start}.visual-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:13px 18px}.visual-toolbar>span{display:flex;align-items:center;gap:8px;font-size:11px}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--app-accent)}.view-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.view-switch{display:flex;gap:4px}.view-switch button{font-size:10px;padding-inline:10px;background:transparent}.values-toggle{display:flex;align-items:center;gap:6px;font-size:10px;min-height:44px}.arena-pair{display:grid;grid-template-columns:minmax(0,1fr)}.arena-pair.comparing{grid-template-columns:repeat(2,minmax(0,1fr))}.arena-lane{min-width:0}.arena-lane+ .arena-lane{border-left:1px solid var(--line)}.lane-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:5px 18px 10px}.lane-heading b{font:600 12px var(--font)}.lane-heading span{font:9px var(--mono);color:var(--muted)}.scene-wrap{position:relative;height:420px;min-width:0;background:var(--bg);isolation:isolate}.scene-wrap canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-3px}.lane-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}.lane-stats>div{background:var(--panel);padding:12px 13px;min-width:0}.lane-stats strong{display:block;font:21px var(--mono);color:var(--accent-text);overflow-wrap:anywhere}.lane-stats span{display:block;font-size:9px;color:var(--muted);margin-top:6px}.lane-message{padding:12px 18px;min-height:58px;font-size:11px;line-height:1.65;color:var(--muted)}.scene-legend{display:flex;gap:15px;flex-wrap:wrap;padding:12px 18px 4px;font-size:10px;color:var(--muted)}.scene-legend span{display:flex;align-items:center;gap:6px}.scene-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--swatch)}.scene-help{padding:6px 18px 12px;font-size:10px;line-height:1.7;color:var(--muted)}.timeline-control{padding:10px 18px 15px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 12px}.timeline-control>label{font:9px var(--mono);color:var(--accent-text)}.timeline-control>input{grid-column:1;min-width:0}.timeline-control output{grid-column:2;grid-row:2;font:11px var(--mono);color:var(--muted);min-width:58px;text-align:right}.walkthrough{min-width:0;border-left:1px solid var(--line);background:color-mix(in srgb,var(--bg) 25%,var(--panel))}.decision{padding:21px 20px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--app-accent) 5%,var(--panel))}.decision .eyebrow{font-size:9px;margin-bottom:10px}.decision h3{font-size:17px;line-height:1.4;letter-spacing:-.02em}.decision>p:last-child{font-size:12px;line-height:1.8;margin-top:10px;color:var(--muted)}.code-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:17px 18px 12px}.code-heading h3{font-size:12px}.code-heading span{font:9px var(--mono);color:var(--muted)}.pseudocode{padding:0 0 14px;margin:0;list-style:none;counter-reset:code}.pseudocode li{counter-increment:code;display:flex;gap:9px;align-items:baseline;padding:7px 16px;border-left:2px solid transparent;font:10px/1.6 var(--mono);color:var(--muted);overflow-wrap:anywhere}.pseudocode li:before{content:counter(code,decimal-leading-zero);font-size:9px;flex:none;opacity:.5}.pseudocode li.active{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--fg)}.understanding{padding:18px 20px;border-top:1px solid var(--line)}.understanding h3{font-size:12px;margin-bottom:8px}.understanding>p{font-size:11px;line-height:1.7;color:var(--muted)}.complexity{display:flex;gap:22px;flex-wrap:wrap;margin:14px 0}.complexity dt{font-size:9px;color:var(--muted)}.complexity dd{margin:5px 0 0;font:10px var(--mono);color:var(--accent-text)}.understanding .complexity-note{font-size:9px}.result-panel{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 25px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--app-accent) 6%,var(--panel))}.result-panel .eyebrow{font-size:9px;margin-bottom:6px}.result-panel h3{font-size:18px}.result-panel p:not(.eyebrow){font-size:12px;color:var(--muted);margin-top:7px}.result-panel button{flex:none;font-size:11px}.app-status{border-top:1px solid var(--line);padding:12px 25px;font-size:11px;color:var(--muted)}
.learning-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;margin-top:20px}.learning-grid>article,.evidence-card{padding:25px;border:1px solid var(--line);border-radius:14px;background:var(--panel);min-width:0}.learning-grid h2,.evidence-card h2{font:600 23px/1.3 var(--font);letter-spacing:-.035em}.learning-grid p:not(.eyebrow){color:var(--muted);font-size:12px;line-height:1.8;margin-top:12px}.prediction-options{display:flex;flex-direction:column;gap:8px;margin-top:16px}.prediction-options button{text-align:left;font-weight:400;font-size:12px;padding:11px 14px}.prediction-options button>b{font:11px var(--mono);color:var(--accent-text);margin-right:11px}.prediction-card .prediction-feedback{font-size:11px;min-height:40px}.prediction-feedback.correct{color:var(--green)!important}.context-card h3{font-size:13px;margin-top:19px}.context-card details{margin-top:16px;border-top:1px solid var(--line);padding-top:9px}summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:10px;font-size:12px;list-style:none}summary:before{content:'+';font:18px var(--mono);color:var(--accent-text)}details[open]>summary:before{content:'−'}.evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.section-heading button{font-size:10px}.evidence-card p{font-size:11px;color:var(--muted);line-height:1.7;margin:12px 0}.evidence-card summary{font-size:14px;font-weight:600}.comparison-table,.data-table{width:100%;border-collapse:collapse;font:10px/1.7 var(--mono)}.comparison-table th,.comparison-table td,.data-table th,.data-table td{text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}.comparison-table th,.data-table th{font-weight:500;color:var(--muted)}.comparison-table td strong{color:var(--accent-text);font-weight:500}.data-scroll{max-height:330px;overflow:auto;min-width:0;max-width:100%;scrollbar-color:var(--line) transparent}.data-table td.is-active{background:color-mix(in srgb,var(--app-accent) 20%,transparent);color:var(--accent-text)}.log-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:20px}.log-heading h3{font-size:12px}.log-heading span{font-size:10px;color:var(--muted)}#stepLog{padding-left:20px;color:var(--muted);font-size:11px;line-height:1.7}#stepLog li{padding:5px 0}.app-footer{margin-top:24px}.comparing .scene-wrap{height:360px}.comparing .lane-stats strong{font-size:17px}.comparing .lane-stats>div{padding:10px 9px}.comparing .lane-message{font-size:10px}
@media(min-width:1280px){.experiment-layout:has(.comparing){grid-template-columns:minmax(0,1fr) 260px}.comparing .scene-wrap{height:350px}}
@media(max-width:1160px){.experiment-layout{grid-template-columns:minmax(0,1fr)}.walkthrough{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:0}.decision{grid-row:1/3;border-right:1px solid var(--line)}.code-heading{grid-column:2}.pseudocode{grid-column:2}.understanding{grid-column:1/-1}.family-nav button{padding:13px 10px}.family-nav button>b{font-size:12px}.family-nav button>small{font-size:9px}.strategy-row{gap:12px}.complexity-badge{display:none}.scene-wrap{height:390px}.problem-header{align-items:start}.problem-actions{max-width:210px;justify-content:end}.input-deck,.strategy-row,.paint-deck{padding-inline:20px}}
@media(max-width:800px){.arena-intro{gap:20px;margin-bottom:24px}.arena-intro h1{font-size:49px}.intro-copy>p:first-child{font-size:16px}.intro-copy>p{font-size:11px}.intro-facts{gap:12px;flex-wrap:wrap}.family-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.family-nav button>span{margin-bottom:6px}.family-nav button>small{display:none}.family-nav button>b{font-size:12px}.learning-grid,.evidence-grid{grid-template-columns:1fr}.cell-editor{margin-left:0}.transport{padding:10px 12px}.transport-actions{flex:1 1 100%}.transport-actions button{flex:1;padding-inline:8px}.speed-control{margin-left:0}.step-count{margin-left:auto}.problem-header{padding:20px;flex-wrap:wrap;gap:15px}.problem-actions{max-width:none;justify-content:start}.problem-actions button{padding-inline:11px}.comparing .scene-wrap{height:280px}.lane-stats strong{font-size:18px}.lane-stats>div{padding:10px}.strategy-row>label{flex-wrap:wrap}.strategy-row select{min-width:150px}.scene-wrap{height:350px}.visual-toolbar{padding-inline:13px}.lane-heading{padding-inline:13px}}
@media(max-width:600px){.app-header>strong{font-size:10px;letter-spacing:.05em}.app-header>strong>span{display:none}.app-header a{font-size:10px}.app-header{gap:10px}.arena-intro{grid-template-columns:1fr;gap:17px}.intro-copy{justify-self:start;max-width:100%}.intro-copy>p:first-child{display:none}.intro-copy>p{font-size:12px}.intro-facts{margin-top:12px;gap:18px}.arena-intro .eyebrow{font-size:8px}.family-nav{gap:6px;margin-bottom:14px}.family-nav button{padding:11px 9px;border-radius:9px}.family-nav button:after{display:none}.family-nav button>span{font-size:8px}.family-nav button>b{font-size:11px}.problem-header{padding:18px 14px}.problem-header h2{font-size:24px}.problem-actions{width:100%}.problem-actions button{flex:1;font-size:10px}.strategy-row{padding:12px 14px;gap:10px}.strategy-row>label:first-child{flex-basis:100%;display:grid;grid-template-columns:65px 1fr}.strategy-row select{min-width:0;width:100%}.strategy-row #compareField{width:100%;display:grid;grid-template-columns:90px 1fr}.input-deck,.paint-deck{padding:14px}.input-fields{gap:10px}.input-fields>label{max-width:none}.input-fields>label.short{flex:1 1 85px}.input-fields>label.wide{flex-basis:100%}.input-fields textarea{font-size:16px}.input-bottom{gap:10px}.input-bottom>.primary{width:100%;font-size:12px}.input-heading{gap:7px}.input-heading span{font-size:10px}.preset-buttons{gap:5px}.preset-buttons button{font-size:10px;padding-inline:8px}.paint-deck{gap:9px}.paint-tools{flex:1 1 100%}.paint-tools button{flex:1;padding-inline:5px;font-size:10px}.cell-editor{width:100%;flex-wrap:wrap;gap:6px}.cell-editor label{flex:1}.cell-editor button{flex:1;font-size:10px}.transport-actions{gap:4px}.transport-actions button{font-size:10px;padding-inline:5px;white-space:nowrap}.speed-control select{font-size:16px;width:150px}.view-controls{gap:6px}.visual-toolbar>span{font-size:10px}.view-switch button{font-size:9px;padding-inline:7px}.view-controls{width:100%;justify-content:space-between}.scene-wrap{height:310px}.arena-pair.comparing{grid-template-columns:minmax(0,1fr)}.arena-lane+.arena-lane{border-left:0;border-top:1px solid var(--line)}.comparing .scene-wrap{height:280px}.scene-legend{gap:10px;padding-inline:13px;font-size:9px}.scene-help{padding-inline:13px}.walkthrough{grid-template-columns:1fr}.decision{grid-row:auto;border-right:0}.code-heading,.pseudocode,.understanding{grid-column:1}.decision,.understanding{padding:18px}.result-panel{flex-wrap:wrap;padding:18px}.result-panel button{width:100%}.app-status{padding:12px 14px}.learning-grid>article,.evidence-card{padding:20px 17px}.learning-grid h2,.evidence-card h2{font-size:21px}.section-heading{gap:10px;align-items:start}.section-heading button{font-size:9px;padding-inline:8px}.lane-message{padding:10px 13px}.app-footer{font-size:10px}}
@media(max-width:360px){.family-nav button>b{font-size:10px}.family-nav button{padding:10px 7px}.intro-facts{gap:11px;font-size:9px}.paint-tools button{font-size:9px}.transport-actions button{font-size:9px}.lane-stats strong{font-size:16px}.scene-wrap{height:290px}.view-switch button{padding-inline:5px}.scene-help{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.input-explainer{font-size:11px;color:var(--muted);line-height:1.8;padding-bottom:4px}.app-footer button{font-size:10px;background:transparent;padding:7px 10px}.header-label{white-space:nowrap}

/* Familiar stories and readable, progressive explanations. */
.intro-copy>p{font-size:14px}.family-nav button>small{font-size:11px}.problem-header p:not(.eyebrow){font-size:13px;line-height:1.6}
.story-card{display:grid;grid-template-columns:64px minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:start;padding:24px 26px;background:linear-gradient(110deg,color-mix(in srgb,var(--app-accent) 8%,var(--panel)),var(--panel));border-bottom:1px solid var(--line)}
.story-symbol{display:flex;align-items:center;justify-content:center;min-height:64px;border:1px solid color-mix(in srgb,var(--app-accent) 40%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--app-accent) 12%,var(--panel));color:var(--accent-text);font:600 16px var(--mono);white-space:nowrap}
.story-copy .eyebrow{margin-bottom:7px}.story-copy h3{font-size:21px;line-height:1.3;letter-spacing:-.02em}.story-copy>p:not(.eyebrow),.story-map>p{font-size:14px;line-height:1.7;color:var(--muted);margin-top:8px}.story-copy .story-goal{font-size:13px;color:var(--fg);margin-top:12px}.story-goal b{color:var(--accent-text);margin-right:7px}.story-map{padding:3px 0 0 22px;border-left:1px solid var(--line)}.story-map>b{font-size:12px}.story-map>span{display:block;margin-top:13px;font-size:11px;line-height:1.7;color:var(--accent-text)}
.experiment-layout{grid-template-columns:minmax(0,1fr) 340px}.walkthrough{display:block}.guide-heading{padding:17px 20px;border-bottom:1px solid var(--line)}.guide-heading>span{font:10px var(--mono);letter-spacing:.07em;color:var(--accent-text)}.guide-heading label{display:flex;align-items:center;gap:8px;font-size:11px;margin-top:10px}.guide-heading select{min-width:0;max-width:100%;font-size:14px}
.decision{border-right:0;padding:19px 20px}.decision h3{font-size:21px;line-height:1.35}.decision>p[id]{font-size:14px;line-height:1.65;color:var(--fg);margin-top:5px}.decision>p.guide-label{font-size:11px;font-weight:600;color:var(--accent-text);margin:18px 0 0}.decision #decisionPhase{font-size:10px;color:var(--accent-text);margin:0 0 9px}.guide-next{width:100%;margin-top:20px;background:color-mix(in srgb,var(--app-accent) 10%,var(--panel));font-size:12px;border-color:color-mix(in srgb,var(--app-accent) 50%,var(--line));color:var(--accent-text)}
.simple-recipe,.technical-details{padding:8px 18px;border-bottom:1px solid var(--line)}.simple-recipe summary,.technical-details summary{font-size:12px;line-height:1.5}.simple-recipe .pseudocode{margin-inline:-18px}.simple-recipe .pseudocode li{font:12px/1.65 var(--font);padding-block:9px}.technical-details .understanding,.technical-details .code-heading{padding-inline:0}.technical-details .pseudocode{margin-inline:-18px}.technical-step{font-size:12px;line-height:1.7;color:var(--muted);margin:8px 0}.lane-message,.comparing .lane-message{font-size:13px;line-height:1.7}.lane-heading span{font-size:11px}.lane-stats span{font-size:10px}.scene-help{font-size:12px}.scene-legend{font-size:11px}.transport-actions button{font-size:12px}.speed-control select{width:180px}.input-heading span{font-size:12px;line-height:1.6}.input-fields>label{font-size:12px}.input-fields .input-explainer{font-size:12px}.preset-buttons button[aria-pressed=true]{border-color:var(--app-accent);background:var(--app-accent);color:#241508;box-shadow:0 0 0 1px var(--app-accent)}.preset-buttons button[aria-pressed=true]::before{content:"✓";margin-right:6px}.pack-grid button[aria-pressed=true]{border-color:var(--app-accent);box-shadow:inset 0 0 0 1px var(--app-accent),0 4px 0 color-mix(in srgb,var(--app-accent) 30%,var(--bg));background:color-mix(in srgb,var(--app-accent) 10%,var(--panel))}
.try-and-learn{display:grid;grid-template-columns:1.15fr 1fr;gap:30px;margin-top:20px;padding:24px 26px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.try-and-learn h2{font-size:22px;line-height:1.35;letter-spacing:-.03em}.try-and-learn p:not(.eyebrow){font-size:14px;line-height:1.7;color:var(--muted);margin-top:10px}.word-helper{min-width:0}.word-helper summary{font-size:14px}.word-helper dl{margin:8px 0}.word-helper dl>div+div{margin-top:13px}.word-helper dt{font-size:13px;color:var(--accent-text);font-weight:600}.word-helper dd{margin:4px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}.learning-grid p:not(.eyebrow),.prediction-options button{font-size:14px}.prediction-card .prediction-feedback{font-size:13px}.learning-grid details p{font-size:12px}
@media(min-width:1280px){.experiment-layout:has(.comparing){grid-template-columns:minmax(0,1fr) 320px}}
@media(max-width:1160px){.experiment-layout{grid-template-columns:minmax(0,1fr)}.walkthrough{display:grid;grid-template-columns:1fr 1fr}.guide-heading{grid-column:1/-1}.decision{grid-column:1;grid-row:2/4}.simple-recipe,.technical-details{grid-column:2;align-self:start}.story-card{grid-template-columns:54px 1fr;gap:17px}.story-symbol{min-height:54px;font-size:13px}.story-map{grid-column:2;border-left:0;border-top:1px solid var(--line);padding:13px 0 0}.story-map>span{margin-top:8px}}
@media(max-width:700px){.story-card{padding:20px 16px;grid-template-columns:44px minmax(0,1fr);gap:13px}.story-symbol{min-height:44px;font-size:11px;border-radius:12px}.story-copy h3{font-size:19px}.story-map{grid-column:1/-1}.story-copy>p:not(.eyebrow),.story-map>p{font-size:13px}.walkthrough{display:block}.decision{border-right:0}.try-and-learn{grid-template-columns:1fr;gap:15px;padding:20px 17px}.try-and-learn h2{font-size:20px}.word-helper{border-top:1px solid var(--line);padding-top:10px}.transport-actions button{font-size:10px}.speed-control select{font-size:16px;width:180px}.scene-help{font-size:11px}.input-heading span{font-size:11px}.family-nav button>small{display:none}.lane-message,.comparing .lane-message{font-size:12px}.intro-copy>p{font-size:13px}.decision h3{font-size:20px}}
@media(min-width:701px) and (max-width:1160px){.walkthrough{grid-template-rows:auto min-content 1fr}}
.try-and-learn h2{font-family:var(--font);font-weight:600}

/* The card table keeps its tools beside the experiment. */
.card-controls{display:flex;align-items:end;flex-wrap:wrap;gap:12px;padding:13px 18px;border-block:1px solid var(--line);background:color-mix(in srgb,var(--app-accent) 4%,var(--panel))}.card-controls>label{display:grid;gap:5px;font-size:11px;color:var(--muted)}.card-controls select{font-size:13px;min-width:118px;width:auto}.card-controls .motion-toggle{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--fg);font-size:12px}.card-controls>span{flex:1 1 100%;font-size:11px;color:var(--muted);line-height:1.5}.card-controls input{accent-color:var(--app-accent)}.arena-card-canvas:focus-visible{outline:2px solid var(--app-accent);outline-offset:-3px}
.card-inspector{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px;border-block:1px solid var(--line);background:color-mix(in srgb,var(--app-accent) 5%,var(--panel))}.card-inspector>label{font-size:11px;flex:0 1 220px;min-width:0}.card-inspector select{display:block;font-size:13px;margin-top:6px;max-width:100%;min-width:0}.card-insight{flex:1 1 180px;min-width:0}.card-insight>strong{font-size:13px;color:var(--accent-text)}.card-insight>p{font-size:12px;line-height:1.6;color:var(--muted);margin-top:5px}.card-edit{display:flex;align-items:end;gap:7px;flex-wrap:wrap}.card-edit>label{font-size:10px}.card-edit input{display:block;width:76px;margin-top:4px;font-size:16px}.card-edit button{font-size:11px}.card-edit #clearCard{font-size:20px;padding-inline:14px}.card-inspector .field-error{flex:1 1 100%;margin:0}
.experiment-library{padding:4px 26px 7px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 30%,var(--panel))}.experiment-library>summary{font-size:12px;font-weight:600;gap:12px}.experiment-library>summary>span:last-child{font:10px var(--mono);font-weight:400;color:var(--accent-text);margin-left:auto}.experiment-library>p{font-size:12px;color:var(--muted);line-height:1.6;margin:5px 0 16px}.pack-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-bottom:17px;perspective:1200px}.pack-grid button{display:flex;flex-direction:column;gap:10px;min-width:0;padding:17px;text-align:left;border-radius:12px;background:linear-gradient(150deg,color-mix(in srgb,var(--app-accent) 6%,var(--panel)),var(--bg));box-shadow:0 5px 0 color-mix(in srgb,var(--bg) 65%,var(--line));transition:transform .18s ease,border-color .18s ease}.pack-grid button>strong{font-size:15px;line-height:1.35}.pack-grid button>span:not(.pack-number){font-size:12px;font-weight:400;line-height:1.6;color:var(--muted)}.pack-grid .pack-number{font:9px var(--mono);letter-spacing:.05em;color:var(--accent-text)}.pack-grid small{color:var(--accent-text);font-size:11px;margin-top:auto;padding-top:7px}.pack-challenge{padding:13px 26px;font-size:13px;line-height:1.7;background:color-mix(in srgb,var(--app-accent) 7%,var(--panel));color:var(--accent-text);border-bottom:1px solid var(--line)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.family-nav button{transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 3px 0 color-mix(in srgb,var(--bg) 60%,var(--line))}.family-nav button:hover{transform:translateY(-3px)}.pack-grid button:hover{transform:translateY(-4px) rotateX(3deg);border-color:var(--app-accent)}}
@media(max-width:1160px){.pack-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-controls{gap:10px}.card-controls select{font-size:16px}.card-inspector select{font-size:16px}}
@media(max-width:600px){.experiment-library{padding-inline:14px}.pack-grid{gap:9px}.pack-grid button{padding:12px}.pack-grid button>strong{font-size:13px}.pack-grid button>span:not(.pack-number){font-size:11px}.experiment-library>summary{font-size:11px;gap:7px}.experiment-library>summary>span:last-child{font-size:9px}.pack-challenge{padding:12px 14px;font-size:12px}.card-controls{padding:12px 13px}.card-controls>label{flex:1 1 100px}.card-controls select{width:100%;min-width:0}.card-controls .motion-toggle{flex-basis:100%}.card-controls>span{font-size:10px}.card-inspector{padding:14px 13px;gap:11px}.card-inspector>label{flex-basis:100%}.card-edit{width:100%}.card-edit>label{flex:1}.card-edit input{width:100%}.card-edit button{font-size:10px}.card-insight>p{font-size:11px}}
@media(max-width:360px){.pack-grid{grid-template-columns:1fr}}

/* One shared 3D workbench for every problem family. */
.arena-world-canvas:focus-visible{outline:2px solid var(--app-accent);outline-offset:-3px}.world-caption{padding:11px 18px;margin:0;border-block:1px solid var(--line);background:color-mix(in srgb,var(--app-accent) 7%,var(--panel));font-size:12px;line-height:1.6;color:var(--fg)}
@media(max-width:600px){.world-caption{padding:10px 13px;font-size:11px}}

.scene-wrap.world-active{height:520px}.comparing .scene-wrap.world-active{height:420px}@media(max-width:600px){.scene-wrap.world-active,.comparing .scene-wrap.world-active{height:420px}}

/* Explain the route objective before asking learners to choose an algorithm. */
.route-objective{padding:22px 26px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--app-accent) 3%,var(--panel))}.route-objective-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.route-objective-heading .eyebrow{font-size:9px;margin-bottom:6px}.route-objective-heading h3{font:600 21px/1.3 var(--font);letter-spacing:-.03em}.route-objective-heading>button{font-size:12px;flex:none;background:transparent;border-color:color-mix(in srgb,var(--app-accent) 55%,var(--line));color:var(--accent-text)}
.route-goal-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.route-goal-options button{position:relative;display:grid;align-content:start;gap:7px;text-align:left;padding:17px 18px;border-radius:12px;background:var(--bg);min-width:0}.route-goal-options strong{font-size:20px;color:var(--fg)}.route-goal-options button>span:not(.route-goal-symbol){font-size:13px;line-height:1.6;font-weight:400;color:var(--muted)}.route-goal-options .route-goal-symbol{font:12px var(--mono);color:var(--accent-text);min-height:20px}.route-goal-options small{font-size:11px;color:var(--muted);font-weight:400;margin-top:3px}.route-goal-options button[aria-pressed=true]{background:color-mix(in srgb,var(--app-accent) 10%,var(--panel));border-color:var(--app-accent)}.route-goal-options button[aria-pressed=true]::after{content:'Selected';position:absolute;right:16px;top:16px;font:10px var(--mono);color:var(--accent-text)}.route-goal-options button:focus-visible{outline:2px solid var(--app-accent);outline-offset:3px}
.route-goal-explanation{margin-top:15px;font-size:14px;line-height:1.7;color:var(--fg);max-width:950px}.route-goal-switch-note{font-size:11px;line-height:1.6;color:var(--muted);margin-top:6px}.terrain-hint{flex:1 1 100%;font-size:12px;line-height:1.65;color:var(--muted);max-width:1050px}.route-lane-goal{display:flex;flex-wrap:wrap;gap:4px 12px;padding:10px 18px;border-block:1px solid var(--line);background:color-mix(in srgb,var(--app-accent) 6%,var(--panel));font-size:12px;line-height:1.6}.route-lane-goal b{color:var(--accent-text)}.route-lane-goal span{color:var(--muted)}.route-reason{padding:13px 18px;font-size:12px;line-height:1.7;color:var(--muted);border-bottom:1px solid var(--line)}.route-reason>b{color:var(--fg)}.route-bill{display:block;margin-top:7px;font:11px/1.8 var(--mono);color:var(--fg);overflow-wrap:anywhere}.route-bill strong{color:var(--accent-text);font-size:14px}
@media(max-width:700px){.route-objective{padding:18px 14px}.route-objective-heading{align-items:start;flex-wrap:wrap;gap:10px}.route-objective-heading h3{font-size:19px}.route-objective-heading>button{font-size:11px}.route-goal-options{gap:8px}.route-goal-options button{padding:13px 11px}.route-goal-options strong{font-size:17px}.route-goal-options button>span:not(.route-goal-symbol){font-size:12px}.route-goal-options small{font-size:10px}.route-goal-options .route-goal-symbol{font-size:10px;margin-bottom:14px}.route-goal-options button[aria-pressed=true]::after{top:35px;left:11px;right:auto;font-size:9px}.route-goal-explanation{font-size:13px}.terrain-hint,.route-lane-goal,.route-reason{font-size:11px}.route-lane-goal,.route-reason{padding-inline:13px}}
/* 2026-10-21 review: keyboard hint and light-theme heading contrast (large text >= 3:1). */
.key-hint{font:10px var(--mono);color:var(--muted)}
@media(max-width:800px),(hover:none){.key-hint{display:none}}
:root[data-theme=light] .arena-intro h1 span{color:#C85A00}