:root{--cyan:#24F5EE;--navy:#1B1341;--bg:#FFF8F5;--sc:#FCEAE2;--sch:#F6DED3;--on:#261A14;--onv:#53443D;--pri:#9C4320;--pc:#FFDBCD;--opc:#380D00;--ol:#85736B;--olv:#D8C2B9;}html[data-side="without"]{--bg:#F4F2F6;--sc:#E8E5EC;--sch:#DEDAE3;--on:#1C1B1F;--onv:#49454F;--pri:#605D66;--pc:#E2DEE8;--opc:#1D1A22;--ol:#79747E;--olv:#C9C4CF;}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;background:var(--bg)}body{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--on);font-family:"Figtree",system-ui,sans-serif;font-weight:400;line-height:1.45;overflow-x:clip}.app{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));display:grid;gap:12px;grid-template-areas:"top" "copy" "stage" "actions";align-content:start}.top{grid-area:top;display:flex;align-items:center;gap:12px}.top img{width:48px;height:48px;border-radius:14px;display:block}.wm{font-family:"Bagel Fat One",system-ui,sans-serif;font-size:clamp(1.1rem,1rem + 0.5vw,1.4rem);color:var(--on)}.copy{grid-area:copy}h1{font-family:"Bagel Fat One",system-ui,sans-serif;font-weight:400;font-size:clamp(1.6rem,1.1rem + 2.3vw,3.3rem);line-height:1.04;letter-spacing:-0.01em;color:var(--on)}h1 .acc{color:var(--pri)}.sub{margin-top:8px;font-size:clamp(0.92rem,0.86rem + 0.3vw,1.12rem);color:var(--onv);max-width:34em}.stage{grid-area:stage;display:grid}.card{grid-area:1/1;background:var(--sc);border-radius:28px;padding:14px 14px 10px;display:flex;flex-direction:column;gap:8px}.card[hidden]{display:none}.head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}.ovl{font-size:0.82rem;font-weight:600;color:var(--onv)}.chip{font-size:0.75rem;font-weight:600;padding:4px 10px;border-radius:8px;border:1px solid var(--ol);color:var(--onv)}.now{display:flex;align-items:center;gap:12px;background:var(--pc);color:var(--opc);border-radius:20px;padding:8px 12px;min-height:56px}.av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--sch);color:var(--on);font-weight:600;font-size:0.88rem}.now .av{width:40px;height:40px;background:var(--pri);color:#fff;font-size:1rem}.who{display:flex;flex-direction:column;min-width:0;flex:1}.lbl{font-size:0.75rem;font-weight:600;letter-spacing:0.02em;color:inherit;opacity:0.85}.nm{font-weight:600;font-size:0.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.eq{display:flex;align-items:flex-end;gap:3px;height:22px;flex:none}.eq i{display:block;width:4px;height:22px;border-radius:2px;background:var(--pri);transform-origin:bottom;transform:scaleY(0.4)}html[data-side="with"] .eq i{animation:eq 900ms ease-in-out infinite alternate}.eq i:nth-child(2){animation-delay:-300ms}.eq i:nth-child(3){animation-delay:-600ms}.eq i:nth-child(4){animation-delay:-150ms}@keyframes eq{from{transform:scaleY(0.25)}to{transform:scaleY(1)}}.flat i{transform:scaleY(0.12)}.next{color:var(--onv);padding:2px 4px 0}.rows{list-style:none;display:flex;flex-direction:column}.rows li{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 4px;border-top:1px solid var(--olv)}.rows li:first-child{border-top:0}.rk{width:14px;font-size:0.8rem;font-weight:600;color:var(--onv);text-align:right}.rows .nm{flex:1;font-weight:400;font-size:0.95rem}.emo{font-size:1.05rem;line-height:1}.bar{flex:1;height:10px;border-radius:5px;background:var(--sch);max-width:60%}.q{background:transparent;border:1.5px solid var(--ol);color:var(--onv)}.now .q{background:transparent;color:var(--opc);border-color:var(--onv)}.actions{grid-area:actions;display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;padding-bottom:4px}.seg{position:relative;flex:1 1 230px;display:grid;grid-template-columns:1fr 1fr;height:48px;border:1px solid var(--ol);border-radius:24px;overflow:hidden}.knob{position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--pc);transform:translateX(100%);transition:transform 280ms cubic-bezier(.2,0,0,1)}html[data-side="without"] .knob{transform:translateX(0)}.knob.nudge{animation:nudge 700ms 500ms ease-in-out 1}@keyframes nudge{0%,100%{transform:translateX(100%)}40%{transform:translateX(calc(100% - 8px))}}.seg button{position:relative;z-index:1;appearance:none;background:transparent;border:0;font:600 0.92rem/1 "Figtree",system-ui,sans-serif;color:var(--on);cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px}.seg button+button{border-left:1px solid var(--ol)}.seg button[aria-pressed="true"]{color:var(--opc)}.seg button[aria-pressed="true"]::before{content:"";width:10px;height:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg)}.seg button:focus-visible{outline:3px solid var(--navy);outline-offset:-4px;border-radius:22px}.go{flex:1 1 230px;display:flex;flex-direction:column;gap:6px}.cta{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:26px;background:var(--cyan);color:var(--navy);font-weight:600;font-size:1.02rem;text-decoration:none;-webkit-tap-highlight-color:transparent;box-shadow:0 1px 2px rgba(27,19,65,.25),0 2px 6px rgba(27,19,65,.12)}.cta:focus-visible{outline:3px solid var(--navy);outline-offset:3px}@media (hover: hover){.cta:hover{box-shadow:0 2px 4px rgba(27,19,65,.3),0 6px 14px rgba(27,19,65,.16)}.seg button:hover{background:rgba(0,0,0,.04)}}.under{font-size:0.82rem;color:var(--onv);text-align:center}footer{padding:6px 16px max(10px,env(safe-area-inset-bottom));text-align:center;font-size:0.8rem;color:var(--onv)}.stage.fade{opacity:0;transition:opacity 160ms ease}.stage{transition:opacity 160ms ease}::view-transition-old(root),::view-transition-new(root){animation-duration:320ms}@media (min-width:860px){.app{grid-template-columns:1.05fr 1fr;grid-template-areas:"top stage" "copy stage" "actions stage";column-gap:56px;row-gap:22px;padding-top:40px;align-content:center;align-items:start}.top img{width:112px;height:112px;border-radius:28px}.stage{align-self:center}.card{padding:20px 20px 14px;gap:10px}.rows li{min-height:48px}.sub{margin-top:14px}}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}::view-transition-old(root),::view-transition-new(root){animation:none !important}}