:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

.tk{--bg:#F2ECE2;--card:#FFFDF9;--ink:#141312;--mute:#6A635A;--line:#E2D8C8;--sunk:#EADFCB;--red:#E8452C;--redBtn:#D83A22;--redInk:#B8321C;--onRed:#FFFFFF;--ok:#1F7A4A;
  --me:#245A92;--pa:#1F5E48;--us:#141312;--usS:#EADFCB;--shadow:#141312;--paper:#FFFFFF;
  --disp:"Bricolage Grotesque","Golos Text",system-ui,sans-serif;--body:"Instrument Sans","Golos Text",system-ui,sans-serif;--mono:"DM Mono","IBM Plex Mono",ui-monospace,monospace;--hand:"Caveat",cursive;
  --r:18px;--rS:12px;--ease:cubic-bezier(.2,.8,.2,1);--easeS:cubic-bezier(.2,.9,.25,1);--spring:cubic-bezier(.3,1.5,.5,1);
  color:var(--ink);font-family:var(--body)}
.tk[data-mode="eve"]{--bg:#141312;--card:#1E1C1A;--ink:#F2ECE2;--mute:#A39A8E;--line:#34302B;--sunk:#2A2622;--red:#FF5A3D;--redBtn:#FF5A3D;--redInk:#FF7A5E;--onRed:#141312;--ok:#79C7A4;
  --me:#8DBBEA;--pa:#79C7A4;--us:#F2ECE2;--usS:#3A342D;--shadow:#000000;--paper:#26231F}
.tk .meS{background:color-mix(in srgb,var(--me) 16%,var(--card))}
.tk .paS{background:color-mix(in srgb,var(--pa) 16%,var(--card))}

/* =============== APP =============== */
.app{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
.app button,.tk button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tk button{transition:transform .14s var(--ease)}
.tk button:active{transform:scale(.97)}
.sb{height:54px;flex:0 0 auto;display:flex;align-items:flex-end;justify-content:space-between;padding:0 30px 8px 36px;font:600 15px var(--body);position:relative;z-index:5}
.sb .r{display:flex;gap:6px;align-items:center}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;position:relative}
.scroll::-webkit-scrollbar{display:none}
.pad{padding:4px 18px 28px;display:flex;flex-direction:column;gap:14px}
.disp{font-family:var(--disp);font-weight:800;letter-spacing:-.025em;line-height:1.02;text-wrap:balance;margin:0}
.mk{font:500 11.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.sec{display:flex;align-items:center;justify-content:space-between;margin:10px 2px -4px}
.sec h3{margin:0;font:800 21px/1.1 var(--disp);letter-spacing:-.02em}
.sec button{border:0;background:none;min-height:44px;padding:0 2px 0 10px;font:600 14px var(--body);color:var(--mute);display:flex;align-items:center;gap:2px}
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--line)}
.top{display:flex;align-items:center;justify-content:space-between;min-height:48px}
.logo{display:flex;align-items:center;gap:7px;font:800 30px/1 var(--disp);letter-spacing:-.045em}
.pair{display:flex;align-items:center;border:0;background:none;min-height:48px;padding:0}
.pair .av+.av{margin-left:-12px}
.eyebrow{display:flex;justify-content:space-between;align-items:center;margin-top:-6px}
/* avatar system */
.av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;position:relative;display:flex;align-items:center;justify-content:center;border:2.5px solid var(--bg);overflow:hidden;font:800 16px/1 var(--disp);letter-spacing:-.02em}
.av img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);display:block}
.av.ini{color:#fff}
.av.ini.me{background:var(--me)} .av.ini.pa{background:var(--pa)}
.tk[data-mode="eve"] .av.ini{color:#141312}
.av.doo{background:var(--paper)}
.av.doo svg{width:100%;height:100%}
/* presence */
.pres{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 12px}
.pres .ph{position:relative}
.pres .ph .av{width:52px;height:52px;border-color:var(--card);font-size:21px}
.pres .dot{position:absolute;right:0;bottom:2px;width:13px;height:13px;border-radius:50%;background:#2DBE60;border:2.5px solid var(--card)}
.pres .tx{flex:1;min-width:0}
.pres .tx b{display:block;font:700 16px/1.2 var(--body)}
.pres .tx span{display:flex;flex-direction:column;gap:1px;font-size:13.5px;color:var(--mute);margin-top:3px}
.pres .tx span i{font-style:normal;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.miss{flex:0 0 auto;border:1.5px solid var(--ink);min-height:46px;padding:0 15px 0 12px;border-radius:999px;background:var(--card);font:700 15px var(--body)!important;display:flex;align-items:center;gap:7px;position:relative}
.miss svg{color:var(--red)}
.miss.go{animation:thump .55s var(--spring)}
.hearts{position:absolute;inset:0;pointer-events:none;overflow:visible}
.hearts span{position:absolute;left:24px;top:30%;color:var(--red);animation:fly 1.1s ease-out forwards}
/* hero frame (signature: one per screen) */
.frame{background:var(--card);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--shadow);border-radius:var(--r);position:relative;overflow:hidden}
.tk[data-mode="eve"] .frame{box-shadow:5px 5px 0 var(--red)}
.clap{height:12px;background:repeating-linear-gradient(-55deg,var(--ink) 0 10px,var(--card) 10px 20px);border-bottom:2px solid var(--ink)}
.hero{padding:14px 18px 16px}
.hero .row1{display:flex;justify-content:space-between;align-items:center;gap:8px}
.streak{display:inline-flex;align-items:center;gap:5px;font:700 13px var(--body);padding:5px 10px;border-radius:999px;background:var(--sunk)}
.streak svg{color:var(--red)}
.hero h2{font-size:31px;margin:12px 0 14px}
.hero .who{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:14px}
.hero .who .av{width:30px;height:30px;border:0;font-size:13px}
.hero .who .ok{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#2DBE60;color:#fff;margin:16px 0 0 -18px;border:2px solid var(--card);flex:0 0 auto}
.btn{border:0;min-height:54px;border-radius:14px;font:700 17px var(--body)!important;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--redBtn);color:var(--onRed)!important;position:relative;overflow:hidden}
.btn.ink{background:var(--ink);color:var(--bg)!important}
.btn.ghost{background:transparent;border:1.5px solid var(--ink);color:var(--ink)!important}
.btn.sm{min-height:46px;font-size:15.5px!important;border-radius:12px}
.btn[disabled]{opacity:.38;pointer-events:none}
.btn .spin{width:20px;height:20px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:rot .8s linear infinite}
.done{display:flex;gap:8px;align-items:center;justify-content:space-between;background:var(--sunk);border-radius:12px;padding:10px 12px;font-size:14px}
.done b{font:800 18px/1.1 var(--disp)}
/* widget moment */
.moment{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;padding:14px;align-items:center}
.booth{position:relative;background:var(--paper);padding:7px 7px 24px;transform:rotate(-3deg);box-shadow:0 6px 16px rgba(0,0,0,.14)}
.booth img{width:100%;aspect-ratio:1/1.08;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05)}
.booth .dood{width:100%;aspect-ratio:1/1.08;display:block;background:var(--bg)}
.booth .scrib{position:absolute;left:10px;bottom:2px;font:700 20px/1 var(--hand);color:var(--redInk)}
.moment .tx b{display:block;font:800 19px/1.1 var(--disp);letter-spacing:-.015em}
.moment .tx p{margin:5px 0 10px;font-size:13.5px;line-height:1.35;color:var(--mute)}
.mini{display:flex;gap:6px}
.mini button{flex:1;min-height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);font:600 13.5px var(--body)!important;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 4px;min-width:0}
/* agenda */
.ag{padding:4px 0}
.ag .it{display:flex;align-items:center;gap:12px;padding:11px 14px;min-height:60px}
.ag .it+.it{border-top:1px solid var(--line)}
.ag .tm{width:46px;flex:0 0 auto;font:600 14px var(--body);font-variant-numeric:tabular-nums}
.ag .rail{width:4px;align-self:stretch;border-radius:4px;flex:0 0 auto}
.ag .tt{flex:1;min-width:0}
.ag .tt b{display:block;font-weight:600;font-size:15.5px;line-height:1.25}
.ag .tt span{font-size:13px;color:var(--mute)}
.chip{display:inline-flex;align-items:center;gap:5px;font:700 11.5px var(--body);padding:4px 9px 4px 7px;border-radius:999px;flex:0 0 auto;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.c-me{color:var(--me);background:color-mix(in srgb,var(--me) 14%,var(--card))}
.c-pa{color:var(--pa);background:color-mix(in srgb,var(--pa) 14%,var(--card))}
.c-us{color:var(--ink);background:var(--usS)}
.r-me{background:var(--me)}.r-pa{background:var(--pa)}.r-us{background:var(--ink)}
/* todos */
.td .it{display:flex;align-items:center;gap:6px;padding:4px 12px 4px 4px;min-height:56px}
.td .it+.it{border-top:1px solid var(--line)}
.chk{width:48px;height:48px;border:0;background:none;display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0}
.chk i{width:24px;height:24px;border-radius:8px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;color:var(--bg);transition:background .18s var(--ease)}
.chk i svg path{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .28s var(--ease) .05s}
.chk.on i{background:var(--ink)}
.chk.on i svg path{stroke-dashoffset:0}
.td .tt{flex:1;min-width:0}
.td .tt b{display:block;font-weight:600;font-size:15.5px;transition:color .2s}
.td .on + .tt b{text-decoration:line-through;color:var(--mute)}
.td .tt span{font-size:13px;color:var(--mute)}
.td .av{width:28px;height:28px;border:0;font-size:12px}
/* tiles */
.g9{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{border-radius:var(--rS);min-height:100px;padding:12px 10px 10px 12px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;background:var(--card);border:1px solid var(--line);position:relative}
.tile b{font:600 14px/1.15 var(--body);display:block}
.tile span{font-size:12px;color:var(--mute);display:block;margin-top:2px}
.badge{position:absolute;top:10px;right:10px;min-width:20px;height:20px;border-radius:10px;background:var(--ink);color:var(--bg)!important;font:700 11px/20px var(--body)!important;text-align:center;padding:0 6px;margin:0!important}
/* our home teaser */
.homeC{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px 12px 8px;text-align:left;width:100%}
.homeC svg{width:118px;height:100px}
.homeC b{display:block;font:800 19px/1.1 var(--disp);letter-spacing:-.015em;margin-top:4px}
.homeC p{margin:4px 0 8px;font-size:13px;color:var(--mute);line-height:1.35}
.prog{height:8px;border-radius:99px;background:var(--sunk);overflow:hidden}
.prog i{display:block;height:100%;background:var(--ink);border-radius:99px;transition:width .6s var(--ease)}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.duel{border:0;padding:14px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;min-height:170px;border-radius:var(--r);background:var(--ink);color:var(--bg)!important}
.duel .mk{color:inherit;opacity:.7}
.duel b{font:800 22px/1 var(--disp);letter-spacing:-.02em;display:block;margin-top:8px}
.duel span{font-size:13px;opacity:.85;display:block;margin-top:6px;line-height:1.3}
.duel .go{display:flex;align-items:center;gap:6px;font:700 14px var(--body);margin-top:10px}
.week{border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px;text-align:left;min-height:170px}
.week .nums{display:flex;gap:12px;align-items:flex-end}
.week .n b{display:block;font:800 40px/.9 var(--disp);letter-spacing:-.04em}
.week .n span{font:600 12.5px/1.15 var(--body);color:var(--mute)}
.week .go{display:flex;align-items:center;gap:6px;font:700 14px var(--body);margin-top:auto}
/* tab bar */
.tabs{flex:0 0 auto;height:86px;display:grid;grid-template-columns:repeat(5,1fr);align-items:start;padding:6px 6px 0;background:var(--card);border-top:1px solid var(--line);position:relative;z-index:5}
.tabs button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:54px;font:600 11.5px var(--body);color:var(--mute);padding:6px 0 0;position:relative}
.tabs button.on{color:var(--ink)}
.tabs button.on::after{content:"";position:absolute;top:0;width:5px;height:5px;border-radius:50%;background:var(--red)}
.tabs .add{margin-top:-2px}
.tabs .add i{width:52px;height:52px;border-radius:18px;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.18)}
/* sheet */
.scrim{position:absolute;inset:0;z-index:39;background:rgba(20,19,18,.38);animation:fade .25s both}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:40;background:var(--bg);border-radius:26px 26px 0 0;display:flex;flex-direction:column;animation:up .33s var(--easeS);max-height:92%}
.sheet.full{top:0;border-radius:0;max-height:none}
.sheet.out{animation:down .25s ease-in forwards}
.grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:8px auto 0}
.shd{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 6px}
.sheet.full .shd{padding-top:58px}
.ib{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.shb{padding:6px 20px 30px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;flex:1}
.sheet.full .shb{gap:16px}
.qa{border:2px solid var(--ink);border-radius:16px;background:var(--card);padding:14px 14px;font:600 18px/1.3 var(--body);min-height:58px;display:flex;align-items:center}
.qa .cur{width:2px;height:22px;background:var(--red);margin-left:2px;animation:blink 1s steps(2) infinite}
.parsed{display:flex;flex-wrap:wrap;gap:8px;min-height:34px}
.pchip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 12px;font:600 13.5px var(--body);background:var(--card);border:1px solid var(--line);animation:pop .35s var(--spring) both}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pc{border:2px solid var(--line);background:var(--card);border-radius:16px;padding:0;overflow:hidden;text-align:left;position:relative}
.pc .im{width:100%;aspect-ratio:1/1.1;display:flex;align-items:center;justify-content:center}
.pc .im img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.pc .im .big{width:96px;height:96px;font-size:40px;border:0}
.pc b{display:block;padding:10px 12px;font:800 20px var(--disp)}
.pc.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset}
.pc.on b{background:var(--ink);color:var(--bg)}
.pc .tick{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);display:none;align-items:center;justify-content:center;animation:pop .3s var(--spring)}
.pc.on .tick{display:flex}
.saved{align-self:flex-start;background:var(--sunk);border-radius:999px;padding:7px 12px;font:600 13px var(--body);display:flex;gap:6px;align-items:center}
.flipz{display:flex;justify-content:center;gap:14px;perspective:900px;min-height:240px;align-items:center;position:relative}
.fc{width:142px;height:196px;position:relative;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,1.25,.4,1)}
.fc .f,.fc .b{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;display:flex;flex-direction:column;overflow:hidden}
.fc .f{background:var(--ink);color:var(--bg);align-items:center;justify-content:center;font:800 22px var(--disp);border:6px solid var(--paper);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.fc .b{transform:rotateY(180deg);background:var(--paper);border:2px solid var(--ink)}
.fc .b small{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:8px 10px 6px}
.fc .b .im{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.fc .b .im img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.fc .b .im .big{width:72px;height:72px;font-size:30px;border:0}
.fc .b b{font:800 20px var(--disp);padding:8px 10px}
.fc.r{transform:rotateY(180deg)}
.fc:nth-child(2){transition-delay:.12s}
.stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-9deg);border:3px solid var(--red);color:var(--red);font:800 26px/1 var(--disp);letter-spacing:-.01em;padding:8px 14px;border-radius:10px;background:color-mix(in srgb,var(--bg) 80%,transparent);animation:stamp .45s var(--spring) .95s both;white-space:nowrap;text-transform:uppercase}
.verdict{display:flex;flex-direction:column;gap:10px;animation:rise .5s 1.1s both}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toast{position:absolute;left:16px;right:16px;bottom:100px;z-index:50;background:var(--ink);color:var(--bg);border-radius:14px;padding:13px 16px;font:600 14.5px var(--body);animation:rise .3s var(--easeS) both;box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;gap:10px;align-items:center}
.toast .hap{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-left:auto;white-space:nowrap}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes down{to{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes thump{0%,100%{transform:scale(1)}30%{transform:scale(1.12)}60%{transform:scale(.96)}}
@keyframes fly{0%{opacity:1;transform:translate(-50%,0) scale(.6)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-90px) scale(1.3)}}
@keyframes blink{50%{opacity:0}}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-9deg) scale(2.2)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-9deg) scale(1)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@keyframes pushIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes breathe{50%{transform:scale(1.04)}}
.shake{animation:shake .4s}

/* ===== specimens ===== */
.spec{background:var(--bg);border-radius:16px;padding:16px;border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;min-width:0}
.spec .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.spec .st{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.spec .btn{width:auto;padding:0 20px}
.btn.pressed{transform:scale(.97);filter:brightness(.92)}
.inp{border:1.5px solid var(--line);background:var(--card);border-radius:14px;min-height:52px;padding:0 14px;display:flex;align-items:center;font-size:16px;color:var(--mute)}
.inp.f{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink)}
.inp.v{color:var(--ink)}
.inp.e{border-color:var(--redInk)}
.err{font-size:13px;color:var(--redInk);margin-top:-4px}
.swc{width:52px;height:32px;border-radius:99px;background:var(--line);position:relative;border:0;padding:0}
.swc::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .22s var(--spring)}
.swc.on{background:var(--ink)} .swc.on::after{left:23px}
.segA{display:flex;background:var(--sunk);border-radius:12px;padding:3px}
.segA button{flex:1;border:0;background:none;min-height:40px;border-radius:9px;font:600 14px var(--body)}
.segA button.on{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 12px;border:1.5px dashed var(--line);border-radius:var(--r);background:var(--card)}
.empty svg{width:110px;height:80px}
.empty b{font:800 18px/1.15 var(--disp);letter-spacing:-.015em}
.empty p{margin:0;font-size:13.5px;color:var(--mute);max-width:30ch;line-height:1.4}
.starters{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:4px}
.starters button{border:1.5px solid var(--ink);background:none;border-radius:999px;min-height:40px;padding:0 12px;font:600 13px var(--body)}
.take{background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.take .q{font:800 18px/1.1 var(--disp);letter-spacing:-.015em}
.take .a{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.take .a div{border-radius:10px;padding:8px;font-size:13px;line-height:1.25}
.take .a div b{display:block;font:800 15px var(--disp)}
.ladder{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.ladder figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.ladder .av{width:56px;height:56px;font-size:22px;border-color:var(--card)}
.ladder figcaption{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:center}
.strip{background:var(--paper);padding:6px;display:flex;flex-direction:column;gap:4px;width:84px;box-shadow:0 6px 16px rgba(0,0,0,.14);transform:rotate(2deg)}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.1);display:block}
.strip small{font:700 15px/1 var(--hand);color:var(--redInk);text-align:center;padding:2px 0}

/* Review viewer: flows on the left, live phone in the middle, note on the right. Page chrome has its own tokens; the phone uses .tk app tokens. */
:root{
  --pg:#F2ECE2; --pg2:#FFFDF9; --pgInk:#141312; --pgMute:#6A635A; --pgLine:#E2D8C8; --pgAcc:#D83A22; --pgSoft:#EADFCB;
  --fD:"Bricolage Grotesque","Golos Text",system-ui,sans-serif; --fB:"Instrument Sans","Golos Text",system-ui,sans-serif; --fM:"DM Mono","IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--pg:#141312;--pg2:#1E1C1A;--pgInk:#F2ECE2;--pgMute:#A39A8E;--pgLine:#34302B;--pgAcc:#FF6A4F;--pgSoft:#2A2622;color-scheme:dark}}
:root[data-theme="dark"]{--pg:#141312;--pg2:#1E1C1A;--pgInk:#F2ECE2;--pgMute:#A39A8E;--pgLine:#34302B;--pgAcc:#FF6A4F;--pgSoft:#2A2622;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--pg);color:var(--pgInk);font-family:var(--fB);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--pg)}
button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--pgAcc);outline-offset:2px}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--pg);border-bottom:1px solid var(--pgLine);padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
.barIn{max-width:1440px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font:800 22px/1 var(--fD);letter-spacing:-.04em}
.brand small{font:500 11px var(--fM);letter-spacing:.12em;text-transform:uppercase;color:var(--pgMute)}
.ctrls{display:flex;flex-wrap:wrap;gap:8px}
.seg{display:flex;background:var(--pg2);border:1px solid var(--pgLine);border-radius:999px;padding:3px}
.seg button{min-height:38px;border:0;background:transparent;color:var(--pgMute);font:600 13px var(--fB);padding:0 12px;border-radius:999px;cursor:pointer}
.seg button.on{background:var(--pgInk);color:var(--pg)}
.shell{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:250px auto minmax(280px,1fr);gap:32px;padding:24px max(16px,env(safe-area-inset-right,0px)) 64px max(16px,env(safe-area-inset-left,0px));align-items:start}
.flows{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:thin}
.flows .fh{font:500 11px var(--fM);letter-spacing:.12em;text-transform:uppercase;color:var(--pgMute);margin:0 0 8px 10px}
.flows button{border:0;background:none;text-align:left;min-height:42px;padding:8px 12px;border-radius:12px;font:600 14.5px var(--fB);color:var(--pgMute);cursor:pointer;display:flex;justify-content:space-between;gap:8px;align-items:center}
.flows button span{font:500 11px var(--fM);color:var(--pgMute)}
.flows button:hover{background:var(--pgSoft);color:var(--pgInk)}
.flows button.on{background:var(--pgInk);color:var(--pg)}
.flows button.on span{color:var(--pg);opacity:.7}
.flowChips{display:none;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0 2px;margin:0 -2px}
.flowChips::-webkit-scrollbar{display:none}
.flowChips button{flex:0 0 auto;border:1px solid var(--pgLine);background:var(--pg2);border-radius:999px;min-height:38px;padding:0 13px;font:600 13px var(--fB);color:var(--pgMute);cursor:pointer}
.flowChips button.on{background:var(--pgInk);color:var(--pg);border-color:var(--pgInk)}
.phoneCol{display:flex;flex-direction:column;align-items:center;gap:14px}
#fit{position:relative}
#device{width:390px;height:844px;border-radius:52px;background:#0d0c0b;padding:10px;box-shadow:0 30px 70px rgba(20,19,18,.28),0 0 0 1px rgba(0,0,0,.4);transform-origin:top left;position:absolute;left:0;top:0}
#app{position:relative;width:370px;height:824px;border-radius:43px;overflow:hidden;isolation:isolate;transform:translateZ(0)}
.island{position:absolute;left:50%;top:21px;width:112px;height:32px;border-radius:20px;background:#0d0c0b;transform:translateX(-50%);z-index:90;pointer-events:none}
.pn{display:flex;gap:8px;align-items:center}
.pn button{min-height:44px;min-width:44px;border:1px solid var(--pgLine);background:var(--pg2);border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;font:600 14px var(--fB)}
.pn .cnt{font:500 12px var(--fM);letter-spacing:.06em;color:var(--pgMute);min-width:120px;text-align:center}
.note{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
.note .k{font:500 11.5px var(--fM);letter-spacing:.12em;text-transform:uppercase;color:var(--pgAcc)}
.note h2{font:800 clamp(26px,3vw,36px)/1.02 var(--fD);letter-spacing:-.03em;margin:0;text-wrap:balance}
.note p{margin:0;color:var(--pgMute);font-size:15.5px;line-height:1.55;max-width:60ch}
.note p b{color:var(--pgInk)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font:500 11px var(--fM);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:6px 10px;border:1px solid var(--pgLine);background:var(--pg2);color:var(--pgMute)}
.tag.new{background:var(--pgInk);color:var(--pg);border-color:var(--pgInk)}
.specs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;background:var(--pg2);border:1px solid var(--pgLine);border-radius:16px;padding:14px 16px;font-size:14px;line-height:1.45}
.specs dt{font:500 11px var(--fM);letter-spacing:.1em;text-transform:uppercase;color:var(--pgMute);padding-top:2px}
.specs dd{margin:0}
.demo{display:flex;flex-wrap:wrap;gap:6px}
.demo button{border:1.5px solid var(--pgInk);background:none;border-radius:999px;min-height:40px;padding:0 14px;font:600 13.5px var(--fB);cursor:pointer;color:var(--pgInk)}
.demo button.on{background:var(--pgInk);color:var(--pg)}
.demoL{font:500 11px var(--fM);letter-spacing:.1em;text-transform:uppercase;color:var(--pgMute)}
.foot{max-width:1440px;margin:0 auto;color:var(--pgMute);font-size:13px;line-height:1.5;padding:0 16px 40px}
@media (max-width:1180px){
  .shell{grid-template-columns:auto minmax(0,1fr);gap:28px}
  .flows{display:none}
  .flowChips{display:flex}
}
@media (max-width:760px){
  .shell{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:16px}
  .note{position:static}
  .barIn{gap:8px}
  .brand{font-size:19px}
  .seg button{padding:0 10px;font-size:12.5px;min-height:36px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.covB{min-height:40px;border-radius:999px;border:1.5px solid var(--pgInk);background:var(--pgInk);color:var(--pg);font:700 13px var(--fB);padding:0 16px;cursor:pointer}
#cov{border:0;border-radius:20px;padding:0;width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 48px);background:var(--pg);color:var(--pgInk);box-shadow:0 30px 80px rgba(0,0,0,.35)}
#cov::backdrop{background:rgba(20,19,18,.55)}
.covH{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 20px 12px;border-bottom:1px solid var(--pgLine);position:sticky;top:0;background:var(--pg)}
.covH b{display:block;font:800 20px/1.2 var(--fD,inherit)}.covH span{font-size:13px;color:var(--pgMute)}
.covX{width:40px;height:40px;border-radius:50%;border:1px solid var(--pgLine);background:transparent;color:inherit;font-size:16px;cursor:pointer;flex:0 0 auto}
.covT{overflow:auto;max-height:calc(100vh - 140px)}
#cov table{width:100%;border-collapse:collapse;font:14px/1.4 var(--fB)}
#cov th{text-align:left;font:600 11px var(--fB);letter-spacing:.08em;text-transform:uppercase;color:var(--pgMute);padding:10px 12px}
#cov td{padding:10px 12px;border-top:1px solid var(--pgLine);vertical-align:top}
#cov td:first-child{font-weight:600;width:32%}
#cov .ok{color:#1F7A4A;font-weight:700}#cov .wt{color:#B8321C;font-weight:700;white-space:nowrap}
#cov td button{border:0;background:none;color:inherit;font:700 13px var(--fB);text-decoration:underline;cursor:pointer;white-space:nowrap;min-height:36px}
@media (max-width:640px){#cov td:nth-child(3){display:none}#cov td:first-child{width:auto}}

/* ===== prototype frame: status bar overlays, views stack inside .stage ===== */
.sb{position:absolute;left:0;right:0;top:0;height:54px;z-index:80;pointer-events:none;color:var(--ink)}
.sb.lt{color:#fff}
.stage{flex:1;position:relative;overflow:hidden}
.vw{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.vw > .scroll{padding-top:54px}
.vw.nopad > .scroll{padding-top:0}
.vw.out{pointer-events:none;z-index:0}
.vw.in{z-index:1}
.a-push{animation:pushIn .3s var(--ease) both}
.o-push{animation:pushOut .3s var(--ease) both}
.a-pop{animation:popIn .3s var(--ease) both}
.o-pop{animation:pushInR .3s var(--ease) both}
.a-tab{animation:fade .22s ease-out both}
.a-fade{animation:fade .35s ease-out both}
.a-rise{animation:riseBig .42s var(--easeS) both}
@keyframes pushOut{to{transform:translateX(-28%);opacity:.6}}
@keyframes popIn{from{transform:translateX(-28%);opacity:.6}to{transform:none;opacity:1}}
@keyframes pushInR{to{transform:translateX(100%)}}
@keyframes riseBig{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* nav bar for pushed screens */
.nb{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:8px;padding:58px 14px 8px;background:var(--bg)}
.vw.hasNb > .scroll{padding-top:0}
.nb .ttl{flex:1;min-width:0;text-align:center;font:700 16px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb .sp{width:44px;flex:0 0 auto}
.h1{font:800 31px/1.02 var(--disp);letter-spacing:-.025em;margin:0;text-wrap:balance}
.h1s{font:800 26px/1.05 var(--disp);letter-spacing:-.025em;margin:0;text-wrap:balance}
.sub{font-size:15px;line-height:1.4;color:var(--mute);margin:0}
.row{display:flex;align-items:center;gap:10px}
.sp1{flex:1}
.list{padding:2px 0}
.li{display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:60px;text-align:left;width:100%;border:0;background:none}
.li+.li{border-top:1px solid var(--line)}
.li .ico{width:40px;height:40px;border-radius:12px;background:var(--sunk);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.li .tt{flex:1;min-width:0}
.li .tt b{display:block;font:600 15.5px/1.25 var(--body)}
.li .tt span{display:block;font-size:13px;color:var(--mute);margin-top:1px}
.li .end{color:var(--mute);display:flex;align-items:center;gap:4px;font-size:13px;flex:0 0 auto}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 10px;font:700 12px var(--body);background:var(--sunk)}
.pill.ink{background:var(--ink);color:var(--bg)}
.plusB{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 8px;font:700 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--bg)}
.foot2{padding:10px 18px calc(18px + 20px);display:flex;flex-direction:column;gap:10px;background:linear-gradient(to top,var(--bg) 70%,transparent)}
.link{border:0;background:none;min-height:44px;font:600 15px var(--body);color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.fld{border:1.5px solid var(--line);background:var(--card);border-radius:14px;min-height:56px;padding:0 16px;display:flex;align-items:center;font:600 18px var(--body);gap:8px}
.fld.f{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}
.fld .cur{width:2px;height:24px;background:var(--red);animation:blink 1s steps(2) infinite}
.fld .ph{color:var(--mute);font-weight:500}
.kb{background:#D1D3D9;padding:8px 4px 26px;display:flex;flex-direction:column;gap:9px;flex:0 0 auto}
.tk[data-mode="eve"] .kb{background:#2B2B2D}
.kb .r{display:flex;gap:5px;justify-content:center}
.kb i{height:42px;flex:1;max-width:33px;border-radius:6px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.3);font:400 19px/42px -apple-system,system-ui;text-align:center;font-style:normal;color:#141312}
.tk[data-mode="eve"] .kb i{background:#5A5A5E;color:#fff}
.kb i.w{max-width:none;flex:5}
.kb i.m{max-width:46px;background:#ABB0BA}
/* progress dots for onboarding */
.obp{display:flex;gap:5px;padding:0 4px}
.obp i{flex:1;height:4px;border-radius:4px;background:var(--line)}
.obp i.on{background:var(--ink)}
/* colour picker */
.colors{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.colors button{aspect-ratio:1;border-radius:50%;border:3px solid var(--bg);box-shadow:0 0 0 2px transparent;display:flex;align-items:center;justify-content:center;color:#fff;padding:0}
.colors button.on{box-shadow:0 0 0 2.5px var(--ink)}
.colors button svg{opacity:0}.colors button.on svg{opacity:1}
.opt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);background:var(--card);border-radius:16px;min-height:64px;padding:10px 14px;text-align:left;width:100%}
.opt .ico{width:42px;height:42px;border-radius:12px;background:var(--sunk);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.opt b{display:block;font:700 16px var(--body)}
.opt span{display:block;font-size:13px;color:var(--mute);margin-top:1px}
.opt.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.opt .rd{margin-left:auto;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--bg)}
.opt.on .rd{background:var(--ink);border-color:var(--ink)}
/* welcome (brand moment: red wedge allowed) */
.wel{position:absolute;inset:0;background:#141312;color:#F2ECE2;overflow:hidden;display:flex;flex-direction:column}
.wel .wedge{position:absolute;right:-120px;top:-60px;width:420px;height:330px;background:#E8452C;transform:rotate(-24deg);transform-origin:center;animation:wedge .9s var(--easeS) both}
@keyframes wedge{from{transform:rotate(-24deg) translate(60px,-80px)}to{transform:rotate(-24deg)}}
.wel .strips{position:absolute;right:26px;top:110px;display:flex;gap:10px;transform:rotate(6deg)}
.wel .strips .strip{width:92px;animation:drop .8s var(--spring) both}
.wel .strips .strip:nth-child(2){margin-top:34px;animation-delay:.15s;transform:rotate(-8deg)}
@keyframes drop{from{opacity:0;transform:translateY(-120px) rotate(-10deg)}}
.wel .bot{margin-top:auto;padding:0 24px 34px;position:relative;display:flex;flex-direction:column;gap:12px}
.wel .lines{font:800 46px/.95 var(--disp);letter-spacing:-.04em;min-height:140px}
.wel .lines span{display:block;animation:rise .5s var(--easeS) both}
.wel .lines span:nth-child(2){animation-delay:.25s}
.wel .lines span:nth-child(3){animation-delay:.5s;color:#FF6A4F}
.wel .btn{background:#FF5A3D;color:#141312!important}
.wel .btn.ghost{background:transparent;border-color:#F2ECE2;color:#F2ECE2!important}
.wel .link{color:#A39A8E}
.wel .logo{color:#F2ECE2}
/* reveal for demo */
.demoTag{align-self:center;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1.5px dashed var(--mute);color:var(--mute);border-radius:999px;padding:5px 10px}
/* invite card */
.inv{background:var(--card);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--shadow);border-radius:20px;overflow:hidden}
.tk[data-mode="eve"] .inv{box-shadow:5px 5px 0 var(--red)}
.inv .top2{background:#141312;color:#F2ECE2;padding:16px;position:relative;overflow:hidden;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end}
.inv .top2 .slab{position:absolute;right:-70px;top:-50px;width:220px;height:150px;background:#E8452C;transform:rotate(-24deg)}
.inv .top2 > *:not(.slab){position:relative}
.inv .top2 b{font:800 26px/1 var(--disp);letter-spacing:-.025em}
.inv .bd{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.inv .url{font:500 12px var(--mono);color:var(--mute);letter-spacing:.04em}
.qr{width:150px;height:150px;background:#fff;border-radius:14px;padding:10px;align-self:center}
/* permission alert (system) */
.alert{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:270px;border-radius:14px;background:rgba(242,242,242,.97);color:#000;text-align:center;z-index:60;animation:pop .28s var(--spring) both;font-family:-apple-system,system-ui,sans-serif;overflow:hidden}
.alert b{display:block;font-weight:600;font-size:17px;padding:18px 16px 4px;line-height:1.25}
.alert p{margin:0;font-size:13px;padding:0 16px 16px;line-height:1.35}
.alert .ab{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(0,0,0,.18)}
.alert .ab button{border:0;background:none;min-height:46px;font-size:17px;color:#0A7AFF}
.alert .ab button+button{border-left:1px solid rgba(0,0,0,.18);font-weight:600}
.dim{position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:59;animation:fade .2s both}
/* drawing pad */
.pad2{background:var(--paper);border:2px solid var(--ink);border-radius:20px;aspect-ratio:1;position:relative;touch-action:none;overflow:hidden}
.pad2 canvas,.pad2 svg{position:absolute;inset:0;width:100%;height:100%}
.pad2 .hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:700 22px var(--hand);color:var(--mute);pointer-events:none}
.tools{display:flex;gap:10px;align-items:center;justify-content:center}
.tools button{width:44px;height:44px;border-radius:50%;border:2px solid var(--bg);box-shadow:0 0 0 1.5px var(--line);padding:0}
.tools button.on{box-shadow:0 0 0 2.5px var(--ink)}
.timer{font:800 18px var(--disp);font-variant-numeric:tabular-nums}
.draw-anim path{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 2.2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* house */
.houseW{position:relative;padding:8px 6px 4px}
.houseW svg{width:100%;height:auto;display:block;overflow:visible}
.hs-line{stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hs-ghost{stroke:var(--mute);fill:none;stroke-width:1.6;stroke-dasharray:4 5;opacity:.6}
.hs-room{fill:var(--card)}
.hs-wall{fill:color-mix(in srgb,var(--sunk) 55%,var(--card))}
.tk[data-mode="eve"] .hs-wall{fill:#2A2420}
.tk[data-mode="eve"] .hs-win{fill:#E9B949}
.hs-win{fill:color-mix(in srgb,var(--me) 14%,var(--card))}
.hs-lock{font:500 9px var(--mono);letter-spacing:.08em;fill:var(--mute);text-transform:uppercase}
.it-g{cursor:pointer}
.it-g:hover{filter:brightness(.95)}
.it-g.drop{animation:itemDrop .7s cubic-bezier(.3,1.4,.5,1) both;transform-box:fill-box;transform-origin:50% 100%}
@keyframes itemDrop{0%{opacity:0;transform:translateY(-70px) scale(.8)}60%{opacity:1;transform:translateY(0) scale(1.06,.94)}100%{transform:none}}
.room-new .hs-line,.room-new .hs-room{animation:roomIn 1.2s ease both}
.room-new .hs-line{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.2s ease forwards}
@keyframes roomIn{from{opacity:0}}
.it-g.pulse{animation:glow 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes glow{50%{transform:scale(1.08)}}
.snow{fill:#fff;opacity:.9;animation:snow 6s linear infinite}
@keyframes snow{from{transform:translateY(-20px)}to{transform:translateY(320px)}}
.hstat{display:flex;gap:18px;padding:0 4px}
.hstat div b{display:block;font:800 30px/.95 var(--disp);letter-spacing:-.03em}
.hstat div span{font-size:12.5px;color:var(--mute);font-weight:600}
.dots3{display:flex;gap:6px}
.dots3 i{width:26px;height:8px;border-radius:8px;background:var(--sunk)}
.dots3 i.on{background:var(--ink)}
.earn{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;min-height:64px;width:100%;text-align:left;border:0;background:none}
.earn+.earn{border-top:1px solid var(--line)}
.earn .ico{width:42px;height:42px;border-radius:12px;background:var(--usS);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.earn .tt{flex:1;min-width:0}
.earn .tt b{display:block;font:600 15px/1.25 var(--body)}
.earn .tt span{display:block;font-size:12.5px;color:var(--mute);margin-top:1px}
.earn .go{flex:0 0 auto;border:1.5px solid var(--ink);border-radius:999px;min-height:36px;padding:0 12px;font:700 13px var(--body);display:flex;align-items:center}
.earn.done .go{border-color:transparent;background:var(--sunk)}
.mem{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;padding:10px 14px;min-height:64px;width:100%;text-align:left;border:0;background:none}
.mem+.mem{border-top:1px solid var(--line)}
.mem .th{width:52px;height:52px;border-radius:12px;background:var(--usS);display:flex;align-items:center;justify-content:center}
.mem .th svg{width:40px;height:40px}
.mem b{display:block;font:600 15px/1.25 var(--body)}
.mem span{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.memC{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:6px 0}
.memC .big{width:150px;height:150px;border-radius:28px;background:var(--usS);display:flex;align-items:center;justify-content:center}
.memC .big svg{width:120px;height:120px}
.celebrate{position:absolute;inset:0;z-index:55;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:color-mix(in srgb,var(--bg) 92%,transparent);text-align:center;padding:30px;animation:fade .3s both}
.celebrate .h1{animation:rise .5s .3s both}
.conf{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.conf i{position:absolute;top:-20px;width:8px;height:14px;border-radius:2px;animation:fall 1.8s ease-in forwards}
@keyframes fall{to{transform:translateY(900px) rotate(540deg)}}
/* plans */
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:10px}
.wk button{border:0;background:none;border-radius:12px;min-height:62px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font:600 12px var(--body);color:var(--mute)}
.wk button b{font:800 19px/1 var(--disp);color:var(--ink)}
.wk button.on{background:var(--ink);color:var(--bg)}
.wk button.on b{color:var(--bg)}
.wk .ds{display:flex;gap:3px;height:6px}
.wk .ds i{width:6px;height:6px;border-radius:50%}
.legend{display:flex;gap:6px;flex-wrap:wrap}
.swipe{position:relative;height:410px}
.sc{position:absolute;inset:0;border-radius:22px;background:var(--card);border:2px solid var(--ink);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),opacity .35s}
.sc .art{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
.sc .art svg{width:150px;height:150px}
.sc .bd{padding:14px 16px 16px;border-top:2px solid var(--ink)}
.sc .bd b{display:block;font:800 24px/1.05 var(--disp);letter-spacing:-.02em}
.sc .bd span{display:block;font-size:14px;color:var(--mute);margin-top:4px}
.sc.back{transform:scale(.95) translateY(14px);opacity:.7}
.sc.gone-r{transform:translateX(130%) rotate(16deg);opacity:0}
.sc.gone-l{transform:translateX(-130%) rotate(-16deg);opacity:0}
.sc .lk{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:6px;background:var(--card);border-radius:999px;padding:4px 10px 4px 4px;font:700 12.5px var(--body);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.sc .lk .av{width:24px;height:24px;border:0;font-size:11px}
.swb{display:flex;justify-content:center;gap:22px}
.swb button{width:64px;height:64px;border-radius:50%;border:2px solid var(--ink);background:var(--card);display:flex;align-items:center;justify-content:center}
.swb button.y{background:var(--ink);color:var(--bg)}
.match{position:absolute;inset:0;z-index:55;background:#141312;color:#F2ECE2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:30px;text-align:center;overflow:hidden;animation:fade .3s both}
.match .slab{position:absolute;left:-90px;bottom:-60px;width:420px;height:260px;background:#E8452C;transform:rotate(-24deg)}
.match > *:not(.slab){position:relative}
.match .h1{color:#F2ECE2;font-size:44px}
.match .btn{background:#FF5A3D;color:#141312!important}
.match .btn.ghost{background:transparent;border-color:#F2ECE2;color:#F2ECE2!important}
.seg2{display:flex;background:var(--sunk);border-radius:12px;padding:3px;gap:2px}
.seg2 button{flex:1;border:0;background:none;min-height:40px;border-radius:9px;font:600 14px var(--body);color:var(--mute)}
.seg2 button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.tk[data-mode="eve"] .seg2 button.on{background:#34302B}
/* paywall */
.pw{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
.pw .hd{position:relative;background:#141312;color:#F2ECE2;padding:58px 20px 18px;overflow:hidden;flex:0 0 auto}
.pw .hd .slab{position:absolute;right:-90px;top:-40px;width:300px;height:220px;background:#E8452C;transform:rotate(-24deg)}
.pw .hd > *:not(.slab){position:relative}
.pw .hd svg.hz{width:170px;height:140px;display:block;margin:4px auto 6px}
.pw .hd .h1{color:#F2ECE2;font-size:32px}
.pw .hd .ib{background:rgba(255,255,255,.12);border-color:transparent;color:#F2ECE2;position:absolute;right:14px;top:54px;z-index:2}
.vals{display:flex;flex-direction:column;gap:10px}
.vals div{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.35}
.vals div i{width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:-1px}
.plan{display:flex;align-items:center;gap:12px;border:2px solid var(--line);background:var(--card);border-radius:16px;min-height:70px;padding:10px 14px;text-align:left;width:100%;position:relative}
.plan.on{border-color:var(--ink)}
.plan b{display:block;font:700 16.5px var(--body)}
.plan span{display:block;font-size:13px;color:var(--mute)}
.plan .pr{margin-left:auto;text-align:right;font:700 16px var(--body)}
.plan .rd{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--bg)}
.plan.on .rd{background:var(--ink);border-color:var(--ink)}
.plan .tg{position:absolute;top:-10px;right:14px;background:var(--ink);color:var(--bg);font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:999px}
.fine{font-size:12px;color:var(--mute);text-align:center;line-height:1.45}
.legal{display:flex;justify-content:center;gap:14px;font-size:12px;color:var(--mute)}
.legal button{border:0;background:none;min-height:36px;font-size:12px;color:var(--mute);text-decoration:underline}
.tl{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 10px;font-size:13.5px}
.tl i{width:24px;height:24px;border-radius:50%;background:var(--sunk);display:flex;align-items:center;justify-content:center}
.tl i.on{background:var(--ink);color:var(--bg)}
.tl b{display:block;font-weight:700;font-size:14px}
.tl span{color:var(--mute)}
/* us */
.storyG{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.storyG .s{border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}
.storyG .s img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.05);display:block}
.storyG .s .tx{padding:8px 10px}
.storyG .s .tx b{display:block;font:700 13.5px/1.25 var(--body)}
.storyG .s .tx span{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.storyG .tkC{aspect-ratio:1;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;padding:10px;border-bottom:1px solid var(--line)}
.storyG .tkC b{font:800 17px/1.05 var(--disp);letter-spacing:-.015em}
.barcode{height:84px;background:repeating-linear-gradient(90deg,#141312 0 2px,transparent 2px 4px,#141312 4px 7px,transparent 7px 9px,#141312 9px 10px,transparent 10px 13px);border-radius:4px}
.lcard{border-radius:18px;padding:16px;color:#fff;min-height:180px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.lcard .wh{background:#fff;border-radius:12px;padding:12px;color:#141312}
.wish{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;min-height:76px}
.wish+.wish{border-top:1px solid var(--line)}
.wish .pic{width:64px;height:64px;border-radius:12px;background:var(--sunk);display:flex;align-items:center;justify-content:center}
.wish b{display:block;font:600 15px var(--body)}
.wish span{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.secret{display:flex;gap:10px;align-items:center;background:var(--ink);color:var(--bg);border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.35}
.cap{background:var(--ink);color:var(--bg);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.cap .cd{display:flex;gap:10px}
.cap .cd div{background:rgba(255,255,255,.08);border-radius:12px;padding:10px 12px;flex:1}
.cap .cd b{display:block;font:800 28px/1 var(--disp)}
.cap .cd span{font-size:12px;opacity:.7}
.mapC{height:220px;border-radius:var(--r);background:var(--sunk);position:relative;overflow:hidden;border:1px solid var(--line)}
.mapC svg{position:absolute;inset:0;width:100%;height:100%}
.set .li .end .swc{margin-left:6px}
/* os screens */
.os{position:absolute;inset:0;color:#fff;display:flex;flex-direction:column;overflow:hidden;background:#141312}
.os .wall{position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 10%,#5b4a3c 0%,#2b2420 45%,#141312 100%)}
.os .wall.ph{background-size:cover;background-position:center;filter:grayscale(1) brightness(.55)}
.os > *:not(.wall){position:relative}
.lockT{text-align:center;margin-top:70px}
.lockT small{display:block;font:600 17px -apple-system,system-ui;opacity:.85}
.lockT b{display:block;font:700 86px/1 -apple-system,system-ui;letter-spacing:-.02em;margin-top:2px}
.lw{display:flex;justify-content:center;gap:10px;margin-top:6px}
.lw div{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border-radius:999px;padding:6px 10px;font:600 13px -apple-system,system-ui}
.ntf{margin:0 10px;display:flex;flex-direction:column;gap:8px}
.ntf .n{background:rgba(245,240,235,.82);color:#141312;border-radius:20px;padding:11px 13px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;backdrop-filter:blur(14px);animation:rise .4s var(--easeS) both}
.ntf .n .ai{width:38px;height:38px;border-radius:9px;background:#141312;color:#F2ECE2;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ntf .n .ai::after{content:"";position:absolute;right:-12px;top:-10px;width:30px;height:22px;background:#E8452C;transform:rotate(-24deg)}
.ntf .n b{display:block;font:600 14.5px -apple-system,system-ui}
.ntf .n span{display:block;font:400 14px/1.3 -apple-system,system-ui}
.ntf .n small{font:400 12.5px -apple-system,system-ui;opacity:.6;align-self:start}
.hsg{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 14px;padding:66px 22px 0}
.hsg .ap{display:flex;flex-direction:column;align-items:center;gap:5px;font:500 11.5px -apple-system,system-ui}
.hsg .ap i{width:60px;height:60px;border-radius:14px;background:rgba(255,255,255,.18);display:block}
.wsm{grid-column:span 2;grid-row:span 2;border-radius:22px;overflow:hidden;background:#F2ECE2;color:#141312;position:relative;aspect-ratio:1}
.wsm img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.wsm .lab{position:absolute;left:10px;bottom:9px;font:700 22px/1 var(--hand);color:#B8321C;background:rgba(255,253,249,.88);padding:2px 8px;border-radius:8px}
.wmd{grid-column:span 4;border-radius:22px;background:#FFFDF9;color:#141312;display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:12px;align-items:center}
.wmd .pic{width:110px;height:110px;border-radius:14px;overflow:hidden;background:#F2ECE2;display:flex;align-items:center;justify-content:center}
.wmd .pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.wmd b{display:block;font:800 17px/1.1 "Bricolage Grotesque","Golos Text",sans-serif}
.wmd span{display:block;font-size:12.5px;color:#6A635A;margin-top:3px}
.wmd .q{margin-top:8px;border-top:1px solid #E2D8C8;padding-top:8px;font-size:12.5px;font-weight:600;display:flex;gap:6px;align-items:center}
.dock{margin-top:auto;margin-bottom:12px;margin-inline:10px;border-radius:30px;background:rgba(255,255,255,.18);display:flex;justify-content:space-around;padding:12px;backdrop-filter:blur(10px)}
.dock i{width:58px;height:58px;border-radius:14px;background:rgba(255,255,255,.3)}
/* web chrome (invite + recipient) */
.web{position:absolute;inset:0;background:#F2ECE2;color:#141312;display:flex;flex-direction:column}
.web .scroll{padding-top:0}
.web .addr{flex:0 0 auto;margin-top:auto;padding:8px 14px 26px;background:rgba(250,248,245,.94);border-top:1px solid #E2D8C8;display:flex;flex-direction:column;gap:8px}
.web .addr div{background:#E9E5DF;border-radius:12px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;font:500 15px -apple-system,system-ui;color:#141312}
.web .wh{background:#141312;color:#F2ECE2;padding:62px 20px 22px;position:relative;overflow:hidden}
.web .wh .slab{position:absolute;right:-80px;top:-40px;width:260px;height:190px;background:#E8452C;transform:rotate(-24deg)}
.web .wh > *:not(.slab){position:relative}
.appstore{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:10px 12px;border:1px solid #E2D8C8}
.appstore .ai{width:52px;height:52px;border-radius:12px;background:#141312;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#F2ECE2}
.appstore .ai::after{content:"";position:absolute;right:-16px;top:-12px;width:40px;height:28px;background:#E8452C;transform:rotate(-24deg)}
/* skeleton + offline */
.skel{background:linear-gradient(90deg,var(--sunk) 0%,var(--card) 50%,var(--sunk) 100%);background-size:200% 100%;animation:sh 1.2s linear infinite;border-radius:12px}
@keyframes sh{to{background-position:-200% 0}}
.offl{display:flex;gap:8px;align-items:center;background:var(--ink);color:var(--bg);border-radius:12px;padding:10px 12px;font:600 13.5px var(--body)}
.pnote{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:center}
.tour{position:absolute;inset:0;z-index:56;background:#141312;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#F2ECE2;animation:fade .3s both}
.tour .f916{width:230px;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#F2ECE2;position:relative;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.tour .f916 .pan{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;animation:pan 6s ease-in-out infinite alternate}
.tour .f916 .pan svg{width:520px;flex:0 0 auto}
@keyframes pan{0%{transform:translateX(30%) scale(1.15)}50%{transform:translateX(-10%) scale(1.3)}100%{transform:translateX(-35%) scale(1.15)}}
.tour .cap2{position:absolute;left:10px;right:10px;bottom:12px;background:#141312;color:#F2ECE2;border-radius:10px;padding:8px 10px;font:600 12.5px var(--body)}
.tour .cap2 small{display:block;font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#FF6A4F}
.tour .wm{position:absolute;right:10px;top:10px;font:800 14px var(--disp);color:#141312;display:flex;gap:4px;align-items:center}
.tour .rec{display:flex;gap:6px;align-items:center;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.tour .rec i{width:9px;height:9px;border-radius:50%;background:#E8452C;animation:blink 1s steps(2) infinite}

/* onboarding, paywall, outside-the-app, states */
.fld input{border:0;background:none;font:inherit;color:var(--ink);flex:1;min-width:0;outline:none;height:52px;padding:0}
.fld:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}
.fld small{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.obq{display:flex;flex-direction:column;gap:6px}
.obq .mk{display:block}
.prevRow{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px}
.prevRow .rail{width:4px;align-self:stretch;border-radius:4px}
.prevRow .tt{flex:1;min-width:0}
.prevRow b{display:block;font:600 15px var(--body)}
.prevRow span{display:block;font-size:12.5px;color:var(--mute)}
.colors button[disabled]{opacity:.35;cursor:not-allowed}
.colors button .lk,
.colors a .lk{opacity:1!important}
.wel .strips .strip .tc{aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font:800 10.5px/1.05 var(--disp);color:#141312;padding:4px}
.wel .strips .strip .tc.s{background:#F2ECE2}
.wel .strips .strip .tc em{font-style:normal;color:#B8321C;border:1.5px solid #B8321C;border-radius:4px;padding:1px 4px;transform:rotate(-8deg);display:inline-block}
.wel .top3{display:flex;justify-content:space-between;align-items:center;padding:62px 22px 0;position:relative}
.wel .lang{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#A39A8E}
.dflip{position:relative}
.stamp.late{animation:stamp .5s var(--spring) both}
.qrw{display:flex;flex-direction:column;align-items:center;gap:10px;animation:pop .3s var(--spring) both}
.qr svg{width:100%;height:100%;display:block}
.nmock{background:var(--sunk);border-radius:22px;padding:18px 12px;display:flex;flex-direction:column;gap:8px}
.nmock .ntf{margin:0}
.rules{display:flex;flex-direction:column;gap:8px;font-size:14.5px;line-height:1.35}
.rules div{display:flex;gap:10px;align-items:flex-start}
.rules i{width:26px;height:26px;border-radius:50%;background:var(--sunk);display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-style:normal}
.wait{border:1.5px dashed var(--mute);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--mute);width:36px;height:36px;font:700 14px var(--body);background:var(--card)}
.top .pair .wait{margin-left:-10px;width:36px;height:36px}
.starter{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:64px;width:100%;text-align:left;border:0;background:none;color:inherit}
.starter+.starter{border-top:1px solid var(--line)}
.starter .ico{width:42px;height:42px;border-radius:12px;background:var(--sunk);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.starter .tt{flex:1;min-width:0}
.starter b{display:block;font:600 15px/1.25 var(--body)}
.starter span{display:block;font-size:12.5px;color:var(--mute);margin-top:1px}
.starter .n{font:500 11px var(--mono);color:var(--mute)}
.pw .hd{--ink:#F2ECE2;--card:#26221F;--sunk:#2E2925;--usS:#3A332C;--mute:#A39A8E;--bg:#141312;--line:#3A342E}
.pw .bd{flex:1;overflow-y:auto;padding:18px 20px 8px;display:flex;flex-direction:column;gap:16px;scrollbar-width:none}
.pw .ft{flex:0 0 auto;padding:10px 20px 26px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);background:var(--bg)}
.pw .both{display:flex;align-items:center;gap:10px;font:600 14px var(--body)}
.pw .both .av{width:30px;height:30px}
.pw .both .av+.av{margin-left:-12px}
.perr{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--ink);border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.35;background:var(--card)}
.perr b{display:block;font-size:15px}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:rot .8s linear infinite;display:inline-block}
.apsh{position:absolute;left:0;right:0;bottom:0;z-index:61;background:#F2F2F7;color:#000;border-radius:14px 14px 0 0;padding:14px 18px 30px;font-family:-apple-system,system-ui,sans-serif;animation:up .33s var(--easeS) both}
.apsh .h{display:flex;justify-content:space-between;align-items:center;font-size:20px;font-weight:700}
.apsh .h button{width:30px;height:30px;border-radius:50%;border:0;background:#E3E3E8;color:#6b6b70;font-size:15px}
.apsh .r{display:grid;grid-template-columns:60px minmax(0,1fr);gap:12px;align-items:center;background:#fff;border-radius:12px;padding:12px;margin-top:12px}
.apsh .r .ai{width:60px;height:60px;border-radius:14px;background:#141312;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#F2ECE2}
.apsh .r .ai::after{content:"";position:absolute;right:-18px;top:-14px;width:46px;height:32px;background:#E8452C;transform:rotate(-24deg)}
.apsh .r b{display:block;font-size:16px}
.apsh .r span{display:block;font-size:13px;color:#6b6b70}
.apsh .kv{background:#fff;border-radius:12px;margin-top:10px;font-size:14px}
.apsh .kv div{display:flex;justify-content:space-between;padding:11px 12px;gap:10px}
.apsh .kv div+div{border-top:1px solid #E5E5EA}
.apsh .kv span{color:#6b6b70}
.apsh .fid{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:14px;font-size:14px;color:#3a3a3c}
.apsh .fid i{width:52px;height:52px;border-radius:14px;border:2.5px solid #0A7AFF;display:flex;align-items:center;justify-content:center;color:#0A7AFF;font-style:normal}
.apsh .fid i.ok{border-color:#34C759;color:#34C759;animation:pop .3s var(--spring) both}
.garden svg{width:240px;height:150px;overflow:visible}
.garden .draw-anim path,.garden .draw-anim rect,.garden .draw-anim circle{stroke-dasharray:300;stroke-dashoffset:300;animation:draw 1.6s ease forwards}
.acct .btn{width:100%}
.acct .btn.apple{background:#000;color:#fff!important}
.tk[data-mode="eve"] .acct .btn.apple{background:#F2ECE2;color:#141312!important}
.os .sb,.web .sb{color:inherit}
.hsg .ap i.vb{background:#141312;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#F2ECE2}
.hsg .ap i.vb::after{content:"";position:absolute;right:-18px;top:-14px;width:46px;height:32px;background:#E8452C;transform:rotate(-24deg)}
.hsg .ap i.vb svg{position:relative;z-index:1}
.wsm .doo{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#FFFDF9;color:#141312}
.wsm .doo svg{width:72%;height:72%}
.wbtn{border:0;padding:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}
.story{position:absolute;inset:0;background:#141312;display:flex;flex-direction:column;align-items:center;color:#fff}
.story .bars{display:flex;gap:4px;width:100%;padding:58px 10px 8px}
.story .bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.story .bars i.on::after{content:"";display:block;height:100%;background:#fff;animation:fillw 5s linear forwards}
@keyframes fillw{from{width:0}to{width:100%}}
.story .who{display:flex;align-items:center;gap:8px;width:100%;padding:0 12px;font:600 13.5px -apple-system,system-ui}
.story .who i{width:30px;height:30px;border-radius:50%;background:#5b4a3c;display:block}
.story .card9{margin-top:14px;width:280px;flex:1;max-height:540px;border-radius:16px;background:#F2ECE2;color:#141312;position:relative;overflow:hidden;padding:18px;display:flex;flex-direction:column;gap:10px}
.story .card9 .slab{position:absolute;right:-90px;top:-60px;width:260px;height:190px;background:#E8452C;transform:rotate(-24deg)}
.story .card9 > *:not(.slab){position:relative}
.story .sticker{align-self:center;margin-top:auto;background:#fff;color:#141312;border:0;border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:8px;font:700 14px -apple-system,system-ui;box-shadow:0 6px 18px rgba(0,0,0,.25);animation:breathe 2.4s ease-in-out infinite}
.story .reply{width:100%;padding:12px 12px 28px;display:flex;gap:10px;align-items:center}
.story .reply div{flex:1;border:1px solid rgba(255,255,255,.5);border-radius:999px;min-height:44px;display:flex;align-items:center;padding:0 16px;font:400 14px -apple-system,system-ui;opacity:.85}
.launch{position:absolute;inset:0;background:#141312;display:flex;align-items:center;justify-content:center;overflow:hidden}
.launch .slab{position:absolute;right:-140px;top:-80px;width:460px;height:340px;background:#E8452C;transform:rotate(-24deg);animation:wedge .9s var(--easeS) both}
.launch .lg{position:relative;display:flex;align-items:center;gap:10px;font:800 44px var(--disp);color:#F2ECE2;letter-spacing:-.04em;animation:rise .6s .2s var(--easeS) both}
.launch .icons{position:absolute;left:0;right:0;bottom:60px;display:flex;justify-content:center;align-items:flex-end;gap:18px}
.launch .icons div{display:flex;flex-direction:column;align-items:center;gap:6px;font:500 10px var(--mono);letter-spacing:.08em;color:#A39A8E}
.aicon{background:#141312;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#F2ECE2;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.aicon::after{content:"";position:absolute;background:#E8452C;transform:rotate(-24deg);right:-30%;top:-24%;width:76%;height:54%}
.aicon svg{position:relative;z-index:1}
.wg{padding:20px;display:flex;flex-direction:column;gap:14px}
.wg .opt b{font-size:17px}
.wg .res{background:#141312;color:#F2ECE2;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:8px;animation:pop .35s var(--spring) both}
.wg .res b{font:800 24px/1.05 var(--disp);letter-spacing:-.02em}
.skelHero{height:236px;border-radius:var(--r)}
.timerB{display:flex;justify-content:space-between;align-items:center}
.timerB .ring{width:40px;height:40px}
.timerB .ring circle{fill:none;stroke-width:4}
.alert{left:0;right:0;top:0;bottom:0;margin:auto;height:fit-content;transform:none}

g.drop{animation:itemDrop .7s cubic-bezier(.3,1.4,.5,1) both;transform-box:fill-box;transform-origin:50% 100%}
.pw .hd{padding:56px 20px 16px}
.pw .hd svg.hz{width:150px;height:104px;margin:0 auto 6px}
.pw .hd .h1{font-size:28px}
.pw .ft{gap:8px;padding-top:14px}
.pw .plans{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.pw .plan{min-height:60px;padding:8px 14px}
.pw .ft .perr{padding:10px 12px;font-size:13px}
.pw .legal button{min-height:30px}
.garden svg{width:280px;height:170px}
.web,.wg{--bg:#F2ECE2;--card:#FFFDF9;--ink:#141312;--mute:#6A635A;--line:#E2D8C8;--sunk:#EADFCB;--me:#245A92;--pa:#1F5E48;--usS:#EADFCB;color:#141312}
.web .btn:not(.ghost){background:#D83A22;color:#fff!important}
.web .btn.ghost{border-color:#141312;color:#141312!important}
.share916{background:#F2ECE2;color:#141312;border-radius:16px;padding:14px;aspect-ratio:9/16;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;box-shadow:0 14px 30px rgba(0,0,0,.22);flex:0 0 auto}
.share916 .slab{position:absolute;right:-70px;top:-50px;width:190px;height:140px;background:#E8452C;transform:rotate(-24deg)}
.share916 > *:not(.slab){position:relative}
.sb > div{flex:1}
.plan .pr{white-space:nowrap}
.wel .lines.ru{font-size:38px;min-height:118px}
.pad2{background:#FFFDF9}

/* ================= V2 ================= */
/* motion layer */
.stg > *{animation:rise .46s var(--easeS) both}
.stg > *:nth-child(1){animation-delay:0ms}.stg > *:nth-child(2){animation-delay:40ms}.stg > *:nth-child(3){animation-delay:80ms}.stg > *:nth-child(4){animation-delay:120ms}.stg > *:nth-child(5){animation-delay:160ms}.stg > *:nth-child(6){animation-delay:200ms}.stg > *:nth-child(7){animation-delay:240ms}.stg > *:nth-child(8){animation-delay:280ms}.stg > *:nth-child(n+9){animation-delay:320ms}
@media (prefers-reduced-motion:reduce){.stg > *,.mir,.gc,.pch,.unl div,.unl i,.pstamp{animation:none!important}}
@keyframes ringIn{from{stroke-dashoffset:var(--full,314)}}
.ringA{animation:ringIn 1.1s var(--easeS) both}
.ringS .ringA{--full:94.2}
@keyframes pulseB{0%,100%{border-color:var(--mute);transform:scale(1)}50%{border-color:var(--ink);transform:scale(1.02)}}
@keyframes dashMove{to{stroke-dashoffset:-22}}
.arcD{animation:dashMove 1.2s linear infinite}

/* onboarding chrome */
.obbar{flex:1;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.obbar i{display:block;height:100%;background:var(--ink);border-radius:6px;transition:width .55s var(--easeS)}
.obn{width:44px;text-align:right;font:500 11.5px var(--mono);color:var(--mute);letter-spacing:.06em}
.obFoot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:6px}
.obFoot .fine{text-align:center}
.shb .h1{text-wrap:balance}

/* goals grid */
.gg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:112px;padding:14px;border:1.5px solid var(--line);border-radius:16px;background:var(--card);text-align:left;animation:rise .4s var(--easeS) both}
.gc .gi{width:42px;height:42px;border-radius:12px;background:var(--sunk);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.gc b{font:700 15px/1.22 var(--body)}
.gc .tick{position:absolute;right:10px;top:10px;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:transparent}
.gc.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.gc.on .gi{background:var(--ink);color:var(--bg)}
.gc.on .tick{background:var(--ink);border-color:var(--ink);color:var(--bg);animation:pop .3s var(--spring)}

/* since picker */
.whR{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wh2{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 6px}
.wh2 b{font:800 28px/1 var(--disp);letter-spacing:-.02em;min-height:32px;text-transform:capitalize}
.wh2 .ib{width:40px;height:34px;border-radius:10px}
.bigN{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:6px 0 10px}
.bigN b{font:800 64px/1 var(--disp);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.bigN span{font:600 15px var(--body);color:var(--mute)}
.msR{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}
.msR div{background:var(--sunk);border-radius:12px;padding:8px 10px}
.msR b{display:block;font:700 14.5px var(--body);margin-top:2px}

/* distance */
.optL{display:flex;flex-direction:column;gap:8px}
.opt.sm2{min-height:58px;padding:8px 12px}
.opt.sm2 .ico{width:38px;height:38px}
.opt.sm2 b{font-size:15px}.opt.sm2 span{font-size:12.5px}
.arcM{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;height:170px;animation:rise .4s var(--easeS) both}
.arcM svg{position:absolute;inset:0;width:100%;height:100%}
.arcM .ct{position:absolute;font:600 12px var(--body);background:var(--card);padding:3px 8px;border-radius:999px;border:1px solid var(--line)}
.kmB{position:absolute;left:0;right:0;top:12px;text-align:center}
.kmB b{display:block;font:800 30px/1 var(--disp);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kmB span{font-size:12px;color:var(--mute)}
.tzR{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tzR div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.tzR b{display:block;font:800 26px/1.05 var(--disp);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tzR span:last-child{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--mute)}
.tzR.big b{font-size:32px}

/* pains */
.chipsW{display:flex;flex-wrap:wrap;gap:8px}
.pch{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font:600 14.5px var(--body)!important;animation:rise .35s var(--easeS) both}
.pch.on{background:var(--ink);color:var(--bg)!important;border-color:var(--ink)}
.quoteB{background:var(--sunk);border-radius:14px;padding:12px 14px}
.quoteB p{margin:4px 0 0;font-size:14px;line-height:1.4}

/* mirror */
.mirL{display:flex;flex-direction:column;gap:10px}
.mir{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;animation:riseBig .55s var(--easeS) both}
.mui{width:112px;height:84px;flex:0 0 auto;border-radius:12px;background:var(--sunk);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px}
.mtx{min-width:0}
.mtx b{display:block;font:800 16px/1.15 var(--disp);letter-spacing:-.01em}
.mtx span{display:block;font-size:12.5px;line-height:1.35;color:var(--mute);margin-top:3px}
.mtx em{display:block;font-style:normal;font:600 11.5px/1.3 var(--body);color:var(--ink);margin-top:5px}
.mq{background:var(--ink);color:var(--bg);border-radius:10px;padding:7px 8px;width:100%;display:flex;flex-direction:column;gap:3px}
.mq span{font:500 8px var(--mono);letter-spacing:.12em;opacity:.7}
.mq b{font:800 11.5px/1.05 var(--disp)}
.mq div{display:flex}.mq .av{width:18px;height:18px;border-width:1.5px}.mq .av+.av{margin-left:-5px}
.mcal{width:100%;display:flex;flex-direction:column;gap:4px}
.mr{display:flex;align-items:center;gap:5px;background:var(--card);border-radius:6px;padding:3px 5px;font-size:10px}
.mr i{width:3px;height:14px;border-radius:2px}
.mr b{flex:1;font-weight:700}.mr span{color:var(--mute);font:500 9px var(--mono)}
.mdist{width:100%;display:flex;flex-direction:column;gap:3px}
.mdist b{font:800 18px var(--disp)}.mdist span{font-size:10.5px;color:var(--mute)}
.mtd{width:100%;display:flex;flex-direction:column;gap:5px}
.mtd div{display:flex;align-items:center;gap:6px;background:var(--card);border-radius:6px;padding:4px 6px;font:600 10.5px var(--body)}
.mtd i{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center}
.mtd i.on{background:var(--ink);color:var(--bg)}
.dotM{width:9px;height:9px;border-radius:50%;margin-left:auto}
.mmatch{position:relative;width:100%;height:100%}
.mmatch .c1,.mmatch .c2{position:absolute;width:44px;height:58px;border-radius:8px;background:var(--card);border:1.5px solid var(--ink);top:6px}
.mmatch .c1{left:12px;transform:rotate(-8deg)}
.mmatch .c2{right:12px;transform:rotate(8deg);display:flex;align-items:center;justify-content:center;color:var(--red)}
.mmatch b{position:absolute;left:0;right:0;bottom:0;text-align:center;font:800 11px var(--disp)}
.mhouse svg{width:96px;height:80px}

/* photo step */
.phWhere{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pw1{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.pw1 small{font-size:11.5px;line-height:1.25;color:var(--mute)}
.miniW{width:74px;height:74px;border-radius:18px;overflow:hidden;position:relative;background:#141312;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.miniW img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.miniW span{position:absolute;left:6px;bottom:4px;font:700 13px var(--hand);color:#fff}
.miniS{width:44px;background:var(--paper);padding:3px;display:flex;flex-direction:column;gap:2px;box-shadow:0 4px 10px rgba(0,0,0,.14);transform:rotate(3deg)}
.miniS img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1);display:block}
.miniS i{display:block;aspect-ratio:4/3;background:var(--sunk);border:1px dashed var(--mute)}
.miniA{width:58px;height:58px;border-radius:50%;overflow:hidden;border:3px solid var(--me);margin:8px 0}
.miniA img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.phEmpty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--mute);color:var(--mute);background:var(--card);border-radius:inherit}
.miniW .phEmpty{border-radius:18px}
.ladder{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px}
.ld{display:flex;align-items:center;justify-content:space-around;margin-top:10px}
.ld > span{width:52px;height:52px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ld .l1{background:var(--sunk)}.ld .l1 img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.ld .l2{background:var(--paper);color:var(--me);border:1px solid var(--line)}.ld .l2 svg{width:100%;height:100%}
.ld .l3{background:var(--me);color:#fff;font:800 22px var(--disp)}
.tk[data-mode="eve"] .ld .l3{color:#141312}
.ld i{font-style:normal;color:var(--mute)}
.ldT{display:flex;justify-content:space-around;margin-top:6px;font-size:11.5px;color:var(--mute);text-align:center}
.ldT span{width:80px}

/* widgets */
.wPrev,.wGal{background:linear-gradient(160deg,#3B4A5C,#1E2530 60%,#2A1E22);border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:12px}
.wpRow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wg{border-radius:20px;overflow:hidden;position:relative;color:#141312;background:#F2ECE2;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.wg.s{aspect-ratio:1/1}
.wg.s.ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.wg.s.ph .doo{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#FFFDF9}
.wg.s.ph .doo svg{width:70%;height:70%}
.wg.s.ph .lab{position:absolute;left:10px;bottom:6px;font:700 20px var(--hand);color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.wg.s.ph .doo + .lab{color:#B8321C;text-shadow:none}
.wg.s.days,.wg.s.dist{padding:12px;display:flex;flex-direction:column;justify-content:space-between}
.wg.s.days{background:#141312;color:#F2ECE2}
.wg.s.days .mk{color:#A39A8E}
.wg.s.days b,.wg.s.dist b{font:800 40px/1 var(--disp);letter-spacing:-.04em}
.wg.s.days span:not(.mk),.wg.s.dist span:not(.mk){font-size:12px}
.wg.s.days svg{position:absolute;right:12px;top:12px;color:#E8452C}
.wg.s.dist .mk{color:#6A635A}
.wg.s.dist b{font-size:30px}
.wg.m{display:flex;gap:10px;padding:10px;align-items:center;min-height:120px}
.wg.m .pic{width:96px;height:96px;border-radius:14px;overflow:hidden;flex:0 0 auto;background:#FFFDF9;display:flex;align-items:center;justify-content:center}
.wg.m .pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.wg.m .pic svg{width:86%;height:86%}
.wg.m b{display:block;font:800 16px/1.15 var(--disp);margin:3px 0}
.wg.m span:not(.mk){font-size:12px;color:#6A635A}
.wg.m .mk{color:#6A635A}
.wg.m.dm{justify-content:space-between;padding:14px}
.wg.m.dm b{font-size:26px}
.wg.m.dm .clk{display:flex;flex-direction:column;gap:4px;align-items:flex-end;font:500 11px var(--mono);color:#6A635A;min-width:110px}
.wg.m.dm .prog{width:100%;background:#E2D8C8}.wg.m.dm .prog i{background:#141312}
.wg.l{padding:12px;display:flex;flex-direction:column;gap:4px}
.wg.l .mk{color:#6A635A}
.wg.l svg{width:100%;height:170px}
.wg.l b{font:800 15px var(--disp)}
.wg .hs-wall{fill:#FFFDF9}.wg .hs-line{stroke:#141312}
.steps3{display:flex;flex-direction:column;gap:8px}
.steps3 div{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:14.5px}
.steps3 i{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font:700 13px var(--body);font-style:normal;flex:0 0 auto}
.lockG{background:linear-gradient(170deg,#4A5568,#1E2530);border-radius:22px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff}
.lockG .lockT b{font-size:64px}
.lwR{display:flex;gap:10px;align-items:center}
.lc{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.lc b{font:700 14px var(--body)}
.lrect{min-width:140px;height:58px;border-radius:16px;background:rgba(255,255,255,.18);display:flex;flex-direction:column;justify-content:center;padding:0 12px}
.lrect b{font:700 13.5px var(--body)}.lrect span{font-size:12px;opacity:.8}
.linl{font:600 13px var(--body);display:flex;align-items:center;gap:6px;opacity:.9}

/* pledge */
.clapBtn{border:0;background:none;padding:0;width:240px;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;margin-top:6px}
.clapS{width:100%;display:block;filter:drop-shadow(5px 6px 0 rgba(20,19,18,.18))}
.clapBtn.slam{animation:shake .35s}
.clapBtn .act{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-9deg) scale(2);opacity:0;border:4px solid #E8452C;color:#E8452C;background:var(--bg);font:800 30px var(--disp);padding:2px 14px;border-radius:10px;letter-spacing:.02em;pointer-events:none}
.clapBtn .act.on{animation:stamp .45s var(--spring) forwards}
#holdHint{min-height:16px}

/* pre-paywall */
.trialArt{position:relative;width:100%;height:230px;display:flex;align-items:center;justify-content:center}
.tHouse{width:250px;background:var(--card);border:2px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--shadow);padding:6px;animation:riseBig .6s var(--easeS) both}
.tHouse svg{width:100%;display:block}
.tStrip{position:absolute;left:4px;top:8px;z-index:2;width:66px;background:var(--paper);padding:4px;display:flex;flex-direction:column;gap:3px;transform:rotate(-7deg);box-shadow:0 6px 14px rgba(0,0,0,.18);animation:drop .8s .2s var(--spring) both}
.tStrip img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1);display:block}
.tStrip .tc,.rStrip .tc{aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font:800 8px/1.05 var(--disp);color:#141312;padding:3px}
.tStrip .tc.s,.rStrip .tc.s{background:#F2ECE2}
.tStrip .tc em,.rStrip .tc em{font-style:normal;color:#B8321C}
.tTag{position:absolute;right:6px;top:16px;background:#E8452C;color:#fff;font:800 15px var(--disp);padding:5px 12px;border-radius:8px;transform:rotate(8deg);animation:pop .4s .6s var(--spring) both}
.both{display:flex;align-items:center;gap:10px;font:600 14px var(--body)}
.both .av{width:30px;height:30px}.both .av+.av{margin-left:-16px}
.npill{align-self:center;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border-radius:999px;background:color-mix(in srgb,var(--ok) 14%,var(--card));color:var(--ok);font:700 14px var(--body)}
.bellW{padding:10px 0}
.bellI{position:relative;width:110px;height:110px;border-radius:50%;background:var(--sunk);display:flex;align-items:center;justify-content:center;animation:pop .5s var(--spring) both}
.bellI svg{transform-origin:50% 10%;animation:ringB 1.6s .5s ease-in-out infinite}
.bellI i{position:absolute;right:16px;top:16px;width:26px;height:26px;border-radius:50%;background:#E8452C;color:#fff;font:700 13px var(--body);font-style:normal;display:flex;align-items:center;justify-content:center;border:3px solid var(--bg)}
@keyframes ringB{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-12deg)}30%{transform:rotate(8deg)}40%{transform:rotate(-5deg)}}

/* plus mode */
.plusOn{position:absolute;inset:0;background:#141312;color:#F2ECE2;overflow:hidden;display:flex;flex-direction:column}
.plusOn .slab{position:absolute;right:-120px;top:-60px;width:360px;height:260px;background:#E8452C;transform:rotate(-24deg);animation:wedge .9s var(--easeS) both}
.pIn{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;padding:70px 22px 30px;text-align:center}
.pstamp{border:4px solid #F2ECE2;border-radius:14px;padding:8px 18px 6px;font:800 40px/0.95 var(--disp);letter-spacing:-.02em;transform:rotate(-6deg);animation:stampIn .5s .25s var(--spring) both;display:flex;flex-direction:column;align-items:center;background:#141312}
.pstamp small{font:500 12px var(--mono);letter-spacing:.3em;color:#E8452C;margin-top:4px}
@keyframes stampIn{from{opacity:0;transform:rotate(-6deg) scale(2.4)}to{opacity:1;transform:rotate(-6deg) scale(1)}}
.plusOn .h1{color:#F2ECE2;margin-top:6px;animation:rise .5s .55s both}
.pBoth{display:flex;align-items:center;gap:0;animation:rise .5s .7s both}
.pBoth .av{width:44px;height:44px;border-color:#141312}
.pBoth .ln{width:56px;height:3px;background:repeating-linear-gradient(90deg,#E8452C 0 8px,transparent 8px 13px);animation:growX .8s .9s both;transform-origin:left}
.pSub{margin:0;color:#A39A8E;font-size:15px;animation:rise .5s .8s both}
.unl{width:100%;display:flex;flex-direction:column;gap:6px;text-align:left}
.unl div{display:flex;align-items:center;gap:10px;background:rgba(242,236,226,.07);border-radius:12px;padding:10px 12px;font:600 14.5px var(--body);animation:rise .4s both}
.unl i{width:22px;height:22px;border-radius:50%;background:#F2ECE2;color:#141312;display:flex;align-items:center;justify-content:center;flex:0 0 auto;animation:pop .35s var(--spring) both}
.plusOn .btn{margin-top:4px}

/* start here */
.startH{padding:6px 0 4px}
.shH{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 8px}
.shH b{display:block;font:800 18px/1.2 var(--disp);letter-spacing:-.015em;margin-top:2px}
.ringS{width:40px;height:40px}
.shI{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 14px;border:0;background:none;text-align:left;border-top:1px solid var(--line)}
.shI i{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-style:normal}
.shI.ok i{background:var(--ink);color:var(--bg)}
.shI .tt{flex:1;min-width:0}
.shI b{display:block;font:600 15px/1.25 var(--body)}
.shI.ok b{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--mute)}
.shI .tt span{display:block;font-size:12.5px;color:var(--mute)}

/* waiting hero */
.duoF{display:flex;align-items:stretch;gap:8px;margin:12px 0 4px}
.duoF .fr{flex:1;display:flex;flex-direction:column;gap:6px}
.duoF .ph{aspect-ratio:4/4.4;border-radius:12px;overflow:hidden;background:var(--paper);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center}
.duoF .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.duoF .ph svg{width:80%;height:80%}
.duoF .slot .ph{border:2px dashed var(--mute);background:var(--sunk);animation:pulseB 1.8s ease-in-out infinite}
.duoF .q{font:800 48px var(--disp);color:var(--mute)}
.duoF .fcap{display:flex;justify-content:space-between;align-items:center;gap:4px}
.duoF .fcap b{font:700 14px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.okT{display:inline-flex;align-items:center;gap:3px;font:600 12px var(--body);color:var(--ok);white-space:nowrap}
.wt{font:600 12px var(--body);color:var(--mute);white-space:nowrap}
.duoF .vs{align-self:center;color:var(--mute);margin-top:-22px}
.ltl{display:grid;grid-template-columns:repeat(4,1fr);margin:10px 0 12px;position:relative}
.ltl::before{content:"";position:absolute;left:12%;right:12%;top:6px;height:2px;background:var(--line)}
.ltl div{display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;text-align:center}
.ltl i{width:14px;height:14px;border-radius:50%;background:var(--card);border:2px solid var(--line)}
.ltl .on i{background:var(--ink);border-color:var(--ink)}
.ltl .now i{border-color:var(--ink);animation:breathe 1.4s ease-in-out infinite;box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 12%,transparent)}
.ltl b{font:600 11.5px var(--body)}
.ltl span{font:500 10.5px var(--mono);color:var(--mute)}
.hero .row2{margin-top:8px}

/* today extras */
.vibe{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;margin:-4px -18px 0;padding:0 18px}
.vibe::-webkit-scrollbar{display:none}
.vibe .mk{flex:0 0 auto;margin-right:2px}
.vibe button{flex:0 0 auto;min-height:36px;padding:0 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font:600 13px var(--body)!important;white-space:nowrap}
.vibe button.on{background:var(--ink);color:var(--bg)!important;border-color:var(--ink)}
.distC{display:flex;align-items:center;gap:14px;padding:14px;text-align:left;width:100%}
.distC .dl{flex:1;min-width:0}
.distC .dl b{display:block;font:800 26px/1.05 var(--disp);letter-spacing:-.02em;margin:3px 0}
.distC .dl > span:last-child{font-size:12.5px;color:var(--mute)}
.distC .dr{width:110px;display:flex;flex-direction:column;gap:5px;align-items:flex-end;font:500 11px var(--mono);color:var(--mute)}
.distC .prog{width:100%}
.knowC{display:flex;align-items:center;gap:12px;padding:14px;width:100%;text-align:left}
.knowC > div:first-child{flex:1;min-width:0}
.knowC b{display:block;font:800 18px/1.15 var(--disp);margin-top:3px}
.kb2{width:120px;display:flex;flex-direction:column;gap:6px}
.kb2 > div{display:flex;flex-direction:column;gap:2px;font:600 11px var(--body);color:var(--mute)}
.bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;animation:growX 1s var(--easeS) both;transform-origin:left}
@keyframes growX{from{transform:scaleX(0)}}

/* coach marks */
.coach{position:absolute;inset:0;z-index:70;animation:fade .25s both}
.coach .spot{position:absolute;border-radius:20px;box-shadow:0 0 0 9999px rgba(20,19,18,.66);transition:all .35s var(--easeS);pointer-events:none}
.coach .bub{position:absolute;left:18px;right:18px;background:var(--card);color:var(--ink);border-radius:18px;padding:14px 16px;box-shadow:0 14px 40px rgba(0,0,0,.3);animation:rise .3s .1s var(--easeS) both}
.coach .bub b{display:block;font:800 19px/1.15 var(--disp);margin:4px 0}
.coach .bub p{margin:0;font-size:14.5px;line-height:1.4;color:var(--mute)}
.coach .cb{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.coach .cb button{border:0;background:none;min-height:44px;font:600 14px var(--body);color:var(--mute);padding:0 4px}
.coach .cb .cn{background:var(--ink);color:var(--bg);border-radius:12px;padding:0 18px}

/* place intro */
.pi{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px}
.pi .n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font:700 14px var(--body);flex:0 0 auto}
.pi b{display:block;font:800 16px/1.2 var(--disp)}
.pi > div > span{display:block;font-size:13px;line-height:1.38;color:var(--mute);margin-top:3px}
.piI{display:flex;gap:6px;margin-top:8px}
.piI i{width:32px;height:32px;border-radius:10px;background:var(--sunk);display:flex;align-items:center;justify-content:center}
.piM{display:flex;gap:10px;align-items:center;margin-top:8px;background:var(--sunk);border-radius:12px;padding:6px 8px}
.piM .th{width:44px;height:38px;flex:0 0 auto}.piM .th svg{width:100%;height:100%}
.piM b{font:700 13px var(--body)}.piM small{display:block;font-size:11.5px;color:var(--mute)}

/* reaction */
.reactT{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--card);border-radius:16px;padding:10px 12px}
.reactT.on{border-color:var(--ink)}
.reactT .ico{width:40px;height:40px;border-radius:12px;background:var(--sunk);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.reactT.on .ico{background:#E8452C;color:#fff}
.reactT .tt{flex:1;min-width:0}.reactT b{display:block;font:700 15px var(--body)}.reactT .tt span{display:block;font-size:12.5px;color:var(--mute);line-height:1.3}
.reactT .swc{pointer-events:none;flex:0 0 auto}
.pip{position:absolute;right:16px;top:58px;width:92px;display:grid;grid-template-columns:1fr 1fr;gap:2px;border-radius:12px;overflow:hidden;border:2px solid var(--ink);background:var(--ink);z-index:6;animation:pop .35s var(--spring) both}
.pf{aspect-ratio:3/4;background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.pf img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}.pf svg{width:90%}
.pip .rec{position:absolute;left:5px;top:5px;display:flex;align-items:center;gap:3px;font:600 9px var(--mono);color:#fff;background:rgba(0,0,0,.45);padding:2px 5px;border-radius:5px;animation:recOff 0s 3s forwards}
.pip .rec i{width:6px;height:6px;border-radius:50%;background:#E8452C;animation:blink 1s infinite}
.pip .sv{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:3px;font:600 10px var(--body);background:var(--ok);color:#fff;padding:3px 0;opacity:0;animation:svOn .3s 3s forwards}
@keyframes recOff{to{opacity:0}}
@keyframes svOn{to{opacity:1}}
.rclip{position:absolute;inset:0;background:#141312;color:#F2ECE2;display:flex;flex-direction:column}
.ib.dk{background:rgba(242,236,226,.08);border-color:rgba(242,236,226,.2);color:#F2ECE2}
.btn.ghost.dk{border-color:#F2ECE2;color:#F2ECE2!important}
.rc916{align-self:center;width:228px;aspect-ratio:9/16;background:#F2ECE2;color:#141312;border-radius:16px;overflow:hidden;position:relative;display:flex;flex-direction:column;padding:12px;gap:8px;margin-top:4px;animation:pop .45s var(--spring) both}
.rcTop{display:flex;justify-content:space-between;align-items:center}
.logoS{display:flex;align-items:center;gap:4px;font:800 14px var(--disp);letter-spacing:-.03em}
.rc916 .mk{font-size:8.5px;color:#6A635A}
.rcQ{font:800 17px/1.05 var(--disp);letter-spacing:-.02em}
.rcF{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:4px;position:relative;border-radius:10px;overflow:hidden}
.rf{position:relative;background:#FFFDF9;display:flex;align-items:center;justify-content:center}
.rf img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}.rf svg{width:85%}
.rf span{position:absolute;left:6px;bottom:5px;font:700 10px var(--body);background:#141312;color:#F2ECE2;padding:1px 6px;border-radius:5px}
.rcStamp{position:absolute;left:50%;top:50%;border:3px solid #E8452C;color:#E8452C;background:rgba(242,236,226,.9);font:800 20px var(--disp);padding:2px 10px;border-radius:8px;transform:translate(-50%,-50%) rotate(-9deg);animation:stamp .5s 1.3s var(--spring) both}
.rcCap{font:700 17px var(--hand);color:#B8321C;text-align:center}
.rcBar{height:3px;background:#E2D8C8;border-radius:3px;overflow:hidden}.rcBar i{display:block;height:100%;background:#141312;animation:fillw 6s linear both;transform-origin:left}
.rcLink{font:600 9px var(--body);color:#6A635A;text-align:center}
.rcB{padding:14px 20px 26px;display:flex;flex-direction:column;gap:10px;margin-top:auto}

/* know */
.kRow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.kr{display:flex;flex-direction:column;align-items:center;position:relative;text-align:center}
.kr svg{width:120px;height:120px}
.kc{position:absolute;top:36px;left:0;right:0;display:flex;align-items:baseline;justify-content:center}
.kc b{font:800 38px/1 var(--disp);letter-spacing:-.03em;font-variant-numeric:tabular-nums}.kc span{font:700 16px var(--disp)}
.kn{font:700 16px var(--body);margin-top:4px}
.kr > span:last-child{font-size:12.5px;color:var(--mute)}
.gDots{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;margin:6px 0}
.gDots i{aspect-ratio:1;border-radius:50%;border:1.5px solid var(--me);animation:pop .3s var(--spring) both}
.gDots i.y{background:var(--me)}

/* recap story */
.recap{position:absolute;inset:0;background:#141312;color:#F2ECE2;overflow:hidden}
.recap .slab{position:absolute;left:-120px;bottom:-80px;width:420px;height:260px;background:#E8452C;transform:rotate(-24deg);opacity:.95}
.rBars{position:absolute;left:14px;right:14px;top:58px;display:flex;gap:4px;z-index:3}
.rBars i{flex:1;height:3px;border-radius:3px;background:rgba(242,236,226,.25);overflow:hidden}
.rBars i b{display:block;height:100%;background:#F2ECE2;width:0}
.rBars i.done b{width:100%}
.rBars i.cur b{animation:barF 3.6s linear forwards}
@keyframes barF{to{width:100%}}
.rTop{position:absolute;left:14px;right:14px;top:70px;display:flex;justify-content:space-between;align-items:center;z-index:3}
.rSl{position:absolute;inset:130px 22px 40px;display:flex;flex-direction:column;justify-content:center;gap:14px;z-index:2;animation:rise .5s var(--easeS) both}
.rSl .mk{color:#A39A8E}
.rh{font:800 54px/.95 var(--disp);letter-spacing:-.04em;margin:0}
.rStrip{display:flex;gap:6px;margin-top:10px}
.rStrip img,.rStrip .tc{flex:1;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1);border:3px solid #F2ECE2;transform:rotate(-2deg)}
.rStrip > *:nth-child(even){transform:rotate(3deg) translateY(10px)}
.rBig b{font:800 140px/0.9 var(--disp);letter-spacing:-.05em}
.rTwo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rTwo div{background:rgba(242,236,226,.08);border-radius:14px;padding:12px}
.rTwo b{display:block;font:800 34px/1 var(--disp)}.rTwo span{font-size:13px;color:#A39A8E}
.rCard{background:#F2ECE2;color:#141312;border-radius:16px;padding:18px;transform:rotate(-2deg)}
.rCard b{display:block;font:800 26px/1.05 var(--disp)}.rCard > span{display:block;font-size:14px;color:#6A635A;margin-top:6px}
.rHouse{background:#F2ECE2;border-radius:16px;padding:6px}.rHouse svg{width:100%;display:block}
.rHouse .hs-wall{fill:#FFFDF9}.rHouse .hs-line{stroke:#141312}
.rLock{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;background:rgba(242,236,226,.08);border-radius:18px;padding:22px}
.rLock b{font:800 22px var(--disp)}.rLock span{font-size:14px;color:#A39A8E}
.rNav{position:absolute;top:120px;bottom:120px;width:32%;border:0;background:none;z-index:1}
.rNav.l{left:0}.rNav.r{right:0}
.recap .btn{position:relative;z-index:4}
.rSl{pointer-events:none}.rSl button{pointer-events:auto}
.rcBar i{width:100%}

.shb > *{flex-shrink:0}
.kmB{left:14px;right:auto;top:12px;text-align:left}
.coach .spot{outline:2px solid #F2ECE2;outline-offset:0}
.tk[data-mode="eve"] .coach .spot{box-shadow:0 0 0 9999px rgba(0,0,0,.8)}
.tk[data-mode="eve"] .coach .bub{background:#F2ECE2;color:#141312}.tk[data-mode="eve"] .coach .bub p{color:#6A635A}.tk[data-mode="eve"] .coach .cb .cn{background:#141312;color:#F2ECE2}

/* ================= v3 ================= */
.av.xs{width:30px;height:30px;font-size:12px;border-width:2px}
/* photo step grid */
.phWhere3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:start}
.pw3{display:grid;grid-template-rows:84px auto;justify-items:center;gap:6px;text-align:center}
.pw3 .v{height:84px;display:flex;align-items:center;justify-content:center}
.pw3 small{font-size:11.5px;line-height:1.25;color:var(--mute);max-width:13ch}
.pw3 .miniW{width:72px;height:72px}
.pw3 .miniS{width:40px}
.pw3 .miniA{margin:0}
.ldg{display:grid;grid-template-columns:1fr 18px 1fr 18px 1fr;align-items:start;margin-top:10px}
.ld3{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ld3 .c > span{width:52px;height:52px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ld3 .l1{background:var(--sunk)}.ld3 .l1 img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.ld3 .l2{background:var(--paper);color:var(--me);border:1px solid var(--line)}.ld3 .l2 svg{width:100%;height:100%}
.ld3 .l3{background:var(--me);color:#fff;font:800 22px var(--disp)}
.ld3 small{font-size:11.5px;line-height:1.25;color:var(--mute)}
.ldg .ar{font-style:normal;color:var(--mute);text-align:center;line-height:52px}
/* widgets */
.wg.s.ph img{position:absolute;inset:0;width:100%;height:100%}
.wg.s.ph .lab{z-index:1}
.wg.m.dm3{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:14px;align-items:center}
.wg.m.dm3 .l{min-width:0}
.wg.m.dm3 .l b{font-size:26px}
.wg.m.dm3 .r{display:grid;gap:6px}
.wg.m.dm3 .r div{display:flex;justify-content:space-between;gap:12px;font:500 11px var(--mono);color:#6A635A;background:#E9E1D3;border-radius:8px;padding:5px 8px;min-width:104px}
.wg.m.dm3 .r b{font:500 11px var(--mono);margin:0;color:#141312}
.wg.m.dm3 .prog{grid-column:1/-1;height:5px;border-radius:5px;background:#E2D8C8;overflow:hidden}
.wg.m.dm3 .prog i{display:block;height:100%;background:#141312;border-radius:5px}
/* earn fx */
.earnFx{position:absolute;left:50%;top:46%;z-index:60;display:flex;align-items:center;gap:6px;padding:8px 14px 8px 10px;border-radius:999px;background:var(--ink);color:var(--bg);font:800 17px var(--disp);box-shadow:0 10px 26px rgba(0,0,0,.28);pointer-events:none;animation:earnFly 1.6s var(--easeS) forwards;white-space:nowrap}
.earnFx span{font:600 12.5px var(--body);opacity:.75}
@keyframes earnFly{0%{transform:translate(-50%,20px) scale(.6);opacity:0}16%{transform:translate(-50%,0) scale(1.08);opacity:1}30%{transform:translate(-50%,0) scale(1)}62%{transform:translate(-50%,0) scale(1);opacity:1}100%{transform:translate(42px,330px) scale(.3);opacity:0}}
.tabs button.gotB > svg{animation:gotB .6s var(--spring)}
@keyframes gotB{40%{transform:translateY(-6px) scale(1.25)}}
/* game scene */
.scene3{position:relative;overflow:hidden;background:linear-gradient(#CFE3F2,#EEF4F5 70%)}
.scene3.eve{background:linear-gradient(#141A2B,#283048 75%)}
.scene3 .sky{position:absolute;inset:0;pointer-events:none}
.scene3 .sun{position:absolute;right:30px;top:18px;width:34px;height:34px;border-radius:50%;background:#F4C95D;box-shadow:0 0 0 8px rgba(244,201,93,.25)}
.scene3.eve .sun{background:#F2ECE2;box-shadow:0 0 0 8px rgba(242,236,226,.12);width:26px;height:26px}
.scene3 .cl{position:absolute;height:14px;border-radius:14px;background:#fff;opacity:.9;animation:cloud 26s linear infinite}
.scene3 .cl::before{content:"";position:absolute;left:10px;top:-8px;width:22px;height:18px;border-radius:50%;background:inherit}
.scene3 .c1{width:58px;top:30px;left:-60px}.scene3 .c2{width:42px;top:60px;left:-60px;animation-delay:-13s;animation-duration:34s}
.scene3.eve .cl{opacity:.12}
@keyframes cloud{to{transform:translateX(460px)}}
.scene3 .ground{position:absolute;left:0;right:0;bottom:0;height:16%;background:#2F5E45}
.scene3.eve .ground{background:#1E3A2C}
.scene3 .houseW{position:relative;z-index:1}
.scene3 .houseW svg{filter:drop-shadow(0 3px 0 rgba(0,0,0,.08))}
.scaf{position:absolute;width:15%;aspect-ratio:1;transform:translate(-50%,-78%);z-index:2}
.scaf svg{width:100%;height:100%;stroke:#C77D1E;stroke-width:3.4;fill:none;stroke-linecap:round}
.scaf .hook{position:absolute;left:50%;top:-34%;width:2px;height:34%;background:#C77D1E;transform-origin:top;animation:hook 1.6s ease-in-out infinite alternate}
@keyframes hook{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.scaf .pct{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);font:600 10px var(--mono);background:#C77D1E;color:#fff;border-radius:6px;padding:1px 5px}
.turnB{position:absolute;z-index:3;transform:translate(-50%,-190%);display:flex;align-items:center;gap:6px;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:3px 10px 3px 3px;font:700 12px var(--body);white-space:nowrap;animation:bob 1.8s ease-in-out infinite}
.turnB .av{width:24px;height:24px;border-width:1.5px}
@keyframes bob{50%{transform:translate(-50%,-205%)}}
.lvChip{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--bg);border-radius:999px;padding:6px 10px}
.frame.g3 .wal{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 16px 6px;border-top:2px solid var(--ink)}
.frame.g3 .bk{display:flex;align-items:center;gap:8px}
.frame.g3 .bk b{display:block;font:800 30px/1 var(--disp);letter-spacing:-.03em}
.frame.g3 .bk span:not(.bi){display:block;font-size:11.5px;color:var(--mute);max-width:12ch;line-height:1.2}
.frame.g3 .lvB small,.frame.g3 .cont small{font-size:11.5px;color:var(--mute)}
.frame.g3 .lvB .gbar{margin-top:6px;height:8px}
.frame.g3 .lvB .gbar i{background:#E9B949}
.frame.g3 .cont{padding:6px 16px 0}
.cbar{display:flex;height:8px;border-radius:8px;overflow:hidden;gap:2px;margin-bottom:4px}
.cbar i{display:block;height:100%;animation:growX 1s var(--easeS) both;transform-origin:left}
.cbar .me{background:var(--me)}.cbar .pa{background:var(--pa)}
.frame.g3 .gbtn{padding:12px 16px 16px}
.how3{display:grid;grid-template-columns:1fr 14px 1fr 14px 1fr;align-items:start;gap:2px;text-align:center}
.how3 div{display:flex;flex-direction:column;align-items:center;gap:6px;font:600 12px/1.25 var(--body)}
.how3 div > svg:first-child{width:22px;height:22px}
.how3 > i{font-style:normal;color:var(--mute);padding-top:2px}
.bnow{display:flex;gap:12px;align-items:center;padding:12px 14px}
.bnow .th{width:56px;height:56px;border-radius:14px;background:var(--sunk);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.bnow .th svg{width:44px;height:38px}
.bnow .tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.bnow .tt b{font:700 15px var(--body)}
.bnow .tt span{font-size:12.5px;color:var(--mute);line-height:1.3}
.bnow .gbar i{background:#C77D1E}
.qst{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;text-align:left;padding:10px 4px;border-bottom:1px solid var(--line);color:var(--ink)}
.qst .ico{width:38px;height:38px;border-radius:12px;background:var(--sunk);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.qst .tt{flex:1;min-width:0}
.qst .tt b{display:block;font:600 14.5px/1.25 var(--body)}
.qst .who{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--mute);margin-top:3px}
.qst .who i{font-style:normal;width:18px;height:18px;border-radius:50%;border:1.5px dashed var(--mute);font:700 9.5px/15px var(--body);text-align:center;color:var(--mute)}
.qst .who i.on{border-style:solid;color:#fff}.qst .who i.on.me{background:var(--me);border-color:var(--me)}.qst .who i.on.pa{background:var(--pa);border-color:var(--pa)}
.tk[data-mode="eve"] .qst .who i.on{color:#141312}
.qst .rw{display:flex;align-items:center;gap:3px;font:700 13px var(--body);white-space:nowrap}
.qst.done .tt b{color:var(--mute);text-decoration:line-through;text-decoration-thickness:1.5px}
.chestR{display:flex;align-items:center;gap:12px;padding:12px 4px 4px}
.chestR .ci{width:38px;height:38px;border-radius:12px;background:#E9B949;color:#5B3A08;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.chestR b{display:block;font:700 14px var(--body)}.chestR span:not(.ci){font-size:12px;color:var(--mute)}
.chestR.open .ci{animation:gotB .6s var(--spring) 2}
.lvRoad{display:flex;align-items:flex-start;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;gap:0}
.lvRoad::-webkit-scrollbar{display:none}
.lvS{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 64px;text-align:center}
.lvS i{font-style:normal;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;font:700 12px var(--body);color:var(--mute)}
.lvS.on i{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.lvS.cur i{box-shadow:0 0 0 4px color-mix(in srgb,#E9B949 55%,transparent)}
.lvS span{font-size:11px;line-height:1.2;color:var(--mute)}
.lvS.on span{color:var(--ink);font-weight:600}
.lvL{flex:0 0 14px;height:2px;background:var(--line);margin-top:15px}
/* shop */
.segT{display:flex;background:var(--sunk);border-radius:12px;padding:3px;gap:2px;overflow-x:auto;scrollbar-width:none}
.segT::-webkit-scrollbar{display:none}
.segT button{flex:1 0 auto;border:0;background:none;min-height:40px;border-radius:9px;font:600 13.5px var(--body);color:var(--mute);padding:0 10px;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.segT button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.shG{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.shopI{border:1.5px solid var(--line);background:var(--card);border-radius:16px;padding:8px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink);text-align:center;min-width:0}
.shopI .pic{position:relative;width:100%;height:64px;border-radius:12px;background:var(--sunk);display:flex;align-items:center;justify-content:center}
.shopI .pic svg{width:52px;height:44px}
.shopI .both{position:absolute;left:4px;top:4px;display:flex;align-items:center;gap:2px;font:600 9.5px var(--body);background:var(--card);border-radius:999px;padding:2px 6px 2px 4px}
.shopI b{font:600 12.5px/1.2 var(--body);min-height:30px;display:flex;align-items:center}
.shopI .cost{display:flex;align-items:center;gap:3px;font:700 13px var(--body)}
.shopI .cost.poor{color:var(--mute)}
.shopI.lock .pic{opacity:.55}
/* built */
.celebrate.b3 .bigIt{width:150px;height:130px;border-radius:28px;background:var(--card);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--shadow);display:flex;align-items:center;justify-content:center;animation:pop .6s var(--spring) both}
.celebrate.b3 .bigIt svg{width:110px;height:92px}
.plusS{font:800 20px var(--disp)}
@keyframes pop{from{transform:scale(.4) rotate(-8deg);opacity:0}}
/* rules sheet */
.rule3{display:flex;gap:12px;align-items:flex-start}
.rule3 > i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font:700 13px var(--body);flex:0 0 auto}
.rule3 > div{flex:1;min-width:0}
.rule3 b{display:block;font:700 15.5px/1.25 var(--body)}
.rule3 > div > span{display:block;font-size:13px;color:var(--mute);margin-top:3px;line-height:1.35}
.eT{margin-top:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px 10px}
.eT div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.eT div:last-child{border-bottom:0}
.eT div b{display:flex;align-items:center;gap:3px;font:700 13px var(--body);white-space:nowrap}
/* map */
.mapW{position:relative;border-radius:18px;overflow:hidden;border:1.5px solid var(--line);background:var(--sunk)}
.mapW.blur .map3{filter:blur(3px);opacity:.7}
.map3{display:block;width:100%;height:auto}
.map3 .mb{fill:var(--sunk)}
.map3 .mp{fill:color-mix(in srgb,var(--pa) 22%,var(--sunk))}
.map3 .mr{fill:none;stroke:color-mix(in srgb,var(--me) 28%,var(--sunk));stroke-width:16;stroke-linecap:round}
.map3 .ms{fill:none;stroke:var(--card);stroke-width:7}
.map3 .ms2{fill:none;stroke:var(--card);stroke-width:4}
.map3 .rt{fill:none;stroke:var(--ink);stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-18}}
.pin3{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;z-index:2}
.pin3 .av{width:40px;height:40px;border:3px solid var(--card);box-shadow:0 4px 10px rgba(0,0,0,.25)}
.pin3.me .av{outline:2px solid var(--me)}.pin3.pa .av{outline:2px solid var(--pa)}
.pin3 small{font:600 10.5px var(--mono);background:var(--card);border-radius:6px;padding:1px 5px;color:var(--ink)}
.pin3 .pls3{position:absolute;top:20px;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--pa);opacity:.35;animation:pulse3 1.8s ease-out infinite}
@keyframes pulse3{to{transform:scale(2.6);opacity:0}}
.mapW .eta{position:absolute;right:10px;top:10px;display:flex;align-items:center;gap:4px;background:var(--ink);color:var(--bg);border-radius:999px;padding:5px 10px;font:700 12.5px var(--body)}
.mapW .area{position:absolute;left:10px;bottom:10px;font:600 11px var(--body);background:var(--card);border-radius:8px;padding:3px 8px}
.locC{display:flex;align-items:center;gap:12px;padding:12px 14px}
.locC .tx{flex:1;min-width:0}.locC .tx b{display:block;font:700 15.5px var(--body)}.locC .tx span{font-size:12.5px;color:var(--mute)}
.locC .bat{display:flex;align-items:center;gap:4px;font:600 12.5px var(--body);color:var(--mute)}
.plRow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pl{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 4px}
.pl .pi{width:34px;height:34px;border-radius:50%;background:var(--sunk);display:flex;align-items:center;justify-content:center}
.pl .pi.pa{background:var(--pa);color:#fff}
.tk[data-mode="eve"] .pl .pi.pa{color:#141312}
.pl b{font:600 12.5px var(--body)}.pl small{font-size:11px;color:var(--mute)}
.setL{padding:4px 14px}
.setL .r{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid var(--line);font-size:14.5px}
.setL .r:last-child{border-bottom:0}
.locAsk{display:flex;flex-direction:column;gap:14px}
.locAsk .h1s{margin:4px 0 0}
/* send hub */
.sendG{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sT{border:1.5px solid var(--line);background:var(--card);border-radius:18px;padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;color:var(--ink);position:relative;overflow:hidden;min-height:116px}
.sT .ico{width:40px;height:40px;border-radius:12px;background:var(--sunk);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.sT b{font:700 14px/1.2 var(--body)}
.sT:not(.hero){padding:10px;min-height:0}
.sT:not(.hero) .ico{width:36px;height:36px}
.sT span:not(.ico):not(.doodA){font-size:12px;color:var(--mute);line-height:1.3}
.sT.hero{grid-column:1/-1;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--shadow);min-height:0;padding-right:130px}
.sT.hero .ico{background:var(--ink);color:var(--bg)}
.sT .doodA{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:110px;height:64px;background:#FFFDF9;border-radius:12px;border:1px solid var(--line)}
.sT .doodA svg{width:100%;height:100%}
.dw{stroke-dasharray:200;stroke-dashoffset:200;animation:draw3 1.6s .3s var(--ease) forwards}
.dw.d2{animation-delay:1.4s;stroke-dasharray:60;stroke-dashoffset:60}
@keyframes draw3{to{stroke-dashoffset:0}}
.lastD{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.ldI{width:52px;height:52px;border-radius:12px;overflow:hidden;background:#FFFDF9;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ldI img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.ldI svg{width:80%;height:80%}
.ldI.note{width:auto;flex:1;padding:6px 10px;font:700 17px/1.05 var(--hand);color:#B8321C;justify-content:flex-start;background:#FFF6D8}
.ldI.hrt{color:#E8452C;flex-direction:column;gap:0}.ldI.hrt small{font:600 10px var(--mono);color:var(--mute)}
/* drop landed */
.drop3{display:flex;flex-direction:column}
.drop3 .dTop{position:relative;z-index:1;padding:74px 24px 0;text-align:center}
.drop3 .dW{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:0 28px}
.drop3 .wsm.land{width:190px;height:190px;border-radius:40px;background:#FFFDF9;position:relative;box-shadow:0 18px 40px rgba(0,0,0,.4);animation:land .8s var(--spring) both;display:block}
.drop3 .wsm.land svg{width:100%;height:100%}
.drop3 .wsm.land .from{position:absolute;left:16px;bottom:12px;font:700 20px var(--hand);color:#141312}
@keyframes land{from{transform:translateY(-260px) scale(.6) rotate(-12deg);opacity:0}}
.drop3 .dTx{text-align:center;color:#F2ECE2}
.drop3 .dTx b{display:block;font:800 24px/1.1 var(--disp)}
.drop3 .dTx span{font-size:14px;opacity:.75}
.drop3 .dBtm{position:relative;z-index:1;padding:0 20px 40px}
/* today */
.pres{flex-wrap:wrap}
.locRow{flex:1 0 100%;display:flex;align-items:center;gap:10px;border:0;border-top:1px solid var(--line);background:none;padding:10px 0 0;margin-top:2px;text-align:left;color:var(--ink)}
.locRow .mapT{width:54px;height:38px;border-radius:9px;overflow:hidden;position:relative;flex:0 0 auto;border:1px solid var(--line)}
.locRow .mapT svg{width:100%;height:100%;display:block}
.locRow .mapT .d{position:absolute;left:62%;top:30%;width:10px;height:10px;border-radius:50%;background:var(--pa);border:2px solid var(--card);box-shadow:0 0 0 4px color-mix(in srgb,var(--pa) 30%,transparent)}
.locRow .tx{flex:1;min-width:0}
.locRow .tx b{display:block;font:600 14px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.locRow .tx span{display:flex;flex-direction:row;align-items:center;gap:3px;font-size:12px;color:var(--mute)}
.locRow.off .mapT svg{filter:blur(1.5px);opacity:.7}
.qStrip{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px solid var(--ink);background:var(--card);border-radius:16px;padding:10px 12px;color:var(--ink);box-shadow:3px 3px 0 var(--shadow)}
.qStrip .bi{width:40px;height:40px;border-radius:12px;background:#FFF1C9;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tk[data-mode="eve"] .qStrip .bi{background:#3A3020}
.qStrip .tx{flex:1;min-width:0}
.qStrip .tx b{display:block;font:700 14.5px var(--body)}
.qStrip .tx span{font-size:12.5px;color:var(--mute)}
.qStrip .qd{display:flex;gap:4px}
.qStrip .qd i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink)}
.qStrip .qd i.on{background:var(--ink)}
.qStrip .qd i.half{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}

.earnFx.low{top:70%}
.pl .pi svg{width:18px;height:18px}
.frame.g3 .lvB small b{color:var(--ink);font-weight:700}
.frame.g3 .lvB{min-width:0}
.pl .pi{padding:0;border:0;gap:0}

.gbar{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.gbar i{display:block;height:100%;border-radius:6px;animation:growX 1s var(--easeS) both;transform-origin:left}
.pw3 .miniW span{font-size:11.5px;left:5px;bottom:3px}
.shopI .both{left:auto;right:4px;top:4px;padding:2px 5px}
.shopI .both svg{width:11px;height:11px}
.celebrate.b3 > :not(.conf){position:relative;z-index:1}
.celebrate.b3 .conf{z-index:0}

/* ================= v4 ================= */
.gHint{display:block;text-align:center;font-size:12.5px;color:var(--mute);margin-top:8px}
.scene3 .smoke{position:absolute;left:66.5%;top:15%;width:20px;height:40px;z-index:2;pointer-events:none}
.scene3 .smoke i{position:absolute;left:0;bottom:0;width:12px;height:12px;border-radius:50%;background:#fff;opacity:0;animation:smoke 3.6s ease-out infinite}
.scene3 .smoke i:nth-child(2){animation-delay:1.2s}.scene3 .smoke i:nth-child(3){animation-delay:2.4s}
.scene3.eve .smoke i{background:#8E95A8}
@keyframes smoke{0%{transform:translate(0,0) scale(.5);opacity:0}20%{opacity:.85}100%{transform:translate(14px,-46px) scale(1.7);opacity:0}}
.scene3.eve .houseW svg .hs-wall{fill:#F2E3B8}
/* paywall personal block */
.pwFor{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px;margin-bottom:12px}
.pwFor .pfR{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pwFor .pfR span{display:inline-flex;align-items:center;gap:5px;background:var(--sunk);border-radius:999px;padding:5px 10px;font:600 12.5px/1.2 var(--body)}
.pwFor .pfR span svg{color:var(--redInk);flex:0 0 auto}
.pw .ft .btn[data-act="buy"]:not([disabled]){position:relative;overflow:hidden}
.pw .ft .btn[data-act="buy"]:not([disabled])::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);animation:shine 3.2s 1s ease-in-out infinite}
@keyframes shine{0%,55%{left:-40%}85%,100%{left:120%}}
.pw .plan{transition:transform .25s var(--spring),border-color .2s}
.pw .plan.on{transform:scale(1.015)}
/* exit sheet */
.exitS{position:absolute;left:0;right:0;bottom:0;z-index:60;background:var(--bg);border-radius:26px 26px 0 0;padding:20px 20px 30px;display:flex;flex-direction:column;gap:12px;animation:exitUp .33s var(--easeS) both;box-shadow:0 -10px 30px rgba(0,0,0,.2)}
.exitS .h1s{margin:0}
.exitS .fine{font-size:12px;color:var(--mute);text-align:center}
.exitS .link{align-self:center}
@keyframes exitUp{from{transform:translateY(100%)}}
/* quest done pop, long names */
.qst.done .ico{background:var(--ink);color:var(--bg);animation:pop .5s var(--spring) both}
.eyebrow{gap:10px}
.eyebrow .mk:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eyebrow .mk:last-child{flex:0 0 auto}

/* ================= VIBLY WEB ================= */
/* ---- viewer shell ---- */
.wsh{max-width:1640px;margin:0 auto;display:grid;grid-template-columns:220px minmax(0,1fr) 300px;gap:24px;padding:20px max(16px,env(safe-area-inset-right,0px)) 56px max(16px,env(safe-area-inset-left,0px));align-items:start}
body.full .wsh{grid-template-columns:minmax(0,1fr)}
body.full .wlist,body.full .note{display:none}
.wlist{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:thin}
.wlist .fh{font:500 11px var(--fM);letter-spacing:.12em;text-transform:uppercase;color:var(--pgMute);margin:0 0 8px 10px}
.wlist button{border:0;background:none;text-align:left;min-height:40px;padding:8px 12px;border-radius:12px;font:600 14px var(--fB);color:var(--pgMute);cursor:pointer}
.wlist button:hover{background:var(--pgSoft);color:var(--pgInk)}
.wlist button.on{background:var(--pgInk);color:var(--pg)}
.wchips{display:none;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0 2px;max-width:1640px;margin:0 auto}
.wchips::-webkit-scrollbar{display:none}
.wchips button{flex:0 0 auto;border:1px solid var(--pgLine);background:var(--pg2);border-radius:999px;min-height:38px;padding:0 13px;font:600 13px var(--fB);color:var(--pgMute);cursor:pointer}
.wchips button.on{background:var(--pgInk);color:var(--pg);border-color:var(--pgInk)}
#wst{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
#wfit{position:relative}
.bw{position:absolute;left:0;top:0;transform-origin:top left;border-radius:14px;overflow:hidden;background:#E6DFD3;box-shadow:0 30px 70px rgba(20,19,18,.22),0 0 0 1px rgba(20,19,18,.12);display:flex;flex-direction:column}
.bw .bwBar{height:40px;flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:0 14px;background:#E6DFD3}
.bw .dots{display:flex;gap:7px}.bw .dots i{width:12px;height:12px;border-radius:50%;background:#D9CFC0}.bw .dots i:first-child{background:#E8725C}.bw .dots i:nth-child(2){background:#E9B949}.bw .dots i:nth-child(3){background:#7BBF8E}
.bw .urlP{flex:1;max-width:520px;margin:0 auto;height:26px;border-radius:8px;background:#F6F1E9;display:flex;align-items:center;justify-content:center;gap:6px;font:500 12.5px var(--fB);color:#6A635A}
.bw .urlP svg{width:12px;height:12px}
.bw .sp2{width:54px}
.bw.mob{border-radius:46px;background:#0d0c0b;padding:10px}
.bw.mob .bwBar{background:transparent;height:30px;padding:0 24px;justify-content:center;border-radius:36px 36px 0 0}
.bw.mob .dots,.bw.mob .sp2{display:none}
.bw.mob .urlP{background:#26231F;color:#A39A8E;max-width:none;height:24px}
.bw.mob #site{border-radius:0 0 36px 36px}
#site{flex:1;position:relative;overflow:hidden;background:var(--bg);isolation:isolate}
#fv{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;container-type:inline-size;container-name:site;scrollbar-width:thin}
.wtoast{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:200;background:var(--ink);color:var(--bg);border-radius:14px;padding:12px 18px;font:600 14.5px var(--body);box-shadow:0 10px 30px rgba(0,0,0,.25);animation:rise .3s var(--easeS) both;max-width:calc(100% - 32px);text-align:center}
#fullB{min-height:40px;border-radius:999px;border:1.5px solid var(--pgInk);background:transparent;color:var(--pgInk);font:700 13px var(--fB);padding:0 16px;cursor:pointer}
#fullB.on{background:var(--pgInk);color:var(--pg)}
@media (max-width:1200px){.wsh{grid-template-columns:minmax(0,1fr) 280px}.wlist{display:none}.wchips{display:flex}}
@media (max-width:860px){.wsh{grid-template-columns:minmax(0,1fr)}.note{position:static}}

/* ---- shared ---- */
.site{--fs:1}
.wlogo{display:inline-flex;align-items:center;gap:7px;font:800 26px/1 var(--disp);letter-spacing:-.045em;color:var(--ink)}
.wlogo svg{color:var(--redInk)}
.site .btn.lgb{min-height:60px;font-size:18px!important;padding:0 28px;width:auto;border-radius:16px}
.site .btn[disabled]{opacity:.45;cursor:not-allowed}
.store{white-space:nowrap;display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 16px 0 13px;border-radius:13px;background:var(--ink);color:var(--bg)!important;border:0;cursor:pointer;text-align:left}
.store span{display:flex;flex-direction:column;line-height:1.05}
.store small{font:500 10.5px var(--body);opacity:.8}.store b{font:700 16px var(--body)}
.mk{white-space:normal}
.site .fine{font-size:13px;color:var(--mute);line-height:1.45}
.site .fine.l{display:flex;gap:6px;align-items:flex-start;text-align:left}
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--easeS) var(--d,0ms),transform .6s var(--easeS) var(--d,0ms)}
.rv.in{opacity:1;transform:none}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes wedgeIn{from{transform:translateX(30%) rotate(-18deg);opacity:0}to{transform:rotate(-18deg);opacity:1}}
@keyframes stampL{0%{opacity:0;transform:rotate(-9deg) scale(2.2)}100%{opacity:1;transform:rotate(-9deg) scale(1)}}
@keyframes slideIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes slideBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes grow{from{width:0}}
@keyframes rot{to{transform:rotate(360deg)}}

/* ================= LANDING ================= */
.land{background:var(--bg);color:var(--ink);min-height:100%}
.lin{max-width:1200px;margin:0 auto;padding:0 48px;position:relative}
.lnav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
#fv.scrolled .lnav{border-bottom-color:var(--line)}
.lnav .lin{display:flex;align-items:center;gap:28px;height:72px}
.lgB{border:0;background:none;padding:0;cursor:pointer}
.lnav .lk{display:flex;gap:4px;margin-left:12px}
.lnav .lk button,
.lnav .lk a{border:0;background:none;min-height:40px;padding:0 12px;border-radius:999px;font:600 14.5px var(--body);color:var(--mute);cursor:pointer}
.lnav .lk button:hover,
.lnav .lk a:hover{color:var(--ink);background:var(--sunk)}
.lnav .rt{margin-left:auto;display:flex;align-items:center;gap:10px}
.lsign{border:0;background:none;min-height:44px;padding:0 10px;font:600 15px var(--body);cursor:pointer;color:var(--ink)}
.site .lcta{border:0;min-height:44px;padding:0 18px;border-radius:12px;background:var(--ink);color:var(--bg);font:700 15px var(--body);cursor:pointer}
.lmenu{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);align-items:center;justify-content:center;cursor:pointer}
/* hero */
.lhero{position:relative;overflow:hidden;padding:44px 0 64px}
.wedgeL{position:absolute;right:-180px;top:-120px;width:760px;height:640px;background:var(--red);transform:rotate(-18deg);animation:wedgeIn 1s var(--easeS) both;border-radius:0 0 0 40px}
.tk[data-mode="eve"] .wedgeL{opacity:.92}
.hgrid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px;align-items:center}
.lhero .cp{display:flex;flex-direction:column;gap:22px;position:relative;z-index:2}
.ldisp{font:800 84px/.92 var(--disp);letter-spacing:-.05em;margin:0}
.ldisp span{display:block;animation:rise .55s var(--easeS) both}
.ldisp span:nth-child(2){animation-delay:.18s}.ldisp span:nth-child(3){animation-delay:.36s}
.ldisp .r{color:var(--redBtn)}
.lead{font-size:19px;line-height:1.5;color:var(--mute);margin:0;max-width:52ch}
.ctaR{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.stores{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.webB{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 16px;border-radius:13px;border:1.5px solid var(--ink);background:transparent;font:700 15px var(--body);cursor:pointer}
.vis{position:relative;height:640px;display:flex;justify-content:center;align-items:center}
.lPhone{width:302px;height:640px;border-radius:46px;background:#0d0c0b;padding:9px;box-shadow:0 30px 60px rgba(20,19,18,.3);position:relative;z-index:2;animation:riseBig .8s .2s var(--easeS) both}
.lPhone .app{position:absolute;left:9px;top:9px;width:370px;height:772px;transform:scale(.767);transform-origin:top left;border-radius:48px;overflow:hidden}
.lPhone .app .scroll{overflow:hidden}
.fl{position:absolute;z-index:3;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 30px rgba(20,19,18,.16);display:flex;align-items:center;gap:10px;padding:10px 14px;animation:riseBig .6s var(--easeS) both,bob 5s ease-in-out infinite}
.fl b{font:700 14.5px var(--body);display:block}.fl span{font-size:12.5px;color:var(--mute)}
.fl .ai{width:30px;height:30px;border-radius:8px;background:var(--ink);color:var(--red);display:flex;align-items:center;justify-content:center}
.fl.f1{left:-6px;top:70px;animation-delay:.5s,.5s}
.fl.f2{right:-4px;top:150px;padding:0;border:0;background:none;box-shadow:none;animation-delay:.7s,1.2s}
.fl.f2 .wg{width:132px}
.fl.f3{left:10px;bottom:150px;gap:6px;animation-delay:.9s,2s}
.fl.f3 b{font:800 18px var(--disp)}
.fl.f4{right:-10px;bottom:70px;animation-delay:1.1s,.8s}
.fl.f4 svg{color:var(--pa)}
/* facts */
.lfacts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.fact{display:flex;gap:12px;align-items:flex-start;padding:26px 22px}
.fact+.fact{border-left:1px solid var(--line)}
.fact i{width:40px;height:40px;border-radius:12px;background:var(--sunk);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.fact b{display:block;font:700 15.5px/1.25 var(--body)}.fact span{font-size:13.5px;color:var(--mute)}
/* sections */
.lsec{padding:104px 0}
.lsec.alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shead{max-width:760px;margin-bottom:44px;display:flex;flex-direction:column;gap:12px}
.h2d{font:800 52px/1 var(--disp);letter-spacing:-.04em;margin:0;text-wrap:balance}
.sub2{font-size:18px;line-height:1.5;color:var(--mute);margin:0;max-width:56ch}
/* how */
.hgr{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hw .hwb{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px}
.hw .num{font:500 12px var(--mono);letter-spacing:.12em;color:var(--mute)}
.hw h3{font:800 28px/1.05 var(--disp);letter-spacing:-.03em;margin:0}
.hw p{margin:0;color:var(--mute);line-height:1.5;font-size:15.5px}
.hwv{margin-top:14px;height:210px;border-radius:14px;background:var(--sunk);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:16px}
.hvq{width:100%;background:var(--card);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;border:1px solid var(--line)}
.hvq b{font:800 19px/1.1 var(--disp);letter-spacing:-.02em}
.hvo{display:flex;gap:8px}
.hvo span{flex:1;display:flex;align-items:center;gap:6px;justify-content:center;min-height:46px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);font:700 14px var(--body)}
.hvo span.on{border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.hvl{width:100%;display:flex;flex-direction:column;gap:10px}
.lkC{background:var(--ink);color:var(--bg);border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.lkC b{font:700 15px var(--body)}.lkC span{font-size:12.5px;opacity:.7}
.hvr{width:100%;position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
.hvr .cards{display:flex;gap:10px}
.fcW{width:104px;height:120px;border-radius:14px;background:var(--card);border:2px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.fcW small{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.fcW b{font:800 15px var(--disp)}
.rv.in .fcW{animation:flipIn .7s var(--spring) both}.rv.in .fcW:nth-child(2){animation-delay:.15s}
@keyframes flipIn{from{transform:perspective(500px) rotateY(90deg)}to{transform:none}}
.hvr .stamp{position:absolute;left:50%;top:38%;transform:rotate(-9deg);translate:-50% -50%;border:3px solid var(--red);color:var(--red);font:800 24px/1 var(--disp);padding:6px 12px;border-radius:10px;background:color-mix(in srgb,var(--bg) 82%,transparent);opacity:0}
.rv.in .hvr .stamp{animation:stampL .5s .9s var(--spring) both}
.earnC{display:inline-flex;align-items:center;gap:6px;font:700 13.5px var(--body);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
/* bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bc{background:var(--bg);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.lsec:not(.alt) .bc{background:var(--card)}
.bc.b2{grid-column:span 2}
.bcv{height:230px;position:relative;background:var(--sunk);overflow:hidden;display:flex;align-items:center;justify-content:center}
.bct{padding:20px 22px 22px}
.bct h3{font:800 24px/1.05 var(--disp);letter-spacing:-.025em;margin:0 0 6px}
.bct p{margin:0;color:var(--mute);line-height:1.5;font-size:15px}
.hbPl{width:100%;height:100%;padding:18px;display:grid;grid-template-columns:repeat(3,1fr) 1.2fr;gap:10px;align-items:start}
.hbPl .ev{background:var(--card);border-radius:12px;padding:10px 12px;border-left:4px solid var(--us);display:flex;flex-direction:column;gap:2px;min-width:0}
.hbPl .ev.me{border-left-color:var(--me)}.hbPl .ev.pa{border-left-color:var(--pa)}
.hbPl .ev .tm{font:500 11px var(--mono);color:var(--mute)}.hbPl .ev b{font:700 14px/1.2 var(--body)}.hbPl .ev span:last-child{font-size:12px;color:var(--mute)}
.hbPl .td{background:var(--card);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;grid-row:span 2}
.hbPl .td div{display:flex;align-items:center;gap:8px;font:600 13.5px var(--body)}
.hbPl .td i{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.hbPl .td i.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.hbPl .td em{margin-left:auto;font:700 11px var(--body);font-style:normal;color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.hbPl .td em.me{background:var(--me)}.hbPl .td em.pa{background:var(--pa)}
.tk[data-mode="eve"] .hbPl .td em{color:#141312}
.hbSend .lockS{width:150px;height:200px;border-radius:24px;background:linear-gradient(160deg,#2B2A3A,#141312);color:#F2ECE2;display:flex;flex-direction:column;align-items:center;padding:14px 12px;gap:8px;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.hbSend .tm{font:700 30px/1 var(--disp);letter-spacing:-.03em}
.hbSend .wgx{width:96px;height:96px;border-radius:18px;background:#FFFDF9;position:relative;overflow:hidden}
.hbSend .wgx img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.35}
.hbSend .dd{position:absolute;inset:8px}.hbSend .dd svg{width:100%;height:100%}
.hbSend .capC{font-size:11px;opacity:.75}
.hbMap{width:100%;height:100%;position:relative}
.hbMap .map3{width:100%;height:100%;object-fit:cover}
.hbMap svg.map3{height:100%}
.pin{position:absolute;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:3px}
.pin .av{box-shadow:0 4px 12px rgba(0,0,0,.25)}
.pin.a .av{border-color:var(--me)}.pin.j .av{border-color:var(--pa)}
.pin em{font:700 11px var(--body);font-style:normal;background:var(--card);border-radius:999px;padding:2px 8px;border:1px solid var(--line)}
.hbMap .mtag{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:6px;background:var(--card);border-radius:999px;padding:6px 12px;font:600 12.5px var(--body);border:1px solid var(--line)}
.hbHouse{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(#CFE3F2,#EEF4F5)}
.tk[data-mode="eve"] .hbHouse{background:linear-gradient(#141A2B,#283048)}
.hbHouse svg{height:92%;width:auto}
.hbHouse .wal,.wal{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;gap:5px;background:var(--card);border-radius:999px;padding:5px 11px;font:800 14px var(--disp);border:1px solid var(--line)}
.hbQ{width:100%;padding:18px;display:flex;flex-direction:column;gap:8px}
.hbQ div{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;padding:10px 12px;font:600 14px var(--body)}
.hbQ i{width:30px;height:30px;border-radius:9px;background:var(--sunk);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.hbQ .dn i{background:var(--ink);color:var(--bg)}
.hbQ em{margin-left:auto;font:700 13px var(--body);font-style:normal;display:inline-flex;gap:4px;align-items:center}
/* place band */
.lband{background:#141312;color:#F2ECE2;padding:104px 0}
.tk[data-mode="eve"] .lband{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lband .mk{color:#A39A8E}.lband .sub2{color:#A39A8E}
.pgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.pgrid .cp{display:flex;flex-direction:column;gap:16px}
.earnT{display:flex;flex-direction:column;margin-top:8px;border-top:1px solid #34302B}
.earnT div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #34302B;font-size:15.5px}
.earnT b{display:inline-flex;align-items:center;gap:6px;font:800 18px var(--disp);color:#E9B949}
.pvis{display:flex;flex-direction:column;gap:16px}
.pfr{overflow:hidden}
.lband .frame{border-color:#F2ECE2;box-shadow:6px 6px 0 #E8452C;background:#1E1C1A}
.pfr .scene3{height:420px;display:flex;align-items:flex-end;justify-content:center}
.pfr .scene3 .houseW{width:440px;margin-bottom:10px}
.pfr .scene3 .houseW svg{width:100%;height:auto;display:block}
.turnL{position:absolute;left:14px;right:14px;bottom:14px;z-index:4;display:flex;align-items:center;gap:10px;background:var(--card);color:var(--ink);border-radius:14px;padding:8px 8px 8px 10px;box-shadow:0 8px 20px rgba(0,0,0,.2);font:600 14px var(--body)}
.turnL>span:not(.av){flex:1;min-width:0}
.turnL button{border:0;background:var(--ink);color:var(--bg);min-height:40px;border-radius:10px;padding:0 14px;font:700 13.5px var(--body);cursor:pointer;white-space:nowrap}
.road{display:flex;flex-wrap:wrap;gap:6px}
.road span{display:inline-flex;align-items:center;gap:5px;border:1px solid #34302B;border-radius:999px;padding:6px 11px;font:600 13px var(--body);color:#A39A8E}
.road span.on{background:#F2ECE2;color:#141312;border-color:#F2ECE2}
.road span.nx{border-color:#E9B949;color:#F2ECE2}
.tk[data-mode="eve"] .road span,.tk[data-mode="eve"] .earnT div,.tk[data-mode="eve"] .earnT{border-color:var(--line)}
/* ldr */
.lgrid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.lgrid2 .cp{display:flex;flex-direction:column;gap:16px}
.lvis{display:flex;flex-direction:column;gap:14px}
.lvis .arcM{height:280px;box-shadow:0 10px 30px rgba(20,19,18,.08)}
.ldrRow .wg{box-shadow:0 10px 24px rgba(20,19,18,.12)}
.ticks{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.45}
.ticks i{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px}
.lband .ticks i{background:#F2ECE2;color:#141312}
/* ugc */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:960px}
.vf{margin:0;display:flex;flex-direction:column;gap:12px}
.vf figcaption b{display:block;font:700 16px var(--body)}.vf figcaption span{font-size:14px;color:var(--mute)}
.vc{aspect-ratio:9/16;border-radius:22px;position:relative;overflow:hidden;background:#141312;color:#F2ECE2;display:flex;flex-direction:column;box-shadow:0 18px 40px rgba(20,19,18,.22)}
.vc .wm{position:absolute;left:14px;bottom:14px;font:600 11.5px var(--body);opacity:.8}
.vc .dur{position:absolute;right:12px;top:12px;font:500 11px var(--mono);background:rgba(0,0,0,.45);padding:3px 7px;border-radius:6px}
.vc1 .qq{padding:44px 16px 10px;font:800 19px/1.1 var(--disp);letter-spacing:-.02em}
.vc1 .two{flex:1;display:grid;grid-template-rows:1fr 1fr;gap:3px;padding:0 0 40px}
.vc1 .two img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.vc1 .two .av{width:100%;height:100%;border-radius:0;border:0;font-size:60px}
.vc1 .stamp{position:absolute;left:50%;top:56%;transform:rotate(-9deg);translate:-50% -50%;border:3px solid #FF5A3D;color:#FF5A3D;font:800 26px/1 var(--disp);padding:6px 12px;border-radius:10px;background:rgba(20,19,18,.75)}
.vc2{background:#E8452C;color:#141312;padding:44px 18px 18px;gap:14px}
.vc2 .mk{color:#141312;opacity:.8}
.vc2 .big b{display:block;font:800 64px/.9 var(--disp);letter-spacing:-.05em}
.vc2 .big span{font:600 14px var(--body)}
.vc2 .wm,.vc2 .dur{color:#F2ECE2}
.vc3{background:linear-gradient(#CFE3F2,#EEF4F5);color:#141312;padding:44px 16px 18px;align-items:center;text-align:center;gap:6px}
.vc3 svg{width:100%;height:auto;flex:1}
.vc3 b{font:800 20px/1.05 var(--disp);letter-spacing:-.02em}.vc3 span{font-size:13px}
.vc3 .wm{color:#141312}
/* privacy */
.pgr{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pv{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:20px;border:1px solid var(--line);background:var(--card)}
.pv i{width:44px;height:44px;border-radius:13px;background:var(--sunk);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.pv b{font:700 17px/1.25 var(--body)}.pv span{font-size:14.5px;color:var(--mute);line-height:1.5}
/* pricing */
.prg{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:24px}
.prc{background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:10px;position:relative}
.prc.plus{padding:0 28px 28px;background:var(--card)}
.prc.plus .clap{margin:0 -28px 14px}
.prc .pp{font:800 54px/1 var(--disp);letter-spacing:-.04em;margin-top:4px}
.prc .pn{color:var(--mute);font-size:14.5px}
.prc .ticks{margin:10px 0 14px;flex:1}
.prc .ticks li{font-size:15px}
.prc .tg{position:absolute;right:24px;top:34px;background:var(--ink);color:var(--bg);font:600 12px var(--body);padding:5px 10px;border-radius:999px}
/* faq */
.fq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.fql{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.fql details{border-bottom:1px solid var(--line)}
.fql summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;font:700 18px/1.3 var(--body);padding:10px 0}
.fql summary::-webkit-details-marker{display:none}
.fql summary i{transition:transform .25s var(--ease);flex:0 0 auto}
.fql details[open] summary i{transform:rotate(45deg)}
.fql p{margin:0 0 20px;color:var(--mute);line-height:1.55;font-size:16px;max-width:60ch;animation:rise .3s var(--easeS)}
/* end + footer */
.lend{position:relative;overflow:hidden;padding:110px 0;background:#141312;color:#F2ECE2}
.tk[data-mode="eve"] .lend{background:var(--card)}
.lend .wedgeL.r2{right:auto;left:-260px;top:-200px;width:600px;height:500px;transform:rotate(24deg);animation:none}
.lend .lin{display:flex;flex-direction:column;align-items:flex-start;gap:26px;position:relative}
.ldisp.sm{font-size:76px}
.lend .ldisp .r{color:#FF6A4F}
.lend .btn{background:#FF5A3D;color:#141312!important}
.lend .store{background:#F2ECE2;color:#141312!important}
.lend .lin{align-items:flex-end;text-align:right}
.lfoot{background:var(--bg);padding:56px 0 90px;border-top:1px solid var(--line)}
.ftg{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.ftg p{color:var(--mute);margin:10px 0 0;font-size:14.5px}
.ftg>div{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.ftg b{font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.ftg button,
.ftg a{border:0;background:none;padding:6px 0;font:500 15px var(--body);cursor:pointer;color:var(--ink)}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mute)}
.fbot button,
.fbot a{border:0;background:none;color:var(--ink);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.lsticky{display:none}
/* landing phone */
@container site (max-width:760px){
 .lin{padding:0 20px}
 .lnav .lin{height:60px;gap:10px}.lnav .lk,.lsign{display:none}.lcta{display:none}.lmenu{display:flex}
 .wlogo{font-size:23px}
 .lhero{padding:24px 0 40px}
 .hgrid{grid-template-columns:1fr;gap:28px}
 .lhero>.wedgeL{right:-300px;top:auto;bottom:-180px;width:600px;height:560px}
 .ldisp{font-size:50px}
 .ldisp.sm{font-size:44px}
 .lead{font-size:16.5px}
 .site .btn.lgb{width:100%;min-height:58px;font-size:17px!important}
 .ctaR{align-items:stretch}.ctaR .fine{text-align:center}
 .stores{justify-content:center}.store{flex:1;min-width:0;justify-content:center;padding:0 10px}
 .webB{flex:1 1 100%;justify-content:center}
 .vis{height:560px}
 .lPhone{width:264px;height:560px;border-radius:40px;padding:8px}
 .lPhone .app{left:8px;top:8px;transform:scale(.67);border-radius:52px}
 .fl{padding:8px 11px}.fl b{font-size:13.5px}
 .fl.f1{left:-4px;top:30px}.fl.f2{right:-6px;top:120px}.fl.f2 .wg{width:104px}.fl.f3{left:-4px;bottom:120px}.fl.f4{right:-6px;bottom:40px}
 .fgrid{grid-template-columns:1fr 1fr}.fact{padding:18px 14px;flex-direction:column;gap:8px}.fact+.fact{border-left:0}.fact:nth-child(even){border-left:1px solid var(--line)}.fact:nth-child(n+3){border-top:1px solid var(--line)}
 .fact b{font-size:14.5px}
 .lsec,.lband{padding:64px 0}
 .h2d{font-size:34px}.sub2{font-size:16px}
 .shead{margin-bottom:28px}
 .hgr,.bento,.pgr,.vgrid{grid-template-columns:1fr}
 .bc.b2{grid-column:auto}
 .hbPl{grid-template-columns:1fr 1fr;padding:14px}.hbPl .ev:nth-child(3){display:none}.hbPl .td{grid-row:auto}
 .pgrid,.lgrid2,.fq{grid-template-columns:1fr;gap:32px}
 .lgrid2 .lvis{order:2}
 .pfr .scene3{height:300px}.pfr .scene3 .houseW{width:320px}
 .turnL{flex-wrap:wrap;font-size:13px}.turnL button{width:100%}
 .lvis .arcM{height:200px}
 .vgrid{gap:28px;max-width:280px;margin:0 auto}
 .prg{grid-template-columns:1fr}
 .fql summary{font-size:16px}
 .lend{padding:72px 0}
 .lend .lin{align-items:stretch;text-align:left}
 .ftg{grid-template-columns:1fr 1fr}.ftg>div:first-child{grid-column:1/-1}
 .lsticky{display:block;position:sticky;bottom:0;z-index:30;padding:10px 16px 14px;background:linear-gradient(transparent,var(--bg) 30%)}
 .lsticky .btn{background:var(--ink);color:var(--bg)!important}
}

/* ================= FUNNEL ================= */
.fn{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) 44%;background:var(--bg)}
.fnMain{display:flex;flex-direction:column;min-height:100%;min-width:0}
.fnTop{display:flex;align-items:center;justify-content:space-between;gap:12px;height:72px;padding:0 32px;position:sticky;top:0;background:var(--bg);z-index:5}
.fnTop.w{justify-content:flex-start;gap:20px;border-bottom:1px solid var(--line)}
.ib2{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer}
.fnTop .cnt{font:500 12.5px var(--mono);color:var(--mute);min-width:44px;text-align:right}
.fnBar{height:4px;background:var(--sunk);margin:0 32px;border-radius:4px;overflow:hidden}
.fnBar i{display:block;height:100%;background:var(--ink);border-radius:4px;transition:width .45s var(--easeS)}
.fnBody{flex:0 0 auto;display:flex;justify-content:center;padding:48px 32px 8px}
.fnBody.a-in .fnC{animation:slideIn .38s var(--easeS) both}
.fnBody.a-back .fnC{animation:slideBack .32s var(--easeS) both}
.fnC{width:100%;max-width:540px;display:flex;flex-direction:column;gap:14px}
.fh{font:800 40px/1.02 var(--disp);letter-spacing:-.035em;margin:0;text-wrap:balance}
.fh.c,.fsub.c{text-align:center}
.fh2{font:800 24px/1.1 var(--disp);letter-spacing:-.02em;margin:18px 0 0}
.fsub{margin:0;color:var(--mute);font-size:16.5px;line-height:1.5}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.fopt{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 16px 10px 12px;border-radius:16px;border:1.5px solid var(--line);background:var(--card);text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .2s var(--spring),transform .14s}
.fopt:hover{border-color:color-mix(in srgb,var(--ink) 40%,var(--line))}
.fopt .oi{width:40px;height:40px;border-radius:12px;background:var(--sunk);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.fopt .ot{flex:1;font:600 16.5px/1.3 var(--body)}
.fopt .ck{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:transparent}
.fopt.on{border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.tk[data-mode="eve"] .fopt.on{box-shadow:4px 4px 0 var(--red)}
.fopt.on .oi{background:var(--ink);color:var(--bg)}
.fopt.on .ck{background:var(--ink);border-color:var(--ink);color:var(--bg);animation:pop .3s var(--spring)}
.opts.many .fopt{min-height:58px}
.stmt{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--shadow);padding:26px 24px 24px 54px;font:800 26px/1.15 var(--disp);letter-spacing:-.02em;margin-top:8px}
.tk[data-mode="eve"] .stmt{box-shadow:5px 5px 0 var(--red)}
.stmt .qm{position:absolute;left:18px;top:8px;font:800 60px/1 var(--disp);color:var(--redInk)}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:18px}
.scale button{min-height:64px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;font:800 22px var(--disp)}
.scale button.on{background:var(--ink);color:var(--bg);border-color:var(--ink);animation:pop .3s var(--spring)}
.scl{display:flex;justify-content:space-between;font-size:13px;color:var(--mute)}
.iv{margin:6px 0}
.iv .arcM{height:220px}
.ivHome{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--r);background:var(--sunk)}
.ntfC{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:16px;padding:12px 14px;box-shadow:0 8px 20px rgba(20,19,18,.08);animation:riseBig .5s .2s var(--easeS) both}
.ntfC.d2{animation-delay:.6s}
.ntfC .ai{width:34px;height:34px;border-radius:9px;background:var(--ink);color:var(--red);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ntfC b{display:block;font:700 15px var(--body)}.ntfC span{font-size:13px;color:var(--mute)}
.ev3{position:relative;display:flex;flex-direction:column;gap:12px;margin-top:10px;padding:20px;border-radius:var(--r);background:var(--sunk)}
.ev3 div{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:14px;font:600 16px var(--body);animation:riseBig .5s var(--d) var(--easeS) both}
.ev3 i{width:36px;height:36px;border-radius:10px;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ev3 .stamp{left:auto;right:20px;top:auto;bottom:16px;transform:rotate(-9deg);font-size:20px;animation:stampL .5s 1.5s var(--spring) both}
.fin{display:flex;align-items:center;min-height:64px;border-radius:16px;border:1.5px solid var(--ink);background:var(--card);padding:0 18px;margin-top:10px}
.fin input{flex:1;border:0;background:none;font:600 20px var(--body);color:var(--ink);outline:none;min-width:0}
.fin input::placeholder{color:var(--mute);opacity:.6}
.fin.sm{min-height:54px;margin:0}.fin.sm input{font-size:16px}
.chkB{display:flex;align-items:flex-start;gap:12px;border:0;background:none;text-align:left;padding:8px 0;cursor:pointer;font:500 15px/1.4 var(--body)}
.chkB i{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.chkB.on i{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.dpick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.dpick button{min-height:150px;border-radius:18px;border:1.5px solid var(--line);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;font:700 17px var(--body)}
.dpick .av{width:72px;height:72px;font-size:28px}
.dpick button.on{border-color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.tk[data-mode="eve"] .dpick button.on{box-shadow:5px 5px 0 var(--red)}
.dlock{display:flex;gap:12px;align-items:center;background:var(--ink);color:var(--bg);border-radius:16px;padding:14px 16px;animation:riseBig .4s var(--easeS) both}
.dlock b{display:block;font:700 15.5px var(--body)}.dlock span{font-size:14px;opacity:.8}
.ldW{display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:20px}
.ring{width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--ink) calc(var(--p)*1%),var(--sunk) 0);display:flex;align-items:center;justify-content:center;transition:background .5s;position:relative}
.ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--bg)}
.ring b{position:relative;font:800 34px var(--disp);letter-spacing:-.03em}
.lst{display:flex;flex-direction:column;gap:10px;width:100%;max-width:380px}
.lst div{display:flex;align-items:center;gap:12px;font:600 15.5px var(--body);color:var(--mute);transition:color .3s}
.lst div.on,.lst div.cur{color:var(--ink)}
.lst i{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.lst div.on i{background:var(--ink);border-color:var(--ink);color:var(--bg);animation:pop .3s var(--spring)}
.lst .spin{width:14px;height:14px;border-width:2px}
.ptype{display:flex;align-items:center;gap:14px;background:var(--card);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--shadow);border-radius:var(--r);padding:16px 18px;animation:riseBig .5s var(--easeS) both}
.tk[data-mode="eve"] .ptype{box-shadow:5px 5px 0 var(--red)}
.ptype i{width:50px;height:50px;border-radius:14px;background:var(--red);color:var(--onRed);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ptype span{font:500 12px var(--mono);letter-spacing:.08em;color:var(--mute);text-transform:uppercase}
.ptype b{display:block;font:800 26px/1.05 var(--disp);letter-spacing:-.025em}
.bars{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-top:4px}
.bars>div{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:12px;font:600 14.5px var(--body)}
.br{height:10px;border-radius:10px;background:var(--sunk);overflow:hidden}
.br i{display:block;height:100%;width:var(--w);background:var(--ink);border-radius:10px;animation:grow 1s .3s var(--easeS) both}
.wkL{display:flex;flex-direction:column;gap:6px}
.wkL div{display:grid;grid-template-columns:64px 32px 1fr;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;animation:riseBig .4s var(--d) var(--easeS) both}
.wkL .dd{font:500 12px var(--mono);color:var(--mute);text-transform:uppercase}
.wkL i{width:30px;height:30px;border-radius:9px;background:var(--sunk);display:flex;align-items:center;justify-content:center}
.wkL b{font:600 15px/1.3 var(--body)}
.fnFoot{padding:16px 32px 48px;display:flex;justify-content:center;z-index:4}
.fnFoot .fine{text-align:center}
.fnFoot .btn{max-width:540px}
.fnFoot .fine{padding:16px 0}
.fnSide{background:var(--sunk);position:relative;overflow:hidden;border-left:1px solid var(--line)}
.fsIn{position:sticky;top:0;height:900px;max-height:100%;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:40px 48px}
.fsH{position:relative;height:380px;border-radius:24px;overflow:hidden;background:linear-gradient(#CFE3F2,#EEF4F5);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--shadow);display:flex;align-items:flex-end;justify-content:center}
.tk[data-mode="eve"] .fsH{background:linear-gradient(#141A2B,#283048);box-shadow:6px 6px 0 var(--red)}
.fsH svg{width:86%;height:auto;position:relative;z-index:1;margin-bottom:8px}
.fsH .gr{position:absolute;left:0;right:0;bottom:0;height:14%;background:#2F5E45}
.fsH .sk .sun{position:absolute;right:28px;top:22px;width:34px;height:34px;border-radius:50%;background:#F4C95D;box-shadow:0 0 0 8px rgba(244,201,93,.25)}
.tk[data-mode="eve"] .fsH .sk .sun{background:#F2ECE2;width:26px;height:26px}
.fsC{display:flex;flex-wrap:wrap;gap:8px;min-height:80px;align-content:flex-start}
.fsC span{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font:600 13.5px var(--body);animation:pop .35s var(--d) var(--spring) both}
.fsC span svg{color:var(--redInk)}
.fsC .emp{color:var(--mute);border-style:dashed;background:transparent}
/* wide funnel steps */
.fn.wide{display:flex;flex-direction:column}
.fnTop.w .mk{margin-left:auto}
.fnWide{flex:1;padding:40px 48px 60px;display:flex;justify-content:center}
.fnWide.a-in>*{animation:slideIn .4s var(--easeS) both}
.pwW{width:100%;max-width:1080px;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:48px;align-items:start}
.pwL{display:flex;flex-direction:column;gap:16px}
.pwTy{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;background:var(--ink);color:var(--bg);border-radius:999px;padding:7px 14px 7px 8px;font:700 14px var(--body)}
.pwTy i{width:28px;height:28px;border-radius:50%;background:var(--red);color:var(--onRed);display:flex;align-items:center;justify-content:center}
.pwFor2{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.pwFor2 div{display:flex;align-items:center;gap:10px;font:600 15px var(--body)}
.pwFor2 i{width:28px;height:28px;border-radius:8px;background:var(--sunk);display:flex;align-items:center;justify-content:center;color:var(--redInk);flex:0 0 auto}
.vals2{display:flex;flex-direction:column;gap:10px}
.vals2 div{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.45}
.vals2 i{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px}
.mfq{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.mfq div{border-top:1px solid var(--line);padding-top:12px}
.mfq b{display:block;font:700 14.5px var(--body);margin-bottom:3px}.mfq span{font-size:14px;color:var(--mute)}
.pwR{position:sticky;top:96px;display:flex;flex-direction:column;align-items:center;gap:6px}
.pwBox{width:100%;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 50px rgba(20,19,18,.1)}
.tl2{display:flex;flex-direction:column;gap:12px;position:relative;padding-left:4px}
.tl2::before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;background:var(--line)}
.tl2 div{display:grid;grid-template-columns:24px 1fr;column-gap:12px;position:relative}
.tl2 i{grid-row:span 2;width:24px;height:24px;border-radius:50%;background:var(--card);border:2px solid var(--line);display:flex;align-items:center;justify-content:center}
.tl2 i.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tl2 b{font:700 14.5px var(--body)}.tl2 span{font-size:13.5px;color:var(--mute)}
.plans2{display:flex;flex-direction:column;gap:10px}
.plan2{position:relative;display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 14px;border-radius:16px;border:1.5px solid var(--line);background:var(--card);text-align:left;cursor:pointer;transition:transform .25s var(--spring),border-color .2s}
.plan2.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);transform:scale(1.015)}
.plan2 .rd{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:transparent;flex:0 0 auto}
.plan2.on .rd{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.plan2 div{flex:1;min-width:0}.plan2 b{display:block;font:700 16px var(--body)}.plan2 div span{font-size:13px;color:var(--mute)}
.plan2 .pr{font:700 15px var(--body);white-space:nowrap}
.plan2 .tg{position:absolute;right:12px;top:-11px;background:var(--ink);color:var(--bg);font:600 11.5px var(--body);padding:3px 9px;border-radius:999px}
.cta2{position:relative;overflow:hidden}
.cta2::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);animation:shine 3.2s 1s ease-in-out infinite}
@keyframes shine{0%,55%{left:-40%}85%,100%{left:120%}}
.pwBox .fine{text-align:center}
.secure{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;color:var(--mute)}
.link.fr{font-size:14px}
/* checkout */
.pay{width:100%;max-width:1000px;display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:48px;align-items:start}
.ordr{display:flex;flex-direction:column;gap:16px}
.bkB{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border:0;background:none;font:600 14.5px var(--body);color:var(--mute);cursor:pointer;min-height:40px;padding:0}
.ordr .oi{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
.ordr .oi b{display:block;font:700 17px var(--body)}.ordr .oi span{font-size:14px;color:var(--mute)}
.kv2{display:flex;flex-direction:column}
.kv2 div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.kv2 div:first-child b{font:800 22px var(--disp)}
.pform{padding:22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px rgba(20,19,18,.1)}
.xp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.xp button{min-height:50px;border-radius:12px;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;font:600 18px var(--body)}
.site .apay{background:#000;color:#fff}.site .gpay{background:#fff;color:#000;border:1px solid #DADCE0!important}
.gpay b{font:700 19px var(--body);color:#4285F4}
.or{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.pfl{display:flex;flex-direction:column;gap:6px;font:600 13px var(--body);color:var(--mute)}
.pfl input{min-height:48px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);padding:0 14px;font:500 16px var(--body);color:var(--ink);outline:none;width:100%}
.pfl input:focus{border-color:var(--ink)}
.pfl .cnI{position:relative}.pfl .cnI svg{position:absolute;right:12px;top:14px;color:var(--mute)}
.pfl2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.perr2{display:flex;gap:10px;align-items:flex-start;background:color-mix(in srgb,var(--red) 12%,var(--card));border:1px solid color-mix(in srgb,var(--red) 40%,var(--line));border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.4;animation:rise .3s var(--easeS)}
.perr2 svg{color:var(--redInk);flex:0 0 auto}.perr2 b{display:block}
/* success */
.okW{width:100%;max-width:1040px;display:flex;flex-direction:column;gap:32px;align-items:center}
.okH{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative}
.stampP{border:3px solid var(--red);color:var(--red);font:800 30px/1 var(--disp);padding:8px 16px;border-radius:12px;transform:rotate(-8deg);animation:stampL .55s .2s var(--spring) both}
.pairX{display:flex;align-items:center}
.pairX .av{width:58px;height:58px}
.pairX .ln{width:60px;height:3px;background:var(--ink);border-radius:3px;animation:grow .6s .5s var(--easeS) both}
.okS{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%}
.okC{padding:22px;display:flex;flex-direction:column;gap:10px;position:relative;animation:riseBig .5s var(--easeS) both}
.okC:nth-child(2){animation-delay:.12s}.okC:nth-child(3){animation-delay:.24s}
.okC .n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font:800 15px var(--disp)}
.okC b{font:800 21px/1.1 var(--disp);letter-spacing:-.02em}.okC>span{font-size:14.5px;color:var(--mute);line-height:1.45}
.osQ{display:flex;gap:12px;align-items:center;margin-top:auto}
.qrS{color:var(--ink);background:var(--card);flex:0 0 auto}
.stores.v{flex-direction:column;align-items:stretch}
.stores.v .store{min-height:44px;padding:0 12px}.stores.v .store b{font-size:14.5px}
.lnk{display:flex;align-items:center;gap:8px;border:1.5px dashed var(--line);border-radius:12px;padding:6px 6px 6px 12px;margin-top:auto;font:600 14px var(--mono)}
.lnk span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnk button{border:0;background:var(--sunk);border-radius:9px;min-height:38px;padding:0 10px;display:flex;gap:5px;align-items:center;font:600 13px var(--body);cursor:pointer}
.okC .btn.ink.sm,.okC .btn.ghost.sm{margin-top:auto}
@container site (max-width:760px){
 .fn{grid-template-columns:1fr}.fnSide{display:none}
 .fnTop{padding:0 16px;height:60px}.fnBar{margin:0 16px}
 .fnBody{padding:24px 16px 16px}
 .fh{font-size:30px}.fsub{font-size:15.5px}
 .fopt{min-height:58px}.fopt .ot{font-size:15.5px}
 .stmt{font-size:21px;padding:22px 18px 20px 46px}.stmt .qm{font-size:48px;left:14px}
 .scale{gap:6px}.scale button{min-height:56px}
 .fnBody{flex:1;padding:24px 16px 16px}
 .fnFoot{position:sticky;bottom:0;padding:12px 16px 18px;background:linear-gradient(transparent,var(--bg) 26%)}
 .bars>div{grid-template-columns:118px 1fr;font-size:13.5px}
 .ptype b{font-size:21px}
 .fnTop.w{padding:0 16px}
 .fnWide{padding:20px 16px 40px}
 .pwW,.pay{grid-template-columns:1fr;gap:24px}
 .pwR{position:static}
 .mfq{grid-template-columns:1fr}
 .okS{grid-template-columns:1fr}
 .osQ .qrS{display:none}.osQ{flex-direction:column;align-items:stretch}.stores.v{flex-direction:row}
 .pwW{display:flex;flex-direction:column;gap:16px}.pwL{display:contents}.pwL>.pwFor2,.pwL>.vals2,.pwL>.mfq{order:3}.pwR{order:2}
}

/* ================= WEB APP ================= */
.wa{height:100%;display:grid;grid-template-columns:248px minmax(0,1fr);background:var(--bg);position:relative}
.aside{display:flex;flex-direction:column;gap:6px;padding:20px 14px;border-right:1px solid var(--line);background:var(--card);overflow:auto}
.alg{border:0;background:none;text-align:left;padding:4px 10px 14px;cursor:pointer}
.apair{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--sunk);margin-bottom:10px}
.apair .av{width:36px;height:36px;border-color:var(--sunk)}.apair .av+.av{margin-left:-20px}
.apair b{display:block;font:700 14px var(--body)}.apair span{font-size:12.5px;color:var(--mute)}
.anav{display:flex;flex-direction:column;gap:2px}
.anav button,.abot>button{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:12px;border:0;background:none;font:600 15px var(--body);color:var(--mute);cursor:pointer;text-align:left;width:100%}
.anav button:hover,.abot>button:hover{background:var(--sunk);color:var(--ink)}
.anav button.on,.abot>button.on{background:var(--ink);color:var(--bg)}
.anav em{margin-left:auto;font:700 12.5px var(--body);font-style:normal;display:inline-flex;align-items:center;gap:4px}
.sendB{margin-top:14px;min-height:50px!important;font-size:15px!important}
.abot{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.plusW{display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;border-radius:12px;border:1.5px solid var(--ink);background:none;font:700 14px var(--body);cursor:pointer}
.plusT{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin:0 12px 6px;font:700 12.5px var(--body);background:var(--ink);color:var(--bg);padding:4px 10px;border-radius:999px}
.amain{overflow:hidden;position:relative}
.asc{position:absolute;inset:0;overflow:auto;padding:0 36px 40px}
.atop{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:88px;position:sticky;top:0;z-index:5;background:var(--bg)}
.atop h1{font:800 34px/1 var(--disp);letter-spacing:-.035em;margin:0}
.atop span{font-size:14.5px;color:var(--mute)}
.atop .ar{display:flex;align-items:center;gap:10px}
.ib3{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.av.sm{width:38px;height:38px;font-size:15px}.av.lg{width:56px;height:56px;font-size:22px}
.tseg{display:flex;background:var(--sunk);border-radius:999px;padding:3px}
.tseg button{border:0;background:none;min-height:36px;padding:0 14px;border-radius:999px;font:600 13.5px var(--body);color:var(--mute);cursor:pointer}
.tseg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.agrid{display:grid;gap:20px;align-items:start}
.g-today{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.g-plans{grid-template-columns:minmax(0,1fr) 300px}
.g-place{grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr)}
.g-where{grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr)}
.g-us{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr)}
.agrid .col{display:flex;flex-direction:column;gap:20px;min-width:0}
.ac{padding:18px 20px;display:flex;flex-direction:column;gap:12px;animation:rise .4s var(--easeS) both}
.ach{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ach h2{font:800 20px/1.1 var(--disp);letter-spacing:-.02em;margin:0}
.lnk2{border:0;background:none;display:inline-flex;align-items:center;gap:3px;font:600 14px var(--body);color:var(--mute);cursor:pointer;min-height:36px}
.aq .aqb{padding:22px 26px 26px;display:flex;flex-direction:column;gap:14px}
.aq .row1{display:flex;justify-content:space-between;align-items:center}
.aq h2{font-size:44px}
.aq .who{display:flex;align-items:center;gap:10px;font-size:15px}
.aq .btn{align-self:flex-start;width:auto;padding:0 26px}
.aqsL{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.aqs{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);text-align:left;cursor:pointer;position:relative}
.aqs i{width:34px;height:34px;border-radius:10px;background:var(--sunk);display:flex;align-items:center;justify-content:center}
.aqs.isD i{background:var(--ink);color:var(--bg)}
.aqs b{display:block;font:700 14.5px/1.25 var(--body)}.aqs em{font-style:normal;font-size:12.5px;color:var(--mute)}
.aqs .rw{position:absolute;right:12px;top:14px;display:inline-flex;gap:4px;align-items:center;font:700 13px var(--body)}
.aevL{display:flex;flex-direction:column;gap:8px}
.aev{display:grid;grid-template-columns:76px 64px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--bg);border-left:4px solid var(--us)}
.aev.me{border-left-color:var(--me)}.aev.pa{border-left-color:var(--pa)}
.aev .dd{font:600 13px var(--body);color:var(--mute)}.aev .tm{font:500 12.5px var(--mono)}
.aev b{font:700 15px var(--body)}.aev .sb2{font-size:13px;color:var(--mute)}
.apres{display:flex;align-items:center;gap:12px}
.apres>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.apres b{font:700 17px var(--body)}
.apres span{display:flex;align-items:center;gap:5px;font-size:13.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.missB{display:flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;border-radius:999px;border:1.5px solid var(--ink);background:var(--card);font:700 14px var(--body);cursor:pointer}
.missB svg{color:var(--red)}
.amap{position:relative;border-radius:14px;overflow:hidden;height:170px}
.amap .map3{height:100%;width:100%}
.a2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ac.stat{gap:2px}
.ac.stat .big{font:800 40px/1 var(--disp);letter-spacing:-.04em;margin:6px 0 2px}
.ac.stat span:last-child{font-size:13px;color:var(--mute)}
.aplace{position:relative}
.aplace .wal{position:static}
.ahouse{height:200px;border-radius:14px;background:linear-gradient(#CFE3F2,#EEF4F5);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;position:relative}
.ahouse::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14%;background:#2F5E45}
.tk[data-mode="eve"] .ahouse{background:linear-gradient(#141A2B,#283048)}
.ahouse svg{height:96%;width:auto;position:relative;z-index:1}
.turn{display:flex;align-items:center;gap:10px;font:600 14px var(--body)}
.turn>span:not(.av){flex:1;min-width:0}
.turn .btn{width:auto;padding:0 14px;min-height:40px!important}
/* question modal */
.mdim{position:absolute;inset:0;background:rgba(20,19,18,.5);z-index:40;animation:fadeIn .25s both}
@keyframes fadeIn{from{opacity:0}}
.modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:41;background:var(--bg);border-radius:26px;padding:32px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:mIn .35s var(--easeS) both;display:flex;flex-direction:column;gap:16px}
@keyframes mIn{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
.mx{position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.mques{width:640px;align-items:center;text-align:center}
.mques h2{font-size:38px;max-width:20ch}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
.qo{min-height:170px;border-radius:20px;border:1.5px solid var(--line);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;font:700 18px var(--body)}
.qo .av{width:80px;height:80px;font-size:30px}
.qo.on{border-color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.tk[data-mode="eve"] .qo.on{box-shadow:5px 5px 0 var(--red)}
.mques .btn{width:100%}
.flp{display:flex;gap:16px;justify-content:center;perspective:900px}
.fcd{width:200px;height:230px;position:relative;transform-style:preserve-3d;transition:transform .8s var(--spring)}
.flp.go .fcd{transform:rotateY(180deg)}.flp.go .fcd:nth-child(2){transition-delay:.18s}
.fcd>div{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px solid var(--ink)}
.fcd .fr{background:var(--ink);color:var(--bg);font:800 24px var(--disp)}
.fcd .bk{background:var(--card);transform:rotateY(180deg)}
.fcd .bk small{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.fcd .bk b{font:800 20px var(--disp)}
.stamp2{border:3px solid var(--red);color:var(--red);font:800 28px/1 var(--disp);padding:7px 14px;border-radius:10px;transform:rotate(-8deg);animation:stampL .5s 1.1s var(--spring) both;margin-top:-6px}
.earnR{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 16px;animation:riseBig .4s 1.5s var(--easeS) both}
.earnR b{font:800 22px var(--disp)}.earnR span{font-size:14px;color:var(--mute)}
.btnR{display:flex;gap:10px;flex-wrap:wrap}
.btnR .btn{width:auto;padding:0 18px}
/* plans */
.nlp{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px}
.nlp>svg{color:var(--redInk);flex:0 0 auto}
.nlp input{flex:1;min-width:0;border:0;background:none;font:600 16px var(--body);color:var(--ink);outline:none}
.chipP{font:600 12.5px var(--body);background:var(--sunk);border-radius:999px;padding:6px 10px;white-space:nowrap}
.nlp .btn{width:auto;padding:0 16px}
.weekG{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:0;overflow:hidden}
.dc{display:flex;flex-direction:column;gap:8px;padding:12px 8px;min-height:380px;border-right:1px solid var(--line)}
.dc:last-child{border-right:0}
.dc.td{background:color-mix(in srgb,var(--red) 5%,var(--card))}
.dh{display:flex;flex-direction:column;align-items:center;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:2px}
.dh span{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.dh b{font:800 22px var(--disp)}
.dc.td .dh b{background:var(--ink);color:var(--bg);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px}
.wev{border-radius:10px;padding:8px 9px;display:flex;flex-direction:column;gap:2px;background:color-mix(in srgb,var(--us) 10%,var(--card));border-left:3px solid var(--us);animation:rise .4s var(--easeS) both}
.wev.me{background:color-mix(in srgb,var(--me) 14%,var(--card));border-left-color:var(--me)}
.wev.pa{background:color-mix(in srgb,var(--pa) 14%,var(--card));border-left-color:var(--pa)}
.wev span{font:500 11px var(--mono);color:var(--mute)}.wev b{font:700 13.5px/1.2 var(--body)}.wev em{font-style:normal;font-size:11.5px;color:var(--mute)}
.addE{border:1.5px dashed var(--line);background:none;border-radius:10px;min-height:44px;display:flex;align-items:center;justify-content:center;color:var(--mute);cursor:pointer}
.lgd{display:flex;gap:16px;font:600 13px var(--body);color:var(--mute)}
.lgd span{display:flex;align-items:center;gap:6px}.lgd i{width:10px;height:10px;border-radius:3px}
.lgd i.me{background:var(--me)}.lgd i.pa{background:var(--pa)}.lgd i.us{background:var(--us)}
.tdl{display:flex;flex-direction:column;gap:4px}
.tdl button{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 8px;border-radius:12px;border:0;background:none;text-align:left;cursor:pointer}
.tdl button:hover{background:var(--sunk)}
.tdl i{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tdl button.on i{background:var(--ink);border-color:var(--ink);color:var(--bg);animation:pop .3s var(--spring)}
.tdl span:not(.whoI){flex:1;min-width:0}.tdl b{display:block;font:600 15px var(--body)}.tdl em{font-style:normal;font-size:12.5px;color:var(--mute)}
.tdl button.on b{text-decoration:line-through;color:var(--mute)}
.whoI{width:24px;height:24px;border-radius:50%;color:#fff;font:700 11px var(--body);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.whoI.me{background:var(--me)}.whoI.pa{background:var(--pa)}
.tk[data-mode="eve"] .whoI{color:#141312}
.gro{display:flex;flex-wrap:wrap;gap:6px}
.gro span{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font:600 13.5px var(--body)}
.gro span.on{background:var(--sunk);color:var(--mute);text-decoration:line-through}
.idea{display:flex;flex-direction:column;gap:6px}
.idea button{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:10px 12px;cursor:pointer}
.idea b{font:700 14.5px var(--body)}.idea span{font-size:12.5px;color:var(--mute);grid-row:2}.idea svg{grid-row:span 2;grid-column:2;align-self:center}
/* place */
.walL{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;color:var(--mute)}
.walL b{font:800 20px var(--disp);color:var(--ink)}
.scW{position:relative}
.scW .scene3{height:470px;display:flex;align-items:flex-end;justify-content:center}
.scW .scene3 .houseW{width:500px;margin-bottom:14px}
.scW .scene3 .houseW svg{width:100%;height:auto;display:block}
.scW .nbS{position:absolute;top:-6px;color:#E9B949;animation:pop .5s var(--spring) both}
.scW .nbS:nth-of-type(1){left:30%}.scW .nbS:nth-of-type(2){left:46%}.scW .nbS:nth-of-type(3){left:60%}.scW .nbS:nth-of-type(4){left:72%}
.road2{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.road2 div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 6px;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.road2 i{width:28px;height:28px;border-radius:50%;background:var(--sunk);display:flex;align-items:center;justify-content:center}
.road2 .on i{background:var(--ink);color:var(--bg)}
.road2 .nx{border-color:#E9B949;box-shadow:0 0 0 2px color-mix(in srgb,#E9B949 30%,transparent)}
.road2 b{font:700 12.5px/1.15 var(--body)}.road2 span{font-size:11.5px;color:var(--mute);display:inline-flex;align-items:center;gap:3px}
.earnT2{display:flex;flex-direction:column}
.earnT2 div{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.earnT2 div:last-child{border-bottom:0}
.earnT2 b{display:inline-flex;align-items:center;gap:5px;font:800 15px var(--disp)}
.contrib{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font:600 13px var(--body)}
.cb{height:10px;border-radius:10px;background:color-mix(in srgb,var(--pa) 50%,var(--sunk));overflow:hidden}
.cb i{display:block;height:100%;background:var(--me);border-radius:10px;animation:grow .9s var(--easeS) both}
.cb i.pa{background:var(--pa)}
.know .cb{background:var(--sunk)}
.shopG{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.si{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:12px 8px;border-radius:14px;border:1px solid var(--line);background:var(--bg)}
.si .sv{width:64px;height:54px}.si .sv svg{width:100%;height:100%}
.si b{font:700 13.5px/1.2 var(--body)}.si>span{display:inline-flex;align-items:center;gap:4px;font:700 13px var(--body)}
.si button{margin-top:4px;min-height:36px;border-radius:10px;border:0;background:var(--ink);color:var(--bg);font:700 13px var(--body);padding:0 12px;cursor:pointer;display:flex;align-items:center;gap:4px}
.si button[disabled]{background:var(--sunk);color:var(--mute);cursor:default}
.si button.ok{background:var(--ok);color:#fff}
.si.b{border-color:var(--ok)}
/* where */
.bigMap{position:relative;height:580px;overflow:hidden;padding:0}
.bigMap .map3{width:100%;height:100%;object-fit:cover}
.bigMap svg.map3{height:100%}
.bigMap .pin .av{width:46px;height:46px}
.plc{position:absolute;display:inline-flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 10px;font:600 12.5px var(--body)}
.bigMap.paused .map3,.bigMap.paused .pin.a{filter:blur(3px);opacity:.6}
.pz{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--card);border-radius:18px;padding:18px 22px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.2);max-width:300px;z-index:3}
.pz b{font:700 17px var(--body)}.pz span{font-size:14px;color:var(--mute)}
.eta{display:flex;align-items:center;gap:8px;background:var(--sunk);border-radius:12px;padding:10px 12px;font-size:15px}
.plL{display:flex;flex-direction:column;gap:8px}
.plL div,.wl div{display:flex;align-items:center;gap:12px}
.plL i,.wl i{width:36px;height:36px;border-radius:10px;background:var(--sunk);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.plL b,.wl b{display:block;font:700 14.5px var(--body)}.plL em,.wl em{font-style:normal;font-size:12.5px;color:var(--mute)}
.wl{display:flex;flex-direction:column;gap:10px}
.tgl{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font:600 15px var(--body)}
.sw{width:50px;height:30px;border-radius:999px;border:0;background:var(--line);position:relative;cursor:pointer;flex:0 0 auto;transition:background .2s}
.sw i{position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s var(--spring)}
.sw.on{background:var(--ok)}.sw.on i{transform:translateX(20px)}
.ldw{display:flex;flex-direction:column;gap:16px}
.ldw .arcM{height:380px}
.ldr2{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
/* us */
.mwall{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:10px}
.mwall figure:nth-child(4){grid-column:3/span 2}
.mwall figure{margin:0;position:relative;border-radius:14px;overflow:hidden;background:var(--sunk)}
.mwall figure.w2{grid-column:span 2;grid-row:span 2}
.mwall img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.mph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--mute)}
.mwall figcaption{position:absolute;left:8px;bottom:8px;right:8px;background:var(--card);border-radius:10px;padding:6px 10px}
.mwall figcaption b{display:block;font:700 13px var(--body)}.mwall figcaption span{font-size:11.5px;color:var(--mute)}
.ac.recapC{background:#E8452C;color:#141312;border-color:#E8452C;gap:6px}
.ac.recapC .mk{color:#141312;opacity:.75}.ac.recapC b{font:800 24px/1.1 var(--disp);letter-spacing:-.02em}
.ac.recapC .btn{align-self:flex-start;width:auto;padding:0 16px;background:#141312;color:#F2ECE2!important;margin-top:6px}
.know{display:flex;flex-direction:column;gap:12px}
.know>div{display:grid;grid-template-columns:auto 70px 1fr 44px;gap:10px;align-items:center;font:700 14.5px var(--body)}
.know span{text-align:right;font:800 16px var(--disp)}
.ac.capC{flex-direction:row;align-items:center;gap:14px}
.ac.capC>i{width:46px;height:46px;border-radius:14px;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ac.capC b{display:block;font:700 16px var(--body)}.ac.capC span{font-size:13.5px;color:var(--mute)}
/* send modal */
.msend{width:980px;flex-direction:row;gap:28px;padding:30px}
.sl{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.sl h2{font-size:34px}
.stabs{display:flex;gap:6px}
.stabs button{display:flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);font:600 13.5px var(--body);cursor:pointer}
.stabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cvW{position:relative;border-radius:18px;background:#FFFDF9;border:1.5px dashed var(--line);overflow:hidden}
.cvW canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:none}
.cvW .hint{position:absolute;left:14px;bottom:12px;font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#A39A8E;pointer-events:none}
.cvW.drawn .hint{display:none}
.dtools{display:flex;align-items:center;gap:8px}
.clr{width:34px;height:34px;border-radius:50%;border:3px solid var(--bg);background:var(--c);box-shadow:0 0 0 1.5px var(--line);cursor:pointer}
.clr.on{box-shadow:0 0 0 2.5px var(--ink)}
.dtools .btn{margin-left:auto;width:auto;padding:0 20px}
.sr{width:290px;display:flex;flex-direction:column;gap:12px;padding-top:4px}
.lockP{height:430px;border-radius:34px;background:linear-gradient(160deg,#2B2A3A,#141312);color:#F2ECE2;display:flex;flex-direction:column;align-items:center;padding:30px 18px;gap:6px;border:8px solid #0d0c0b}
.lockP .tm{font:700 56px/1 var(--disp);letter-spacing:-.04em}
.lockP .dt{font-size:13px;opacity:.75;margin-bottom:22px}
.wgP{width:170px;height:170px;border-radius:26px;background:#FFFDF9;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.wgP img{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .4s}
.wgP.got img{opacity:1;animation:pop .5s var(--spring)}
.wgP span{position:absolute;left:0;right:0;bottom:8px;text-align:center;font:600 11px var(--body);color:#6A635A}
.wgP:not(.got)::before{content:"";position:absolute;inset:30px;border:2px dashed #E2D8C8;border-radius:16px}
/* settings */
.setW{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start;max-width:960px}
.setN{display:flex;flex-direction:column;gap:2px}
.setN button{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 12px;border-radius:12px;border:0;background:none;font:600 15px var(--body);color:var(--mute);cursor:pointer;text-align:left}
.setN button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 0 var(--line),inset 0 0 0 1px var(--line)}
.setB{padding:24px;display:flex;flex-direction:column;gap:20px}
.subC{display:flex;flex-direction:column;gap:12px}
.subC .plN{font:800 30px/1 var(--disp);letter-spacing:-.03em}
.subC .st{align-self:flex-start;font:700 13px var(--body);padding:5px 11px;border-radius:999px;background:var(--sunk)}
.subC .st.trial{background:color-mix(in srgb,var(--me) 16%,var(--card));color:var(--me)}
.subC .st.active{background:color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--ok)}
.subC .st.cancelled{background:color-mix(in srgb,var(--red) 14%,var(--card));color:var(--redInk)}
.subC .btn{align-self:flex-start;width:auto;padding:0 22px}
.kv3{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.kv3 div{background:var(--card);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.kv3 span{font-size:12.5px;color:var(--mute)}.kv3 b{font:700 15px var(--body);display:flex;align-items:center;gap:6px}
.invL{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:16px}
.invL div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14.5px}
.emp2{display:flex;align-items:center;gap:8px;margin:0;color:var(--mute);font-size:14.5px}
.tgL{display:flex;flex-direction:column}
.tgL .tgl{border-bottom:1px solid var(--line)}.tgL .tgl:last-child{border-bottom:0}
.prl{display:flex;flex-direction:column;gap:4px}
.prl button{display:flex;align-items:center;gap:10px;min-height:48px;border:0;background:none;font:600 15px var(--body);cursor:pointer;text-align:left;padding:0;border-bottom:1px solid var(--line)}
.prl button.dng{color:var(--redInk);border-bottom:0}
/* sign in */
.sgn{height:100%;display:grid;grid-template-columns:1fr 1fr}
.sgL{position:relative;overflow:hidden;background:#141312;color:#F2ECE2;padding:40px 48px;display:flex;flex-direction:column;justify-content:space-between}
.sgL .wlogo{color:#F2ECE2;position:relative;z-index:2}
.sgL .wedgeL{right:-200px;top:-140px;width:560px;height:460px}
.sgL .lines{font:800 64px/.95 var(--disp);letter-spacing:-.045em;position:relative;z-index:2}
.sgL .lines span{display:block;animation:rise .5s var(--easeS) both}
.sgL .lines span:nth-child(2){animation-delay:.2s;color:#FF6A4F}.sgL .lines span:nth-child(3){animation-delay:.4s}
.strips2{position:absolute;right:48px;top:140px;display:grid;grid-template-columns:110px 110px;gap:10px;transform:rotate(6deg);z-index:1}
.strips2 img{width:110px;height:84px;object-fit:cover;filter:grayscale(1);border:5px solid #fff;animation:drop .8s var(--spring) both}
.strips2 img:nth-child(2){margin-top:30px;animation-delay:.1s}.strips2 img:nth-child(3){animation-delay:.2s}.strips2 img:nth-child(4){margin-top:30px;animation-delay:.3s}
.sgR{display:flex;align-items:center;justify-content:center;padding:40px}
.sgBox{width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px}
.sgBox .fh{margin-bottom:10px}
.sgBox .btn .g{font:800 18px var(--body);color:#4285F4}
.qrB{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:14px;border:0;background:var(--sunk);font:600 15px var(--body);cursor:pointer}
.link.in{min-height:0;padding:0;font-size:inherit;color:var(--ink)}
.qrW{display:flex;gap:24px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px}
.qrW ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:12px;font:600 15px/1.35 var(--body)}
.abar{display:none}
@container site (max-width:760px){
 .wa{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
 .aside{display:none}
 .abar{display:grid;grid-template-columns:repeat(5,1fr);background:var(--card);border-top:1px solid var(--line);padding:6px 4px 14px}
 .abar button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;font:600 11px var(--body);color:var(--mute);min-height:50px;cursor:pointer}
 .abar button.on{color:var(--ink)}
 .asc{padding:0 16px 24px}
 .atop{min-height:68px}.atop h1{font-size:26px}.atop .ar .av,.atop .ar .ib3{display:none}
 .agrid{grid-template-columns:1fr!important;gap:14px}.agrid .col{gap:14px}
 .aq h2{font-size:30px}.aq .aqb{padding:16px 18px 20px}.aq .btn{width:100%}
 .aqsL{grid-template-columns:1fr}
 .aev{grid-template-columns:56px 1fr;row-gap:2px}.aev .tm{grid-row:2}.aev .sb2{display:none}
 .a2{gap:14px}
 .weekG{grid-template-columns:1fr}.dc{min-height:0;border-right:0;border-bottom:1px solid var(--line);flex-direction:row;flex-wrap:wrap;align-items:flex-start}.dh{flex-direction:row;border:0;width:56px;padding:0}.dc .wev{flex:1;min-width:140px}
 .nlp{flex-wrap:wrap}.nlp input{flex:1 1 70%}.nlp .chipP{order:3}
 .scW .scene3{height:300px}.scW .scene3 .houseW{width:320px}
 .road2{grid-template-columns:repeat(4,1fr)}
 .bigMap{height:380px}
 .mwall{grid-auto-rows:110px}
 .modal{left:12px;right:12px;width:auto;transform:translateY(-50%);padding:22px 18px;animation-name:mInM}
 .mques h2{font-size:28px}.qo{min-height:130px}.fcd{width:140px;height:170px}
 .msend{flex-direction:column;max-height:92%;overflow:auto}.sr{display:none}.dtools{flex-wrap:wrap}.dtools .btn{width:100%}
 .setW{grid-template-columns:1fr}.setN{flex-direction:row;overflow-x:auto}.setN button{white-space:nowrap}
 .kv3{grid-template-columns:1fr}
 .sgL .wedgeL{display:none}
 .nlp .btn{order:4}
 .mwall{grid-template-columns:1fr 1fr;grid-auto-rows:120px}.mwall figure.w2{grid-column:span 2;grid-row:auto}.mwall figure:nth-child(4){grid-column:auto}
 .sgn{grid-template-columns:1fr;grid-template-rows:auto 1fr}.sgL{padding:24px 20px;min-height:220px}.sgL .lines{font-size:38px;margin-top:24px}.strips2{display:none}
 .sgR{padding:24px 20px;align-items:flex-start}
 .qrW{flex-direction:column}
}

@keyframes mInM{from{opacity:0;transform:translateY(-46%)}}

.site .streak{white-space:nowrap}


html,body{background:#F2ECE2;margin:0}
body::before{display:none}
#site{position:static;overflow:visible;flex:none;isolation:auto;border-radius:0;background:var(--bg)}
#fv{position:static;overflow:visible;inset:auto}
.site a{text-decoration:none}
.site a.store,.site a.lcta,.site a.lgB,.site a.btn{display:inline-flex;align-items:center}
.site a.btn{justify-content:center}
.site .lgB{background:none;border:0;padding:0;color:inherit}
.lmD{position:relative}.lmD summary{list-style:none}.lmD summary::-webkit-details-marker{display:none}
.lmP{position:absolute;right:0;top:52px;min-width:230px;background:var(--card);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--shadow);border-radius:16px;padding:8px;display:flex;flex-direction:column;z-index:40}
.lmP a{padding:12px 12px;border-radius:10px;font:600 16px var(--body);color:var(--ink)}
.lmP a:hover{background:var(--sunk)}
.ftg{grid-template-columns:1.4fr repeat(4,1fr)}
.ftg a{padding:6px 0;font:500 15px var(--body);color:var(--ink)}
.lnav .lk a{display:inline-flex;align-items:center}
@container site (max-width:760px){.site a.lcta{display:none}}
.langs{display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:flex-end;max-width:760px}.langs a{color:var(--mute)}.langs a:hover{color:var(--ink)}.langs b{color:var(--ink);font-weight:600}
.fbot{display:flex;justify-content:space-between;gap:12px;margin-top:36px;font-size:13.5px;color:var(--mute)}