@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "IBM Plex Serif", Georgia, Cambria, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --h1-size: 54px;
  --h1-line: 60px;
  --h1-track: -1.96px;
  --h1-weight: 500;
  --h2-size: 36px;
  --h2-line: 48px;
  --h2-track: -0.72px;
  --h2-weight: 400;
  --h3-size: 24px;
  --h3-line: 32px;
  --lead-size: 20px;
  --lead-line: 28px;
  --sublead-size: 18px;
  --sublead-line: 28px;
  --body-size: 16px;
  --body-line: 26px;
  --small-size: 14px;
  --small-line: 22px;
  --tiny-size: 13px;
  --tiny-line: 20px;
  --micro-size: 12px;
  --nav-size: 14px;
  --btn-size: 20px;
  --btn-small-size: 14px;
  --wordmark-size: min(230px, 18.5vw);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-pill: 999px;

  --page-w: 1160px;
  --prose-w: 760px;
  --inset: 122px;
  --rail-x: 33px;
  --nav-h: 64px;
  --gutter: 16px;
  --tap: 44px;
  --tube-w: 14px;
  --pipe-w: 12px;
  --node-art-h: 143px;
  --bare-art-h: clamp(36px, 8.6vw, 124px);
  --end-w: 38px;
  --page-scene-h: 200px;
  --plate-pad: 6px;
  --plate-gap: 3px;
  --plate-name-size: 13px;

  --bg: #13111c;
  --bg-raised: #181622;
  --bg-sunken: #0e0d15;
  --bg-win: #0f0e16;
  --bg-win-bar: #13121b;
  --bg-card: #1b1a25;
  --bg-card-foot: #17161f;
  --bg-hover: rgba(255, 255, 255, 0.06);

  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.15);
  --line-3: rgba(255, 255, 255, 0.25);

  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.82);
  --ink-3: #c4c4ca;
  --ink-4: #a3a2ae;
  --ink-nav: #dcdce0;
  --ink-ok: #7fd6a4;
  --exam-ink: #ffb3a8;
  --final-ink: #ffd36b;

  --paper: var(--bg);
  --panel: var(--bg-card);
  --accent-deep: var(--focus-ring);
  --warn: var(--exam-ink);

  --btn-main: #553f83;
  --btn-main-hover: #644b99;
  --btn-main-line: rgba(255, 255, 255, 0.15);
  --btn-ghost: rgba(0, 0, 0, 0.35);
  --btn-ghost-line: rgba(255, 255, 255, 0.25);
  --focus-ring: #c9a8ff;

  --shadow-win: 0 30px 90px rgba(5, 4, 12, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-card: 0 12px 40px rgba(5, 4, 12, 0.45);

  --flap-bg: #0b0b0f;
  --flap-line: rgba(255, 255, 255, 0.09);
  --flap-hinge: #000000;
  --flap-ink: #ffffff;
  --flap-ink-dim: #8d8f9b;
  --flap-w: 31px;
  --flap-h: 48px;
  --flap-gap: 7px;
  --flap-size: 26px;
  --name-flap-w: 24px;
  --name-flap-h: 38px;
  --name-flap-gap: 5px;
  --name-flap-size: 20px;

  --wordmark-ink: rgba(160, 150, 200, 0.22);

  --sky: linear-gradient(180deg, #151129 0%, #1f1840 38%, #3a2759 68%, #6b3d6e 100%);
  --horizon-glow: rgba(255, 150, 140, 0.34);
  --star: #f4eefc;
  --moon: #fbeed2;
  --moon-glow: rgba(251, 238, 210, 0.16);
  --moon-face: #c9a98a;
  --cloud: rgba(190, 160, 220, 0.16);
  --hill-far: #3d2a5c;
  --hill-near: #33244f;
  --works-far: #5a4384;
  --works-window: #ffcf87;
  --ground: #171326;
  --ground-line: #4b3a6e;

  --glass: rgba(255, 255, 255, 0.1);
  --glass-line: rgba(255, 255, 255, 0.62);
  --glass-hi: rgba(255, 255, 255, 0.75);
  --glass-back: #1c172c;
  --steel: #8f80bd;
  --steel-shade: #5b4d86;
  --face: #1a1526;
  --blush: rgba(255, 110, 150, 0.6);
  --steam: rgba(255, 255, 255, 0.5);
  --crystal: #ffffff;
  --bubble: rgba(255, 255, 255, 0.85);
  --gauge-face: #f6f1ff;
  --pipe-glint: rgba(255, 255, 255, 0.24);
  --recess-band: rgba(255, 255, 255, 0.05);

  --rail-start: #ffd36b;
  --tint-1: #5b8df5;
  --tint-1-ink: #b3caff;
  --tint-1-chip: rgba(72, 126, 240, 0.2);
  --tint-1-panel: #1a2033;
  --tint-1-glow: rgba(72, 126, 240, 0.14);
  --tint-2: #2fb5cc;
  --tint-2-ink: #95e0ec;
  --tint-2-chip: rgba(31, 159, 184, 0.2);
  --tint-2-panel: #17262b;
  --tint-2-glow: rgba(31, 159, 184, 0.12);
  --tint-3: #e2a04a;
  --tint-3-ink: #f5c98f;
  --tint-3-chip: rgba(208, 138, 53, 0.2);
  --tint-3-panel: #241d19;
  --tint-3-glow: rgba(208, 138, 53, 0.14);
  --tint-4: #e0629f;
  --tint-4-ink: #f7abd3;
  --tint-4-chip: rgba(214, 70, 140, 0.2);
  --tint-4-panel: #24152a;
  --tint-4-glow: rgba(214, 70, 140, 0.14);

  --unit-1: #ffd36b;
  --unit-2: #f7b267;
  --unit-3: #f79d84;
  --unit-4: #f48fb1;
  --unit-5: #d99cf0;
  --unit-6: #a9a4ff;
  --unit-7: #7fb8ff;
  --unit-8: #6fd3e6;
  --unit-9: #7fe0b4;
  --unit-plain: #d9d3ee;
  --unit-final: #ffe9a8;
  --bead-1: #4aa3ff;
  --bead-2: #58d68d;
  --bead-3: #ff8fb8;
  --bead-4: #ffb347;

  --slide-w: 1920px;
  --slide-h: 1080px;
  --slide-bg: #13111c;
  --slide-panel: #1b1a25;
  --slide-ink: #ffffff;
  --slide-ink-2: #dedde6;
  --slide-ink-3: #b9b8c6;
  --slide-title-size: 140px;
  --slide-head-size: 80px;
  --slide-body-size: 46px;
  --slide-eq-size: 120px;
  --slide-small-size: 32px;
  --slide-tube-w: 28px;
  --slide-rail-x: 110px;
  --slide-glass-w: 64px;
  --slide-ground-h: 100px;
}

@media (max-width: 1300px) {
  :root {
    --plate-pad: 4px;
    --plate-gap: 2px;
    --plate-name-size: 12px;
    --micro-size: 11px;
  }
}

@media (max-width: 760px) {
  :root {
    --h1-size: 38px;
    --h1-line: 44px;
    --h1-track: -1.2px;
    --h2-size: 28px;
    --h2-line: 36px;
    --lead-size: 17px;
    --lead-line: 26px;
    --btn-size: 17px;
    --inset: 44px;
    --rail-x: 14px;
    --gutter: 8px;
    --tube-w: 10px;
    --end-w: 46px;
    --page-scene-h: 110px;
    --micro-size: 12px;
    --plate-pad: 6px;
    --plate-name-size: 13px;
    --flap-w: 18px;
    --flap-h: 30px;
    --flap-gap: 3px;
    --flap-size: 15px;
    --name-flap-w: 11px;
    --name-flap-h: 20px;
    --name-flap-gap: 2px;
    --name-flap-size: 10px;
  }
}