:root{
  --bg:#fff8f0; --card:#fff; --ink:#16121f; --muted:#6b6478; --line:#16121f;
  --wax:#e63946; --wax-dark:#9b1d27;
  --c:#8b5cf6; --c-soft:#efe7ff; /* current kind colour, set per screen */
  --r:22px; --bw:2.5px; --pop:4px 4px 0 var(--ink); --pop-sm:3px 3px 0 var(--ink);
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --hand:"Caveat","Bradley Hand","Segoe Print",cursive;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
body{min-height:100dvh;padding-bottom:calc(116px + env(safe-area-inset-bottom))}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
.banner{background:var(--ink);color:#fff;font-size:12.5px;padding:7px 14px;text-align:center}
.banner button{margin-left:8px;background:#fff2;border:1px solid #fff5;color:#fff;border-radius:999px;padding:1px 10px;cursor:pointer}

/* top + tab bar */
.top{display:flex;align-items:center;justify-content:space-between;max-width:560px;margin:0 auto;padding:14px 18px 6px}
.brand{display:flex;align-items:center;gap:8px;font:800 24px var(--display);text-decoration:none;letter-spacing:-.6px}
.seal-mini{width:36px;height:36px;display:block;flex:none;border-radius:10px;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.icon-btn{width:40px;height:40px;border-radius:50%;border:var(--bw) solid var(--ink);background:#fff;display:grid;place-items:center;cursor:pointer;font-size:18px;box-shadow:var(--pop-sm);text-decoration:none}
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));width:min(400px,calc(100% - 28px));height:72px;display:flex;align-items:center;justify-content:space-around;background:#fff;border:var(--bw) solid var(--ink);border-radius:24px;box-shadow:4px 5px 0 var(--ink);z-index:20}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:#8a8494;text-decoration:none;font:700 12.5px var(--sans);-webkit-tap-highlight-color:transparent}
.tabbar .ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tabbar .pill{width:54px;height:32px;border-radius:16px;display:grid;place-items:center;border:2px solid transparent;transition:background .15s}
.tabbar a[aria-current=page]{color:var(--ink)}
.tabbar a[aria-current=page] .pill{background:#ece4ff;border-color:var(--ink)}
.tabbar a.seal-tab{color:var(--ink)}
.tabbar .fab{width:66px;height:66px;margin-top:-40px;margin-bottom:2px;border-radius:21px;background:#f9e15f;border:var(--bw) solid var(--ink);box-shadow:3px 4px 0 var(--ink);display:grid;place-items:center;transform:rotate(-4deg);transition:transform .15s}
.tabbar .fab .ico{width:32px;height:32px;stroke-width:2.8}
.tabbar a.seal-tab:active .fab{transform:rotate(-4deg) translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.tabbar a.seal-tab[aria-current=page] .fab{transform:rotate(-4deg) scale(1.04)}
main{max-width:560px;margin:0 auto;padding:6px 18px 28px}

/* type */
h1{font:800 40px/1.02 var(--display);letter-spacing:-1.4px;margin:10px 0 8px}
h2{font:800 26px/1.1 var(--display);letter-spacing:-.6px;margin:0 0 10px}
h3{font:700 18px var(--display);margin:0 0 6px}
.lede{color:var(--muted);margin:0 0 20px;font-size:17px}
.subtle{font-size:13.5px;color:var(--muted);font-weight:500}
.center{text-align:center}

/* cards & buttons */
.card{background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);padding:18px;box-shadow:var(--pop);margin-bottom:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:var(--bw) solid var(--ink);border-radius:999px;padding:14px 22px;font:600 16px var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:var(--pop-sm);transition:transform .08s,box-shadow .08s;background:#fff;user-select:none;-webkit-user-select:none}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn.primary{background:var(--ink);color:#fff}
.btn.hot{background:var(--wax);color:#fff}
.btn.kind{background:var(--c);color:var(--c-on,#fff)}
.btn.small{padding:9px 15px;font-size:14px}
.btn.block{width:100%}
.btn.big{padding:18px 24px;font-size:18px}
.btn[disabled]{opacity:.45;pointer-events:none}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.actions.center{justify-content:center}
.linkish{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:13px;padding:0}

/* inputs */
.big-input{width:100%;border:var(--bw) solid var(--ink);border-radius:18px;background:#fff;padding:16px 18px;font:700 22px var(--display);outline:none;box-shadow:var(--pop-sm)}
.big-input:focus{box-shadow:4px 4px 0 var(--c)}
.err{color:var(--wax);font-size:14px;font-weight:600;margin-top:8px;min-height:1px}
.helper{font-size:13.5px;color:var(--muted);margin-top:10px;display:flex;gap:6px;align-items:center}
select.big-input{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2316121f' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") no-repeat right 18px center}

/* welcome / age gate */
.welcome{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:space-between;padding:calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
  background:radial-gradient(120% 80% at 10% 0%,#ffd166 0%,transparent 55%),radial-gradient(100% 70% at 100% 30%,#ff5c8a 0%,transparent 60%),radial-gradient(120% 80% at 30% 100%,#8b5cf6 0%,transparent 60%),#ff8a5c;color:#fff;overflow:auto}
.welcome .inner{max-width:440px;margin:0 auto;width:100%}
.welcome h1{font-size:52px;color:#fff;text-shadow:0 2px 0 #16121f40}
.welcome .lede{color:#fff;opacity:.95;font-weight:500}
.welcome .btn{box-shadow:var(--pop)}
.welcome .legal{font-size:12px;opacity:.9;text-align:center;margin-top:14px}
.welcome .legal a{color:#fff}
.floaty{display:flex;justify-content:center;margin:20px 0}
.floaty .envelope{animation:float 3.2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.sticker{position:absolute;font-size:34px;animation:float 4s ease-in-out infinite}
.dob{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;margin:16px 0}
.dob .big-input{color:var(--ink)}

/* compose stepper */
.steps{display:flex;gap:6px;margin:6px 0 18px}
.steps i{flex:1;height:6px;border-radius:9px;background:#16121f1a}
.steps i.on{background:var(--c)}
.step-head{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.back{border:0;background:none;font-size:15px;font-weight:700;color:var(--muted);cursor:pointer;padding:6px 0}
.kinds{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kind-tile{position:relative;text-align:left;border:var(--bw) solid var(--ink);border-radius:20px;padding:16px 14px 14px;background:var(--k);box-shadow:var(--pop);cursor:pointer;min-height:118px;transition:transform .12s}
.kind-tile:hover{transform:translateY(-2px) rotate(-1deg)}
.kind-tile:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.kind-tile .e{font-size:34px;line-height:1;display:block;margin-bottom:10px}
.kind-tile b{font:800 18px var(--display);display:block;letter-spacing:-.3px}
.kind-tile small{font-size:12.5px;opacity:.8;line-height:1.3;display:block;margin-top:2px}
.write-card{background:var(--c);border:var(--bw) solid var(--ink);border-radius:26px;padding:18px;box-shadow:var(--pop);color:#fff;position:relative}
.write-card.light{color:var(--ink)}
.write-card .to{font:800 15px var(--display);opacity:.9;margin-bottom:6px}
.write-card textarea{width:100%;min-height:210px;border:0;background:transparent;resize:none;outline:none;font:700 25px/1.3 var(--display);color:inherit;letter-spacing:-.3px}
.write-card textarea::placeholder{color:inherit;opacity:.55}
.write-card .foot{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;opacity:.9}
.ring{width:28px;height:28px}
.prompts{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:none}
.prompts::-webkit-scrollbar{display:none}
.prompt{flex:none;border:2px solid var(--ink);border-radius:999px;background:#fff;padding:7px 12px;font-size:13.5px;font-weight:600;cursor:pointer}
.when-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.when{border:var(--bw) solid var(--ink);border-radius:18px;background:#fff;padding:14px;text-align:left;cursor:pointer;box-shadow:var(--pop-sm)}
.when b{display:block;font:800 17px var(--display)}
.when small{color:var(--muted);font-size:12.5px}
.when[aria-pressed=true]{background:var(--c);color:var(--c-on,#fff)}
.when[aria-pressed=true] small{color:inherit;opacity:.85}
.when .e{font-size:22px}
input[type=datetime-local].big-input{font-size:17px}
.hint-toggle{margin-top:14px}

/* hold to seal */
.hold{position:relative;overflow:hidden}
.hold .fill{position:absolute;inset:0;background:#ffffff38;transform-origin:left;transform:scaleX(0)}
.hold.holding .fill{transition:transform .9s linear;transform:scaleX(1)}

/* envelope */
.env-wrap{display:flex;justify-content:center;margin:6px 0 16px;perspective:900px;position:relative}
.envelope{position:relative;width:min(300px,78vw);aspect-ratio:1.5;background:var(--c);border:var(--bw) solid var(--ink);border-radius:18px;box-shadow:var(--pop);cursor:pointer}
.envelope::before{content:"";position:absolute;inset:0;border-radius:15px;background:linear-gradient(to top right,transparent 49.3%,#16121f55 49.6%,transparent 50.4%),linear-gradient(to top left,transparent 49.3%,#16121f55 49.6%,transparent 50.4%);pointer-events:none}
.flap{position:absolute;left:-1px;right:-1px;top:-1px;height:60%;transform-origin:top;transition:transform .7s cubic-bezier(.5,0,.2,1);z-index:2;pointer-events:none}
.flap::before{content:"";position:absolute;inset:0;background:var(--c);filter:brightness(1.08);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:16px 16px 0 0}
.flap::after{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%,50% calc(100% - 3px),calc(100% - 4px) 1px,4px 1px,50% calc(100% - 3px));background:var(--ink)}
.wax{position:absolute;left:50%;top:60%;width:86px;height:86px;margin:-43px 0 0 -43px;z-index:3;transition:transform .5s,opacity .5s;filter:drop-shadow(2px 3px 0 #16121f40)}
.wax img{width:100%;height:100%;display:block}
.env-to{position:absolute;left:0;right:0;bottom:10%;text-align:center;font:800 15px var(--display);color:#fff;z-index:1;text-shadow:1px 1px 0 #16121f66}
.envelope.light .env-to{color:var(--ink);text-shadow:none}
.envelope.opening .wax{transform:scale(1.5) rotate(-30deg);opacity:0}
.envelope.opening .flap{transform:rotateX(180deg);z-index:0}
.envelope.sealing .wax{animation:stamp .55s cubic-bezier(.3,1.7,.5,1) both}
@keyframes stamp{0%{transform:scale(2.6);opacity:0}100%{transform:scale(1);opacity:1}}
.envelope.nope{animation:nope .45s}
@keyframes nope{20%{transform:translateX(-10px) rotate(-3deg)}40%{transform:translateX(10px) rotate(3deg)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.wiggle .envelope{animation:wiggle 2.6s ease-in-out infinite}
@keyframes wiggle{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-3deg)}92%{transform:rotate(3deg)}96%{transform:rotate(-1.5deg)}}
.bubble{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font:700 13.5px var(--sans);padding:7px 12px;border-radius:999px;white-space:nowrap;z-index:5;animation:pop .25s}
@keyframes pop{from{transform:translateX(-50%) scale(.6);opacity:0}}

/* capsule page */
.badge{display:inline-flex;gap:6px;align-items:center;font:800 13px var(--display);background:var(--c-soft);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:4px 12px}
.fromto{font:800 24px var(--display);letter-spacing:-.4px;margin:10px 0 2px}
.teaser{font:600 24px var(--hand);color:var(--muted);margin:2px 0 0}
.countdown{display:flex;justify-content:center;gap:8px;margin:16px 0 4px}
.countdown div{background:#fff;border:var(--bw) solid var(--ink);box-shadow:var(--pop-sm);border-radius:16px;min-width:66px;padding:10px 4px 8px;text-align:center}
.countdown b{display:block;font:800 30px/1 var(--display);font-variant-numeric:tabular-nums}
.countdown span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
.opens{color:var(--muted);font-size:14.5px;font-weight:500}
.row-input{display:flex;gap:8px}
.row-input input{flex:1;min-width:0;border:var(--bw) solid var(--ink);border-radius:999px;padding:12px 16px;outline:none;font-weight:600}
.fp{font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);word-break:break-all}
.proof{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:700;color:#137a48;background:#dff7ea;border:2px solid #137a48;border-radius:999px;padding:4px 12px}
.letter{background:var(--c);color:#fff;border:var(--bw) solid var(--ink);border-radius:26px;box-shadow:var(--pop);padding:24px 22px 20px;font:700 26px/1.3 var(--display);letter-spacing:-.3px;white-space:pre-wrap;word-wrap:break-word;animation:rise .6s .15s both;position:relative}
.letter.light{color:var(--ink)}
@keyframes rise{from{opacity:0;transform:translateY(30px) rotate(-2deg) scale(.96)}to{opacity:1;transform:none}}
.letter .sig{display:block;text-align:right;font:600 28px var(--hand);margin-top:12px;opacity:.9}
.guess-sticker{background:#fff7c2;border:var(--bw) solid var(--ink);border-radius:16px;padding:12px 14px;box-shadow:var(--pop-sm);transform:rotate(-1.5deg);margin:18px 6px}
.guess-sticker b{font:800 13px var(--display);text-transform:uppercase;letter-spacing:.6px;display:block;color:var(--muted)}
.guess-sticker span{font:600 24px var(--hand)}
.verdict{display:flex;gap:10px;justify-content:center;margin-top:8px}
.stamp{display:inline-block;border:4px solid currentColor;border-radius:10px;padding:4px 14px;font:800 24px var(--display);letter-spacing:1px;transform:rotate(-7deg);text-transform:uppercase;animation:stampin .4s cubic-bezier(.3,1.7,.5,1)}
@keyframes stampin{from{transform:rotate(-7deg) scale(2.2);opacity:0}}
.stamp.called{color:#137a48} .stamp.missed{color:var(--wax)}
.reacts{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.reacts button{border:2px solid var(--ink);background:#fff;border-radius:999px;padding:6px 9px;font-size:19px;cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:transform .1s}
.reacts button:hover{transform:scale(1.12) rotate(-6deg)}
.reacts button[aria-pressed=true]{background:var(--c-soft)}
.reacts button small{font:700 12px var(--sans);color:var(--muted);margin-left:3px}
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:46px;background:#fff;border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:var(--pop);padding:6px;z-index:30;min-width:190px}
.menu-pop button{display:block;width:100%;text-align:left;border:0;background:none;padding:10px 12px;border-radius:10px;font-weight:600;cursor:pointer}
.menu-pop button:hover{background:var(--c-soft)}
.cap-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}

/* lists */
.seg{display:inline-flex;border:var(--bw) solid var(--ink);border-radius:999px;padding:4px;background:#fff;margin-bottom:16px;box-shadow:var(--pop-sm)}
.seg a{padding:8px 16px;border-radius:999px;text-decoration:none;font-weight:700;font-size:14px}
.seg a[aria-current=true]{background:var(--ink);color:#fff}
.cap-item{display:flex;gap:12px;align-items:center;padding:12px;border:var(--bw) solid var(--ink);border-radius:18px;background:#fff;box-shadow:var(--pop-sm);margin-bottom:10px;text-decoration:none}
.cap-item .dot{width:46px;height:46px;border-radius:14px;border:2px solid var(--ink);display:grid;place-items:center;font-size:22px;flex:none}
.cap-item .mid{flex:1;min-width:0}
.cap-item b{font:800 16px var(--display);display:block}
.cap-item small{color:var(--muted);font-size:12.5px}
.pill{font:700 12px var(--sans);border:2px solid var(--ink);border-radius:999px;padding:3px 10px;white-space:nowrap;background:#fff}
.pill.open{background:#c9f7dd}
.empty{text-align:center;padding:30px 10px}
.empty .e{font-size:48px}

/* modal, toast, confetti */
.modal{position:fixed;inset:0;background:#16121f99;display:flex;align-items:flex-end;justify-content:center;padding:14px;z-index:50}
@media (min-width:600px){.modal{align-items:center}}
.modal-card{background:#fff;border:var(--bw) solid var(--ink);border-radius:26px;padding:22px;max-width:440px;width:100%;box-shadow:var(--pop);animation:sheet .25s cubic-bezier(.2,1.2,.4,1);max-height:90dvh;overflow:auto}
@keyframes sheet{from{transform:translateY(40px);opacity:0}}
.radio{display:flex;gap:10px;align-items:center;border:2px solid var(--ink);border-radius:14px;padding:10px 12px;margin-bottom:8px;cursor:pointer;font-weight:600}
.radio:has(input:checked){background:var(--c-soft)}
.radio input{accent-color:var(--ink);width:18px;height:18px}
.toast{position:fixed;left:50%;bottom:calc(116px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:999px;font-weight:600;font-size:14px;z-index:60;animation:pop .2s;white-space:nowrap}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:45}
.prose h3{margin-top:18px}
.prose p,.prose li{font-size:15px}
.prose ul{padding-left:20px}
.house-rule{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.house-rule .e{font-size:26px;line-height:1}
@media (max-width:420px){h1{font-size:34px}.welcome h1{font-size:44px}.countdown div{min-width:60px}.countdown b{font-size:26px}.letter{font-size:23px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

body.focus .tabbar{display:none}
body.focus{padding-bottom:20px}

/* reveal: paper slides out of the envelope */
.peek{position:absolute;left:8%;right:8%;top:10%;height:80%;background:#fff;border:var(--bw) solid var(--ink);border-radius:12px;z-index:1;transition:transform .6s cubic-bezier(.3,1.3,.5,1);padding:14px;display:flex;flex-direction:column;gap:8px}
.peek i{display:block;height:9px;border-radius:9px;background:#16121f22}
.peek i:nth-child(2){width:80%}.peek i:nth-child(3){width:60%}
.envelope.opening .peek{transform:translateY(-78%) rotate(-3deg)}
.envelope.opening{animation:hop .5s .1s}
@keyframes hop{30%{transform:translateY(-10px) scale(1.03)}}
.flash{position:fixed;inset:0;background:var(--c);z-index:44;pointer-events:none;animation:flash .7s forwards}
@keyframes flash{0%{opacity:0}35%{opacity:.9}100%{opacity:0}}

/* reveal picker */
.rv-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.reveals{display:flex;gap:10px;overflow-x:auto;padding:2px 4px 8px 2px;scrollbar-width:none;margin:0 -4px}
.reveals::-webkit-scrollbar{display:none}
.rv{flex:none;width:118px;text-align:left;border:var(--bw) solid var(--ink);border-radius:16px;background:#fff;padding:10px;cursor:pointer;position:relative;box-shadow:var(--pop-sm)}
.rv .e{font-size:26px;display:block}
.rv b{font:800 14px var(--display);display:block;margin-top:4px}
.rv small{font-size:11.5px;color:var(--muted);line-height:1.25;display:block}
.rv .tag{position:absolute;top:8px;right:8px;font:800 10px var(--sans);letter-spacing:.5px;border:1.5px solid var(--ink);border-radius:999px;padding:1px 6px;background:#c9f7dd}
.rv .tag.plus{background:linear-gradient(90deg,#facc15,#ff5c8a);color:#16121f}
.rv[aria-pressed=true]{background:var(--c-soft);outline:3px solid var(--c);outline-offset:2px}
/* effects */
.fx{position:fixed;inset:0;z-index:46;transition:opacity .35s}
.fx.out{opacity:0}
.fx-pass{pointer-events:none;overflow:hidden}
.fx-night{background:#16121f}
.fx-night canvas{width:100%;height:100%;display:block}
.fx-dim{background:#16121fd9;display:grid;place-items:center}
.fx-center{text-align:center;color:#fff}
.fx-label{font:800 26px var(--display);margin-top:10px}
.balloon{font-size:150px;line-height:1;cursor:pointer;transform:scale(var(--s,1));transition:transform .18s cubic-bezier(.3,1.6,.5,1);user-select:none;-webkit-user-select:none;outline:none;filter:drop-shadow(0 10px 20px #0006)}
.mic{font-size:120px;line-height:1}
.slam{font:800 64px/0.95 var(--display);letter-spacing:-2px;color:#facc15;text-shadow:4px 4px 0 #e63946;opacity:0;transform:scale(3) rotate(-8deg);margin-top:10px}
.slam.in{animation:slam .35s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes slam{to{opacity:1;transform:scale(1) rotate(-6deg)}}
.scratch{position:absolute;border-radius:26px;cursor:grab;touch-action:none;z-index:2}

/* accounts */
.tick{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#1d9bf0;color:#fff;font:800 11px var(--sans);vertical-align:2px;border:1.5px solid var(--ink)}
.phone-row{display:grid;grid-template-columns:auto 1fr;gap:8px}
.phone-row .cc{width:auto;font-size:18px;color:var(--ink);padding-right:40px;background-position:right 14px center;cursor:pointer}
.welcome .big-input{color:var(--ink)}
.big-input.code{letter-spacing:12px;text-align:center;font-size:30px}
.signed{display:flex;gap:12px;align-items:center}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--c);color:var(--c-on,#fff);border:var(--bw) solid var(--ink);display:grid;place-items:center;font:800 18px var(--display);flex:none}
.avatar.big{width:58px;height:58px;font-size:26px}
.avatar-btn{font:800 17px var(--display);background:var(--c-soft)}
.blocked-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed #16121f33}
.install{display:flex;gap:12px;align-items:flex-start;margin-top:16px}

.err:empty{display:none!important}
.dev-note{background:#fff;color:var(--ink);border:var(--bw) solid var(--ink);border-radius:14px;padding:10px 12px;margin-top:12px;font-size:14px;box-shadow:var(--pop-sm)}
.card.restricted{background:#fff3cd}

/* parties */
.party-hero{background:linear-gradient(135deg,#efe7ff,#ffe3ec 60%,#fff7c2)}
.party-emojis{font-size:40px;letter-spacing:6px}.party-emojis.big{font-size:84px}
.ideas{margin:6px 0 0;padding-left:0;list-style:none}.ideas li{padding:6px 0;border-bottom:1px dashed #16121f22}
.q-list{display:flex;flex-direction:column;gap:8px}
.q-chip{display:flex;gap:10px;align-items:center;text-align:left;border:2px solid var(--ink);border-radius:14px;background:#fff;padding:10px 12px;font-weight:600;cursor:pointer}
.q-chip[aria-pressed=true]{background:var(--c-soft);box-shadow:var(--pop-sm)}
.q-chip[aria-pressed=false]{opacity:.65}
.mini-select{border:2px solid var(--ink);border-radius:999px;padding:0 10px;background:#fff;font-weight:600}
.members{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.mem{display:flex;flex-direction:column;align-items:center;width:56px;position:relative}
.mem small{font-size:11.5px;font-weight:600;max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem i{position:absolute;top:-4px;right:0;font-style:normal;font-size:15px}
.mem:not(.sealed) .avatar{opacity:.55}
.mem .avatar,.ans-card .avatar,.lb-row .avatar,.pick-m .avatar{color:#fff}
.q-card{position:relative;padding-left:52px}
.q-num{position:absolute;left:14px;top:16px;width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font:800 13px var(--display);border:2px solid var(--ink)}
.pick{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.pick-m{display:flex;gap:6px;align-items:center;border:2px solid var(--ink);border-radius:999px;background:#fff;padding:4px 12px 4px 4px;font-weight:700;cursor:pointer}
.pick-m .avatar{width:28px;height:28px;font-size:13px;border-width:2px}
.pick-m[aria-pressed=true]{background:var(--c);color:#fff;box-shadow:var(--pop-sm)}
.ans{width:100%;border:2px solid var(--ink);border-radius:14px;padding:12px 14px;font-weight:600;margin-top:8px;outline:none}
.my-ans{padding:8px 0;border-bottom:1px dashed #16121f22}.my-ans small{display:block;color:var(--muted)}.my-ans b{font:700 18px var(--display)}
.sealed-card{background:#efe7ff}
.deck-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.q-big{background:var(--c);color:#fff}.q-big small{opacity:.85;font-weight:700}.q-big h2{font-size:28px;margin:6px 0 0}
.top-pick{background:#fff7c2;border:2px solid var(--ink);border-radius:14px;padding:10px 14px;margin:-4px 0 14px;font-weight:600;transform:rotate(-1deg)}
.answers{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.ans-card{display:flex;gap:12px;align-items:center;background:#fff;border:var(--bw) solid var(--ink);border-radius:18px;padding:12px;box-shadow:var(--pop-sm);animation:rise .45s var(--d) both}
.ans-card .mid{flex:1;min-width:0}.ans-card small{color:var(--muted);font-weight:700}.ans-card b{display:block;font:700 19px/1.25 var(--display)}
.vote{border:2px solid var(--ink);border-radius:999px;background:#fff;padding:8px 12px;font-weight:800;cursor:pointer;min-width:58px}
.vote.on{background:#c9f7dd;box-shadow:var(--pop-sm)}
.votes{font-weight:800;color:var(--muted)}
.podium{display:flex;flex-direction:column;gap:8px}
.lb-row{display:flex;gap:12px;align-items:center;padding:10px;border-radius:16px;border:2px solid var(--ink);background:#fff}
.lb-row.first{background:#fff7c2;box-shadow:var(--pop-sm);transform:scale(1.02)}
.lb-row .rank{font-size:24px;width:32px;text-align:center}.lb-row b{flex:1;font:800 18px var(--display)}
.dob3{display:grid;grid-template-columns:1fr 1.2fr 1.3fr;gap:8px;margin:16px 0}

/* ---- seal: home + bottom sheet (vibe → write) ---- */
.write-cta{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#f9e15f;border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--pop);padding:16px;cursor:pointer;color:var(--ink);transition:transform .12s}
.write-cta:active{transform:translate(2px,3px);box-shadow:var(--pop-sm)}
.write-cta .e{font-size:34px;line-height:1}
.write-cta .tx{flex:1}.write-cta b{display:block;font:800 19px var(--display)}.write-cta small{font-size:13.5px;opacity:.8}
.write-cta .arr{font:800 26px var(--display)}
.tag-lock{font-size:16px}
.sheet-bg{position:fixed;inset:0;z-index:60;background:#16121f80;display:flex;align-items:flex-end;justify-content:center;animation:sheetFade .18s ease-out}
.sheet-bg.out{opacity:0;transition:opacity .18s}
.sheet{width:100%;max-width:560px;max-height:94dvh;overflow:auto;background:var(--bg);border:var(--bw) solid var(--ink);border-bottom:0;border-radius:26px 26px 0 0;padding:10px 20px calc(22px + env(safe-area-inset-bottom));animation:sheetUp .26s cubic-bezier(.2,.9,.3,1.05)}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:#16121f33;margin:0 auto 12px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sheet-head h2{margin:0}
.sheet .x{border:0;background:none;font-size:22px;cursor:pointer;color:var(--ink);padding:4px}
.sheet .kinds{margin:0}
.sheet .write-card{margin:0}
.sheet .write-card textarea{min-height:200px}
.sheet .prompts{margin-top:8px}
.vibe-tag{border:2px solid var(--ink);background:#fff;border-radius:999px;padding:4px 12px;font:800 13px var(--display)}
.sheet-label{font:700 12px var(--sans);letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetFade{from{opacity:0}to{opacity:1}}
.sheet .write-card{background:#fff}

/* ---- prediction parties (statements + swipes) ---- */
.p-hero{position:relative;overflow:hidden;background:#7b5cf0;color:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--pop);padding:20px 18px}
.p-hero h1{color:#fff;margin:12px 0 8px;font-size:32px}
.p-hero p{opacity:.93;margin:0 0 16px;font-size:15px}
.p-tag{display:inline-block;background:#f9e15f;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:3px 10px;font:800 11.5px var(--sans);letter-spacing:.6px;text-transform:uppercase}
.p-orb{position:absolute;right:-6px;top:4px;font-size:56px;transform:rotate(14deg)}
.p-cta,.btn.yellow{background:#f9e15f;color:var(--ink)}
.how{display:flex;gap:12px;align-items:center;margin:10px 0}
.how .n{width:36px;height:36px;flex:none;border-radius:12px;border:2px solid var(--ink);display:grid;place-items:center;font:800 16px var(--display)}
.how b{display:block;font-size:15px}.how small{color:var(--muted);font-size:13px}
.cap-item .arr{font:800 20px var(--display)}
.field-label{display:block;font:800 15px var(--display);margin-bottom:6px}
.p-title{display:flex;gap:12px;align-items:center;margin:8px 0 16px}
.p-title .e{font-size:40px}.p-title h1{margin:0;font-size:28px}.p-title p{margin:2px 0 0}
.swipe-cta{display:flex;gap:14px;align-items:center;width:100%;margin-top:14px;background:var(--ink);color:#fff;border:var(--bw) solid var(--ink);border-radius:20px;box-shadow:var(--pop);padding:14px;text-align:left;cursor:pointer}
.swipe-cta .stack{position:relative;width:46px;height:54px;flex:none}
.swipe-cta .stack i{position:absolute;inset:0;border:2px solid #fff;border-radius:10px;background:#f9e15f}
.swipe-cta .stack i:first-child{background:#ffc2d4;transform:rotate(9deg)}
.swipe-cta .mid{flex:1}.swipe-cta b{font:800 18px var(--display);display:block}.swipe-cta small{opacity:.8;font-size:12.5px}
.swipe-cta .go{color:#f9e15f;font:800 16px var(--display);white-space:nowrap}
.caught{margin-top:14px;background:#dff7ea;border:2px solid #137a48;color:#0c5a34;border-radius:16px;padding:12px 14px;font-weight:600;font-size:14px}
.st-item{display:flex;gap:10px;align-items:flex-start;background:#fff;border:2px solid var(--ink);border-radius:16px;padding:12px;margin-bottom:10px}
.st-item .mid{flex:1;min-width:0}.st-item b{display:block;font-size:15.5px;line-height:1.3}
.st-item small{display:block;color:var(--muted);font-size:12.5px;margin:3px 0 6px}
.pav{flex:none;border-radius:50%;border:2px solid var(--ink);display:inline-grid;place-items:center;font-family:var(--display);font-weight:800;color:var(--ink)}
.call{display:inline-block;font:700 12px var(--sans);border-radius:999px;padding:3px 9px;border:2px solid var(--ink)}
.call.yes{background:#f9e15f}.call.no{background:#fff}.call.todo{background:#ece4ff;border-style:dashed}
.st-more{border:0;background:none;font-size:20px;cursor:pointer;color:var(--ink);padding:0 4px;line-height:1}
.empty-st{text-align:center;background:#fff;border:2px dashed #16121f55;border-radius:18px;padding:22px}
.empty-st .e{font-size:38px}.empty-st p{margin:4px 0 0}
.members{display:flex;flex-wrap:wrap;gap:12px}
.mem{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;text-align:center}
.mem small{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:64px}
.st-input{position:relative;background:#fff;border:var(--bw) solid var(--ink);border-radius:20px;box-shadow:var(--pop-sm);padding:14px}
.st-input textarea{width:100%;min-height:96px;border:0;outline:none;resize:none;background:transparent;font:800 21px/1.3 var(--display);letter-spacing:-.3px;color:var(--ink)}
.st-input small{position:absolute;right:14px;bottom:8px;color:var(--muted);font-size:12px}
.pick-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:10px 12px;margin-bottom:8px;cursor:pointer;font:600 14.5px var(--sans);color:var(--ink)}
.pick-row .e{font-size:20px}.pick-row .tx{flex:1}
.pick-row .plus{width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);background:#f9e15f;display:grid;place-items:center;font-weight:800}
.opt-row{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:#fff;border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:var(--pop-sm);padding:12px 14px;margin-bottom:10px;cursor:pointer;color:var(--ink)}
.opt-row .e{font-size:22px}.opt-row b{display:block;font-size:15px}.opt-row small{color:var(--muted);font-size:12.5px}
.plus-table{display:grid;grid-template-columns:1.6fr .6fr .6fr;row-gap:10px;font-size:14px;font-weight:600}
.plus-table>*:nth-child(3n+2),.plus-table>*:nth-child(3n){text-align:center}.plus-table .pl{color:#7b5cf0}
/* swipe deck */
body.focus .deck{min-height:calc(100dvh - 20px)}
.deck{background:#2a2140;color:#fff;margin:-6px -18px -28px;padding:16px 18px 30px;min-height:100dvh;display:flex;flex-direction:column}
.deck-top{display:flex;justify-content:space-between;align-items:center;font:700 14px var(--sans);opacity:.85}
.deck .x{border:0;background:none;color:#fff;font-size:22px;cursor:pointer}
.deck-stage{position:relative;height:400px;margin:26px 6px 0}
.scard{position:absolute;inset:0;background:#fff;color:var(--ink);border:var(--bw) solid var(--ink);border-radius:26px;box-shadow:5px 6px 0 #000;padding:20px;display:flex;flex-direction:column;touch-action:pan-y;user-select:none;transition:transform .26s ease,opacity .26s;--yes:0;--no:0}
.scard.under{transform:rotate(-4deg) scale(.96);background:#a8ecdc;box-shadow:none}
.scard .who{display:flex;align-items:center;gap:8px;font:600 13.5px var(--sans)}.scard .who .st-more{margin-left:auto}
.scard .big{font:800 31px/1.12 var(--display);letter-spacing:-.9px;margin:22px 0 auto}
.scard small{color:var(--muted);font-size:12.5px}
.stamp{position:absolute;top:44%;padding:3px 12px;border:3.5px solid;border-radius:12px;background:#fff;font:800 22px var(--display);letter-spacing:.5px;pointer-events:none}
.stamp.yes{left:16px;color:#17a36b;transform:rotate(-14deg);opacity:var(--yes)}
.stamp.no{right:16px;color:#e0413a;transform:rotate(14deg);opacity:var(--no)}
.scard.fly-yes{transform:translateX(140%) rotate(24deg)!important;opacity:0}
.scard.fly-no{transform:translateX(-140%) rotate(-24deg)!important;opacity:0}
.deck-btns{display:flex;justify-content:space-between;align-items:center;margin:28px 8px 0}
.round{width:76px;height:76px;border-radius:50%;border:var(--bw) solid var(--ink);box-shadow:3px 4px 0 #000;font:800 30px var(--sans);cursor:pointer;display:grid;place-items:center}
.round.no{background:#fff;color:#e0413a}.round.yes{background:#f9e15f;color:var(--ink)}
.round:active{transform:translate(2px,3px);box-shadow:1px 1px 0 #000}
.deck .hint{font:600 12.5px var(--sans);opacity:.75;text-align:center}
.deck-foot{text-align:center;opacity:.7;font-size:13px;margin-top:22px}
.deck.done{align-items:stretch;justify-content:center;text-align:center}
.deck.done .e{font-size:64px}.deck.done h1{color:#fff;margin:6px 0}.deck.done p{opacity:.85;margin:0 0 22px}
/* reveal */
.oracle{background:#7b5cf0;color:#fff;text-align:center;border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--pop);padding:16px}
.oracle .e{font-size:40px}.oracle small{display:block;font:800 12px var(--sans);letter-spacing:.8px;opacity:.85}
.oracle b{display:block;font:800 30px var(--display)}.oracle span{font-size:14px;opacity:.9}
.oracle.pending b{font-size:22px}
.res-card{background:#fff;border:var(--bw) solid var(--ink);border-radius:20px;box-shadow:var(--pop-sm);padding:14px;margin-bottom:12px}
.res-card .who{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.res-card .tx{display:block;font:800 17px/1.25 var(--display);margin:6px 0 10px}
.res-card .pct{display:flex;justify-content:space-between;align-items:baseline}.res-card .pct b{font:800 30px var(--display)}.res-card .pct span{font-size:12.5px;color:var(--muted)}
.bar{height:12px;border-radius:6px;border:2px solid var(--ink);background:#fff;overflow:hidden;margin:6px 0 8px}.bar i{display:block;height:100%;background:#f9e15f}
.res-card .mine{display:block;color:var(--muted);font-size:12.5px;margin-bottom:6px}
.did{display:flex;justify-content:space-between;align-items:center;font:600 13px var(--sans);margin-top:4px}
.res{font:700 12px var(--sans);border-radius:999px;padding:3px 9px;border:2px solid var(--ink)}
.res.yes{background:#dff7ea}.res.no{background:#ffd9e4}.res.open{background:#ece4ff;border-style:dashed}
.did-btns{display:flex;gap:8px;margin-top:10px}.did-btns .btn{flex:1}
a.back{text-decoration:none;color:var(--muted);display:inline-block}
body.deck-mode{background:#2a2140}
body.deck-mode header{display:none}
body.deck-mode .deck{margin-top:-6px;padding-top:calc(16px + env(safe-area-inset-top))}
.sec-h{display:flex;align-items:center;gap:8px;margin:24px 0 10px}
.sec-h .cnt{font:800 12px var(--sans);background:var(--ink);color:#fff;border-radius:999px;padding:2px 8px}
.oracle.small{padding:12px}.oracle.small b{font-size:24px}
.res-card .who .st-more{margin-left:auto}
.res-card.compact .tx{font-size:15.5px}
.past{margin-top:18px}.past summary{cursor:pointer;font:800 16px var(--display);padding:6px 0 12px}
.rchips{display:flex;flex-wrap:wrap;gap:8px}
.rchip{border:2px solid var(--ink);border-radius:999px;background:#fff;padding:7px 12px;font:600 13.5px var(--sans);cursor:pointer;color:var(--ink)}
.rchip[aria-pressed=true]{background:#f9e15f;box-shadow:2px 2px 0 var(--ink)}
.add-row{display:flex;gap:10px}.add-row .btn{flex:1;padding-left:10px;padding-right:10px;font-size:16px}
.seg-tabs{display:flex;gap:6px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:4px;margin-bottom:14px}
.seg-tabs button{flex:1;border:2px solid transparent;background:none;border-radius:10px;padding:9px 6px;font:700 13.5px var(--sans);color:var(--muted);cursor:pointer}
.seg-tabs button[aria-pressed=true]{background:#f9e15f;color:var(--ink);border-color:var(--ink)}
.st-input.note{background:#fff5f8}.st-input.note textarea{min-height:150px;font:600 18px/1.4 var(--sans);letter-spacing:0}
.st-item.note{background:#fff5f8}
.note-peek{font-size:13.5px;color:var(--muted);font-style:italic;margin:2px 0 6px;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.note-card{background:#fff5f8;border:var(--bw) solid var(--ink);border-radius:20px;box-shadow:var(--pop-sm);padding:16px;margin-bottom:12px}
.note-card .who{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}.note-card .who .st-more{margin-left:auto}
.note-text{font:600 18px/1.45 var(--sans);white-space:pre-wrap;margin:12px 0 8px;color:var(--ink)}
.note-sign{font:600 26px var(--hand);color:#c2185b;text-align:right}
.btn.wa{background:#25d366;color:#0b3d1f}
.inv-next{margin-top:20px;padding-top:14px;border-top:2px dashed #16121f33}
.invite-card{margin:6px 0 0;padding:18px}
.invite-card>b{display:block;font:800 18px var(--display)}
.invite-card .subtle{margin:6px 0 14px;line-height:1.45}
.add-row+.swipe-cta{margin-top:16px}
.p-title{margin:10px 0 18px}
.sec-h{margin:30px 0 12px!important}
.add-row .btn{min-height:56px}
.empty-st{padding:26px 20px}
.popper{display:inline-block;vertical-align:middle;flex:none}
.p-cta .popper{margin:-4px 2px -4px 0}
.p-orb{top:-2px;right:-4px;transform:rotate(8deg)}
.gemo{line-height:1;display:inline-block}
.p-title .e{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;border:var(--bw) solid var(--ink);background:#ece4ff;box-shadow:var(--pop-sm);flex:none}
.icon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.icon-opt{aspect-ratio:1;border:2px solid #16121f33;border-radius:14px;background:#fff;display:grid;place-items:center;cursor:pointer}
.icon-opt[aria-pressed=true]{border:var(--bw) solid var(--ink);background:#f9e15f;box-shadow:2px 2px 0 var(--ink)}
.empty-st .e{display:flex;justify-content:center}
.pk-link{display:block;margin:14px auto 0;color:#fff;font-weight:700;font-size:15px;text-decoration:none;background:#16121f33;border-radius:999px;padding:8px 14px}
.contacts-btn{margin-top:18px;background:#fff}
.or-line{display:flex;align-items:center;gap:10px;margin:14px 0 -4px;color:var(--muted);font-size:13px;font-weight:600}
.or-line::before,.or-line::after{content:"";flex:1;height:2px;background:#16121f1f}

/* ---- store apps only (html.native is set by native.js) ---- */
html.native .top{padding-top:env(safe-area-inset-top)}
html.native body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.native input,html.native textarea{-webkit-user-select:text;user-select:text}
.offline-sheet{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#fff8f0f2;padding:24px}
.offline-card{max-width:320px;text-align:center}
.offline-card h2{font:800 24px var(--display);margin:12px 0 6px}
.offline-card p{margin:0;opacity:.8;line-height:1.45}

/* WhatsApp sign-in */
.wa-wait{display:flex;align-items:center;gap:10px;margin-top:18px;padding:14px 16px;border-radius:16px;background:#ffffff26;color:#fff;font-weight:600}
.wa-dot{width:10px;height:10px;border-radius:50%;background:#25d366;box-shadow:0 0 0 0 #25d36699;animation:waPulse 1.4s infinite}
@keyframes waPulse{70%{box-shadow:0 0 0 10px #25d36600}100%{box-shadow:0 0 0 0 #25d36600}}
.btn.wa-btn{background:#25d366;border-color:#16121f;color:#06301a;text-decoration:none;text-align:center}
.wa-code{letter-spacing:.12em;user-select:all;-webkit-user-select:all}
.seo-intro{padding:24px 4px;max-width:640px}.seo-intro h1{font:800 34px/1.1 var(--display);margin:8px 0 12px}.seo-intro p{color:var(--muted)}

/* =====================================================================
   Look B2 "Lemon + ink" (9 Nov 2026): soft white cards, no outlines or
   hard shadows, lemon main buttons, black accents. Layout unchanged.
   ===================================================================== */
:root{
  --bg:#f7f5f0; --card:#fff; --muted:#77727f; --line:#e7e3db;
  --lemon:#f9e15f; --lemon-soft:#fdf3b8;
  --bw:0px; --r:22px;
  --pop:0 6px 24px rgba(22,18,31,.07); --pop-sm:0 3px 12px rgba(22,18,31,.06);
  --display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
h1{letter-spacing:-1.6px}h2{letter-spacing:-.8px}
.brand{letter-spacing:-.8px}
.seal-mini{border:0;box-shadow:0 3px 10px rgba(22,18,31,.15)}
.icon-btn{background:#fff;box-shadow:var(--pop-sm)}

/* tab bar: black dock, lemon active */
.tabbar{background:#16121f;border:0;box-shadow:0 14px 34px rgba(22,18,31,.28)}
.tabbar a{color:#8e8a99}
.tabbar a[aria-current=page]{color:#fff}
.tabbar a[aria-current=page] .pill{background:var(--lemon);border-color:transparent;color:#16121f}
.tabbar a.seal-tab{color:#fff}
.tabbar .fab{background:var(--lemon);color:#16121f;border:0;box-shadow:0 8px 22px rgba(249,225,95,.35);transform:none;border-radius:22px}
.tabbar a.seal-tab:active .fab{transform:scale(.96);box-shadow:none}
.tabbar a.seal-tab[aria-current=page] .fab{transform:scale(1.04)}

/* buttons: lemon = main, black = secondary, white = quiet */
.btn{background:#16121f;color:#fff;border:0;box-shadow:none;font-weight:700}
.btn:active{transform:scale(.97);box-shadow:none}
.btn.primary,.btn.kind,.btn.yellow,.p-cta{background:var(--lemon);color:#16121f;box-shadow:0 8px 22px rgba(214,180,20,.3)}
.btn.hot{background:#e5484d;color:#fff}
.btn.wa,.btn.wa-btn{background:#25d366;color:#06301a}
.contacts-btn{background:#fff!important;color:#16121f!important;box-shadow:var(--pop-sm)!important}
.welcome .btn{box-shadow:none}

/* cards, sheets, pop-ups */
.card,.cap-item,.res-card,.note-card,.ans-card,.opt-row,.st-input,.when,.rv,.dev-note,.guess-sticker,.invite-card,.write-cta{border:0;box-shadow:var(--pop)}
.cap-item,.when,.rv,.opt-row{box-shadow:var(--pop-sm)}
.modal-card,.menu-pop{border:0;box-shadow:0 24px 60px rgba(22,18,31,.22)}
.sheet{border:0;box-shadow:0 -10px 40px rgba(22,18,31,.12)}
.modal{background:#16121f80}
.write-cta{background:var(--lemon)}
.write-cta:active{transform:scale(.98);box-shadow:none}
.kind-tile{border:0;box-shadow:var(--pop-sm)}
.kind-tile:active{transform:scale(.97);box-shadow:none}
.write-card,.letter{border:0;box-shadow:var(--pop)}
.when[aria-pressed=true]{background:#16121f;color:#fff}
.rv[aria-pressed=true]{background:var(--lemon-soft);outline:2px solid #16121f}
.rv .tag{border:0}
.guess-sticker{background:var(--lemon-soft)}

/* chips, pills, tags: no outlines */
.prompt,.badge,.proof,.reacts button,.radio,.pill,.q-chip,.mini-select,.pick-m,.vote,.lb-row,.top-pick,.p-tag,.how .n,.st-item,.call,.pick-row,.res,.rchip,.vibe-tag,.icon-opt,.seg,.seg-tabs,.empty-st,.caught{border-color:transparent}
.prompt,.reacts button,.rchip,.vibe-tag,.pick-m,.vote,.mini-select{background:#fff;box-shadow:var(--pop-sm)}
.reacts button,.rchip[aria-pressed=true],.pick-m[aria-pressed=true],.vote.on,.q-chip[aria-pressed=true],.lb-row.first,.icon-opt[aria-pressed=true]{box-shadow:var(--pop-sm)}
.rchip[aria-pressed=true],.seg-tabs button[aria-pressed=true],.icon-opt[aria-pressed=true]{background:var(--lemon);border-color:transparent}
.radio{background:#fff;box-shadow:var(--pop-sm)}
.radio:has(input:checked){background:var(--lemon-soft)}
.pill{background:#16121f;color:var(--lemon)}
.pill.open{background:#c9f7dd;color:#0c5a34}
.badge{background:#16121f;color:var(--lemon)}
.p-tag{background:var(--lemon)}
.seg,.seg-tabs{box-shadow:var(--pop-sm)}
.st-item,.pick-row,.q-chip,.lb-row{background:#fff;box-shadow:var(--pop-sm)}
.empty-st{background:#fff;box-shadow:var(--pop-sm)}
.call.todo{border-style:solid;background:var(--lemon-soft)}
.res.open{border-style:solid}
.cap-item .dot,.how .n,.q-num,.pick-row .plus{border:0}
.avatar,.tick{border:0}
.pav{border:2px solid #fff}
.p-title .e{border:0;box-shadow:var(--pop-sm);background:var(--lemon)}
.icon-opt{background:#fff;box-shadow:var(--pop-sm)}
.top-pick{transform:none;background:var(--lemon-soft)}
.inv-next{border-top:1px solid var(--line)}
.blocked-row,.ideas li,.my-ans{border-bottom:1px solid var(--line)}
.bar{border:0;background:#ece9e2}

/* inputs */
.big-input,.ans,.row-input input{border:1.5px solid var(--line);box-shadow:none;background-color:#fff}
.big-input:focus,.ans:focus,.row-input input:focus{border-color:#16121f;box-shadow:0 0 0 4px rgba(249,225,95,.55)}
.st-input:focus-within{box-shadow:0 0 0 3px var(--lemon),var(--pop)}

/* envelope + countdown */
.envelope{border:0;box-shadow:0 18px 40px rgba(22,18,31,.14)}
.envelope::before{background:linear-gradient(to top right,transparent 49.3%,#16121f22 49.6%,transparent 50.4%),linear-gradient(to top left,transparent 49.3%,#16121f22 49.6%,transparent 50.4%)}
.flap::after{background:#16121f26}
.wax{filter:drop-shadow(0 6px 10px rgba(22,18,31,.25))}
.countdown div{background:#16121f;color:#fff;border:0;box-shadow:none}
.countdown span{color:#a7a3b3}

/* groups */
.p-hero,.oracle{background:#16121f;border:0;box-shadow:0 14px 34px rgba(22,18,31,.22)}
.oracle b{color:var(--lemon)}
.swipe-cta{border:0;box-shadow:0 14px 34px rgba(22,18,31,.22)}
.swipe-cta .stack i{border-color:#16121f}
.plus-table .pl{color:#16121f}
.sec-h .cnt{background:#16121f;color:var(--lemon)}
.st-input.note,.st-item.note,.note-card{background:#fff}
.note-card{box-shadow:var(--pop),inset 4px 0 0 #ff7aa2}
.deck,body.deck-mode{background:#16121f}
.scard{border:0;box-shadow:0 24px 50px rgba(0,0,0,.45)}
.scard.under{background:#2a2633;box-shadow:none}
.round{border:0;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.round.no{background:#2a2633;color:#ff6464}
.round:active{transform:scale(.94);box-shadow:none}

/* first-run welcome: black, no glow */
.welcome{background:#16121f}
.welcome h1{text-shadow:none}
.welcome .btn.primary,.welcome .btn:not(.wa-btn):not(.wa){background:var(--lemon);color:#16121f}
.offline-sheet{background:#f7f5f0f2}

/* Journal ads on the right, computers only (wide screens with a mouse) */
.side-ad{display:none}
@media (min-width:1100px) and (hover:hover) and (pointer:fine){
  .side-ad{display:flex;flex-direction:column;gap:14px;position:fixed;top:50%;transform:translateY(-50%);right:max(24px,calc((100vw - 560px)/4 - 85px));width:170px;z-index:45}
}
@media (min-width:1100px) and (max-height:960px){.side-ad{gap:10px}.side-ad img{max-height:110px}}
.side-ad a{display:flex;flex-direction:column;gap:4px;padding:10px;background:var(--card);border:1.5px solid rgba(22,18,31,.14);border-radius:16px;box-shadow:0 4px 14px rgba(22,18,31,.06);text-decoration:none;color:var(--ink);transition:transform .15s}
.side-ad a:hover{transform:translateY(-2px);border-color:rgba(22,18,31,.3);box-shadow:0 10px 24px rgba(22,18,31,.1)}
.side-ad a:focus-visible{outline:3px solid #7c5cff;outline-offset:2px}
.side-ad .ad-top{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.side-ad img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.side-ad .ad-t{font-weight:700;font-size:14px;line-height:1.2;margin-top:2px}
.side-ad .ad-d{font-size:12.5px;line-height:1.3;color:var(--muted)}
.side-ad .ad-go{font-size:12.5px;font-weight:700}

/* =====================================================================
   E4 (9 Nov 2026): black + lemon + vibe rainbow. Builds on B2 above.
   Black = tab bar, tags, text. Lemon = main buttons. Each vibe keeps its
   own colour (envelope, countdown, tag). Secondary buttons are white.
   ===================================================================== */
.tabbar .pill{background:transparent;color:inherit;padding:0;font:inherit;border:0}
.tabbar a[aria-current=page] .pill{background:var(--lemon);color:#16121f}
.btn{background:#fff;color:#16121f;box-shadow:var(--pop-sm)}
.btn.primary,.btn.kind,.btn.yellow,.p-cta{background:var(--lemon);color:#16121f;box-shadow:0 8px 22px rgba(214,180,20,.3)}
.btn.hot{background:#e5484d;color:#fff;box-shadow:none}
.btn.wa,.btn.wa-btn{background:#25d366;color:#06301a;box-shadow:none}
/* vibe colours */
.badge{background:var(--c);color:var(--c-on,#fff)}
.countdown div{background:var(--c-soft);color:#16121f;box-shadow:none}
.countdown span{color:#16121f99}
.when[aria-pressed=true]{background:var(--c);color:var(--c-on,#fff)}
.rv[aria-pressed=true]{background:var(--c-soft);outline:2px solid var(--c)}
.cap-item .dot{box-shadow:none}
/* envelope: original sticker look in the vibe colour */
.envelope{border:2.5px solid #16121f;box-shadow:4px 4px 0 #16121f}
.envelope::before{background:linear-gradient(to top right,transparent 49.3%,#16121f55 49.6%,transparent 50.4%),linear-gradient(to top left,transparent 49.3%,#16121f55 49.6%,transparent 50.4%)}
.flap::after{background:#16121f}
.wax{filter:drop-shadow(2px 3px 0 #16121f40)}
/* groups: prediction violet hero, black oracle */
.p-hero{background:#8b5cf6;color:#fff}
.p-hero h1{color:#fff}.p-hero p{color:#fff;opacity:.92}
.p-title .e{background:#efe7ff}
.deck,body.deck-mode{background:#2a2140}
/* welcome: light, Get started is the one recommended button */
.welcome{background:var(--bg);color:#16121f}
.welcome h1{color:#16121f;text-shadow:none}
.welcome .lede{color:var(--muted)}
.welcome .legal,.welcome .legal a{color:var(--muted)}
.welcome .brand,.welcome .back,.welcome .linkish{color:#16121f!important}
.welcome .err{color:#c62828!important;background:none!important;padding:0!important}
.welcome .btn:not(.wa-btn):not(.wa){background:transparent;color:#16121f;box-shadow:none;text-decoration:underline;text-underline-offset:4px;font-weight:600}
.welcome .btn.primary:not(.wa-btn):not(.wa){background:var(--lemon);color:#16121f;text-decoration:none;font-weight:800;box-shadow:0 10px 26px rgba(214,180,20,.4)}
.pk-link{color:#16121f;background:#fff;box-shadow:var(--pop-sm)}
.wa-wait{background:#fff;color:#16121f;box-shadow:var(--pop-sm)}
.side-ad a{border:0;box-shadow:var(--pop-sm)}.side-ad img{border:0}
/* Tellater Plus */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 12px}
.plan{display:flex;flex-direction:column;gap:2px;text-align:left;padding:12px 14px;border:0;box-shadow:var(--pop-sm);border-radius:16px;background:#fff;font:inherit;color:var(--ink);cursor:pointer}
.plan b{font:800 15px var(--display)}.plan span{font-weight:700}.plan small{color:#6b6478;font-size:12px}
.plan[aria-checked="true"]{background:var(--lemon-soft,#fdf3b8);box-shadow:0 0 0 2.5px #16121f}
.row-wrap{display:flex;flex-wrap:wrap;gap:8px}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;text-decoration:underline;padding-left:6px;padding-right:6px}
h3 .tag.plus{font:800 10px var(--sans);letter-spacing:.5px;border:0;border-radius:999px;padding:1px 6px;background:linear-gradient(90deg,#facc15,#ff5c8a);vertical-align:middle}
.opt-row.off{opacity:.6;cursor:default;box-shadow:none}
.mine.changed{display:block;color:#7b5cf0;font-weight:700}
.deck-foot .undo{margin-right:8px;background:#fff;color:var(--ink)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatch{width:40px;height:40px;border-radius:50%;border:0;box-shadow:var(--pop-sm);cursor:pointer;background:#fff;font-weight:800}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}
.extra-ph{display:flex;gap:8px;align-items:center;margin-top:8px}.extra-ph .phone-row{flex:1}.extra-ph .x{background:none;border:0;font-size:18px;cursor:pointer}
/* called-it record */
.rec-hero{display:flex;gap:18px;align-items:center;background:#16121f;color:#fff;border-radius:26px;padding:20px;margin:14px 0 6px}
.rec-hero .ring{position:relative;width:112px;height:112px;flex:none}
.rec-hero svg{width:100%;height:100%;transform:rotate(-90deg)}
.rec-hero circle{fill:none;stroke-width:10;stroke-linecap:round}.rec-hero .trk{stroke:#ffffff1f}.rec-hero .val{stroke:var(--lemon,#f9e15f)}
.rec-hero .ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 34px/1 var(--display);letter-spacing:-1.5px}
.rec-hero .ring i{font-style:normal;font-size:18px;opacity:.7;margin-left:1px}
.rec-hero .facts small{display:block;font:800 11px var(--sans);letter-spacing:1.4px;color:#ffffff99}
.rec-hero .facts>b{display:block;font:800 21px/1.15 var(--display);letter-spacing:-.4px;margin:4px 0 12px}
.rec-hero .facts p{margin:0;color:#ffffffb3;font-size:14px}
.rec-hero.empty{display:block}
.rec-hero .chips{display:flex;flex-wrap:wrap;gap:6px}
.rec-hero .chips span{background:#ffffff14;border-radius:999px;padding:5px 10px;font:600 12.5px var(--sans);color:#ffffffcc}
.rec-hero .chips b{color:#fff;font-weight:800;margin-left:2px}
.sec-row{display:flex;align-items:baseline;justify-content:space-between;margin:24px 2px 10px}
.sec-row h3{margin:0;font:800 19px var(--display);letter-spacing:-.3px}.sec-row>span{color:var(--muted);font:700 13px var(--sans)}
.medals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 8px;padding:4px 0 6px}
.medal{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent}
.medal .emblem{display:block;margin:0 auto 6px;transition:transform .2s}.medal:active .emblem{transform:scale(.94)}
.emblem.on{filter:drop-shadow(0 6px 10px rgba(22,18,31,.18))}
.emblem.on.mythic{filter:drop-shadow(0 6px 14px rgba(125,92,255,.45));animation:holo 4s ease-in-out infinite}
@keyframes holo{0%,100%{filter:drop-shadow(0 6px 14px rgba(125,92,255,.45)) hue-rotate(0deg)}50%{filter:drop-shadow(0 6px 14px rgba(255,120,200,.45)) hue-rotate(40deg)}}
@media (prefers-reduced-motion:reduce){.emblem.on.mythic{animation:none}}
.medal b{display:block;font:800 13px/1.2 var(--display);letter-spacing:-.2px;color:#b3ada3}.medal.on b{color:var(--ink)}
.medal small{display:block;font:700 10.5px var(--sans);letter-spacing:.8px;text-transform:uppercase;color:#c9c3b8;margin-top:2px}.medal.on small{color:var(--muted)}
.badge-detail{text-align:center;padding-top:4px}.badge-detail .emblem{display:block;margin:0 auto 10px}
.badge-detail h2{margin:8px 0 4px;font-size:28px}
.badge-detail .line{font:600 17px var(--sans);margin:0 0 10px}.badge-detail .how{color:var(--muted);margin:0 0 14px;text-align:center}
.badge-detail .tier{display:inline-block;font:800 11px var(--sans);letter-spacing:1.2px;text-transform:uppercase;border-radius:999px;padding:4px 10px}
.tier.bronze{background:#f6dcc4;color:#8f4f20}.tier.silver{background:#e6eaf0;color:#4a5466}.tier.gold{background:#fdf0b8;color:#8a5d00}.tier.mythic{background:linear-gradient(90deg,#ffd1ef,#cfe9ff,#e2d4ff);color:#4b2fb3}
.badge-detail .prog{height:10px;border-radius:99px;background:#ece9e2;overflow:hidden;margin:0 30px 6px}.badge-detail .prog i{display:block;height:100%;background:var(--lemon,#f9e15f);border-radius:99px}
.badge-detail .got{font:800 15px var(--sans);color:#17663b;margin:0}
.rec-list{padding:6px 16px}
.rec-row{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line,#eee)}.rec-row:last-child{border:0}
.rec-row .mid{min-width:0}.rec-row b{display:block;font:700 15.5px/1.3 var(--sans)}
.rec-row small{display:block;color:var(--muted);font-size:13px;margin-top:3px;}
.rec-tag{flex:none;width:68px;text-align:center;box-sizing:border-box;font:800 11px var(--sans);letter-spacing:.3px;border-radius:999px;padding:4px 0;margin-top:2px}
.rec-tag.hit{background:#dcf5e6;color:#17663b}.rec-tag.miss{background:#fde3e3;color:#9b1d27}
.proof.edited{background:#efe7ff}
textarea#etx,#ete,#eat,#erv,#ra{width:100%;box-sizing:border-box;margin:4px 0 12px;font:600 16px var(--sans);padding:10px 12px;border:0;box-shadow:var(--pop-sm);border-radius:14px;background:#fff}
.letter .ps{display:block;margin-top:18px;padding-top:12px;border-top:1.5px dashed currentColor;opacity:.85;font-size:.85em}
textarea#pstx,textarea#ntx{width:100%;box-sizing:border-box;margin:4px 0 12px;font:600 16px var(--sans);padding:10px 12px;border:0;border-radius:14px;background:#fff;box-shadow:var(--pop-sm)}
/* capsule page: one type scale (eyebrow 11.5 / body 19 / secondary 15 / meta 13) */
.teaser{font:italic 600 17px/1.4 var(--sans);color:var(--muted);margin:8px 0 0}
.secret .eyebrow{font:800 11.5px var(--sans);letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.secret .msg{font:700 19px/1.4 var(--sans);letter-spacing:-.2px;white-space:pre-wrap;margin:0}
.secret .ps-line{font:500 15px/1.45 var(--sans);margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line,#e7e3db)}
.secret .ps-line span{font-weight:800;margin-right:6px}
.secret .note-line{font:500 13px var(--sans);color:var(--muted);margin:12px 0 0}
.secret .card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.receipt{background:none;border:0;padding:0;cursor:pointer;font:600 13px var(--sans);color:var(--muted)}
.btn.quiet{background:#ecebe7;color:#4a4553;box-shadow:none;font-weight:700}.btn.quiet:hover{background:#e3e1dc}
.plus-state .state-line{margin:0 0 12px;font:500 15px/1.45 var(--sans)}.plus-state .state-line b{font-weight:800}
h3 .tag.ended{font:800 10px var(--sans);letter-spacing:.5px;border-radius:999px;padding:2px 7px;background:#ecebe7;color:#4a4553;vertical-align:middle}