@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-vietnamese-wdth-normal-rJmnGBSt.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-latin-ext-wdth-normal-7khWdh9v.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-latin-wdth-normal-DY7AcnAa.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--accent-h:25;--bg:oklch(97.5% .004 250);--surface:oklch(100% 0 0);--surface-2:oklch(95.5% .006 250);--sunken:oklch(94% .007 250);--line:oklch(88.5% .009 250);--line-strong:oklch(78% .012 250);--fg:oklch(21% .016 250);--muted:oklch(47% .016 250);--header:oklch(20% .016 250);--on-header:oklch(96% .005 250);--accent:oklch(.55 .21 var(--accent-h));--accent-hover:oklch(.49 .2 var(--accent-h));--accent-text:oklch(.5 .2 var(--accent-h));--accent-wash:oklch(.55 .21 var(--accent-h) / .11);--on-accent:oklch(100% 0 0);--ok:oklch(50% .13 155);--ok-wash:oklch(50% .13 155/.12);--warn:oklch(52% .12 75);--warn-wash:oklch(70% .15 80/.18);--bad:oklch(52% .19 28);--bad-wash:oklch(52% .19 28/.11);--focus:oklch(55% .17 250);--chart-1:var(--accent);--chart-2:oklch(55% .13 240);--chart-grid:var(--line);--shadow-1:0 1px 2px oklch(20% .02 250/.06), 0 2px 8px oklch(20% .02 250/.04);--shadow-2:0 2px 6px oklch(20% .02 250/.08), 0 16px 40px oklch(20% .02 250/.12);--scrim:oklch(15% .02 250/.5);--font:"Archivo Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--wide:118%;--wider:125%;--t-xs:.8125rem;--t-sm:.875rem;--t-md:.9375rem;--t-lg:1.0625rem;--t-xl:1.375rem;--t-2xl:1.875rem;--t-3xl:2.75rem;--t-figure:3.5rem;--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--r-sm:6px;--r-md:10px;--r-lg:16px;--r-pill:999px;--target:44px;--content:1120px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (pointer:fine) and (width>=1100px){:root{--target:36px}}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:oklch(16.5% .012 250);--surface:oklch(20.5% .014 250);--surface-2:oklch(24.5% .015 250);--sunken:oklch(14% .011 250);--line:oklch(30% .015 250);--line-strong:oklch(40% .017 250);--fg:oklch(95% .006 250);--muted:oklch(73% .014 250);--header:oklch(13% .011 250);--on-header:oklch(95% .006 250);--accent:oklch(.66 .21 var(--accent-h));--accent-hover:oklch(.72 .19 var(--accent-h));--accent-text:oklch(.76 .16 var(--accent-h));--accent-wash:oklch(.66 .21 var(--accent-h) / .17);--on-accent:oklch(.15 .03 var(--accent-h));--ok:oklch(78% .15 155);--ok-wash:oklch(78% .15 155/.14);--warn:oklch(83% .14 85);--warn-wash:oklch(83% .14 85/.14);--bad:oklch(74% .16 25);--bad-wash:oklch(74% .16 25/.15);--focus:oklch(79% .12 240);--chart-2:oklch(76% .11 235);--shadow-1:none;--shadow-2:0 16px 48px oklch(0% 0 0/.5);--scrim:oklch(5% .01 250/.65);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:oklch(16.5% .012 250);--surface:oklch(20.5% .014 250);--surface-2:oklch(24.5% .015 250);--sunken:oklch(14% .011 250);--line:oklch(30% .015 250);--line-strong:oklch(40% .017 250);--fg:oklch(95% .006 250);--muted:oklch(73% .014 250);--header:oklch(13% .011 250);--on-header:oklch(95% .006 250);--accent:oklch(.66 .21 var(--accent-h));--accent-hover:oklch(.72 .19 var(--accent-h));--accent-text:oklch(.76 .16 var(--accent-h));--accent-wash:oklch(.66 .21 var(--accent-h) / .17);--on-accent:oklch(.15 .03 var(--accent-h));--ok:oklch(78% .15 155);--ok-wash:oklch(78% .15 155/.14);--warn:oklch(83% .14 85);--warn-wash:oklch(83% .14 85/.14);--bad:oklch(74% .16 25);--bad-wash:oklch(74% .16 25/.15);--focus:oklch(79% .12 240);--chart-2:oklch(76% .11 235);--shadow-1:none;--shadow-2:0 16px 48px oklch(0% 0 0/.5);--scrim:oklch(5% .01 250/.65);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{font-family:var(--font);font-size:var(--t-md);background:var(--bg);color:var(--fg);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;margin:0;line-height:1.5}#root{min-height:100dvh}img{max-width:100%;display:block}button,input,select,textarea{font:inherit;color:inherit}a{color:var(--accent-text);text-underline-offset:.18em}a:hover{text-decoration-thickness:2px}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}h1,h2,h3,h4{text-wrap:balance;margin:0;line-height:1.15}h1{font-size:var(--t-xl);font-weight:750;font-stretch:var(--wide);letter-spacing:-.005em}p{max-width:65ch;margin:0}.display{font-stretch:var(--wider);letter-spacing:-.015em;font-weight:760}.label{text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-size:.75rem;font-weight:620}.muted{color:var(--muted)}.small{font-size:var(--t-xs)}.mono{font-family:var(--font-mono);font-size:.92em}.stack{gap:var(--s-4);flex-direction:column;display:flex}.row{align-items:center;gap:var(--s-3);flex-wrap:wrap;display:flex}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}:root{--pos-lch:.62 .17 55;--neg-lch:.55 .15 250;--target-lch:.47 .016 250;--pred-lch:.55 .21 25}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--pos-lch:.78 .15 65;--neg-lch:.72 .13 245;--target-lch:.73 .014 250;--pred-lch:.7 .2 25}}:root[data-theme=dark]{--pos-lch:.78 .15 65;--neg-lch:.72 .13 245;--target-lch:.73 .014 250;--pred-lch:.7 .2 25}.app{grid-template-rows:auto 1fr;grid-template-columns:340px minmax(0,1fr);min-height:100dvh;display:grid}.top{align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-5);background:var(--header);color:var(--on-header);flex-wrap:wrap;grid-column:1/-1;display:flex}.top h1{font-size:var(--t-lg)}.top .tagline{color:color-mix(in oklab, var(--on-header) 70%, transparent);font-size:var(--t-sm)}.top .spacer{flex:1}.top .seg{background:oklch(100% 0 0/.06);border-color:oklch(100% 0 0/.12)}.top .seg button{color:color-mix(in oklab, var(--on-header) 70%, transparent)}.top .seg button[aria-pressed=true]{color:var(--on-header);box-shadow:none;background:oklch(100% 0 0/.14)}.side{border-right:1px solid var(--line);background:var(--surface);padding:var(--s-4);gap:var(--s-5);flex-direction:column;max-height:calc(100dvh - 60px);display:flex;position:sticky;top:0;overflow-y:auto}.side section{gap:var(--s-3);flex-direction:column;display:flex}.side h2{text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-size:.75rem;font-weight:640}.main{padding:var(--s-4);gap:var(--s-4);grid-template-columns:repeat(12,minmax(0,1fr));align-content:start;display:grid}.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-7{grid-column:span 7}.span-6{grid-column:span 6}.span-5{grid-column:span 5}.span-4{grid-column:span 4}@media (width<=1280px){.span-8,.span-7,.span-5,.span-4,.span-6{grid-column:span 12}}@media (width<=900px){.app{grid-template-columns:minmax(0,1fr)}.side{border-right:0;border-top:1px solid var(--line);order:2;max-height:none;position:static}.main{padding:var(--s-4) var(--s-4)}}.transport{gap:var(--s-2);flex-wrap:wrap;align-items:center;display:flex}.transport .btn-primary{min-width:108px}.stat{flex-direction:column;line-height:1.15;display:flex}.stat b{font-stretch:var(--wide);font-size:var(--t-lg);font-weight:700}.stat span{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.6875rem}.stats{gap:var(--s-5);flex-wrap:wrap;display:flex}.btn{justify-content:center;align-items:center;gap:var(--s-2);min-height:var(--target);padding:0 var(--s-4);border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--fg);font-weight:620;font-size:var(--t-md);white-space:nowrap;cursor:pointer;line-height:1;display:inline-flex}.btn:hover{background:var(--surface-2);border-color:var(--muted)}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-compact{min-height:30px;padding:0 var(--s-3);font-size:var(--t-sm)}kbd{font-family:var(--font-mono);opacity:.6;border:1px solid;border-radius:4px;padding:1px 5px;font-size:.7rem}.field{flex-direction:column;gap:6px;min-width:0;display:flex}.field-label{justify-content:space-between;gap:var(--s-2);font-weight:620;font-size:var(--t-sm);display:flex}.field-label output{font-weight:700;font-stretch:var(--wide);color:var(--accent-text)}.field-hint{font-size:var(--t-xs);color:var(--muted)}.field-error{font-size:var(--t-xs);color:var(--bad);font-weight:560}.input,select.input{width:100%;min-height:var(--target);padding:0 var(--s-3);border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--fg)}.input.mono{font-family:var(--font-mono);font-size:var(--t-md)}.input:focus-visible{outline:2px solid var(--focus);outline-offset:0;border-color:#0000}.input[aria-invalid=true]{border-color:var(--bad)}.pair{gap:var(--s-3);grid-template-columns:1fr 1fr;display:grid}input[type=range]{width:100%;accent-color:var(--accent);height:24px;margin:0}.seg{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-md);gap:2px;max-width:100%;padding:3px;display:flex}.seg button{min-height:calc(var(--target) - 8px);padding:0 var(--s-3);border-radius:calc(var(--r-md) - 3px);color:var(--muted);font-weight:600;font-size:var(--t-sm);cursor:pointer;white-space:nowrap;background:0 0;border:0;flex:1}.seg button:hover{color:var(--fg)}.seg button[aria-pressed=true]{background:var(--surface);color:var(--fg);box-shadow:0 0 0 1px var(--line-strong)}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--line);background:var(--surface-2);color:var(--fg);border-radius:var(--r-pill);font-size:var(--t-xs);cursor:pointer;font-family:var(--font-mono);padding:3px 10px}.chip:hover{border-color:var(--line-strong)}.chip[aria-pressed=true]{border-color:var(--accent);color:var(--accent-text);background:var(--accent-wash)}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);flex-direction:column;min-width:0;display:flex}.card-head{justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-4);border-bottom:1px solid var(--line);flex-wrap:wrap;min-height:44px;display:flex}.card-head h2{text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-size:.75rem;font-weight:640}.card-body{padding:var(--s-4);flex:1;min-height:0}.card-note{padding:0 var(--s-4) var(--s-3);font-size:var(--t-xs);color:var(--muted)}.canvas-box{width:100%;position:relative}.canvas-box canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.legend{gap:var(--s-4);font-size:var(--t-xs);color:var(--muted);flex-wrap:wrap;align-items:center;display:flex}.legend i{vertical-align:middle;border-radius:2px;width:18px;height:3px;margin-right:6px;display:inline-block}.error-bar{padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--bad-wash);color:var(--bad);font-weight:560;font-size:var(--t-sm);grid-column:span 12}.tt{border-collapse:collapse;width:100%;font-size:var(--t-sm)}.tt th{text-align:left;color:var(--muted);font-weight:640;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);padding:6px 8px}.tt td{border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;padding:5px 8px}.tt tbody tr{cursor:pointer}.tt tbody tr:hover{background:var(--surface-2)}.tt tbody tr[aria-selected=true]{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--focus)}.tt .bit{font-family:var(--font-mono);font-weight:700}.bar{background:var(--sunken);border-radius:5px;min-width:80px;height:10px;position:relative;overflow:hidden}.bar i{border-radius:5px;position:absolute;inset:0 auto 0 0}.ok{color:var(--ok);font-weight:700}.bad{color:var(--bad);font-weight:700}.seq-grid{align-items:center;gap:6px;display:grid}.seq-grid .row-label{font-size:var(--t-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding-right:var(--s-2);font-weight:620}.tok{border-radius:var(--r-sm);min-width:0;height:40px;font-family:var(--font-mono);font-weight:700;font-size:var(--t-lg);background:var(--surface-2);border:1px solid var(--line);justify-content:center;align-items:center;display:flex}button.tok{cursor:pointer;color:var(--fg)}button.tok:hover{border-color:var(--accent)}.tok.right{background:var(--ok-wash);border-color:color-mix(in oklab, var(--ok) 50%, transparent)}.tok.wrong{background:var(--bad-wash);border-color:color-mix(in oklab, var(--bad) 60%, transparent);color:var(--bad)}.tok small{color:var(--muted);margin-left:2px;font-size:.6rem;font-weight:500}.blurb{font-size:var(--t-sm);color:var(--muted)}.mode:not([hidden]){display:contents}.computer .main{grid-column:1/-1}.sub:not([hidden]){display:contents}.top .modes,.top .modes button{flex:none}@media (width<=900px){.top .modes{width:100%}.top .modes button{white-space:normal;flex:1}}.run-on{font-size:var(--t-xs);color:var(--muted);align-items:center;gap:8px;line-height:1.3;display:inline-flex}.run-on .dot{background:var(--ok);border-radius:50%;flex:none;width:8px;height:8px}.steps{gap:var(--s-3);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.steps button{align-items:center;gap:var(--s-3);text-align:left;padding:var(--s-3) var(--s-4);border-radius:var(--r-lg);cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-weight:650;font-size:var(--t-md);display:flex}.steps button:hover{color:var(--fg);border-color:var(--line-strong)}.steps button[aria-pressed=true]{color:var(--fg);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.step-no{background:var(--sunken);width:30px;height:30px;font-stretch:var(--wide);border-radius:50%;flex:none;place-items:center;font-weight:760;display:inline-grid}.steps button[aria-pressed=true] .step-no{background:var(--accent);color:var(--on-accent)}@media (width<=900px){.steps{grid-template-columns:minmax(0,1fr)}}.lead{font-size:var(--t-lg);max-width:80ch}.theory{max-width:90ch;margin-top:var(--s-4)}.gates-one{gap:var(--s-5);grid-template-columns:minmax(220px,1fr) minmax(260px,1.3fr) minmax(180px,.8fr);align-items:center;display:grid}@media (width<=1100px){.gates-one{grid-template-columns:minmax(0,1fr)}}.gate-svg{width:100%;height:auto;display:block}.gate-svg.wide{max-height:360px}.gate-svg .wire{fill:none;stroke:var(--line-strong);stroke-width:2.5px}.gate-svg .wire.on{stroke:oklch(var(--pos-lch));stroke-width:4px}.gate-svg .n{fill:var(--surface);stroke:var(--muted);stroke-width:2px}.gate-svg .n.on{fill:oklch(var(--pos-lch));stroke:oklch(var(--pos-lch))}.gate-svg .in{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:1.5px}.gate-svg .in.on{fill:oklch(var(--pos-lch) / .35);stroke:oklch(var(--pos-lch))}.gate-svg .toggle{cursor:pointer}.gate-svg text{fill:var(--fg);text-anchor:middle;font-family:var(--font)}.gate-svg .n-text{font-size:22px;font-weight:750}.gate-svg .n-text.small{font-size:16px}.gate-svg .n-small{fill:var(--muted);font-size:12px}.gate-svg .n-caption{fill:var(--muted);font-size:13px;font-weight:600}.gate-name{font-size:var(--t-lg)}.gate-name b,.gate-sum b{font-stretch:var(--wide);color:var(--accent-text)}.gate-sum{font-size:var(--t-lg);margin-top:var(--s-3)}.adder8{grid-template-columns:90px repeat(9,minmax(0,1fr));align-items:center;gap:6px;display:grid}.adder8 .row-label,.bits .row-label,.sum-result .row-label{font-size:var(--t-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:620}.tok.lit{background:oklch(var(--pos-lch) / .3);border-color:oklch(var(--pos-lch))}.fa{border-radius:var(--r-sm);border:1px dashed var(--line-strong);height:48px;font-weight:700;font-stretch:var(--wide);flex-direction:column;justify-content:center;align-items:center;display:flex}.fa small{color:var(--muted);font-size:.65rem;font-weight:500;font-stretch:100%}.fa.carry-out{border-style:solid;border-color:oklch(var(--pos-lch))}.carry{text-align:center;font-family:var(--font-mono);color:var(--muted)}.carry.lit{color:oklch(var(--pos-lch));font-weight:700}.bits{font-family:var(--font-mono);text-align:center;gap:2px;font-size:.8rem;display:grid;overflow-x:auto}.bits span:not(.row-label){border-radius:3px;padding:2px 0}.bits .right{background:var(--ok-wash);color:var(--ok);font-weight:700}.bits .wrong{background:var(--bad-wash);color:var(--bad);font-weight:700}.sum-result{gap:var(--s-5);flex-wrap:wrap;align-items:flex-end;display:flex}.sum-result>div{flex-direction:column;min-width:0;display:flex}.sum-result b{font-size:var(--t-lg);overflow-wrap:anywhere}