/* Self-hosted fonts (SIL Open Font License, from Google Fonts): Inter Tight, Geist, Geist Mono, Instrument Sans, Instrument Serif.
   Latin and Latin Extended subsets; the files are named family-subset.woff2. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/geist-latin-ext.woff2?v=824f485b5d) 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: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/geist-latin.woff2?v=19f9c92546) 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: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/geist-mono-latin-ext.woff2?v=84c2a01e0e) 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: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/geist-mono-latin.woff2?v=72971bd490) 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: 'Instrument Sans';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext.woff2?v=c4fcfea41f) 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: 'Instrument Sans';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin.woff2?v=2ee17598a9) 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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-latin-ext.woff2?v=d001482125) 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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-latin.woff2?v=5a51946dff) 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 Tight';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/inter-tight-latin-ext.woff2?v=fd9beddaae) 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: 'Inter Tight';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/inter-tight-latin.woff2?v=77fefe8ca1) 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;
}

/* Store tokens: light glass. The brand lives here; layout CSS only reads these.
   Grounds are near-white with a faint cool bias; frosted glass is kept for what floats (the nav, overlay cards on the
   film, drawers). Hairlines, soft long shadows and one faint cool accent taken from the hero film's beam.
   Dark mode is its own designed set (dark glass), not an inversion: the system setting picks it unless the visitor
   chose a theme (html[data-theme], set by site.js). */
:root {
  color-scheme: light;

  /* grounds and ink */
  --bg: #F6F7F9;
  --bg-soft: #EEF0F4;
  --surface: #FFFFFF;
  --ink: #0E1013;
  --text-2: #4A5059;
  --text-3: #5E646E;
  --line: rgb(14 16 19 / 0.08);
  --line-2: rgb(14 16 19 / 0.15);
  --on-ink: #FFFFFF;

  /* the one accent: the film's cool beam. --beam is an RGB triplet for glows; --accent is the readable ink of it */
  --beam: 111 147 214;
  --accent: #3D63B8;

  /* glass */
  --glass: rgb(255 255 255 / 0.66);
  --glass-strong: rgb(255 255 255 / 0.84);
  --glass-edge: rgb(255 255 255 / 0.8);
  --blur: blur(20px) saturate(1.5);

  /* deep panels (pricing highlight, code): ink, not a gradient */
  --dark: #0E1013;
  --on-dark: #EEF0F4;
  --on-dark-2: rgb(238 240 244 / 0.64);
  --dark-line: rgb(255 255 255 / 0.1);

  /* legacy names some page CSS still reads; all map to the one accent */
  --blue: var(--beam);
  --violet: var(--beam);
  --orchid: var(--beam);
  --grad: linear-gradient(180deg, rgb(var(--beam)), var(--accent));

  /* type: a confident display face, a quiet text face, one italic for the secondary word, a mono for small labels */
  --display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* type scale (fluid, 1.25 below and wide above) */
  --t-xs: 13px;
  --t-sm: 15px;
  --t-md: 17px;
  --t-lg: clamp(19px, 1.5vw, 21px);
  --t-h3: clamp(21px, 1.8vw, 25px);
  --t-h2: clamp(34px, 4.4vw, 60px);
  --t-h1: clamp(44px, 6.4vw, 92px);

  /* spacing rhythm: 8px base; sections breathe at --sec */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --sec: clamp(88px, 10vw, 152px);

  /* layout */
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --r-sm: 10px;
  --r: 18px;
  --r-lg: 28px;
  --shadow: 0 1px 1px rgb(14 16 19 / 0.03), 0 12px 32px -18px rgb(24 34 60 / 0.22);
  --shadow-lg: 0 1px 2px rgb(14 16 19 / 0.04), 0 40px 80px -36px rgb(24 34 60 / 0.32);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --slow: cubic-bezier(0.16, 1, 0.3, 1);
}

/* dark glass */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A0C0F; --bg-soft: #111419; --surface: #15181D; --ink: #ECEEF2; --text-2: #A8AEB8; --text-3: #8A909B;
    --line: rgb(255 255 255 / 0.08); --line-2: rgb(255 255 255 / 0.16); --on-ink: #0A0C0F;
    --beam: 143 178 240; --accent: #9DBBF2;
    --glass: rgb(22 25 30 / 0.6); --glass-strong: rgb(22 25 30 / 0.82); --glass-edge: rgb(255 255 255 / 0.1);
    --dark: #15181D; --dark-line: rgb(255 255 255 / 0.1);
    --shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 16px 36px -18px rgb(0 0 0 / 0.7);
    --shadow-lg: 0 1px 2px rgb(0 0 0 / 0.3), 0 40px 80px -36px rgb(0 0 0 / 0.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0C0F; --bg-soft: #111419; --surface: #15181D; --ink: #ECEEF2; --text-2: #A8AEB8; --text-3: #8A909B;
  --line: rgb(255 255 255 / 0.08); --line-2: rgb(255 255 255 / 0.16); --on-ink: #0A0C0F;
  --beam: 143 178 240; --accent: #9DBBF2;
  --glass: rgb(22 25 30 / 0.6); --glass-strong: rgb(22 25 30 / 0.82); --glass-edge: rgb(255 255 255 / 0.1);
  --dark: #15181D; --dark-line: rgb(255 255 255 / 0.1);
  --shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 16px 36px -18px rgb(0 0 0 / 0.7);
  --shadow-lg: 0 1px 2px rgb(0 0 0 / 0.3), 0 40px 80px -36px rgb(0 0 0 / 0.8);
}

/* Shared layout: reset, type, buttons, the glass nav, footer, entrance. Reads tokens.css only. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 18px; height: 18px; flex: none; }

/* smooth scrolling (assets/js/smooth.js, Lenis, every page): the library's own required rules */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* type: display face for headings, quiet text face for everything else */
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.022em; text-wrap: balance; }
h1 { letter-spacing: -0.025em; }
em.it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
::selection { background: rgb(var(--beam) / 0.28); }

/* buttons: ink pill, glass pill */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; font: 500 15px/1 var(--font); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; transition: background .3s var(--ease), color .3s, box-shadow .3s var(--ease), transform .3s var(--ease); }
.btn-primary { background: var(--ink); color: var(--on-ink); box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 10px 24px -12px rgb(14 16 19 / 0.55); }
.btn-primary:hover { box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 16px 32px -14px rgb(var(--beam) / 0.9); transform: translateY(-1px); }
.btn-secondary, .btn-glass { background: var(--glass); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.btn-secondary:hover, .btn-glass:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-light { background: var(--on-dark); color: #0E1013; }
.btn-light:hover { background: #fff; }

/* header: a floating glass bar */
.hd { position: sticky; top: 0; z-index: 30; padding: 12px var(--gutter) 0; pointer-events: none; }
.hd .wrap { pointer-events: auto; display: flex; align-items: center; gap: 20px; height: 60px; max-width: calc(var(--max) + 24px); padding: 0 8px 0 18px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), var(--shadow); }
.logo { display: inline-flex; align-items: center; gap: 8px; font: 600 21px/1 var(--display); letter-spacing: -0.025em; }
.logo svg { width: 24px; height: 24px; flex: none; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav > a, .nav .dd > button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; white-space: nowrap; border: 0; background: none; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--text-2); cursor: pointer; transition: color .2s, background .2s; }
.nav > a:hover, .nav .dd > button:hover, .nav .dd.open > button { color: var(--ink); background: rgb(var(--beam) / 0.1); }
.nav .chev { width: 14px; height: 14px; transition: transform .2s; }
.dd { position: relative; }
.dd.open .chev { transform: rotate(180deg); }
.dd-panel { position: absolute; top: calc(100% + 14px); left: -8px; width: 290px; padding: 8px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--line), var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s var(--ease), visibility 0s .2s; }
.dd.open .dd-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ease); }
.dd-panel a { display: block; padding: 10px 12px; border-radius: 11px; }
.dd-panel a:hover { background: rgb(var(--beam) / 0.1); }
.dd-panel b { display: block; font-size: 15px; font-weight: 550; }
.dd-panel small { display: block; font-size: 13px; color: var(--text-3); }
.hd .cta { margin-left: 8px; }
.menu-btn { display: none; margin-left: auto; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 500; cursor: pointer; }
.sheet, .sheet-bg { display: none; }
.hd-account:empty { display: none; }

/* the Products menu: always light, two columns of the manifest's groups and a small featured card (data/nav.json) */
.mega { --ink: #0E1013; --text-2: #4A5059; --text-3: #5E646E; --line: rgb(14 16 19 / 0.08); --surface: #FFFFFF; color-scheme: light; color: var(--ink); left: -12px; width: 640px; padding: 10px; background: rgb(255 255 255 / 0.96); box-shadow: 0 0 0 1px rgb(14 16 19 / 0.08), 0 1px 2px rgb(14 16 19 / 0.04), 0 40px 80px -36px rgb(24 34 60 / 0.32); }
.mega-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mega-col { display: flex; flex-direction: column; gap: 6px; }
.mega-g p { margin: 10px 12px 6px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.dd-panel .mega-i { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; transition: background .2s; }
.dd-panel .mega-i:hover, .dd-panel .mega-i:focus-visible { background: #F1F3F6; }
.mega-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: #F3F4F7; box-shadow: inset 0 0 0 1px rgb(14 16 19 / 0.06); color: var(--ink); transition: background .2s; }
.mega-ic svg { width: 16px; height: 16px; }
.dd-panel .mega-i:hover .mega-ic { background: #fff; }
.mega-t { min-width: 0; }
.dd-panel .mega-t b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 550; }
.dd-panel .mega-t small { display: block; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-n { font: 500 11.5px/1 var(--mono); color: var(--text-3); }
.mega-new { padding: 3px 7px; border-radius: 999px; background: rgb(var(--beam) / 0.14); font: 500 10.5px/1 var(--mono); letter-spacing: .04em; color: var(--accent); }
.dd-panel .mega-feat { position: relative; display: block; margin-top: auto; padding: 12px; border-radius: 14px; background: #F3F5F8; box-shadow: inset 0 0 0 1px rgb(14 16 19 / 0.06); transition: background .2s; }
.dd-panel .mega-feat:hover { background: #EDF0F5; }
.mega-art { position: relative; display: block; height: 64px; margin-bottom: 10px; border-radius: 9px; overflow: hidden; background: linear-gradient(160deg, #fff, #E6ECF7); box-shadow: inset 0 0 0 1px rgb(14 16 19 / 0.06); }
.mega-art i { position: absolute; left: 10px; right: 10px; height: 8px; border-radius: 3px; background: rgb(var(--beam) / 0.28); }
.mega-art i:nth-child(1) { top: 10px; right: 50%; background: rgb(14 16 19 / 0.7); }
.mega-art i:nth-child(2) { top: 24px; right: 30%; }
.mega-art i:nth-child(3) { top: 38px; height: 16px; background: rgb(var(--beam) / 0.16); }
.dd-panel .mega-feat b { font-size: 14.5px; font-weight: 550; }
.dd-panel .mega-feat small { font-size: 13px; color: var(--text-3); }
.mega-feat .arrow { position: absolute; right: 14px; bottom: 16px; width: 16px; height: 16px; color: var(--text-3); transition: color .2s; }
.mega-feat:hover .arrow { color: var(--ink); }

@media (max-width: 1180px) {
  .nav > a, .nav .dd > button { padding: 0 10px; }
}
@media (max-width: 1100px) { /* six header links and the CTA need 1100px */
  .nav, .hd .cta { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .hd { padding-top: 8px; }
  .hd .wrap { height: 56px; padding: 0 6px 0 16px; }
  /* off-canvas: a light panel from the right over a dimmed page; focus stays inside while it is open (site.js) */
  .sheet { pointer-events: auto; position: fixed; z-index: 2; top: 0; right: 0; bottom: 0; display: block; width: min(400px, 100%); overflow: auto; overscroll-behavior: contain; padding: 10px 14px 24px; background: var(--surface); box-shadow: -1px 0 0 var(--line), var(--shadow-lg); visibility: hidden; opacity: 0; transform: translateX(16px); transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s; }
  .sheet.open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .3s var(--ease); }
  .sheet-bg { pointer-events: auto; position: fixed; z-index: 1; inset: 0; background: rgb(10 12 15 / 0.32); opacity: 0; transition: opacity .25s; }
  .sheet-bg.open { opacity: 1; }
  .sheet-top { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 2px 0 8px; margin-bottom: 4px; }
  .sheet-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: var(--text-2); cursor: pointer; transition: color .2s, background .2s; }
  .sheet-x:hover { color: var(--ink); background: rgb(var(--beam) / 0.1); }
  .sheet-x .ico { width: 20px; height: 20px; }
  .sheet p { margin: 18px 10px 6px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
  .sheet a:not(.btn):not(.logo) { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: 11px; font-weight: 500; transition: background .2s; }
  .sheet a:not(.btn):not(.logo):hover { background: rgb(var(--beam) / 0.1); }
  .sheet-i .mega-ic { width: 30px; height: 30px; }
  .sheet-i .mega-n, .sheet-i .mega-new { margin-left: auto; }
  .sheet .btn { width: 100%; margin-top: 18px; }
  html.menu-open { overflow: hidden; }
}

/* footer: hairline columns on the ground, a giant quiet wordmark, the press-publish sign-off */
.ft { position: relative; overflow: hidden; margin-top: 0; border-top: 1px solid var(--line); background: var(--bg); }
.ft-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; padding-block: 80px 56px; }
.ft h2 { margin: 0 0 8px; font-size: clamp(26px, 2.6vw, 34px); }
.ft-lede { margin: 0; color: var(--text-2); }
.nl { display: flex; gap: 8px; max-width: 440px; margin-top: 24px; }
.nl input { flex: 1; min-width: 0; height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 400 15px var(--font); }
.nl input::placeholder { color: var(--text-3); }
.nl input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.nl .btn { background: var(--ink); color: var(--on-ink); }
.nl-note { min-height: 22px; margin: 10px 0 0 20px; font-size: 13px; color: var(--text-2); }
.ft-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.ft-cols h3 { margin: 6px 0 16px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ft-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ft-cols a { color: var(--text-2); transition: color .2s; }
.ft-cols a:hover { color: var(--ink); }
.ft-word { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0; padding-top: 24px; border-top: 1px solid var(--line); }
.ft-word b { font: 600 clamp(88px, 21vw, 300px)/.8 var(--display); letter-spacing: -0.05em; margin: 0 0 -.06em -.05em; color: transparent; -webkit-text-stroke: 1px var(--line-2); }
.ft-word span { padding-bottom: 14px; font: italic 400 clamp(22px, 2.4vw, 32px)/1 var(--serif); color: var(--text-2); white-space: nowrap; }
.ft-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 20px 32px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-3); }
.ft-bottom nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ft-legal span { color: var(--line-2); } .ft-legal .bar { margin-inline: 4px; }
.ft-bottom a:hover { color: var(--ink); }
.theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); }
.theme button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font-size: 13px; color: var(--text-2); cursor: pointer; }
.theme button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
@media (max-width: 1100px) {
  .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 860px) {
  .ft-top { grid-template-columns: minmax(0, 1fr); padding-block: 64px 40px; }
  .ft-word { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ft-word span { padding: 0 0 8px; }
}
@media (max-width: 520px) {
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .nl { flex-direction: column; }
  .nl .btn { width: 100%; }
}

/* first-view entrance: each section rises in once as it enters (site.js adds .rv-on to <html> and .in to sections) */
.rv-on :is(main > section:not(.hc), main > div > section, .ft > .wrap) { opacity: 0; transform: translateY(32px); transition: opacity 1.2s var(--slow), transform 1.4s var(--slow); }
.rv-on :is(main > section, main > div > section, .ft > .wrap).in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; } html { scroll-behavior: auto; } }

/* skip link, current page in menus */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font-weight: 550; transition: top .15s; }
.skip:focus { top: 12px; }
.nav > a[aria-current="page"], .dd-panel a[aria-current="page"] b, .sheet a[aria-current="page"] { color: var(--ink); }
.nav > a[aria-current="page"] { background: rgb(var(--beam) / 0.12); }

/* the founding offer (src/offer.mjs): pages carry both states, the root's data-offer shows one; the seat count shows
   only once the endpoint has answered (data-offer-left) */
:root[data-offer="closed"] .of-open, :root:not([data-offer="closed"]) .of-closed { display: none !important; }
:root:not([data-offer-left]) .of-count { display: none !important; }
.of-line { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; font-size: 13.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.of-line > span { white-space: nowrap; }
.of-count { color: var(--ink); font-weight: 500; }
.dd-panel .mega-offer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; padding: 14px 16px; border-radius: 14px; background: #0E1013; color: #fff; transition: background .2s; }
.dd-panel .mega-offer:hover { background: #22262D; }
.mega-offer b { display: block; font-size: 14.5px; font-weight: 550; }
.mega-offer small { display: block; font-size: 13px; color: rgb(255 255 255 / .62); }
.mega-offer em { display: flex; flex: none; align-items: center; gap: 8px; font-style: normal; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mega-offer .arrow { width: 16px; height: 16px; }

/* Sections library: the explore page (sections.html) and each section's page (sections/<id>.html). Quiet: soft
   grounds, thin rules, thumbnails do the talking; hovers fade, nothing jumps. Copy buttons share the dark pill of
   the template sections pages (sections.css rules repeated here so one bundle serves the page). */

.lb-top { padding-block: clamp(40px, 6vw, 88px) 8px; }
.lb-top h1 { max-width: 22ch; margin: 10px 0 0; font: 600 clamp(32px, 4.4vw, 58px)/1.04 var(--display); letter-spacing: -0.035em; text-wrap: balance; }
.lb-top h1 span { color: var(--text-3); }
.lb-search { position: relative; display: flex; align-items: center; max-width: 640px; margin-top: 30px; }
.lb-search .ico { position: absolute; left: 18px; width: 19px; height: 19px; color: var(--text-3); pointer-events: none; }
.lb-search input { width: 100%; height: 54px; padding: 0 52px 0 48px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); font: 400 16px/1 var(--font); box-shadow: 0 0 0 1px var(--line-2), var(--shadow); transition: box-shadow .25s var(--ease); }
.lb-search input::placeholder { color: var(--text-3); }
.lb-search input:focus { outline: 0; box-shadow: 0 0 0 1px var(--ink), var(--shadow); }
.lb-search input::-webkit-search-cancel-button { display: none; }
.lb-search kbd { position: absolute; right: 16px; display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 6px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 12px/1 var(--mono); color: var(--text-3); }

.lb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.lb-compose { margin-top: 18px; color: var(--text-2); font-size: 14px; }
.lb-compose a { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-weight: 500; margin-right: 4px; }
.lb-compose svg { width: 14px; height: 14px; }
.lb-chips button, .lb-seg button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: 500 14px/1 var(--font); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .25s, color .25s, box-shadow .25s; }
.lb-chips button span { font: 500 12px/1 var(--mono); color: var(--text-3); transition: color .25s; }
.lb-chips button:hover, .lb-seg button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lb-chips button[aria-pressed="true"], .lb-seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.lb-chips button[aria-pressed="true"] span { color: var(--on-ink); opacity: .65; }

.lb-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.lb-row-head h2 { margin: 0; font: 600 clamp(20px, 1.8vw, 24px)/1.2 var(--display); letter-spacing: -0.02em; }
.lb-row-head a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 14px; text-decoration: none; transition: color .25s; }
.lb-row-head a:hover { color: var(--ink); }
.lb-row-head a .ico { width: 16px; height: 16px; }
.lb-hint { color: var(--text-3); font-size: 14px; }

/* collections: one card per template, a strip that scrolls sideways */
.lb-cols { padding-block: clamp(36px, 5vw, 64px) 0; }
.lb-col-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 14px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.lb-col-list li { scroll-snap-align: start; }
.lb-col { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 12px 12px; height: 100%; padding: 14px; border-radius: 16px; background: var(--surface); color: inherit; text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease), background .3s; }
.lb-col:hover, .lb-col[aria-current="true"] { box-shadow: 0 0 0 1px var(--line-2), var(--shadow); }
.lb-col[aria-current="true"] { box-shadow: 0 0 0 1.5px var(--ink); }
.lb-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tb); color: var(--tf); font: 600 18px/1 var(--display); overflow: hidden; }
.lb-tile svg { width: 60%; height: 60%; }
.lb-col-meta { display: grid; align-content: center; gap: 3px; min-width: 0; }
.lb-col-meta b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.lb-col-meta small { color: var(--text-3); font-size: 13px; }
.lb-badges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.lb-badges i { padding: 3px 7px; border-radius: 6px; background: var(--bg-soft); color: var(--text-2); font: 500 11px/1.2 var(--mono); font-style: normal; }

/* cards */
.lb-default { padding-top: clamp(40px, 5vw, 72px); }
.lb-row + .lb-row { margin-top: clamp(40px, 5vw, 64px); }
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 28px 20px; margin: 0; padding: 0; list-style: none; }
.lb-grid-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lb-card a { display: grid; gap: 12px; color: inherit; text-decoration: none; }
.lb-shot { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 14px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.lb-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .45s var(--ease); }
.lb-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.lb-shot.is-short { display: grid; align-items: center; padding: 0 14px; }
.lb-shot.is-short img { height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.lb-card a:hover .lb-shot img { opacity: .82; }
.lb-free { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2); font: 600 11px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; font-style: normal; color: var(--ink); }
.lb-free.is-inline { position: static; display: inline-block; }
.lb-meta { display: grid; gap: 3px; min-width: 0; }
.lb-meta b, .lb-meta h3 { overflow: hidden; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; transition: color .25s; }
.lb-meta small { overflow: hidden; color: var(--text-3); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }

/* the full grid and its filters */
.lb-all { padding-block: clamp(48px, 6vw, 88px) clamp(64px, 8vw, 120px); }
.lb-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.lb-tools h2 { margin: 0; font: 600 clamp(20px, 1.8vw, 24px)/1.2 var(--display); letter-spacing: -0.02em; }
.lb-tools h2 span:last-child { color: var(--text-3); }
.lb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lb-filters select { height: 36px; padding: 0 30px 0 12px; border: 0; border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%235E646E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 10px center / 14px no-repeat; color: var(--ink); font: 500 14px/1 var(--font); box-shadow: inset 0 0 0 1px var(--line-2); appearance: none; cursor: pointer; }
.lb-filters select:focus-visible, .lb-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); }
.lb-seg button { height: 32px; padding: 0 12px; box-shadow: none; font-size: 13.5px; }
.lb-seg button:hover { box-shadow: none; }
.lb-seg .ico { width: 16px; height: 16px; }
.lb-check { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 999px; color: var(--text-2); font-size: 14px; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: color .25s, box-shadow .25s; }
.lb-check:hover { color: var(--ink); }
.lb-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); }
.lb-check:has(input:checked) { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lb-more { display: flex; justify-content: center; margin-top: 44px; }
.lb-more [hidden] { display: none; }
.lb-empty { margin: 40px 0; color: var(--text-2); text-align: center; }
main.is-filtered .lb-default { display: none; }

/* a section's page */
.ls-top { padding-block: clamp(32px, 4vw, 56px) 24px; }
.sx-back { margin: 0 0 14px; font-size: var(--t-xs); color: var(--text-3); }
.sx-back a { color: var(--text-2); text-decoration: none; transition: color .25s; }
.sx-back a:hover { color: var(--ink); }
.ls-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.ls-head h1 { max-width: 26ch; margin: 0; font: 600 clamp(28px, 3.2vw, 44px)/1.08 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.ls-sub { max-width: 60ch; margin: 12px 0 0; color: var(--text-2); }
.ls-sub a { color: var(--ink); text-underline-offset: 3px; }
.ls-actions { display: grid; justify-items: end; gap: 10px; }
.ls-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ls-locked { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 13.5px; }
.ls-locked .ico, .ls-btns .btn .ico { width: 16px; height: 16px; }

.ls-preview { padding-block: 8px 0; }
.ls-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ls-open { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 14px; text-decoration: none; transition: color .25s; }
.ls-open:hover { color: var(--ink); }
.ls-open .ico { width: 15px; height: 15px; }
.ls-stage { position: relative; display: grid; justify-items: center; border-radius: 18px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ls-stage.is-framed { padding: 18px; }
.ls-poster { display: block; width: 100%; height: auto; transition: opacity .4s var(--ease); }
.ls-stage.is-live .ls-poster { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.ls-frame { position: relative; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow); transition: width .4s var(--ease); }
.ls-stage:not(.is-framed) .ls-frame { border-radius: 0; box-shadow: none; }
.ls-frame iframe { display: block; border: 0; transform-origin: 0 0; }

.ls-info { padding-block: clamp(32px, 4vw, 56px) 0; }
.ls-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; }
.ls-facts { display: grid; margin: 0; }
.ls-facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px; }
.ls-facts > div:last-child { border-bottom: 1px solid var(--line); }
.ls-facts dt { color: var(--text-3); }
.ls-facts dd { margin: 0; text-transform: none; }
.ls-facts a { color: var(--ink); text-underline-offset: 3px; }
.ls-h2 { margin: 0 0 12px; font: 600 17px/1.3 var(--display); letter-spacing: -0.01em; }
.ls-formats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ls-formats li { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; box-shadow: inset 0 0 0 1px var(--line-2); }
.ls-formats li .ico { width: 15px; height: 15px; }
.ls-note { margin: 16px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.ls-note a { color: var(--ink); text-underline-offset: 3px; }
.ls-note code { padding: 1px 5px; border-radius: 5px; background: var(--bg-soft); font: 500 12.5px/1.4 var(--mono); }
.ls-rel { padding-block: clamp(48px, 6vw, 88px) 0; }
.ls-rel:last-of-type { padding-bottom: clamp(64px, 8vw, 120px); }

/* copy buttons: the dark pill */
.wf-copy, .lb-copy { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 13px; border: 0; border-radius: 999px; background: #141518; color: #fff; font: 500 14px/1 var(--font); letter-spacing: -0.005em; white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: 0 1px 0 rgb(255 255 255 / 0.1) inset, 0 6px 16px -10px rgb(14 16 19 / 0.7); transition: background .25s, box-shadow .25s; }
.lb-copy { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.wf-copy:hover { background: #2a2c31; }
.lb-copy:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.wf-copy:focus-visible, .lb-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wf-copy .wf-glyph { width: 18px; height: 13px; }
.wf-copy .ico, .lb-copy .ico { width: 16px; height: 16px; }
.wf-copy.is-done, .lb-copy.is-done { background: #1f6b47; color: #fff; box-shadow: none; }
.wf-copy[aria-busy="true"], .lb-copy[aria-busy="true"] { opacity: .7; cursor: progress; }
.sx-toast { position: fixed; left: 50%; bottom: 24px; z-index: 40; max-width: min(92vw, 520px); padding: 12px 18px; border-radius: 14px; background: #141518; color: #fff; font-size: 14px; line-height: 1.4; box-shadow: var(--shadow-lg); transform: translateX(-50%); }
.sx-toast[hidden] { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wf-copy { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); } }
:root[data-theme="dark"] .wf-copy { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); }

@media (max-width: 1080px) {
  .lb-grid-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .lb-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); scrollbar-width: none; }
  .lb-chips button { flex: none; }
  .lb-tools { align-items: flex-start; flex-direction: column; }
  .lb-filters { flex-wrap: nowrap; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .lb-filters > * { flex: none; }
  .lb-grid { gap: 22px 14px; }
  .lb-grid-row { gap: 22px 14px; }
  .ls-actions { justify-items: start; width: 100%; }
  .ls-btns { justify-content: flex-start; }
  .ls-bar .lb-seg span { display: none; }
  .ls-bar .lb-seg button { padding: 0 11px; }
  .ls-facts > div { grid-template-columns: 100px 1fr; }
}
@media (max-width: 480px) {
  .lb-grid:not(.lb-grid-row) { grid-template-columns: 1fr; }
  .lb-col-list { grid-auto-columns: 78%; }
  .ls-btns > * { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .lb-shot img, .ls-frame, .ls-poster { transition: none; } }
/* the frame stays out of sight until the demo page reports the section's height; the thumbnail shows meanwhile */
.ls-stage:not(.is-live) .ls-frame { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
.ls-stage.is-live .ls-frame { animation: ls-in .5s var(--ease) both; }
@keyframes ls-in { from { opacity: 0; } to { opacity: 1; } }
/* gem pages: behaviour notes and the options table */
.gm-list { margin: 0 0 28px; padding-left: 1.1em; max-width: 72ch; line-height: 1.6; }
.gm-list li + li { margin-top: 6px; }
.gm-table { overflow-x: auto; margin-bottom: 8px; }
.gm-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gm-table th, .gm-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.gm-table thead th { font-weight: 600; font-size: 13px; color: var(--muted, inherit); }
.gm-table code { font-size: 12.5px; white-space: nowrap; }
.gm-table td:last-child { min-width: 26ch; }

/* The Copy menu (assets/js/copy-menu.js) and the gem viewer. The menu is always the dark one, light theme or dark:
   zinc ground, hairline edge, quiet fades on hover, nothing moves. The button is a white pill. */
.cm { position: relative; display: inline-flex; }
.cm-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; background: #fff; color: #0E1013; font: 500 14px/1 var(--font); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; box-shadow: 0 0 0 1px rgb(14 16 19 / 0.12), 0 8px 20px -12px rgb(14 16 19 / 0.5); transition: background-color .25s, box-shadow .25s; }
.cm-btn:hover { background: #F1F2F4; }
.cm-btn svg { width: 18px; height: 18px; flex: none; }
.cm-btn svg:last-child { width: 14px; height: 14px; margin-left: -1px; opacity: .6; transition: transform .25s var(--ease, ease); }
.cm.is-open .cm-btn svg:last-child { transform: rotate(180deg); }
.cm.is-done .cm-btn { background: #E9F7EE; }
.cm-btn[aria-busy="true"] { cursor: progress; }
.cm-btn:focus-visible, .cm-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cm-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 244px; padding: 6px; border-radius: 14px; background: #18181B; color: #E4E4E7; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 48px -16px rgb(0 0 0 / 0.6), 0 4px 12px -4px rgb(0 0 0 / 0.4); font: 400 14px/1.3 var(--font); animation: cm-in .16s ease-out; }
.cm.is-up .cm-menu { top: auto; bottom: calc(100% + 8px); }
.cm.is-left .cm-menu { right: auto; left: 0; }
.cm.is-left .cm-sub { right: auto; left: calc(100% + 6px); }
@keyframes cm-in { from { opacity: 0; } to { opacity: 1; } }
.cm-menu[hidden] { display: none; }
.cm-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color .18s, color .18s; }
.cm-item:hover, .cm-item:focus-visible, .cm-item.is-active { background: rgb(255 255 255 / 0.07); color: #fff; outline: none; }
.cm-mark { display: grid; place-items: center; width: 18px; height: 18px; flex: none; color: #A1A1AA; transition: color .18s; }
.cm-item:hover .cm-mark, .cm-item:focus-visible .cm-mark { color: #fff; }
.cm-mark svg { width: 18px; height: 18px; }
.cm-label { flex: 1; }
.cm-lock, .cm-arrow { display: grid; place-items: center; flex: none; color: #71717A; }
.cm-lock svg { width: 14px; height: 14px; }
.cm-arrow svg { width: 14px; height: 14px; }
.cm-item.is-locked .cm-label { color: #A1A1AA; }
.cm-item.is-locked:hover .cm-label, .cm-item.is-locked:focus-visible .cm-label { color: #E4E4E7; }
.cm-sep { height: 1px; margin: 6px 4px; background: rgb(255 255 255 / 0.08); }
.cm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the Prompt submenu: a flyout to the left on wide screens, inline under its row on narrow ones */
.cm-sub { position: absolute; right: calc(100% + 6px); bottom: 6px; width: 184px; padding: 6px; border-radius: 12px; background: #18181B; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 48px -16px rgb(0 0 0 / 0.6); animation: cm-in .14s ease-out; }
.cm-sub[hidden] { display: none; }
.cm-sub .cm-item { height: 34px; }
@media (max-width: 640px) {
  .cm-sub { position: static; width: auto; padding: 2px 0 2px 28px; background: none; box-shadow: none; animation: none; }
  .cm-menu { width: min(244px, calc(100vw - 32px)); }
}

/* the unlock panel, in place of the list */
.cm-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 8px 8px 6px; }
.cm-panel-head { display: flex; align-items: center; gap: 8px; margin: 0; color: #fff; font-size: 14px; }
.cm-panel-head svg { width: 16px; height: 16px; color: #A1A1AA; }
.cm-panel-text { margin: 0; color: #A1A1AA; font-size: 13px; line-height: 1.45; }
.cm-cta { display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 999px; background: #fff; color: #0E1013; font-weight: 500; font-size: 13px; transition: background-color .2s; }
.cm-cta:hover { background: #E4E4E7; }
.cm-key { display: grid; gap: 6px; margin-top: 2px; }
.cm-key label { color: #A1A1AA; font-size: 12px; }
.cm-key-row { display: flex; gap: 6px; }
.cm-key input { flex: 1; min-width: 0; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: rgb(255 255 255 / 0.06); color: #fff; font: 13px/1 var(--mono, monospace); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.cm-key input:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); }
.cm-key button, .cm-signin, .cm-back { height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: rgb(255 255 255 / 0.08); color: #E4E4E7; font: 500 13px/1 var(--font); cursor: pointer; transition: background-color .18s; }
.cm-key button:hover, .cm-signin:hover, .cm-back:hover { background: rgb(255 255 255 / 0.14); }
.cm-back { background: none; color: #A1A1AA; justify-self: start; padding: 0 4px; height: 28px; }
.cm-err { margin: 0; min-height: 0; color: #FCA5A5; font-size: 12px; line-height: 1.4; }
.cm-err:empty { display: none; }

/* save and close: round glass icons next to the pill */
.cm-tools { display: flex; align-items: center; gap: 8px; }
.cm-icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: var(--glass, rgb(255 255 255 / 0.7)); color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .25s, color .25s; }
.cm-icon:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.cm-icon svg { width: 18px; height: 18px; }
.cm-save[aria-pressed="true"] { color: #E5484D; --cm-heart-fill: #E5484D; }

/* the gem viewer */
.gv { width: min(1280px, calc(100vw - 48px)); max-width: none; height: min(860px, calc(100dvh - 48px)); max-height: none; padding: 0; border: 0; border-radius: 20px; background: var(--surface, #fff); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -24px rgb(0 0 0 / 0.5); overflow: visible; }
.gv[open] { display: grid; grid-template-rows: auto 1fr auto; }
.gv::backdrop { background: rgb(9 9 11 / 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gv-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 14px 14px 20px; }
.gv-name { min-width: 0; }
.gv-name h2 { margin: 0; font-size: 18px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-name small { color: var(--text-3); font-size: 13px; }
.gv-stage { position: relative; margin: 0 14px; border-radius: 12px; overflow: hidden; background: #0c0e12; display: grid; align-items: center; }
.gv-stage iframe { display: block; width: 100%; height: var(--gv-h, 100%); max-height: 100%; border: 0; }
.gv-page { justify-self: start; margin: 10px 20px 14px; color: var(--text-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: color .2s; }
.gv-page:hover { color: var(--ink); }
.gv .sx-toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); }
@media (max-width: 640px) {
  .gv { width: 100vw; height: 100dvh; border-radius: 0; }
  .gv-bar { padding: 10px 10px 10px 16px; gap: 10px; }
  .gv-name small { display: none; }
  .gv-stage { margin: 0 8px; }
  .gv .cm-tools { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .cm-menu, .cm-sub { animation: none; } .cm-btn svg:last-child { transition: none; } }

/* the cards' quick action (sections, gems, wireframes, design systems): the same menu over the card's top corner,
   shown on hover and focus, always on touch screens. Placed against the viewport when open (copy-menu.js place) */
.lb-card, .wf-card, .ds-card { position: relative; }
.lb-qa { position: absolute; top: 10px; right: 10px; z-index: 4; opacity: 0; transition: opacity .2s; }
.lb-card:hover .lb-qa, .wf-card:hover .lb-qa, .ds-card:hover .lb-qa, .lb-qa:focus-within, .lb-qa .cm.is-open, .lb-qa .cm.is-done { opacity: 1; }
@media (hover: none) { .lb-qa { opacity: 1; } }
.cm-quick .cm-btn { height: 32px; gap: 6px; padding: 0 9px 0 10px; font-size: 13px; }
.cm-quick .cm-btn svg { width: 15px; height: 15px; }
.cm-quick .cm-btn svg:last-child { width: 12px; height: 12px; }
.sx-row .cm-btn { height: 36px; font-size: 13px; }
.cm-cta.is-alt { background: rgb(255 255 255 / 0.08); color: #E4E4E7; }
.cm-cta.is-alt:hover { background: rgb(255 255 255 / 0.14); }
.cm-layer { position: static; }
.cm-layer .cm-menu { z-index: 200; }

/* The icons library (/icons, src/pages/icons.mjs, assets/js/icons.js). The page reuses the sections library's top,
   search, chips and segmented controls (library.css); this file adds the virtualised grid, the detail panel, the
   bulk bar and the licences page. */

/* ---- the Copy menu comes from the shared copy-menu.css; only the keyboard hint is the icons page's own */
.cm-hint { margin-left: auto; color: #71717A; font: 500 11px/1 var(--mono); }

/* ---- top */
.ic-top h1 { max-width: 24ch; }
.ic-lede { max-width: 60ch; margin: 16px 0 0; color: var(--text-2); font-size: var(--t-md); line-height: 1.5; }
.ic-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--ink); }
.ic-strip li { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ic-strip svg { width: 24px; height: 24px; }
@media (max-width: 640px) { .ic-strip li:nth-child(n+11) { display: none; } .ic-strip li { width: 44px; height: 44px; } }

/* ---- the toolbar: sets, style, category and the size / stroke / colour controls; sticks under the header */
.ic-app { padding-block: 28px var(--sec); }
.ic-bar { position: sticky; top: var(--hd-h, 64px); z-index: 20; display: grid; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 12px var(--gutter); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid var(--line); }
.ic-sets { margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ic-sets::-webkit-scrollbar { display: none; }
.ic-sets button { flex: none; }
.ic-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ic-filters select { height: 36px; padding: 0 30px 0 14px; border: 0; border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%235E646E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; color: var(--ink); font: 500 14px/1 var(--font); box-shadow: inset 0 0 0 1px var(--line-2); appearance: none; cursor: pointer; }
.ic-ctl { display: flex; align-items: center; gap: 10px; color: var(--text-2); font: 500 13px/1 var(--font); }
.ic-ctl label { display: flex; gap: 6px; white-space: nowrap; }
.ic-ctl output { min-width: 4.5ch; color: var(--ink); font: 500 12px/1 var(--mono); }
.ic-ctl input[type=range] { width: 110px; accent-color: var(--ink); }
.ic-color { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); font: 500 13px/1 var(--font); cursor: pointer; }
.ic-color input { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ic-color input::-webkit-color-swatch-wrapper { padding: 0; }
.ic-color input::-webkit-color-swatch { border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); }
.ic-color input::-moz-color-swatch { border: 0; border-radius: 50%; }

.ic-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 14px; }
.ic-head h2 { margin: 0; font: 600 20px/1.2 var(--display); letter-spacing: -0.02em; }
.ic-head-tools { display: flex; gap: 16px; }
.ic-link { padding: 0; border: 0; background: none; color: var(--text-2); font: 500 14px/1 var(--font); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; cursor: pointer; transition: color .2s; }
.ic-link:hover, .ic-link[aria-pressed="true"] { color: var(--ink); text-decoration-color: currentColor; }

/* ---- the grid: absolutely placed cells inside a sizer as tall as every row; only the visible rows exist */
.ic-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.ic-layout.has-panel { grid-template-columns: minmax(0, 1fr) 340px; }
.ic-grid { position: relative; outline: none; border-radius: 16px; }
.ic-sizer { position: relative; width: 100%; contain: strict; }
.ic-cell { position: absolute; top: 0; left: 0; display: grid; grid-template-rows: 1fr auto; place-items: center; gap: 4px; padding: 10px 6px 8px; border: 0; border-radius: 14px; background: transparent; color: var(--ic-color, var(--ink)); cursor: pointer; contain: strict; will-change: transform; }
.ic-cell:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ic-grid:focus-visible .ic-cell.is-active { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.ic-grid:focus-visible { box-shadow: none; }
.ic-cell.is-open { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.ic-cell.is-sel::after { content: ""; position: absolute; top: 7px; right: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3.2L15 6.8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.ic-cell svg { display: block; width: var(--ic-size, 24px); height: var(--ic-size, 24px); }
.ic-cell .ic-ph { width: 20px; height: 20px; border-radius: 6px; background: var(--bg-soft); }
.ic-cell small { max-width: 100%; overflow: hidden; color: var(--text-3); font: 400 11px/1.2 var(--font); text-overflow: ellipsis; white-space: nowrap; }
.ic-cell:hover small, .ic-grid:focus-visible .ic-cell.is-active small { color: var(--text-2); }

/* ---- the detail panel: a sticky column on wide screens, a bottom sheet on phones */
.ic-panel { position: sticky; top: calc(var(--hd-h, 64px) + var(--ic-bar-h, 120px) + 16px); max-height: calc(100dvh - var(--hd-h, 64px) - var(--ic-bar-h, 120px) - 32px); overflow: auto; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow); overscroll-behavior: contain; }
.ic-panel[hidden] { display: none; }
.ic-panel-in { position: relative; display: grid; gap: 14px; padding: 18px; }
.ic-panel-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; }
.ic-preview { display: grid; place-items: center; height: 170px; border-radius: 14px; background-color: var(--bg); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 12px 12px; background-position: center; color: var(--ic-color, var(--ink)); }
.ic-preview svg { width: 96px; height: 96px; }
.ic-panel h3 { margin: 0; padding-right: 40px; font: 600 20px/1.2 var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ic-meta { margin: -8px 0 0; color: var(--text-3); font-size: 13px; }
.ic-styles { display: flex; flex-wrap: wrap; gap: 6px; }
.ic-styles:empty { display: none; }
.ic-styles button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: 500 13px/1 var(--font); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; }
.ic-styles button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.ic-actions { display: flex; align-items: center; gap: 8px; }
.ic-actions .cm-menu { right: auto; left: 0; }
.ic-png { display: flex; align-items: center; gap: 10px; color: var(--text-2); font: 500 13px/1 var(--font); }
.ic-png select { height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: var(--bg-soft); color: var(--ink); font: 500 13px/1 var(--mono); box-shadow: inset 0 0 0 1px var(--line-2); }
.ic-code { max-height: 140px; margin: 0; padding: 12px; overflow: auto; border-radius: 12px; background: var(--dark); color: var(--on-dark); font: 400 11.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; }
.ic-tags { margin: 0; color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.ic-lic { margin: 0; color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.ic-lic a { color: var(--text-2); }

@media (max-width: 900px) {
  .ic-layout.has-panel { grid-template-columns: minmax(0, 1fr); }
  .ic-panel { position: fixed; inset: auto 0 0; top: auto; z-index: 50; max-height: min(78dvh, 640px); border-radius: 20px 20px 0 0; box-shadow: 0 0 0 1px var(--line), 0 -20px 60px -20px rgb(0 0 0 / 0.4); }
  .ic-preview { height: 120px; }
  .ic-preview svg { width: 72px; height: 72px; }
}
@media (max-width: 640px) {
  /* on phones the toolbar scrolls away: sticky, it would eat a quarter of the screen */
  .ic-bar { position: static; }
  .ic-ctl input[type=range] { width: 84px; }
  .ic-filters { gap: 8px 10px; }
  .ic-bar { gap: 10px; }
}

/* ---- the bulk bar */
.ic-bulk { position: fixed; left: 50%; bottom: 20px; z-index: 45; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-lg); transform: translateX(-50%); font: 500 14px/1 var(--font); }
.ic-bulk[hidden] { display: none; }
.ic-bulk span { white-space: nowrap; }
@media (max-width: 640px) { .ic-bulk { gap: 8px; padding-left: 14px; font-size: 13px; } .ic-bulk .btn { padding: 0 12px; } #ic-bulk-react { display: none; } }

/* ---- the sets and the licences page */
.ic-about { padding-block: 0 var(--sec); }
.ic-about h2 { margin: 0 0 16px; font: 600 24px/1.2 var(--display); letter-spacing: -0.02em; }
.ic-set-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ic-set-list li { display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ic-set-list span { color: var(--text-2); font-size: 14px; }
.ic-set-list small { color: var(--text-3); font: 400 12px/1.4 var(--mono); }
.ic-fine { max-width: 72ch; margin: 18px 0 0; color: var(--text-3); font-size: 14px; line-height: 1.55; }
.ic-fine a, .ic-legal a { color: var(--text-2); }
.ic-legal { max-width: 900px; padding-bottom: var(--sec); }
.ic-legal h1 { margin: 10px 0 0; font: 600 clamp(32px, 4.4vw, 52px)/1.05 var(--display); letter-spacing: -0.035em; }
.ic-legal h2 { margin: 40px 0 12px; font: 600 22px/1.2 var(--display); letter-spacing: -0.02em; }
.ic-legal p, .ic-legal li { color: var(--text-2); line-height: 1.6; }
.ic-asks { display: grid; gap: 10px; padding-left: 20px; }
.ic-table { width: 100%; margin-top: 28px; border-collapse: collapse; font-size: 14px; }
.ic-table-wrap { overflow-x: auto; }
.ic-table th, .ic-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ic-table thead th { color: var(--text-3); font-weight: 500; font-size: 13px; }
.ic-table code { font: 400 12.5px/1.4 var(--mono); }
.ic-licence { max-height: 360px; margin: 0; padding: 16px; overflow: auto; border-radius: 14px; background: var(--bg-soft); color: var(--text-2); font: 400 12px/1.55 var(--mono); white-space: pre-wrap; }
@media (max-width: 640px) { .ic-table thead { display: none; } .ic-table tr { display: grid; grid-template-columns: 1fr auto; padding: 10px 0; border-bottom: 1px solid var(--line); } .ic-table th, .ic-table td { padding: 2px 0; border: 0; } .ic-table td:nth-child(n+4) { grid-column: 1 / -1; color: var(--text-3); } }

/* the status toast never takes clicks: it can sit over the menu or the grid while it fades */
main[data-icons] .sx-toast { pointer-events: none; }