:root{--sky-top:#c9d8df;--sky-mid:#dce5e6;--sky-low:#eef0ea;--paper:#f6f7f2;--chip:#dfe5dd;--grass:#2f5b3b;--grass-deep:#234832;--ink:#1e2a22;--ink-2:#4c5a50;--accent:#2f5b3b;--lit:#2f5b3b;--error:#7a2e1f;--chip-hover:#cfd8cd;--rain:#5c707c80;--night-text:#e7ece6;--night-muted:#a9b8ad;--dusk:0;--font-display:var(--font-display-face), "Tektur Fallback Liberation", "Tektur Fallback Roboto", system-ui, sans-serif;--font-text:var(--font-text-face), "Instrument Sans Fallback Liberation", "Instrument Sans Fallback Roboto", system-ui, sans-serif;--gutter:clamp(16px, 1.7vw, 24px);--margin:clamp(16px, 3.2vw, 48px);--nav-h:64px;--chamfer:clamp(14px, 2.2vw, 34px);--hl-tl:url("data:image/svg+xml;utf8,");--hl-tr:url("data:image/svg+xml;utf8,");--hl-bl:url("data:image/svg+xml;utf8,");--hl-br:url("data:image/svg+xml;utf8,");--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--z-canvas:0;--z-content:1;--z-dock:6;--z-nav:50;--z-skip:90;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=night]{--sky-top:#0f1c1f;--sky-mid:#16282a;--sky-low:#2b4136;--paper:#111a1b;--chip:#213029;--chip-hover:#2c3d35;--ink:#e7ece6;--ink-2:#a9b8ad;--accent:#7fe29a;--lit:#7fe29a;--error:#f2a48c;--rain:#c8deec8c;--hl-tl:url("data:image/svg+xml;utf8,");--hl-tr:url("data:image/svg+xml;utf8,");--hl-bl:url("data:image/svg+xml;utf8,");--hl-br:url("data:image/svg+xml;utf8,")} @font-face{font-family:Tektur Fallback Liberation;src:local(Liberation Sans),local(LiberationSans),local(Arimo);ascent-override:90.61%;descent-override:27.18%;line-gap-override:0%;size-adjust:110.36%}@font-face{font-family:Tektur Fallback Roboto;src:local(Roboto),local(Roboto Regular),local(Roboto-Regular);ascent-override:90.41%;descent-override:27.12%;line-gap-override:0%;size-adjust:110.61%}@font-face{font-family:Instrument Sans Fallback Liberation;src:local(Liberation Sans),local(LiberationSans),local(Arimo);ascent-override:94.42%;descent-override:24.33%;line-gap-override:0%;size-adjust:102.74%}@font-face{font-family:Instrument Sans Fallback Roboto;src:local(Roboto),local(Roboto Regular),local(Roboto-Regular);ascent-override:94.21%;descent-override:24.28%;line-gap-override:0%;size-adjust:102.96%} *,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{max-width:100vw;overflow-x:clip}body{background:var(--sky-low);color:var(--ink);font:400 17px/1.55 var(--font-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}[data-lit-target]{text-underline-offset:10px;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;text-decoration-thickness:3px;transition:text-decoration-color .4s}[data-lit] [data-lit-target]{-webkit-text-decoration-color:var(--lit,var(--accent));text-decoration-color:var(--lit,var(--accent))}[data-point]{position:relative}span[data-point]{display:inline-block}[data-point][data-lit]:after{content:"";pointer-events:none;background:var(--lit,var(--accent));-webkit-mask:var(--hl-tl) top left no-repeat, var(--hl-tr) top right no-repeat, var(--hl-bl) bottom left no-repeat, var(--hl-br) bottom right no-repeat;mask:var(--hl-tl) top left no-repeat, var(--hl-tr) top right no-repeat, var(--hl-bl) bottom left no-repeat, var(--hl-br) bottom right no-repeat;animation:3.4s forwards point-lit;position:absolute;inset:-8px}@keyframes point-lit{0%{opacity:0}10%,75%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){[data-point][data-lit]:after{animation:none}}@media print{:root[data-theme=night]{--sky-top:#c9d8df;--sky-mid:#dce5e6;--sky-low:#eef0ea;--paper:#f6f7f2;--chip:#dfe5dd;--ink:#1e2a22;--ink-2:#4c5a50;--accent:#2f5b3b;--lit:#2f5b3b}[data-print-hidden],[data-point][data-lit]:after{display:none!important}}:root:active-view-transition-type(theme)::view-transition-old(root){animation:.6s reverse both theme-fade;display:block}:root:active-view-transition-type(theme)::view-transition-old(site-header){animation:.6s reverse both theme-fade;display:block}:root:active-view-transition-type(theme)::view-transition-old(chat-dock){animation:.6s reverse both theme-fade;display:block}:root:active-view-transition-type(theme)::view-transition-old(chat-launcher){animation:.6s reverse both theme-fade;display:block}:root:active-view-transition-type(theme)::view-transition-new(root){animation:.6s both theme-fade}:root:active-view-transition-type(theme)::view-transition-new(site-header){animation:.6s both theme-fade}:root:active-view-transition-type(theme)::view-transition-new(chat-dock){animation:.6s both theme-fade}:root:active-view-transition-type(theme)::view-transition-new(chat-launcher){animation:.6s both theme-fade}@keyframes theme-fade{0%{opacity:0}}@media (prefers-reduced-motion:reduce){:root:active-view-transition-type(theme)::view-transition-old(root){animation:none}:root:active-view-transition-type(theme)::view-transition-new(root){animation:none}}::view-transition{pointer-events:none}::view-transition-old(root){display:none}::view-transition-new(root){animation:none}::view-transition-group(site-header){z-index:100;animation:none}::view-transition-group(chat-dock){z-index:100;animation:none}::view-transition-group(chat-launcher){z-index:100;animation:none}::view-transition-group(site-header){mix-blend-mode:difference}::view-transition-old(site-header){display:none}::view-transition-old(chat-dock){display:none}::view-transition-old(chat-launcher){display:none}::view-transition-new(site-header){animation:none}::view-transition-new(chat-dock){animation:none}::view-transition-new(chat-launcher){animation:none}::view-transition-old(.page-out){animation:.36s cubic-bezier(.4,0,1,1) both page-out}::view-transition-new(.page-in){animation:.56s cubic-bezier(.2,.8,.2,1) .18s both page-in}@keyframes page-out{to{opacity:0;transform:translateY(-16px)}}@keyframes page-in{0%{opacity:0;transform:translateY(20px)}}@media (prefers-reduced-motion:reduce){::view-transition-old(.page-out){animation:none}::view-transition-new(.page-in){animation:none}}html[data-island-grab=over]{cursor:grab}html[data-island-grab=held],html[data-island-grab=held] *{-webkit-user-select:none;user-select:none;cursor:grabbing!important}

AI-Powered Lyrics Synchronization Player

A short tour

Highlights