:root{--primary-color: #ff6b35;--secondary-color: #00ff88;--warning-color: #ff0000;--dark-bg: #0a0a0f;--light-text: #ffffff;--muted-text: #888888;--gradient-1: linear-gradient(135deg, #1a0a2e 0%, #16213e 50%, #0f3460 100%);--gradient-2: linear-gradient(45deg, #ff6b35, #f72585, #7209b7);--gradient-glow: linear-gradient(45deg, #00ff88, #00d4ff, #7c3aed)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Microsoft YaHei,PingFang SC,sans-serif;background:var(--dark-bg);color:var(--light-text);overflow:hidden;min-height:100vh}#app{position:relative;width:100vw;height:100vh;overflow:hidden}.background-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.gradient-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient-1);animation:gradientShift 10s ease-in-out infinite}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.grid-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,107,53,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,107,53,.03) 1px,transparent 1px);background-size:50px 50px;animation:gridMove 20s linear infinite}@keyframes gridMove{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.scene-layer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:900px;height:60%;z-index:1}#scene-svg{width:100%;height:100%;background:#0000004d;border-radius:20px;border:1px solid rgba(255,107,53,.2);box-shadow:0 0 40px #ff6b351a,inset 0 0 60px #00000080}.content-layer{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;padding:1rem 2rem 2rem;pointer-events:none}.content-layer>*{pointer-events:auto}.logo-container{text-align:center;transition:all .5s ease}.logo-container.mini{position:fixed;top:1rem;left:1rem;display:flex;align-items:center;gap:.5rem;background:#00000080;padding:.5rem 1rem;border-radius:30px;border:1px solid rgba(255,107,53,.3)}.logo-container.mini .pill-icon{font-size:1.5rem;animation:none}.logo-container.mini .brand-name{font-size:1.2rem}.pill-icon{font-size:2rem;filter:drop-shadow(0 0 15px var(--primary-color));animation:pillFloat 3s ease-in-out infinite}@keyframes pillFloat{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(3deg)}}.brand-name{font-size:1.5rem;font-weight:700;background:var(--gradient-2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;letter-spacing:.1em}.lyrics-container{position:fixed;bottom:120px;left:50%;transform:translate(-50%);text-align:center;min-height:100px;display:flex;flex-direction:column;justify-content:center;align-items:center;width:90%;max-width:800px;background:#0009;padding:1rem 2rem;border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.lyric-line{transition:all .3s ease}.lyric-line.current{font-size:1.8rem;font-weight:700;color:var(--light-text);text-shadow:0 0 20px rgba(255,107,53,.5);margin-bottom:.5rem}.lyric-line.next{font-size:1rem;color:var(--muted-text);opacity:.6}.lyric-line.lyric-title{color:var(--primary-color);text-shadow:0 0 30px var(--primary-color),0 0 60px var(--primary-color);font-size:2.5rem}.lyric-line.lyric-warning{color:var(--warning-color);text-shadow:0 0 20px var(--warning-color);animation:warningPulse .5s ease-in-out infinite}@keyframes warningPulse{0%,to{opacity:1}50%{opacity:.7}}.lyric-line.lyric-chorus{color:var(--secondary-color);text-shadow:0 0 25px var(--secondary-color)}.lyric-line.lyric-slogan{font-style:italic;color:#f0a500}.visual-effects{position:fixed;width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem;pointer-events:none;z-index:10}.age-counter{display:flex;align-items:center;gap:.8rem;font-size:1.2rem;background:#000000b3;padding:.8rem 1.5rem;border-radius:50px;border:1px solid rgba(255,107,53,.3);position:fixed;top:1rem;right:1rem}.age-label{color:var(--muted-text);font-size:.8rem}.age-value{font-size:1.5rem;font-weight:700;color:var(--primary-color);min-width:2ch;text-align:center}.age-arrow{color:var(--secondary-color);animation:arrowPulse 1s ease-in-out infinite}@keyframes arrowPulse{0%,to{transform:translate(0);opacity:1}50%{transform:translate(3px);opacity:.5}}.age-target{font-size:1.5rem;font-weight:700;color:var(--secondary-color);text-shadow:0 0 10px var(--secondary-color)}.warning-text{position:fixed;bottom:230px;left:50%;transform:translate(-50%);background:#f003;border:1px solid var(--warning-color);padding:.6rem 1.5rem;border-radius:5px;font-size:.9rem;color:var(--warning-color);animation:warningGlow 1s ease-in-out infinite;z-index:100}@keyframes warningGlow{0%,to{box-shadow:0 0 10px #ff00004d}50%{box-shadow:0 0 25px #f009}}.slogan-flash{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);font-size:2.5rem;font-weight:700;color:var(--primary-color);text-shadow:0 0 30px var(--primary-color);z-index:100;white-space:nowrap;background:#000c;padding:1rem 2rem;border-radius:10px}.controls{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.8rem;z-index:50}.play-btn{display:flex;align-items:center;gap:.6rem;padding:.8rem 2rem;font-size:1rem;font-weight:700;color:var(--light-text);background:var(--gradient-2);border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 25px #ff6b3566}.play-btn:hover{transform:scale(1.05);box-shadow:0 8px 35px #ff6b3599}.play-btn:active{transform:scale(.98)}.play-icon{font-size:1.2rem}.progress-container{width:350px;max-width:80vw;height:5px;background:#ffffff1a;border-radius:3px;cursor:pointer;overflow:visible;position:relative}.progress-bar{height:100%;background:var(--gradient-2);border-radius:3px;width:0%;transition:width .1s linear}.time-display{font-size:.8rem;color:var(--muted-text);margin-top:.3rem}.flash-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;pointer-events:none}.hidden{display:none!important}.intro-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--gradient-1);z-index:2000;display:flex;align-items:center;justify-content:center}.intro-content{text-align:center;padding:2rem}.intro-pill{font-size:6rem;margin-bottom:1rem;filter:drop-shadow(0 0 40px var(--primary-color));animation:introPillFloat 3s ease-in-out infinite}@keyframes introPillFloat{0%,to{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-15px) rotate(5deg)}}.intro-title{font-size:4rem;font-weight:700;background:var(--gradient-2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.3em;margin-bottom:1rem}.intro-tagline{font-size:1.5rem;color:var(--light-text);margin-bottom:.5rem}.intro-subtitle{font-size:1rem;color:var(--muted-text);margin-bottom:2rem}.start-btn{padding:1rem 3rem;font-size:1.3rem;font-weight:700;color:var(--light-text);background:var(--gradient-2);border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 30px #ff6b3580;margin-bottom:2rem}.start-btn:hover{transform:scale(1.08);box-shadow:0 10px 50px #ff6b35b3}.intro-warning{font-size:.8rem;color:var(--muted-text);opacity:.6}@media (max-width: 768px){.intro-title{font-size:2.5rem}.intro-pill{font-size:4rem}.lyric-line.current{font-size:1.3rem}.lyric-line.lyric-title{font-size:1.8rem}.age-counter{font-size:.9rem;padding:.5rem 1rem;top:60px;right:10px}.age-value,.age-target{font-size:1.2rem}.progress-container{width:280px}.lyrics-container{bottom:100px;padding:.8rem 1.5rem}.logo-container.mini{top:10px;left:10px;padding:.3rem .8rem}}.flash-layer,.grid-overlay{will-change:transform,opacity}#scene-svg line,#scene-svg circle{transition:all .1s ease-out}.scene-layer:before{content:"";position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;background:radial-gradient(ellipse at center,transparent 0%,transparent 50%,rgba(255,107,53,.03) 70%,rgba(255,107,53,.08) 100%);pointer-events:none;z-index:-1;animation:rotateGlow 30s linear infinite}@keyframes rotateGlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}