/* The home page (round 5, Fabian 2026-11-14): calm night look, the login's honey wall with Bizzy flying
   behind the text (js/hw.js), KI-Check and the app's automatic rings in the hero, the wardrobe (js/home.js).
   Loaded on the home page only, on top of site.css. */
.calm.home{background:radial-gradient(1000px 600px at 80% -10%,rgba(106,91,255,.16),transparent 60%),var(--ink)}
.calm em{font-style:italic;color:#c9c3ff}
.calm .phone{box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 0 0 1px rgba(169,156,255,.18)}
.calm .store.play{box-shadow:none}
.calm .eyebrow{color:var(--mut);letter-spacing:.18em}
.facts{margin-top:18px;color:var(--faint);font-size:15px}
.forms2{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;text-align:center}
.forms2 .bz{width:100%;aspect-ratio:1}
.forms2 b{display:block;font-size:14px;margin-top:6px}
.forms2 small{color:var(--faint);font-size:12px}
@media (max-width:700px){.forms2{grid-template-columns:repeat(4,1fr)}}

/* The app's night background moving softly. Calm: no wheel, no blinking. */
.v4{background:#0b0e21}
.nightbg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(80% 45% at 50% 104%,rgba(106,91,255,.38),rgba(106,91,255,0) 70%),radial-gradient(60% 35% at 100% 0%,rgba(127,214,255,.12),rgba(127,214,255,0) 70%),linear-gradient(170deg,#12183a 0%,#0c0f22 55%,#0b0e21 100%)}
.nightbg::before,.nightbg::after{content:"";position:absolute;width:80vmax;height:80vmax;border-radius:50%}
.nightbg::before{left:-30vmax;top:-30vmax;background:radial-gradient(circle,rgba(106,91,255,.2),rgba(106,91,255,0) 62%);animation:drift1 40s ease-in-out infinite alternate}
.nightbg::after{right:-35vmax;bottom:-40vmax;background:radial-gradient(circle,rgba(127,214,255,.11),rgba(127,214,255,0) 62%);animation:drift2 52s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(22vmax,14vmax)}}
@keyframes drift2{to{transform:translate(-18vmax,-12vmax)}}
.v4 .sky{position:absolute;inset:0;height:auto;z-index:0}
.v4 .sky i{animation-duration:5s}
.v4 .top{background:color-mix(in srgb,#0b0e21 70%,transparent)}

/* Hero: the login's honey wall behind everything with Bizzy flying in it (js/hw.js),
   the text and the two demos (KI-Check left, Automatisch right) in front */
.hero4{position:relative;overflow:hidden;isolation:isolate}
.hero4>.wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:30px 84px;gap:16px}
.hero4 h1{font-size:clamp(38px,5.2vw,62px)}
.hero4 .lead{margin:0 auto}
.hero4 .stores{justify-content:center}
.hero4 .facts{margin:0}
.duo{display:flex;justify-content:center;align-items:flex-start;gap:clamp(48px,9vw,150px);width:100%;margin-top:44px}
/* Narrower screens: a band of free wall between the text and the demos, where Bizzy works */
@media (max-width:1099px){.duo{margin-top:190px;gap:40px}}
@media (max-width:760px){.duo{flex-direction:column;align-items:center;gap:72px}}
.dc{display:flex;flex-direction:column;align-items:center;gap:10px}
#ki{width:min(300px,100%)}
#auto{width:min(370px,100%)}
.dc h2{font-size:clamp(28px,2.6vw,34px);margin:2px 0 0}
.dc .dl{color:var(--mut);margin:0 0 12px;font-size:16px;line-height:1.5}

/* The wall (classes start with h- so nothing on the page styles them by accident) */
.hw{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(#000 92%,transparent);mask-image:linear-gradient(#000 92%,transparent)}
.h-grid{position:absolute;left:0;top:0;display:block}
.h-cells{position:absolute;inset:0;z-index:1}
.h-cell,.h-glow{position:absolute;width:52px;height:60px}
.h-ci{position:absolute;inset:0}
.h-ci.on{transform-style:preserve-3d}
.h-cf,.h-cb,.h-glow{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.h-cf,.h-cb{position:absolute;inset:0}
.h-ci.on>.h-cf,.h-ci.on>.h-cb{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.h-cf{background:rgba(255,255,255,.045)}
.h-glow{background:rgba(127,214,255,.24);opacity:0}
.h-cb{background:rgba(255,255,255,.95);transform:rotateY(180deg);display:none;align-items:center;justify-content:center}
.h-ci.on>.h-cb{display:flex}
.h-ci.up>.h-cb{display:flex;transform:none}
.h-ci.up>.h-cf{visibility:hidden}
.h-sym{width:26px;height:26px;display:block}
.h-sym svg{width:100%;height:100%;display:block;overflow:visible}
.h-tick{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.h-flash{position:absolute;inset:0;background:#fff;opacity:0}
.h-lo{position:absolute;inset:0;z-index:3}
.h-hi{position:absolute;inset:0;z-index:7}
.h-ring{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2.5px solid}
.h-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%}
.h-xp{position:absolute;font:800 11px var(--body);color:#7FD6FF;white-space:nowrap;transform:translateX(-50%);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.h-t{position:absolute;transform:translate(-50%,-50%);white-space:nowrap}
.h-t svg{display:block}
.h-bee{position:absolute;left:0;top:0;z-index:5;will-change:transform}
.h-bi{position:absolute;inset:0}
.h-bee svg{width:100%;height:100%;display:block;overflow:visible}
.h-bee .h-w{transform-box:view-box}
.h-bee .h-wl{transform-origin:94px 86px;animation:hflapL .085s ease-in-out infinite alternate}
.h-bee .h-wr{transform-origin:106px 86px;animation:hflapR .085s ease-in-out infinite alternate}
.h-bee.rest .h-w{animation-duration:.55s}
.h-bee.still .h-w{animation:none}
@keyframes hflapL{from{transform:rotate(4deg)}to{transform:rotate(-16deg) scaleY(.78)}}
@keyframes hflapR{from{transform:rotate(-4deg)}to{transform:rotate(16deg) scaleY(.78)}}
.h-bee .pr *{transform-box:view-box}
.h-bee .p-in{animation:hpIn .35s cubic-bezier(.2,1.4,.4,1) both;transform-origin:100px 130px}
@keyframes hpIn{from{transform:translateY(40px) scale(.3);opacity:0}to{transform:none;opacity:1}}
.h-bee .db-bar{animation:hdbBar .7s ease-in-out infinite alternate}
.h-bee .db-arm{transform-origin:100px 124px;animation:hdbArm .7s ease-in-out infinite alternate}
@keyframes hdbBar{from{transform:translateY(0)}to{transform:translateY(30px)}}
@keyframes hdbArm{from{transform:scaleY(1)}to{transform:scaleY(.66)}}
.h-bee .pg{transform-origin:100px 150px;animation:hpage .9s ease-in-out infinite}
@keyframes hpage{0%,35%{transform:scaleX(1)}70%,100%{transform:scaleX(-1)}}
.h-bee .can{transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.h-bee .can.pour{transform:rotate(-30deg)}
.h-bee .broom{animation:hsweep .42s ease-in-out infinite alternate}
@keyframes hsweep{from{transform:rotate(-16deg)}to{transform:rotate(18deg)}}
.h-bee .strum{animation:hstrum .22s ease-in-out infinite alternate}
@keyframes hstrum{from{transform:rotate(-12deg)}to{transform:rotate(14deg)}}
.hw .flashfx{filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px rgba(255,250,200,.9))}
.hw .photo{width:16px;height:19px;background:#fff;border-radius:2px;box-shadow:0 3px 8px rgba(0,0,0,.45);padding:2px 2px 0}
.hw .photo i{display:block;height:11px;background:linear-gradient(160deg,#7FD6FF,#6A5BFF);border-radius:1px}
.hw .drop{width:7px;height:9px;background:#9FE3FF;border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.hw .steps-pill{background:rgba(12,15,34,.9);border:1px solid rgba(127,214,255,.55);color:#7FD6FF;font:800 10.5px var(--body);padding:1px 8px;border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hw .hand-t{font:italic 700 20px var(--display);color:#7FD6FF;white-space:nowrap}
.hw .zz{font:italic 700 19px var(--display);color:#a3b4ff}
.hw .clock{animation:hring .09s linear infinite alternate}
@keyframes hring{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.hw .drip{width:4px;height:7px;border-radius:50%;background:#7FD6FF}
.hw .dust{width:24px;height:16px;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(205,210,230,.9),rgba(150,156,180,.55) 60%,transparent 72%)}
.hw .breath{width:60px;height:60px;border-radius:50%;border:2px solid rgba(127,214,255,.7);box-shadow:0 0 14px rgba(169,156,255,.5)}
.hw .note{font:800 18px/1 var(--body);text-shadow:0 0 6px rgba(0,0,0,.4)}
.hw .steam{width:6px;height:18px;border-left:2.5px solid rgba(255,255,255,.75);border-radius:50%}
/* Off screen the wall stops, so only what you see costs anything. */
.hw.off *{animation-play-state:paused!important}

/* Wardrobe sparks, the claim burst */
.spark{position:absolute;z-index:2;left:50%;top:50%;width:14px;height:14px;margin:-7px;pointer-events:none;background:#ffe9a8;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:spark 1.1s ease-out forwards}
@keyframes spark{0%{transform:rotate(var(--a)) translateY(0) scale(.4);opacity:0}25%{opacity:1}100%{transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(.9);opacity:0}}
.fx-xp{position:absolute;z-index:4;font:800 15px var(--body);color:var(--honey2);pointer-events:none;white-space:nowrap;animation:xpup 1s ease-out forwards}
@keyframes xpup{0%{opacity:0;transform:translate(-50%,6px) scale(.8)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.06)}100%{opacity:0;transform:translate(-50%,-40px)}}
.fx-hx{position:absolute;z-index:4;width:9px;height:10px;margin:-5px 0 0 -4.5px;background:linear-gradient(180deg,var(--honey2),var(--honey));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);pointer-events:none;animation:hxout .7s ease-out forwards}
@keyframes hxout{0%{transform:rotate(var(--a)) translateY(0) scale(.7);opacity:1}100%{transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.25);opacity:0}}

/* Task rows in the KI-Check demo */
.v4 .task{background:var(--panel2);border-left:3px solid var(--c2);position:relative;text-align:left}
.v4 .tick{border-color:var(--c2)}
.v4 .tick svg{opacity:1;stroke-dasharray:24;stroke-dashoffset:24}
.tt{position:relative}
.tt::after{content:"";position:absolute;left:0;top:55%;height:2px;width:0;background:rgba(255,255,255,.5);border-radius:2px;transition:width .35s ease}

/* Sections slide in softly */
.rv{transition:opacity .8s ease,transform .8s ease;transition-delay:var(--dl,0s)}
.js .rv:not(.in){opacity:0;transform:translateY(26px)}

/* The two demos and the wardrobe */
.wd{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:64px}
.wd h2{font-size:clamp(34px,4.4vw,54px);margin:12px 0 16px}
@media (max-width:820px){.wd{grid-template-columns:1fr;gap:32px}}

.pf{position:relative;width:100%;aspect-ratio:auto;height:516px;text-align:left;border-radius:30px;background:linear-gradient(180deg,#151a3d,#10142f);border:1px solid var(--line);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);padding:22px 16px;display:flex;flex-direction:column;gap:10px;transition:opacity .3s}
.pf.fade{opacity:0}
.pf-day{font:700 28px/1 var(--display);margin:4px 0 8px}
.pf .task{padding:11px 10px}
.pf .tick{display:grid;place-items:center;cursor:default}
.pf .cam{flex:none;width:22px;height:22px;border-radius:7px;background:rgba(47,199,138,.16);color:#2fc78a;display:grid;place-items:center}
.pf .cam svg{width:14px;height:14px}
.pf .xp .x2{display:none}
.pf-dim{opacity:.45;border-left-color:var(--line)!important}
.pf-dim .tick{border-color:var(--line)}
.pf-tap{position:absolute;right:8px;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;border:2px solid rgba(255,255,255,.85);opacity:0;pointer-events:none}
.pf.s-tap .pf-tap{animation:ripple .7s ease-out}
@keyframes ripple{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.3)}}
.pf-ask{position:absolute;left:0;right:0;bottom:0;z-index:3;background:#1c2252;border-top:1px solid var(--line);border-radius:22px 22px 0 0;padding:16px 16px 20px;text-align:center;transform:translateY(calc(100% + 60px));transition:transform .45s cubic-bezier(.2,.9,.3,1)}
.pf.s-ask .pf-ask{transform:none}
.pf.s-photo .pf-ask{transform:translateY(calc(100% + 60px))}
.pf-ask .bz{width:58px;height:58px;margin:-44px auto 4px}
.pf-ask p{font-weight:700;margin:0 0 12px}
.pf-btns{display:flex;gap:8px}
.pf-btns span{flex:1;border-radius:12px;padding:10px 6px;font:800 13px var(--body);transition:transform .15s,filter .15s}
.pf-btns .yes{background:#2fc78a;color:#06251a}
.pf-btns .no{border:1.5px solid #ff8ba5;color:#ff8ba5}
.pf.s-yes .yes{transform:scale(.93);filter:brightness(1.15)}
.pf-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:8}
.pf.s-flash .pf-flash{animation:pfflash .45s ease-out}
@keyframes pfflash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.pf-photo{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;transition:opacity .25s}
.pf-photo>svg{position:absolute;inset:0;width:100%;height:100%}
.pf.s-photo .pf-photo{opacity:1}
.pf.s-done .pf-photo{opacity:0;transition:opacity .5s}
.pf-scan{position:absolute;left:0;right:0;top:0;height:80px;background:linear-gradient(180deg,rgba(127,214,255,0),rgba(127,214,255,.28) 70%,rgba(127,214,255,.75));opacity:0;transform:translateY(-80px)}
.pf.s-scan .pf-scan{opacity:1;animation:scan 1.5s ease-in-out infinite}
.pf.s-stamp .pf-scan{display:none}
@keyframes scan{from{transform:translateY(-80px)}to{transform:translateY(440px)}}
.pf-check{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;background:rgba(18,23,53,.9);color:var(--fg);border-radius:18px;padding:6px 14px 6px 6px;font-weight:700;font-size:14px;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s}
.pf.s-scan .pf-check{opacity:1;transform:none}
.pf-check .bz{position:relative;width:50px;height:50px}
.pf-check .m2,.pf-check .l2,.pf.s-stamp .pf-check .m1,.pf.s-stamp .pf-check .l1{display:none}
.pf.s-stamp .pf-check .m2,.pf.s-stamp .pf-check .l2{display:block}
.pf-check .glass{position:absolute;right:-8px;bottom:0;width:26px;height:26px;animation:peek 1.1s ease-in-out infinite}
@keyframes peek{50%{transform:translate(-5px,-4px) rotate(-8deg)}}
.pf-check i{font-style:normal;animation:dot 1.2s infinite}
.pf-check i:nth-child(2){animation-delay:.2s}.pf-check i:nth-child(3){animation-delay:.4s}
@keyframes dot{50%{opacity:.2}}
.pf-stamp{position:absolute;left:50%;top:40%;width:136px;height:136px;margin:-68px 0 0 -68px;border-radius:50%;border:4px solid #2fc78a;background:rgba(10,40,30,.55);color:#2fc78a;display:grid;place-items:center;font:800 15px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:scale(1.8) rotate(-16deg)}
.pf-stamp span{display:flex;flex-direction:column;align-items:center;gap:6px}
.pf-stamp svg{width:40px;height:40px}
.pf.s-stamp .pf-stamp{animation:stamp .45s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes stamp{to{opacity:1;transform:scale(1) rotate(-10deg)}}
.pf-xp{position:absolute;left:50%;top:64%;margin:0;font:800 22px var(--body);color:#5BE3A8;background:rgba(10,30,24,.82);border-radius:999px;padding:6px 14px;opacity:0}
.pf.s-stamp .pf-xp{animation:xpup 1.5s .3s ease-out forwards}
.pf.s-done .pf-task{opacity:.7}
.pf.s-done .pf-task .tick{background:#2fc78a;border-color:#2fc78a}
.pf.s-done .pf-task .tick svg{stroke-dashoffset:0;transition:stroke-dashoffset .3s .15s ease}
.pf.s-done .pf-task .tt::after{width:100%}
.pf.s-done .pf-task .xp{background:rgba(47,199,138,.18);color:#5BE3A8}
.pf.s-done .pf-task .x1{display:none}
.pf.s-done .pf-task .x2{display:inline}

/* Automatisch: the app's rings (AutoPanel.tsx). Fill, dot, count, check, golden pill, claim. js/home.js drives the ring,
   dot, number and pill from one clock per frame (no CSS transition on them, so they never drift apart); the rest fades. */
.hl{--bgc:#121734;position:relative;will-change:opacity;width:100%;text-align:left;border-radius:30px;background:linear-gradient(180deg,#151a3d,#10142f);border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);padding:20px 14px 16px;transition:opacity .6s ease}
.hl.fade{opacity:0}
.hl-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:4px 4px 2px;font:700 28px/1 var(--display)}
.hl-head span{color:var(--faint);font:800 12.5px var(--body);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .5s ease}
.hl-head span.on{opacity:1;color:#F5B82E}
.ag{display:flex;align-items:center;gap:8px;margin:12px 4px 2px;color:#b9c0dc;font:800 11.5px var(--body);letter-spacing:.09em;text-transform:uppercase}
.ars{display:grid;grid-template-columns:repeat(3,1fr)}
.ar{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 4px;min-width:0}
.ar-ring{position:relative;width:74px;height:74px;flex:none}
.ar-ring>svg{display:block;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ar-bg{fill:none;stroke:#262d55;stroke-width:7}
.ar-fg{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:210.49;stroke-dashoffset:210.49;opacity:0;transition:opacity .25s}
.ar.go .ar-fg{opacity:1}
.ar-dot{position:absolute;inset:0;pointer-events:none}
.ar-dot i{position:absolute;left:50%;top:-1px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 6px var(--glow);opacity:0;transition:opacity .45s ease}
.ar.go .ar-dot i{opacity:1}
.ar.ok .ar-dot i{opacity:0}
.ar-val{position:absolute;inset:0;display:grid;place-items:center;color:#eef1fa;font:800 15px/1 var(--body);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.ar-src{position:absolute;left:-2px;top:-2px;width:22px;height:22px;border-radius:50%;background:var(--bgc);display:grid;place-items:center}
.hb,.ph,.db{display:grid;place-items:center;flex:none}
.hb{width:18px;height:18px;border-radius:50%;background:#3d1029;border:1px solid #FF5AAE;color:#FF5AAE;transition:background .5s ease,color .5s ease}
.hb svg{width:11px;height:11px}
.ar.ok .hb{background:#FF5AAE;color:#2a0718}
.ar.ok .hb svg{fill:currentColor}
.ph{color:#7fd6ff}.ph svg{width:13px;height:13px}
.hb.sm{width:14px;height:14px}.hb.sm svg{width:9px;height:9px}
.ph.sm svg,.db.sm svg{width:14px;height:14px}
.db{color:#FF5AAE}
.ar-ok{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:#7fd6ff;color:#0c0f22;border:2px solid var(--bgc);display:grid;place-items:center;transform:scale(0);opacity:0;transition:transform .55s cubic-bezier(.34,1.4,.5,1),opacity .3s ease}
.ar-ok svg{width:12px;height:12px}
.ar.ok .ar-ok{transform:none;opacity:1}
.ar-name{margin-top:4px;max-width:92%;color:#eef1fa;font:700 13px/1.3 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-st{max-width:92%;color:#8e96b8;font:600 11.5px/1.3 var(--body);white-space:nowrap;transition:opacity .2s ease}
.ar-st.sw,.sp-tx small.sw{opacity:0}
.ar-pill{position:relative;margin-top:3px;min-width:74px;border-radius:999px;border:1px solid #262d55;background:#1c2246;padding:3px 9px;color:#b9c0dc;font:800 11px/1.25 var(--body);font-variant-numeric:tabular-nums;cursor:default;transition:border-color .5s ease,background-color .5s ease,color .5s ease,transform .2s ease}
.ar-pill i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:rgba(127,214,255,.35);transition:background-color .5s ease}
.ar-pill span{position:relative}
.ar-pill::before,.ar-pill::after{content:"";position:absolute;inset:-1px;border-radius:999px;box-shadow:0 0 10px rgba(245,184,46,.7);opacity:0;pointer-events:none}
.ar-pill::before{transition:opacity .6s ease}
.ar-pill.claim::before{opacity:.75}
.ar-pill.claim::after{box-shadow:0 0 16px rgba(245,184,46,.85);animation:glow 2.6s ease-in-out .6s infinite}
@keyframes glow{0%,100%{opacity:0}50%{opacity:.5}}
.ar-pill.claim,.sp.claim{cursor:pointer}
.ar-pill.claim{border-color:#F5B82E;background-color:rgba(245,184,46,.16);color:#FFF1C9}
.ar-pill.claim i{background-color:rgba(245,184,46,.6)}
.ar-pill.claim:hover{transform:scale(1.05)}
.sp{position:relative;display:flex;align-items:center;gap:12px;width:100%;margin-top:6px;padding:9px 12px;border:1px solid transparent;border-radius:14px;background:transparent;color:inherit;text-align:left;font:inherit;cursor:default;transition:background-color .5s ease,border-color .5s ease}
.sp-st{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid #0e0b12;background:linear-gradient(145deg,var(--c1),var(--c2));box-shadow:inset 0 2px 0 rgba(255,255,255,.45);display:grid;place-items:center;opacity:.38;transition:opacity .5s ease}
.sp-st svg{width:16px;height:16px}
.sp-tx{flex:1;min-width:0}
.sp-tx b{display:block;color:#b9c0dc;font:700 13px/1.3 var(--body);transition:color .5s ease}
.sp-tx small{display:block;color:#8e96b8;font:600 11.5px/1.3 var(--body);transition:opacity .2s ease,color .5s ease}
.sp-xp{flex:none;color:#F5B82E;font:800 13px var(--body);opacity:0;transform:scale(.8);transition:opacity .45s ease,transform .55s cubic-bezier(.34,1.4,.5,1)}
.sp.has{background:rgba(245,184,46,.10);border-color:rgba(245,184,46,.55)}
.sp.has .sp-st{opacity:1}
.sp.has .sp-tx b{color:#eef1fa}
.sp.has .sp-tx small{color:#F5B82E;font-weight:800}
.sp.has .sp-xp{opacity:1;transform:none}
.sp.claim:hover{background:rgba(245,184,46,.16)}
.hl .tap{position:absolute;z-index:3;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid rgba(255,255,255,.85);pointer-events:none;animation:ripple .6s ease-out forwards}
.hl.snap *,.hl.snap *::before,.hl.snap *::after{transition:none!important;animation:none!important}

/* Wardrobe */
.wd{grid-template-areas:"txt stage" "tiles stage";row-gap:24px}
.wd .txt{grid-area:txt;align-self:end}
.wd .tiles{grid-area:tiles;align-self:start}
.wd .stagecol{grid-area:stage}
@media (max-width:820px){.wd{grid-template-areas:"txt" "stage" "tiles";row-gap:20px}}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{aspect-ratio:1;border-radius:16px;background:var(--panel2);border:1.5px solid transparent;padding:6px;cursor:pointer;transition:transform .15s,border-color .2s,background .2s}
.tile:hover{transform:translateY(-2px)}
.tile .bz{display:block;width:100%;height:100%}
.tile[aria-pressed="true"]{border-color:var(--violet);background:#272e66}
.stagecol{justify-self:center;text-align:center}
.stage{position:relative;width:min(300px,64vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 58%,rgba(169,156,255,.28),rgba(169,156,255,0) 66%)}
.stage::after{content:"";position:absolute;left:22%;right:22%;bottom:8%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent)}
.stage .bz{position:absolute;inset:10%;z-index:1}
.stage.poof .bz{animation:poof .5s ease}
@keyframes poof{0%{transform:scale(1)}35%{transform:scale(.88)}70%{transform:scale(1.07)}100%{transform:scale(1)}}
.wname{margin:10px 0 0;font-weight:700;font-size:17px}
.rar{display:inline-block;margin-left:8px;font:800 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:5px 9px;vertical-align:2px}
.r1{color:#7FD6FF;background:rgba(127,214,255,.12)}
.r2{color:#cdbfff;background:rgba(169,156,255,.18)}
.r3{color:#ffd879;background:rgba(245,184,46,.16)}
.forms2 li .bz{transition:transform .3s ease}
.forms2 li:hover .bz{transform:translateY(-6px)}

@media (prefers-reduced-motion:reduce){
  .nightbg::before,.nightbg::after,.v4 .sky i,.pf-check .glass,.pf-check i,.h-bee .h-w{animation:none}
  .js .rv:not(.in){opacity:1;transform:none}
}