:root{font-family:system-ui,-apple-system,sans-serif;color:#eff7ff;background:#07101e;color-scheme:dark;--cyan:#26aff0;--soft:#a0b5cb}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 15%,#142e4b 0,transparent 55%),#07101e}
.shell{width:min(100%,515px);min-height:100svh;margin:auto;padding:0 clamp(16px,4vw,25px);display:flex;flex-direction:column}
header,footer{display:flex;justify-content:space-between;align-items:center;min-height:62px;font-size:10px;letter-spacing:.15em;color:var(--soft);font-weight:700}
header img{width:135px;height:auto}header span{color:#8bd4fb}
.panel{border:1px solid #26425d;border-radius:25px;overflow:hidden;background:linear-gradient(151deg,#11253c,#0b1729 62%);box-shadow:0 26px 75px #0005}
.visual{position:relative;height:clamp(220px,33svh,310px);isolation:isolate;overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse,#1b66a761,transparent 68%),#0a192c;border-bottom:1px solid #29415c}
.visual::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#6bc9ff14 1px,transparent 1px),linear-gradient(90deg,#6bc9ff14 1px,transparent 1px);background-size:27px 27px;mask-image:radial-gradient(ellipse,#000 15%,transparent 83%)}
.badge,.visual-caption{position:absolute;left:16px;font:700 9px/1.2 ui-monospace,monospace;letter-spacing:.15em;color:#a4dffc}.badge{top:16px;padding:8px 9px;border:1px solid #285779;border-radius:30px;background:#081c31}.badge i{display:inline-block;width:5px;height:5px;background:#43d6ff;border-radius:50%;margin-right:4px}.visual-caption{bottom:13px;right:16px;display:flex;justify-content:space-between}.visual-caption b{color:#66a7d4}
.ring{position:absolute;width:205px;height:205px;border:1px solid #4dbfff49;border-radius:50%;transform:rotateX(26deg) rotate(-26deg);box-shadow:0 0 35px #20a4f020}.ring-outer{width:232px;height:232px;border-style:dashed}.ring-inner{transform:rotateX(48deg) rotate(21deg);border-color:#76d5ff85}
.orb{z-index:1;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 31% 24%,#2877af,#183c65 42%,#071727 80%);box-shadow:inset 0 1px 8px #b2e8ffb0,inset 0 -8px 15px #020611,0 0 44px #28b4f755;border:1px solid #67cfff}
.wave{display:flex;align-items:center;gap:5px;height:52px}.wave i{width:4px;height:16px;background:#a5ecff;border-radius:5px;box-shadow:0 0 9px #5edcff}.wave i:nth-child(2n){height:26px}.wave i:nth-child(3n){height:37px}.wave i:nth-child(4){height:47px}
body[data-state=active] .wave i{animation:pulse .9s ease-in-out infinite alternate}body[data-state=active] .wave i:nth-child(2n){animation-delay:-.5s}
@keyframes pulse{from{transform:scaleY(.5)}to{transform:scaleY(1.2)}}
.content{padding:clamp(17px,5vw,27px)}.eyebrow{font-size:9px;font-weight:800;letter-spacing:.13em;color:#78d3ff;margin:0 0 10px}
h1{font-size:clamp(39px,11vw,59px);line-height:.96;letter-spacing:-.064em;margin:0}h1 span{color:var(--cyan)}
.intro{max-width:33ch;font-size:14px;line-height:1.5;color:var(--soft);margin:15px 0 19px}
button{font:inherit;cursor:pointer}.primary{width:100%;border:0;border-radius:13px;min-height:54px;color:#031827;background:linear-gradient(111deg,#5be1fb,#26aff0);font-size:15px;font-weight:800;display:flex;gap:10px;align-items:center;justify-content:center;box-shadow:0 9px 26px #21b2f241}.primary svg{width:19px;height:19px}.primary:disabled{opacity:.65;cursor:wait}.primary:focus-visible,.sound:focus-visible{outline:2px solid white;outline-offset:4px}
body[data-state=active] .primary{color:#eaf6ff;background:#1a3954;box-shadow:none;border:1px solid #39749b}
.status{color:var(--soft);font-size:12px;margin:13px 0 0;min-height:1.4em}.sound{margin-top:9px;border:1px solid #38779b;border-radius:9px;background:#183751;color:#e7f7ff;padding:8px 13px}
footer{min-height:48px;color:#849bb4}
@media(prefers-reduced-motion:reduce){.wave i{animation:none!important}}