:root{--bg:#f5f0e8;--card:#fffdf9;--ink:#1d1a16;--body:#3b352e;--muted:#6f675d;--border:#e3dbcd;--border-hi:#cfc4b2;--red:#e5484d;--red-soft:#e5484d1f;--green:#3f7d5a;--display:"Bricolage Grotesque", "Inter", system-ui, sans-serif;--ui:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);color:var(--body);font-family:var(--ui);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55}button,select,textarea{font:inherit;color:inherit}a{color:var(--ink);text-underline-offset:3px}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.page{max-width:680px;margin:0 auto;padding:36px 24px 48px}.hero{padding:48px 0 28px}.hero h1{font-family:var(--display);letter-spacing:-.04em;color:var(--ink);font-size:clamp(56px,12vw,88px);font-weight:700;line-height:.95}.lede{max-width:32em;color:var(--body);margin-top:14px;font-size:18px}.recorder{border:1px solid var(--border);background:var(--card);border-radius:24px;flex-direction:column;align-items:center;gap:14px;padding:36px 20px 24px;transition:border-color .15s,background-color .15s;display:flex;box-shadow:0 1px #1d1a160a,0 18px 40px -24px #1d1a1640}.recorder.is-dragging{border-color:var(--red);background:#fff7f5;border-style:dashed}.rec{background:var(--red);width:92px;height:92px;box-shadow:0 0 0 8px var(--red-soft), 0 10px 24px -8px #e5484db3;cursor:pointer;border:0;border-radius:50%;place-items:center;transition:transform .12s,box-shadow .2s,background-color .2s;display:grid;position:relative}.rec:hover:not(:disabled){transform:scale(1.04)}.rec:active:not(:disabled){transform:scale(.97)}.rec:disabled{background:var(--border-hi);box-shadow:none;cursor:progress}.rec-icon{background:#fff;border-radius:50%;width:26px;height:26px;transition:border-radius .2s,width .2s,height .2s}.rec.is-recording .rec-icon{border-radius:6px;width:24px;height:24px}.rec.is-recording{animation:1.6s ease-out infinite pulse}@keyframes pulse{0%{box-shadow:0 0 #e5484d73,0 10px 24px -8px #e5484db3}to{box-shadow:0 0 0 22px #e5484d00,0 10px 24px -8px #e5484db3}}.meter{align-items:center;gap:4px;height:56px;display:flex}.meter span{background:var(--border-hi);border-radius:4px;width:4px;transition:height 80ms linear}.meter.is-active span{background:var(--ink)}.rec-time{min-height:1.5em;font-family:var(--mono);color:var(--ink);font-size:14px}.rec-alt{color:var(--muted);text-align:center;font-size:14px}.link{color:var(--ink);text-decoration:underline;-webkit-text-decoration-color:var(--border-hi);text-decoration-color:var(--border-hi);text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:0}.link:hover:not(:disabled){-webkit-text-decoration-color:var(--ink);text-decoration-color:var(--ink)}.link:disabled{color:var(--muted);cursor:default}.bar{background:var(--border);border-radius:6px;width:100%;max-width:360px;height:6px;position:relative}.bar span{background:var(--ink);border-radius:6px;transition:width .2s;position:absolute;inset:0 auto 0 0}.bar em{font-family:var(--mono);color:var(--muted);text-align:center;font-size:12px;font-style:normal;position:absolute;top:12px;left:0;right:0}.bar+.rec-alt{margin-top:22px}.settings{border-top:1px solid var(--border);flex-wrap:wrap;justify-content:center;gap:10px 18px;width:100%;margin-top:4px;padding-top:16px;display:flex}.settings label{color:var(--muted);align-items:center;gap:8px;font-size:13px;display:flex}select{border:1px solid var(--border);background:var(--bg);color:var(--ink);border-radius:8px;padding:5px 8px;font-size:13px}.error{color:#b42318;text-align:center;font-size:14px}.result{border:1px solid var(--border);background:var(--card);border-radius:18px;margin-top:20px;padding:14px}.tabs{gap:4px;margin-bottom:10px;display:flex;overflow-x:auto}.tab{color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;padding:6px 12px;font-size:14px}.tab:hover{color:var(--ink)}.tab.is-active{border-color:var(--border);background:var(--bg);color:var(--ink)}.output{border:1px solid var(--border);width:100%;min-height:180px;color:var(--ink);resize:vertical;background:#fff;border-radius:12px;padding:14px;font-size:15px;line-height:1.6}.output:focus{border-color:var(--border-hi);outline:none}.result-foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;display:flex}.row{flex-wrap:wrap;gap:8px;display:flex}.btn{border:1px solid var(--border);background:var(--card);min-height:34px;color:var(--ink);cursor:pointer;border-radius:10px;padding:0 14px;font-size:14px;transition:border-color .15s,background-color .15s}.btn:hover:not(:disabled){border-color:var(--border-hi);background:var(--bg)}.btn:disabled{opacity:.5;cursor:default}.btn-dark{border-color:var(--ink);background:var(--ink);color:#fff}.btn-dark:hover:not(:disabled){background:#000;border-color:#000}.btn-danger:hover:not(:disabled){color:#b42318;background:#fff1f0;border-color:#f4b4b0}.hint{color:var(--muted);font-size:13px}.ai-note{text-align:center;margin-top:14px}.saved,.privacy{margin-top:56px}.saved h2,.privacy h2{font-family:var(--display);letter-spacing:-.02em;color:var(--ink);font-size:26px;font-weight:700}.saved-head{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;display:flex}.saved-head .link{font-size:14px}.count{font-family:var(--mono);color:var(--muted);margin-left:4px;font-size:14px;font-weight:400}.notes{border-top:1px solid var(--border);list-style:none}.note{border-bottom:1px solid var(--border)}.note-head{text-align:left;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:baseline;gap:12px;width:100%;padding:12px 2px;display:flex}.note-title{color:var(--ink);font-weight:500}.note-meta{font-family:var(--mono);color:var(--muted);flex-shrink:0;font-size:12px}.note-body{padding:0 2px 14px}.note-body pre{font-family:var(--ui);white-space:pre-wrap;color:var(--body);margin-bottom:10px;font-size:15px}.privacy ul{color:var(--body);margin-top:10px;padding-left:18px}.privacy li+li{margin-top:4px}.footer{border-top:1px solid var(--border);color:var(--muted);margin-top:56px;padding-top:16px;font-size:13px}@media (width<=560px){.page{padding:24px 16px 36px}.hero{padding:32px 0 22px}.lede{font-size:17px}.recorder{padding:28px 16px 20px}}@media (prefers-reduced-motion:reduce){.rec.is-recording{animation:none}}
