/* OUT2 vibe quiz (r86 quiz preview): a small inline card in the home feed + the "Tuned for you" line. Theme variables only,
   so it matches mix / cinema. Every step sits in the same grid cell, so the card never changes height (no layout shift). */
.qz-card{position:relative;margin:14px var(--pad,24px) 18px;max-width:640px;padding:16px 16px 14px;border-radius:18px;color:var(--fg);
  background:radial-gradient(120% 140% at 0% 0%,rgba(217,178,111,.13),transparent 55%),var(--card);border:1px solid rgba(217,178,111,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 34px rgba(0,0,0,.28);overflow:hidden;overflow-anchor:none;contain:layout paint}
.qz-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;
  background:linear-gradient(110deg,transparent 30%,rgba(241,215,159,.16) 48%,transparent 66%);background-size:250% 100%;background-position:120% 0}
.qz-card.qz-in::after{animation:qzSheen 1.6s .15s ease-out both}
.qz-card.qz-spark::after{animation:qzSheen 1.2s ease-out both}
@keyframes qzSheen{0%{opacity:1;background-position:120% 0}100%{opacity:0;background-position:-30% 0}}
.qz-top{display:flex;align-items:center;gap:10px;margin:0 0 10px;min-height:28px}
.qz-k{font:700 11px/1 var(--f-body,Inter,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--reme);white-space:nowrap}
.qz-dots{display:flex;gap:5px;margin-left:auto}.qz-dots i{width:16px;height:3px;border-radius:2px;background:var(--line);transition:background .3s,width .3s}
.qz-dots i.on{background:var(--fg);width:22px}.qz-dots i.done{background:var(--reme)}
.qz-x{display:grid;place-items:center;width:30px;height:30px;margin:-4px -6px -4px 2px;border-radius:50%;border:0;background:transparent;color:var(--muted);cursor:pointer}
.qz-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.qz-x:hover,.qz-x:focus-visible{color:var(--fg);background:rgba(255,255,255,.06);outline:none}
.qz-stage{display:grid}
.qz-step{grid-area:1/1;visibility:hidden;opacity:0;transform:translateX(10px);transition:opacity .22s ease,transform .26s var(--ease,ease),visibility 0s .26s}
.qz-step.on{visibility:visible;opacity:1;transform:none;transition:opacity .26s ease .06s,transform .3s var(--ease,ease) .06s,visibility 0s}
.qz-step h3{font:700 clamp(19px,2.2vw,23px)/1.15 var(--f-display);letter-spacing:-.015em;margin:0 0 12px}
.qz-opts{display:flex;flex-wrap:wrap;gap:8px}
.qz-o{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--fg);font:600 14px/1 var(--f-body,Inter,sans-serif);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .18s,background .18s,box-shadow .18s,transform .12s}
.qz-o span{font-size:16px;line-height:1}
.qz-o:hover,.qz-o:focus-visible{border-color:rgba(255,255,255,.4);outline:none}.qz-o:active{transform:scale(.97)}
.qz-o.on{border-color:var(--reme);background:rgba(217,178,111,.14);box-shadow:0 0 0 1px var(--reme) inset,0 0 18px rgba(217,178,111,.25)}
.qz-done{align-content:center}.qz-done h3{color:var(--reme);margin-bottom:6px}
.qz-done .qz-sum{color:var(--fg);font-size:14.5px;margin:0 0 12px}
.qz-acts{margin:0}.qz-undo,.qz-reset{font:600 13px/1 var(--f-body,Inter,sans-serif);color:var(--muted);background:none;border:0;padding:8px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.25)}
.qz-undo:hover,.qz-reset:hover{color:var(--fg)}
.qz-card.is-done .qz-dots{visibility:hidden}
.qz-card.qz-bye{transition:height .32s var(--ease,ease) .1s,opacity .16s ease,margin .32s var(--ease,ease) .1s,padding .32s var(--ease,ease) .1s;opacity:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}
/* return visits: one quiet line under the calendar */
.qz-line{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:10px var(--pad,24px) 0;min-height:34px;font-size:13px;color:var(--muted)}
.qz-line .qz-sum{color:var(--fg);opacity:.85}.qz-line .qz-reset{margin-left:auto;padding:8px 2px}
/* the reshape: rows under the card fade out, move, fade back (opacity only; never animates layout) */
.rows.qz-sh>.qz-card~*,.rows.qz-sh>.qz-line~*{opacity:0!important;transition:opacity .16s ease!important;overflow-anchor:none}
.rows.qz-hid>.qz-card~*,.rows.qz-hid>.qz-line~*{opacity:0!important;transition:none!important}
.rows.qz-fi>.qz-card~*,.rows.qz-fi>.qz-line~*{transition:opacity .38s ease!important;overflow-anchor:none}
/* a lifted Family / Art row shows on its own; "See more" goes when nothing is left behind it */
html.hs .rows>.qz-up.hs-hide{display:block!important}
.rows>.hs-more.qz-gone{display:none!important}
@media (prefers-reduced-motion:reduce){.qz-card::after{display:none}.qz-step,.qz-step.on{transition:none;transform:none}}
@media (max-width:760px){.qz-card{margin:12px 16px 16px;padding:14px 14px 12px}.qz-o{min-height:38px;padding:0 13px;font-size:13.5px}.qz-line{margin:8px 16px 0}}
/* the old per card "For you" pills and the Top 10 label are gone: the personal row and the line say it once */
.pill.fy,.row-sub .fy-label{display:none!important}
/* nav button */
.nav-taste{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);font-size:16px;color:var(--fg)}
.nav-taste.on{color:var(--reme);border-color:var(--reme)}
/* "For you" labels */
.pill.fy{background:transparent;color:var(--reme);border:1px solid var(--reme)}
.card-top .pill.fy,.pin-top .pill.fy{background:rgba(10,10,10,.62);color:#f1d79f;border-color:rgba(241,215,159,.7)}
.fy-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 var(--pad,24px) 22px;padding:11px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--fg);font-size:13.5px;position:relative;z-index:5}
.fy-label{font:700 11.5px/1 var(--f-body,Inter,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--reme)}
.fy-sum{color:var(--muted)}
.fy-acts{margin-left:auto;display:flex;gap:14px}.fy-acts a,.fy-acts button{font:600 13px/1 var(--f-body,Inter,sans-serif);color:var(--fg);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.t-editorial .fy-bar,.t-mosaic .fy-bar{margin:22px 0}
.t-mosaic .fy-bar{margin:18px var(--pad,24px)}
.row-sub .fy-label{margin-right:8px}
@media (max-width:760px){.fy-acts{margin-left:0}.fy-bar{margin:0 16px 18px}}