:root{
  --bg:#0f1216; --bg2:#151a20; --card:#171d24; --line:#253040;
  --fg:#e8edf4; --muted:#93a1b3; --acc:#3ea6ff; --ok:#2ecc71; --bad:#ff5470; --warn:#ffb020;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f5f7fa; --bg2:#eef2f7; --card:#fff; --line:#dde5ee; --fg:#141a22; --muted:#5b6b7f;
         --acc:#0a66c2; --ok:#128a4b; --bad:#c81e42; --warn:#a86400; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
a{color:var(--acc); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--mono); font-size:.92em; background:var(--bg2); padding:.12em .4em; border-radius:4px}
.wrap{max-width:1060px; margin:0 auto; padding:0 20px}

/* header */
header.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
header.top .wrap{display:flex; align-items:center; gap:24px; height:60px}
.logo{font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--fg)}
.logo span{color:var(--acc); font-weight:600}
header nav{display:flex; gap:18px; flex-wrap:wrap; font-size:14px}
header nav a{color:var(--muted)}
header nav a:hover{color:var(--fg); text-decoration:none}

/* hero */
.hero{padding:56px 0 8px}
.hero h1{font-size:clamp(28px,5vw,44px); line-height:1.15; letter-spacing:-.03em; margin:0 0 16px}
.lead{font-size:18px; color:var(--muted); max-width:820px; margin:0 0 20px}
.lead b{color:var(--fg)}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.badges span{font-size:13px; padding:5px 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted)}

/* cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px 26px; margin:22px auto}
.card h2{margin:0 0 14px; font-size:23px; letter-spacing:-.02em}
.card h3{margin:26px 0 10px; font-size:17px}
.muted{color:var(--muted)}
.no{color:var(--bad)}

/* form */
form{margin-top:18px}
label{display:block; font-size:14px; font-weight:600; margin:14px 0 6px}
textarea,input,select{
  width:100%; background:var(--bg2); color:var(--fg); border:1px solid var(--line);
  border-radius:10px; padding:11px 13px; font-size:15px; font-family:inherit;
}
textarea{font-family:var(--mono); font-size:13.5px; resize:vertical}
textarea:focus,input:focus,select:focus{outline:2px solid color-mix(in srgb,var(--acc) 55%,transparent); border-color:var(--acc)}
.row{display:flex; gap:14px; flex-wrap:wrap}
.col{flex:1 1 220px; min-width:0}
.col-btn{flex:0 0 auto; display:flex; align-items:flex-end}
button{
  background:var(--acc); color:#fff; border:0; border-radius:10px; padding:12px 22px;
  font-size:15px; font-weight:650; cursor:pointer; white-space:nowrap;
}
button:hover{filter:brightness(1.1)}
button:disabled{opacity:.6; cursor:default}
.hint{font-size:13px; color:var(--muted); margin:10px 0 0}

/* result */
.result{margin-top:20px; border:1px solid var(--line); border-radius:12px; padding:18px 20px; background:var(--bg2)}
.result h3{margin:0 0 10px; font-size:18px}
.result .big{font-size:21px; font-weight:750; margin:6px 0 14px; letter-spacing:-.02em}
.result.ok{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}
.result.bad{border-color:color-mix(in srgb,var(--bad) 60%,var(--line))}
.result .big.ok{color:var(--ok)} .result .big.bad{color:var(--bad)}
.kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 18px; margin:12px 0}
.kv div{font-size:14px} .kv dt{color:var(--muted); font-size:12.5px} .kv dd{margin:2px 0 0; font-weight:650; font-family:var(--mono); font-size:13.5px}
.error{margin-top:16px; border:1px solid var(--bad); border-radius:12px; padding:14px 18px; color:var(--bad); background:color-mix(in srgb,var(--bad) 10%,transparent)}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.btn{display:inline-block; background:var(--bg); border:1px solid var(--line); color:var(--fg);
  padding:9px 16px; border-radius:9px; font-size:14px; font-weight:600}
.btn:hover{text-decoration:none; border-color:var(--acc); color:var(--acc)}
.btn.small{padding:6px 12px; font-size:13px}

/* tabs */
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin:8px 0 0; flex-wrap:wrap}
.tab{background:none; border:0; color:var(--muted); padding:10px 16px; font-size:15px; font-weight:600;
  cursor:pointer; border-bottom:2px solid transparent; border-radius:0}
.tab:hover{color:var(--fg); filter:none}
.tab.active{color:var(--acc); border-bottom-color:var(--acc)}
.tab-body{display:none; padding-top:6px}
.tab-body.active{display:block}

/* code */
pre{background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:14px 16px;
  overflow:auto; margin:10px 0; font-size:13px; line-height:1.55}
pre code{background:none; padding:0; font-size:13px}
.scriptbox{border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:var(--bg2); margin:16px 0}
.scriptbox-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}

/* tables */
.tbl{width:100%; border-collapse:collapse; margin:12px 0; font-size:14.5px}
.tbl th,.tbl td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl th{font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700}
.tbl tr.ok td{background:color-mix(in srgb,var(--ok) 8%,transparent)}
.tablewrap{max-height:460px; overflow:auto; border:1px solid var(--line); border-radius:12px}
.tablewrap .tbl{margin:0}
.tablewrap thead th{position:sticky; top:0; background:var(--card); z-index:1}

/* запуск на своём компьютере */
.runbar{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:20px 0 8px;
  padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--bg2)}
.runbtn{display:inline-block; background:var(--acc); color:#fff; font-size:17px; font-weight:700;
  padding:15px 28px; border-radius:11px; letter-spacing:-.01em; white-space:nowrap;
  box-shadow:0 6px 18px color-mix(in srgb,var(--acc) 35%,transparent)}
.runbtn:hover{filter:brightness(1.08); text-decoration:none}
.runbtn:active{transform:translateY(1px)}
.runbtn-side{display:flex; flex-direction:column; gap:4px; font-size:13.5px; flex:1 1 260px}
.noscript-warn{color:var(--warn); font-size:13.5px; font-weight:600}
.os-badge{font-size:12.5px; color:var(--muted); border:1px dashed var(--line);
  border-radius:999px; padding:3px 10px; align-self:flex-start}
.os-badge.os-other{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 50%,var(--line))}
.tabgroup{margin-top:6px}
.tabbody-hint{font-size:13px; color:var(--muted)}
.fold{border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin:14px 0; background:var(--bg2)}
.fold summary{cursor:pointer; font-weight:650; font-size:15px}
.fold summary:hover{color:var(--acc)}
.fold[open] summary{margin-bottom:10px}
ul.plain{margin:8px 0 8px 20px; font-size:14.5px} ul.plain li{margin:4px 0}
@media(max-width:640px){ .runbtn{width:100%; text-align:center} }

/* misc */
.steps{margin:10px 0 10px 22px} .steps li{margin:6px 0}
.warn{border-left:3px solid var(--warn); padding:10px 14px; background:color-mix(in srgb,var(--warn) 9%,transparent); border-radius:0 8px 8px 0; font-size:14.5px}
.foot{border-top:1px solid var(--line); margin-top:30px; padding:22px 20px 40px; color:var(--muted); font-size:13.5px}
@media(max-width:640px){
  .card{padding:20px 16px; border-radius:12px}
  .hero{padding:34px 0 4px}
  header nav{display:none}
  .col-btn{flex:1 1 100%} button{width:100%}
}