.code-mode-page{--cm-bg:#fafafa;--cm-card:#ffffff;--cm-ink:#0f172a;--cm-muted:#334155;--cm-faint:#8a8378;--cm-line:#e3dcd0;--cm-blue:#187cf4;--cm-blue-hover:#0f62c8;--cm-blue-soft:#e7f1fd;--cm-code-bg:#f7f4ee;color-scheme:light;background:var(--cm-bg);min-height:100vh;font-size:16px;line-height:1.6}.code-mode-page,.code-mode-page h1,.code-mode-page h2,.code-mode-page h3{color:var(--cm-ink);font-family:var(--font-poppins),ui-sans-serif,system-ui,sans-serif}.code-mode-page h1{font-size:clamp(32px,20px + 3.3vw,48px);line-height:1.25;font-weight:700;letter-spacing:-.02em}.code-mode-page h2{margin-top:.35rem;font-size:clamp(27px,18px + 2.35vw,36px);line-height:1.3;font-weight:600;letter-spacing:-.01em}.code-mode-page a{color:var(--cm-blue);text-underline-offset:3px}.code-mode-page a:hover{color:var(--cm-blue-hover)}.code-mode-page .cm-kicker{font-family:var(--font-poppins),ui-sans-serif,system-ui,sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cm-blue)}.code-mode-page .cm-muted{color:var(--cm-muted)}.code-mode-page .cm-prose>*+*{margin-top:1rem}.code-mode-page .cm-prose li,.code-mode-page .cm-prose p{color:var(--cm-ink)}.code-mode-page .cm-prose strong{font-weight:600}.code-mode-page .cm-prose ol,.code-mode-page .cm-prose ul{padding-left:1.25rem}.code-mode-page .cm-prose ul{list-style:disc}.code-mode-page .cm-prose ol{list-style:decimal}.code-mode-page .cm-prose li+li{margin-top:.4rem}.code-mode-page .cm-inline{border-radius:.3rem;background:var(--cm-blue-soft);padding:.05rem .35rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;color:#0d4e9e}.code-mode-page .cm-code,.code-mode-page .cm-table-wrap,.code-mode-page article{min-width:0;max-width:100%}.code-mode-page .cm-code{overflow:hidden;border:1px solid var(--cm-line);border-radius:.75rem;background:var(--cm-code-bg)}.code-mode-page .cm-code figcaption{border-bottom:1px solid var(--cm-line);padding:.45rem .9rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;color:var(--cm-faint)}.code-mode-page .cm-code pre{overflow-x:auto;padding:1rem 1.05rem 1.1rem;font-size:.84rem;line-height:1.6;color:var(--cm-ink)}.code-mode-page .cm-table-wrap{overflow-x:auto;border:1px solid var(--cm-line);border-radius:.75rem;background:var(--cm-card)}.code-mode-page table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.45}.code-mode-page td,.code-mode-page th{padding:.75rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--cm-line)}.code-mode-page tr:last-child td{border-bottom:0}.code-mode-page th{font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--cm-muted);background:#faf7f2}.code-mode-page .cm-prose ul.cm-benefits{display:grid;gap:.75rem;margin-top:1.25rem;padding:0;list-style:none}.code-mode-page .cm-benefits li{display:grid;gap:.25rem;border:1px solid var(--cm-line);border-radius:.75rem;background:var(--cm-card);padding:.9rem 1rem}.code-mode-page .cm-benefits li+li{margin-top:0}.code-mode-page .cm-benefits span{color:var(--cm-muted)}.code-mode-page .cm-compare td:nth-child(2),.code-mode-page .cm-compare th:nth-child(2){background:var(--cm-blue-soft)}.code-mode-page .cm-steps{display:grid;gap:0;border:1px solid var(--cm-line);border-radius:.75rem;background:var(--cm-card)}.code-mode-page .cm-steps li{display:grid;grid-template-columns:2.25rem 1fr;gap:.75rem;padding:.85rem 1rem;border-top:1px solid var(--cm-line);list-style:none}.code-mode-page .cm-steps li:first-child{border-top:0}.code-mode-page .cm-step-n{font-family:var(--font-poppins),ui-sans-serif,system-ui,sans-serif;font-size:.95rem;font-weight:600;color:var(--cm-blue)}.code-mode-page .cm-faq details{border-top:1px solid var(--cm-line)}.code-mode-page .cm-faq details:first-child{border-top:0}.code-mode-page .cm-faq summary{display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 0;font-weight:600;list-style:none}.code-mode-page .cm-faq summary::-webkit-details-marker{display:none}.code-mode-page .cm-faq summary:after{content:"+";color:var(--cm-blue);font-size:1.25rem;line-height:1}.code-mode-page .cm-faq details[open] summary:after{content:"–"}.code-mode-page .cm-faq details p{padding-bottom:1.05rem;color:var(--cm-muted)}.code-mode-page .cm-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:.5rem;background:var(--cm-blue);padding:.7rem 1.05rem;font-weight:600;color:#fff;text-decoration:none}.code-mode-page .cm-btn:hover{background:var(--cm-blue-hover);color:#fff}.code-mode-page .cm-btn:disabled{opacity:.6}.code-mode-page .cm-actions{display:grid;gap:.75rem;align-content:start}.code-mode-page .cm-actions .cm-btn,.code-mode-page .cm-actions .cm-btn-line{width:100%}.code-mode-page .cm-btn-line{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid var(--cm-line);border-radius:.5rem;background:#fff;padding:.7rem 1.05rem;font-weight:600;color:var(--cm-ink);text-decoration:none}.code-mode-page .cm-btn-line:hover{border-color:var(--cm-blue);color:var(--cm-blue)}.code-mode-page .cm-field{width:100%;margin-top:.35rem;border:1px solid var(--cm-line);border-radius:.5rem;background:#fff;padding:.7rem .8rem;font-size:.92rem;color:var(--cm-ink);outline:none}.code-mode-page .cm-field:focus{border-color:var(--cm-blue);box-shadow:0 0 0 3px rgb(24 124 244/.18)}.code-mode-page .cm-field::placeholder{color:#b0a89c}.code-mode-page .cm-btn,.code-mode-page .cm-choice,.code-mode-page input,.code-mode-page summary{scroll-margin-top:5.5rem}.code-mode-page .cm-choice{display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;border:1px solid var(--cm-line);border-radius:.6rem;background:#fff;padding:.7rem .8rem;font-size:.88rem}.code-mode-page .cm-choice[data-on=true]{border-color:var(--cm-blue);background:var(--cm-blue-soft)}.code-mode-page .cm-toc{min-width:0;max-width:100%}.code-mode-page .cm-toc ul{max-width:100%}.code-mode-page .cm-toc a{color:var(--cm-muted);text-decoration:none}.code-mode-page .cm-toc a:hover{color:var(--cm-blue)}.code-mode-page .cm-story{height:260vh}.code-mode-page .cm-story-static{height:auto;display:grid;gap:4rem;padding:4rem 1.25rem 2rem}.code-mode-page .cm-story-pin{position:sticky;top:4rem;z-index:10;display:grid;align-content:center;height:calc(100vh - 4rem);overflow:auto;padding:1.5rem 1.25rem}.code-mode-page .cm-scene{animation:cm-rise .4s ease}@keyframes cm-rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.code-mode-page .cm-scene{display:grid;gap:1.5rem;width:min(68rem,100%);margin-inline:auto}@media (min-width:960px){.code-mode-page .cm-scene{grid-template-columns:minmax(16rem,22rem) minmax(0,1fr);align-items:center;gap:2.5rem}}.code-mode-page .cm-scene-copy h2{margin-top:.4rem}.code-mode-page .cm-scene-copy p{margin-top:.75rem}.code-mode-page .cm-scene-steps{display:flex;gap:.5rem;margin-top:1.1rem;padding:0;list-style:none}.code-mode-page .cm-scene-steps li{border-radius:999px;border:1px solid var(--cm-line);padding:.2rem .65rem;font-size:.75rem;color:var(--cm-faint)}.code-mode-page .cm-scene-steps li[data-on=true]{border-color:var(--cm-blue);background:var(--cm-blue-soft);color:#0d4e9e}.code-mode-page .cm-story-track{margin-top:1rem;height:3px;border-radius:999px;background:var(--cm-line);overflow:hidden}.code-mode-page .cm-story-track span{display:block;height:100%;background:var(--cm-blue)}.code-mode-page .cm-board{display:grid;grid-template-columns:minmax(0,1fr) 4.75rem minmax(0,1fr);gap:.6rem;min-width:0}.code-mode-page .cm-pane{min-width:0;border:1px solid var(--cm-line);border-radius:.85rem;background:var(--cm-card);padding:.75rem}.code-mode-page .cm-pane-title{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cm-faint)}.code-mode-page .cm-pane-body{margin-top:.55rem;min-height:11.5rem}.code-mode-page .cm-chip-cloud{display:flex;flex-wrap:wrap;gap:.35rem}.code-mode-page .cm-chip{border-radius:.4rem;background:#f1f5f9;padding:.2rem .45rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.68rem;color:#334155}.code-mode-page .cm-chip-meta,.code-mode-page .cm-chip[data-hot=true]{background:var(--cm-blue-soft);color:#0d4e9e}.code-mode-page .cm-flow{display:grid;align-content:center;justify-items:center;gap:.4rem}.code-mode-page .cm-flow-line{width:2px;height:4.5rem;background:linear-gradient(var(--cm-blue),transparent)}.code-mode-page .cm-packet{max-width:4.6rem;border-radius:.45rem;background:var(--cm-blue);padding:.25rem .3rem;text-align:center;font-size:.65rem;font-weight:600;line-height:1.2;color:#fff}.code-mode-page .cm-blob[data-show],.code-mode-page .cm-call[data-show],.code-mode-page .cm-chip-cloud[data-show],.code-mode-page .cm-hidden-note[data-show],.code-mode-page .cm-local[data-show],.code-mode-page .cm-result[data-show],.code-mode-page .cm-script[data-show],.code-mode-page .cm-stack{transition:opacity .35s ease,transform .35s ease}.code-mode-page [data-show=false]{display:none}.code-mode-page .cm-blob,.code-mode-page .cm-call,.code-mode-page .cm-hidden-note,.code-mode-page .cm-local,.code-mode-page .cm-result{margin-top:.45rem;border-radius:.45rem;padding:.45rem .55rem;font-size:.78rem;line-height:1.35}.code-mode-page .cm-call{background:var(--cm-blue-soft);color:#0d4e9e;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.code-mode-page .cm-blob{background:#fff7ed;color:#9a3412}.code-mode-page .cm-result{background:#ecfdf5;color:#065f46;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.code-mode-page .cm-local span,.code-mode-page .cm-result span{display:block;font-family:var(--font-poppins),ui-sans-serif,system-ui,sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.code-mode-page .cm-script{margin-top:.45rem;overflow:auto;border-radius:.45rem;background:#0f172a;padding:.65rem .7rem;color:#e2e8f0;font-size:.68rem;line-height:1.45}.code-mode-page .cm-local{background:var(--cm-blue-soft);color:#0d4e9e}.code-mode-page .cm-hidden-note{color:var(--cm-muted)}.code-mode-page .cm-story-note{text-align:center}@media (max-width:720px){.code-mode-page .cm-story{height:320vh}.code-mode-page .cm-board{grid-template-columns:1fr}.code-mode-page .cm-flow{grid-template-columns:4.5rem 1fr;justify-items:start;align-items:center}.code-mode-page .cm-flow-line{width:4.5rem;height:2px;background:linear-gradient(90deg,var(--cm-blue),transparent)}.code-mode-page .cm-pane-body{min-height:0}}.code-mode-page ul.cm-benefits{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}.code-mode-page .cm-switch{display:grid;gap:.75rem}.code-mode-page .cm-switch article{border:1px solid var(--cm-line);border-radius:.75rem;background:var(--cm-card);padding:1rem 1.1rem}.code-mode-page .cm-switch-n{font-size:.75rem;font-weight:600;letter-spacing:.14em;color:var(--cm-blue)}.code-mode-page .cm-side{display:grid;gap:.75rem;margin-top:.9rem}.code-mode-page .cm-side p{margin:0}.code-mode-page .cm-side strong{display:block;margin-bottom:.15rem;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cm-faint)}.code-mode-page .cm-directory{display:grid;gap:.75rem;margin-top:1.25rem;padding:0;list-style:none}.code-mode-page .cm-directory li{border:1px solid var(--cm-line);border-radius:.75rem;background:var(--cm-card);padding:1rem 1.1rem}.code-mode-page .cm-directory a{font-weight:600;text-decoration:none}.code-mode-page .cm-directory p{margin:.35rem 0 0;color:var(--cm-muted)}@media (min-width:900px){.code-mode-page .cm-directory,.code-mode-page .cm-switch{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){.code-mode-page{scroll-behavior:auto}.code-mode-page .cm-story{height:auto}.code-mode-page .cm-scene{animation:none}}