@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:"DM Sans",system-ui,sans-serif;background:#0c1020;color:#f3f5ff;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:300px;min-height:100vh;background:radial-gradient(ellipse 48% 12% at 50% 8%,#48328783,transparent),radial-gradient(ellipse 40% 17% at 87% 58%,#2a42723e,transparent),#0c1020}button,textarea{font:inherit}button{cursor:pointer}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #7fb4ff;outline-offset:4px}.is-hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.topbar{height:80px;border-bottom:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:auto;padding:0 30px}.brand{display:flex;align-items:center;text-decoration:none;color:#fafbff;font-family:"Space Grotesk",system-ui;font-size:25px;font-weight:700;letter-spacing:-1.5px}.brand-icon{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#bda3ff,#69d9e3);font-size:24px;color:#0b1020;margin-right:10px}.brand-em{color:#b9a6ff}.header-tag{font-size:12px;color:#9397b5;letter-spacing:.02em}
main{max-width:1040px;margin:auto;padding:0 24px}.hero{text-align:center;padding:75px 0 51px}.chip{display:inline-flex;align-items:center;gap:9px;border:1px solid #927ef04b;border-radius:99px;padding:9px 14px;color:#c7bcff;font-size:10px;letter-spacing:2px;font-weight:800;background:#9875ff0a}.live-dot{width:7px;height:7px;border-radius:50%;background:#9eeada;box-shadow:0 0 13px #9eeada}
h1,h2,h3{font-family:"Space Grotesk",system-ui,sans-serif}h1{font-size:clamp(42px,7vw,77px);letter-spacing:-.065em;line-height:1.05;margin:26px auto 21px;font-weight:700}h1 em{font-style:normal;background:linear-gradient(100deg,#c6adff,#8fcdff 48%,#8eeed6);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:610px;color:#a7abc7;font-size:16px;line-height:1.8;margin:0 auto}.workspace,.result,.shared{background:linear-gradient(160deg,#1c2038,#141a2c 70%);border:1px solid #323753;border-radius:25px;padding:32px;box-shadow:0 26px 75px #04061035;margin-bottom:26px}
.studio-head,.result-top,.id-row,.visual-title,.visual-footer,.entry-bottom,.capture-actions,.shared-actions{display:flex;align-items:center;justify-content:space-between;gap:15px}.eyebrow{font-size:10px;letter-spacing:2.3px;font-weight:800;color:#af9bff}.studio-head h2{font-size:27px;letter-spacing:-.04em;margin:9px 0 0}.step-pill{font-size:10px;letter-spacing:1px;font-weight:800;color:#a7f8dd;border:1px solid #38796377;background:#27594235;border-radius:99px;padding:9px 11px;white-space:nowrap}
.guide{color:#a2a7c0;font-size:13px;line-height:1.75;max-width:720px;margin:20px 0}.prompt{border:1px solid #454a70;background:#111528;border-radius:15px;padding:20px 22px;font:600 clamp(17px,2.8vw,23px)/1.5 "Space Grotesk",system-ui;letter-spacing:-.035em;min-height:76px;overflow-wrap:anywhere}.prompt #doneText{color:#8eebdc}.prompt #nextText{color:#bfc2d7}
textarea{display:block;width:100%;height:110px;resize:vertical;margin-top:15px;border:1px solid #454a70;background:#0e1428;border-radius:15px;padding:20px 22px;color:#f5f6ff;font:500 19px/1.7 "Space Grotesk",system-ui;letter-spacing:.01em;caret-color:#a991ff}textarea:focus{border-color:#b49fff;background:#12182e}textarea::placeholder{color:#747c9b}
.entry-bottom{font-size:11px;color:#9199b7;margin-top:10px}.entry-bottom #counter{white-space:nowrap;color:#d8ceff}.capture-actions{margin-top:23px;flex-wrap:wrap}#captureStatus{font-size:12px;color:#999fb9}
button{border:1px solid transparent;transition:transform .15s,background .15s,border-color .15s}button:hover:not(:disabled){transform:translateY(-1px)}button:disabled{opacity:.48;cursor:default}.secondary{background:#202640;border:1px solid #454c70;color:#f2f1ff;padding:13px 18px;border-radius:11px;font-size:12px;font-weight:800}.secondary:hover:not(:disabled){background:#2c3453;border-color:#aaa0f4}
.result-top{margin-bottom:28px}.result-badge{font-size:10px;letter-spacing:1px;color:#9fead8}.id-row{align-items:end}.id-row h2{font-size:clamp(30px,6vw,51px);letter-spacing:.02em;margin:0;color:#e7dfff}.mini{letter-spacing:2px;font-size:10px;font-weight:800;color:#9ca5ca;margin:0 0 11px}.text-btn{background:none;color:#c3acff;font-size:12px;font-weight:800;padding:10px}
.visual{background:radial-gradient(ellipse at 50% 110%,#43308148,transparent),#0e1326;border:1px solid #404669;border-radius:18px;padding:20px 23px;margin-top:29px;overflow:hidden}.visual-title,.visual-footer{font-size:10px;letter-spacing:1.3px;color:#a7afd1;font-weight:800}#wave,#sharedWave{display:block;width:100%;height:auto;margin:9px 0} .visual-footer{color:#727a9d}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:16px 0 24px}.stats>div{background:#151c31;border:1px solid #303852;border-radius:13px;padding:18px}.stats span,.stats small{display:block;color:#8993b2;font-size:10px;letter-spacing:1px;font-weight:800}.stats strong{display:block;font:700 30px "Space Grotesk";color:#f7f6ff;margin:13px 0 4px}.stats small{letter-spacing:0;text-transform:none}
.music-box{display:flex;align-items:center;gap:22px;background:linear-gradient(110deg,#30244d,#252b48);border:1px solid #655182;border-radius:17px;padding:21px;margin-top:28px}.music-icon{width:61px;height:61px;flex:none;display:grid;place-items:center;background:linear-gradient(145deg,#d8bbff,#83edda);color:#202041;font-size:35px;border-radius:17px}.music-copy{flex:1;min-width:0}.music-copy h3{font-size:22px;margin:6px 0}.music-copy p{font-size:12px;color:#c1bfda;line-height:1.6;margin:0}.main-btn{padding:15px 22px;border-radius:12px;background:linear-gradient(105deg,#bda5ff,#8ddef3);color:#17162d;font-weight:800;font-size:12px;white-space:nowrap}.main-btn:hover:not(:disabled){background:linear-gradient(105deg,#d5c6ff,#b1ecfa)}.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.fineprint{font-size:11px;color:#858eac;line-height:1.7;margin-top:17px}.compare{border:1px solid #5c9a84;background:#14382e;padding:15px;margin-top:15px;border-radius:12px;font-size:13px}
.shared h2{font-size:33px;margin:12px 0}.shared p{color:#a2abc6;line-height:1.7}.shared svg{background:#0c1225;border:1px solid #3b4263;border-radius:15px;padding:12px}.shared-actions{justify-content:flex-start;flex-wrap:wrap;margin-top:15px}
.faq{padding:68px 0 80px}.faq>h2{font-size:clamp(26px,4vw,39px);letter-spacing:-.04em;margin:13px 0 24px}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.faq article{border:1px solid #323854;background:#171c30;border-radius:16px;padding:19px 23px}.faq h3{font-size:17px}.faq p{color:#a1a9c2;font-size:13px;line-height:1.75}footer{border-top:1px solid #323854;max-width:1040px;margin:auto;padding:24px;color:#939dbd;font-size:12px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#dcf4ef;color:#122f2b;padding:12px 18px;border-radius:12px;font-weight:800;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:20}#toast.show{opacity:1}
@media(max-width:710px){.topbar{height:66px;padding:0 18px}.header-tag{display:none}.hero{padding:49px 0 37px}.workspace,.result,.shared{padding:20px;border-radius:18px}.step-pill{font-size:9px}.music-box{flex-wrap:wrap}.music-copy{flex-basis:70%}.music-box .main-btn{width:100%}.faq-grid{grid-template-columns:1fr}.stats{gap:7px}.stats>div{padding:12px 9px}.stats span{font-size:8px}.stats strong{font-size:23px}.stats small{font-size:9px}.result-actions>*{flex-grow:1} .prompt{padding:15px}.brand{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}