@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-normal-latin.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-normal-latin-ext.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-italic-latin.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-italic-latin-ext.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-latin.woff2) format("woff2");font-weight:100 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193,U+21BA,U+2212}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-latin-ext.woff2) format("woff2");font-weight:100 700;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}

:root{
  --bg:#f3eee6;--paper:#f8f4ee;--card:#fffdf9;--text:#1e1613;--muted:#4e423c;--soft:#504540;--rule:#d8cec3;--rule-soft:#e7dfd5;
  --rash:#a8291f;--rash2:#d0643a;--rash-soft:#f0d3c8;--vac:#175154;--vac-soft:#cfe4e2;--unk:#a59a92;--band:#f6dfd6;
  --accent:#a8291f;--accent-ink:#8f1f17;--focus:#0b57b0;--btn-ink:#fff;--grid:#e3dacf;--axis:#bdb1a6;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--top:46px;color-scheme:light
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14100e;--paper:#1a1512;--card:#211a17;--text:#f2ebe5;--muted:#cdbfb6;--soft:#b9aba2;--rule:#3a302b;--rule-soft:#2c2420;--rash:#ff7c69;--rash2:#f2a36e;--rash-soft:#4a2620;--vac:#63c6c0;--vac-soft:#1d3c3b;--unk:#7d726b;--band:#3a211c;--accent:#ff8a78;--accent-ink:#ffa192;--focus:#8ab8ff;--btn-ink:#22100c;--grid:#2c2420;--axis:#5a4e47;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#14100e;--paper:#1a1512;--card:#211a17;--text:#f2ebe5;--muted:#cdbfb6;--soft:#b9aba2;--rule:#3a302b;--rule-soft:#2c2420;--rash:#ff7c69;--rash2:#f2a36e;--rash-soft:#4a2620;--vac:#63c6c0;--vac-soft:#1d3c3b;--unk:#7d726b;--band:#3a211c;--accent:#ff8a78;--accent-ink:#ffa192;--focus:#8ab8ff;--btn-ink:#22100c;--grid:#2c2420;--axis:#5a4e47;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
svg[hidden]{display:none}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top) + 14px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.62 var(--serif);overflow-x:hidden}
a{color:var(--accent-ink);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
strong{font-weight:650}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--card);color:var(--text);padding:8px 12px;z-index:60}.skip-link:focus{left:8px}

.topbar{position:sticky;top:0;z-index:40;height:var(--top);display:flex;align-items:center;gap:10px;padding:0 14px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--rule-soft);font:500 14px/1 var(--sans)}
.brand{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.brand-mark{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--text);position:relative}
.brand-mark i{position:absolute;left:4px;top:4px;width:5px;height:5px;border-radius:50%;background:var(--rash)}
.topnav{display:flex;gap:16px;margin-left:14px}.topnav a{color:var(--muted);text-decoration:none;white-space:nowrap}.topnav a:hover{color:var(--text)}
.spacer{flex:1}
.chip{color:var(--muted);text-decoration:none;padding:6px 7px;border-radius:6px}.chip[aria-current="page"]{color:var(--text);background:var(--rule-soft)}
.icon-btn{flex:none;border:1px solid var(--rule);background:transparent;color:var(--text);border-radius:8px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer}
:root[data-theme="dark"] .i-moon{display:none}:root[data-theme="light"] .i-sun{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme]) .i-sun{display:none}}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .i-moon{display:none}}
@media (max-width:1040px){.topnav{display:none}}
.progress{position:sticky;top:var(--top);z-index:39;height:2px;margin-bottom:-2px}
.progress i{display:block;height:2px;transform-origin:0 50%;transform:scaleX(0);background:var(--rash)}

.rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:9px}
.rail-dot{position:relative;display:block;width:14px;height:14px}
.rail-dot .dot{position:absolute;left:4px;top:4px;width:6px;height:6px;border-radius:50%;background:var(--axis)}
.rail-dot[aria-current] .dot{background:var(--rash);transform:scale(1.4)}
.rail-label{position:absolute;right:20px;top:-3px;white-space:nowrap;font:500 12.5px var(--sans);background:var(--card);color:var(--text);border:1px solid var(--rule);border-radius:6px;padding:2px 7px;opacity:0;pointer-events:none;transition:opacity .15s}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1}
@media (max-width:1300px){.rail{display:none}}

/* hero */
.hero{max-width:1240px;margin:0 auto;padding:34px 20px 8px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:40px;align-items:start}
.kicker{font:600 12.5px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 10px}
h1{font:700 40px/1.1 var(--serif);margin:0 0 16px;letter-spacing:-.012em;text-wrap:balance}
.deck{font-size:19.5px;line-height:1.55;color:var(--muted);margin:0 0 12px}.deck strong,.deck2 strong{color:var(--text)}
.deck2{font-size:19.5px;line-height:1.5;margin:0 0 18px;padding-left:12px;border-left:3px solid var(--rash)}
.shared-line{font:500 15px/1.4 var(--sans);background:var(--card);border-left:3px solid var(--vac);padding:8px 10px;border-radius:6px;margin:0 0 12px}
.hero-fig{margin:6px 0 0}
.hero-svg{width:100%;height:auto;display:block}.hero-svg.narrow,.only-narrow{display:none}
@media (max-width:600px){.hero-svg.wide{display:none}.hero-svg.narrow{display:block}.only-narrow{display:inline-flex}}
.k.unk{border:1.6px dashed var(--unk);background:transparent}
.hero-svg .band{fill:var(--band)}
.hero-svg .band-t{font:600 13px var(--sans);fill:var(--accent-ink)}
.hero-svg .d1{fill:var(--rash)}.hero-svg .d2{fill:var(--rash2)}
.hero-svg .imm{fill:var(--bg);stroke:var(--rash2);stroke-width:2.2}
.hero-svg .unk{fill:none;stroke:var(--unk);stroke-width:1.6;stroke-dasharray:3 2}
.hero-svg .unk-t{font:500 12px var(--sans);fill:var(--soft)}
.split{stroke:var(--axis);stroke-dasharray:2 4}
.ax{stroke:var(--axis);stroke-width:1.2}.tick{stroke:var(--axis)}
.ax-t{font:500 12.5px var(--sans);fill:var(--soft)}.ax-l{font:600 12.5px var(--sans);fill:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:14px;font:500 14px/1.3 var(--sans);color:var(--muted);margin:0 0 6px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.k{display:inline-block;width:12px;height:12px;border-radius:50%}
.k.d1{background:var(--rash)}.k.d2{background:var(--rash2)}.k.imm{border:2px solid var(--rash2);background:transparent}
.k.seg-zero{background:var(--rash);border-radius:3px}.k.seg-vac{background:var(--vac);border-radius:3px}.k.seg-unk{background:var(--unk);border-radius:3px}
figcaption{font:400 14.5px/1.5 var(--sans);color:var(--muted);margin-top:8px}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding-top:22px}h1{font-size:31px}.deck,.deck2{font-size:18px}}

.btn{display:inline-flex;align-items:center;gap:6px;font:600 15px/1 var(--sans);padding:11px 14px;border-radius:9px;border:1px solid var(--rule);background:var(--card);color:var(--text);text-decoration:none;cursor:pointer;min-height:44px}
.btn.primary{background:var(--rash);border-color:var(--rash);color:var(--btn-ink)}
.btn.small{min-height:38px;padding:8px 11px;font-size:14px}
.jump{margin:4px 0 0}

/* sections */
.sec{max-width:760px;margin:0 auto;padding:30px 20px 10px}
.sec.wide{max-width:1000px}
.sec h2{font:700 28px/1.2 var(--serif);margin:16px 0 14px;text-wrap:balance}
.sec h3{font:650 20px/1.3 var(--serif);margin:22px 0 6px}
.sec p{margin:0 0 14px}
.anchor{margin-left:8px;font:500 16px var(--sans);color:var(--soft);text-decoration:none;opacity:0;transition:opacity .15s}
h2:hover .anchor,.anchor:focus-visible{opacity:1}
@media (hover:none){.anchor{opacity:.6}}
.fig{margin:18px 0 22px}
.fig svg{width:100%;height:auto;display:block}
.grid{stroke:var(--grid)}
.seg-zero{fill:var(--rash)}.seg-vac{fill:var(--vac)}.seg-unk{fill:var(--unk)}
.bar-n{font:600 12.5px var(--sans);fill:var(--muted)}
.track{fill:var(--rule-soft)}.range{opacity:.45}
.bar-l{font:600 15px var(--sans);fill:var(--text)}.bar-v{font:700 18px var(--sans);fill:var(--text)}
.target{stroke:var(--vac);stroke-dasharray:5 4;stroke-width:1.4}.target-t{font:600 12.5px var(--sans);fill:var(--vac)}
.line{fill:none;stroke:var(--rash);stroke-width:2.6}.pt{fill:var(--rash)}.pt.reg{fill:var(--bg);stroke:var(--rash);stroke-width:2.4}
.pt-t{font:650 13px var(--sans);fill:var(--text)}.reg-t{font:500 12px var(--sans);fill:var(--soft)}.brk{stroke:var(--axis);stroke-dasharray:3 4}
.lowband{fill:var(--rash-soft);opacity:.6}
.cty{cursor:pointer}.cty circle{fill:var(--rash);stroke:var(--card);stroke-width:1.5}.cty text{font:600 11.5px var(--sans);fill:var(--muted);pointer-events:none}
.cty:hover circle,.cty:focus-visible circle,.cty.on circle{fill:var(--vac);r:9}
.cty:focus-visible{outline:none}.cty:focus-visible circle{stroke:var(--focus);stroke-width:3}
.tl1{fill:none;stroke:var(--rash);stroke-width:2.4}.tl2{fill:none;stroke:var(--rash2);stroke-width:2.4}
.tl1-a{fill:var(--rash);opacity:.14}.tl2-a{fill:var(--rash2);opacity:.16}.tl-n{font:700 14px var(--sans);fill:var(--text)}

/* the class */
.clasa{max-width:1000px}
.picker{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:6px 0 4px;font-family:var(--sans)}
.pf{display:flex;flex-direction:column;gap:5px}
.pf label{font:600 14px var(--sans)}
.pf select{font:500 16px var(--sans);padding:10px 12px;min-height:44px;border-radius:9px;border:1px solid var(--rule);background:var(--card);color:var(--text);min-width:180px}
.note{font:400 13.5px/1.45 var(--sans);color:var(--soft);margin:6px 0 14px}
.class-out{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--card);border:1px solid var(--rule-soft);border-radius:14px;padding:18px}
.class-svg{width:100%;max-width:400px;height:auto;display:block;margin:0 auto}
.class-svg .board{fill:var(--rule)}
.class-svg .desk{fill:var(--rule-soft);stroke:var(--rule)}
.class-svg .kid{fill:var(--vac)}.class-svg .kid-h{fill:var(--card);opacity:.5}
.class-svg .kid.empty{fill:none;stroke:var(--rash);stroke-width:2.4;stroke-dasharray:4 3}
.class-sent{font-size:20px;line-height:1.5;margin:0 0 10px}
.class-cases{font:400 16px/1.5 var(--sans);color:var(--muted);margin:0 0 10px}
.class-note{font:400 14.5px/1.45 var(--sans);color:var(--soft);border-left:3px solid var(--unk);padding-left:9px}
@media (max-width:760px){.pf{flex:1 1 140px}.pf select{min-width:0;width:100%}.class-out{grid-template-columns:1fr;padding:14px}.class-sent{font-size:18px}}

/* share */
.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 6px;font-family:var(--sans)}
.share-lab{font:600 14px var(--sans);margin-right:4px}
.sbtn{font:600 14px/1 var(--sans);padding:10px 12px;border-radius:8px;border:1px solid var(--rule);background:var(--card);color:var(--text);text-decoration:none;cursor:pointer;min-height:40px;display:inline-flex;align-items:center}
.share-msg{font:500 13.5px var(--sans);color:var(--vac)}

/* table */
.table-wrap{overflow-x:auto;margin:10px 0 18px;border:1px solid var(--rule-soft);border-radius:10px}
.ct{border-collapse:collapse;width:100%;font:400 14.5px/1.35 var(--sans);font-variant-numeric:tabular-nums}
.ct th,.ct td{padding:7px 10px;border-bottom:1px solid var(--rule-soft);text-align:right;white-space:nowrap}
.ct thead th{font-weight:650;color:var(--muted);background:var(--paper);white-space:normal;vertical-align:bottom;min-width:84px}
.ct th[scope="row"],.ct thead th:first-child{text-align:left}
.ct tr.on{background:var(--vac-soft)}
.how{padding-left:20px}.how li{margin:0 0 10px}
.src{padding-left:20px;font:400 15px/1.5 var(--sans)}.src li{margin:0 0 8px}

.site-footer{max-width:1000px;margin:30px auto 0;padding:22px 20px 40px;border-top:1px solid var(--rule-soft);display:flex;flex-wrap:wrap;gap:16px;font:400 14px/1.4 var(--sans);color:var(--muted)}
.site-footer a{color:var(--muted)}
.place-page main{max-width:760px;margin:30px auto;padding:0 20px}.place-page img{max-width:100%;height:auto}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}