/* Module stack (stack.js). Page tokens, light fallbacks; frame = the page's .win. After style.css. */
:root {
  --stk-ink: var(--ink, #232323); --stk-ink3: var(--ink-3, #6b655b); --stk-line: var(--line, rgba(35, 35, 35, 0.14));
  --stk-or: var(--orange, #f97316); --stk-acc: var(--accent-text, #b23a0b); --stk-face: var(--sheet, #fffdf7);
  --stk-edge: var(--paper-2, #ede9e3); --stk-ease: var(--ease, cubic-bezier(0.32, 0.72, 0, 1));
  --stk-hair: color-mix(in srgb, var(--stk-or) 58%, transparent); --stk-hair2: color-mix(in srgb, var(--stk-or) 30%, transparent);
  --stk-hi: #fffffff2; --stk-drop: #3c280c4d;
}
[data-theme='dark'] { --stk-hair: color-mix(in srgb, var(--stk-or) 62%, transparent); --stk-hi: #0008; --stk-drop: #0009; --stk-y: -0.05em; }

.stack--3d { --fw: var(--pw, 300px); -webkit-tap-highlight-color: transparent; }
.stack__scene { position: relative; width: 100%; height: 100%; min-height: 520px; perspective: 1800px; }
.stack__rig { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-40deg); }
.stack__plate {
  position: absolute; left: calc(var(--pw) / -2); top: calc(var(--pw) * -0.3125); width: var(--pw); height: calc(var(--pw) * 0.625);
  padding: 0; border: 0; background: none; cursor: pointer; outline: none;
  transform-style: preserve-3d; transform: translateZ(calc(var(--k) * var(--dz)));
}
.stack__sheet, .stack-card__card { font-size: calc(var(--fw) / 100); transform-style: preserve-3d; }
.stack__sheet {
  position: absolute; inset: 0; pointer-events: none;
  transform: translate3d(var(--lx, 0px), var(--lx, 0px), var(--lz, 0px)); transition: transform 0.7s var(--stk-ease);
}
.is-near { --lx: calc(var(--pw) * 0.04); --lz: 4px; }
.is-lift { --lx: calc(var(--pw) * 0.13); --lz: 12px; }
.is-lift .stack__sheet { pointer-events: auto; }
.is-out .stack__sheet > * { visibility: hidden; }
.stack__face, .stack__base { position: absolute; inset: 0; border-radius: 0.8em; }
.stack__face {
  overflow: hidden; box-shadow: inset 0 0 0 0.34em var(--stk-hair);
  background: linear-gradient(45deg, #0000 45%, #281c0a0b), var(--stk-face);
}
.stack__face::before, .stack__face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.stack__face::before {
  inset: 3.4em; box-shadow: inset 0 0 0 0.3em var(--stk-hair2);
  --g: linear-gradient(var(--stk-hair2) 0 0);
  background: var(--g) 22em 0 / 0.3em 100% no-repeat, var(--g) 29em 10em / 44em 0.3em no-repeat, var(--g) 29em 20em / var(--r, 30em) 0.3em no-repeat;
}
.stack__face[data-v='1'] { --r: 40em; }
.stack__face[data-v='2'] { --r: 22em; }
.stack__face::after {
  opacity: 0; transition: opacity 0.45s;
  background: color-mix(in srgb, var(--stk-or) 8%, transparent); box-shadow: inset 0 0 0 0.45em var(--stk-or);
}
.stack__n { position: absolute; left: 7%; bottom: 7.5%; font: 500 9.5em/1 var(--font-mono); letter-spacing: -0.04em; color: var(--stk-ink3); }
.stack__n, .stack-paper__n { text-shadow: 0 var(--stk-y, 0.05em) 0 var(--stk-hi); }
.stack__n::after { content: attr(data-n); position: absolute; left: 0; color: var(--stk-acc); text-shadow: none; opacity: 0; transition: opacity 0.45s; }
.is-near .stack__face::after { opacity: 0.5; }
.is-lift .stack__face::after, .is-lit::after, :is(.is-near, .is-lift, .is-lit) .stack__n::after { opacity: 1; }
.stack__base { background: var(--stk-edge); box-shadow: inset 0 0 0 1px var(--stk-hair); transform: translateZ(-6px); }
.stack__base::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 2em 4em 0.5em var(--stk-drop);
  opacity: 0; transition: opacity 0.5s;
}
.is-lift .stack__base::after { opacity: 1; }

.stack-card {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden; background: none; color: var(--stk-ink);
}
.stack-card::backdrop { background: none; }
.stack-card__dim, .stack-card__stage, .stack-card__ui { position: absolute; inset: 0; }
.stack-card__dim {
  background: #1e1a146b; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.75s var(--ease-out, ease);
}
[data-theme='dark'] .stack-card__dim { background: #0606059e; }
.stack-card__stage { perspective: 1800px; pointer-events: none; }
.stack-card__card { position: absolute; pointer-events: auto; }
.stack-card__side { position: absolute; inset: 0; backface-visibility: hidden; transform: translateZ(3px); }
.stack-card__side:last-child { transform: rotateY(180deg) translateZ(3px); }
.stack-card__side:empty { border-radius: 14px; background: var(--stk-edge); }
.stack-card__card > .stack__base { transform: none; }
.stack-card__ui { pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s; }
.stack-card__ui > * { pointer-events: auto; }
.stack-card.is-in .stack-card__dim { opacity: 1; transition: opacity 0.48s var(--stk-ease); }
.stack-card.is-in .stack-card__ui { opacity: 1; transform: none; transition-duration: 0.42s; transition-delay: 0.68s; }
.stack-card__x, .stack-card__nav {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  --stk-sh: 0 12px 26px -14px var(--stk-drop); background: var(--stk-face); color: var(--stk-ink); box-shadow: 0 0 0 1px var(--stk-line), var(--stk-sh);
  cursor: pointer; transition: transform 0.4s var(--stk-ease), color 0.2s;
}
/* the chrome sits in the side gutters: close level with the card's top, the arrows at mid height */
.stack-card__x { top: var(--ct); }
.stack-card__nav { top: calc(var(--ct) + var(--ch) / 2 - 24px); left: calc(var(--cl) - 76px); }
.stack-card__x, .stack-card__nav[data-d='1'] { left: calc(var(--cl) + var(--cw) + 28px); }
/* an ink ring on a paper halo: 3:1 on the dim in both themes, and 5px clear of the picture */
:is(.stack-card__x, .stack-card__nav, .stack-play):focus-visible {
  outline: 0; box-shadow: 0 0 0 1px var(--stk-line), 0 0 0 3px var(--stk-face), 0 0 0 5px var(--stk-ink), var(--stk-sh, 0 0 #0000);
}
.stack-card__ui svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stack-card__x:hover, .stack-card__nav:hover { color: var(--stk-acc); }
.stack-card__x:active, .stack-card__nav:active { transform: scale(0.94); }
/* one 56px row: the module's number, its title, then play/pause and the frame's caption; the title
   takes its full width first, so a long caption gives way (ellipsis) before the title does */
.stack-card__cap {
  position: absolute; left: var(--cl); top: calc(var(--ct) + var(--ch) + 14px); width: var(--cw); height: 56px;
  display: grid; grid-template-columns: auto minmax(0, max-content) minmax(44px, 1fr); align-items: center; gap: 0 18px; padding: 0 20px;
  border-radius: 12px; background: var(--stk-face); box-shadow: 0 0 0 1px var(--stk-line), 0 20px 44px -26px var(--stk-drop);
}
.stack-card__no {
  align-self: stretch; display: flex; align-items: center; margin: 0; padding-right: 18px; border-right: 1px solid var(--stk-line);
  font: 500 0.95rem/1 var(--font-mono); color: var(--stk-acc); white-space: nowrap;
}
.stack-card__no span { margin-right: 0.6em; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stk-ink3); }
.stack-card__cap > div { min-width: 0; }
.stack-card__t { margin: 0; font: 500 1.1rem/1.2 var(--font-display); letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stack-card__cap .stack-live { justify-self: end; max-width: 100%; white-space: nowrap; }
.stack-card__cap .stack-live span { overflow: hidden; text-overflow: ellipsis; }
.stack-live { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 0.72rem/1.35 var(--font-mono); color: var(--stk-ink3); }
.stack-live[hidden], .stack-play[hidden] { display: none; }
.stack-live span::first-letter { text-transform: uppercase; }
.stack-play {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--stk-ink); box-shadow: inset 0 0 0 1px var(--stk-line); cursor: pointer;
}
.stack-play svg { width: 14px; fill: currentColor; stroke: none; }
.stack-win[data-tone='light'] { --win-bar: #fff; --win-ink: #404040; --win-ctl: #595959; --win-line: #d9d9d9; --win-cap: #f3f3f3; }
.stack-win[data-tone='dark'] { --win-bar: #1e1e1e; --win-ink: #c9c9c9; --win-ctl: #d0d0d0; --win-line: #2a2a2a; --win-cap: #141414; }
/* a camera per screen (Call D): stack.js moves it. The ring is a site overlay, 2px on screen at any
   zoom: an inset shadow, as a border under 1px rounds up to 1px before the zoom (3.5px at 3.5x) */
.stack-win__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.stack-cam { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; opacity: 0; transition: opacity 0.6s 0.6s; }
.stack-cam.is-on { z-index: 1; opacity: 1; transition-delay: 0s; }
.stack-cam:only-child, .stack-cam.is-cut { transition: none; } /* a clip's cut (Call H) */
.stack-cam img { display: block; width: 100%; height: 100%; }
.stack-mark {
  --r: inset 0 0 0 calc(2px / var(--s, 1)) var(--stk-or);
  position: absolute; pointer-events: none; opacity: 0; border-radius: calc(8px / var(--s, 1)); box-shadow: var(--r);
}
.stack-win[data-tone='light'] .stack-mark { box-shadow: var(--r), 0 0 0 calc(1px / var(--s, 1)) #1e1e1e8c; }
.stack-paper {
  container-type: inline-size; display: flex; flex-direction: column; height: 100%; min-height: 210px; padding: 6% 7%;
  border-radius: 14px; background: var(--stk-face); box-shadow: inset 0 0 0 1px var(--stk-hair); outline: 1px solid var(--stk-hair2); outline-offset: -15px;
}
.stack-paper__n { margin-bottom: auto; font: 500 clamp(2.4rem, 13cqw, 8rem)/1 var(--font-mono); color: var(--stk-ink3); }
.stack-paper__t { font: 500 clamp(1.2rem, 4cqw, 2.4rem)/1.1 var(--font-display); }
.stack-paper__l { max-width: 52ch; margin-top: 0.5em; color: var(--ink-2, #4a463f); font-size: clamp(0.9rem, 1.7cqw, 1.1rem); }

.mods li[data-mod] { cursor: pointer; }
.mods__btn { padding: 0; border: 0; border-radius: 4px; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.mods__btn::after {
  content: ''; display: inline-block; width: 0.62em; height: 0.42em; margin-left: 0.45em; vertical-align: 0.08em;
  border: 0.09em solid var(--stk-or); border-radius: 0.12em; box-shadow: 0 0.16em 0 -0.06em var(--stk-or);
  opacity: 0; transform: translateX(-0.3em); transition: opacity 0.35s, transform 0.5s var(--stk-ease);
}
.mods li.is-active .mods__btn::after, .mods__btn:focus-visible::after, .mods__btn[aria-expanded='true']::after { opacity: 1; transform: none; }
.stack-inline { grid-column: 2 / -1; margin-top: 18px; perspective: 1400px; cursor: auto; }
.stack-inline__in { transform-origin: 50% 0; }
.stack-inline__in:empty { aspect-ratio: 16 / 9.6; border-radius: 10px; background: var(--stk-edge); }
.stack-inline .stack-live { margin-top: 10px; }
@media (max-width: 899.98px) {
  .js .stack--3d { display: none; }
  .js .feat .mods { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .mods__btn::after { transform: none; }
  .stack__plate { --lx: 0px !important; --lz: 0px !important; }
  .stack-card__card { opacity: 0; transition: opacity 0.2s; }
  .stack-card.is-in .stack-card__card { opacity: 1; }
  .stack-card.stack-card :is(.stack-card__ui, .stack-card__dim) { transform: none; transition: opacity 0.2s; }
}