:root{--paper:#FFFFFF;--sheet:#F2F2F7;--ink:#1C1C1E;--graphite:#48484A;--yellow:#FFCC00;--pen:#D70015;--shell:#8E8E93;--ease:cubic-bezier(0.16,1,0.3,1);}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;overflow-x:clip}body{min-height:100dvh;display:flex;flex-direction:column;background:var(--sheet);color:var(--ink);font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;line-height:1.45;overflow-x:clip;font-variant-numeric:tabular-nums;}::selection{background:var(--yellow);color:var(--ink)}.sheet{flex:1;display:grid;grid-template-columns:1fr;grid-template-areas:"spec" "copy"}.spec{grid-area:spec;background:var(--paper);position:relative;padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 14px max(18px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:10px;min-width:0;}.spec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:clamp(0.72rem,0.68rem + 0.2vw,0.82rem);color:var(--graphite);border-bottom:1px solid #D1D1D6;padding-bottom:8px}.spec-head strong{color:var(--ink);font-weight:700;letter-spacing:0.01em}.stage{flex:1;display:grid;place-items:center;position:relative;min-height:0;padding:clamp(34px,5vw,56px) 0 clamp(10px,3vw,36px)}.batt{position:relative;width:min(78%,560px);aspect-ratio:2.15 / 1;border:clamp(5px,1.1vw,11px) solid var(--shell);border-radius:clamp(20px,4.4vw,46px);padding:clamp(5px,1vw,10px);background:var(--paper);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;display:block;color:inherit;font:inherit;text-align:left;}.batt::after{content:"";position:absolute;right:calc(-1 * clamp(14px,2.6vw,26px));top:33%;width:clamp(7px,1.3vw,13px);height:34%;background:var(--shell);border-radius:0 999px 999px 0;}.batt:focus-visible{outline:3px solid var(--ink);outline-offset:6px}.track{position:relative;display:block;width:84%;height:100%;border-radius:clamp(12px,3vw,32px);overflow:hidden}.fill{position:absolute;inset:0;display:block;border-radius:inherit}.fill.next{clip-path:inset(0 100% 0 0);transition:clip-path 0.7s var(--ease)}.fill.next.on{clip-path:inset(0 0 0 0)}.halo{position:absolute;inset:8% 12%;border-radius:40px;filter:blur(30px);opacity:0;transition:opacity 0.6s var(--ease);z-index:0;pointer-events:none}.halo.on{opacity:0.55;animation:breathe 2.4s var(--ease) infinite alternate}@keyframes breathe{from{opacity:0.3}to{opacity:0.65}}.batt-wrap{position:relative;width:100%;display:grid;place-items:center}.batt{z-index:1}.note{position:absolute;z-index:2;font-family:"Kalam",cursive;font-weight:400;color:var(--pen);font-size:clamp(1.15rem,1rem + 0.8vw,1.6rem);line-height:1.1;transform:rotate(-4deg);right:0;bottom:calc(100% + 2px);pointer-events:none;display:flex;align-items:flex-end;gap:4px;}.note svg{width:clamp(30px,4vw,48px);height:auto;margin-bottom:-14px}.caption{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline;border-top:1px solid #D1D1D6;padding-top:8px}.caption .num{font-size:clamp(0.72rem,0.68rem + 0.2vw,0.82rem);color:var(--graphite)}.caption .name{font-weight:700;font-size:clamp(1rem,0.9rem + 0.5vw,1.3rem)}.caption .hex{grid-column:1 / -1;font-size:clamp(0.72rem,0.68rem + 0.2vw,0.82rem);color:var(--graphite)}.copy{grid-area:copy;background:var(--yellow);color:var(--ink);padding:18px max(18px,env(safe-area-inset-right)) 22px max(18px,env(safe-area-inset-left));display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0;}.logo{width:56px;height:56px;display:block;border-radius:22%}h1{font-weight:700;font-size:clamp(1.8rem,1.2rem + 3vw,3.35rem);line-height:1.02;letter-spacing:-0.025em;max-width:13ch;text-wrap:balance}h1 .brand{display:block}.lede{font-size:clamp(0.95rem,0.88rem + 0.35vw,1.15rem);max-width:40ch}.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;align-self:flex-start;min-height:52px;padding:0 26px;border-radius:999px;background:var(--ink);color:#FFFFFF;font-weight:700;font-size:clamp(1rem,0.95rem + 0.3vw,1.15rem);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform 0.3s var(--ease);}.cta svg{width:18px;height:18px}.cta:focus-visible{outline:3px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 3px var(--yellow)}.cta:active{transform:scale(0.97)}@media (hover: hover){.cta:hover{transform:translateY(-2px)}}.worry{font-size:clamp(0.82rem,0.78rem + 0.2vw,0.95rem);color:#2C2C2E;max-width:42ch;text-underline-offset:3px}.bar{display:grid;grid-template-columns:repeat(11,1fr);min-height:22px}.bar>span{display:block;padding:6px 8px;font-size:0.72rem;line-height:1.25;color:#000000}.bar span em{font-style:normal;display:block;font-weight:700}.bar span i{font-style:normal;display:block}.bar .lbl{display:none}footer{background:var(--ink);color:#E5E5EA;font-size:0.8rem;padding:12px max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}footer strong{font-weight:700;color:#FFFFFF}@media (min-width: 640px){.bar .lbl{display:block}.bar{min-height:64px}}@media (min-width: 900px){.sheet{grid-template-columns:1.3fr 1fr;grid-template-areas:"spec copy"}.spec{padding:28px 40px 22px}.copy{padding:40px clamp(32px,4vw,64px);gap:18px}.logo{width:clamp(96px,12.5vw,160px);height:clamp(96px,12.5vw,160px)}.note{right:2%}}@media (max-width: 380px){h1{font-size:1.72rem}}@media (prefers-reduced-motion: reduce){.fill.next,.halo,.cta{transition:none}.halo.on{animation:none;opacity:0.5}}