:root{--bg:#f6f8fa;--surface:#fff;--ink:#1f2328;--muted:#59636e;--line:#d0d7de;--accent:#0969da;--accent-soft:#ddf4ff;--caution:#8a4600;--on-accent:#fff;--body-size:17px;--measure:45em;--radius:12px;--space:24px;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--bg:#0d1117;--surface:#161b22;--ink:#e6edf3;--muted:#9198a1;--line:#30363d;--accent:#4493f8;--accent-soft:#132339;--caution:#d29922;--on-accent:#0d1117}figure:not(.scene,.home-hero) svg{& text[fill=\#1f2937]{fill:var(--ink)}& text[fill=\#64748b]{fill:var(--muted)}& text[fill=\#2563eb]{fill:var(--accent)}& path[stroke=\#2563eb]{stroke:var(--accent)}& rect[fill=white],& rect[fill=\#f1f5f9]{fill:var(--surface)}& rect[fill=\#eff6ff]{fill:var(--accent-soft)}& rect[fill=\#f0fdfa]{fill:#0d2624}& rect[stroke=\#cbd5e1],& rect[stroke=\#bfdbfe]{stroke:var(--line)}}svg [fill=\#111827]{fill:#3a4352}}.table-wrap{overflow-x:auto}.compare{border-collapse:collapse;background:var(--surface);width:100%}.compare caption{text-align:left;padding-bottom:12px;font-weight:600}.compare th,.compare td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:12px}.compare th{font-weight:600}.callout{background:var(--accent-soft);border-left:3px solid var(--caution);border-radius:var(--radius);padding:12px 16px}.callout-label{color:var(--caution);margin:0 0 4px;font-weight:600}:root{--measure:min(84em, 92vw)}.compare th,.compare td{overflow-wrap:normal}main{grid-template-columns:minmax(0,1fr) 260px;column-gap:40px;max-width:min(84em + 300px,97vw);display:grid}main>*{grid-column:1}main>.toc{border-left:1px solid var(--line);grid-area:1/2/span 60;align-self:start;max-height:100vh;margin:0;padding:8px 0 24px 20px;font-size:.92rem;position:sticky;top:0;overflow-y:auto}.toc ul{margin:0;padding:0;list-style:none}.toc li+li{margin-top:2px}.toc ul ul{margin:2px 0 4px 12px;font-size:.95em}.toc a{color:var(--ink);border-left:2px solid #0000;border-radius:0 6px 6px 0;padding:4px 10px;text-decoration:none;display:block}.toc a:hover{background:var(--surface);border-left-color:var(--accent)}.toc .toc-head{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:20px 0 6px;font-size:.75rem}.toc .toc-head:first-child{margin-top:0}.toc .toc-top{margin:16px 0 0}.toc .toc-top a{color:var(--muted)}@media (width<=1100px){main{display:block}main>.toc{border-left:0;max-height:none;margin-bottom:40px;padding:0;position:static}}.lead-in{font-size:1.08em}.stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:20px 0;display:grid}.stat{background:var(--accent-soft);border-radius:var(--radius);padding:16px 18px}.stat p{margin:0}.stat-num{color:var(--accent);white-space:nowrap;font-size:1.7rem;font-weight:700;line-height:1.15}.stat-label{color:var(--ink);font-size:.9em;line-height:1.4;margin-top:6px!important}.cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:0 0 8px;display:grid}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}.card p{margin:0}.card .card-title{margin-bottom:6px;font-weight:700}.cards-wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));margin:20px 0}.card h3{margin:0 0 10px;font-size:1.05rem}.card ul{margin:0;padding-left:18px}.card li{margin:0}.card li+li{margin-top:10px}.htl{grid-template-columns:repeat(7,minmax(130px,1fr));min-width:940px;margin:0;padding:0;list-style:none;display:grid}.htl li{margin:0;padding:30px 14px 0 0;position:relative}header h1{text-wrap:wrap;max-width:none}.htl li:before{content:"";border-top:2px solid var(--line);position:absolute;top:7px;left:0;right:0}.htl li:last-child:before{right:50%}.htl li:after{content:"";background:var(--accent);border-radius:50%;width:14px;height:14px;position:absolute;top:1px;left:0}.htl p{margin:0;font-size:.92em;line-height:1.45}.htl .htl-date{color:var(--ink);margin-bottom:6px;font-weight:600}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);font:var(--body-size)/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;overflow-wrap:anywhere;margin:0}main{max-width:calc(var(--measure) + 2 * var(--space));padding:48px var(--space) 72px;margin:auto}h1,h2,h3{text-wrap:balance;line-height:1.2}h1{margin:12px 0;font-size:clamp(2rem,4vw,3rem)}h2{margin:0;font-size:1.5rem}h3{margin:0 0 8px;font-size:1.1rem}p{margin:0 0 16px}li+li{margin-top:8px}img,svg,video{max-width:100%;height:auto;display:block}pre{overflow-x:auto}:is(section,.post-body)>*{margin-top:0;margin-bottom:0}:is(section,.post-body)>*+*{margin-top:16px}:is(section,.post-body)>*+figure,:is(section,.post-body)>figure+*{margin-top:28px}.post-body>*+h2{margin-top:56px}:is(section,.post-body)>*+h3{margin-top:40px}:is(section,.post-body)>h2+h3{margin-top:16px}:is(section,.post-body)>h3+*{margin-top:8px}a{color:var(--accent);text-underline-offset:3px}a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.skip-link{background:var(--surface);padding:8px;position:absolute;top:-100px;left:16px}.skip-link:focus{top:8px}.eyebrow,.meta,figcaption{color:var(--muted)}.eyebrow{margin-bottom:8px}.lead{font-size:1.2rem}.takeaway{border-left:4px solid var(--accent);padding-left:var(--space);margin-bottom:40px}main>section{margin-top:56px}section section{margin-top:40px}figure{margin:0}figure>img,figure>svg{margin-inline:auto}figcaption{text-align:center;margin-top:12px;font-size:.9rem}.gameplay-screenshot{max-width:960px;margin-inline:auto}.build-workflow{max-width:960px;margin-inline:auto;display:flow-root}.build-workflow-cycle{aspect-ratio:1;width:min(100%,660px);margin:24px auto 32px;position:relative;container-type:inline-size}.build-workflow-ring{width:100%;height:100%;position:absolute;inset:0}.build-workflow-center{width:30%;max-width:140px;color:var(--muted);text-align:center;margin:0;font-weight:600;line-height:1.3;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.build-workflow-feedback-label{background:var(--bg);color:var(--muted);padding:2px 6px;font-size:1rem;line-height:1.3;position:absolute;transform:translate(-50%,-50%)}.build-workflow-revise{top:50%;left:76.667%}.build-workflow-fix{top:71.667%;left:40%}.build-workflow-steps{margin:0;padding:0;list-style:none;position:absolute;inset:0}.build-workflow-steps>li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-align:center;width:min(33cqi,180px);min-height:clamp(88px,16cqi,104px);margin:0;padding:clamp(4px,1.8cqi,12px);position:absolute;transform:translate(-50%,-50%)}.build-workflow-steps>li:first-child{top:11.5%;left:50%}.build-workflow-steps>li:nth-child(2){top:30.75%;left:83.342%}.build-workflow-steps>li:nth-child(3){top:69.25%;left:83.342%}.build-workflow-steps>li:nth-child(4){top:88.5%;left:50%}.build-workflow-steps>li:nth-child(5){top:69.25%;left:16.658%}.build-workflow-steps>li:nth-child(6){top:30.75%;left:16.658%}.build-workflow-steps strong,.build-workflow-steps span{display:block}.build-workflow-steps strong{line-height:1.25}.build-workflow-steps span{color:var(--muted);margin-top:4px;font-size:1rem;line-height:1.3}.build-workflow-steps>.steering-step{background:var(--accent-soft);border-color:var(--accent)}.toc{margin-bottom:40px}footer{border-top:1px solid var(--line);margin-top:40px;padding-top:16px}@media (width<=720px){main{padding:28px 20px 48px}}@container (width<=420px){.build-workflow-steps strong{font-size:1rem}.build-workflow-center{top:38%}.build-workflow-feedback-label{padding:0}.build-workflow-revise{top:55%;left:57%}.build-workflow-fix{top:55.833%}}@container (width<=320px){.build-workflow-steps>li{padding:2px}}@media print{body{background:var(--surface)}main{max-width:none;padding:0}.skip-link{display:none}}.series-note{color:var(--muted);font-size:.95em}.toc a[aria-current=page]{border-left-color:var(--accent);background:var(--surface);font-weight:600}.series-nav{flex-wrap:wrap;justify-content:space-between;gap:16px;display:flex}.series-nav a{text-decoration:none}.series-nav .label{color:var(--muted);font-size:.85em;display:block}.byline{color:var(--muted);margin-top:16px;font-size:.9em}.parts{gap:14px;padding:0;list-style:none;display:grid}.parts li{margin:0}.parts a{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;text-decoration:none;display:block}.parts a:hover{border-color:var(--accent)}.parts .part-num{color:var(--muted);font-size:.85em}.parts .part-title{color:var(--accent);margin:2px 0 4px;font-weight:700;display:block}.site-header{max-width:calc(var(--measure) + 2 * var(--space));padding:18px var(--space);border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;margin:0 auto;display:flex}.site-name{color:var(--ink);font-size:1.1rem;font-weight:700;text-decoration:none}.site-links{gap:22px;display:flex}.site-links a{color:var(--muted);text-decoration:none}.site-links a:hover,.site-links a[aria-current=page]{color:var(--ink)}.narrow{--measure:min(64em, 92vw)}.narrow main{display:block}.post-meta{color:var(--muted);font-size:.9em}.intro{grid-template-columns:minmax(0,1fr) minmax(220px,340px);align-items:center;gap:24px;margin-bottom:40px;display:grid}.intro .takeaway{margin-bottom:0}.home-hero,.scene{margin:0}.home-hero svg,.scene svg{width:100%;height:auto;display:block}.scene{justify-self:end;width:100%;max-width:300px}.home-hero .bubble,.scene .bubble{animation:9s ease-in-out infinite bubble-float}.home-hero .b2{animation-delay:-2.25s}.home-hero .b3{animation-delay:-4.5s}.home-hero .b4{animation-delay:-6.75s}@keyframes bubble-float{0%{opacity:0;transform:translateY(18px)}12%,72%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-14px)}}@media (width<=720px){.intro{grid-template-columns:1fr}.home-hero,.scene{justify-self:start;max-width:260px}}@media (prefers-reduced-motion:reduce){.home-hero .bubble,.scene *{animation:none!important}}.writing-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px;display:grid}.writing-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;min-width:0;display:flex;overflow:hidden}.writing-card-art{background:var(--accent-soft);border-bottom:1px solid var(--line);place-items:center;height:190px;padding:16px;display:grid}.writing-card-art .scene{justify-self:center;height:100%}.writing-card-art svg{width:100%;height:100%;max-height:158px}.writing-card-art *{transition:none!important;animation:none!important}.writing-card-body{flex-direction:column;flex:1;padding:24px;display:flex}.writing-card .post-meta{margin:0 0 12px}.writing-card h3{margin:0 0 12px;font-size:1.4rem;line-height:1.25}.writing-card h3 a{color:var(--ink);text-decoration:none}.writing-card h3 a:hover{text-decoration:underline}.writing-card-summary{margin:0}.writing-card-actions{flex-wrap:wrap;gap:12px 20px;margin:auto 0 0;padding-top:20px;font-size:.95rem;display:flex}@media (width<=700px){.writing-grid{grid-template-columns:1fr}}.button{background:var(--accent);color:var(--on-accent);border-radius:999px;padding:10px 18px;font-weight:600;text-decoration:none;display:inline-block}.button:hover{filter:brightness(1.1)}.hello{background:var(--accent-soft);border-radius:14px;margin:48px 0 24px;padding:24px 32px}.hello h2{margin-top:0}.hello p:last-child{margin-bottom:0}
