:root{--bg: #f4f4f4;--bg-glow: rgba(237, 125, 5, .12);--card: #ffffff;--accent: #ed7d05;--accent-bright: #ff961c;--accent-deep: #c6761f;--accent-soft: rgba(237, 125, 5, .16);--steel: #1e1e1e;--steel2: #2a2a2a;--text: #1e1e1e;--muted: #565656;--border: rgba(0, 0, 0, .1);--danger: #c0392b;--radius: 14px;--font: "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text)}.app{max-width:640px;margin:0 auto;padding:28px 20px 48px;min-height:100vh;display:flex;flex-direction:column}.header{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:26px}.brand{display:flex;align-items:flex-end;gap:6px}.brand-text{text-align:left;padding-bottom:14px}.title{font-size:2.5rem;font-weight:700;margin:0;letter-spacing:.5px;line-height:1.1}.title-otto{color:var(--steel)}.title-type{color:var(--accent)}.tagline{margin:6px 0 0;font-size:.82rem;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap}.caps-toggle{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;-webkit-user-select:none;user-select:none}.caps-label{font-size:.65rem;font-weight:700;letter-spacing:1px;color:var(--muted)}.caps-toggle input{position:absolute;opacity:0;pointer-events:none}.caps-toggle .switch{width:56px;height:30px;border-radius:15px;background:#c2c2c2;position:relative;transition:background .2s;flex-shrink:0}.caps-toggle .switch:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:transform .2s}.caps-toggle input:checked+.switch{background:var(--accent)}.caps-toggle input:checked+.switch:after{transform:translate(26px)}.caps-toggle input:focus-visible+.switch{outline:2px solid var(--accent-deep);outline-offset:2px}.main{display:flex;flex-direction:column;align-items:center;flex:1}.record-button{width:96px;height:96px;border-radius:50%;border:none;cursor:pointer;color:#fff;background:linear-gradient(160deg,#2c2c2c,#1a1a1a 40%,#3a3a3a,#232323);box-shadow:0 6px 18px #0000004d,0 0 0 12px var(--bg-glow);display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .2s}.record-button:hover:not(:disabled){transform:scale(1.05)}.record-button:active:not(:disabled){transform:scale(.97)}.record-button:disabled{cursor:default;opacity:.9}.record-button.recording{background:linear-gradient(145deg,var(--accent-bright),var(--accent-deep));animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 6px 18px #ed7d0559,0 0 0 12px var(--bg-glow)}50%{box-shadow:0 6px 18px #ed7d0580,0 0 0 22px #ed7d0533}}.spinner{width:30px;height:30px;border:4px solid rgba(255,255,255,.3);border-top-color:var(--accent-bright);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.status{margin:20px 0 0;font-size:.95rem;color:var(--muted);min-height:1.4em;text-align:center}.progress-track{width:min(320px,100%);height:8px;border-radius:4px;background:var(--accent-soft);margin-top:12px;overflow:hidden}.progress-fill{height:100%;border-radius:4px;background:var(--accent);transition:width .3s}.error{margin:14px 0 0;color:var(--danger);font-size:.9rem;text-align:center}.empty-hint{margin-top:48px;color:var(--muted);font-size:.95rem;text-align:center}.entry-list{list-style:none;padding:0;margin:32px 0 0;width:100%;display:flex;flex-direction:column;gap:14px}.entry{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;box-shadow:0 2px 8px #0000000f}.entry-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.entry-time{font-size:.75rem;color:var(--muted)}.copy-button{border:1.5px solid var(--accent);background:transparent;color:var(--accent-deep);font-weight:600;font-size:.8rem;padding:5px 14px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}.copy-button:hover{background:var(--accent-soft)}.copy-button.copied{background:var(--accent);border-color:var(--accent);color:#fff}.entry-text{display:block;width:100%;margin:0;padding:4px 6px;border:1px solid transparent;border-radius:10px;background:transparent;font:inherit;color:inherit;line-height:1.55;resize:none;overflow:hidden;transition:border-color .15s,background .15s}.entry-text:hover{border-color:var(--accent-soft)}.entry-text:focus{outline:none;border-color:var(--accent);background:#ed7d050d}