:root { --ink:#18241e; --muted:#657168; --canvas:#f5f3eb; --paper:#fffef9; --line:#deded4; --green:#1e6d50; --mint:#e1eee6; --amber:#bf7824; --shadow:0 18px 45px rgba(24,36,30,.07); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--canvas); font-family:"DM Sans",system-ui,sans-serif; } a { color:inherit; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:16px; top:16px; z-index:5; background:white; padding:10px; }
.shell { min-height:100vh; display:grid; grid-template-columns:245px minmax(0,1fr); } .sidebar { background:#19362b; color:#edf5ee; padding:30px 20px 22px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; } .brand { text-decoration:none; display:flex; align-items:center; gap:10px; font-family:Fraunces,serif; font-size:25px; letter-spacing:-.8px; } .brand-mark { font-family:"DM Sans"; background:#d8efbf; color:#1b392e; border-radius:10px; width:30px; height:30px; display:grid; place-items:center; font-size:16px; font-weight:700; }.workspace-label { color:#abc3b3; font-size:11px; font-family:"DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; margin:48px 10px 16px; } nav { display:grid; gap:4px; }.nav-item { color:#c3d5c9; padding:10px 12px; display:flex; gap:12px; align-items:center; text-decoration:none; border-radius:8px; font-size:14px; }.nav-item:hover,.nav-item.is-active { color:#fff; background:rgba(255,255,255,.12); }.nav-item span { font-size:18px; line-height:1; }.nav-item small { margin-left:auto; color:#a6c6ae; font-size:10px; }.nav-item.muted { opacity:.7; }.sidebar-footer { margin-top:auto; padding:14px 8px 0; border-top:1px solid rgba(255,255,255,.14); display:flex; align-items:center; gap:10px; }.owner-avatar { display:grid; place-items:center; width:31px; height:31px; background:#cfdbd0; color:#264235; border-radius:50%; font-size:10px; font-weight:700; }.sidebar-footer strong,.sidebar-footer span { display:block; font-size:12px; }.sidebar-footer span { margin-top:2px; color:#abc3b3; font-size:11px; }
main { max-width:1330px; width:100%; padding:54px clamp(28px,5vw,74px) 80px; margin:auto; }.topbar { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:46px; }.eyebrow { color:var(--green); font:500 11px/1.2 "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; margin:0 0 11px; }.topbar h1 { font:500 clamp(30px,3.4vw,46px)/1.08 Fraunces,serif; letter-spacing:-1.7px; margin:0; }.button { appearance:none; border:0; border-radius:8px; font:600 13px "DM Sans",sans-serif; padding:12px 16px; cursor:pointer; }.button-primary { background:var(--green); color:white; box-shadow:0 7px 15px rgba(30,109,80,.15); }.button-primary:hover { background:#18563f; }.hero { background:var(--mint); border:1px solid #d0e2d5; border-radius:15px; padding:clamp(28px,4vw,48px); display:flex; justify-content:space-between; gap:36px; overflow:hidden; position:relative; }.hero:after { content:""; position:absolute; right:-64px; bottom:-106px; width:270px; height:270px; border:40px solid rgba(255,255,255,.35); border-radius:50%; }.hero h2,.section h2, dialog h2 { font:500 clamp(25px,2.6vw,36px)/1.13 Fraunces,serif; letter-spacing:-1px; margin:0; }.hero > div:first-child { max-width:670px; z-index:1; }.hero > div:first-child > p:last-child { max-width:590px; color:#476156; line-height:1.55; font-size:16px; margin:16px 0 0; }.hero-note { align-self:flex-end; display:flex; align-items:flex-start; gap:10px; background:rgba(255,255,255,.67); border:1px solid rgba(61,106,79,.17); padding:14px; border-radius:10px; width:240px; z-index:1; }.hero-note strong { font-size:13px; }.hero-note p { font-size:12px; color:#5a6c5f; line-height:1.35; margin:4px 0 0; }.dot { width:8px; height:8px; margin-top:5px; background:#4d9a64; border-radius:50%; flex:0 0 auto; }.metrics { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); margin:28px 0 72px; border-radius:12px; background:var(--paper); }.metrics article { padding:21px 26px; border-right:1px solid var(--line); }.metrics article:last-child { border:0; }.metrics span { color:var(--muted); font-size:12px; }.metrics strong { font:500 32px/1.1 Fraunces,serif; display:block; margin:7px 0 2px; }.metrics p { color:#879087; margin:0; font-size:12px; }.section { margin-top:50px; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }.section h2 { font-size:28px; }.text-button { border:0; background:transparent; color:var(--green); font:600 13px "DM Sans"; cursor:pointer; padding:7px 0; }.text-button span { padding-left:4px; }.site-card { background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:20px; display:grid; grid-template-columns:48px minmax(260px,1fr) minmax(190px,.55fr) 28px; gap:16px; align-items:center; box-shadow:var(--shadow); }.site-monogram { display:grid; place-items:center; width:47px; height:47px; border-radius:11px; background:#e5ecdf; color:#34513c; font:600 13px "DM Mono"; }.site-title { display:flex; align-items:center; gap:10px; }.site-title h3 { margin:0; font-size:16px; }.status { color:#397451; background:#e5f3e8; font-size:11px; padding:4px 7px; border-radius:20px; white-space:nowrap; }.status i { width:6px; height:6px; margin:0 4px 1px 0; display:inline-block; border-radius:50%; background:#43915b; }.site-main > p { margin:4px 0 10px; color:var(--muted); font-size:13px; }.site-links { display:flex; gap:15px; }.site-links a { color:var(--green); font-size:12px; text-decoration:none; }.site-links a:hover { text-decoration:underline; }.site-meta { border-left:1px solid var(--line); padding-left:20px; }.site-meta span,.site-meta strong { display:block; }.site-meta span { color:var(--muted); text-transform:uppercase; font:10px "DM Mono"; letter-spacing:.04em; }.site-meta strong { font-size:12px; margin-top:5px; line-height:1.25; }.more-button { border:0; color:var(--muted); background:transparent; font-size:15px; cursor:pointer; }.split { display:grid; grid-template-columns:1.25fr .75fr; gap:22px; }.workflow-card,.next-card { border-radius:13px; padding:30px; }.workflow-card { background:#f1e8d8; border:1px solid #e4d6bd; }.workflow-card h2,.next-card h2 { font-size:28px; }.workflow-card ol { list-style:none; padding:0; margin:25px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.workflow-card li span { display:grid; place-items:center; background:#fffaf0; border-radius:50%; width:28px; height:28px; font:11px "DM Mono"; color:#9d6824; }.workflow-card li strong { display:block; margin:10px 0 4px; font-size:13px; }.workflow-card li p { margin:0; color:#796d5e; font-size:12px; line-height:1.4; }.next-card { background:#19362b; color:#eff5ef; }.next-card .eyebrow { color:#b8d7bd; }.next-card p:not(.eyebrow) { color:#bfd0c2; font-size:13px; line-height:1.5; }.next-list { display:grid; grid-template-columns:31px 1fr; gap:10px 8px; border-top:1px solid rgba(255,255,255,.15); padding-top:18px; margin-top:20px; }.next-list span { color:#c1de9f; font:11px "DM Mono"; }.next-list p { margin:0; }.next-list span:nth-of-type(2),.next-list p:nth-of-type(2) { opacity:.65; }.next-list span:nth-of-type(3),.next-list p:nth-of-type(3) { opacity:.38; }
dialog { max-width:455px; border:0; border-radius:14px; box-shadow:0 20px 80px rgba(0,0,0,.26); padding:0; color:var(--ink); }.dialog-close { border:0; background:transparent; font-size:24px; position:absolute; top:14px; right:16px; cursor:pointer; }.dialog-close+ .eyebrow { padding-top:0; } dialog form { padding:32px; } dialog h2 { font-size:29px; } dialog p:not(.eyebrow) { color:var(--muted); font-size:14px; line-height:1.55; margin:14px 0 25px; } dialog::backdrop { background:rgba(21,34,27,.38); }
@media (max-width:850px) { .shell { grid-template-columns:1fr; }.sidebar { height:auto; position:static; padding:18px 24px; display:block; }.workspace-label,.sidebar-footer { display:none; } nav { display:flex; overflow:auto; margin-top:16px; }.nav-item { white-space:nowrap; }.topbar { margin-bottom:30px; }.site-card { grid-template-columns:48px 1fr 28px; }.site-meta { display:none; }.split { grid-template-columns:1fr; } }
@media (max-width:580px) { main { padding:32px 18px 55px; }.topbar { display:block; }.topbar .button { margin-top:19px; }.hero { padding:25px; display:block; }.hero-note { margin-top:24px; width:100%; }.metrics { grid-template-columns:1fr; margin-bottom:48px; }.metrics article { border-right:0; border-bottom:1px solid var(--line); }.metrics article:last-child { border-bottom:0; }.site-card { padding:16px; grid-template-columns:43px 1fr 18px; gap:11px; }.site-monogram { width:42px; height:42px; }.site-title { display:block; }.status { display:inline-block; margin-top:5px; }.site-links { display:block; }.site-links a { display:block; margin-top:5px; }.workflow-card ol { grid-template-columns:1fr; gap:16px; }.workflow-card li { display:grid; grid-template-columns:28px 1fr; column-gap:10px; }.workflow-card li span { grid-row:span 2; }.workflow-card li strong { margin:0 0 3px; }.workflow-card li p { grid-column:2; }.section-heading { align-items:center; } }