:root {
  --wood: #8a5524;
  --cream: #fbf5e6;
  --ink: #2a1d12;
  --muted: #6d5a45;
  --red: #d8261c;
  --blue: #1f5fc4;
  --yellow: #f6b61c;
  --round: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--wood); color: var(--ink); overflow: hidden; overscroll-behavior: none; }
body { font: 17px/1.5 var(--round); -webkit-font-smoothing: antialiased; }
#stage { position: fixed; inset: 0; }
#toy { display: block; width: 100%; height: 100%; touch-action: none; outline: none; cursor: default; -webkit-tap-highlight-color: transparent; }
#toy.point { cursor: pointer; }
#toy.grab { cursor: grab; }
#toy.grabbing { cursor: grabbing; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 58%, rgba(30,14,2,.34) 100%); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
#index button { all: unset; }

/* ---------------- the loader: the dial filling in, one picture at a time */
#loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #ffd04a, #f2a412 70%); transition: opacity .45s ease, visibility .45s; }
#loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.ld-dial { width: min(46vmin, 260px); height: auto; filter: drop-shadow(0 10px 18px rgba(120, 60, 0, .35)); }
.ld-rim { fill: var(--blue); }
.ld-face { fill: var(--cream); }
.ld-hub { fill: #e9e1cf; stroke: var(--red); stroke-width: 7; }
.ld-dot { fill: #ddd3bd; transition: fill .2s; }
.ld-dot.on { fill: var(--red); }
.ld-arrow { fill: var(--red); }
#ld-arrow { transform-origin: 100px 100px; animation: ld-turn 2.4s steps(26) infinite; }
@keyframes ld-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #ld-arrow { animation: none; } }

/* ---------------- the card: slides up over the toy with the real work */
.card { position: fixed; inset: 0; z-index: 20; background: rgba(38, 20, 6, 0); transition: background .45s ease; }
.card.open { background: rgba(38, 20, 6, .55); }
.card[hidden] { display: none; }
.card-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 28px 16px 40px; transform: translateY(104%); transition: transform .55s cubic-bezier(.2, .9, .25, 1.04); }
.card.open .card-scroll { transform: translateY(0); }
.sheet { position: relative; max-width: 1000px; margin: 0 auto; background: var(--cream); border-radius: 22px; box-shadow: 0 2px 0 #e6dcc5 inset, 0 24px 60px rgba(30, 12, 0, .45); }
.sheet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: radial-gradient(rgba(120, 90, 50, .06) 1px, transparent 1.2px); background-size: 5px 5px; }
.sheet-head { position: relative; display: flex; align-items: center; gap: 18px; border-radius: 22px 22px 0 0; background: var(--red); color: #fff; padding: 20px 76px 20px 22px; box-shadow: 0 -6px 0 rgba(0,0,0,.12) inset; }
.sheet-head h2 { margin: 0; font: 700 clamp(28px, 4.4vw, 46px)/1.04 var(--round); letter-spacing: .01em; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.sheet-pic { flex: 0 0 auto; width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.18); background: #eee; }
.sheet-head > div { min-width: 0; }
.sheet-client { margin: 6px 0 0; font: 600 14px/1.2 var(--round); letter-spacing: .14em; text-transform: uppercase; opacity: .92; }
.sheet-body { position: relative; padding: 26px 30px 36px; --ab-fg: var(--ink); --ab-muted: var(--muted); --ab-accent: var(--blue); --ab-gap: 18px; --ab-chrome: 150px; }
.sheet-body .ab-lede { font-size: 1.12em; line-height: 1.5; max-width: 46em; }
.sheet-body .ab-heading { font: 600 1.15em/1.2 var(--round); color: var(--red); margin-top: 8px; }
.sheet-body .ab-text { max-width: 46em; color: #3b2c1e; }
.sheet-body .ab-frame { border-radius: 10px; overflow: hidden; }
.sheet-body .ab-image img { border-radius: 6px; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 16px rgba(60, 30, 0, .14); }
.sheet-body .ab-audio { background: #f1e7d0; border-radius: 14px; padding: 10px 14px 12px; }
.sheet-body .ab-audio figcaption { margin: 0 0 6px; font-weight: 600; color: var(--ink); font-size: .95em; }
.sheet-body .ab-credits { border-top: 2px dashed #e0d3b6; padding-top: 14px; }
.card-close { position: absolute; z-index: 3; top: 18px; right: 18px; width: 54px; height: 54px; border: 0; border-radius: 50%; padding: 13px; color: #fff; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #4d86e6, var(--blue) 60%, #16449a); box-shadow: 0 3px 0 #123a85, 0 8px 18px rgba(0, 0, 0, .35); opacity: 0; transform: scale(.6); transition: opacity .3s .2s, transform .3s .2s; }
.card.open .card-close { opacity: 1; transform: scale(1); }
.card-close:active { transform: translateY(2px); box-shadow: 0 1px 0 #123a85, 0 4px 10px rgba(0,0,0,.3); }
.card-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.card-close svg { width: 100%; height: 100%; display: block; }
.sheet-foot { position: relative; display: flex; justify-content: center; padding: 0 0 30px; }
.card-close-end { position: relative; top: auto; right: auto; }

/* about */
.about p { margin: 0 0 12px; max-width: 40em; }
.about .role { font-weight: 600; font-size: 1.15em; }
.about .where { color: var(--muted); }
.about a { color: var(--blue); font-weight: 600; }

@media (max-width: 600px) {
  .card-scroll { padding: 0 0 24px; }
  .sheet { border-radius: 0 0 18px 18px; min-height: 100%; }
  .sheet-head { border-radius: 0; gap: 12px; }
  .sheet-pic { width: 54px; height: 54px; border-width: 4px; }
  .sheet-head { padding: 18px 76px 16px 18px; padding-top: max(18px, env(safe-area-inset-top)); }
  .sheet-body { padding: 18px 16px 30px; --ab-chrome: 120px; }
  .card-close { width: 46px; height: 46px; padding: 11px; top: max(14px, env(safe-area-inset-top)); right: 12px; }
  .card-close-end { top: auto; right: auto; }
}
@media (prefers-reduced-motion: reduce) { .card-scroll { transition-duration: .01s; } }