:root{--ink:#0B0C0C;--ink2:#4A4E52;--mute:#8B9096;--line:#E7E7E4;--soft:#F4F4F2;--paper:#FFFFFF;--red:#E03127;--red2:#B3221A;--blue:#1E56C8;
--disp:"Be Vietnam Pro",system-ui,sans-serif;--body:"Be Vietnam Pro",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
--sh:0 1px 2px rgba(11,12,12,.05),0 10px 28px rgba(11,12,12,.06);--sh2:0 2px 6px rgba(11,12,12,.07),0 18px 44px rgba(11,12,12,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--ink);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.bar{background:#000;color:#fff;position:sticky;top:0;z-index:20}
.bar .in{max-width:1280px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px;font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:-.01em}
.brand .mk{width:40px;height:40px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:.6rem;font-weight:800;line-height:.95;letter-spacing:.04em;text-align:center;flex:none}
.brand small{display:block;font-weight:400;font-size:.76rem;color:#A8ADB2;letter-spacing:0;margin-top:2px}
nav.nv{display:flex;gap:7px;flex-wrap:wrap}
nav.nv a{color:#fff;text-decoration:none;font-size:.87rem;font-weight:600;padding:9px 17px;border-radius:999px;border:1px solid #33373A;transition:background .15s,border-color .15s,color .15s}
nav.nv a:hover{background:#1C1F21;border-color:#6A7074}
nav.nv a[aria-current=page]{background:#fff;color:#000;border-color:#fff}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
@media (max-width:640px){.wrap{padding:0 16px}.bar .in{padding:12px 16px}}
.hero{position:relative;display:grid;grid-template-columns:1fr 290px;gap:48px;align-items:center;background:#000;color:#fff;border-radius:30px;padding:60px 56px 66px;margin:26px 0 0}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding:40px 26px 46px;gap:30px;border-radius:24px}}
.hero p{color:#CFD2D5}
.micro{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);display:flex;align-items:center;gap:9px}
.micro::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}
.hero .micro{color:#fff}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,5.6vw,4.3rem);line-height:1.02;letter-spacing:-.035em;margin:16px 0 18px}
h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.65rem,3.3vw,2.5rem);line-height:1.06;letter-spacing:-.03em;margin:10px 0 14px}
h3{font-family:var(--disp);font-weight:700;font-size:1.14rem;letter-spacing:-.015em;margin:0 0 7px;line-height:1.25}
p{margin:0 0 1em;color:var(--ink2);max-width:68ch}
.lede{font-size:1.14rem;line-height:1.56}
.disc{width:270px;height:270px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;text-align:center;padding:28px;justify-self:center}
.disc b{display:block;font-family:var(--disp);font-weight:800;font-size:3.5rem;line-height:1;letter-spacing:-.04em}
.disc span{font-size:.8rem;font-weight:500;letter-spacing:.02em;color:var(--ink2);line-height:1.45;display:block;margin-top:6px}
@media (max-width:900px){.disc{width:210px;height:210px}.disc b{font-size:2.8rem}}
.sec{padding:40px 0}
.band{background:var(--soft)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:-44px 0 0;position:relative;z-index:2}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr);margin-top:-30px}}
@media (max-width:420px){.stats{grid-template-columns:1fr}}
.stats div{border:1px solid var(--line);border-radius:20px;padding:20px;background:#fff;box-shadow:var(--sh)}
.stats b{display:block;font-family:var(--disp);font-weight:800;font-size:2.1rem;line-height:1.05;letter-spacing:-.035em}
.stats span{font-size:.85rem;color:var(--ink2);display:block;margin-top:4px}
.find{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:820px){.find{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:22px;padding:24px;background:#fff;box-shadow:var(--sh);transition:box-shadow .18s ease,transform .18s ease}
.find .card:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.card .top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.card .n{width:36px;height:36px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:.9rem;flex:none}
.card p{max-width:none;font-size:.96rem}
.card code{font-family:var(--mono);font-size:.84em;background:var(--soft);border-radius:6px;padding:1px 5px;overflow-wrap:anywhere}
.ev{display:block;font-family:var(--mono);font-size:.72rem;line-height:1.6;color:var(--mute);overflow-wrap:anywhere;margin-top:10px}
.chips{margin-top:10px}
.chip{display:inline-block;font-size:.71rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:5px 12px;margin:5px 6px 0 0;color:var(--ink2)}
.tag{display:inline-block;font-size:.69rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:5px 12px;border:1px solid transparent;white-space:nowrap;background:#000;color:#fff}
.tag.fail{background:var(--red);color:#fff}.tag.warn{background:#000;color:#fff}.tag.pass{background:var(--blue);color:#fff}
.tool{border:1px solid var(--line);border-radius:26px;background:#fff;overflow:hidden;box-shadow:var(--sh)}
.tool .ctl{display:flex;flex-wrap:wrap;gap:11px;align-items:center;padding:18px 22px;background:var(--soft);box-shadow:inset 0 -1px 0 var(--line)}
.tool label.l{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.tool select{font-family:var(--body);font-weight:500;font-size:.95rem;border:1px solid var(--ink);border-radius:999px;padding:9px 16px;background:#fff;color:var(--ink);max-width:100%}
.pillbtn{font-family:var(--body);font-weight:700;font-size:.88rem;background:#000;color:#fff;border:1px solid #000;border-radius:999px;padding:10px 20px;cursor:pointer;transition:background .15s,color .15s}
.pillbtn:hover{background:#1C1F21}
.pillbtn.ghost{background:#fff;color:var(--ink)}.pillbtn.ghost:hover{background:var(--soft)}
.pillbtn[aria-pressed=true]{background:#fff;color:var(--ink)}
.tool .body{padding:22px}
.scroll{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:16px}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{padding:12px 14px;text-align:left;vertical-align:top;box-shadow:inset 0 -1px 0 var(--line)}
tr:last-child td{box-shadow:none}
th{font-size:.71rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);background:var(--soft)}
td.m{font-family:var(--mono);font-size:.84rem;overflow-wrap:anywhere}
tr.bad td{background:#FDF0EF}
.verdict{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.verdict .big{font-family:var(--disp);font-weight:800;font-size:1.55rem;letter-spacing:-.03em}
.fixbox{border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin-top:16px;background:var(--soft);font-size:.93rem}
.fixbox code{font-family:var(--mono);font-size:.8rem;overflow-wrap:anywhere}
.deal{border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin:0 0 12px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:#fff}
@media (max-width:640px){.deal{grid-template-columns:1fr}}
.deal .nm{font-weight:700;letter-spacing:-.01em}
.deal .ds{font-family:var(--mono);font-size:.82rem;color:var(--ink2)}
.ladder{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ladder span{font-family:var(--mono);font-size:.78rem;border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:5px 12px}
.ladder span.worse{border-color:var(--red);background:#FDF0EF;color:var(--red2)}
.phase{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.phase{grid-template-columns:1fr}}
.phase .card ul{margin:8px 0 0;padding-left:18px;color:var(--ink2);font-size:.94rem}
.phase .card li{margin-bottom:6px}
.note{border:1px solid var(--line);border-radius:24px;padding:24px 26px;font-size:.94rem;background:var(--soft)}
.note p{max-width:none}
footer{background:#000;color:#A8ADB2;margin-top:34px}
footer .in{max-width:1280px;margin:0 auto;padding:40px 24px 50px;font-size:.89rem}
footer p{color:inherit;max-width:none}
footer a{color:#fff}