@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/geist-latin-variable.woff2") format("woff2"); } @font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/lora-latin-variable.woff2") format("woff2"); } :root { color-scheme: light dark; --background: #f4efe6; --card: #fbf9f3; --foreground: #2d2e29; --focus-ring: var(--foreground); --card-foreground: #292a23; --muted: #e9e3d9; --muted-foreground: #64675f; --secondary: #e8e0d4; --accent: #c7b27f; --accent-foreground: #2d3025; --border: rgba(54, 59, 48, 0.14); --control-border: #8a8b82; --primary: #506a59; --primary-foreground: #ffffff; --primary-hover: #35483d; --good-bg: #dfe6de; --good-fg: #47604c; --warn-bg: #e9dfc9; --warn-fg: #705d35; --bad-bg: #eadbd6; --bad-fg: #7d5049; --tint: #faf7f0; } body[data-accent="lime"] { --primary: #c7b27f; --primary-foreground: #2d3025; --primary-hover: #b09b68; } body[data-accent="clay"] { --primary: #9d7462; --primary-foreground: #fff; --primary-hover: #8a6455; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --background: #171814; --card: #1f211b; --foreground: #e6e4d9; --focus-ring: var(--foreground); --card-foreground: #e6e4d9; --muted: #2b2d25; --muted-foreground: #a4a698; --secondary: #2b2d25; --accent: #b6a474; --accent-foreground: #171812; --border: rgba(230, 228, 213, 0.13); --control-border: #565a4e; --primary: #9dbcaa; --primary-foreground: #121713; --primary-hover: #bcd6c5; --good-bg: #2e3a2f; --good-fg: #a9c6b2; --warn-bg: #3b3422; --warn-fg: #d3ba7e; --bad-bg: #3a2a25; --bad-fg: #dc9c91; --tint: #23251f; } :root:not([data-theme]) body[data-accent="lime"] { --primary: #b6a474; --primary-foreground: #171812; --primary-hover: #c9b98b; } :root:not([data-theme]) body[data-accent="clay"] { --primary: #b08572; --primary-foreground: #171814; --primary-hover: #c29a88; } } /* Manual override set by the toggle. The inline script resolves the initial value from localStorage or the system preference (no flash). An explicit choice wins over prefers-color-scheme via the :not([data-theme]) scoping above. Light needs only color-scheme; the :root vars are light. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; --background: #171814; --card: #1f211b; --foreground: #e6e4d9; --focus-ring: var(--foreground); --card-foreground: #e6e4d9; --muted: #2b2d25; --muted-foreground: #a4a698; --secondary: #2b2d25; --accent: #b6a474; --accent-foreground: #171812; --border: rgba(230, 228, 213, 0.13); --control-border: #565a4e; --primary: #9dbcaa; --primary-foreground: #121713; --primary-hover: #bcd6c5; --good-bg: #2e3a2f; --good-fg: #a9c6b2; --warn-bg: #3b3422; --warn-fg: #d3ba7e; --bad-bg: #3a2a25; --bad-fg: #dc9c91; --tint: #23251f; } :root[data-theme="dark"] body[data-accent="lime"] { --primary: #b6a474; --primary-foreground: #171812; --primary-hover: #c9b98b; } :root[data-theme="dark"] body[data-accent="clay"] { --primary: #b08572; --primary-foreground: #171814; --primary-hover: #c29a88; } .theme-toggle { display: none; /* revealed only when JS has set a theme (below) */ position: fixed; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); z-index: 20; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--foreground); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } :root[data-theme] .theme-toggle { display: inline-flex; } .theme-toggle:hover { background: var(--muted); } .theme-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .theme-toggle svg { inline-size: 1.15rem; block-size: 1.15rem; } .theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } *, *::before, *::after { box-sizing: border-box; } html { min-width: 20rem; background: var(--background); } body { min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--background); color: var(--foreground); font-family: "Geist", system-ui, sans-serif; font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, p { margin: 0; } h1 { color: var(--foreground); font-family: "Lora", Georgia, serif; font-size: clamp(2.2rem, 6vw, 3.25rem); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; line-height: 1.08; } h2, h3 { color: var(--card-foreground); line-height: 1.2; } h2 { font-size: 1.25rem; } h3 { font-size: 1rem; } a { color: inherit; } button, input, select, textarea { font: inherit; } button { appearance: none; } .eyebrow, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.72rem; } .eyebrow { color: var(--muted-foreground); letter-spacing: 0.14em; text-transform: uppercase; } main.public { display: grid; max-width: 40rem; margin: 0 auto; padding: 4rem max(1.25rem, env(safe-area-inset-right)) calc(3rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); gap: 1.5rem; } main.desk { display: grid; max-width: 72rem; margin: 0 auto; padding: 2.5rem 1.25rem; gap: 1.25rem; } .brand-mark { /* 3D ASCII monogram (ascii-logo.js) on a squircle backdrop echoing the app icon */ display: grid; place-content: center; /* center the ASCII within the square box */ box-sizing: border-box; width: max-content; aspect-ratio: 1 / 1; /* keep the surrounding box symmetrical (square squircle) */ margin: 0; padding: 1rem; background: #45524a; /* the logo's dark-green squircle, theme-independent */ color: #eeece0; /* the logo's cream mark */ border-radius: 22%; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(4.5px, 1.4vw, 7.5px); line-height: 1; letter-spacing: 0; white-space: pre; overflow: hidden; font-variant-ligatures: none; -webkit-font-smoothing: none; user-select: none; } .brand-mark:empty { display: none; /* no-JS: hide the empty card, the