/* Quantsion shared design tokens.
   Change this file to update the visual foundation across every page. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex/plex-sans-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex/plex-sans-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: block;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex/plex-sans-semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: block;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex/plex-sans-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: block;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex/plex-mono-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex/plex-mono-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: block;
}

:root {
  --psv-font-sans: "IBM Plex Sans", Arial, sans-serif;
  /* Display voice = the body family's heavier cuts. One typographic DNA from
     logo to hero to interface; no OS-dependent face anywhere. */
  --psv-font-display: "IBM Plex Sans", Arial, sans-serif;
  /* The face every page opening speaks in. Only the statement uses it, so
     changing it here changes all nine openings and nothing else. */
  --psv-font-hero: "Inter", "IBM Plex Sans", Arial, sans-serif;
  --psv-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  /* The editorial voice is the body family: two families on the site, Inter for the
     openings and IBM Plex for everything else (owner, 12 October 2026). */
  --psv-font-editorial: "IBM Plex Sans", Arial, sans-serif;

  /* Colour channels.
     Every translucent surface on the site is one of these four colours at
     some alpha. Keeping the channels as tokens means a tint stays inside the
     system: write rgb(var(--psv-accent-rgb) / .18), never a loose rgba(). */
  --psv-bg-rgb: 247 249 252;
  --psv-bg-deep-rgb: 236 241 246;
  --psv-accent-rgb: 24 104 168;
  --psv-accent-pale-rgb: 12 74 128;
  --psv-accent-bright-rgb: 20 90 150;
  --psv-accent-tint-rgb: 40 110 170;
  --psv-mist-rgb: 70 96 118;      /* the tq visual family's grey-blue */
  --psv-panel-rgb: 230 236 243;
  --psv-panel-deep-rgb: 220 228 237;
  --psv-danger-rgb: 178 52 52;
  --psv-warning-rgb: 154 104 12;
  --psv-line-rgb: 30 60 95;
  --psv-line-strong-rgb: 20 50 85;
  --psv-text-rgb: 6 20 38;

  /* Core colour roles. Page-level styles should consume roles, not raw values. */
  --psv-bg: rgb(var(--psv-bg-rgb));
  --psv-bg-alt: #eef2f7;
  --psv-bg-raised: #e4ebf3;
  --psv-bg-deep: rgb(var(--psv-bg-deep-rgb));
  --psv-panel: rgb(var(--psv-panel-rgb) / .76);
  --psv-panel-solid: #e4ebf3;
  --psv-panel-soft: rgb(var(--psv-panel-rgb) / .48);
  --psv-panel-quiet: rgb(var(--psv-panel-deep-rgb) / .58);
  --psv-text: rgb(var(--psv-text-rgb));
  --psv-copy: #3f5266;
  --psv-muted: #52647b;
  /* Contract of the two blues:
     --psv-accent    = interaction and emphasis (links, hovers, meters,
                       section accents) — the interface speaking.
     --psv-logo-blue = the brand speaking in its own voice (the logo, the
                       active nav word, brand signatures). Never mix roles. */
  /* The brand navy. Locked by the owner on 14 September 2026 (N3 tone T5):
     headings, the logo mark, the "PSV" wordmark and the nav page names are set in it;
     the logo frame and "Quant" carry --psv-logo-blue. */
  --psv-brand: #132d58;
  --psv-brand-rgb: 19 45 88;
  --psv-accent: rgb(var(--psv-accent-rgb));
  /* The measured blue of the logo mark — the same value "Quant" is set in
     inside psvquant-logo.svg. Anything that should speak in the logo's own
     voice (the active nav word) uses this, not --psv-accent. */
  --psv-logo-blue: #338CFF;
  --psv-accent-strong: #145a93;
  --psv-accent-pale: rgb(var(--psv-accent-pale-rgb));
  --psv-accent-bright: rgb(var(--psv-accent-bright-rgb));
  --psv-accent-tint: rgb(var(--psv-accent-tint-rgb));
  --psv-success: #1f7a4d;
  --psv-warning: rgb(var(--psv-warning-rgb));
  --psv-danger: rgb(var(--psv-danger-rgb));
  --psv-focus: #1868a8;
  --psv-on-light: #06111f;
  --psv-white: #ffffff;
  --psv-line: rgb(var(--psv-line-rgb) / .18);
  --psv-line-strong: rgb(var(--psv-line-strong-rgb) / .34);
  --psv-line-faint: rgb(var(--psv-line-strong-rgb) / .035);
  --psv-accent-line: rgb(var(--psv-accent-rgb) / .14);
  --psv-accent-line-strong: rgb(var(--psv-accent-rgb) / .25);
  --psv-accent-wash: rgb(var(--psv-accent-rgb) / .08);
  --psv-accent-ghost: rgb(var(--psv-accent-rgb) / .055);
  /* The header ground is the page ground, opaque: the same white on every page
     and at every step. */
  --psv-header-bg: var(--psv-bg);
  /* The statement resolves into the brand's own blue -- the one the logo's
     "Quant" is set in -- rather than the turquoise the old end read as. */
  /* Headings are flat navy: the gradient is gone, the token name stays so every
     heading rule keeps reading it. */
  --psv-heading-gradient: var(--psv-brand);
  /* The ramp is pinned to a shared span instead of each heading's own box.
     Technology and Research cap their measure at 1040px, and a two-line
     opening is half the height of a four-line one -- with background-size
     auto every page resolved a different ramp, so the same letter landed on
     a different blue. Pinned, the gradient reads identically on all six. */
  --psv-heading-gradient-span: calc(min(1320px, 100vw - 32px) - 2 * clamp(42px, 3.25vw, 48px));

  /* Page ground.
     One ground for the whole site. Tone comes from sections — --psv-bg-alt,
     --psv-bg-deep, panels — not from a page-wide wash, so no page can drift
     into its own atmosphere. The two optional layers below are off by
     default and switch on here, once, for every page at the same time:
       --psv-page-veil: var(--psv-page-gradient)  → the atmospheric wash
       --psv-page-grid: var(--psv-page-measure)   → the faint measure grid */
  --psv-page-ground: var(--psv-bg);
  --psv-page-veil: none;
  --psv-page-grid: none;

  --psv-page-gradient:
    radial-gradient(circle at 70% 12%, rgba(50, 116, 165, .18), transparent 34rem),
    radial-gradient(circle at 10% 18%, rgba(42, 86, 130, .10), transparent 28rem),
    linear-gradient(180deg, var(--psv-bg-alt) 0%, var(--psv-bg) 52%, var(--psv-bg-deep) 100%);
  --psv-page-measure:
    linear-gradient(rgb(var(--psv-line-strong-rgb) / .035) calc(1 * var(--psv-u)), transparent calc(1 * var(--psv-u))),
    linear-gradient(90deg, rgb(var(--psv-line-strong-rgb) / .035) calc(1 * var(--psv-u)), transparent calc(1 * var(--psv-u)));

  --psv-header-height: calc(76 * var(--psv-u));
  /* Distance from the top of the hero's content box down to the statement
     band. Calibrated so the first visible text line sits at 260px from the
     page top on desktop and 345px on mobile -- one value, every page. */
  --psv-statement-drop: calc(63 * var(--psv-u));
  /* Height reserved for a page's opening statement. Fixed, so every page
     starts its first line on the same y. */
  --psv-primary-band: clamp(226.8px, 23.49vw, 334.8px);
  --psv-shell-content: min((1320 * var(--psv-u)), calc(100% - (32 * var(--psv-u))));
  --psv-shell-wide: min((1320 * var(--psv-u)), calc(100% - (32 * var(--psv-u))));
  --psv-shell-narrow: min((920 * var(--psv-u)), calc(100% - (40 * var(--psv-u))));
  --psv-section-space: clamp(96px, 8vw, 128px);
  --psv-section-space-compact: clamp(64px, 6vw, 88px);
  --psv-closing-space: clamp(112px, 12vw, 176px);

  /* Interface type scale.
     The editorial scale below sizes what the visitor reads; this one sizes
     what the interface says — labels, controls, metadata, data values. */
  --psv-ui-nano: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
  --psv-ui-micro: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
  --psv-ui-label: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
  --psv-ui-chip: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
  --psv-ui-control: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
  --psv-ui-copy: max(var(--psv-text-floor), calc(14 * var(--psv-u)));
  --psv-ui-copy-lg: max(var(--psv-text-floor), calc(15 * var(--psv-u)));
  --psv-ui-value: calc(19 * var(--psv-u));

  /* Weights. IBM Plex Sans ships four cuts; anything else silently rounds to
     one of these, so only these four are ever written. */
  --psv-weight-regular: 400;
  --psv-weight-medium: 500;
  --psv-weight-semibold: 600;
  --psv-weight-bold: 700;

  /* Tracking. Uppercase labels open up, display type tightens. */
  --psv-track-flat: .01em;
  --psv-track-mono: .04em;
  --psv-track-control: .08em;
  --psv-track-label: .1em;
  --psv-track-meta: .13em;
  --psv-track-eyebrow: .16em;
  --psv-track-wide: .18em;
  --psv-track-snug: .02em;
  --psv-track-caps: .06em;
  --psv-track-caps-wide: .12em;
  --psv-track-caps-meta: .14em;
  --psv-track-tight: -.03em;
  --psv-track-tighter: -.038em;
  --psv-track-display: -.048em;
  --psv-track-display-lg: -.057em;

  /* Header and navigation geometry. */
  --psv-brand-width: calc(154 * var(--psv-u));
  --psv-logo-width: calc(137.48 * var(--psv-u)); /* = the logo SVG viewBox width; tools/build_logo.py prints it */
  --psv-logo-height: calc(31 * var(--psv-u));
  /* 44px: the minimum comfortable touch target; the header toggles and CTA
     all take their hit area from this one value. */
  --psv-control-size: max(44px, calc(44 * var(--psv-u)));
  --psv-nav-gap: clamp(22px, 2.4vw, 38px);

  /* Width reservation for the header action, so the CTA does not resize on
     language switch. Nav labels sit at natural width by design — even word
     spacing in every language outranks a stationary row. */
  --psv-nav-w-action: calc(119 * var(--psv-u));

  /* Measures. How wide a line of a given kind is allowed to run. */
  --psv-measure-statement: calc(1040 * var(--psv-u));
  --psv-measure-heading: calc(820 * var(--psv-u));
  --psv-measure-heading-wide: calc(900 * var(--psv-u));
  --psv-measure-copy: calc(660 * var(--psv-u));
  --psv-measure-lead: 68ch;
  --psv-measure-prose: 72ch;

  /* Rules and edges. */
  --psv-border: 1px;
  --psv-border-strong: 2px;

  --psv-radius-xs: calc(4 * var(--psv-u));
  --psv-radius-sm: calc(8 * var(--psv-u));
  --psv-radius-md: calc(12 * var(--psv-u));
  --psv-radius-lg: calc(16 * var(--psv-u));
  --psv-shadow-soft: 0 calc(24 * var(--psv-u)) calc(70 * var(--psv-u)) rgba(0, 0, 0, .22);
  --psv-shadow-focus: 0 0 0 3px rgba(104, 194, 238, .2);

  --tq-stage-height: clamp(260px, 30vh, 360px);
  --psv-plan-gap: clamp(14px, 1.4vw, 22px);
  --psv-page-air: clamp(56px, 7vh, 104px);
  --psv-page-mark-gap: clamp(28px, 3.4vh, 48px);
  --psv-hero-size: clamp(40px, 6.4vw, 74px);
  --psv-hero-weight: 800;
  --psv-hero-leading: 1.02;
  --psv-hero-tracking: -.05em;
  --psv-title-size: clamp(34px, 4.1vw, 56px);
  --psv-title-weight: 500;
  --psv-title-leading: 1.06;
  --psv-title-tracking: -.026em;
  --psv-title-compact-size: clamp(26px, 2.5vw, 34px);
  --psv-stage-title-size: clamp(30px, 3.2vw, 42px);
  --psv-stage-copy-size: clamp(20px, 2vw, 27px);
  --psv-editorial-title-size: var(--psv-stage-title-size);
  --psv-editorial-title-weight: 500;
  --psv-editorial-title-leading: 1.1;
  --psv-editorial-title-tracking: -.012em;
  --psv-editorial-title-word-spacing: .04em;
  --psv-editorial-copy-size: clamp(17px, 1.35vw, 18px);
  --psv-editorial-copy-weight: 400;
  --psv-editorial-copy-leading: 1.62;
  --psv-editorial-copy-tracking: -.01em;
  --psv-editorial-copy-gap: calc(6 * var(--psv-u));
  --psv-closing-size: clamp(42px, 5vw, 60px);
  --psv-body-size: calc(16 * var(--psv-u));
  --psv-body-leading: 1.7;
  --psv-lead-size: clamp(18px, 1.7vw, 22px);
  --psv-lead-leading: 1.58;
  --psv-motion-distance: calc(18 * var(--psv-u));
  --psv-motion-duration: .9s;
  --psv-motion-easing: cubic-bezier(.22, 1, .36, 1);
}
/* desktop-scale:generated */
@media (min-width: 1051px) {
  :root {
    --psv-heading-gradient-span: calc(min((1320 * var(--psv-u)), 100vw - (32 * var(--psv-u))) - 2 * clamp((42 * var(--psv-u)), (49.92 * var(--psv-u)), (48 * var(--psv-u))));
    --psv-primary-band: clamp((226.8 * var(--psv-u)), (360.8064 * var(--psv-u)), (334.8 * var(--psv-u)));
    --psv-section-space: clamp((96 * var(--psv-u)), (122.88 * var(--psv-u)), (128 * var(--psv-u)));
    --psv-section-space-compact: clamp((64 * var(--psv-u)), (92.16 * var(--psv-u)), (88 * var(--psv-u)));
    --psv-closing-space: clamp((112 * var(--psv-u)), (184.32 * var(--psv-u)), (176 * var(--psv-u)));
    --psv-nav-gap: clamp((22 * var(--psv-u)), (36.864 * var(--psv-u)), (38 * var(--psv-u)));
    --tq-stage-height: clamp((260 * var(--psv-u)), (219 * var(--psv-u)), (360 * var(--psv-u)));
    --psv-plan-gap: clamp((14 * var(--psv-u)), (21.504 * var(--psv-u)), (22 * var(--psv-u)));
    --psv-page-air: clamp((56 * var(--psv-u)), (51.1 * var(--psv-u)), (104 * var(--psv-u)));
    --psv-page-mark-gap: clamp((28 * var(--psv-u)), (24.82 * var(--psv-u)), (48 * var(--psv-u)));
    --psv-hero-size: clamp((40 * var(--psv-u)), (98.304 * var(--psv-u)), (74 * var(--psv-u)));
    --psv-title-size: clamp((34 * var(--psv-u)), (62.976 * var(--psv-u)), (56 * var(--psv-u)));
    --psv-title-compact-size: clamp((26 * var(--psv-u)), (38.4 * var(--psv-u)), (34 * var(--psv-u)));
    --psv-stage-title-size: clamp((30 * var(--psv-u)), (49.152 * var(--psv-u)), (42 * var(--psv-u)));
    --psv-stage-copy-size: clamp((20 * var(--psv-u)), (30.72 * var(--psv-u)), (27 * var(--psv-u)));
    --psv-editorial-copy-size: clamp((17 * var(--psv-u)), (20.736 * var(--psv-u)), (18 * var(--psv-u)));
    --psv-closing-size: clamp((42 * var(--psv-u)), (76.8 * var(--psv-u)), (60 * var(--psv-u)));
    --psv-lead-size: clamp((18 * var(--psv-u)), (26.112 * var(--psv-u)), (22 * var(--psv-u)));
  }
}
/* desktop-scale:end */

@media (max-width: 1024px) {
  :root { --psv-shell-content: min(900px, calc(100% - 48px)); }
}

@media (max-width: 760px) {
  :root {
    --psv-primary-band: clamp(162.8px, 49.28vw, 206.8px);
    --psv-header-height: 68px;
    /* The mark steps with the header. Both headers read these two tokens, so
       neither can carry a size of its own and drift from the other. */
    --psv-logo-width: 124.18px;
    --psv-logo-height: 28px;
    --tq-stage-height: clamp(300px, 42vh, 380px);
    --psv-plan-gap: 12px;
    --psv-page-air: clamp(36px, 5vh, 64px);
    --psv-page-mark-gap: 20px;
    /* The longest opening on the site is Home's question; at 320px it needs a
       smaller floor than the wide scale, or it runs past its own hero. */
    /* ── The phone heading scale ────────────────────────────────────────
       One knob. The four heading sizes derive from it by the ratios they
       already had to each other (title .956, stage .933, closing 1.156), so
       moving the phone scale moves all four together and the hierarchy cannot
       drift apart the way four hand-tuned coefficients did.

       The rule this holds: a heading on a phone runs at most one line longer
       than the same heading on the wide profile. At 9vw System's paradigm ran
       to eight lines against five on desktop; at 5.5vw it runs to six on every
       phone measured, 320 through 430, and no page exceeds its desktop count
       by more than one. responsive_acceptance pins it.

       The floors are guards, not participants. A floor that fires inside the
       phone range silently turns a proportional scale into a fixed one -- that
       is what made a 320px screen an outlier at nine lines while every other
       phone sat at eight. These sit below the narrowest real screen: at 320px
       the scale gives 17.6px and the floor is 14. */
    --psv-phone-heading-scale: 5.5vw;
    --psv-hero-size: clamp(14px, var(--psv-phone-heading-scale), 46px);
    --psv-title-size: clamp(13px, calc(var(--psv-phone-heading-scale) * .956), 44px);
    --psv-stage-title-size: clamp(13px, calc(var(--psv-phone-heading-scale) * .933), 44px);
    --psv-closing-size: clamp(16px, calc(var(--psv-phone-heading-scale) * 1.156), 52px);
    --psv-hero-leading: 1.08;
    /* The phone band runs from a 568px screen to a 932px one -- 364px of
       height -- and a single number could not hold a proportion across it. At
       197px the opening started 40% of the way down a 12/13 and 36% down a Pro
       Max, while a 15px narrower phone dropped to the 380px rule and started at
       28%. The drop scales with the screen instead: 45px on the shortest, 75px
       on the tallest, which keeps the first line between a quarter and a third
       of the way down on every phone measured. The 380px rule below still
       overrides this, and has to: a narrow screen runs the statement to ten
       lines and the hero clips what does not fit. */
    --psv-statement-drop: clamp(44px, 8svh, 90px);
    /* Label sizes are set for a screen an arm's length away; a phone is held
       closer but the type is rendered smaller, and 10-11px stops being read
       and starts being skipped. */
    --psv-ui-nano: 12px;
    --psv-ui-micro: 12px;
    --psv-ui-label: 13px;
  }
}

/* A short desktop viewport has no room for the full statement size. */
@media (max-width: 1050px) and (min-width: 761px) and (max-height: 650px) {
  :root {
    --psv-hero-size: clamp(40px, 5.6vw, 68px);
  }
}

/* The narrowest screens: the statement band's drop is calibrated for a two or
   three line opening. Home's question and System's paradigm run to nine and ten
   lines there, and with the hero clipping its overflow the tail was being cut.
   The drop yields so the whole statement stays inside its own hero. */
@media (max-width: 380px) {
  :root {
    --psv-statement-drop: 44px;
  }
}

@media (max-width: 720px) {
  :root {
    --psv-shell-content: min(620px, calc(100% - 32px));
    --psv-section-space: 76px;
    --psv-section-space-compact: 56px;
    --psv-closing-space: 96px;
    /* The three heading sizes that used to sit here moved up to the 760px
       block, which is the reflow profile's own edge. Ending the phone band at
       720 while the hero ended at 760 made the scale non-monotonic: between
       721 and 760 the type stepped down as the screen grew -- title 38 at
       719px, 34 at 721px. */
    --psv-stage-copy-size: 20px;
    --psv-editorial-copy-size: 16px;
  }
}

/* Inter ExtraBold, self-hosted beside the other faces. Same two subsets
   Google Fonts serves, so Turkish letters resolve exactly as they did. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url('fonts/inter/inter-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url('fonts/inter/inter-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter Medium for the desktop menu (owner, 25 September 2026), same subsets. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('fonts/inter/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('fonts/inter/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk/space-grotesk-700-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk/space-grotesk-700-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* desktop-scale:generated */
/* Desktop scale core. The unit is one canvas pixel on this screen: the tighter
   of width and height against the 1536 x 730 canvas, between .684 (1051px,
   where the header turns into the menu) and 1.6. Height the canvas does not
   use (--psv-canvas-extra) is shared above and below a scene's content: the
   opening reads it here, other scenes where their lead is set. Floors: labels never below
   their canvas size; on a 1x screen no text of 15px or less under 11px.
   Written by tools/desktop_scale.py. */
@property --psv-u {
  syntax: "<length>";
  inherits: true;
  initial-value: 1px;
}

:root {
  --psv-u: 1px;
  --psv-text-floor: 0px;
  --psv-label-floor: 0px;
  --psv-canvas-extra: 0px;
}

@media (min-width: 1051px) {
  :root {
    --psv-u: clamp(.684px, min(100vw / 1536, 100svh / 730), 1.6px);
    --psv-label-floor: 1px;
    --psv-canvas-extra: max(0px, 100svh - 730 * var(--psv-u));
    --psv-statement-drop: calc(63 * var(--psv-u) + var(--psv-canvas-extra) / 2);
    --psv-page-air: calc(56 * var(--psv-u) + var(--psv-canvas-extra) / 2);
  }
}

@media (min-width: 1051px) and (max-resolution: 1.15dppx) {
  :root {
    --psv-text-floor: 11px;
  }
}
/* desktop-scale:end */