:root{--night-1: #171b34;--night-2: #232a52;--night-3: #3a3468;--ink: #f7f2e7;--ink-dim: rgba(232, 226, 246, .72);--ink-faint: rgba(232, 226, 246, .45);--moon-1: #ffedc0;--moon-2: #ffd06e;--moon-3: #f5a442;--moon-text: #6b4316;--accent: #ffd98e;--violet: #9d8fec;--card: rgba(255, 255, 255, .08);--card-border: rgba(255, 255, 255, .14);font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,Avenir Next,sans-serif;color:var(--ink);background:var(--night-1);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;min-height:100%}html{height:100%;overscroll-behavior:none}body{min-height:100vh;min-height:100dvh;overflow-x:hidden;background:radial-gradient(120% 70% at 80% -10%,rgba(157,143,236,.22),transparent 60%),radial-gradient(100% 60% at 10% 110%,rgba(245,164,66,.12),transparent 55%),linear-gradient(178deg,var(--night-1) 0%,var(--night-2) 52%,var(--night-3) 100%);background-attachment:fixed;color:var(--ink);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button,input,textarea,select{font:inherit}button{-webkit-tap-highlight-color:transparent}.night-shell{position:relative;display:flex;flex-direction:column;width:100%;max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;padding:calc(env(safe-area-inset-top,0px) + 18px) 20px calc(env(safe-area-inset-bottom,0px) + 20px)}.star-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.star{position:absolute;border-radius:50%;background:#fff;opacity:.25;animation:twinkle 2.8s ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:.15;transform:scale(.8)}to{opacity:.85;transform:scale(1.15)}}.top-bar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:8px;font-size:1.05rem;font-weight:800;letter-spacing:.06em}.brand-moon{font-size:1.3rem;filter:drop-shadow(0 0 10px rgba(255,208,110,.6))}.conn-dot{width:9px;height:9px;border-radius:50%;background:#ffffff40;transition:background .3s ease}.conn-dot.online{background:#7ee2a8;box-shadow:0 0 8px #7ee2a8cc}.stage-area{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px 0 20px}.speech-bubble{position:relative;max-width:340px;margin-bottom:10px;padding:14px 20px;border-radius:22px;border:1px solid var(--card-border);background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 32px #0a0c2259}.speech-bubble:after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;transform:translate(-50%) rotate(45deg);background:#ffffff14;border-right:1px solid var(--card-border);border-bottom:1px solid var(--card-border)}.speech-bubble p{margin:0;font-size:.98rem;line-height:1.7;text-align:center;color:var(--ink)}.speech-bubble.stage-failed{border-color:#ff8a8073;background:#98242747}.speech-bubble.stage-failed:after{background:#98242747;border-color:#ff8a8073}.moon-wrap{position:relative;display:grid;place-items:center}.moon-glow{position:absolute;width:150%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,208,110,.22),transparent 62%);pointer-events:none}.moon-button{position:relative;display:grid;place-items:center;width:min(56vw,218px);aspect-ratio:1;border:none;border-radius:50%;background:radial-gradient(circle at 32% 28%,var(--moon-1) 0%,var(--moon-2) 46%,var(--moon-3) 100%);color:var(--moon-text);font-size:1.12rem;font-weight:800;letter-spacing:.05em;cursor:pointer;touch-action:none;box-shadow:inset -10px -16px 30px #b4691e47,inset 6px 10px 22px #fffaeb80,0 22px 55px #f5a44252;transition:transform .16s ease,box-shadow .2s ease,opacity .2s ease,filter .2s ease}.moon-button:before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 68% 30%,rgba(196,130,45,.22) 0 7%,transparent 8%),radial-gradient(circle at 30% 62%,rgba(196,130,45,.18) 0 9%,transparent 10%),radial-gradient(circle at 62% 72%,rgba(196,130,45,.16) 0 5.5%,transparent 6.5%),radial-gradient(circle at 45% 18%,rgba(255,255,255,.28) 0 6%,transparent 7%);pointer-events:none}.moon-button:disabled{opacity:.55;cursor:not-allowed;filter:saturate(.7);box-shadow:inset -10px -16px 30px #b4691e33,0 10px 26px #f5a4422e}.moon-button:not(:disabled):active{transform:scale(.97)}.moon-label{position:relative;z-index:2;width:64%;line-height:1.5;text-align:center}.moon-button.recording{animation:moon-breathe 1.1s ease-in-out infinite;box-shadow:inset -10px -16px 30px #b4691e38,inset 6px 10px 22px #fffaeb8c,0 26px 70px #f5a44280}@keyframes moon-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.045)}}.ring{position:absolute;inset:-10px;border:2px solid rgba(255,217,142,.55);border-radius:50%;opacity:0;pointer-events:none}.recording .ring{animation:ring-grow 1.6s ease-out infinite}.recording .ring.ring-delay{animation-delay:.8s}@keyframes ring-grow{0%{opacity:.7;transform:scale(.92)}to{opacity:0;transform:scale(1.3)}}.moon-button.playing{animation:glow-breathe 2.4s ease-in-out infinite}@keyframes glow-breathe{0%,to{box-shadow:inset -10px -16px 30px #b4691e47,inset 6px 10px 22px #fffaeb80,0 22px 55px #f5a44252}50%{box-shadow:inset -10px -16px 30px #b4691e47,inset 6px 10px 22px #fffaeb80,0 26px 80px #ffd06e8c}}.wave-bars{display:flex;align-items:center;gap:5px;height:30px}.wave-bars i{width:4px;height:6px;border-radius:999px;background:var(--accent);opacity:.3;transition:opacity .25s ease}.wave-bars.active i{opacity:.95;animation:wave-dance .9s ease-in-out infinite}.wave-bars.active i:nth-child(1){animation-delay:0s}.wave-bars.active i:nth-child(2){animation-delay:.12s}.wave-bars.active i:nth-child(3){animation-delay:.24s}.wave-bars.active i:nth-child(4){animation-delay:.12s}.wave-bars.active i:nth-child(5){animation-delay:0s}@keyframes wave-dance{0%,to{height:8px}50%{height:26px}}.press-hint{margin:0;font-size:.86rem;color:var(--ink-dim);letter-spacing:.04em}.example-area{position:relative;z-index:1;padding-bottom:6px}.example-title{margin:0 0 10px;font-size:.8rem;color:var(--ink-faint);text-align:center;letter-spacing:.1em}.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.marquee-track{display:flex;gap:10px;width:max-content;animation:marquee 30s linear infinite}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.chip{white-space:nowrap;padding:9px 16px;border-radius:999px;border:1px solid var(--card-border);background:var(--card);color:var(--ink-dim);font-size:.86rem}.bottom-bar{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:8px}.ghost-button{padding:10px 22px;border-radius:999px;border:1px solid var(--card-border);background:#ffffff0f;color:var(--ink-dim);font-size:.88rem;cursor:pointer;transition:background .2s ease,opacity .2s ease}.ghost-button:not(:disabled):active{background:#ffffff24}.ghost-button:disabled{opacity:.4;cursor:not-allowed}.last-heard{margin:0;max-width:100%;font-size:.78rem;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hidden-audio{display:none}@media (min-width: 560px){.night-shell{padding-top:28px;padding-bottom:28px}.moon-button{width:230px}}@media (prefers-reduced-motion: reduce){.star,.marquee-track,.moon-button.recording,.moon-button.playing,.recording .ring,.wave-bars.active i{animation:none}}