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

.page { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 40px; }

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

/* ---------- hero ---------- */
.hero { padding: 26px 0 18px; animation: rise .6s var(--ease-out) both; }
.title { margin: 10px 0 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 ---------- */
.deck-col { container: deck / inline-size; padding: 18px 16px 14px; border: 1px solid var(--hairline); border-radius: 16px; background: radial-gradient(70% 55% at 50% 0%, rgba(223, 249, 2, .045), transparent 70%), var(--panel); 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: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; max-width: 70%; }
.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); }

.deck { position: relative; width: min(392px, 100%); height: 566px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sc {
  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: 220px; 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; }


/* 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: center; gap: 12px;
  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 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: 18px; }
  .deck-col { padding: 14px 10px; border-radius: 14px; min-height: 0; }
  .you-strip { margin: -14px -10px 14px; padding: 10px 12px; gap: 8px 12px; border-radius: 14px 14px 0 0; }
  .ys-who { flex-basis: 100%; }
  .ys-act .btn { white-space: normal; height: auto; min-height: 30px; padding: 6px 10px; text-align: center; }
  .deck { height: min(560px, calc(100svh - 230px)); min-height: 470px; }
  .sc-sym { font-size: 24px; }
  .deck-actions { gap: 14px; margin-top: 20px; }
  #round-chip { display: none; }
}

/* 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 strip on top of the voting panel: you, your status, the next step */
.you-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: -18px -16px 18px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); border-radius: 16px 16px 0 0; background: rgba(16, 18, 20, .65); }
.ys-who { flex: 1 1 260px; display: flex; align-items: center; gap: 11px; min-width: 0; }
.ys-who > div { min-width: 0; }
.ys-who b { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font: 650 14px/1.2 var(--font-ui); color: var(--ink); }
.ys-who small { display: block; margin-top: 3px; font: 500 11.5px/1.2 var(--font-mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ys-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hairline); }
.ys-avatar.mark { display: grid; place-items: center; background: var(--yellow-tint); border-color: var(--yellow-line); }
.ys-avatar.mark img { width: 20px; height: 20px; }
.ys-who .blue { display: inline-grid; width: 15px; height: 15px; margin-left: -3px; color: var(--yellow); }
.ys-who .blue svg { width: 15px; height: 15px; }
.ys-who .tag { height: 19px; font-size: 9.5px; }
.ys-who .tag.hi { color: var(--yellow); }
.ys-stats { display: flex; gap: 6px; }
.ys-stats span { display: inline-flex; align-items: baseline; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--well); font-size: 12px; color: var(--faint); line-height: 30px; }
.ys-stats b { font: 600 13px/1 var(--font-mono); color: var(--ink); }
.ys-act { display: flex; gap: 8px; }
.ys-note { flex: 1 1 100%; margin: -2px 0 0; font-size: 12px; line-height: 1.45; color: var(--faint); }

/* 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 { border-color: var(--yellow-line); background: var(--yellow-tint); }
.pd-vv:hover { background: rgba(223, 249, 2, .18); border-color: var(--yellow); }
.pd-vv img { flex: none; width: 18px; height: 18px; }
.pd-others { grid-column: 1 / -1; display: flex; gap: 6px; }
.pd-x.off { color: var(--faint); border-style: dashed; background: transparent; cursor: not-allowed; opacity: .6; }
.pd-x.off:hover { border-color: var(--button-border); background: transparent; }
.pd-x.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, 600px); justify-content: center; align-items: start; gap: 24px; }
  .deck-tip { display: none !important; }
  .pd-panel {
    display: block; max-height: 666px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    padding: 18px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--card);
  }
  .act.info, .k-info, .sc-more { display: none !important; }
}
.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-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline-subtle); }
.pd-sec h4 { margin: 0 0 9px; font: 600 10px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pd-sec p { margin: 0; }
.pd-desc { font-size: 14px; line-height: 1.6; color: var(--body); white-space: pre-line; overflow-wrap: anywhere; }
.pd-desc.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pd-desc.clamp.open { -webkit-line-clamp: unset; display: block; }
.pd-desc.muted { color: var(--faint); font-size: 13px; }
.pd-more { margin-top: 6px; padding: 0; border: 0; background: none; font: 600 12.5px/1.4 var(--font-ui); color: var(--yellow); cursor: pointer; }
.pd-more:hover { text-decoration: underline; }


.pd-tax { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.pd-tax i { display: block; min-width: 3px; }
.pd-legend { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.pd-legend li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; color: var(--body); }
.pd-legend i { width: 10px; height: 10px; border-radius: 3px; }
.pd-legend b { font: 600 12px/1 var(--font-mono); color: var(--ink); }

.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); }
}