:root{--bg:#101614;--ink:#edf0e8;--muted:#89908b;--line:#29332f;--lime:#c7f36b;--mono:'DM Mono',monospace;--sans:'Manrope','Noto Sans SC',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.7 var(--sans)}.shell{max-width:1240px;margin:auto;padding:0 48px}header{height:96px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:30px}.brand{color:var(--ink);font-size:27px;font-weight:800;letter-spacing:-.1em;text-decoration:none}.brand span,em{color:var(--lime);font-style:normal}.brand b{font-size:13px;letter-spacing:.06em;margin-left:10px}nav{margin-left:auto;display:flex;gap:28px}nav a,header small,.listing p,.article header p,footer{color:var(--muted);font-size:11px;text-decoration:none;letter-spacing:.08em}main{min-height:600px}.hero{min-height:570px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;align-items:center}.hero>div:first-child{padding-right:45px}.hero label,.heading label,.listing label,.article label{font:10px var(--mono);color:var(--muted);letter-spacing:.16em}.hero h1{font-size:clamp(48px,6vw,82px);line-height:1.12;letter-spacing:-.07em;margin:25px 0}.hero p{max-width:450px;color:var(--muted);margin-bottom:30px}.link{color:var(--ink);border-bottom:1px solid var(--lime);padding-bottom:7px;text-decoration:none;font-size:13px}.art{height:370px;position:relative;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,#18231f,#101614)}.art:before{content:'';position:absolute;inset:-30%;background:linear-gradient(90deg,transparent 49.5%,#c7f36b20 50%,transparent 50.5%),linear-gradient(0deg,transparent 49.5%,#c7f36b20 50%,transparent 50.5%);background-size:85px 85px;transform:rotate(18deg)}.art i{position:absolute;width:230px;height:230px;left:23%;top:22%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e6ff9b,#88b85a 31%,#456447 65%,transparent 70%);box-shadow:0 0 80px #94cc695c}.art s{position:absolute;width:90px;height:90px;left:60%;top:60%;border-radius:50%;background:#d18468;box-shadow:0 0 60px #e28d6c66}.art b,.art small{position:absolute;color:var(--muted);font:10px var(--mono);letter-spacing:.1em}.art b{top:20px;right:20px}.art small{bottom:20px;left:20px}.heading{display:flex;align-items:end;justify-content:space-between;padding:85px 0 30px}.heading h2{font-size:34px;letter-spacing:-.06em;margin:8px 0 0}.heading>small{font-family:var(--mono)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.cards article{min-height:270px;position:relative;background:#131c19;border:1px solid var(--line);padding:24px;transition:.25s}.cards article:hover{transform:translateY(-5px);border-color:#617b51}.cards article>small{font:9px var(--mono);color:var(--muted)}.cards h3{font-size:21px;line-height:1.35;margin:52px 0 12px}.cards h3 a,.listing h2 a{color:var(--ink);text-decoration:none}.cards p{color:var(--muted);font-size:13px}.arrow{position:absolute;right:22px;bottom:18px;color:var(--lime);font-size:22px;text-decoration:none}footer{display:flex;gap:20px;padding:75px 0 30px}footer i{height:1px;background:var(--line);flex:1}.listing,.article{padding:95px 0}.listing h1,.article h1{font-size:clamp(50px,7vw,86px);line-height:1;letter-spacing:-.08em;margin:25px 0}.listing>p{padding-bottom:55px;border-bottom:1px solid var(--line)}.listing article{display:grid;grid-template-columns:150px 1fr 25px;gap:25px;padding:30px 0;border-bottom:1px solid var(--line)}.listing time{font:10px var(--mono);color:var(--muted)}.listing h2{margin:0;font-size:24px}.listing article p{margin:6px 0}.listing article>a{color:var(--lime);text-decoration:none}.article .back{color:var(--muted);font:10px var(--mono);text-decoration:none}.article header{height:auto;display:block;padding:70px 0 60px;border-bottom:1px solid var(--line);max-width:850px}.article header h1{margin:22px 0}.article header p{font-size:17px;letter-spacing:0;max-width:680px}.body{max-width:700px;padding:45px 0;font-size:17px;line-height:1.95}.body h2{font-size:28px;line-height:1.3;margin-top:45px}.body a{color:var(--lime)}.body pre{overflow:auto;background:#0a0e0d;border:1px solid var(--line);padding:20px}.body blockquote{border-left:2px solid var(--lime);padding-left:20px;color:var(--muted)}@media(max-width:760px){.shell{padding:0 20px}header{height:76px}.brand b,header small{display:none}nav{gap:16px}.hero{display:block;padding:65px 0}.hero>div:first-child{padding:0 0 48px}.art{height:270px}.cards{grid-template-columns:1fr}.heading{padding-top:55px}.listing,.article{padding:60px 0}.listing article{grid-template-columns:1fr 25px}.listing time{grid-column:1/-1}.listing h2{font-size:20px}.body{font-size:16px}}


.click-bloom-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9999}.click-bloom-petal{position:absolute;left:0;top:0;width:8px;height:12px;border-radius:60% 40% 65% 35%;opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(0deg);filter:drop-shadow(0 0 4px #ffffff33);animation:click-bloom-fly var(--duration,1.45s) cubic-bezier(.2,.7,.2,1) var(--delay,0ms) forwards}@keyframes click-bloom-fly{0%{opacity:.92;transform:translate(-50%,-50%) scale(.9) rotate(0deg)}70%{opacity:.5}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.45) rotate(var(--rot))}}


.article .toc{max-width:700px;margin:28px 0 0;padding:18px 20px;border:1px solid var(--line);background:#121a17}.article .toc label{display:block;margin-bottom:10px}.article .toc nav ul{list-style:none;padding-left:0;margin:0}.article .toc nav ul ul{padding-left:16px;margin-top:6px}.article .toc li{margin:6px 0}.article .toc a{color:var(--muted);text-decoration:none;font-size:14px}.article .toc a:hover{color:var(--lime)}


.article-main{display:grid;grid-template-columns:minmax(0,700px) 260px;gap:34px;align-items:start;padding:45px 0}.article-main .body{max-width:none;padding:0}.article .toc{margin:0;position:sticky;top:110px}@media(max-width:980px){.article-main{display:block;padding:45px 0}.article .toc{position:static;margin:0 0 24px}.article-main .body{padding:0}}

/* TOC sidebar: docs-like experience with active section highlight */
.article-main{display:grid;grid-template-columns:clamp(220px,23vw,290px) minmax(0,1fr);gap:36px;align-items:start;padding:45px 0}
.article-main .body{max-width:760px;padding:0}
.article .toc{margin:0;position:sticky;top:104px;align-self:start}
.article .toc-panel{border:1px solid var(--line);background:#121a17;border-radius:10px;overflow:hidden}
.article .toc-panel>summary{cursor:pointer;list-style:none;padding:14px 16px;border-bottom:1px solid var(--line);background:#0f1613}
.article .toc-panel>summary::-webkit-details-marker{display:none}
.article .toc-panel>summary span{font:10px var(--mono);color:var(--muted);letter-spacing:.16em}
.article .toc-panel nav{max-height:calc(100vh - 220px);overflow:auto;padding:10px 8px 12px 10px;scrollbar-width:thin}
.article .toc-panel nav ul{list-style:none;padding-left:0;margin:0}
.article .toc-panel nav ul ul{padding-left:14px;margin-top:2px}
.article .toc-panel li{margin:2px 0}
.article .toc-panel a{display:block;padding:6px 10px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:13px;line-height:1.5;border-radius:6px;transition:all .18s ease}
.article .toc-panel a:hover{color:var(--ink);background:#1a241f;border-left-color:#41563f}
.article .toc-panel a.active{color:var(--lime);background:#18221d;border-left-color:var(--lime)}
@media(max-width:980px){
  .article-main{display:block;padding:45px 0}
  .article .toc{position:static;margin:0 0 24px}
  .article-main .body{max-width:none;padding:0}
  .article .toc-panel nav{max-height:320px}
}