:root{--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font:18px/1.45 var(--sans);color:#f8fbff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0d1722}*{box-sizing:border-box}html{overscroll-behavior:none;min-height:100%}body{overscroll-behavior:none;min-width:320px;min-height:100%;margin:0}button{font-family:inherit}#root{min-height:100svh}.lyric-app{--bg-start:#101827;--bg-middle:#302246;--bg-end:#0b1822;--override-bg-start:"";--override-bg-middle:"";--override-bg-end:"";--line-emphasis:0;--glow-one:#67e8f9;--glow-two:#f0abfc;--glow-three:#86efac;--text-primary:#f8fbff;--text-muted:#e2eeffad;--song-progress:0;--line-warmth:.14;--line-drift:8px;--glow-opacity:.42;--glow-scale:1;--particle-opacity:.24;--reader-lift:0px;isolation:isolate;min-height:100svh;color:var(--text-primary);background:radial-gradient(circle at calc(26% + (var(--song-progress) * 42%)) 15%, color-mix(in srgb, var(--glow-one) 24%, transparent), transparent 28rem), radial-gradient(circle at calc(84% - (var(--song-progress) * 36%)) 72%, color-mix(in srgb, var(--glow-two) 18%, transparent), transparent 24rem), linear-gradient(145deg, var(--override-bg-start,var(--bg-start)) 0%, color-mix(in srgb, var(--override-bg-middle,var(--bg-middle)) calc(82% + (var(--line-warmth) * 18%)), #5f3629) 48%, var(--override-bg-end,var(--bg-end)) 100%);transition:background .9s cubic-bezier(.4,0,.2,1),color .3s;display:grid;position:relative;overflow:hidden}.project-mode{overflow:auto}.reader-mode{height:100dvh;overflow:hidden}.performance{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;z-index:1;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;height:100%;min-height:100dvh;display:grid;position:relative;overflow:hidden}.lyric-app:before{content:"";z-index:-3;transform:translate3d(calc(var(--line-drift) * -.18), calc(var(--line-drift) * .12), 0);background-image:linear-gradient(#ffffff0a 1px,#0000 1px),linear-gradient(90deg,#ffffff09 1px,#0000 1px);background-size:72px 72px;transition:transform .76s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000,#000 25% 78%,#0000);mask-image:linear-gradient(#0000,#000 25% 78%,#0000)}.ambient{z-index:-2;aspect-ratio:1;filter:blur(54px);width:38vmax;opacity:var(--glow-opacity);pointer-events:none;transform:scale(var(--glow-scale));border-radius:999px;transition:opacity .7s,transform .7s,translate .7s;animation:11s ease-in-out infinite alternate ambient-breathe;position:absolute}.ambient-one{top:calc(6% + (var(--song-progress) * 10%));left:calc(-14% + (var(--song-progress) * 16%));background:var(--glow-one)}.ambient-two{right:calc(-13% + (var(--song-progress) * 9%));bottom:calc(2% + (var(--song-progress) * 8%));background:var(--glow-two);animation-delay:-4s}.ambient-three{width:28vmax;left:calc(34% + (var(--song-progress) * 14%));background:var(--glow-three);opacity:calc(var(--glow-opacity) * .72);animation-delay:-7s;bottom:-15%}.particle-field{z-index:-1;opacity:var(--particle-opacity);pointer-events:none;transition:opacity .7s;position:absolute;inset:0;overflow:hidden}.fractal-canvas{z-index:-1;pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.particle-field span{aspect-ratio:1;background:#ffffffb8;border-radius:999px;width:.42rem;animation:16s linear infinite particle-drift;position:absolute;box-shadow:0 0 20px #67e8f994,0 0 48px #f0abfc47}.particle-field span:first-child{top:72%;left:9%}.particle-field span:nth-child(2){animation-duration:19s;animation-delay:-6s;top:38%;left:23%}.particle-field span:nth-child(3){animation-duration:23s;animation-delay:-12s;top:82%;left:45%}.particle-field span:nth-child(4){animation-duration:17s;animation-delay:-8s;top:28%;left:62%}.particle-field span:nth-child(5){animation-duration:21s;animation-delay:-15s;top:66%;left:78%}.particle-field span:nth-child(6){animation-duration:18s;animation-delay:-3s;top:44%;left:90%}.project-screen,.metadata-page-wrap{place-items:start center;width:100%;min-height:100svh;padding:32px 20px;display:grid}.project-shell{width:min(1040px,100%);min-height:calc(100svh - 64px);color:var(--text-primary);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(#090f19c7,#090f1975),#ffffff0a;border:1px solid #ffffff24;border-radius:8px;flex-direction:column;gap:18px;padding:28px;display:flex}.browser-header{justify-content:space-between;align-items:center;gap:14px;display:flex}.browser-header h2,.project-section h3{color:var(--text-primary);letter-spacing:0;margin:0}.browser-header h2{font-size:1.45rem;line-height:1.1}.icon-button{width:42px;height:42px;color:var(--text-primary);font:inherit;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff3d;border-radius:8px;font-size:1.4rem;line-height:1}.search-field{color:var(--text-muted);text-transform:uppercase;letter-spacing:.12em;gap:8px;font-size:.78rem;display:grid}.search-field input{min-height:42px;color:var(--text-primary);font:inherit;background:#ffffff14;border:1px solid #ffffff2e;border-radius:8px;padding:0 12px;font-size:1rem}.search-field input::placeholder{color:#e2eeff6b}.project-actions{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}.project-actions button,.project-item,.reader-controls button{min-height:42px;color:var(--text-primary);font:inherit;cursor:pointer;background:#ffffff14;border:1px solid #ffffff2e;border-radius:8px;transition:background .18s,border-color .18s,opacity .18s,transform .18s}.project-actions button:hover,.project-item:hover,.icon-button:hover,.reader-controls button:hover:not(:disabled){background:#ffffff24;border-color:#ffffff61}.project-actions button:focus-visible,.project-item:focus-visible,.icon-button:focus-visible,.search-field input:focus-visible{outline-offset:3px;outline:2px solid #ffffffd6}.file-input{display:none}.project-section{gap:10px;display:grid}.project-section h3{text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);font-size:.8rem;font-weight:700}.project-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.project-item{text-align:left;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;min-height:84px;padding:14px 16px;display:flex;box-shadow:inset 0 1px #ffffff0f}.project-item:hover{transform:translateY(-1px)}.project-item.active{border-color:color-mix(in srgb, var(--glow-one) 62%, white 14%);background:linear-gradient(135deg,#67e8f929,#ffffff14)}.project-item span{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-weight:700;line-height:1.2;overflow:hidden}.project-item small{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;line-height:1.35;display:block;overflow:hidden}.json-guide{background:#ffffff0f;border:1px solid #ffffff24;border-radius:14px;gap:16px;padding:18px;display:grid}.guide-header h3{color:var(--text-primary);margin:0 0 8px}.guide-header p{color:var(--text-muted);margin:0;line-height:1.55}.guide-grid{grid-template-columns:1fr minmax(240px,1.1fr);gap:20px;display:grid}.guide-code{color:#e9effa;white-space:pre;background:#080e1af5;border-radius:12px;min-height:18rem;margin:0;padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.88rem;line-height:1.5;overflow-x:auto}.json-guide strong{color:var(--text-primary);margin-bottom:8px;display:block}.json-guide ul{color:var(--text-muted);margin:0 0 16px;padding-left:1.2rem}.json-guide li{margin-bottom:8px}@media (width<=860px){.guide-grid{grid-template-columns:1fr}}.empty-message,.browser-status{color:var(--text-muted);margin:0;font-size:.86rem;line-height:1.45}.browser-status{margin-top:auto;padding-top:10px}.app-header{text-align:center;width:min(920px,100% - 32px);margin:0 auto;padding:44px 0 20px}.reader-back{z-index:3;min-height:38px;color:var(--text-primary);font:inherit;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#090f1985;border:1px solid #ffffff2e;border-radius:8px;padding:0 12px;font-size:.92rem;transition:background .18s,border-color .18s;position:fixed;top:18px;left:18px}.reader-back:hover,.reader-back:focus-visible{background:#ffffff1f;border-color:#ffffff61}.vine-download{z-index:3;min-height:38px;color:var(--text-primary);font:inherit;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#090f1985;border:1px solid #ffffff2e;border-radius:8px;padding:0 12px;font-size:.92rem;transition:background .18s,border-color .18s;position:fixed;top:18px;right:18px}.vine-download:hover,.vine-download:focus-visible{background:#ffffff1f;border-color:#ffffff61}.eyebrow,.artist-line{color:var(--text-muted);margin:0}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;line-height:1.2}.app-header h1{color:var(--text-primary);letter-spacing:0;margin:8px 0 6px;font-size:clamp(2.3rem,9vw,5.6rem);font-weight:700;line-height:.95}.artist-line{justify-content:center;align-items:center;gap:8px;font-size:1rem;display:flex}.song-link-icon{width:20px;height:20px;color:var(--glow-one);opacity:.6;cursor:pointer;justify-content:center;align-items:center;font-size:.9rem;text-decoration:none;transition:opacity .18s,color .18s;display:inline-flex}.song-link-icon:hover,.song-link-icon:focus-visible{opacity:1;color:var(--text-primary)}.reader{width:min(1040px,100% - 32px);min-width:0;max-width:100%;min-height:0;transform:translateY(var(--reader-lift));grid-template-rows:minmax(5.5rem,.58fr) minmax(0,1fr) minmax(5.5rem,.58fr);align-items:center;gap:22px;margin:0 auto;padding:12px 0 24px;transition:transform .68s cubic-bezier(.22,1,.36,1);display:grid}.ghost-line,.current-line{min-width:0;max-width:100%}.current-line{text-align:center;will-change:opacity, transform;place-items:center;width:100%;min-height:0;display:grid}.current-line.line-forward{animation:.52s cubic-bezier(.22,1,.36,1) both lyric-forward}.current-line.line-backward{animation:.52s cubic-bezier(.22,1,.36,1) both lyric-backward}.current-line.line-none{animation:.42s cubic-bezier(.22,1,.36,1) both lyric-settle}.ghost-line{width:100%;min-height:5.5rem;color:inherit;opacity:.42;cursor:pointer;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;background:0 0;border:0;outline:none;padding:0;transition:opacity .18s,transform .18s}.ghost-line:active:not(:disabled){opacity:.42;background:0 0}@media (hover:hover) and (pointer:fine){.ghost-line:hover:not(:disabled),.ghost-line:focus-visible:not(:disabled){opacity:.7}.ghost-line:focus-visible{outline-offset:4px;outline:2px solid #ffffffd6}}.ghost-line:disabled{cursor:default;opacity:0}.previous-line:hover:not(:disabled){transform:translateY(-2px)}.next-line:hover:not(:disabled){transform:translateY(2px)}.lyric-text{gap:12px;min-width:0;max-width:100%;display:grid}.lyric-text p{overflow-wrap:anywhere;word-break:break-word;min-width:0;max-width:100%;margin:0}.romanization{color:var(--text-primary);letter-spacing:0;max-width:64rem;text-shadow:0 0 28px color-mix(in srgb, var(--glow-one) 22%, transparent), 0 0 70px color-mix(in srgb, var(--glow-two) 18%, transparent);transform:scale(calc(1 + var(--line-emphasis) * .14));margin-inline:auto;font-size:clamp(2rem,5.4vw,4.65rem);font-weight:700;line-height:1.1;transition:transform .42s cubic-bezier(.2,.9,.3,1)}.translation{color:color-mix(in srgb, var(--text-primary) 76%, transparent);max-width:52rem;margin-inline:auto;font-size:clamp(1rem,2.35vw,1.42rem);line-height:1.45}.native{color:color-mix(in srgb, var(--text-muted) 78%, transparent);font-size:clamp(.98rem,2.1vw,1.24rem);line-height:1.55}.compact{gap:4px}.compact .romanization{max-width:42rem;font-size:clamp(1rem,2.2vw,1.34rem);font-weight:600}.compact .translation,.compact .native{font-size:clamp(.78rem,1.6vw,.94rem);line-height:1.35}.reader-controls{grid-template-columns:minmax(5.8rem,auto) minmax(8rem,1fr) minmax(5.8rem,auto);align-items:center;gap:16px;width:min(920px,100% - 32px);margin:0 auto;padding:20px 0 30px;display:grid}.reader-controls button{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;touch-action:manipulation;min-height:44px;padding:0 16px}.reader-controls button:focus-visible{outline-offset:4px;outline:2px solid #ffffffd6}@media (hover:none) and (pointer:coarse){.reader-controls button:focus:not(:focus-visible){outline:none}}.reader-controls button:disabled{cursor:default;opacity:.38}.progress{color:#ecf5ffb8;text-align:center;gap:8px;font-size:.86rem;display:grid}.progress-track{background:#ffffff29;border-radius:999px;height:4px;overflow:hidden}.progress-fill{border-radius:inherit;background:linear-gradient(90deg, var(--glow-one), var(--glow-two));height:100%;transition:width .24s}@keyframes ambient-breathe{0%{translate:calc(var(--line-drift) * -.24) calc(var(--line-drift) * .1)}to{translate:calc(var(--line-drift) * .18) calc(var(--line-drift) * -.16)}}@keyframes particle-drift{0%{transform:translate3d(calc(var(--line-drift) * -.6), 18vh, 0) scale(.82);opacity:0}18%,82%{opacity:1}to{transform:translate3d(calc(var(--line-drift) * .8), -118vh, 0) scale(1.14);opacity:0}}@keyframes lyric-forward{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes lyric-backward{0%{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}@keyframes lyric-settle{0%{opacity:.72}to{opacity:1}}@media (prefers-reduced-motion:reduce){.lyric-app,.lyric-app:before,.ambient,.particle-field,.reader,.romanization,.progress-fill{transition-duration:1ms}.ambient,.particle-field span,.current-line,.current-line.line-forward,.current-line.line-backward,.current-line.line-none{animation:none}}@media (width<=720px){.project-screen,.metadata-page-wrap{padding:16px}.project-shell{min-height:auto;padding:18px}.project-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.project-list{grid-template-columns:1fr}.reader-back{top:max(10px, env(safe-area-inset-top));left:max(10px, env(safe-area-inset-left));min-height:34px;padding:0 10px;font-size:.82rem}.app-header{width:calc(100% - 24px);padding:max(42px, calc(env(safe-area-inset-top) + 34px)) 0 6px;text-align:left}.app-header .eyebrow{display:none}.app-header h1{text-overflow:ellipsis;white-space:nowrap;margin:0 0 2px;padding-right:72px;font-size:clamp(1.15rem,5.2vw,1.55rem);line-height:1.15;overflow:hidden}.artist-line{opacity:.82;justify-content:flex-start;gap:6px;font-size:.82rem}.reader{grid-template-rows:auto auto auto;align-content:center;gap:22px;width:calc(100% - 24px);height:100%;padding:12px 0 16px}.current-line{padding:0 4px}.lyric-text{gap:8px}.romanization{font-size:clamp(1.35rem,6.8vw,2rem);line-height:1.15}.translation{max-width:none;font-size:clamp(.88rem,3.9vw,1.05rem);line-height:1.35}.native{font-size:clamp(.8rem,3.5vw,.94rem);line-height:1.35}.reader-controls{width:calc(100% - 24px);padding:10px 0 max(12px, env(safe-area-inset-bottom));grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.reader-controls button{min-width:38px;min-height:38px;padding:0 12px;font-size:.84rem}.progress{grid-area:auto;gap:6px;font-size:.78rem}.progress-track{height:3px}}.metadata-screen{color:#eef8f2;background:linear-gradient(#071612e0,#060e14bf);border:1px solid #b5efc22e;border-radius:16px;gap:20px;width:min(1080px,100%);min-height:calc(100svh - 64px);padding:28px;display:grid;box-shadow:0 24px 80px #0000003d}.metadata-header{align-items:start;gap:18px;display:flex}.metadata-header h1,.metadata-header h2,.metadata-header p{margin:0}.metadata-header h1{letter-spacing:-.04em;font-size:clamp(1.7rem,4vw,2.5rem)}.metadata-header p:not(.eyebrow){color:#e0f4e7ab;margin-top:4px}.metadata-back,.secondary-action,.artwork-actions button{min-height:40px;color:inherit;font:inherit;cursor:pointer;background:#ffffff12;border:1px solid #ccf3d53d;border-radius:8px;padding:0 13px}.metadata-back:hover,.secondary-action:hover,.artwork-actions button:hover{background:#ffffff21}.mp3-dropzone{color:#dffbe7;min-height:190px;font:inherit;cursor:pointer;background:#74d38d0f;border:1px dashed #acedbd85;border-radius:12px;place-content:center;gap:7px;padding:26px;transition:all .18s;display:grid}.mp3-dropzone:hover,.mp3-dropzone.is-dragging{background:#74d38d29;border-color:#b9ffd0;transform:translateY(-1px)}.mp3-dropzone strong{font-size:1.14rem}.drop-icon{color:#9bf2b2;font-size:1.9rem}.choose-file{color:#062112;background:#a7f2bb;border-radius:6px;justify-self:center;margin-top:4px;padding:6px 12px;font-weight:700}.file-details{background:#c9efd226;border:1px solid #c9efd226;border-radius:10px;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;display:grid;overflow:hidden}.file-details span{color:#e7f8edd1;text-overflow:ellipsis;white-space:nowrap;background:#051111b8;min-width:0;padding:11px 13px;font-size:.84rem;overflow:hidden}.file-details b{color:#8eeaa8;letter-spacing:.09em;text-transform:uppercase;margin-bottom:2px;font-size:.67rem;display:block}.metadata-workspace{grid-template-columns:minmax(0,1.65fr) minmax(250px,.8fr);gap:18px;display:grid}.metadata-side{align-content:start;gap:18px;display:grid}.metadata-card{background:#ffffff0b;border:1px solid #c9efd224;border-radius:12px;padding:20px}.section-heading{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:17px;display:flex}.section-heading h2{font-size:1.1rem}.section-heading span{color:#ddf3e38a;font-size:.74rem}.metadata-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 18px;display:grid}.metadata-field{color:#e1f6e7c4;gap:6px;font-size:.8rem;display:grid}.metadata-field span{font-weight:650}.metadata-field input,.metadata-field textarea{color:#f3fff6;width:100%;min-height:40px;font:inherit;background:#020a0a66;border:1px solid #d3f5da30;border-radius:7px;outline:none;padding:8px 10px}.metadata-field textarea{resize:vertical;min-height:83px}.metadata-field:has(textarea){grid-column:1/-1}.metadata-field input:focus,.metadata-field textarea:focus{border-color:#94e6a9;box-shadow:0 0 0 3px #71d58b1f}.artwork-preview{aspect-ratio:1;color:#e1f6e775;background:linear-gradient(135deg,#8ce8a129,#6398b121);border:1px solid #d3f5da29;border-radius:9px;place-items:center;width:min(100%,245px);display:grid;overflow:hidden}.artwork-preview img{object-fit:cover;width:100%;height:100%}.artwork-actions{gap:8px;margin-top:13px;display:flex}.artwork-actions button:disabled{cursor:not-allowed;opacity:.42}.player-card audio{width:100%;height:38px}.metadata-actions{justify-content:flex-end;gap:10px;display:flex}.primary-action{color:#062112;min-height:42px;font:inherit;cursor:pointer;background:#a7f2bb;border:0;border-radius:8px;padding:0 17px;font-weight:750}.primary-action:disabled{cursor:wait;opacity:.68}.metadata-status{color:#daf4e1b3;margin:0;font-size:.88rem}.privacy-notice{color:#daf4e18a;border-top:1px solid #c9efd224;margin:0;padding-top:14px;font-size:.78rem}@media (width<=720px){.metadata-screen{border-radius:12px;min-height:auto;padding:18px}.metadata-header{gap:13px;display:grid}.metadata-back{justify-self:start}.file-details,.metadata-form{grid-template-columns:1fr 1fr}.metadata-workspace{grid-template-columns:1fr}.artwork-preview{width:100%;max-width:none}.metadata-actions{grid-template-columns:1fr;display:grid}.metadata-actions button{width:100%}}