/* The Zenith demo in "How it plays". The phone screen copies the app's own
   styles.css (sky, wells, rings, tray, banner, toast); the column beside it is
   the site's frame. Built by /assets/zenith-demo.js. */

.zd {
  grid-column: 1 / -1;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  border-radius: 14px;
  background: #ECEAF8;
  background: oklch(0.95 0.02 290);
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-stretch: 100%;
  --zd-scale: 1;
  position: relative;
}
.zd button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; }

/* ---------------------------------------------------------------- phone */

/* The box takes the scaled size, so the layout around it shrinks with it. */
.zd-phone-box {
  flex: none;
  width: calc(316px * var(--zd-scale));
  height: calc(636px * var(--zd-scale));
}
.zd-phone {
  position: relative;
  width: 316px;
  height: 636px;
  box-sizing: border-box;
  overflow: hidden;
  border: 8px solid var(--ink);
  border-radius: 46px;
  transform: scale(var(--zd-scale));
  transform-origin: 0 0;
  background:
    radial-gradient(58% 44% at 79% 16%, rgba(92, 70, 190, .2) 0%, transparent 70%),
    radial-gradient(52% 40% at 16% 80%, rgba(20, 110, 160, .16) 0%, transparent 70%),
    #04060d;
  color: #dfe7fb;
  user-select: none;
  -webkit-user-select: none;
}
.zd-screen { position: absolute; inset: 0; width: 300px; height: 620px; }
.zd-screen button { touch-action: manipulation; }

.zd-title {
  position: absolute; top: 22px; left: 0; right: 0; text-align: center;
  font-size: 22px; font-weight: 200; letter-spacing: .42em; text-indent: .42em; color: #f2f6ff;
}
.zd-date {
  position: absolute; top: 56px; left: 0; right: 0; text-align: center;
  font-size: 11px; letter-spacing: .06em; color: #6d7ca6;
}

.zd-readout { position: absolute; top: 80px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; }
.zd-lcd {
  height: 40px; padding: 0 18px; display: flex; align-items: center; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; background: rgba(255, 255, 255, .045);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 19px; letter-spacing: .12em; color: #f2f6ff;
}
.zd-dial {
  width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .045);
  display: grid; place-items: center;
}
.zd-dial svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------- board */

.zd-board {
  position: absolute; top: 132px; left: 17px;
  display: grid; grid-template-columns: repeat(7, 38px); grid-template-rows: repeat(8, 38px);
}
.zd-board.shake { animation: zd-shake .3s; }
@keyframes zd-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.zd .zd-well { position: relative; display: grid; place-items: center; width: 38px; height: 38px; cursor: default; }
.zd-well:focus-visible { outline: 2px solid #f2f6ff; outline-offset: -4px; border-radius: 50%; }
.zd-socket {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); transition: opacity .15s;
}
/* A ring is 0.56 of its cell, as in the app; a given figure also has a filled core. */
.zd-ball {
  position: absolute; left: 8.5px; top: 8.5px; width: 21px; height: 21px; box-sizing: border-box;
  display: grid; place-items: center;
  border-radius: 50%; border: 2px solid var(--c); box-shadow: 0 0 12px -3px var(--c);
}
.zd-ball.pulse { animation: zd-pulse 1.1s ease-in-out infinite; }
@keyframes zd-pulse { 50% { box-shadow: 0 0 14px 1px var(--c); } }
.zd-core { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.zd-mark {
  position: absolute; inset: 2px; border-radius: 50%;
  border: 1.5px dashed rgba(242, 246, 255, .7); opacity: 0; transition: opacity .4s;
}

.zd-blank-label {
  position: absolute; transform: translateX(-50%);
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(12, 16, 30, .94); border: 1px solid rgba(255, 255, 255, .12);
  font-size: 11px; color: #f2f6ff;
}

.zd-banner {
  position: absolute; left: 150px; top: 284px; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 12px; padding: 16px 20px;
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(4, 6, 13, .92); backdrop-filter: blur(8px);
  text-align: center; white-space: nowrap;
}
.zd-banner-text { font-size: 14px; font-weight: 300; letter-spacing: .08em; color: #f2f6ff; }
.zd-banner-actions { display: flex; gap: 8px; }
.zd-banner .zd-pill { flex: none; min-height: 36px; padding: 0 16px; }

/* ----------------------------------------------------- ladder, controls */

.zd-ladder {
  position: absolute; top: 446px; left: 17px; width: 266px;
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px;
}
.zd-level {
  height: 30px; display: grid; place-items: center; box-sizing: border-box;
  border-radius: 7px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .045);
  font-size: 13px; color: #dfe7fb;
}
.zd-level.current { outline: 2px solid #f2f6ff; outline-offset: -2px; }
.zd-level.done { color: #35d07a; border-color: rgba(53, 208, 122, .4); }
.zd-level.closed { color: #6d7ca6; opacity: .4; }

/* Actions and the carry row share one slot, so holding a figure never moves anything. */
.zd-controls { position: absolute; top: 484px; left: 17px; width: 266px; height: 36px; display: grid; }
.zd-row { grid-area: 1 / 1; display: flex; gap: 6px; height: 36px; }
.zd-row.is-off { visibility: hidden; }

.zd .zd-pill {
  flex: 1; display: grid; place-items: center; box-sizing: border-box;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .045);
  font-size: 13px; color: #dfe7fb; cursor: pointer; transition: background .15s;
}
.zd .zd-pill:hover, .zd .zd-pill.flash { background: rgba(255, 255, 255, .2); }
.zd .zd-pill.dim { opacity: .3; }
.zd .zd-pill-primary { background: #f2f6ff; color: #06080f; border-color: transparent; font-weight: 600; }
.zd .zd-pill-primary:hover { background: #fff; }
.zd-screen button:focus-visible { outline: 2px solid #f2f6ff; outline-offset: 2px; }

/* ----------------------------------------------------------------- tray */

.zd-tray {
  position: absolute; top: 530px; left: 17px; width: 266px; height: 72px; box-sizing: border-box;
  padding: 12px; display: flex; gap: 10px; align-items: center;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 16px; background: rgba(255, 255, 255, .045);
}
.zd .zd-slot { flex: 0 0 48px; height: 48px; display: grid; place-items: center; cursor: pointer; }
.zd .zd-slot:hover { filter: brightness(1.25); }
.zd .zd-slot.held { filter: brightness(1.4); }
.zd-figure { position: relative; display: block; }
.zd-tray-ball {
  position: absolute; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--c); box-shadow: 0 0 8px -2px var(--c);
}
.zd-slot.held .zd-tray-ball { border-width: 2px; }
.zd-tray-empty { flex: 1; text-align: center; font-size: 11px; color: #6d7ca6; }

/* ------------------------------------------------------- toast, finger */

.zd-toast {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 268px; box-sizing: border-box; padding: 10px 16px;
  border-radius: 16px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(12, 16, 30, .96);
  font-size: 12px; line-height: 1.45; text-align: center; white-space: pre-line; color: #dfe7fb;
}
.zd-finger {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; box-sizing: border-box;
  border-radius: 50%; background: rgba(242, 246, 255, .22); border: 1.5px solid rgba(242, 246, 255, .75);
  pointer-events: none;
  transition: left .5s cubic-bezier(.4, 0, .2, 1), top .5s cubic-bezier(.4, 0, .2, 1), transform .15s, opacity .3s;
}

/* ------------------------------------------------------- chapter column */

.zd-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; color: var(--ink); }
.zd .zd-chapter {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px;
  padding: 16px 16px 18px; border-top: 1.5px solid var(--ink); text-align: left; cursor: pointer;
}
.zd .zd-chapter.active { background: var(--paper); border-radius: 0 0 10px 10px; }
.zd-chapter-n { font-size: 13px; letter-spacing: .04em; padding-top: 4px; }
.zd-chapter-title { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 700; font-size: 20px; line-height: 1.25; }
.zd-chapter-text { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.zd-chapter-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ink); }

.zd-buttons {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  padding-top: 20px; border-top: 1.5px solid var(--ink);
}
.zd .zd-btn {
  display: inline-flex; align-items: center; height: 52px; padding: 0 26px; box-sizing: border-box;
  border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 700; font-size: 16px; cursor: pointer;
}
.zd .zd-btn-fill { background: var(--ink); color: var(--paper); }
.zd-note { margin: 14px 0 0; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.5; color: var(--muted); }

.zd-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

[hidden].zd-blank-label, [hidden].zd-banner, [hidden].zd-toast, [hidden].zd-chapter-text, [hidden].zd-tray-empty { display: none; }