/* YaoBench / 钥点实验室 — dark geek UI v0.2. No remote assets. */
:root{color-scheme:dark;--bg:#0a1017;--surface:#101b26;--panel:#14212d;--line:#2d4050;--text:#e9f2f6;--muted:#9fb3c2;--faint:#728c9e;--lime:#b6f577;--cyan:#70d8e5;--max:1140px;--mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;--sans:system-ui,-apple-system,"Segoe UI","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.8 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--lime);text-underline-offset:4px}a:hover{color:#dcffa9}a:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.container{width:min(calc(100% - 44px),var(--max));margin-inline:auto}
header{background:#0c151f;border-top:3px solid var(--lime);border-bottom:1px solid var(--line)}
.head{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand-icon{display:grid;place-items:center;width:45px;height:45px;border:1px solid var(--lime);background:#183021;color:var(--lime);font:800 25px/1 var(--mono);position:relative}
.brand-icon:after{content:"";position:absolute;right:4px;bottom:4px;width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}.brand-text strong{font-size:22px;font-weight:800;letter-spacing:-.05em}.brand-text small{font-size:11px;letter-spacing:.14em;color:var(--muted);margin-top:6px}
.nav{display:flex;gap:8px;flex-wrap:wrap}.nav a{text-decoration:none;color:var(--muted);font:12px var(--mono);padding:11px 14px;border:1px solid transparent;transition:background .18s,color .18s}
.nav a:hover{border-color:var(--line);background:var(--surface)}.nav a[aria-current=page]{border-color:#496d5a;color:var(--lime);background:#192d26}
.nav-num{color:var(--faint);margin-right:6px;font-size:10px}
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 78% 23%,#22565750,transparent 42%),radial-gradient(ellipse at 16% 92%,#23412670,transparent 41%),var(--bg);border-bottom:1px solid var(--line)}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#b8d7d70b 1px,transparent 1px),linear-gradient(90deg,#b8d7d70b 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(90deg,transparent,#000)}
.hero-layout{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(310px,.88fr);gap:clamp(28px,5vw,70px);align-items:center;padding:95px 0 79px}
.eyebrow{color:var(--lime);font:700 11px/1.7 var(--mono);letter-spacing:.1em}
.hero h1{font-size:clamp(3.3rem,6.1vw,6.2rem);letter-spacing:-.075em;line-height:1.15;max-width:800px;margin:23px 0 21px;font-weight:850}
.hero h1 em{font-style:normal;color:var(--lime)}.hero h1 em span{color:var(--cyan)}
.lead{font-size:17px;color:var(--muted);max-width:680px;line-height:1.95}
.hero .lead{max-width:550px}.hero-strap{font-size:20px;color:var(--text);font-weight:750;margin:0}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-height:47px;text-decoration:none;border:1px solid var(--line);padding:9px 20px;font-size:13px;font-weight:750;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px)}.btn.primary{background:var(--lime);color:#102013;border-color:var(--lime)}.btn.primary:hover{background:#d6ffa4;color:#102013}.btn.secondary{background:#15232d8c;color:var(--text);border-color:#4e6976}.btn.secondary:hover{border-color:var(--lime);color:var(--lime)}
.hero-note{color:var(--faint);font:10px var(--mono);letter-spacing:.06em;margin-top:44px}
.terminal{background:#0b141c;border:1px solid #43616a;box-shadow:0 20px 76px #0009;min-width:0}
.terminal-head{height:45px;background:#17242e;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:13px;padding:0 18px;color:var(--muted);font:11px var(--mono)}
.terminal-dots{display:flex;gap:6px}.terminal-dots i{height:8px;width:8px;background:#e7827d;border-radius:50%}.terminal-dots i:nth-child(2){background:#edc271}.terminal-dots i:nth-child(3){background:#89cea3}
.terminal-head small{margin-left:auto;font:10px var(--mono);color:var(--faint)}
.terminal-body{padding:27px 25px 30px;font:12px/2.05 var(--mono);overflow-x:auto;white-space:nowrap}
.terminal-command{color:var(--text);padding-bottom:18px}.terminal-command b{color:var(--lime);margin-right:10px}
.code-key{color:var(--cyan)}.code-val{color:#c3f79a}.code-dim{color:var(--faint)}.code-indent{padding-left:20px}.code-gap{height:10px}
.terminal-foot{display:flex;align-items:center;justify-content:space-between;gap:7px;background:#101e27;border-top:1px solid var(--line);padding:12px 17px;color:var(--faint);font:9px var(--mono)}
.terminal-foot span:before{content:"";display:inline-block;vertical-align:middle;margin-right:8px;width:6px;height:6px;background:var(--lime);border-radius:50%}
.savings{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #436950;background:#13251e}
.savings div{display:flex;align-items:center;gap:13px;padding:18px 23px;border-right:1px solid #355243;font-size:17px;font-weight:750}.savings div:last-child{border-right:0}
.savings code{font:11px var(--mono);color:var(--lime)}.savings b{color:var(--lime);margin-left:auto;font:17px var(--mono)}
section{padding:94px 0}.hero{padding:0}
.section-marker{color:var(--lime);font:700 11px var(--mono);letter-spacing:.11em;margin-bottom:16px}
.section-title{font-size:clamp(1.8rem,3.1vw,3rem);line-height:1.35;letter-spacing:-.06em;margin:0 0 14px}
.section-intro{color:var(--muted);max-width:780px;margin:0 0 32px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;min-height:294px;padding:28px;background:linear-gradient(155deg,#162633,#0e1922);border:1px solid var(--line);transition:transform .18s,border-color .18s}
.card:hover{transform:translateY(-3px);border-color:#598976}
.card-code{font:10px var(--mono);color:var(--faint);letter-spacing:.09em;margin-bottom:20px}
.card h3{font-size:29px;letter-spacing:-.055em;margin:0;line-height:1.25}.card .card-cn{color:var(--lime);font-size:13px;font-weight:650}
.card p{font-size:13px;color:var(--muted);margin:2px 0 16px;flex:1;line-height:1.9}
.card a{margin-top:auto;padding-top:13px;border-top:1px solid var(--line);font:700 12px var(--mono);text-decoration:none}
.tag{display:inline-block;align-self:flex-start;background:#1d3526;border:1px solid #466e4a;color:var(--lime);font-size:11px;padding:3px 9px;line-height:1.5}
.card:nth-child(2) .tag{background:#2b291e;color:#dbc78f;border-color:#61563c}
.card:nth-child(3) .tag{background:#18323b;color:var(--cyan);border-color:#426b73}
.eyebrow-sub{font:11px var(--mono);color:var(--faint)}
.band{border-block:1px solid var(--line);background:radial-gradient(ellipse at 15% 70%,#24463458,transparent 40%),#111e28}
.band .card{min-height:180px}.band .card h3{font-size:20px;letter-spacing:-.02em}
.content-head{padding:69px 0 50px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 85% 22%,#21555352,transparent 49%),#101b25;position:relative}
.content-head .breadcrumb{color:var(--faint);font:11px var(--mono);margin-bottom:32px}
.breadcrumb a{color:var(--muted)}.content-head h1{font-size:clamp(2.2rem,5vw,4.5rem);letter-spacing:-.07em;line-height:1.24;margin:15px 0}.content-head .lead{margin:0}
.paper{max-width:920px;background:linear-gradient(180deg,#152530,#101c26);border:1px solid var(--line);padding:clamp(25px,4vw,52px)}
.paper h2{font-size:clamp(1.3rem,2.5vw,1.9rem);letter-spacing:-.03em;margin:32px 0 14px}.paper h2:first-child{margin-top:0}
.paper p{font-size:14px;color:var(--muted);line-height:2}
.bullet{padding-left:21px;color:var(--muted);line-height:2}.bullet li{margin-bottom:6px}
.note{border:1px solid #3d6147;background:#172c21;padding:19px 21px;color:#c8dfcb;font-size:13px;margin-top:26px}
footer{background:#071018;border-top:1px solid var(--line);padding:30px 0;color:var(--muted)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font:12px var(--mono)}
.foot strong{font-weight:700;color:var(--text)}.foot a{color:var(--lime)}
@media(max-width:900px){.hero-layout{grid-template-columns:1fr;padding:68px 0 45px}.terminal{width:min(100%,620px)}.hero h1{font-size:clamp(3.4rem,10vw,5.5rem)}.savings{grid-template-columns:repeat(2,1fr)}.savings div:nth-child(2){border-right:0}.savings div:nth-child(-n+2){border-bottom:1px solid #355243}.grid{grid-template-columns:1fr}.card{min-height:235px}.band .card{min-height:150px}section{padding:70px 0}}
@media(max-width:570px){.container{width:min(calc(100% - 30px),var(--max))}.head{align-items:flex-start;flex-direction:column;padding:15px 0;gap:13px}.brand-icon{height:38px;width:38px}.brand-text strong{font-size:19px}.nav{width:100%;justify-content:space-between;gap:0}.nav a{font-size:11px;padding:8px}.nav-num{display:none}.hero h1{font-size:clamp(3.05rem,13vw,4.4rem)}.hero-layout{padding-top:54px}.eyebrow{font-size:10px}.terminal-body{font-size:10px;padding:21px 14px}.savings div{padding:13px 11px;gap:8px;font-size:14px}.savings b{font-size:12px}.actions .btn{width:100%}.hero-note{margin-top:25px}.content-head{padding:50px 0 36px}.card{padding:22px}.foot{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.card,.nav a{transition:none}}
