@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";html{scroll-behavior:smooth}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#2d3748;min-height:100vh;overflow-x:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#4a5568}::-webkit-scrollbar-thumb{background:#718096;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a0aec0}::selection{background:#667eea;color:#fff}::-moz-selection{background:#667eea;color:#fff}:root{--bg: #05070b;--neon: #1ec8ff;--neon-2: #2a6dff;--glow-dim: rgba(30, 200, 255, .22);--panel: rgba(255, 255, 255, .04);--panel-border: #1ec8ff38;--text: rgba(255, 255, 255, .92);--muted: rgba(255, 255, 255, .7);--ok-status: #41f699;--fail-status: #f45c5c;--process-status: #f9d464}.mood-player{background:transparent;padding:20px;display:flex;flex-direction:column;align-items:center;gap:22px}.mood-container{display:flex;align-items:center;justify-content:center;gap:45px}.video-container{position:relative;border-radius:14px;padding:8px;background:var(--panel);border:1px solid var(--panel-border);box-shadow:0 0 15px var(--glow-dim);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.video-container video{width:520px;height:340px;border-radius:10px;object-fit:cover;background:#000}.video-container canvas{position:absolute;top:8px;left:8px;border-radius:10px;pointer-events:none}.mood-button{background:linear-gradient(135deg,var(--neon),var(--neon-2));border:none;border-radius:10px;padding:12px 26px;color:#001018;font-size:1rem;font-weight:600;cursor:pointer;min-width:150px;box-shadow:0 0 18px var(--glow-dim);transition:transform .2s ease,box-shadow .2s ease;font-family:Overall-font,sans-serif;font-weight:400}.mood-button:hover{transform:translateY(-1px);box-shadow:0 0 28px var(--glow-dim)}.mood-button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.mood-result{background:var(--panel);border-radius:12px;padding:18px;text-align:center;border:1px solid var(--panel-border);color:var(--text);box-shadow:0 0 18px var(--glow-dim)}.mood-result h3{margin:0;font-size:1.25rem}.mood-result.error{border-color:#ff4d4d;box-shadow:0 0 18px #ff4d4d59}.mood-result.error h3{color:#ff7a7a}.mood-result.error p{color:var(--muted)}@media (max-width: 820px){.mood-player{gap:15px}.mood-container{display:block}.video-container video{width:520px;height:310px}.camera-btn{padding:8x 16px;font-size:.6rem}.mood-button{padding:10px 20px;font-size:.9rem;min-width:120px}}@media (max-width: 480px){.mood-player{gap:12px}.mood-container{display:block}.video-container video{width:240px;height:180px}.camera-btn{padding:6px 13px;font-size:.6rem;min-width:80px}.mood-button{padding:8px 16px;font-size:.85rem;min-width:100px}}.mood-display{display:flex;flex-direction:column;align-items:center;gap:26px}.status-indicator{display:flex;align-items:center;gap:10px;padding:8px 18px;background:var(--panel);border-radius:999px;border:1px solid var(--panel-border)}.status-dot{width:10px;height:10px;border-radius:50%;background:#3dff9b;box-shadow:0 0 10px currentColor}.status-dot.offline,.status-dot.Camera{background:#ff4d4d;box-shadow:0 0 14px var(--fail-status)}.status-dot.processing{background:#ffd24d;box-shadow:0 0 14px var(--process-status)}.status-text{color:var(--muted);font-size:.85rem}.mood-result{background:var(--panel);border-radius:12px;padding:22px;text-align:center;border:1px solid var(--panel-border);min-width:220px;box-shadow:0 0 20px var(--glow-dim)}.mood-result h3{color:var(--text);font-size:1.4rem}.instructions{background:var(--panel);border-radius:12px;padding:22px;border:1px solid var(--panel-border);min-width:160px;min-height:230px;box-shadow:0 0 20px var(--glow-dim)}.instructions h3{color:var(--text);font-size:1.2rem;margin-bottom:14px;text-align:center}.instructions ol{color:var(--muted);font-size:.9rem;line-height:1.6}.instructions li{margin-bottom:8px}.instructions li:last-child{margin-bottom:0}.button-container{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:12px}.camera-btn{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:12px 26px;font-size:1rem;font-weight:600;min-width:150px;color:var(--text);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .2s ease,box-shadow .2s ease;font-family:Overall-font,sans-serif;font-weight:400;transition:border-color .2s ease,box-shadow .2s ease}.camera-btn:hover{transform:translateY(-1px);box-shadow:0 0 28px var(--glow-dim)}@media (max-width: 820px){.mood-display{gap:20px}.mood-result,.instructions{min-width:180px;padding:16px}.mood-result h3{font-size:1.2rem}.instructions h3{font-size:1.1rem}.button-container{display:flex;justify-content:space-between}}@media (max-width: 480px){.mood-display{gap:15px}.mood-result{min-width:160px;padding:14px}.mood-result p{font-size:.75rem}.instructions{display:none}.mood-result h3{font-size:1.1rem}.instructions h3{font-size:1rem}.instructions ol{font-size:.85rem}}.mood-songs{background:var(--panel);border-radius:16px;padding:32px;margin:0;border:1px solid var(--panel-border);box-shadow:0 0 35px var(--glow-dim);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.mood-songs h2{color:var(--text);font-size:1.9rem;font-weight:600;text-align:center;margin-bottom:28px;position:relative;padding-bottom:14px}.mood-songs h2:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:64px;height:3px;background:linear-gradient(90deg,var(--neon),var(--neon-2));border-radius:4px;box-shadow:0 0 12px var(--glow-dim)}.mood-songs .songs-container{display:grid;gap:22px;max-width:820px;margin:0 auto}.mood-songs .empty-state{text-align:center;padding:42px 20px;color:var(--muted)}.mood-songs .empty-state h3{font-size:1.35rem;margin-bottom:14px;color:var(--text)}.mood-songs .empty-state p{font-size:1rem;line-height:1.6}.mood-songs .loading{text-align:center;padding:42px}.mood-songs .loading .spinner{width:32px;height:32px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top:3px solid var(--neon);box-shadow:0 0 14px var(--glow-dim);margin:0 auto 20px}@media (max-width: 768px){.mood-songs{padding:26px 22px}.mood-songs h2{font-size:1.6rem}}@media (max-width: 480px){.mood-songs{padding:22px 16px}.mood-songs h2{font-size:1.4rem}}*{margin:0;padding:0;box-sizing:border-box}@font-face{font-family:Heading-font;src:url(/assets/NeueMachina-Ultrabold.woff2) format("woff2");font-weight:800;font-style:normal}@font-face{font-family:Overall-font;src:url(/assets/Manrope-VariableFont_wght.woff2) format("woff2");font-weight:400;font-style:normal}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:radial-gradient(900px 500px at 20% 10%,rgba(30,200,255,.12),transparent 60%),var(--bg);min-height:100vh;color:var(--text);line-height:1.6;font-family:Overall-font,sans-serif;font-weight:400}.main{min-height:100vh;padding:22px;display:flex;flex-direction:column;gap:22px;max-width:1200px;margin:0 auto}.project{font-family:Heading-font,sans-serif;font-weight:800;text-align:center;font-size:118px;color:transparent;background-clip:text;-webkit-background-clip:text;letter-spacing:6px;background-image:linear-gradient(to bottom,#fff 35%,#070707);margin-bottom:-21px}.project-des{font-family:Overall-font,sans-serif;font-weight:400;text-align:center;font-size:21px;color:#adadaf;margin-bottom:-14px}.main-content{display:flex;gap:32px}.video-section{flex:1;background:radial-gradient(700px 420px at 30% 30%,rgba(30,200,255,.14),transparent 55%),var(--panel);border-radius:16px;padding:26px;border:1px solid var(--panel-border);box-shadow:0 0 9px var(--glow-dim);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.mood-section{flex:1;background:radial-gradient(600px 380px at 70% 30%,rgba(42,109,255,.18),transparent 60%),var(--panel);border-radius:16px;padding:26px;border:1px solid var(--panel-border);box-shadow:0 0 30px var(--glow-dim);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;justify-content:center;align-items:center}@media (max-width: 830px){.project{font-size:90px}.project-des{font-size:20px}.main-content{flex-direction:column;gap:22px}.video-section,.mood-section{padding:22px}}@media (max-width: 768px){.project{font-size:90px}}@media (max-width: 480px){.main{padding:12px;gap:12px}.app-header{padding:10px 3px}.project{font-size:43px;margin-bottom:0}.project-des{font-size:13px}.main-content{gap:16px}.video-section,.mood-section{padding:18px}}@media (max-width: 393px){.project{font-size:40px;margin-bottom:0}.project-des{font-size:12px}}@media (max-width: 350px){.project{font-size:34px;margin-bottom:0}.project-des{font-size:10px}}.song{background:var(--panel);border-radius:14px;padding:22px 10px 22px 22px;margin:16px 0;border:1px solid var(--panel-border);box-shadow:0 0 22px var(--glow-dim);display:flex;align-items:center;justify-content:space-between;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.song:hover{transform:translateY(-1px);border-color:var(--neon);box-shadow:0 0 30px var(--glow-dim)}.song .title{margin-bottom:6px}.song .title h3{color:var(--text);font-size:1.6rem;font-weight:700;margin:0 0 6px;letter-spacing:.4px}.song .title p{color:var(--muted);font-size:.95rem;margin:0}.play-pause-button{display:flex;justify-content:center;align-items:center;padding-right:22px}.play-pause-button button{background:linear-gradient(135deg,var(--neon),var(--neon-2));border:none;border-radius:50%;width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;color:#001018;cursor:pointer;box-shadow:0 0 18px var(--glow-dim);transition:transform .15s ease,box-shadow .15s ease}.play-pause-button button:hover{transform:scale(1.05);box-shadow:0 0 28px var(--glow-dim)}.play-pause-button button:active{transform:scale(.95)}.song.playing{border-color:var(--neon);box-shadow:0 0 35px var(--glow-dim)}@media (max-width: 768px){.song{padding:18px;margin:12px 0}.song .title h3{font-size:1.2rem}.song .title p{font-size:.9rem}.play-pause-button button{width:46px;height:46px;font-size:1.05rem}}