:root{--tfe-navy-50: #e8edf8;--tfe-navy-100: #c5d0ef;--tfe-navy-200: #8fa3df;--tfe-navy-300: #5977cf;--tfe-navy-400: #2f53c2;--tfe-navy-500: #1a3a8a;--tfe-navy-600: #152f72;--tfe-navy-700: #10245a;--tfe-navy-800: #0b1942;--tfe-navy-900: #060e2a;--tfe-cyan-50: #e0f9fe;--tfe-cyan-100: #b3f0fc;--tfe-cyan-200: #66e0f9;--tfe-cyan-300: #22cfef;--tfe-cyan-400: #06b6d4;--tfe-cyan-500: #0891b2;--tfe-cyan-600: #0e7490;--tfe-cyan-700: #155e75;--tfe-sun: #f6b73c;--tfe-coral: #f26d6d;--tfe-leaf: #3cb371;--tfe-grape: #8b5cf6;--tfe-primary: var(--tfe-navy-500);--tfe-primary-strong: var(--tfe-navy-700);--tfe-accent: var(--tfe-cyan-400);--tfe-accent-strong: var(--tfe-cyan-600);--tfe-bg: #f4f7fd;--tfe-surface: #ffffff;--tfe-surface-2: var(--tfe-navy-50);--tfe-text: #0f1b3d;--tfe-text-muted: #4b587a;--tfe-border: #d6deef;--tfe-success: var(--tfe-leaf);--tfe-warning: var(--tfe-sun);--tfe-danger: var(--tfe-coral);--tfe-focus: var(--tfe-cyan-400);--tfe-font: "Inter", "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--tfe-font-display: var(--tfe-font);--tfe-text-xs: .8rem;--tfe-text-sm: .95rem;--tfe-text-md: 1.1rem;--tfe-text-lg: 1.35rem;--tfe-text-xl: 1.8rem;--tfe-text-2xl: 2.4rem;--tfe-leading: 1.5;--tfe-space-1: .25rem;--tfe-space-2: .5rem;--tfe-space-3: .75rem;--tfe-space-4: 1rem;--tfe-space-5: 1.5rem;--tfe-space-6: 2rem;--tfe-space-7: 3rem;--tfe-space-8: 4rem;--tfe-radius-sm: .5rem;--tfe-radius: 1rem;--tfe-radius-lg: 1.5rem;--tfe-radius-pill: 999px;--tfe-shadow: 0 2px 6px rgba(15, 27, 61, .08), 0 8px 24px rgba(15, 27, 61, .08);--tfe-shadow-lg: 0 7px 32px rgba(15, 27, 61, .22);--tfe-tap: 48px;--tfe-gradient: linear-gradient(135deg, var(--tfe-navy-500) 0%, var(--tfe-cyan-400) 100%)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--tfe-bg: #0b1226;--tfe-surface: #141c36;--tfe-surface-2: #1b2547;--tfe-text: #eef2ff;--tfe-text-muted: #aab6d9;--tfe-border: #2b3864}}:root[data-theme=dark]{--tfe-bg: #0b1226;--tfe-surface: #141c36;--tfe-surface-2: #1b2547;--tfe-text: #eef2ff;--tfe-text-muted: #aab6d9;--tfe-border: #2b3864}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;touch-action:manipulation}body{margin:0;font-family:var(--tfe-font);font-size:var(--tfe-text-md);line-height:var(--tfe-leading);color:var(--tfe-text);background:var(--tfe-bg);min-height:100dvh;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}#root{min-height:100dvh;display:flex;flex-direction:column}h1,h2,h3{font-family:var(--tfe-font-display);font-weight:800;line-height:1.15;margin:0 0 var(--tfe-space-3);letter-spacing:-.01em}h1{font-size:clamp(1.7rem,4vw,var(--tfe-text-2xl))}h2{font-size:clamp(1.3rem,3vw,var(--tfe-text-xl))}h3{font-size:var(--tfe-text-lg)}p{margin:0 0 var(--tfe-space-3)}a{color:var(--tfe-primary)}button,input,select{font:inherit}:focus-visible{outline:3px solid var(--tfe-focus);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.app-header{display:flex;align-items:center;gap:var(--tfe-space-3);padding:var(--tfe-space-2) var(--tfe-space-4);background:var(--tfe-surface);border-bottom:1px solid var(--tfe-border);position:sticky;top:0;z-index:20;padding-top:max(var(--tfe-space-2),env(safe-area-inset-top))}.app-header .brand{display:flex;align-items:center;gap:var(--tfe-space-2);text-decoration:none;color:var(--tfe-primary);font-weight:800;font-size:var(--tfe-text-lg);min-height:var(--tfe-tap)}.app-header .brand img{width:40px;height:40px}.app-header .brand small{font-weight:600;color:var(--tfe-text-muted);font-size:var(--tfe-text-xs);display:block;line-height:1}.app-header nav{margin-left:auto;display:flex;gap:var(--tfe-space-1);flex-wrap:wrap;justify-content:flex-end}.app-header nav a{text-decoration:none;color:var(--tfe-text);padding:0 var(--tfe-space-3);min-height:44px;display:inline-flex;align-items:center;border-radius:var(--tfe-radius-pill);font-weight:600;font-size:var(--tfe-text-sm)}.app-header nav a.active,.app-header nav a:hover{background:var(--tfe-surface-2);color:var(--tfe-primary)}.offline-pill{background:var(--tfe-sun);color:#3a2a00;border-radius:var(--tfe-radius-pill);padding:2px 10px;font-size:var(--tfe-text-xs);font-weight:700}main.page{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:var(--tfe-space-4) var(--tfe-space-4) var(--tfe-space-8)}main.page.wide{max-width:1500px}main.page.lab-page{padding-bottom:var(--tfe-space-4)}.app-footer{text-align:center;color:var(--tfe-text-muted);font-size:var(--tfe-text-xs);padding:var(--tfe-space-4);border-top:1px solid var(--tfe-border)}.app-footer a{color:inherit}.build-stamp{opacity:.7}.beta-banner{display:flex;align-items:center;gap:var(--tfe-space-3);flex-wrap:wrap;padding:6px var(--tfe-space-4);background:var(--tfe-cyan-50);color:var(--tfe-navy-700);border-bottom:1px solid var(--tfe-cyan-200);font-size:var(--tfe-text-sm);font-weight:600}:root[data-theme=dark] .beta-banner{background:var(--tfe-navy-800);color:var(--tfe-cyan-100);border-color:var(--tfe-navy-600)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .beta-banner{background:var(--tfe-navy-800);color:var(--tfe-cyan-100);border-color:var(--tfe-navy-600)}}.beta-banner a{color:inherit;font-weight:800}.beta-env{margin-left:auto;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:var(--tfe-text-xs);background:var(--tfe-sun);color:#3a2a00;border-radius:var(--tfe-radius-pill);padding:2px 10px}.beta-close{border:0;background:transparent;color:inherit;font-size:1.4rem;line-height:1;width:44px;height:36px;border-radius:var(--tfe-radius-pill);cursor:pointer}.beta-close:hover{background:#00000014}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--tfe-space-2);min-height:var(--tfe-tap);padding:0 var(--tfe-space-5);border-radius:var(--tfe-radius-pill);border:2px solid transparent;background:var(--tfe-primary);color:#fff;font-weight:700;font-size:var(--tfe-text-md);cursor:pointer;text-decoration:none;transition:transform .08s ease,box-shadow .15s ease;box-shadow:var(--tfe-shadow);user-select:none;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:default}.btn.accent{background:var(--tfe-accent);color:var(--tfe-navy-900)}.btn.ghost{background:var(--tfe-surface);color:var(--tfe-primary);border-color:var(--tfe-border);box-shadow:none}.btn.big{font-size:var(--tfe-text-lg);min-height:64px;padding:0 var(--tfe-space-6)}.btn.small{min-height:44px;font-size:var(--tfe-text-sm);padding:0 var(--tfe-space-4)}.btn-row{display:flex;gap:var(--tfe-space-3);flex-wrap:wrap;align-items:center}.card{background:var(--tfe-surface);border:1px solid var(--tfe-border);border-radius:var(--tfe-radius-lg);padding:var(--tfe-space-5);box-shadow:var(--tfe-shadow)}.card.tight{padding:var(--tfe-space-4)}.grid{display:grid;gap:var(--tfe-space-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}.grid.devices{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}.tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--tfe-space-2);padding:var(--tfe-space-5) var(--tfe-space-4);background:var(--tfe-surface);border:2px solid var(--tfe-border);border-radius:var(--tfe-radius-lg);text-decoration:none;color:var(--tfe-text);font-weight:700;font-size:var(--tfe-text-lg);box-shadow:var(--tfe-shadow);transition:transform .1s ease,border-color .1s ease;min-height:160px;cursor:pointer;position:relative}.tile:hover,.tile:focus-visible{transform:translateY(-2px);border-color:var(--tfe-accent)}.tile .sub{font-weight:500;font-size:var(--tfe-text-sm);color:var(--tfe-text-muted)}.mode-tile{background:var(--tfe-gradient);color:#fff;border:0;min-height:200px;justify-content:center}.mode-tile .sub{color:#ffffffd9}.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:var(--tfe-text-xs);font-weight:800;color:var(--tfe-accent-strong);margin-bottom:var(--tfe-space-1)}.muted{color:var(--tfe-text-muted)}.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--tfe-radius-pill);padding:4px 12px;font-size:var(--tfe-text-xs);font-weight:700;background:var(--tfe-surface-2);color:var(--tfe-primary)}.toggle{display:inline-flex;align-items:center;gap:var(--tfe-space-2);min-height:44px;cursor:pointer;font-weight:600;font-size:var(--tfe-text-sm)}.field{display:flex;flex-direction:column;gap:var(--tfe-space-1);margin-bottom:var(--tfe-space-4)}.field label{font-weight:700;font-size:var(--tfe-text-sm)}.field input,.field select,.lab-band select{min-height:var(--tfe-tap);padding:0 var(--tfe-space-3);border-radius:var(--tfe-radius-sm);border:2px solid var(--tfe-border);background:var(--tfe-surface);color:var(--tfe-text);font-size:var(--tfe-text-md)}.field input.code{font-size:2rem;letter-spacing:.3em;text-transform:uppercase;text-align:center;font-weight:800;min-height:64px}.notice{border-radius:var(--tfe-radius);padding:var(--tfe-space-3) var(--tfe-space-4);font-weight:600;margin:var(--tfe-space-3) 0}.notice.ok{background:#e4f6ea;color:#14532d}.notice.nudge{background:#fff4d6;color:#5b3d00}.notice.error{background:#fde4e4;color:#7a1b1b}.kid{font-size:var(--tfe-text-lg);font-weight:600}.lab{display:grid;grid-template-columns:240px minmax(0,1fr) 300px;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"tabs tabs tabs" "tray stage inspector";gap:var(--tfe-space-3);min-height:calc(100dvh - 190px)}@media(max-width:1000px){.lab{grid-template-columns:1fr;grid-template-areas:"tabs" "stage" "inspector" "tray";min-height:0}}.lab-tabs{grid-area:tabs;display:flex;gap:var(--tfe-space-2);align-items:center;flex-wrap:wrap}.lab-tabs a{display:inline-flex;align-items:center;gap:6px;min-height:var(--tfe-tap);padding:0 var(--tfe-space-4);border-radius:var(--tfe-radius-pill);border:2px solid var(--tfe-border);background:var(--tfe-surface);color:var(--tfe-text);text-decoration:none;font-weight:700}.lab-tabs a.active{background:var(--tfe-primary);border-color:var(--tfe-primary);color:#fff}.lab-band{margin-left:auto}.lab-tray{grid-area:tray;overflow:auto}.lab-stage{grid-area:stage;display:grid;place-items:center;min-height:360px}.lab-inspector{grid-area:inspector;overflow:auto}.stage{background:var(--tfe-surface);border:1px solid var(--tfe-border);border-radius:var(--tfe-radius-lg);padding:var(--tfe-space-3);box-shadow:var(--tfe-shadow);position:relative;overflow:hidden}.stage-grid{position:absolute;inset:0;background-image:linear-gradient(var(--tfe-border) 1px,transparent 1px),linear-gradient(90deg,var(--tfe-border) 1px,transparent 1px);background-size:32px 32px;opacity:.5}.stage-center{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}.stage-controls{display:flex;gap:var(--tfe-space-3);align-items:center;flex-wrap:wrap;padding:var(--tfe-space-2) var(--tfe-space-1) 0}.tray-list{list-style:none;padding:0;margin:0 0 var(--tfe-space-3)}.tray-part{width:100%;display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 10px;border-radius:var(--tfe-radius-sm);border:2px solid transparent;background:transparent;color:var(--tfe-text);font-weight:600;font-size:var(--tfe-text-sm);text-align:left;cursor:pointer}.tray-part:hover{background:var(--tfe-surface-2)}.tray-part.selected{border-color:var(--tfe-accent);background:var(--tfe-cyan-50)}:root[data-theme=dark] .tray-part.selected{background:var(--tfe-navy-700)}.swatch{width:18px;height:18px;border-radius:6px;flex:none;border:2px solid rgba(0,0,0,.15)}.swatch.big{width:28px;height:28px;display:inline-block;vertical-align:middle}.part-card .analogy{background:var(--tfe-surface-2);border-radius:var(--tfe-radius);padding:var(--tfe-space-3)}.part-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:var(--tfe-space-3) 0 0;font-size:var(--tfe-text-sm)}.part-card dt{font-weight:800;color:var(--tfe-text-muted)}.part-card dd{margin:0}.challenge{display:flex;flex-direction:column;gap:var(--tfe-space-2)}.challenge-head{display:flex;align-items:center;gap:var(--tfe-space-3)}.challenge-icon{font-size:2rem;width:56px;height:56px;display:grid;place-items:center;background:var(--tfe-surface-2);border-radius:var(--tfe-radius)}.goals{margin:0;padding-left:0;list-style:none;font-size:var(--tfe-text-sm);flex:1}.goals li{padding:2px 0}.demo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:var(--tfe-space-4);align-items:start}@media(max-width:860px){.demo{grid-template-columns:1fr}}.arena-svg{width:100%;height:auto;display:block}.rover{transform:translate(70px,60px)}.rover.driving{animation:drive 12s linear infinite}@keyframes drive{0%{transform:translate(70px,60px) rotate(90deg)}23%{transform:translate(330px,60px) rotate(90deg)}25%{transform:translate(330px,60px) rotate(180deg)}48%{transform:translate(330px,200px) rotate(180deg)}50%{transform:translate(330px,200px) rotate(270deg)}73%{transform:translate(70px,200px) rotate(270deg)}75%{transform:translate(70px,200px) rotate(360deg)}98%{transform:translate(70px,60px) rotate(360deg)}to{transform:translate(70px,60px) rotate(450deg)}}@media(prefers-reduced-motion:reduce){.rover.driving{animation:none}}.splash{position:fixed;inset:0;background:var(--tfe-gradient);display:grid;place-items:center;color:#fff;z-index:100;animation:splash-out .5s ease 1.1s forwards}.splash img{width:140px;height:140px;background:#fff;border-radius:50%;padding:6px;animation:pop .5s ease both}.splash h1{margin-top:var(--tfe-space-4);text-align:center}@keyframes pop{0%{transform:scale(.6);opacity:0}}@keyframes splash-out{to{opacity:0;visibility:hidden}}