.qm{--qm-size:52px;--qm-gap:10px;isolation:isolate;position:relative}.qm-sm{--qm-size:22px;--qm-gap:5px}.qm-md{--qm-size:46px;--qm-gap:9px}.qm-lg{--qm-size:54px;--qm-gap:10px}@media (max-width:639px){.qm-lg{--qm-size:46px;--qm-gap:8px}.qm-md{--qm-size:42px;--qm-gap:8px}}.qm-card{border:1px solid var(--color-line);box-shadow:var(--shadow-soft);background:#fff;border-radius:24px;padding:18px 18px 16px;transition:border-color .28s,box-shadow .28s,background-color .28s}@media (min-width:640px){.qm-card{padding:20px 22px 18px}}.qm-card[data-phase=extended]{box-shadow:0 0 0 4px #ffd66b2e, var(--shadow-soft);border-color:#ffe0a0}.qm-card[data-phase=ready]{border-color:#c4f0dd}.qm-card[data-phase=locked]{box-shadow:0 0 0 4px #7fe3bd38, var(--shadow-soft);background:#fbfffd;border-color:#c4f0dd}.qm-top{justify-content:space-between;align-items:center;gap:10px;min-height:26px;display:flex}.qm-top .eyebrow{white-space:nowrap}.qm-main{align-items:center;gap:14px 22px;margin-top:12px;display:grid}@media (min-width:640px){.qm-main{grid-template-columns:minmax(0,1fr) auto}}.qm-head{font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-ink);margin-top:18px;font-size:1.32rem;font-weight:800;line-height:1.12}.qm-sm .qm-head{letter-spacing:-.005em;margin-top:0;font-size:.82rem}.qm-md .qm-head{margin-top:16px;font-size:1.2rem}.qm-sm[data-phase=extended] .qm-head{color:#7a5200}.qm-sm[data-phase=ready] .qm-head,.qm-sm[data-phase=locked] .qm-head{color:var(--color-mint-deep)}.qm-sub{color:var(--color-ink-2);min-height:2.8em;margin-top:4px;font-size:.9rem;line-height:1.4}.qm-md .qm-sub{min-height:1.4em}.qm-center{text-align:center}.qm-center .qm-top{flex-wrap:wrap;justify-content:center}.qm-center .qm-slots{justify-content:center}.qm-center .qm-main{justify-items:center}.qm-count{font-family:var(--font-mono);color:var(--color-ink);font-variant-numeric:tabular-nums;font-weight:800}.qm-count-of{color:var(--color-mute)}.qm-clock{text-align:left;min-width:9.5rem}@media (min-width:640px){.qm-clock{text-align:right}}.qm-clock .timer{color:var(--color-ink);margin-top:2px;font-size:2.6rem;line-height:1;display:block}.qm-clock-note{color:var(--color-mute);min-height:1.1em;margin-top:4px;font-size:.72rem}.qm-badge{height:26px;font-family:var(--font-mono);letter-spacing:.12em;white-space:nowrap;border:1px solid #0000;border-radius:999px;align-items:center;gap:.35rem;padding:0 .7rem;font-size:.68rem;font-weight:800;transition:opacity .22s;display:inline-flex}.qm-badge[data-tone=sun]{color:#7a5200;background:#fff4d1;border-color:#ffe0a0}.qm-badge[data-tone=mint]{background:var(--color-mint-soft);color:#0f6e4d;border-color:#c4f0dd}.qm-badge[data-tone=lavender]{background:var(--color-lavender-soft);color:#4b35c9;border-color:#dcd3ff}.qm-badge[data-hidden]{opacity:0}.qm-badge-pop{animation:.52s cubic-bezier(.2,1.5,.35,1) both qm-badge-in}.qm-slots{align-items:center;gap:var(--qm-gap);display:flex}.qm-slot{width:var(--qm-size);height:var(--qm-size);border-radius:999px;flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.qm-slot[data-state=empty]{background:var(--color-paper);color:#c8c1b3;border:2px dashed #d8d2c6}.qm-sm .qm-slot[data-state=empty]{border-width:1.5px}.qm-card[data-phase=extended] .qm-slot[data-state=empty],.qm-waiting .qm-slot[data-state=empty]{color:#e0a92a;background:#fffaf0;border-color:#f2c24f;animation:1.6s ease-in-out infinite qm-wait}.qm-slot[data-state=filled],.qm-slot[data-state=mine]{--c1:#c9bcff;--c2:#9c86ff;--c3:#7b61ff;background:radial-gradient(120% 120% at 30% 22%, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);color:#fff;box-shadow:inset 0 -3px #0000001f,inset 0 2px #ffffff73,0 6px 14px -8px #1d1c2273}.qm-slot[data-state=filled]:before,.qm-slot[data-state=mine]:before{content:"";filter:blur(.4px);pointer-events:none;background:#ffffff8c;border-radius:999px;width:42%;height:26%;position:absolute;top:11%;left:18%}.qm-sm .qm-slot[data-state=filled]:before{display:none}.qm-slot[data-c="1"]{--c1:#bfe5ff;--c2:#7cc6ff;--c3:#2f8fe0}.qm-slot[data-c="2"]{--c1:#c4f6e2;--c2:#7fe3bd;--c3:#1fa877}.qm-slot[data-c="3"]{--c1:#ffe9a8;--c2:#ffd66b;--c3:#f0a81c}.qm-slot[data-state=mine]{box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--color-mint-deep), 0 8px 18px -8px #1fa87799}.qm-slot[data-state=mine]:before{display:none}.qm-slot img,.qm-slot .qm-avatar{object-fit:cover;border-radius:999px;width:100%;height:100%;position:relative}.qm-slot svg{width:46%;height:46%;position:relative}.qm-you{font-family:var(--font-mono);letter-spacing:.12em;color:#fff;background:var(--color-mint-deep);white-space:nowrap;border-radius:999px;padding:1px 6px;font-size:.56rem;font-weight:800;position:absolute;bottom:-9px;left:50%;transform:translate(-50%);box-shadow:0 0 0 2px #fff}.qm-slot[data-pop]{animation:.56s cubic-bezier(.2,1.6,.35,1) both qm-pop}.qm-slot[data-pop]:after{content:"";border:3px solid var(--c2,#9c86ff);pointer-events:none;border-radius:999px;animation:.62s ease-out both qm-ring;position:absolute;inset:-4px}.qm-locked .qm-slot[data-state=filled],.qm-locked .qm-slot[data-state=mine]{animation:.7s cubic-bezier(.2,1.4,.4,1) both qm-wave;animation-delay:calc(var(--i,0) * 70ms)}.qm-more{height:var(--qm-size);min-width:var(--qm-size);background:var(--color-paper-2);border:1px solid var(--color-line);font-family:var(--font-mono);font-weight:800;font-size:calc(var(--qm-size) * .3);color:var(--color-ink-2);border-radius:999px;flex:none;justify-content:center;align-items:center;padding:0 .6em;display:inline-flex}.qm-more[data-hidden]{visibility:hidden}.qm-sm .qm-more[data-hidden]{display:none}.qm-sm .qm-more{padding:0 .45em;font-size:.66rem}.qm-headline-pop{animation:.62s cubic-bezier(.2,1.5,.35,1) both qm-headline}@keyframes qm-pop{0%{transform:scale(.2)}55%{transform:scale(1.18)}80%{transform:scale(.95)}to{transform:scale(1)}}@keyframes qm-ring{0%{opacity:.9;transform:scale(.85)}to{opacity:0;transform:scale(1.45)}}@keyframes qm-wave{0%{transform:translateY(0)}40%{transform:translateY(-9px)scale(1.06)}to{transform:translateY(0)}}@keyframes qm-wait{0%,to{opacity:1;transform:scale(1)}50%{opacity:.72;transform:scale(.94)}}@keyframes qm-badge-in{0%{opacity:0;transform:scale(.4)rotate(-6deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes qm-headline{0%{opacity:0;transform:scale(.7)}60%{opacity:1;transform:scale(1.06)}to{transform:scale(1)}}