@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Outfit:wght@500;600;700;800&display=swap');
:root{font-family:Nunito,system-ui,sans-serif;color:#243d58;background:#fffaf2;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 95% 5%,#ffedcd 0,transparent 26%),#fffaf2}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}.app-shell{max-width:1180px;margin:auto;padding:0 36px}.topbar{height:90px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:#254c70;font:800 24px Outfit,system-ui,sans-serif;letter-spacing:-.7px}.brand-light{color:#ef855c}.brand-icon{height:42px;width:42px;border-radius:15px;background:#ffcd69;display:grid;place-items:center;color:#805929;transform:rotate(-7deg)}.brand-icon svg{width:24px}.text-button{border:0;background:#fff;color:#55738b;border-radius:50px;padding:10px 16px;font-size:13px;font-weight:800;box-shadow:0 3px 14px #2445620c}.text-button span{margin-left:5px}.intro{background:#dceef6;border-radius:30px;display:flex;align-items:center;justify-content:space-between;min-height:300px;padding:50px 62px;position:relative;overflow:hidden}.intro:before{content:'';position:absolute;width:180px;height:180px;border-radius:50%;background:#cde5f0;right:-60px;top:-85px}.eyebrow{font-size:10px;font-weight:900;letter-spacing:1.6px;color:#5684a1;display:flex;align-items:center;gap:9px}.dot{width:8px;height:8px;background:#f58a62;border-radius:50%;display:inline-block}.intro h1,.login-copy h1{font-family:Outfit,system-ui,sans-serif;font-weight:800;letter-spacing:-2px;font-size:clamp(42px,5vw,64px);line-height:1.06;margin:18px 0 15px}.intro h1 em,.login-copy h1 em{font-style:normal;color:#e67957}.intro p,.login-copy>p{font-size:15px;color:#5a7b91;line-height:1.7;margin:0}.intro-art{position:relative;width:245px;height:210px;margin-right:3%;display:grid;place-items:center;flex:none}.sound-disc{width:138px;height:138px;background:#fbcf72;border:9px solid #fff4d8;border-radius:48% 52% 54% 46%;display:grid;place-items:center;color:#bd7351;transform:rotate(-9deg);box-shadow:0 10px 0 #bddeea}.sound-disc svg{width:58px}.sound-orbit{position:absolute;border:2px dashed #a9cfdf;border-radius:50%}.orbit-one{width:190px;height:190px}.orbit-two{width:230px;height:230px;border-style:solid;border-color:#cbe4ee}.mini-star{position:absolute;color:#ee896b;font-size:30px;right:0;top:20px}.library-heading{display:flex;justify-content:space-between;align-items:end;padding-top:52px}.muted{color:#a08676;font-size:10px}.tiny-line{display:none}.library-heading h2,.modal-head h2{font-family:Outfit,system-ui,sans-serif;font-weight:800;letter-spacing:-1px;font-size:32px;margin:10px 0 6px}.count{vertical-align:middle;font:900 11px Nunito,system-ui,sans-serif;color:#b37548;background:#ffedcb;border-radius:30px;padding:6px 10px;margin-left:5px}.library-heading p,.modal-head p{margin:0;color:#80919b;font-size:13px}.button{border:0;border-radius:14px;padding:14px 20px;font-size:13px;font-weight:900;min-height:48px;transition:transform .15s,background .15s}.button:hover{transform:translateY(-1px)}.button:disabled{opacity:.6;cursor:wait;transform:none}.primary{background:#ed855f;color:#fff;box-shadow:0 5px 0 #dc7350}.primary:hover{background:#e87652}.plus{font-size:20px;vertical-align:-1px;margin-right:5px}.toolbar{margin-top:28px;display:flex;justify-content:space-between;align-items:center;gap:20px}.search-wrap{display:flex;align-items:center;gap:12px;flex:1;background:white;border:1px solid #f0e8dc;border-radius:15px;padding:0 16px;box-shadow:0 5px 18px #4b64720a}.search-wrap svg{width:19px;color:#8fa4ae;flex:none}.search-wrap input{padding:16px 0!important;background:transparent!important;border:0!important;outline:0;min-width:0;width:100%;color:#304e64;font-size:13px;box-shadow:none!important}.search-wrap input::placeholder{color:#a2b2ba}.toolbar-hint{font-size:9px;letter-spacing:1.2px;font-weight:900;color:#c7a28a;white-space:nowrap}.toolbar-hint span{font-size:17px;color:#f0ac6c;margin-left:8px}.recordings{padding:15px 0 35px;display:grid;gap:10px}.record-row{display:flex;align-items:center;gap:16px;padding:15px 18px;background:#fff;border:1px solid #f1e9de;border-radius:17px;box-shadow:0 5px 18px #56667708}.play-button{width:48px;height:48px;flex:none;border:0;border-radius:16px;background:#dceef6;color:#4e89ab;font-size:15px}.play-button:hover,.play-button.playing{background:#5d9cbc;color:white}.record-info{flex:1;min-width:0}.record-info strong{font-size:15px;display:block;overflow-wrap:anywhere}.record-info span{display:block;color:#94a4ab;font-size:12px;margin-top:4px;overflow-wrap:anywhere}.row-date{color:#a2b0b5;font-size:11px;margin-right:10px}.row-action{border:0;background:transparent;color:#7790a1;padding:8px;font-size:12px;font-weight:800}.row-action:hover{color:#e37755}.empty{text-align:center;margin:15px 0 45px;padding:55px 20px 60px;border:2px dashed #ebdfcd;border-radius:22px;background:#fffdf9}.empty-icon{width:60px;height:60px;margin:0 auto 18px;border-radius:20px;background:#ffedc7;color:#d68b58;display:grid;place-items:center;font-size:27px;transform:rotate(-7deg)}.empty h3{font-family:Outfit,system-ui,sans-serif;font-size:23px;font-weight:800;margin:0 0 8px;letter-spacing:-.5px}.empty p{font-size:13px;color:#94a4ab;margin:0 0 23px}.secondary{border:2px solid #e2edf1;background:white;color:#648ba1}.secondary:hover{background:#f2f9fb}footer{border-top:1px solid #f0e8dc;display:flex;justify-content:space-between;padding:26px 0;color:#9ba9ad;font-size:11px;font-weight:700}footer span:last-child{font-size:9px;letter-spacing:1.2px}.heart{color:#ed957a}.login-view{min-height:calc(100vh - 165px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:9%;padding:35px 0 70px}.login-art{height:420px;background:#dceef6;border-radius:32px;position:relative;display:grid;place-items:center;overflow:hidden}.login-art:before,.login-art:after{content:'';position:absolute;border:2px dashed #b8dbe9;border-radius:50%;width:280px;height:280px}.login-art:after{width:360px;height:360px;border-style:solid;border-color:#c9e5ef}.art-circles{width:200px;height:200px;background:#ffdc8d;border:12px solid #fff1cd;border-radius:47% 53% 55% 45%;display:flex;align-items:center;justify-content:center;gap:10px;transform:rotate(-9deg)}.art-circles span{width:7px;height:32px;border-radius:10px;background:#d98a64}.art-circles span:nth-child(2),.art-circles span:nth-child(4){height:55px}.art-circles span:nth-child(3){height:83px}.art-sparkle{position:absolute;color:#ed9271;font-size:30px}.spark-one{top:60px;right:70px}.spark-two{bottom:100px;left:60px}.login-art p{position:absolute;bottom:22px;font-size:9px;color:#7fa9bb;letter-spacing:2px;font-weight:900}.login-copy h1{font-size:clamp(42px,4.8vw,60px)}.login-copy>p{max-width:370px}.login-copy form{margin-top:34px;max-width:430px}label{display:block;font-size:12px;font-weight:900;color:#506b7c;margin-bottom:9px}.password-row{display:flex;gap:9px}input:not([type=file]){border:1px solid #e8e8e0;border-radius:13px;background:#fff;color:#304e64;padding:14px;font-size:13px;outline:none}input:focus{border-color:#85bbd4!important;box-shadow:0 0 0 3px #e1f1f8}input::placeholder{color:#aebdc3}.password-row input{flex:1;min-width:0}.dark{background:#477fa1;color:white;box-shadow:0 4px 0 #366985}.dark:hover{background:#3e7392}.dark span{margin-left:8px}.form-error{font-size:12px;color:#b44d3d;min-height:16px;margin:8px 0 0}.login-note{font-size:11px;color:#9eafb4;margin-top:23px}.login-note span{color:#e89472;font-size:17px;margin-right:5px}dialog{width:min(520px,calc(100% - 28px));max-height:90vh;border:0;border-radius:24px;padding:30px;background:#fffdf9;color:#243d58;box-shadow:0 20px 80px #243d5845}dialog::backdrop{background:#263d52a8}.modal-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:25px}.modal-head h2{font-size:29px;margin:11px 0 5px}.close{border:0;background:#eaf5f9;color:#6a95a9;border-radius:13px;width:36px;height:36px;font-size:24px;line-height:1}.modal-head p{line-height:1.5}#record-form>input{display:block;width:100%;margin-bottom:20px}#record-form label span{color:#e57f61}label small{color:#b0bdc0;font-size:9px;letter-spacing:1px;margin-left:4px}.record-label,.preview-label{font-size:9px;letter-spacing:1.5px;font-weight:900;color:#90a5af;margin-bottom:10px}.recorder{border:1px solid #dcecf2;background:#f1f9fb;border-radius:15px;padding:14px;display:flex;align-items:center;gap:12px}.record-icon{display:grid;place-items:center;background:#ffe6d8;color:#e28362;width:42px;height:42px;border-radius:14px;font-size:15px;flex:none}.record-icon.active{background:#f7d6cc;color:#c95445;animation:pulse 1.2s infinite}.record-copy{flex:1;min-width:0}.record-copy strong,.record-copy span{display:block}.record-copy strong{font-size:12px}.record-copy span{font-size:10px;color:#91a7b0;margin-top:5px}.record-button{border:1px solid #cde2ea;background:white;color:#5686a0;border-radius:11px;padding:9px 11px;font-size:11px;font-weight:900}.record-button span{color:#e68363}.preview-wrap{margin-top:15px}audio{width:100%;height:38px}.upload-row{display:flex;gap:5px;justify-content:center;margin-top:15px;color:#96a8ad;font-size:11px}.upload-link{font-size:11px;color:#568ba7;text-decoration:underline;cursor:pointer}.modal-actions{display:flex;justify-content:flex-end;gap:9px;border-top:1px solid #f0eee8;padding-top:20px;margin-top:14px}.cancel{background:transparent;color:#859ba3}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#365e78;color:white;padding:13px 20px;border-radius:13px;font-size:13px;z-index:10;box-shadow:0 5px 20px #0002}@keyframes pulse{50%{box-shadow:0 0 0 8px #f8e5de}}@media(max-width:700px){.app-shell{padding:0 20px}.topbar{height:75px}.brand{font-size:21px}.brand-icon{width:38px;height:38px}.intro{min-height:240px;padding:35px 25px;border-radius:24px}.intro h1,.login-copy h1{font-size:40px;letter-spacing:-1.4px}.intro p{max-width:260px;font-size:13px}.intro-art{width:105px;height:120px;margin:0}.sound-disc{width:78px;height:78px;border-width:6px}.sound-disc svg{width:36px}.orbit-one{width:108px;height:108px}.orbit-two{width:130px;height:130px}.mini-star{font-size:20px;right:-8px;top:5px}.library-heading{padding-top:36px;align-items:start;gap:15px}.library-heading h2{font-size:27px}.library-heading p{line-height:1.5}.library-heading .button{padding:12px;font-size:11px;white-space:nowrap}.toolbar-hint{display:none}.empty{padding:50px 15px}.row-date{display:none}.record-row{gap:9px;padding:12px}.row-action{padding:6px;font-size:11px}footer span:last-child{display:none}.login-view{display:flex;flex-direction:column;align-items:stretch;gap:32px;justify-content:center;padding:20px 0 50px}.login-art{height:210px;border-radius:24px}.login-art:before{width:180px;height:180px}.login-art:after{width:240px;height:240px}.art-circles{width:130px;height:130px;border-width:8px}.art-circles span:nth-child(3){height:60px}.spark-one{top:22px;right:25%}.spark-two{bottom:30px;left:20%}.login-art p{bottom:8px;font-size:8px}.login-copy form{margin-top:25px}.password-row{flex-direction:column}.password-row button{align-self:stretch}dialog{padding:23px}}@media(max-width:430px){.intro-art{width:80px}.orbit-two{display:none}.orbit-one{width:95px;height:95px}.sound-disc{width:68px;height:68px}.intro h1{font-size:35px}.record-row{flex-wrap:wrap}.record-info{flex-basis:calc(100% - 65px)}.row-action:first-of-type{margin-left:58px}.library-heading{flex-direction:column}.record-copy span{line-height:1.4}.recorder{gap:8px;padding:10px}.record-button{padding:8px}}

/* Keep the library's controls prominent on phones and tablets. */
.intro{min-height:190px;padding:28px 42px}
.intro h1{font-size:clamp(34px,4vw,48px);margin:11px 0 8px}
.intro-art{width:175px;height:135px;margin-right:5%}
.intro-art .sound-disc{width:90px;height:90px;border-width:6px;box-shadow:0 6px 0 #bddeea}
.intro-art .sound-disc svg{width:42px}
.intro-art .orbit-one{width:130px;height:130px}
.intro-art .orbit-two{width:160px;height:160px}
.intro-art .mini-star{font-size:22px;right:0;top:4px}
.play-button{width:64px;height:64px;border-radius:20px;font-size:21px}
@media(max-width:700px){
  .intro{min-height:160px;padding:25px;border-radius:22px}
  .intro h1{font-size:34px;letter-spacing:-1px}
  .intro-art{width:105px;height:100px;margin-right:0}
  .intro-art .sound-disc{width:72px;height:72px}
  .intro-art .sound-disc svg{width:34px}
  .intro-art .orbit-one{width:96px;height:96px}
  .intro-art .orbit-two{width:115px;height:115px}
}
@media(max-width:430px){
  .intro-art{width:72px}
  .intro-art .orbit-two{display:none}
  .intro h1{font-size:30px}
  .record-info{flex-basis:calc(100% - 75px)}
}