/* ============================================================================
   exidex.dev showcase — shared product-page stylesheet ("Foil & Datasheet", 2026-10-09)
   Served at /_showcase/style.css (source: portfolio/shared/showcase.css; the
   M4 copies it to ~/showcase/style.css on deploy). Fonts from /_showcase/fonts/.

   Any .exidex/index.html that links this file and uses the vocabulary below
   prints as one white engineering datasheet of the portfolio: paper, hairlines,
   mono spec labels, Geist display type, one signal blue, one foil accent, and
   the card's own brand accent at chip scale. The class names are the old ones,
   so every landing restyles without an edit.

   CLASS VOCABULARY (all prefixed `sc-` so it never collides with app CSS)

   Shell
     body.sc-desk          the paper; sets the reading face and the ink
     .sc-window            the sheet column (full bleed; content held to 1280)
     .sc-titlebar          the masthead: mark, name, and the way back. Children:
       .sc-titlebar-dots   the foil dot — <div class="sc-titlebar-dots"><span></span></div>
       .sc-titlebar-name   the product's name line
       .sc-titlebar-end    right cluster: .sc-accent-dot (unprinted) and .sc-close
       .sc-close           the way back — an <a href="https://exidex.dev/">
     .sc-body              the sheet body (gutters, measure, typography). From
                           1100px every h2 sits in a left rail with a running
                           section number, and what follows it reads on the right.

   Content (inside .sc-body, plain HTML is pre-styled: h2 h3 p a img table
   ol ul li code pre strong hr)
     .sc-kicker            mono spec label, e.g. "GAME · KOUT"
     .sc-title             the product name — the sheet's one display statement
     .sc-tagline           one-line pitch under the title
     .sc-demo              16:9 frame — put a <video>, <img>, <iframe> inside
     .sc-pills > .sc-pill  facts-at-a-glance chips (dot in the card's accent)
     .sc-actions           row of buttons
     .sc-btn               a button: hairline at rest. .sc-btn--primary / --cta
                           (ink, one per sheet), .sc-btn--secondary
     .sc-marker            inline highlight: a foil underline (the page's one foil)
     .sc-footer            small print under a hairline

   Datasheet primitives (used by shared/edition-page.mjs heads, free for landings)
     .sc-label  .sc-num  .sc-chip(--agents|cloud|banking|games|tools|writing)
     .sc-tag  .sc-lamp(--pulse) > i  .sc-barcode  .sc-ruler  .sc-link  .sc-cross

   `--accent` on <html> is the card's brand colour: it tints chips, dots and the
   lamp, never text or large fills.
   ========================================================================= */

/* ---- fonts (the same files the portfolio bundles) ------------------------ */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/_showcase/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/_showcase/fonts/geist-mono-latin-wght-normal.woff2') format('woff2-variations');
}

@property --foil-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 115deg;
}

/* ---- tokens (the portfolio's, verbatim) ---------------------------------- */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --paper-2: #f7f7f5;
  --paper-3: #efefec;
  --line: rgba(20, 20, 20, 0.09);
  --line-strong: rgba(20, 20, 20, 0.18);
  --ink: #141414;
  --ink-2: rgba(20, 20, 20, 0.72);
  --ink-3: rgba(20, 20, 20, 0.52);
  --ink-4: rgba(20, 20, 20, 0.36);
  --sheet: #8a8a86;
  --signal: #2f5bff;
  --signal-2: #1f44e0;
  --signal-wash: rgba(47, 91, 255, 0.08);
  --ok: #16a36a;
  --bad: #e5484d;
  --warn: #f2b705;
  --foil: linear-gradient(115deg, #c9b6ff, #9fe7ff 25%, #b8ffd9 45%, #ffe3a3 65%, #ffb3d1 85%, #c9b6ff);
  --foil-conic: conic-gradient(from var(--foil-angle), #c9b6ff, #9fe7ff, #b8ffd9, #ffe3a3, #ffb3d1, #c9b6ff);
  --cat-agents: #7c5cff;
  --cat-cloud: #12b5e5;
  --cat-banking: #16a36a;
  --cat-games: #ff7a45;
  --cat-tools: #f2b705;
  --cat-writing: #e5484d;

  --font-ui: 'Geist Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-ui);
  --font-mono: 'Geist Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;
  /* legacy names old landings may still read */
  --font-sans: var(--font-ui);
  --font-carve: var(--font-ui);
  --font-code: var(--font-mono);
  --red: var(--signal);
  --highlight: rgba(47, 91, 255, 0.14);
  --rule: 1px;
  --light-1: #ffffff;
  --light-2: #fbfbfa;
  --light-3: #f7f7f5;
  --light-4: #efefec;
  --light-5: #e4e4e0;
  --light-6: #c8c8c4;
  --light-7: #a3a39f;
  --light-8: #8a8a86;
  --light-9: #5c5c59;
  --light-10: #3a3a38;
  --light-11: #242423;
  --light-12: #141414;
  --button-border: var(--line-strong);
  --button-shadow: transparent;

  --max: 1280px;
  --gutter: 16px;
  --pad: 20px;
  --mast-h: 60px;
  --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24%, 1.114 26.5%, 1.112 28.5%, 1.088 32.5%, 1.003 41.7%, 0.987 44.4%, 0.98 49.4%, 0.996 63.6%, 1.002 72.1%, 1);
  --ease-spring-soft: linear(0, 0.12 3%, 0.46 9%, 0.86 17%, 1.03 25%, 1.055 30%, 1.04 38%, 1.005 52%, 0.996 64%, 1);
  --art-shadow: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.08)) drop-shadow(0 18px 24px rgba(47, 42, 92, 0.18));
  --art-shadow-hover: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.08)) drop-shadow(0 30px 36px rgba(47, 42, 92, 0.26));
}
@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --pad: 28px;
    --mast-h: 64px;
  }
}

/* ---- the paper ------------------------------------------------------------- */
html:has(body.sc-desk) {
  background: var(--paper);
  scroll-padding-top: calc(var(--mast-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html body.sc-desk {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  /* the two column rails of the 1280 sheet, as on exidex.dev */
  background-image:
    linear-gradient(var(--line), var(--line)),
    linear-gradient(var(--line), var(--line));
  background-repeat: no-repeat;
  background-size: 1px 100%;
  background-position: calc(50% - 640px) 0, calc(50% + 640px) 0;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: 'ss01' on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
.sc-desk ::selection {
  background: #dfe6ff;
  color: var(--ink);
}
.sc-desk :focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 4px;
}
html body.sc-desk .sc-window {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 100vh;
}

/* ---- masthead ----------------------------------------------------------- */
html body.sc-desk .sc-titlebar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--mast-h);
  padding: 0 var(--edge);
  margin: 0;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  box-shadow: none;
  animation: sc-drop 520ms var(--ease-out) both;
}
/* the ruler on the masthead's bottom edge; --sc-progress fills it as you read */
.sc-desk .sc-titlebar::after,
.sc-desk .sc-titlebar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 6px;
  pointer-events: none;
}
.sc-desk .sc-titlebar::after {
  background:
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 80px) 0 100% / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 8px) 0 100% / 100% 3px no-repeat;
}
.sc-desk .sc-titlebar::before {
  height: 1px;
  background: var(--signal);
  transform-origin: 0 50%;
  transform: scaleX(var(--sc-progress, 0));
}
.sc-desk .sc-titlebar-dots {
  position: relative;
  width: 10px;
  height: 10px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--foil);
  background-size: 300% 100%;
  box-shadow: 0 0 0 1px rgba(20, 20, 20, 0.12) inset;
  animation: sc-foil-drift 12s linear infinite;
  filter: none;
  transform: none;
}
.sc-desk .sc-titlebar-dots::before,
.sc-desk .sc-titlebar-dots::after,
.sc-desk .sc-titlebar-dots span {
  display: none;
}
.sc-desk .sc-titlebar-name {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-2);
  filter: none;
}
.sc-desk .sc-titlebar-name .sc-wordmark {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.sc-desk .sc-titlebar-name i {
  font-style: normal;
  color: var(--ink-4);
}
/* The product name is its own box so it can ellipsize (a bare text node in the
   inline-flex can do neither that nor be hidden on phones). */
.sc-desk .sc-titlebar-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-desk .sc-titlebar-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}
.sc-desk .sc-accent-dot {
  display: none;
}
.sc-desk .sc-now {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  transition: opacity 240ms var(--ease-out);
}
.sc-desk .sc-now:empty {
  opacity: 0;
}
html body.sc-desk .sc-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  text-decoration: none;
  filter: none;
  box-shadow: none;
  transition: border-color 240ms var(--ease-out), background-color 240ms var(--ease-out);
}
html body.sc-desk .sc-close:hover {
  border-color: var(--ink);
  background: var(--paper-2);
}
.sc-desk .sc-close svg {
  transition: transform 240ms var(--ease-spring-soft);
}
.sc-desk .sc-close:hover svg {
  transform: translateX(-3px);
}
/* a landing that never went through the head renderer still prints "×": say where it goes */
.sc-desk .sc-close:not(:has(span)) {
  font-size: 0;
}
.sc-desk .sc-close:not(:has(span))::after {
  content: '← exidex.dev';
  font-size: 13.5px;
}
.sc-desk .sc-close::before {
  content: none;
}
@media (max-width: 560px) {
  .sc-desk .sc-titlebar-name i,
  .sc-desk .sc-titlebar-name i ~ *,
  .sc-desk .sc-now {
    display: none;
  }
}

/* ---- the sheet body -------------------------------------------------------- */
html body.sc-desk .sc-body {
  position: relative;
  max-width: none;
  margin: 0;
  padding: clamp(28px, 4vw, 56px) var(--edge) 96px;
  background: transparent;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.65;
  counter-reset: sc-sec;
  animation: none;
  transform: none;
}
.sc-desk .sc-body::before,
.sc-desk .sc-body::after {
  content: none;
}
.sc-desk .sc-body > *,
.sc-desk .sc-about > * {
  min-width: 0;
}
.sc-desk .sc-body :is(p, li) {
  max-width: 68ch;
}
.sc-desk .sc-body :is(h1, h2, h3, h4) {
  color: var(--ink);
  font-family: var(--font-display);
  text-transform: none;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.sc-desk .sc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  filter: none;
}
.sc-desk .sc-kicker::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--card-accent, var(--accent, var(--signal)));
  box-shadow: 0 0 0 1px rgba(20, 20, 20, 0.14) inset;
}
html body.sc-desk .sc-title,
html body.sc-desk .sc-body h1 {
  margin: 0 0 20px;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(44px, 7.4vw, 104px);
  font-weight: 560;
  line-height: 0.9;
  letter-spacing: -0.055em;
  text-transform: none;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
  filter: none;
}
html body.sc-desk .sc-tagline {
  margin: 0 0 28px;
  max-width: 44ch;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.sc-desk .sc-marker {
  padding: 0;
  background: var(--foil) 0 92% / 200% 0.34em no-repeat;
  color: var(--ink);
  animation: sc-foil-drift 12s linear infinite;
}

/* section heads: a running number, then the title */
html body.sc-desk .sc-body h2 {
  counter-increment: sc-sec;
  position: relative;
  margin: 72px 0 20px;
  padding: 28px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 560;
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.sc-desk .sc-body h2::before {
  content: counter(sc-sec, decimal-leading-zero) ' —';
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-4);
}
.sc-desk .sc-body h2::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 1px;
  background: var(--ink);
}
html body.sc-desk .sc-body h3 {
  margin: 36px 0 10px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.sc-desk .sc-body h4 {
  margin: 28px 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.sc-desk .sc-body p {
  margin: 0 0 16px;
}
.sc-desk .sc-body strong {
  color: var(--ink);
  font-weight: 600;
}
.sc-desk .sc-body a:not([class]),
.sc-desk .sc-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out);
}
.sc-desk .sc-body a:not([class]):hover,
.sc-desk .sc-link:hover {
  color: var(--signal);
  text-decoration-color: var(--signal);
}
.sc-desk .sc-body :is(ul, ol) {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.sc-desk .sc-body :is(ul, ol) > li {
  position: relative;
  margin: 0;
  padding: 9px 0 9px 26px;
  border-bottom: 1px solid var(--line);
}
.sc-desk .sc-body :is(ul, ol) > li:first-child {
  border-top: 1px solid var(--line);
}
.sc-desk .sc-body ul > li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 1.12em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--ink-3);
  background: transparent;
}
.sc-desk .sc-body ol {
  counter-reset: sc-li;
}
.sc-desk .sc-body ol > li {
  counter-increment: sc-li;
}
.sc-desk .sc-body ol > li::before {
  content: counter(sc-li, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
}
.sc-desk .sc-body :is(code, kbd, samp) {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 0.12em 0.4em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-2);
  color: var(--ink);
}
.sc-desk .sc-body pre {
  margin: 0 0 24px;
  padding: 20px 22px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
}
.sc-desk .sc-body pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
}
.sc-desk .sc-body hr {
  height: 0;
  margin: 48px 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.sc-desk .sc-body blockquote {
  margin: 0 0 20px;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--ink);
  color: var(--ink);
}
.sc-desk .sc-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 24px;
  border-collapse: collapse;
  font-size: 14px;
}
.sc-desk .sc-body :is(th, td) {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.sc-desk .sc-body th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--line-strong);
}
.sc-desk .sc-body img {
  max-width: 100%;
  height: auto;
}
/* Product screens print in their own colours — never one ink, never a blend. */
html body.sc-desk img,
html body.sc-desk video {
  filter: none !important;
  mix-blend-mode: normal !important;
}
html body.sc-desk .sc-body .sc-hero,
html body.sc-desk .sc-body [class*='-hero']:not(.sc-head *) {
  position: relative;
  margin: 8px 0 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper-2);
  box-shadow: none;
  overflow: hidden;
}
html body.sc-desk .sc-body .sc-hero img,
html body.sc-desk .sc-body [class*='-hero'] img {
  display: block;
  border-radius: 0 !important;
  border: 0;
}
html body.sc-desk .sc-body img.sc-hero {
  display: block;
  width: 100%;
  object-fit: contain;
}
.sc-desk .sc-demo {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 8px 0 28px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
}
.sc-desk .sc-demo > :is(img, video, iframe) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* chips: facts at a glance */
.sc-desk .sc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
html body.sc-desk .sc-pill,
.sc-desk .sc-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  filter: none;
}
.sc-desk .sc-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, var(--signal));
  box-shadow: 0 0 0 1px rgba(20, 20, 20, 0.15) inset;
}
.sc-desk .sc-tag {
  min-height: 26px;
  padding: 0 10px;
  font-size: 10.5px;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* buttons */
.sc-desk .sc-actions,
.sc-desk .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
}
html body.sc-desk .sc-btn,
html body.sc-desk .play-link,
html body.sc-desk .repo-link {
  --mx: 0px;
  --my: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.012em;
  line-height: 1;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  filter: none;
  cursor: pointer;
  transform: translate(var(--mx), var(--my));
  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out), color 240ms var(--ease-out), transform 420ms var(--ease-spring-soft);
}
html body.sc-desk .sc-btn:hover,
html body.sc-desk .repo-link:hover {
  border-color: var(--ink);
  background: var(--paper-2);
  color: var(--ink);
}
html body.sc-desk :is(.sc-btn--primary, .sc-btn--cta, .play-link) {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
html body.sc-desk :is(.sc-btn--primary, .sc-btn--cta, .play-link):hover {
  border-color: #000;
  background: #000;
  color: #fff;
}
/* the play block carries the game's own colour as a lamp */
html body.sc-desk .play-link::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, var(--ok));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--ok)) 30%, transparent);
}
.sc-desk :is(.sc-btn, .play-link, .repo-link) svg {
  flex: none;
  transition: transform 240ms var(--ease-spring-soft);
}
.sc-desk :is(.sc-btn, .play-link, .repo-link):hover svg {
  transform: translateX(3px);
}
html body.sc-desk .play-note {
  margin: 4px 0 0;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  opacity: 1;
}
html body.sc-desk .shot {
  border: 1px solid var(--line);
  border-radius: 0;
}

/* small print */
html body.sc-desk .sc-footer {
  margin-top: 72px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  max-width: none;
}
.sc-desk .sc-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
}

/* ---- the rail layout: h2 on the left, its section on the right ----------- */
@media (min-width: 1100px) {
  html body.sc-desk .sc-body {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 56px;
    align-items: start;
  }
  .sc-desk .sc-body > *,
  .sc-desk .sc-about > * {
    grid-column: 1 / -1;
  }
  .sc-desk .sc-about {
    display: contents;
  }
  .sc-desk .sc-body > h2,
  .sc-desk .sc-about > h2 {
    grid-column: 1;
    grid-row-end: span 12;
  }
  .sc-desk .sc-body > h2 ~ :not(h2, .sc-footer),
  .sc-desk .sc-about > h2 ~ :not(h2) {
    grid-column: 2;
  }
  /* a landing that wraps each section in <section><h2>…</h2>…</section> gets the same rail */
  html body.sc-desk .sc-body > section:has(> h2:first-child) {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 56px;
    align-items: start;
  }
  .sc-desk .sc-body > section:has(> h2:first-child) > * {
    grid-column: 2;
    min-width: 0;
  }
  .sc-desk .sc-body > section:has(> h2:first-child) > h2 {
    grid-column: 1;
    grid-row: 1 / span 40;
  }
  /* the section's own top hairline continues across the content column */
  html body.sc-desk :is(.sc-body, .sc-about, .sc-body > section) > h2 + * {
    margin-top: 72px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
  }
  html body.sc-desk :is(.sc-body, .sc-about, .sc-body > section) > h2 + :is(ul, ol) {
    padding-top: 0;
  }
  html body.sc-desk :is(.sc-body, .sc-about, .sc-body > section) > h2 + :is(ul, ol) > li:first-child {
    border-top: 0;
    padding-top: 28px;
  }
  html body.sc-desk :is(.sc-body, .sc-about, .sc-body > section) > h2 + ul > li:first-child::before {
    top: calc(28px + 0.62em);
  }
  html body.sc-desk :is(.sc-body, .sc-about, .sc-body > section) > h2 + ol > li:first-child::before {
    top: 30px;
  }
}

/* ---- datasheet primitives ------------------------------------------------- */
.sc-desk .sc-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sc-desk .sc-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  letter-spacing: 0;
}
.sc-desk .sc-chip {
  --chip: var(--cat-tools);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip) 12%, white);
  color: color-mix(in srgb, var(--chip) 62%, black);
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1;
}
.sc-desk .sc-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip);
}
.sc-desk .sc-chip--agents { --chip: var(--cat-agents); }
.sc-desk .sc-chip--cloud { --chip: var(--cat-cloud); }
.sc-desk .sc-chip--banking { --chip: var(--cat-banking); }
.sc-desk .sc-chip--games { --chip: var(--cat-games); }
.sc-desk .sc-chip--tools { --chip: var(--cat-tools); }
.sc-desk .sc-chip--writing { --chip: var(--cat-writing); }
.sc-desk .sc-lamp {
  --lamp: var(--ok);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.sc-desk .sc-lamp > i {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;
}
.sc-desk .sc-lamp--pulse > i::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid var(--lamp);
  animation: sc-lamp 2s var(--ease-out) infinite;
}
.sc-desk .sc-barcode {
  display: block;
  color: var(--ink);
}
.sc-desk .sc-ruler {
  display: block;
  height: 7px;
  background:
    repeating-linear-gradient(90deg, var(--ink-4) 0 1px, transparent 1px 40px) 0 0 / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 8px) 0 100% / 100% 4px no-repeat;
  transform-origin: 0 50%;
}

/* ---- motion ---------------------------------------------------------------
   showcase-motion.js marks below-the-fold blocks .sc-r and adds .is-in as each
   enters view; nothing on the first screen is ever hidden by script. */
.sc-desk .sc-r {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--ri, 0) * 70ms);
}
.sc-desk .sc-r.is-in {
  opacity: 1;
  transform: none;
}
.sc-desk h2.sc-r::after {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 900ms var(--ease-out) 200ms;
}
.sc-desk h2.sc-r.is-in::after {
  transform: scaleX(1);
}
[data-sc-tilt] {
  --sc-rx: 0deg;
  --sc-ry: 0deg;
}
@keyframes sc-drop {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes sc-rise {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes sc-foil-drift {
  from { background-position-x: 0%; }
  to { background-position-x: 200%; }
}
@keyframes sc-lamp {
  0% { transform: scale(1); opacity: 0.9; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* ---- inside the portfolio's frame (?embed=1 or an iframe) ------------------ */
html.sc-embed body.sc-desk {
  padding: 0;
  background-image: none;
}
html.sc-embed .sc-titlebar {
  display: none !important;
}

/* ---- reduced motion: opacity and colour only, foil static ------------------ */
@media (prefers-reduced-motion: reduce) {
  .sc-desk *,
  .sc-desk *::before,
  .sc-desk *::after {
    animation: none !important;
    transition-property: opacity, color, background-color, border-color !important;
  }
  .sc-desk .sc-r {
    transform: none;
  }
  html body.sc-desk :is(.sc-btn, .play-link, .repo-link) {
    transform: none;
  }
}
@media print {
  html body.sc-desk {
    background-image: none;
  }
  .sc-desk .sc-titlebar {
    position: static;
  }
  .sc-desk .sc-r {
    opacity: 1;
    transform: none;
  }
}