:root{--bg: #0b0e14;--panel: #11151f;--panel-2: #161b27;--line: #232a3a;--text: #e6e1e8;--muted: #9aa4b8;--dim: #7c8499;--accent: #8ab4f8;--play-h: clamp(180px, 25vh, 320px);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.hidden{display:none!important}html{scroll-behavior:smooth}.topbar{display:flex;align-items:baseline;gap:24px;padding:16px 24px;border-bottom:1px solid var(--line);background:var(--panel)}.toolbar-link{font-size:13px;color:var(--accent);border:1px solid var(--line);border-radius:6px;padding:6px 12px;white-space:nowrap}.toolbar-link:hover{background:var(--panel-2);border-color:var(--accent);text-decoration:none}.topbar .home{font-size:14px;color:var(--muted);white-space:nowrap}.title-block{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}.title-block h1{margin:0;font-size:22px}.learn-link{font-size:13px;color:var(--accent);white-space:nowrap}.learn-link:hover{text-decoration:underline}.teaches{margin:2px 0 0;color:var(--dim);font-size:13px}.game-layout{display:flex;flex-direction:column;gap:24px;padding:24px;max-width:1600px;margin:0 auto}@media (max-width: 640px){.game-layout{padding:14px;gap:18px}.topbar{padding:12px 14px;gap:14px}#fsm-panel{gap:10px}.fsm-card{padding:8px 10px}.fsm-card h3{font-size:13px;margin:0 0 4px}.fsm-chart{height:auto;min-height:0}.fsm.fsm-mode-code .fsm-source{max-height:65vh;margin-top:4px}}@media (hover: none) and (pointer: coarse){.play-stage{width:100%}.play-stage-row{display:grid;grid-template-columns:52px 1fr;gap:6px;align-items:stretch}.mobile-controls-side .mobile-control{width:100%;flex:1 1 0;min-height:0;font-size:18px;padding:4px 2px}.play-stage{width:100%;min-width:0}.mobile-controls{flex-wrap:nowrap;gap:5px;margin-top:6px}.mobile-control{flex:1 1 0;min-width:0;font-size:78px;line-height:1;min-height:96px;padding:4px;letter-spacing:0;font-variant-emoji:text;-webkit-font-feature-settings:"ss20";text-align:center}.mobile-controls .mobile-control[aria-label=FIRE]{flex:2 1 0;font-weight:700;font-size:22px;letter-spacing:.05em}}@media (hover: none) and (pointer: coarse) and (orientation: landscape){html,body{overflow:hidden;height:100dvh}.topbar,.play-toolbar,.controls,.resize-handle,#mobile-controls-right,.fsm,.article{display:none!important}.game-layout{padding:0;gap:0;height:100dvh}.play{position:static;display:grid;grid-template-columns:52px 1fr 64px;grid-template-areas:"left canvas right";column-gap:6px;height:100dvh;width:100%;padding:0;align-items:stretch}.play-stage-row{display:contents}#mobile-controls-left{grid-area:left;flex-direction:column;height:100%;gap:5px}#mobile-controls-left .mobile-control{width:100%;flex:1 1 0;min-height:0;font-size:28px;padding:4px 2px}.play-stage{grid-area:canvas;width:100%;height:100%;aspect-ratio:auto;margin-inline:0;border-radius:0}#mobile-controls{grid-area:right;flex-direction:column;flex-wrap:nowrap;margin-top:0;gap:5px;height:100%}#mobile-controls .mobile-control{width:100%;flex:2 1 0;min-height:0;font-size:42px;padding:4px 2px}#mobile-controls .mobile-control[aria-label=FIRE]{flex:3 1 0;font-size:16px;font-weight:700}}body.force-touch .play-stage-row{display:grid;grid-template-columns:52px 1fr;gap:6px;align-items:stretch}body.force-touch .play-stage{width:100%;min-width:0}body.force-touch .mobile-controls{flex-wrap:nowrap;gap:5px}body.force-touch .mobile-control{flex:1 1 0;min-width:0;font-size:78px;line-height:1;min-height:96px;padding:4px;font-variant-emoji:text;text-align:center}body.force-touch .mobile-controls .mobile-control[aria-label=FIRE]{flex:2 1 0;font-weight:700;font-size:22px}.play{position:sticky;top:0;z-index:5;background:var(--bg);padding-top:8px;padding-bottom:14px;align-self:flex-start;width:100%}#state-machines,#fsm-panel,#article{scroll-margin-top:calc(var(--play-h, 250px) + 160px)}.play-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}.toolbar-link .short{display:none}@media (hover: none) and (pointer: coarse){.toolbar-link .full{display:none}.toolbar-link .short{display:inline}.toolbar-sep{display:none}}body.force-touch .toolbar-link .full{display:none}body.force-touch .toolbar-link .short{display:inline}body.force-touch .toolbar-sep{display:none}.toolbar-sep{color:var(--line);user-select:none}.version-tabs{display:flex;gap:8px}.version-select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 32px 7px 14px;font-size:13px;font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.version-select:hover{border-color:var(--accent)}.version-select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.version-select option:disabled{color:var(--muted)}.tab{background:var(--panel-2);color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:7px 14px;font-size:13px;cursor:pointer}.tab:hover{color:var(--text)}.tab.active{color:var(--bg);background:var(--accent);border-color:var(--accent);font-weight:600}.play-stage{background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden;width:min(100%,calc(var(--play-h) * 1.5));aspect-ratio:720 / 480;margin-inline:auto}.resize-handle{height:14px;margin:4px 0 -6px;display:flex;align-items:center;justify-content:center;cursor:ns-resize;touch-action:none;user-select:none}.resize-grip{width:64px;height:4px;background:var(--line);border-radius:2px;transition:background .15s,transform .15s}.resize-handle:hover .resize-grip,.resize-handle.dragging .resize-grip{background:var(--accent)}.resize-handle.dragging .resize-grip{transform:scaleX(1.2)}.stage{width:100%;height:100%}.stage canvas{display:block;max-width:100%;max-height:100%;margin:auto}.godot-frame{width:100%;height:100%;border:0}.note{color:var(--dim);font-size:14px;padding:24px}.controls{margin:12px 0 0;color:var(--dim);font-size:13px;text-align:center}.mobile-controls,.mobile-controls-side{display:none;touch-action:none}.mobile-controls{flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}.mobile-controls-side{flex-direction:column;gap:5px}.mobile-controls:empty,.mobile-controls-side:empty{display:none!important}.mobile-control{font-family:var(--mono, monospace);font-size:13px;font-weight:600;min-width:46px;min-height:46px;padding:6px 11px;background:var(--panel-2, #1a1f2e);color:var(--fg, #e6e1e8);border:1px solid var(--line, #2b3242);border-radius:10px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;cursor:pointer}.mobile-control.active{background:var(--accent-bg, #2b3242);border-color:var(--accent, #8ab4f8);color:var(--accent, #8ab4f8)}@media (hover: none) and (pointer: coarse){.controls{display:none}.mobile-controls:not(:empty){display:flex}.mobile-controls-side:not(:empty){display:flex}.play,.play *,.fsm,.fsm *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}body.force-touch .controls{display:none}body.force-touch .mobile-controls:not(:empty){display:flex}body.force-touch .mobile-controls-side:not(:empty){display:flex}body.force-touch .play,body.force-touch .play *,body.force-touch .fsm,body.force-touch .fsm *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.fsm-header{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}.fsm-mode-toggle{background:transparent;color:var(--accent);border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;margin-left:auto}.fsm-mode-toggle:hover{background:var(--panel-2);border-color:var(--accent)}.fsm.fsm-mode-diagram .fsm-source,.fsm.fsm-mode-code .fsm-chart{display:none}.popout-status{margin-left:auto;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}.fsm h2{margin:0;font-size:16px}.fsm-intro{margin:0 0 16px;color:var(--dim);font-size:13px}#fsm-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:16px;align-items:start}#fsm-panel.vertical{display:flex;flex-direction:column}.fsm-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column}.fsm-source{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:12px 0 0;overflow:auto;max-height:280px}.fsm-source code{font-family:ui-monospace,SF Mono,Cascadia Mono,Fira Code,monospace;font-size:11.5px;line-height:1.55;color:var(--text);white-space:pre}.article{max-width:720px;color:var(--text);font-size:15px;line-height:1.65;padding:24px 0 8px;scroll-margin-top:24px}.article h1{margin:0 0 16px;font-size:26px;color:var(--text)}.article h2{margin:32px 0 12px;font-size:20px;color:var(--text)}.article h3{margin:24px 0 8px;font-size:16px;color:var(--accent)}.article p,.article ul,.article ol{margin:0 0 14px;color:var(--muted)}.article strong{color:var(--text)}.article a{color:var(--accent)}.article blockquote{margin:0 0 18px;padding:8px 16px;border-left:3px solid var(--accent);color:var(--muted);font-style:italic}.article code{background:var(--panel-2);border-radius:4px;padding:1px 6px;font-size:13px;color:var(--text)}.article pre{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;overflow-x:auto;margin:0 0 18px}.article pre code{background:transparent;padding:0}.article hr{border:0;border-top:1px solid var(--line);margin:24px 0}.article img,.article svg{display:block;max-width:100%;height:auto;margin:16px auto;background:#fff;border-radius:6px;padding:8px;box-sizing:border-box}html,body.fsm-page-body{height:100%}body.fsm-page-body{display:flex;flex-direction:column;overflow:hidden}.fsm-page-body .topbar{align-items:center;flex:0 0 auto}.fsm-popout{flex:1 1 auto;min-height:0;padding:24px;display:flex;flex-direction:column;gap:12px}.fsm-popout>.fsm-intro{flex:0 0 auto}.fsm-popout>#fsm-panel{flex:1 1 auto;min-height:0;align-items:stretch}.fsm-popout #fsm-panel .fsm-card{flex:0 0 520px;display:flex;flex-direction:column;max-height:100%}.fsm-popout .fsm-blurb{flex:0 0 auto;min-height:6em}.fsm-popout .fsm-chart{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.fsm-popout .fsm-chart svg{width:100%;height:100%;max-width:100%;max-height:100%}.fsm-move-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-4px -4px 10px;padding:4px 8px;border-bottom:1px solid var(--line);color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.fsm-move-bar button{background:var(--panel-2);color:var(--accent);border:1px solid var(--line);border-radius:4px;width:30px;height:24px;font-size:14px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.fsm-move-bar button:hover:not(:disabled){border-color:var(--accent);background:var(--panel)}.fsm-move-bar button:disabled{opacity:.3;cursor:not-allowed}.fsm-card h3{margin:0 0 6px;font-size:14px;color:var(--accent)}.fsm-blurb{margin:0 0 12px;color:var(--muted);font-size:12.5px;line-height:1.5}.fsm-chart{width:100%;height:280px;display:flex;align-items:center;justify-content:center}.fsm-chart svg{max-width:100%;max-height:100%;width:auto;height:auto}.fsm-chart g.node.active ellipse,.fsm-chart g.node.active polygon,.fsm-chart g.node.active path{fill:#1e3a8a!important;stroke:var(--accent);filter:drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 7px var(--accent))}.fsm-chart g.node.active text{font-weight:700;fill:#fff!important}.index-head{padding:40px 24px 8px}.index-head h1{margin:0;font-size:28px}.index-head p{color:var(--muted);max-width:640px}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding:16px 24px 48px}.game-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;color:var(--text)}.game-card:hover{border-color:var(--accent);text-decoration:none}.game-card h2{margin:0 0 6px;font-size:18px}.game-card .teaches{margin:0 0 12px}.game-card .versions{display:flex;gap:6px}.badge{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:2px 9px}@media (max-width: 640px){.fsm-chart{height:auto;min-height:0}.fsm-chart svg{width:100%;height:auto;max-height:none;max-width:100%}.fsm-card{padding:6px 8px}.fsm-card h3{font-size:12px;margin:0 0 2px}}@media (hover: none) and (pointer: coarse) and (orientation: landscape){.play{column-gap:0}.play-stage{width:100%;height:100%;aspect-ratio:auto;margin-inline:0;border:0;border-radius:0;background:var(--bg)}}
