@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap";:root{--bg: #0a0a0c;--surface: #111114;--surface2: #18181c;--surface3: #222228;--text: #e8e8ec;--text2: #8a8a96;--accent: #ff4d6a;--accent2: #ff6b81;--accent-glow: rgba(255, 77, 106, .15);--radius: 16px;--ipod-body-top: #e8e8ea;--ipod-body-mid: #d0d0d4;--ipod-body-bot: #b8b8bc;--ipod-bezel: #1a1a1e;--ipod-screen-bg: #111114;--wheel-bg: #d0d0d4;--wheel-center: #e4e4e8;--wheel-text: #555;--ipod-width: 340px;--wheel-size: 200px;--center-size: 72px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none}body{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center}#root{width:100%;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:4px}.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% 25%,rgba(255,77,106,.18) 0%,transparent 55%),radial-gradient(ellipse at 25% 75%,rgba(100,60,180,.12) 0%,transparent 45%),radial-gradient(ellipse at 75% 80%,rgba(255,140,60,.1) 0%,transparent 45%)}.app{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:24px 16px}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes eq{to{height:100%}}@keyframes vinylSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes equalizeSm{0%,to{height:4px}50%{height:14px}}.fade-up{opacity:0;transform:translateY(16px);animation:fadeUp .6s ease forwards}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.ipod-body{width:var(--ipod-width);background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(255,255,255,.03) 1px,rgba(255,255,255,.03) 2px),radial-gradient(ellipse at 50% -20%,rgba(255,255,255,.35) 0%,transparent 60%),linear-gradient(180deg,#d8d8dc,#c4c4c8,#b8b8be,#a8a8b0,#9a9aa2);border-radius:30px;padding:20px 18px 28px;box-shadow:0 40px 100px #0009,0 10px 30px #0000004d,0 2px #ffffff80 inset,0 -2px #00000026 inset,2px 0 #ffffff26 inset,-2px 0 #ffffff26 inset,0 0 0 1px #0003;display:flex;flex-direction:column;align-items:center;gap:20px;animation:fadeUp .6s ease forwards;position:relative}.ipod-body:after{content:"";position:absolute;bottom:-40px;left:10%;width:80%;height:40px;background:radial-gradient(ellipse at 50% 0%,rgba(200,200,210,.25) 0%,transparent 70%);pointer-events:none;filter:blur(6px)}.ipod-body:before{content:"iPod";position:absolute;top:8px;left:50%;transform:translate(-50%);font-size:.6rem;font-weight:600;letter-spacing:.1em;color:#0000002e;text-transform:uppercase;z-index:1}.ipod-screen{width:100%;height:260px;background:var(--ipod-screen-bg);border-radius:6px;overflow:hidden;position:relative;box-shadow:0 0 0 2px var(--ipod-bezel),inset 0 1px 3px #00000080}.screen-now-playing,.screen-menu{position:absolute;inset:0;visibility:hidden;pointer-events:none}.screen-now-playing.active,.screen-menu.active{position:relative;visibility:visible;pointer-events:auto}.screen-now-playing{display:flex;flex-direction:column}.screen-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:linear-gradient(180deg,#3a3a44,#2a2a32);font-size:.68rem;font-weight:500;color:#ccc;flex-shrink:0}.screen-header-title{font-weight:600;letter-spacing:.02em}.mood-selector{display:flex;gap:3px}.mood-pill{background:transparent;border:1px solid rgba(255,255,255,.12);color:#999;font-size:.55rem;font-weight:500;padding:1px 7px;border-radius:6px;cursor:pointer;transition:all .2s;line-height:1.4;font-family:inherit;-webkit-tap-highlight-color:transparent}.mood-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}.mood-pill:hover:not(.active){border-color:#ffffff40;color:#ccc}.screen-header-idx{font-family:Space Mono,monospace;font-size:.6rem;color:#999}.screen-video{flex:1;position:relative;background:#000;min-height:0}.screen-video .video-wrapper{width:100%;height:100%;transition:opacity .3s}.screen-video .video-wrapper.resolving{opacity:.3}.screen-video iframe{width:100%;height:100%;border:none}.screen-track-bar{padding:6px 10px 8px;background:linear-gradient(180deg,#1e1e24,#161618);flex-shrink:0}.screen-track-title{font-size:.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}.screen-track-meta{display:flex;align-items:center;gap:6px;margin-top:1px;min-width:0}.screen-track-artist{font-size:.65rem;color:var(--text2);font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.screen-track-genre{font-size:.5rem;color:var(--accent2);background:#ff6b811a;padding:0 5px;border-radius:4px;white-space:nowrap;flex-shrink:0;line-height:1.5}.screen-track-reason{font-size:.55rem;color:var(--accent);font-weight:300;font-style:italic;margin-top:3px;opacity:.85;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.screen-menu{display:flex;flex-direction:column}.screen-menu .screen-header{background:linear-gradient(180deg,#3a3a44,#2a2a32)}.screen-menu-list{flex:1;overflow-y:auto;min-height:0}.screen-menu-item{display:flex;align-items:center;gap:10px;padding:7px 10px;cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(255,255,255,.04);-webkit-tap-highlight-color:transparent}.screen-menu-item:hover{background:#ff4d6a1a}.screen-menu-item:active{background:var(--accent);color:#fff}.screen-menu-item:active .menu-item-artist{color:#ffffffb3}.menu-item-idx{font-family:Space Mono,monospace;font-size:.6rem;color:var(--text2);width:18px;text-align:center;flex-shrink:0}.menu-item-thumb{width:30px;height:30px;border-radius:3px;object-fit:cover;flex-shrink:0;background:var(--surface3)}.menu-item-info{flex:1;min-width:0}.menu-item-title{font-size:.72rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-item-artist{font-size:.6rem;color:var(--text2);font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-item-like{background:none;border:none;color:var(--text2);cursor:pointer;padding:4px;flex-shrink:0;transition:color .2s;-webkit-tap-highlight-color:transparent}.menu-item-like.liked{color:var(--accent)}.screen-loading{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.screen-loading .vinyl-container,.screen-loading .vinyl{width:80px;height:80px}.video-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0c99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.loading-equalizer{display:flex;align-items:flex-end;gap:4px;height:18px}.loading-equalizer span{width:3px;border-radius:2px;background:var(--accent);animation:equalizeSm 1s ease-in-out infinite}.loading-equalizer span:nth-child(1){animation-delay:0s}.loading-equalizer span:nth-child(2){animation-delay:.15s}.loading-equalizer span:nth-child(3){animation-delay:.3s}.loading-equalizer span:nth-child(4){animation-delay:.45s}.loading-equalizer span:nth-child(5){animation-delay:.6s}.screen-auth{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;gap:6px}.screen-auth .auth-title{font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,var(--accent),#ff9a5c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.screen-auth .auth-subtitle{color:var(--text2);font-size:.65rem;margin-bottom:8px}.screen-auth .auth-form{display:flex;flex-direction:column;gap:6px;width:100%}.screen-auth .auth-input{background:var(--surface);border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:8px 10px;color:var(--text);font-size:.72rem;outline:none;transition:border-color .2s}.screen-auth .auth-input:focus{border-color:var(--accent)}.screen-auth .auth-input::placeholder{color:var(--text2)}.screen-auth .auth-btn{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:8px;font-size:.72rem;font-weight:600;cursor:pointer;transition:opacity .2s;margin-top:2px}.screen-auth .auth-btn:hover{opacity:.9}.screen-auth .auth-btn:disabled{opacity:.5;cursor:default}.screen-auth .auth-error{color:var(--accent);font-size:.65rem;text-align:center}.screen-auth .auth-switch{background:none;border:none;color:var(--text2);font-size:.6rem;cursor:pointer;padding:4px;transition:color .2s}.screen-auth .auth-switch:hover{color:var(--text)}.vinyl-container{position:relative;width:80px;height:80px;animation:fadeUp .6s ease forwards}.vinyl{width:80px;height:80px;border-radius:50%;background:conic-gradient(from 0deg,#1a1a2e,#2a2a3e,#1a1a2e,#2a2a3e,#1a1a2e,#2a2a3e,#1a1a2e,#2a2a3e,#1a1a2e,#2a2a3e,#1a1a2e,#2a2a3e,#1a1a2e 360deg);animation:vinylSpin 3s linear infinite;box-shadow:0 0 30px #ff4d6a26,inset 0 0 20px #00000080}.vinyl:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ff9a5c);box-shadow:0 0 14px #ff4d6a66}.vinyl:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:var(--bg)}.loading-text{font-size:.72rem;color:var(--text2);text-align:center;animation:pulse 2s ease-in-out infinite}.click-wheel{width:var(--wheel-size);height:var(--wheel-size);border-radius:50%;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.15) 0%,transparent 50%),linear-gradient(180deg,#c8c8cc,#b4b4b8 40%,#a4a4a8);position:relative;box-shadow:0 4px 12px #0003,inset 0 2px #fff6,inset 0 -2px #0000001a,0 0 0 1px #00000014;-webkit-user-select:none;user-select:none;flex-shrink:0}.wheel-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--center-size);height:var(--center-size);border-radius:50%;background:var(--wheel-center);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;box-shadow:0 1px 4px #0000001f,inset 0 1px #fff9;transition:all .15s;z-index:2;-webkit-tap-highlight-color:transparent}.wheel-center:active{transform:translate(-50%,-50%) scale(.95);box-shadow:0 0 2px #00000026}.wheel-center.liked{color:var(--accent)}.wheel-btn{position:absolute;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--wheel-text);font-weight:600;z-index:1;transition:all .15s;-webkit-tap-highlight-color:transparent}.wheel-btn:active{opacity:.5}.wheel-btn-menu{top:10px;left:50%;transform:translate(-50%);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:8px 16px}.wheel-btn-prev{left:12px;top:50%;transform:translateY(-50%);padding:16px 8px}.wheel-btn-next{right:12px;top:50%;transform:translateY(-50%);padding:16px 8px}.wheel-btn-play{bottom:10px;left:50%;transform:translate(-50%);padding:8px 16px}.ipod-footer{display:flex;align-items:center;justify-content:center;gap:20px;padding:16px 0 8px}.history-link{color:var(--text2);font-size:.75rem;text-decoration:none;transition:color .2s}.history-link:hover{color:var(--accent)}.logout-btn{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--text2);font-size:.75rem;cursor:pointer;transition:color .2s}.logout-btn:hover{color:var(--accent)}@media(max-width:400px){:root{--ipod-width: 300px;--wheel-size: 170px;--center-size: 60px}.ipod-body{padding:16px 14px 24px;border-radius:26px}.ipod-screen{height:220px}.screen-header{padding:5px 8px;font-size:.6rem}.screen-track-bar{padding:5px 8px 6px}.screen-track-title{font-size:.7rem}.mood-pill{font-size:.5rem;padding:1px 5px}.wheel-btn-menu{font-size:.6rem;top:8px}.screen-menu-item{padding:5px 8px}}.history-app{max-width:960px;margin:0 auto;padding:24px 16px 80px;padding-top:calc(24px + env(safe-area-inset-top,0px));min-height:100dvh}.history-loading{display:flex;align-items:center;justify-content:center;min-height:60vh;color:var(--text2);font-size:1rem}.history-header{display:flex;align-items:center;gap:16px;margin-bottom:32px}.history-back{color:var(--accent);text-decoration:none;font-size:.88rem;font-weight:500;padding:6px 14px;border-radius:20px;background:var(--surface2);transition:all .2s;flex-shrink:0}.history-back:hover{background:var(--surface3)}.history-title{font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,var(--accent),#ff9a5c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:36px}.stat-card{background:var(--surface);border:1px solid rgba(255,255,255,.04);border-radius:12px;padding:16px;text-align:center}.stat-value{font-family:Space Mono,monospace;font-size:1.6rem;font-weight:700;color:var(--text)}.stat-label{font-size:.72rem;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}.history-section{margin-bottom:36px}.section-heading{font-size:1rem;font-weight:600;margin-bottom:4px}.section-desc{font-size:.75rem;color:var(--text2);margin-bottom:16px}.history-table-wrap{overflow:auto;border-radius:12px;border:1px solid rgba(255,255,255,.04);max-height:400px}.history-table{width:100%;border-collapse:collapse;font-size:.82rem}.history-table thead{background:var(--surface);position:sticky;top:0;z-index:1}.history-table th{text-align:left;padding:10px 12px;font-size:.7rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.history-table td{padding:10px 12px;border-top:1px solid rgba(255,255,255,.03);white-space:nowrap}.history-table tbody tr{transition:background .15s}.history-table tbody tr:hover{background:var(--surface)}.row-skipped{opacity:.55}.col-idx{font-family:Space Mono,monospace;color:var(--text2);width:36px}.col-song{font-weight:500;max-width:200px;overflow:hidden;text-overflow:ellipsis}.col-artist{color:var(--text2);font-weight:300;max-width:160px;overflow:hidden;text-overflow:ellipsis}.col-dur{font-family:Space Mono,monospace;color:var(--text2)}.col-like{text-align:center}.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:.7rem;font-weight:600}.badge.listened{background:#22c55e26;color:#22c55e}.badge.skipped{background:#ff4d6a1f;color:var(--accent)}.liked-list{display:flex;flex-wrap:wrap;gap:8px}.liked-item{background:var(--surface);border:1px solid rgba(255,255,255,.04);border-radius:20px;padding:6px 14px;font-size:.82rem}.prompt-accordion{margin-bottom:8px;border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden}.accordion-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--surface);border:none;color:var(--text);font-size:.82rem;font-weight:500;cursor:pointer;transition:background .15s}.accordion-toggle:hover{background:var(--surface2)}.accordion-toggle.open{border-bottom:1px solid rgba(255,255,255,.04)}.accordion-arrow{font-size:1.1rem;color:var(--text2);font-weight:300}.prompt-block{margin:0;padding:16px;background:#0000004d;font-family:Space Mono,SF Mono,Fira Code,monospace;font-size:.72rem;line-height:1.6;color:var(--text2);white-space:pre-wrap;word-wrap:break-word;max-height:400px;overflow-y:auto}@media(max-width:600px){.stats-grid{grid-template-columns:repeat(2,1fr)}.col-song,.col-artist{max-width:120px}}