*,*::before,*::after{box-sizing:border-box}html{--green:#1ED760;--black:#121212;--white:#FFFFFF;--charcoal:#2A2A2A;--ash:#B3B3B3;--slate:#586650;--mint:#D2F7DF;--bg:var(--green);--ink:var(--black);--soft:var(--black);--line:var(--black);--trk:var(--black);--knob:var(--white);--kx:32px;background-color:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;}html[data-side="without"]{--bg:var(--black);--ink:var(--white);--soft:var(--ash);--line:var(--charcoal);--trk:var(--charcoal);--knob:var(--ash);--kx:0px;}body{margin:0;font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;line-height:1.45;overflow-x:hidden}[hidden]{display:none !important}.page{min-height:100dvh;display:grid;grid-template-rows:auto auto auto 1fr auto auto;grid-template-areas:"brand" "head" "sup" "cp" "act" "foot";gap:clamp(0.6rem,0.3rem + 1.4vh,1.1rem);padding:max(0.9rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(0.7rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));max-width:72rem;margin:0 auto;transition:opacity .16s linear;}.brand{grid-area:brand;display:flex;align-items:center;min-height:clamp(3.5rem,2.4rem + 5vw,7rem)}.brand img{display:block;width:clamp(3.5rem,2.4rem + 5vw,7rem);height:auto;aspect-ratio:1;border-radius:24%}h1{grid-area:head;margin:0;font-family:"Bagel Fat One","Arial Black",system-ui,sans-serif;font-weight:400;font-size:clamp(1.75rem,1.1rem + 3.1vw,3.6rem);line-height:1.04;letter-spacing:0;text-wrap:balance;max-width:16ch;}.sup{grid-area:sup;margin:0;color:var(--soft);font-size:clamp(0.95rem,0.88rem + 0.35vw,1.2rem);max-width:34ch}.cp{grid-area:cp;display:grid;align-items:center;min-height:12.5rem}.panel{display:grid;grid-template-columns:clamp(8.25rem,38vw,15rem) 1fr;gap:clamp(0.9rem,0.4rem + 2vw,2.2rem);align-items:center}.panel svg{display:block;width:100%;height:auto}.mode{margin:0;font-weight:600;font-size:clamp(0.75rem,0.7rem + 0.2vw,0.9rem);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}.state{margin:.15rem 0 .4rem;font-family:"Bagel Fat One","Arial Black",system-ui,sans-serif;font-size:clamp(1.45rem,1.1rem + 1.6vw,2.5rem);line-height:1.05}.note{margin:0;color:var(--soft);font-size:clamp(0.86rem,0.8rem + 0.3vw,1.05rem);max-width:30ch}.bar{transform-box:fill-box;transform-origin:50% 100%;animation:beat 1.1s ease-in-out infinite alternate}.bar:nth-child(2n){animation-duration:.8s;animation-delay:-.3s}.bar:nth-child(3n){animation-duration:1.4s;animation-delay:-.6s}@keyframes beat{from{transform:scaleY(.45)}to{transform:scaleY(1)}}.act{grid-area:act;display:flex;align-items:center;gap:.75rem}.cta{flex:1 1 auto;display:flex;align-items:center;justify-content:center;text-align:center;min-height:3.6rem;padding:.6rem 1.1rem;border-radius:999px;background:var(--slate);color:var(--white);text-decoration:none;font-weight:600;font-size:clamp(1rem,0.94rem + 0.3vw,1.2rem);line-height:1.15;border:2px solid var(--slate);-webkit-tap-highlight-color:transparent;}html[data-side="without"] .cta{border-color:var(--ash)}.cta:focus-visible,.sw:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.cta:active{transform:scale(.98)}.sw{flex:0 0 auto;display:grid;justify-items:center;gap:.2rem;padding:0;margin:0;border:0;background:none;color:var(--ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}.trk{display:block;width:80px;height:48px;border-radius:999px;background:var(--trk);padding:5px;border:0}.knob{display:block;width:38px;height:38px;border-radius:50%;background:var(--knob);transform:translateX(var(--kx));transition:transform .22s ease-out}.sw:not(.used) .knob{animation:nudge .7s ease-in-out 1.1s 1 both}@keyframes nudge{0%,100%{transform:translateX(32px)}45%{transform:translateX(24px)}}.lbl{display:flex;gap:.45rem;font-size:.75rem;line-height:1.2}.lbl span{color:var(--soft)}html[data-side="with"] .l-on,html[data-side="without"] .l-off{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}footer{grid-area:foot;font-size:.75rem;color:var(--soft);margin:0}::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}@media (hover: hover){.cta:hover{background:var(--black);border-color:var(--black)}html[data-side="without"] .cta:hover{background:var(--charcoal)}}@media (min-width:900px){.page{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto auto auto auto 1fr auto;grid-template-areas:"brand cp" "head cp" "sup cp" "act cp" ". cp" "foot foot";column-gap:clamp(2rem,5vw,5rem);row-gap:1.3rem;padding-top:2.2rem;padding-bottom:1.2rem;}.act{max-width:30rem;margin-top:.6rem}.cp{align-self:center}}@media (max-height:640px) and (max-width:899px){.cp{min-height:10rem}.panel{grid-template-columns:5.6rem 1fr}}@media (prefers-reduced-motion: reduce){.bar,.sw:not(.used) .knob{animation:none}.knob,.page{transition:none}::view-transition-old(root),::view-transition-new(root){animation:none}}html,body{max-width:100%;overflow-x:clip}