/* Self-hosted Google Fonts (latin + latin-ext variable woff2) — the Discord Activity iframe CSP blocks external font CDNs. Generated from the css2 response; family names/metrics identical to the previous CDN import. */ /* latin-ext */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url('./fraunces-v38-6NUs8FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChJdt9hFwpX9W37ll9_mvMiQvTm-BvwE82Jg.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url('./fraunces-v38-6NUs8FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChJdt9hFwpX9W37ll9_mv0iQg-BHpzg9ad.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fraunces-v38-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U-CJcjJNj7.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fraunces-v38-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA-DihXLNYH.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fraunces-v38-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U-CJcjJNj7.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fraunces-v38-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA-DihXLNYH.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fraunces-v38-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U-CJcjJNj7.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fraunces-v38-6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA-DihXLNYH.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('./inter-v20-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc-DO1Apj_S.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('./inter-v20-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7-Dx4kXJAl.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('./inter-v20-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc-DO1Apj_S.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('./inter-v20-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7-Dx4kXJAl.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('./inter-v20-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc-DO1Apj_S.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('./inter-v20-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7-Dx4kXJAl.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk-DIC32ArD.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg-6fWv1k7M.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk-DIC32ArD.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg-6fWv1k7M.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Design tokens — Claude / Warm Editorial (Dark) SSOT: DESIGN-SYSTEM.md §7. Warm espresso + coral; no cool grays. Replaces the retired cool-blurple Discord theme wholesale. */ :root { /* ── Espresso surface stack (warm; no cool grays) ───────────────── */ --rail: #131210; /* slim nav rail + body bg; recedes below canvas */ --canvas: #1b1a16; /* the floor / the darkroom a page floats on */ --raise: #211f1a; /* gentlest lift: menus, ghost-hover fill */ --raise-hi: #272420; /* hover/pressed within canvas; tooltip bg */ /* ── Cream ink on dark chrome (never pure white) ────────────────── */ --ink: #f3efe7; /* display + primary text, active nav icon */ --ink-body: #d8d2c6; /* running body text */ --muted: #9c9589; /* sub-labels, meta, lede */ --muted-soft: #6f685d; /* fine print, eyebrows, counts, idle icons */ /* ── Coral — single brand accent (≈2 uses/screen) ──────────────── */ --coral: #cc785c; --coral-hi: #d98c70; /* hover */ --coral-press: #a9583e; /* pressed */ --coral-ink: #b05f44; /* coral that reads on cream paper */ --coral-tint: rgba(204,120,92,.10); /* selected-row fill */ /* ── Seams / hairlines (a SEAM, never a frame) ──────────────────── */ --seam: #2c2925; --seam-soft: #232019; /* ── Reading paper (only inside a document page) ────────────────── */ --paper: #f7f3ea; /* sheet face (warm off-white) */ --paper-edge: #efe9dc; /* foot gradient stop */ --paper-ink: #2a2622; /* warm near-black body ink */ --paper-head: #1f1b17; /* heading ink */ --paper-mute: #6b6358; /* captions, equation numbers */ --paper-faint: #8f877b; /* page number, running head, fine print */ --paper-seam: #e0d9c9; /* hairline rules on paper */ --paper-seam-soft: #ece5d6; /* even fainter hairline on paper */ --paper-chart: #fffdf8; /* chart fill on paper */ /* ── Warm semantics (sparingly; never out-shout coral) ──────────── */ --ok: #8ba06f; --ok-soft: rgba(139,160,111,.14); --warn: #d6a35c; --danger: #cc6049; --danger-soft: rgba(204,96,73,.14); /* ── On-cream (paper) warm semantics — HP / effectiveness tones that read correctly on the cream battle stage (battle-sim4). ──────── */ --ok-ink: #5f7544; /* healthy HP / super-effective, on cream */ --warn-ink: #b07e34; /* mid HP, on cream */ --danger-ink: #b1472f; /* low HP, on cream */ /* ── Avatar ─────────────────────────────────────────────────────── */ --avatar-grad: linear-gradient(150deg, #3a342c, #26231e); /* ── Type families ──────────────────────────────────────────────── */ --font-display: "Fraunces", "Tiempos Headline", Garamond, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-read: "Fraunces", Georgia, "Times New Roman", serif; /* Back-compat aliases — old code referenced --font-ui (= body). */ --font-ui: var(--font-body); /* ── Type scale (sizes) ─────────────────────────────────────────── */ --fs-eyebrow: 11px; /* + caption / section-label */ --fs-runhead: 10.5px; --fs-tag: 10px; --fs-meta: 12px; /* + count / figcaption / pager-readout (12.5) */ --fs-base: 13px; --fs-toolbar: 13.5px; --fs-body: 14px; /* UI body / empty-sub / menu-row */ --fs-read: 15.5px; /* document body prose */ --fs-btn: 15px; --fs-lede: 16px; --fs-empty: 19px; /* italic-serif empty title */ --fs-eq: 21px; --fs-fmt: 22px; /* serif format name */ --fs-h2: 23px; /* page section heading (on paper) */ --fs-h1: 42px; /* page title */ /* ── Spacing scale (4px rhythm) ─────────────────────────────────── */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px; --sp-9: 48px; --sp-10: 52px; /* ── Radii ──────────────────────────────────────────────────────── */ --r-xs: 4px; /* document sheet / chart */ --r-sm: 7px; /* tooltip, small toolbar buttons */ --r-md: 8px; /* menu rows, download btn */ --r-lg: 10px; /* buttons (nav items use 9px) */ --r-nav: 9px; --r-xl: 12px; /* dropdown container */ --r-pill: 999px; /* ── Elevation (soft shadows = depth, never borders) ────────────── */ --sh-tooltip: 0 8px 24px rgba(0,0,0,.45); --sh-menu: 0 18px 50px rgba(0,0,0,.5); --sh-sheet: 0 1px 2px rgba(0,0,0,.30), 0 12px 28px -8px rgba(0,0,0,.55), 0 40px 80px -28px rgba(0,0,0,.55); --sh-coral: 0 1px 0 rgba(255,255,255,.08) inset, 0 10px 28px -12px rgba(204,120,92,.7); --sh-chart-inset: inset 0 0 0 1px var(--paper-seam); /* ── Shell metrics ──────────────────────────────────────────────── */ --rail-w: 60px; --rail-w-narrow: 54px; /* reader uses 52px */ --measure-max: 560px; /* lobby/utility centered column */ --page-max: 620px; /* reading sheet centered column */ --panel-bp: 560px; /* narrow breakpoint */ --sidebar-icons: 60px; --sidebar-labels: 200px; /* ── Back-compat aliases (retired cool-blurple names → warm) ──────── The shell (App/Sidebar) uses the canonical warm tokens above. The screen BODIES (Dashboard, AIPanel, Files, Games, Settings) are not migrated this milestone, so their old token names are aliased here so they shift to the espresso palette for free. A later milestone restyles those bodies and these aliases can then be removed. */ --bg-deep: var(--rail); --bg-base: var(--canvas); --bg-surface: var(--raise); --bg-elevated: var(--raise-hi); --bg-hover: var(--raise-hi); --bg-active: var(--raise-hi); --bg-input: var(--rail); --text-primary: var(--ink); --text-secondary: var(--ink-body); --text-muted: var(--muted); --text-subtle: var(--muted-soft); --text-dim: var(--muted-soft); --border-subtle: var(--seam-soft); --border: var(--seam); --border-strong: var(--seam); --accent: var(--coral); --accent-hover: var(--coral-hi); --accent-soft: var(--coral-tint); --accent-softer: rgba(204,120,92,.06); --ai: var(--coral); --ai-soft: var(--coral-tint); --ai-dim: rgba(204,120,92,.35); --live: var(--ok); --live-soft: var(--ok-soft); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--rail); color: var(--ink-body); font-family: var(--font-body); font-size: var(--fs-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; } button { font-family: inherit; cursor: pointer; } input, textarea { font-family: inherit; } /* Thin warm scrollbars (9px inset thumb, per spec) */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #34302a; border-radius: 8px; border: 2px solid var(--canvas); } ::-webkit-scrollbar-thumb:hover { background: #3a352d; } /* Shared utility classes */ .mono { font-family: var(--font-mono); } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; } .dot.live { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); } .dot.idle { background: var(--muted-soft); } .dot.ai { background: var(--coral); box-shadow: 0 0 0 3px var(--coral-tint); } /* Pulse used for live streaming */ @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 var(--ok-soft); } 70% { box-shadow: 0 0 0 6px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } } .pulse { animation: pulse-ring 1.8s cubic-bezier(0.4,0,0.6,1) infinite; } /* caret blink */ @keyframes caret-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .caret { animation: caret-blink 1s steps(1) infinite; } /* Stripe placeholder (for image placeholders in AI artifacts) */ .stripe-placeholder { background-image: repeating-linear-gradient( 45deg, #272420 0, #272420 8px, #211f1a 8px, #211f1a 16px ); color: var(--muted-soft); font-family: var(--font-mono); font-size: 11px; display: flex; align-items: center; justify-content: center; text-transform: uppercase; letter-spacing: 0.08em; } /* Focus rings */ :focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 3px; } /* Pokemon battle sprite animations */ @keyframes pk-shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-6px) rotate(-1deg); } 30% { transform: translateX(5px) rotate(1deg); } 45% { transform: translateX(-4px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-2px); } } .pk-shake { animation: pk-shake 520ms cubic-bezier(0.36, 0.07, 0.19, 0.97); } @keyframes pk-flash { 0%, 100% { filter: drop-shadow(0 8px 12px rgba(0,0,0,0.3)); } 25% { filter: brightness(2.2) drop-shadow(0 0 16px #fff); } 50% { filter: brightness(0.4); } 75% { filter: brightness(1.8) drop-shadow(0 0 12px #fff); } } .pk-flash { animation: pk-flash 520ms ease-out; } /* ── PDF text layer (Study module Phase 1) ───────────────────────────────── Minimal subset of pdfjs-dist's text-layer CSS. The layer holds transparent, absolutely-positioned glyph spans for native selection + as the coordinate reference for our highlight overlay. We deliberately DO NOT style spans for highlighting (text-layer fonts can be slightly off) — highlights are drawn in the separate overlay. Spans are scaled by --total-scale-factor (set inline by the viewer to the display scale). */ .textLayer { position: absolute; text-align: initial; inset: 0; overflow: clip; line-height: 1; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 1; --total-scale-factor: 1; --scale-factor: 1; --text-scale-factor: var(--total-scale-factor); } .textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; } .textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)); } .textLayer .markedContent { display: contents; } .textLayer ::selection { background: rgba(204, 120, 92, 0.30); } /* A brief pulse on a focused annotation rect. */ @keyframes studyAnnoPulse { 0% { box-shadow: 0 0 0 0 rgba(204, 120, 92, 0.55); } 100% { box-shadow: 0 0 0 10px rgba(204, 120, 92, 0); } }