:root{--bg:#fff;--soft:#f7f8fa;--soft-2:#f1f3f5;--ink:#15171a;--body:#4c525b;--muted:#7b828c;--line:#e6e8eb;--accent:#3667f6;--code:#10141b;--sans:Inter,"Segoe UI","Microsoft YaHei",Arial,sans-serif;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.75;-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}.shell{width:min(1180px,88vw);margin:auto}.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:20}.site-header{height:66px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(16px);z-index:10}.brand{display:flex;align-items:center;gap:7px;font:700 13px var(--mono);letter-spacing:.12em}.brand b{color:var(--accent)}.brand-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(54,103,246,.12)}nav{display:flex;gap:29px;font-size:12px;color:var(--body)}nav a:hover{color:var(--accent)}.header-cta{border:1px solid var(--line);padding:7px 12px;font:11px var(--mono);transition:.25s}.header-cta:hover{border-color:var(--accent);color:var(--accent)}
.intro-screen{position:fixed;inset:0;z-index:100;background:#2458f4;color:#fff;display:flex;align-items:center;padding:8vw;overflow:hidden;transition:opacity .7s,visibility .7s,transform .7s}.intro-screen.hidden{opacity:0;visibility:hidden;transform:translateY(-18px);pointer-events:none}.intro-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:74px 74px;mask-image:linear-gradient(120deg,#000,transparent 78%)}.intro-content{position:relative}.intro-content p{display:flex;align-items:center;gap:10px;font:11px var(--mono);letter-spacing:.11em;color:rgba(255,255,255,.76);margin-bottom:27px}.intro-content p span{display:block;width:26px;border-top:1px solid #fff}.intro-content h1{font-size:clamp(52px,7.7vw,116px);line-height:1.02;letter-spacing:-.09em;margin:0}.intro-content h1 em{font-style:normal;color:#fff;opacity:.74}.intro-content button{margin-top:38px;border:1px solid rgba(255,255,255,.52);background:transparent;color:#fff;padding:11px 17px;font:11px var(--mono);letter-spacing:.08em;cursor:pointer;transition:.25s}.intro-content button:hover{background:#fff;color:#2458f4}.intro-content button i{font-style:normal;margin-left:15px}.intro-screen small{position:absolute;bottom:38px;right:8vw;font:10px var(--mono);letter-spacing:.11em;color:rgba(255,255,255,.65)}
.hero{min-height:calc(100vh - 66px);display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:7vw;padding-top:7vh;padding-bottom:9vh}.kicker{display:flex;gap:9px;align-items:center;margin:0 0 18px;color:var(--muted);font:11px/1.4 var(--mono);letter-spacing:.08em}.kicker span{display:block;width:23px;border-top:1px solid var(--accent)}h1,h2,h3,p{margin-top:0}.hero h1{font-size:clamp(62px,7vw,104px);line-height:1.02;letter-spacing:-.085em;margin-bottom:29px}.hero h1 em,.section-title h2 em{font-style:normal;color:var(--accent)}.hero-description{max-width:590px;color:var(--body);font-size:16px;line-height:1.9}.hero-actions{display:flex;align-items:center;gap:22px;margin-top:35px}.button{font:12px var(--mono)}.button.primary{background:var(--ink);color:#fff;padding:12px 18px;transition:.25s}.button.primary:hover{background:var(--accent)}.button.text span{color:var(--accent)}.terminal-card{background:var(--code);color:#f2f5f8;border-radius:7px;box-shadow:0 24px 55px rgba(22,31,45,.16);overflow:hidden;font-family:var(--mono)}.terminal-top{height:43px;border-bottom:1px solid #262d38;display:flex;align-items:center;gap:7px;padding:0 15px}.terminal-top i{width:8px;height:8px;border-radius:50%;background:#384151}.terminal-top span{margin-left:auto;color:#7e8999;font-size:10px}.terminal-body{padding:28px}.terminal-body p{display:grid;grid-template-columns:28px 90px 1fr;margin:0 0 16px;font-size:12px;color:#9faabb}.terminal-body b{color:#4e5a6a}.terminal-body span{color:#7ea1ff}.terminal-body em{font-style:normal;color:#ccd4df}.terminal-body small{display:flex;gap:8px;align-items:center;color:#8490a0;margin-top:30px}.terminal-body small i{width:7px;height:7px;border-radius:50%;background:#53d393;box-shadow:0 0 13px #53d393}
.signal{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;color:var(--muted);font:10px var(--mono);letter-spacing:.12em;padding:13px 0}.signal div{display:inline-flex;gap:20px;align-items:center;animation:marquee 38s linear infinite}.signal i{width:4px;height:4px;background:var(--accent);border-radius:50%}@keyframes marquee{to{transform:translateX(-50%)}}.section{padding-top:125px;padding-bottom:125px}.section-title{max-width:660px}.section-title.inline{max-width:none;display:grid;grid-template-columns:1fr 390px;gap:60px;align-items:end}.section-title h2,.about h2,.newsletter h2{font-size:clamp(44px,5vw,70px);line-height:1.05;letter-spacing:-.075em;margin-bottom:20px}.section-title p:not(.kicker),.about p,.newsletter p{color:var(--body);line-height:1.9}
.visual-section{padding-bottom:35px}.visual-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:50px}.feature-card{background:var(--soft);border:1px solid var(--line);cursor:pointer;transition:.35s}.feature-card.wide{grid-row:span 2}.feature-card:hover{transform:translateY(-5px);border-color:#cbd3e5;box-shadow:0 18px 40px rgba(35,49,78,.07)}.visual-placeholder{height:180px;padding:18px;display:flex;justify-content:space-between;color:rgba(255,255,255,.84);font:10px var(--mono);letter-spacing:.08em}.wide .visual-placeholder{height:318px}.visual-placeholder b{font-size:34px;color:rgba(255,255,255,.48)}.gradient-a{background:linear-gradient(135deg,#161d2a,#3d5797 58%,#d0d8e9)}.gradient-b{background:linear-gradient(135deg,#d8dce4,#8c96a8,#343d4b)}.gradient-c{background:linear-gradient(135deg,#202936,#697d9d,#dbe2eb)}.card-copy{padding:20px}.meta{color:var(--accent);font:10px var(--mono);letter-spacing:.06em;margin-bottom:10px}.card-copy h3,.code-card h3,.library-row h3,.topic-card h3{font-size:20px;line-height:1.35;letter-spacing:-.035em;margin-bottom:8px}.card-copy p:not(.meta),.code-card p:not(.meta),.library-row p:not(.meta),.topic-card p{color:var(--body);font-size:13px;margin-bottom:0}
.code-section{padding-bottom:70px}.code-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}.code-card{min-height:275px;padding:24px;border:1px solid var(--line);display:flex;flex-direction:column;background:#fff;transition:.3s}.code-card:hover{border-color:#c3c9d2;transform:translateY(-5px)}.code-card span{margin-top:auto;color:var(--accent);font:11px var(--mono)}.daily{background:var(--soft)}.daily-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw}.daily-list{border-top:1px solid var(--line)}.daily-row{display:grid;grid-template-columns:72px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}.daily-row time{font:11px var(--mono);color:var(--muted)}.daily-row h3{font-size:20px;line-height:1.35;letter-spacing:-.035em;margin-bottom:4px}.daily-row p:not(.meta){color:var(--body);font-size:13px;margin-bottom:0}
.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:48px}.topic-card{padding:23px;min-height:210px;display:flex;flex-direction:column;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:.3s}.topic-card:hover{background:var(--soft)}.topic-card b{color:var(--accent);font:12px var(--mono)}.topic-card h3{margin-top:35px}.topic-card span{margin-top:auto;color:var(--muted);font:10px var(--mono)}.newsletter{padding:100px 0;background:var(--code);color:#fff;text-align:center}.newsletter-inner{display:flex;align-items:center;flex-direction:column}.newsletter .kicker{color:#9aa7b8}.newsletter h2{letter-spacing:-.065em}.newsletter form{display:flex;margin:18px 0 10px;width:min(500px,100%)}.newsletter input{min-width:0;flex:1;background:#1b222d;border:1px solid #303a49;color:#fff;padding:13px}.newsletter button{border:0;background:var(--accent);color:#fff;padding:0 18px;font:11px var(--mono);cursor:pointer}.newsletter small{color:#9aa7b8;font:10px var(--mono)}.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:8vw}.about-grid div{padding-top:10px}footer{display:flex;justify-content:space-between;padding:28px 6vw;border-top:1px solid var(--line);color:var(--muted);font:10px var(--mono)}
.back-top{position:fixed;right:24px;bottom:24px;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(10px);transition:.25s;z-index:7;cursor:pointer;font-size:16px}.back-top span{font:8px var(--mono);color:var(--muted)}.back-top.visible{opacity:1;pointer-events:auto;transform:none}.back-top:hover{border-color:var(--accent);color:var(--accent)}.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s,transform .7s}.reveal.visible{opacity:1;transform:none}
.article-page{background:#fff}.article-shell{width:min(760px,88vw);margin:auto}.article-header{padding-top:76px;padding-bottom:34px;border-bottom:1px solid var(--line)}.article-header h1{font-size:clamp(46px,7vw,76px);line-height:1.05;letter-spacing:-.075em;margin-bottom:22px}.article-header .lead{font-size:17px;color:var(--body);line-height:1.9}.article-meta{display:flex;gap:16px;color:var(--muted);font:11px var(--mono);margin-bottom:22px}.article-content{padding:46px 0 100px;color:#39404a;font-size:16px;line-height:2}.article-content p{margin-bottom:24px}.article-content p:first-child::first-letter{font-size:45px;float:left;line-height:.9;margin:9px 8px 0 0;color:var(--accent)}.article-content img,.article-content video{max-width:100%;height:auto;margin:18px 0}.article-content blockquote{margin:24px 0;padding-left:16px;border-left:3px solid var(--accent);color:var(--muted)}.article-social{display:flex;gap:9px;margin-top:45px;padding-top:22px;border-top:1px solid var(--line)}.article-social button{border:1px solid var(--line);background:#fff;padding:9px 13px;cursor:pointer;font:11px var(--mono);transition:.2s}.article-social button:hover,.article-social .liked{border-color:var(--accent);color:var(--accent)}dialog{border:0;background:#fff;color:var(--ink);box-shadow:0 24px 90px rgba(35,43,57,.17);padding:40px;width:min(420px,92vw)}dialog::backdrop{background:rgba(25,31,40,.42);backdrop-filter:blur(3px)}.close{position:absolute;right:16px;top:10px;border:0;background:none;font-size:28px;color:var(--muted);cursor:pointer}dialog h2{font-size:28px;letter-spacing:-.04em;margin-bottom:6px}dialog p{color:var(--body)}label{display:block;margin:13px 0 5px;font:11px var(--mono);color:var(--body)}dialog input,dialog textarea{width:100%;border:1px solid var(--line);padding:10px}.amounts{display:flex;gap:7px}.amounts button{flex:1;padding:8px;border:1px solid var(--line);background:#fff;cursor:pointer}.amounts .active{border-color:var(--accent);color:var(--accent)}dialog .submit{width:100%;margin-top:16px;background:var(--ink);color:#fff;border:0;padding:11px;cursor:pointer}.status{color:var(--accent)}
@media(max-width:800px){nav{display:none}.header-cta{font-size:10px}.shell{width:min(90vw,620px)}.hero{display:block;min-height:auto;padding-top:90px;padding-bottom:80px}.hero h1{font-size:67px}.hero-description{font-size:14px}.terminal-card{margin-top:55px}.section{padding-top:86px;padding-bottom:86px}.section-title.inline,.daily-inner,.about-grid{display:block}.section-title.inline>p{margin-top:18px}.visual-grid,.code-grid{grid-template-columns:1fr}.wide .visual-placeholder{height:210px}.topic-grid{grid-template-columns:1fr 1fr}.topic-card{min-height:180px}.daily-list{margin-top:40px}.back-top{right:14px;bottom:14px}.article-header{padding-top:54px}.article-header h1{font-size:48px}}