/* The guide decks' shared stylesheet.

   SELF-CONTAINED ON PURPOSE. The internal decks link the company site.css and
   the internal docs' stylesheet; the guide has to be hostable as one folder, so
   the tokens those two define are copied here (same names, same light and dark
   values) and nothing outside this folder is linked.

   The theme is `data-theme` on <html>, written before paint by ./theme.js:
     :root                                   light
     :root[data-theme="dark"]                the reader picked dark
     @media (prefers-color-scheme: dark)
       :root:not([data-theme="light"])       the OS says dark, the reader did not pick

   THE RENDER RULE. No CSS transition or keyframe on anything that moves. Every
   moving property is computed from t by the deck's draw functions and written
   inline, so `window.__video.seek(t)` is a pure function of t. The one
   transition here is the play button's hover, which render mode never shows. */

:root {
  color-scheme: light;
  --bg:          #ffffff;
  --bg-card:     #ffffff;
  --bg-deep:     #f7f7fb;
  --text-bright: #06091a;
  --text:        #0b1030;
  --text-muted:  #39406b;
  --text-dim:    #565f86;
  --border:      #e7e8f1;
  --line-2:      #d9dbe9;
  --shadow-sheet: 0 8px 22px rgba(11, 16, 48, .10), inset 0 1px 0 rgba(255, 255, 255, .5);
  --ui-radius-xs: 3px;
  --ui-radius-sm: 5px;
  --ui-radius-md: 7px;
  --ui-radius-lg: 10px;
  --ui-radius-xl: 14px;
  --violet:     #7c4dff;
  --coral:      #ff5a6e;
  --violet-ink: #7c4dff;
  --success:    #1f9d55;
  --nav-bg:       rgba(255, 255, 255, .82);
  --surface-2:    var(--bg-deep);
  --diagram-face: var(--bg-card);
  --hero-wash:
    radial-gradient(820px 500px at 6% -16%, rgba(124, 77, 255, .13), rgba(124, 77, 255, 0) 62%),
    radial-gradient(700px 460px at 94% 2%,  rgba(255, 90, 110, .10), rgba(255, 90, 110, 0) 60%);
  /* the one shape a slide is about */
  --deck-hi: var(--coral);
  /* a soft fill for "lit" things: a monitor on, a familiar, a lantern glow */
  --glow: rgba(124, 77, 255, .16);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:          #0a0a0c;
  --bg-card:     #0e0e11;
  --bg-deep:     #050508;
  --text-bright: #eae7e0;
  --text:        #c8c5be;
  --text-muted:  #908c86;
  --text-dim:    #87837c;
  --border:      #1e1c22;
  --line-2:      #2e2b38;
  --shadow-sheet: 0 18px 44px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .06);
  --violet-ink:  #a58bff;
  --success:     #4ade80;
  --nav-bg:       rgba(10, 10, 12, .82);
  --surface-2:    #131317;
  --diagram-face: var(--bg-card);
  --hero-wash:
    radial-gradient(820px 500px at 6% -16%, rgba(124, 77, 255, .22), rgba(124, 77, 255, 0) 62%),
    radial-gradient(700px 460px at 94% 2%,  rgba(255, 90, 110, .14), rgba(255, 90, 110, 0) 60%);
  --deck-hi: #ff8090;
  --glow: rgba(165, 139, 255, .20);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:          #0a0a0c;
    --bg-card:     #0e0e11;
    --bg-deep:     #050508;
    --text-bright: #eae7e0;
    --text:        #c8c5be;
    --text-muted:  #908c86;
    --text-dim:    #87837c;
    --border:      #1e1c22;
    --line-2:      #2e2b38;
    --shadow-sheet: 0 18px 44px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .06);
    --violet-ink:  #a58bff;
    --success:     #4ade80;
    --nav-bg:       rgba(10, 10, 12, .82);
    --surface-2:    #131317;
    --diagram-face: var(--bg-card);
    --hero-wash:
      radial-gradient(820px 500px at 6% -16%, rgba(124, 77, 255, .22), rgba(124, 77, 255, 0) 62%),
      radial-gradient(700px 460px at 94% 2%,  rgba(255, 90, 110, .14), rgba(255, 90, 110, 0) 60%);
    --deck-hi: #ff8090;
    --glow: rgba(165, 139, 255, .20);
  }
}

/* ── the stage ────────────────────────────────────────────────────────── */
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--bg-deep); display: block; }
#fit { position: fixed; inset: 0; overflow: hidden; }
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px; flex: none;
  background: var(--bg); color: var(--text);
  font-family: Poppins, system-ui, sans-serif;
  overflow: hidden; transform-origin: center center;
  background-image: var(--hero-wash);
}

/* ── running chrome ───────────────────────────────────────────────────── */
#chrome-top { position: absolute; left: 110px; right: 110px; top: 52px; height: 40px;
              display: flex; align-items: center; gap: 16px; }
#chrome-top .mark { height: 32px; width: auto; }
#chrome-top .name { font-size: 25px; font-weight: 600; letter-spacing: -.02em; color: var(--text-bright); }
#chrome-top .sep { width: 1px; height: 22px; background: var(--border); }
#chrome-top .where { font-size: 21px; color: var(--text-dim); }
#chrome-label { margin-left: auto; font-size: 20px; font-weight: 600;
                letter-spacing: .16em; text-transform: uppercase; color: var(--violet-ink); }

#dots { position: absolute; left: 0; right: 0; bottom: 62px; height: 6px;
        display: flex; justify-content: center; gap: 12px; }
#dots .dot { position: relative; width: 44px; height: 6px; border-radius: 3px;
             background: var(--line-2); overflow: hidden; }
#dots .dot i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--violet);
               border-radius: 3px; display: block; }

/* ── slides ───────────────────────────────────────────────────────────── */
.slide { position: absolute; inset: 0; }
.slide .eyebrow { position: absolute; left: 110px; top: 168px; margin: 0;
                  font-size: 23px; font-weight: 600; letter-spacing: .16em;
                  text-transform: uppercase; color: var(--violet-ink); }
.slide h2 { position: absolute; left: 110px; top: 208px; margin: 0; width: 1700px;
            font-size: 68px; font-weight: 600; letter-spacing: -.035em; line-height: 1.06;
            color: var(--text-bright); }

.fig { position: absolute; left: 110px; }
.fig svg { display: block; overflow: visible; }

/* the diagram set */
.d-box { fill: var(--diagram-face); stroke: var(--violet); stroke-width: 2.4; }
.d-box.soft { stroke: var(--line-2); }
.d-box.hi { stroke: var(--deck-hi); }
.d-box.dash { stroke: var(--deck-hi); stroke-dasharray: 10 8; }
.d-box.ghost { stroke: var(--line-2); stroke-dasharray: 10 8; fill: none; }
.d-t { fill: var(--text-bright); font-family: Poppins, system-ui, sans-serif;
       font-size: 31px; font-weight: 600; text-anchor: middle; letter-spacing: -.02em; }
.d-t.sm { font-size: 26px; }
.d-s { fill: var(--text-dim); font-family: Poppins, system-ui, sans-serif;
       font-size: 21px; text-anchor: middle; }
.d-a { stroke: var(--violet); stroke-width: 2.4; fill: none; marker-end: url(#arrow); }
.d-rule { stroke: var(--violet); stroke-width: 2.4; fill: none; }
.d-arrow-head { fill: var(--violet); }
.d-floor { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 2; }
.d-desk { fill: var(--diagram-face); stroke: var(--line-2); stroke-width: 2.4; }

/* the little Luma: a head and a body, violet unless it is THE one */
.lu { fill: var(--violet); }
.lu.hi { fill: var(--deck-hi); }
.lu.dim { fill: var(--line-2); }
/* a desk monitor: grey when off; a deck lights it from t */
.mon { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 2; }

/* the fact list */
.fact { position: relative; padding-left: 34px; }
.fact + .fact { margin-top: 30px; }
.fact::before { content: ""; position: absolute; left: 0; top: 13px; width: 15px; height: 15px;
                border: 4px solid var(--violet); border-radius: var(--ui-radius-xs); }
.fact b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.02em;
          color: var(--text-bright); line-height: 1.25; }
.fact span { display: block; margin-top: 6px; font-size: 22px; line-height: 1.45; color: var(--text-dim); }
.fact.hi::before { border-color: var(--deck-hi); }

/* a card: the app's panel shape, at deck size */
.gd-card { position: absolute; box-sizing: border-box;
           border: 1px solid var(--line-2); border-radius: var(--ui-radius-xl);
           background: var(--bg-card); box-shadow: var(--shadow-sheet); }
.gd-card .head { display: flex; gap: 14px; height: 66px; align-items: center;
                 padding: 0 26px; border-bottom: 1px solid var(--border); }
.gd-card .head b { font-size: 25px; font-weight: 600; color: var(--text-bright); letter-spacing: -.02em; }
.gd-card .head span { margin-left: auto; font-size: 18px; color: var(--text-dim); }
.gd-body { padding: 20px 26px 22px; }
.gd-row { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 18px;
          border-radius: var(--ui-radius-sm); border: 1px solid var(--line-2); background: var(--surface-2); }
.gd-row + .gd-row { margin-top: 10px; }
.gd-row b { font-size: 21px; font-weight: 600; color: var(--text-bright); letter-spacing: -.02em; white-space: nowrap; }
.gd-row em { margin-left: auto; font-style: normal; font-size: 18px; color: var(--text-dim); text-align: right; }
.gd-note { position: absolute; left: 110px; top: 922px; margin: 0; font-size: 22px; color: var(--text-dim); }

/* the closing list */
.gd-rows { position: absolute; left: 110px; top: 360px; width: 1700px; }
.row { min-height: 84px; display: flex; align-items: center; gap: 24px; padding: 0 28px;
       border-radius: var(--ui-radius-lg); border: 1px solid var(--line-2);
       background: var(--bg-card); font-size: 26px; color: var(--text); }
.row + .row { margin-top: 12px; }
.row b { font-weight: 600; color: var(--text-bright); white-space: nowrap; }
.row em { font-style: normal; font-size: 22px; color: var(--text-dim); }
.row.hi { border-color: var(--deck-hi); border-width: 2px; }

/* ── title card ───────────────────────────────────────────────────────── */
.s-title { display: grid; place-items: center; }
.s-title .inner { width: 1500px; text-align: center; }
.t-mark { height: 96px; width: auto; margin: 0 auto; display: block; }
.t-pill { display: inline-flex; align-items: center; gap: .55em; margin-top: 30px;
          padding: .42em 1.05em; border-radius: 999px; border: 1px solid var(--line-2);
          background: var(--bg-card); font-size: 22px; font-weight: 500; color: var(--text-dim); }
.t-pill::before { content: ""; width: 9px; height: 9px; border-radius: 3px;
                  background: linear-gradient(135deg, var(--violet), var(--coral)); }
.t-h1 { margin: 26px 0 0; font-size: 110px; font-weight: 600; letter-spacing: -.045em;
        line-height: 1.02; color: var(--text-bright); }
.t-rule { width: 0; height: 5px; margin: 34px auto 0; border-radius: 3px;
          background: linear-gradient(90deg, var(--violet), var(--coral)); }
.t-sub { margin: 30px 0 0; font-size: 29px; color: var(--text-muted); }

/* ── play button: live mode only, and the only transition in this file ── */
#gate { position: absolute; inset: 0; display: grid; place-items: center;
        background: var(--nav-bg); backdrop-filter: blur(6px); cursor: pointer; }
#gate .btn-play { display: flex; align-items: center; justify-content: center;
                  width: 132px; height: 132px; border-radius: 999px;
                  background: linear-gradient(110deg, var(--violet), var(--coral));
                  box-shadow: 0 20px 50px -18px rgba(124, 77, 255, .7);
                  transition: transform .18s ease; }
#gate:hover .btn-play { transform: scale(1.05); }
#gate .btn-play svg { width: 46px; height: 46px; margin-left: 8px; fill: #fff; }
#gate .hint { margin-top: 26px; text-align: center; font-size: 22px; color: var(--text-dim); }
#gate .hint b { display: block; font-size: 30px; font-weight: 600; color: var(--text-bright);
                letter-spacing: -.02em; margin-bottom: 8px; }
#gate.gone { display: none; }

#scrub { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--violet); }
body.render #scrub, body.render #gate { display: none; }