*{box-sizing:border-box}:root{--ink: #2a1a3a;--paper: #fff8e8;--pink: #ff5d8f;--orange: #ff9f1c;--yellow: #ffd166;--green: #06d6a0;--blue: #118ab2;--purple: #9b5de5;--shadow: 0 6px 0 rgba(42, 26, 58, .18);--shadow-lg: 0 10px 0 rgba(42, 26, 58, .22)}html,body{height:100%}body{margin:0;font-family:Avenir Next,Nunito,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-weight:700;color:var(--ink);background:radial-gradient(circle at 20% 10%,#ffe9b5 0%,transparent 55%),radial-gradient(circle at 85% 15%,#ffd1e3 0%,transparent 50%),radial-gradient(circle at 50% 95%,#cdeffd 0%,transparent 60%),var(--paper);background-attachment:fixed;-webkit-text-size-adjust:100%;overflow-x:hidden}main{max-width:540px;margin:0 auto;padding:1.5rem 1.25rem 2.5rem;display:flex;flex-direction:column;align-items:center;gap:1.25rem}.loading{text-align:center;padding:2rem;font-size:1.1rem}h1{margin:.25rem 0 .5rem;text-align:center;font-size:clamp(2rem,8vw,2.6rem);letter-spacing:-.02em;display:flex;gap:.4em;justify-content:center;flex-wrap:wrap}.title-word{display:inline-block;background:linear-gradient(180deg,var(--pink),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent;transform:rotate(-3deg)}.title-word.title-pop{background:linear-gradient(180deg,var(--purple),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;transform:rotate(2deg)}.stage{width:100%;display:flex;flex-direction:column;align-items:center;gap:.85rem}.viz{width:100%;height:96px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:var(--shadow);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:10px 14px}.viz canvas{width:100%;height:100%;display:block}.viz-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.95rem;color:var(--ink);opacity:.55;pointer-events:none;text-align:center;padding:0 1rem}.viz.live{border-color:var(--pink);box-shadow:0 6px #ff5d8f59}.record{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:4px solid var(--ink);background:var(--pink);width:132px;height:132px;border-radius:50%;cursor:pointer;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;padding:0;transition:transform .08s ease,box-shadow .08s ease,background-color .15s;-webkit-tap-highlight-color:transparent}.record:active{transform:translateY(4px);box-shadow:0 6px #2a1a3a38}.record-shape{display:block;width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:inset 0 -4px #2a1a3a26;transition:border-radius .18s ease,width .18s ease,height .18s ease,background-color .18s ease}.record.is-rec{background:#f36;animation:rec-pulse 1.1s ease-in-out infinite}.record.is-rec .record-shape{width:40px;height:40px;border-radius:8px;background:#fff}@keyframes rec-pulse{0%,to{box-shadow:var(--shadow-lg),0 0 #ff336673}50%{box-shadow:var(--shadow-lg),0 0 0 18px #f360}}.hint{margin:0;font-size:1rem;color:var(--ink);opacity:.75}.err{margin:0;color:#b00040;font-size:.9rem}.effects{margin-top:.5rem;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.85rem}.fx{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:3px solid var(--ink);border-radius:18px;padding:1.1rem .75rem;font:inherit;font-size:1.15rem;font-weight:800;cursor:pointer;color:var(--ink);box-shadow:var(--shadow);transition:transform .08s ease,box-shadow .08s ease,filter .15s;-webkit-tap-highlight-color:transparent;text-align:center;letter-spacing:.01em}.fx:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px #2a1a3a2e}.fx:disabled{cursor:not-allowed;filter:grayscale(.7);opacity:.55}.fx-label{display:inline-block}.fx-normal{background:var(--yellow);transform:rotate(-1.5deg)}.fx-backwards{background:var(--green);transform:rotate(1.5deg)}.fx-chipmunk{background:var(--pink);color:#fff;transform:rotate(-1deg)}.fx-low{background:var(--purple);color:#fff;transform:rotate(2deg)}.fx:active:not(:disabled).fx-normal,.fx:active:not(:disabled).fx-backwards,.fx:active:not(:disabled).fx-chipmunk,.fx:active:not(:disabled).fx-low{transform:translateY(4px) rotate(0)}.fx.is-active{animation:fx-bounce .5s ease}@keyframes fx-bounce{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-6px) scale(1.04)}to{transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.record.is-rec,.fx.is-active{animation:none}}