*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:Trebuchet MS,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,Roboto,sans-serif;color-scheme:light dark;--bg: #fff3e2;--muted-ink: #8a5a3b;--box-top: #ffd9a8;--box-bottom: #ffb866;--box-ink: #7a3e16;--box-shadow: rgba(193, 96, 18, .45);--grille: #b35a1f;--accent: #ff8a3d;--accent-strong: #f5631e;--accent-glow: rgba(245, 99, 30, .55);--stop: #d6373b;--error-bg: rgba(214, 55, 59, .12)}@media(prefers-color-scheme:dark){:root{--bg: #241712;--muted-ink: #e7b489;--box-top: #c4702f;--box-bottom: #8f481b;--box-ink: #fff1e0;--box-shadow: rgba(0, 0, 0, .55);--grille: #3a1e0d;--accent: #ff9a52;--accent-strong: #ff7a33;--accent-glow: rgba(255, 122, 51, .5);--stop: #ff6166;--error-bg: rgba(255, 97, 102, .16)}}body{min-height:100dvh;background:var(--bg)}#app{min-height:100dvh;display:flex;flex-direction:column}.toy{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.75rem;padding:2rem 1.25rem;text-align:center}.toy__box-wrap{border-radius:2.25rem;padding:0;transition:filter .3s ease}.toy__box{position:relative;width:min(74vw,18rem);aspect-ratio:1;border:none;border-radius:2rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem;color:var(--box-ink);background:linear-gradient(150deg,var(--box-top),var(--box-bottom));box-shadow:0 1.25rem 2.5rem -.75rem var(--box-shadow),inset 0 2px #ffffff73,inset 0 -6px 14px #0000001f;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}.toy__box:hover:not(:disabled){transform:translateY(-4px) scale(1.02)}.toy__box:active:not(:disabled){transform:translateY(2px) scale(.97)}.toy__box:focus-visible{outline:4px solid var(--accent);outline-offset:6px}.toy__box:disabled{cursor:default}.toy__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}.toy__grille-dot{width:.85rem;height:.85rem;border-radius:50%;background:var(--grille);box-shadow:inset 0 2px 3px #00000059}.toy__meter{display:flex;align-items:center;gap:.28rem;height:2.5rem}.toy__meter-bar{width:.35rem;height:2.4rem;border-radius:1rem;background:var(--box-ink);opacity:.35;transform:scaleY(.12);transform-origin:center;transition:transform .08s linear}.toy__meter[data-active=true] .toy__meter-bar{background:var(--accent-strong);opacity:1}.toy__state-label{font-weight:800;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase}.status-recording{filter:drop-shadow(0 0 1.5rem var(--accent-glow));animation:toy-pulse 1.3s ease-in-out infinite}.status-recording .toy__box{outline:4px solid var(--accent-strong);outline-offset:4px}.status-playing .toy__box{animation:toy-pop .45s cubic-bezier(.34,1.56,.64,1)}@keyframes toy-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}@keyframes toy-pop{0%{transform:scale(.9)}60%{transform:scale(1.06)}to{transform:scale(1)}}.toy__prompt{font-size:1.15rem;font-weight:700;color:var(--muted-ink);max-width:22rem;min-height:1.5em}.toy__record{display:inline-flex;align-items:center;gap:.6rem;border:none;cursor:pointer;font-weight:800;font-size:1.05rem;letter-spacing:.04em;color:#fff;background:var(--accent-strong);padding:.85rem 1.9rem;border-radius:999px;box-shadow:0 .6rem 1.2rem -.4rem var(--accent-glow);transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,background .2s ease}.toy__record:hover:not(:disabled){transform:translateY(-2px) scale(1.04)}.toy__record:active:not(:disabled){transform:translateY(1px) scale(.96)}.toy__record:focus-visible{outline:4px solid var(--accent);outline-offset:4px}.toy__record:disabled{opacity:.55;cursor:default}.toy__record-dot{width:.8rem;height:.8rem;border-radius:50%;background:#fff;box-shadow:0 0 #ffffffb3}.toy__record.is-recording{background:var(--stop)}.toy__record.is-recording .toy__record-dot{border-radius:25%;animation:toy-blink 1s steps(2,start) infinite}@keyframes toy-blink{50%{opacity:.3}}.toy__error{max-width:24rem;color:var(--stop);font-weight:600;background:var(--error-bg);padding:.85rem 1.1rem;border-radius:1rem}@media(prefers-reduced-motion:reduce){.toy__box,.toy__record,.toy__meter-bar,.status-recording,.status-playing .toy__box,.toy__record.is-recording .toy__record-dot{animation:none!important;transition:none!important}}