*,:before,:after{box-sizing:border-box}html,body,#root{background:#0a0a0a;width:100%;height:100%;margin:0;padding:0;font-family:typeka,sans-serif;overflow:hidden}button,input,a{font:inherit}.app{width:100vw;height:var(--viewport-h,100dvh);transform:translateY(var(--viewport-top,0px));color:#fff;--vh:calc(var(--viewport-h,100dvh) / 100);--top-chrome:3.6rem;--footer-height:2.35rem;--font-brand:typeka, sans-serif;--font-sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;font-family:typeka,sans-serif;font-size:1.2em;position:relative;overflow:clip}.app.is-empty{--top-chrome:0rem}.color-bars{top:0;left:0;right:0;bottom:var(--footer-height);z-index:6;pointer-events:none;display:flex;position:absolute}.color-bars.landscape{flex-direction:row}.color-bars.portrait{top:var(--top-chrome);flex-direction:column}.color-bar{flex:1;min-width:0;min-height:0;transition:flex .4s;display:flex;position:relative}.color-bars.landscape .color-bar{justify-content:center;align-items:flex-end}.color-bars.landscape .bar-footer{pointer-events:none;background:linear-gradient(#0000,#00000059);justify-content:center;align-items:flex-end;width:100%;padding:1.1rem .5rem 1.35rem;display:flex}.color-bars.portrait .color-bar{justify-content:flex-end;align-items:center}.color-bars.portrait .bar-footer{pointer-events:none;background:linear-gradient(270deg,#00000059,#0000);justify-content:flex-end;align-items:center;width:auto;height:100%;max-height:100%;padding:.35rem .75rem .35rem 1.2rem;display:flex}.hex-copy{z-index:7;cursor:pointer;font-family:var(--font-mono);letter-spacing:.02em;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;pointer-events:auto;background:#00000047;border:1px solid #ffffff24;border-radius:10px;justify-content:center;align-items:center;gap:.4rem;min-height:40px;padding:.45rem .7rem;font-size:.78rem;font-weight:600;transition:background .15s,transform .1s,opacity .15s,border-color .15s;display:inline-flex;position:relative}.hex-copy:hover{background:#0000006b;border-color:#ffffff47}.hex-copy:focus-visible{outline-offset:2px;outline:2px solid #ffffffbf}.hex-copy:active{transform:scale(.96)}.hex-copy.is-copied{background:#ffffff38;border-color:#ffffff59}.hex-copy.is-error{background:#ff50504d;border-color:#ff8c8c73}.hex-value{text-align:left;pointer-events:none;min-width:4.6em;line-height:1}.hex-copied-label{white-space:nowrap;pointer-events:none;line-height:1;display:none}.copy-icon{opacity:.9;pointer-events:none;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;display:inline-flex}.copy-icon svg{width:16px;height:16px;display:block}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ui-layer{z-index:10;pointer-events:none;flex-direction:column;height:100%;display:flex;position:relative}.ui-layer .search-wrap,.ui-layer .top-bar-actions,.ui-layer .play-btn,.ui-layer .album-focus,.ui-layer .empty-hero,.ui-layer .brand-logo-link,.ui-layer .site-footer{pointer-events:auto}.vignette{z-index:5;pointer-events:none;background:radial-gradient(70% 60% at 50% 45%,#0000 30%,#00000073 100%);position:absolute;inset:0}.top-bar{--bar-pad:.4rem;padding:var(--bar-pad) .75rem;background:#000;grid-template-columns:max-content minmax(0,1fr) max-content max-content;grid-template-areas:"logo search play share";align-items:center;column-gap:.85rem;margin:0;display:grid}.brand-logo-link{grid-area:logo;align-items:center;max-width:min(200px,28vw);text-decoration:none;display:inline-flex}.brand-logo{object-fit:contain;width:100%;height:auto;max-height:56px;display:block}.brand-logo-link:focus-visible{outline-offset:2px;outline:2px solid #fff}.legal-nav{font-family:var(--font-sans);justify-content:flex-end;gap:.75rem;font-size:x-small;line-height:1.2;display:flex}.legal-nav a{color:#ffffffc7;letter-spacing:.04em;font-weight:600;text-decoration:none}.legal-nav a:hover,.legal-nav a:focus-visible{color:#fff;text-underline-offset:2px;text-decoration:underline}.top-bar-actions{grid-area:share;align-items:center;min-width:0;display:flex}.play-btn{-webkit-backdrop-filter:blur(16px);color:#fff;-webkit-tap-highlight-color:transparent;background:#141416b8;border:1px solid #ffffff1f;border-radius:50%;flex-shrink:0;grid-area:play;justify-content:center;align-items:center;width:44px;height:44px;transition:background .15s,transform .12s;display:inline-flex;box-shadow:0 8px 24px #0000004d}.play-btn svg{width:18px;height:18px;margin-left:2px;display:block}.play-btn:hover{background:#28282cd9;transform:translateY(-1px)}.play-btn:active{transform:scale(.97)}.play-btn:focus-visible{outline-offset:2px;outline:2px solid #ffffffa6}.search-wrap{grid-area:search;justify-self:stretch;width:100%;min-width:0;max-width:none;position:relative}.share-btn{-webkit-backdrop-filter:blur(16px);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#141416b8;border:1px solid #ffffff1f;border-radius:12px;align-items:center;gap:.45rem;padding:.6rem .85rem;font-size:.85rem;font-weight:600;transition:background .15s,transform .12s,opacity .15s;display:inline-flex;box-shadow:0 8px 24px #0000004d}.share-btn:hover:not(:disabled){background:#28282cd9;transform:translateY(-1px)}.share-btn:active:not(:disabled){transform:scale(.97)}.share-btn:focus-visible{outline-offset:2px;outline:2px solid #ffffffa6}.share-btn:disabled{opacity:.4;cursor:not-allowed}.share-btn.is-done{background:#2878468c;border-color:#ffffff2e}.share-btn-label{line-height:1}.share-modal-backdrop{z-index:200;-webkit-backdrop-filter:blur(10px);background:#000000b8;justify-content:center;align-items:center;padding:1.25rem;animation:.16s fade-in;display:flex;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.share-modal{--modal-bg:#16161c;--modal-text:#fff;--modal-muted:#ececf0;--modal-btn:#2c2c34;--modal-line:#8d8d96;--modal-primary:#fff;--modal-primary-text:#111;--modal-error:#ffc2c2;background:var(--modal-bg);width:min(560px,100%);max-height:min(92dvh,900px);color:var(--modal-text);border:1px solid var(--modal-line);border-radius:20px;flex-direction:column;gap:.85rem;padding:1.1rem 1.15rem 1.25rem;font-size:1.2em;animation:.2s modal-up;display:flex;overflow:auto;box-shadow:0 28px 80px #0000008c}.share-modal>*{flex-shrink:0}@keyframes modal-up{0%{opacity:0;transform:translateY(10px)scale(.98)}to{opacity:1;transform:none}}.share-modal-header{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.share-modal-header h2{font-family:var(--font-brand);letter-spacing:.01em;color:var(--modal-text);margin:0;font-size:1.2em;font-weight:700}.share-modal-close{border:1px solid var(--modal-line);background:var(--modal-btn);width:44px;height:44px;color:var(--modal-text);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;transition:background .12s;display:inline-flex}.share-modal-close:hover{background:#3a3a44}.share-modal-close:focus-visible{outline-offset:2px;outline:3px solid #fff}.share-aspects{gap:.4rem;display:flex}.share-aspect{border:1px solid var(--modal-line);background:var(--modal-btn);min-height:44px;color:var(--modal-text);letter-spacing:.02em;cursor:pointer;border-radius:10px;flex:1;justify-content:center;align-items:center;padding:.45rem .4rem;font-size:.85em;font-weight:700;display:inline-flex}.share-aspect:hover{background:#3a3a44}.share-aspect:focus-visible{outline-offset:2px;outline:3px solid #fff}.share-aspect.is-active{background:var(--modal-primary);color:var(--modal-primary-text);border-color:var(--modal-primary)}.share-modal-preview{--preview-max-h:46dvh;aspect-ratio:16/9;max-height:var(--preview-max-h);width:min(100%, calc(var(--preview-max-h) * 16 / 9));border:1px solid var(--modal-line);background:#0b0b0e;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;margin-inline:auto;display:flex;position:relative;overflow:hidden}.share-modal-preview[data-aspect="1:1"]{aspect-ratio:1;width:min(100%, var(--preview-max-h))}.share-modal-preview[data-aspect="9:16"]{aspect-ratio:9/16;width:min(100%, calc(var(--preview-max-h) * 9 / 16))}.share-card-img{object-fit:contain;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.share-modal-loading,.share-modal-error{color:var(--modal-muted);flex-direction:column;align-items:center;gap:.65rem;padding:2rem;font-size:.95rem;display:flex}.share-modal-error{color:var(--modal-error)}.share-modal-caption{color:var(--modal-muted);text-align:center;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.95rem;overflow:hidden}.share-modal-actions{grid-template-columns:1fr 1fr 1fr;gap:.55rem;display:grid}.share-action{border:1px solid var(--modal-line);background:var(--modal-btn);color:var(--modal-text);cursor:pointer;border-radius:12px;min-height:44px;padding:.7rem .5rem;font-size:.95em;font-weight:700;transition:background .12s,transform .1s}.share-action:focus-visible{outline-offset:2px;outline:3px solid #fff}.share-action:hover:not(:disabled){background:#3a3a44}.share-action:active:not(:disabled){transform:scale(.98)}.share-action:disabled{color:#b0b0b8;cursor:not-allowed;background:#24242c;border-color:#6e6e76}.share-action.primary{background:var(--modal-primary);color:var(--modal-primary-text);border-color:var(--modal-primary)}.share-action.primary:hover:not(:disabled){background:#f2f2f2}.share-action.primary:disabled{color:#3a3a40;background:#c8c8ce;border-color:#c8c8ce}.share-modal-status{text-align:center;letter-spacing:.02em;color:var(--modal-muted);margin:0;font-size:.9rem}.social-icons{justify-content:center;align-items:center;gap:.45rem;margin:0;padding:0;list-style:none;display:flex}.social-icons a,.social-icons button{border:1px solid var(--modal-line,#8d8d96);background:var(--modal-btn,#2c2c34);color:#fff;width:44px;height:44px;font:inherit;cursor:pointer;border-radius:10px;justify-content:center;align-items:center;padding:0;display:inline-flex}.social-icons a:hover,.social-icons button:hover{color:#fff;background:#3a3a44}.social-icons a:focus-visible,.social-icons button:focus-visible{outline-offset:2px;outline:3px solid #fff}.social-icons svg{fill:currentColor;display:block}.share-social{flex-wrap:wrap}.site-footer{min-height:var(--footer-height);color:#ececf0;font-family:var(--font-sans);letter-spacing:.02em;z-index:12;background:#000;flex-shrink:0;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.5rem .75rem;padding:.35rem .85rem;font-size:.62rem;font-weight:500;display:grid}.footer-copy{color:#ececf0;justify-self:start;margin:0}.footer-copy a{color:#fff;font-weight:700;text-decoration:none}.footer-copy a:hover,.footer-copy a:focus-visible{text-underline-offset:2px;text-decoration:underline}.site-footer .social-icons{justify-self:center;gap:.15rem}.site-footer .social-icons a{color:#fff;background:0 0;border:none;width:28px;height:28px}.site-footer .social-icons a:hover,.site-footer .social-icons a:focus-visible{background:#1a1a1a}.site-footer .legal-nav{justify-self:end}.site-footer .legal-nav a{color:#ececf0}@media (width<=480px){.share-modal{border-radius:16px;padding:.95rem .85rem 1.1rem}.share-modal-header h2{font-size:.95em}.share-modal-actions{grid-template-columns:1fr 1fr}.share-modal-actions .share-action.primary{grid-column:1/-1}}.search-bar{-webkit-backdrop-filter:blur(16px);background:#141416b8;border:1px solid #ffffff1f;border-radius:14px;align-items:center;gap:.6rem;padding:.65rem 1rem;display:flex;box-shadow:0 8px 32px #00000059}.search-bar input{color:#fff;background:0 0;border:none;outline:none;flex:1;min-width:0;font-size:1em}.search-bar input::placeholder{color:#ffffff73}.search-icon{opacity:.55;flex-shrink:0}.spinner{border:2px solid #ffffff40;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.search-results{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:50;background:#121214eb;border:1px solid #ffffff1a;border-radius:14px;max-height:340px;margin:0;padding:.4rem;list-style:none;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow-y:auto;box-shadow:0 16px 48px #00000080}.result-item{color:#fff;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:10px;align-items:center;gap:.75rem;width:100%;padding:.55rem .6rem;transition:background .12s;display:flex}.result-item:hover,.result-item.is-active{background:#ffffff1a}.result-item:focus-visible{outline-offset:-2px;outline:2px solid #ffffffb3}.result-status{color:#ffffffc7;padding:.75rem .7rem;font-size:.85rem}.result-item img{object-fit:cover;border-radius:6px;flex-shrink:0;width:40px;height:40px}.result-placeholder{background:#ffffff14;border-radius:6px;width:40px;height:40px}.result-meta{flex:1;min-width:0}.result-title{white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:600;overflow:hidden}.result-artist{opacity:.6;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;overflow:hidden}.result-source{text-transform:uppercase;letter-spacing:.04em;opacity:.4;flex-shrink:0;font-size:.65rem}.stage{pointer-events:none;flex:1;justify-content:center;align-items:center;min-height:0;padding:1rem;display:flex}.app:not(.is-empty) .stage{padding-bottom:5rem}.stage .album-focus{pointer-events:auto}.album-focus{text-align:center;flex-direction:column;align-items:center;gap:1.1rem;max-width:min(420px,92vw);min-height:0;max-height:100%;display:flex}.empty-hero{text-align:center;flex-direction:column;align-items:center;gap:1.4rem;width:min(560px,92vw);min-height:0;max-height:100%;display:flex}.app.is-empty .stage{padding-bottom:min(11rem, calc(var(--vh) * 20))}.hero-logo{width:min(520px,78vw);height:auto;max-height:calc(var(--vh) * 34);object-fit:contain;display:block}.hero-tagline{font-family:var(--font-brand);letter-spacing:.02em;opacity:.72;margin:0;font-size:1.05em}.hero-search{width:100%}.empty-hero .search-results{max-height:min(300px, calc(var(--vh) * 26))}.cover-wrap{min-height:0;display:flex;position:relative}.cover{aspect-ratio:1;object-fit:cover;-webkit-user-select:none;user-select:none;border-radius:12px;width:auto;max-width:min(260px,70vw,52dvh);height:auto;max-height:100%;box-shadow:0 25px 50px -12px #0000008c,0 0 0 1px #ffffff14}@media (width<=920px){.top-bar{column-gap:.55rem}.search-wrap{max-width:none}.brand-logo-link{max-width:min(160px,26vw)}.brand-logo{max-height:44px}.hero-logo{width:min(420px,80vw)}}@media (width<=480px){.site-footer{grid-template-columns:auto auto auto;justify-content:space-between;gap:.4rem;padding:.3rem .5rem;font-size:.55rem}.footer-copy{white-space:nowrap}.site-footer .social-icons a{width:22px;height:22px}.site-footer .social-icons svg{width:13px;height:13px}.site-footer .legal-nav{white-space:nowrap;gap:.5rem;font-size:.55rem}.top-bar{--bar-pad:.3rem;column-gap:.4rem}.brand-logo-link{max-width:min(118px,30vw)}.brand-logo{max-height:34px}.play-btn{width:38px;height:38px}.play-btn svg{width:16px;height:16px}.share-btn-label{clip:rect(0, 0, 0, 0);width:1px;height:1px;position:absolute;overflow:hidden}.share-btn{border-radius:12px;padding:.5rem}.cover{max-width:min(220px,68vw,52dvh)}.hero-logo{width:min(300px,82vw)}.share-modal-preview{--preview-max-h:36dvh}.color-bars.landscape .bar-footer{padding:.8rem .3rem 1rem}.color-bars.portrait .bar-footer{padding:.3rem .55rem .3rem .85rem}.hex-copy{gap:.35rem;min-height:38px;padding:.4rem .6rem;font-size:.7rem}}@media (orientation:portrait){.stage{padding-top:.25rem}.app:not(.is-empty) .stage{padding-bottom:1rem;padding-right:7rem}}@media (width<=360px){.site-footer{gap:.3rem;padding:.3rem .25rem}.site-footer .social-icons{gap:0}.site-footer .social-icons a{width:20px;height:20px}.site-footer .social-icons svg{width:12px;height:12px}}@media (orientation:portrait) and (width<=360px){.color-bars.portrait .hex-copy{padding:.55rem}.color-bars.portrait .hex-value{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.color-bars.portrait .hex-copy.is-copied{padding:.55rem .7rem}.color-bars.portrait .hex-copy.is-copied .hex-copied-label{display:inline}.app:not(.is-empty) .stage{padding-right:3.5rem}}@media (height<=560px){.empty-hero{gap:.9rem}.hero-logo{max-height:calc(var(--vh) * 26)}}
