:root { color-scheme: dark; --ink:#f8f5ff; --muted:#bdb5cf; --purple:#9b50ff; --gold:#f5be35; --green:#5ad2a0; --panel:#110c1c; --line:#342642; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 10% 4%,rgba(155,80,255,.22),transparent 31rem),radial-gradient(circle at 92% 82%,rgba(245,190,53,.08),transparent 28rem),#06040b; color:var(--ink); font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
[hidden] { display:none!important; }
.shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:30px 0 70px; }
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:44px; padding:12px 0; background:rgba(6,4,11,.92); backdrop-filter:blur(18px); }
.home-link { color:var(--ink); font-size:14px; font-weight:850; text-decoration:none; }
.home-link:hover,.home-link:focus-visible { color:var(--gold); outline:none; }
.section-nav { display:flex; gap:7px; overflow-x:auto; }
.section-nav a { flex:0 0 auto; padding:9px 12px; border-radius:9px; color:var(--muted); font-size:13px; font-weight:800; text-decoration:none; }
.section-nav a:hover,.section-nav a:focus-visible { color:var(--ink); outline:1px solid var(--purple); }
.section-nav a[aria-current="page"] { background:var(--purple); color:#fff; }
.eyebrow { color:var(--gold); font-size:12px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
h1 { max-width:920px; margin:10px 0 16px; font-size:clamp(48px,8vw,82px); line-height:.94; letter-spacing:-.06em; }
.lead { max-width:760px; margin:0 0 38px; color:var(--muted); font-size:clamp(18px,2vw,21px); }
.updated { margin:-21px 0 38px; color:var(--green); font-size:13px; font-weight:800; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:46px 0 18px; padding-top:28px; border-top:1px solid var(--line); }
.section-title h2 { margin:5px 0 0; font-size:clamp(28px,4vw,42px); line-height:1; }
.section-title span { color:var(--muted); font-size:13px; }
.utility-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.utility-card,.area-card { display:block; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(24,16,42,.98),rgba(10,7,18,.98)); text-decoration:none; transition:transform .18s ease,border-color .18s ease; }
.utility-card { min-height:210px; padding:24px; }
.utility-card:hover,.utility-card:focus-visible,.area-card:hover,.area-card:focus-visible { transform:translateY(-3px); border-color:var(--purple); outline:none; }
.utility-card strong { display:block; margin-top:38px; font-size:27px; line-height:1.05; }
.utility-card p { margin:9px 0 0; color:var(--muted); }
.utility-card.next { border-color:rgba(245,190,53,.58); }
.area-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.area-card { min-height:128px; padding:20px; }
.area-card-heading { display:flex; align-items:flex-start; gap:11px; }
.area-card b { display:block; font-size:18px; line-height:1.15; }
.area-card .icon { flex:0 0 auto; font-size:24px; line-height:1; }
.card-updated { display:block; margin-top:23px; color:var(--muted); font-size:12px; font-weight:800; }
.card-updated i { margin-right:5px; color:var(--gold); font-style:normal; }
.card-note-count { display:inline-flex; margin-top:9px; padding:4px 8px; border-radius:999px; background:rgba(245,190,53,.12); color:var(--gold); font-size:10px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.kw-note-intro { max-width:780px; margin:-4px 0 18px; color:var(--muted); }
.kw-note-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.kw-note { padding:22px; border:1px solid rgba(245,190,53,.3); border-radius:17px; background:linear-gradient(145deg,rgba(38,28,12,.55),rgba(17,12,28,.95)); }
.kw-note-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.kw-note h3 { margin:0; font-size:21px; line-height:1.15; }
.note-status { flex:0 0 auto; color:var(--gold); font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.note-status.partial { color:var(--green); }
.note-label { display:block; margin:14px 0 4px; color:var(--gold); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.note-label.done { color:var(--green); }
.kw-note ul { margin:6px 0 0; padding-left:20px; color:var(--muted); }
.kw-note li { margin:7px 0; }
.kw-note .completed-list li { text-decoration:line-through; opacity:.78; }
.area-card.current { border-color:rgba(90,210,160,.66); background:linear-gradient(145deg,rgba(14,45,37,.75),rgba(10,7,18,.98)); }
.area-card.current b::after { content:"Current priority"; display:block; margin-top:8px; color:var(--green); font-size:10px; letter-spacing:.11em; text-transform:uppercase; }
.page-card { margin-bottom:18px; padding:26px; border:1px solid var(--line); border-radius:19px; background:rgba(17,12,28,.9); }
.page-card h2,.page-card h3 { margin:0 0 8px; }
.page-card p { margin:0; color:var(--muted); }
.page-card ul { margin:10px 0 0; padding-left:20px; color:var(--muted); }
.page-card li { margin:7px 0; }
.status-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.status-strip div { padding:18px; border-top:3px solid var(--line); background:rgba(17,12,28,.72); }
.status-strip strong { display:block; font-size:25px; }
.status-strip span { color:var(--muted); font-size:13px; }
.status-strip .done { border-color:var(--green); }
.status-strip .open { border-color:var(--gold); }
.work-list { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.work-list li { display:grid; grid-template-columns:52px 1fr; gap:16px; padding:22px; border:1px solid var(--line); border-radius:16px; background:rgba(17,12,28,.9); }
.work-list .number { display:grid; width:44px; height:44px; place-items:center; border-radius:50%; background:rgba(155,80,255,.16); color:var(--purple); font-size:20px; font-weight:900; }
.work-list h2 { margin:0 0 6px; font-size:clamp(22px,3vw,29px); line-height:1.08; }
.work-list p { margin:0; color:var(--muted); }
.work-list a { color:var(--ink); font-weight:800; }
.work-list a:hover,.work-list a:focus-visible { color:var(--gold); outline:none; }
.done-note { margin-top:16px; padding:17px 20px; border-left:3px solid var(--green); background:rgba(90,210,160,.07); color:var(--muted); }
.done-note b { color:var(--green); }
.standard-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.standard-grid .page-card { margin:0; }
.standard-grid h3 { font-size:19px; }
.template,.table-shell { overflow-x:auto; margin-top:18px; border:1px solid var(--line); border-radius:16px; background:#151515; }
.template pre { margin:0; padding:22px; color:#f3eff7; font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre; }
.standard-table { width:100%; min-width:760px; border-collapse:collapse; }
.standard-table th,.standard-table td { padding:14px 15px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.standard-table th { color:var(--gold); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.standard-table td { color:var(--muted); }
.standard-table td:first-child { color:var(--ink); font-weight:800; }
.source-link { display:inline-flex; margin-top:16px; color:var(--gold); font-weight:850; text-decoration:none; }
.source-link:hover,.source-link:focus-visible { color:var(--ink); outline:none; }
.empty-state { max-width:760px; margin-bottom:18px; padding:30px; border:1px solid var(--line); border-radius:20px; background:rgba(17,12,28,.8); }
.empty-state h2 { margin:8px 0; font-size:34px; }
.empty-state p { margin:0; color:var(--muted); }
footer { margin-top:50px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
@media (max-width:850px) { .utility-grid,.area-grid,.standard-grid,.kw-note-grid { grid-template-columns:1fr 1fr; } .topbar { align-items:flex-start; flex-direction:column; margin-bottom:32px; } .section-nav { width:100%; } }
@media (max-width:580px) { .shell { width:min(100% - 28px,1180px); padding-top:16px; } .utility-grid,.area-grid,.standard-grid,.status-strip,.kw-note-grid { grid-template-columns:1fr; } .section-title { display:block; } .section-title span { display:block; margin-top:7px; } .work-list li { grid-template-columns:42px 1fr; padding:18px; } .work-list .number { width:38px; height:38px; } }