:root{--j-deep: #001818;--j-forest: #003030;--j-canopy: #004830;--j-primary: #189030;--j-leaf: #30a830;--j-bright: #60a818;--j-lime: #78c018;--j-glow: #90c018;--j-mint: #d8f3dc;--j-surface: #f4fbf6;--j-surface-2: #ffffff;--j-border: #b8e0c4;--j-text: #001818;--j-muted: #3d6b52;--j-radius: 12px;--j-shadow: 0 12px 40px rgba(0, 24, 24, .12);--j-content-max: 72rem;--j-gutter: max(1.25rem, env(safe-area-inset-left));--j-gutter-end: max(1.25rem, env(safe-area-inset-right));--font: system-ui, -apple-system, "Segoe UI", sans-serif;--mono: ui-monospace, SFMono-Regular, Menlo, monospace}*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:clip;max-width:100%}body{margin:0;min-height:100dvh;overflow-x:clip;max-width:100%;font-family:var(--font);font-size:16px;line-height:1.55;color:var(--j-text);background:radial-gradient(ellipse 70% 45% at 12% -8%,rgba(120,192,24,.22),transparent 55%),radial-gradient(ellipse 55% 40% at 95% 0%,rgba(24,144,48,.14),transparent 50%),linear-gradient(180deg,var(--j-surface) 0%,#e8f5ec 48%,#dff0e6 100%);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;text-size-adjust:100%;-webkit-text-size-adjust:100%}.app{min-height:100dvh}.layout{width:100%;max-width:none;margin:0;padding:1.25rem 0 1.5rem}.header{position:sticky;top:max(.75rem,env(safe-area-inset-top));z-index:40;display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.75rem;margin-left:max(var(--j-gutter),calc((100% - var(--j-content-max)) / 2));margin-right:max(var(--j-gutter-end),calc((100% - var(--j-content-max)) / 2));max-width:none;padding:.85rem 1rem;border:1px solid rgba(184,224,196,.75);border-radius:999px;background:#ffffffb8;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 10px 30px #00303014,inset 0 1px #ffffffb3;transition:padding .28s ease,gap .28s ease,box-shadow .28s ease,background .28s ease,border-color .28s ease}.header.is-scrolled{gap:.45rem;padding:.45rem .7rem;border-color:#78c01859;background:#ffffffe6;box-shadow:0 14px 40px #00181824,0 0 0 1px #78c0181f,inset 0 1px #ffffffd9}.header.is-scrolled .logo{height:2.15rem}.header.is-scrolled .brand-tag{opacity:0;max-height:0;margin:0;transform:none;overflow:hidden;pointer-events:none}.header.is-scrolled .brand-title{font-size:.98rem}.header.is-scrolled .version-badge{padding:.2rem .55rem;font-size:.68rem}.header.is-scrolled .nav-link{padding:.35rem .7rem;font-size:.8rem}.header.is-scrolled .nav-link.jacare-here{box-shadow:0 0 0 1px #78c01847}.header-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-width:0}.nav-toggle.btn{display:none;flex-shrink:0;min-height:2.5rem;padding:.5rem .9rem}.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit;min-width:0}.logo{height:3.1rem;width:auto;flex-shrink:0;filter:drop-shadow(0 8px 16px rgba(0,48,48,.16));transition:height .28s ease}.brand-text{display:grid;gap:.1rem;min-width:0}.brand-title{font-size:1.1rem;font-weight:750;letter-spacing:-.02em;color:var(--j-forest);transition:font-size .3s ease}.brand-tag{font-size:.75rem;color:var(--j-muted);font-weight:500;max-height:2rem;opacity:1;transition:opacity .2s ease,max-height .28s ease}.nav{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:flex-end;align-items:center}.nav-link{padding:.45rem .85rem;border-radius:999px;color:var(--j-muted);font-size:.875rem;font-weight:650;text-decoration:none;border:1px solid transparent;transition:color .2s ease,background .2s ease,border-color .2s ease,padding .3s ease,font-size .3s ease,transform .2s ease}.nav-link:hover{color:var(--j-forest);background:var(--j-mint);transform:translateY(-1px)}.nav-link:focus-visible,.btn:focus-visible,.input:focus-visible{outline:2px solid var(--j-lime);outline-offset:2px}.nav-link.jacare-here{color:var(--j-deep);background:linear-gradient(135deg,var(--j-mint),#c8f0d0);border-color:var(--j-border)}.nav-link.nav-external{color:var(--j-primary)}.main{min-height:24rem}.page>.section,.hero-inner,.playground-page,.arcade-page,.studio-page,.tutorial-page,.footer-inner{width:100%;max-width:var(--j-content-max);margin-left:auto;margin-right:auto;padding-left:var(--j-gutter);padding-right:var(--j-gutter-end);box-sizing:border-box}.page{display:grid;gap:2rem}.hero-bleed{position:relative;width:100%;max-width:none;margin-left:0;margin-right:0;box-sizing:border-box}.hero{position:relative;overflow:hidden;min-width:0;width:100%;min-height:clamp(22rem,calc(100dvh - 7.5rem),36rem);display:flex;flex-direction:column;justify-content:center;padding:2.4rem 0 2.5rem;border-radius:0;background:radial-gradient(ellipse 48% 70% at 78% 18%,rgba(144,192,24,.28),transparent 58%),radial-gradient(ellipse 40% 55% at 8% 85%,rgba(24,144,48,.22),transparent 55%),linear-gradient(135deg,#001818 0%,var(--j-forest) 38%,var(--j-canopy) 72%,var(--j-primary) 100%);color:#f0fff4;box-shadow:none}.section{display:grid;gap:1rem}.section-title{margin:0;font-size:clamp(1.35rem,2.5vw,1.85rem);font-weight:800;letter-spacing:-.03em;color:var(--j-forest)}.section-lead{margin:0;color:var(--j-muted);max-width:58ch;font-size:1.02rem}.overview-section{gap:1.15rem}.overview-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(14rem,.9fr);gap:1rem;align-items:end}.overview-head>div:first-child{display:grid;gap:.65rem}.overview-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.overview-stat{display:grid;gap:.15rem;padding:.75rem .8rem;border-radius:.9rem;border:1px solid var(--j-border);background:#ffffffc7}.overview-stat strong{font-size:1.25rem;line-height:1;color:var(--j-primary)}.overview-stat span{font-size:.74rem;line-height:1.3;color:var(--j-muted)}.bleed-band{width:100%;max-width:none;margin-left:0;margin-right:0;box-sizing:border-box;border-radius:0;box-shadow:none;padding-left:max(var(--j-gutter),calc((100% - var(--j-content-max)) / 2 + 1.25rem));padding-right:max(var(--j-gutter-end),calc((100% - var(--j-content-max)) / 2 + 1.25rem))}.hero-pattern{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(216,243,220,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(216,243,220,.08) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000 35%,transparent 78%);mask-image:radial-gradient(circle at 50% 40%,#000 35%,transparent 78%)}.hero-inner{position:relative;z-index:1}.hero-body{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(16rem,20rem);gap:1.6rem;align-items:center}.hero-orb{position:absolute;width:18rem;height:18rem;border-radius:50%;background:radial-gradient(circle,rgba(144,192,24,.38),transparent 68%);filter:blur(12px);pointer-events:none}.hero-orb-a{top:-5rem;right:8%}.hero-orb-b{bottom:-7rem;left:10%;opacity:.45}.hero-mark{position:absolute;right:max(4%,env(safe-area-inset-right));bottom:-8%;width:min(18rem,34vw);opacity:.08;pointer-events:none;filter:grayscale(.1);-webkit-user-select:none;user-select:none}.hero-copy{display:grid;gap:.85rem;min-width:0}.hero-eyebrow{margin:0;font-size:.74rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--j-lime)}.hero-title{margin:0;font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;letter-spacing:-.04em;max-width:14ch}.hero-lead{margin:0;max-width:42ch;color:#f0fff4db;font-size:1.05rem;line-height:1.5}.hero-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.2rem}.hero-signals{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.35rem}.hero-signal{padding:.3rem .65rem;border-radius:999px;border:1px solid rgba(216,243,220,.22);background:#00181847;color:#d8f3dc;font-family:var(--mono);font-size:.7rem;font-weight:650}.hero-demo{display:grid;justify-items:stretch;gap:.65rem;min-width:0;padding:.85rem;border-radius:1.2rem;border:1px solid rgba(255,255,255,.18);background:#ffffff1a;box-shadow:inset 0 1px #ffffff1f,0 18px 40px #00101047;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.hero-demo-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:0 .15rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#f0fff4b8}.hero-demo-head code{padding:.18rem .45rem;border-radius:999px;background:#00181859;color:#b7e38a;font-size:.68rem;letter-spacing:0;text-transform:none}.hero-code-chip{margin:0;padding:.35rem .15rem 0;font-family:var(--mono);font-size:.7rem;line-height:1.35;color:#f0fff4b8;text-align:center}.pillar-grid,.loop-grid,.recipe-grid{display:grid;gap:.75rem}.pillar-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.pillar-card,.loop-card,.recipe-card{display:grid;gap:.4rem;padding:1rem;border-radius:1rem;border:1px solid var(--j-border);background:#ffffffd1;box-shadow:0 10px 28px #0030300d}.pillar-card strong,.loop-card strong,.recipe-card strong{color:var(--j-forest);font-size:.98rem}.pillar-card span,.loop-card p{margin:0;color:var(--j-muted);font-size:.9rem;line-height:1.45}.loop-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.loop-step{width:fit-content;padding:.2rem .5rem;border-radius:999px;background:var(--j-mint);color:var(--j-primary);font-family:var(--mono);font-size:.72rem;font-weight:750}.recipe-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.recipe-code{margin:0;padding:.8rem .85rem;border-radius:.8rem;background:#001818;color:#c8ef9a;overflow:auto;font-family:var(--mono);font-size:.74rem;line-height:1.5;white-space:pre}.playground-page,.arcade-page{gap:1.35rem}.playground-masthead{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:1rem;align-items:end;width:100%;max-width:none;margin-left:0;margin-right:0;box-sizing:border-box;padding:1.35rem 1.4rem;border-radius:1.3rem;border:1px solid #b8e0c4;background:linear-gradient(135deg,#fffffff2,#d8f3dc8c);box-shadow:0 12px 32px #0030300f}.playground-masthead-copy{display:grid;gap:.55rem}.playground-eyebrow{margin:0;font-size:.72rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--j-primary)}.playground-title{margin:0;font-size:clamp(1.7rem,3.2vw,2.4rem);letter-spacing:-.035em;color:var(--j-forest);line-height:1.08}.playground-lead{margin:0;max-width:54ch;color:var(--j-muted);font-size:1rem;line-height:1.5}.playground-masthead-actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.playground-bench{display:grid;gap:.85rem;width:100%;max-width:none;margin-left:0;margin-right:0;box-sizing:border-box;padding:.95rem;border-radius:1.4rem;border:1px solid rgba(0,48,48,.14);background:radial-gradient(circle at 100% 0%,rgba(120,192,24,.12),transparent 40%),linear-gradient(180deg,#e8f5ec,#f4fbf6 40%,#fff);box-shadow:0 18px 44px #00303014}.playground-bench-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:.35rem .45rem}.playground-bench-bar strong{display:block;color:var(--j-forest);font-size:.95rem}.playground-bench-bar span{color:var(--j-muted);font-size:.82rem}.playground-bench-tags{display:flex;flex-wrap:wrap;gap:.4rem}.playground-bench-tags span{padding:.28rem .6rem;border-radius:999px;border:1px solid var(--j-border);background:#ffffffd9;color:var(--j-canopy);font-family:var(--mono);font-size:.7rem;font-weight:700}.playground-readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.playground-tip{display:grid;gap:.35rem;padding:1.05rem 1.1rem;border-radius:1.1rem;border:1px solid var(--j-border);background:#ffffffe0;box-shadow:0 10px 28px #0030300d}.playground-tip strong{color:var(--j-primary);font-size:.92rem}.playground-tip p{margin:0;color:var(--j-muted);font-size:.9rem;line-height:1.45}.playground-source{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:1.1rem;align-items:start;width:100%;max-width:none;margin-left:0;margin-right:0;box-sizing:border-box;padding:1.25rem;border-radius:1.3rem;border:1px solid #b8e0c4;background:radial-gradient(circle at 0% 0%,rgba(120,192,24,.12),transparent 42%),#ffffffe6;box-shadow:0 12px 32px #0030300d}.playground-source-copy{display:grid;gap:.75rem}.playground-checklist{margin:0;padding-left:1.15rem;display:grid;gap:.45rem;color:var(--j-canopy);font-size:.95rem;line-height:1.45}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.75rem;padding:.65rem 1.1rem;border-radius:999px;border:none;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.btn:hover{transform:translateY(-1px)}.btn-primary{color:var(--j-deep);background:linear-gradient(135deg,var(--j-lime),var(--j-glow));box-shadow:0 8px 24px #78c01859}.btn-ghost{color:#f0fff4;background:#ffffff14;border:1px solid rgba(255,255,255,.2)}.btn-outline{color:var(--j-forest);background:var(--j-surface-2);border:1px solid var(--j-border)}.btn-soft{color:var(--j-forest);background:var(--j-mint);border:1px solid var(--j-border)}.panel{display:grid;gap:1rem;padding:1.25rem;border-radius:calc(var(--j-radius) + 6px);border:1px solid var(--j-border);background:#ffffffd1;box-shadow:0 10px 30px #00303012}.has-code-wm{position:relative;overflow:hidden;isolation:isolate}.has-code-wm>:first-child{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.has-code-wm>.hero-orb,.has-code-wm>.hero-copy,.has-code-wm>.hero-demo,.has-code-wm>.panel-foreground,.has-code-wm>.tutorial-copy,.has-code-wm>.tutorial-preview,.has-code-wm>.section{position:relative;z-index:1}.panel-foreground{position:relative;z-index:1;display:grid;gap:1rem}.panel-grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}.kicker{margin:0;font-size:.75rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--j-primary)}.step-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.65rem 1rem}.step-number{display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:.75rem;background:linear-gradient(135deg,var(--j-primary),var(--j-lime));color:#f0fff4;font-weight:800;font-size:.9rem}.chip-row{display:flex;flex-wrap:wrap;gap:.45rem}.chip{display:inline-flex;align-items:center;padding:.3rem .7rem;border-radius:999px;font-size:.75rem;font-weight:700;background:var(--j-mint);color:var(--j-canopy);border:1px solid var(--j-border)}.chip.is-active{background:linear-gradient(135deg,var(--j-primary),var(--j-bright));color:#f0fff4;border-color:transparent}.input{width:100%;padding:.65rem .85rem;border-radius:var(--j-radius);border:1px solid var(--j-border);background:var(--j-surface-2);color:var(--j-text);font:inherit;font-size:16px;max-width:100%}.input:focus{outline:none;border-color:var(--j-leaf);box-shadow:0 0 0 3px #30a83033}.expect{margin:0;padding:.75rem .9rem;border-radius:.85rem;background:linear-gradient(135deg,#d8f3dcb3,#f4fbf6f2);border:1px dashed var(--j-border);color:var(--j-canopy);font-size:.9rem}.tree-block{margin:0;padding:1rem 1.1rem;border-radius:1rem;background:var(--j-deep);color:#d8f3dc;font-family:var(--mono);font-size:.78rem;line-height:1.55;overflow:auto}.next-grid{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}.next-card{display:grid;gap:.35rem;padding:1rem;border-radius:1rem;border:1px solid var(--j-border);background:#ffffffe0;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}.next-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px #0030301a}.next-card strong{color:var(--j-forest)}.next-card span{font-size:.85rem;color:var(--j-muted)}.solution-panel{display:grid;gap:.75rem;overflow:hidden;max-height:0;opacity:0;transition:max-height .35s ease,opacity .25s ease,margin .25s ease}.solution-panel.is-open{max-height:40rem;opacity:1;margin-top:.35rem}.mini-demo{display:grid;gap:.75rem;justify-items:start;padding:1.15rem;border-radius:1.1rem;border:1px solid rgba(120,192,24,.28);background:radial-gradient(circle at 10% 0%,rgba(120,192,24,.16),transparent 50%),linear-gradient(180deg,#fff,#f4fbf6);box-shadow:0 10px 28px #0030300d}.footer-dock{position:relative;width:100%;max-width:none;margin-top:3rem;margin-left:0;margin-right:0}.footer-wave{line-height:0;margin-bottom:-1px}.footer-wave svg{display:block;width:100%;height:3.25rem}.footer-wave path{fill:#003030}.footer-panel{position:relative;overflow:hidden;width:100%;padding:1.75rem 0 calc(1.35rem + env(safe-area-inset-bottom));border-radius:0;background:radial-gradient(circle at 12% 0%,rgba(120,192,24,.22),transparent 42%),radial-gradient(circle at 88% 100%,rgba(24,144,48,.2),transparent 40%),linear-gradient(160deg,#003030,#001818 55%,#00241c);color:#d8f3dc;box-shadow:0 -8px 40px #0018182e}.footer-marks{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.footer-wm{position:absolute;opacity:.06;width:5rem;height:auto;filter:grayscale(.2)}.footer-wm-a{top:12%;right:8%;animation:footer-float-a 12s ease-in-out infinite}.footer-wm-b{bottom:18%;left:6%;width:3.5rem;animation:footer-float-b 15s ease-in-out infinite}.footer-wm-c{top:40%;left:42%;width:4.2rem;opacity:.04;animation:footer-float-c 18s ease-in-out infinite}.footer-grid{position:relative;z-index:1;display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.95fr);align-items:start}.footer-brand-block,.footer-smart,.footer-terminal{display:grid;gap:.75rem}.footer-brand-row{display:flex;align-items:center;gap:.85rem}.footer-logo-wrap{position:relative;flex:0 0 auto;width:11rem;height:11rem}.footer-logo{display:block;width:100%;height:100%;object-fit:contain;border-radius:1rem;filter:drop-shadow(0 12px 22px rgba(120,192,24,.32))}.footer-steam{position:absolute;left:22.8%;top:76.7%;width:.55rem;height:1.35rem;pointer-events:none;border-radius:999px;background:linear-gradient(180deg,#fffff000,#fffadc8c 35%,#f0fff426);filter:blur(1.5px);transform-origin:50% 100%;opacity:0;animation:footer-steam 3.6s ease-in-out infinite}.footer-steam-a{margin-left:-.12rem;animation-delay:0s}.footer-steam-b{width:.42rem;height:1.15rem;margin-left:.18rem;animation-delay:1.1s;animation-duration:4.1s}.footer-steam-c{width:.35rem;height:1rem;margin-left:-.28rem;animation-delay:2.2s;animation-duration:3.4s}@keyframes footer-steam{0%{opacity:0;transform:translate(-50%) scaleX(.7) scaleY(.55) rotate(-4deg)}18%{opacity:.85}55%{opacity:.45;transform:translate(calc(-50% + .35rem),-1.15rem) scaleX(1.05) scaleY(1.25) rotate(8deg)}to{opacity:0;transform:translate(calc(-50% + .55rem),-2.1rem) scaleX(1.35) scaleY(1.55) rotate(14deg)}}@keyframes footer-steam-mobile{0%{opacity:0;transform:translate(-50%) scaleX(.75) scaleY(.5) rotate(-3deg)}22%{opacity:.9}58%{opacity:.4;transform:translate(calc(-50% + .22rem),-.95rem) scaleX(1.1) scaleY(1.3) rotate(6deg)}to{opacity:0;transform:translate(calc(-50% + .38rem),-1.65rem) scaleX(1.4) scaleY(1.6) rotate(11deg)}}.footer-kicker{margin:0;font-size:.7rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:#90c018}.footer-title{margin:.15rem 0 0;font-size:clamp(1.35rem,2.5vw,1.85rem);letter-spacing:-.03em;color:#f0fff4}.footer-status{margin:0;display:flex;align-items:center;gap:.55rem;font-size:.82rem;color:#d8f3dcc7;font-variant-numeric:tabular-nums}.footer-pulse{width:.55rem;height:.55rem;border-radius:50%;background:#78c018;box-shadow:0 0 #78c0188c;animation:footer-beat 1.6s ease-out infinite}.footer-pulse.beat-learning{background:#90c018}.footer-pulse.beat-building{background:#60a818}.footer-pulse.beat-playing{background:#2a9d8f}.footer-pulse.beat-shipping{background:#78c018}.footer-next{margin:0;font-size:1.02rem;line-height:1.45;font-weight:650;color:#f0fff4;max-width:34ch}.footer-tip{margin:0;min-height:2.6em;font-size:.88rem;color:#d8f3dcb8;transition:opacity .3s ease}.footer-actions{display:flex;flex-wrap:wrap;gap:.5rem}.footer-btn-dark{background:#ffffff0f;border-color:#d8f3dc47;color:#d8f3dc}.footer-btn-dark:hover{background:#78c01829}.footer-terminal{padding:.85rem;border-radius:1rem;border:1px solid rgba(120,192,24,.22);background:#000c0c8c;box-shadow:inset 0 1px #ffffff0a}.footer-term-head{display:flex;align-items:center;gap:.35rem;margin-bottom:.65rem}.footer-term-head span{width:.55rem;height:.55rem;border-radius:50%;background:#d8f3dc40}.footer-term-head span:nth-child(1){background:#ef4444}.footer-term-head span:nth-child(2){background:#f59e0b}.footer-term-head span:nth-child(3){background:#78c018}.footer-term-head code{margin-left:auto;font-size:.68rem;color:#d8f3dc8c}.footer-term-body{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;line-height:1.55;color:#b7e38a;white-space:pre-wrap}.footer-top{justify-self:start;margin-top:.35rem;padding:.45rem .8rem;border-radius:999px;border:1px solid rgba(120,192,24,.35);background:#78c0181f;color:#d8f3dc;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;transition:transform .15s ease,background .15s ease}.footer-top:hover{transform:translateY(-1px);background:#78c01838}.footer-top:focus-visible{outline:2px solid #78c018;outline-offset:2px}.back-to-top{position:fixed;right:max(5.25rem,calc(env(safe-area-inset-right) + 5rem));bottom:1.25rem;z-index:60;display:inline-flex;align-items:center;gap:.35rem;padding:.65rem .9rem;border-radius:999px;border:1px solid rgba(120,192,24,.45);background:linear-gradient(145deg,#189030,#003030);color:#f4fff0;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.02em;cursor:pointer;box-shadow:0 10px 28px #00181859;opacity:0;visibility:hidden;transform:translateY(12px) scale(.92);pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility .22s ease,background .15s ease,box-shadow .15s ease}.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto}.back-to-top:hover{background:linear-gradient(145deg,#20a83a,#004040);box-shadow:0 14px 32px #0018186b}.back-to-top:focus-visible{outline:2px solid #78c018;outline-offset:3px}.back-to-top-arrow{font-size:1rem;line-height:1}.back-to-top-label{line-height:1}.footer-meta{position:relative;z-index:1;margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(120,192,24,.18);display:flex;flex-wrap:wrap;gap:.65rem 1.1rem;justify-content:space-between;font-size:.78rem;color:#d8f3dc9e}.footer-repo{color:#90c018;font-weight:650;text-decoration:none}.footer-repo:hover{text-decoration:underline}@keyframes footer-beat{0%{box-shadow:0 0 #78c01873}70%{box-shadow:0 0 0 10px #78c01800}to{box-shadow:0 0 #78c01800}}@keyframes footer-float-a{0%,to{transform:translate(0) rotate(6deg)}50%{transform:translate(6px,-6px) rotate(2deg)}}@keyframes footer-float-b{0%,to{transform:translate(0) rotate(-8deg)}50%{transform:translate(-6px,5px) rotate(-3deg)}}@keyframes footer-float-c{0%,to{transform:translate(0) rotate(4deg)}50%{transform:translate(4px,-5px) rotate(-2deg)}}@media(max-width:980px){.footer-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.footer-pulse,.footer-wm,.footer-steam{animation:none!important}.footer-steam{display:none}}.footer{display:none}.lost-page{gap:0}.lost-bleed{position:relative;width:100%;max-width:none;margin-left:0;margin-right:0}.lost-scene{position:relative;overflow:hidden;min-height:min(72vh,42rem);display:grid;place-items:center;padding:clamp(2rem,6vw,4rem) clamp(1.25rem,4vw,3rem);background:radial-gradient(ellipse 55% 50% at 50% 28%,rgba(120,192,24,.18),transparent 58%),radial-gradient(ellipse 40% 35% at 12% 90%,rgba(24,144,48,.16),transparent 55%),radial-gradient(ellipse 35% 40% at 92% 70%,rgba(144,192,24,.1),transparent 50%),linear-gradient(165deg,#000c0c,#001616 42%,#00221a);color:#f0fff4}.lost-glow{position:absolute;top:12%;left:50%;width:min(28rem,70vw);height:min(28rem,70vw);translate:-50% 0;border-radius:50%;background:radial-gradient(circle,rgba(120,192,24,.22),transparent 68%);filter:blur(12px);pointer-events:none;animation:lost-pulse 5.5s ease-in-out infinite}.lost-grid{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.14;background-image:linear-gradient(rgba(216,243,220,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(216,243,220,.07) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 65% at 50% 40%,#000 20%,transparent 75%)}.lost-stage{position:relative;z-index:1;display:grid;grid-template-columns:minmax(12rem,22rem) minmax(0,28rem);gap:clamp(1.5rem,4vw,3rem);align-items:center;width:min(56rem,100%)}.lost-badge{margin:0;display:grid;place-items:center;justify-self:center}.lost-art{display:block;width:min(100%,22rem);height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45));animation:lost-float 7s ease-in-out infinite}.lost-copy{display:grid;gap:.85rem;justify-items:start}.lost-eyebrow{margin:0;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#b7e38a}.lost-title{margin:0;font-size:clamp(1.85rem,4.2vw,2.85rem);font-weight:800;letter-spacing:-.04em;line-height:1.08}.lost-lead{margin:0;max-width:38ch;color:#f0fff4c7;font-size:1.05rem;line-height:1.55}.lost-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.35rem}@keyframes lost-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes lost-pulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}@media(max-width:820px){.lost-stage{grid-template-columns:1fr;justify-items:center;text-align:center}.lost-copy{justify-items:center}.lost-lead{max-width:42ch}.lost-actions{justify-content:center}.lost-art{width:min(100%,16.5rem)}}@media(prefers-reduced-motion:reduce){.lost-art,.lost-glow{animation:none!important}}.code-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));overflow:hidden;background:#0018188c;animation:fade .2s ease both}.code-panel{width:min(48rem,100%);min-width:0;max-height:min(78dvh,40rem);display:grid;grid-template-rows:auto 1fr;border-radius:1rem;background:#001818;color:#e8f8dc;box-shadow:0 24px 60px #00000059;overflow:hidden}.code-panel-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.85rem 1rem;border-bottom:1px solid rgba(143,209,42,.2)}.code-panel-title{margin:0;font-size:1.05rem;font-weight:700}.btn-modal-close{height:2.1rem;padding:0 .85rem;border-radius:.65rem;border:1px solid rgba(143,209,42,.35);background:#8fd12a29;color:#d7f5c8;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}.btn-modal-close:hover{background:#8fd12a47}.code-scroll{min-width:0;overflow-x:hidden;overflow-y:auto;display:grid}.code-file{min-width:0;border-bottom:1px solid rgba(143,209,42,.14)}.code-file:last-child{border-bottom:none}.code-file-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .75rem .55rem 1rem;background:#8fd12a14}.code-file-name{min-width:0;margin:0;font-family:var(--mono);font-size:.72rem;font-weight:500;color:#8fd12a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.code-body{margin:0;padding:.85rem 1rem 1.1rem;overflow:auto;font-family:var(--mono);font-size:.78rem;line-height:1.55;color:#d8f3dc;white-space:pre-wrap;overflow-wrap:anywhere}.btn-copy{display:inline-flex;align-items:center;gap:.35rem;height:2rem;padding:0 .75rem;border-radius:.6rem;border:1px solid rgba(143,209,42,.35);background:#8fd12a24;color:#d7f5c8;font:inherit;font-size:.75rem;font-weight:700;cursor:pointer}.btn-copy:hover{background:#8fd12a47}.btn-copy-icon:before{content:"⧉";font-size:.85rem}@keyframes fade{0%{opacity:0}to{opacity:1}}@media(min-width:901px){.header{flex-direction:row;align-items:center;gap:1rem}.header-top{flex:0 1 auto;min-width:0}.nav{flex:1 1 0;min-width:0;justify-content:flex-end}}@media(max-width:900px){.header{border-radius:1.25rem}.header.is-scrolled{border-radius:1.1rem}.hero-body,.panel-grid,.overview-head,.pillar-grid,.loop-grid,.recipe-grid,.playground-masthead,.playground-source,.playground-readout{grid-template-columns:1fr}.playground-masthead-actions{justify-content:flex-start}.hero{padding:1.5rem 0 1.7rem;min-height:clamp(20rem,calc(100dvh - 7rem),30rem)}.hero-mark{width:min(12rem,42vw);opacity:.06}.hero-title{max-width:none}}@media(max-width:768px){:root{--j-gutter: max(.85rem, env(safe-area-inset-left));--j-gutter-end: max(.85rem, env(safe-area-inset-right))}body{font-size:16px}.layout{padding:1rem 0}.header{top:max(.5rem,env(safe-area-inset-top));margin-bottom:1.25rem;margin-left:var(--j-gutter);margin-right:var(--j-gutter-end);padding:.65rem .75rem;border-radius:1.35rem}.header.is-scrolled{gap:.35rem;padding:.35rem .5rem .35rem .55rem}.header.is-scrolled .logo{height:2rem}.header.is-scrolled .nav-toggle.btn{min-height:2.35rem;min-width:2.35rem;padding:.35rem .7rem}.nav-toggle.btn{display:inline-flex;min-width:2.75rem;min-height:2.75rem}.nav{display:none;flex-direction:column;align-items:stretch;gap:.35rem;max-height:min(70dvh,28rem);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.nav.nav-open{display:flex}.nav-link{justify-content:center;text-align:center;min-height:2.75rem;padding:.65rem .85rem}.logo{height:2.5rem}.brand-tag{display:none}.hero{padding:1.35rem 0 1.5rem;min-height:clamp(18rem,calc(100dvh - 6.5rem),28rem)}.hero-demo{padding:.7rem}.pillar-grid,.loop-grid{grid-template-columns:1fr 1fr}.hero-actions .btn{flex:1 1 calc(50% - .35rem);min-width:0}.playground-masthead,.playground-bench,.playground-source,.tutorial-hero,.tutorial-stage,.arcade-hero,.arcade-cabinet{padding-left:var(--j-gutter);padding-right:var(--j-gutter-end)}.arcade-cabinet{padding:.85rem}.tutorial-hero{min-height:clamp(18rem,calc(100dvh - 7rem),26rem);padding-top:1.5rem;padding-bottom:1.35rem}.arcade-hero{min-height:clamp(16rem,calc(100dvh - 7rem),24rem);padding-top:1.6rem;padding-bottom:1.6rem}.footer-dock{margin-top:2rem}.footer-panel{padding:1.15rem 0 calc(1rem + env(safe-area-inset-bottom))}.footer-grid{gap:1rem}.footer-brand-block,.footer-smart,.footer-terminal{gap:.55rem}.footer-brand-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:.75rem}.footer-logo-wrap{width:100%;max-width:13.5rem;height:auto;aspect-ratio:1}.footer-steam{left:23.2%;top:74.5%;width:.55rem;height:1.35rem;filter:blur(1.35px);animation-name:footer-steam-mobile;animation-duration:3.1s}.footer-steam-a{margin-left:-.1rem}.footer-steam-b{width:.44rem;height:1.15rem;margin-left:.16rem;animation-duration:3.55s}.footer-steam-c{width:.36rem;height:1rem;margin-left:-.24rem;animation-duration:2.9s}.footer-title{font-size:clamp(1.35rem,6vw,1.75rem)}.overview-stats{grid-template-columns:1fr}}@media(max-width:480px){.hero-actions{flex-direction:column}.hero-actions .btn{width:100%;flex:1 1 auto}.pillar-grid,.loop-grid{grid-template-columns:1fr}.footer-brand-row{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:.65rem}.footer-logo-wrap{max-width:none}.footer-steam{animation-name:footer-steam-mobile;left:23.4%;top:74%;width:.5rem;height:1.2rem}.footer-title{font-size:clamp(1.25rem,6.5vw,1.6rem)}.footer-actions{display:grid;grid-template-columns:1fr}.footer-actions .btn{width:100%}.version-badge{display:none}.arcade-pick{min-height:2.75rem;padding:.95rem}.game-pad{display:none}.game-cell.has-lesson:after{content:"";position:absolute;inset:auto .35rem .35rem;height:.28rem;border-radius:999px;background:#78c018bf}}.scroll-timeline{--progress: 0%;--progress-n: 0;pointer-events:none}.scroll-timeline-top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:70;height:4px;overflow:visible}.scroll-timeline-top-track{position:absolute;top:0;right:0;bottom:0;left:0;background:#0030300f}.scroll-timeline-top-fill{position:absolute;top:0;left:0;height:100%;width:0%;background:linear-gradient(90deg,#189030,#78c018 55%,#90c018);box-shadow:0 0 16px #78c0188c;transition:width .12s linear}.scroll-timeline-top-glow{position:absolute;top:50%;left:0%;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(144,192,24,.95),rgba(120,192,24,.15) 55%,transparent 70%);filter:blur(.5px);transition:left .12s linear;opacity:0}.scroll-timeline.is-active .scroll-timeline-top-glow{opacity:1}.scroll-timeline-rail{position:fixed;top:50%;right:max(1.5rem,calc(env(safe-area-inset-right) + .65rem));z-index:65;width:2.75rem;height:min(52vh,22rem);transform:translateY(-50%);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}.scroll-timeline.is-active .scroll-timeline-rail{opacity:1;pointer-events:auto}.scroll-timeline-rail-glow{position:absolute;top:-1rem;right:-.75rem;bottom:-1rem;left:-.75rem;border-radius:2rem;background:radial-gradient(circle at 50% 20%,rgba(120,192,24,.16),transparent 55%),#ffffff8c;border:1px solid rgba(184,224,196,.65);backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);box-shadow:0 16px 40px #0030301a}.scroll-timeline-spine{position:absolute;top:1.15rem;bottom:2.45rem;left:50%;width:1.5rem;transform:translate(-50%)}.scroll-timeline-track,.scroll-timeline-fill{position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translate(-50%);border-radius:999px}.scroll-timeline-track{background:linear-gradient(180deg,#b8e0c459,#18903040)}.scroll-timeline-fill{bottom:auto;height:0%;background:linear-gradient(180deg,#78c018,#189030);box-shadow:0 0 14px #78c01873;transition:height .12s linear}.scroll-timeline-orb{position:absolute;top:0%;left:50%;width:1.15rem;height:1.15rem;transform:translate(-50%,-50%);transition:top .12s linear;z-index:2}.scroll-timeline-orb-core{position:absolute;top:.18rem;right:.18rem;bottom:.18rem;left:.18rem;border-radius:50%;background:linear-gradient(135deg,#90c018,#189030);box-shadow:0 0 12px #78c018b3}.scroll-timeline-orb-ring{position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;border:1.5px solid rgba(120,192,24,.55)}.scroll-timeline-dots{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;z-index:3}.scroll-timeline-dot{width:.55rem;height:.55rem;padding:0;border:1.5px solid rgba(0,72,48,.25);border-radius:50%;background:#ffffffe6;cursor:pointer;pointer-events:auto;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}.scroll-timeline-dot:hover,.scroll-timeline-dot:focus-visible{transform:scale(1.35);outline:none;border-color:#78c018}.scroll-timeline-dot.is-passed{background:linear-gradient(135deg,#78c018,#189030);border-color:transparent;box-shadow:0 0 0 3px #78c0182e}.scroll-timeline-dot.is-current{transform:scale(1.45);box-shadow:0 0 0 4px #78c01838,0 0 12px #78c01873}.scroll-timeline-pct{position:absolute;bottom:.45rem;left:50%;transform:translate(-50%);z-index:3;margin-top:.65rem;font-size:.62rem;font-weight:800;letter-spacing:.04em;color:#004830;font-variant-numeric:tabular-nums}.scroll-timeline.is-complete .scroll-timeline-orb-ring{animation:none;border-color:#78c018}@keyframes timeline-pulse{0%,to{transform:scale(1);opacity:.75}50%{transform:scale(1.35);opacity:.25}}@media(max-width:900px){.scroll-timeline-rail{display:none}.scroll-timeline-top{height:3px}.back-to-top{right:max(.85rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));width:2.75rem;height:2.75rem;padding:0;justify-content:center}.back-to-top-label{display:none}.back-to-top-arrow{font-size:1.15rem}}@media(prefers-reduced-motion:reduce){.scroll-timeline-orb-ring{animation:none}.scroll-timeline-top-fill,.scroll-timeline-top-glow,.scroll-timeline-fill,.scroll-timeline-orb{transition:none}}.page-progress{display:none}.version-badge{display:inline-flex;align-items:center;flex-shrink:0;padding:.28rem .65rem;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.04em;color:var(--j-deep);background:linear-gradient(135deg,var(--j-lime),var(--j-glow));box-shadow:0 6px 18px #78c01847;transition:transform .3s ease,padding .3s ease,font-size .3s ease}.wave-divider{width:100%;max-width:none;margin-left:0;margin-right:0;margin-top:-.5rem;line-height:0}.wave-divider svg{width:100%;height:2.5rem;display:block}.header-top{flex-wrap:wrap}.tutorial-sticky-layout{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}.tutorial-page{gap:1.35rem}.tutorial-hero{position:relative;overflow:hidden;display:grid;gap:1.15rem;align-content:center;width:100%;max-width:none;margin-left:0;margin-right:0;box-sizing:border-box;min-height:clamp(20rem,calc(100dvh - 8rem),28rem);padding:2rem 1.25rem 1.75rem;border-radius:1.5rem;border:1px solid rgba(120,192,24,.28);background:radial-gradient(circle at 12% 0%,rgba(120,192,24,.28),transparent 42%),radial-gradient(circle at 92% 100%,rgba(24,144,48,.18),transparent 45%),linear-gradient(145deg,#003030,#004830 48%,#189030);color:#f0fff4;box-shadow:0 18px 44px #00303029}.tutorial-hero-inner{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(14rem,.85fr);gap:1.15rem;align-items:end}.tutorial-hero-copy{display:grid;gap:.7rem}.tutorial-kicker{color:#b7e38a}.tutorial-hero-title{margin:0;font-size:clamp(1.7rem,3.4vw,2.45rem);line-height:1.08;letter-spacing:-.035em}.tutorial-hero-lead{margin:0;max-width:52ch;color:#f0fff4d6;font-size:1rem;line-height:1.5}.tutorial-hero-side{display:grid;gap:.65rem;padding:.95rem;border-radius:1rem;border:1px solid rgba(216,243,220,.18);background:#00181847;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tutorial-hero-meta{margin:0;font-size:.78rem;color:#d8f3dcc7}.tutorial-toolbar{display:grid;gap:.85rem}.track-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.track-btn{display:grid;gap:.15rem;padding:.75rem .85rem;border-radius:.95rem;border:1px solid rgba(216,243,220,.18);background:#ffffff14;color:#f0fff4;text-align:left;font:inherit;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}.track-btn span{font-size:.92rem;font-weight:750}.track-btn-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.track-count{display:inline-grid;place-items:center;min-width:1.45rem;height:1.45rem;padding:0 .35rem;border-radius:999px;background:#d8f3dc2e;color:#d8f3dc;font-style:normal;font-size:.72rem;font-weight:800}.track-btn.is-active .track-count{background:#0018182e;color:#001818}.track-btn small{color:#d8f3dcb3;font-size:.72rem}.track-btn.is-active{background:linear-gradient(135deg,#78c018f2,#90c018e0);border-color:transparent;color:#001818;transform:translateY(-1px)}.track-btn.is-active small{color:#001818b8}.track-btn:focus-visible{outline:2px solid #78c018;outline-offset:2px}.step-chip-scroll{display:flex;gap:.5rem;overflow-x:auto;flex-wrap:nowrap;padding:.15rem .1rem .35rem;-webkit-overflow-scrolling:touch}.step-chip{display:inline-flex;align-items:center;gap:.45rem;flex:0 0 auto;max-width:13rem;padding:.45rem .7rem .45rem .45rem;border-radius:999px;border:1px solid rgba(216,243,220,.2);background:#00181838;color:#f0fff4;font:inherit;cursor:pointer;transition:background .15s ease,border-color .15s ease}.step-chip em{display:inline-grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:999px;background:#d8f3dc29;font-style:normal;font-size:.72rem;font-weight:800}.step-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.74rem;font-weight:650}.step-chip.is-done{border-color:#78c01873}.step-chip.is-done em{background:#78c01859}.step-chip.is-active{background:#f4fbf6;border-color:transparent;color:#003030}.step-chip.is-active em{background:linear-gradient(135deg,#189030,#78c018);color:#f0fff4}.tutorial-stage{position:relative;overflow:hidden;display:grid;gap:1.25rem;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start;width:100%;max-width:none;margin-left:0;margin-right:0;box-sizing:border-box;padding:1.35rem;border-radius:1.4rem;border:1px solid #b8e0c4;background:radial-gradient(circle at 8% 0%,rgba(120,192,24,.14),transparent 40%),linear-gradient(180deg,#fffffff5,#e8f5eceb);box-shadow:0 18px 44px #00303014}.tutorial-copy{display:grid;gap:1.1rem;min-width:0}.step-banner{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;padding:1.1rem 1.15rem;border-radius:1.15rem;border:1px solid rgba(120,192,24,.28);background:linear-gradient(135deg,#d8f3dcbf,#f4fbf6f2)}.step-banner .step-number{width:3rem;height:3rem;border-radius:1rem;font-size:1.15rem}.step-banner-text{display:grid;gap:.35rem}.expect-banner{margin:0;color:var(--j-canopy);font-size:.95rem;line-height:1.45}.step-body{display:grid;gap:.95rem;padding:1.15rem 1.2rem;border-radius:1.15rem;border:1px solid var(--j-border);background:#ffffffe6;font-size:1.02rem;line-height:1.55;color:var(--j-text)}.step-body>p{margin:0}.tip-card{display:grid;gap:.25rem;padding:.9rem 1rem;border-radius:.95rem;border:1px solid rgba(120,192,24,.28);background:#d8f3dc73}.tip-card strong{color:var(--j-primary);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}.tip-card span{color:var(--j-canopy);font-size:.92rem}.tip-card-dark{background:linear-gradient(145deg,#003030,#004830);border-color:transparent;color:#f0fff4}.tip-card-dark strong{color:#b7e38a}.tip-card-dark span{color:#f0fff4db}.control-panel,.mini-demo-wide{width:100%}.control-panel{padding:.95rem;border-radius:1rem;border:1px solid var(--j-border);background:radial-gradient(circle at 10% 0%,rgba(120,192,24,.12),transparent 50%),#f4fbf6}.tutorial-preview{display:grid;gap:1rem}.tutorial-preview .code-block,.tutorial-preview .live-panel{position:sticky;top:5.5rem}.live-panel{display:grid;gap:.85rem;padding:1.1rem;border-radius:1.2rem;border:1px solid rgba(120,192,24,.3);background:radial-gradient(circle at 85% 0%,rgba(120,192,24,.16),transparent 45%),linear-gradient(165deg,#fff,#eef8f1);box-shadow:0 14px 34px #00303014}.live-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}.live-panel-head span{font-size:.75rem;color:var(--j-muted)}.step-nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.65rem;padding:.85rem .95rem;border-radius:1rem;border:1px solid rgba(120,192,24,.22);background:#f4fbf6eb;position:sticky;bottom:max(.75rem,env(safe-area-inset-bottom));z-index:5}.step-nav-label{text-align:center;font-size:.8rem;font-weight:700;color:var(--j-canopy)}.expect-list{margin:0;padding-left:1.1rem;color:var(--j-canopy)}.studio-page{gap:2.25rem;color:#1d1d1f}.studio-hero{display:grid;gap:.85rem;padding:2.4rem 0 .5rem;max-width:40rem}.studio-eyebrow{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6e6e73}.studio-title{margin:0;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.02;letter-spacing:-.055em;font-weight:780}.studio-lead,.studio-section-lead{margin:0;color:#6e6e73;font-size:1.12rem;line-height:1.5}.studio-section-title{margin:0;font-size:clamp(1.55rem,2.8vw,2.1rem);letter-spacing:-.035em;font-weight:750}.studio-hero-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.35rem}.studio-arch,.studio-live,.studio-code,.studio-stack{display:grid;gap:1.25rem;padding:1.5rem;border-radius:1.5rem;border:1px solid rgba(0,0,0,.08);background:#fff;box-shadow:0 8px 28px #0000000a}.studio-arch,.studio-code,.studio-stack{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}.studio-arch-copy,.studio-code-copy,.studio-stack-copy,.studio-live-head>div:first-child{display:grid;gap:.7rem}.studio-layer-switch,.studio-code-tabs,.studio-theme-row{display:flex;flex-wrap:wrap;gap:.4rem}.studio-layer-btn,.studio-code-tab,.studio-theme-btn{padding:.45rem .85rem;border-radius:999px;border:1px solid rgba(0,0,0,.1);background:#f5f5f7;color:#1d1d1f;font:inherit;font-size:.84rem;font-weight:650;cursor:pointer}.studio-layer-btn.is-active,.studio-code-tab.is-active,.studio-theme-btn.is-active{background:#1d1d1f;border-color:#1d1d1f;color:#f5f5f7}.studio-layer-note{display:grid;gap:.35rem;padding:1rem 1.1rem;border-radius:1rem;background:#f5f5f7}.studio-layer-note strong{font-size:1rem}.studio-layer-note p{margin:0;color:#6e6e73;font-size:.95rem;line-height:1.45}.studio-tree{margin:0;padding:1.15rem 1.2rem;border-radius:1.15rem;background:#1d1d1f;color:#d2f5c4;font-family:var(--mono);font-size:.74rem;line-height:1.55;overflow:auto}.studio-live-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:end}.studio-theme{display:grid;gap:.4rem}.studio-theme>span{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6e6e73}.studio-live-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(16rem,.85fr);gap:1rem;padding:1rem;border-radius:1.25rem;transition:background .25s ease}.studio-live-grid.theme-mint{background:linear-gradient(180deg,#f4fbf6,#eef8f1)}.studio-live-grid.theme-ink{background:linear-gradient(180deg,#eef1f4,#e5e9ee)}.studio-live-grid.theme-sand{background:linear-gradient(180deg,#f8f4ec,#f3ecdf)}.studio-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.studio-checklist{margin:0;padding-left:1.1rem;display:grid;gap:.4rem;color:#6e6e73;font-size:.95rem;line-height:1.45}.studio-principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.studio-principle{display:grid;gap:.4rem;padding:1.15rem;border-radius:1.2rem;border:1px solid rgba(0,0,0,.08);background:#fff}.studio-principle strong{font-size:1rem;letter-spacing:-.02em}.studio-principle p{margin:0;color:#6e6e73;font-size:.9rem;line-height:1.45}.arcade-hero{position:relative;overflow:hidden;display:grid;gap:1rem;align-content:center;width:100%;max-width:none;margin-left:0;margin-right:0;box-sizing:border-box;min-height:clamp(18rem,calc(100dvh - 8rem),26rem);padding:2.2rem 1.5rem;border-radius:1.5rem;border:1px solid rgba(120,192,24,.35);background:radial-gradient(circle at 85% 20%,rgba(144,192,24,.35),transparent 35%),radial-gradient(circle at 10% 90%,rgba(24,144,48,.3),transparent 40%),linear-gradient(135deg,#001010,#00241c 40%,#003830);color:#f0fff4;box-shadow:0 18px 44px #00141038}.arcade-hero-art{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.arcade-logo{position:absolute;opacity:.1;width:7rem;height:auto}.arcade-logo-a{top:12%;right:8%}.arcade-logo-b{bottom:8%;right:22%;width:4.5rem;opacity:.07}.arcade-orbit{position:absolute;top:-20%;right:-8%;width:22rem;height:22rem;border-radius:50%;border:1px dashed rgba(184,224,100,.22)}.arcade-hero-copy{position:relative;z-index:1;display:grid;gap:.7rem;max-width:42rem}.arcade-eyebrow{margin:0;font-size:.74rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:#b7e38a}.arcade-title{margin:0;font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;letter-spacing:-.04em}.arcade-lead{margin:0;color:#f0fff4d1;font-size:1.05rem;line-height:1.5}.arcade-hero-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.2rem}.arcade-cabinet{display:grid;gap:1rem;width:100%;max-width:none;margin-left:0;margin-right:0;box-sizing:border-box;padding:1rem;border-radius:1.5rem;border:1px solid rgba(0,48,48,.2);background:linear-gradient(180deg,#0d2a22,#12352c 40%,#0f2922);box-shadow:0 24px 54px #00141047}.arcade-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.arcade-pick{display:grid;gap:.35rem;padding:1rem;border-radius:1.15rem;border:1px solid rgba(184,224,196,.2);background:#ffffff0d;color:#f0fff4;text-align:left;font:inherit;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease}.arcade-pick em{width:fit-content;padding:.15rem .45rem;border-radius:999px;background:#78c0182e;color:#b7e38a;font-style:normal;font-size:.68rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.arcade-pick strong{font-size:1.05rem}.arcade-pick span{color:#d8f3dcb8;font-size:.84rem;line-height:1.4}.arcade-pick.is-active{transform:translateY(-2px);border-color:#78c018b3;background:linear-gradient(145deg,#78c01847,#1890302e);box-shadow:0 12px 28px #0003}.arcade-pick:focus-visible{outline:2px solid #78c018;outline-offset:2px}.arcade-screen{display:grid;gap:.9rem;padding:1.1rem;border-radius:1.25rem;border:1px solid rgba(120,192,24,.28);background:radial-gradient(circle at 50% 0%,rgba(120,192,24,.12),transparent 45%),#0012128c}.arcade-screen-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem;padding-bottom:.55rem;border-bottom:1px solid rgba(184,224,196,.16);color:#d8f3dcb3;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}.arcade-screen-bar strong{color:#f0fff4;font-size:.95rem;letter-spacing:0;text-transform:none}.arcade-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.arcade-note{display:grid;gap:.35rem;padding:1.05rem;border-radius:1.1rem;border:1px solid var(--j-border);background:#ffffffe0}.arcade-note strong{color:var(--j-forest)}.arcade-note p{margin:0;color:var(--j-muted);font-size:.9rem;line-height:1.45}.river-lesson .game-option{background:#ffffff1a;border-color:#b8e0c44d;color:#f0fff4}.river-lesson .game-option:hover{background:#78c01838}.river-lesson .expect{background:#d8f3dc1f;border-color:#b8e0c44d;color:#d8f3dc}.river-lesson .btn-outline{color:#f0fff4;border-color:#d8f3dc4d;background:#ffffff0f}@keyframes arcade-float{0%,to{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(4deg)}}@keyframes arcade-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.game-page:focus{outline:none}.game-layout{display:grid;gap:1rem;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr);align-items:start}.game-board-wrap,.game-lesson{display:grid;gap:.85rem}.game-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.35rem;padding:.75rem;border-radius:1.15rem;border:1px solid var(--j-border);background:radial-gradient(circle at 20% 0%,rgba(120,192,24,.16),transparent 45%),linear-gradient(160deg,#e7f7ef,#d8f0f4 55%,#eef8f0);box-shadow:var(--j-shadow);touch-action:none;user-select:none;-webkit-user-select:none}.game-cell{position:relative;aspect-ratio:1;border-radius:.7rem;border:1px solid rgba(184,224,196,.7);background:#ffffff8c;overflow:hidden}.game-cell.has-lesson{background:#d8f3dce6;box-shadow:inset 0 0 0 1px #78c01859}.game-cell.is-solved{background:linear-gradient(135deg,#18903033,#78c01847)}.game-cell.is-player{box-shadow:0 0 0 2px #78c0188c}.game-pad{position:absolute;inset:auto .2rem .2rem;font-size:.55rem;font-weight:750;text-align:center;color:var(--j-canopy);line-height:1.1}.game-hero{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;opacity:0;transform:scale(.8);transition:opacity .2s ease,transform .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.game-hero.is-visible{opacity:1;transform:scale(1)}.game-hero img{width:1.7rem;height:auto;filter:drop-shadow(0 4px 8px rgba(0,48,48,.25))}.game-dpad{display:grid;gap:.4rem;justify-items:center;max-width:16rem;margin:0 auto;width:100%}.dpad-mid{display:flex;gap:.4rem}.dpad-btn{min-width:4.5rem;min-height:2.75rem;touch-action:manipulation}.game-message{margin:0;text-align:center;color:var(--j-muted);font-size:.9rem}.game-options{display:grid;gap:.5rem}.game-option{text-align:left;min-height:2.75rem;padding:.75rem .9rem;border-radius:.85rem;border:1px solid var(--j-border);background:#fff;font:inherit;font-weight:650;color:var(--j-forest);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .15s ease,background .15s ease,border-color .15s ease}.game-option:hover{transform:translateY(-1px);background:var(--j-mint);border-color:var(--j-lime)}.game-option:focus-visible{outline:2px solid var(--j-lime);outline-offset:2px}.ap-log-item{animation:log-in .35s cubic-bezier(.22,1,.36,1) both}@keyframes log-in{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@media(min-width:981px){.tutorial-page .tutorial-preview>:first-child,.tutorial-page .tutorial-preview .live-panel{top:5.5rem}}@media(max-width:980px){.tutorial-sticky-layout,.tutorial-stage,.tutorial-hero-inner,.game-layout,.arcade-picker,.arcade-notes,.studio-arch,.studio-code,.studio-stack,.studio-live-grid,.studio-principles,.studio-catalog,.track-switch{grid-template-columns:1fr}.tutorial-preview .code-block,.tutorial-preview .live-panel,.tutorial-preview .mini-demo{position:static}.step-nav{grid-template-columns:1fr;justify-items:stretch}.step-nav .btn{width:100%}}@media(max-width:768px){.version-badge{order:3;font-size:.65rem;padding:.2rem .45rem}.game-board{grid-template-columns:repeat(8,minmax(0,1fr));gap:.22rem;padding:.5rem}.game-pad{font-size:.42rem}.game-hero img{width:1.25rem}.game-dpad{max-width:100%;gap:.5rem;padding:.35rem 0}.dpad-btn{min-width:4.75rem;min-height:2.75rem;font-size:.95rem}.code-modal{padding:max(.75rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) max(.75rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left))}.code-panel{max-height:min(82dvh,40rem)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.header,.btn,.nav-link,.next-card,.solution-panel,.scroll-timeline-top-fill,.scroll-timeline-top-glow,.scroll-timeline-fill,.scroll-timeline-orb,.game-hero,.game-option,.ap-log-item{transition:none!important}.scroll-timeline-orb-ring,.ap-log-item{animation:none!important}.btn:hover,.next-card:hover,.game-option:hover{transform:none}.code-modal{animation:none}}@keyframes rise-in{0%{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:translateY(0)}}@keyframes soft-glow{0%,to{opacity:.4}50%{opacity:.55}}@keyframes reveal-in{0%{opacity:.85;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes reveal-in-left{0%{opacity:.85;transform:translate(-6px)}to{opacity:1;transform:none}}@keyframes reveal-in-right{0%{opacity:.85;transform:translate(6px)}to{opacity:1;transform:none}}@keyframes reveal-in-scale{0%{opacity:.85;transform:scale(.99)}to{opacity:1;transform:none}}.rise-in{animation:rise-in .45s cubic-bezier(.22,1,.36,1) both}.rise-in-delay-1{animation-delay:.05s}.rise-in-delay-2{animation-delay:.1s}.rise-in-delay-3{animation-delay:.15s}.hero-orb{opacity:.45}.hero-enter{animation:hero-enter .5s cubic-bezier(.22,1,.36,1) both}.hero-enter-delay{animation:hero-enter .5s cubic-bezier(.22,1,.36,1) .06s both}@keyframes hero-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}[data-reveal]{opacity:1;transform:none}[data-reveal].is-revealed{animation:reveal-in .4s cubic-bezier(.22,1,.36,1) both}[data-reveal].reveal-left.is-revealed{animation-name:reveal-in-left}[data-reveal].reveal-right.is-revealed{animation-name:reveal-in-right}[data-reveal].reveal-scale.is-revealed{animation-name:reveal-in-scale}[data-reveal].reveal-fade.is-revealed,[data-reveal].reveal-mask.is-revealed,[data-reveal].reveal-clip.is-revealed{animation-name:reveal-in}.cascade>*:nth-child(1){animation-delay:0ms}.cascade>*:nth-child(2){animation-delay:40ms}.cascade>*:nth-child(3){animation-delay:80ms}.cascade>*:nth-child(4){animation-delay:.12s}.cascade>*:nth-child(5){animation-delay:.16s}.cascade>*{opacity:1;transform:none}[data-reveal].is-revealed.cascade>*,.is-revealed .cascade>*{animation:reveal-in .35s cubic-bezier(.22,1,.36,1) both}@media(prefers-reduced-motion:reduce){.rise-in,.rise-in-delay-1,.rise-in-delay-2,.rise-in-delay-3,.hero-orb,.hero-enter,.hero-enter-delay,[data-reveal].is-revealed,[data-reveal].is-revealed.cascade>*,.is-revealed .cascade>*{animation:none!important}}.pg-tok-keyword{color:#7dd3fc}.pg-tok-string{color:#f9a8d4}.pg-tok-number{color:#fbbf24}.pg-tok-comment{color:#6b8f7a;font-style:italic}.pg-tok-tag{color:#86efac}.pg-tok-attr{color:#bef264}.pg-tok-directive{color:#fde047;font-weight:700}.pg-tok-punct{color:#94a3b8}.pg-tok-ident{color:#e2e8f0}