*{box-sizing:border-box}body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif;background:#0b0d12;color:#e6e8ee}
a{color:#7dd3fc;text-decoration:none}a:hover{text-decoration:underline}.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid #1f2430;background:#0e1118}header .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-weight:800;font-size:20px;color:#fff}.logo span{color:#34d399}nav a{margin-left:18px;color:#aab}
.hero{padding:56px 0 28px}.hero h1{font-size:42px;line-height:1.1;margin:0 0 12px}.hero p{color:#9aa3b2;font-size:18px;max-width:640px}
.badge{display:inline-block;background:#132a22;color:#34d399;border:1px solid #1f4d3c;border-radius:99px;padding:2px 12px;font-size:13px;margin-bottom:14px}
#q{width:100%;padding:14px 16px;border-radius:12px;border:1px solid #2a3140;background:#121620;color:#fff;font-size:16px;margin:18px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.card{background:#121620;border:1px solid #1f2430;border-radius:14px;padding:18px;display:flex;flex-direction:column}
.card:hover{border-color:#34d399}.card h3{margin:0 0 8px;font-size:17px;line-height:1.35}.card h3 a{color:#fff}.card p{color:#9aa3b2;margin:0 0 12px;font-size:14.5px;flex:1}
.tags a{display:inline-block;font-size:12px;padding:2px 9px;border-radius:99px;margin:0 6px 6px 0;background:#1a2030;color:#c7d2fe}.tags a.tool{background:#10261f;color:#6ee7b7}
.meta{font-size:12.5px;color:#6b7385}.callout{background:linear-gradient(135deg,#0f2a22,#122036);border:1px solid #1f4d3c;border-radius:16px;padding:22px;margin:28px 0}
.callout h3{margin:0 0 6px}.btn{display:inline-block;background:#34d399;color:#06281c;font-weight:700;padding:9px 16px;border-radius:10px;margin-top:10px}
.sponsor{border:1px dashed #3a4256;border-radius:14px;padding:16px;color:#9aa3b2;font-size:14px;margin:20px 0}
.howto{background:#0e1118;border:1px solid #2a3140;border-radius:12px;padding:16px;white-space:pre-wrap;font-family:ui-monospace,monospace;font-size:14px}
.layout{display:grid;grid-template-columns:1fr 300px;gap:28px;padding:30px 0}@media(max-width:800px){.layout{grid-template-columns:1fr}.hero h1{font-size:32px}}
article h1{font-size:38px;line-height:1.15;margin:6px 0 14px}.lede{font-size:19px;color:#c3c9d4;line-height:1.55}
.prose h2{font-size:22px;margin:38px 0 10px;padding-top:8px;border-top:1px solid #1f2430;color:#fff}.prose p{color:#cfd5df;font-size:16.5px;line-height:1.75;margin:0 0 14px}
.prose ul,.prose ol{color:#cfd5df;font-size:16px;line-height:1.7;padding-left:22px}.prose li{margin:4px 0}.prose ol li::marker{color:#34d399;font-weight:700}
.prose code{background:#1a2030;padding:1px 6px;border-radius:6px;font-size:14px}pre.code{background:#0e1118;border:1px solid #2a3140;border-radius:12px;padding:16px;overflow-x:auto;font:13.5px/1.6 ui-monospace,monospace;color:#e2e8f0;position:relative}
.copy{position:absolute;top:8px;right:8px;background:#1f2937;color:#cbd5e1;border:1px solid #334155;border-radius:8px;font-size:12px;padding:3px 9px;cursor:pointer}
blockquote{margin:26px 0;padding:14px 20px;border-left:3px solid #34d399;background:#0f1a17;border-radius:0 12px 12px 0;font-size:17px;color:#e2e8f0;font-style:italic}blockquote cite{display:block;font-style:normal;font-size:13px;color:#6ee7b7;margin-top:6px}
.srcbox{margin-top:30px;padding:14px 16px;border:1px solid #1f2430;border-radius:12px;font-size:14px;color:#9aa3b2}.intro{color:#c3c9d4;font-size:17px;max-width:760px}
.spcard{display:block;color:#e6e8ee;text-decoration:none}.spcard:hover{text-decoration:none}.spcard:hover b{color:#34d399}.sptag{display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6b7385;margin-bottom:6px}
.sprow{display:flex;align-items:center;gap:10px}.sprow img{border-radius:8px;background:#fff}.spdesc{display:block;margin-top:6px;font-size:13.5px;color:#9aa3b2}.spcta{margin-top:10px;font-size:13px}
.spcard.big{border:1px solid #2a3140;border-radius:14px;padding:18px;background:#121620}.spcard.big b{font-size:18px}
.spstrip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:14px 0 22px;padding:8px 0;border-top:1px solid #1a1f2b;border-bottom:1px solid #1a1f2b;font-size:13px}
.splabel{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5b6475;margin-right:4px}.spchip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 3px;border:1px solid #232a38;border-radius:99px;color:#aab3c2;background:#10141c}
.spchip:hover,.sprowlink:hover{color:#fff;text-decoration:none;border-color:#34d399}.spchip img,.sprowlink img{border-radius:5px;background:#fff}.spadv{flex:none;font-size:12px;color:#6b7385;white-space:nowrap}.splabel{flex:none}
.spstrip{flex-wrap:nowrap}.spmarq{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 28px calc(100% - 28px),#0000);mask-image:linear-gradient(90deg,#0000,#000 28px calc(100% - 28px),#0000)}
.sptrack{display:flex;width:max-content}.spset[aria-hidden]{display:none}.spmarq.moving .spset[aria-hidden]{display:flex}.spmarq.moving .sptrack{animation:spmarq 50s linear infinite}.spmarq:not(.moving){-webkit-mask-image:none;mask-image:none}.spset{display:flex;gap:8px;padding-right:8px}.spchip{flex:none;white-space:nowrap}
.spmarq:hover .sptrack,.spmarq:focus-within .sptrack{animation-play-state:paused}@keyframes spmarq{to{transform:translateX(-50%)}}
.spchip.ph{border-style:dashed;color:#6b7385}.phdot{width:20px;height:20px;border-radius:5px;border:1px dashed #3a4256;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.sprowlink{transition:opacity .6s}
@media (prefers-reduced-motion:reduce){.spstrip{flex-wrap:wrap}.spmarq{-webkit-mask-image:none;mask-image:none}.sptrack{animation:none;width:auto}.spset{flex-wrap:wrap}.spset[aria-hidden]{display:none}}
.spside{border:1px solid #1f2430;border-radius:12px;padding:12px 14px;font-size:14px}.sprowlink{display:flex;align-items:center;gap:8px;color:#aab3c2;padding:4px 0}.spside .spadv{display:block;margin:6px 0 0;font-size:12px}
footer{border-top:1px solid #1f2430;margin-top:50px;padding:28px 0;color:#6b7385;font-size:14px}.chips{margin:8px 0 4px}h2{margin-top:36px}