@font-face{font-family:"Baloo 2";font-style:normal;font-weight:500 700;font-display:swap;src:url(/app/assets/baloo2-B_TVFhwJ.woff2)format("woff2")}@font-face{font-family:Manrope;font-style:normal;font-weight:400 700;font-display:swap;src:url(/app/assets/manrope-DHIcAJRg.woff2)format("woff2")}:root{--bg-top:#1a0b2e;--bg-bottom:#0d0221;--card-border:#ffffff26;--card-fill:#ffffff0f;--field-fill:#ffffff0a;--pink:#ff2ea8;--purple:#7b2ff7;--cyan:#00e5ff;--text:#fff;--text-muted:#ffffffb3;--text-dim:#ffffff73;--label:#b48cff;--danger:#ff5470}*{box-sizing:border-box}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{background:linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);min-height:100vh;color:var(--text);background-attachment:fixed;margin:0;font-family:Manrope,system-ui,sans-serif;line-height:1.5}#app{max-width:34rem;margin:0 auto;padding:2.5rem 1.25rem 4rem}@media (prefers-reduced-motion:no-preference){a,button,.card,.field input,.field select{transition:opacity .15s,border-color .15s,transform .15s,background .15s}}h1,h2,legend{font-family:"Baloo 2",Manrope,system-ui,sans-serif;font-weight:700}.app__title{text-align:center;background:linear-gradient(90deg, var(--pink), var(--purple), var(--cyan));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0 0 1.75rem;font-size:clamp(2rem,8vw,2.5rem)}.picker{border:2px dashed var(--card-border);text-align:center;cursor:pointer;background:var(--card-fill);border-radius:16px;padding:1.5rem 1rem;display:block}.picker:hover{border-color:var(--label)}.picker:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:3px}.picker__icon{margin-bottom:.35rem;font-size:1.75rem;display:block}.picker__label{font-weight:600}.picker__hint{color:var(--text-dim);margin:.25rem 0 0;font-size:.85rem}.picker input{opacity:0;width:1px;height:1px;position:absolute;overflow:hidden}.section{background:var(--card-fill);border:1px solid var(--card-border);border-radius:16px;margin-top:1.5rem;padding:1.25rem 1.25rem 1.5rem}.section__title{color:var(--label);margin:0 0 .85rem;font-size:1rem}.settings-card{padding:0;overflow:hidden}.settings-toggle{width:100%;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:center;gap:.75rem;padding:1rem 1.25rem;font-family:inherit;font-size:.9rem;font-weight:600;display:flex}.settings-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}.settings-toggle__summary{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.settings-toggle__chevron{color:var(--label);flex-shrink:0;font-size:.75rem}.settings-body{padding:0 1.25rem 1.5rem}.settings-body fieldset{margin-top:0}.toggle-row{gap:.75rem;margin-top:1.5rem;display:flex}.toggle{border:1px solid var(--card-border);background:var(--field-fill);cursor:pointer;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.6rem .75rem;font-size:.9rem;font-weight:600;display:flex}.toggle:has(input:checked){border-color:var(--purple);background:#7b2ff740}.toggle:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:2px}.toggle input{accent-color:var(--pink)}.toggle--disabled{opacity:.45;cursor:not-allowed}.toggle--disabled input{cursor:not-allowed}fieldset{border:0;margin:1.5rem 0 0;padding:0}.mode-row{gap:.75rem;margin-top:.6rem;display:flex}.mode{border:1px solid var(--card-border);background:var(--field-fill);cursor:pointer;border-radius:12px;flex-direction:column;flex:1;gap:.15rem;padding:.75rem .85rem;display:flex}.mode:has(input:checked){border-color:var(--pink);background:linear-gradient(135deg,#ff2ea82e,#7b2ff72e)}.mode:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:2px}.mode__name{font-size:.95rem;font-weight:700}.mode__hint{color:var(--text-dim);font-size:.78rem}.mode input{opacity:0;width:1px;height:1px;position:absolute;overflow:hidden}.field-row{flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;display:flex}.field{color:var(--text-muted);flex-direction:column;flex:8rem;gap:.3rem;font-size:.8rem;display:flex}.field input{background:var(--field-fill);border:1px solid var(--card-border);color:var(--text);border-radius:10px;padding:.55rem .65rem;font-family:inherit;font-size:1rem}.field input:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;border-color:var(--cyan)}.field-error{color:var(--danger);margin:.6rem 0 0;font-size:.85rem}.playlist{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.playlist__item{background:var(--field-fill);border:1px solid var(--card-border);border-radius:10px;align-items:center;gap:.5rem;padding:.55rem .35rem .55rem .75rem;display:flex}.playlist__name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:.9rem;overflow:hidden}.icon-btn{border:1px solid var(--card-border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:8px;width:2rem;height:2rem;font-size:.9rem;line-height:1}.icon-btn:hover:not(:disabled){border-color:var(--label);color:var(--text)}.icon-btn:disabled{opacity:.3;cursor:not-allowed}.icon-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.icon-btn--danger:hover:not(:disabled){border-color:var(--danger);color:var(--danger)}.btn{background:linear-gradient(90deg, var(--pink), var(--purple));color:var(--text);cursor:pointer;border:none;border-radius:999px;padding:.85rem 2rem;font-family:inherit;font-size:1rem;font-weight:600;text-decoration:none;display:inline-block}.btn:hover:not(:disabled){opacity:.88;transform:translateY(-1px)}.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.btn--block{text-align:center;width:100%;margin-top:1rem;display:block}.btn--ghost{background:var(--field-fill);border:1px solid var(--card-border)}.btn--ghost:hover:not(:disabled){border-color:var(--label)}.now-playing{text-align:center;margin-top:1.75rem}.now-playing__track{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:1.15rem;font-weight:700;overflow:hidden}.now-playing__time{color:var(--text-dim);font-variant-numeric:tabular-nums;margin:.2rem 0 0;font-size:.85rem}.now-playing__next{text-overflow:ellipsis;white-space:nowrap;margin:.6rem 0 0;font-size:1.15rem;font-weight:700;overflow:hidden}.now-playing__next-label{letter-spacing:.06em;text-transform:uppercase;color:var(--label);margin-right:.4rem;font-size:.7rem;font-weight:700}.state-badge{letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--card-border);background:var(--field-fill);color:var(--text-muted);border-radius:999px;align-items:center;gap:.5rem;margin:1.25rem auto 0;padding:.5rem 1.25rem;font-family:"Baloo 2",Manrope,system-ui,sans-serif;font-size:1.1rem;font-weight:700;display:inline-flex}.state-badge--playing{color:var(--cyan);background:#00e5ff14;border-color:#00e5ff66}.state-badge--stopped,.state-badge--paused{color:var(--pink);background:#ff2ea81f;border-color:#ff2ea880;box-shadow:0 0 #ff2ea880}@media (prefers-reduced-motion:no-preference){.state-badge--stopped,.state-badge--paused{animation:1.4s ease-in-out infinite stop-pulse}}@keyframes stop-pulse{0%,to{box-shadow:0 0 #ff2ea873}50%{box-shadow:0 0 0 10px #ff2ea800}}.state-badge--finished{color:var(--label);background:#b48cff1a;border-color:#b48cff80}.resume-countdown{text-align:center;color:var(--text-muted);margin:.6rem 0 0;font-size:.9rem}.transport{grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:1.25rem;display:grid}.transport .icon-btn{border-radius:12px;width:100%;height:2.75rem;font-size:1rem}.primary-action{margin-top:.75rem}.finished-note{text-align:center;color:var(--text-dim);margin:.75rem 0 0}.now-playing>.btn--ghost{margin-top:.75rem}.dialog-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10;background:#0d0221b8;justify-content:center;align-items:center;padding:1.25rem;display:flex;position:fixed;inset:0}.dialog{background:var(--bg-top);border:1px solid var(--card-border);border-radius:16px;width:100%;max-width:24rem;padding:1.5rem;box-shadow:0 20px 60px #00000080}.dialog__message{text-align:center;margin:0 0 1.25rem}.dialog__actions{gap:.75rem;display:flex}.dialog__actions .btn{flex:1;margin-top:0}