:root{color-scheme:dark;--bg: #111111;--surface: rgb(39 39 42 / .5);--code-bg: #0f0f0f;--border: #27272a;--border-strong: #3f3f46;--hover: #262626;--fg: #fafafa;--muted: #a1a1aa;--ring: #d4d4d4;--error: #fecaca;--mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;--ease-out: cubic-bezier(.23, 1, .32, 1);--press: .1s var(--ease-out)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;font-size:1.0625rem;line-height:1.45;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}#root{min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:min(44rem,calc(100% - 2.5rem));margin:0 auto;padding:1rem 0}.logo{display:block;width:130px;height:27px}.try-haiku{display:inline-flex;align-items:center;min-height:2.25rem;padding:0 .875rem;border:1px solid var(--border-strong);border-radius:.375rem;color:var(--fg);font-size:.875rem;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .15s var(--ease-out),transform var(--press)}.next-step{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--border)}.next-step p{flex:1 1 18rem;margin:0;color:var(--fg);font-size:1rem;line-height:1.5;text-wrap:pretty}.try-haiku-primary{display:inline-flex;align-items:center;min-height:2.5rem;padding:0 1.25rem;border-radius:.375rem;background:var(--fg);color:#171717;font-size:.9375rem;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .15s var(--ease-out),transform var(--press)}.try-haiku:focus-visible,.try-haiku-primary:focus-visible{outline:none;box-shadow:0 0 0 1px var(--ring)}.page{width:min(28rem,calc(100% - 2.5rem));margin:0 auto;padding:3.5rem 0 4rem}.page.is-result{width:min(44rem,calc(100% - 2.5rem));padding-top:1.25rem}h1{margin:0;color:var(--fg)}.intro h1{font-size:2.125rem;font-weight:700;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}.intro{margin-bottom:1.75rem}.lead{margin:.7rem 0 0;color:var(--muted);font-size:1.0625rem;line-height:1.45;text-wrap:pretty}.controls{min-width:0}.file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.drop,.replace{position:relative;font:inherit;cursor:pointer}.drop{display:flex;align-items:center;justify-content:center;min-height:11rem;padding:2rem 1.25rem;border:1px dashed var(--border-strong);border-radius:.5rem;background:var(--surface);color:var(--fg);font-size:1rem;font-weight:500;text-align:center;-webkit-user-select:none;user-select:none;transition:background-color .15s var(--ease-out),border-color .15s var(--ease-out),color .15s var(--ease-out),transform var(--press)}.drop[data-state=parsing],.drop[data-state=generating]{cursor:wait;color:var(--muted)}.status-body{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;max-width:100%}.status-indicator{display:none;flex:0 0 auto;width:.85rem;height:.85rem;border:2px solid color-mix(in oklch,var(--fg) 16%,transparent);border-top-color:var(--fg);border-radius:50%}.status-indicator.is-busy{display:block;animation:spin .65s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.drop:focus-within,.replace:focus-within{outline:1px solid var(--ring);outline-offset:3px}.drop.drop-active{border-color:#fff3;background:#ffffff0d}.replace,.copy,.download{display:inline-flex;align-items:center;flex:0 0 auto;min-height:2.75rem;padding:.25rem .15rem;border:0;border-radius:.375rem;background:none;color:var(--muted);font:inherit;font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:color .15s var(--ease-out),transform var(--press)}.drop:active,.replace:active,.copy:active,.download:active,.try-haiku:active,.try-haiku-primary:active{transform:scale(.97)}.copy:focus-visible,.download:focus-visible{outline:1px solid var(--ring);outline-offset:3px}.doc-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.45rem}.doc-title{min-width:0;font-size:1.25rem;font-weight:700;line-height:1.2;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.doc-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.5rem;padding:0;list-style:none}.token-pill{display:inline-flex;align-items:baseline;gap:.3rem;min-height:1.625rem;padding:.2rem .7rem;border-radius:999px;background:#ffffff14;color:var(--muted);font-size:.75rem;font-weight:500;line-height:1.2;white-space:nowrap}.token-count{color:var(--fg);font-variant-numeric:tabular-nums;font-weight:600}.filename{margin:.7rem 0 0;color:var(--muted);font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.code-block{background:var(--code-bg);border:1px solid var(--border);border-radius:.5rem}.code-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.85rem;padding:.2rem .75rem 0}.descriptor{margin:0;padding:.35rem 1.15rem 1.25rem;white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:auto;max-width:100%;font-family:var(--mono);font-size:.8125rem;line-height:1.65;color:#e4e4e7;-moz-tab-size:2;tab-size:2;-webkit-user-select:text;user-select:text}.descriptor code{font:inherit}.error{margin:.75rem 0 0;padding:.625rem .875rem;border:1px solid rgb(239 68 68 / .3);border-radius:.5rem;background:#ef44441a;color:var(--error);font-size:.875rem;font-weight:500}@media(hover:hover)and (pointer:fine){.drop:hover{border-color:#fff3;background:#ffffff0d}.replace:hover,.copy:hover,.download:hover{color:var(--fg)}.try-haiku:hover{background:var(--hover)}.try-haiku-primary:hover{background:#fafafae6}}@media(max-width:760px){.topbar{width:calc(100% - 2rem)}.page{width:min(28rem,calc(100% - 2rem));padding:2.5rem 0 3rem}.page.is-result{width:min(44rem,calc(100% - 2rem));padding-top:1.5rem}.intro h1{font-size:1.875rem}.drop{min-height:9.5rem}}@media(max-width:420px){.topbar{width:calc(100% - 1.5rem)}.page{width:calc(100% - 1.5rem);padding-top:2rem}.doc-title{font-size:1.1875rem}.descriptor{font-size:.8125rem}}@media(prefers-reduced-motion:reduce){.drop,.replace,.copy,.download,.try-haiku,.try-haiku-primary{transition:background-color .12s linear,border-color .12s linear,color .12s linear}.drop:active,.replace:active,.copy:active,.download:active,.try-haiku:active,.try-haiku-primary:active{transform:none}.status-indicator.is-busy{animation:pulse 1.2s ease-in-out infinite}}@keyframes pulse{50%{opacity:.35}}
