.listening-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,var(--bg-primary) 0,var(--bg-secondary) 100%);font-family:var(--app-font);transition:all .3s ease}[data-theme=dark] .listening-page{background:var(--bg-primary)}.listening-container{width:100%;flex:1;max-width:1200px;margin:0 auto;padding:0}.listening-main{padding:12px 24px 48px}.listening-hero-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.48fr);align-items:center;gap:52px;margin-bottom:22px;padding:8px 4px 26px;text-align:left;border-bottom:1px solid color-mix(in srgb,var(--border-color) 72%,transparent 28%)}.listening-hero-copy{min-width:0}.listening-hero-title{font-size:36px;font-weight:700;color:var(--text-primary);margin:0 0 13px;line-height:1.16;letter-spacing:-.035em}.listening-hover-note{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin:0;padding:3px 0;font-size:.84rem;font-weight:600;line-height:1.4;color:color-mix(in srgb,var(--text-primary) 68%,var(--text-secondary) 32%);animation:listening-hover-note-fade-in .22s ease-out}.listening-hover-note:before{content:"";flex:0 0 auto;width:3px;height:16px;border-radius:999px;background:var(--accent-color)}.listening-hero-audio-field{--listening-waveform-color:#6f97d4;--listening-waveform-energy:#14b8a6;--listening-waveform-halo:#7c3aed;position:relative;width:100%;height:112px;overflow:hidden;contain:layout paint;cursor:crosshair;isolation:isolate;border:0;border-radius:0;background:transparent;box-shadow:none}.listening-hero-audio-field:before{content:"";position:absolute;z-index:0;inset:20% 2%;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at 26% 52%,color-mix(in srgb,var(--accent-color) 19%,transparent 81%),transparent 48%),radial-gradient(ellipse at 66% 46%,color-mix(in srgb,#14b8a6 13%,transparent 87%),transparent 46%),radial-gradient(ellipse at 88% 54%,color-mix(in srgb,#7c3aed 10%,transparent 90%),transparent 42%);filter:blur(16px);opacity:.72;animation:listening-audio-aurora 5.4s ease-in-out infinite}.listening-hero-audio-field:after{content:none}.listening-hero-audio-canvas{position:relative;z-index:1;display:block;width:100%;height:100%;transform:translateZ(0);filter:saturate(1.16) drop-shadow(0 0 10px rgba(37,99,235,.26));touch-action:pan-y}@media (prefers-reduced-motion:reduce){.listening-hero-audio-field:after,.listening-hero-audio-field:before,.listening-hover-note{animation:none}}@keyframes listening-hover-note-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes listening-audio-aurora{0%,to{opacity:.5;transform:translate3d(-1.5%,0,0) scaleX(.9)}50%{opacity:.8;transform:translate3d(1.5%,0,0) scaleX(1.04)}}.listening-upgrade-notice-page{align-items:center;justify-content:center;padding:32px 20px}.listening-upgrade-notice{width:min(100%,520px);padding:32px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow-sm)}.listening-upgrade-notice__eyebrow{margin:0 0 10px;color:var(--accent-color);font-size:12px;font-weight:700;letter-spacing:0;text-transform:uppercase}.listening-upgrade-notice h1{margin:0 0 14px;color:var(--text-primary);font-size:28px;line-height:1.25}.listening-upgrade-notice p{margin:0;color:var(--text-secondary);font-size:16px;line-height:1.7}.listening-upgrade-notice__button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-top:24px;padding:0 18px;border:1px solid var(--accent-color);border-radius:6px;background:var(--accent-color);color:#fff;font-size:14px;font-weight:700;cursor:pointer}.listening-upgrade-notice__button:hover{filter:brightness(1.04)}.listening-actions{padding-top:0;margin-bottom:48px}.listening-page .action-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px;margin-top:0}.listening-page .action-card{background:var(--bg-card);border-radius:12px;padding:32px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit}.listening-page .action-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent-color),var(--success-color));transform:scaleX(0);transition:transform .3s ease}.listening-page .action-card:hover:before{transform:scaleX(1)}.listening-page .primary-card{background:linear-gradient(135deg,var(--accent-color),var(--success-color));color:white}.listening-page .primary-card .card-action span,.listening-page .primary-card .card-content h3,.listening-page .primary-card .card-content p,.listening-page .primary-card .card-features span{color:white}.listening-page .secondary-card{background:var(--bg-card);color:var(--text-primary)}.listening-page .card-icon{margin-bottom:20px;align-self:flex-start}.listening-page .card-icon svg{color:inherit}.listening-page .card-content{flex:1}.listening-page .card-content h3{font-size:20px;font-weight:700;margin:0 0 12px;line-height:1.3}.listening-page .card-content p{font-size:16px;line-height:1.6;margin:0 0 20px;opacity:.9}.listening-page .card-features{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.listening-page .card-features span{font-size:14px;opacity:.9;font-weight:500}.listening-page .card-action{display:flex;align-items:center;justify-content:space-between;font-weight:600;margin-top:auto}.listening-page .card-action svg{transition:transform .3s ease}.listening-page .action-card:hover .card-action svg{transform:translateX(4px)}.listening-features{text-align:center}.listening-features h3{font-size:24px;font-weight:700;color:var(--text-primary);margin:0 0 32px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}.feature-item{text-align:center;position:relative;overflow:hidden;isolation:isolate;padding:26px 24px 22px;background:color-mix(in srgb,var(--bg-card) 96%,white 4%);border-radius:20px;border:1px solid color-mix(in srgb,var(--border-color) 72%,rgba(255,255,255,.5));box-shadow:0 18px 36px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.72),inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}.feature-item>*{position:relative;z-index:1}.feature-item:before{inset:0;border-radius:inherit;padding:1px;background:rgba(255,255,255,.54);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.feature-item:after,.feature-item:before{content:"";position:absolute;pointer-events:none}.feature-item:after{inset:auto -48px -56px auto;width:140px;height:140px;border-radius:999px;background:rgba(255,255,255,.34);filter:blur(36px);z-index:-1}.feature-item:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent-color) 42%,white);box-shadow:0 22px 44px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.78),inset 0 0 0 1px rgba(255,255,255,.12)}.feature-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;background:rgba(255,255,255,.56);border-radius:20px;margin-bottom:18px;border:1px solid color-mix(in srgb,var(--border-color) 70%,rgba(255,255,255,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 10px 18px rgba(15,23,42,.06);color:var(--text-primary)}.feature-icon-svg{width:44px;height:44px}[data-theme=dark] .feature-icon{background:#000000;border-color:rgba(255,255,255,.12);color:var(--text-primary);box-shadow:inset 0 1px 0 rgba(255,255,255,.03),inset 0 -1px 0 rgba(255,255,255,.008)}.feature-item h4{font-size:16px;font-weight:600;color:var(--text-primary);margin:0 0 8px}.feature-item p{font-size:14px;color:var(--text-secondary);line-height:1.5;margin:0}.listening-page .disabled-card{opacity:.6;cursor:not-allowed;background:var(--bg-card)!important;border-color:var(--border-color)!important}.listening-page .disabled-card:hover{transform:none!important;box-shadow:var(--shadow-sm)!important;border-color:var(--border-color)!important}.listening-page .disabled-card:before{display:none!important}.listening-page .disabled-card .card-action,.listening-page .disabled-card .card-content h3,.listening-page .disabled-card .card-content p,.listening-page .disabled-card .card-features span{color:var(--text-secondary)!important}.listening-page .disabled-card .card-action.disabled span{opacity:.7}.listening-page .disabled-card:hover .card-action svg{transform:none!important}@media (max-width:768px){.listening-hero-section{grid-template-columns:1fr;gap:20px;padding:10px 0 24px}.listening-hero-title{font-size:24px}.listening-hero-audio-field{height:90px}.features-grid,.listening-page .action-cards{grid-template-columns:1fr}.listening-main{padding:12px 16px 40px}.listening-page .action-card{padding:24px}}@media (max-width:480px){.listening-main{padding:10px 16px 36px}.listening-page .action-card{padding:20px}.listening-hero-section{padding:8px 0 20px}.listening-hero-audio-field{height:80px}.feature-item{padding:20px}}[data-theme=dark] .listening-page .action-card{background:var(--bg-card-dark,#2d3748)}[data-theme=dark] .listening-hero-section{border-bottom-color:rgba(255,255,255,.1)}[data-theme=dark] .listening-hero-audio-field{--accent-color:#60a5fa;--listening-waveform-color:#60a5fa;--listening-waveform-energy:#2dd4bf;--listening-waveform-halo:#a78bfa;--text-secondary:#94a3b8}[data-theme=dark] .feature-item{background:#000000;border-color:rgba(255,255,255,.1);box-shadow:none}[data-theme=dark] .feature-item:after,[data-theme=dark] .feature-item:before{display:none}[data-theme=dark] .feature-item:hover{border-color:rgba(255,255,255,.14);box-shadow:0 14px 28px rgba(0,0,0,.32)}[data-theme=dark] .listening-page .card-content h3{color:var(--text-primary-dark,#e2e8f0)}[data-theme=dark] .listening-page .card-content p{color:var(--text-secondary-dark,#a0aec0)}[data-theme=dark] .feature-item h4{color:var(--text-primary-dark,#e2e8f0)}[data-theme=dark] .feature-item p{color:var(--text-secondary-dark,#a0aec0)}[data-theme=dark] .listening-page .disabled-card{background:var(--bg-card-dark,#2d3748)!important}[data-theme=dark] .listening-page .disabled-card .card-action,[data-theme=dark] .listening-page .disabled-card .card-content h3,[data-theme=dark] .listening-page .disabled-card .card-content p,[data-theme=dark] .listening-page .disabled-card .card-features span{color:var(--text-secondary-dark,#a0aec0)!important}.listening-page .main-header--floating{z-index:170}