/* SPDX-License-Identifier: MPL-2.0 */
/* SPDX-FileCopyrightText: 2026 The Discopal contributors */
/* Code generated by tools/tokens/build.mjs from design/tokens.json. DO NOT EDIT. */

/* Light, and the iPhone class, are the base. Dark follows the system unless the page forces a mode;
   desktop and Clicks switch on the breakpoints deviceClass (device.ts) uses. */
:root {
  --color-surface-page: #F7F8FC;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: #EDEEF3;
  /* The player bar and the mini-player card. */
  --color-surface-overlay: #1E1F22;
  /* 15.5:1 on overlay. */
  --color-surface-on-overlay: #F7F8FC;
  /* 6.6:1 on overlay. */
  --color-surface-on-overlay-soft: #A3A4AB;
  /* The empty track of the mini-player's hairline: on-overlay at 16% (the reference mixes it so). Decoration: no contrast floor; the progress drawn over it is on-overlay. */
  --color-surface-on-overlay-track: #F7F8FC29;
  /* 14.2:1 on sunken (the hardest ground; target 12). */
  --color-ink-default: #1E1F22;
  /* Strong secondary text. 8.0:1 on sunken (target 7). */
  --color-ink-soft: #46474C;
  /* Every muted text that carries information. 5.3:1 on sunken (floor 4.5, target 5.2). */
  --color-caption: #606167;
  /* Every idle glyph. 3.4:1 on sunken (floor 3, target 3.4). */
  --color-icon-idle: #7E8085;
  /* Hairlines between rows and blocks. Decoration: no contrast floor; never the only boundary of a control. */
  --color-line-hair: #DBDCE1;
  /* Frames, the bar beside a take. Decoration only: a control outline uses line.control. */
  --color-line-strong: #C1C2C8;
  /* Outlines of controls on paper (ghost buttons, chips, tags, the composer, the switch's off track). 3.4:1 on sunken (floor 3). */
  --color-line-control: #7E8087;
  /* The ink rule over a section head and above the colophon. */
  --color-line-rule: #1E1F22;
  /* Accent as text and glyph. 5.1:1 on sunken (target 5). */
  --color-accent-text: #C30473;
  /* Accent as the fill of a labelled button (Play, Post, joining buttons). The label identifies the button, so the fill has no contrast requirement against the page; its label must reach 4.5:1 (target 5). */
  --color-accent-fill: #C30473;
  /* The label on accent.fill: 5.6:1. */
  --color-accent-on-fill: #FFF8FA;
  /* Accent as a mark with no label that carries meaning on its own (the switch's on track, live and unseen dots, the ■, a selected-state bar): 5.1:1 on sunken (floor 3). */
  --color-accent-mark: #C30473;
  /* The accent as a line or mark on the player (the progress line): 3.3:1 on overlay (floor 3). */
  --color-accent-on-overlay: #D01C7E;
  /* Links and active states. A theme may give them a second accent. */
  --color-link: #C30473;
  /* A filled heart. */
  --color-love: #C30473;
  /* The focus ring, 2 px solid, 2 px offset. On a cover field it is field.ink. */
  --color-focus: #C30473;
  /* Good news and "heard". 5.1:1. */
  --color-positive: #3E6F49;
  /* Proposed: no v1 screen uses it yet. 5.0:1. Never colour alone. */
  --color-warning: #935704;
  /* Proposed: no v1 screen uses it yet. 5.1:1. Close to the accent hue, so it always carries a word or an icon. */
  --color-danger: #B8323B;
  /* Estimate bars are data: 3.8:1 on the page, 3.2:1 on their track. */
  --color-chart-bar: #7D7E84;
  /* The trough a bar or meter sits in. */
  --color-chart-track: #E4E6EB;
  --color-chip-fill: #FFFFFF;
  --color-chip-ink: #1E1F22;
  /* Chip outline, a control boundary: 3.7:1 on the page. */
  --color-chip-line: #7E8087;
  /* 3.7:1 on the page. */
  --color-switch-track-off: #7E8087;
  /* The accent mark. */
  --color-switch-track-on: #C30473;
  /* 3.9:1 on the off track, 5.9:1 on the on track. */
  --color-switch-knob: #FFFFFF;
  /* The Apple Music badge. */
  --color-badge-fill: #1E1F22;
  --color-badge-ink: #F7F8FC;
  --color-tint-1: #DCE3D3;
  --color-tint-2: #D6E0E6;
  --color-tint-3: #ECDDB9;
  --color-tint-4: #EFD6CF;
  --color-tint-5: #E1D9E8;
  --color-tint-6: #E4DACA;
  /* ≥ 8.9:1 on every tint. */
  --color-tint-ink: #3B342B;
  --color-tone-1: #2F4A3E;
  --color-tone-2: #4A2E2A;
  --color-tone-3: #2C3550;
  --color-tone-4: #5A4322;
  --color-tone-5: #3F2C46;
  --color-tone-6: #24413F;
  --color-tone-7: #4D3836;
  --color-tone-8: #343A2A;
  /* ≥ 8.1:1 on every tone. */
  --color-tone-ink: #F6EEE2;
  /* ≥ 5.9:1. */
  --color-tone-ink-soft: #D8CCBC;
  --color-shelf-back: #EADFCC;
  --color-shelf-board: #B9A27F;
  --color-shelf-edge: #8E7655;
  /* Behind a sheet or dialog. */
  --color-scrim: #1516196B;
  /* The colour of shadows on paper. */
  --color-shade: #15161973;
  /* The iPhone dock and the Clicks strip, with blur.glass. Opaque (alpha 1) when the system asks for reduced transparency. */
  --color-glass: #FFFFFFF0;
  /* Browser chrome over the page (reference screens). Opaque with reduced transparency. */
  --color-chrome-glass: #F7F8FCCC;
  /* The hero field. */
  --field-field: #F7F8FC;
  /* Text on the field (target 7, floor 4.5). */
  --field-ink: #1E1F22;
  /* Captions on the field (target 5). */
  --field-ink-soft: #606167;
  /* The artist line on phones and accent text on the field (target 5). */
  --field-accent: #C30473;
  /* Outlines and underlines on the field: the ink painted over the field at 34% (pale field 30%), raised until ≥ 3:1. */
  --field-line: #8F9093;
  /* Round buttons on phones: the ink at 14% (pale 8%), lowered until the ink on it reads ≥ 4.5:1. */
  --field-control: #E6E7EB;
  /* Pressed or expanded: 22% (pale 16%, dark mode 26%), lowered until the ink on it reads ≥ 4.5:1. */
  --field-control-pressed: #D4D5D9;
  /* The Play fill: on the paper hero the accent's labelled fill (Play in the PAL colour); on a cover the field turned inside out, or a theme's accent (≥ 3:1 against the field). */
  --field-play: #C30473;
  /* Text on Play (floor 4.5). */
  --field-on-play: #FFF8FA;
  /* A labelled button in the field accent's hue (the share page's joining buttons): a deep fill carrying a near-white label. */
  --field-accent-fill: #A54871;
  /* The label on field.accent-fill (≥ 4.5:1, target 5). */
  --field-on-accent-fill: #FFF8FA;
  /* The sleeve's shadow colour: the field's hue at L 0.12 and 58% (light), black 66% (dark). */
  --field-shade: #05060794;
  /* The 1 px ring round the sleeve: the ink at 18% (pale field 10%). */
  --field-cover-ring: #1E1F221A;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-0-5: 2px;
  /* Page gutter. */
  --space-alias-gutter: 20px;
  /* Between sections of an item page (album, artist, share, curator). */
  --space-alias-section-gap: 40px;
  /* Between sections and pal blocks on Home, Library and Collection. */
  --space-alias-feed-gap: 32px;
  /* The ink rule → the section title. */
  --space-alias-head-rule-gap: 12px;
  /* Section title → content. */
  --space-alias-head-gap: 12px;
  --space-alias-block-gap: 24px;
  /* Vertical padding of list rows. */
  --space-alias-row-pad: 12px;
  --space-alias-hero-top: 48px;
  --space-alias-hero-bottom: 32px;
  /* Library grid. */
  --space-alias-tile-gap-x: 16px;
  /* Library grid. */
  --space-alias-tile-gap-y: 24px;
  /* Home: the main column → the rail (desktop only). */
  --space-alias-rail-gap: 40px;
  /* Home: between pal blocks (the reference's block-gap-h). The other sections stay feed-gap apart. */
  --space-alias-pal-block-gap: 40px;
  /* Home: a pal block's head (its hairline below) → its band or tiles. Section heads keep head-gap. */
  --space-alias-pal-head-gap: 16px;
  /* Home: between a pal's tiles side by side (desktop: two columns). */
  --space-alias-home-tile-gap-x: 24px;
  /* Home: between a pal's tiles, one under another. The Library grid keeps tile-gap-y. */
  --space-alias-home-tile-gap-y: 16px;
  /* Minimum hit area of anything you press, every device. Never user-changeable. Allowed exceptions: the A–Z rail (a scrub), shelf spines (as thick as their records), and links that cover a whole tile or row through an ::after area. */
  --size-tap: 44px;
  /* Button height. */
  --size-button: 48px;
  --size-button-small: 44px;
  /* Text fields (the composer and the labelled fields). */
  --size-input: 48px;
  /* The search pill (Library; the reference's field-h there). */
  --size-search: 44px;
  /* Inputs with the label inside (join sheet). */
  --size-input-labelled: 60px;
  --size-chip: 36px;
  /* Verb chips on Home tiles. */
  --size-chip-verb: 24px;
  --size-tag: 28px;
  --size-badge: 24px;
  --size-mark: 16px;
  /* A keyboard hint. */
  --size-kbd: 20px;
  /* A key letter inside a Clicks button. */
  --size-key: 14px;
  /* Desktop top nav. */
  --size-nav: 56px;
  --size-nav-pill: 40px;
  /* Desktop player bar. */
  --size-player: 64px;
  --size-appbar: 44px;
  --size-tabbar: 48px;
  --size-mini-player: 60px;
  --size-mini-card: 52px;
  /* Clicks mini-player strip. */
  --size-strip: 56px;
  --size-sheet-row: 52px;
  /* Sheet handle. */
  --size-grab-w: 36px;
  --size-grab-h: 5px;
  --size-page-max: 1160px;
  --size-side-column: 316px;
  --size-menu: 288px;
  --size-dialog: 480px;
  /* The sleeve in the hero, never cropped. The share page uses cover-share on the iPhone. */
  --size-cover-hero: 240px;
  /* The share page's sleeve: smaller on the iPhone so the next section peeks. */
  --size-cover-share: 144px;
  /* Library welcome. */
  --size-photo-hero: 56px;
  /* Cards in a phone rail. */
  --size-card: 248px;
  /* Covers in rows. */
  --size-thumb: 48px;
  --size-thumb-small: 44px;
  --size-art-mini: 40px;
  /* The desktop player's cover (the screens used 42, off the 4 px grid). */
  --size-art-player: 40px;
  --size-art-masthead: 32px;
  --size-art-sheet: 44px;
  /* Home tile. */
  --size-art-tile: 64px;
  /* A search hit's art. */
  --size-art-hit: 72px;
  --size-art-now-playing: 64px;
  /* Jump back in. */
  --size-art-jump: 112px;
  /* The on-repeat band. */
  --size-art-band: 88px;
  --size-art-station: 56px;
  --size-art-curator-cover: 96px;
  --size-art-where-to-start: 72px;
  /* A banner's icon. */
  --size-art-banner: 40px;
  --size-photo-xs: 20px;
  --size-photo-s: 24px;
  --size-photo-m: 28px;
  --size-photo-l: 32px;
  --size-photo-xl: 40px;
  --size-photo-2xl: 48px;
  --size-photo-3xl: 56px;
  /* About the artist. */
  --size-photo-about: 48px;
  /* Home roster. */
  --size-photo-pal-face: 48px;
  --size-icon-xs: 12px;
  --size-icon-s: 14px;
  --size-icon-m: 16px;
  --size-icon-ml: 18px;
  --size-icon-default: 20px;
  --size-icon-l: 22px;
  --size-icon-xl: 24px;
  /* Now playing's shuffle, repeat and play glyph (the owner, 2026-11-05: the reference's sizes). */
  --size-icon-2xl: 28px;
  /* Now playing's previous, next and heart. */
  --size-icon-3xl: 32px;
  /* Format tiles. */
  --size-icon-format: 28px;
  --size-track-number: 24px;
  --size-track-love: 40px;
  --size-track-duration: 40px;
  --size-track-more: 32px;
  --size-track-row-min: 56px;
  /* The round play button inside the player and mastheads. */
  --size-play-disc: 40px;
  /* Now playing's round play button (the owner, 2026-11-05: the reference's size). */
  --size-play-disc-large: 64px;
  --size-chart-height: 56px;
  --size-chart-meter: 6px;
  --size-chart-meter-label: 152px;
  --size-chart-pace-w: 40px;
  --size-chart-pace-h: 6px;
  /* Equaliser bar. */
  --size-chart-eq-w: 3px;
  --size-chart-eq-h: 14px;
  /* The drummer map (artist). */
  --size-chart-map-cell: 24px;
  --size-chart-map-row: 24px;
  --size-chart-map-label: 160px;
  /* Album credits. */
  --size-disc-large: 300px;
  /* Collection. */
  --size-disc-medium: 280px;
  --size-disc-spindle: 16px;
  /* The gap the spindle sits in. */
  --size-disc-hole: 40px;
  --size-switch-width: 48px;
  --size-switch-height: 28px;
  --size-switch-knob: 22px;
  /* Live and unseen dots. */
  --size-dot-default: 8px;
  --size-dot-on: 12px;
  --size-shelf-spine-vinyl: 176px;
  --size-shelf-spine-cd: 132px;
  --size-shelf-spine-tape: 96px;
  --size-shelf-spine-min: 24px;
  --size-shelf-spine-min-small: 20px;
  --size-shelf-board: 8px;
  --size-shelf-board-edge: 4px;
  --size-shelf-empty-height: 120px;
  /* The A–Z rail's width. */
  --size-shelf-rail: 20px;
  /* 34em at 20 px. */
  --size-measure-dek: 680px;
  /* 62 characters of 18 px text. */
  --size-measure-text: 620px;
  /* 40ch of 26 px. */
  --size-measure-empty: 560px;
  --size-measure-solo: 720px;
  --size-stroke-hair: 1px;
  --size-stroke-rule: 1.5px;
  --size-stroke-rule-end: 2.5px;
  --size-stroke-bar: 3px;
  --size-stroke-ring: 2px;
  --size-stroke-focus: 2px;
  --size-stroke-underline: 1px;
  --size-stroke-underline-offset: 3px;
  --size-stroke-dash: 1.5px;
  /* Overlap of stacked avatars ≥ 28 px. */
  --size-stack-overlap-default: -8px;
  /* For 20–24 px avatars. */
  --size-stack-overlap-small: -4px;
  /* Backdrop blur behind glass bars; none with reduced transparency. */
  --size-blur-glass: 18px;
  --count-library-columns: 2;
  --count-artist-tiles: 3;
  /* Lines of the hero description before Read more. */
  --count-dek-lines: 3;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  /* Desktop dialogs. */
  --radius-2xl: 24px;
  --radius-pill: 999px;
  /* The hero sleeve. */
  --radius-cover: 8px;
  /* Covers in rows, tiles and cards (the majority of screens; library and share drift). */
  --radius-thumb: 8px;
  /* The hero sleeve: ring + two field-coloured shadows. */
  --elevation-cover: 0px 0px 0px 1px #1E1F221A, 0px 30px 60px -26px #05060794, 0px 10px 20px -14px #05060794;
  --elevation-card: 0px 1px 1px 0px #3C28140F, 0px 22px 40px -26px #15161973;
  /* Covers in rows, tiles and cards. */
  --elevation-thumb: 0px 1px 1px 0px #3C281414, 0px 6px 14px -8px #15161973;
  /* Desktop popovers. */
  --elevation-pop: 0px 24px 48px -20px #15161973, 0px 2px 6px -2px #221D161F;
  /* Bottom sheets. */
  --elevation-sheet: 0px -12px 32px -16px #15161973;
  /* Desktop dialogs. */
  --elevation-dialog: 0px 40px 80px -30px #2214108C, 0px 2px 8px 0px #2214101F;
  /* The mini-player card. */
  --elevation-mini: 0px 8px 20px -12px #00000080;
  /* A floating bar (the share page's slim bar). */
  --elevation-float: 0px 14px 34px -14px #15161973, 0px 1px 2px 0px #221D161A;
  /* The hairline above the dock and strip. */
  --elevation-bar: 0px -1px 0px 0px #DBDCE1;
  /* Small state changes. */
  --motion-duration-quick: 120ms;
  --motion-duration-default: 200ms;
  /* Sheets and dialogs. */
  --motion-duration-sheet: 240ms;
  /* One cycle of the playing equaliser. */
  --motion-duration-eq: 1100ms;
  --motion-easing-default: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Desktop layout from 700 px wide. */
  --breakpoint-desktop-min-width: 700px;
  --breakpoint-clicks-max-width: 400px;
  /* A keyboard phone: ≤ 400 wide and < 600 tall. */
  --breakpoint-clicks-max-height: 599px;
  /* The album or artist name: always the largest thing on an item page. */
  --font-style-title-family: "Gloock", "Iowan Old Style", "Palatino Linotype", "Georgia", "Hiragino Mincho ProN", serif;
  /* The album or artist name: always the largest thing on an item page. */
  --font-style-title-size: 30px;
  /* The album or artist name: always the largest thing on an item page. */
  --font-style-title-line: 34px;
  /* The album or artist name: always the largest thing on an item page. */
  --font-style-title-tracking: -0.6px;
  /* The album or artist name: always the largest thing on an item page. */
  --font-style-title-weight: 400;
  /* The album or artist name: always the largest thing on an item page. */
  --font-style-title-style: normal;
  /* The second largest thing on an item page. Serif on desktop; grotesk in the field accent on phones. */
  --font-style-artist-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* The second largest thing on an item page. Serif on desktop; grotesk in the field accent on phones. */
  --font-style-artist-size: 19px;
  /* The second largest thing on an item page. Serif on desktop; grotesk in the field accent on phones. */
  --font-style-artist-line: 24px;
  /* The second largest thing on an item page. Serif on desktop; grotesk in the field accent on phones. */
  --font-style-artist-tracking: -0.19px;
  /* The second largest thing on an item page. Serif on desktop; grotesk in the field accent on phones. */
  --font-style-artist-weight: 600;
  /* The second largest thing on an item page. Serif on desktop; grotesk in the field accent on phones. */
  --font-style-artist-style: normal;
  /* Pages with no hero (Library, Collection). */
  --font-style-page-title-family: "Gloock", "Iowan Old Style", "Palatino Linotype", "Georgia", "Hiragino Mincho ProN", serif;
  /* Pages with no hero (Library, Collection). */
  --font-style-page-title-size: 32px;
  /* Pages with no hero (Library, Collection). */
  --font-style-page-title-line: 36px;
  /* Pages with no hero (Library, Collection). */
  --font-style-page-title-tracking: -0.896px;
  /* Pages with no hero (Library, Collection). */
  --font-style-page-title-weight: 400;
  /* Pages with no hero (Library, Collection). */
  --font-style-page-title-style: normal;
  /* Section heads. */
  --font-style-h2-family: "Gloock", "Iowan Old Style", "Palatino Linotype", "Georgia", "Hiragino Mincho ProN", serif;
  /* Section heads. */
  --font-style-h2-size: 18px;
  /* Section heads. */
  --font-style-h2-line: 24px;
  /* Section heads. */
  --font-style-h2-tracking: -0.27px;
  /* Section heads. */
  --font-style-h2-weight: 400;
  /* Section heads. */
  --font-style-h2-style: normal;
  /* Sub-heads (a shelf's name). */
  --font-style-h3-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* Sub-heads (a shelf's name). */
  --font-style-h3-size: 18px;
  /* Sub-heads (a shelf's name). */
  --font-style-h3-line: 24px;
  /* Sub-heads (a shelf's name). */
  --font-style-h3-tracking: 0px;
  /* Sub-heads (a shelf's name). */
  --font-style-h3-weight: 500;
  /* Sub-heads (a shelf's name). */
  --font-style-h3-style: normal;
  /* The pull quote. */
  --font-style-quote-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* The pull quote. */
  --font-style-quote-size: 18px;
  /* The pull quote. */
  --font-style-quote-line: 26px;
  /* The pull quote. */
  --font-style-quote-tracking: -0.18px;
  /* The pull quote. */
  --font-style-quote-weight: 400;
  /* The pull quote. */
  --font-style-quote-style: normal;
  /* A pal's comment. */
  --font-style-take-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* A pal's comment. */
  --font-style-take-size: 18px;
  /* A pal's comment. */
  --font-style-take-line: 26px;
  /* A pal's comment. */
  --font-style-take-tracking: -0.18px;
  /* A pal's comment. */
  --font-style-take-weight: 400;
  /* A pal's comment. */
  --font-style-take-style: normal;
  /* A reply. */
  --font-style-reply-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* A reply. */
  --font-style-reply-size: 17px;
  /* A reply. */
  --font-style-reply-line: 24px;
  /* A reply. */
  --font-style-reply-tracking: -0.17px;
  /* A reply. */
  --font-style-reply-weight: 400;
  /* A reply. */
  --font-style-reply-style: normal;
  /* Card titles. */
  --font-style-card-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* Card titles. */
  --font-style-card-size: 18px;
  /* Card titles. */
  --font-style-card-line: 23px;
  /* Card titles. */
  --font-style-card-tracking: -0.18px;
  /* Card titles. */
  --font-style-card-weight: 400;
  /* Card titles. */
  --font-style-card-style: normal;
  /* The hero description. */
  --font-style-dek-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* The hero description. */
  --font-style-dek-size: 16px;
  /* The hero description. */
  --font-style-dek-line: 23px;
  /* The hero description. */
  --font-style-dek-tracking: 0px;
  /* The hero description. */
  --font-style-dek-weight: 400;
  /* The hero description. */
  --font-style-dek-style: normal;
  /* Estimate words. */
  --font-style-mood-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* Estimate words. */
  --font-style-mood-size: 18px;
  /* Estimate words. */
  --font-style-mood-line: 24px;
  /* Estimate words. */
  --font-style-mood-tracking: 0px;
  /* Estimate words. */
  --font-style-mood-weight: 400;
  /* Estimate words. */
  --font-style-mood-style: normal;
  /* The story. */
  --font-style-lede-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* The story. */
  --font-style-lede-size: 16px;
  /* The story. */
  --font-style-lede-line: 25px;
  /* The story. */
  --font-style-lede-tracking: 0px;
  /* The story. */
  --font-style-lede-weight: 400;
  /* The story. */
  --font-style-lede-style: normal;
  /* Sidebar values. */
  --font-style-value-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* Sidebar values. */
  --font-style-value-size: 16px;
  /* Sidebar values. */
  --font-style-value-line: 23px;
  /* Sidebar values. */
  --font-style-value-tracking: 0px;
  /* Sidebar values. */
  --font-style-value-weight: 400;
  /* Sidebar values. */
  --font-style-value-style: normal;
  /* A feature line (artist page). */
  --font-style-feature-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* A feature line (artist page). */
  --font-style-feature-size: 18px;
  /* A feature line (artist page). */
  --font-style-feature-line: 25px;
  /* A feature line (artist page). */
  --font-style-feature-tracking: 0px;
  /* A feature line (artist page). */
  --font-style-feature-weight: 400;
  /* A feature line (artist page). */
  --font-style-feature-style: normal;
  /* Where-to-start numerals (artist page). */
  --font-style-numeral-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* Where-to-start numerals (artist page). */
  --font-style-numeral-size: 28px;
  /* Where-to-start numerals (artist page). */
  --font-style-numeral-line: 32px;
  /* Where-to-start numerals (artist page). */
  --font-style-numeral-tracking: 0px;
  /* Where-to-start numerals (artist page). */
  --font-style-numeral-weight: 400;
  /* Where-to-start numerals (artist page). */
  --font-style-numeral-style: normal;
  /* The set-apart line in a feature break (artist page). */
  --font-style-chime-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* The set-apart line in a feature break (artist page). */
  --font-style-chime-size: 28px;
  /* The set-apart line in a feature break (artist page). */
  --font-style-chime-line: 32px;
  /* The set-apart line in a feature break (artist page). */
  --font-style-chime-tracking: 0px;
  /* The set-apart line in a feature break (artist page). */
  --font-style-chime-weight: 400;
  /* The set-apart line in a feature break (artist page). */
  --font-style-chime-style: normal;
  /* Track titles. */
  --font-style-row-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* Track titles. */
  --font-style-row-size: 16px;
  /* Track titles. */
  --font-style-row-line: 21px;
  /* Track titles. */
  --font-style-row-tracking: 0px;
  /* Track titles. */
  --font-style-row-weight: 500;
  /* Track titles. */
  --font-style-row-style: normal;
  /* Library tile titles. */
  --font-style-tile-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* Library tile titles. */
  --font-style-tile-size: 16px;
  /* Library tile titles. */
  --font-style-tile-line: 21px;
  /* Library tile titles. */
  --font-style-tile-tracking: 0px;
  /* Library tile titles. */
  --font-style-tile-weight: 650;
  /* Library tile titles. */
  --font-style-tile-style: normal;
  /* A song or album title in the UI face: Jump back in cards and the phone mini-player (the reference's small size, semibold). */
  --font-style-ui-title-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* A song or album title in the UI face: Jump back in cards and the phone mini-player (the reference's small size, semibold). */
  --font-style-ui-title-size: 15px;
  /* A song or album title in the UI face: Jump back in cards and the phone mini-player (the reference's small size, semibold). */
  --font-style-ui-title-line: 21px;
  /* A song or album title in the UI face: Jump back in cards and the phone mini-player (the reference's small size, semibold). */
  --font-style-ui-title-tracking: 0px;
  /* A song or album title in the UI face: Jump back in cards and the phone mini-player (the reference's small size, semibold). */
  --font-style-ui-title-weight: 650;
  /* A song or album title in the UI face: Jump back in cards and the phone mini-player (the reference's small size, semibold). */
  --font-style-ui-title-style: normal;
  /* The song title in the desktop player bar (the reference's meta size, semibold). */
  --font-style-ui-title-meta-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* The song title in the desktop player bar (the reference's meta size, semibold). */
  --font-style-ui-title-meta-size: 15px;
  /* The song title in the desktop player bar (the reference's meta size, semibold). */
  --font-style-ui-title-meta-line: 21px;
  /* The song title in the desktop player bar (the reference's meta size, semibold). */
  --font-style-ui-title-meta-tracking: 0px;
  /* The song title in the desktop player bar (the reference's meta size, semibold). */
  --font-style-ui-title-meta-weight: 650;
  /* The song title in the desktop player bar (the reference's meta size, semibold). */
  --font-style-ui-title-meta-style: normal;
  /* A pal's note under a Home tile, at the small size. */
  --font-style-note-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* A pal's note under a Home tile, at the small size. */
  --font-style-note-size: 15px;
  /* A pal's note under a Home tile, at the small size. */
  --font-style-note-line: 21px;
  /* A pal's note under a Home tile, at the small size. */
  --font-style-note-tracking: 0px;
  /* A pal's note under a Home tile, at the small size. */
  --font-style-note-weight: 400;
  /* A pal's note under a Home tile, at the small size. */
  --font-style-note-style: normal;
  /* A title set on a plain tone. Exception to the floor: the full title sits beside it. */
  --font-style-tone-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* A title set on a plain tone. Exception to the floor: the full title sits beside it. */
  --font-style-tone-size: 13px;
  /* A title set on a plain tone. Exception to the floor: the full title sits beside it. */
  --font-style-tone-line: 16px;
  /* A title set on a plain tone. Exception to the floor: the full title sits beside it. */
  --font-style-tone-tracking: 0px;
  /* A title set on a plain tone. Exception to the floor: the full title sits beside it. */
  --font-style-tone-weight: 400;
  /* A title set on a plain tone. Exception to the floor: the full title sits beside it. */
  --font-style-tone-style: normal;
  --font-style-body-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  --font-style-body-size: 15px;
  --font-style-body-line: 21px;
  --font-style-body-tracking: 0px;
  --font-style-body-weight: 400;
  --font-style-body-style: normal;
  --font-style-small-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  --font-style-small-size: 15px;
  --font-style-small-line: 21px;
  --font-style-small-tracking: 0px;
  --font-style-small-weight: 400;
  --font-style-small-style: normal;
  /* Information text. The floor: 15 px on the iPhone, 14 px elsewhere. */
  --font-style-meta-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* Information text. The floor: 15 px on the iPhone, 14 px elsewhere. */
  --font-style-meta-size: 15px;
  /* Information text. The floor: 15 px on the iPhone, 14 px elsewhere. */
  --font-style-meta-line: 21px;
  /* Information text. The floor: 15 px on the iPhone, 14 px elsewhere. */
  --font-style-meta-tracking: 0px;
  /* Information text. The floor: 15 px on the iPhone, 14 px elsewhere. */
  --font-style-meta-weight: 400;
  /* Information text. The floor: 15 px on the iPhone, 14 px elsewhere. */
  --font-style-meta-style: normal;
  /* Small capitals (uppercase, tracked) above a title or block, and reason tags. Exception to the floor. */
  --font-style-label-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* Small capitals (uppercase, tracked) above a title or block, and reason tags. Exception to the floor. */
  --font-style-label-size: 12px;
  /* Small capitals (uppercase, tracked) above a title or block, and reason tags. Exception to the floor. */
  --font-style-label-line: 16px;
  /* Small capitals (uppercase, tracked) above a title or block, and reason tags. Exception to the floor. */
  --font-style-label-tracking: 0.96px;
  /* Small capitals (uppercase, tracked) above a title or block, and reason tags. Exception to the floor. */
  --font-style-label-weight: 650;
  /* Small capitals (uppercase, tracked) above a title or block, and reason tags. Exception to the floor. */
  --font-style-label-style: normal;
  /* label drawn in capitals: the eyebrow and the Now label. Sets the text in capitals itself (text-transform). Exception to the floor. */
  --font-style-caps-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* label drawn in capitals: the eyebrow and the Now label. Sets the text in capitals itself (text-transform). Exception to the floor. */
  --font-style-caps-size: 12px;
  /* label drawn in capitals: the eyebrow and the Now label. Sets the text in capitals itself (text-transform). Exception to the floor. */
  --font-style-caps-line: 16px;
  /* label drawn in capitals: the eyebrow and the Now label. Sets the text in capitals itself (text-transform). Exception to the floor. */
  --font-style-caps-tracking: 0.96px;
  /* label drawn in capitals: the eyebrow and the Now label. Sets the text in capitals itself (text-transform). Exception to the floor. */
  --font-style-caps-weight: 650;
  /* label drawn in capitals: the eyebrow and the Now label. Sets the text in capitals itself (text-transform). Exception to the floor. */
  --font-style-caps-style: normal;
  /* label drawn in capitals: the eyebrow and the Now label. Sets the text in capitals itself (text-transform). Exception to the floor. */
  --font-style-caps-transform: uppercase;
  /* The verb chip: bold small capitals, a one-line box. Sets the text in capitals itself. Exception to the floor. */
  --font-style-caps-chip-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* The verb chip: bold small capitals, a one-line box. Sets the text in capitals itself. Exception to the floor. */
  --font-style-caps-chip-size: 12px;
  /* The verb chip: bold small capitals, a one-line box. Sets the text in capitals itself. Exception to the floor. */
  --font-style-caps-chip-line: 12px;
  /* The verb chip: bold small capitals, a one-line box. Sets the text in capitals itself. Exception to the floor. */
  --font-style-caps-chip-tracking: 0.72px;
  /* The verb chip: bold small capitals, a one-line box. Sets the text in capitals itself. Exception to the floor. */
  --font-style-caps-chip-weight: 700;
  /* The verb chip: bold small capitals, a one-line box. Sets the text in capitals itself. Exception to the floor. */
  --font-style-caps-chip-style: normal;
  /* The verb chip: bold small capitals, a one-line box. Sets the text in capitals itself. Exception to the floor. */
  --font-style-caps-chip-transform: uppercase;
  /* A filter chip's words and count: the reference's small size, semibold. */
  --font-style-chip-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* A filter chip's words and count: the reference's small size, semibold. */
  --font-style-chip-size: 15px;
  /* A filter chip's words and count: the reference's small size, semibold. */
  --font-style-chip-line: 21px;
  /* A filter chip's words and count: the reference's small size, semibold. */
  --font-style-chip-tracking: 0px;
  /* A filter chip's words and count: the reference's small size, semibold. */
  --font-style-chip-weight: 650;
  /* A filter chip's words and count: the reference's small size, semibold. */
  --font-style-chip-style: normal;
  /* A one-line label inside a two-line button. Exception to the floor. */
  --font-style-pill-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* A one-line label inside a two-line button. Exception to the floor. */
  --font-style-pill-size: 12px;
  /* A one-line label inside a two-line button. Exception to the floor. */
  --font-style-pill-line: 18px;
  /* A one-line label inside a two-line button. Exception to the floor. */
  --font-style-pill-tracking: 0px;
  /* A one-line label inside a two-line button. Exception to the floor. */
  --font-style-pill-weight: 650;
  /* A one-line label inside a two-line button. Exception to the floor. */
  --font-style-pill-style: normal;
  /* Tab labels and the badge. Exception to the floor. */
  --font-style-tab-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* Tab labels and the badge. Exception to the floor. */
  --font-style-tab-size: 11px;
  /* Tab labels and the badge. Exception to the floor. */
  --font-style-tab-line: 14px;
  /* Tab labels and the badge. Exception to the floor. */
  --font-style-tab-tracking: 0.22px;
  /* Tab labels and the badge. Exception to the floor. */
  --font-style-tab-weight: 650;
  /* Tab labels and the badge. Exception to the floor. */
  --font-style-tab-style: normal;
  /* Keyboard hints. Exception to the floor. */
  --font-style-kbd-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* Keyboard hints. Exception to the floor. */
  --font-style-kbd-size: 11px;
  /* Keyboard hints. Exception to the floor. */
  --font-style-kbd-line: 14px;
  /* Keyboard hints. Exception to the floor. */
  --font-style-kbd-tracking: 0px;
  /* Keyboard hints. Exception to the floor. */
  --font-style-kbd-weight: 650;
  /* Keyboard hints. Exception to the floor. */
  --font-style-kbd-style: normal;
  /* The MACHINE mark and Clicks key letters. Exception to the floor. */
  --font-style-mark-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* The MACHINE mark and Clicks key letters. Exception to the floor. */
  --font-style-mark-size: 10px;
  /* The MACHINE mark and Clicks key letters. Exception to the floor. */
  --font-style-mark-line: 16px;
  /* The MACHINE mark and Clicks key letters. Exception to the floor. */
  --font-style-mark-tracking: 1px;
  /* The MACHINE mark and Clicks key letters. Exception to the floor. */
  --font-style-mark-weight: 700;
  /* The MACHINE mark and Clicks key letters. Exception to the floor. */
  --font-style-mark-style: normal;
  /* Text on a shelf spine. Exception to the floor: the copy rows repeat it. */
  --font-style-spine-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* Text on a shelf spine. Exception to the floor: the copy rows repeat it. */
  --font-style-spine-size: 12px;
  /* Text on a shelf spine. Exception to the floor: the copy rows repeat it. */
  --font-style-spine-line: 14px;
  /* Text on a shelf spine. Exception to the floor: the copy rows repeat it. */
  --font-style-spine-tracking: 0.72px;
  /* Text on a shelf spine. Exception to the floor: the copy rows repeat it. */
  --font-style-spine-weight: 650;
  /* Text on a shelf spine. Exception to the floor: the copy rows repeat it. */
  --font-style-spine-style: normal;
  /* The A–Z rail. Exception to the floor. */
  --font-style-rail-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* The A–Z rail. Exception to the floor. */
  --font-style-rail-size: 12px;
  /* The A–Z rail. Exception to the floor. */
  --font-style-rail-line: 16px;
  /* The A–Z rail. Exception to the floor. */
  --font-style-rail-tracking: 0px;
  /* The A–Z rail. Exception to the floor. */
  --font-style-rail-weight: 700;
  /* The A–Z rail. Exception to the floor. */
  --font-style-rail-style: normal;
  /* Format-tile counts. */
  --font-style-count-family: "Gloock", "Iowan Old Style", "Palatino Linotype", "Georgia", "Hiragino Mincho ProN", serif;
  /* Format-tile counts. */
  --font-style-count-size: 26px;
  /* Format-tile counts. */
  --font-style-count-line: 30px;
  /* Format-tile counts. */
  --font-style-count-tracking: 0px;
  /* Format-tile counts. */
  --font-style-count-weight: 400;
  /* Format-tile counts. */
  --font-style-count-style: normal;
  /* The label's name on the large pressing disc; labelname-medium is for the medium disc. */
  --font-style-labelname-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* The label's name on the large pressing disc; labelname-medium is for the medium disc. */
  --font-style-labelname-size: 18px;
  /* The label's name on the large pressing disc; labelname-medium is for the medium disc. */
  --font-style-labelname-line: 20px;
  /* The label's name on the large pressing disc; labelname-medium is for the medium disc. */
  --font-style-labelname-tracking: 0px;
  /* The label's name on the large pressing disc; labelname-medium is for the medium disc. */
  --font-style-labelname-weight: 650;
  /* The label's name on the large pressing disc; labelname-medium is for the medium disc. */
  --font-style-labelname-style: normal;
  /* On the medium disc (Collection). */
  --font-style-labelname-medium-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* On the medium disc (Collection). */
  --font-style-labelname-medium-size: 18px;
  /* On the medium disc (Collection). */
  --font-style-labelname-medium-line: 20px;
  /* On the medium disc (Collection). */
  --font-style-labelname-medium-tracking: 0px;
  /* On the medium disc (Collection). */
  --font-style-labelname-medium-weight: 650;
  /* On the medium disc (Collection). */
  --font-style-labelname-medium-style: normal;
  /* Runout codes. 15 px on the iPhone (the information floor). */
  --font-style-code-family: "DM Mono", "SF Mono", ui-monospace, "Menlo", monospace;
  /* Runout codes. 15 px on the iPhone (the information floor). */
  --font-style-code-size: 15px;
  /* Runout codes. 15 px on the iPhone (the information floor). */
  --font-style-code-line: 21px;
  /* Runout codes. 15 px on the iPhone (the information floor). */
  --font-style-code-tracking: 0px;
  /* Runout codes. 15 px on the iPhone (the information floor). */
  --font-style-code-weight: 500;
  /* Runout codes. 15 px on the iPhone (the information floor). */
  --font-style-code-style: normal;
  /* Labels beside runout codes and fact labels. Exception to the floor. */
  --font-style-code-label-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* Labels beside runout codes and fact labels. Exception to the floor. */
  --font-style-code-label-size: 12px;
  /* Labels beside runout codes and fact labels. Exception to the floor. */
  --font-style-code-label-line: 20px;
  /* Labels beside runout codes and fact labels. Exception to the floor. */
  --font-style-code-label-tracking: 0.72px;
  /* Labels beside runout codes and fact labels. Exception to the floor. */
  --font-style-code-label-weight: 650;
  /* Labels beside runout codes and fact labels. Exception to the floor. */
  --font-style-code-label-style: normal;
  /* The texted-code boxes in the join sheet. */
  --font-style-otp-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* The texted-code boxes in the join sheet. */
  --font-style-otp-size: 24px;
  /* The texted-code boxes in the join sheet. */
  --font-style-otp-line: 30px;
  /* The texted-code boxes in the join sheet. */
  --font-style-otp-tracking: 2.4px;
  /* The texted-code boxes in the join sheet. */
  --font-style-otp-weight: 650;
  /* The texted-code boxes in the join sheet. */
  --font-style-otp-style: normal;
  /* Labelled inputs (join sheet). */
  --font-style-input-family: "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, "Hiragino Sans", sans-serif;
  /* Labelled inputs (join sheet). */
  --font-style-input-size: 17px;
  /* Labelled inputs (join sheet). */
  --font-style-input-line: 24px;
  /* Labelled inputs (join sheet). */
  --font-style-input-tracking: 0px;
  /* Labelled inputs (join sheet). */
  --font-style-input-weight: 400;
  /* Labelled inputs (join sheet). */
  --font-style-input-style: normal;
  /* The wordmark, DiscoPal in BBH Hegarty, "Pal" in the accent (ADR 0042, amendment of 2026-11-01, point 2): drawn by the Wordmark component alone. */
  --font-style-wordmark-family: "BBH Hegarty", "Hanken Grotesk", "Helvetica Neue", "Helvetica", system-ui, sans-serif;
  /* The wordmark, DiscoPal in BBH Hegarty, "Pal" in the accent (ADR 0042, amendment of 2026-11-01, point 2): drawn by the Wordmark component alone. */
  --font-style-wordmark-size: 21px;
  /* The wordmark, DiscoPal in BBH Hegarty, "Pal" in the accent (ADR 0042, amendment of 2026-11-01, point 2): drawn by the Wordmark component alone. */
  --font-style-wordmark-line: 21px;
  /* The wordmark, DiscoPal in BBH Hegarty, "Pal" in the accent (ADR 0042, amendment of 2026-11-01, point 2): drawn by the Wordmark component alone. */
  --font-style-wordmark-tracking: 0.42px;
  /* The wordmark, DiscoPal in BBH Hegarty, "Pal" in the accent (ADR 0042, amendment of 2026-11-01, point 2): drawn by the Wordmark component alone. */
  --font-style-wordmark-weight: 400;
  /* The wordmark, DiscoPal in BBH Hegarty, "Pal" in the accent (ADR 0042, amendment of 2026-11-01, point 2): drawn by the Wordmark component alone. */
  --font-style-wordmark-style: normal;
  --font-scale-max-title: 1.3;
  --font-scale-max-artist: 1.3;
  --font-scale-max-page-title: 1.3;
  --font-scale-max-h2: 1.3;
  --font-scale-max-h3: 3.1;
  --font-scale-max-quote: 3.1;
  --font-scale-max-take: 3.1;
  --font-scale-max-reply: 3.1;
  --font-scale-max-card: 3.1;
  --font-scale-max-dek: 3.1;
  --font-scale-max-mood: 3.1;
  --font-scale-max-lede: 3.1;
  --font-scale-max-value: 3.1;
  --font-scale-max-feature: 3.1;
  --font-scale-max-numeral: 1.3;
  --font-scale-max-chime: 1.3;
  --font-scale-max-row: 3.1;
  --font-scale-max-tile: 3.1;
  --font-scale-max-ui-title: 3.1;
  --font-scale-max-ui-title-meta: 3.1;
  --font-scale-max-note: 3.1;
  --font-scale-max-tone: 3.1;
  --font-scale-max-body: 3.1;
  --font-scale-max-small: 3.1;
  --font-scale-max-meta: 3.1;
  --font-scale-max-label: 3.1;
  --font-scale-max-caps: 3.1;
  --font-scale-max-caps-chip: 3.1;
  --font-scale-max-chip: 3.1;
  --font-scale-max-pill: 3.1;
  --font-scale-max-tab: 3.1;
  --font-scale-max-kbd: 3.1;
  --font-scale-max-mark: 3.1;
  --font-scale-max-spine: 3.1;
  --font-scale-max-rail: 3.1;
  --font-scale-max-count: 1.3;
  --font-scale-max-labelname: 3.1;
  --font-scale-max-labelname-medium: 3.1;
  --font-scale-max-code: 3.1;
  --font-scale-max-code-label: 3.1;
  --font-scale-max-otp: 0;
  --font-scale-max-input: 3.1;
  --font-scale-max-wordmark: 3.1;
}

:root[data-mode=dark] {
  --color-surface-page: #0F0F1C;
  --color-surface-raised: #171720;
  --color-surface-sunken: #090918;
  --color-surface-overlay: #1E1F30;
  --color-surface-on-overlay: #E6E6F5;
  --color-surface-on-overlay-soft: #A1A2B9;
  --color-surface-on-overlay-track: #E6E6F529;
  --color-ink-default: #E6E6F5;
  --color-ink-soft: #C4C5DB;
  --color-caption: #9B9CB3;
  --color-icon-idle: #838498;
  --color-line-hair: #1F1F33;
  --color-line-strong: #35354E;
  --color-line-control: #767892;
  --color-line-rule: #C4C5DB;
  --color-accent-text: #F14499;
  --color-accent-fill: #CD167B;
  --color-accent-mark: #CD167B;
  --color-accent-on-overlay: #F14499;
  --color-link: #F14499;
  --color-love: #F14499;
  --color-focus: #F14499;
  --color-positive: #62946C;
  --color-warning: #C07822;
  --color-danger: #E45C5E;
  --color-chart-bar: #838498;
  --color-chart-track: #1F1F33;
  --color-chip-fill: #171720;
  --color-chip-ink: #E6E6F5;
  --color-chip-line: #767892;
  --color-switch-track-off: #767892;
  --color-switch-track-on: #CD167B;
  --color-switch-knob: #171720;
  --color-badge-fill: #E6E6F5;
  --color-badge-ink: #0F0F1C;
  --color-tint-1: #34402F;
  --color-tint-2: #2F3B42;
  --color-tint-3: #4A3F22;
  --color-tint-4: #4A3029;
  --color-tint-5: #3B3346;
  --color-tint-6: #3D352B;
  --color-tint-ink: #EFE7DA;
  --color-shelf-back: #2A241E;
  --color-shelf-board: #5A4A38;
  --color-shelf-edge: #3A2F24;
  --color-scrim: #0000008C;
  --color-shade: #00000099;
  --color-glass: #171720F0;
  --color-chrome-glass: #0F0F1CCC;
  --field-field: #0F0F1C;
  --field-ink: #E6E6F5;
  --field-ink-soft: #9B9CB3;
  --field-accent: #F14499;
  --field-line: #61616E;
  --field-control: #2D2D3A;
  --field-control-pressed: #474754;
  --field-play: #CD167B;
  --field-accent-fill: #A84B74;
  --field-shade: #000000A8;
  --field-cover-ring: #E6E6F52E;
  --elevation-cover: 0px 0px 0px 1px #E6E6F52E, 0px 30px 60px -26px #000000A8, 0px 10px 20px -14px #000000A8;
  --elevation-card: 0px 1px 1px 0px #0000001A, 0px 22px 40px -26px #00000099;
  --elevation-thumb: 0px 1px 1px 0px #0000001F, 0px 6px 14px -8px #00000099;
  --elevation-pop: 0px 24px 48px -20px #00000099, 0px 2px 6px -2px #0000004D;
  --elevation-sheet: 0px -12px 32px -16px #00000099;
  --elevation-dialog: 0px 40px 80px -30px #000000CC, 0px 2px 8px 0px #0000004D;
  --elevation-float: 0px 14px 34px -14px #00000099, 0px 1px 2px 0px #0000004D;
  --elevation-bar: 0px -1px 0px 0px #1F1F33;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode=light]) {
    --color-surface-page: #0F0F1C;
    --color-surface-raised: #171720;
    --color-surface-sunken: #090918;
    --color-surface-overlay: #1E1F30;
    --color-surface-on-overlay: #E6E6F5;
    --color-surface-on-overlay-soft: #A1A2B9;
    --color-surface-on-overlay-track: #E6E6F529;
    --color-ink-default: #E6E6F5;
    --color-ink-soft: #C4C5DB;
    --color-caption: #9B9CB3;
    --color-icon-idle: #838498;
    --color-line-hair: #1F1F33;
    --color-line-strong: #35354E;
    --color-line-control: #767892;
    --color-line-rule: #C4C5DB;
    --color-accent-text: #F14499;
    --color-accent-fill: #CD167B;
    --color-accent-mark: #CD167B;
    --color-accent-on-overlay: #F14499;
    --color-link: #F14499;
    --color-love: #F14499;
    --color-focus: #F14499;
    --color-positive: #62946C;
    --color-warning: #C07822;
    --color-danger: #E45C5E;
    --color-chart-bar: #838498;
    --color-chart-track: #1F1F33;
    --color-chip-fill: #171720;
    --color-chip-ink: #E6E6F5;
    --color-chip-line: #767892;
    --color-switch-track-off: #767892;
    --color-switch-track-on: #CD167B;
    --color-switch-knob: #171720;
    --color-badge-fill: #E6E6F5;
    --color-badge-ink: #0F0F1C;
    --color-tint-1: #34402F;
    --color-tint-2: #2F3B42;
    --color-tint-3: #4A3F22;
    --color-tint-4: #4A3029;
    --color-tint-5: #3B3346;
    --color-tint-6: #3D352B;
    --color-tint-ink: #EFE7DA;
    --color-shelf-back: #2A241E;
    --color-shelf-board: #5A4A38;
    --color-shelf-edge: #3A2F24;
    --color-scrim: #0000008C;
    --color-shade: #00000099;
    --color-glass: #171720F0;
    --color-chrome-glass: #0F0F1CCC;
    --field-field: #0F0F1C;
    --field-ink: #E6E6F5;
    --field-ink-soft: #9B9CB3;
    --field-accent: #F14499;
    --field-line: #61616E;
    --field-control: #2D2D3A;
    --field-control-pressed: #474754;
    --field-play: #CD167B;
    --field-accent-fill: #A84B74;
    --field-shade: #000000A8;
    --field-cover-ring: #E6E6F52E;
    --elevation-cover: 0px 0px 0px 1px #E6E6F52E, 0px 30px 60px -26px #000000A8, 0px 10px 20px -14px #000000A8;
    --elevation-card: 0px 1px 1px 0px #0000001A, 0px 22px 40px -26px #00000099;
    --elevation-thumb: 0px 1px 1px 0px #0000001F, 0px 6px 14px -8px #00000099;
    --elevation-pop: 0px 24px 48px -20px #00000099, 0px 2px 6px -2px #0000004D;
    --elevation-sheet: 0px -12px 32px -16px #00000099;
    --elevation-dialog: 0px 40px 80px -30px #000000CC, 0px 2px 8px 0px #0000004D;
    --elevation-float: 0px 14px 34px -14px #00000099, 0px 1px 2px 0px #0000004D;
    --elevation-bar: 0px -1px 0px 0px #1F1F33;
  }
}

@media (min-width: 700px) {
  :root {
    --space-alias-gutter: 24px;
    --space-alias-section-gap: 80px;
    --space-alias-feed-gap: 48px;
    --space-alias-head-gap: 24px;
    --space-alias-block-gap: 32px;
    --space-alias-hero-bottom: 64px;
    --space-alias-tile-gap-x: 24px;
    --space-alias-tile-gap-y: 32px;
    --space-alias-pal-block-gap: 48px;
    --space-alias-home-tile-gap-y: 20px;
    --size-cover-hero: 440px;
    --size-cover-share: 440px;
    --size-photo-hero: 72px;
    --size-thumb: 56px;
    --size-art-jump: 176px;
    --size-art-band: 104px;
    --size-art-curator-cover: 120px;
    --size-art-where-to-start: 128px;
    --size-photo-about: 56px;
    --size-photo-pal-face: 56px;
    --size-track-number: 40px;
    --size-track-love: 44px;
    --size-track-duration: 52px;
    --size-track-more: 44px;
    --size-track-row-min: 60px;
    --size-chart-height: 80px;
    --size-chart-meter-label: 136px;
    --size-chart-map-cell: 40px;
    --size-chart-map-row: 28px;
    --size-disc-large: 432px;
    --size-disc-medium: 312px;
    --size-shelf-spine-vinyl: 232px;
    --size-shelf-spine-cd: 156px;
    --size-shelf-spine-tape: 112px;
    --count-library-columns: 6;
    --count-artist-tiles: 5;
    --radius-cover: 4px;
    --radius-thumb: 4px;
    --font-style-title-size: 64px;
    --font-style-title-line: 68px;
    --font-style-title-tracking: -1.792px;
    --font-style-artist-family: "Gloock", "Iowan Old Style", "Palatino Linotype", "Georgia", "Hiragino Mincho ProN", serif;
    --font-style-artist-size: 30px;
    --font-style-artist-line: 36px;
    --font-style-artist-tracking: -0.3px;
    --font-style-artist-weight: 400;
    --font-style-page-title-size: 44px;
    --font-style-page-title-line: 48px;
    --font-style-page-title-tracking: -1.232px;
    --font-style-h2-size: 28px;
    --font-style-h2-line: 32px;
    --font-style-h2-tracking: -0.42px;
    --font-style-h3-size: 20px;
    --font-style-h3-line: 26px;
    --font-style-quote-size: 28px;
    --font-style-quote-line: 36px;
    --font-style-quote-tracking: -0.28px;
    --font-style-take-size: 26px;
    --font-style-take-line: 34px;
    --font-style-take-tracking: -0.26px;
    --font-style-reply-size: 22px;
    --font-style-reply-line: 30px;
    --font-style-reply-tracking: -0.22px;
    --font-style-card-size: 24px;
    --font-style-card-line: 28px;
    --font-style-card-tracking: -0.24px;
    --font-style-dek-size: 20px;
    --font-style-dek-line: 30px;
    --font-style-mood-size: 22px;
    --font-style-mood-line: 28px;
    --font-style-lede-size: 18px;
    --font-style-lede-line: 29px;
    --font-style-value-size: 18px;
    --font-style-value-line: 26px;
    --font-style-feature-size: 22px;
    --font-style-feature-line: 30px;
    --font-style-numeral-size: 48px;
    --font-style-numeral-line: 48px;
    --font-style-chime-size: 40px;
    --font-style-chime-line: 44px;
    --font-style-row-size: 17px;
    --font-style-row-line: 22px;
    --font-style-ui-title-line: 22px;
    --font-style-ui-title-meta-size: 14px;
    --font-style-ui-title-meta-line: 20px;
    --font-style-note-line: 22px;
    --font-style-tone-size: 16px;
    --font-style-tone-line: 20px;
    --font-style-body-size: 16px;
    --font-style-body-line: 24px;
    --font-style-small-line: 22px;
    --font-style-meta-size: 14px;
    --font-style-meta-line: 20px;
    --font-style-chip-line: 22px;
    --font-style-count-size: 32px;
    --font-style-count-line: 36px;
    --font-style-labelname-size: 28px;
    --font-style-labelname-line: 31px;
    --font-style-labelname-medium-size: 24px;
    --font-style-labelname-medium-line: 26px;
    --font-style-code-size: 14px;
    --font-style-code-line: 20px;
    --font-style-otp-size: 26px;
    --font-style-otp-line: 32px;
    --font-style-otp-tracking: 2.6px;
    --font-style-wordmark-size: 24px;
    --font-style-wordmark-line: 24px;
    --font-style-wordmark-tracking: 0.48px;
  }
}

@media (max-width: 400px) and (max-height: 599px) {
  :root {
    --space-alias-gutter: 16px;
    --space-alias-section-gap: 32px;
    --space-alias-head-gap: 8px;
    --space-alias-block-gap: 20px;
    --space-alias-hero-bottom: 20px;
    --space-alias-tile-gap-x: 12px;
    --space-alias-tile-gap-y: 16px;
    --space-alias-pal-block-gap: 32px;
    --size-button: 44px;
    --size-input-labelled: 56px;
    --size-strip: 52px;
    --size-sheet-row: 44px;
    --size-cover-hero: 96px;
    --size-cover-share: 96px;
    --size-photo-hero: 40px;
    --size-card: 200px;
    --size-thumb: 44px;
    --size-art-tile: 56px;
    --size-art-hit: 64px;
    --size-art-now-playing: 56px;
    --size-art-band: 72px;
    --size-art-station: 48px;
    --size-art-curator-cover: 72px;
    --size-art-where-to-start: 56px;
    --size-art-banner: 32px;
    --size-photo-about: 40px;
    --size-photo-pal-face: 44px;
    --size-icon-format: 22px;
    --size-track-love: 36px;
    --size-track-more: 28px;
    --size-track-row-min: 52px;
    --size-chart-height: 48px;
    --size-chart-meter-label: 136px;
    --size-chart-map-row: 20px;
    --size-disc-large: 288px;
    --size-disc-medium: 248px;
    --size-disc-hole: 32px;
    --size-shelf-spine-vinyl: 160px;
    --size-shelf-spine-cd: 116px;
    --size-shelf-spine-tape: 84px;
    --size-shelf-empty-height: 88px;
    --count-library-columns: 3;
    --count-dek-lines: 2;
    --radius-cover: 6px;
    --radius-thumb: 6px;
    --font-style-title-size: 22px;
    --font-style-title-line: 24px;
    --font-style-title-tracking: -0.33px;
    --font-style-artist-size: 17px;
    --font-style-artist-line: 22px;
    --font-style-artist-tracking: -0.17px;
    --font-style-page-title-size: 22px;
    --font-style-page-title-line: 26px;
    --font-style-page-title-tracking: -0.616px;
    --font-style-h2-size: 16px;
    --font-style-h2-line: 22px;
    --font-style-h2-tracking: -0.24px;
    --font-style-h3-size: 16px;
    --font-style-h3-line: 22px;
    --font-style-quote-size: 16px;
    --font-style-quote-line: 22px;
    --font-style-quote-tracking: -0.16px;
    --font-style-take-size: 16px;
    --font-style-take-line: 22px;
    --font-style-take-tracking: -0.16px;
    --font-style-reply-size: 15px;
    --font-style-reply-line: 21px;
    --font-style-reply-tracking: -0.15px;
    --font-style-card-size: 15px;
    --font-style-card-line: 20px;
    --font-style-card-tracking: -0.15px;
    --font-style-dek-size: 15px;
    --font-style-dek-line: 21px;
    --font-style-mood-size: 16px;
    --font-style-mood-line: 22px;
    --font-style-lede-size: 15px;
    --font-style-lede-line: 22px;
    --font-style-value-size: 15px;
    --font-style-value-line: 21px;
    --font-style-feature-size: 16px;
    --font-style-feature-line: 22px;
    --font-style-numeral-size: 22px;
    --font-style-numeral-line: 24px;
    --font-style-chime-size: 22px;
    --font-style-chime-line: 26px;
    --font-style-row-size: 15px;
    --font-style-row-line: 20px;
    --font-style-tile-size: 15px;
    --font-style-tile-line: 20px;
    --font-style-ui-title-size: 14px;
    --font-style-ui-title-line: 20px;
    --font-style-ui-title-meta-size: 14px;
    --font-style-ui-title-meta-line: 20px;
    --font-style-note-size: 14px;
    --font-style-note-line: 20px;
    --font-style-tone-size: 12px;
    --font-style-tone-line: 15px;
    --font-style-small-size: 14px;
    --font-style-small-line: 20px;
    --font-style-meta-size: 14px;
    --font-style-meta-line: 20px;
    --font-style-chip-size: 14px;
    --font-style-chip-line: 20px;
    --font-style-spine-size: 11px;
    --font-style-spine-line: 13px;
    --font-style-spine-tracking: 0.66px;
    --font-style-count-size: 20px;
    --font-style-count-line: 24px;
    --font-style-labelname-size: 16px;
    --font-style-labelname-line: 18px;
    --font-style-labelname-medium-size: 16px;
    --font-style-labelname-medium-line: 18px;
    --font-style-code-size: 14px;
    --font-style-code-line: 20px;
    --font-style-otp-size: 20px;
    --font-style-otp-line: 24px;
    --font-style-otp-tracking: 2px;
    --font-style-input-size: 16px;
    --font-style-input-line: 22px;
    --font-style-wordmark-size: 18px;
    --font-style-wordmark-line: 18px;
    --font-style-wordmark-tracking: 0.36px;
  }
}