body{margin:0;background:#FFFFFF}
a{color:#2457E6}a:hover{color:#1A3FB0}
*{box-sizing:border-box}
@keyframes drift1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,40px) scale(1.15)}100%{transform:translate(0,0) scale(1)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-90px,-50px) scale(.95)}100%{transform:translate(0,0) scale(1.1)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes spin3d{from{transform:rotateX(-22deg) rotateY(0deg)}to{transform:rotateX(-22deg) rotateY(360deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cur1{0%,100%{transform:translate(0,0)}35%{transform:translate(120px,40px)}70%{transform:translate(40px,110px)}}
@keyframes cur2{0%,100%{transform:translate(0,0)}40%{transform:translate(-110px,-30px)}75%{transform:translate(-30px,60px)}}
@keyframes cur3{0%,100%{transform:translate(0,0)}50%{transform:translate(70px,-70px)}}
@keyframes dash{to{stroke-dashoffset:-40}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes grow{0%{width:12%}60%{width:86%}100%{width:12%}}
@keyframes hue{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.blob1{animation:drift1 14s ease-in-out infinite}
.blob2{animation:drift2 17s ease-in-out infinite}
.floatA{animation:floaty 6s ease-in-out infinite}
.floatB{animation:floaty 7.5s ease-in-out infinite .8s}
.cube{animation:spin3d 12s linear infinite}
.marq{animation:marquee 32s linear infinite}
.c1{animation:cur1 9s ease-in-out infinite}
.c2{animation:cur2 11s ease-in-out infinite}
.c3{animation:cur3 8s ease-in-out infinite}
.flow{animation:dash 1.4s linear infinite}
.blink{animation:pulse 1.6s ease-in-out infinite}
.bar{animation:grow 5s ease-in-out infinite}
.rainbow{background:linear-gradient(90deg,#7B5CFF,#FF4FA3,#FFB020,#00C2A8,#2F6BFF,#7B5CFF);background-size:200% 100%;animation:hue 8s linear infinite;-webkit-background-clip:text;background-clip:text;color:transparent}
.rainbowbg{background:linear-gradient(90deg,#7B5CFF,#FF4FA3,#FFB020,#00C2A8,#2F6BFF,#7B5CFF);background-size:200% 100%;animation:hue 10s linear infinite}
@keyframes slideInL{0%{opacity:0;transform:translateX(-28px)}12%,85%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes slideInR{0%{opacity:0;transform:translateX(28px)}12%,85%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.6)}12%,85%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes zoomIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes orbit{from{transform:rotateX(70deg) rotateZ(0deg)}to{transform:rotateX(70deg) rotateZ(360deg)}}
@keyframes hop{0%,15%{left:20px}50%,65%{left:calc(100% - 32px)}100%{left:20px}}
@keyframes tapMove{0%{left:10%;opacity:0}10%{opacity:1}40%{left:46%}70%{left:80%}90%{opacity:1}100%{left:80%;opacity:0}}
@keyframes bounce{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-6px);opacity:1}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes track{from{width:0}to{width:100%}}
@keyframes baton{from{left:0}to{left:calc(100% - 20px)}}
@keyframes stepOn{0%,22%{border-color:#0C0E13;transform:translateY(-8px);box-shadow:0 18px 36px rgba(12,14,19,.12)}26%,100%{border-color:#E3E6EC;transform:none;box-shadow:none}}
.slideL{animation:slideInL 6s ease infinite both}
.slideR{animation:slideInR 6s ease infinite both}
.pop{animation:popIn 6s cubic-bezier(.2,.9,.3,1.3) infinite both}
.zoom{animation:zoomIn .55s cubic-bezier(.2,.8,.2,1) both}
.orbit{animation:orbit 5s linear infinite}
.hop{animation:hop 3s ease-in-out infinite}
.tap{animation:tapMove 5s ease-in-out infinite}
.dot{animation:bounce 1s ease-in-out infinite}
.breathe{animation:breathe 2.4s ease-in-out infinite}
.track{animation:track 8s linear infinite}
.baton{animation:baton 8s linear infinite}
.stp{animation:stepOn 8s ease-in-out infinite}
.stp1{animation-delay:2s}.stp2{animation-delay:4s}.stp3{animation-delay:6s}
.d0{animation-delay:0s}.d1{animation-delay:.35s}.d2{animation-delay:.7s}.d3{animation-delay:1.05s}
.chip{display:inline-block;font-size:15px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#FFFFFF}
.tile{transition:transform .25s ease, box-shadow .25s ease}
.tile:hover{transform:translateY(-4px) scale(1.03)}
@keyframes fly{0%{opacity:0;transform:translate(-140px,-90px) rotate(-14deg)}15%{opacity:1}42%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}58%{opacity:0;transform:translate(0,50px) scale(.5)}100%{opacity:0;transform:translate(0,50px) scale(.5)}}
@keyframes fill{0%{width:0}45%,100%{width:100%}}
@keyframes knob{0%,100%{left:8%}50%{left:78%}}
@keyframes swOn{0%,22%{box-shadow:0 0 0 2px #141415,0 0 0 4px #FFFFFF;transform:scale(1.12)}26%,100%{box-shadow:none;transform:none}}
@keyframes ripple{0%{transform:translate(-50%,-50%) scale(.2);opacity:.9}100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shadowP{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.85);opacity:.7}}
@keyframes zoomR{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.win{border-radius:18px;background:#141415;border:1px solid #2A2A2E;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);color:#E6EAF0}
.winbar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid #2A2A2E;font-size:11px;color:#9AA1B2}
.wd{width:10px;height:10px;border-radius:50%;background:#3A3A40;display:inline-block}
.row{display:flex;align-items:center;gap:10px;border-radius:12px;background:#1C1C1F;padding:10px 12px}
.fic{flex:none;width:30px;height:30px;border-radius:8px;color:#FFFFFF;font-size:10px;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.pbar{display:block;height:5px;border-radius:3px;background:#2A2A2E;margin-top:6px;overflow:hidden}
.bar1{display:block;height:5px;border-radius:3px;animation:fill 6s ease-out infinite both}
.ok{flex:none;width:22px;height:22px;border-radius:50%;background:#C6F432;display:inline-flex;align-items:center;justify-content:center}
.mini{display:inline-block;font-size:11px;padding:5px 9px;border-radius:999px;background:#2A2A2E;color:#D9DCE4}
.fly{animation:fly 5s ease-in-out infinite both}
.shadowP{animation:shadowP 6s ease-in-out infinite}
.slider{display:block;position:relative;height:4px;border-radius:2px;background:#2A2A2E}
.knob{position:absolute;top:-5px;width:14px;height:14px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 3px rgba(123,92,255,.6)}
.k1{animation:knob 6s ease-in-out infinite}.k2{animation:knob 8s ease-in-out infinite 1s}.k3{animation:knob 5s ease-in-out infinite .5s}
.sw{width:24px;height:24px;border-radius:7px;display:inline-block;animation:swOn 8s ease-in-out infinite}
.s1{animation-delay:2s}.s2{animation-delay:4s}.s3{animation-delay:6s}
.ph{position:absolute;width:118px;height:220px;border-radius:18px;background:#FFFFFF;padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.phbar{height:8px;width:55%;border-radius:4px;background:#0C0E13;display:block}
.ripple{position:absolute;left:50%;top:50%;width:30px;height:30px;border-radius:50%;border:3px solid #E2231A;animation:ripple 1.6s ease-out infinite}
.tag{position:absolute;font-size:11px;font-weight:700;color:#0C0E13;background:#FFB020;padding:4px 8px;border-radius:6px}
.ring{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:#00C2A8;display:inline-block;animation:spin 1s linear infinite}
.eng{border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:10px 12px;font-size:13px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.tree{flex-basis:100%;display:flex;flex-direction:column;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size:11px;color:#C3C8D4;line-height:1.6}
.av{flex:none;width:22px;height:22px;border-radius:50%;color:#FFFFFF;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:2px solid #141415}
.selV{outline:2px solid #7B5CFF;outline-offset:3px}
.selT{outline:2px solid #00A88F;outline-offset:3px}
.nametag{position:absolute;left:-5px;top:-26px;color:#FFFFFF;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px}
.mem{display:flex;align-items:center;gap:8px}
.role{margin-left:auto;font-size:10px;padding:2px 7px;border-radius:999px;background:#2A2A2E;color:#D9DCE4}
.ver{display:flex;align-items:center;gap:8px;color:#C3C8D4}
.vdot{width:8px;height:8px;border-radius:50%;background:#9AA1B2;display:inline-block}
.var{border-radius:14px;background:#FFFFFF;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:200px}
.vlabel{font-size:11px;font-weight:900}
.zoomR{animation:zoomR .5s ease both}
@keyframes heroProg{from{width:0}to{width:100%}}
.heroProg{animation:heroProg 7s linear both}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
@media (prefers-reduced-motion: reduce){*{animation:none !important}}

[hidden]{display:none !important}
.skip{position:absolute;left:-9999px;top:8px;z-index:10;background:#FFFFFF;color:#0C0E13;padding:10px 14px;border-radius:8px}
.skip:focus{left:8px}
.mark-tile{display:inline-flex;width:32px;height:32px;border-radius:7px;background:#FFFFFF;align-items:center;justify-content:center}
.mark-tile svg{width:28px;height:28px}
.m-construction{fill:#E2231A}.m-letter{fill:#111111}
.hero-tab{position:relative;overflow:hidden;font-family:inherit;font-size:14px;font-weight:700;padding:12px 18px;min-height:44px;border-radius:12px;cursor:pointer;border:1px solid rgba(255,255,255,.14);background:transparent;color:#9AA1B2}
.hero-tab[aria-selected="true"]{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#FFFFFF}
.hero-tab .heroProg{position:absolute;left:0;bottom:0;height:3px;background:var(--c);display:none}
.hero-tab[aria-selected="true"] .heroProg{display:block}
.uc-tab{font-family:inherit;font-size:16px;font-weight:700;padding:14px 22px;min-height:48px;border-radius:999px;cursor:pointer;border:2px solid var(--c);background:#FFFFFF;color:var(--c)}
.uc-tab[aria-selected="true"]{background:var(--c);color:#FFFFFF}
.tile{display:flex;flex-direction:column;gap:12px;text-align:left;padding:12px;border-radius:18px;cursor:pointer;font-family:inherit;color:#FFFFFF;min-height:48px;background:#15171E;border:2px solid rgba(255,255,255,.1)}
.tile[aria-pressed="true"]{background:#22252E;border-color:var(--c);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
button:focus-visible,a:focus-visible{outline:3px solid #C6F432;outline-offset:3px}
.hero-copy,.hero-stage{display:grid}
.hero-scene{grid-area:1/1;opacity:1;visibility:visible;transform:none;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),visibility 0s linear 0s}
.hero-scene.off{opacity:0;visibility:hidden;transform:translateY(10px) scale(.985);transition:opacity .7s ease,transform .7s ease,visibility 0s linear .7s;pointer-events:none}
@media (prefers-reduced-motion: reduce){.hero-scene,.hero-scene.off{transition:none}}
html[lang="en"] .hero-copy h1{font-size:clamp(40px,5.2vw,72px)}