/* Sakuga 2.0 — generated from tokens.json */
:root, [data-theme="dark"] {
  --neutral-950: #07070a; /* Core. Darkest neutral; the Dark ground and media ground. Reached only through semantic tokens. */
  --neutral-925: #0b0a10; /* Core. Near-black ink; Light primary copy, Dark inverse. Reached only through semantic tokens. */
  --neutral-900: #111117; /* Core. Dark surface step. Reached only through semantic tokens. */
  --neutral-875: #1a1a21; /* Core. Dark raised step. Reached only through semantic tokens. */
  --neutral-850: #26262e; /* Core. Dark hover step. Reached only through semantic tokens. */
  --neutral-800: #2e2d36; /* Core. Light secondary copy. Reached only through semantic tokens. */
  --neutral-600: #5c5b67; /* Core. Light muted copy. Reached only through semantic tokens. */
  --neutral-400: #a3a3a7; /* Core. Dark muted copy. Reached only through semantic tokens. */
  --neutral-200: #dcdcde; /* Core. Dark secondary copy. Reached only through semantic tokens. */
  --neutral-150: #e1e1e7; /* Core. Light hover step. Reached only through semantic tokens. */
  --neutral-100: #ececf0; /* Core. Light raised step. Reached only through semantic tokens. */
  --neutral-50: #f6f6f8; /* Core. The Light ground. Reached only through semantic tokens. */
  --neutral-0: #ffffff; /* Core. Pure white. Reached only through semantic tokens. */
  --white-a06: rgba(255,255,255,0.06); /* Core. 6% white. Reached only through semantic tokens. */
  --white-a08: rgba(255,255,255,0.08); /* Core. 8% white. Reached only through semantic tokens. */
  --white-a12: rgba(255,255,255,0.12); /* Core. 12% white. Reached only through semantic tokens. */
  --white-a14: rgba(255,255,255,0.14); /* Core. 14% white. Reached only through semantic tokens. */
  --white-a16: rgba(255,255,255,0.16); /* Core. 16% white. Reached only through semantic tokens. */
  --white-a18: rgba(255,255,255,0.18); /* Core. 18% white. Reached only through semantic tokens. */
  --white-a22: rgba(255,255,255,0.22); /* Core. 22% white. Reached only through semantic tokens. */
  --white-a28: rgba(255,255,255,0.28); /* Core. 28% white. Reached only through semantic tokens. */
  --white-a45: rgba(255,255,255,0.45); /* Core. 45% white. Reached only through semantic tokens. */
  --white-a62: rgba(255,255,255,0.62); /* Core. 62% white. Reached only through semantic tokens. */
  --white-a70: rgba(255,255,255,0.7); /* Core. 70% white. Reached only through semantic tokens. */
  --shade-a06: rgba(11,10,16,0.06); /* Core. 6% neutral-925. Reached only through semantic tokens. */
  --shade-a08: rgba(11,10,16,0.08); /* Core. 8% neutral-925. Reached only through semantic tokens. */
  --shade-a12: rgba(11,10,16,0.12); /* Core. 12% neutral-925. Reached only through semantic tokens. */
  --shade-a16: rgba(11,10,16,0.16); /* Core. 16% neutral-925. Reached only through semantic tokens. */
  --shade-a24: rgba(11,10,16,0.24); /* Core. 24% neutral-925. Reached only through semantic tokens. */
  --shade-a40: rgba(11,10,16,0.4); /* Core. 40% neutral-925. Reached only through semantic tokens. */
  --shade-a52: rgba(11,10,16,0.52); /* Core. 52% neutral-925. Reached only through semantic tokens. */
  --black-a50: rgba(0,0,0,0.5); /* Core. 50% black. Reached only through semantic tokens. */
  --black-a72: rgba(0,0,0,0.72); /* Core. 72% black. Reached only through semantic tokens. */
  --scrim-a78: rgba(7,7,10,0.78); /* Core. 78% near-black for labels laid over artwork. Reached only through semantic tokens. */
  --glass-dark-a42: rgba(28,28,34,0.42); /* Core. Glass dark a42. Reached only through semantic tokens. */
  --glass-dark-a82: rgba(28,28,34,0.82); /* Core. Glass dark a82. Reached only through semantic tokens. */
  --glass-light-a62: rgba(250,250,252,0.62); /* Core. Glass light a62. Reached only through semantic tokens. */
  --glass-light-a90: rgba(250,250,252,0.9); /* Core. Glass light a90. Reached only through semantic tokens. */
  --camellia-400: #f4779f; /* Core. Camellia, the Dark accent. Reached only through semantic tokens. */
  --camellia-600: #c2335f; /* Core. Deep camellia, the Light accent. Reached only through semantic tokens. */
  --vermilion-400: #ff7a5c; /* Vermilion, the stamp red: danger text on dark grounds (7.9:1 on bg-canvas). */
  --vermilion-600: #c8321e; /* Vermilion, the stamp red: the danger fill in both themes (white on it 5.3:1), and danger text on light grounds. */
  --camellia-400-a14: rgba(244,119,159,0.14); /* Core. Camellia 400 at 14%. */
  --camellia-600-a10: rgba(194,51,95,0.1); /* Core. Camellia 600 at 10%. */
  --paper-50: #f4f1ea; /* Core. Manga page stock. Reached only through semantic tokens. */
  --spirit-500: #8b6cf0; /* Core. Spirit violet, the Fragments colour. */
  --spirit-vault: #15112a; /* Core. The soul-vault: Fragments' dark ground. */
  --bg-canvas: var(--neutral-950); /* The page ground. Text: text-primary, text-secondary, text-muted. */
  --bg-surface: var(--neutral-900); /* Cards, description panels, placeholder thumbnails. Text: text-primary, text-secondary, text-muted. */
  --bg-surface-raised: var(--neutral-875); /* Solid icon buttons, the desktop action rail, menus. Text: text-primary, text-muted. */
  --bg-surface-hover: var(--neutral-850); /* Hover on bg-surface-raised controls and list rows. */
  --bg-fill-subtle: var(--white-a08); /* Quiet pills and inactive segments. Text: text-primary. */
  --bg-fill: var(--white-a14); /* Secondary button fill (Follow, More info). Text: text-primary. */
  --bg-fill-selected: var(--white-a12); /* The selected row in a menu. */
  --bg-glass: var(--glass-dark-a42); /* Phone chrome floating over content: nav buttons, tab bar. Always with blur-glass and border-glass. Text: text-primary. */
  --bg-glass-strong: var(--glass-dark-a82); /* Bottom sheets and menus over the page. Text: text-primary, text-muted. */
  --bg-overlay: var(--black-a50); /* Dims the page behind a sheet or dialog. */
  --text-primary: var(--neutral-0); /* Titles, labels, button text on bg-canvas, bg-surface, bg-surface-raised, bg-fill and bg-glass. */
  --text-secondary: var(--neutral-200); /* Running text: loglines, descriptions. On bg-canvas and bg-surface. */
  --text-muted: var(--neutral-400); /* Metadata and section subtitles. On bg-canvas, bg-surface, bg-surface-raised and bg-glass-strong. */
  --text-inverse: var(--neutral-925); /* Text and icons on action-primary and accent fills. */
  --text-accent: var(--camellia-400); /* Short emphasis only (premiere times). On bg-canvas and bg-surface. */
  --border-hairline: var(--white-a06); /* Decorative card edges and rules. Never the only cue for a control. */
  --border-divider: var(--white-a12); /* Section-nav baselines, list separators. */
  --border-placeholder: var(--white-a22); /* The dashed edge of an upcoming slot. */
  --border-control: var(--white-a45); /* Outline buttons and selects: any control edge that must read on its own. 3:1 on bg-canvas and bg-surface. */
  --border-glass: var(--white-a16); /* The 1px edge of every glass surface. */
  --highlight-glass: var(--white-a18); /* The 1px inner top highlight of every glass surface. */
  --action-primary: var(--neutral-0); /* The one main action per view: Play, Follow creator, Done. Label: text-inverse. */
  --action-secondary: var(--white-a14); /* The supporting action: Follow, More info. Label: text-primary. */
  --accent: var(--camellia-400); /* The single accent: active nav underline, played progress, the selected page, a liked heart. Never a large fill. */
  --accent-subtle: var(--camellia-400-a14); /* A faint wash of the accent behind a selected option. Text stays text-primary. */
  --on-accent: var(--neutral-925); /* Text or icons on an accent fill (the creator initials disc). */
  --danger: var(--vermilion-600); /* The fill of an action that deletes something or takes access away. Never decoration, never a state. */
  --on-danger: var(--neutral-0); /* Text and icons on danger. */
  --text-danger: var(--vermilion-400); /* Words that name an action that deletes something or takes access away. */
  --progress-track: var(--white-a28); /* Unplayed part of a progress bar outside media. */
  --progress-fill: var(--accent); /* Played part of a progress bar or scrubber. */
  --focus-ring: var(--neutral-0); /* Keyboard focus: a 2px solid ring 3px outside the control. */
  --bg-media: var(--neutral-950); /* The ground behind video and manga pages, in both themes. */
  --text-on-media: var(--neutral-0); /* Controls, titles and captions over video or artwork, in both themes. On bg-media, and on a scrim or glass over pictures. */
  --text-on-media-muted: var(--neutral-400); /* Secondary text in media chrome, such as timecodes. On bg-media. */
  --bg-glass-media: var(--glass-dark-a42); /* Glass controls over video or manga pages, in both themes. */
  --bg-glass-media-strong: var(--glass-dark-a82); /* Sheets over video (audio and subtitles), in both themes. */
  --border-glass-media: var(--white-a16); /* Edge of glass over media. */
  --bg-scrim-label: var(--scrim-a78); /* Small labels on artwork: durations, view counts, 'New'. Text: text-on-media. */
  --bg-scrim-caption: var(--black-a72); /* Behind subtitles and captions. Text: text-on-media. */
  --bg-scrim-art: var(--neutral-950); /* Legibility scrims over key art and video, faded to transparent, in both themes. Hero text sits over it as text-on-media. */
  --action-media: var(--neutral-0); /* The main action drawn over video or artwork, in both themes. Label: text-on-action-media. */
  --text-on-action-media: var(--neutral-925); /* Label of a media action button. Same in both themes. */
  --action-media-secondary: var(--glass-dark-a42); /* The supporting action over video or artwork, in both themes. Label: text-on-media. */
  --media-progress-track: var(--white-a28); /* Unplayed part of a scrubber over video. */
  --media-progress-buffer: var(--white-a45); /* Buffered part of a scrubber over video. */
  --bg-paper: var(--paper-50); /* Manga page placeholder while the page loads. Never carries text. */
  --button-primary-bg: var(--action-primary); /* Button primary: fill. */
  --button-primary-fg: var(--text-inverse); /* Button primary: label and icon. */
  --button-secondary-bg: var(--action-secondary); /* Button secondary: fill. */
  --button-secondary-fg: var(--text-primary); /* Button secondary: label and icon. */
  --button-outline-border: var(--border-control); /* Button outline: edge. */
  --button-outline-fg: var(--text-primary); /* Button outline: label and icon. */
  --button-ghost-fg: var(--text-secondary); /* Button ghost: label and icon. */
  --button-ghost-hover-bg: var(--bg-fill-subtle); /* Button ghost: hover fill. */
  --button-disabled-bg: var(--bg-fill-subtle); /* Button primary or media while it can't be used yet: a quiet fill, never a faded white. */
  --button-disabled-fg: var(--text-muted); /* Button label while disabled. */
  --button-media-bg: var(--action-media); /* Button media: fill over video or artwork. */
  --button-media-fg: var(--text-on-action-media); /* Button media: label and icon. */
  --button-media-secondary-bg: var(--action-media-secondary); /* Button media-secondary: glass fill over video or artwork. */
  --button-media-secondary-fg: var(--text-on-media); /* Button media-secondary: label and icon. */
  --button-media-secondary-border: var(--border-glass-media); /* Button media-secondary: edge. */
  --icon-button-solid-bg: var(--bg-surface-raised); /* IconButton solid: fill (desktop). */
  --icon-button-solid-hover-bg: var(--bg-surface-hover); /* IconButton solid: hover fill. */
  --icon-button-fg: var(--text-primary); /* IconButton: glyph colour for solid, glass and plain. */
  --icon-button-glass-bg: var(--bg-glass); /* IconButton glass: fill (phone chrome). */
  --icon-button-glass-border: var(--border-glass); /* IconButton glass: edge. */
  --icon-button-media-bg: var(--bg-glass-media); /* IconButton media: fill over video or pages. */
  --icon-button-media-border: var(--border-glass-media); /* IconButton media: edge. */
  --icon-button-media-fg: var(--text-on-media); /* IconButton media: glyph. */
  --icon-button-media-focus: var(--text-on-media); /* IconButton media: focus ring over video, both themes. */
  --icon-button-pressed-fg: var(--accent); /* IconButton: glyph when toggled on (a liked heart). */
  --topnav-link-fg: var(--text-secondary); /* TopNav: idle links. */
  --topnav-link-active-fg: var(--text-primary); /* TopNav: the current link. */
  --topnav-indicator: var(--accent); /* TopNav: underline under the current link. */
  --topnav-brand-fg: var(--text-primary); /* TopNav: the AniCanon wordmark. */
  --tabbar-bg: var(--bg-glass); /* TabBar: the glass capsule. */
  --tabbar-border: var(--border-glass); /* TabBar: capsule edge. */
  --tabbar-item-fg: var(--text-secondary); /* TabBar: idle items. */
  --tabbar-item-active-bg: var(--action-primary); /* TabBar: the current item capsule. */
  --tabbar-item-active-fg: var(--text-inverse); /* TabBar: the current item glyph and name. */
  --tabbar-create-fg: var(--text-primary); /* TabBar: the Create button glyph. */
  --section-header-title: var(--text-primary); /* SectionHeader: heading. */
  --section-header-subtitle: var(--text-muted); /* SectionHeader: the line that explains the shelf. */
  --section-header-action: var(--text-secondary); /* SectionHeader: the See all link. */
  --segmented-track-bg: var(--bg-fill-subtle); /* SegmentedControl: track. */
  --segmented-item-fg: var(--text-primary); /* SegmentedControl: idle segments. */
  --segmented-item-active-bg: var(--action-primary); /* SegmentedControl: the selected segment. */
  --segmented-item-active-fg: var(--text-inverse); /* SegmentedControl: the selected segment name. */
  --chip-bg: var(--bg-fill-subtle); /* Chip: idle fill. */
  --chip-fg: var(--text-primary); /* Chip: idle name. */
  --chip-active-bg: var(--action-primary); /* Chip: selected fill. */
  --chip-active-fg: var(--text-inverse); /* Chip: selected name. */
  --badge-bg: var(--bg-scrim-label); /* Badge: duration and count labels laid over artwork. */
  --badge-fg: var(--text-on-media); /* Badge: label glyphs. */
  --badge-new-bg: var(--text-on-media); /* Badge new: the white 'New' flag over artwork. */
  --badge-new-fg: var(--bg-media); /* Badge new: its word. */
  --badge-alert-bg: var(--accent); /* Badge: a state that changed for the worse (burning, dead, destroyed). */
  --badge-alert-fg: var(--on-accent); /* Badge: text and icon on badge-alert-bg. */
  --media-card-title: var(--text-primary); /* MediaCard: title under the artwork. */
  --media-card-meta: var(--text-muted); /* MediaCard: metadata under the title. */
  --media-card-placeholder: var(--bg-surface); /* MediaCard: frame behind artwork while it loads. */
  --media-card-progress-track: var(--media-progress-track); /* MediaCard: unwatched part of the progress line. */
  --media-card-progress-fill: var(--accent); /* MediaCard: watched part of the progress line. */
  --thumbnail-ring-active: var(--accent); /* Page strip: ring around the current page. */
  --thumbnail-ring: var(--border-glass-media); /* Page strip: ring around the other pages. */
  --cast-avatar-name: var(--text-primary); /* CastAvatar: character name. */
  --cast-avatar-role: var(--text-muted); /* CastAvatar: role line. */
  --cast-avatar-placeholder: var(--bg-surface-raised); /* CastAvatar: portrait frame while it loads. */
  --premiere-slot-border: var(--border-placeholder); /* PremiereSlot: dashed edge. */
  --premiere-slot-when: var(--text-accent); /* PremiereSlot: premiere day and time. */
  --premiere-slot-title: var(--text-primary); /* PremiereSlot: what premieres. */
  --premiere-slot-frame: var(--bg-surface); /* PremiereSlot: empty frame where the artwork will go. */
  --scrubber-track: var(--media-progress-track); /* Scrubber: unplayed range. */
  --scrubber-buffer: var(--media-progress-buffer); /* Scrubber: buffered range. */
  --scrubber-fill: var(--progress-fill); /* Scrubber: played range. */
  --scrubber-thumb: var(--text-on-media); /* Scrubber: handle. */
  --scrubber-time: var(--text-on-media); /* Scrubber: timecodes. */
  --scrubber-marker: var(--bg-media); /* Scrubber: chapter marks cut into the track. */
  --caption-bg: var(--bg-scrim-caption); /* Caption: box behind a subtitle line. */
  --caption-fg: var(--text-on-media); /* Caption: subtitle glyphs. */
  --sheet-bg: var(--bg-glass-strong); /* Sheet: the sliding panel over the page. */
  --sheet-media-bg: var(--bg-glass-media-strong); /* Sheet media: the panel over video. */
  --sheet-handle: var(--border-control); /* Sheet: the grab handle. */
  --sheet-scrim: var(--bg-overlay); /* Sheet: the dim layer behind it. */
  --sheet-row-selected-bg: var(--bg-fill-selected); /* Sheet: the chosen row. */
  --sheet-check: var(--accent); /* Sheet: the check beside the chosen row. */
  --sheet-media-done-bg: var(--action-media); /* Sheet media: the Done button over video. */
  --sheet-media-done-fg: var(--text-on-action-media); /* Sheet media: Done label. */
  --segmented-glass-bg: var(--bg-glass-media); /* SegmentedControl glass: track over artwork or video, in both themes. */
  --segmented-glass-border: var(--border-glass-media); /* SegmentedControl glass: track edge. */
  --segmented-glass-item-fg: var(--text-on-media); /* SegmentedControl glass: idle segments over artwork. */
  --segmented-glass-active-bg: var(--action-media); /* SegmentedControl glass: selected segment over artwork. */
  --segmented-glass-active-fg: var(--text-on-action-media); /* SegmentedControl glass: selected segment name over artwork. */
  --media-card-scrim: var(--bg-scrim-label); /* MediaCard: shade under a series logo laid over the artwork. */
  --premiere-slot-subtitle: var(--text-muted); /* PremiereSlot: the line under the title. */
  --sheet-fg: var(--text-primary); /* Sheet: row names. */
  --sheet-title: var(--text-muted); /* Sheet: group headings. */
  --sheet-border: var(--border-glass); /* Sheet: panel edge. */
  --sheet-media-fg: var(--text-on-media); /* Sheet media: row names over video. */
  --sheet-media-title: var(--text-on-media-muted); /* Sheet media: group headings over video. */
  --sheet-media-border: var(--border-glass-media); /* Sheet media: panel edge. */
  --icon-fg: var(--text-primary); /* Icon: default glyph colour; icons follow currentColor. */
  --option-tile-bg: var(--bg-fill-subtle); /* OptionTiles: idle tile. */
  --option-tile-fg: var(--text-secondary); /* OptionTiles: idle icon and name. */
  --option-tile-hover-bg: var(--bg-fill); /* OptionTiles: hovered tile. */
  --option-tile-selected-bg: var(--accent-subtle); /* OptionTiles: chosen tile wash. */
  --option-tile-selected-border: var(--accent); /* OptionTiles: chosen tile edge. */
  --option-tile-selected-fg: var(--text-primary); /* OptionTiles: chosen tile icon and name. */
  --option-tile-label: var(--text-muted); /* OptionTiles: the field name above the grid. */
  --option-tile-note: var(--text-muted); /* OptionTiles: the line describing the chosen option. */
  --panel-bg: var(--bg-surface); /* Panel: card surface in the Studio. */
  --panel-border: var(--border-hairline); /* Panel: card edge. */
  --panel-icon: var(--accent); /* Panel: header icon. */
  --panel-title: var(--text-primary); /* Panel: header title. */
  --panel-subtitle: var(--text-muted); /* Panel: header line under the title. */
  --tooltip-bg: var(--bg-surface-raised); /* FieldHelp: tooltip surface. */
  --tooltip-fg: var(--text-primary); /* FieldHelp: tooltip text. */
  --tooltip-border: var(--border-divider); /* FieldHelp: tooltip edge. */
  --field-help-fg: var(--text-muted); /* FieldHelp: the info glyph. */
  --dialog-bg: var(--bg-surface); /* Dialog: panel. */
  --dialog-border: var(--border-divider); /* Dialog: panel edge. */
  --dialog-scrim: var(--bg-overlay); /* Dialog: dim layer behind it. */
  --dialog-title: var(--text-primary); /* Dialog: title. */
  --dialog-description: var(--text-muted); /* Dialog: line under the title. */
  --fragments-vault-bg: var(--spirit-vault); /* Fragments balance card: the soul-vault surface, dark in both themes. */
  --fragments-rim: var(--spirit-500); /* Fragments balance card: violet rim and the dot-screentone watermark. */
  --fragments-eyebrow: var(--accent); /* Fragments balance card: the pink FRAGMENTS eyebrow. */
  --fragments-amount: var(--text-on-media); /* Fragments balance card: the balance figure. */
  --fragments-caption: var(--text-on-media-muted); /* Fragments balance card: secondary lines. */
  --sidebar-bg: var(--bg-surface); /* Studio sidebar: its panel. */
  --sidebar-border: var(--border-hairline); /* Studio sidebar: edge against the page. */
  --sidebar-group: var(--text-muted); /* Studio sidebar: group headings (Make, Cast and world). */
  --sidebar-item-fg: var(--text-secondary); /* Studio sidebar: idle items. */
  --sidebar-item-hover-bg: var(--bg-fill-subtle); /* Studio sidebar: hovered item. */
  --sidebar-item-active-fg: var(--text-primary); /* Studio sidebar: the current page name. */
  --stepper-fg: var(--text-muted); /* Stepper: upcoming steps. */
  --stepper-current-fg: var(--text-primary); /* Stepper: current and done labels. */
  --stepper-current-bg: var(--action-primary); /* Stepper: current step number fill. */
  --stepper-current-num: var(--text-inverse); /* Stepper: current step number. */
  --stepper-done-bg: var(--bg-fill); /* Stepper: done step fill. */
  --stepper-ring: var(--border-control); /* Stepper: upcoming step ring. */
  --stepper-sep: var(--border-divider); /* Stepper: line between steps. */
  --field-label: var(--text-muted); /* TextField and Select: label. */
  --field-hint: var(--text-muted); /* TextField and Select: hint under the control. */
  --field-bg: var(--bg-canvas); /* TextField and Select: control fill. */
  --field-border: var(--border-control); /* TextField and Select: control edge. */
  --field-fg: var(--text-primary); /* TextField and Select: value. */
  --field-placeholder: var(--text-muted); /* TextField and Select: placeholder. */
  --field-highlight: var(--accent); /* TextField: a field that changed or needs attention. */
  --select-open-border: var(--accent); /* Select: the edge of a select whose menu is open. */
  --select-menu-bg: var(--bg-surface-raised); /* Select: the open menu. */
  --select-menu-border: var(--border-divider); /* Select: the open menu edge. */
  --select-option-hover-bg: var(--bg-fill-subtle); /* Select: an option under the pointer. */
  --select-option-selected-bg: var(--bg-fill-selected); /* Select: the chosen option. */
  --select-option-check: var(--accent); /* Select: the check beside the chosen option. */
  --notice-info-bg: var(--bg-fill-subtle); /* Notice, info: fill. */
  --notice-info-icon: var(--text-muted); /* Notice, info: icon. */
  --notice-attention-bg: var(--accent-subtle); /* Notice, attention: fill. */
  --notice-attention-icon: var(--text-accent); /* Notice, attention: icon. */
  --notice-title: var(--text-primary); /* Notice: bold lead. */
  --notice-text: var(--text-secondary); /* Notice: body text. */
  --toast-bg: var(--bg-surface); /* Toast: surface. */
  --toast-border: var(--border-divider); /* Toast: edge. */
  --toast-icon: var(--accent); /* Toast: leading icon. */
  --drop-border: var(--border-placeholder); /* DropZone: dashed edge. */
  --drop-hover-border: var(--border-control); /* DropZone: edge on hover. */
  --drop-fg: var(--text-muted); /* DropZone: hint. */
  --drop-title: var(--text-primary); /* DropZone: title. */
  --drop-icon: var(--accent); /* DropZone: icon. */
  --drop-filled-bg: var(--bg-surface-raised); /* DropZone: filled and busy fill. */
  --option-card-bg: var(--bg-surface); /* OptionTiles large: card. */
  --option-card-border: var(--border-divider); /* OptionTiles large: edge. */
  --option-card-selected-bg: var(--accent-subtle); /* OptionTiles large: chosen card. */
  --glyph-event: var(--text-primary); /* EventGlyph: an event, a plain happening. */
  --glyph-muted: var(--text-muted); /* EventGlyph: an event outside the current moment. */
  --panel-eyebrow: var(--text-accent); /* PanelHeader: the small label naming what the panel shows. */
  --panel-section-label: var(--text-muted); /* PanelSection: label and count. */
  --state-arrow: var(--text-muted); /* StateChange: the arrow between before and after. */
  --entity-name: var(--text-primary); /* EntityRow: name. */
  --entity-chip-border: var(--border-divider); /* EntityRow: the told-by chip outline. */
  --entity-chip-fg: var(--text-muted); /* EntityRow: the told-by chip label. */
  --entity-visual-bg: var(--bg-fill-subtle); /* EntityRow: picture placeholder. */
  --entity-visual-fg: var(--text-muted); /* EntityRow: initials and icons in the picture slot. */
  --entity-pair-gap: var(--bg-surface); /* EntityRow: the ring between two overlapping portraits. */
  --question-pip: var(--bg-fill); /* Open question track: a step not reached. */
  --question-pip-on: var(--accent); /* Open question track: a step reached. */
  --map-bg: var(--bg-surface); /* StoryMap: ground. */
  --map-border: var(--border-hairline); /* StoryMap: outline and legend outline. */
  --map-edge: var(--border-divider); /* StoryMap: a link between an event and a hub. */
  --map-edge-active: var(--accent); /* StoryMap: links, causes and conflicts of the selection. */
  --map-hub-ring: var(--border-divider); /* StoryMap: ring around hubs and event nodes. */
  --map-focus: var(--accent); /* StoryMap: ring on a selected or lit hub or event. */
  --map-node-bg: var(--bg-canvas); /* StoryMap: event node fill. */
  --map-node-empty: var(--bg-surface-raised); /* StoryMap: a hub with no art yet. */
  --map-label: var(--text-secondary); /* StoryMap: event labels and legend. */
  --map-label-strong: var(--text-primary); /* StoryMap: hub names. */
  --map-label-accent: var(--text-accent); /* StoryMap: the label of a selected, new or proposed event. */
  --map-legend-bg: var(--bg-canvas); /* StoryMap: legend surface. */
  --scrub-track: var(--bg-fill); /* StoryScrubber: the story-order line. */
  --scrub-fill: var(--accent); /* StoryScrubber: the stretch included at the handle. */
  --scrub-handle: var(--accent); /* StoryScrubber: handle and its pill. */
  --scrub-handle-fg: var(--on-accent); /* StoryScrubber: handle pill label. */
  --scrub-node-bg: var(--bg-canvas); /* StoryScrubber: event node fill. */
  --scrub-node-ring: var(--border-divider); /* StoryScrubber: event node ring. */
  --scrub-node-ring-on: var(--border-control); /* StoryScrubber: ring of an included event. */
  --scrub-arc: var(--border-divider); /* StoryScrubber: arc brackets. */
  --scrub-label: var(--text-muted); /* StoryScrubber: arc names, told-by marks and key. */
  --scrub-label-on: var(--text-secondary); /* StoryScrubber: an arc inside the moment. */
  --scrub-unplaced-border: var(--border-placeholder); /* StoryScrubber: the Not placed box. */
  --maki-name: var(--text-accent); /* Maki: the name above Maki's turn. */
  --maki-text: var(--text-primary); /* Maki: message text. */
  --maki-quote-bg: var(--bg-canvas); /* Maki: a quoted line. */
  --maki-quote-fg: var(--text-secondary); /* Maki: quoted text. */
  --chat-mine-bg: var(--accent-subtle); /* ChatMessage: the person's own message. */
  --maki-card-bg: var(--bg-canvas); /* MakiCard: surface. */
  --maki-card-border: var(--border-divider); /* MakiCard: outline. */
  --maki-card-eyebrow: var(--text-muted); /* MakiCard: eyebrow. */
  --maki-check-fg: var(--text-secondary); /* MakiCard: the check line. */
  --maki-check-icon: var(--text-accent); /* MakiCard: the check mark. */
  --maki-composer-bg: var(--bg-canvas); /* MakiComposer: field. */
  --maki-composer-border: var(--border-control); /* MakiComposer: field outline. */
  --maki-composer-placeholder: var(--text-muted); /* MakiComposer: placeholder and hint. */
  --maki-divider: var(--border-hairline); /* MakiPanel: dividers under the header and above the composer. */
  --mention-character-bg: var(--accent-subtle); /* Mention: @character fill. */
  --mention-character-fg: var(--text-accent); /* Mention: @character text. */
  --mention-place-fg: var(--text-primary); /* Mention: #place text. */
  --mention-place-rule: var(--text-muted); /* Mention: #place underline. */
  --mention-active-ring: var(--accent); /* Mention: the mention whose card is open. */
  --manuscript-number: var(--text-accent); /* ManuscriptSection: the #number. */
  --manuscript-text: var(--text-primary); /* ManuscriptSection: title and prose. */
  --manuscript-meta: var(--text-muted); /* ManuscriptSection: word count. */
  --proposal-bg: var(--bg-surface); /* ProposalCard: a stated proposal. */
  --proposal-border: var(--border-hairline); /* ProposalCard: outline. */
  --proposal-inferred-border: var(--border-placeholder); /* ProposalCard: dashed outline of an inferred proposal. */
  --proposal-conflict-border: var(--accent); /* ProposalCard: a conflict. */
  --proposal-title: var(--text-primary); /* ProposalCard: title. */
  --proposal-note: var(--text-muted); /* ProposalCard: note. */
  --question-bg: var(--bg-surface); /* QuestionRow: surface. */
  --question-border: var(--border-hairline); /* QuestionRow: outline. */
  --question-selected: var(--accent); /* QuestionRow: the selected question. */
  --question-title: var(--text-primary); /* QuestionRow: question and event names. */
  --question-note: var(--text-muted); /* QuestionRow: notes, step labels and arrows. */
  --question-event-bg: var(--bg-canvas); /* QuestionRow: an event in a step. */
  --question-empty-border: var(--border-placeholder); /* QuestionRow: an empty step. */
  --popover-bg: var(--bg-surface-raised); /* Popover and Picker: surface. */
  --popover-border: var(--border-divider); /* Popover and Picker: outline. */
  --popover-fg: var(--text-primary); /* Picker: option label. */
  --popover-muted: var(--text-muted); /* Picker: hints, icons and dim options. */
  --popover-group: var(--text-muted); /* Picker: group title. */
  --popover-slot-bg: var(--bg-fill-subtle); /* Picker: initials slot. */
  --popover-selected-bg: var(--accent-subtle); /* Picker: the selected option. */
  --popover-check: var(--text-accent); /* Picker: check on the selected option. */
  --statusbar-bg: var(--bg-surface); /* StatusBar: surface. */
  --statusbar-border: var(--border-hairline); /* StatusBar: top rule. */
  --statusbar-fg: var(--text-muted); /* StatusBar: items. */
  --statusbar-sep: var(--border-divider); /* StatusBar: separators. */
  --toolbar-bg: var(--bg-surface-raised); /* FloatingToolbar: surface. */
  --toolbar-border: var(--border-divider); /* FloatingToolbar: outline. */
  --timeline-bg: var(--bg-surface); /* Timeline: ground. */
  --timeline-border: var(--border-hairline); /* Timeline: rules between rows and the ruler. */
  --timeline-label: var(--text-muted); /* Timeline: track names and text items. */
  --timeline-ruler: var(--text-muted); /* Timeline: time ticks. */
  --timeline-marker-bg: var(--accent-subtle); /* Timeline: a named marker. */
  --timeline-marker-fg: var(--text-accent); /* Timeline: marker label. */
  --timeline-item-bg: var(--bg-surface-raised); /* Timeline: a video item without picture. */
  --timeline-item-border: var(--border-divider); /* Timeline: item outline. */
  --timeline-audio-bg: var(--bg-fill-subtle); /* Timeline: an audio item. */
  --timeline-wave: var(--text-muted); /* Timeline: audio waveform bars. */
  --timeline-text-bg: var(--bg-fill-subtle); /* Timeline: caption and overlay items. */
  --timeline-effect-bg: var(--accent-subtle); /* Timeline: an effect item. */
  --timeline-selected: var(--accent); /* Timeline: the selected item. */
  --timeline-gap-border: var(--border-placeholder); /* Timeline: a planned gap with no picture yet. */
  --timeline-label-bg: var(--bg-scrim-label); /* Timeline: label plate over a picture. */
  --timeline-label-fg: var(--text-on-media); /* Timeline: label over a picture. */
  --timeline-playhead: var(--accent); /* Timeline: the playhead. */
  --screenplay-text: var(--text-primary); /* ScreenplayLine: text. */
  --screenplay-meta: var(--text-muted); /* ScreenplayLine: parentheticals, extensions and transitions. */
  --screenplay-flag: var(--accent); /* ScreenplayLine: a line Maki flagged. */
  --pbar-bg: var(--bg-fill-subtle); /* ProgramBar: the track. */
  --pbar-border: var(--border-hairline); /* ProgramBar: track edge. */
  --pbar-cut: var(--bg-surface-raised); /* ProgramBar: a section in the cut. */
  --pbar-partial: var(--border-control); /* ProgramBar: dashed edge on a section with gaps. */
  --pbar-missing: var(--border-placeholder); /* ProgramBar: a planned section not cut yet. */
  --pbar-label: var(--text-secondary); /* ProgramBar: section label. */
  --pbar-meta: var(--text-muted); /* ProgramBar: total and missing labels. */
  --pbar-window: var(--accent); /* ProgramBar: the part the timeline shows, the playhead and open notes. */
  --pbar-mark-fg: var(--on-accent); /* ProgramBar: note number. */
  --dline-speaker: var(--text-primary); /* DialogueLine: speaker. */
  --dline-text: var(--text-primary); /* DialogueLine: the line. */
  --dline-meta: var(--text-muted); /* DialogueLine: delivery, offset and translation. */
  --cutsheet-text: var(--text-primary); /* CutSheet: cell text. */
  --cutsheet-head: var(--text-muted); /* CutSheet: column labels. */
  --cutsheet-rule: var(--border-hairline); /* CutSheet: the rule between rows. */
  --cutsheet-rule-head: var(--border-divider); /* CutSheet: the rule under the column labels. */
  --cutsheet-selected-bg: var(--bg-surface-raised); /* CutSheet: the selected row. */
  --cutsheet-changed: var(--text-primary); /* CutSheet: the margin bar on a row changed since you last read it. */
  --cut-number: var(--text-primary); /* CutCell: the cut number. */
  --cut-number-selected: var(--text-accent); /* CutCell: the selected cut's number. */
  --cut-note: var(--text-muted); /* CutCell: a short note under the number. */
  --cut-state-border: var(--border-control); /* CutCell: waiting for approval. */
  --cut-state-ok-bg: var(--text-primary); /* CutCell: approved. */
  --cut-state-ok-fg: var(--bg-canvas); /* CutCell: approved check. */
  --shorthand-fg: var(--text-secondary); /* Shorthand: camera and timing notation. */
  --revision-from: var(--text-muted); /* Revision: the struck text. */
  --revision-mark: var(--accent); /* Revision: the underline under the new text. */
  --slip-bg: var(--accent-subtle); /* Slip: the correction slip, the only tinted surface on a sheet. */
  --slip-fg: var(--text-primary); /* Slip: text. */
  --slip-label: var(--text-accent); /* Slip: label and action. */
  --slip-done-border: var(--accent-subtle); /* Slip: a resolved slip's edge. */
  --slip-done-fg: var(--text-secondary); /* Slip: a resolved slip's text. */
  --tsheet-bg: var(--bg-canvas); /* Timesheet: the frame grid. */
  --tsheet-tick: var(--border-hairline); /* Timesheet: a quarter-second tick. */
  --tsheet-tick-second: var(--border-control); /* Timesheet: a second. */
  --tsheet-span: var(--text-secondary); /* Timesheet: a video's bracket. */
  --tsheet-key-bg: var(--text-primary); /* Timesheet: a key frame. */
  --tsheet-key-fg: var(--bg-canvas); /* Timesheet: key number. */
  --tsheet-meta: var(--text-muted); /* Timesheet: labels on top. */
  --tsheet-label: var(--text-secondary); /* Timesheet: span labels. */
  --tsheet-label-strong: var(--text-primary); /* Timesheet: span names. */
  --timeline-video-edge: var(--border-divider); /* Timeline: the edge of a video item. */
  --timeline-dialogue-bg: var(--bg-fill-subtle); /* Timeline: a line of dialogue. */
  --timeline-music-bg: var(--bg-fill-subtle); /* Timeline: music. */
  --timeline-audio-wave: var(--text-muted); /* Timeline: sound waveform. */
  --timeline-dialogue-wave: var(--text-secondary); /* Timeline: dialogue waveform. */
  --timeline-music-wave: var(--text-muted); /* Timeline: music waveform. */
  --timeline-caption-fg: var(--text-secondary); /* Timeline: caption text. */
  --timeline-effect-fg: var(--text-secondary); /* Timeline: effect name. */
  --prodnav-bg: var(--bg-surface); /* ProductionNav: background (the production's own side bar). */
  --prodnav-border: var(--border-hairline); /* ProductionNav: edge and rail separator. */
  --prodnav-fg: var(--text-primary); /* ProductionNav: title and current items. */
  --prodnav-item: var(--text-secondary); /* ProductionNav: items. */
  --prodnav-muted: var(--text-muted); /* ProductionNav: labels, notes and meta. */
  --prodnav-attention: var(--text-accent); /* ProductionNav: a note that needs you. */
  --prodnav-media: var(--bg-media); /* ProductionNav: behind thumbnails. */
  --prodnav-placeholder: var(--border-placeholder); /* ProductionNav: a scene with no picture yet. */
  --prodnav-track: var(--bg-fill); /* ProductionNav: runtime track. */
  --prodnav-fill: var(--text-secondary); /* ProductionNav: runtime made. */
  --mpage-paper: var(--bg-surface); /* MangaPage: a page before it is drawn. */
  --mpage-blank: var(--bg-fill-subtle); /* MangaPage: a page not made yet, such as the back cover. */
  --mpage-edge: var(--border-hairline); /* MangaPage: the page's edge. */
  --mpage-frame: var(--border-control); /* MangaPage: a frame of the layout. */
  --mpage-busy: var(--bg-fill-subtle); /* MangaPage: a frame being drawn or waiting. */
  --mpage-text: var(--text-secondary); /* MangaPage: a frame's number and state. */
  --mpage-selected: var(--accent); /* MangaPage: the selected page, spread or region. */
  --mpage-handle: var(--text-on-media); /* MangaPage: a selection handle. */
  --mpage-dim: var(--bg-media); /* MangaPage: the page outside the selected region. */
  --mpage-cap: var(--text-secondary); /* MangaPage: the caption's title. */
  --mpage-cap-meta: var(--text-muted); /* MangaPage: the caption's quiet line. */
  --istrip-turn: var(--border-control); /* IssueStrip and PageWall: a page turn. */
  --istrip-text: var(--text-muted); /* IssueStrip: its label and key. */
  --wall-stage: var(--bg-fill); /* PageWall: a stage not reached. */
  --wall-stage-on: var(--text-primary); /* PageWall: a stage reached. */
  --layers-bg: var(--bg-surface); /* LayerStrip: the strip. */
  --layers-edge: var(--border-hairline); /* LayerStrip: its edge and divider. */
  --layers-head: var(--text-secondary); /* LayerStrip: a kind's name. */
  --layers-item: var(--bg-fill-subtle); /* LayerStrip: a layer. */
  --layers-item-selected: var(--bg-surface-raised); /* LayerStrip: the selected layer. */
  --layers-selected: var(--accent); /* LayerStrip: the selected layer's ring. */
  --layers-text: var(--text-primary); /* LayerStrip: a layer's number. */
  --layers-muted: var(--text-muted); /* LayerStrip: counts, lines and empty text. */
  --layers-empty: var(--border-placeholder); /* LayerStrip: a panel not drawn yet. */
  --mchip-bg: var(--bg-fill-subtle); /* MentionChip: the chip. */
  --mchip-text: var(--text-primary); /* MentionChip: the name. */
  --mchip-note: var(--text-muted); /* MentionChip: outfit, emotion or role. */
  --props-label: var(--text-muted); /* PropertyList: its label. */
  --props-edge: var(--border-hairline); /* PropertyList: the box and the rules between rows. */
  --props-text: var(--text-primary); /* PropertyList: a setting's name. */
  --props-value: var(--text-muted); /* PropertyList: what it is set to. */
  --sec-xs-title: var(--text-muted); /* SectionHeader xs: the small label over a section. */
  --istrip-selected: var(--accent); /* IssueStrip: the selected spread in Spread mode. */
  --wall-cap: var(--text-secondary); /* PageWall: a page's caption title. */
  --wall-cap-meta: var(--text-muted); /* PageWall: a page's stage in words. */
  --num-label: var(--text-muted); /* NumberField: the number's name. */
  --num-bg: var(--bg-canvas); /* NumberField: the value box. */
  --num-border: var(--border-control); /* NumberField: the value box's edge. */
  --num-fg: var(--text-primary); /* NumberField: the value. */
  --num-focus: var(--accent); /* NumberField: the value box's edge while typing. */
  --mpage-mask: var(--accent); /* MangaPage: the area an edit redraws. */
  --txt-primary: var(--text-primary); /* Text: titles, body and labels. */
  --txt-secondary: var(--text-secondary); /* Text: captions. */
  --txt-muted: var(--text-muted); /* Text: small lines, micro labels and eyebrows. */
  --txt-strong: var(--text-primary); /* Text: bold words inside body, captions and small lines. */
  --txt-accent: var(--text-accent); /* Text: the accent tone, for a number or a mention. */
  --tlink-fg: var(--text-secondary); /* TextLink: at rest. */
  --tlink-strong: var(--text-primary); /* TextLink: the strong one in a row. */
  --tlink-hover: var(--text-primary); /* TextLink: under the pointer. */
  --flowhead-rule: var(--border-hairline); /* FlowHeader: the rule under the bar. */
  --flowhead-title: var(--text-primary); /* FlowHeader: what is being made. */
  --flowhead-context: var(--text-muted); /* FlowHeader: what it is made for. */
  --flowfoot-rule: var(--border-hairline); /* FlowFooter: the rule over the footer. */
  --flowfoot-note: var(--text-muted); /* FlowFooter: the note beside the action. */
  --switchrow-fg: var(--text-primary); /* Switch with its label shown: the label. */
  --thumb-caption: var(--text-primary); /* Thumb: a caption's title. */
  --thumb-caption-meta: var(--text-muted); /* Thumb: a caption's quiet line. */
  --thumb-placeholder-edge: var(--border-placeholder); /* Thumb: the edge of a frame that is not made yet. */
  --thumb-placeholder-fg: var(--text-muted); /* Thumb: what the empty frame will hold. */
  --shorthand-accent: var(--text-accent); /* Shorthand: a state that waits for you. */
  --shorthand-secondary: var(--text-secondary); /* Shorthand: a settled state. */
  --monitor-guide-accent: var(--accent); /* Monitor: the guide of what is selected (an effect's area). */
  --cutsheet-page-bg: var(--bg-surface); /* CutSheet on its page: the paper. */
  --cutsheet-page-edge: var(--border-hairline); /* CutSheet on its page: the page's edge. */
  --manuscript-bg: var(--bg-surface); /* Manuscript: the script's page. */
  --manuscript-edge: var(--border-hairline); /* Manuscript: the page's edge. */
  --manuscript-rule: var(--border-hairline); /* Manuscript: the rule under its tools. */
  --composer-bg: var(--bg-surface); /* PromptComposer: its surface. */
  --composer-edge: var(--border-divider); /* PromptComposer: its edge. */
  --composer-fg: var(--text-primary); /* PromptComposer: the words. */
  --composer-rule: var(--border-hairline); /* PromptComposer: the rule over its tools. */
  --listrow-attention: var(--text-primary); /* ListRow: a line that waits for you. */
  --monitor-region: var(--accent); /* Monitor: the region an edit works on. */
  --monitor-region-fg: var(--on-accent); /* Monitor: the region's label. */
  --msec-current-bg: var(--bg-surface-raised); /* ManuscriptSection: the section being written. */
  --txt-on-media: var(--text-on-media); /* Text: over a picture or the dark stage. */
  --txt-on-media-muted: var(--text-on-media-muted); /* Text: a quiet line over a picture or the dark stage. */
  --monitor-guide: var(--white-a62); /* Monitor: a dashed guide over the picture (title-safe, an area). */
  --slidertrack-thumb-shadow: var(--black-a50); /* SliderRow: the knob's shadow. */
  --tl-lift-shadow: var(--black-a50); /* Timeline: the shadow under a track being moved. */
  --ib-primary-bg: var(--action-primary); /* IconButton: the primary action as an icon alone, filled (a phone's floating action). */
  --thumb-paper: var(--neutral-0); /* Thumb: the white a character or face sheet is drawn on, in either theme. */
  --state-dot: var(--accent); /* The small accent dot that marks a state: beside the current item in a list or a nav (its name in ink weight), before a line that waits for the person, on a rail icon. Every component draws its dot with this one token. */
  --button-destructive-bg: var(--danger); /* Button destructive: the fill of the action that confirms a deletion or takes access away. */
  --button-destructive-fg: var(--on-danger); /* Button destructive: its label and icon. */
  --tlink-destructive: var(--text-danger); /* TextLink destructive: the quiet way into a deletion. */
  --option-card-selected-border: var(--accent); /* OptionTiles large: chosen edge. */
  --option-card-icon: var(--accent); /* OptionTiles large: icon. */
  --option-card-text: var(--text-secondary); /* OptionTiles large: description. */
  --option-card-foot: var(--text-muted); /* OptionTiles large: footnote. */
  --chip-icon: var(--accent); /* Chip: leading icon. */
  --chip-soft-selected-bg: var(--accent-subtle); /* Chip, soft: selected fill (multi-select). */
  --chip-soft-selected-border: var(--accent); /* Chip, soft: selected edge. */
  --character-card-bg: var(--bg-surface); /* Kit CharacterCard: card. */
  --character-card-border: var(--border-divider); /* Kit CharacterCard: edge. */
  --character-card-stage: var(--bg-media); /* Kit CharacterCard: stage behind silhouette or avatar. */
  --character-card-role: var(--text-accent); /* Kit CharacterCard: role eyebrow. */
  --look-plate-bg: var(--neutral-0); /* Kit LookPlate: white behind portraits and sheets, both themes. */
  --look-plate-border: var(--border-hairline); /* Kit LookPlate: edge. */
  --look-plate-current: var(--accent); /* Kit LookPlate: the look shown or worn. */
  --look-plate-add-border: var(--border-placeholder); /* Kit LookPlate: add tile edge. */
  --activity-bg: var(--bg-surface); /* Kit Activity: panel. */
  --activity-row-bg: var(--bg-fill-subtle); /* Kit Activity: sidebar row. */
  --activity-bar: var(--accent); /* Kit Activity: job progress. */
  --activity-group: var(--text-muted); /* Kit Activity: group heading. */
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 30px rgba(0,0,0,0.35); /* Every glass surface outside media. */
  --shadow-glass-media: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 30px rgba(0,0,0,0.35); /* Glass over video and pages, both themes. */
  --shadow-overlay: 0 18px 40px rgba(0,0,0,0.6); /* Menus and popovers. */
  --shadow-page: 0 30px 60px rgba(0,0,0,0.55); /* A manga page or spread lifted off bg-media. */
  --shadow-portrait-ring: 0 0 0 2px rgba(255,255,255,0.12); /* The quiet ring around a cast portrait. */
}
[data-theme="light"] {
  --bg-canvas: var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-surface-raised: var(--neutral-100);
  --bg-surface-hover: var(--neutral-150);
  --bg-fill-subtle: var(--shade-a06);
  --bg-fill: var(--shade-a12);
  --bg-fill-selected: var(--shade-a08);
  --bg-glass: var(--glass-light-a62);
  --bg-glass-strong: var(--glass-light-a90);
  --bg-overlay: var(--shade-a40);
  --text-primary: var(--neutral-925);
  --text-secondary: var(--neutral-800);
  --text-muted: var(--neutral-600);
  --text-inverse: var(--neutral-0);
  --text-accent: var(--camellia-600);
  --border-hairline: var(--shade-a08);
  --border-divider: var(--shade-a12);
  --border-placeholder: var(--shade-a24);
  --border-control: var(--shade-a52);
  --border-glass: var(--white-a70);
  --highlight-glass: var(--white-a70);
  --action-primary: var(--neutral-925);
  --action-secondary: var(--shade-a12);
  --accent: var(--camellia-600);
  --accent-subtle: var(--camellia-600-a10);
  --on-accent: var(--neutral-0);
  --danger: var(--vermilion-600);
  --on-danger: var(--neutral-0);
  --text-danger: var(--vermilion-600);
  --progress-track: var(--shade-a16);
  --progress-fill: var(--accent);
  --focus-ring: var(--neutral-925);
  --bg-media: var(--neutral-950);
  --text-on-media: var(--neutral-0);
  --text-on-media-muted: var(--neutral-400);
  --bg-glass-media: var(--glass-dark-a42);
  --bg-glass-media-strong: var(--glass-dark-a82);
  --border-glass-media: var(--white-a16);
  --bg-scrim-label: var(--scrim-a78);
  --bg-scrim-caption: var(--black-a72);
  --bg-scrim-art: var(--neutral-950);
  --action-media: var(--neutral-0);
  --text-on-action-media: var(--neutral-925);
  --action-media-secondary: var(--glass-dark-a42);
  --media-progress-track: var(--white-a28);
  --media-progress-buffer: var(--white-a45);
  --bg-paper: var(--paper-50);
  --button-primary-bg: var(--action-primary);
  --button-primary-fg: var(--text-inverse);
  --button-secondary-bg: var(--action-secondary);
  --button-secondary-fg: var(--text-primary);
  --button-outline-border: var(--border-control);
  --button-outline-fg: var(--text-primary);
  --button-ghost-fg: var(--text-secondary);
  --button-ghost-hover-bg: var(--bg-fill-subtle);
  --button-disabled-bg: var(--bg-fill-subtle);
  --button-disabled-fg: var(--text-muted);
  --button-media-bg: var(--action-media);
  --button-media-fg: var(--text-on-action-media);
  --button-media-secondary-bg: var(--action-media-secondary);
  --button-media-secondary-fg: var(--text-on-media);
  --button-media-secondary-border: var(--border-glass-media);
  --icon-button-solid-bg: var(--bg-surface-raised);
  --icon-button-solid-hover-bg: var(--bg-surface-hover);
  --icon-button-fg: var(--text-primary);
  --icon-button-glass-bg: var(--bg-glass);
  --icon-button-glass-border: var(--border-glass);
  --icon-button-media-bg: var(--bg-glass-media);
  --icon-button-media-border: var(--border-glass-media);
  --icon-button-media-fg: var(--text-on-media);
  --icon-button-media-focus: var(--text-on-media);
  --icon-button-pressed-fg: var(--accent);
  --topnav-link-fg: var(--text-secondary);
  --topnav-link-active-fg: var(--text-primary);
  --topnav-indicator: var(--accent);
  --topnav-brand-fg: var(--text-primary);
  --tabbar-bg: var(--bg-glass);
  --tabbar-border: var(--border-glass);
  --tabbar-item-fg: var(--text-secondary);
  --tabbar-item-active-bg: var(--action-primary);
  --tabbar-item-active-fg: var(--text-inverse);
  --tabbar-create-fg: var(--text-primary);
  --section-header-title: var(--text-primary);
  --section-header-subtitle: var(--text-muted);
  --section-header-action: var(--text-secondary);
  --segmented-track-bg: var(--bg-fill-subtle);
  --segmented-item-fg: var(--text-primary);
  --segmented-item-active-bg: var(--action-primary);
  --segmented-item-active-fg: var(--text-inverse);
  --chip-bg: var(--bg-fill-subtle);
  --chip-fg: var(--text-primary);
  --chip-active-bg: var(--action-primary);
  --chip-active-fg: var(--text-inverse);
  --badge-bg: var(--bg-scrim-label);
  --badge-fg: var(--text-on-media);
  --badge-new-bg: var(--text-on-media);
  --badge-new-fg: var(--bg-media);
  --badge-alert-bg: var(--accent);
  --badge-alert-fg: var(--on-accent);
  --media-card-title: var(--text-primary);
  --media-card-meta: var(--text-muted);
  --media-card-placeholder: var(--bg-surface);
  --media-card-progress-track: var(--media-progress-track);
  --media-card-progress-fill: var(--accent);
  --thumbnail-ring-active: var(--accent);
  --thumbnail-ring: var(--border-glass-media);
  --cast-avatar-name: var(--text-primary);
  --cast-avatar-role: var(--text-muted);
  --cast-avatar-placeholder: var(--bg-surface-raised);
  --premiere-slot-border: var(--border-placeholder);
  --premiere-slot-when: var(--text-accent);
  --premiere-slot-title: var(--text-primary);
  --premiere-slot-frame: var(--bg-surface);
  --scrubber-track: var(--media-progress-track);
  --scrubber-buffer: var(--media-progress-buffer);
  --scrubber-fill: var(--progress-fill);
  --scrubber-thumb: var(--text-on-media);
  --scrubber-time: var(--text-on-media);
  --scrubber-marker: var(--bg-media);
  --caption-bg: var(--bg-scrim-caption);
  --caption-fg: var(--text-on-media);
  --sheet-bg: var(--bg-glass-strong);
  --sheet-media-bg: var(--bg-glass-media-strong);
  --sheet-handle: var(--border-control);
  --sheet-scrim: var(--bg-overlay);
  --sheet-row-selected-bg: var(--bg-fill-selected);
  --sheet-check: var(--accent);
  --sheet-media-done-bg: var(--action-media);
  --sheet-media-done-fg: var(--text-on-action-media);
  --segmented-glass-bg: var(--bg-glass-media);
  --segmented-glass-border: var(--border-glass-media);
  --segmented-glass-item-fg: var(--text-on-media);
  --segmented-glass-active-bg: var(--action-media);
  --segmented-glass-active-fg: var(--text-on-action-media);
  --media-card-scrim: var(--bg-scrim-label);
  --premiere-slot-subtitle: var(--text-muted);
  --sheet-fg: var(--text-primary);
  --sheet-title: var(--text-muted);
  --sheet-border: var(--border-glass);
  --sheet-media-fg: var(--text-on-media);
  --sheet-media-title: var(--text-on-media-muted);
  --sheet-media-border: var(--border-glass-media);
  --icon-fg: var(--text-primary);
  --option-tile-bg: var(--bg-fill-subtle);
  --option-tile-fg: var(--text-secondary);
  --option-tile-hover-bg: var(--bg-fill);
  --option-tile-selected-bg: var(--accent-subtle);
  --option-tile-selected-border: var(--accent);
  --option-tile-selected-fg: var(--text-primary);
  --option-tile-label: var(--text-muted);
  --option-tile-note: var(--text-muted);
  --panel-bg: var(--bg-surface);
  --panel-border: var(--border-hairline);
  --panel-icon: var(--accent);
  --panel-title: var(--text-primary);
  --panel-subtitle: var(--text-muted);
  --tooltip-bg: var(--bg-surface-raised);
  --tooltip-fg: var(--text-primary);
  --tooltip-border: var(--border-divider);
  --field-help-fg: var(--text-muted);
  --dialog-bg: var(--bg-surface);
  --dialog-border: var(--border-divider);
  --dialog-scrim: var(--bg-overlay);
  --dialog-title: var(--text-primary);
  --dialog-description: var(--text-muted);
  --fragments-vault-bg: var(--spirit-vault);
  --fragments-rim: var(--spirit-500);
  --fragments-eyebrow: var(--accent);
  --fragments-amount: var(--text-on-media);
  --fragments-caption: var(--text-on-media-muted);
  --sidebar-bg: var(--bg-surface);
  --sidebar-border: var(--border-hairline);
  --sidebar-group: var(--text-muted);
  --sidebar-item-fg: var(--text-secondary);
  --sidebar-item-hover-bg: var(--bg-fill-subtle);
  --sidebar-item-active-fg: var(--text-primary);
  --stepper-fg: var(--text-muted);
  --stepper-current-fg: var(--text-primary);
  --stepper-current-bg: var(--action-primary);
  --stepper-current-num: var(--text-inverse);
  --stepper-done-bg: var(--bg-fill);
  --stepper-ring: var(--border-control);
  --stepper-sep: var(--border-divider);
  --field-label: var(--text-muted);
  --field-hint: var(--text-muted);
  --field-bg: var(--bg-canvas);
  --field-border: var(--border-control);
  --field-fg: var(--text-primary);
  --field-placeholder: var(--text-muted);
  --field-highlight: var(--accent);
  --select-open-border: var(--accent);
  --select-menu-bg: var(--bg-surface-raised);
  --select-menu-border: var(--border-divider);
  --select-option-hover-bg: var(--bg-fill-subtle);
  --select-option-selected-bg: var(--bg-fill-selected);
  --select-option-check: var(--accent);
  --notice-info-bg: var(--bg-fill-subtle);
  --notice-info-icon: var(--text-muted);
  --notice-attention-bg: var(--accent-subtle);
  --notice-attention-icon: var(--text-accent);
  --notice-title: var(--text-primary);
  --notice-text: var(--text-secondary);
  --toast-bg: var(--bg-surface);
  --toast-border: var(--border-divider);
  --toast-icon: var(--accent);
  --drop-border: var(--border-placeholder);
  --drop-hover-border: var(--border-control);
  --drop-fg: var(--text-muted);
  --drop-title: var(--text-primary);
  --drop-icon: var(--accent);
  --drop-filled-bg: var(--bg-surface-raised);
  --option-card-bg: var(--bg-surface);
  --option-card-border: var(--border-divider);
  --option-card-selected-bg: var(--accent-subtle);
  --glyph-event: var(--text-primary);
  --glyph-muted: var(--text-muted);
  --panel-eyebrow: var(--text-accent);
  --panel-section-label: var(--text-muted);
  --state-arrow: var(--text-muted);
  --entity-name: var(--text-primary);
  --entity-chip-border: var(--border-divider);
  --entity-chip-fg: var(--text-muted);
  --entity-visual-bg: var(--bg-fill-subtle);
  --entity-visual-fg: var(--text-muted);
  --entity-pair-gap: var(--bg-surface);
  --question-pip: var(--bg-fill);
  --question-pip-on: var(--accent);
  --map-bg: var(--bg-surface);
  --map-border: var(--border-hairline);
  --map-edge: var(--border-divider);
  --map-edge-active: var(--accent);
  --map-hub-ring: var(--border-divider);
  --map-focus: var(--accent);
  --map-node-bg: var(--bg-canvas);
  --map-node-empty: var(--bg-surface-raised);
  --map-label: var(--text-secondary);
  --map-label-strong: var(--text-primary);
  --map-label-accent: var(--text-accent);
  --map-legend-bg: var(--bg-canvas);
  --scrub-track: var(--bg-fill);
  --scrub-fill: var(--accent);
  --scrub-handle: var(--accent);
  --scrub-handle-fg: var(--on-accent);
  --scrub-node-bg: var(--bg-canvas);
  --scrub-node-ring: var(--border-divider);
  --scrub-node-ring-on: var(--border-control);
  --scrub-arc: var(--border-divider);
  --scrub-label: var(--text-muted);
  --scrub-label-on: var(--text-secondary);
  --scrub-unplaced-border: var(--border-placeholder);
  --maki-name: var(--text-accent);
  --maki-text: var(--text-primary);
  --maki-quote-bg: var(--bg-canvas);
  --maki-quote-fg: var(--text-secondary);
  --chat-mine-bg: var(--accent-subtle);
  --maki-card-bg: var(--bg-canvas);
  --maki-card-border: var(--border-divider);
  --maki-card-eyebrow: var(--text-muted);
  --maki-check-fg: var(--text-secondary);
  --maki-check-icon: var(--text-accent);
  --maki-composer-bg: var(--bg-canvas);
  --maki-composer-border: var(--border-control);
  --maki-composer-placeholder: var(--text-muted);
  --maki-divider: var(--border-hairline);
  --mention-character-bg: var(--accent-subtle);
  --mention-character-fg: var(--text-accent);
  --mention-place-fg: var(--text-primary);
  --mention-place-rule: var(--text-muted);
  --mention-active-ring: var(--accent);
  --manuscript-number: var(--text-accent);
  --manuscript-text: var(--text-primary);
  --manuscript-meta: var(--text-muted);
  --proposal-bg: var(--bg-surface);
  --proposal-border: var(--border-hairline);
  --proposal-inferred-border: var(--border-placeholder);
  --proposal-conflict-border: var(--accent);
  --proposal-title: var(--text-primary);
  --proposal-note: var(--text-muted);
  --question-bg: var(--bg-surface);
  --question-border: var(--border-hairline);
  --question-selected: var(--accent);
  --question-title: var(--text-primary);
  --question-note: var(--text-muted);
  --question-event-bg: var(--bg-canvas);
  --question-empty-border: var(--border-placeholder);
  --popover-bg: var(--bg-surface-raised);
  --popover-border: var(--border-divider);
  --popover-fg: var(--text-primary);
  --popover-muted: var(--text-muted);
  --popover-group: var(--text-muted);
  --popover-slot-bg: var(--bg-fill-subtle);
  --popover-selected-bg: var(--accent-subtle);
  --popover-check: var(--text-accent);
  --statusbar-bg: var(--bg-surface);
  --statusbar-border: var(--border-hairline);
  --statusbar-fg: var(--text-muted);
  --statusbar-sep: var(--border-divider);
  --toolbar-bg: var(--bg-surface-raised);
  --toolbar-border: var(--border-divider);
  --timeline-bg: var(--bg-surface);
  --timeline-border: var(--border-hairline);
  --timeline-label: var(--text-muted);
  --timeline-ruler: var(--text-muted);
  --timeline-marker-bg: var(--accent-subtle);
  --timeline-marker-fg: var(--text-accent);
  --timeline-item-bg: var(--bg-surface-raised);
  --timeline-item-border: var(--border-divider);
  --timeline-audio-bg: var(--bg-fill-subtle);
  --timeline-wave: var(--text-muted);
  --timeline-text-bg: var(--bg-fill-subtle);
  --timeline-effect-bg: var(--accent-subtle);
  --timeline-selected: var(--accent);
  --timeline-gap-border: var(--border-placeholder);
  --timeline-label-bg: var(--bg-scrim-label);
  --timeline-label-fg: var(--text-on-media);
  --timeline-playhead: var(--accent);
  --screenplay-text: var(--text-primary);
  --screenplay-meta: var(--text-muted);
  --screenplay-flag: var(--accent);
  --pbar-bg: var(--bg-fill-subtle);
  --pbar-border: var(--border-hairline);
  --pbar-cut: var(--bg-surface-raised);
  --pbar-partial: var(--border-control);
  --pbar-missing: var(--border-placeholder);
  --pbar-label: var(--text-secondary);
  --pbar-meta: var(--text-muted);
  --pbar-window: var(--accent);
  --pbar-mark-fg: var(--on-accent);
  --dline-speaker: var(--text-primary);
  --dline-text: var(--text-primary);
  --dline-meta: var(--text-muted);
  --cutsheet-text: var(--text-primary);
  --cutsheet-head: var(--text-muted);
  --cutsheet-rule: var(--border-hairline);
  --cutsheet-rule-head: var(--border-divider);
  --cutsheet-selected-bg: var(--bg-surface-raised);
  --cutsheet-changed: var(--text-primary);
  --cut-number: var(--text-primary);
  --cut-number-selected: var(--text-accent);
  --cut-note: var(--text-muted);
  --cut-state-border: var(--border-control);
  --cut-state-ok-bg: var(--text-primary);
  --cut-state-ok-fg: var(--bg-canvas);
  --shorthand-fg: var(--text-secondary);
  --revision-from: var(--text-muted);
  --revision-mark: var(--accent);
  --slip-bg: var(--accent-subtle);
  --slip-fg: var(--text-primary);
  --slip-label: var(--text-accent);
  --slip-done-border: var(--accent-subtle);
  --slip-done-fg: var(--text-secondary);
  --tsheet-bg: var(--bg-canvas);
  --tsheet-tick: var(--border-hairline);
  --tsheet-tick-second: var(--border-control);
  --tsheet-span: var(--text-secondary);
  --tsheet-key-bg: var(--text-primary);
  --tsheet-key-fg: var(--bg-canvas);
  --tsheet-meta: var(--text-muted);
  --tsheet-label: var(--text-secondary);
  --tsheet-label-strong: var(--text-primary);
  --timeline-video-edge: var(--border-divider);
  --timeline-dialogue-bg: var(--bg-fill-subtle);
  --timeline-music-bg: var(--bg-fill-subtle);
  --timeline-audio-wave: var(--text-muted);
  --timeline-dialogue-wave: var(--text-secondary);
  --timeline-music-wave: var(--text-muted);
  --timeline-caption-fg: var(--text-secondary);
  --timeline-effect-fg: var(--text-secondary);
  --prodnav-bg: var(--bg-surface);
  --prodnav-border: var(--border-hairline);
  --prodnav-fg: var(--text-primary);
  --prodnav-item: var(--text-secondary);
  --prodnav-muted: var(--text-muted);
  --prodnav-attention: var(--text-accent);
  --prodnav-media: var(--bg-media);
  --prodnav-placeholder: var(--border-placeholder);
  --prodnav-track: var(--bg-fill);
  --prodnav-fill: var(--text-secondary);
  --mpage-paper: var(--bg-surface);
  --mpage-blank: var(--bg-fill-subtle);
  --mpage-edge: var(--border-hairline);
  --mpage-frame: var(--border-control);
  --mpage-busy: var(--bg-fill-subtle);
  --mpage-text: var(--text-secondary);
  --mpage-selected: var(--accent);
  --mpage-handle: var(--text-on-media);
  --mpage-dim: var(--bg-media);
  --mpage-cap: var(--text-secondary);
  --mpage-cap-meta: var(--text-muted);
  --istrip-turn: var(--border-control);
  --istrip-text: var(--text-muted);
  --wall-stage: var(--bg-fill);
  --wall-stage-on: var(--text-primary);
  --layers-bg: var(--bg-surface);
  --layers-edge: var(--border-hairline);
  --layers-head: var(--text-secondary);
  --layers-item: var(--bg-fill-subtle);
  --layers-item-selected: var(--bg-surface-raised);
  --layers-selected: var(--accent);
  --layers-text: var(--text-primary);
  --layers-muted: var(--text-muted);
  --layers-empty: var(--border-placeholder);
  --mchip-bg: var(--bg-fill-subtle);
  --mchip-text: var(--text-primary);
  --mchip-note: var(--text-muted);
  --props-label: var(--text-muted);
  --props-edge: var(--border-hairline);
  --props-text: var(--text-primary);
  --props-value: var(--text-muted);
  --sec-xs-title: var(--text-muted);
  --istrip-selected: var(--accent);
  --wall-cap: var(--text-secondary);
  --wall-cap-meta: var(--text-muted);
  --num-label: var(--text-muted);
  --num-bg: var(--bg-canvas);
  --num-border: var(--border-control);
  --num-fg: var(--text-primary);
  --num-focus: var(--accent);
  --mpage-mask: var(--accent);
  --txt-primary: var(--text-primary);
  --txt-secondary: var(--text-secondary);
  --txt-muted: var(--text-muted);
  --txt-strong: var(--text-primary);
  --txt-accent: var(--text-accent);
  --tlink-fg: var(--text-secondary);
  --tlink-strong: var(--text-primary);
  --tlink-hover: var(--text-primary);
  --flowhead-rule: var(--border-hairline);
  --flowhead-title: var(--text-primary);
  --flowhead-context: var(--text-muted);
  --flowfoot-rule: var(--border-hairline);
  --flowfoot-note: var(--text-muted);
  --switchrow-fg: var(--text-primary);
  --thumb-caption: var(--text-primary);
  --thumb-caption-meta: var(--text-muted);
  --thumb-placeholder-edge: var(--border-placeholder);
  --thumb-placeholder-fg: var(--text-muted);
  --shorthand-accent: var(--text-accent);
  --shorthand-secondary: var(--text-secondary);
  --monitor-guide-accent: var(--accent);
  --cutsheet-page-bg: var(--bg-surface);
  --cutsheet-page-edge: var(--border-hairline);
  --manuscript-bg: var(--bg-surface);
  --manuscript-edge: var(--border-hairline);
  --manuscript-rule: var(--border-hairline);
  --composer-bg: var(--bg-surface);
  --composer-edge: var(--border-divider);
  --composer-fg: var(--text-primary);
  --composer-rule: var(--border-hairline);
  --listrow-attention: var(--text-primary);
  --monitor-region: var(--accent);
  --monitor-region-fg: var(--on-accent);
  --msec-current-bg: var(--bg-surface-raised);
  --txt-on-media: var(--text-on-media);
  --txt-on-media-muted: var(--text-on-media-muted);
  --monitor-guide: var(--white-a62);
  --slidertrack-thumb-shadow: var(--black-a50);
  --tl-lift-shadow: var(--black-a50);
  --ib-primary-bg: var(--action-primary);
  --thumb-paper: var(--neutral-0);
  --state-dot: var(--accent);
  --button-destructive-bg: var(--danger);
  --button-destructive-fg: var(--on-danger);
  --tlink-destructive: var(--text-danger);
  --option-card-selected-border: var(--accent);
  --option-card-icon: var(--accent);
  --option-card-text: var(--text-secondary);
  --option-card-foot: var(--text-muted);
  --chip-icon: var(--accent);
  --chip-soft-selected-bg: var(--accent-subtle);
  --chip-soft-selected-border: var(--accent);
  --character-card-bg: var(--bg-surface);
  --character-card-border: var(--border-divider);
  --character-card-stage: var(--bg-media);
  --character-card-role: var(--text-accent);
  --look-plate-bg: var(--neutral-0);
  --look-plate-border: var(--border-hairline);
  --look-plate-current: var(--accent);
  --look-plate-add-border: var(--border-placeholder);
  --activity-bg: var(--bg-surface);
  --activity-row-bg: var(--bg-fill-subtle);
  --activity-bar: var(--accent);
  --activity-group: var(--text-muted);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 30px rgba(11,10,16,0.12);
  --shadow-overlay: 0 18px 40px rgba(11,10,16,0.16);
  --shadow-portrait-ring: 0 0 0 2px rgba(11,10,16,0.1);
}
:root {
  --space-1: 4px; /* Icon to label inside a pill. */
  --space-2: 8px; /* Gap between glass buttons; chip gaps. */
  --space-3: 12px; /* Gap between buttons in a row; phone screen inset for floating chrome. */
  --space-4: 16px; /* Card padding; gap between cards in a row. */
  --space-5: 20px; /* Phone page gutter. */
  --space-6: 24px; /* Gap between a section heading and its content on desktop; player inset. */
  --space-8: 32px; /* Gap between section-nav links; phone gap between sections. */
  --space-10: 40px; /* Gap between top-nav groups. */
  --space-14: 56px; /* Desktop page gutter. */
  --space-16: 64px; /* Gap between sections on desktop. */
  --radius-xs: 4px; /* Manga covers and page thumbnails: paper has almost no corner. */
  --radius-sm: 8px; /* Small thumbnails and the focus ring's corner. */
  --radius-md: 12px; /* Desktop buttons, list rows, phone thumbnails. */
  --radius-lg: 16px; /* Cards, episode rows, the desktop player and short frames. */
  --radius-xl: 24px; /* Floating bars over a page (the reader's page strip). */
  --radius-2xl: 32px; /* Bottom sheets and the phone tab bar. */
  --radius-full: 9999px; /* Pills and circles: every phone button, avatars, chips. */
  --size-target: 44px; /* The minimum hit area of anything you can tap or click. */
  --size-control-sm: 36px; /* Small buttons and segments on desktop only. */
  --size-control-md: 44px; /* Default buttons, icon buttons, segments. */
  --size-control-lg: 52px; /* Hero actions on desktop (Play), the action rail on desktop. */
  --size-tabbar: 64px; /* Phone tab bar height and the Create button diameter. */
  --size-avatar-lg: 104px; /* Cast portraits on the series page, desktop. */
  --size-avatar-md: 72px; /* Cast portraits on phone and in the player. */
  --blur-glass: blur(22px) saturate(1.8); /* backdrop-filter on every glass surface. */
  --opacity-disabled: 0.35; /* A control that cannot be used right now (first page, last page). */
  --motion-instant: 100ms; /* Press feedback and reduced-motion cross-fades. */
  --motion-fast: 160ms; /* Hover and selected colour, toggles, chips. */
  --motion-base: 240ms; /* Panels, menus, tooltips, cards changing state. */
  --motion-slow: 360ms; /* Sheets, dialogs and drawers entering. */
  --motion-slower: 560ms; /* Artwork reveals: a portrait or sheet arriving. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* Anything that stays on screen. */
  --ease-enter: cubic-bezier(0, 0, 0, 1); /* Arriving: decelerates into place. */
  --ease-exit: cubic-bezier(0.3, 0, 1, 1); /* Leaving: accelerates away. */
  --font-display: "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-title-1: 700 30px/36px var(--font-display); /* Page title on desktop: the episode title on the player. */
  --text-title-2: 700 24px/30px var(--font-display); /* Section heading on desktop; page title on phone. */
  --text-title-3: 700 20px/26px var(--font-display); /* Section heading on phone; sidebar headings on desktop. */
  --text-title-4: 700 17px/22px var(--font-display); /* Card and creator titles. */
  --text-body-lg: 400 17px/26px var(--font-sans); /* The hero logline. */
  --text-body: 400 15px/24px var(--font-sans); /* Descriptions and running text. */
  --text-body-sm: 400 14px/20px var(--font-sans); /* Phone running text; metadata lines on desktop. */
  --text-label: 600 14px/20px var(--font-sans); /* Nav links, chips, segment labels, list titles. */
  --text-button: 700 14px/18px var(--font-sans); /* Button label at size md and sm. */
  --text-button-lg: 700 16px/20px var(--font-sans); /* Button label at size lg. */
  --text-caption: 500 13px/18px var(--font-sans); /* Section subtitles and secondary metadata. */
  --text-micro: 700 12px/16px var(--font-sans); /* Duration and count labels on artwork, tab bar labels. The floor of the scale. */
  --text-subtitle: 600 24px/32px var(--font-sans); /* Captions in the desktop player, on bg-scrim-caption. */
  --text-subtitle-sm: 600 16px/22px var(--font-sans); /* Captions in shorts and the phone player, on bg-scrim-caption. */
}
.title-1 {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.title-2 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: 0;
}
.title-3 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 0;
}
.title-4 {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 0;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.button {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0;
}
.button-lg {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.micro {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0;
}
.subtitle {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0;
}
.subtitle-sm {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 0;
}