:root{--mist:#EEE9F7;--plum:#2A1B3D;--ink:#1B1424;--card:#FFFFFF;--haze:#DCD3EC;--muted:#5B5170;--wa:#25D366;--wa-deep:#0B6B3A;--r:22px;}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{font-family:"M PLUS Rounded 1c",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--mist) 0,var(--mist) 56%,var(--plum) 56%,var(--plum) 100%);min-height:100dvh;display:flex;flex-direction:column;overflow-x:clip;}main{flex:1;width:100%;max-width:480px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 14px) calc(env(safe-area-inset-right) + 16px) 12px calc(env(safe-area-inset-left) + 16px);display:flex;flex-direction:column;}.top{display:flex;align-items:center;gap:14px}.top img{width:clamp(52px,14vw,96px);height:auto;aspect-ratio:1;border-radius:18px;flex:none}h1{font-weight:800;font-size:clamp(1.6rem,1.1rem + 2.4vw,2.4rem);line-height:1.05;letter-spacing:-0.01em}h1 .soft{display:block;color:var(--muted);font-weight:700}.lead{margin-top:10px;font-size:clamp(0.92rem,0.86rem + 0.3vw,1.05rem);line-height:1.45;color:var(--muted)}.lead strong{color:var(--ink);font-weight:700}.tool{margin-top:14px;background:var(--card);border-radius:var(--r);box-shadow:0 18px 40px -22px rgba(42,27,61,.55),0 2px 0 rgba(42,27,61,.06);overflow:hidden}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px;background:var(--haze)}.tab{-webkit-tap-highlight-color:transparent;appearance:none;border:0;cursor:pointer;min-height:44px;border-radius:16px;background:transparent;color:var(--plum);font-family:inherit;font-weight:700;font-size:clamp(0.78rem,0.74rem + 0.2vw,0.88rem);line-height:1.1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;transition:background-color .15s ease,color .15s ease;}.tab svg{width:18px;height:18px}.tab[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 2px 6px rgba(42,27,61,.12)}.tab[aria-selected="true"] .dot{opacity:1}.tab .dot{width:6px;height:6px;border-radius:50%;background:var(--wa);opacity:0;transition:opacity .15s ease}.tab:focus-visible{outline:3px solid var(--plum);outline-offset:-3px}@media (hover: hover){.tab:hover{background:rgba(255,255,255,.55)}.tab[aria-selected="true"]:hover{background:var(--card)}}.stage{position:relative;padding:12px 12px 14px}.panel.in{animation:fadein .22s ease both}@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.frame{border-radius:16px;background:#F6F3FB;border:1px solid var(--haze);overflow:hidden;height:clamp(186px,32dvh,280px);display:flex;flex-direction:column}.bar{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--plum);color:#fff}.av{width:28px;height:28px;border-radius:50%;background:linear-gradient(140deg,#8F7BB5,#5A4680);flex:none}.who{display:flex;flex-direction:column;line-height:1.15}.who .nm{font-weight:700;font-size:.86rem}.who .st{font-size:.72rem;color:#D9CFEA}.chat{flex:1;padding:10px 11px;display:flex;flex-direction:column;gap:7px;justify-content:flex-end}.b{max-width:76%;border-radius:14px;padding:8px 10px;display:flex;flex-direction:column;gap:5px}.b.in{align-self:flex-start;background:#fff;border:1px solid var(--haze);border-bottom-left-radius:4px}.b.out{align-self:flex-end;background:#E7DFF5;border-bottom-right-radius:4px}.ln{display:block;height:7px;border-radius:4px;background:var(--haze)}.out .ln{background:#CFC2E6}.ln.w9{width:150px}.ln.w7{width:118px}.ln.w5{width:84px}.ln.w4{width:64px}.meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:.7rem;color:var(--muted)}.kept{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;color:var(--wa-deep);background:#DDF7E8;border-radius:999px;padding:3px 9px}.gone{align-self:flex-start;font-size:.74rem;color:var(--muted);padding-left:2px}.ticks{width:18px;height:11px}.status{flex:1;position:relative;background:linear-gradient(160deg,#4B3870,#2A1B3D);display:flex;flex-direction:column;padding:9px 11px}.prog{display:flex;gap:4px}.prog span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}.prog span.on{background:#fff}.shot{flex:1;margin-top:10px;border-radius:12px;background:radial-gradient(circle at 30% 35%,rgba(255,255,255,.28),transparent 45%),radial-gradient(circle at 75% 70%,rgba(143,123,181,.6),transparent 55%);display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:9px}.pill{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;border-radius:999px;padding:4px 10px}.pill.light{background:rgba(255,255,255,.94);color:var(--plum)}.pill.save{background:#DDF7E8;color:var(--wa-deep)}.cap{margin-top:10px;font-size:.86rem;line-height:1.4;color:var(--ink)}.cap strong{font-weight:800}.cta{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:11px 11px 11px 24px;border-radius:999px;background:#fff;color:var(--plum);text-decoration:none;font-weight:800;font-size:clamp(1rem,0.95rem + 0.3vw,1.12rem);-webkit-tap-highlight-color:transparent;transition:transform .15s ease;}.cta .ic{width:34px;height:34px;border-radius:50%;background:var(--wa);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;flex:none}.cta svg{width:18px;height:18px}.cta:active{transform:scale(.98)}.cta:focus-visible{outline:3px solid var(--wa);outline-offset:3px}@media (hover: hover){.cta:hover{transform:translateY(-1px)}}.need{margin-top:9px;text-align:center;font-size:.82rem;line-height:1.4;color:#D9CFEA}footer{text-align:center;padding:10px 16px calc(env(safe-area-inset-bottom) + 14px);font-size:.78rem;color:#B9ABD3}@media (min-width:900px){body{background:linear-gradient(180deg,var(--mist) 0,var(--mist) 60%,var(--plum) 60%,var(--plum) 100%)}main{padding-top:40px;max-width:500px}.top img{width:96px}}@media (prefers-reduced-motion: reduce){.panel.in{animation:none}.cta,.tab,.tab .dot{transition:none}}