body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}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)}}.navbar{align-items:center;background-color:#44624a;display:flex;font-size:1.2rem;height:80px;justify-content:center;position:-webkit-sticky;position:sticky;top:0;z-index:999}.navbar__container{display:flex;height:80px;justify-content:space-between;margin:0 auto;max-width:1300px;padding:0 50px;width:100%;z-index:1}#navbar__logo{-webkit-text-fill-color:#0000;background:linear-gradient(0deg,#fff 0,#8ba888);background-clip:text;-webkit-background-clip:text;cursor:pointer;font-size:2rem;font-weight:700;text-decoration:none}#navbar__logo,.navbar__menu{align-items:center;display:flex}.navbar__menu{list-style:none;text-align:center}.navbar__item{height:80px}.navbar__links{align-items:center;color:#fff;display:flex;height:100%;justify-content:center;padding:0 1rem;text-decoration:none;transition:color .3s ease}.navbar__links:hover{color:#c0cfb2}.navbar__btn{padding:0 1rem}.button,.navbar__btn{align-items:center;display:flex;justify-content:center}.button{background-color:#8ba888;border:none;border-radius:8px;color:#fff;cursor:pointer;outline:none;padding:10px 20px;text-decoration:none;transition:all .3s ease}.button:hover{background-color:#c0cfb2;color:#44624a;transform:translateY(-2px)}.navbar__toggle{cursor:pointer;display:none;flex-direction:column}.bar{background:#fff;height:3px;margin:3px 0;transition:.3s;width:25px}@media screen and (max-width:960px){.navbar__container{padding:0 20px}.navbar__menu{background-color:#c0cfb2;box-shadow:0 10px 27px #0000000d;flex-direction:column;left:-100%;position:fixed;text-align:center;top:80px;transition:.3s;width:100%}.navbar__menu.active{left:0}.navbar__item{height:auto;width:100%}.navbar__links{color:#44624a;display:block;padding:1.5rem;width:100%}.navbar__btn{padding:1rem;width:100%}.navbar__toggle{display:flex}.navbar__toggle.is-active .bar:nth-child(2){opacity:0}.navbar__toggle.is-active .bar:first-child{transform:translateY(8px) rotate(45deg)}.navbar__toggle.is-active .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}}.main{background:linear-gradient(135deg,#c0cfb2,#8ba888)}.main,.main__container{min-height:calc(100vh - 80px)}.main__container{align-items:center;display:flex;justify-content:flex-start;margin:0 auto;max-width:1300px;padding:0 50px}.main__content{color:#44624a}.timer-section{align-items:center;display:flex;flex-direction:column;margin:0}.timer-ring-container{align-items:center;display:flex;justify-content:center;position:relative}.timer-ring{left:0;position:absolute;top:0}.timer-ring-bg{fill:none;stroke:#ffffff4d}.timer-ring-progress{fill:none;stroke-linecap:round;transition:stroke-dashoffset .5s ease}.timer-ring-progress.work{stroke:#44624ad9}.timer-ring-progress.break{stroke:#8ba888e6}.timer-display{align-items:center;backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);background:#f1ebe18c;border:1px solid #ffffff8c;border-radius:50%;box-shadow:0 12px 48px #44624a26;color:#44624a;display:flex;font-size:5rem;font-weight:800;height:280px;justify-content:center;letter-spacing:-2px;margin:20px;padding:0;text-align:center;width:280px}.keyboard-hints{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#f1ebe173;border:1px solid #fff6;border-radius:999px;display:flex;gap:16px;margin-top:20px;padding:8px 16px}.keyboard-hints span{color:#44624a;font-size:.75rem;font-weight:600;opacity:.7}.timer-controls-fixed{backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);background:#f1ebe18c;border:1px solid #ffffff8c;border-radius:999px;bottom:20px;display:inline-flex;gap:6px;left:44%;padding:6px;position:fixed;transform:translateX(calc(-50% - 120px));z-index:50}.timer-tab{align-items:center;background:#0000;border:none;border-radius:999px;color:#44624a;cursor:pointer;display:flex;font-size:.8rem;font-weight:800;gap:6px;padding:6px 10px;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.timer-tab:hover{transform:translateY(-1px)}.timer-tab.active{background:#44624ae0;box-shadow:0 8px 18px #44624a2e;color:#fff}.timer-tab-icon{font-size:.9rem;line-height:1}.timer-tab-label{font-size:.8rem}.timer-input-wrapper{align-items:center;background:#fff9;border:1px solid #8ba8884d;border-radius:999px;display:flex;gap:4px;padding:4px 10px}.timer-duration-input{-webkit-appearance:textfield;appearance:textfield;background:#0000;border:none;color:#44624a;font-size:.85rem;font-weight:800;outline:none;text-align:center;width:36px}.timer-duration-input::-webkit-inner-spin-button,.timer-duration-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.timer-duration-input:disabled{cursor:not-allowed;opacity:.5}.timer-input-label{color:#44624a;font-size:.75rem;font-weight:700;opacity:.7}.break-indicator{backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);background:#f1ebe18c;border:1px solid #ffffff8c;border-radius:999px;margin-top:20px;padding:12px 20px;text-align:center}.break-indicator p{color:#44624a;font-size:1rem;font-weight:800;margin:0}.sound-controls{backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);background:#f1ebe18c;border:1px solid #ffffff8c;border-radius:999px;bottom:20px;display:inline-flex;gap:6px;left:50%;padding:6px;position:fixed;transform:translateX(calc(-50% + 80px));z-index:50}.sound-button-container{display:inline-block;position:relative}.brown-btn,.rain-btn,.typing-btn{align-items:center;background:#0000;border:none;border-radius:999px;color:#44624a;cursor:pointer;display:flex;font-size:.8rem;font-weight:800;gap:6px;padding:6px 10px;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.brown-btn:hover,.rain-btn:hover,.typing-btn:hover{transform:translateY(-1px)}.brown-btn.playing,.rain-btn.playing,.typing-btn.playing{background:#44624ae0;box-shadow:0 8px 18px #44624a2e;color:#fff}.sound-icon{font-size:.9rem;line-height:1}.sound-label{font-size:.8rem}.volume-popup{backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);background:#f1ebe1d9;border:1px solid #ffffff8c;border-radius:16px;bottom:130%;box-shadow:0 10px 40px #44624a2e;color:#44624a;left:50%;min-width:180px;opacity:0;padding:16px 20px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:all .25s ease;visibility:hidden;z-index:100}.volume-popup.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(-8px);visibility:visible}.volume-control{align-items:center;display:flex;gap:12px}.volume-control label{color:#44624a;font-size:.85rem;font-weight:700;white-space:nowrap}.volume-slider{-webkit-appearance:none;appearance:none;background:#8ba88859;border-radius:999px;cursor:pointer;flex:1 1;height:5px;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#44624aeb;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 10px #44624a40;cursor:pointer;height:18px;-webkit-transition:all .2s ease;transition:all .2s ease;width:18px}.volume-slider:hover::-webkit-slider-thumb{box-shadow:0 4px 14px #44624a59;transform:scale(1.1)}.volume-slider::-moz-range-thumb{background:#44624aeb;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 10px #44624a40;cursor:pointer;height:18px;width:18px}.popup-arrow{border-left:10px solid #0000;border-right:10px solid #0000;border-top:10px solid #f1ebe1d9;bottom:-10px;height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:101}@media screen and (max-width:960px){.main__container{justify-content:center;padding:0 20px}.timer-display{font-size:4rem;height:240px;width:240px}.timer-ring-container svg{height:280px;width:280px}.sound-controls{gap:6px;padding:6px}}@media screen and (max-width:768px){.timer-display{font-size:3rem;height:200px;width:200px}.timer-ring-container svg{height:240px;width:240px}.keyboard-hints{display:none}.sound-controls{bottom:15px;gap:4px;padding:5px;transform:translateX(calc(-50% + 60px))}.brown-btn,.rain-btn,.typing-btn{font-size:.75rem;padding:5px 8px}.sound-icon{font-size:.8rem}.sound-label{font-size:.75rem}.timer-controls-fixed{bottom:15px;gap:4px;padding:5px;transform:translateX(calc(-50% - 130px))}.timer-tab{font-size:.75rem;padding:5px 8px}.timer-tab-icon{font-size:.8rem}.timer-tab-label{font-size:.75rem}.timer-input-wrapper{padding:3px 8px}.timer-duration-input{font-size:.75rem;width:30px}.timer-input-label{font-size:.7rem}.volume-popup{min-width:180px;padding:15px 20px}}.service-toggle{display:flex;gap:10px;justify-content:center;margin:20px 0}.service-btn{background-color:#f1ebe1;border:2px solid #44624a;border-radius:8px;color:#44624a;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 25px;transition:all .3s ease}.service-btn:hover{background-color:#8ba888;color:#fff;transform:translateY(-2px)}.service-btn.active{background-color:#44624a;box-shadow:0 4px 12px #44624a4d;color:#f1ebe1}.floating-player{grid-column-gap:14px;grid-row-gap:10px;align-items:center;backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);background:#f1ebe1a6;border:1px solid #ffffff73;border-radius:16px;bottom:20px;box-shadow:0 10px 40px #44624a33;column-gap:14px;display:grid;grid-template-columns:80px 1fr;grid-template-rows:auto auto;max-width:320px;padding:15px;position:fixed;right:20px;row-gap:10px;transition:max-width .3s ease,grid-template-columns .3s ease;z-index:50}.floating-player.youtube-video-active{grid-template-columns:160px 1fr;max-width:400px}.floating-player-cover{border-radius:12px;box-shadow:0 4px 12px #44624a33;grid-column:1;grid-row:1/span 2;height:80px;object-fit:cover;width:80px}.floating-player-cover.placeholder{align-items:center;background:linear-gradient(135deg,#8ba888,#44624a);color:#fff;display:flex;font-size:2rem;justify-content:center}.embedded-youtube-player{background:#000;border-radius:12px;grid-column:1;grid-row:1/span 2;height:90px;overflow:hidden;position:relative;transition:width .3s ease,height .3s ease;width:160px}.embedded-youtube-player iframe{border:none;border-radius:12px;height:90px!important;pointer-events:none;width:160px!important}.embedded-youtube-player .youtube-loading{align-items:center;background:linear-gradient(135deg,#8ba888,#44624a);color:#fff;display:flex;font-size:2rem;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.floating-player-info{display:flex;flex-direction:column;grid-column:2;grid-row:1;justify-content:space-between;overflow:hidden}.floating-player-title{color:#44624a;font-size:.95rem;font-weight:700}.floating-player-artist,.floating-player-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.floating-player-artist{color:#666;font-size:.85rem}.service-indicator{color:#8ba888;font-size:.8rem;font-weight:600;margin-top:5px}.device-status{color:#d4731f;font-size:.8rem;margin-top:5px}.floating-player-controls{align-items:center;display:flex;gap:8px;grid-column:2;grid-row:2;justify-content:flex-start}.floating-player-tabs{backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);background:#f1ebe18c;border:1px solid #ffffff8c;border-radius:999px;display:flex;gap:6px;padding:6px;position:absolute;right:16px;top:-50px}.floating-tab{background:#0000;border:none;border-radius:999px;color:#44624a;cursor:pointer;font-size:.8rem;font-weight:800;padding:6px 10px;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.floating-tab:hover{transform:translateY(-1px)}.floating-tab.active{background:#44624ae0;box-shadow:0 8px 18px #44624a2e;color:#fff}.floating-player.has-search{grid-template-rows:auto auto auto}.floating-player-search{grid-column:1/-1;grid-row:3}.floating-player-search .spotify-search-container{background:#0000;border:none;margin:0;padding:0}.floating-player-search .spotify-search-form{margin-bottom:10px}.floating-player-search .spotify-search-results{max-height:220px}.floating-player-search .spotify-search-header{display:none}.floating-player-search .youtube-search-container{background:#0000;border:none;margin:0;padding:0}.floating-player-search .youtube-results{max-height:220px}.youtube-search-container.compact{background:#0000;border:none;margin:0;padding:0}.spotify-search-container.compact .spotify-search-modes{display:none}.spotify-search-container.compact .spotify-search-form{margin-bottom:10px}.spotify-search-container.compact .spotify-search-input{border-radius:12px}.spotify-search-container.compact .spotify-search-btn{border-radius:12px;padding:12px 14px}.floating-login .spotify-btn{border-radius:10px;font-size:.95rem;height:36px;padding:10px 14px}.floating-login .spotify-btn.button{box-shadow:0 2px 8px #44624a33}.floating-btn{align-items:center;background:#44624ac7;border:1px solid #ffffff59;border-radius:12px;box-shadow:0 6px 18px #44624a2e;color:#fff;cursor:pointer;display:flex;font-size:1rem;height:36px;justify-content:center;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;width:36px}.floating-btn:hover:not(:disabled){background:#44624aeb;box-shadow:0 10px 22px #44624a3d;transform:translateY(-1px)}.floating-btn:disabled{cursor:not-allowed;opacity:.5}.floating-btn.active{background:#44624afa;box-shadow:0 10px 22px #44624a3d}.volume-btn{position:relative}.volume-controls-popup{backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);background:#f1ebe1e6;border:1px solid #ffffff80;border-radius:8px;bottom:100%;box-shadow:0 6px 20px #44624a33;margin-bottom:10px;min-width:180px;padding:12px 15px;position:absolute;right:0;white-space:nowrap;z-index:100}.volume-controls-popup label{color:#44624a;display:block;font-size:.9rem;font-weight:600;margin-bottom:8px}.volume-controls-popup .volume-slider{width:100%}.player-notification{animation:slideIn .3s ease;border-radius:8px;font-weight:600;padding:15px 20px;position:fixed;right:20px;top:20px;z-index:100}.player-notification.error{background-color:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.player-notification.warning{background-color:#fff3cd;border:1px solid #ffeeba;color:#856404}@keyframes slideIn{0%{opacity:0;transform:translateX(400px)}to{opacity:1;transform:translateX(0)}}@media screen and (max-width:768px){.floating-player{bottom:10px;column-gap:12px;max-width:250px;padding:12px;right:10px;row-gap:10px}.floating-player-cover{height:70px;width:70px}.floating-player.youtube-video-active{grid-template-columns:120px 1fr;max-width:300px}.embedded-youtube-player{height:68px;width:120px}.embedded-youtube-player iframe{height:68px!important;margin-left:0;pointer-events:none;width:120px!important}.service-toggle{flex-wrap:wrap;gap:8px}.service-btn{font-size:.9rem;padding:10px 20px}}.youtube-search-container{background:linear-gradient(135deg,#8ba8881a,#44624a0d);border:2px solid #8ba88833;border-radius:12px;margin:30px 0;padding:20px}.youtube-search-form{display:flex;gap:10px;margin-bottom:20px}.youtube-search-input{border:2px solid #8ba888;border-radius:8px;flex:1 1;font-family:inherit;font-size:1rem;padding:12px 15px;transition:all .3s ease}.youtube-search-input:focus{border-color:#44624a;box-shadow:0 0 0 3px #44624a1a;outline:none}.youtube-search-btn{background:linear-gradient(135deg,#8ba888,#44624a);border:none;border-radius:8px;box-shadow:0 4px 12px #44624a33;color:#fff;cursor:pointer;font-size:.8rem;font-weight:600;overflow:hidden;padding:12px 25px;text-overflow:ellipsis;transition:all .3s ease;white-space:nowrap}.youtube-search-btn:hover:not(:disabled){box-shadow:0 6px 16px #44624a4d;transform:translateY(-2px)}.youtube-search-btn:disabled{cursor:not-allowed;opacity:.7}.youtube-error{background-color:#f8d7da;border:1px solid #f5c6cb;border-radius:8px;color:#721c24;font-weight:500;margin-bottom:20px;padding:15px}.youtube-results{display:flex;flex-direction:column;gap:12px;max-height:500px;overflow-y:auto;padding:10px}.youtube-result-item{background:#fff;border:1px solid #8ba88833;border-radius:8px;cursor:pointer;display:flex;gap:12px;padding:12px;transition:all .2s ease}.youtube-result-item:hover{border-color:#8ba888;box-shadow:0 4px 12px #44624a26}.youtube-result-thumbnail{border-radius:6px;height:60px;object-fit:cover;width:80px}.youtube-result-info{display:flex;flex:1 1;flex-direction:column;justify-content:center;min-width:0}.youtube-result-title{color:#44624a;font-size:.95rem;font-weight:600}.youtube-result-channel,.youtube-result-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.youtube-result-channel{color:#666;font-size:.85rem;margin-top:4px}.youtube-result-select-btn{background:linear-gradient(135deg,#8ba888,#44624a);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:8px 16px;transition:all .2s ease;white-space:nowrap}.youtube-result-select-btn:hover{box-shadow:0 3px 8px #44624a33;transform:translateY(-1px)}.spotify-search-container{background:linear-gradient(135deg,#8ba8881a,#44624a0d);border:2px solid #8ba88833;border-radius:12px;margin:30px 0;padding:20px}.spotify-search-header{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:14px}.spotify-search-title{color:#44624a;font-size:1.15rem;font-weight:800}.spotify-search-modes{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.spotify-search-mode{background:#f1ebe1bf;border:1px solid #44624a40;border-radius:999px;color:#44624a;cursor:pointer;font-weight:700;padding:8px 12px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.spotify-search-mode:hover:not(:disabled){box-shadow:0 8px 18px #44624a26;transform:translateY(-1px)}.spotify-search-mode.active{background:#44624ae0;border-color:#ffffff59;color:#fff}.spotify-search-mode:disabled{cursor:not-allowed;opacity:.6}.spotify-search-form{display:flex;gap:10px;margin-bottom:14px}.spotify-search-input{border:2px solid #8ba888;border-radius:10px;flex:1 1;font-family:inherit;font-size:1rem;padding:12px 15px;transition:all .3s ease}.spotify-search-input:focus{border-color:#44624a;box-shadow:0 0 0 3px #44624a1a;outline:none}.spotify-search-btn{background:linear-gradient(135deg,#8ba888,#44624a);border:none;border-radius:10px;box-shadow:0 4px 12px #44624a33;color:#fff;cursor:pointer;font-size:.75rem;font-weight:700;max-width:100px;overflow:hidden;padding:12px 18px;text-overflow:ellipsis;transition:transform .2s ease,box-shadow .2s ease;white-space:nowrap}.spotify-search-btn:hover:not(:disabled){box-shadow:0 8px 16px #44624a40;transform:translateY(-1px)}.spotify-search-btn:disabled{cursor:not-allowed;opacity:.7}.spotify-search-error{background:#f8d7daf2;border:1px solid #f5c6cbe6;border-radius:10px;color:#721c24;font-weight:600;margin-bottom:12px;padding:12px 14px}.spotify-search-results{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;padding:6px}.spotify-search-result{grid-gap:12px;align-items:center;background:#fffc;border:1px solid #8ba88840;border-radius:12px;display:grid;gap:12px;grid-template-columns:52px 1fr auto;padding:12px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.spotify-search-result:hover{border-color:#8ba88880;box-shadow:0 10px 22px #44624a1f;transform:translateY(-1px)}.spotify-search-thumb{border-radius:10px;box-shadow:0 4px 12px #44624a1f;height:52px;object-fit:cover;width:52px}.spotify-search-thumb.placeholder{align-items:center;background:#44624a1f;color:#44624a;display:flex;font-weight:900;justify-content:center}.spotify-search-result-info{min-width:0;text-align:left}.spotify-search-result-title{color:#44624a;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spotify-search-result-subtitle{color:#666;font-size:.9rem;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spotify-search-play-btn{background:#44624ae0;border:1px solid #ffffff59;border-radius:12px;color:#fff;cursor:pointer;font-weight:800;padding:10px 14px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.spotify-search-play-btn:hover:not(:disabled){background:#44624afa;box-shadow:0 10px 20px #44624a2e;transform:translateY(-1px)}.spotify-search-play-btn:disabled{cursor:not-allowed;opacity:.6}@media screen and (max-width:768px){.youtube-search-form{flex-direction:column}.youtube-search-input{min-width:0}.youtube-result-item{flex-wrap:wrap}.youtube-result-thumbnail{height:auto;width:100%}.spotify-search-form{flex-direction:column}.spotify-search-modes{justify-content:center}}.spotify-controls{background:linear-gradient(135deg,#8ba8881a,#44624a0d);border:2px solid #8ba88833;border-radius:12px;margin:30px 0;padding:25px}.spotify-track-info{align-items:center;border-bottom:1px solid #8ba88833;display:flex;gap:20px;margin-bottom:20px;padding-bottom:20px}.spotify-track-image{border-radius:8px;box-shadow:0 4px 12px #44624a33;height:100px;object-fit:cover;width:100px}.spotify-track-details{flex:1 1}.spotify-track-name{color:#44624a;font-size:1.3rem;font-weight:700;margin-bottom:5px}.spotify-track-artist,.spotify-track-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spotify-track-artist{color:#666;font-size:1rem}.spotify-controls-buttons{display:flex;gap:12px;justify-content:center;margin-bottom:20px}.spotify-control-btn{background:linear-gradient(135deg,#8ba888,#44624a);border:none;border-radius:8px;box-shadow:0 4px 12px #44624a33;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 24px;transition:all .3s ease}.spotify-control-btn:hover{box-shadow:0 6px 16px #44624a4d;transform:translateY(-2px)}.spotify-control-btn.play-btn{background:linear-gradient(135deg,#c0cfb2,#8ba888);color:#44624a;font-size:1.1rem;padding:12px 30px}.spotify-control-btn.play-btn:hover{background:linear-gradient(135deg,#d0dfc2,#9bb898)}.spotify-volume-section{align-items:center;display:flex;flex-direction:column;gap:12px}.volume-toggle-btn{background:linear-gradient(135deg,#8ba888,#44624a);border:none;border-radius:8px;box-shadow:0 2px 8px #44624a33;color:#fff;cursor:pointer;font-size:.95rem;font-weight:600;padding:10px 20px;transition:all .3s ease}.volume-toggle-btn:hover{box-shadow:0 4px 12px #44624a4d;transform:translateY(-1px)}.spotify-volume-control{background:#fff;border:1px solid #8ba8884d;border-radius:8px;max-width:300px;padding:15px;width:100%}.spotify-volume-slider{-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,#c0cfb2,#8ba888);border-radius:4px;cursor:pointer;height:8px;outline:none;width:100%}.spotify-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:linear-gradient(135deg,#8ba888,#44624a);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 8px #44624a4d;cursor:pointer;height:24px;-webkit-transition:all .2s ease;transition:all .2s ease;width:24px}.spotify-volume-slider::-webkit-slider-thumb:hover{box-shadow:0 4px 12px #44624a66;transform:scale(1.1)}.spotify-volume-slider::-moz-range-thumb{background:linear-gradient(135deg,#8ba888,#44624a);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 8px #44624a4d;cursor:pointer;height:24px;-moz-transition:all .2s ease;transition:all .2s ease;width:24px}@media screen and (max-width:768px){.spotify-track-info{border-bottom:none;flex-direction:column;padding-bottom:15px;text-align:center}.spotify-track-image{height:80px;width:80px}.spotify-controls-buttons{flex-wrap:wrap;gap:10px}.spotify-control-btn{flex:1 1;min-width:100px}}
/*# sourceMappingURL=main.59edec6f.css.map*/