*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-outer: #ece8e2;--bg-surface: #faf8f5;--bg-elevated: #ffffff;--bg-hover: #f3efe9;--accent: #b85c3e;--accent-dim: #9e4e34;--accent-glow: rgba(184, 92, 62, .1);--accent-glow-strong: rgba(184, 92, 62, .2);--text-primary: #1c1917;--text-secondary: #6c6560;--text-muted: #a8a29e;--border: #e7e2dc;--border-active: #d4cfc7;--radius-sm: 6px;--radius: 12px;--radius-lg: 16px;--font-display: "Syne", Georgia, sans-serif;--font-body: "Outfit", -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--ease-out: cubic-bezier(.23, 1, .32, 1);--ease-in-out: cubic-bezier(.77, 0, .175, 1);--transition: .2s var(--ease-out)}html{background:var(--bg-outer);color:var(--text-primary);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;height:100%}body{overflow:hidden;height:100%}#root{height:100%}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:var(--font-body)}.app-frame{max-width:640px;margin:0 auto;height:100dvh;background:var(--bg-surface);position:relative;z-index:1;overflow-y:auto;scrollbar-width:thin}@media (min-width: 720px){.app-frame{max-width:680px;padding:0 24px}}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");pointer-events:none;z-index:0}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.1;color:var(--text-primary)}h1{font-size:2.25rem;letter-spacing:-.02em}h2{font-size:1.6rem}h3{font-size:1.15rem}.app-container{position:relative;z-index:1;padding:0 20px;width:100%}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-active);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse-accent{0%,to{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 12px 2px var(--accent-glow-strong)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes spin{to{transform:rotate(360deg)}}.animate-in{animation:fadeInUp .55s var(--ease-out) both}.stagger-1{animation-delay:.05s}.stagger-2{animation-delay:.1s}.stagger-3{animation-delay:.15s}.stagger-4{animation-delay:.2s}.stagger-5{animation-delay:.25s}.stagger-6{animation-delay:.3s}.stagger-7{animation-delay:.35s}.stagger-8{animation-delay:.4s}.loading-skeleton{background:linear-gradient(90deg,var(--bg-hover) 25%,var(--border) 50%,var(--bg-hover) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}.skeleton-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--border)}.skeleton-thumb{width:44px;height:44px;flex-shrink:0}.skeleton-meta{flex:1}.skeleton-line{border-radius:4px}.skeleton-line-title{height:14px;width:60%;margin-bottom:6px}.skeleton-line-sub{height:12px;width:40%}.now-playing-bar{display:block;position:sticky;top:0;z-index:100;background:#faf8f5eb;backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);border-bottom:1px solid var(--border);text-decoration:none;color:inherit;transition:background-color .18s var(--ease-out)}.now-playing-bar:hover{background:#fffffff2}.now-playing-bar:hover .now-playing-arrow{transform:translate(3px);color:var(--accent)}.now-playing-inner{display:flex;align-items:center;gap:14px;padding:12px 20px}.now-playing-art-wrap{position:relative;flex-shrink:0}.now-playing-art{width:44px;height:44px;border-radius:var(--radius-sm);object-fit:cover;background:var(--bg-hover);box-shadow:0 2px 8px #0000000f}.now-playing-art-placeholder{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--bg-hover)}.now-playing-live-dot{position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-surface);animation:pulse-accent 2.2s infinite}.now-playing-track{flex:1;min-width:0}.now-playing-track .title{font-size:.95rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}.now-playing-track .artist{font-size:.78rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing-arrow{font-size:1.1rem;color:var(--text-muted);font-weight:300;transition:transform .18s var(--ease-out),color .18s var(--ease-out)}.app-header{padding:40px 0 28px}.app-header h1{font-family:var(--font-display);font-size:2.6rem;font-weight:800;letter-spacing:-.03em;color:var(--text-primary)}.app-header .subtitle{margin-top:6px;color:var(--text-muted);font-size:.9rem;font-weight:400;letter-spacing:.01em}.track-list{display:flex;flex-direction:column;padding-bottom:48px}.track-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer;text-decoration:none;color:inherit;transition:background-color .18s var(--ease-out),padding-left .18s var(--ease-out),transform .16s var(--ease-out)}.track-row:last-child{border-bottom:none}.track-row:hover{padding-left:4px}.track-row:hover .track-thumb{transform:scale(1.04)}.track-row:active{transform:scale(.98)}.track-thumb{width:44px;height:44px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0;background:var(--bg-hover);transition:transform .2s var(--ease-out)}.track-thumb-placeholder{width:44px;height:44px;border-radius:var(--radius-sm);flex-shrink:0;background:var(--bg-hover)}.track-meta{flex:1;min-width:0}.track-meta .title{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.track-meta .artist{font-size:.8rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-row .track-date{font-size:.7rem;color:var(--text-muted);white-space:nowrap;flex-shrink:0;font-family:var(--font-mono)}.track-row.now-playing-row{border-left:2px solid var(--accent);padding-left:10px;margin-left:-12px;background:linear-gradient(90deg,var(--accent-glow) 0%,transparent 60%)}.track-row.now-playing-row .track-thumb{box-shadow:0 0 0 1.5px var(--accent-glow-strong)}.track-analyzed-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle}.track-pending-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--text-muted);margin-right:8px;vertical-align:middle;animation:pulse-accent 2s infinite}.track-detail{padding-bottom:48px}.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);font-size:.85rem;margin:20px 0 24px;transition:color .18s var(--ease-out),transform .16s var(--ease-out)}.back-link:hover{color:var(--text-primary)}.back-link:active{transform:scale(.97)}.track-detail-header{margin-bottom:32px}.track-detail-art{width:160px;height:160px;border-radius:var(--radius-lg);object-fit:cover;margin-bottom:20px;background:var(--bg-hover);box-shadow:0 4px 20px #00000014,0 0 0 1px var(--border)}.track-detail-header h1{font-size:1.9rem;font-weight:700;margin-bottom:4px;line-height:1.2}.track-detail-header .artist-name{font-size:1rem;color:var(--accent);font-weight:500;letter-spacing:.01em}.track-detail-header .album-name{font-size:.8rem;color:var(--text-muted);margin-top:4px}.verse-item{position:relative}.verse-block{margin-bottom:8px;padding:16px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:background-color .18s var(--ease-out),border-color .18s var(--ease-out),box-shadow .18s var(--ease-out),border-radius .18s var(--ease-out),transform .16s var(--ease-out)}.verse-block:hover{background:var(--bg-hover);border-color:var(--border)}.verse-block:active{transform:scale(.98)}.verse-block.active{background:var(--bg-elevated);border-color:var(--border-active);border-bottom-color:transparent;border-radius:var(--radius) var(--radius) 0 0;box-shadow:0 -2px 12px #00000005,0 4px 20px #0000000f;z-index:10;margin-bottom:0}.verse-block.active.sticky{position:sticky;top:70px;scroll-margin-top:70px}.verse-block.active .verse-label{color:var(--accent)}.verse-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-bottom:10px;font-family:var(--font-body)}.verse-toggle{margin-left:8px;font-size:.65rem;opacity:.6;transition:transform .2s var(--ease-out),opacity .15s ease;display:inline-block}.verse-block.active .verse-toggle{transform:rotate(0);opacity:1}.verse-lines{font-family:var(--font-mono);font-size:.85rem;line-height:2;color:var(--text-primary);white-space:pre-line}.explanation-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease-out)}.explanation-wrapper.open{grid-template-rows:1fr}.explanation-inner{min-height:0;opacity:0;transform:translateY(-10px);background:var(--bg-elevated);border:1px solid var(--border-active);border-top:none;border-radius:0 0 var(--radius) var(--radius);padding:10px 16px 20px;margin-bottom:24px;transition:opacity .22s ease-out 50ms,transform .28s var(--ease-out) 50ms}.explanation-wrapper.open .explanation-inner{opacity:1;transform:translateY(0)}.explanation-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:8px}.explanation-inner p{font-size:.9rem;line-height:1.7;color:var(--text-secondary)}.overview-section{margin-top:40px;display:flex;flex-direction:column;gap:32px}.overview-item h3{font-family:var(--font-display);font-size:1.15rem;color:var(--accent);margin-bottom:10px;font-style:italic}.overview-item p{font-size:.95rem;line-height:1.75;color:var(--text-secondary)}.empty-state{text-align:center;padding:64px 20px;color:var(--text-muted)}.empty-state h2{font-size:1.35rem;margin-bottom:8px;color:var(--text-secondary)}.retry-button{margin-top:20px;padding:10px 24px;background:var(--bg-elevated);border:1px solid var(--border-active);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-body);font-size:.9rem;transition:transform .16s var(--ease-out)}.retry-button:active{transform:scale(.97)}.analyzing-state{text-align:center;padding:48px 20px}.analyzing-state .spinner{width:28px;height:28px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 14px}.analyzing-state p{color:var(--text-secondary);font-size:.9rem}.analyzing-state .timer{font-size:.75rem;margin-top:6px;color:var(--text-muted);font-family:var(--font-mono)}@media (max-width: 719px){.app-frame{margin:0 auto;border-radius:0;box-shadow:none;min-height:100vh}.app-header h1{font-size:2.2rem}.track-detail-header h1{font-size:1.7rem}.track-detail-art{width:140px;height:140px}}@media (prefers-reduced-motion: reduce){.animate-in,.stagger-1,.stagger-2,.stagger-3,.stagger-4,.stagger-5,.stagger-6,.stagger-7,.stagger-8{animation:none;opacity:1;transform:none}.explanation-wrapper,.explanation-inner,.verse-block,.track-row,.back-link,.now-playing-bar,.now-playing-arrow,.track-thumb,.verse-toggle{transition:none}.explanation-wrapper.open .explanation-inner{opacity:1;transform:none}.spinner{animation:none;border-top-color:var(--accent)}}