:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#1a1a1a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background:#1a1a1a}*{box-sizing:border-box}#root{max-width:none;margin:0;padding:0;text-align:center}.app{min-height:100vh;background:linear-gradient(135deg,#0a0a0a,#1a1a2e,#16213e);color:#fff;padding:20px;box-sizing:border-box;position:relative}.app:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(255,105,180,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(50,205,50,.1) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(255,140,0,.1) 0%,transparent 50%);pointer-events:none;z-index:-1}.input-section{margin-bottom:32px;text-align:center}.input-section h1{background:linear-gradient(45deg,#ff69b4,#87ceeb,#32cd32,#ff8c00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:24px;font-size:42px;font-weight:800;letter-spacing:2px;text-shadow:0 0 30px rgba(255,105,180,.3);animation:titleGlow 3s ease-in-out infinite alternate}@keyframes titleGlow{0%{filter:brightness(1) saturate(1);transform:scale(1)}to{filter:brightness(1.2) saturate(1.3);transform:scale(1.02)}}.url-input{width:100%;max-width:600px;padding:16px 20px;border:2px solid rgba(255,255,255,.1);border-radius:25px;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:16px;outline:none;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px #0000001a}.url-input:focus{border-color:#ff69b4;background:#ff69b41a;box-shadow:0 0 30px #ff69b44d;transform:translateY(-2px)}.url-input::placeholder{color:#fff9}.video-container{position:relative;width:100%;max-width:1200px;height:675px;margin:0 auto 32px;background:#000;border-radius:24px;overflow:hidden;box-shadow:0 20px 60px #0006,0 0 0 1px #ffffff1a;border:2px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:#666;font-size:18px}.comments-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:10}.floating-comment{position:absolute;white-space:nowrap;font-size:24px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.8);animation:slideComment 8s linear forwards;right:-100%;z-index:10}@keyframes slideComment{0%{right:-100%;opacity:1}5%{opacity:1}95%{opacity:1}to{right:100%;opacity:0}}.comment-input-section{display:flex;gap:16px;max-width:700px;margin:0 auto 32px;padding:24px;background:#ffffff0d;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:20px;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0003}.comment-input{flex:1;padding:16px 20px;border:2px solid rgba(255,255,255,.1);border-radius:16px;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:16px;outline:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.comment-input:focus{border-color:#4ecdc4;background:#4ecdc41a;box-shadow:0 0 20px #4ecdc44d;transform:translateY(-2px)}.comment-input::placeholder{color:#fff9}.comment-button{padding:16px 24px;border:none;border-radius:16px;background:linear-gradient(135deg,#4ecdc4,#45b7d1);color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px #0003;white-space:nowrap}.comment-button:hover{background:linear-gradient(135deg,#45b7d1,#3498db);transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.comment-button:active{transform:translateY(0);box-shadow:0 2px 8px #0003}.comment-button.timed{background:linear-gradient(135deg,#ff69b4,#ff1493)}.video-info{position:absolute;top:16px;right:16px;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;padding:12px 16px;border-radius:12px;font-size:14px;font-weight:600;z-index:5;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 16px #0000004d}.video-info span{display:block;margin-bottom:4px}.video-info span:last-child{margin-bottom:0}.beat-indicator{color:gold;animation:beatPulse 1s ease-in-out infinite}@keyframes beatPulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}.comment-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#1a1a2ef2;padding:24px;border:2px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;max-width:400px;width:90%;box-shadow:0 20px 40px #0006;border-radius:6px;font-size:14px;display:flex;flex-direction:column;gap:4px;z-index:5}.comment-button.timed{background:#f9ca24;color:#1a1a1a}.comment-button.timed:hover{background:#f0932b}.timed-comments-list{max-width:900px;margin:32px auto 0;padding:32px;background:#ffffff0d;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:24px;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0003}.timed-comments-list h3{margin:0 0 24px;background:linear-gradient(45deg,#4ecdc4,#45b7d1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:24px;font-weight:700;text-align:center;letter-spacing:1px}.timed-comments{display:flex;flex-direction:column;gap:16px}.timed-comment-item{display:flex;align-items:center;gap:16px;padding:16px 20px;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;border-left:4px solid #4ecdc4;border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.timed-comment-item:hover{background:#ffffff14;transform:translate(4px);box-shadow:0 4px 16px #0003}.timed-comment-item .time{background:linear-gradient(135deg,#4ecdc4,#45b7d1);color:#fff;padding:8px 12px;border-radius:12px;font-family:Courier New,monospace;font-weight:700;font-size:14px;min-width:60px;text-align:center;box-shadow:0 2px 8px #0003}.timed-comment-item .text{flex:1;font-weight:600;font-size:15px}.cheer-indicator{color:gold;filter:drop-shadow(0 0 4px currentColor)}.member-indicator{background:linear-gradient(45deg,#ff69b4,#87ceeb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;font-size:13px}.delete-button{background:linear-gradient(135deg,#eb4d4b,#c0392b);color:#fff;border:none;padding:8px 16px;border-radius:12px;cursor:pointer;font-size:13px;font-weight:600;transition:all .3s ease;box-shadow:0 2px 8px #0003}.delete-button:hover{background:linear-gradient(135deg,#c0392b,#a93226);transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.cheer-section{max-width:1200px;margin:32px auto;padding:32px;background:#ffffff0d;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:24px;border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 40px #0000004d}.cheer-section h3{margin:0 0 24px;background:linear-gradient(45deg,gold,#ff69b4,#87ceeb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:28px;font-weight:800;text-align:center;letter-spacing:1.5px}.keyboard-shortcuts{background:#0000004d;border-radius:12px;padding:12px 16px;margin-bottom:24px;border-left:4px solid #ff69b4}.keyboard-shortcuts small{color:#fffc;font-size:13px;font-weight:500}.cheer-type-selector{background:#ffffff08;border-radius:20px;padding:20px;margin-bottom:24px;border:1px solid rgba(255,255,255,.05)}.cheer-type-selector h4{margin:0 0 16px;background:linear-gradient(45deg,gold,#ff8c00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:18px;font-weight:700;text-align:center;letter-spacing:1px}.cheer-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.cheer-type-button{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 20px;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.1);border-radius:16px;color:#fff;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);min-width:90px;overflow:hidden}.cheer-type-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s}.cheer-type-button:hover:before{left:100%}.cheer-type-button:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px #0000004d;background:#ffffff1a;border-color:currentColor}.cheer-type-button.selected{transform:translateY(-2px) scale(1.08);box-shadow:0 12px 30px #0006,0 0 30px currentColor;background:#ffffff26;border-color:currentColor;border-width:3px}.cheer-number{position:absolute;top:6px;left:8px;font-size:11px;font-weight:700;background:#0009;color:#fff;padding:2px 6px;border-radius:8px;min-width:14px;text-align:center}.cheer-emoji{font-size:28px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.cheer-label{font-size:13px;font-weight:600;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.5)}.cheer-type-button:hover{background:#333;transform:translateY(-2px);box-shadow:0 4px 16px #0000004d}.cheer-type-button.selected{background:#333;border-color:currentColor;box-shadow:0 0 20px #fff3;transform:scale(1.05)}.cheer-emoji{font-size:24px;display:block}.cheer-label{font-size:12px;font-weight:700}.cheer-controls{display:flex;gap:12px;margin-bottom:20px;justify-content:center;flex-wrap:wrap}.cheer-controls{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}.cheer-button{position:relative;padding:18px 32px;border:none;border-radius:20px;color:#fff;font-size:18px;font-weight:700;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 25px #0000004d;text-shadow:0 2px 4px rgba(0,0,0,.5);overflow:hidden;min-width:160px}.cheer-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .6s}.cheer-button:hover:before{left:100%}.cheer-button:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 35px #0006}.cheer-button:active{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 20px #0000004d}.cheer-button.instant{background:linear-gradient(135deg,#ff69b4,#ff1493,#dc143c);border:2px solid rgba(255,255,255,.2)}.cheer-button.timed{background:linear-gradient(135deg,#4ecdc4,#45b7d1,#3498db);color:#fff;border:2px solid rgba(255,255,255,.2)}.auto-cheer-controls{border-top:1px solid #333;padding-top:20px}.auto-cheer-toggle{display:flex;align-items:center;gap:12px;margin-bottom:15px;cursor:pointer;font-size:16px;font-weight:700}.auto-cheer-toggle input[type=checkbox]{width:20px;height:20px;cursor:pointer}.auto-cheer-settings{background:#1a1a1a;padding:15px;border-radius:8px;border:1px solid #333}.auto-cheer-settings label{display:flex;align-items:center;gap:12px;font-size:14px}.auto-cheer-settings input[type=range]{flex:1;height:6px;background:#333;border-radius:3px;outline:none;cursor:pointer}.auto-cheer-settings input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;background:#4ecdc4;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #0000004d}.auto-cheer-settings span{color:#4ecdc4;font-weight:700;min-width:40px}.auto-cheer-settings small{display:block;color:#999;font-size:12px;margin-top:8px;font-style:italic}.beat-indicator{color:gold;font-weight:700;animation:beatPulse .5s ease-in-out infinite alternate}@keyframes beatPulse{0%{opacity:.6;text-shadow:0 0 5px currentColor}to{opacity:1;text-shadow:0 0 15px currentColor}}.cheer-comment{animation:cheerBounce 8s linear forwards}@keyframes cheerBounce{0%{right:-100%;opacity:1;transform:scale(1) rotate(0)}10%{transform:scale(1.2) rotate(5deg)}20%{transform:scale(1) rotate(-5deg)}30%{transform:scale(1.1) rotate(3deg)}40%{transform:scale(1) rotate(0)}90%{opacity:1}to{right:100%;opacity:0;transform:scale(.8) rotate(0)}}.cheer-indicator{color:gold;text-shadow:0 0 8px currentColor}.keyboard-shortcuts{text-align:center;margin-bottom:15px;padding:8px 12px;background:#ffffff0d;border-radius:6px;border:1px solid #333}.keyboard-shortcuts small{color:#999;font-size:12px}.cheer-number{position:absolute;top:4px;right:4px;background:#fff3;color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}.member-selector{margin-bottom:25px;padding:20px;background:#ffb6c11a;border-radius:12px;border:2px solid rgba(255,182,193,.3)}.member-selector h4{margin:0 0 15px;color:#ffb6c1;font-size:14px;text-align:center;text-shadow:0 0 8px rgba(255,182,193,.5)}.member-selector{background:#ffffff0d;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:24px;padding:24px;margin-bottom:24px;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0003}.member-selector h4{margin:0 0 20px;background:linear-gradient(45deg,#ff69b4,#87ceeb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:20px;font-weight:700;text-align:center;letter-spacing:1px}.member-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:16px;justify-content:center;max-width:900px;margin:0 auto}.member-button{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid;border-radius:20px;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);min-width:85px;font-weight:600;overflow:hidden}.member-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.member-button:hover:before{left:100%}.member-button:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 25px #0000004d,0 0 30px currentColor;background:#ffffff1a}.member-button.selected{transform:translateY(-2px) scale(1.08);box-shadow:0 12px 40px #0006,0 0 40px currentColor,inset 0 1px #fff3;background:#ffffff26;border-width:3px}.member-shortcut{position:absolute;top:4px;right:6px;font-size:10px;font-weight:700;background:#0009;color:#fff;padding:2px 4px;border-radius:6px;min-width:12px;text-align:center}.member-emoji{font-size:28px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.member-name{font-size:12px;font-weight:700;text-align:center;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.5)}.cheer-type-selector h4{margin:0 0 15px;color:gold;font-size:18px;text-align:center;text-shadow:0 0 8px rgba(255,215,0,.5)}.cheer-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.member-indicator{color:#ffb6c1;font-weight:700;text-shadow:0 0 5px currentColor}.member-cheer-aarin{animation:sakuraPetal 8s linear forwards}.member-cheer-runpan{animation:moonGlow 8s linear forwards}.member-cheer-harima{animation:cloverSway 8s linear forwards}.member-cheer-sahorun{animation:ribbonTwirl 8s linear forwards}.member-cheer-miia{animation:heartBeat 8s linear forwards}.member-cheer-rinaty{animation:orangeSparkle 8s linear forwards}.member-cheer-moamoa{animation:diamondShine 8s linear forwards}.member-cheer-nanochan{animation:starSparkle 8s linear forwards}@keyframes sakuraPetal{0%{right:-100%;opacity:1;transform:rotate(0) scale(1)}25%{transform:rotate(90deg) scale(1.2)}50%{transform:rotate(180deg) scale(1.1)}75%{transform:rotate(270deg) scale(1.3)}to{right:100%;opacity:0;transform:rotate(360deg) scale(.8)}}@keyframes starSparkle{0%{right:-100%;opacity:1;transform:scale(1);filter:brightness(1)}20%{transform:scale(1.5);filter:brightness(1.5)}40%{transform:scale(1);filter:brightness(1)}60%{transform:scale(1.3);filter:brightness(1.3)}80%{transform:scale(1);filter:brightness(1)}to{right:100%;opacity:0;transform:scale(.8);filter:brightness(.8)}}@keyframes cloverSway{0%{right:-100%;opacity:1;transform:translateY(0)}25%{transform:translateY(-10px)}50%{transform:translateY(5px)}75%{transform:translateY(-5px)}to{right:100%;opacity:0;transform:translateY(0)}}@keyframes ribbonTwirl{0%{right:-100%;opacity:1;transform:rotateY(0)}25%{transform:rotateY(180deg)}50%{transform:rotateY(360deg)}75%{transform:rotateY(540deg)}to{right:100%;opacity:0;transform:rotateY(720deg)}}@keyframes heartBeat{0%{right:-100%;opacity:1;transform:scale(1)}10%{transform:scale(1.3)}20%{transform:scale(1)}30%{transform:scale(1.3)}40%{transform:scale(1)}90%{opacity:1}to{right:100%;opacity:0;transform:scale(.8)}}@keyframes moonGlow{0%{right:-100%;opacity:1;transform:scale(1);filter:brightness(1) drop-shadow(0 0 5px #87CEEB)}25%{transform:scale(1.2);filter:brightness(1.3) drop-shadow(0 0 15px #87CEEB)}50%{transform:scale(1);filter:brightness(1.1) drop-shadow(0 0 10px #87CEEB)}75%{transform:scale(1.1);filter:brightness(1.2) drop-shadow(0 0 12px #87CEEB)}to{right:100%;opacity:0;transform:scale(.9);filter:brightness(.8) drop-shadow(0 0 3px #87CEEB)}}@keyframes orangeSparkle{0%{right:-100%;opacity:1;transform:scale(1) rotate(0);filter:hue-rotate(0deg)}20%{transform:scale(1.3) rotate(72deg);filter:hue-rotate(20deg)}40%{transform:scale(1) rotate(144deg);filter:hue-rotate(40deg)}60%{transform:scale(1.2) rotate(216deg);filter:hue-rotate(60deg)}80%{transform:scale(1) rotate(288deg);filter:hue-rotate(80deg)}to{right:100%;opacity:0;transform:scale(.8) rotate(360deg);filter:hue-rotate(100deg)}}@keyframes diamondShine{0%{right:-100%;opacity:1;transform:scale(1);filter:brightness(1) contrast(1)}16%{transform:scale(1.4);filter:brightness(1.5) contrast(1.3)}32%{transform:scale(1);filter:brightness(1) contrast(1)}48%{transform:scale(1.3);filter:brightness(1.4) contrast(1.2)}64%{transform:scale(1);filter:brightness(1) contrast(1)}80%{transform:scale(1.2);filter:brightness(1.3) contrast(1.1)}to{right:100%;opacity:0;transform:scale(.8);filter:brightness(.8) contrast(.9)}}.floating-comment.aarin{color:#ff69b4;text-shadow:0 0 15px rgba(255,105,180,.8),2px 2px 4px rgba(0,0,0,.8)}.floating-comment.runpan{color:#32cd32;text-shadow:0 0 15px rgba(50,205,50,.8),2px 2px 4px rgba(0,0,0,.8)}.floating-comment.harima{color:#ff8c00;text-shadow:0 0 15px rgba(255,140,0,.8),2px 2px 4px rgba(0,0,0,.8)}.floating-comment.sahorun{color:#8a2be2;text-shadow:0 0 15px rgba(138,43,226,.8),2px 2px 4px rgba(0,0,0,.8)}.floating-comment.miia{color:#fff;text-shadow:0 0 15px rgba(255,255,255,.8),2px 2px 4px rgba(0,0,0,.8)}.floating-comment.rinaty{color:#1e90ff;text-shadow:0 0 15px rgba(30,144,255,.8),2px 2px 4px rgba(0,0,0,.8)}.floating-comment.moamoa{color:red;text-shadow:0 0 15px rgba(255,0,0,.8),2px 2px 4px rgba(0,0,0,.8)}.floating-comment.nanochan{color:gold;text-shadow:0 0 15px rgba(255,215,0,.8),2px 2px 4px rgba(0,0,0,.8)}.floating-comment.all{background:linear-gradient(45deg,#ff69b4,#32cd32,#ff8c00,#8a2be2,#fff,#1e90ff,red,gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.header-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:16px}.back-button{padding:12px 20px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border:2px solid rgba(255,255,255,.2);border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-decoration:none;display:inline-flex;align-items:center;gap:8px}.back-button:hover{background:#fff3;border-color:#fff6;transform:translateY(-2px);box-shadow:0 4px 16px #0003}.header-controls h1{margin:0;flex:1;text-align:center}@media (max-width: 768px){.header-controls{flex-direction:column;text-align:center}.header-controls h1{order:-1}.back-button{align-self:flex-start}.app{padding:10px}.video-container{height:250px}.floating-comment{font-size:18px}.comment-input-section{flex-direction:column}.video-info{font-size:12px;top:5px;right:5px;padding:6px 8px}.timed-comment-item{flex-direction:column;align-items:flex-start;gap:8px}.timed-comment-item .time{align-self:flex-start}}.loading-page{min-height:100vh;background:linear-gradient(135deg,#0a0a0a,#1a1a2e,#16213e);color:#fff;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;position:relative;overflow-y:auto}.loading-page:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(255,105,180,.15) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(50,205,50,.15) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(255,140,0,.15) 0%,transparent 50%);pointer-events:none;z-index:-1;animation:backgroundShift 8s ease-in-out infinite alternate}@keyframes backgroundShift{0%{transform:translate(-2%) translateY(-2%) scale(1.02)}to{transform:translate(2%) translateY(2%) scale(.98)}}.loading-container{max-width:1000px;width:100%;text-align:center;z-index:1}.loading-header{margin-bottom:40px}.loading-header h1{background:linear-gradient(45deg,#ff69b4,#87ceeb,#32cd32,#ff8c00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:48px;font-weight:800;letter-spacing:3px;margin-bottom:30px;animation:titleGlow 3s ease-in-out infinite alternate,titleFloat 4s ease-in-out infinite}@keyframes titleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.loading-spinner{margin:30px 0}.spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,.1);border-left:4px solid #ff69b4;border-top:4px solid #32cd32;border-right:4px solid #ff8c00;border-radius:50%;animation:spin 2s linear infinite;margin:0 auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-size:18px;color:#b0b0b0;margin-top:20px;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.app-description{background:#ffffff0d;border-radius:20px;padding:40px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px #0000004d;animation:fadeInUp 1s ease-out .5s both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.app-description h2{color:#ff69b4;font-size:28px;margin-bottom:30px;text-align:center}.description-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;text-align:left}.feature-section{background:#ffffff08;padding:25px;border-radius:15px;border:1px solid rgba(255,255,255,.08)}.feature-section h3{color:#87ceeb;font-size:20px;margin-bottom:15px;display:flex;align-items:center;gap:8px}.feature-section ul{list-style:none;padding:0;margin:0}.feature-section li{padding:8px 0 8px 20px;position:relative;line-height:1.5;color:#d0d0d0}.feature-section li:before{content:"✨";position:absolute;left:0;top:8px}.feature-section ol{padding-left:20px;margin:0}.feature-section ol li{padding:8px 0;line-height:1.5;color:#d0d0d0}.members-preview{display:flex;flex-wrap:wrap;gap:15px;margin-top:10px}.member-preview{font-weight:600;font-size:16px;padding:5px 0}.shortcuts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-top:15px}.shortcut-item{display:flex;align-items:center;gap:10px;padding:10px;background:#ffffff0d;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.shortcut-item kbd{background:#333;color:#fff;padding:4px 8px;border-radius:4px;font-family:monospace;font-size:12px;box-shadow:0 2px 4px #0000004d;min-width:40px;text-align:center}.shortcut-item span{color:#b0b0b0;font-size:14px}.compact-content{display:flex;flex-direction:column;gap:16px;max-width:1200px;margin:0 auto;height:calc(100vh - 120px)}.compact-video-section{flex:1;min-height:0}.compact-video-container{position:relative;width:100%;height:100%;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #0000004d;border:1px solid rgba(255,255,255,.1)}.compact-video-info{position:absolute;top:8px;right:8px;background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;padding:4px 8px;border-radius:6px;font-size:12px;display:flex;gap:8px;z-index:10}.compact-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:#ffffff0d;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:12px;padding:12px;border:1px solid rgba(255,255,255,.1);min-height:80px}.compact-member-selector,.compact-cheer-selector{display:flex;align-items:center;gap:8px}.compact-member-selector label,.compact-cheer-selector label{font-size:14px;font-weight:600;color:#fffc;min-width:60px}.compact-member-buttons,.compact-cheer-buttons{display:flex;gap:4px;flex-wrap:wrap}.compact-member-button,.compact-cheer-button{display:flex;align-items:center;gap:4px;padding:6px 8px;border:1px solid;border-radius:8px;background:transparent;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;min-height:32px}.compact-member-button:hover,.compact-cheer-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}.compact-member-button.selected,.compact-cheer-button.selected{transform:scale(1.05);box-shadow:0 2px 8px #0000004d}.shortcut-key{background:#0000004d;color:#fff;padding:2px 4px;border-radius:3px;font-size:10px;font-weight:700;min-width:16px;text-align:center}.member-name-short,.cheer-text-short{font-size:11px;white-space:nowrap}.compact-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.compact-send-button{display:flex;align-items:center;gap:4px;padding:8px 16px;border:none;border-radius:8px;color:#1a1a1a;font-weight:700;font-size:14px;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #0003}.compact-send-button:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000004d}.compact-timed-button{padding:6px 12px;border:1px solid rgba(255,255,255,.3);border-radius:6px;background:#ffffff1a;color:#fff;font-size:12px;cursor:pointer;transition:all .2s ease}.compact-timed-button:hover{background:#fff3}.compact-options{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.compact-toggle{display:flex;align-items:center;gap:4px;font-size:12px;color:#fffc;cursor:pointer}.compact-toggle input[type=checkbox]{margin:0}.compact-shortcuts{width:100%;text-align:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.compact-shortcuts small{color:#fff9;font-size:11px}.header-section{margin-bottom:16px}.header-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.header-controls h1{background:linear-gradient(45deg,#ff69b4,#87ceeb,#32cd32,#ff8c00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:24px;font-weight:800;letter-spacing:1px;margin:0;text-shadow:0 0 3px rgba(255,105,180,.5),0 0 6px rgba(255,105,180,.3);animation:compactTitleGlow 2s ease-in-out infinite alternate}@keyframes compactTitleGlow{0%{text-shadow:0 0 3px rgba(255,105,180,.5),0 0 6px rgba(255,105,180,.3)}to{text-shadow:0 0 5px rgba(135,206,235,.6),0 0 10px rgba(135,206,235,.4)}}.back-button{padding:8px 16px;border:1px solid rgba(255,255,255,.3);border-radius:8px;background:#ffffff1a;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-button:hover{background:#fff3;transform:translateY(-1px)}@media (max-width: 768px){.header-controls{flex-direction:column;gap:8px}.header-controls h1{font-size:20px}}.compact-slider{display:flex;align-items:center;gap:4px;margin-left:8px}.compact-slider input[type=range]{height:4px;background:#fff3;border-radius:2px;outline:none;-webkit-appearance:none;appearance:none}.compact-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 1px 3px #0000004d}.compact-slider input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 1px 3px #0000004d}.compact-slider span{font-size:10px;min-width:30px;text-align:center;color:#fffc}@media (max-width: 768px){.compact-content{height:calc(100vh - 100px);gap:12px}.compact-controls{flex-direction:column;align-items:stretch;min-height:auto}.compact-member-selector,.compact-cheer-selector{flex-direction:column;align-items:flex-start;gap:6px}.compact-actions{margin-left:0;justify-content:center}.compact-options{flex-direction:column;gap:8px;align-items:flex-start}.member-name-short,.cheer-text-short{display:none}.compact-slider{margin-left:0}}.top-page{min-height:100vh;background:linear-gradient(135deg,#0a0a0a,#1a1a2e,#16213e);color:#fff;position:relative}.top-page:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(255,105,180,.08) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(50,205,50,.08) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(255,140,0,.08) 0%,transparent 50%);pointer-events:none;z-index:-1}.top-header{padding:40px 20px 60px;text-align:center;background:#ffffff05;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1)}.header-content{max-width:1200px;margin:0 auto}.main-title{background:linear-gradient(45deg,#ff69b4,#87ceeb,#32cd32,#ff8c00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:48px;font-weight:800;letter-spacing:3px;margin-bottom:16px;animation:neonGlow 2s ease-in-out infinite alternate;display:flex;align-items:center;justify-content:center;gap:12px;text-shadow:0 0 5px rgba(255,105,180,.8),0 0 10px rgba(255,105,180,.6),0 0 15px rgba(255,105,180,.4),0 0 20px rgba(255,105,180,.3),0 0 35px rgba(255,105,180,.2);filter:drop-shadow(0 0 10px rgba(255,105,180,.5))}@keyframes neonGlow{0%{text-shadow:0 0 5px rgba(255,105,180,.8),0 0 10px rgba(255,105,180,.6),0 0 15px rgba(255,105,180,.4),0 0 20px rgba(255,105,180,.3),0 0 35px rgba(255,105,180,.2);filter:drop-shadow(0 0 10px rgba(255,105,180,.5)) brightness(1);transform:scale(1)}to{text-shadow:0 0 8px rgba(135,206,235,.9),0 0 15px rgba(135,206,235,.7),0 0 20px rgba(135,206,235,.5),0 0 25px rgba(135,206,235,.4),0 0 40px rgba(135,206,235,.3);filter:drop-shadow(0 0 15px rgba(135,206,235,.6)) brightness(1.2);transform:scale(1.02)}}.subtitle{font-size:18px;color:#fffc;margin-bottom:32px;font-weight:500}.auth-section{display:flex;justify-content:center;align-items:center;gap:20px}.login-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 32px;background:linear-gradient(135deg,red,#c00);color:#fff;border:none;border-radius:50px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 25px #ff00004d;text-decoration:none}.login-btn:hover{background:linear-gradient(135deg,#c00,#900);transform:translateY(-2px);box-shadow:0 12px 35px #f006}.youtube-icon{font-size:20px}.user-info{display:flex;align-items:center;gap:16px;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50px;padding:12px 24px;border:1px solid rgba(255,255,255,.1)}.welcome-text{color:#87ceeb;font-weight:600}.logout-btn{padding:8px 16px;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:20px;font-size:14px;cursor:pointer;transition:all .3s ease}.logout-btn:hover{background:#fff3}.main-content{max-width:1400px;margin:0 auto;padding:40px 20px}.search-section{margin-bottom:48px}.search-controls{display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap}.search-input-container{position:relative;max-width:400px;flex:1;min-width:280px}.search-input{width:100%;padding:16px 50px 16px 20px;border:2px solid rgba(255,255,255,.1);border-radius:25px;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:16px;outline:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.search-input:focus{border-color:#87ceeb;background:#87ceeb1a;box-shadow:0 0 20px #87ceeb4d;transform:translateY(-2px)}.search-input::placeholder{color:#fff9}.search-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);opacity:.6;pointer-events:none;transition:all .3s ease}.search-input:focus+.search-icon{opacity:1;filter:drop-shadow(0 0 6px #4ecdc4)}.sort-controls{display:flex;align-items:center;gap:12px;color:#fffc;font-weight:500}.sort-select{padding:12px 16px;border:2px solid rgba(255,255,255,.1);border-radius:12px;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:14px;outline:none;cursor:pointer}.sort-select:focus{border-color:#87ceeb}.section-title{font-size:32px;font-weight:700;text-align:center;margin-bottom:40px;background:linear-gradient(45deg,#ff69b4,#87ceeb,#32cd32);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:1px;display:flex;align-items:center;justify-content:center;gap:12px;text-shadow:0 0 3px rgba(255,105,180,.6),0 0 6px rgba(255,105,180,.4),0 0 9px rgba(255,105,180,.3),0 0 12px rgba(255,105,180,.2);filter:drop-shadow(0 0 8px rgba(255,105,180,.4));animation:sectionNeonGlow 3s ease-in-out infinite alternate}@keyframes sectionNeonGlow{0%{text-shadow:0 0 3px rgba(255,105,180,.6),0 0 6px rgba(255,105,180,.4),0 0 9px rgba(255,105,180,.3),0 0 12px rgba(255,105,180,.2);filter:drop-shadow(0 0 8px rgba(255,105,180,.4))}to{text-shadow:0 0 5px rgba(135,206,235,.7),0 0 10px rgba(135,206,235,.5),0 0 15px rgba(135,206,235,.4),0 0 18px rgba(135,206,235,.3);filter:drop-shadow(0 0 12px rgba(135,206,235,.5))}}.mv-grid-section{margin-bottom:80px}.mv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px;padding:0 20px}.mv-card{position:relative;background:#ffffff0d;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:20px;overflow:hidden;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0003}.mv-card:after{content:"▶️ クリックして視聴開始";position:absolute;bottom:-40px;left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;visibility:hidden;transition:all .3s ease;z-index:1000;pointer-events:none}.mv-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 60px #0006;border-color:#ff69b44d}.mv-card:hover:after{opacity:1;visibility:visible;bottom:-35px}.mv-thumbnail{position:relative;width:100%;height:180px;overflow:hidden}.mv-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.mv-card:hover .mv-thumbnail img{transform:scale(1.1)}.play-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0000004d;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.mv-card:hover .play-overlay{opacity:1}.play-button{display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:#ffffffe6;border-radius:50%;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.play-overlay:hover .play-button{background:#fff;transform:scale(1.1);box-shadow:0 4px 20px #ffffff4d}.duration-badge{position:absolute;bottom:8px;right:8px;background:#000c;color:#fff;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:600}.mv-info{padding:20px}.mv-title{font-size:18px;font-weight:700;margin-bottom:8px;color:#fff;line-height:1.3;text-shadow:0 0 2px rgba(255,255,255,.5),0 0 4px rgba(255,105,180,.3),0 0 6px rgba(255,105,180,.2);transition:all .3s ease}.mv-card:hover .mv-title{text-shadow:0 0 3px rgba(255,255,255,.8),0 0 6px rgba(255,105,180,.5),0 0 9px rgba(255,105,180,.3),0 0 12px rgba(255,105,180,.2);color:#fff;transform:translateY(-1px)}.mv-artist{font-size:14px;color:#87ceeb;font-weight:600;margin-bottom:6px;text-shadow:0 0 2px rgba(135,206,235,.4),0 0 4px rgba(135,206,235,.2);transition:all .3s ease}.mv-card:hover .mv-artist{text-shadow:0 0 3px rgba(135,206,235,.6),0 0 6px rgba(135,206,235,.3);color:#87ceeb}.mv-release-date{font-size:13px;color:#fff9;margin:0}.member-count-badge{display:inline-flex;align-items:center;gap:4px;background:#ffffff1a;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:600;margin:8px 0;text-shadow:0 1px 2px rgba(0,0,0,.3)}.mv-description{font-size:13px;color:#ffffffb3;margin:8px 0;line-height:1.4;font-style:italic}.features-section{margin-bottom:60px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;padding:0 20px}.feature-card{background:#ffffff0d;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:20px;padding:32px 24px;text-align:center;border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.feature-card:hover{background:#ffffff14;transform:translateY(-4px);box-shadow:0 12px 40px #0000004d}.feature-icon{width:80px;height:80px;background:linear-gradient(135deg,#ff69b41a,#4ecdc41a);border:2px solid rgba(255,255,255,.1);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;transition:all .3s ease;color:#4ecdc4}.feature-card:hover .feature-icon{background:linear-gradient(135deg,#ff69b433,#4ecdc433);border-color:#ffffff4d;transform:translateY(-5px) scale(1.05);color:#ff69b4;box-shadow:0 10px 30px #ff69b433}.feature-card h3{font-size:20px;font-weight:700;margin-bottom:12px;color:#fff;text-shadow:0 0 2px rgba(255,255,255,.4),0 0 4px rgba(78,205,196,.3),0 0 6px rgba(78,205,196,.2);transition:all .3s ease}.feature-card:hover h3{text-shadow:0 0 3px rgba(255,255,255,.6),0 0 6px rgba(78,205,196,.5),0 0 9px rgba(78,205,196,.3),0 0 12px rgba(78,205,196,.2);color:#4ecdc4;transform:translateY(-1px)}.feature-card p{color:#fffc;line-height:1.6;margin:0}.top-footer{background:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);padding:32px 20px;text-align:center}.top-footer p{color:#fff9;margin:0;font-size:14px}.title-icon{vertical-align:middle;margin:0 8px;filter:drop-shadow(0 0 10px rgba(255,105,180,.5));animation:iconFloat 3s ease-in-out infinite}@keyframes iconFloat{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-3px) rotate(5deg)}50%{transform:translateY(-5px) rotate(0)}75%{transform:translateY(-3px) rotate(-5deg)}}.section-icon{vertical-align:middle;margin-right:12px;filter:drop-shadow(0 0 8px currentColor)}.youtube-icon{margin-right:8px;vertical-align:middle}@media (max-width: 768px){.main-title{font-size:36px;letter-spacing:2px}.subtitle{font-size:16px}.search-controls{flex-direction:column;gap:16px}.sort-controls,.filter-controls{justify-content:center}.search-input-container{max-width:none}.mv-grid{grid-template-columns:1fr;gap:24px;padding:0 10px}.features-grid{grid-template-columns:1fr;padding:0 10px}.section-title{font-size:28px}.auth-section{flex-direction:column;gap:12px}.user-info{flex-direction:column;text-align:center;gap:8px}}@media (max-width: 480px){.main-title{font-size:28px}.top-header{padding:24px 15px 40px}.main-content{padding:24px 15px}.mv-grid,.features-grid{padding:0 5px}}