.skip{position:absolute;inset-inline-start:-999px}
.skip:focus{inset-inline-start:16px;top:8px;background:var(--bg);padding:8px 12px;z-index:99}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.gtag{font:700 10px var(--disp);letter-spacing:.14em;text-transform:uppercase;background:var(--acc);color:var(--acc-ink);padding:4px 9px;border-radius:999px;margin-inline-start:2px}
.head-r .btn[aria-current]{background:var(--brand);border-color:var(--brand)}
.head-r .narrow{display:none}
.ghero h1{text-wrap:balance}
.ghero .crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.72);margin-block-end:22px}
.ghero .crumbs a{color:rgba(255,255,255,.86)} .ghero .crumbs a:hover{color:#fff}
.ghero .meta{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.66);margin-block-start:18px}
.ahero .hero-in{grid-template-columns:minmax(0,1fr);padding-block:52px 80px}
.ahero h1{font-size:clamp(34px,4.8vw,62px);line-height:1;max-width:18ch}
.ahero p{max-width:60ch}
.calc-sec{margin-block-start:40px}
.calc{position:relative;padding:24px;border-radius:20px;background:var(--bg);border:1px solid var(--line);box-shadow:var(--sh);color:var(--ink)}
.calc h2{font:700 20px var(--disp);letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink)}
.tag{font:700 10px var(--disp);letter-spacing:.14em;color:var(--acc-ink);background:var(--acc);padding:4px 8px;border-radius:999px;text-transform:uppercase}
.fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-block-start:18px}
.fields label{font-size:12.5px;color:var(--muted);display:grid;gap:6px;line-height:1.3}
.fields input,.fields select{width:100%;border:1px solid var(--line-2);background:var(--wash);color:var(--ink);border-radius:12px;padding:10px 12px;font:600 15px var(--disp);font-variant-numeric:tabular-nums}
.fields input:focus,.fields select:focus{border-color:var(--brand-ink);background:var(--bg);outline:none}
.out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-block-start:18px}
.out div{border-radius:14px;padding:14px 16px;background:var(--wash)}
.out b{display:block;font:700 clamp(26px,3vw,36px)/1.1 var(--disp);color:var(--brand-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.out small{color:var(--muted);font-size:12.5px}
.rolls{display:flex;gap:4px;margin-block-start:14px;flex-wrap:wrap;align-items:center;min-height:18px}
.rolls span{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--acc-2),var(--acc) 50%,var(--brand-2));animation:pop .4s var(--ease) both}
.rolls small{color:var(--muted);font-size:12.5px;margin-inline-start:6px}
@keyframes pop{from{transform:scale(0)}}
.how{font-size:13.5px;color:var(--muted);margin:12px 0 0;max-width:70ch}
.sh{flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters .chip{cursor:pointer}
.filters .chip[aria-pressed="true"]{background:var(--solid);color:var(--solid-fg);border-color:var(--solid)}
.tiles{list-style:none;margin:0;padding:0}
.tiles .oc{background:var(--wash-2)}
.tiles .oc>svg{position:absolute;inset:0;width:100%;height:100%;transition:.6s} .tiles .oc:hover>svg{transform:scale(1.06)}
.tiles .oc .c b{line-height:1.25;margin-block:4px 4px;text-wrap:balance}
.tiles .oc .c .k{display:block;font:600 11px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-2);opacity:1}
.cover{margin:40px 0 0;border-radius:18px;overflow:hidden;background:var(--wash-2);aspect-ratio:16/8;max-width:100%}
.cover img,.cover svg{width:100%;height:100%;object-fit:cover;display:block}
.layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;margin-block-start:44px}
.toc{position:sticky;top:96px;align-self:start;font-size:14px}
.toc .bar{height:4px;border-radius:4px;background:var(--wash-2);overflow:hidden;margin-block-end:14px}
.toc .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--acc));transition:width .1s linear}
.toc b{display:block;font:600 11px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-block-end:8px}
.toc a{display:block;padding:6px 0;color:var(--muted);line-height:1.35;border-inline-start:2px solid transparent;padding-inline-start:10px}
.toc a:hover{color:var(--ink)} .toc a.on{color:var(--ink);font-weight:600;border-inline-start-color:var(--acc)}
.prose{max-width:68ch;font-size:17px;line-height:1.7;color:var(--ink-2)}
.prose h2{font:700 clamp(22px,2.4vw,30px)/1.1 var(--disp);letter-spacing:-.03em;text-transform:uppercase;margin:44px 0 14px;scroll-margin-top:96px;color:var(--ink);text-wrap:balance}
.prose h2:first-child{margin-block-start:0}
.prose h3{font:600 19px/1.25 var(--disp);margin:28px 0 8px;color:var(--ink)}
.prose ul,.prose ol{padding-inline-start:22px}
.prose li{margin-block:4px}
.prose strong{color:var(--ink)}
.prose a{color:var(--brand-ink);text-decoration:underline;text-decoration-color:var(--acc);text-underline-offset:3px}
.callout{border-radius:14px;background:var(--wash);border-inline-start:4px solid var(--acc);padding:16px 18px;margin-block:22px}
.callout p{margin:0}
.spec-wrap{overflow-x:auto;margin-block:20px;border:1px solid var(--line);border-radius:16px}
.spec{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums}
.spec th,.spec td{text-align:start;padding:11px 14px;border-block-end:1px solid var(--line);vertical-align:top}
.spec th{font:600 12px var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--wash)}
.spec tr:last-child td{border-block-end:0}
.faq{display:grid;gap:8px;margin-block:8px 0}
.faq-q{border:1px solid var(--line);border-radius:14px;background:var(--bg);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.faq-q[open]{border-color:var(--line-2);box-shadow:var(--sh)}
.faq-q summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;cursor:pointer;list-style:none;font:600 16px/1.35 var(--disp);color:var(--ink)}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"";flex:none;width:10px;height:10px;border-inline-end:2px solid var(--brand-ink);border-block-end:2px solid var(--brand-ink);transform:rotate(45deg);transition:transform .2s var(--ease);margin-block-start:-4px}
.faq-q[open] summary::after{transform:rotate(-135deg);margin-block-start:4px}
.faq-q summary:hover{color:var(--brand-ink)}
.faq-q summary:focus-visible{outline:2px solid var(--brand-ink);outline-offset:-2px;border-radius:14px}
.faq-q>div{padding:0 16px 16px;font-size:15.5px}
.faq-q>div p{margin:0} .faq-q>div p+p{margin-block-start:8px}
.prose .about{margin-block-start:40px;padding:16px 18px;border-radius:14px;background:var(--wash);font-size:14px;line-height:1.6;color:var(--muted)}
.prose .about p{margin:0} .prose .about strong{color:var(--ink)}
@media(prefers-reduced-motion:reduce){ .faq-q,.faq-q summary::after{transition:none} }
.cmp{margin-block:22px;border-radius:18px;border:1px solid var(--line);padding:16px}
.cmp-q{font:600 15px var(--disp);margin:0 0 12px;color:var(--ink)}
.cmp-opts{display:flex;gap:8px;flex-wrap:wrap}
.cmp-opts button{cursor:pointer;font:600 13.5px var(--disp);padding:9px 15px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg);color:var(--muted);transition:.14s}
.cmp-opts button:hover{border-color:var(--ink);color:var(--ink)}
.cmp-opts button[aria-pressed="true"]{background:var(--solid);color:var(--solid-fg);border-color:var(--solid)}
.cmp-a{margin-block-start:14px;border-radius:14px;background:var(--wash);border-inline-start:4px solid var(--acc);color:var(--ink-2);padding:14px 16px;font-size:15.5px}
.cmp-a:empty{display:none}
.cmp-a b{color:var(--brand-ink);font-family:var(--disp)}
.wlab{margin-block:22px 10px;border-radius:18px;background:var(--wash);padding:14px;display:grid;gap:16px}
.wstage{position:relative;aspect-ratio:16/9;max-height:72vh;border-radius:12px;overflow:hidden;background:var(--wash-2)}
.wlab .wbox{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;border-radius:0;object-fit:cover;opacity:0;transition:opacity .35s var(--ease)}
.wlab .wbox.on{opacity:1}
.wcan{position:absolute;inset:0;width:100%;height:100%;display:block}
.wread{position:absolute;inset-block-start:10px;inset-inline-end:10px;display:flex;align-items:baseline;gap:8px;background:var(--paper);color:var(--paper-ink);border-radius:12px;padding:6px 12px;box-shadow:var(--sh)}
.wread b{font:700 26px/1.1 var(--disp);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wread span{font:600 14px var(--disp);color:var(--paper-muted)}
.wscale{position:absolute;inset-block-end:10px;inset-inline-start:10px;font:600 12px var(--disp);background:var(--paper);color:var(--paper-ink);padding:4px 10px;border-radius:999px;box-shadow:var(--sh)}
.whint{position:absolute;inset-block-start:10px;inset-inline-start:10px;display:inline-flex;align-items:center;gap:6px;font:600 12px var(--disp);background:var(--paper);color:var(--paper-ink);padding-block:5px;padding-inline:9px 11px;border-radius:999px;box-shadow:var(--sh);transition:opacity .5s var(--ease)}
.whint svg{width:14px;height:14px;flex:none}
.whint.gone{opacity:0}
.wloupe{position:absolute;width:150px;height:150px;border-radius:50%;overflow:hidden;pointer-events:none;z-index:3;background:var(--wash-2);box-shadow:0 0 0 3px var(--paper),0 12px 32px rgba(0,0,0,.38);opacity:0;transform:scale(.55);transition:opacity .18s var(--ease),transform .22s var(--ease)}
.wloupe.on{opacity:1;transform:none}
.wloupe canvas{display:block;width:100%;height:100%}
@media(hover:hover) and (pointer:fine){ .wstage{cursor:zoom-in} .wstage:has(.wloupe.on){cursor:none} }
.wctl{display:grid;gap:12px;padding-inline:4px}
.wrow{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:10px}
.wrow.wtop{align-items:start}
.wrow>span{font:600 13px var(--disp);color:var(--muted)}
.wrow.wtop>span{padding-block-start:3px}
.wslide{position:relative;display:grid;gap:5px;min-width:0}
.wtrack{position:absolute;inset-inline:11px;inset-block-start:8px;height:6px;border-radius:999px;background:var(--line-2)}
.wfit{position:absolute;inset-block:-3px;inset-inline-start:calc(var(--fa,0) * 100% - 9px);width:calc((var(--fb,0) - var(--fa,0)) * 100% + 18px);border-radius:999px;background:color-mix(in srgb,var(--ok) 26%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 42%,transparent);transition:inset-inline-start .35s var(--ease),width .35s var(--ease)}
.wslide input[type=range]{-webkit-appearance:none;appearance:none;position:relative;z-index:1;width:100%;height:22px;margin:0;background:none;cursor:pointer}
.wslide input[type=range]::-webkit-slider-runnable-track{height:22px;background:none}
.wslide input[type=range]::-moz-range-track{height:22px;background:none}
.wslide input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--paper);border:2px solid var(--paper-ink);box-shadow:0 2px 6px rgba(0,0,0,.28);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.wslide input[type=range]::-moz-range-thumb{box-sizing:border-box;width:22px;height:22px;border-radius:50%;background:var(--paper);border:2px solid var(--paper-ink);box-shadow:0 2px 6px rgba(0,0,0,.28);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.wslide input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.08)}
.wslide input[type=range]:active::-webkit-slider-thumb{transform:scale(1.16)}
.wslide input[type=range]:hover::-moz-range-thumb{transform:scale(1.08)}
.wslide input[type=range]:active::-moz-range-thumb{transform:scale(1.16)}
.wslide input[type=range]:focus-visible{outline:none}
.wslide input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-ink) 40%,transparent),0 2px 6px rgba(0,0,0,.28)}
.wslide input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-ink) 40%,transparent),0 2px 6px rgba(0,0,0,.28)}
.wticks{position:relative;height:20px;margin-inline:11px}
.wticks button{position:absolute;inset-block-start:0;inset-inline-start:calc(var(--i) / var(--n) * 100%);width:36px;margin-inline-start:-18px;padding:2px 0;border:0;border-radius:6px;background:none;font:600 11px var(--disp);color:var(--muted);font-variant-numeric:tabular-nums;cursor:pointer;transition:color .25s var(--ease)}
.wticks button:hover{color:var(--ink)}
.wticks button.fit{color:var(--ok-ink)}
.wticks button.on{color:var(--ink);font-weight:800}
.wkey{margin:0;display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.wkey i{flex:none;width:20px;height:9px;border-radius:999px;background:color-mix(in srgb,var(--ok) 26%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 42%,transparent)}
.wlab .chip{padding:7px 12px;font-size:12.5px;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease)}
.wlab .chip:hover{border-color:var(--ink-2)}
.wlab .chip[aria-pressed="true"]{background:var(--solid);color:var(--solid-fg);border-color:var(--solid)}
.wlab .chip:active,.sw:active,.swany:active{transform:scale(.95)}
.wlab .chip:focus-visible,.sw:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px}
.swany:focus-within{outline:2px solid var(--brand-ink);outline-offset:2px}
.sws{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg);padding:3px;cursor:pointer;transition:transform .15s var(--ease),box-shadow .2s var(--ease)}
.sw:hover{transform:scale(1.1)}
.sw i{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
.swany{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding-inline:3px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg);font:600 12.5px var(--disp);color:var(--muted);cursor:pointer;transition:transform .12s var(--ease),box-shadow .2s var(--ease)}
.swany input{width:24px;height:24px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.swany input::-webkit-color-swatch-wrapper{padding:0} .swany input::-webkit-color-swatch{border:0;border-radius:50%} .swany input::-moz-color-swatch{border:0;border-radius:50%}
.swany.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink);color:var(--ink)}
.wlab .wverdict{margin:2px 0 0;font:600 15px/1.4 var(--disp);display:flex;gap:8px;align-items:baseline;transition:color .25s var(--ease)}
.wlab .wverdict:empty{display:none}
.wlab .wverdict::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:currentColor}
.wlab .wverdict.ok{color:var(--ok-ink)} .wlab .wverdict.warn{color:var(--warn-ink)}
.wlab .wuse{margin:0;font-size:13.5px;color:var(--muted)}
.wnote{font-size:13px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){ .wlab .wbox,.wloupe,.wfit,.whint{transition:none} .wlab .chip,.sw,.swany,.wslide input[type=range]::-webkit-slider-thumb{transition:none} }
.fg .about{max-width:34ch;margin:0}
.fbot a{color:rgba(255,255,255,.55)} .fbot a:hover{color:var(--acc)}
@media(max-width:1000px){
  .layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .toc{position:static}
  .fg{grid-template-columns:repeat(3,minmax(0,1fr))} .fg>div:first-child{grid-column:1/-1}
}
@media(max-width:640px){
  .head-r .btn{white-space:nowrap} .head-r .wide{display:none} .head-r .narrow{display:inline}
  .calc{padding:16px} .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:minmax(0,1fr)} .tiles .oc{aspect-ratio:4/3}
  .ahero .hero-in{padding-block:40px 64px}
  .fg{grid-template-columns:minmax(0,1fr)}
  .wstage{aspect-ratio:4/3} .wread b{font-size:20px}
  .wrow{grid-template-columns:minmax(0,1fr);gap:6px} .wrow.wtop>span{padding-block-start:0}
  .wloupe{width:124px;height:124px}
  .wlab .chip{padding:9px 14px} .sw{width:36px;height:36px} .swany{height:36px}
}
@media(max-width:640px) and (min-height:560px){
  .wstage{position:sticky;inset-block-start:calc(var(--hold-head) + 6px);z-index:4;box-shadow:0 -6px 0 8px var(--wash),0 12px 18px -10px rgba(0,0,0,.3)}
}