.listener-app{color:#e6e8ee;text-shadow:0 0 10px #e6e8ee1a;z-index:1;background:0 0;width:100%;min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;position:relative;overflow-x:hidden}.listener-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;background:#0003;border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex;position:sticky;top:0}.header-brand{align-items:center;gap:.75rem;display:flex}.brand-icon{font-size:1.5rem}.header-brand h1{background:linear-gradient(135deg,#a78bfa,#60a5fa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:1.25rem;font-weight:600}.header-nav{gap:1.5rem;display:flex}.nav-link{color:#a0a0b8;border-radius:8px;padding:.5rem 1rem;font-size:.9rem;font-weight:500;text-decoration:none;transition:all .2s}.nav-link:hover{color:#e8e8f0;background:#ffffff1a}.listener-main{max-width:1400px;margin:0 auto;padding:2rem}.story-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:1.5rem;display:grid}.story-card{cursor:pointer;background:#ffffff08;border:1px solid #ffffff0d;border-radius:16px;padding:1.5rem;transition:all .5s ease-out;box-shadow:0 4px 20px #0000001a}.story-card:hover{background:#ffffff0f;border-color:#a78bfa33;transform:translateY(-2px);box-shadow:0 0 25px #a78bfa26}.story-card-world{text-transform:uppercase;letter-spacing:.1em;color:#a78bfa;margin-bottom:.5rem;font-size:.75rem}.story-card-title{color:#ebe8e4;margin:0 0 .5rem;font-size:1.25rem;font-weight:600}.story-card-narrator{color:#8888a0;margin-bottom:1rem;font-size:.875rem}.story-card-description{color:#a0a0b8;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;font-size:.875rem;line-height:1.5;display:-webkit-box;overflow:hidden}.story-card-duration{color:#60a5fa;align-items:center;gap:.5rem;margin-top:1rem;font-size:.75rem;display:flex}.filters-bar{border-bottom:1px solid #ffffff0d;flex-wrap:wrap;gap:1rem;padding:1rem 0;display:flex}.filter-select{color:#e8e8f0;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:8px;padding:.5rem 1rem;font-size:.875rem;transition:all .2s}.filter-select:hover{border-color:#a78bfa80}.filter-select:focus{border-color:#a78bfa;outline:none;box-shadow:0 0 0 2px #a78bfa33}.player-container{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0000004d;border:1px solid #ffffff0d;border-radius:24px;padding:2rem;box-shadow:0 0 40px #14142880,inset 0 0 40px #a78bfa0d}.player-now-playing{text-align:center;margin-bottom:2rem}.player-title{color:#ebe8e4;margin:0 0 .25rem;font-size:1.5rem;font-weight:600}.player-narrator{color:#8888a0;font-size:.875rem}.transport-controls{justify-content:center;align-items:center;gap:.75rem;margin:1.5rem 0;display:flex}.transport-btn{cursor:pointer;color:#fff;background:#ffffff14;border:none;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:1.25rem;transition:all .2s;display:flex}.transport-btn:hover{background:#ffffff1f;transform:scale(1.05);box-shadow:0 0 15px #ffffff1a}.transport-btn:disabled{cursor:not-allowed}.transport-btn.play-pause{background:linear-gradient(135deg,#6c63ff 0%,#4a43c7 100%);border:1px solid #ffffff1a;width:64px;height:64px;font-size:1.5rem;box-shadow:0 0 20px #6c63ff66}.transport-btn.play-pause:hover{transform:scale(1.03);box-shadow:0 0 30px #6c63ff99}.transport-btn.transport-icon{background:#ffffff0d;width:40px;height:40px;font-size:1rem}.transport-btn.transport-icon.active{color:#a78bfa;background:#6c63ff33;box-shadow:0 0 10px #6c63ff33}.transport-icon-wrapper{position:relative}.sleep-menu{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;background:#141428f2;border:1px solid #ffffff1a;border-radius:12px;flex-direction:column;gap:.25rem;min-width:80px;padding:.5rem;display:flex;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)}.sleep-menu:after{content:"";border-bottom:6px solid #141428f2;border-left:6px solid #0000;border-right:6px solid #0000;position:absolute;top:-6px;left:50%;transform:translate(-50%)}.sleep-menu button{color:#a0a0b8;cursor:pointer;text-align:center;background:0 0;border:none;border-radius:8px;padding:.5rem .75rem;font-size:.875rem;transition:all .2s}.sleep-menu button:hover{color:#fff;background:#ffffff1a}.sleep-menu button.active{color:#a78bfa;background:#6c63ff4d}.progress-container{margin-bottom:1.5rem}.progress-bar{cursor:pointer;background:#ffffff1a;border-radius:3px;width:100%;height:6px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#a78bfa,#60a5fa);border-radius:3px;height:100%;transition:width .1s linear}.progress-times{color:#8888a0;justify-content:space-between;margin-top:.5rem;font-size:.75rem;display:flex}.controls-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:2rem;display:flex}.control-group{align-items:center;gap:.75rem;display:flex}.control-group label{color:#8888a0;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;font-size:.65rem}.volume-slider{appearance:none;cursor:pointer;background:#fff3;border-radius:2px;flex:1;width:100%;min-width:50px;height:4px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#a78bfa;border-radius:50%;width:14px;height:14px}.timer-select{color:#e8e8f0;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:6px;padding:.375rem .75rem;font-size:.875rem}.mixer-toggle{color:#a0a0b8;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:8px;padding:.5rem 1rem;font-size:.875rem;transition:all .2s}.mixer-toggle:hover{color:#e8e8f0;background:#ffffff1f}.mixer-toggle.active{color:#a78bfa;background:#a78bfa33;border-color:#a78bfa}.sound-mixer{margin-top:1rem}.mixer-section{margin-bottom:1.5rem}.mixer-section-title{text-transform:uppercase;letter-spacing:.1em;color:#8888a0;margin-bottom:.75rem;font-size:.75rem}.mixer-buttons{flex-wrap:wrap;gap:.5rem;display:flex}.mixer-btn{color:#a0a0b8;cursor:pointer;background:#ffffff14;border:1px solid #ffffff1a;border-radius:8px;padding:.5rem 1rem;font-size:.875rem;transition:all .2s}.mixer-btn:hover{color:#e8e8f0;background:#ffffff1f;box-shadow:0 0 10px #ffffff0d}.mixer-btn.active{color:#a78bfa;background:#a78bfa26;border-color:#a78bfa80;box-shadow:0 0 15px #a78bfa26}.mixer-slider-group{align-items:center;gap:1rem;margin-top:.75rem;display:flex}.mixer-slider-group label{color:#8888a0;min-width:60px;font-size:.75rem}.mixer-slider{appearance:none;cursor:pointer;background:#ffffff26;border-radius:2px;flex:1;height:4px}.mixer-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#60a5fa;border-radius:50%;width:12px;height:12px}.mixer-header{border-bottom:1px solid #ffffff1a;margin-bottom:1rem;padding-bottom:.5rem;font-size:1rem;font-weight:600}.mixer-select{width:100%;margin-bottom:.5rem}.mixer-subsection{background:#ffffff08;border-left:2px solid #a78bfa4d;border-radius:8px;margin-top:.75rem;padding:.75rem .75rem .75rem 1rem}.mixer-subsection-header{color:#a0a0b8;align-items:center;gap:.5rem;margin-bottom:.5rem;font-size:.8rem;display:flex}.info-btn{color:#6c63ff;cursor:pointer;background:0 0;border:1px solid #6c63ff;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:.7rem;display:flex}.info-btn:hover{background:#6c63ff33}.info-tooltip{color:#a0a0b8;background:#6c63ff1a;border-radius:8px;margin-bottom:.5rem;padding:.5rem;font-size:.75rem;line-height:1.4}.mixer-btn-small{padding:.35rem .5rem;font-size:.75rem}.hz-label{opacity:.7;margin-top:2px;font-size:.65rem;display:block}.page-title{color:#ebe8e4;margin:0 0 .5rem;font-size:2rem;font-weight:700}.page-subtitle{color:#8888a0;margin:0 0 1.5rem;font-size:1rem}.loading-container{color:#8888a0;flex-direction:column;justify-content:center;align-items:center;padding:4rem;display:flex}.loading-spinner{border:3px solid #a78bfa33;border-top-color:#a78bfa;border-radius:50%;width:40px;height:40px;margin-bottom:1rem;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;color:#8888a0;padding:4rem}.empty-state-icon{margin-bottom:1rem;font-size:3rem}.queue-status{z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#140f28f2;border:1px solid #9b87f54d;border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:.75rem 1rem;display:flex;position:sticky;top:60px;box-shadow:0 4px 15px #0000004d}.queue-status-text{color:#9b87f5}.queue-status-link{color:#9b87f5;text-decoration:underline}.story-card-actions{gap:.5rem;margin-top:.75rem;display:flex}.story-card-actions .mixer-btn{flex:1}.story-card-actions .mixer-btn.disabled{opacity:.6}.volume-row{flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}.volume-row .control-group{flex:1;justify-content:center;min-width:0}.story-description{background:#ffffff0d;border-radius:12px;margin-top:2rem;padding:1rem}.story-description p{color:#a0a0b8;margin:0;line-height:1.6}.track-indicator{color:#8888a0;justify-content:center;align-items:center;gap:1rem;margin-bottom:1rem;font-size:.875rem;display:flex}.mixer-header{border-bottom:1px solid #ffffff1a;margin-bottom:1rem;padding-bottom:.5rem}.mixer-header span{font-size:1rem;font-weight:600}.modulation-header{align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.modulation-label{color:#a0a0b8;font-size:.8rem}.modulation-info-btn{color:#6c63ff;cursor:pointer;background:0 0;border:1px solid #6c63ff;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:.7rem;display:flex}.modulation-tooltip{color:#a0a0b8;background:#6c63ff1a;border-radius:8px;margin-bottom:.5rem;padding:.5rem;font-size:.75rem;line-height:1.4}.modulation-section{border-top:1px solid #ffffff0d;margin-top:.75rem;padding-top:.5rem}.skip-intro-container{text-align:center;margin:1rem 0}.skip-intro-container .mixer-btn{padding:.6rem 1.2rem;font-size:.9rem}.slider-value{text-align:right;color:#a0a0b8;min-width:35px;margin-left:.5rem;font-size:.8rem}.repeat-btn{padding:.4rem .6rem}.queue-panel{background:#ffffff0d;border-radius:12px;margin-top:1rem;overflow:hidden}.queue-header{background:#9b87f526;border-bottom:1px solid #ffffff1a;padding:.75rem 1rem}.queue-header span{color:#9b87f5;font-size:.875rem;font-weight:600}.queue-list{max-height:200px;margin:0;padding:0;list-style:none;overflow-y:auto}.queue-item{border-bottom:1px solid #ffffff0d;align-items:center;gap:.75rem;padding:.75rem 1rem;transition:background .2s;display:flex}.queue-item:last-child{border-bottom:none}.queue-item:hover{background:#ffffff0d}.queue-item.playing{background:#9b87f51a}.queue-item-indicator{color:#8888a0;min-width:20px;font-size:.875rem}.queue-item.playing .queue-item-indicator{color:#9b87f5}.queue-item-title{color:#e0e0e8;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:.875rem;overflow:hidden}.queue-item-remove{color:#8888a0;cursor:pointer;opacity:.6;background:0 0;border:none;padding:.25rem;font-size:.875rem;transition:opacity .2s,color .2s}.queue-item-remove:hover{opacity:1;color:#ff6b6b}.player-container{position:relative}.queue-toggle-btn{color:#a0a0b8;cursor:pointer;z-index:10;background:#ffffff1a;border:none;border-radius:8px;width:40px;height:40px;font-size:1.25rem;transition:all .2s;position:absolute;top:1rem;right:1rem}.queue-toggle-btn:hover,.queue-toggle-btn.active{color:#a78bfa;background:#6c63ff4d}.mixer-toggle-btn{color:#a0a0b8;cursor:pointer;background:#ffffff14;border:1px solid #ffffff1a;border-radius:12px;width:100%;margin:1rem 0;padding:.75rem 1rem;font-size:.9rem;transition:all .2s;display:block}.mixer-toggle-btn:hover,.mixer-toggle-btn.active{color:#a78bfa;background:#6c63ff26;border-color:#6c63ff4d}.queue-slide-panel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1000;background:#141428fa;border-left:1px solid #ffffff1a;flex-direction:column;width:300px;height:100vh;transition:transform .3s;display:flex;position:fixed;top:0;right:0;overflow:hidden;transform:translate(100%)}.queue-slide-panel.open{transform:translate(0)}.queue-panel-header{background:#6c63ff1a;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:1.25rem 1rem;display:flex}.queue-panel-header h3{color:#a78bfa;margin:0;font-size:1rem;font-weight:600}.queue-close-btn{color:#a0a0b8;cursor:pointer;background:0 0;border:none;padding:.25rem;font-size:1.25rem;transition:color .2s}.queue-close-btn:hover{color:#fff}.queue-slide-panel .queue-list{flex:1;max-height:none;overflow-y:auto}.add-tracks-btn{color:#a78bfa;cursor:pointer;background:linear-gradient(135deg,#6c63ff4d,#4a43c74d);border:1px dashed #a78bfa80;border-radius:12px;margin:1rem;padding:.75rem 1rem;font-size:.9rem;transition:all .2s}.add-tracks-btn:hover{background:linear-gradient(135deg,#6c63ff66,#4a43c766);border-color:#a78bfacc}.mini-library{background:#ffffff0d;border-top:1px solid #ffffff0d;padding:1rem}.mini-library-hint{color:#8888a0;margin:0 0 .75rem;font-size:.8rem}.mini-library-link{color:#a78bfa;text-align:center;background:#6c63ff26;border-radius:8px;padding:.75rem 1rem;font-size:.9rem;text-decoration:none;transition:background .2s;display:block}.mini-library-link:hover{background:#6c63ff40}.mini-library-list{max-height:200px;margin:0;padding:0;list-style:none;overflow-y:auto}.mini-library-item{border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:.5rem 0;display:flex}.mini-library-item:last-child{border-bottom:none}.mini-library-title{color:#e0e0e8;white-space:nowrap;text-overflow:ellipsis;flex:1;margin-right:.5rem;font-size:.85rem;overflow:hidden}.mini-library-add{color:#a78bfa;cursor:pointer;background:#6c63ff4d;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:1rem;transition:all .2s;display:flex}.mini-library-add:hover{background:#6c63ff80;transform:scale(1.1)}.queue-overlay{z-index:999;background:#00000080;position:fixed;inset:0}.header-brand{color:inherit;text-decoration:none}.header-brand:hover h1{color:#a78bfa}@media (max-width:768px){.listener-header,.listener-main{padding:1rem}.story-grid{grid-template-columns:1fr}.player-container{border-radius:16px;padding:1.5rem}.controls-row{flex-direction:column;gap:1rem}.queue-slide-panel{width:85%}}.error-container{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:50vh;padding:4rem 2rem;display:flex}.error-icon{margin-bottom:1.5rem;font-size:4rem}.error-title{color:#fff;margin:0 0 .75rem;font-size:1.5rem;font-weight:600}.error-message{color:#a0a0b8;max-width:400px;margin:0 0 2rem;line-height:1.6}.error-actions{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.error-btn{cursor:pointer;border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:.9rem;font-weight:500;transition:all .2s}.error-btn.primary{color:#fff;background:linear-gradient(135deg,#6c63ff 0%,#4a43c7 100%)}.error-btn.primary:hover{transform:translateY(-2px);box-shadow:0 4px 15px #6c63ff4d}.error-btn.secondary{color:#a0a0b8;background:#ffffff14;border:1px solid #ffffff26}.error-btn.secondary:hover{color:#fff;background:#ffffff1f}.auth-container{justify-content:center;align-items:center;min-height:calc(100vh - 120px);padding:2rem;display:flex}.auth-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:24px;width:100%;max-width:400px;padding:2.5rem}.auth-header{text-align:center;margin-bottom:2rem}.auth-icon{margin-bottom:1rem;font-size:3rem;display:block}.auth-title{color:#fff;background:linear-gradient(135deg,#a78bfa,#60a5fa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0 0 .5rem;font-size:1.75rem;font-weight:700}.auth-subtitle{color:#8888a0;margin:0;font-size:.9rem;line-height:1.5}.auth-error{color:#fca5a5;text-align:center;background:#ef444426;border:1px solid #ef44444d;border-radius:12px;margin-bottom:1.5rem;padding:.75rem 1rem;font-size:.875rem}.auth-success{color:#86efac;text-align:center;background:#22c55e26;border:1px solid #22c55e4d;border-radius:12px;margin-bottom:1.5rem;padding:.75rem 1rem;font-size:.875rem}.auth-form{flex-direction:column;gap:1.25rem;display:flex}.auth-field{flex-direction:column;gap:.5rem;display:flex}.auth-field label{color:#a0a0b8;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:500}.auth-field input{color:#fff;background:#ffffff14;border:1px solid #ffffff26;border-radius:10px;padding:.875rem 1rem;font-size:1rem;transition:all .2s}.auth-field input::placeholder{color:#6b6b80}.auth-field input:focus{border-color:#a78bfa;outline:none;box-shadow:0 0 0 3px #a78bfa26}.auth-submit{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6c63ff 0%,#4a43c7 100%);border:none;border-radius:12px;margin-top:.5rem;padding:1rem;font-size:1rem;font-weight:600;transition:all .2s;box-shadow:0 4px 15px #6c63ff4d}.auth-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6c63ff66}.auth-submit:active{transform:translateY(0)}.auth-footer{text-align:center;margin-top:2rem}.auth-footer p{color:#8888a0;margin:0 0 .75rem;font-size:.875rem}.auth-footer a{color:#a78bfa;font-weight:500;text-decoration:none;transition:color .2s}.auth-footer a:hover{color:#c4b5fd;text-decoration:underline}.auth-skip{border-top:1px solid #ffffff1a;padding-top:1rem;margin-top:1rem!important}.auth-skip a{color:#6b6b80;font-weight:400}.auth-skip a:hover{color:#a0a0b8}.header-auth{align-items:center;gap:.75rem;display:flex}.auth-link{border-radius:8px;padding:.5rem 1rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .2s}.auth-link.login{color:#a0a0b8;background:0 0}.auth-link.login:hover{color:#fff;background:#ffffff1a}.auth-link.signup{color:#fff;background:linear-gradient(135deg,#6c63ff 0%,#4a43c7 100%);box-shadow:0 2px 8px #6c63ff4d}.auth-link.signup:hover{transform:translateY(-1px);box-shadow:0 4px 12px #6c63ff66}.user-menu-container{position:relative}.user-menu-trigger{cursor:pointer;background:linear-gradient(135deg,#6c63ff 0%,#4a43c7 100%);border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex}.user-menu-trigger:hover{transform:scale(1.05);box-shadow:0 4px 15px #6c63ff66}.user-avatar{color:#fff;font-size:1rem;font-weight:600}.user-menu-dropdown{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:200;background:#141428fa;border:1px solid #ffffff1a;border-radius:12px;min-width:200px;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 8px 32px #0006}.user-menu-header{background:#6c63ff1a;border-bottom:1px solid #ffffff1a;padding:1rem}.user-menu-email{color:#a0a0b8;word-break:break-all;font-size:.875rem}.user-menu-divider{background:#ffffff1a;height:1px}.user-menu-item{color:#a0a0b8;text-align:left;cursor:pointer;background:0 0;border:none;width:100%;padding:.875rem 1rem;font-size:.875rem;transition:all .2s;display:block}.user-menu-item:hover{color:#fff;background:#ffffff14}.user-menu-item.logout:hover{color:#fca5a5;background:#ef444426}