:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-optical-sizing:auto;--md-ref-typeface-plain:"Roboto Flex Variable", system-ui, sans-serif;--md-ref-typeface-brand:"Roboto Flex Variable", system-ui, sans-serif;font-family:Roboto Flex Variable,system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--md-sys-color-background,#fef7ff);min-height:100vh;color:var(--md-sys-color-on-background,#1d1b20);justify-content:center;margin:0;transition:background-color .2s;display:flex}#app{flex-direction:column;gap:12px;width:100%;max-width:420px;min-height:100vh;padding:24px;display:flex}.app-title{text-align:center;color:var(--md-sys-color-primary);margin:24px 0 0;font-size:1.75rem;font-weight:800;font-stretch:125%}@supports ((-webkit-background-clip:text) or (background-clip:text)){.app-title{background:linear-gradient(90deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary));color:#0000;-webkit-background-clip:text;background-clip:text}}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-footer{color:var(--md-sys-color-on-surface-variant,#49454f);text-align:center;margin-top:auto;padding-top:24px;font-size:.75rem;line-height:1.5}.app-footer-disclaimer{margin:0 0 8px}.app-footer-lastfm{opacity:.85;border-radius:4px;margin:0 0 16px;padding:4px;transition:opacity .15s;display:inline-flex}.app-footer-lastfm:hover,.app-footer-lastfm:focus-visible{opacity:1}.app-footer-lastfm img{display:block}.app-footer-kofi{color:var(--md-sys-color-primary,#6750a4);border-radius:100px;align-items:center;gap:6px;margin:0 0 16px;padding:6px 16px;font-size:.75rem;font-weight:500;text-decoration:none;transition:background-color .15s;display:inline-flex}.app-footer-kofi:hover,.app-footer-kofi:focus-visible{background-color:color-mix(in srgb, var(--md-sys-color-primary,#6750a4) 12%, transparent)}.app-footer-kofi svg{flex-shrink:0;width:16px;height:16px}.app-footer-row{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 16px;display:flex}.app-footer-section{text-align:left;margin:0}.app-footer-section[open]{flex-basis:100%}.app-footer-section summary{text-align:center;cursor:pointer;color:var(--md-sys-color-primary,#6750a4);white-space:nowrap;font-weight:500}.app-footer-section ul{margin:8px 0 0;padding-left:20px}.app-footer-section li{margin-bottom:4px}.app-footer-section p{margin:8px 0 0}.app-footer-section a{color:inherit}.app-footer-copyright{white-space:nowrap;margin:0}.hero-tagline{color:var(--md-sys-color-on-surface-variant,#49454f);text-align:center;margin:0;font-size:1rem;line-height:1.5}.username-form{flex-direction:column;gap:16px;margin-top:36px;display:flex}.username-form md-outlined-text-field{width:100%}.cooldown-note{color:var(--md-sys-color-on-surface-variant,#49454f);text-align:center;margin:0;font-size:.8rem}.state{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:32px 0;display:flex}.card-screen{flex-direction:column;align-items:center;gap:24px;display:flex}.card-controls{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.card-style-controls{flex-flow:wrap;justify-content:center;align-items:center;gap:10px;width:100%;display:flex}.card-preview-wrap{width:100%;position:relative}.card-preview{aspect-ratio:9/16;object-fit:contain;background:var(--md-sys-color-surface-container-highest,#e6e0e9);border-radius:24px;width:100%}.card-preview[data-format=square]{aspect-ratio:1}.scrobble-time{color:var(--md-sys-color-on-surface-variant,#49454f);text-align:center;margin:0;font-size:.75rem}.top-controls{flex-flow:wrap;justify-content:space-between;align-items:center;gap:8px;width:100%;display:flex}.top-controls[hidden],.segmented-toggle[hidden]{display:none}#kind-toggle md-outlined-segmented-button,#period-toggle md-outlined-segmented-button{--_spacing-leading:8px;--_spacing-trailing:8px}.segmented-toggle{--md-outlined-segmented-button-selected-container-color:var(--card-accent,var(--md-sys-color-primary,#6750a4));--md-outlined-segmented-button-selected-label-text-color:var(--card-accent-on,var(--md-sys-color-on-primary,#fff));--md-outlined-segmented-button-selected-hover-label-text-color:var(--card-accent-on,var(--md-sys-color-on-primary,#fff));--md-outlined-segmented-button-selected-focus-label-text-color:var(--card-accent-on,var(--md-sys-color-on-primary,#fff));--md-outlined-segmented-button-selected-pressed-label-text-color:var(--card-accent-on,var(--md-sys-color-on-primary,#fff));--md-outlined-segmented-button-selected-hover-state-layer-color:var(--card-accent-on,var(--md-sys-color-on-primary,#fff));--md-outlined-segmented-button-selected-pressed-state-layer-color:var(--card-accent-on,var(--md-sys-color-on-primary,#fff));--md-outlined-segmented-button-selected-icon-color:var(--card-accent-on,var(--md-sys-color-on-primary,#fff));--md-outlined-segmented-button-selected-hover-icon-color:var(--card-accent-on,var(--md-sys-color-on-primary,#fff));--md-outlined-segmented-button-selected-focus-icon-color:var(--card-accent-on,var(--md-sys-color-on-primary,#fff));--md-outlined-segmented-button-selected-pressed-icon-color:var(--card-accent-on,var(--md-sys-color-on-primary,#fff))}.segmented-toggle md-outlined-segmented-button[disabled]{--md-outlined-segmented-button-selected-container-color:color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);--md-outlined-segmented-button-disabled-label-text-color:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);--md-outlined-segmented-button-disabled-icon-color:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);--md-outlined-segmented-button-disabled-outline-color:color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);cursor:default}.card-preview-status{text-align:center;background:var(--md-sys-color-surface-container-highest,#e6e0e9);color:var(--md-sys-color-on-surface-variant,#49454f);border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex;position:absolute;inset:0}.card-preview-status[hidden]{display:none}.m3-loading-indicator{display:block}.m3-loading-indicator[hidden],.card-preview-status md-text-button[hidden]{display:none}.card-screen md-filled-button{--_button-container:var(--card-accent,var(--md-sys-color-primary,#6750a4));--_button-label:var(--card-accent-on,var(--md-sys-color-on-primary,#fff));--md-filled-button-container-color:var(--_button-container);--md-filled-button-label-text-color:var(--_button-label);--md-filled-button-hover-label-text-color:var(--_button-label);--md-filled-button-focus-label-text-color:var(--_button-label);--md-filled-button-pressed-label-text-color:var(--_button-label);--md-filled-button-hover-state-layer-color:var(--_button-label);--md-filled-button-pressed-state-layer-color:var(--_button-label);--md-filled-button-icon-color:var(--_button-label);--md-filled-button-hover-icon-color:var(--_button-label);--md-filled-button-focus-icon-color:var(--_button-label);--md-filled-button-pressed-icon-color:var(--_button-label);width:100%}.card-screen md-text-button{--_text-label:var(--card-accent,var(--md-sys-color-primary,#6750a4));--md-text-button-label-text-color:var(--_text-label);--md-text-button-hover-label-text-color:var(--_text-label);--md-text-button-focus-label-text-color:var(--_text-label);--md-text-button-pressed-label-text-color:var(--_text-label);--md-text-button-hover-state-layer-color:var(--_text-label);--md-text-button-pressed-state-layer-color:var(--_text-label)}