/* ============================================================
   SLIDES
   One stylesheet for every place a slide appears: the stage, the
   editor, thumbnails, phones. A frame is a size container and
   everything inside is sized in cqw / cqh / cqmin, so a slide is the
   same picture at any size.

   Only theme variables are used here: --ground --surface --ink --dim
   --faint --accent --accent2 --accent3 --gold --line --display --body
   --heavy --radius. A deck's own CSS can override any of it, scoped to
   .deck-scope, with selectors like .L-title or [data-layout="quote"].
   ============================================================ */

.frame{
  --ease:cubic-bezier(.22,.61,.36,1);
  --eyebrow:color-mix(in srgb,var(--line) 72%,var(--ink));
  position:relative;container-type:size;aspect-ratio:var(--ar,1.7778);width:100%;
  overflow:hidden;background:var(--ground);color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.frame *{box-sizing:border-box}
/* The aurora, still, for previews and thumbnails. The stage replaces it with
   the breathing canvas. Light only: it never covers the ground. */
.frame::before{content:"";position:absolute;inset:-10%;pointer-events:none;z-index:0;opacity:calc(var(--aurora,1) * .6);filter:blur(2cqw);
  background:
    radial-gradient(38% 46% at 24% 30%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%),
    radial-gradient(44% 52% at 76% 64%,color-mix(in srgb,var(--accent2) 28%,transparent),transparent 70%),
    radial-gradient(30% 38% at 62% 18%,color-mix(in srgb,var(--accent3) 14%,transparent),transparent 70%)}
.frame[data-scheme="light"]::before{opacity:calc(var(--aurora,1) * .38)}
.frame .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:7cqh 6.5cqw}
.frame em{font-style:normal;color:var(--accent)}

/* Rule two of the house style, inside a slide: things arrive as light. */
.frame [data-s]{
  opacity:0;filter:blur(1.1cqw) brightness(.35);transform:scale(.988);
  transition:opacity .95s var(--ease),filter 1.15s var(--ease),transform 1.15s var(--ease);
  transition-delay:calc(var(--i,0) * 130ms);
}
.frame [data-s].on{opacity:1;filter:none;transform:none}
@media (prefers-reduced-motion:reduce){.frame [data-s]{transition-duration:.2s;filter:none}}
.frame.still [data-s]{transition:none}

/* ---------- type ---------- */
.L-center{width:100%;max-width:88cqw;text-align:center;display:flex;flex-direction:column;align-items:center}
.L-eyebrow{margin:0 0 2.6cqh;font:600 1.15cqw/1 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--eyebrow);
  display:inline-flex;align-items:center;gap:.9em}
.L-eyebrow::before,.L-eyebrow::after{content:"";width:3.2cqw;height:1px;background:linear-gradient(90deg,transparent,var(--eyebrow),transparent)}
.L-title{margin:0;font:400 5.6cqw/1.06 var(--display);letter-spacing:-.012em;text-wrap:balance}
.L-sub{margin:2.6cqh 0 0;font-size:2cqw;line-height:1.45;color:var(--dim);max-width:62cqw;text-wrap:pretty}
.L-small{margin:3cqh 0 0;font-size:1.9cqw;line-height:1.45;color:var(--dim);max-width:64cqw;text-wrap:pretty}
.L-tiny{position:absolute;left:0;right:0;bottom:7cqh;text-align:center;margin:0;font-size:1.3cqw;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.frame[data-scheme="dark"] .L-title,.frame[data-scheme="dark"] .L-line,.frame[data-scheme="dark"] .L-big{
  text-shadow:0 0 3cqw color-mix(in srgb,var(--accent2) 28%,transparent),0 0 7cqw color-mix(in srgb,var(--accent) 14%,transparent)}

/* ---------- statement ---------- */
.L-statement .L-line{margin:0;font:400 5cqw/1.12 var(--display);letter-spacing:-.012em;text-wrap:balance}
.L-statement .L-line+.L-line{margin-top:1.6cqh}
.L-statement.many .L-line{font-size:3.8cqw}

/* ---------- takeaway: the loudest thing a deck can say ---------- */
.L-take{max-width:94cqw}
.L-tag{display:inline-block;transform:rotate(-3.2deg);font:900 1.9cqw/1 var(--heavy);letter-spacing:.2em;text-transform:uppercase;
  color:#1A1206;padding:.42em 1.1em .36em;
  background:linear-gradient(148deg,color-mix(in srgb,var(--gold) 55%,#fff),var(--gold) 44%,color-mix(in srgb,var(--gold) 82%,#000));
  box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 1.6cqh 5cqh color-mix(in srgb,var(--gold) 34%,transparent)}
.L-tkn{margin:2.6cqh 0 1.6cqh;font-size:1cqw;letter-spacing:.28em;text-transform:uppercase;color:var(--eyebrow)}
.L-tklines{width:100%}
.L-tk{font:900 var(--tk,7cqw)/1.04 var(--heavy);letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;margin:0 0 .4cqh}
.frame[data-scheme="dark"] .L-tk{text-shadow:0 0 5cqw color-mix(in srgb,var(--accent2) 30%,transparent),0 0 10cqw color-mix(in srgb,var(--accent) 16%,transparent)}
.L-tk .g{width:.92em;height:.92em;vertical-align:-.14em}
.L-tknote{margin:3.4cqh auto 0;max-width:58cqw;font-size:1.7cqw;line-height:1.5;color:var(--dim);text-wrap:pretty}

/* ---------- list ---------- */
.L-bullets{width:100%;max-width:78cqw}
.L-btitle{margin:0 0 4cqh;font:400 4cqw/1.1 var(--display);letter-spacing:-.01em;text-wrap:balance}
.L-bullets ul{list-style:none;margin:0;padding:0}
.L-bullets li{display:flex;align-items:baseline;gap:2cqw;font-size:3cqw;line-height:1.3;margin:0 0 2.6cqh}
.L-bullets li i{flex:0 0 auto;width:1.1cqw;height:1.1cqw;border-radius:50%;background:var(--accent);box-shadow:0 0 1.6cqw var(--accent);transform:translateY(-.2em)}

/* ---------- quote ---------- */
.L-quote{margin:0}
.L-quote blockquote{margin:0;font:400 4.2cqw/1.25 var(--display);font-style:italic;text-wrap:balance;position:relative}
.L-quote blockquote::before{content:"\201C";position:absolute;left:50%;top:-.62em;transform:translateX(-50%);font-size:2.4em;line-height:1;color:var(--accent);opacity:.5}
.L-quote figcaption{margin-top:4cqh;font-size:1.4cqw;letter-spacing:.22em;text-transform:uppercase;color:var(--eyebrow)}

/* ---------- big number ---------- */
.L-big{font:400 17cqw/1 var(--display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.L-number .L-sub{font-size:2.4cqw;margin-top:3cqh}

/* ---------- words and picture ---------- */
.L-split{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.L-split.left{direction:rtl}
.L-split.left>*{direction:ltr}
.L-split-text{display:flex;flex-direction:column;justify-content:center;padding:8cqh 5cqw}
.L-split-text .L-btitle{margin-bottom:3cqh}
.L-body{margin:0;font-size:2.2cqw;line-height:1.5;color:var(--dim);text-wrap:pretty}
.L-split-pic{position:relative;overflow:hidden;background:var(--surface)}
.L-split-pic img{position:absolute;inset:0;width:100%;height:100%}

/* ---------- pictures ---------- */
.slide[data-layout="image"],.slide[data-layout="embed"],.slide[data-layout="custom"],.slide[data-layout="html"],.slide[data-layout="split"]{padding:0}
.L-img{position:absolute;inset:0;width:100%;height:100%;display:block}
.L-caption{position:absolute;left:0;right:0;bottom:3cqh;margin:0;text-align:center;font-size:1.3cqw;letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 .4cqh 2cqh rgba(0,0,0,.9)}

/* ---------- codes ---------- */
.L-plaque{background:#fff;padding:1.4cqh;border-radius:calc(var(--radius) * .6);box-shadow:0 0 0 1px var(--line),0 2cqh 6cqh rgba(0,0,0,.4);
  width:min(44cqh,30cqw);aspect-ratio:1}
.L-plaque svg{width:100%;height:100%;display:block}
.L-plaque.big{width:min(62cqh,40cqw)}
.L-plaque .L-ph{border:0;color:#5C6377}
.L-qtitle{margin:0 0 4cqh;font:400 4.2cqw/1.1 var(--display);text-wrap:balance}
.L-qr .L-small{margin-top:3cqh;letter-spacing:.06em}

.L-join{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:6cqw;width:100%;max-width:86cqw}
.L-join .L-title{font-size:5.4cqw}
.L-join-url{margin:4cqh 0 0;font:400 3cqw/1.2 var(--display);color:var(--dim);word-break:break-all}
.L-join-url b{color:var(--ink);font-weight:400;letter-spacing:.06em}
.L-join-n{margin:4cqh 0 0;display:flex;align-items:baseline;gap:1cqw}
.L-join-n b{font:400 6.4cqw/1 var(--display);color:var(--accent);font-variant-numeric:tabular-nums;font-weight:400}
.L-join-n span{font-size:1.5cqw;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.L-join .L-plaque{justify-self:center}

/* ---------- countdown ---------- */
.L-clock{font:400 22cqw/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;transition:color .6s}
.L-clock.done{color:var(--accent3)}

/* ---------- embeds and custom HTML ---------- */
.L-embed,.L-custom{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.L-video{position:absolute;inset:0;width:100%;height:100%;background:#000;display:block}
.L-embed{background:#000}
.L-custom-wrap{position:absolute;inset:0}
.L-coded{position:absolute;inset:0}
.L-coded iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- placeholders, for slides still being made ---------- */
.L-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4cqh;width:100%;height:100%;min-height:20cqh;
  border:1px dashed color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--radius);color:var(--faint);text-align:center;padding:4cqh 3cqw}
.slide[data-layout="image"]>.L-ph,.slide[data-layout="embed"]>.L-ph,.slide[data-layout="custom"]>.L-ph,.slide[data-layout="html"] .L-ph{position:absolute;inset:6cqh 6cqw;width:auto;height:auto}
.L-ph b{font:400 5cqw/1 var(--display);color:var(--dim)}
.L-ph span{font-size:1.5cqw;letter-spacing:.14em;text-transform:uppercase}

/* ---------- results ---------- */
.L-results{position:absolute;inset:0;display:flex;flex-direction:column;padding:6cqh 6cqw 4.5cqh}
.L-rhead{flex:0 0 auto;text-align:center;margin:0 0 3.4cqh}
.L-rtitle{margin:0;font:400 3.7cqw/1.12 var(--display);letter-spacing:-.01em;text-wrap:balance}
.L-rbody{flex:1 1 auto;min-height:0;position:relative}
.L-rfoot{flex:0 0 auto;margin-top:2.4cqh;display:flex;align-items:center;justify-content:center;gap:2cqw;font-size:1.2cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.L-timer{display:none;width:22cqw;height:.7cqh;border-radius:1cqh;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}
.L-timer i{display:block;height:100%;width:var(--left,100%);background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s linear}
.L-timer.done i{background:var(--accent3)}
.L-timer.on{display:block}
.L-results.is-hidden .vnum,.L-results.is-hidden .vcount{visibility:hidden}

/* ---------- live results on top of a slide ---------- */
.ovl{position:absolute;z-index:3;pointer-events:none}
.ovl[data-place="bottom"]{left:4cqw;right:4cqw;bottom:3cqh;height:36cqh}
.ovl[data-place="right"]{top:5cqh;bottom:5cqh;right:2.5cqw;width:36cqw}
.ovl[data-place="center"]{inset:14cqh 16cqw}
.ovl[data-place="full"]{inset:0}
.ovl-in{position:absolute;inset:0;display:flex;flex-direction:column;padding:2.4cqh 2cqw;border-radius:calc(var(--radius) + 2px);
  background:color-mix(in srgb,var(--ground) 80%,transparent);border:1px solid color-mix(in srgb,var(--line) 55%,transparent);
  -webkit-backdrop-filter:blur(1.4cqw);backdrop-filter:blur(1.4cqw);box-shadow:0 2cqh 7cqh rgba(0,0,0,.45)}
.ovl[data-place="full"] .ovl-in{border-radius:0;border:0;padding:6cqh 6cqw;background:color-mix(in srgb,var(--ground) 93%,transparent)}
.ovl-q{margin:0 0 1.4cqh;font:400 2cqw/1.15 var(--display);text-align:center}
.ovl[data-place="full"] .ovl-q{font-size:3.6cqw;margin-bottom:3cqh}
.ovl-v{flex:1 1 auto;min-height:0;position:relative}

/* ---------- the join code, in the corner ---------- */
.badge{position:absolute;z-index:4;left:2.2cqw;bottom:3cqh;display:flex;align-items:center;gap:1cqw;padding:.8cqh .8cqw .8cqh .8cqh;
  border-radius:calc(var(--radius) + 2px);background:color-mix(in srgb,var(--ground) 82%,transparent);border:1px solid color-mix(in srgb,var(--line) 50%,transparent);
  -webkit-backdrop-filter:blur(1cqw);backdrop-filter:blur(1cqw)}
.badge-qr{width:10.5cqh;height:10.5cqh;background:#fff;border-radius:3px;padding:.5cqh}
.badge-qr svg{width:100%;height:100%;display:block}
.badge-t span{display:block;font-size:.85cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.badge-t b{display:block;font:400 1.6cqw/1.2 var(--display);color:var(--ink);letter-spacing:.02em}

/* ============================================================
   RESULTS VIEWS
   Every view host is its own size container, so a view sizes itself
   to whatever box it is given: a whole slide, an overlay, a phone.
   ============================================================ */
.vhost{container-type:size;position:relative}
.view{position:absolute;inset:0}
.vwait{display:none;position:absolute;inset:0;margin:0;align-items:center;justify-content:center;text-align:center;
  font-size:max(11px,4.4cqmin);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.view:not(.has)>.vwait{display:flex}
.view .g{width:1em;height:1em;display:inline-block;vertical-align:-.15em}
.view .g>svg,.view .g>img{width:100%;height:100%;display:block}
.vopt-img{width:1.6em;height:1.6em;object-fit:cover;border-radius:3px;display:inline-block;vertical-align:middle}

/* ---------- bars ---------- */
.v-bars{display:flex;flex-direction:column;justify-content:center;gap:min(1.6cqh,8px);
  --rh:min(15cqh,calc(88cqh / var(--rows)));font-size:min(calc(var(--rh) * .4),4.4cqw)}
.vrow{position:relative;height:var(--rh);display:flex;align-items:center;justify-content:space-between;gap:1em;padding:0 .8em;
  border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden;border-radius:2px}
.vfill{position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);transition:width 1.1s var(--ease);
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 52%,transparent),color-mix(in srgb,var(--c) 8%,transparent))}
.vlabel,.vnum{position:relative;display:flex;align-items:center;gap:.5em;min-width:0}
.vlabel span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlabel .g{font-size:1.4em}
.vnum b{font:400 1.25em/1 var(--display);font-variant-numeric:tabular-nums;transition:color .5s,text-shadow .5s}
.vnum small{font-size:.7em;color:var(--faint);min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums}
.vrow.lead .vnum b{color:var(--accent);text-shadow:0 0 1.2em color-mix(in srgb,var(--accent) 60%,transparent)}
.vrow.right{box-shadow:inset 0 0 0 2px var(--accent)}
.vrow.right .vlabel::after{content:"\2713";color:var(--accent);font-weight:700;margin-left:.3em}
.vrow.wrong{opacity:.42}

/* ---------- pillars ---------- */
.v-cols{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:min(3cqw,24px);align-items:end;font-size:min(5.4cqh,calc(30cqw / var(--cols)))}
.vcol{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0}
.vcount{font:400 1.5em/1 var(--display);font-variant-numeric:tabular-nums;margin-bottom:.35em;transition:color .5s}
.vshaft-wrap{width:58%;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch}
.vshaft-wrap>.vcount{text-align:center;margin:0 -30% .3em}
.vshaft-wrap>.vcap{height:.35em;flex:0 0 auto;margin:0 -12%;background:color-mix(in srgb,var(--ink) 18%,var(--surface));border-radius:2px 2px 0 0;
  box-shadow:0 0 1.2em color-mix(in srgb,var(--c) 45%,transparent)}
.vshaft{height:calc(var(--h,8%) * .82);transition:height 1.1s var(--ease);min-height:4px;position:relative;
  background:linear-gradient(90deg,rgba(0,0,0,.35) 0%,transparent 24%,rgba(255,255,255,.1) 48%,transparent 74%,rgba(0,0,0,.32) 100%),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 9%,var(--surface)) 0 9%,var(--surface) 9% 11%),var(--surface)}
.vshaft::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,transparent),transparent 65%);mix-blend-mode:screen}
.frame[data-scheme="light"] .vshaft::after{mix-blend-mode:multiply;opacity:.6}
.vbase{height:.25em;flex:0 0 auto;margin:0 -8%;background:color-mix(in srgb,var(--ink) 14%,var(--surface))}
.vname{margin-top:.5em;font-size:.62em;text-align:center;line-height:1.2;display:flex;flex-direction:column;align-items:center;gap:.3em;min-height:2.6em;max-width:100%}
.vname span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vname .g{font-size:1.9em}
.vcol.lead .vcount{color:var(--accent)}
.vcol.right .vcount::after{content:" \2713";color:var(--accent)}
.vcol.wrong{opacity:.4}

/* ---------- donut ---------- */
.v-donut{display:flex;align-items:center;justify-content:center;gap:6cqw;font-size:min(5.4cqh,3.2cqw)}
.vring{height:96%;aspect-ratio:1;flex:0 0 auto}
.vring circle{transition:stroke-dasharray 1.1s var(--ease),stroke-dashoffset 1.1s var(--ease)}
.vring-n{font:400 18px var(--display);fill:var(--ink)}
.vring-l{font-size:6px;letter-spacing:.2em;text-transform:uppercase;fill:var(--faint)}
.vlegend{display:flex;flex-direction:column;gap:.55em;min-width:0}
.vleg{display:flex;align-items:center;gap:.6em;white-space:nowrap}
.vleg i{width:.8em;height:.8em;border-radius:2px;background:var(--c);flex:0 0 auto}
.vleg span{overflow:hidden;text-overflow:ellipsis}
.vleg b{font:400 1.05em var(--display);margin-left:auto;padding-left:.8em;font-variant-numeric:tabular-nums}
.vleg.right{color:var(--accent)} .vleg.wrong{opacity:.4}

/* ---------- tiles ---------- */
.v-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(26cqw,180px),1fr));gap:2cqmin;align-content:center;font-size:min(5cqh,4cqw)}
.vtile{position:relative;overflow:hidden;padding:1em .8em;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;gap:.25em;text-align:center}
.vtile::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--fill,0%);background:color-mix(in srgb,var(--c) 22%,transparent);transition:height 1.1s var(--ease)}
.vtile>*{position:relative}
.vtile b{font:400 2.1em/1 var(--display);font-variant-numeric:tabular-nums}
.vtile span{font-size:.8em;color:var(--dim)}
.vtile small{font-size:.65em;color:var(--faint)}
.vtile-face .g{font-size:1.8em}
.vtile.lead{border-color:var(--accent)} .vtile.lead b{color:var(--accent)}
.vtile.right{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)} .vtile.wrong{opacity:.4}

/* ---------- the ball pit ---------- */
.v-pit{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:min(2.4cqw,22px);font-size:min(5cqh,calc(28cqw / var(--cols)))}
.vpit{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;height:100%}
.vpit-head{font-size:1.7em;line-height:1;margin-bottom:.15em;filter:drop-shadow(0 .2em .3em rgba(0,0,0,.45))}
.vpit-shaft{position:relative;width:100%;height:calc(var(--h,12%) * .78);min-height:1.2em;transition:height 1.1s var(--ease);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-top:0;border-radius:0 0 calc(var(--radius) + 4px) calc(var(--radius) + 4px);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c) 14%,transparent))}
/* The pit itself: balls placed by render/pit.js, bottom anchored, so a shaft
   that is still growing never moves them. Clipping is the last resort only:
   the balls are sized so the pile fits. */
.vpit-fill{position:absolute;inset:0;overflow:hidden}
.ball{position:absolute;left:0;bottom:0;width:var(--d,24px);height:var(--d,24px);transform-origin:0 100%;pointer-events:none}
.ball>i{display:block;width:100%;height:100%}
.ball .g{display:block;width:100%;height:100%;font-size:var(--d,24px)}
.vpit-dot{display:block;width:84%;height:84%;margin:8%;border-radius:50%;background:var(--c);box-shadow:inset 0 -.12em .25em rgba(0,0,0,.35),0 0 .3em color-mix(in srgb,var(--c) 60%,transparent)}
.vpit-more{position:absolute;top:.3em;right:.4em;font-size:.6em;font-style:normal;color:var(--dim)}
.vpit-name{margin-top:.4em;display:flex;flex-direction:column;align-items:center;font-size:.62em;line-height:1.2;text-align:center}
.vpit-name b{font:400 1.6em/1.1 var(--display);font-variant-numeric:tabular-nums}

/* ---------- split by another answer ---------- */
.v-gpit,.v-gbars{display:flex;flex-direction:column;gap:min(2cqh,14px)}
.vg-cols{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:min(2.4cqw,22px);font-size:min(5cqh,calc(28cqw / var(--cols)))}
.vg-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.35em 1.4em;font-size:min(2.8cqh,2cqw);color:var(--dim)}
.vgl{display:inline-flex;align-items:center;gap:.4em;white-space:nowrap}
.vgl>i{width:.8em;height:.8em;border-radius:50%;background:var(--c)}
.vgl .g{font-size:1.4em}
.vgl b{font:400 1.1em var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.v-gbars{justify-content:center;--rh:min(13cqh,calc(78cqh / var(--rows)));font-size:min(calc(var(--rh) * .38),4cqw)}
.vg-rows{display:flex;flex-direction:column;gap:min(1.4cqh,8px)}
.vg-row{display:grid;grid-template-columns:minmax(0,30%) 1fr auto;align-items:center;gap:.8em;height:var(--rh)}
.vg-label{display:flex;align-items:center;gap:.5em;min-width:0}
.vg-label span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-label .g{font-size:1.4em}
.vg-bar{display:flex;height:62%;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.vg-bar i{flex:0 0 var(--w,0%);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 85%,#fff 15%),color-mix(in srgb,var(--c) 70%,transparent));transition:flex-basis 1.1s var(--ease)}
.vg-n{font:400 1.2em/1 var(--display);font-variant-numeric:tabular-nums;min-width:1.6em;text-align:right}
.v-gavg .vname small{font-size:.8em;color:var(--faint)}
/* A group with no answers (perhaps nobody in it was asked) steps back. */
.vg-row.none,.v-gavg .vcol.none{opacity:.38}

/* ---------- averages ---------- */
.v-avg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5cqh}
.vbig{font:400 min(34cqh,22cqw)/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:flex;align-items:baseline}
.vbig small{font-size:.3em;color:var(--faint);margin-left:.15em}
.vbig .vpre,.vbig .vpost{font-size:.42em;color:var(--dim)}
.frame[data-scheme="dark"] .vbig b{text-shadow:0 0 .3em color-mix(in srgb,var(--accent) 28%,transparent)}
.vstars{position:relative;font-size:min(8cqh,6cqw);line-height:1;letter-spacing:.1em}
.vstars::before{content:"\2605\2605\2605\2605\2605";color:color-mix(in srgb,var(--ink) 16%,transparent)}
.vstars i{position:absolute;left:0;top:0;width:var(--f,0%);overflow:hidden;white-space:nowrap;transition:width 1.1s var(--ease)}
.vstars i::before{content:"\2605\2605\2605\2605\2605";color:var(--gold)}
.vdist{display:flex;align-items:flex-end;gap:1.2cqw;height:18cqh}
.vd{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;width:min(5cqw,48px);gap:.6cqh}
.vd i{display:block;width:100%;min-height:2px;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:2px 2px 0 0;transition:height 1s var(--ease)}
.vd span{font-size:min(3cqh,2.4cqw);color:var(--faint);font-variant-numeric:tabular-nums}
.vsub{display:flex;flex-direction:column;align-items:center;gap:.8cqh;font-size:min(3.4cqh,2.2cqw);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.vends{display:flex;justify-content:space-between;gap:6cqw;text-transform:none;letter-spacing:0}
.vends em{font-style:normal;color:var(--dim)}

/* ---------- histogram ---------- */
.v-hist{display:flex;flex-direction:column;justify-content:center;gap:2cqh}
.vhist-bars{display:flex;align-items:flex-end;gap:.8cqw;height:58cqh}
.vhist-bars i{flex:1;min-height:2px;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:2px 2px 0 0;transition:height 1s var(--ease)}
.vhist-axis{display:flex;justify-content:space-between;font-size:min(3.4cqh,2cqw);color:var(--faint)}
.vclosest{text-align:center;font-size:min(4cqh,2.4cqw)}
.vclosest p{margin:0 0 .5em}
.vclosest div{display:flex;gap:1em;justify-content:center}
.vclosest em{font-style:normal;color:var(--accent)}

/* ---------- word cloud ---------- */
.v-cloud{display:flex;align-items:center;justify-content:center}
.vwords{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;gap:.4em 1.1em;max-width:100%;max-height:100%;overflow:hidden;padding:1cqh}
.vword{font:400 calc(var(--k,.5) * min(21cqh,11cqw))/1.1 var(--display);color:var(--c);white-space:nowrap;
  transition:font-size .9s var(--ease);animation:lit .8s var(--ease) both}
.frame[data-scheme="dark"] .vword{text-shadow:0 0 .35em color-mix(in srgb,var(--c) 40%,transparent)}

/* ---------- cards ---------- */
.v-wall{overflow:hidden}
.vcards{column-count:3;column-gap:1.6cqw;height:100%;overflow:hidden;font-size:min(4.4cqh,2cqw)}
.vcard{break-inside:avoid;margin:0 0 1.6cqw;padding:.9em 1em;border:1px solid color-mix(in srgb,var(--line) 45%,transparent);border-radius:var(--radius);
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--ground) 80%,transparent))}
.vcard p{margin:0;line-height:1.4}
.vcard small{display:block;margin-top:.5em;color:var(--faint);font-size:.75em}
.vcard.pending{opacity:.5;border-style:dashed}
.vcard.hidden{display:none}

/* ---------- questions ---------- */
.v-top{overflow:hidden}
.vqs{display:flex;flex-direction:column;gap:1.4cqh;font-size:min(5.2cqh,2.4cqw)}
.vq{display:flex;align-items:center;gap:1.2em;padding:.7em 1em;border:1px solid color-mix(in srgb,var(--line) 45%,transparent);border-radius:var(--radius);
  background:color-mix(in srgb,var(--surface) 70%,transparent);transition:opacity .4s}
.vq-v{display:flex;flex-direction:column;align-items:center;min-width:2.6em}
.vq-v b{font:400 1.5em/1 var(--display);color:var(--accent);font-variant-numeric:tabular-nums}
.vq-v small{font-size:.5em;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.vq-t p{margin:0;line-height:1.3}
.vq-who{font-size:.65em;color:var(--faint)}
.vq.answered{opacity:.4}
.vq.answered .vq-v b::after{content:" \2713"}
.vq.pending{opacity:.55;border-style:dashed}
.vq.hidden{display:none}

/* ---------- photos ---------- */
.v-photos{overflow:hidden}
.vpics{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);grid-auto-rows:calc((100cqh - (var(--cols,3) - 1) * 1.2cqmin) / var(--cols,3));gap:1.2cqmin;height:100%}
.vpic{margin:0;overflow:hidden;border-radius:var(--radius);background:var(--surface);box-shadow:0 1cqh 3cqh rgba(0,0,0,.35)}
.vpic img{width:100%;height:100%;object-fit:cover;display:block}
.vpic.pending{opacity:.45;outline:2px dashed var(--gold);outline-offset:-2px}

/* ---------- voice notes ---------- */
.vvs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(40cqw,320px),1fr));gap:1.4cqmin;align-content:center;font-size:min(6cqh,2.6cqw)}
.vv{display:flex;align-items:center;gap:.8em;padding:.6em .8em;border:1px solid color-mix(in srgb,var(--line) 45%,transparent);border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.vv.pending{opacity:.5;border-style:dashed}
.vv-play{appearance:none;border:0;width:2.2em;height:2.2em;border-radius:50%;flex:0 0 auto;cursor:pointer;color:var(--ground);
  background:linear-gradient(150deg,var(--accent),var(--accent2));display:grid;place-items:center;padding:0}
.vv-play svg{width:55%;height:55%}
.vv.playing .vv-play{box-shadow:0 0 1em var(--accent)}
.vv-wave{flex:1;display:flex;align-items:center;gap:3%;height:1.6em}
.vv-wave i{flex:1;height:calc(var(--a) * 100%);border-radius:2px;background:color-mix(in srgb,var(--accent) 70%,transparent)}
.vv.playing .vv-wave i{animation:wave .9s ease-in-out infinite alternate}
.vv.playing .vv-wave i:nth-child(2n){animation-delay:.2s}
@keyframes wave{to{transform:scaleY(.4)}}
.vv small{color:var(--faint);font-size:.7em;font-variant-numeric:tabular-nums}

/* ---------- counts ---------- */
.v-count{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqh}
.v-count b{font:400 min(40cqh,26cqw)/1 var(--display);font-variant-numeric:tabular-nums;color:var(--accent)}
.v-count span{font-size:min(5cqh,2.6cqw);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* ---------- leaderboard ---------- */
.v-board{overflow:hidden}
.vranks{display:flex;flex-direction:column;gap:1.2cqh;max-width:min(100%,900px);margin:0 auto;font-size:min(6cqh,2.8cqw)}
.vrank{display:grid;grid-template-columns:2.2em 1fr auto;align-items:center;gap:.8em;padding:.5em .9em;border-radius:var(--radius);
  border:1px solid color-mix(in srgb,var(--line) 40%,transparent);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.vrank em{font:400 1.2em/1 var(--display);font-style:normal;color:var(--faint);text-align:center}
.vrank span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrank b{font:400 1.2em var(--display);font-variant-numeric:tabular-nums}
.vrank[data-rank="1"]{border-color:var(--gold);box-shadow:0 0 1.4em color-mix(in srgb,var(--gold) 30%,transparent)}
.vrank[data-rank="1"] em,.vrank[data-rank="1"] b{color:var(--gold)}
.vrank[data-rank="2"] em{color:color-mix(in srgb,var(--ink) 80%,var(--accent))}
.vrank[data-rank="3"] em{color:color-mix(in srgb,var(--gold) 60%,var(--accent3))}

@keyframes lit{from{opacity:0;filter:blur(10px) brightness(.4)}to{opacity:1;filter:none}}
.lit{animation:lit .8s cubic-bezier(.22,.61,.36,1) both}

/* The join badge needs the bottom left corner of a results slide. */
.slide.has-badge .L-results{padding-bottom:15cqh}
.slide.has-badge .L-rfoot{padding-left:22cqw;justify-content:flex-start}