*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-top-2{top:-.5rem}.right-4{right:1rem}.top-14{top:3.5rem}.z-10{z-index:10}.z-40{z-index:40}.order-1{order:1}.order-2{order:2}.col-span-full{grid-column:1/-1}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.mx-auto{margin-left:auto;margin-right:auto}.\!mb-0{margin-bottom:0!important}.\!mb-1{margin-bottom:.25rem!important}.-mb-px{margin-bottom:-1px}.-mt-4{margin-top:-1rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.\!hidden{display:none!important}.hidden{display:none}.h-1\.5{height:.375rem}.h-2{height:.5rem}.max-h-64{max-height:16rem}.min-h-\[1rem\]{min-height:1rem}.min-h-\[3rem\]{min-height:3rem}.min-h-screen{min-height:100vh}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[12rem\]{min-width:12rem}.min-w-\[200px\]{min-width:200px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.list-decimal{list-style-type:decimal}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-16>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(4rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(4rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.\!rounded-2xl{border-radius:1rem!important}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-amber-600\/50{border-color:rgba(217,119,6,.5)}.border-amber-700\/40{border-color:rgba(180,83,9,.4)}.border-amber-800\/40{border-color:rgba(146,64,14,.4)}.border-indigo-500{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity,1))}.border-indigo-500\/50{border-color:rgba(99,102,241,.5)}.border-indigo-700\/40{border-color:rgba(67,56,202,.4)}.border-indigo-800\/50{border-color:rgba(55,48,163,.5)}.border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.border-slate-700\/50{border-color:rgba(51,65,85,.5)}.border-slate-800{--tw-border-opacity:1;border-color:rgb(30 41 59/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.bg-amber-900\/40{background-color:rgba(120,53,15,.4)}.bg-amber-950\/40{background-color:rgba(69,26,3,.4)}.bg-emerald-900\/40{background-color:rgba(6,78,59,.4)}.bg-emerald-900\/50{background-color:rgba(6,78,59,.5)}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1))}.bg-indigo-600\/40{background-color:rgba(79,70,229,.4)}.bg-indigo-900{--tw-bg-opacity:1;background-color:rgb(49 46 129/var(--tw-bg-opacity,1))}.bg-indigo-950\/30{background-color:rgba(30,27,75,.3)}.bg-indigo-950\/40{background-color:rgba(30,27,75,.4)}.bg-indigo-950\/50{background-color:rgba(30,27,75,.5)}.bg-red-900\/40{background-color:rgba(127,29,29,.4)}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-slate-900\/80{background-color:rgba(15,23,42,.8)}.bg-slate-950{--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity,1))}.\!p-0{padding:0!important}.\!p-4{padding:1rem!important}.\!p-5{padding:1.25rem!important}.\!p-8{padding:2rem!important}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.\!px-3{padding-left:.75rem!important;padding-right:.75rem!important}.\!px-4{padding-left:1rem!important;padding-right:1rem!important}.\!px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}.\!px-8{padding-left:2rem!important;padding-right:2rem!important}.\!py-1\.5{padding-top:.375rem!important;padding-bottom:.375rem!important}.\!py-12{padding-top:3rem!important;padding-bottom:3rem!important}.\!py-14{padding-top:3.5rem!important;padding-bottom:3.5rem!important}.\!py-16{padding-top:4rem!important;padding-bottom:4rem!important}.\!py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.\!py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.\!py-4{padding-top:1rem!important;padding-bottom:1rem!important}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-px{padding-bottom:1px}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.\!text-xs{font-size:.75rem!important;line-height:1rem!important}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-200{--tw-text-opacity:1;color:rgb(253 230 138/var(--tw-text-opacity,1))}.text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-emerald-200{--tw-text-opacity:1;color:rgb(167 243 208/var(--tw-text-opacity,1))}.text-emerald-300{--tw-text-opacity:1;color:rgb(110 231 183/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-indigo-200{--tw-text-opacity:1;color:rgb(199 210 254/var(--tw-text-opacity,1))}.text-indigo-300{--tw-text-opacity:1;color:rgb(165 180 252/var(--tw-text-opacity,1))}.text-indigo-400{--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity,1))}.text-orange-400{--tw-text-opacity:1;color:rgb(251 146 60/var(--tw-text-opacity,1))}.text-red-200{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-sky-400{--tw-text-opacity:1;color:rgb(56 189 248/var(--tw-text-opacity,1))}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.accent-indigo-500{accent-color:#6366f1}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-1,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-indigo-400{--tw-ring-opacity:1;--tw-ring-color:rgb(129 140 248/var(--tw-ring-opacity,1))}.ring-indigo-500\/50{--tw-ring-color:rgba(99,102,241,.5)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.first\:border-0:first-child{border-width:0}.first\:pt-0:first-child{padding-top:0}.last\:mb-0:last-child{margin-bottom:0}.hover\:border-indigo-600:hover{--tw-border-opacity:1;border-color:rgb(79 70 229/var(--tw-border-opacity,1))}.hover\:border-slate-500:hover{--tw-border-opacity:1;border-color:rgb(100 116 139/var(--tw-border-opacity,1))}.hover\:bg-slate-700:hover{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.hover\:text-indigo-300:hover{--tw-text-opacity:1;color:rgb(165 180 252/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.peer:checked~.peer-checked\:border-indigo-500{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity,1))}.peer:checked~.peer-checked\:bg-indigo-950\/60{background-color:rgba(30,27,75,.6)}@media (min-width:640px){.sm\:inline{display:inline}.sm\:table-cell{display:table-cell}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:block{display:block}.md\:inline{display:inline}.md\:flex{display:flex}.md\:table-cell{display:table-cell}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:gap-2{gap:.5rem}.md\:py-20{padding-top:5rem;padding-bottom:5rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1024px){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:inline{display:inline}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Edita ESTE archivo y luego ejecuta: npm run build:css */
/* ── Tema: variables ── */
:root,
[data-theme="dark"] {
  --bg: #0b1120;
  --bg-elevated: #151d2e;
  --bg-muted: #1a2332;
  --bg-hover: #243044;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --border: #2a3548;
  --border-strong: #3d4f6f;
  --primary: #6366f1;
  --primary-hover: #818cf8;
  --primary-muted: rgba(99, 102, 241, 0.15);
  --accent: #38bdf8;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --nav-bg: rgba(11, 17, 32, 0.92);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  --gradient-hero: linear-gradient(135deg, rgba(49, 46, 129, 0.35), rgba(11, 17, 32, 0.9));
}

[data-theme="light"] {
  --bg: #f4f6fb;
  --bg-elevated: #ffffff;
  --bg-muted: #eef1f8;
  --bg-hover: #e2e8f4;
  --text: #0f172a;
  --text-muted: #475569;
  --text-faint: #64748b;
  --border: #d8e0ed;
  --border-strong: #b8c5d9;
  --primary: #4f46e5;
  --primary-hover: #6366f1;
  --primary-muted: rgba(79, 70, 229, 0.1);
  --accent: #0284c7;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --nav-bg: rgba(255, 255, 255, 0.92);
  --shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
  --gradient-hero: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(255, 255, 255, 0.95));
}

/* ── Base ── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  transition: background 0.2s, color 0.2s;
}

a { color: inherit; text-decoration: none; }

/* ── Layout ── */
.app-nav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-link {
  color: var(--text-muted);
  padding: 0.4rem 0.65rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: color 0.15s, background 0.15s;
}
.nav-link:hover { color: var(--primary); background: var(--primary-muted); }
.nav-link-active { color: var(--primary); background: var(--primary-muted); }

.theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-muted);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.theme-toggle:hover { background: var(--bg-hover); }

/* ── Componentes ── */
.stat-card,
.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  padding: 1.25rem;
  box-shadow: var(--shadow);
  transition: border-color 0.15s, transform 0.15s;
}

.panel:hover { border-color: var(--border-strong); }
.panel-interactive:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.hero-panel {
  background: var(--gradient-hero);
  border-color: var(--border-strong);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.625rem 1.125rem;
  background: var(--primary);
  color: #fff;
  border-radius: 0.625rem;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-primary:hover { background: var(--primary-hover); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.125rem;
  background: var(--bg-muted);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--bg-hover); }

.btn-ghost {
  padding: 0.4rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.btn-ghost:hover { color: var(--text); background: var(--bg-muted); }

.level-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  border-radius: 0.35rem;
  background: var(--primary-muted);
  color: var(--primary);
  border: 1px solid var(--primary);
}

.level-badge-a1, .level-badge-a2 { background: rgba(52, 211, 153, 0.12); color: var(--success); border-color: var(--success); }
.level-badge-b1, .level-badge-b2 { background: rgba(56, 189, 248, 0.12); color: var(--accent); border-color: var(--accent); }
.level-badge-c1, .level-badge-c2 { background: var(--primary-muted); color: var(--primary); border-color: var(--primary); }

.page-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
.page-subtitle { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.25rem; }

.flash-msg {
  padding: 0.75rem 1rem;
  border-radius: 0.625rem;
  background: var(--primary-muted);
  border: 1px solid var(--primary);
  color: var(--text);
  margin-bottom: 1rem;
}

.form-error-banner {
  padding: 0.75rem 1rem;
  border-radius: 0.625rem;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: 0.9rem;
}
.form-error-banner p + p { margin-top: 0.35rem; }

[data-theme="light"] .form-error-banner {
  background: rgba(220, 38, 38, 0.08);
}

/* ── Formularios ── */
input[type="text"], input[type="password"], input[type="email"],
select, textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text);
}
input:focus, select:focus { outline: 2px solid var(--primary-muted); border-color: var(--primary); }
label { display: block; margin-bottom: 0.25rem; color: var(--text-muted); font-size: 0.85rem; }

/* ── Cards SRS ── */
[x-cloak] { display: none !important; }

.btn-audio {
  padding: 0.3rem 0.55rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.btn-audio:hover { background: var(--bg-hover); color: var(--text); }

.card-flip { perspective: 1200px; min-height: 280px; }
.card-inner {
  position: relative; width: 100%; min-height: 280px;
  transition: transform 0.5s; transform-style: preserve-3d;
}
.card-inner.is-flipped { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 1rem; padding: 2rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.card-back { transform: rotateY(180deg); }

.rating-btn {
  padding: 1rem 0.5rem; border-radius: 0.75rem; font-weight: 700;
  text-align: center; transition: transform 0.15s; border: none; cursor: pointer; color: #fff;
}
.rating-btn:hover { transform: scale(1.04); }
.rating-again { background: rgba(127, 29, 29, 0.75); }
.rating-hard { background: rgba(124, 45, 18, 0.75); }
.rating-good { background: rgba(6, 78, 59, 0.75); }
.rating-easy { background: rgba(12, 74, 110, 0.75); }

.card-type-badge {
  display: inline-block; font-size: 0.65rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary);
  background: var(--primary-muted); border: 1px solid var(--primary);
  border-radius: 9999px; padding: 0.25rem 0.75rem;
}

.card-word-display {
  font-size: clamp(2rem, 8vw, 2.75rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.15;
}

.card-text-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
}
.card-text-modal-panel {
  width: min(100%, 32rem);
  max-height: min(85vh, 520px);
  overflow-y: auto;
  padding: 1.25rem 1.35rem;
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
}
.card-text-modal-close {
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  border: 1px solid var(--border); background: var(--bg-muted);
  color: var(--text-muted); cursor: pointer; flex-shrink: 0;
}
.card-text-modal-close:hover { color: var(--text); border-color: var(--border-strong); }

.card-audio-bar { margin-bottom: 1rem; }
.card-audio-main {
  width: 100%; padding: 0.875rem 1rem; border-radius: 0.875rem;
  font-weight: 700; background: var(--primary); color: white;
  border: none; cursor: pointer; text-align: center;
  transition: background 0.15s, transform 0.1s;
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
}
.card-audio-main:hover:not(:disabled) { background: var(--primary-hover); transform: translateY(-1px); }
.card-audio-main:disabled { opacity: 0.45; cursor: not-allowed; }
.card-audio-main-sub {
  font-size: 0.72rem; font-weight: 500; opacity: 0.88; line-height: 1.3;
}
.card-audio-stop {
  width: 3rem; border-radius: 0.875rem;
  background: var(--bg-muted); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
}

.voice-pill {
  font-size: 0.7rem; padding: 0.35rem 0.65rem; border-radius: 9999px;
  background: var(--bg-muted); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
}
.voice-pill-active {
  background: var(--primary-muted); border-color: var(--primary); color: var(--primary);
}

.card-settings { background: var(--bg-muted); border-radius: 0.875rem; padding: 0.75rem; }

.examples-panel { background: var(--bg-muted); border: 1px solid var(--border); border-radius: 1rem; padding: 0.875rem 1rem; }
.example-row {
  display: flex; gap: 0.625rem; padding: 0.5rem 0.625rem;
  border-radius: 0.625rem; background: var(--bg-elevated);
}
.example-play-btn {
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: var(--bg-muted); border: 1px solid var(--border);
  color: var(--primary); cursor: pointer; font-weight: 700;
}
.example-highlight {
  background: rgba(52, 211, 153, 0.2); color: var(--success);
  font-weight: 600; border-radius: 0.2rem; padding: 0 0.15rem;
}

/* ── Lector ── */
.prose p { margin-bottom: 1rem; line-height: 1.75; color: var(--text-muted); }
.reader-play-btn {
  padding: 0.85rem 1.75rem !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  min-width: 9.5rem !important;
  letter-spacing: 0.01em;
}
.reader-stop-btn {
  padding: 0.75rem 1.25rem !important;
  font-size: 0.95rem !important;
  min-width: 5.5rem !important;
}
.reader-paragraph { color: var(--text-muted); border: 1px solid transparent; border-radius: 0.5rem; padding: 0.5rem; }
.reader-paragraph-tokenized { display: flex; gap: 0.625rem; align-items: flex-start; }
.reader-para-play {
  width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
  border: 1px solid var(--border); background: var(--bg-muted);
  color: var(--primary); font-size: 0.72rem; cursor: pointer; opacity: 0;
  flex-shrink: 0;
}
.reader-paragraph-tokenized:hover .reader-para-play,
.reader-paragraph-tokenized.reader-active .reader-para-play { opacity: 1; }
.reader-para-text { user-select: text; -webkit-user-select: text; }
.reader-word { cursor: pointer; border-radius: 0.2rem; padding: 0 0.05rem; transition: background 0.12s, color 0.12s; }
.reader-word:hover { background: var(--primary-muted); color: var(--text); }
.reader-para-text ::selection {
  background: rgba(99, 102, 241, 0.45);
  color: var(--text);
}
.reader-word-selected,
.reader-word-active {
  background: rgba(99, 102, 241, 0.35) !important;
  color: var(--text) !important;
  box-shadow: inset 0 -2px 0 rgba(129, 140, 248, 0.95);
}
.reader-active {
  color: var(--text) !important; background: var(--primary-muted) !important;
  border-color: var(--primary) !important;
}
.reader-done { opacity: 0.55; }
.reader-bar-active { border-color: var(--primary) !important; box-shadow: 0 0 20px var(--primary-muted); }
.btn-playing { background: var(--warning) !important; color: #fff !important; }

.reader-audio-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.35;
}
.reader-audio-notice.hidden { display: none; }
.reader-audio-notice-spinner {
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid rgba(129, 140, 248, 0.35);
  border-top-color: rgb(129, 140, 248);
  border-radius: 50%;
  animation: reader-audio-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes reader-audio-spin { to { transform: rotate(360deg); } }

#reader-phrase-pop {
  position: absolute; z-index: 50; transform: translate(-50%, -100%);
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
}
#reader-phrase-pop.visible { opacity: 1; pointer-events: auto; }
.reader-phrase-loading {
  padding: 0.35rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;
  background: var(--bg-elevated); color: var(--primary); border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.2); white-space: nowrap;
}
.reader-phrase-pop-btn {
  padding: 0.35rem 0.75rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600;
  background: var(--primary); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
.reader-phrase-pop-btn:hover { background: var(--primary-hover); }

/* ── Shadowing ── */
.shadow-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 1.25rem; padding: 2.5rem 1.5rem; text-align: center;
  min-height: 380px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.sh-play-btn {
  padding: 1rem 3rem; font-size: 1.2rem; font-weight: 700;
  background: var(--primary); border-radius: 9999px; border: none; color: white; cursor: pointer;
}
.sh-controls { margin-top: 0.25rem; }
.sh-actions-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}
.sh-actions-row #sh-play-wrap,
.sh-actions-row #sh-mic-wrap,
.sh-actions-row #sh-stop-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sh-hidden-text { filter: blur(14px); opacity: 0.25; user-select: none; }
.sh-visible-text { filter: none; opacity: 1; color: var(--text); }

.sh-collapsed { display: none !important; }

.sh-sentence-hidden {
  filter: blur(12px);
  opacity: 0;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
.sh-sentence-visible {
  filter: none;
  opacity: 1;
  color: var(--text);
  user-select: text;
  pointer-events: auto;
}

.sh-card-hint { margin-bottom: 1rem; }
.sh-card-text { margin-bottom: 1rem; }

#sh-card[data-state="compare"] {
  justify-content: flex-start;
  min-height: auto;
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
}
#sh-card[data-state="compare"] #sh-icon {
  font-size: 2.25rem;
  margin-bottom: 0.35rem;
}
#sh-card[data-state="compare"] #sh-label { margin-bottom: 0.15rem; }
#sh-card[data-state="compare"] .sh-card-hint {
  margin-bottom: 0.5rem;
}
#sh-card[data-state="compare"] .sh-score-header {
  margin-bottom: 0.65rem;
}
#sh-card[data-state="compare"] .sh-compare-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.sh-transcript-box {
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
}
.sh-transcript-box #sh-transcript-raw {
  color: var(--text);
  font-style: normal;
}

.sh-word-ok {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  padding: 0.05rem 0.2rem;
  border-radius: 0.2rem;
  margin: 0 0.05rem;
}
.sh-word-miss {
  color: #f87171;
  background: color-mix(in srgb, #f87171 12%, transparent);
  padding: 0.05rem 0.2rem;
  border-radius: 0.2rem;
  margin: 0 0.05rem;
  text-decoration: underline wavy;
}
.sh-word-extra {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  padding: 0.05rem 0.2rem;
  border-radius: 0.2rem;
  margin: 0 0.05rem;
}
.sh-score-pct { line-height: 1.1; }
.sh-score-good { color: var(--success); }
.sh-score-mid { color: var(--warning); }
.sh-score-low { color: #f87171; }

.shadowing-cta {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 10%, var(--bg-elevated)),
    var(--bg-elevated)
  );
}
.shadowing-cta-header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  text-align: left;
}
.shadowing-cta-icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-muted);
  border-radius: 0.625rem;
}
.shadowing-cta-steps {
  text-align: left;
  padding-left: 0.25rem;
}

.cards-cta {
  border-color: color-mix(in srgb, #f59e0b 35%, var(--border));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #f59e0b 10%, var(--bg-elevated)),
    var(--bg-elevated)
  );
}
.cards-cta-icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #f59e0b 18%, var(--bg-muted));
  border-radius: 0.625rem;
}

.hover-row:hover { background: var(--bg-hover); }
.hover-link:hover { color: var(--primary); }

[data-theme="light"] .text-slate-100,
[data-theme="light"] .text-slate-200 { color: var(--text) !important; }
[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-slate-400,
[data-theme="light"] .text-slate-500 { color: var(--text-muted) !important; }
[data-theme="light"] .bg-slate-950,
[data-theme="light"] .bg-slate-900 { background: var(--bg) !important; }
[data-theme="light"] .bg-slate-800 { background: var(--bg-muted) !important; }
[data-theme="light"] .border-slate-800,
[data-theme="light"] .border-slate-700 { border-color: var(--border) !important; }

/* ── Marketing / Landing SaaS ── */
.mkt-body { background: var(--bg); }

.mkt-nav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.mkt-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--primary);
}
.mkt-logo-icon { font-size: 1.5rem; }

.mkt-nav-link {
  padding: 0.4rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.875rem;
  transition: color 0.15s, background 0.15s;
}
.mkt-nav-link:hover { color: var(--primary); background: var(--primary-muted); }

.mkt-hero {
  background: var(--gradient-hero);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.mkt-hero-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-top: 1rem;
}
.mkt-hero-title em {
  font-style: normal;
  color: var(--primary);
}

.mkt-hero-sub {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.65;
  margin-top: 1.25rem;
  max-width: 32rem;
}

.mkt-hero-visual {
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--bg-elevated);
}

.mkt-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  background: var(--primary-muted);
  color: var(--primary);
  border: 1px solid var(--primary);
}

.mkt-stats {
  border-bottom: 1px solid var(--border);
  background: var(--bg-muted);
}

.mkt-stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
}

.mkt-section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mkt-section-sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.mkt-card-featured {
  border-color: var(--primary) !important;
  background: linear-gradient(135deg, var(--primary-muted), var(--bg-elevated));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent);
}

.mkt-visual-frame {
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--bg-elevated);
  padding: 0.5rem;
}

.mkt-shadowing-spotlight {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.mkt-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mkt-checklist li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.mkt-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

.mkt-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: border-color 0.2s, transform 0.2s;
}
.mkt-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.mkt-card-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.mkt-band {
  background: var(--bg-muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.mkt-feature {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
}

.mkt-lang-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1rem 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  text-align: center;
  transition: border-color 0.15s;
}
.mkt-lang-tile:hover { border-color: var(--primary); }
.mkt-lang-soon { opacity: 0.55; }

.mkt-quote {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  border-left: 3px solid var(--primary);
}

.mkt-price-card {
  padding: 1.5rem 2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 1rem;
  min-width: 140px;
}
.mkt-price-featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary-muted);
}

.mkt-faq {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}
.mkt-faq summary { list-style: none; }
.mkt-faq summary::-webkit-details-marker { display: none; }

.mkt-cta {
  background: linear-gradient(135deg, var(--primary-muted), transparent);
  border-top: 1px solid var(--border);
}

.mkt-footer {
  background: var(--bg-muted);
  border-top: 1px solid var(--border);
}

.mkt-contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.mkt-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text);
  margin-top: 0.25rem;
}
.mkt-input:focus {
  outline: 2px solid var(--primary-muted);
  border-color: var(--primary);
}

/* ── Pricing ── */
.mkt-billing-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 9999px;
}
.mkt-billing-btn {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.mkt-billing-active {
  background: var(--primary);
  color: #fff;
}
.mkt-save-tag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  background: rgba(255,255,255,0.2);
}
.mkt-billing-active .mkt-save-tag { background: rgba(0,0,0,0.15); }

.mkt-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
}
.mkt-pricing-featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary-muted), var(--shadow);
  transform: scale(1.02);
}
.mkt-pricing-badge {
  position: absolute;
  top: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--primary);
  color: #fff;
  white-space: nowrap;
}
.mkt-price-big {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}
.mkt-check::before {
  content: "✓ ";
  color: var(--success);
  font-weight: 700;
}

.mkt-compare-table {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
}
.mkt-compare-head,
.mkt-compare-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  align-items: center;
}
.mkt-compare-head {
  background: var(--bg-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}
/* ── Conversaciones ── */
.conv-page { position: relative; }
.conv-topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.conv-topbar-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  margin-left: auto;
}
.conv-progress {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}
.conv-controls {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.conv-voices { max-width: 20rem; }
.conv-voices .flex { justify-content: flex-end !important; }

.conv-chat {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: min(70vh, 42rem);
  overflow-y: auto;
  padding: 0.25rem 0.15rem;
}
.conv-row { display: flex; width: 100%; }
.conv-row-left { justify-content: flex-start; }
.conv-row-right { justify-content: flex-end; }

.conv-bubble {
  position: relative;
  max-width: min(88%, 28rem);
  text-align: left;
  border-radius: 1.1rem;
  padding: 0.75rem 1rem 0.75rem 0.9rem;
  border: 1px solid var(--border);
  background: var(--bg-muted);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.conv-bubble-right {
  background: color-mix(in srgb, var(--primary) 12%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  border-bottom-right-radius: 0.25rem;
}
.conv-bubble-left {
  border-bottom-left-radius: 0.25rem;
}
.conv-bubble:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.conv-bubble-active {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px var(--primary-muted);
}
.conv-speaker {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.25rem;
}
.conv-text {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  padding-right: 1.25rem;
}
.conv-play-icon {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  opacity: 0.35;
}
.conv-bubble:hover .conv-play-icon,
.conv-bubble-active .conv-play-icon { opacity: 1; }

@media (max-width: 768px) {
  .conv-topbar-right {
    width: 100%;
    align-items: stretch;
  }
  .conv-controls { justify-content: stretch; }
  .conv-controls .btn-primary,
  .conv-controls .btn-secondary { flex: 1; }
}

/* ── Daily Flood ── */
.flood-hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-hero);
  border: 1px solid var(--border-strong);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
}
.flood-hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%);
  pointer-events: none;
}
.flood-hero-grid {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .flood-hero-grid { grid-template-columns: 1.15fr 0.85fr; }
}
.flood-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--primary-muted);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
}
.flood-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
.flood-stat {
  flex: 1 1 7rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  border: 1px solid var(--border);
}
.flood-stat-value {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--primary);
}
.flood-stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
.flood-visual {
  border-radius: 1rem;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-muted);
  box-shadow: var(--shadow);
}
.flood-method {
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 768px) {
  .flood-method { grid-template-columns: repeat(4, 1fr); }
}
.flood-method-card {
  padding: 1rem;
  border-radius: 0.9rem;
  border: 1px solid var(--border);
  background: var(--bg-muted);
}
.flood-method-card strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}
.flood-method-card p {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.flood-progress-wrap {
  margin-bottom: 1.5rem;
}
.flood-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.flood-progress-bar {
  width: 100%;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--bg-muted);
  overflow: hidden;
}
.flood-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--success));
  transition: width 0.35s ease;
}
.flood-task {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 1.15rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  transition: border-color 0.15s, transform 0.12s, opacity 0.15s;
}
.flood-task + .flood-task { margin-top: 0.75rem; }
.flood-task--done {
  opacity: 0.55;
}
.flood-task--current {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent);
  background: color-mix(in srgb, var(--primary) 6%, var(--bg-elevated));
}
.flood-task-step {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.flood-task--current .flood-task-step {
  background: var(--primary-muted);
  border-color: var(--primary);
}
.flood-type-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
  margin-bottom: 0.35rem;
}
.flood-type-read { background: #312e81; color: #c7d2fe; }
.flood-type-shadow { background: #134e4a; color: #99f6e4; }
.flood-type-srs { background: #422006; color: #fcd34d; }
.flood-type-listen { background: #1e3a5f; color: #93c5fd; }
.flood-type-reverse { background: #4a044e; color: #f0abfc; }
[data-theme="light"] .flood-type-read { background: #e0e7ff; color: #3730a3; }
[data-theme="light"] .flood-type-shadow { background: #ccfbf1; color: #115e59; }
[data-theme="light"] .flood-type-srs { background: #fef3c7; color: #92400e; }
[data-theme="light"] .flood-type-listen { background: #dbeafe; color: #1e40af; }
[data-theme="light"] .flood-type-reverse { background: #fae8ff; color: #86198f; }
.flood-task-title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}
.flood-task-title--done { text-decoration: line-through; opacity: 0.85; }
.flood-task-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  line-height: 1.4;
}
.flood-task-cta { flex-shrink: 0; }
.flood-complete {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--success) 45%, var(--border));
  background: color-mix(in srgb, var(--success) 8%, var(--bg-elevated));
}
.flood-toggle-btn {
  font-size: 0.8rem;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}