.explainers{--paper:var(--color-paper);--ink:var(--color-ink);--dim:var(--color-graphite);--rule:var(--color-concrete);--wash:var(--color-surface-2);--clay:color-mix(in srgb, var(--color-concrete), var(--color-graphite) 9%);--dark:color-mix(in srgb, var(--color-graphite), var(--color-concrete) 22%);--ghost:color-mix(in srgb, var(--color-concrete), var(--color-graphite) 21%);--focus:var(--role-highlight-graphic);--fail:var(--role-constraint-graphic);--ok:var(--role-value-graphic);--sense:var(--role-measurement-graphic);--act:var(--role-action-graphic);--ref:var(--role-reference-graphic);--fail-text:var(--role-constraint-text);--ok-text:var(--role-value-text);--sense-text:var(--role-measurement-text);--act-text:var(--role-action-text);--shadow:.13;color:var(--color-ink);font-family:var(--font-serif);font-size:18px;line-height:1.55;container-type:inline-size}.explainers [hidden]{display:none!important}.explainers a{color:var(--color-link);text-decoration:underline;-webkit-text-decoration-color:var(--color-border-strong);text-decoration-color:var(--color-border-strong);text-underline-offset:2px}.explainers a:hover{-webkit-text-decoration-color:var(--color-link);text-decoration-color:var(--color-link)}.explainers :focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.explainers .layout{grid-template-columns:200px minmax(0,1fr);gap:36px;display:grid}.explainers .masthead{grid-column:1/-1;gap:8px;max-width:68ch;display:grid}.explainers .masthead p{color:var(--dim);margin:0}.explainers .kicker,.explainers .rail h2{font-family:var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:0;font-size:12px;font-weight:500}.explainers nav.rail{font-family:var(--font-sans);align-self:start;gap:18px;display:grid;position:sticky;top:16px}.explainers .rail ol{gap:1px;margin:6px 0 0;padding:0;list-style:none;display:grid}.explainers .rail a{min-height:32px;color:var(--ink);border-left:2px solid #0000;grid-template-columns:2.2ch 1fr;gap:6px;padding:5px 8px;font-size:15px;line-height:1.3;text-decoration:none;display:grid}.explainers .rail a .n{font-family:var(--font-mono);color:var(--dim);padding-top:2px;font-size:12px}.explainers .rail a:hover{background:var(--wash)}.explainers .rail a[data-current]{border-left-color:var(--color-active-path);background:var(--color-surface);font-weight:600}.explainers .explainer{grid-template-columns:minmax(0,1fr);align-content:start;gap:14px;min-width:0;display:grid}.explainers .explainer header{gap:4px;max-width:64ch;display:grid}.explainers .explainer h2{font-family:var(--font-sans);letter-spacing:-.01em;text-wrap:balance;margin:0;font-size:28px;font-weight:600;line-height:1.2}.explainers .stage{aspect-ratio:16/10;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);touch-action:pan-y;width:100%;position:relative;overflow:hidden}.explainers .stage canvas{outline:none;width:100%;height:100%;display:block}.explainers .stage canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--color-focus)}.explainers .status{text-align:center;font-family:var(--font-sans);color:var(--dim);pointer-events:none;place-items:center;padding:16px;font-size:14px;display:grid;position:absolute;inset:0}.explainers .hint{background:color-mix(in srgb, var(--paper) 88%, transparent);font-family:var(--font-sans);color:var(--dim);pointer-events:none;border-radius:2px;padding:1px 6px;font-size:13px;position:absolute;top:10px;right:12px}.explainers .stage .poster{object-fit:contain;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.explainers .stage[data-mode=live] .poster{display:none}.explainers .stage[data-mode=poster] canvas,.explainers .stage[data-mode=poster] .tag,.explainers .stage[data-mode=poster] .tag-leader{visibility:hidden}.explainers .stage[data-mode=poster] .status{background:color-mix(in srgb, var(--paper) 90%, transparent);padding:8px 16px;inset:auto 0 0}.explainers .stage .start{background:var(--color-surface);position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.explainers .tag{font-family:var(--font-sans);color:var(--ink);background:var(--color-surface);border:1px solid var(--rule);white-space:nowrap;pointer-events:none;border-radius:2px;padding:2px 8px;font-size:13px;font-weight:500;position:absolute;top:0;left:0}.explainers .tag-leader{background:var(--dim);transform-origin:0;pointer-events:none;height:1px;position:absolute;top:0;left:0}.explainers .tag.tone-focus{background:var(--color-selection);border-color:var(--ink);color:var(--ink)}.explainers .tag.tone-fail{border-color:var(--fail-text);color:var(--fail-text)}.explainers .tag.tone-ok{border-color:var(--ok-text);color:var(--ok-text)}.explainers .tag.tone-sense{border-color:var(--sense-text);color:var(--sense-text)}.explainers .tag.tone-act{border-color:var(--act-text);color:var(--act-text)}.explainers .stage-wrap{min-width:0;position:relative}.explainers .card{background:var(--color-surface);border:1px solid var(--rule);width:min(300px,100% - 24px);font-family:var(--font-sans);border-radius:4px;gap:3px;padding:10px 12px;font-size:14px;line-height:1.45;display:grid;position:absolute;bottom:12px;left:12px}.explainers .card .k,.explainers .predict .k{letter-spacing:.07em;text-transform:uppercase;color:var(--dim);font-size:11px;font-weight:600}.explainers .card .name{font-size:16px;font-weight:600}.explainers .card .spec{font-family:var(--font-mono);color:var(--dim);font-size:12.5px}.explainers .card .src{color:var(--dim);font-size:12px}.explainers .steps{grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:14px;display:grid}.explainers .dots{flex-wrap:wrap;gap:6px;padding-top:2px;display:flex}.explainers .dots button{border:1px solid var(--rule);width:28px;height:28px;font-family:var(--font-mono);color:var(--dim);cursor:pointer;background:0 0;border-radius:2px;padding:0;font-size:12px}.explainers .dots button.done{color:var(--ink);border-color:var(--ink)}.explainers .dots button[aria-pressed=true]{background:var(--wash);color:var(--ink);border-color:var(--ink);font-weight:600}.explainers .step-text{max-width:60ch;min-height:2.6em;margin:0;font-size:19px}.explainers .nav{gap:8px;display:flex}.explainers .btn,.explainers .seg{min-height:32px;font-family:var(--font-sans);color:var(--ink);border:1px solid var(--color-border-strong);cursor:pointer;background:0 0;border-radius:4px;justify-content:center;align-items:center;padding:6px 12px;font-size:14px;font-weight:500;display:inline-flex}.explainers .btn:hover,.explainers .seg:hover{background:var(--wash)}.explainers .btn:disabled{border-color:var(--rule);background:var(--wash);color:var(--dim);cursor:not-allowed}.explainers .btn.primary{background:var(--color-action);color:var(--color-on-action);border-color:var(--color-action)}.explainers .btn.primary:hover{background:var(--color-graphite)}.explainers .controls{font-family:var(--font-sans);flex-wrap:wrap;align-items:center;gap:10px 26px;font-size:14px;display:flex}.explainers .controls:empty{display:none}.explainers .ctl{align-items:center;gap:10px;min-width:0;display:flex}.explainers .ctl[hidden]{display:none}.explainers .ctl-label{color:var(--dim)}.explainers .ctl-slider{flex:300px}.explainers .ctl-slider input{min-width:0;min-height:24px;accent-color:var(--color-ink);flex:1}.explainers .ctl .end{color:var(--dim);white-space:nowrap}.explainers .ctl-choice .ctl-label{margin-right:0}.explainers .seg-frame{border:1px solid var(--color-border-strong);border-radius:4px;display:inline-flex;overflow:hidden}.explainers .seg{border:0;border-left:1px solid var(--rule);border-radius:0}.explainers .seg:first-child{border-left:0}.explainers .seg[aria-pressed=true]{background:var(--wash);color:var(--ink);box-shadow:inset 0 0 0 1px var(--color-border-strong);font-weight:600}.explainers .readout{font-family:var(--font-mono);color:var(--dim);font-variant-numeric:tabular-nums;font-size:13.5px}.explainers .readout b{color:var(--ink);font-weight:500}.explainers .predict{border-left:2px solid var(--color-active-path);font-family:var(--font-sans);gap:8px;padding:6px 0 6px 14px;font-size:15px;display:grid}.explainers .predict .q{font-family:var(--font-serif);margin:0;font-size:18px}.explainers .predict .opts{flex-wrap:wrap;gap:8px;display:flex}.explainers .predict .btn.right:disabled{border-color:var(--role-value-text);color:var(--role-value-text);background:0 0}.explainers .predict .btn.wrong:disabled{border-color:var(--role-constraint-text);color:var(--role-constraint-text);background:0 0}.explainers .predict .explain{margin:0}.explainers .summary{border-top:1px solid var(--rule);gap:12px;padding-top:14px;display:grid}.explainers .summary .sentence{max-width:60ch;margin:0;font-size:20px}.explainers .summary .concept{font-family:var(--font-sans);color:var(--dim);margin:0;font-size:14px}.explainers .check{font-family:var(--font-sans);gap:6px;font-size:15px;display:grid}.explainers .check p{margin:0}.explainers summary{cursor:pointer;min-height:24px;font-weight:500}.explainers .fold{font-family:var(--font-sans);color:var(--dim);border-top:1px solid var(--rule);padding-top:10px;font-size:14px}.explainers .fold summary{color:var(--ink)}.explainers .fold ul{gap:4px;margin:8px 0 0;padding-left:18px;list-style:outside;display:grid}.explainers .parts ol{flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none;display:flex}.explainers .parts .part{min-height:28px;font-family:var(--font-sans);color:var(--ink);border:1px solid var(--rule);cursor:pointer;background:0 0;border-radius:4px;padding:4px 10px;font-size:13px}.explainers .parts .part:hover{background:var(--wash)}.explainers .parts .part[aria-pressed=true]{background:var(--wash);border-color:var(--ink);font-weight:600}.explainers .in-words summary h2{font:inherit;margin:0;display:inline}.explainers .in-words h3{letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:18px 0 0;font-size:12px;font-weight:500}.explainers .in-words article{max-width:68ch;margin-top:10px}.explainers .in-words h4{margin:0;font-size:15px;font-weight:600}.explainers .in-words ol{color:var(--ink);gap:4px;margin:6px 0 0;padding-left:20px;display:grid}.explainers .in-words p{color:var(--ink);margin:6px 0 0}.explainers .in-words h5{color:var(--ink);margin:8px 0 0;font-size:14px;font-weight:600}.explainers .in-words ul{columns:2 14ch;color:var(--ink);margin:4px 0 0;padding-left:20px}.explainers .pager{font-family:var(--font-sans);border-top:1px solid var(--rule);justify-content:space-between;gap:12px;padding-top:12px;font-size:14px;display:flex}.explainers .pager a{text-decoration:none}.explainers .pager .lab{letter-spacing:.07em;text-transform:uppercase;color:var(--dim);font-size:11px;display:block}@container (max-width:760px){.explainers .layout{grid-template-columns:minmax(0,1fr);gap:20px}.explainers nav.rail{gap:8px;padding-bottom:4px;display:flex;position:static;overflow-x:auto}.explainers nav.rail>div{flex:none}.explainers .rail ol{gap:4px;display:flex}.explainers .rail a{white-space:nowrap;border-bottom:2px solid #0000;border-left:0;grid-template-columns:auto auto}.explainers .rail a[data-current]{border-bottom-color:var(--color-active-path)}}@container (max-width:560px){.explainers .layout{font-size:17px}.explainers .stage{aspect-ratio:4/5}.explainers .card{width:auto;margin-top:8px;position:static}.explainers .steps{grid-template-columns:minmax(0,1fr)}.explainers .step-text{font-size:18px}.explainers .btn,.explainers .seg,.explainers .rail a,.explainers summary{min-height:44px}.explainers .dots button{width:44px;height:44px}}@media print{.explainers .stage canvas,.explainers .stage .tag,.explainers .stage .tag-leader,.explainers .stage .hint,.explainers .stage .status,.explainers .stage .start{display:none!important}.explainers .stage .poster{display:block!important}}