:root{--paper:#f4ecd8;--ink:#1f1a14;--mustard:#d9a21b;--teal:#1f6f6b;--rust:#b5482b;--card:#fbf6e9}
body{background:var(--paper);color:var(--ink);font-family:'IBM Plex Mono',monospace;
background-image:radial-gradient(rgba(31,26,20,.06) 1px,transparent 1px),linear-gradient(180deg,#f7f0de,#efe4c9);
background-size:18px 18px,100% 100%;min-height:100vh}
.serif{font-family:'Fraunces',serif}
.card{background:var(--card);border:2px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink)}
.chip{border:1.5px solid var(--ink);border-radius:999px;padding:4px 12px;font-size:12px;background:#fff8e6;transition:.15s}
.chip:hover{background:var(--mustard);transform:translateY(-1px)}
textarea.paper{background:repeating-linear-gradient(#fffaf0 0 31px,#e9dfc6 31px 32px);line-height:32px;border:2px solid var(--ink);border-radius:14px;outline:none}
.speak{width:96px;height:96px;border-radius:50%;background:var(--rust);color:#fff8e6;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-family:'Fraunces',serif;font-weight:900;font-size:20px;transition:.1s}
.speak:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.speak.on{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:4px 4px 0 var(--ink),0 0 0 12px rgba(181,72,43,.2)}}
.btn{border:2px solid var(--ink);border-radius:12px;padding:8px 14px;background:#fff8e6;box-shadow:3px 3px 0 var(--ink);font-size:13px;font-weight:600}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
input[type=range]{accent-color:var(--teal);width:100%}
.ph{display:inline-block;padding:1px 5px;margin:1px;border-radius:6px;cursor:pointer;transition:.08s;font-size:12px}
.ph:hover{background:#e9dfc6}
.ph.act{background:var(--mustard);color:var(--ink);transform:scale(1.25)}
.ph.st{font-weight:600;font-size:14px;color:var(--rust)}
.rise{animation:rise .6s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}