:root{--night:#160E2B;--dusk:#2E1E5C;--rose:#FF4FA3;--amber:#FFB547;--green:#34C759;--mist:#CFC6EE;--gray:#8E8E93;--white:#FFFFFF;--g:linear-gradient(90deg,#FF4FA3,#FFB547);}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{font-family:"Zen Maru Gothic",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;font-weight:500;color:var(--white);background:var(--night);min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;}.field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background: radial-gradient(60% 40% at 15% 10%,rgba(255,79,163,.22),transparent 70%),radial-gradient(55% 45% at 90% 85%,rgba(255,181,71,.16),transparent 70%),linear-gradient(180deg,var(--dusk),var(--night) 70%);}.app{position:relative;z-index:1;width:100%;max-width:440px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 14px) 16px 0;}.brand{display:flex;align-items:center;gap:10px;height:48px}.brand img{width:44px;height:44px;border-radius:12px;background:var(--white);padding:3px;display:block}.brand span{font-weight:700;font-size:clamp(1.05rem,1rem + 0.3vw,1.2rem);letter-spacing:.01em}.stage{position:relative;margin-top:12px;height:clamp(258px,43dvh,330px);border-radius:30px;overflow:hidden;background: radial-gradient(70% 60% at 30% 70%,rgba(139,92,246,.55),transparent 70%),radial-gradient(60% 50% at 80% 30%,rgba(255,79,163,.35),transparent 70%),#241848;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 18px 40px rgba(8,4,20,.45);isolation:isolate;}.status{position:absolute;left:0;right:0;top:0;height:36px;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-weight:700;font-size:.9rem;letter-spacing:.02em;}.sbat{position:relative;width:27px;height:13px;border:1.5px solid rgba(255,255,255,.75);border-radius:4px;padding:1.5px}.sbat::after{content:"";position:absolute;right:-4px;top:3.5px;width:2px;height:4px;border-radius:0 2px 2px 0;background:rgba(255,255,255,.75)}.sbat i{position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:calc(87% - 3px);border-radius:2px;transform-origin:left center}.sbat .s-def{background:var(--white)}.sbat .s-col{background:var(--g);opacity:0}.before{position:absolute;inset:36px 0 0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;}.before p{color:var(--mist);font-size:.85rem}.bat{position:relative;width:min(58%,190px);aspect-ratio:2.35/1;border:3px solid currentColor;border-radius:20px;padding:6px}.bat::after{content:"";position:absolute;right:-11px;top:32%;width:6px;height:36%;border-radius:0 5px 5px 0;background:currentColor}.bat .fill{position:absolute;left:6px;top:6px;bottom:6px;right:6px;border-radius:13px;transform-origin:left center;overflow:hidden}.before .bat{color:rgba(255,255,255,.55)}.before .bat .fill{background:var(--gray);transform:scaleX(.87)}.shade{position:absolute;left:0;right:0;top:0;height:100%;z-index:2;background:rgba(22,14,43,.62);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border-radius:0 0 30px 30px;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 30px rgba(8,4,20,.35);touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:contain;cursor:grab;-webkit-tap-highlight-color:transparent;will-change:transform;transform:translate3d(0,-74%,0);outline:none;}.shade:focus-visible{box-shadow:0 0 0 3px var(--amber) inset}.shade.dragging{cursor:grabbing}.shade-in{position:absolute;inset:36px 0 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;}.shade .bat{color:var(--white)}.shade .bat .fill{background:transparent}.shade .bat .paint{position:absolute;inset:0;background:var(--g)}.shade .bat .sheen{position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);opacity:0}.live .bat .sheen{opacity:1;animation:sheen 1.8s cubic-bezier(.3,0,.2,1) infinite}@keyframes sheen{from{transform:translateX(0)}to{transform:translateX(360%)}}.readout{display:flex;align-items:center;gap:8px;font-weight:900;font-size:clamp(1.3rem,1.1rem + 1vw,1.6rem);font-variant-numeric:tabular-nums}.readout svg{width:16px;height:22px;fill:var(--green)}.readout em{font-style:normal;font-weight:500;font-size:.85rem;color:var(--mist)}.swatches{display:flex;gap:6px}.sw{width:44px;height:44px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;}.sw span{width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.18);transition:transform .2s cubic-bezier(.2,.8,.2,1)}.sw[aria-pressed="true"] span{box-shadow:0 0 0 2px var(--night),0 0 0 4px var(--white)}.sw:active span{transform:scale(.88)}.sw:focus-visible{outline:2px solid var(--amber);outline-offset:1px}.grab{position:absolute;left:0;right:0;bottom:0;height:26px;display:grid;place-items:center}.grab span{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.55)}h1{margin-top:22px;font-weight:900;font-size:clamp(1.55rem,1.2rem + 1.6vw,2rem);line-height:1.18;letter-spacing:-.01em;text-wrap:balance}h1 .wm{display:block;font-weight:700;font-size:.55em;letter-spacing:.04em;color:var(--amber);margin-bottom:6px}.lede{margin-top:10px;color:var(--mist);font-size:clamp(.98rem,.94rem + 0.2vw,1.06rem);line-height:1.5}.actions{margin-top:auto;padding:18px 0 calc(env(safe-area-inset-bottom) + 14px);}.cta{display:flex;align-items:center;justify-content:center;height:56px;border-radius:16px;background:var(--green);color:#082411;font-weight:700;font-size:1.1rem;text-decoration:none;box-shadow:0 6px 16px rgba(6,3,16,.45);transition:transform .16s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent;}.cta:active{transform:scale(.97)}.cta:focus-visible{outline:3px solid var(--white);outline-offset:3px}.under{margin-top:10px;text-align:center;color:var(--mist);font-size:.86rem;line-height:1.45}footer{padding:6px 0 calc(env(safe-area-inset-bottom) + 12px);text-align:center;color:var(--mist);font-size:.78rem;opacity:.85}@media (hover: hover) and (pointer: fine){.cta:hover{transform:translateY(-1px)}.sw:hover span{transform:scale(1.08)}}@media (min-width: 960px){.app{min-height:auto;margin:24px auto;min-height:calc(100dvh - 48px);background:rgba(22,14,43,.7);border-radius:36px;padding:22px 24px 0;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 80px rgba(8,4,20,.5)}.brand{position:fixed;left:48px;top:48px;flex-direction:column;align-items:flex-start;height:auto;gap:14px}.brand img{width:128px;height:128px;border-radius:28px;padding:8px}.brand span{font-size:1.4rem}.stage{margin-top:4px}}@media (prefers-reduced-motion: reduce){.live .bat .sheen{animation:none;opacity:.35;transform:translateX(120%)}.cta,.sw span{transition:none}}html,body{max-width:100%;overflow-x:clip}