@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Manrope:wght@400;500;600;700&display=swap');

:root { --ink:#1c2927; --paper:#f7f4ed; --sand:#e9dfca; --moss:#526956; --orange:#c85534; --line:#d8d2c6; --muted:#6e746d; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; }
a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { cursor:pointer; }
.site-header { height:82px; display:flex; align-items:center; justify-content:space-between; max-width:1240px; padding:0 30px; margin:auto; border-bottom:1px solid var(--line); }
.wordmark { font-family:Fraunces,serif; font-size:24px; font-weight:600; letter-spacing:-1.5px; }.wordmark span { color:var(--orange); }.site-header nav { display:flex; gap:30px; font-size:13px; }.site-header nav a { color:var(--muted); }.site-header nav a.active { color:var(--ink); font-weight:700; }
.button { border:1px solid var(--ink); padding:14px 19px; background:var(--ink); color:#fff; border-radius:2px; font-size:13px; font-weight:700; transition:transform .2s, background .2s; }.button:hover { transform:translateY(-2px); background:#33403e; }.button span { margin-left:14px; font-size:17px; }.button-small { padding:10px 15px; }.button-light { background:var(--paper); color:var(--ink); border-color:var(--paper); }.button-outline { background:transparent; color:var(--ink); }.button-outline:hover { background:var(--ink); color:#fff; }
.hero { max-width:870px; margin:0 auto; text-align:center; padding:118px 25px 95px; }.eyebrow { color:var(--orange); font-size:10px; font-family:"DM Mono",monospace; font-weight:500; letter-spacing:1.6px; margin:0 0 18px; }.hero h1,.library-intro h1,.pricing-intro h1 { font:600 clamp(48px,7vw,84px)/.99 Fraunces,serif; letter-spacing:-4px; margin:0; }.hero-copy { max-width:590px; margin:30px auto 27px; color:#56605b; font-size:17px; line-height:1.7; }.hero-actions { display:flex; gap:24px; align-items:center; justify-content:center; }.text-link { border-bottom:1px solid var(--ink); padding-bottom:3px; font-size:13px; font-weight:700; }.microcopy { margin:17px 0 0; color:var(--muted); font-size:11px; }
.workspace-preview { display:grid; grid-template-columns:215px 1fr; max-width:1120px; min-height:505px; margin:0 auto 145px; background:#fdfcf9; border:1px solid var(--line); box-shadow:0 26px 60px #2e33250e; }.workspace-preview aside { background:#eeece5; padding:25px 18px; display:flex; flex-direction:column; }.preview-mark { background:var(--ink); color:#fff; width:26px; height:26px; display:grid; place-items:center; font:500 15px Fraunces,serif; margin-bottom:25px; }.preview-title { font-size:11px; color:var(--muted); margin:0 0 12px; }.workspace-preview aside a { padding:9px 10px; font-size:12px; border-radius:2px; margin-bottom:2px; }.workspace-preview aside a.selected { background:#d9ddd4; font-weight:700; }.workspace-preview aside a span { float:right; color:var(--muted); }.sidebar-bottom { border-top:1px solid #ddd9d0; margin-top:auto; padding-top:15px; font-size:11px; display:flex; gap:8px; align-items:center; }.avatar { background:#b5c4c6; width:23px; height:23px; border-radius:50%; display:grid; place-items:center; font-size:7px; }
.preview-content { padding:24px 34px; }.preview-topbar { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }.online-dot:before { content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#6b9574; }.preview-heading { margin-top:60px; display:flex; justify-content:space-between; align-items:start; }.preview-heading h2 { font:500 33px Fraunces,serif; letter-spacing:-1.5px; margin:0; }.round-button { width:32px; height:32px; border-radius:50%; border:0; background:var(--ink); color:#fff; font-size:21px; }.note-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:35px; }.note { min-height:154px; padding:18px; display:flex; flex-direction:column; }.note-white { grid-column:span 2; min-height:124px; border:1px solid #e5e2da; }.note-sand { background:#f0e8d7; }.note-blue { background:#d9e8e5; }.note-label,.library-card p { color:#697069; font:9px "DM Mono",monospace; letter-spacing:1px; margin:0 0 13px; }.note h3 { font:500 18px/1.2 Fraunces,serif; letter-spacing:-.6px; margin:0; }.note-body { color:var(--muted); font-size:11px; margin:8px 0 0; }.note footer { display:flex; justify-content:space-between; margin-top:auto; color:#737872; font-size:9px; }
.principles { max-width:1120px; margin:0 auto 145px; padding:0 25px; }.principle-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.principle-grid article { padding:25px 28px 0 0; }.principle-grid article+article { padding-left:28px; border-left:1px solid var(--line); }.principle-grid span { font:10px "DM Mono",monospace; color:var(--orange); }.principle-grid h2 { font:500 29px Fraunces,serif; margin:55px 0 12px; letter-spacing:-1px; }.principle-grid p { color:#626962; font-size:13px; line-height:1.7; max-width:260px; }.closing-callout { text-align:center; padding:100px 25px; background:var(--moss); color:#f5f2e9; }.closing-callout h2 { font:500 clamp(37px,5vw,59px) Fraunces,serif; letter-spacing:-2.5px; margin:0 0 30px; }.closing-callout .eyebrow { color:#e1c9a4; } footer { max-width:1240px; margin:auto; padding:25px 30px; display:flex; justify-content:space-between; color:var(--muted); font:10px "DM Mono",monospace; }
.library-page,.pricing-page { max-width:1120px; margin:auto; padding:100px 25px 125px; }.library-intro,.pricing-intro { max-width:680px; }.library-intro>p:last-child,.pricing-intro>p:last-of-type { color:var(--muted); margin:22px 0 0; line-height:1.7; }.library-tools { margin-top:73px; padding:16px 0; border-block:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; }.library-tools label { color:var(--muted); font:11px "DM Mono",monospace; }.library-tools input { display:block; margin-top:6px; width:220px; padding:8px 0; border:0; border-bottom:1px solid var(--ink); background:transparent; outline:0; font-size:12px; }.filter-group { display:flex; gap:7px; flex-wrap:wrap; }.filter,.billing-toggle button { border:0; background:transparent; padding:8px 11px; color:var(--muted); font-size:11px; }.filter.active,.billing-toggle button.active { background:var(--ink); color:#fff; border-radius:2px; }.library-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:35px; }.library-card { min-height:240px; padding:22px; display:flex; flex-direction:column; transition:transform .2s; }.library-card:hover { transform:translateY(-4px); }.library-card h2 { font:500 25px/1.12 Fraunces,serif; letter-spacing:-1px; margin:0; max-width:250px; }.library-card span { margin-top:auto; font-size:10px; color:var(--muted); }.card-sand { background:#e8ddc6; }.card-ink { background:#263a38; color:#f4f0e8; }.card-ink p,.card-ink span { color:#c0cec7; }.card-moss { background:#a7b8a1; }.card-paper { border:1px solid var(--line); }.card-blue { background:#c8dcdc; }.card-red { background:#d2795b; }.empty-state { text-align:center; color:var(--muted); padding:60px; }.pricing-intro { text-align:center; margin:auto; }.billing-toggle { display:inline-flex; margin-top:34px; padding:4px; background:#e7e2d7; border-radius:3px; }.billing-toggle span { color:#e3c6a1; }.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:70px; }.price-card { padding:28px; min-height:400px; border:1px solid var(--line); display:flex; flex-direction:column; }.price-card.featured { background:var(--ink); color:#fff; border-color:var(--ink); }.plan-name { margin:0; font:11px "DM Mono",monospace; color:var(--muted); }.featured .plan-name { color:#b7c5bb; }.plan-name span { color:#e6bd8a; margin-left:8px; }.price-card h2 { font:500 43px Fraunces,serif; letter-spacing:-2px; margin:35px 0 8px; }.price-card h2 small { font:11px Manrope,sans-serif; letter-spacing:0; color:var(--muted); }.price-card>p:not(.plan-name) { font-size:12px; line-height:1.6; color:var(--muted); }.featured>p:not(.plan-name) { color:#c6d0c8; }.price-card ul { list-style:none; margin:23px 0 auto; padding:0; font-size:12px; line-height:2.4; }.price-card li:before { content:"✓"; color:var(--orange); margin-right:8px; }.featured .button { background:#f5f2e9; color:var(--ink); border-color:#f5f2e9; }
dialog { width:min(430px,calc(100% - 32px)); border:0; padding:38px; background:var(--paper); color:var(--ink); box-shadow:0 25px 80px #0005; }.dialog-close { position:absolute; top:11px; right:15px; border:0; background:transparent; font-size:24px; }.dialog-close+h2,dialog h2 { font:500 37px/1 Fraunces,serif; letter-spacing:-1.5px; margin:0; }dialog>p:not(.eyebrow) { color:var(--muted); font-size:13px; line-height:1.6; margin:16px 0 25px; }dialog::backdrop { background:#17242199; }
@media (max-width:700px) { .site-header { height:68px; padding:0 18px; }.site-header nav { display:none; }.hero { padding:82px 22px 70px; }.hero h1,.library-intro h1,.pricing-intro h1 { letter-spacing:-2.5px; }.hero-actions { flex-direction:column; gap:18px; }.workspace-preview { margin:0 16px 90px; grid-template-columns:1fr; }.workspace-preview aside { display:none; }.preview-content { padding:19px; }.preview-heading { margin-top:35px; }.note-grid { grid-template-columns:1fr; }.note-white { grid-column:auto; }.principles { margin-bottom:90px; }.principle-grid { grid-template-columns:1fr; }.principle-grid article { padding:25px 0; border-bottom:1px solid var(--line); }.principle-grid article+article { padding-left:0; border-left:0; }.principle-grid h2 { margin-top:28px; }.library-page,.pricing-page { padding:70px 20px 85px; }.library-tools { align-items:flex-start; flex-direction:column; }.library-grid,.pricing-grid { grid-template-columns:1fr; }.pricing-grid { margin-top:48px; }.price-card { min-height:350px; } footer { padding:20px; } }