/* The public voting page: a swipe deck, the standings, past spotlights. */

.page { position: relative; isolation: isolate; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 40px; }
/* a see-through near-black band behind the content column, so text and numbers read well over the artwork;
   its sides fade out instead of ending in a hard line */
.page::before {
  content: ""; position: absolute; inset: 0 -28px; z-index: -1; pointer-events: none;
  background: rgba(6, 7, 8, .66);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
@media (max-width: 760px) { .page::before { inset: 0; background: rgba(6, 7, 8, .5); -webkit-mask-image: none; mask-image: none; } }

/* the page's artwork: a voxel arena at night with the vibe/vibe logo projected into the clouds. Fixed behind
   everything, darker in the middle and towards the bottom so the cards and text stay readable. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 58%, rgba(12, 14, 16, .5), transparent 75%),
    linear-gradient(180deg, rgba(12, 14, 16, .25) 0%, rgba(12, 14, 16, .5) 50%, rgba(12, 14, 16, .88) 100%),
    url(../assets/bg/premiere-vv.webp) 50% 0 / cover no-repeat, var(--bg);
}
/* the text that sits over the brighter parts of the art (the beams, the city lights) gets a soft dark halo */
.hero .title, .hero .lede, .you-strip { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .75); }
@media (max-width: 760px) {
  body::before {
    background:
      linear-gradient(180deg, rgba(12, 14, 16, .2) 0%, rgba(12, 14, 16, .6) 45%, rgba(12, 14, 16, .9) 100%),
      url(../assets/bg/premiere-vv-900.webp) 50% 0 / cover no-repeat, var(--bg);
  }
}

.test-tag { flex: none; color: var(--yellow); }
@media (max-width: 560px) { .test-tag { display: none; } }

/* ---------- hero ---------- */
.hero { padding: 16px 0 4px; animation: rise .6s var(--ease-out) both; }
.title { margin: 0; font: 600 clamp(28px, 4vw, 40px)/1.05 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.title em { font-style: normal; color: var(--yellow); position: relative; }
.lede { max-width: 640px; margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.lede b { color: var(--ink); font-weight: 600; }

/* ---------- layout ---------- */

/* ---------- deck ---------- */
/* no panel around the vote: the card and the details sit straight on the page (and its artwork) */
.deck-col { container: deck / inline-size; padding: 12px 0 14px; min-height: 640px; }
.deck-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(392px, 100%); margin-bottom: 12px; }
.deck-dots { display: grid; grid-template-columns: repeat(var(--cols, 14), 14px); gap: 4px 3px; } /* even rows: app.js sets --cols */
.deck-dots:empty { display: none; } /* browsing: no marks, so the count keeps its one line */
.deck-dots i { width: 14px; height: 4px; border-radius: 2px; background: var(--track); transition: background .3s; }
.deck-dots i.yes { background: var(--yellow); }
.deck-dots i.no { background: var(--stroke); }
.deck-dots i.now { background: var(--body); }

/* the card gives way on shorter screens, so Pass and Vibe show without scrolling: --around is the rest of the page above and below it */
.deck { --around: 330px; position: relative; width: min(392px, 100%); height: clamp(340px, calc(100svh - var(--around)), 566px); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* the swipe glow (deck.js sets the numbers every frame): a motion blur trailing a moving card. --bx/--by is the
   trail, in px back along the way the card is really moving (in the card's own turned frame), as long as the
   ground it covers in a short moment, so it grows with speed and slides back into the card as it slows or stops;
   --blur 0-1 its strength. Copies of the card's outline along it, fading and narrowing: thin on top and bottom,
   none ahead. --glow 0-1: a thin glow hugging a held card, stronger the further it's dragged. Yellow on the vibe
   side, grey on the pass side. */
.sc[data-glow="yes"] { --tint: 223, 249, 2; }
.sc[data-glow="no"] { --tint: 242, 244, 243; }
.sc[data-glow="yes"], .sc[data-glow="no"] {
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45),
    0 0 calc(12px * var(--glow)) 0 rgba(var(--tint), calc(.35 * var(--glow))),
    calc(var(--bx) * .15px) calc(var(--by) * .15px) 12px -3px rgba(var(--tint), calc(.45 * var(--blur))),
    calc(var(--bx) * .4px) calc(var(--by) * .4px) 18px -8px rgba(var(--tint), calc(.38 * var(--blur))),
    calc(var(--bx) * .7px) calc(var(--by) * .7px) 26px -14px rgba(var(--tint), calc(.25 * var(--blur))),
    calc(var(--bx) * 1px) calc(var(--by) * 1px) 34px -20px rgba(var(--tint), calc(.14 * var(--blur)));
}
.sc {
  --glow: 0; --blur: 0; --bx: 0; --by: 0;
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--button-border); border-radius: 16px; background: var(--card);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  transform-origin: 50% 90%; will-change: transform;
  transition: transform .45s var(--ease-out), opacity .3s ease, filter .3s ease;
  cursor: grab;
}
.sc.dragging { transition: none; cursor: grabbing; }
.sc[data-pos="1"] { transform: translateY(12px) scale(.955); filter: brightness(.7); pointer-events: none; }
.sc[data-pos="2"] { transform: translateY(24px) scale(.91); filter: brightness(.5); opacity: .7; pointer-events: none; }
.sc.gone { transition: transform .38s cubic-bezier(.4, .1, .8, .4), opacity .38s ease; opacity: 0; pointer-events: none; }
.sc.enter { animation: card-in .5s var(--ease-out); }
@keyframes card-in { from { opacity: 0; transform: translateY(30px) scale(.92); } }

.sc-media { position: relative; flex: 1 1 auto; min-height: 180px; background: var(--well); overflow: hidden; }
.sc-media img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.sc-media .noimg { display: grid; place-items: center; width: 100%; height: 100%; font: 700 64px/1 var(--font-display); color: var(--stroke); }
.sc-media::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(12, 14, 16, .88)); pointer-events: none; }
.sc-tags { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; gap: 5px; flex-wrap: wrap; }
.sc-tags .tag { background: rgba(12, 14, 16, .78); backdrop-filter: blur(6px); }
.sc-title { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sc-sym { font: 600 28px/1 var(--font-display); color: var(--ink); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.sc-name { margin-top: 5px; font: 500 13.5px/1.2 var(--font-ui); color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-pair { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 600 15px/1 var(--font-display); color: var(--ink); }
.sc-pair img { width: 20px; height: 20px; border-radius: 50%; }

.sc-stamp {
  position: absolute; top: 26px; z-index: 3; padding: 6px 12px; border-radius: 8px; border: 3px solid;
  font: 700 26px/1 var(--font-display); letter-spacing: .04em; opacity: 0; pointer-events: none;
}
.sc-stamp.vibe { left: 20px; color: var(--yellow); border-color: var(--yellow); transform: rotate(-14deg); background: rgba(12, 14, 16, .55); }
.sc-stamp.pass { right: 20px; color: var(--ink); border-color: var(--ink); transform: rotate(14deg); background: rgba(12, 14, 16, .55); }

.sc-body { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; min-height: 0; }
.sc-note { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--yellow-tint); border: 1px solid rgba(223, 249, 2, .18); font-size: 12.5px; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-note b { font: 600 9.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); margin-right: 6px; }
.sc-desc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sc-stat { display: flex; flex-direction: column; gap: 5px; }
.sc-stat span { font: 600 10px/1 var(--font-ui); letter-spacing: .02em; color: #838c93; text-transform: uppercase; }
.sc-stat b { font: 600 14px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.sc-progress { height: 5px; border-radius: 3px; background: var(--track); overflow: hidden; }
.sc-progress i { display: block; height: 100%; border-radius: 3px; background: var(--progress); }
.sc-progress.done i { background: var(--yellow); }
.sc-prow { display: flex; justify-content: space-between; font: 600 11px/1 var(--font-mono); color: var(--faint); margin-bottom: 6px; }
.sc-prow b { color: var(--ink); font-weight: 600; }

/* not yet (deck.js nudge): the card stays put, a yellow flash runs around it and a note on it says why */
.sc.nudge { animation: sc-nudge 1.2s ease; }
@keyframes sc-nudge {
  15%, 55% { border-color: var(--yellow); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 3px rgba(223, 249, 2, .3), 0 0 40px 6px rgba(223, 249, 2, .38); }
  35% { border-color: var(--yellow-line); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(223, 249, 2, .15), 0 0 20px 0 rgba(223, 249, 2, .14); }
}
.sc.nudge .sc-more { animation: cue-btn 1.2s ease; }
/* centred by layout, not translate(-50%): a half-pixel offset or a scaled entrance draws the text soft */
.sc-wait {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: fit-content; height: fit-content; max-width: calc(100% - 40px); margin: auto; padding: 14px 18px 13px;
  border-radius: 14px; border: 1px solid var(--yellow-line); background: rgba(12, 14, 16, .94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); text-align: center; pointer-events: none; animation: sc-wait 2.8s ease forwards;
}
.sc-wait b { font: 600 15px/1.2 var(--font-display); color: var(--ink); }
.sc-wait small { font: 600 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--body); }
.sc-wait-segs { display: flex; gap: 5px; }
.sc-wait-segs i { width: 28px; height: 4px; border-radius: 2px; background: var(--track); }
.sc-wait-segs i.on { background: var(--yellow); }
@keyframes sc-wait { 0% { opacity: 0; } 10%, 82% { opacity: 1; } 100% { opacity: 0; } }


/* gate and end panels, drawn in the deck's place */
.deck-panel {
  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 12px; overflow-y: auto;
  padding: 28px; text-align: center; border-radius: 16px; border: 1px solid var(--hairline);
  background: rgba(14, 16, 19, .86); backdrop-filter: blur(10px); animation: fade .3s ease;
}
.deck-panel > * { flex: none; }
.deck-panel h2 { margin: 0; font: 600 26px/1.1 var(--font-display); color: var(--ink); }
.deck-panel p { margin: 0; max-width: 300px; font-size: 13.5px; color: var(--body); }
.deck-panel .btn { min-width: 200px; }
.deck-panel .big { font: 600 54px/1 var(--font-display); color: var(--yellow); }
.deck-panel .picks { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 320px; }
.deck-panel .picks span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 3px; border-radius: 999px; background: var(--card-hi); border: 1px solid var(--hairline); font: 600 11.5px/1 var(--font-mono); color: var(--ink); }
.deck-panel .picks img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.mark-big { width: 56px; height: 56px; }

/* action buttons */
.deck-actions { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.act { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--button-border); background: var(--card); cursor: pointer; transition: transform .15s var(--ease), border-color .15s, background .15s, box-shadow .2s; }
.act svg { width: 26px; height: 26px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.act.pass svg { stroke: var(--body); }
.act.vibe { width: 70px; height: 70px; border-color: var(--yellow-line); background: var(--yellow-tint); }
.act.vibe svg { stroke: var(--yellow); width: 30px; height: 30px; }
.act.info { width: 46px; height: 46px; }
.act.info svg { stroke: var(--faint); width: 20px; height: 20px; stroke-width: 2; }
.act:hover { transform: translateY(-2px); border-color: var(--stroke); }
.act.vibe:hover, .act.vibe.lit { background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 28px rgba(223, 249, 2, .35); }
.act.vibe:hover svg, .act.vibe.lit svg { stroke: var(--on-yellow); }
.act.pass:hover, .act.pass.lit { background: var(--card-hi); border-color: var(--ink); }
.act.pass.lit svg { stroke: var(--ink); }
.act:active { transform: scale(.94); }
.act:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }
.deck-keys { margin: 14px 0 0; font: 500 11px/1 var(--font-mono); color: var(--faint); letter-spacing: .03em; }
.deck-keys kbd { display: inline-grid; place-items: center; min-width: 20px; height: 19px; padding: 0 4px; border-radius: 4px; border: 1px solid var(--button-border); background: var(--card); font: inherit; color: var(--body); }
@media (hover: none) { .deck-keys { display: none; } }



/* ---------- sections ---------- */
.section { margin-top: 44px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.section-head h2 { margin: 0; font: 600 24px/1.2 var(--font-display); color: var(--ink); }
.section-head p { margin: 0; font-size: 13px; color: var(--faint); }

.past { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.ps { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--button-border); border-radius: 12px; background: var(--card); padding: 12px; gap: 10px; }
.ps-img { position: relative; aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: var(--well); }
.ps-img img { width: 100%; height: 100%; object-fit: cover; }
.ps-img .tag { position: absolute; left: 8px; top: 8px; background: rgba(12, 14, 16, .8); }
.ps-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ps-row b { font: 650 15px/1.2 var(--font-ui); color: var(--ink); }
.ps-row span { font: 600 12px/1 var(--font-mono); color: var(--yellow); white-space: nowrap; }
.ps small { font-size: 12px; color: var(--faint); margin-top: -6px; }
.ps-acts { display: flex; gap: 6px; }
.ps-acts .btn { flex: 1; height: 32px; padding: 0 8px; font-size: 12px; }

.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.how-step { padding: 18px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--card); }
.how-step b { display: block; margin-top: 14px; font: 600 15px/1.25 var(--font-ui); color: var(--ink); }
.how-step p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--body); }
.how-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--yellow-tint); border: 1px solid var(--yellow-line); font: 600 15px/1 var(--font-display); color: var(--yellow); }
.how-n svg { width: 17px; height: 17px; fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.how-step.fair { border-color: var(--yellow-line); background: radial-gradient(120% 140% at 100% 0%, rgba(223, 249, 2, .07), transparent 60%), var(--card); }

.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--faint); }
.foot a { color: var(--body); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* wallet picker and menu */
.wallets { display: grid; gap: 8px; }
.wallets button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--button-border); background: var(--card-hi); color: var(--ink); font: 600 14px/1 var(--font-ui); cursor: pointer; text-align: left; }
.wallets button:hover { border-color: var(--yellow); }
.wallets img { width: 28px; height: 28px; border-radius: 7px; }
.menu { position: fixed; z-index: 70; min-width: 220px; padding: 6px; border-radius: 12px; background: #16191c; border: 1px solid var(--hairline); box-shadow: var(--shadow-pop); animation: rise .2s var(--ease-out); }
.menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; font: 500 12px/1.4 var(--font-mono); color: var(--body); }
.menu button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; cursor: pointer; font-size: 13px; }
.menu button:hover { background: var(--card-hi); }

@media (max-width: 560px) {
  .hero { padding-top: 12px; }
  .deck-col { padding: 10px 0 14px; min-height: 0; }
  .deck { --around: 285px; }
  .sc-sym { font-size: 24px; }
  .deck-actions { gap: 14px; margin-top: 20px; }
  #round-chip { display: none; }
}
/* phones and short screens: the lede's one line that matters */
@media (max-width: 560px), (max-height: 700px) { .lede-more { display: none; } }
@media (max-height: 700px) {
  .deck-panel { padding: 16px 24px; gap: 10px; }
  .deck-panel .mark-big { width: 40px; height: 40px; }
}
@media (max-height: 700px) and (min-width: 561px) {
  .deck { --around: 294px; }
  .deck-actions { margin-top: 16px; }
}

/* card backs: cards the server hasn't handed out yet */
.sc.back { cursor: default; }
.sc-backface { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(70% 60% at 50% 40%, rgba(223, 249, 2, .06), transparent 70%), repeating-linear-gradient(135deg, var(--card) 0 14px, var(--card-hi) 14px 15px); }
.sc-backface img { width: 72px; height: 72px; opacity: .22; }
.sc.back[data-pos="0"] .sc-backface img { animation: breathe 1.1s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .5; transform: scale(1.06); } }

/* ---------- project details: a panel beside the card when the deck column is wide, a sheet otherwise ---------- */
.deck-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

/* the line above the deck when something stands between you and voting; just a hairline under it, no box */
.you-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--hairline); }
.you-strip .tag { flex: none; height: 19px; font-size: 9.5px; }
.ys-act { display: flex; gap: 8px; }
.ys-note { flex: 1 1 260px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--body); }

/* narrow screens: the card is the way into its details */
.deck-tip { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: 12.5px; color: var(--faint); }
.deck-tip svg { width: 17px; height: 17px; fill: none; stroke: var(--yellow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the details: who, then the vibe/vibe page and X right away */
/* See on vibe/vibe and X always share the first row, equal widths; other links as icons below */
.pd-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; }
.pd-acts .btn { min-width: 0; height: 38px; padding: 0 10px; gap: 7px; font-size: 13px; }
.pd-acts .btn .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-acts .btn svg { flex: none; width: 13px; height: 13px; }
.pd-acts .btn svg:last-child { width: 11px; height: 11px; opacity: .6; }
.pd-vv { grid-column: 1 / -1; border-color: var(--yellow-line); background: var(--yellow-tint); } /* narrow: vibe/vibe on its own row, X and website under it */
.pd-vv:hover { background: rgba(223, 249, 2, .18); border-color: var(--yellow); }
.pd-vv img { flex: none; width: 18px; height: 18px; }
.pd-panel .pd-vv img { position: relative; top: -1px; } /* the mark sits low in its own square: level with the text (measured; the phone sheet doesn't need it) */
.pd-others { grid-column: 1 / -1; display: flex; gap: 6px; }
.pd-acts .off { color: var(--faint); border-style: dashed; background: transparent; cursor: not-allowed; opacity: .6; }
.pd-acts .off:hover { border-color: var(--button-border); background: transparent; }
.pd-acts .off:active { transform: none; }
.pd-ico { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-control); border: 1px solid var(--button-border); background: var(--card); color: var(--ink); transition: border-color .15s, background .15s; }
.pd-ico:hover { border-color: var(--stroke); background: var(--card-hi); }
.pd-ico svg { width: 15px; height: 15px; }
.pd-team { margin: 14px 0 0; padding: 10px 12px; border-radius: 9px; background: var(--yellow-tint); border: 1px solid rgba(223, 249, 2, .18); font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.pd-team b { display: block; margin-bottom: 3px; font: 600 9.5px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.deck-stage { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.pd-panel { display: none; }
.sc-more {
  position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 7px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(12, 14, 16, .72); backdrop-filter: blur(6px);
  font: 600 11px/1 var(--font-ui); color: var(--ink); cursor: pointer;
}
.sc-more svg { width: 14px; height: 14px; }
.sc-more:hover { border-color: var(--yellow-line); }
.up { color: var(--green) !important; }
.down { color: #ef727b !important; } /* the sell colour on vibe/vibe */

@container deck (min-width: 760px) {
  .deck-main { grid-template-columns: 392px minmax(0, 660px); justify-content: center; align-items: start; gap: 24px; }
  .deck-tip { display: none !important; }
  /* everything at once, no inner scroll: the layout below keeps it about the card's height */
  .pd-panel { display: block; container: pd / inline-size; padding: 4px 0 0; border-radius: 14px; } /* no box: the details sit on the page */
  .act.info, .k-info, .sc-more { display: none !important; }
}
/* the desktop panel: the links in one row, the link tiles in two columns, the facts in one row */
@container pd (min-width: 480px) {
  .pd-panel .pd-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd-panel .pd-acts { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .pd-panel .pd-vv { grid-column: auto; }
  .pd-panel .pd-others { grid-column: auto; }
  .pd-panel .pd-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pd-panel .pd-acts { margin-top: 12px; }
.pd-panel .pd-src { margin-top: 12px !important; }

/* the info slides (details.js): a progress bar of three segments that fill yellow as each slide is seen
   (the one showing glows), the slides side by side moving with --at, then back / status / Next. Voters see
   all three before they vote (.gate: the status counts down, Next is yellow until done). */
.pd-slides { margin-top: 16px; }
.pd-prog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pd-seg { display: grid; gap: 8px; padding: 2px 0; border: 0; background: none; text-align: left; color: var(--faint); cursor: pointer; }
.pd-seg i { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; transition: box-shadow .3s ease; }
.pd-seg i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.pd-seg.seen i::after { transform: none; }
.pd-seg.now i { box-shadow: 0 0 12px rgba(223, 249, 2, .45); }
.pd-seg span { display: flex; align-items: baseline; gap: 7px; font: 600 10px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; transition: color .2s ease; }
.pd-seg em { font-style: normal; color: var(--stroke); transition: color .2s ease; }
.pd-seg.seen span { color: var(--body); }
.pd-seg.now span, .pd-seg:hover span { color: var(--ink); }
.pd-seg.now em { color: var(--yellow); }
.pd-seg:focus-visible { outline: 2px solid var(--yellow-line); outline-offset: 3px; border-radius: 4px; }

.pd-view { position: relative; margin-top: 12px; overflow: hidden; border-radius: 12px; touch-action: pan-y; }
/* the side arrows sit on the slide, on a 70% dark backing */
.pd-arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: rgba(12, 14, 16, .7); color: var(--ink); cursor: pointer; transition: border-color .15s, color .15s, opacity .25s, visibility .25s, transform .15s var(--ease); }
.pd-arrow.prev { left: 8px; }
.pd-arrow.next { right: 8px; }
.pd-arrow svg { width: 16px; height: 16px; }
.pd-arrow:hover:not(:disabled) { border-color: var(--yellow-line); color: var(--yellow); }
.pd-arrow:active:not(:disabled) { transform: scale(.93); }
.pd-arrow:disabled { opacity: 0; visibility: hidden; } /* the end it can't go to: a faint ghost over the text looked broken */
.pd-arrow:focus-visible { outline: 2px solid var(--yellow-line); outline-offset: 2px; }
.pd-slides.gate:not(.done) .pd-arrow.next:not(:disabled) { border-color: var(--yellow-line); color: var(--yellow); }
.pd-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; transform: translateX(calc(var(--at, 0) * -100%)); transition: transform .45s var(--ease-out); }
.pd-slide { min-width: 0; padding: 14px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--card); transition: opacity .45s ease; }
.pd-slide[inert] { opacity: .35; }
.pd-slide h4 { margin: 0 0 9px; font: 600 10px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pd-slide .pd-team { margin: 0 0 14px; }
.pd-slide .pd-stats { margin: 0; border: 0; border-radius: 8px; }
.pd-slide .pd-curve { margin-top: 14px; }
/* Pulse: the price path (details.js pricePath) and 24h buys against sells */
.pd-path { margin-top: 14px; }
.pd-path-chart, .pd-path-x { margin-inline: 30px; } /* room for the side arrows, which land about here */
.pd-path-chart { position: relative; height: 64px; }
.pd-path-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pd-path-chart i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; border: 2px solid var(--yellow); background: var(--card); }
.pd-path-chart i.now { width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 0; background: var(--yellow); box-shadow: 0 0 0 4px rgba(223, 249, 2, .16), 0 0 14px rgba(223, 249, 2, .55); }
.pd-path-x { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: 9px; text-align: center; }
.pd-path-x span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pd-path-x b { font: 600 9.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pd-path-x span:last-child b { color: var(--yellow); }
.pd-path-x em { font: 600 11.5px/1.2 var(--font-mono); font-style: normal; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-flow { margin-top: 14px; }
.pd-split { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--track); }
.pd-split i { display: block; min-width: 3px; }
.pd-split .buy { background: var(--green); }
.pd-split .sell { background: #ef727b; }
.pd-flow-k { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font: 600 11px/1.2 var(--font-mono); color: var(--faint); }
/* Links: vibe/vibe first and biggest, then a tile per link that says what to do, its icon large and faint behind it.
   The left side leaves room for the back arrow (it's the last slide, so no next arrow), and the panel keeps the
   two sides even. Yellow on hover, as everywhere; no platform colours */
.pd-links { display: flex; flex-direction: column; padding-inline: 46px 12px; }
.pd-panel .pd-links { padding-inline: 46px; }
.pd-link-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 8px 0 14px; }
.pd-link-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.pd-link { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; overflow: hidden; border-radius: 12px; border: 1px solid var(--button-border); background: var(--card-hi); color: var(--ink); text-decoration: none; transition: transform .15s var(--ease), border-color .15s, background .15s, color .15s; }
.pd-link-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--hairline); background: var(--well); transition: background .15s, border-color .15s, color .15s; }
.pd-link-ico svg { width: 21px; height: 21px; }
.pd-link-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pd-link-t b { font: 600 15px/1.15 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-link-t small { font: 500 11.5px/1.2 var(--font-mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-link-go { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--faint); transition: transform .15s var(--ease), color .15s, background .15s; }
.pd-link-go svg { width: 13px; height: 13px; }
.pd-link-wm { position: absolute; z-index: -1; right: -12px; bottom: -24px; width: 92px; height: 92px; opacity: .05; pointer-events: none; transition: opacity .15s, color .15s; }
.pd-link-wm svg { width: 100%; height: 100%; }
a.pd-link:hover { transform: translateY(-1px); border-color: var(--yellow-line); }
a.pd-link:hover .pd-link-ico { border-color: var(--yellow); background: var(--yellow); color: var(--on-yellow); }
a.pd-link:hover .pd-link-go { transform: translate(2px, -2px); color: var(--yellow); }
a.pd-link:hover .pd-link-wm { opacity: .12; color: var(--yellow); }
a.pd-link:active { transform: scale(.985); }
a.pd-link:focus-visible { outline: 2px solid var(--yellow-line); outline-offset: 2px; }
.pd-link.vv { gap: 14px; padding: 14px; border-color: var(--yellow-line); background: linear-gradient(100deg, rgba(223, 249, 2, .17), rgba(223, 249, 2, .04) 75%); }
.pd-link.vv .pd-link-ico { width: 52px; height: 52px; border-radius: 14px; border-color: var(--yellow-line); background: rgba(12, 14, 16, .6); }
.pd-link.vv .pd-link-ico img { width: 32px; height: 32px; }
.pd-link.vv b { font-size: 17px; white-space: normal; }
.pd-panel .pd-link-t b { font-size: 16px; }
.pd-panel .pd-link.vv b { font-size: 19px; }
.pd-link.vv small { font: 500 12.5px/1.2 var(--font-ui); color: var(--body); }
.pd-link.vv .pd-link-go { width: 34px; height: 34px; background: var(--yellow); color: var(--on-yellow); }
.pd-link.vv .pd-link-go svg { width: 15px; height: 15px; }
a.pd-link.vv:hover { border-color: var(--yellow); background: var(--yellow); color: var(--on-yellow); box-shadow: 0 0 28px rgba(223, 249, 2, .28); }
a.pd-link.vv:hover small { color: var(--on-yellow); }
a.pd-link.vv:hover .pd-link-ico { border-color: transparent; background: rgba(12, 14, 16, .88); }
a.pd-link.vv:hover .pd-link-go { background: rgba(12, 14, 16, .88); color: var(--yellow); }
.pd-link.off { border-style: dashed; background: transparent; }
.pd-link.off .pd-link-ico { background: transparent; color: var(--faint); opacity: .6; }
.pd-link.off b, .pd-panel .pd-link.off b { font: 500 14px/1.15 var(--font-ui); color: var(--faint); }
/* About: the creator's words as a quote, sized by length (details.js quoteSize). The slide takes the height the
   other two set (contain: size) and a long text scrolls inside it: it never stretches the panel or leaves a gap */
.pd-about { display: flex; flex-direction: column; contain: size; }
.pd-about-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pd-about-top h4 { margin: 0; }
.pd-about-top span { font: 600 9.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--stroke); white-space: nowrap; }
.pd-about-body {
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin-top: 8px; padding: 0 30px 18px; /* sides: room for the arrows */
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--stroke) transparent; outline: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent);
}
.pd-about-in { display: flex; flex-direction: column; gap: 14px; margin-block: auto; } /* centred while it fits, from the top once it scrolls */
.pd-about .pd-team { margin: 0; }
.pd-quote { margin: 0; }
.pd-quote::before { content: '“'; display: block; height: 26px; font: 700 52px/1 var(--font-display); color: var(--yellow); }
.pd-quote p { margin: 0; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty; }
.pd-quote.s p { font: 600 19px/1.32 var(--font-display); }
.pd-quote.m p { font: 500 16.5px/1.5 var(--font-ui); } /* the display face only for a headline-length one: tight in a paragraph */
.pd-quote.l p { font: 400 15px/1.6 var(--font-ui); }
.pd-quote.xl p { font: 400 14px/1.6 var(--font-ui); }
.pd-panel .pd-quote.s p { font-size: 24px; }
.pd-panel .pd-quote.m p { font-size: 18.5px; }
.pd-panel .pd-quote.l p { font-size: 16.5px; }
.pd-panel .pd-quote.xl p { font-size: 15px; }
.pd-none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; text-align: center; }
.pd-none img { width: 34px; height: 34px; margin-bottom: 4px; opacity: .28; }
.pd-none b { font-size: 13.5px; font-weight: 600; color: var(--body); }
.pd-none small { font-size: 12px; color: var(--faint); }
.pd-slide .pd-facts { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline-subtle); }

.pd-nav { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pd-step { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 9px; border-radius: var(--r-control); border: 1px solid var(--button-border); background: var(--card); font: 600 12.5px/1 var(--font-ui); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s, color .15s, opacity .15s; }
.pd-step svg { width: 14px; height: 14px; }
.pd-step.next { padding: 0 10px 0 14px; }
.pd-step:hover:not(:disabled) { border-color: var(--stroke); background: var(--card-hi); }
.pd-step:disabled { opacity: .3; cursor: default; }
.pd-slides.gate:not(.done) .pd-step.next:not(:disabled) { border-color: var(--yellow-line); background: var(--yellow-tint); color: var(--yellow); }
.pd-status { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--faint); }
.pd-status svg { flex: none; width: 15px; height: 15px; color: var(--yellow); }
.pd-status b { color: var(--yellow); }
@media (prefers-reduced-motion: reduce) { .pd-track, .pd-seg i::after { transition: none; } }
/* a vote tried too early (app.js lookFirst): the segments not seen yet and the next steps light up */
.pd-slides.cue .pd-seg:not(.seen) i { animation: pd-cue 1.2s ease; }
.pd-slides.cue .pd-arrow.next:not(:disabled), .pd-slides.cue .pd-step.next:not(:disabled) { animation: cue-btn 1.2s ease; }
@keyframes pd-cue { 15%, 55% { background: rgba(223, 249, 2, .45); box-shadow: 0 0 12px rgba(223, 249, 2, .5); } 35% { background: var(--track); box-shadow: none; } }
@keyframes cue-btn { 15%, 55% { border-color: var(--yellow); color: var(--yellow); box-shadow: 0 0 0 3px rgba(223, 249, 2, .22), 0 0 18px rgba(223, 249, 2, .45); } 35% { box-shadow: none; } }

/* voting waits for the slides: the deck's buttons dim, the sheet's are off */
.deck-actions.locked .act.pass, .deck-actions.locked .act.vibe { opacity: .35; }
.psheet-acts .btn:disabled { opacity: .35; cursor: not-allowed; }
.pd-panel.flash { animation: pd-flash .8s ease; }
@keyframes pd-flash { 30% { border-color: var(--yellow-line); box-shadow: 0 0 0 3px var(--yellow-tint); } }

.pd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 300px; text-align: center; color: var(--faint); font-size: 13px; }
.pd-empty img { width: 40px; height: 40px; opacity: .3; }
.pd-empty p { margin: 0; max-width: 240px; }

.pd-head { display: flex; align-items: center; gap: 12px; }
.pd-logo { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--hairline-subtle); object-fit: cover; background: var(--well); font: 700 20px/1 var(--font-display); color: var(--stroke); }
.pd-title { min-width: 0; }
.pd-title b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 22px/1.1 var(--font-display); color: var(--ink); }
.pd-title small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 16px; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; background: var(--hairline); }
.pd-stats > div { padding: 10px 11px; background: var(--card); min-width: 0; }
.pd-stats span { display: block; font: 600 9.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pd-stats b { display: flex; align-items: center; gap: 5px; margin-top: 6px; font: 600 15px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-stats small { display: block; margin-top: 4px; font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-pair img { width: 16px; height: 16px; border-radius: 50%; }

.pd-curve { margin-top: 14px; }
.pd-row { display: flex; justify-content: space-between; margin-bottom: 7px; font: 600 11px/1 var(--font-mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.pd-row b { color: var(--ink); }
.pd-bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.pd-bar i { display: block; height: 100%; border-radius: 3px; background: var(--progress); }
.pd-bar.done i { background: var(--yellow); }
.pd-curve small { display: block; margin-top: 7px; font-size: 12px; color: var(--faint); }



.pd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.pd-facts span { display: block; font: 600 9.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pd-facts b { display: flex; align-items: center; gap: 6px; margin-top: 5px; font: 600 13px/1.2 var(--font-ui); color: var(--ink); }
.pd-facts b.num { font-family: var(--font-mono); font-size: 12.5px; }
.pd-facts a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--stroke); }
.pd-facts a:hover { border-color: var(--ink); }
.pd-copy { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid var(--hairline); background: var(--well); color: var(--body); cursor: pointer; }
.pd-copy:hover { color: var(--ink); border-color: var(--stroke); }
.pd-copy svg { width: 12px; height: 12px; }
.pd-src { margin: 10px 0 0 !important; font-size: 11.5px; line-height: 1.45; color: var(--faint); text-align: center; }

/* the sheet */
.psheet { position: fixed; inset: 0; z-index: 75; }
.psheet-scrim { position: absolute; inset: 0; background: rgba(6, 8, 10, .62); backdrop-filter: blur(2px); opacity: 0; transition: opacity .25s ease; }
.psheet-box {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: min(88svh, 900px);
  margin: 0 auto; width: min(560px, 100%); border-radius: 18px 18px 0 0; border: 1px solid var(--hairline); border-bottom: 0;
  background: var(--card); box-shadow: 0 -18px 48px rgba(0, 0, 0, .5);
  transform: translateY(100%); transition: transform .32s var(--ease-out);
}
.psheet.open .psheet-scrim { opacity: 1; }
.psheet.open .psheet-box { transform: none; }
.psheet-grab { flex: none; display: grid; place-items: center; height: 22px; cursor: grab; touch-action: none; }
.psheet-grab i { width: 40px; height: 4px; border-radius: 2px; background: var(--stroke); }
.psheet-x { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--button-border); background: var(--card-hi); color: var(--ink); cursor: pointer; }
.psheet-x svg, .psheet-acts svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.psheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 18px; }
.psheet-acts { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); background: var(--card); }
.psheet-acts .btn { height: 46px; font-size: 14px; }
.sheet-open, .sheet-open body { overflow: hidden; }

/* ---------- how it works: the swipe tutorial ----------
   One 10 s loop on a little phone: a hand swipes card 1 right (VIBE), card 2
   left (PASS), then taps card 3 and its details slide up. Every moving part
   shares the loop, so the captions light up in step with the hand. It plays
   while it is on screen (.play) and holds a still frame for reduced motion. */
.how-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.how-wrap .how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .how-wrap { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .how-wrap .how { grid-template-columns: 1fr; } }

.tut { margin: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px 18px 18px; border: 1px solid var(--hairline); border-radius: 12px; background: radial-gradient(80% 55% at 50% 30%, rgba(223, 249, 2, .07), transparent 70%), var(--card); }
.tut .anim { animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.45, 0, .25, 1); animation-play-state: paused; }
.tut.play .anim { animation-play-state: running; }
.tut-stage { display: grid; place-items: center; }
.tut-phone { position: relative; width: 212px; height: 396px; padding: 9px; border-radius: 32px; background: #08090b; border: 1px solid #2a2f34; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), 0 22px 50px rgba(0, 0, 0, .5); }
.tut-screen { position: relative; height: 100%; overflow: hidden; border-radius: 24px; background: radial-gradient(90% 50% at 50% 0%, rgba(223, 249, 2, .05), transparent 70%), var(--bg); }
.tut-top { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; }
.tut-top img { width: 16px; height: 16px; }
.tut-top i { width: 38px; height: 6px; border-radius: 3px; background: var(--track); }
.tut-top b { margin-left: auto; width: 30px; height: 12px; border-radius: 4px; border: 1px solid var(--yellow-line); }

.tut-deck { position: absolute; top: 44px; left: 50%; width: 150px; height: 212px; margin-left: -75px; animation-name: tut-deck; }
.tut-card { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; border: 1px solid var(--button-border); background: var(--card); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); transform-origin: 50% 90%; }
.tut-card.c1 { z-index: 3; animation-name: tut-c1; }
.tut-card.c2 { z-index: 2; animation-name: tut-c2; }
.tut-card.c3 { z-index: 1; animation-name: tut-c3; }
.tut-art { position: relative; display: grid; place-items: center; height: 126px; }
.tut-art.a1 { background: radial-gradient(circle at 50% 45%, rgba(223, 249, 2, .35), transparent 62%), linear-gradient(160deg, #1d2a10, #0d1610); }
.tut-art.a1 img { width: 62px; height: 62px; }
.tut-art.a2 { background: linear-gradient(160deg, #8b87d9, #3e7373); }
.tut-art.a3 { background: linear-gradient(160deg, #d98b62, #e0b04e); }
.tut-art .moon { width: 46px; height: 46px; border-radius: 50%; background: #f2f4f3; box-shadow: inset -12px -6px 0 rgba(0, 0, 0, .16); }
.tut-art .sun { width: 46px; height: 46px; border-radius: 50%; background: #fff4cf; box-shadow: 0 0 0 9px rgba(255, 255, 255, .18), 0 0 0 18px rgba(255, 255, 255, .08); }
.tut-lines { padding: 10px; }
.tut-lines > i { display: block; height: 9px; width: 55%; border-radius: 3px; background: var(--ink); }
.tut-lines > i + i { height: 6px; width: 80%; margin-top: 6px; background: var(--stroke); }
.tut-lines span { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 11px; }
.tut-lines span i { height: 16px; border-radius: 4px; background: var(--well); border: 1px solid var(--hairline-subtle); }
.tut-stamp { position: absolute; top: 14px; padding: 2px 6px; border: 2px solid; border-radius: 5px; background: rgba(12, 14, 16, .55); font: 700 13px/1 var(--font-display); letter-spacing: .04em; opacity: 0; }
.tut-stamp.vibe { left: 10px; color: var(--yellow); transform: rotate(-14deg); animation-name: tut-stamp-vibe; }
.tut-stamp.pass { right: 10px; color: var(--ink); transform: rotate(14deg); animation-name: tut-stamp-pass; }

.tut-btns { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 18px; }
.tut-btns .tb { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--button-border); background: var(--card); }
.tut-btns svg { width: 17px; height: 17px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tut-btns .pass svg { stroke: var(--body); }
.tut-btns .vibe { border-color: var(--yellow-line); background: var(--yellow-tint); }
.tut-btns .vibe svg { stroke: var(--yellow); }
.tut-btns .tb.vibe { animation-name: tut-btn-vibe; }
.tut-btns .tb.pass { animation-name: tut-btn-pass; }

.tut-scrim { position: absolute; inset: 0; z-index: 6; background: rgba(6, 8, 10, .6); opacity: 0; animation-name: tut-scrim; }
.tut-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; height: 62%; padding: 8px 12px; border-radius: 16px 16px 0 0; border-top: 1px solid var(--hairline); background: var(--card); transform: translateY(105%); animation-name: tut-sheet; }
.tut-sheet .grab { display: block; width: 28px; height: 3px; margin: 0 auto 12px; border-radius: 2px; background: var(--stroke); }
.tut-sheet .row { display: flex; align-items: center; gap: 8px; }
.tut-sheet .logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(160deg, #d98b62, #e0b04e); }
.tut-sheet .t { flex: 1; }
.tut-sheet .t i { display: block; height: 8px; width: 50%; border-radius: 3px; background: var(--ink); }
.tut-sheet .t i + i { height: 5px; width: 75%; margin-top: 5px; background: var(--stroke); }
.tut-sheet .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 12px; border-radius: 6px; overflow: hidden; background: var(--hairline); }
.tut-sheet .grid i { position: relative; height: 30px; background: var(--card-hi); }
.tut-sheet .grid i::before { content: ""; position: absolute; left: 6px; top: 6px; width: 45%; height: 3px; border-radius: 2px; background: var(--stroke); }
.tut-sheet .grid i::after { content: ""; position: absolute; left: 6px; bottom: 7px; width: 65%; height: 6px; border-radius: 2px; background: var(--ink); }
.tut-sheet .pills { display: flex; gap: 5px; margin-top: 12px; }
.tut-sheet .pills i { width: 36px; height: 13px; border-radius: 4px; border: 1px solid var(--button-border); background: var(--card-hi); }
.tut-sheet .acts { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tut-sheet .acts i { height: 24px; border-radius: 6px; border: 1px solid var(--button-border); background: var(--card-hi); }
.tut-sheet .acts i.y { border-color: var(--yellow); background: var(--yellow); }
.tut-sheet .bar { height: 5px; margin-top: 12px; border-radius: 3px; background: var(--track); overflow: hidden; }
.tut-sheet .bar i { display: block; width: 68%; height: 100%; background: var(--progress); }
.tut-sheet .ln { display: block; height: 5px; margin-top: 10px; border-radius: 3px; background: var(--stroke); }
.tut-sheet .ln.s { width: 70%; margin-top: 6px; }

/* the hand: its fingertip (29px, 4px into the drawing) sits on the middle of the top card, at (106, 159) in the phone */
.tut-hand { position: absolute; left: 77px; top: 155px; z-index: 8; width: 62px; height: 89px; transform-origin: 29px 4px; opacity: 0; animation-name: tut-hand; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }
.tut-hand svg { position: relative; display: block; width: 62px; height: 89px; }
.tut-hand .skin { fill: #f2f4f3; stroke: #0c0e10; stroke-width: 2.2; stroke-linejoin: round; }
.tut-hand .crease { fill: none; stroke: rgba(12, 14, 16, .3); stroke-width: 1.6; stroke-linecap: round; }
.tut-hand .cuff { fill: var(--yellow); stroke: #0c0e10; stroke-width: 2.2; }
.tut-hand .cuff-line { fill: none; stroke: rgba(12, 15, 8, .35); stroke-width: 1.6; stroke-linecap: round; }
.tut-ring { position: absolute; left: 13px; top: -12px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--yellow); background: var(--yellow-tint); opacity: 0; transform: scale(.4); animation-name: tut-ring; }
/* the trail the fingertip leaves while dragging */
.tut-trail { position: absolute; top: 157px; z-index: 7; width: 72px; height: 4px; border-radius: 2px; opacity: 0; transform: scaleX(0); }
.tut-trail.r { left: 106px; transform-origin: left center; background: linear-gradient(90deg, transparent, var(--yellow)); animation-name: tut-trail-r; }
.tut-trail.l { left: 34px; transform-origin: right center; background: linear-gradient(90deg, var(--ink), transparent); animation-name: tut-trail-l; }
@keyframes tut-trail-r { 0%, 9% { opacity: 0; transform: scaleX(0); } 11% { opacity: 1; } 24% { opacity: 1; transform: scaleX(1); } 29%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes tut-trail-l { 0%, 43% { opacity: 0; transform: scaleX(0); } 45% { opacity: .9; } 56% { opacity: .9; transform: scaleX(1); } 61%, 100% { opacity: 0; transform: scaleX(1); } }

.tut-steps { display: grid; gap: 6px; }
.ts { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--hairline); background-color: var(--well); color: var(--faint); font-size: 13px; }
.ts b { font-weight: 650; }
.ts kbd { display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--button-border); background: var(--card); font: 600 11px/1 var(--font-mono); color: var(--body); }
.ts.s1 { animation-name: tut-s1; }
.ts.s2 { animation-name: tut-s2; }
.ts.s3 { animation-name: tut-s3; }

@keyframes tut-deck { 0% { opacity: 0; } 3%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tut-hand {
  0% { opacity: 0; transform: translate(34px, 70px); }
  6% { opacity: 1; transform: none; }
  9% { transform: scale(.9); }
  24% { opacity: 1; transform: translate(72px, 6px) scale(.9); }
  29% { opacity: 0; transform: translate(96px, 2px); }
  36% { opacity: 0; transform: translate(12px, 64px); }
  40% { opacity: 1; transform: none; }
  43% { transform: scale(.9); }
  56% { opacity: 1; transform: translate(-72px, 6px) scale(.9); }
  61% { opacity: 0; transform: translate(-96px, 2px); }
  68% { opacity: 0; transform: translate(12px, 64px); }
  72% { opacity: 1; transform: none; }
  74% { transform: scale(.86); }
  76% { opacity: 1; transform: none; }
  80%, 100% { opacity: 0; transform: translate(12px, 64px); }
}
@keyframes tut-ring {
  0%, 8% { opacity: 0; transform: scale(.4); }
  10%, 23% { opacity: 1; transform: none; }
  27% { opacity: 0; transform: scale(1.4); }
  41% { opacity: 0; transform: scale(.4); }
  44%, 55% { opacity: 1; transform: none; }
  59% { opacity: 0; transform: scale(1.4); }
  72% { opacity: 0; transform: scale(.4); }
  74% { opacity: 1; transform: none; }
  79%, 100% { opacity: 0; transform: scale(1.9); }
}
@keyframes tut-c1 {
  0%, 9% { opacity: 1; transform: none; }
  24% { opacity: 1; transform: translateX(72px) rotate(10deg); }
  30%, 100% { opacity: 0; transform: translateX(230px) rotate(24deg); }
}
@keyframes tut-c2 {
  0%, 30% { opacity: 1; transform: translateY(9px) scale(.94); filter: brightness(.7); }
  36%, 43% { opacity: 1; transform: none; filter: none; }
  56% { opacity: 1; transform: translateX(-72px) rotate(-10deg); filter: none; }
  62%, 100% { opacity: 0; transform: translateX(-230px) rotate(-24deg); filter: none; }
}
@keyframes tut-c3 {
  0%, 30% { opacity: .8; transform: translateY(18px) scale(.88); filter: brightness(.5); }
  36%, 62% { opacity: 1; transform: translateY(9px) scale(.94); filter: brightness(.7); }
  68%, 100% { opacity: 1; transform: none; filter: none; }
}
@keyframes tut-stamp-vibe { 0%, 10% { opacity: 0; } 22%, 100% { opacity: 1; } }
@keyframes tut-stamp-pass { 0%, 44% { opacity: 0; } 54%, 100% { opacity: 1; } }
@keyframes tut-btn-vibe { 0%, 18%, 32%, 100% { background-color: var(--yellow-tint); box-shadow: none; } 23%, 28% { background-color: var(--yellow); box-shadow: 0 0 18px rgba(223, 249, 2, .45); } }
@keyframes tut-btn-pass { 0%, 50%, 64%, 100% { border-color: var(--button-border); background-color: var(--card); } 55%, 60% { border-color: var(--ink); background-color: var(--card-hi); } }
@keyframes tut-scrim { 0%, 75% { opacity: 0; } 80%, 91% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes tut-sheet { 0%, 75% { transform: translateY(105%); } 81%, 91% { transform: none; } 96%, 100% { transform: translateY(105%); } }
@keyframes tut-s1 { 0%, 2%, 33%, 100% { color: var(--faint); border-color: var(--hairline); background-color: var(--well); } 6%, 29% { color: var(--ink); border-color: var(--yellow-line); background-color: rgba(223, 249, 2, .1); } }
@keyframes tut-s2 { 0%, 35%, 65%, 100% { color: var(--faint); border-color: var(--hairline); background-color: var(--well); } 39%, 61% { color: var(--ink); border-color: var(--yellow-line); background-color: rgba(223, 249, 2, .1); } }
@keyframes tut-s3 { 0%, 68%, 95%, 100% { color: var(--faint); border-color: var(--hairline); background-color: var(--well); } 72%, 91% { color: var(--ink); border-color: var(--yellow-line); background-color: rgba(223, 249, 2, .1); } }

/* reduced motion: one still frame, mid-swipe */
@media (prefers-reduced-motion: reduce) {
  .tut .anim { animation: none !important; }
  .tut .tut-card.c2 { transform: translateY(9px) scale(.94); filter: brightness(.7); }
  .tut .tut-card.c3 { transform: translateY(18px) scale(.88); filter: brightness(.5); }
  .tut .tut-card.c1 { transform: translateX(44px) rotate(7deg); }
  .tut .tut-stamp.vibe { opacity: 1; }
  .tut .tut-hand { opacity: 1; transform: translate(44px, 4px) scale(.92); }
  .tut .tut-ring { opacity: 1; transform: none; }
  .tut .tut-trail.r { opacity: 1; transform: scaleX(.6); }
  .tut .ts { color: var(--body); }
}