:root{--cyan:#32e6ff;--violet:#8b5cf6;--pink:#f472b6;--ink:#050510;--glass:rgba(10,11,30,.58)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink);color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}button{font:inherit}#app{position:relative;width:100%;height:100%;min-height:480px;isolation:isolate}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,transparent 35%,rgba(0,0,12,.28) 72%,rgba(0,0,8,.78) 100%);z-index:1}.hud{position:absolute;z-index:4;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:max(20px,env(safe-area-inset-top)) max(24px,5vw) 16px;transition:.25s}.brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:.18em;font-size:14px}.brand-mark{width:28px;height:28px;border:2px solid var(--cyan);border-radius:50%;box-shadow:0 0 14px var(--cyan),inset 0 0 8px var(--violet);position:relative}.brand-mark:after{content:"";position:absolute;inset:7px;background:#020208;border-radius:50%}.stats{display:none;align-items:center;gap:clamp(20px,5vw,70px);text-align:center}.stats>div{min-width:64px}.label{display:block;color:#9aa0c2;font-size:10px;letter-spacing:.18em;margin-bottom:2px}.stats strong{font-variant-numeric:tabular-nums;font-size:20px}.icon-btn{width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:var(--glass);backdrop-filter:blur(12px);color:#fff;cursor:pointer;font-weight:800;display:none}.icon-btn:hover{border-color:var(--cyan);box-shadow:0 0 18px rgba(50,230,255,.22)}.screen{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;opacity:0;visibility:hidden;transform:scale(1.03);transition:opacity .35s,transform .35s,visibility .35s;background:radial-gradient(circle at center,rgba(29,15,64,.18),transparent 45%)}.screen.active{opacity:1;visibility:visible;transform:scale(1)}.eyebrow{color:var(--cyan);letter-spacing:.36em;font-size:11px;font-weight:800;margin:0 0 14px;text-shadow:0 0 14px rgba(50,230,255,.65)}h1{font-size:clamp(52px,12vw,120px);line-height:.82;letter-spacing:-.075em;margin:0;font-weight:950;text-shadow:0 0 50px rgba(139,92,246,.2)}h1 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.68)}h2{font-size:clamp(38px,8vw,72px);letter-spacing:-.055em;margin:0 0 28px}.lead{color:#b8bdd7;font-size:clamp(15px,2vw,18px);margin:28px 0 32px;max-width:480px}.primary{border:1px solid rgba(86,235,255,.75);color:white;background:linear-gradient(110deg,rgba(49,46,129,.78),rgba(8,145,178,.52));padding:16px 25px 16px 30px;border-radius:5px;min-width:180px;letter-spacing:.18em;font-size:13px;font-weight:900;cursor:pointer;box-shadow:0 0 28px rgba(50,230,255,.18),inset 0 0 24px rgba(139,92,246,.16);transition:.2s}.primary span{margin-left:18px;color:var(--cyan);font-size:18px}.primary:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(50,230,255,.42)}.controls{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));color:#6f7598;font-size:11px;letter-spacing:.08em}.controls span{color:#cfd4ed}.title-orbit{position:absolute;width:min(72vw,560px);aspect-ratio:1;border:1px solid rgba(86,235,255,.11);border-radius:50%;animation:orbit 16s linear infinite;pointer-events:none}.title-orbit:before,.title-orbit:after{content:"";position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(139,92,246,.13)}.title-orbit i,.title-orbit b{position:absolute;width:6px;height:6px;background:var(--cyan);border-radius:50%;top:8%;left:28%;box-shadow:0 0 15px 4px var(--cyan)}.title-orbit b{top:auto;left:auto;right:7%;bottom:35%;width:4px;height:4px;background:var(--pink);box-shadow:0 0 13px 3px var(--pink)}@keyframes orbit{to{transform:rotate(360deg)}}.result{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}.result span{color:#8c92b2;font-size:11px;letter-spacing:.2em}.result strong{font-size:58px;color:var(--cyan);text-shadow:0 0 24px rgba(50,230,255,.5)}.record{height:22px;color:#f4a7d0;font-size:13px;margin:0 0 20px}.compact{background:rgba(3,3,14,.62);backdrop-filter:blur(8px)}.pulse-meter{position:absolute;z-index:4;left:max(24px,5vw);bottom:max(24px,env(safe-area-inset-bottom));width:130px;height:4px;background:rgba(255,255,255,.14);display:none}.pulse-meter div{height:100%;width:100%;background:linear-gradient(90deg,var(--violet),var(--cyan));box-shadow:0 0 10px var(--cyan)}.pulse-meter span{position:absolute;top:9px;color:#7d83a3;font-size:9px;letter-spacing:.16em}.tip{position:absolute;z-index:4;left:50%;bottom:30px;transform:translateX(-50%);font-size:12px;color:#aeb4cf;background:rgba(5,5,16,.55);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:8px 14px;backdrop-filter:blur(8px);opacity:0;transition:opacity .4s;white-space:nowrap}.playing .stats,.playing .icon-btn,.playing .pulse-meter{display:flex}.playing .tip{opacity:1}.playing .brand{opacity:.45}@media(max-width:600px){.hud{padding-left:14px;padding-right:14px}.brand{font-size:0}.brand-mark{width:25px;height:25px}.stats{gap:14px}.stats strong{font-size:16px}.stats>div{min-width:48px}.label{font-size:8px}.icon-btn{width:36px;height:36px}.tip{bottom:72px;font-size:10px}.pulse-meter{left:18px}.controls{max-width:290px;line-height:1.7}}