@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#292e29;background:#f6f5f1;font-synthesis:none;--green:#315941;--muted:#858981;--border:#e5e6df}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled,select:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #a7bb83;outline-offset:4px}button{color:inherit}button:hover:not(:disabled){filter:brightness(.97)}[hidden]{display:none!important}.shell{max-width:1440px;margin:auto;padding:0 64px}.topbar{height:101px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;text-decoration:none;color:#263f30;font-size:23px;font-weight:700;letter-spacing:-1px}.brand-light{font-weight:400;color:#7d887d;margin-left:5px}.brand-mark{display:flex;gap:3px;align-items:center;margin-right:13px;height:30px}.brand-mark i{width:4px;border-radius:4px;background:var(--green);height:13px}.brand-mark i:nth-child(2),.brand-mark i:nth-child(4){height:23px}.brand-mark i:nth-child(3){height:31px}.connection{display:flex;align-items:center;gap:8px;font-size:12px;color:#717b70;border:1px solid var(--border);border-radius:30px;padding:9px 13px;background:#fafbf7}.dot{width:6px;height:6px;border-radius:100%;display:inline-block;background:#b99a58}.dot.online{background:#649568;box-shadow:0 0 0 3px #eaf0e5}.dot.offline{background:#bc6a57}.intro{padding:48px 0 35px;position:relative}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:700;color:#778570;margin-bottom:18px}h1{font-family:Manrope,sans-serif;font-size:62px;letter-spacing:-3.7px;line-height:1.09;font-weight:500;margin:0}h1 span{color:#748569}.intro p{color:#85877e;font-size:14px;line-height:1.8;margin:19px 0 0}.powered{position:absolute;right:0;bottom:40px;display:flex;align-items:center;gap:10px;font-size:8px;font-weight:600;letter-spacing:1px;color:#8f9488}.tiny-wave{font-size:17px;color:#6e8468}.powered-line{height:11px;width:1px;background:#d3d8ca}.workspace{display:grid;grid-template-columns: minmax(320px, .85fr) minmax(440px,1.4fr);gap:24px;align-items:stretch}.input-card,.result-card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 4px 10px #303d2010}.input-card{padding:25px}.card-heading{display:flex;align-items:center;gap:11px}h2{font-size:15px;font-weight:600;margin:0;letter-spacing:-.3px}.step{font-size:10px;color:#8d9785;border:1px solid #e5e9df;border-radius:6px;padding:4px 6px}.tabs{display:flex;padding:4px;background:#f3f4ef;border-radius:9px;margin:24px 0 20px}.tabs button{width:50%;border:0;background:transparent;padding:10px 4px;font-size:12px;color:#888d81;border-radius:6px}.tabs button span{margin-right:7px;font-size:17px}.tabs button[aria-selected=true]{background:#fff;color:#3a503c;box-shadow:0 1px 4px #26382114}.drop-zone{background:#fafbf8;border:1.5px dashed #d7dfcf;border-radius:10px;width:100%;min-height:218px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background .2s,border .2s}.drop-zone.dragover{background:#eaf0df;border-color:#517b42}.upload-icon{display:grid;place-items:center;border:1px solid #e6ebdf;background:#f0f3e9;color:#738466;border-radius:13px;width:43px;height:43px;font-size:28px;margin-bottom:17px}.drop-zone strong{font-size:13px;font-weight:500}.drop-zone>span:not(.upload-icon){font-size:12px;color:#969a90;margin-top:6px}.drop-zone em{font-style:normal;color:#5f7c4c;text-decoration:underline;text-underline-offset:3px}.drop-zone small{font-size:10px;line-height:1.9;color:#a0a596;margin-top:18px}.setting-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin:23px 0;color:#697060}.setting-icon{font-size:16px;margin-right:7px}.auto-badge{font-size:10px;color:#6f7f5e;background:#f4f6ef;border:1px solid #e9ecdf;border-radius:5px;padding:5px 7px}.auto-badge span{margin-left:6px}.primary-button{width:100%;background:var(--green);color:#fff;border:0;border-radius:8px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:500}.primary-button:disabled{opacity:1;background:#e4e8dc;color:#899480}.primary-button>span:last-child{font-size:19px;line-height:1}.input-note{text-align:center;font-size:9px;color:#a1a596;margin:12px 0 0}.result-card{display:flex;flex-direction:column;min-height:473px;overflow:hidden}.result-header{display:flex;align-items:center;justify-content:space-between;padding:25px;border-bottom:1px solid #f0f0ea;gap:10px}.status-badge{font-size:8px;color:#9a9e91;letter-spacing:1px;background:#f6f7f2;padding:6px 8px;border-radius:4px;white-space:nowrap}.status-badge.complete{color:#507244;background:#eef4e7}.empty-state{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:330px}.paper-art{position:relative;border:1px solid #e0e5d7;border-radius:9px;background:linear-gradient(135deg,#f9fbf5,#eef2e6);width:67px;height:79px;transform:rotate(-7deg);box-shadow:5px 6px 0 #f6f7f0;margin:10px 0 22px}.paper-lines{padding:22px 13px;display:flex;flex-direction:column;gap:7px}.paper-lines i{height:3px;background:#cfd8c1;border-radius:3px}.paper-lines i:last-child{width:65%}.paper-spark{position:absolute;right:-21px;top:-16px;font-size:33px;color:#a1b48c}.paper-wave{position:absolute;right:-12px;bottom:5px;background:#dfe9d2;color:#839770;padding:4px 7px;border-radius:7px;transform:rotate(7deg)}h3{font-family:Manrope,sans-serif;font-size:18px;font-weight:500;letter-spacing:-.5px;margin:0 0 9px}.empty-state p,.loading-state p{font-size:12px;text-align:center;line-height:1.9;color:#989b91;margin:0}.empty-features{display:flex;gap:20px;margin-top:28px;font-size:9px;color:#9aab8c}.result-footer{padding:16px 23px;border-top:1px solid #eeefe8;display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;background:#fdfdfa}.result-footer>span{font-size:9px;color:#979e8d;display:flex;gap:7px;align-items:center}.muted{background:#aab99b;width:5px;height:5px}.download-controls{display:flex;gap:5px;align-items:center}.download-controls button,.download-controls select{background:white;border:1px solid #dfe4d7;border-radius:6px;font-size:10px;padding:8px;color:#537045}.download-controls button span{margin-left:6px}.page-footer{display:flex;justify-content:space-between;align-items:center;margin:26px 0 30px;color:#a0a496;font-size:10px}.page-footer>span:first-child{font-size:8px;letter-spacing:1.5px}.footer-star{font-size:19px;color:#7e9470;margin-left:10px}.selected-file{display:flex;gap:10px;align-items:center;background:#f3f6ee;border-radius:8px;padding:10px;margin-top:12px}.selected-file>div{min-width:0;flex:1}.selected-file strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:500}.selected-file small{font-size:10px;color:#829177}.file-icon{font-size:24px;color:#718567}.icon-button{background:none;border:0;font-size:22px;color:#819074}audio{width:100%;height:34px;margin-top:10px}.error-message{margin-top:14px;background:#fff1ec;padding:12px;border-radius:6px;color:#984c35;font-size:12px;line-height:1.5}.recorder{min-height:218px;background:#fafbf8;border:1px solid #e5e9dd;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.record-wave{height:29px;display:flex;align-items:center;gap:5px}.record-wave i{width:3px;height:10px;background:#a3b691;border-radius:3px}.record-wave i:nth-child(2n){height:23px}.record-wave i:nth-child(3n){height:29px}.record-wave.active i{animation:wave .7s ease-in-out infinite alternate}.record-wave.active i:nth-child(2n){animation-delay:-.3s}.recorder>strong{font-family:Manrope,sans-serif;font-size:25px;font-variant-numeric:tabular-nums;font-weight:500}.recorder>span{font-size:11px;color:#929a88}.record-button{border:1px solid #dce3d3;background:#fff;border-radius:25px;padding:9px 15px;font-size:11px;display:flex;align-items:center;gap:8px}.record-indicator{background:#ae6b59;border-radius:100%;width:8px;height:8px}.recording .record-indicator{border-radius:2px}.loading-state{flex:1;min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center}.loader{width:38px;height:38px;border:3px solid #e9eddf;border-top-color:#698158;border-radius:100%;animation:spin 1s linear infinite;margin-bottom:22px}.loading-state>span{font-size:10px;color:#8a987d;margin-top:20px;font-variant-numeric:tabular-nums}#transcript-content{padding:21px 25px;flex:1}.transcript-meta{display:flex;gap:14px;font-size:10px;color:#859178;flex-wrap:wrap}.view-toolbar{display:flex;justify-content:space-between;align-items:center;margin:20px 0}.view-switch{background:#f3f5ee;padding:3px;border-radius:6px;display:flex}.view-switch button{border:0;background:none;font-size:10px;padding:7px 9px;border-radius:4px;color:#8b957e}.view-switch button[aria-pressed=true]{background:#fff;color:#465c3d;box-shadow:0 1px 3px #0000000b}.text-button{border:0;background:none;font-size:10px;color:#6d815c}.transcript-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.9;color:#545f4d;max-height:350px;overflow:auto}.transcript-segments{max-height:350px;overflow:auto}.segment{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #f1f2ec}.segment button{align-self:start;background:#f1f5e9;border:0;border-radius:4px;padding:5px;font-size:10px;color:#738360;font-variant-numeric:tabular-nums}.segment p{font-size:13px;line-height:1.8;margin:0;overflow-wrap:anywhere;color:#545f4d}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes spin{to{transform:rotate(360deg)}}@keyframes wave{to{transform:scaleY(.35)}}@media(min-width:1500px){.intro{padding-top:65px}.workspace{margin-top:10px}}@media(max-width:1050px){.shell{padding:0 30px}.powered{position:static;margin-top:20px}.workspace{grid-template-columns:minmax(280px,.85fr) minmax(360px,1.2fr)}.result-header{padding:22px 18px}.status-badge{font-size:7px;letter-spacing:.4px}.result-footer{padding:15px}.result-footer>span{max-width:130px;line-height:1.5}}@media(max-width:760px){.shell{padding:0 20px}.topbar{height:78px}.brand{font-size:20px}.connection{font-size:10px;padding:8px}.intro{padding:32px 0 26px}h1{font-size:50px;letter-spacing:-3px}.intro p{font-size:13px}.powered{font-size:7px;gap:7px}.workspace{grid-template-columns:1fr;gap:18px}.input-card{padding:22px}.result-card{min-height:440px}.result-header{padding:22px}.result-footer>span{max-width:none}.page-footer{gap:15px;font-size:9px}.page-footer>span:first-child{max-width:130px;line-height:1.8}.empty-features{gap:12px}.desktop-break{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Theme toggle and the darker counterpart of the sage palette. */
:root { color-scheme: light; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 8px; border: 1px solid var(--border); border-radius: 50%; background: #fafbf7; color: #61735b; flex-shrink: 0; }
.theme-toggle svg { width: 18px; height: 18px; }
.sun-icon { display: none; }
:root[data-theme="dark"] { color-scheme: dark; color: #e4e9df; background: #171c19; --green: #a8c393; --muted: #a3ad9b; --border: #364036; }
[data-theme="dark"] .moon-icon { display: none; }
[data-theme="dark"] .sun-icon { display: block; }
[data-theme="dark"] :is(.input-card, .result-card) { background: #202722; box-shadow: 0 4px 10px #00000020; }
[data-theme="dark"] :is(.brand, .transcript-text, .segment p) { color: #dce5d4; }
[data-theme="dark"] :is(.brand-light, .intro p, .powered, .setting-row, .empty-state p, .loading-state p, .page-footer, .input-note, .recorder > span, .result-footer > span, .drop-zone small, .drop-zone > span:not(.upload-icon)) { color: #a5ae9f; }
[data-theme="dark"] :is(h1 span, .eyebrow, .tiny-wave, .empty-features, .transcript-meta, .text-button, .loading-state > span, .selected-file small, .file-icon, .icon-button, .footer-star, .drop-zone em) { color: #b0c49e; }
[data-theme="dark"] :is(.connection, .theme-toggle, .record-button, .download-controls button, .download-controls select) { background: #252e26; border-color: var(--border); color: #bfd0b2; }
[data-theme="dark"] .dot.online { background: #a2c48e; box-shadow: 0 0 0 3px #33412e; }
[data-theme="dark"] :is(.tabs, .view-switch, .status-badge, .result-footer) { background: #1b221d; }
[data-theme="dark"] :is(.tabs button, .view-switch button, .status-badge) { color: #aab5a1; }
[data-theme="dark"] :is(.tabs button[aria-selected="true"], .view-switch button[aria-pressed="true"]) { background: #36432f; color: #e4ecd9; }
[data-theme="dark"] :is(.drop-zone, .recorder) { background: #1d251f; border-color: #485740; }
[data-theme="dark"] .drop-zone.dragover { background: #303e2b; border-color: #a8c393; }
[data-theme="dark"] :is(.upload-icon, .auto-badge, .selected-file, .segment button, .status-badge.complete) { background: #303d2a; border-color: #425238; color: #bed3aa; }
[data-theme="dark"] .primary-button { background: #a8c393; color: #1c2c1a; }
[data-theme="dark"] .primary-button:disabled { background: #35412f; color: #9cae8c; }
[data-theme="dark"] :is(.result-header, .result-footer, .segment, .step) { border-color: var(--border); }
[data-theme="dark"] .step { color: #aab99c; }
[data-theme="dark"] .powered-line { background: var(--border); }
[data-theme="dark"] .paper-art { background: linear-gradient(135deg, #34412d, #252f22); border-color: #46553b; box-shadow: 5px 6px 0 #1a211c; }
[data-theme="dark"] .paper-lines i { background: #728661; }
[data-theme="dark"] .paper-wave { background: #485e39; color: #c2d5ad; }
[data-theme="dark"] .paper-spark { color: #adc795; }
[data-theme="dark"] .loader { border-color: #35412f; border-top-color: #a8c393; }
[data-theme="dark"] .error-message { background: #432c25; color: #f0b4a1; }
@media (max-width: 400px) {
  .header-actions { gap: 6px; }
  .brand { font-size: 18px; }
  .brand-mark { margin-right: 8px; }
  .connection { padding: 7px; font-size: 9px; }
  .theme-toggle { width: 32px; height: 32px; padding: 6px; }
}