:root { color-scheme: light dark; --canvas:#f4f1eb; --surface:rgba(255,255,255,.8); --ink:#20211f; --muted:#666962; --line:rgba(32,33,31,.14); --accent:#6154d9; --warm:#ef8354; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { background:var(--canvas); }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 82% 8%,rgba(97,84,217,.2),transparent 28rem),radial-gradient(circle at 8% 34%,rgba(239,131,84,.14),transparent 24rem),var(--canvas); line-height:1.65; }
a { color:var(--accent); text-underline-offset:.2em; }
a:focus-visible { outline:3px solid var(--warm); outline-offset:4px; border-radius:.25rem; }
.shell { width:min(72rem,calc(100% - 2rem)); margin:0 auto; padding:1.25rem 0 4rem; }
.site-header,.site-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 0 2.6rem; }
.brand { display:inline-flex; align-items:center; gap:.7rem; color:var(--ink); font-weight:760; text-decoration:none; }
.brand-mark { display:grid; width:2.35rem; height:2.35rem; place-items:center; border-radius:.85rem; color:#fff; background:linear-gradient(145deg,var(--accent),#8c7df2); }
.site-nav { display:flex; flex-wrap:wrap; gap:.35rem; }
.site-nav a { padding:.45rem .7rem; border-radius:999px; color:var(--muted); text-decoration:none; }
.site-nav a[aria-current="page"] { color:var(--ink); background:var(--surface); }
.hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(17rem,.6fr); gap:clamp(2rem,7vw,6rem); align-items:center; min-height:30rem; padding:3rem 0 5rem; }
.eyebrow { margin:0 0 .8rem; color:var(--accent); font-size:.78rem; font-weight:760; letter-spacing:.13em; text-transform:uppercase; }
h1,h2 { line-height:1.08; letter-spacing:-.04em; }
h1 { max-width:14ch; margin:0; font-size:clamp(3rem,8vw,6.5rem); }
.lede { max-width:43rem; color:var(--muted); font-size:clamp(1.08rem,2.1vw,1.38rem); }
.primary-link { display:inline-flex; margin-top:1rem; padding:.7rem 1.05rem; border-radius:.9rem; color:#fff; font-weight:700; text-decoration:none; background:var(--accent); }
.habit-orbit { display:grid; width:min(19rem,70vw); aspect-ratio:1; place-items:center; justify-self:center; border:1.25rem solid rgba(97,84,217,.18); border-top-color:var(--accent); border-right-color:var(--warm); border-radius:50%; transform:rotate(16deg); }
.habit-orbit span { font-size:3rem; font-weight:820; transform:rotate(-16deg); }
.content { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1rem; }
.card { grid-column:span 6; padding:clamp(1.35rem,3vw,2rem); border:1px solid var(--line); border-radius:1.35rem; background:var(--surface); }
.card.wide { grid-column:1/-1; }
.card h2 { margin-top:0; font-size:clamp(1.45rem,3vw,2rem); }
.card li + li { margin-top:.55rem; }
.page-heading { padding:3rem 0 3.5rem; }
.site-footer { margin-top:3rem; padding:1.2rem 0; border-top:1px solid var(--line); color:var(--muted); font-size:.88rem; }
.site-footer p { margin:0; }
@media (max-width:760px) { .site-header,.site-footer { align-items:flex-start; flex-direction:column; } .hero { grid-template-columns:1fr; min-height:0; padding-top:1.5rem; } .habit-orbit { justify-self:start; } .card { grid-column:1/-1; } }
@media (prefers-color-scheme:dark) { :root { --canvas:#171816; --surface:rgba(38,39,36,.86); --ink:#f3f1ec; --muted:#b9bbb4; --line:rgba(243,241,236,.14); --accent:#a99cf8; --warm:#ff9a70; } }