:root{--blue: #4fa3ff;--blue-deep: #1670c8;--blue-pale: #d7ecff;--ink: #0a1a2e}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at 30% 20%,#b3d9ff 0%,transparent 55%),radial-gradient(circle at 75% 80%,#79bfff 0%,transparent 50%),linear-gradient(160deg,var(--blue-pale),var(--blue) 70%,var(--blue-deep));background-attachment:fixed;-webkit-tap-highlight-color:transparent;overflow:hidden}main{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;padding:2rem;text-align:center}h1{font-size:clamp(1.8rem,6vw,3rem);font-weight:900;letter-spacing:.02em;margin:0;color:#fff;text-shadow:0 2px 0 var(--blue-deep),0 6px 24px rgba(0,0,0,.25)}button{width:min(72vw,18rem);aspect-ratio:1;border-radius:50%;border:none;background:radial-gradient(circle at 35% 30%,#fff,#e0f0ff 35%,#79bfff);color:var(--blue-deep);font-weight:900;font-size:clamp(1rem,4vw,1.4rem);letter-spacing:.08em;cursor:pointer;box-shadow:0 0 0 6px #ffffff80,0 18px 40px #1670c873,inset 0 -10px 30px #1670c84d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;transition:transform .12s ease,box-shadow .12s ease;user-select:none;-webkit-user-select:none}button:active{transform:scale(.96);box-shadow:0 0 0 4px #ffffff80,0 8px 20px #1670c873,inset 0 -6px 18px #1670c84d}button .icon{font-size:3rem;line-height:1}button.listening{animation:pulse 1s ease-in-out infinite;pointer-events:none}button.playing{animation:none;pointer-events:none;opacity:.85}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 0 0 6px #ffffff80,0 18px 40px #1670c873,inset 0 -10px 30px #1670c84d}50%{transform:scale(1.05);box-shadow:0 0 0 14px #ffffff59,0 24px 60px #1670c88c,inset 0 -10px 30px #1670c84d}}#status{color:#fff;font-weight:700;font-size:clamp(1rem,3.5vw,1.25rem);min-height:1.5em;text-shadow:0 2px 8px rgba(0,0,0,.2);margin:0}