.ex{background:var(--bg);grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);display:grid}.ex__viz{border-right:1px solid var(--line);flex-direction:column;justify-content:center;align-items:center;gap:1.25rem;height:100vh;padding:clamp(1.5rem,3vw,3rem);display:flex;position:sticky;top:0}.ex-svg{width:100%;max-height:76vh}.ex-play{flex-direction:column;align-items:center;gap:.7rem;width:min(100%,22rem);display:flex}.ex-play__steps{gap:4px;width:100%;display:flex}.ex-play__steps button{background:var(--line);cursor:pointer;border:none;border-radius:999px;flex:1;height:3px;padding:0;transition:background-color .26s}.ex-play__steps button.is-done{background:var(--accent)}.ex-play__steps button:hover{background:var(--ink-soft)}.ex-play__transport{align-items:center;gap:.3rem;display:flex}.ex-play__transport button{width:1.7rem;height:1.7rem;color:var(--ink-soft);cursor:pointer;background:0 0;border:none;border-radius:5px;place-items:center;padding:0;transition:background-color .16s,color .16s;display:grid}.ex-play__transport button:hover{background:var(--surface);color:var(--ink)}.ex-play__transport svg{fill:currentColor;width:11px;height:11px}.ex-play__label{color:var(--ink-soft);font-family:var(--mono);letter-spacing:.04em;margin-left:.4rem;font-size:.66rem}.ex__article{padding:0 clamp(2rem,4vw,4.5rem)}.ex__bar{z-index:5;border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);justify-content:flex-end;align-items:center;padding:.85rem 0;display:flex;position:sticky;top:0}.ex-nav{align-items:center;gap:.85rem;display:flex;position:relative}.ex-nav__bars{gap:3px;display:flex}.ex-nav__bars span{background:var(--line-strong);border-radius:999px;width:18px;height:2px;transition:background-color .3s}.ex-nav__bars span.is-done{background:var(--ink-soft)}.ex-nav__toggle{color:var(--ink-soft);cursor:pointer;font-family:var(--mono);letter-spacing:.04em;background:0 0;border:none;border-radius:5px;align-items:center;gap:.5rem;padding:.3rem .5rem;font-size:.68rem;transition:background-color .16s,color .16s;display:flex}.ex-nav__toggle:hover{background:var(--surface);color:var(--ink)}.ex-nav__count{opacity:.65}.ex-nav__current{text-overflow:ellipsis;white-space:nowrap;max-width:14ch;overflow:hidden}.ex-nav__chevron{opacity:.5;border-top:4px solid;border-left:3.5px solid #0000;border-right:3.5px solid #0000;width:0;height:0}.ex-nav__menu{z-index:10;border:1px solid var(--line);background:var(--bg);border-radius:8px;min-width:15rem;margin:0;padding:.3rem;list-style:none;position:absolute;top:calc(100% + .5rem);right:0;box-shadow:0 8px 28px #16181d14}.ex-nav__menu button{width:100%;color:var(--ink-soft);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:5px;align-items:baseline;gap:.6rem;padding:.5rem .6rem;font-family:inherit;font-size:.85rem;transition:background-color .14s,color .14s;display:flex}.ex-nav__menu button:hover{background:var(--surface);color:var(--ink)}.ex-nav__menu button.is-current{color:var(--ink)}.ex-nav__num{color:var(--line-strong);font-family:var(--mono);font-size:.68rem}.ex-nav__menu button.is-current .ex-nav__num{color:var(--accent)}.ex__intro{flex-direction:column;justify-content:center;min-height:calc(100vh - 3.5rem);padding:4rem 0;display:flex}.ex__back{color:var(--ink-soft);font-family:var(--mono);margin-bottom:2.5rem;font-size:.72rem;text-decoration:none}.ex__back:hover{color:var(--accent)}.ex__intro h1{margin:0 0 1.25rem;font-size:clamp(1.9rem,2.8vw,2.6rem);line-height:1.18}.ex__intro p{max-width:34rem;color:var(--ink-soft);margin:0;font-size:1.08rem;line-height:1.65}.ex__cue{color:var(--ink-soft);font-family:var(--mono);letter-spacing:.12em;opacity:.7;text-transform:uppercase;margin-top:3rem;font-size:.68rem}.ex__chapter{opacity:.34;flex-direction:column;justify-content:center;max-width:33rem;min-height:92vh;padding:3rem 0;transition:opacity .4s;display:flex}.ex__chapter.is-current{opacity:1}.ex__chapter-index{color:var(--ink-soft);font-family:var(--mono);letter-spacing:.12em;margin-bottom:.9rem;font-size:.7rem}.ex__chapter h2{margin:0 0 1rem;font-size:clamp(1.4rem,1.9vw,1.75rem);line-height:1.2}.ex__chapter p{color:var(--ink-soft);margin:0;font-size:1.02rem;line-height:1.72}.ex__chapter-hint{font-family:var(--mono);letter-spacing:.04em;opacity:.8;text-transform:uppercase;color:var(--ink-soft)!important;margin-top:1.25rem!important;font-size:.68rem!important}.ex-group{outline:none}.ex-group.is-interactive{cursor:pointer}.ex-group.is-interactive:focus-visible .ex-node{stroke:var(--accent);stroke-width:3px}.ex-tone-amber{--tone:var(--amber)}.ex-tone-orange{--tone:var(--orange)}.ex-tone-pink{--tone:var(--pink)}.ex-tone-violet{--tone:var(--violet)}.ex-tone-azure{--tone:var(--azure)}.ex-tone-neutral{--tone:var(--line-strong)}.ex-node{fill:color-mix(in srgb, var(--tone) 13%, white);stroke:color-mix(in srgb, var(--tone) 32%, transparent);stroke-width:1.5px;transition:fill .24s}.ex-node.is-emphasis{fill:color-mix(in srgb, var(--tone) 28%, white);stroke:var(--tone);stroke-width:2.5px}.ex-node--frame{fill:#0000;stroke:color-mix(in srgb, var(--tone) 40%, transparent);stroke-dasharray:5 5}.ex-node--op{fill:var(--ink);stroke:var(--ink)}.ex-wire{fill:none;stroke:var(--tone);stroke-width:2px;stroke-dasharray:5 6;stroke-linecap:round}.ex-label{fill:var(--ink);font-family:var(--mono);pointer-events:none;font-size:16px;font-weight:600}.ex-label--frame{font-size:17px;font-weight:700}.ex-label--op{fill:var(--bg)}.ex-label--term{font-size:14px}.ex-sublabel{fill:var(--ink-soft);font-family:var(--mono);letter-spacing:.06em;pointer-events:none;font-size:11px}.ex-sublabel--op{fill:var(--bg)}.ex-sublabel--term{font-size:12px;font-weight:700}@media (width<=900px){.ex{grid-template-columns:1fr}.ex__viz{border-right:none;border-bottom:1px solid var(--line);gap:.75rem;height:56vh;padding:1rem}.ex-svg{max-height:42vh}.ex__intro{min-height:auto;padding:3rem 0 2.5rem}.ex__chapter{min-height:70vh}}