body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:root{--bg:#0c0c0e;--card:#141418;--border:#27272f;--text:#e5e7eb;--muted:#9aa0aa;--accent:#4f7cff;--accent-pressed:#3f62cc;--shadow-soft:0 8px 24px #00000047;--shadow:0 12px 36px #00000059;--radius-lg:24px;--gap:clamp(12px,2vw,24px);--pad:clamp(18px,3vw,32px)}*{box-sizing:border-box}#root,body,html{height:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(1200px 600px at 50% -10%,#121217 0,#0c0c0e 50%),#0c0c0e;background:radial-gradient(1200px 600px at 50% -10%,#121217 0,var(--bg) 50%),var(--bg);color:#e5e7eb;color:var(--text);margin:0}.app-loader{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:radial-gradient(1200px 600px at 50% -10%,#121217cc 0,#0c0c0eeb 50%),#0c0c0eeb;display:grid;inset:0;padding:24px;place-items:center;position:fixed;z-index:50}.loader-orb{display:grid;height:clamp(140px,18vw,220px);isolation:isolate;place-items:center;position:relative;width:clamp(140px,18vw,220px)}.loader-ring,.loader-ring:after,.loader-ring:before{border:2px solid #0000;border-radius:999px;content:\"\";inset:0;position:absolute}.loader-ring{animation:spin 1.4s linear infinite;background:conic-gradient(from 0deg,#4f7cff00 0,#4f7cff59 35%,#4f7cff00 70%,#0000 100%);filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}.loader-ring:before{animation:pulse 1.8s ease-in-out infinite;background:radial-gradient(80% 80% at 50% 50%,#4f7cff40 0,#4f7cff00 70%);inset:10%}.loader-ring:after{border:1px solid #ffffff14;inset:4%}.loader-core{background:linear-gradient(180deg,hsla(0,0%,100%,.035),#0000002e) #1a1b20;border:1px solid #27272f;border:1px solid var(--border);border-radius:20px;box-shadow:inset 0 -18px 30px #00000073,0 8px 22px #00000059;color:#e6e9f0;display:grid;font-weight:800;height:58%;letter-spacing:.45em;place-items:center;position:relative;text-indent:.45em;width:58%;z-index:1}.loader-sub{color:#9aa0aa;color:var(--muted);font-size:clamp(.95rem,1vw,1.05rem);margin-top:16px;opacity:.95;text-align:center}.is-dimmed{filter:saturate(.9) brightness(.9);opacity:.75}.sonos-root{display:grid;min-height:100vh;padding:clamp(12px,2vw,28px);place-items:center}.sonos-card{background:linear-gradient(180deg,#ffffff05,#fff0),#141418;background:linear-gradient(180deg,#ffffff05,#fff0),var(--card);border:1px solid #27272f;border:1px solid var(--border);border-radius:24px;border-radius:var(--radius-lg);box-shadow:0 12px 36px #00000059;box-shadow:var(--shadow);padding:clamp(18px,3vw,32px);padding:var(--pad);transition:box-shadow .25s ease,filter .3s ease,opacity .3s ease;width:min(1100px,96vw)}.sonos-card:hover{box-shadow:0 8px 24px #00000047,inset 0 0 0 1px #ffffff05;box-shadow:var(--shadow-soft),0 0 0 1px #ffffff05 inset}.sonos-header{display:flex;justify-content:center;margin-bottom:clamp(8px,1.2vw,16px)}.brand{color:#c7cbd4;font-size:clamp(.85rem,1.2vw,1.1rem);font-weight:700;letter-spacing:.45em;opacity:.92;text-indent:.45em}.sonos-main{grid-gap:clamp(14px,2vw,24px);display:grid;gap:clamp(14px,2vw,24px);justify-items:center}.play-toggle{background:radial-gradient(120px 120px at 30% 25%,#ffffff17,#ffffff08),#1a1b20;border:1px solid #27272f;border:1px solid var(--border);border-radius:999px;box-shadow:inset 0 -20px 34px #00000073,0 10px 24px #00000059;display:grid;height:clamp(110px,14vw,160px);place-items:center;transition:transform .1s ease,box-shadow .25s ease,background .25s ease;width:clamp(110px,14vw,160px)}.play-toggle svg{fill:#e8eaef;height:clamp(32px,3.2vw,44px);width:clamp(32px,3.2vw,44px)}.play-toggle:active{box-shadow:inset 0 -12px 20px #00000080,0 8px 18px #00000059;transform:scale(.985)}.play-toggle:focus-visible{outline:2px solid #4f7cff;outline:2px solid var(--accent);outline-offset:3px}.volume-row{grid-gap:clamp(10px,1.2vw,14px);align-items:center;display:grid;gap:clamp(10px,1.2vw,14px);grid-template-columns:auto 1fr auto;margin-top:2px;width:100%}.vol-edge{font-feature-settings:"tnum";color:#9aa0aa;color:var(--muted);font-size:clamp(.9rem,.9vw,1rem);font-variant-numeric:tabular-nums;opacity:.9}.volume-slider{-webkit-appearance:none;appearance:none;background:#2a2e37;border-radius:999px;height:clamp(6px,.6vw,8px);outline:none;width:100%}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#4f7cff;background:var(--accent);border:2px solid #0f1222;border-radius:999px;box-shadow:0 2px 10px #00000059;cursor:pointer;height:clamp(20px,1.8vw,26px);width:clamp(20px,1.8vw,26px)}.volume-slider::-moz-range-thumb{background:#4f7cff;background:var(--accent);border:none;border-radius:999px;box-shadow:0 2px 10px #00000059;cursor:pointer;height:clamp(20px,1.8vw,26px);width:clamp(20px,1.8vw,26px)}.volume-slider:active::-webkit-slider-thumb{background:#3f62cc;background:var(--accent-pressed)}.volume-slider:active::-moz-range-thumb{background:#3f62cc;background:var(--accent-pressed)}.volume-readout{color:#9aa0aa;color:var(--muted);font-size:clamp(.92rem,.95vw,1.02rem);margin-top:-4px}.playlist-grid{grid-gap:clamp(10px,1.2vw,14px);display:grid;gap:clamp(10px,1.2vw,14px);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:4px;width:100%}@media (min-width:480px){.playlist-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:768px){.playlist-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:1100px){.playlist-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}.playlist-btn{background:linear-gradient(180deg,#ffffff05,#0000001f),#1a1b20;border:1px solid #27272f;border:1px solid var(--border);border-radius:16px;box-shadow:0 6px 16px #00000040;color:#e5e7eb;color:var(--text);font-size:clamp(.95rem,1vw,1.05rem);font-weight:600;letter-spacing:.02em;padding:clamp(14px,1.6vw,18px) clamp(12px,1.4vw,16px);text-align:center;transition:transform .08s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;width:100%}.playlist-btn:hover{border-color:#3a3f4a;box-shadow:0 8px 18px #00000047}.playlist-btn:active{transform:translateY(1px) scale(.995)}.playlist-btn:focus-visible{outline:2px solid #4f7cff;outline:2px solid var(--accent);outline-offset:3px}@media (max-height:680px){.play-toggle{height:100px;width:100px}.playlist-btn{padding:12px}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes pulse{0%,to{opacity:.35;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}@media (prefers-reduced-motion:reduce){.app-loader,.loader-orb,.loader-ring,.play-toggle,.playlist-btn,.sonos-card{animation:none!important;transition:none!important}}.now-playing-title{background:linear-gradient(90deg,#ffffff08,#ffffff0d 50%,#ffffff08);border:1px solid #27272f;border:1px solid var(--border);border-radius:12px;color:#e5e7eb;color:var(--text);font-size:clamp(1rem,1.3vw,1.25rem);font-weight:600;letter-spacing:.02em;margin:clamp(8px,1.2vw,14px) 0 clamp(10px,1.4vw,16px);overflow:hidden;padding:clamp(10px,1vw,12px) clamp(14px,1.2vw,18px);text-align:center;text-overflow:ellipsis;transition:background .4s ease,color .4s ease;white-space:nowrap;width:100%}.is-playing .now-playing-title{animation:shimmer 3s linear infinite;background:linear-gradient(90deg,#ffffff0a,#ffffff14 40%,#ffffff0a 80%);background-size:200% auto}@keyframes shimmer{to{background-position:-200%}}
/*# sourceMappingURL=main.86009b17.css.map*/