.oi .d-pop{position:relative;display:grid;justify-items:center;align-content:start;gap:.625rem;min-height:176px;padding-top:.375rem}.oi .d-pop-trigger{display:inline-flex;align-items:center;gap:.4375rem;height:34px;padding:0 .875rem 0 .75rem;cursor:pointer;border:0;border-radius:var(--radius-pill);background:var(--fg);color:var(--bg);font-size:.8125rem;transition:scale .14s var(--ease-out)}.oi .d-pop-trigger svg{width:14px;height:14px}.oi .d-pop-trigger:active{scale:.96}.oi .d-pop-panel{display:grid;gap:1px;width:11rem;padding:5px;border-radius:14px;background:var(--glass);border:1px solid var(--border-strong);box-shadow:var(--glass-shadow);transform-origin:top center}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.oi .d-pop-panel{-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%)}}.oi .d-pop-row{display:flex;align-items:center;gap:.5rem;width:100%;padding:.375rem .5rem;border:0;border-radius:9px;cursor:pointer;background:none;font:inherit;font-size:.8125rem;color:var(--fg-muted);text-align:left}.oi .d-pop-mark{width:11px;height:11px;border-radius:3px;flex-shrink:0;background:var(--border-strong)}.oi .d-pop-row[data-cursor]{background:var(--row-hi);color:var(--fg)}.oi .d-pop-row[data-cursor] .d-pop-mark{background:var(--accent)}.oi .d-pop-row:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}.oi .d-pop-check{width:13px;height:13px;margin-left:auto;flex-shrink:0}.oi .d-pop-check,.oi .d-pop-trigger[data-chosen] svg{color:var(--accent)}@media (prefers-reduced-motion:no-preference){.oi .d-pop-panel{opacity:0;scale:.95;translate:0 -4px;transition-property:opacity,scale,translate;transition-duration:.12s;transition-timing-function:var(--ease-out)}.oi .d-pop[data-zero] .d-pop-panel{scale:0}.oi .d-pop-panel[data-open]{opacity:1;scale:1;translate:0 0;transition-duration:.18s}.oi .d-pop-row{opacity:0;translate:0 -3px;transition:opacity .14s var(--ease-out),translate .14s var(--ease-out),background .12s var(--ease-out),color .12s var(--ease-out)}.oi .d-pop-panel[data-open] .d-pop-row{opacity:1;translate:0 0;transition-delay:90ms}.oi .d-pop-panel[data-open] .d-pop-row:nth-child(2){transition-delay:125ms}.oi .d-pop-panel[data-open] .d-pop-row:nth-child(3){transition-delay:.16s}.oi .d-pop-row:active{scale:.985}}@media (prefers-reduced-motion:reduce){.oi .d-pop-panel{opacity:0;transition:opacity .18s ease}.oi .d-pop-panel[data-open]{opacity:1}}.oi{--hue:68;--bg:#f4f4f4;--surface:#ffffff;--surface-2:#ededed;--fg:#252525;--fg-muted:#565656;--fg-faint:#696969;--chip-on-band:#ffffff;--border:rgb(37 37 37/.075);--border-strong:rgb(37 37 37/.2);--accent:#00a1ff;--accent-wash:rgb(0 161 255/.05);--ring:#5c5c5c;--ok:#00754e;--row-hi:rgb(37 37 37/.07);--ok-wash:rgb(0 186 124/.14);--glass:rgb(255 255 255/.78);--glass-shadow:0 8px 28px -8px rgb(0 0 0/.16),0 2px 6px -2px rgb(0 0 0/.08);--spec:#ffb200;--measured:#6467ff;--convention:#d2c9c4;--convention-label:#6a6663;--spec-wash:rgb(255 178 0/.24);--measured-wash:rgb(100 103 255/.24);--convention-wash:rgb(210 201 196/.24);--spec-label:#855d00;--measured-label:#494bbb;--spec-ink:#664700;--measured-ink:#ffffff;--convention-ink:#565351;--spec-cube:#ffb200;--measured-cube:#6467ff;--convention-cube:#d2c9c4;--cube-ring:rgb(0 0 0/.16);--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-pill:14px;--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--sans:var(--font-soehne),ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:var(--font-soehne),ui-monospace,"SF Mono",Menlo,monospace}html[data-theme=dark] .oi{--bg:#171615;--surface:#211f1e;--surface-2:#242322;--fg:#e9e8e7;--fg-muted:rgb(233 232 231/.72);--fg-faint:rgb(233 232 231/.60);--chip-on-band:#171615;--border:oklch(100% 0 0/.07);--border-strong:oklch(100% 0 0/.19);--accent:#00a1ff;--accent-wash:rgb(0 161 255/.12);--glass:rgb(45 43 41/.78);--glass-shadow:0 8px 28px -8px rgb(0 0 0/.5),0 2px 6px -2px rgb(0 0 0/.35);--ring:#837f7f;--ok:#00ba7c;--ok-wash:rgb(0 186 124/.16);--row-hi:rgb(255 255 255/.09);--cube-ring:rgb(255 255 255/.18);--measured:#6467ff;--spec-label:#ffb200;--measured-label:#8385ff;--convention-label:#d2c9c4;--spec-wash:rgb(255 178 0/.16);--measured-wash:rgb(100 103 255/.16);--convention-wash:rgb(210 201 196/.16)}.oi *,.oi :after,.oi :before{box-sizing:border-box}.oi ::selection{background:var(--ring);color:var(--bg)}.oi button,.oi input,.oi select,.oi textarea{font:inherit;color:inherit}.oi{margin:0;background:var(--bg);color:var(--fg-muted);font-family:var(--sans);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.oi h1,.oi h2,.oi h3{color:var(--fg);font-weight:500;letter-spacing:-.018em;margin:0}.oi h1{font-size:clamp(1.9rem,1.35rem + 2.2vw,2.55rem);line-height:1.12;letter-spacing:-.032em}.oi h1,.oi h2{text-wrap:balance}.oi h2{font-size:1.0625rem;line-height:1.35}.oi h3{font-size:.9375rem;line-height:1.4}.oi p{margin:0;text-wrap:pretty}.oi em{font-style:normal}.oi a,.oi em{color:var(--fg)}.oi a{text-decoration-line:underline;text-decoration-thickness:from-font;text-underline-offset:.18em;text-decoration-color:var(--border-strong);transition-property:text-decoration-color,color;transition-duration:.15s;transition-timing-function:var(--ease-out)}.oi a:hover{text-decoration-color:initial}.oi [tabindex]:focus-visible,.oi a:focus-visible,.oi button:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--radius-sm)}.oi code{font-family:inherit;font-size:.9em;font-feature-settings:none;font-variant-ligatures:none}.oi strong{color:var(--fg);font-weight:500}.oi .wrap{max-width:47rem;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,2rem)}.oi .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.125rem}.oi .brand{display:inline-flex;align-items:center;gap:.4375rem;font-weight:500;color:var(--fg);text-decoration:none;letter-spacing:-.018em;font-size:.9375rem}.oi .brand svg{display:block;flex-shrink:0}.oi .brand-word{padding-top:1px}.oi .nav-links{display:flex;align-items:center;gap:.375rem;font-size:.875rem}.oi .nav-links a{display:inline-flex;align-items:center;gap:.375rem;color:var(--fg-muted);text-decoration:none;padding:.3125rem .6875rem;border-radius:var(--radius-pill);background:var(--surface);transition:color .15s var(--ease-out),background-color .15s var(--ease-out)}.oi .nav-links a svg{display:block;flex-shrink:0}.oi .nav-links a:hover{color:var(--fg);background:var(--surface-2)}.oi .nav-links a:active{scale:.97}.oi .theme-toggle{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--fg-muted);cursor:pointer;transition-property:background-color,color,scale;transition-duration:.15s;transition-timing-function:var(--ease-out)}.oi .theme-toggle:hover{background:var(--surface-2);color:var(--fg)}.oi .theme-toggle:active{scale:.96}.oi .tt-disc{transition:r .26s var(--ease-out)}.oi .tt-bite{transition-property:cx,cy;transition-duration:.26s;transition-timing-function:var(--ease-in-out)}.oi .tt-rays{transform-origin:12px 12px;transition-property:opacity,scale,rotate;transition-duration:.26s;transition-timing-function:var(--ease-out)}.oi .theme-toggle[data-dark] .tt-disc{r:6.4}.oi .theme-toggle[data-dark] .tt-bite{cx:16.5;cy:6.5}.oi .theme-toggle[data-dark] .tt-rays{opacity:0;scale:.5;rotate:-35deg}@media (prefers-reduced-motion:reduce){.oi .tt-bite,.oi .tt-disc,.oi .tt-rays{transition-duration:1ms}}.oi .hero{padding-block:clamp(1.75rem,4.5vw,2.75rem) 0}.oi .eyebrow{font-size:.75rem;color:var(--fg-faint);letter-spacing:.01em;margin-bottom:.875rem}.oi .lede{font-size:1rem;line-height:1.55;margin-top:.875rem;max-width:33rem}.oi .thesis{margin-top:1.125rem;padding-left:.875rem;border-left:2px solid var(--border-strong);max-width:33rem}.oi .install{margin-top:1.5rem}.oi .cmd{display:flex;align-items:center;gap:.75rem;width:100%;background:var(--surface);border-radius:calc(var(--radius-pill) + .375rem);border:1px solid var(--border);padding:.375rem .375rem .375rem 1.125rem;font-family:var(--mono);font-size:.8125rem;color:var(--fg);text-align:left;cursor:pointer;transition-property:border-color,scale;transition-duration:.15s;transition-timing-function:var(--ease-out)}.oi .cmd:hover{border-color:var(--border-strong)}.oi .cmd:active{scale:.99}.oi .cmd .prompt{color:var(--fg-faint);-webkit-user-select:none;user-select:none}.oi .cmd .txt{flex:1 1;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.oi .cmd .txt::-webkit-scrollbar{display:none}.oi .cmd .copy{font-size:.75rem;color:var(--fg-muted);flex-shrink:0;display:inline-grid;place-items:center;min-width:2.75rem;min-height:30px;padding-inline:.625rem;background:var(--surface-2);border-radius:var(--radius-pill);font-family:var(--sans);transition-property:background-color,color;transition-duration:.15s;transition-timing-function:var(--ease-out)}@media (hover:hover) and (pointer:fine){.oi .cmd:hover .copy{color:var(--accent);background:var(--accent-wash)}}.oi .cmd[data-copied=true] .copy,.oi .cmd[data-copied=true]:hover .copy{color:var(--ok);background:var(--ok-wash)}.oi .copy-icons{display:grid;place-items:center}.oi .copy-icons>.icon{color:inherit;grid-area:1/1;transition-property:opacity,scale;transition-duration:.16s;transition-timing-function:var(--ease-out)}.oi .copy-icons>.icon:nth-child(2){opacity:0;scale:.8}.oi .copy[data-status=copied] .copy-icons>.icon:first-child{opacity:0;scale:.8}.oi .copy[data-status=copied] .copy-icons>.icon:nth-child(2){opacity:1;scale:1}@media (prefers-reduced-motion:reduce){.oi .copy-icons>.icon{transition-property:opacity;scale:1}.oi .copy[data-status=copied] .copy-icons>.icon:first-child{scale:1}}.oi .alt-install{margin:0;font-size:.8125rem;color:var(--fg-faint)}.oi .alt-install code{font-family:var(--mono);color:var(--fg-muted)}.oi .section{padding-block:clamp(2rem,4.5vw,3rem) 0}.oi .section-head{margin-bottom:1.125rem}.oi .section-head p{margin-top:.375rem;max-width:33rem}.oi .kicker{font-size:.75rem;color:var(--fg-faint);margin-bottom:.375rem}.oi .grades{display:grid;gap:.5rem}.oi .grade{display:grid;grid-template-columns:auto 1fr;gap:.875rem;align-items:start;background:var(--surface);border-radius:var(--radius-lg);padding:.75rem .9375rem}.oi .tag{font-size:.8125rem;font-weight:500;color:var(--fg);min-width:6.25rem;text-align:center;background:var(--surface-2);border-radius:var(--radius-sm);padding:.125rem .4375rem;white-space:nowrap}.oi .tag[data-grade=spec]{color:var(--spec-label);background:var(--spec-wash)}.oi .tag[data-grade=measured]{color:var(--measured-label);background:var(--measured-wash)}.oi .tag[data-grade=convention]{color:var(--convention-label);background:var(--convention-wash)}.oi .grade p{font-size:.8125rem}.oi .gates{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:var(--radius-xl);overflow:hidden}.oi .gates li{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;padding:.625rem .9375rem;font-size:.8125rem}.oi .gates li+li{border-top:1px solid var(--border)}.oi .gates code{color:var(--fg)}.oi .gates span{color:var(--fg-faint);font-size:.8125rem;text-align:right}.oi .rules{display:grid;gap:.5rem}.oi .rule{margin:0;background:var(--surface);border-radius:var(--radius-lg);padding:.8125rem .9375rem}.oi .rule figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin-bottom:.375rem}.oi .rule figcaption code{color:var(--accent);font-size:.78125rem}.oi .rule figcaption span{color:var(--fg-faint);font-size:.78125rem}.oi .rule blockquote{margin:0;color:var(--fg);font-size:.875rem;line-height:1.5}.oi .areas{background:var(--surface);border-radius:var(--radius-xl);overflow:hidden}.oi .area{padding:.9375rem .9375rem 1.625rem}.oi .area+.area{border-top:1px solid var(--border)}.oi .area[data-appendix=true]{background:var(--surface-2)}.oi .area-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}.oi .area-head h3{display:flex;align-items:center;gap:.4375rem}.oi .icon{display:block;flex-shrink:0;color:var(--fg-faint)}.oi .demo figcaption .icon{color:var(--accent);align-self:center}.oi .count{font-size:.75rem;color:var(--fg-faint);flex-shrink:0}.oi .area-blurb{font-size:.8125rem;margin-top:.125rem}.oi .chips{list-style:none;display:flex;flex-wrap:wrap;gap:.3125rem;margin:.625rem 0 0;padding:0}.oi .chips li{font-size:.75rem;letter-spacing:-.005em;font-weight:500;color:var(--fg-muted);background:var(--surface-2);border-radius:var(--radius-sm);padding:.0625rem .375rem}.oi .area[data-appendix=true] .chips li{background:var(--chip-on-band)}.oi .commands{list-style:none;margin:0;padding:0;display:grid;gap:.375rem}.oi .command{background:var(--surface);border-radius:var(--radius-lg);padding:.8125rem .9375rem}.oi .command-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem;margin:0;font-family:var(--mono);font-size:.8125rem;color:var(--fg)}.oi .command-verb:before{content:"/";color:var(--fg-faint)}.oi .command-arg{font-size:.75rem;color:var(--fg-faint)}.oi .command-blurb{margin:.25rem 0 0;font-size:.8125rem;color:var(--fg-muted)}.oi .term{background:var(--surface);border-radius:var(--radius-lg);padding:.875rem .9375rem;overflow-x:auto;font-family:var(--mono);font-size:.71875rem;line-height:1.7;color:var(--fg-muted)}.oi .term pre{margin:0;font-family:inherit}.oi .term .c{color:var(--fg-faint)}.oi .term .k{color:var(--fg)}.oi .term .a{color:var(--accent)}.oi .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:clamp(2.25rem,5vw,3.25rem);border-top:1px solid var(--border);padding-block:1.25rem 2.5rem;font-size:.8125rem}.oi .foot,.oi .foot-brand{align-items:center;color:var(--fg-faint)}.oi .foot-brand{display:inline-flex;gap:.625rem;text-decoration:none}.oi .foot-brand .icon{color:var(--fg-faint)}@media (hover:hover) and (pointer:fine){.oi .foot-brand:hover,.oi .foot-brand:hover .icon{color:var(--fg-muted)}}.oi .foot-links{display:flex;align-items:center;gap:1.5rem}.oi .foot-links a{color:var(--fg-faint);text-decoration:none;padding-block:.375rem}.oi .foot-links a:hover{color:var(--fg)}.oi .demos{display:grid;gap:.5rem}.oi .demo{margin:0;background:var(--surface);border-radius:var(--radius-lg);padding:0;overflow:hidden}.oi .demo-head{padding:.75rem .9375rem .625rem}.oi .demo figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin-bottom:.3125rem}.oi .demo figcaption code{color:var(--accent);font-size:.78125rem}.oi .demo figcaption span{color:var(--fg-faint);font-size:.78125rem}.oi .demo-rule{color:var(--fg);font-size:.875rem;line-height:1.5}.oi .demo-stage{display:grid;place-items:center;min-height:152px;padding:1.375rem;background:var(--surface);border-block:1px solid var(--border)}.oi .demo-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:.5625rem .9375rem}.oi .d-swap{display:inline-flex;padding:2px;gap:2px;background:var(--surface-2);border-radius:var(--radius-pill)}.oi .d-swap button{appearance:none;border:0;background:transparent;font:inherit;font-size:.75rem;color:var(--fg-faint);cursor:pointer;padding:.3125rem .6875rem;border-radius:var(--radius-pill);min-height:26px;transition-property:background-color,color;transition-duration:.12s;transition-timing-function:var(--ease-out)}.oi .d-swap button[aria-pressed=true]{background:var(--surface-2);color:var(--fg);font-weight:500}@media (hover:hover) and (pointer:fine){.oi .d-swap button:hover{color:var(--fg)}}.oi .d-swap button{transition-property:background-color,color,scale}.oi .d-swap button:active{scale:.96}.oi .d-swap[data-wide]{flex-wrap:wrap}.oi .select-trigger:active{scale:.97}@media (prefers-reduced-motion:reduce){.oi .d-swap button:active,.oi .select-trigger:active{scale:1}}.oi .d-range{position:relative;flex:1 1;min-width:7.5rem;height:26px}.oi .d-range input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;appearance:none;background:none}.oi .d-track{position:absolute;inset:0;pointer-events:none;display:grid;align-items:center}.oi .d-rail{position:absolute;inset-inline:0;top:50%;height:3px;translate:0 -50%;border-radius:2px;background:var(--border-strong)}.oi .d-liquid{position:relative;height:18px}.oi .d-thumb{display:block;width:18px;height:18px;border-radius:999px;background:transparent}.oi .d-range input:focus-visible~.d-track .d-thumb{outline:2px solid var(--ring);outline-offset:3px}.oi .demo-read{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;padding:.5rem .9375rem .625rem;border-top:1px solid var(--border);background:var(--surface-2);font-size:.71875rem}.oi .demo-value{color:var(--fg-muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.oi .demo-verdict{color:var(--fg-faint)}.oi .demo[data-ok=true] .demo-verdict{color:var(--fg)}.oi .d-guides{display:inline-flex;align-items:center;gap:.4375rem;font-size:.75rem;color:var(--fg-faint);cursor:pointer;min-height:26px;-webkit-user-select:none;user-select:none}.oi .d-guides .icon{color:var(--fg-faint);transition-property:color;transition-duration:.12s;transition-timing-function:var(--ease-out)}.oi .d-guides:hover .icon{color:var(--fg-muted)}.oi .d-guides input:checked~.icon{color:var(--accent)}.oi .d-guides input:focus-visible~.icon{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--radius-sm)}.oi .guide{position:absolute;pointer-events:none;opacity:0;transition:opacity .15s ease}.oi .demo[data-guides=on] .guide{opacity:1}.oi .d-card{position:relative;width:164px;height:104px;padding:8px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:12px;transition:border-radius .22s var(--ease-in-out)}.oi .d-inner{width:100%;height:100%;border-radius:12px;background:var(--accent);opacity:.28}.oi .guide--pad{inset:8px;border:1px dashed var(--accent);opacity:0;border-radius:12px}.oi .d-grid{grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:300px}.oi .d-box,.oi .d-grid{position:relative;display:grid}.oi .d-box{background:var(--surface-2);border-radius:var(--radius-md);padding:16px;gap:6px;align-content:start;transition:padding .22s var(--ease-in-out)}.oi .d-box:nth-child(2){transition-delay:45ms}.oi .d-box i{display:block;height:7px;border-radius:2px;background:var(--fg);opacity:.24}.oi .d-box i:last-child{width:62%}.oi .guide--gap{inset-block:0;inset-inline-start:calc(50% - 8px);width:16px;background:repeating-linear-gradient(45deg,transparent 0 3px,var(--accent) 3px 4px);opacity:0}.oi .d-box .guide--pad{inset:16px;border:1px dashed var(--accent);border-radius:3px;transition:inset .22s var(--ease-in-out),opacity .15s ease}.oi .d-box:nth-child(2) .guide--pad{transition-delay:45ms,0s}.oi .d-optic{display:grid;justify-items:center;gap:1rem}.oi .d-optic-box{position:relative;display:grid;place-items:center;width:88px;height:88px;border-radius:var(--radius-md);border:1px dashed var(--border-strong);background:var(--surface-2)}.oi .guide--axis{inset-block:6px;inset-inline-start:50%;width:1px;background:var(--accent)}.oi .d-optic-mass{position:absolute;z-index:2;left:calc(50% - 2.6px);top:calc(50% - 2.5px);width:5px;height:5px;border-radius:999px;background:var(--accent)}.oi .d-optic-box svg,.oi .d-optic-mass{transition:translate .22s var(--ease-in-out)}.oi .d-optic-box svg{position:relative;width:34px;height:34px;fill:var(--fg);opacity:.82}.oi .d-optic-rule{display:flex;align-items:center;gap:.5rem;font-size:.6875rem;color:var(--fg-faint);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.oi .d-optic-span{display:block;height:8px;border-inline:1px solid var(--accent);background:repeating-linear-gradient(45deg,transparent 0 2px,var(--accent) 2px 3px);transition:width .22s var(--ease-in-out)}.oi .d-optic-rule[data-sign=zero]{color:var(--fg-faint)}.oi .d-optic-rule[data-sign=zero] .d-optic-span{border-inline:0}.oi .d-optic-num{color:var(--fg-muted)}@media (prefers-reduced-motion:reduce){.oi .d-optic-box svg,.oi .d-optic-mass,.oi .d-optic-span{transition-duration:1ms}}.oi .d-btn{display:inline-flex;align-items:center;gap:.625rem;font-weight:700;color:var(--fg);font-size:1.0625rem;letter-spacing:-.01em}.oi .d-btn svg{width:18px;height:18px;stroke-width:1.5;transition:stroke-width .22s var(--ease-in-out)}.oi .d-swatch{display:grid;gap:.5rem;place-items:center;background:#fff;border-radius:var(--radius-md);padding:1.125rem 2rem;border:1px solid oklch(0 0 0/.12)}.oi .d-swatch b{font-size:1.75rem;font-weight:500;line-height:1;color:#777777;transition:color .22s ease}.oi .d-verdict{font-size:.625rem;font-style:normal;letter-spacing:.03em;color:#a1160f}.oi .d-verdict:after{content:"fails AA"}.oi .demo[data-ok=true] .d-verdict{color:#14612c}.oi .demo[data-ok=true] .d-verdict:after{content:"passes AA"}@media (prefers-reduced-motion:reduce){.oi .d-box,.oi .d-btn svg,.oi .d-card,.oi .d-play svg,.oi .guide--pad{transition-duration:1ms;transition-delay:0s}}@media (prefers-reduced-motion:no-preference){.oi .reveal{opacity:0;transform:translateY(10px);filter:blur(3px);animation:oi-rise .6s var(--ease-out) forwards}.oi .reveal.d1{animation-delay:.1s}.oi .reveal.d2{animation-delay:.2s}@keyframes oi-rise{to{opacity:1;transform:none;filter:none}}}.oi .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.oi .page-head{padding-block:clamp(1.5rem,4vw,2.25rem) 0}.oi .page-head .lede{max-width:34rem}.oi .browser{margin-top:clamp(1.5rem,4vw,2.25rem)}.oi .filters{display:grid;gap:.5rem;position:sticky;top:0;z-index:2;padding-block:.625rem;background:var(--bg)}.oi .search input{width:100%;height:40px;padding:0 1.125rem;background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:var(--radius-pill);font-size:.875rem;transition-property:border-color;transition-duration:.15s;transition-timing-function:var(--ease-out)}.oi .search input::placeholder{color:var(--fg-faint)}.oi .search input:hover{border-color:var(--border-strong)}.oi .search input:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-color:transparent;border-radius:var(--radius-pill)}.oi .search input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.55)}.oi .selects{display:flex;flex-wrap:wrap;gap:.375rem}.oi .select{position:relative}.oi .select-trigger{display:inline-flex;align-items:center;gap:.5rem;height:32px;padding:0 .75rem 0 .875rem;cursor:pointer;background:var(--surface);color:var(--fg-muted);border:1px solid var(--border);border-radius:var(--radius-pill);font-size:.78125rem;transition-property:border-color,color,background-color;transition-duration:.15s;transition-timing-function:var(--ease-out)}@media (hover:hover) and (pointer:fine){.oi .select-trigger:hover{border-color:var(--border-strong);color:var(--fg)}}.oi .select-trigger[aria-expanded=true]{color:var(--fg);border-color:var(--border-strong)}.oi .select-trigger[data-set]{color:var(--fg)}.oi .select-chevron{width:12px;height:12px;color:var(--fg-faint);transition:rotate .18s var(--ease-out)}.oi .select-trigger[aria-expanded=true] .select-chevron{rotate:180deg}.oi .select-pop{position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:100%;width:max-content;max-width:15rem;background:var(--glass);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--glass-shadow)}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.oi .select-pop{-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%)}}.oi .select-goo{position:absolute;inset:4px;pointer-events:none}.oi .select-goo>div{position:absolute;inset:0}.oi .select-menu{position:relative;margin:0;padding:4px;list-style:none;outline:none}.oi .select-option{position:relative;z-index:1;display:flex;align-items:center;gap:.5rem;padding:0 .75rem;border-radius:8px;font-size:.8125rem;color:var(--fg-muted);cursor:pointer;white-space:nowrap}.oi .select-option[aria-selected=true]{color:var(--fg);font-weight:500}.oi .select-icon{display:inline-grid;place-items:center;flex-shrink:0;color:var(--fg-faint)}.oi .select-option[aria-selected=true] .select-icon{color:var(--fg-muted)}.oi .select-swatch{width:11px;height:11px;flex-shrink:0;border-radius:3px;box-shadow:inset 0 0 0 1px var(--cube-ring)}.oi .select-marker{display:block;width:100%;border-radius:8px;background:var(--surface-2)}@media (prefers-reduced-motion:no-preference){.oi .select-pop{transform-origin:top left;animation:oi-menu-in .16s var(--ease-out)}@keyframes oi-menu-in{0%{opacity:0;transform:scale(.96) translateY(-4px)}}}.oi .result-bar{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.375rem .125rem .5rem;font-size:.75rem;color:var(--fg-faint)}.oi .clear{appearance:none;border:0;background:transparent;cursor:pointer;font-size:.75rem;color:var(--fg-muted);padding:.3125rem .125rem;min-height:24px;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:.18em}.oi .clear:hover{color:var(--fg);text-decoration-color:initial}.oi .rule-list{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:var(--radius-lg);overflow:hidden}.oi .rule-row{padding:.625rem .9375rem;scroll-margin-top:6rem}.oi .rule-row+.rule-row{border-top:1px solid var(--border)}.oi .rule-row:target{background:var(--accent-wash)}.oi .rule-row-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem .75rem;align-items:baseline}.oi .rule-names{display:flex;flex-wrap:wrap;align-items:baseline;gap:.375rem .5rem;min-width:0}.oi .rule-anchor{text-decoration:none}.oi .rule-anchor code{color:var(--accent);font-size:.78125rem}.oi .rule-anchor:hover code{text-decoration:underline;text-underline-offset:.18em}.oi .rule-title{color:var(--fg);font-size:.8125rem}.oi .rule-meta{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:.3125rem}.oi .rule-ruling{font-size:.8125rem;line-height:1.5;margin-top:.1875rem;max-width:42rem}.oi .rule-ruling--none{color:var(--fg-faint)}.oi .area-of{color:var(--fg-muted)}.oi .prio{font-size:.6875rem;letter-spacing:.01em;color:var(--fg-faint);border:1px solid var(--border);border-radius:var(--radius-pill);padding:.0625rem .4375rem}.oi .prio--critical{color:var(--fg);border-color:var(--border-strong);font-weight:500}.oi .grade-tag{font-size:.6875rem;color:var(--fg-muted);background:var(--surface-2);border-radius:var(--radius-sm);padding:.0625rem .3125rem}.oi .grade-tag[data-grade=spec]{color:var(--spec-label);background:var(--spec-wash)}.oi .grade-tag[data-grade=measured]{color:var(--measured-label);background:var(--measured-wash)}.oi .grade-tag[data-grade=convention]{color:var(--convention-label);background:var(--convention-wash)}.oi .no-results{background:var(--surface);border-radius:var(--radius-lg);padding:1.75rem .9375rem;display:grid;gap:.375rem;justify-items:center;text-align:center;font-size:.8125rem}.oi .no-results em{font-style:normal;color:var(--fg)}.oi .onward{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:clamp(1.5rem,4vw,2.25rem)}@media (max-width:32rem){.oi .onward{grid-template-columns:1fr}}.oi .onward a{display:grid;gap:.125rem;text-decoration:none;background:var(--surface);border-radius:var(--radius-lg);padding:.75rem .9375rem;transition-property:border-color;transition-duration:.15s;transition-timing-function:var(--ease-out)}.oi .onward a:hover{border-color:var(--border-strong)}.oi .onward .onward-label{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.75rem;color:var(--fg-faint)}.oi .onward .onward-label svg{display:block;flex-shrink:0;transition:color .16s var(--ease-out)}.oi .onward a:hover .onward-label svg{color:var(--fg-muted)}.oi .onward .onward-title{color:var(--fg);font-size:.875rem}.oi .onward .onward-note{font-size:.78125rem;color:var(--fg-muted)}.oi .grade-count{display:block;margin-top:.1875rem;font-size:.71875rem;color:var(--fg-faint);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.oi .mark{display:block;width:100%;max-width:168px;height:auto;margin:-.75rem 0 .75rem -.5rem}.oi .mark-paper{fill:var(--bg)}.oi .mark-wash{fill:var(--fg);opacity:.07}.oi .mark-window{fill:var(--surface);fill-opacity:.6;stroke:var(--border-strong);stroke-width:1.5}.oi .mark-grid path{fill:none;stroke:var(--border-strong);stroke-width:2}.oi .mark-circles path{fill:none;stroke:var(--border-strong);stroke-width:1.5}.oi .mark-fade-stops stop{stop-color:var(--bg)}@media (prefers-reduced-motion:no-preference){.oi .mark-grid path{stroke-dasharray:760;stroke-dashoffset:760;animation:oi-draw .55s var(--ease-out) forwards}.oi .mark-grid path:nth-child(2){animation-delay:.06s}.oi .mark-grid path:nth-child(3){animation-delay:.12s}.oi .mark-grid path:nth-child(4){animation-delay:.18s}.oi .mark-circles path{stroke-dasharray:560;stroke-dashoffset:560;animation:oi-draw .6s var(--ease-out) .3s forwards}.oi .mark-circles path:nth-child(2){animation-delay:.38s}.oi .mark-circles path:nth-child(3){animation-delay:.46s}.oi .mark-circles path:nth-child(4){animation-delay:.54s}.oi .mark-wash{opacity:0;animation:oi-wash .5s var(--ease-out) .95s forwards}.oi .mark-window{opacity:0;transform:scale(.94);transform-origin:240px 240px;animation:oi-settle .45s var(--ease-out) 1.1s forwards}@keyframes oi-draw{to{stroke-dashoffset:0}}@keyframes oi-wash{to{opacity:.07}}@keyframes oi-settle{to{opacity:1;transform:none}}}@property --oi-edge-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.oi .demo{position:relative}.oi .demo:before{content:"";position:absolute;inset:-1px;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--oi-edge-angle),transparent 0 42%,var(--accent) 58%,var(--convention) 68%,var(--spec) 78%,transparent 92% 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .2s var(--ease-out)}.oi .demo[data-ok=true]:before{opacity:1}@media (prefers-reduced-motion:no-preference){.oi .demo[data-ok=true]:before{animation:oi-edge-spin 6s linear infinite}@keyframes oi-edge-spin{to{--oi-edge-angle:360deg}}}.oi .d-hit{position:relative;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--surface-2);color:var(--fg-muted);transition:width .22s var(--ease-in-out),height .22s var(--ease-in-out)}.oi .d-hit svg{width:16px;height:16px}.oi .guide--hit{inset:50%;width:44px;height:44px;translate:-50% -50%;border:1px dashed var(--accent);border-radius:var(--radius-md);opacity:0}.oi .d-leading,.oi .d-measure{display:block;color:var(--fg-muted);font-size:.875rem;text-align:left;transition:max-width .22s var(--ease-in-out)}.oi .d-leading{max-width:34ch}@media (prefers-reduced-motion:reduce){.oi .d-hit,.oi .d-measure{transition-duration:1ms}}.oi .d-slop{width:100%;max-width:19rem;text-align:left;display:grid;gap:.3125rem;padding:1rem 1.125rem;transition-property:background-color,border-color,border-radius,color;transition-duration:.22s;transition-timing-function:var(--ease-in-out)}.oi .d-slop-eyebrow{font-size:.6875rem}.oi .d-slop-title{font-size:1rem;line-height:1.25;margin:0;font-weight:500}.oi .d-slop-body{font-size:.8125rem;line-height:1.5}.oi .d-slop-cta{justify-self:start;margin-top:.5rem;font-size:.75rem;padding:.375rem .75rem;transition-property:background-color,color,border-radius;transition-duration:.22s;transition-timing-function:var(--ease-in-out)}.oi .d-slop[data-variant="0"]{background:var(--surface);color:var(--fg-muted);border:1px solid var(--border);border-radius:var(--radius-lg)}.oi .d-slop[data-variant="0"] .d-slop-eyebrow{color:var(--fg-faint)}.oi .d-slop[data-variant="0"] .d-slop-title{color:var(--fg)}.oi .d-slop[data-variant="0"] .d-slop-cta{background:var(--surface-2);color:var(--fg);border-radius:var(--radius-pill)}.oi .d-slop[data-variant="1"]{background:#f4f1ea;color:#6b6357;border:1px solid #e3ded1;border-radius:14px;text-align:center;justify-items:center}.oi .d-slop[data-variant="1"] .d-slop-eyebrow{color:#a8763f;letter-spacing:.12em;text-transform:uppercase}.oi .d-slop[data-variant="1"] .d-slop-title{color:#2f2a24;font-family:Georgia,Times New Roman,serif;font-size:1.25rem;font-weight:400}.oi .d-slop[data-variant="1"] .d-slop-cta{background:#d97757;color:#fff;border-radius:999px;justify-self:center}@media (prefers-reduced-motion:reduce){.oi .d-slop,.oi .d-slop-cta{transition-duration:1ms}}@media (prefers-reduced-motion:no-preference){.oi .d-slop{animation:oi-card-in .18s var(--ease-out)}@keyframes oi-card-in{0%{opacity:0;scale:.98}}}.oi .d-themes{display:grid;grid-template-columns:1fr 1fr;gap:.625rem;width:100%;max-width:21rem}@media (max-width:30rem){.oi .d-themes{grid-template-columns:1fr}}.oi .d-theme{display:grid;gap:.375rem;padding:.625rem .6875rem;border-radius:var(--radius-md)}.oi .d-theme[data-ground=dark]{background:#161513}.oi .d-theme[data-ground=light]{background:#ffffff;box-shadow:inset 0 0 0 1px rgb(0 0 0/.1)}.oi .d-theme-label{font-size:.625rem;margin-bottom:.125rem}.oi .d-theme[data-ground=dark] .d-theme-label{color:#8a8785}.oi .d-theme[data-ground=light] .d-theme-label{color:#767472}.oi .d-theme-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}@media (prefers-reduced-motion:no-preference){.oi .d-theme-row{opacity:0;animation:oi-row-in .2s var(--ease-out) forwards}.oi .d-theme-row:nth-child(3){animation-delay:45ms}.oi .d-theme-row:nth-child(4){animation-delay:90ms}@keyframes oi-row-in{0%{opacity:0;translate:0 3px}to{opacity:1;translate:none}}}.oi .d-theme-badge{padding:.1875rem .4375rem;border-radius:var(--radius-sm);font-size:.6875rem;white-space:nowrap}.oi .d-theme-ratio{font-size:.625rem;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:#a1160f}.oi .d-theme[data-ground=dark] .d-theme-ratio{color:#ff8b84}.oi .d-theme-ratio[data-pass]{color:#767472}.oi .d-theme[data-ground=dark] .d-theme-ratio[data-pass]{color:#8a8785}.oi .d-theme-ratio:after{content:" fails"}.oi .d-theme-ratio[data-pass]:after{content:" passes"}.oi .d-field{display:grid;gap:.4375rem;width:100%;max-width:20.5rem;text-align:left}.oi .d-field-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}.oi .d-field-label{font-size:.78125rem;color:var(--fg-muted)}.oi .d-field-count{font-size:.6875rem;color:var(--fg-faint);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.oi .d-field-liquid{display:flex;align-items:center;gap:7px;height:50px}.oi .d-field-liquid>div:first-of-type{flex:1 1;min-width:0}.oi .d-field-shell{position:relative;display:flex;align-items:center;gap:.625rem;width:100%;height:50px;padding:0 .875rem 0 1rem;border-radius:var(--radius-pill);background:transparent;box-shadow:inset 0 0 0 1px var(--border-strong)}.oi .d-field-shell[data-bad]{box-shadow:inset 0 0 0 1px #e5484d}.oi .d-field-shell:focus-within{box-shadow:inset 0 0 0 1px var(--border-strong),0 0 0 2px var(--ring)}.oi .d-field-shell[data-bad]:focus-within{box-shadow:inset 0 0 0 1px #e5484d,0 0 0 2px rgb(229 72 77/.45)}.oi .d-field-shell[data-bad] .d-field-input{color:#c0392f}.oi .d-field-brand{width:28px;height:18px;flex-shrink:0;stroke:none}.oi .d-field-brand circle:first-child{fill:var(--fg);opacity:.55}.oi .d-field-brand circle:last-child{fill:var(--fg);opacity:.28}.oi .d-field-input{flex:1 1;min-width:0;border:0;background:none;padding:0;font-family:var(--mono);font-size:.9375rem;color:var(--fg);letter-spacing:.05em;outline:none;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.oi .d-field-submit{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--fg);cursor:pointer;opacity:0;transition:opacity .18s var(--ease-out)}.oi .d-field-submit:disabled{cursor:default}.oi .d-field-submit[data-out]{opacity:1}.oi .d-field-submit svg{width:19px;height:19px}.oi .d-field-submit:active{scale:.94}.oi .d-field-error{display:flex;align-items:flex-start;gap:.4375rem;font-size:.75rem;line-height:1.45;color:#a1160f;transition:color .16s ease}@media (prefers-reduced-motion:no-preference){.oi .d-field-error svg{animation:oi-mark-in .2s var(--ease-out)}@keyframes oi-mark-in{0%{opacity:0;scale:.7}}}.oi .d-field-error svg{width:14px;height:14px;flex-shrink:0;margin-top:.0625rem}.oi .d-field-error[data-ok]{color:#14612c}.oi .d-field-toast{justify-self:center;margin-top:.5rem;padding:.4375rem .875rem;font-size:.71875rem;color:#fff;background:#2c2c2c;border-radius:var(--radius-pill)}.oi .d-field[data-toast] .d-field-shell[data-bad]{box-shadow:inset 0 0 0 1px var(--border-strong)}.oi .d-empty{display:grid;justify-items:center;gap:.375rem;width:100%;max-width:19rem;text-align:center}.oi .d-empty-search{justify-self:stretch;display:flex;align-items:center;height:32px;padding:0 .75rem;margin-bottom:.5rem;border-radius:var(--radius-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border)}.oi .d-empty-query{font-family:var(--mono);font-size:.75rem;color:var(--fg)}.oi .d-empty-query:after{content:"";display:inline-block;width:1px;height:.9em;margin-left:1px;translate:0 .12em;background:var(--accent)}.oi .d-empty-title{font-size:.875rem;color:var(--fg)}.oi .d-empty-body{font-size:.75rem;line-height:1.5;color:var(--fg-muted);max-width:17rem}.oi .d-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.375rem;margin-top:.375rem}.oi .d-empty-cta{padding:.3125rem .75rem;border-radius:var(--radius-pill);font-size:.71875rem;color:var(--fg-muted);box-shadow:inset 0 0 0 1px var(--border-strong)}.oi .d-empty-cta[data-primary]{background:var(--fg);color:var(--bg);box-shadow:none}.oi .d-empty:not([data-generic]) .d-empty-cta[data-primary]{margin-top:0}.oi .d-empty[data-generic] .d-empty-cta[data-primary]{margin-top:.375rem}.oi .hero[id],.oi .section[id]{scroll-margin-top:5.5rem}.oi .actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .875rem;margin-top:1rem}.oi .action{display:inline-flex;align-items:center;gap:.5rem;min-height:36px;padding:0 .875rem;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--fg-muted);font-size:.8125rem;text-decoration:none;transition-property:background-color,color,scale;transition-duration:.15s;transition-timing-function:var(--ease-out)}.oi .action .icon{color:currentColor}@media (hover:hover) and (pointer:fine){.oi .action:hover{color:var(--fg)}}.oi .action:active{scale:.97}@media (prefers-reduced-motion:reduce){.oi .action:active{scale:1}}@media (pointer:coarse){.oi .d-swap button{min-height:40px;padding-inline:.875rem}.oi .d-guides{min-height:44px}.oi .d-range{height:44px}.oi .action{min-height:44px;padding-inline:1rem}.oi .nav-links a{min-height:44px;display:inline-flex;align-items:center}.oi .select-trigger{height:40px;padding-inline:.875rem}.oi .select-option{min-height:40px}.oi .clear{min-height:44px}.oi .foot-links a{min-height:44px;display:inline-flex;align-items:center}.oi .rule-row{padding-block:.8125rem}.oi .rule-anchor{display:inline-block;padding-block:.125rem}}@media (max-width:30rem){.oi .demo-bar{gap:.625rem .75rem}.oi .d-range{flex-basis:100%;order:3}.oi .demo-read{flex-wrap:wrap}}.oi .wrap{padding-top:4.75rem}.oi .subnav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.125rem}.oi .subnav-here{display:inline-flex;align-items:center;gap:.4375rem;font-weight:500;font-size:.9375rem;color:var(--fg);letter-spacing:-.018em}.oi .subnav-here svg{display:block;flex-shrink:0}.oi .term,.oi .term pre{font-family:ui-monospace,SF Mono,Menlo,monospace}@media (max-width:600px){.oi .wrap{padding-top:5.5rem}}