/* ════════════════════════════════════════════════════════════════════════════ Dusty Desk — shared stylesheet for the document pages (privacy.html · terms.html · refunds.html · support.html) index.html stays deliberately self-contained (inline CSS/SVG/JS, CSP-safe). These four document pages share this file instead so the legal pack has ONE place to edit. The token block below is a verbatim mirror of index.html's four token blocks — if a token changes there, change it here too. ════════════════════════════════════════════════════════════════════════════ */ :root{ --paper:#eae6de; --panel:#f2efe9; --ink:#221f19; --dim:#6c655a; --line:#d3ccbe; --wood:#9a6a3c; --web:#a49c8f; --dust:#c8882a; --glow:#e0a02a; --dust-soft:rgba(200,136,42,.16); --ok:#3f8f5e; --idle:#98918450; --shadow:0 1px 0 rgba(0,0,0,.03), 0 18px 40px -24px rgba(40,30,10,.35); } @media (prefers-color-scheme: dark){ :root{ --paper:#15120d; --panel:#1c1811; --ink:#efe9dd; --dim:#a99f8c; --line:#322c21; --wood:#a06b3a; --web:#544b3b; --dust:#f0b64e; --glow:#ffcd6b; --dust-soft:rgba(240,182,78,.14); --ok:#5cc98a; --idle:#6b6250aa; --shadow:0 1px 0 rgba(0,0,0,.2), 0 24px 60px -30px rgba(0,0,0,.8); } } :root[data-theme="light"]{ --paper:#eae6de; --panel:#f2efe9; --ink:#221f19; --dim:#6c655a; --line:#d3ccbe; --wood:#9a6a3c; --web:#a49c8f; --dust:#c8882a; --glow:#e0a02a; --dust-soft:rgba(200,136,42,.16); --ok:#3f8f5e; --idle:#98918450; --shadow:0 1px 0 rgba(0,0,0,.03), 0 18px 40px -24px rgba(40,30,10,.35); } :root[data-theme="dark"]{ --paper:#15120d; --panel:#1c1811; --ink:#efe9dd; --dim:#a99f8c; --line:#322c21; --wood:#a06b3a; --web:#544b3b; --dust:#f0b64e; --glow:#ffcd6b; --dust-soft:rgba(240,182,78,.14); --ok:#5cc98a; --idle:#6b6250aa; --shadow:0 1px 0 rgba(0,0,0,.2), 0 24px 60px -30px rgba(0,0,0,.8); } /* ── base ─────────────────────────────────────────────────────────────────── */ *{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:78px; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.6 -apple-system,"SF Pro Text",system-ui,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; } .wrap{ max-width:1080px; margin:0 auto; padding:0 22px; } .mono{ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; } .display{ font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; } h1,h2,h3{ font-weight:840; letter-spacing:-.02em; line-height:1.06; text-wrap:balance; margin:0; } a{ color:inherit; } :focus-visible{ outline:2.5px solid var(--dust); outline-offset:3px; border-radius:6px; } .eyebrow{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--dust); } .skip{ position:absolute; left:-9999px; top:0; z-index:60; background:var(--panel); color:var(--ink); border:1px solid var(--dust); border-radius:0 0 10px 0; padding:10px 16px; font-weight:700; } .skip:focus{ left:0; } /* ── nav (mirrors index.html, plus a horizontal-scroll link rail on phones) ── */ nav{ position:sticky; top:0; z-index:20; backdrop-filter:blur(10px); background:color-mix(in srgb, var(--paper) 88%, transparent); border-bottom:1px solid var(--line); } nav .row{ display:flex; align-items:center; gap:14px; min-height:62px; } .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:840; letter-spacing:-.01em; flex:none; } .brand svg{ width:30px; height:30px; color:var(--ink); } .brand .n b{ color:var(--ink); } .brand .n span{ color:var(--dust); } nav .sp{ flex:1; } nav .links{ display:flex; align-items:center; gap:14px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } nav .links::-webkit-scrollbar{ display:none; } nav .lnk{ text-decoration:none; color:var(--dim); font-size:14px; font-weight:600; white-space:nowrap; padding:4px 0; } nav .lnk:hover{ color:var(--ink); } nav .lnk[aria-current="page"]{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--dust); } .cta{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; text-decoration:none; padding:10px 18px; border-radius:999px; background:var(--dust); color:#1a1305; border:1px solid transparent; box-shadow:0 6px 18px -8px var(--glow); white-space:nowrap; flex:none; } .cta.ghost{ background:transparent; color:var(--ink); border-color:var(--line); box-shadow:none; } .cta:active{ transform:translateY(1px); } @media (max-width:760px){ nav .row{ flex-wrap:wrap; padding-top:10px; padding-bottom:10px; gap:10px; } nav .sp{ display:none; } nav .cta{ margin-left:auto; font-size:14px; padding:8px 14px; } nav .links{ order:3; flex-basis:100%; gap:16px; } } /* ════ DRAFT BANNER — one block per page; delete the