/* Sakuga 2.0 — generated from tokens.json by scripts/build-tokens.mjs */
: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 through semantic tokens, and directly by the Fragments eyebrow, which sits on the always-dark vault. */
  --camellia-600: #c2335f; /* Core. Deep camellia, the Light accent. Reached only through semantic tokens. */
  --camellia-700: #b42354; /* Core. Camellia a step deeper, the Light accent for text: it reads at 4.5:1 on the accent tint as well as on every surface. Reached through semantic tokens, and directly by LookPlate's soft tag on its always-white plate. */
  --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. */
  --google-ink: #131314; /* Core. Google's dark sign-in button fill, as Google's button rules set it. Reached only through semantic tokens. */
  --google-ink-edge: #8e918f; /* Core. The edge of Google's dark sign-in button. Reached only through semantic tokens. */
  --google-ink-text: #e3e3e3; /* Core. The label of Google's dark sign-in button. Reached only through semantic tokens. */
  --google-paper-edge: #747775; /* Core. The edge of Google's light sign-in button. Reached only through semantic tokens. */
  --google-paper-text: #1f1f1f; /* Core. The label of Google's light sign-in button. Reached only through semantic tokens. */
  --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, bg-surface, bg-surface-raised and the accent tint (accent-subtle). */
  --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. */
  --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-strong: var(--scrim-a78); /* Small labels on artwork: durations, view counts, 'New'. Text: text-on-media. */
  --bg-scrim: 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. */
  --bg-unplayed-media: var(--white-a28); /* Unplayed part of a scrubber over video. */
  --bg-buffered-media: 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-strong); /* 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-spine: var(--black-a50); /* MediaCard manga: the flat band of the binding down the cover's left edge, the same in both themes. */
  --media-card-meta: var(--text-muted); /* MediaCard: metadata under the title. */
  --media-card-placeholder: var(--bg-surface); /* MediaCard: frame behind artwork while it loads. */
  --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(--bg-unplayed-media); /* Scrubber: unplayed range. */
  --scrubber-buffer: var(--bg-buffered-media); /* Scrubber: buffered range. */
  --scrubber-fill: var(--accent); /* 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: 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-strong); /* 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(--camellia-400); /* Fragments balance card: the pink FRAGMENTS eyebrow. The Dark accent in both themes, because the vault is dark in both. */
  --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-strong); /* 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. */
  --audio-play-media-bg: var(--action-media); /* AudioPlayer: the play button over art, white as Button media is. */
  --audio-play-media-fg: var(--text-on-action-media); /* AudioPlayer: the play glyph over art, dark on the white button. */
  --provider-button-apple-bg: var(--action-primary); /* ProviderButton apple: Apple's fill, white on Dark and black on Light, as Apple asks. */
  --provider-button-apple-fg: var(--text-inverse); /* ProviderButton apple: label and mark. */
  --provider-button-google-bg: var(--google-ink); /* ProviderButton google: Google's fill. Google's own colours, read straight from the core: a provider's brand is theirs. */
  --provider-button-google-fg: var(--google-ink-text); /* ProviderButton google: label. Google's own colours, read straight from the core: a provider's brand is theirs. */
  --provider-button-google-edge: var(--google-ink-edge); /* ProviderButton google: the 1px edge. Google's own colours, read straight from the core: a provider's brand is theirs. */
  --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. */
  --look-plate-tag-soft-bg: var(--camellia-600-a10); /* Kit LookPlate: the soft tag (Review). The Light accent tint in both themes, because the plate is white in both. */
  --look-plate-tag-soft-fg: var(--camellia-700); /* Kit LookPlate: the soft tag's words. The Light accent text in both themes, on the white plate. */
  --activity-bg: var(--bg-surface); /* Kit Activity: panel. */
  --activity-row-bg: var(--bg-fill-subtle); /* Kit Activity: sidebar row. */
  --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-deep: 0 30px 60px rgba(0,0,0,0.55); /* A manga page or spread lifted off bg-media. */
  --cast-avatar-portrait-ring: 0 0 0 2px rgba(255,255,255,0.12); /* CastAvatar: the ring around a portrait. The quiet ring around a cast portrait. */
  --shadow-raised: 0 2px 6px rgba(0,0,0,.5); /* A handle you grab: scrubber and slider thumbs; a logo over art. Both themes. */
}
[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-700);
  --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);
  --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-strong: var(--scrim-a78);
  --bg-scrim: 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);
  --bg-unplayed-media: var(--white-a28);
  --bg-buffered-media: 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-strong);
  --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-spine: var(--black-a50);
  --media-card-meta: var(--text-muted);
  --media-card-placeholder: var(--bg-surface);
  --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(--bg-unplayed-media);
  --scrubber-buffer: var(--bg-buffered-media);
  --scrubber-fill: var(--accent);
  --scrubber-thumb: var(--text-on-media);
  --scrubber-time: var(--text-on-media);
  --scrubber-marker: var(--bg-media);
  --caption-bg: var(--bg-scrim);
  --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-strong);
  --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(--camellia-400);
  --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-strong);
  --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);
  --audio-play-media-bg: var(--action-media);
  --audio-play-media-fg: var(--text-on-action-media);
  --provider-button-apple-bg: var(--action-primary);
  --provider-button-apple-fg: var(--text-inverse);
  --provider-button-google-bg: var(--neutral-0);
  --provider-button-google-fg: var(--google-paper-text);
  --provider-button-google-edge: var(--google-paper-edge);
  --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);
  --look-plate-tag-soft-bg: var(--camellia-600-a10);
  --look-plate-tag-soft-fg: var(--camellia-700);
  --activity-bg: var(--bg-surface);
  --activity-row-bg: var(--bg-fill-subtle);
  --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);
  --cast-avatar-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. */
  --space-0-5: 2px; /* Core. A half step: lines of one text block, a tag's top and bottom. */
  --space-1-5: 6px; /* Core. An icon or dot beside its label. */
  --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. */
  --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). */
  --opacity-muted: 0.6; /* Something set back: done, muted, off. */
  --opacity-dim: 0.2; /* What sits behind a focus: the rest of the story map. */
  --opacity-legible: 0.8; /* Something set back that still carries words: a time on a busy bar, the state a change came from. Keeps 4.5:1. */
  --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-display: 700 64px/64px var(--font-display); /* A name that is the whole page, as a character's. One per page at most. */
  --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-lead: 400 18px/28px var(--font-sans); /* The paragraph that opens a page: the hero logline. One per page at most. */
  --text-body-lg: 400 15px/24px var(--font-sans); /* Reading text: manuscripts, the screenplay, descriptions. */
  --text-body: 400 14px/20px var(--font-sans); /* Interface text: phone running text, metadata lines on desktop. */
  --text-label: 600 14px/20px var(--font-sans); /* Nav links, chips, segment labels, list titles. */
  --text-label-bold: 700 14px/18px var(--font-sans); /* Button label at size md and sm. */
  --text-caption: 500 13px/18px var(--font-sans); /* Section subtitles and secondary metadata. */
  --text-caption-strong: 600 13px/18px var(--font-sans); /* A name in a row. */
  --text-small: 500 12px/16px var(--font-sans); /* Small print. */
  --text-small-strong: 600 12px/16px var(--font-sans); /* Small labels in the tools. */
  --text-micro: 700 12px/16px var(--font-sans); /* Duration and count labels on artwork, tab bar labels. The floor of the scale. */
  --text-eyebrow: 700 11px/14px var(--font-sans); /* What kind of thing it is, in capitals: the one style at 11px, where Apple and Material stop too. */
  --text-subtitle: 600 24px/32px var(--font-sans); /* Captions in the desktop player, on bg-scrim. */
  --text-subtitle-sm: 600 16px/22px var(--font-sans); /* Captions in shorts and the phone player, on bg-scrim. */
}
.display {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 64px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.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;
}
.lead {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  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;
}
.label-bold {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.caption-strong {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
}
.small-strong {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0;
}
.micro {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.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;
}
/* Dimension roles: the semantic layer every component token reads. Copied from Sakuga Version 141's bundle.css, where the
   Design System type keeps them because its token compiler drops aliased dimensions. tokens.css carries them, so it stands alone. */
:root{
  /* Space between things */ --gap-2xs:var(--space-0-5);--gap-xs:var(--space-1);--gap-sm:var(--space-1-5);--gap-md:var(--space-2);--gap-lg:var(--space-3);--gap-xl:var(--space-4);--gap-2xl:var(--space-6);--gap-3xl:var(--space-10);
  /* Space inside things */ --inset-2xs:var(--space-0-5);--inset-xs:var(--space-1);--inset-sm:var(--space-2);--inset-md:var(--space-3);--inset-lg:var(--space-4);--inset-xl:var(--space-6);
  /* Corners, by what they shape */ 
  /* Frames */ --ratio-video:16/9;--ratio-short:9/16;--ratio-page:1/1.414;--ratio-portrait:2/3;
  /* Lines */ --line-hairline:1px;--line-strong:2px;--line-heavy:3px;--ring-gap:2px;--ring-outer:calc(var(--ring-gap) + var(--line-strong));
  /* Type: weights, tracking, underline */ --weight-regular:400;--weight-medium:500;--weight-strong:600;--weight-bold:700;--tracking-caps:.06em;--tracking-tight:-.01em;--underline-offset:3px;
  /* Type: each style's size, line height and weight, for parts set one at a time */ --text-display-size:64px;--text-display-line-height:64px;--text-display-weight:700;--text-title-1-size:30px;--text-title-1-line-height:36px;--text-title-1-weight:700;--text-title-2-size:24px;--text-title-2-line-height:30px;--text-title-2-weight:700;--text-title-3-size:20px;--text-title-3-line-height:26px;--text-title-3-weight:700;--text-title-4-size:17px;--text-title-4-line-height:22px;--text-title-4-weight:700;--text-lead-size:18px;--text-lead-line-height:28px;--text-lead-weight:400;--text-body-lg-size:15px;--text-body-lg-line-height:24px;--text-body-lg-weight:400;--text-body-size:14px;--text-body-line-height:20px;--text-body-weight:400;--text-label-size:14px;--text-label-line-height:20px;--text-label-weight:600;--text-caption-size:13px;--text-caption-line-height:18px;--text-caption-weight:500;--text-caption-strong-size:13px;--text-caption-strong-line-height:18px;--text-caption-strong-weight:600;--text-small-size:12px;--text-small-line-height:16px;--text-small-weight:500;--text-small-strong-size:12px;--text-small-strong-line-height:16px;--text-small-strong-weight:600;--text-micro-size:12px;--text-micro-line-height:16px;--text-micro-weight:700;--text-eyebrow-size:11px;--text-eyebrow-line-height:14px;--text-eyebrow-weight:700;--text-label-bold-size:14px;--text-label-bold-line-height:18px;--text-label-bold-weight:700;--text-subtitle-size:24px;--text-subtitle-line-height:32px;--text-subtitle-weight:600;--text-subtitle-sm-size:16px;--text-subtitle-sm-line-height:22px;--text-subtitle-sm-weight:600;
  /* Press and zoom */ --scale-press:.97;--scale-press-lg:.98;--scale-press-sm:.94;--scale-zoom:1.04;
  /* Motion moments: a keyframe and the timing it always plays at (MOTION.md) */ --motion-rise:sk-rise-in var(--motion-base) var(--ease-enter);--motion-drop-in:sk-drop-in var(--motion-fast) var(--ease-enter);--motion-drop-out:sk-drop-out var(--motion-instant) var(--ease-exit);--motion-fade-in:sk-fade-in var(--motion-base) var(--ease-standard);--motion-fade-out:sk-fade-out var(--motion-base) var(--ease-exit);--motion-theme:var(--motion-fade-in);--motion-settle:sk-settle var(--motion-base) var(--ease-enter);--motion-swap:sk-swap var(--motion-fast) var(--ease-enter);--motion-develop:sk-develop var(--motion-slower) var(--ease-enter);--motion-select:sk-sel-in var(--motion-instant) var(--ease-enter);--motion-reduced-in:sk-fade-in var(--motion-instant) linear;--motion-reduced-out:sk-fade-out var(--motion-instant) linear;--motion-reduced-duration:var(--motion-instant);
  /* Motion shapes: how far moments travel and where they start */ --motion-nudge:4px;--motion-shift:8px;--motion-enter-scale:.98;--motion-settle-scale:.8;--motion-swap-scale:.6;--motion-develop-scale:1.02;--motion-stagger-step:30ms;
  /* Motion moments: a scrim fading in and out */ --motion-scrim-in:sk-fade-in var(--motion-slow) linear;--motion-scrim-out:sk-fade-out var(--motion-base) linear;
  /* Interaction scales: a handle, a track, a knob */ 
}
:root{--icon-size-xs:14px;--icon-size-sm:16px;--icon-size-md:20px;--icon-size-lg:24px}