:root{--background:#120b1e;--surface:#101415;--surface-glass:rgba(28,18,45,0.72);--surface-low:#191c1e;--surface-container:#1d2022;--surface-high:#272a2c;--primary:#ecd7ff;--primary-container:#d8b4fe;--on-primary:#3f2160;--on-primary-container:#604283;--secondary:#5de6ff;--on-background:#e0e3e5;--on-surface:#e0e3e5;--on-surface-variant:#cdc3d0;--outline:#968e9a;--outline-variant:#4a454f;--error:#ffb4ab;--error-container:#93000a}*{box-sizing:border-box}body,html{min-height:100%;margin:0}body{background:radial-gradient(circle at 15% 10%,rgba(236,215,255,.1),transparent 34rem),radial-gradient(circle at 84% 86%,rgba(93,230,255,.08),transparent 30rem),var(--background);color:var(--on-background);font-family:Inter,ui-sans-serif,system-ui,sans-serif;overflow-x:hidden}button{font:inherit}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 24}.page-shell{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;padding:24px;isolation:isolate}.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.ambient:after,.ambient:before{content:"";position:absolute;border-radius:9999px;filter:blur(110px)}.ambient:before{top:-18%;left:-12%;width:min(70vw,680px);height:min(70vw,680px);background:rgba(236,215,255,.08)}.ambient:after{right:-14%;bottom:-20%;width:min(60vw,580px);height:min(60vw,580px);background:rgba(93,230,255,.07)}.experience{width:min(100%,680px);display:flex;flex-direction:column;align-items:center;text-align:center}.brand{margin-bottom:48px}.title{margin:0;color:var(--primary);font-size:clamp(2.6rem,9vw,4.75rem);line-height:1.05;letter-spacing:.18em;text-transform:uppercase;font-weight:300;text-shadow:0 0 18px rgba(236,215,255,.34)}.tagline{max-width:32rem;margin:12px auto 0;color:rgba(205,195,208,.82);font-size:clamp(1rem,2.5vw,1.125rem);line-height:1.6;letter-spacing:.02em}.ghost-button-wrap{position:relative;margin:16px 0 42px}.ghost-button-wrap:before{content:"";position:absolute;inset:-28px;border-radius:9999px;background:rgba(236,215,255,.2);filter:blur(32px);transition:.5s ease}.ghost-button-wrap:after{content:"";position:absolute;inset:-12px;border-radius:9999px;background:#1c122d;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 42px rgba(0,0,0,.45)}.ghost-button-wrap:not(.is-disabled):hover:before{background:rgba(236,215,255,.3);filter:blur(42px)}.ghost-button{position:relative;z-index:1;width:clamp(11rem,42vw,13rem);height:clamp(11rem,42vw,13rem);border:1px solid rgba(255,255,255,.22);border-radius:9999px;background:var(--primary);color:var(--on-primary);box-shadow:inset 0 4px 22px rgba(255,255,255,.42),0 8px 32px rgba(236,215,255,.24);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .25s ease}.ghost-button:not(:disabled):hover{transform:scale(1.045)}.ghost-button:not(:disabled):active{transform:scale(.96)}.ghost-button:disabled{cursor:not-allowed;opacity:.72}.ghost-button .material-symbols-outlined{font-size:3.2rem}.button-label{font-size:.875rem;line-height:1;letter-spacing:.16em;font-weight:700}.button-label,.helper{text-transform:uppercase}.helper{min-height:1.4em;margin:0;color:rgba(150,142,154,.72);font-size:.75rem;line-height:1.4;letter-spacing:.14em}.panel{width:min(100%,24rem);margin-top:8px;padding:32px;border-radius:3rem;background:var(--surface-glass);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 60px rgba(216,180,254,.12);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center}.panel-icon{width:6rem;height:6rem;border-radius:9999px;margin-bottom:24px;display:grid;place-items:center;position:relative;color:var(--primary);background:var(--surface-low);border:1px solid rgba(255,255,255,.06);box-shadow:0 4px 20px rgba(236,215,255,.12)}.panel-icon:before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(236,215,255,.12);filter:blur(14px);animation:pulse 1.8s ease-in-out infinite}.panel-icon .material-symbols-outlined{position:relative;font-size:3rem;font-variation-settings:"FILL" 1,"wght" 300,"GRAD" 0,"opsz" 48}.panel h2{margin:0;color:var(--primary);font-size:clamp(2rem,8vw,2.25rem);line-height:1.18;letter-spacing:-.01em;font-weight:600}.panel p{margin:12px 0 28px;color:var(--on-surface-variant);font-size:1rem;line-height:1.6}.primary-action,.secondary-action{width:100%;min-height:54px;border-radius:9999px;padding:0 24px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.875rem;line-height:1;letter-spacing:.08em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:.25s ease}.primary-action{background:var(--primary);color:var(--on-primary);box-shadow:0 4px 20px rgba(236,215,255,.3)}.primary-action:hover:not(:disabled){box-shadow:0 4px 26px rgba(236,215,255,.48);filter:brightness(1.05)}.secondary-action{margin-top:12px;background:transparent;color:var(--on-surface-variant);border-color:rgba(74,69,79,.75)}.secondary-action:hover:not(:disabled){color:var(--primary);border-color:rgba(236,215,255,.45);background:rgba(236,215,255,.05)}.primary-action:disabled,.secondary-action:disabled{cursor:not-allowed;opacity:.7}.note{margin-top:16px;color:var(--outline);display:inline-flex;align-items:center;gap:4px;font-size:.75rem;line-height:1.4}.player-core{position:relative;width:min(70vw,16rem);height:min(70vw,16rem);margin:4px 0 32px;display:grid;place-items:center}.player-core:after,.player-core:before{content:"";position:absolute;inset:0;border-radius:9999px;border:1px solid rgba(236,215,255,.22);animation:breathe 2s ease-in-out infinite}.player-core:after{inset:-22px;border-color:rgba(93,230,255,.28);animation-delay:.25s}.player-inner{width:74%;height:74%;border-radius:9999px;display:grid;place-items:center;background:rgba(28,18,45,.82);border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 42px rgba(236,215,255,.32),inset 0 0 20px rgba(236,215,255,.16);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--primary)}.player-inner .material-symbols-outlined{font-size:4rem;font-variation-settings:"FILL" 1,"wght" 300,"GRAD" 0,"opsz" 48}.progress-track{width:min(100%,22rem);height:8px;border-radius:9999px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}.progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--secondary),rgba(93,230,255,0));box-shadow:0 0 16px rgba(93,230,255,.48);transition:width .16s linear}.waveform{height:4.5rem;margin:26px 0 0;display:flex;align-items:flex-end;justify-content:center;gap:4px}.waveform span{width:4px;min-height:10px;border-radius:9999px;background:var(--secondary);box-shadow:0 0 12px rgba(93,230,255,.42);opacity:.84;animation:wave .9s ease-in-out infinite}.waveform span:nth-child(2n){animation-delay:.12s}.waveform span:nth-child(3n){animation-delay:.24s}.recording-layout{width:min(100%,24rem);display:flex;flex-direction:column;align-items:center;gap:30px}.countdown{color:var(--primary);font-size:clamp(3.3rem,16vw,5rem);line-height:1;font-weight:700;letter-spacing:-.04em;text-shadow:0 0 18px rgba(236,215,255,.34)}.recording-text{margin-top:10px;color:var(--on-surface-variant);font-size:1rem;line-height:1.6}.recording-card{width:100%;min-height:12rem;border-radius:3rem;padding:24px;background:rgba(28,18,45,.62);border:1px solid rgba(255,255,255,.1);box-shadow:0 0 60px rgba(216,180,254,.15);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);display:flex;flex-direction:column;align-items:center;justify-content:center}.mic-orb{width:4rem;height:4rem;border-radius:9999px;display:grid;place-items:center;color:var(--on-primary-container);background:var(--primary-container);box-shadow:0 4px 22px rgba(216,180,254,.32);position:relative}.mic-orb:after,.mic-orb:before{content:"";position:absolute;inset:-16px;border-radius:inherit;border:1px solid rgba(216,180,254,.28);animation:breathe 1.4s ease-in-out infinite}.mic-orb:after{inset:-28px;border-color:rgba(216,180,254,.1)}.mic-orb .material-symbols-outlined{font-size:2rem;font-variation-settings:"FILL" 1,"wght" 300,"GRAD" 0,"opsz" 32}.error-mark,.success-mark{margin-bottom:26px}.success-mark .material-symbols-outlined{color:var(--primary);font-size:6rem;font-variation-settings:"FILL" 0,"wght" 200,"GRAD" 0,"opsz" 48}.error-mark{width:4.5rem;height:4.5rem;border-radius:9999px;display:grid;place-items:center;color:var(--error);background:rgba(147,0,10,.22);box-shadow:0 0 24px rgba(255,180,171,.18)}.error-mark .material-symbols-outlined{font-size:2.2rem;font-variation-settings:"FILL" 1,"wght" 300,"GRAD" 0,"opsz" 32}.status-title{margin:0;color:var(--on-surface);font-size:clamp(1.75rem,7vw,2.25rem);line-height:1.18;font-weight:600;letter-spacing:-.01em}.status-copy{max-width:18rem;margin:12px auto 30px;color:var(--on-surface-variant);font-size:1.05rem;line-height:1.6}@keyframes pulse{50%{opacity:.45;transform:scale(1.08)}}@keyframes breathe{50%{opacity:.45;transform:scale(1.06)}}@keyframes wave{0%,to{height:12px}50%{height:52px}}@media (max-width:520px){.page-shell{padding:24px 18px}.brand{margin-bottom:40px}.panel{padding:28px 22px;border-radius:2rem}}