:root{--bg:#EDF0F4;--pp:#F9FAFC;--ink:#121A26;--mu:#566377;--ln:#C9D2DE;--ac:#2438FF;--sky:#9DB0FF;--wa:#B45309;--er:#C4283C;--hd:Onest,system-ui,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg);color:var(--ink);font:17px/1.65 var(--hd);-webkit-font-smoothing:antialiased}
h1,h2,h3,.wm{font-weight:800;letter-spacing:-.03em;line-height:1.05}
h1{font-size:clamp(2.7rem,9vw,5.6rem)}
h2{font-size:clamp(1.8rem,4.5vw,2.8rem);margin-bottom:.5em}
h3{font-size:1.1rem;letter-spacing:-.01em;line-height:1.3}
p,li{color:var(--mu);max-width:62ch}
p b{color:var(--ink)}
p,ul,pre{margin-top:.8em}
ul{padding-left:1.2em}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.w{max-width:1040px;margin:0 auto;padding:0 24px}
section{padding-top:88px}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav nav{display:flex;align-items:center;gap:24px;color:var(--mu);font-size:.95rem}
.nav .btn{margin:0;padding:9px 16px}
.logo{display:flex;align-items:center;gap:10px;font-size:1.4rem}
.mark{width:30px;height:30px;color:var(--ac);flex:none}
.btn{display:inline-block;margin:0 8px 8px 0;padding:13px 22px;border:1.5px solid var(--ink);border-radius:6px;font-weight:600;color:var(--ink)}
.btn.p{background:var(--ac);border-color:var(--ac);color:#fff}
.lead{font-size:1.25rem;margin:1.2em 0 1.8em;color:var(--ink)}
.hero{padding:72px 24px 0}
.term{background:var(--ink);color:#E8EEF7;border-radius:10px;padding:24px 28px;font:500 .95rem/1.9 var(--mono);overflow-x:auto;margin-top:56px}
.term b{color:var(--sky);font-weight:500}
.term i{color:#8190A8;font-style:normal}
.cur{display:inline-block;width:.6em;height:1.1em;background:var(--sky);vertical-align:-3px}
.dl{margin:20px 0}
.list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));column-gap:48px;margin-top:32px}
.list div{padding:24px 0;border-top:1.5px solid var(--ink)}
footer{margin-top:96px;padding:28px 0 40px;border-top:1px solid var(--ln);color:var(--mu);font-size:.9rem}
.cover{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.big{width:200px;height:200px;max-width:100%}
.sheet{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:28px}
.tile{display:grid;place-items:center;align-content:center;gap:12px;min-height:200px;border-radius:6px;background:var(--ink);color:var(--sky)}
.tile.l{background:var(--pp);color:var(--ac);border:1px solid var(--ln)}
.tile.a{background:var(--ac);color:#fff}
.tile .mark{width:64px;height:64px;color:inherit}
.tile .wm{font-size:1.6rem;color:#fff}
.tile.l .wm{color:var(--ink)}
.icon{display:grid;place-items:center;width:96px;height:96px;border-radius:22px;background:var(--ac)}
.icon .mark{width:54px;height:54px;color:#fff}
.sw{display:flex;flex-direction:column;justify-content:flex-end;min-height:150px;padding:16px;border-radius:6px;font:.8rem/1.5 var(--mono)}
.sw b{font:800 1.05rem var(--hd);margin-bottom:6px}
.specimen{font-size:3rem;line-height:1.1;color:var(--ink)}
.chip{display:inline-block;margin:0 8px 8px 0;padding:3px 12px;border:1.5px solid currentColor;border-radius:99px;font:500 .85rem var(--mono)}
.chip.ok{color:var(--ac)}.chip.wa{color:var(--wa)}.chip.er{color:var(--er)}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.vs div{padding:8px 16px;border-left:3px solid var(--ac)}
.vs .no{border-color:var(--er);color:var(--mu)}
.boot{display:grid;place-items:center;align-content:center;gap:14px;min-height:260px;margin-top:28px;border-radius:10px;background:var(--ink)}
.boot .mark{width:68px;height:68px;color:var(--sky)}
.boot .wm{font-size:1.8rem;color:#fff}
.boot code{font:.85rem var(--mono);color:#9AA6BA}
@media(max-width:640px){.nav nav a:not(.p){display:none}section{padding-top:64px}}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:center}
.note{margin:0 0 1.6em;padding-left:14px;border-left:3px solid var(--wa);font-size:.95rem}
.ph{justify-self:center;width:min(280px,100%);aspect-ratio:9/18.5;padding:12px;border-radius:38px;background:var(--ink);border:1px solid #2A3648}
.scr{height:100%;padding:22px 16px;border-radius:27px;background:#0E1622;color:#E8EEF7;display:flex;flex-direction:column;gap:10px;font-size:.84rem}
.scr h4{font:800 1.2rem/1.2 var(--hd);letter-spacing:-.02em;margin:12px 0 6px}
.scr .t{display:flex;justify-content:space-between;color:#8190A8;font:500 .72rem var(--mono)}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border-radius:12px;background:#17212F}
.row span{color:var(--sky);font:500 .72rem var(--mono);text-align:right}
.steps{list-style:none;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:32px}
.steps li{counter-increment:s;border-top:1.5px solid var(--ink);padding-top:16px}
.steps li.now{border-top-color:var(--ac)}
.steps li::before{content:counter(s);display:block;font:800 2rem/1 var(--hd);color:var(--ac);margin-bottom:10px}
details{border-top:1.5px solid var(--ink);padding:18px 0}
summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--ac);font-weight:800}
details[open] summary::after{content:"−"}
summary:focus-visible{outline:2px solid var(--ac);outline-offset:4px}