@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{--ink:#293a35;--paper:#f8f5ef;--green:#386b56}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #c86b46;outline-offset:5px}header{max-width:1320px;margin:auto;padding:30px 50px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6e4dc}.brand{text-decoration:none;color:var(--ink);font:600 27px 'Outfit',sans-serif;letter-spacing:-1px}.brand>span:last-child{font-weight:400}.brand-icon{color:#d47852;margin-right:10px;font-size:35px;vertical-align:middle}.header-note{font-size:13px;color:#7c8277}.plain{border:0;background:none;color:var(--ink);font-size:13px}main{max-width:1100px;margin:auto;padding:46px 36px 0}.intro{text-align:center}.eyebrow{font-size:10px;letter-spacing:2.7px;color:#748477;font-weight:700}h1{font:500 clamp(38px,5vw,61px)/1.08 'Outfit',sans-serif;letter-spacing:-2.2px;margin:19px 0}h1 em{font-family:Georgia,serif;color:#c77754;font-weight:400}.intro p{font-size:14px;line-height:1.8;color:#7c8177;margin-bottom:30px}.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.languages{display:flex;padding:5px;background:#ebece4;border-radius:30px;gap:3px}.languages button{border:0;background:none;padding:10px 20px;border-radius:25px;font-size:13px;color:#747d70}.languages button.selected{background:#fffefa;color:var(--ink);box-shadow:0 2px 5px #233e3010}.languages span{margin-left:13px;opacity:.6}.sound{border:0;background:none;font-size:12px;color:#6f7f70}#playground{height:355px;border-radius:24px;position:relative;background:#e7eee3;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;cursor:pointer}.orbit{position:absolute;border:1px solid #d7e2d3;width:530px;height:530px;border-radius:50%;pointer-events:none}.orbit-two{width:690px;height:690px}.decoration{position:absolute;color:#91ac85}.d1{top:50px;left:17%;font-size:35px;color:#d9af5f;transform:rotate(12deg)}.d2{right:15%;bottom:80px;font-size:60px;color:#a2b698}.d3{right:25%;top:33px;font-size:37px}.d4{left:25%;bottom:62px;font-size:17px;color:#d6a68d}#letter-card{display:flex;flex-direction:column;align-items:center;z-index:1}#letter{font:600 174px/.95 'Outfit',sans-serif;letter-spacing:-8px;color:#44745b;text-shadow:0 8px 0 #386b560c}#letter span{font-size:122px;color:#789875;margin-left:6px}#letter-caption{margin-top:20px;font-size:15px;color:#617c60}.play-hint{position:absolute;bottom:25px;font-size:12px;color:#6d8268}.corner{position:absolute;left:22px;top:24px;writing-mode:vertical-rl;font-size:8px;letter-spacing:2px;color:#8e9f84}.under-play{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.under-play>span{font-size:11px;color:#7c8377}.under-play i{display:inline-block;width:6px;height:6px;background:#8fa57b;border-radius:50%;margin-right:6px}#start{background:#386b56;color:white;border:0;padding:15px 22px;border-radius:30px;font-size:13px}#start span{margin-left:25px}#status{min-height:18px;font-size:12px;color:#747e70;text-align:right;line-height:1.6}.details{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;border-top:1px solid #e2e3d9;padding:30px 0 42px;margin-top:20px}.details>div>span{font-size:9px;letter-spacing:1.5px;color:#88917c}.details h2{font:500 17px 'Outfit',sans-serif;letter-spacing:-.2px}.details p{font-size:11px;line-height:1.8;color:#85897e}footer{max-width:1220px;margin:auto;padding:25px 36px;border-top:1px solid #e2e3d9;display:flex;justify-content:space-between;color:#92998b;font-size:10px}footer>span:first-child{font-size:14px;color:#74866f}dialog{border:1px solid #e0e6d9;border-radius:22px;max-width:520px;padding:30px;color:var(--ink);background:var(--paper);line-height:1.7}dialog::backdrop{background:#1a332a66}dialog button{float:right}dialog h2{font-family:Outfit,sans-serif}dialog p{font-size:14px}.pop{animation:pop .3s ease-out}@keyframes pop{0%{transform:scale(.75) rotate(-7deg)}70%{transform:scale(1.06) rotate(2deg)}100%{transform:scale(1)}}.spark{position:absolute;font-size:30px;pointer-events:none;animation:float 1s ease-out forwards}@keyframes float{to{transform:translateY(-90px) rotate(75deg);opacity:0}}#playground:fullscreen{border-radius:0;height:100vh;width:100vw}#playground:fullscreen #letter{font-size:clamp(180px,32vw,440px)}#playground:fullscreen #letter span{font-size:.7em}.exit-baby{position:absolute;right:25px;top:25px;border:1px solid #a5b6a0;background:#f8f5efcc;padding:13px 20px;border-radius:30px;color:#52664c;font-size:12px;z-index:5;touch-action:none}.exit-baby.holding{background:#d9b57c} @media(max-width:650px){header{padding:20px}.header-note{display:none}.brand{font-size:23px}main{padding:35px 20px 0}h1{letter-spacing:-1px}.intro p{font-size:12px}#playground{height:330px}.languages button{padding:9px 14px}.languages span{margin-left:5px}.under-play{gap:15px;align-items:flex-start}.under-play>span{max-width:130px;line-height:1.7}#start{padding:14px 16px}#start span{margin-left:8px}.details{grid-template-columns:1fr;gap:12px}.details h2{margin:9px 0}.details p{margin-top:0}footer{padding:20px;gap:10px}footer>span:last-child{display:none}}@media(prefers-reduced-motion:reduce){.pop,.spark{animation:none}}

.voice-tools{display:flex;align-items:center;gap:9px;font-size:11px;color:#6f7f70}.voice-tools select,.record-options select{font:inherit;border:1px solid #d3ddce;background:#fffdf7;color:#344e3c;border-radius:20px;padding:8px;max-width:145px}.voice-tools .plain{font-size:11px}.record-options{display:flex;gap:16px;flex-wrap:wrap}.record-options label{font-size:13px}.record-letter{text-align:center;font:500 85px Outfit,sans-serif;margin:20px 0;color:#44745b}.record-actions{display:flex;gap:8px;flex-wrap:wrap}.record-actions button{border:1px solid #cedbc7;border-radius:20px;padding:10px 15px;background:#e7eee3;color:#34533d}.record-actions button:disabled{opacity:.4;cursor:default}#record-clip{background:#386b56;color:white}#record-progress{text-align:center;font-size:12px}#record-status{min-height:44px} @media(max-width:760px){.toolbar{flex-wrap:wrap;gap:12px}.voice-tools{flex-wrap:wrap;gap:7px}.voice-tools select{max-width:120px}.voice-tools label{display:none}}

#voice-style option:disabled{color:#9a9e95}

#round-label{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:1.7px;color:#69815e;white-space:nowrap}#word-emoji{font-size:54px;line-height:1.2;margin-bottom:12px}#word-emoji[hidden]{display:none}.word-mode #letter-card{width:90%}.word-mode #letter{font-size:clamp(36px,8vw,85px);letter-spacing:-2px;line-height:1.15}.word-mode #letter-caption{margin-top:12px}#playground:fullscreen.word-mode #letter{font-size:clamp(50px,12vw,170px)}#playground:fullscreen #word-emoji{font-size:clamp(64px,10vw,130px)}#record-letter{overflow-wrap:anywhere;font-size:clamp(30px,10vw,85px)}

.music-mode{background:#ece9f2!important}.music-mode #word-emoji{animation:music-sway 2.4s ease-in-out infinite}.music-mode #letter{font-family:Georgia,serif;font-style:italic;font-weight:400}.music-mode .orbit{border-color:#dcd5e7}@keyframes music-sway{0%,100%{transform:rotate(-8deg) translateY(2px)}50%{transform:rotate(8deg) translateY(-5px)}}@media(prefers-reduced-motion:reduce){.music-mode #word-emoji{animation:none}}