:root { color-scheme: light; --ink:#20201e; --muted:#696862; --paper:#f4f2ed; --card:#fffdfa; --line:#dedbd2; --lime:#b8ff36; --dark:#171715; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.65; }
.site-header { background:var(--dark); color:#fff; padding:12px 24px; display:flex; justify-content:space-between; align-items:center; min-height:68px; }
.brand { color:#fff; text-decoration:none; font-weight:760; letter-spacing:-.045em; font-size:1.18rem; display:flex; align-items:center; gap:9px; }
.brand-mark { width:30px; height:30px; display:block; border-radius:7px; flex:none; }
.brand-light { color:#aaa9a4; font-weight:500; }
.site-nav { display:flex; align-items:center; gap:24px; margin-left:auto; }
.site-nav a { color:#bab9b5; text-decoration:none; font-size:.88rem; }
.site-nav a:first-child { color:#fff; border-bottom:2px solid var(--lime); padding:12px 0 10px; }
.site-nav a:hover { color:#fff; }
.utility { background:#fbfaf7; border-bottom:1px solid var(--line); padding:12px 24px; color:var(--muted); font-size:.82rem; }
.utility span { color:#5d4dd4; background:#eeeaff; border-radius:12px; padding:4px 10px; margin-right:10px; font-weight:700; font-size:.7rem; letter-spacing:.05em; }
main { max-width:980px; margin:0 auto; padding:78px 28px 92px; }
.eyebrow { color:#6855d9; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:750; }
h1 { font-size:clamp(2.5rem,6vw,5rem); line-height:1; letter-spacing:-.065em; margin:14px 0 18px; max-width:750px; }
.intro { color:var(--muted); font-size:1.08rem; max-width:700px; margin:0 0 42px; }
.meta { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:15px 0; color:var(--muted); font-size:.88rem; margin-bottom:48px; }
article { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:clamp(26px,5vw,54px); box-shadow:0 10px 30px rgba(36,31,25,.04); }
h2 { font-size:1.25rem; letter-spacing:-.025em; margin:34px 0 9px; }
h2:first-child { margin-top:0; }
p { margin:0 0 14px; }
ul { margin:7px 0 18px; padding-left:22px; }
li { margin:5px 0; }
article a { color:#5542c0; }
details { border-bottom:1px solid var(--line); padding:19px 0; }
details:first-child { padding-top:0; }
details:last-child { border-bottom:0; padding-bottom:0; }
summary { cursor:pointer; font-weight:650; font-size:1.04rem; list-style:none; display:flex; justify-content:space-between; gap:16px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; font-size:1.3rem; font-weight:400; line-height:1; }
details[open] summary::after { content:'−'; }
details p { color:#55544f; margin:12px 0 0; }
.site-footer { background:var(--dark); color:#aaa9a4; padding:42px max(28px,calc((100% - 980px)/2)); font-size:.85rem; display:flex; justify-content:space-between; gap:22px; }
.site-footer a { color:#fff; text-decoration:none; }
.footer-brand { color:#fff; font-weight:750; letter-spacing:-.03em; }
.footer-logo { color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:9px; font-size:1.05rem; line-height:1.2; font-weight:750; letter-spacing:-.03em; margin-bottom:7px; }
.footer-logo img { width:30px; height:30px; display:block; border-radius:7px; flex:none; }
.footer-logo em { color:#aaa9a4; font-style:normal; font-weight:500; }
.footer-links { display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:flex-end; max-width:440px; }
@media (max-width:700px) { .site-header { padding:12px 16px; } .site-nav { gap:11px; } .site-nav a:nth-child(2) { display:none; } .account { padding:6px 9px; } .utility { padding:11px 16px; } main { padding:58px 18px 70px; } .site-footer { padding:32px 18px; flex-direction:column; } .footer-links { justify-content:flex-start; } }