/* ══════════════════════════════════════════════════════════════════════════
   /unity-slot-machine-source-code — ISOLATED page stylesheet.

   Every selector below is prefixed with #page-unity-slot-machine-source-code.
   Nothing here can reach the shared header/footer, and /assets/css/layout.css
   (namespaced under #site-header / #site-footer) cannot reach this page.

   VISUAL DIRECTION — "The Viewport".
     · MID-GREY ground (#33333B). Surveyed against all 43 sibling pages: every
       dark page in the repo sits at L≈4–13% and carries a hue tint (navy,
       plum, espresso, petrol, baize, oxblood). Not one uses a mid-tone
       neutral. This is the single largest unoccupied region in the set, and
       it happens to be the exact register of the Unity Editor viewport.
     · ORCHID #A21CAF as the sole action colour. The repo's accents run from
       #7c3aed (hue 263) straight to #b3125a (hue 331) — the whole
       purple-fuchsia-orchid arc between them is empty.
     · NO RADIAL GLOW. 22 of the 27 slot-family pages open with one. This hero
       is a flat block with a static 20px snap-grid ruling and a panel bar.
     · 0px / 2px corners against the repo's 10–18px cluster.
     · IBM Plex Mono for coordinate readouts and section indices. Nine siblings
       share the generic ui-monospace stack and one uses JetBrains Mono; Plex
       is unused.

   CONTRAST — every text pair measured, none below 4.5:1 (WCAG AA):
     #F4F4F6 on #33333B ......... 11.40    #17171C on #EDEDF0 ......... 15.29
     #C3C3CC on #33333B ..........7.15     #3A3A44 on #EDEDF0 ..........9.62
     #C3C3CC on #3E3E48 ..........6.04     #5A5A66 on #EDEDF0 ..........5.82
     #FFFFFF on #A21CAF ..........6.32     #A21CAF on #EDEDF0 ..........5.41
     #E879F9 on #33333B ..........5.09     #A21CAF on #E2E2E8 ..........4.90
   #C026D3 (4.03 on scene) is used ONLY for borders, rules and non-text UI —
   never for body copy. Rule 23: no muted greys carry paragraph text on light.

   MOTION — rule 26. This file declares NO keyframe animations at all. Every
   transition is a finite response to :hover / :focus-visible / [open].
   ══════════════════════════════════════════════════════════════════════════ */

#page-unity-slot-machine-source-code {
  /* ── Viewport / dark surfaces ── */
  --usm-vp:      #33333B;   /* the mid-tone ground — the whole point */
  --usm-vp-2:    #3E3E48;   /* raised panel */
  --usm-vp-3:    #2A2A31;   /* recessed well */
  --usm-bar:     #26262C;   /* toolbar strip */
  --usm-line-d:  rgba(255, 255, 255, .13);
  --usm-line-d2: rgba(255, 255, 255, .26);
  --usm-on-vp:   #F4F4F6;   /* 11.40:1 on vp */
  --usm-on-vp-2: #C3C3CC;   /*  7.15:1 on vp, 6.04:1 on vp-2 */

  /* ── Scene / light surfaces — cool, NOT the warm papers eight siblings share ── */
  --usm-scene:   #EDEDF0;
  --usm-scene-2: #FFFFFF;
  --usm-scene-3: #E2E2E8;
  --usm-line-l:  #D2D2DA;
  --usm-line-l2: #BEBEC9;

  /* ── Text on light ── */
  --usm-ink:     #17171C;   /* 15.29:1 on scene */
  --usm-ink-2:   #3A3A44;   /*  9.62:1 on scene */
  --usm-label:   #5A5A66;   /*  5.82:1 on scene — mono labels only */

  /* ── Action — the only interactive colour on the page ── */
  --usm-act:     #A21CAF;
  --usm-act-d:   #8E1799;
  --usm-act-l:   #E879F9;   /* on the viewport only */
  --usm-act-br:  #C026D3;   /* borders / rules / non-text UI only */

  --usm-r:   0;
  --usm-r-s: 2px;

  --usm-grid: 20px;         /* the snap-grid pitch */

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--usm-ink);
  background: var(--usm-scene);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Resets. Wrapped in :where() so they carry ZERO specificity and can never
      beat a component rule — the failure mode that flattened four centred H3s
      on /make-your-own-slot-machine. ─────────────────────────────────────── */
#page-unity-slot-machine-source-code a { text-decoration: none; color: inherit; }

#page-unity-slot-machine-source-code :where(h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote,address) { margin: 0; }
#page-unity-slot-machine-source-code :where(ul,ol) { padding: 0; list-style: none; }
#page-unity-slot-machine-source-code :where(img) { max-width: 100%; height: auto; display: block; }
#page-unity-slot-machine-source-code :where(button) { font: inherit; color: inherit; }
#page-unity-slot-machine-source-code :where(address) { font-style: normal; }
#page-unity-slot-machine-source-code :where(h1,h2,h3,h4,h5,h6) {
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.14;
}

#page-unity-slot-machine-source-code *,
#page-unity-slot-machine-source-code *::before,
#page-unity-slot-machine-source-code *::after { box-sizing: border-box; }

#page-unity-slot-machine-source-code :focus-visible {
  outline: 3px solid var(--usm-act);
  outline-offset: 3px;
}
#page-unity-slot-machine-source-code .usm-sec--vp :focus-visible,
#page-unity-slot-machine-source-code .usm-hero :focus-visible { outline-color: var(--usm-act-l); }

/* ══════════════════════════════════════════════════════════════════════════
   RHYTHM
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}
#page-unity-slot-machine-source-code .usm-wrap--narrow { max-width: 860px; }

#page-unity-slot-machine-source-code .usm-sec {
  padding-block: clamp(56px, 7vw, 104px);
}
#page-unity-slot-machine-source-code .usm-sec--scene { background: var(--usm-scene); }
#page-unity-slot-machine-source-code .usm-sec--tint  { background: var(--usm-scene-3); }
#page-unity-slot-machine-source-code .usm-sec--vp {
  background: var(--usm-vp);
  color: var(--usm-on-vp);
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION MARKER — the axis readout. Mono index + label, hairline rule.
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--usm-label);
  margin-bottom: 18px;
}
#page-unity-slot-machine-source-code .usm-marker__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  padding-inline: 6px;
  border: 1px solid var(--usm-act-br);
  border-radius: var(--usm-r-s);
  color: var(--usm-act);
  font-weight: 600;
  letter-spacing: .06em;
}
#page-unity-slot-machine-source-code .usm-marker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--usm-line-l);
}
#page-unity-slot-machine-source-code .usm-marker--on-vp { color: var(--usm-on-vp-2); }
#page-unity-slot-machine-source-code .usm-marker--on-vp .usm-marker__n {
  border-color: var(--usm-act-l);
  color: var(--usm-act-l);
}
#page-unity-slot-machine-source-code .usm-marker--on-vp::after { background: var(--usm-line-d); }

#page-unity-slot-machine-source-code .usm-sechead { margin-bottom: clamp(28px, 3.5vw, 44px); }
#page-unity-slot-machine-source-code .usm-sechead h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  max-width: 22ch;
}
#page-unity-slot-machine-source-code .usm-sec--tint .usm-sechead h2,
#page-unity-slot-machine-source-code .usm-sec--scene .usm-sechead h2 { color: var(--usm-ink); }

#page-unity-slot-machine-source-code .usm-subhead {
  font-size: 20px;
  margin-block: 34px 16px;
  padding-left: 12px;
  border-left: 3px solid var(--usm-act-br);
}
#page-unity-slot-machine-source-code .usm-sec--vp .usm-subhead { border-left-color: var(--usm-act-l); }

#page-unity-slot-machine-source-code .usm-lead {
  font-size: 17px;
  color: var(--usm-ink-2);
  max-width: 74ch;
  margin-bottom: 14px;
}

/* Inline text links — the ONLY place a second destination may appear (rule 25) */
#page-unity-slot-machine-source-code .usm-inline {
  color: var(--usm-act);
  font-weight: 600;
  border-bottom: 1px solid var(--usm-act-br);
  transition: color 160ms ease, border-color 160ms ease;
}
#page-unity-slot-machine-source-code .usm-inline:hover { color: var(--usm-act-d); border-bottom-color: var(--usm-act-d); }
#page-unity-slot-machine-source-code .usm-inline--on-vp { color: var(--usm-act-l); border-bottom-color: var(--usm-act-l); }
#page-unity-slot-machine-source-code .usm-inline--on-vp:hover { color: var(--usm-on-vp); border-bottom-color: var(--usm-on-vp); }

/* ══════════════════════════════════════════════════════════════════════════
   HERO — flat viewport block. No image, no radial, no background-image.
   The grid is a repeating-linear-gradient, so it is a static pattern rather
   than an asset (frontend-design rule 24 + validate-conversion check_hero).
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-hero {
  width: 100%;
  background-color: var(--usm-vp);
  background-image:
    repeating-linear-gradient(to right,  var(--usm-line-d) 0 1px, transparent 1px var(--usm-grid)),
    repeating-linear-gradient(to bottom, var(--usm-line-d) 0 1px, transparent 1px var(--usm-grid));
  color: var(--usm-on-vp);
  border-bottom: 4px solid var(--usm-act-br);
}

/* The editor toolbar strip. Pure CSS shapes — no SVG, keeping the hero well
   under the gate's 4-inline-svg warning threshold. */
#page-unity-slot-machine-source-code .usm-hero__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(20px, 4vw, 40px);
  background: var(--usm-bar);
  border-bottom: 1px solid var(--usm-line-d);
}
#page-unity-slot-machine-source-code .usm-hero__glyph {
  width: 11px;
  height: 11px;
  background: var(--usm-on-vp-2);
  display: block;
}
#page-unity-slot-machine-source-code .usm-hero__glyph--play  { clip-path: polygon(0 0, 100% 50%, 0 100%); }
#page-unity-slot-machine-source-code .usm-hero__glyph--pause { clip-path: polygon(0 0, 34% 0, 34% 100%, 0 100%, 66% 100%, 66% 0, 100% 0, 100% 100%, 66% 100%, 34% 100%); }
#page-unity-slot-machine-source-code .usm-hero__glyph--step  { clip-path: polygon(0 0, 70% 50%, 0 100%, 0 0, 78% 0, 100% 0, 100% 100%, 78% 100%); }
#page-unity-slot-machine-source-code .usm-hero__barlabel {
  margin-left: 6px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--usm-on-vp-2);
  letter-spacing: .04em;
}

#page-unity-slot-machine-source-code .usm-hero__inner {
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 40px);
  text-align: center;
}

#page-unity-slot-machine-source-code .usm-eyebrow {
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--usm-line-d2);
  border-radius: var(--usm-r-s);
  margin-bottom: 26px;
}
#page-unity-slot-machine-source-code .usm-eyebrow--on-vp { color: var(--usm-on-vp-2); }

#page-unity-slot-machine-source-code .usm-hero h1 {
  font-size: clamp(38px, 5.4vw, 70px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.04;
  margin-bottom: 26px;
}
#page-unity-slot-machine-source-code .usm-hero__lede {
  font-size: clamp(16px, 1.25vw, 18px);
  color: var(--usm-on-vp-2);
  max-width: 68ch;
  margin: 0 auto 34px;
}

#page-unity-slot-machine-source-code .usm-hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--usm-line-d);
  font-size: 16px;
  color: var(--usm-on-vp-2);
}
#page-unity-slot-machine-source-code .usm-hero__trust li {
  display: flex;
  align-items: center;
  gap: 9px;
}
/* The axis readout — x / y / z, the page's signature glyph */
#page-unity-slot-machine-source-code .usm-coord,
#page-unity-slot-machine-source-code .usm-hero__trust li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--usm-act-l);
  border-radius: var(--usm-r-s);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--usm-act-l);
  text-transform: uppercase;
  flex: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-crumb {
  background: var(--usm-scene-2);
  border-bottom: 1px solid var(--usm-line-l);
  padding-block: 14px;
  font-size: 16px;
}
#page-unity-slot-machine-source-code .usm-crumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--usm-ink-2);
}
#page-unity-slot-machine-source-code .usm-crumb li { display: flex; align-items: center; gap: 8px; }
#page-unity-slot-machine-source-code .usm-crumb a { display: flex; align-items: center; gap: 7px; min-height: 44px; color: var(--usm-act); font-weight: 600; }
#page-unity-slot-machine-source-code .usm-crumb a:hover { color: var(--usm-act-d); }
#page-unity-slot-machine-source-code .usm-crumb img { width: 16px; height: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS — one per section, unique label (rule 25). 44px min target.
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-cta-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(30px, 3.5vw, 44px);
}
#page-unity-slot-machine-source-code .usm-hero .usm-cta-row { margin-top: 0; }
#page-unity-slot-machine-source-code .usm-split__body .usm-cta-row { justify-content: flex-start; }

#page-unity-slot-machine-source-code .usm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 30px;
  border: 1px solid transparent;
  border-radius: var(--usm-r-s);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  text-align: center;
  transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease, transform 120ms ease;
}
#page-unity-slot-machine-source-code .usm-btn:active { transform: translateY(1px); }

#page-unity-slot-machine-source-code .usm-btn--solid {
  background: var(--usm-act);
  color: #ffffff;             /* 6.32:1 */
}
#page-unity-slot-machine-source-code .usm-btn--solid:hover { background: var(--usm-act-d); }

#page-unity-slot-machine-source-code .usm-btn--ghost {
  background: transparent;
  color: var(--usm-on-vp);
  border-color: var(--usm-act-l);
}
#page-unity-slot-machine-source-code .usm-btn--ghost:hover {
  background: var(--usm-act-l);
  color: var(--usm-vp);
}

/* ══════════════════════════════════════════════════════════════════════════
   INSPECTOR ROWS — label-left / value-right property rows
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-rows {
  border-top: 1px solid var(--usm-line-l);
}
#page-unity-slot-machine-source-code .usm-rows li {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 8px 28px;
  padding-block: 22px;
  border-bottom: 1px solid var(--usm-line-l);
}
#page-unity-slot-machine-source-code .usm-rows__k {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--usm-act);
  letter-spacing: .02em;
  padding-top: 2px;
}
#page-unity-slot-machine-source-code .usm-rows p { color: var(--usm-ink-2); font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   BANDS — short centred viewport statements
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-band__inner { text-align: center; max-width: 820px; }
#page-unity-slot-machine-source-code .usm-band .usm-marker { justify-content: center; }
#page-unity-slot-machine-source-code .usm-band .usm-marker::after { display: none; }
#page-unity-slot-machine-source-code .usm-band h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  margin-bottom: 16px;
}
#page-unity-slot-machine-source-code .usm-band p {
  color: var(--usm-on-vp-2);
  font-size: 17px;
  max-width: 62ch;
  margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   GALLERY + TILES — transform-handle corner brackets on hover
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-gallery,
#page-unity-slot-machine-source-code .usm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
#page-unity-slot-machine-source-code .usm-gallery li,
#page-unity-slot-machine-source-code .usm-tiles li {
  position: relative;
  background: var(--usm-scene-2);
  border: 1px solid var(--usm-line-l);
  border-radius: var(--usm-r-s);
  padding: 10px;
  transition: border-color 170ms ease;
}
#page-unity-slot-machine-source-code .usm-gallery li:hover,
#page-unity-slot-machine-source-code .usm-tiles li:hover { border-color: var(--usm-act-br); }
#page-unity-slot-machine-source-code .usm-gallery img,
#page-unity-slot-machine-source-code .usm-tiles img {
  width: 100%;
  border-radius: var(--usm-r);
}

/* ══════════════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-cards {
  display: grid;
  gap: 18px;
}
#page-unity-slot-machine-source-code .usm-cards--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

#page-unity-slot-machine-source-code .usm-card {
  background: var(--usm-scene-2);
  border: 1px solid var(--usm-line-l);
  border-radius: var(--usm-r-s);
  padding: 26px 24px;
  transition: border-color 170ms ease, box-shadow 170ms ease;
}
#page-unity-slot-machine-source-code .usm-card:hover {
  border-color: var(--usm-act-br);
  box-shadow: 4px 4px 0 0 var(--usm-scene-3);
}
/* Numbered mechanics grid. Replaces the 12 identical vendor round-icons the
   source repeated — §23 warns against exactly that icon+heading+paragraph
   repetition, and the asset's indigo fights the orchid action colour. The mono
   index is the page's own language (see .usm-marker / .usm-index). */
#page-unity-slot-machine-source-code .usm-cards--num { counter-reset: usm-m; }
#page-unity-slot-machine-source-code .usm-cards--num .usm-card::before {
  counter-increment: usm-m;
  content: counter(usm-m, decimal-leading-zero);
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--usm-act);
  margin-bottom: 12px;
}
#page-unity-slot-machine-source-code .usm-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--usm-ink);
}
#page-unity-slot-machine-source-code .usm-card p { color: var(--usm-ink-2); font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   HIERARCHY TREE — the admin panel list, drawn as an editor hierarchy
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-tree {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2px;
  background: var(--usm-line-d);
  border: 1px solid var(--usm-line-d);
  border-radius: var(--usm-r-s);
}
#page-unity-slot-machine-source-code .usm-tree li {
  background: var(--usm-vp-2);
  padding: 22px 22px 22px 40px;
  position: relative;
  transition: background-color 170ms ease;
}
#page-unity-slot-machine-source-code .usm-tree li:hover { background: var(--usm-vp-3); }
/* foldout triangle */
#page-unity-slot-machine-source-code .usm-tree li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 28px;
  width: 7px;
  height: 9px;
  background: var(--usm-act-l);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#page-unity-slot-machine-source-code .usm-tree h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--usm-on-vp);
}
#page-unity-slot-machine-source-code .usm-tree p { color: var(--usm-on-vp-2); font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   SPLIT — media beside body
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
#page-unity-slot-machine-source-code .usm-split--rev .usm-split__media { order: 2; }

/* prefab bracket frame */
#page-unity-slot-machine-source-code .usm-split__media {
  position: relative;
  padding: 12px;
  border: 1px solid var(--usm-line-l);
  border-radius: var(--usm-r-s);
  background: var(--usm-scene-2);
}
#page-unity-slot-machine-source-code .usm-split__media::before,
#page-unity-slot-machine-source-code .usm-split__media::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--usm-act-br);
}
#page-unity-slot-machine-source-code .usm-split__media::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
#page-unity-slot-machine-source-code .usm-split__media::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
#page-unity-slot-machine-source-code .usm-split__media img { width: 100%; }

#page-unity-slot-machine-source-code .usm-split__body h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  margin-bottom: 16px;
}
#page-unity-slot-machine-source-code .usm-split__body > p { color: var(--usm-ink-2); font-size: 16px; margin-bottom: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   LISTS — link list, check list, index
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-linklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px 20px;
  margin-top: 18px;
}
#page-unity-slot-machine-source-code .usm-linklist a {
  display: block;
  padding: 10px 0 10px 18px;
  position: relative;
  font-size: 16px;
  font-weight: 600;
  color: var(--usm-ink);
  border-bottom: 1px solid var(--usm-line-l);
  transition: color 160ms ease, padding-left 160ms ease;
}
#page-unity-slot-machine-source-code .usm-linklist a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -4px;
  width: 6px;
  height: 8px;
  background: var(--usm-act-br);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#page-unity-slot-machine-source-code .usm-linklist a:hover { color: var(--usm-act); padding-left: 24px; }

#page-unity-slot-machine-source-code .usm-checks { display: grid; gap: 11px; margin-block: 6px 18px; }
#page-unity-slot-machine-source-code .usm-checks li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 16px;
  color: var(--usm-ink-2);
}
#page-unity-slot-machine-source-code .usm-checks img { width: 18px; height: 18px; margin-top: 4px; }

#page-unity-slot-machine-source-code .usm-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 0 24px;
  counter-reset: usm-i;
}
#page-unity-slot-machine-source-code .usm-index a {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--usm-line-l);
  font-size: 16px;
  color: var(--usm-ink-2);
  transition: color 160ms ease;
}
#page-unity-slot-machine-source-code .usm-index a::before {
  counter-increment: usm-i;
  content: counter(usm-i, decimal-leading-zero);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--usm-label);
}
#page-unity-slot-machine-source-code .usm-index a:hover { color: var(--usm-act); }
#page-unity-slot-machine-source-code .usm-index a:hover::before { color: var(--usm-act); }

/* ══════════════════════════════════════════════════════════════════════════
   PANELS — What's Included / Quick Setup / Design Control
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 30px;
}
#page-unity-slot-machine-source-code .usm-panel {
  background: var(--usm-scene-2);
  border: 1px solid var(--usm-line-l);
  border-top: 3px solid var(--usm-act-br);
  border-radius: var(--usm-r-s);
  padding: 24px;
}
#page-unity-slot-machine-source-code .usm-panel--wide { grid-column: 1 / -1; }
#page-unity-slot-machine-source-code .usm-panel h3 { font-size: 20px; margin-bottom: 12px; color: var(--usm-ink); }
#page-unity-slot-machine-source-code .usm-panel p { color: var(--usm-ink-2); font-size: 16px; }
#page-unity-slot-machine-source-code .usm-panel--wide .usm-checks {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 11px 24px;
}

/* ══════════════════════════════════════════════════════════════════════════
   FAQ — native <details name> exclusivity, JS fallback for older engines
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-faq { border-top: 1px solid var(--usm-line-l2); }
#page-unity-slot-machine-source-code .usm-faq details { border-bottom: 1px solid var(--usm-line-l2); }
#page-unity-slot-machine-source-code .usm-faq summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
#page-unity-slot-machine-source-code .usm-faq summary::-webkit-details-marker { display: none; }
#page-unity-slot-machine-source-code .usm-faq summary::before {
  content: "";
  flex: none;
  margin-top: 6px;
  width: 8px;
  height: 10px;
  background: var(--usm-act);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform 180ms ease;
}
#page-unity-slot-machine-source-code .usm-faq details[open] summary::before { transform: rotate(90deg); }
#page-unity-slot-machine-source-code .usm-faq summary h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--usm-ink);
  line-height: 1.4;
}
#page-unity-slot-machine-source-code .usm-faq summary:hover h3 { color: var(--usm-act); }
#page-unity-slot-machine-source-code .usm-faq__a { padding: 0 0 22px 22px; }
#page-unity-slot-machine-source-code .usm-faq__a p { color: var(--usm-ink-2); font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS — click-to-load video facades (rule 26)
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
#page-unity-slot-machine-source-code .usm-stories li {
  background: var(--usm-vp-2);
  border: 1px solid var(--usm-line-d);
  border-radius: var(--usm-r-s);
  overflow: hidden;
}
#page-unity-slot-machine-source-code .usm-vid {
  position: relative;
  display: block;
  cursor: pointer;
  background: var(--usm-vp-3);
}
#page-unity-slot-machine-source-code .usm-vid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
#page-unity-slot-machine-source-code .usm-vid__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  background: var(--usm-act);
  border-radius: var(--usm-r-s);
  transition: background-color 170ms ease;
}
#page-unity-slot-machine-source-code .usm-vid__play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 18px;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#page-unity-slot-machine-source-code .usm-vid:hover .usm-vid__play { background: var(--usm-act-d); }
#page-unity-slot-machine-source-code .usm-stories iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}
#page-unity-slot-machine-source-code .usm-stories blockquote { padding: 20px 22px; }
#page-unity-slot-machine-source-code .usm-stories blockquote p { color: var(--usm-on-vp-2); font-size: 16px; }
#page-unity-slot-machine-source-code .usm-more { margin-top: 26px; text-align: center; font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   AREA WE SERVE
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
#page-unity-slot-machine-source-code .usm-areas li {
  background: var(--usm-scene-2);
  border: 1px solid var(--usm-line-l);
  border-left: 3px solid var(--usm-act-br);
  border-radius: var(--usm-r-s);
  padding: 22px;
}
#page-unity-slot-machine-source-code .usm-areas h3 {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--usm-label);
  margin-bottom: 12px;
}
#page-unity-slot-machine-source-code .usm-areas__tel { margin-bottom: 4px; }
/* tel: links are real tap targets (click-to-call) — 44px min per §29, so the
   anchor is a block with its own padding rather than bare 20px-tall text. */
#page-unity-slot-machine-source-code .usm-areas__tel a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
  font-weight: 700;
  color: var(--usm-act);
}
#page-unity-slot-machine-source-code .usm-areas__tel a:hover { color: var(--usm-act-d); }
#page-unity-slot-machine-source-code .usm-areas address { color: var(--usm-ink-2); font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   CTA MODAL — wrapper shows ONLY the close button and the iframe
   ══════════════════════════════════════════════════════════════════════════ */
#page-unity-slot-machine-source-code .usm-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(23, 23, 28, .72);
  padding: 20px;
  overflow-y: auto;
}
#page-unity-slot-machine-source-code .usm-modal.open { display: flex; align-items: flex-start; justify-content: center; }
#page-unity-slot-machine-source-code .usm-modal__box {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: auto;
  background: var(--usm-scene-2);
  border: 1px solid var(--usm-line-l);
  border-top: 4px solid var(--usm-act-br);
  border-radius: var(--usm-r-s);
  padding: 46px 14px 14px;
}
#page-unity-slot-machine-source-code .usm-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--usm-scene-3);
  border: 1px solid var(--usm-line-l);
  border-radius: var(--usm-r-s);
  color: var(--usm-ink);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
#page-unity-slot-machine-source-code .usm-modal__close:hover { background: var(--usm-act); color: #ffffff; }
/* rule 20 — content height + 100px buffer, plus the postMessage resize listener */
#page-unity-slot-machine-source-code .usm-modal iframe {
  width: 100%;
  min-height: 860px;
  border: 0;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — recompose, don't shrink (§16)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #page-unity-slot-machine-source-code .usm-split { grid-template-columns: 1fr; }
  #page-unity-slot-machine-source-code .usm-split--rev .usm-split__media { order: 0; }
  #page-unity-slot-machine-source-code .usm-rows li { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 600px) {
  #page-unity-slot-machine-source-code .usm-hero__inner { text-align: left; }
  #page-unity-slot-machine-source-code .usm-hero__lede { margin-inline: 0; }
  #page-unity-slot-machine-source-code .usm-hero__trust { justify-content: flex-start; }
  #page-unity-slot-machine-source-code .usm-cta-row { justify-content: stretch; }
  #page-unity-slot-machine-source-code .usm-btn { width: 100%; }
  #page-unity-slot-machine-source-code .usm-gallery,
  #page-unity-slot-machine-source-code .usm-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  #page-unity-slot-machine-source-code .usm-band .usm-marker { justify-content: flex-start; }
  #page-unity-slot-machine-source-code .usm-band__inner { text-align: left; }
  #page-unity-slot-machine-source-code .usm-band p { margin-inline: 0; }
  #page-unity-slot-machine-source-code .usm-hero__barlabel { display: none; }
  #page-unity-slot-machine-source-code .usm-modal { padding: 10px; }
  #page-unity-slot-machine-source-code .usm-modal__box { padding: 44px 8px 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — the transitions above are the only motion on the page
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #page-unity-slot-machine-source-code *,
  #page-unity-slot-machine-source-code *::before,
  #page-unity-slot-machine-source-code *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}