@import"https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700&family=Hanken+Grotesk:wght@400;500;600&family=Martian+Mono:wght@400;500&display=swap";.text-diff,.text-diff-stats,.text-diff-minimap,.text-diff-timeline,.text-diff-playback-wrap{--_td-added-bg: var(--text-diff-added-bg, #ddfbe6);--_td-added-color: var(--text-diff-added-color, #008000);--_td-added-decoration: var(--text-diff-added-decoration, none);--_td-removed-bg: var(--text-diff-removed-bg, #fce9e9);--_td-removed-color: var(--text-diff-removed-color, #c70000);--_td-removed-decoration: var(--text-diff-removed-decoration, line-through);--_td-line-added-bg: var(--text-diff-line-added-bg, #f0fbf3);--_td-line-removed-bg: var(--text-diff-line-removed-bg, #fdf3f3);--_td-gutter-bg: var(--text-diff-gutter-bg, transparent);--_td-gutter-color: var(--text-diff-gutter-color, #8a919e);--_td-sign-added-color: var(--text-diff-sign-added-color, var(--_td-added-color));--_td-sign-removed-color: var(--text-diff-sign-removed-color, var(--_td-removed-color));--_td-rule-color: var(--text-diff-rule-color, #e2e5ea);--_td-collapsed-bg: var(--text-diff-collapsed-bg, #f4f6f8);--_td-collapsed-color: var(--text-diff-collapsed-color, #5b6270);--_td-empty-color: var(--text-diff-empty-color, #5b6270);--_td-font-mono: var(--text-diff-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);--_td-heat-0: var(--text-diff-heat-0-bg, transparent);--_td-heat-1: var(--text-diff-heat-1-bg, #fdf4c8);--_td-heat-2: var(--text-diff-heat-2-bg, #fbe38e);--_td-heat-3: var(--text-diff-heat-3-bg, #f9c27e);--_td-heat-4: var(--text-diff-heat-4-bg, #f59d8f);--_td-heat-removed-color: var(--text-diff-heat-removed-color, #8a919e);--_td-move-0: var(--text-diff-move-0, #6d4fe0);--_td-move-1: var(--text-diff-move-1, #0b8aa6);--_td-move-2: var(--text-diff-move-2, #b86100);--_td-move-3: var(--text-diff-move-3, #c2256d);--_td-move-4: var(--text-diff-move-4, #2d5fd6);--_td-move-5: var(--text-diff-move-5, #4d7c0f);--_td-minimap-width: var(--text-diff-minimap-width, 14px);--_td-minimap-bg: var(--text-diff-minimap-bg, #f4f6f8);--_td-minimap-added: var(--text-diff-minimap-added, var(--_td-added-color));--_td-minimap-removed: var(--text-diff-minimap-removed, var(--_td-removed-color));--_td-minimap-modified: var(--text-diff-minimap-modified, #b7791f);--_td-minimap-moved: var(--text-diff-minimap-moved, var(--_td-move-0));--_td-timeline-active-bg: var(--text-diff-timeline-active-bg, #2f3542);--_td-timeline-active-color: var(--text-diff-timeline-active-color, #ffffff)}[data-theme=dark] .text-diff,[data-theme=dark] .text-diff-stats,[data-theme=dark] .text-diff-minimap,[data-theme=dark] .text-diff-timeline,[data-theme=dark] .text-diff-playback-wrap,.dark .text-diff,.dark .text-diff-stats,.dark .text-diff-minimap,.dark .text-diff-timeline,.dark .text-diff-playback-wrap,.text-diff-dark .text-diff,.text-diff-dark .text-diff-stats,.text-diff-dark .text-diff-minimap,.text-diff-dark .text-diff-timeline,.text-diff-dark .text-diff-playback-wrap,.text-diff.text-diff-dark,.text-diff-stats.text-diff-dark,.text-diff-minimap.text-diff-dark,.text-diff-timeline.text-diff-dark,.text-diff-playback-wrap.text-diff-dark{--_td-added-bg: var(--text-diff-added-bg, #173524);--_td-added-color: var(--text-diff-added-color, #7fdca4);--_td-removed-bg: var(--text-diff-removed-bg, #3d1a17);--_td-removed-color: var(--text-diff-removed-color, #ff9d92);--_td-line-added-bg: var(--text-diff-line-added-bg, #12261a);--_td-line-removed-bg: var(--text-diff-line-removed-bg, #2a1413);--_td-gutter-color: var(--text-diff-gutter-color, #7c8494);--_td-rule-color: var(--text-diff-rule-color, #2a2e37);--_td-collapsed-bg: var(--text-diff-collapsed-bg, #1d2027);--_td-collapsed-color: var(--text-diff-collapsed-color, #9aa1ae);--_td-empty-color: var(--text-diff-empty-color, #9aa1ae);--_td-heat-1: var(--text-diff-heat-1-bg, #37321a);--_td-heat-2: var(--text-diff-heat-2-bg, #4a3d12);--_td-heat-3: var(--text-diff-heat-3-bg, #573416);--_td-heat-4: var(--text-diff-heat-4-bg, #642822);--_td-heat-removed-color: var(--text-diff-heat-removed-color, #7c8494);--_td-move-0: var(--text-diff-move-0, #a996ff);--_td-move-1: var(--text-diff-move-1, #5fcbe3);--_td-move-2: var(--text-diff-move-2, #f0a64d);--_td-move-3: var(--text-diff-move-3, #f47bb0);--_td-move-4: var(--text-diff-move-4, #86a9ff);--_td-move-5: var(--text-diff-move-5, #a3d65c);--_td-minimap-bg: var(--text-diff-minimap-bg, #1d2027);--_td-minimap-modified: var(--text-diff-minimap-modified, #e0b252);--_td-timeline-active-bg: var(--text-diff-timeline-active-bg, #e8eaef);--_td-timeline-active-color: var(--text-diff-timeline-active-color, #16181d)}.text-diff{white-space:pre-wrap;overflow-wrap:anywhere;word-wrap:break-word}.text-diff .diff-added{background-color:var(--_td-added-bg);color:var(--_td-added-color);text-decoration:var(--_td-added-decoration)}.text-diff .diff-removed{background-color:var(--_td-removed-bg);color:var(--_td-removed-color);text-decoration:var(--_td-removed-decoration)}.text-diff-html{white-space:normal}.text-diff-html>div.diff-added,.text-diff-html>div.diff-removed{display:block}.text-diff-unified,.text-diff-split{font-family:var(--_td-font-mono);border:1px solid var(--_td-rule-color);border-radius:6px;overflow:hidden}.text-diff .diff-gutter{color:var(--_td-gutter-color);background:var(--_td-gutter-bg);text-align:right;padding:0 8px;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums;white-space:nowrap}.text-diff .diff-sign{-webkit-user-select:none;user-select:none;text-align:center;white-space:pre}.text-diff .diff-line{padding:0 8px 0 4px;min-width:0}.text-diff .diff-line .diff-added,.text-diff .diff-line .diff-removed{border-radius:2px}.text-diff .diff-row-collapsed{background:var(--_td-collapsed-bg);color:var(--_td-collapsed-color);border-top:1px solid var(--_td-rule-color);border-bottom:1px solid var(--_td-rule-color);padding:2px 12px;font-style:italic;white-space:normal}.text-diff button.diff-row-collapsed{display:block;width:100%;margin:0;border-left:0;border-right:0;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font:inherit;font-style:italic;cursor:pointer}.text-diff button.diff-row-collapsed:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.text-diff .diff-empty{color:var(--_td-empty-color);padding:8px 12px;font-style:italic;white-space:normal}.text-diff-unified .diff-row:not(.diff-row-collapsed){display:grid;grid-template-columns:max-content max-content 1.5em minmax(0,1fr)}.text-diff-unified .diff-gutter-old,.text-diff-unified .diff-gutter-new{min-width:3ch;box-sizing:content-box}.text-diff-unified .diff-gutter-new{border-right:1px solid var(--_td-rule-color)}.text-diff-unified .diff-row-added{background:var(--_td-line-added-bg)}.text-diff-unified .diff-row-removed{background:var(--_td-line-removed-bg)}.text-diff .diff-row-added .diff-sign,.text-diff .diff-cell-added .diff-sign{color:var(--_td-sign-added-color);font-weight:700}.text-diff .diff-row-removed .diff-sign,.text-diff .diff-cell-removed .diff-sign{color:var(--_td-sign-removed-color);font-weight:700}.text-diff-split{container-type:inline-size}.text-diff-split .diff-row:not(.diff-row-collapsed){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.text-diff-split .diff-cell{display:grid;grid-template-columns:max-content 1.5em minmax(0,1fr);min-width:0}.text-diff-split .diff-cell-old{border-right:1px solid var(--_td-rule-color)}.text-diff-split .diff-gutter{min-width:3ch;box-sizing:content-box}.text-diff-split .diff-cell-added{background:var(--_td-line-added-bg)}.text-diff-split .diff-cell-removed{background:var(--_td-line-removed-bg)}.text-diff-split .diff-cell-empty{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--_td-rule-color) 6px 7px)}@container (max-width: 640px){.text-diff-split .diff-row:not(.diff-row-collapsed){grid-template-columns:minmax(0,1fr)}.text-diff-split .diff-cell-old{border-right:0}.text-diff-split .diff-cell-empty,.text-diff-split .diff-row-equal .diff-cell-new{display:none}}.text-diff-stats{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;font-variant-numeric:tabular-nums;font-size:.875em}.text-diff-stats .diff-stat{padding:1px 8px;border-radius:999px;border:1px solid var(--_td-rule-color);white-space:nowrap}.text-diff-stats .diff-stat-added{background:var(--_td-added-bg);color:var(--_td-added-color)}.text-diff-stats .diff-stat-removed{background:var(--_td-removed-bg);color:var(--_td-removed-color)}.text-diff-stats .diff-stat-unchanged,.text-diff-stats .diff-stat-similarity{color:var(--_td-collapsed-color)}.text-diff-stats .diff-sr,.text-diff .diff-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}@media (forced-colors: active){.text-diff .diff-added,.text-diff .diff-removed{border:1px solid CanvasText}}.text-diff-heatmap{line-height:1.7}.text-diff-heatmap .diff-heat{border-radius:3px;padding:.1em 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}.text-diff-heatmap .diff-heat[data-heat="1"]{background-color:var(--_td-heat-1)}.text-diff-heatmap .diff-heat[data-heat="2"]{background-color:var(--_td-heat-2)}.text-diff-heatmap .diff-heat[data-heat="3"]{background-color:var(--_td-heat-3)}.text-diff-heatmap .diff-heat[data-heat="4"]{background-color:var(--_td-heat-4)}.text-diff-heatmap .diff-heat[data-heat="3"],.text-diff-heatmap .diff-heat[data-heat="4"]{text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.3em}.text-diff-heatmap .diff-heat[data-heat="3"]{text-decoration-style:dotted}.text-diff-heatmap .diff-heat[data-heat="4"]{text-decoration-style:solid}.text-diff-heatmap .diff-heat-removed{color:var(--_td-heat-removed-color);text-decoration:line-through;font-size:.875em;margin-inline-end:.35em}.text-diff-heatmap .diff-heat-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:12px 0 0;padding:0;list-style:none;font-size:.8125em;line-height:1.4;color:var(--_td-collapsed-color);white-space:normal}.text-diff-heatmap .diff-heat-key{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}.text-diff-heatmap .diff-heat-swatch{width:.9em;height:.9em;border-radius:3px;border:1px solid var(--_td-rule-color);background:var(--_td-heat-0)}.text-diff-heatmap .diff-heat-key[data-heat="1"] .diff-heat-swatch{background:var(--_td-heat-1)}.text-diff-heatmap .diff-heat-key[data-heat="2"] .diff-heat-swatch{background:var(--_td-heat-2)}.text-diff-heatmap .diff-heat-key[data-heat="3"] .diff-heat-swatch{background:var(--_td-heat-3)}.text-diff-heatmap .diff-heat-key[data-heat="4"] .diff-heat-swatch{background:var(--_td-heat-4)}.text-diff-heatmap .diff-heat-key-removed .diff-heat-swatch{background:linear-gradient(transparent 44%,var(--_td-heat-removed-color) 44% 58%,transparent 58%)}.text-diff .diff-move-0{--_td-move: var(--_td-move-0)}.text-diff .diff-move-1{--_td-move: var(--_td-move-1)}.text-diff .diff-move-2{--_td-move: var(--_td-move-2)}.text-diff .diff-move-3{--_td-move: var(--_td-move-3)}.text-diff .diff-move-4{--_td-move: var(--_td-move-4)}.text-diff .diff-move-5{--_td-move: var(--_td-move-5)}.text-diff-unified .diff-row.diff-row-moved-from,.text-diff-unified .diff-row.diff-row-moved-to{grid-template-columns:max-content max-content 1.5em minmax(0,1fr) max-content;background:color-mix(in srgb,var(--_td-move) 9%,transparent)}.text-diff-split .diff-cell.diff-cell-moved-from,.text-diff-split .diff-cell.diff-cell-moved-to{grid-template-columns:max-content 1.5em minmax(0,1fr) max-content;background:color-mix(in srgb,var(--_td-move) 9%,transparent)}.text-diff .diff-row-moved-from .diff-sign,.text-diff .diff-row-moved-to .diff-sign{color:var(--_td-move);font-weight:700}.text-diff .diff-row-moved-from .diff-line{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--_td-move) 55%,transparent)}.text-diff .diff-move-link{align-self:center;padding:0 8px;font-size:.8em;white-space:nowrap;color:var(--_td-move);text-decoration:underline dotted;text-underline-offset:.2em}.text-diff .diff-move-link:hover{text-decoration-style:solid}.text-diff .diff-move-link:focus-visible,.text-diff .diff-move-link:target{outline:2px solid var(--_td-move);outline-offset:1px;border-radius:3px}.text-diff-unified .diff-row:has(.diff-move-link:target),.text-diff-split .diff-cell:has(.diff-move-link:target){background:color-mix(in srgb,var(--_td-move) 22%,transparent)}.text-diff-with-minimap{display:grid;grid-template-columns:minmax(0,1fr) var(--_td-minimap-width);gap:8px;align-items:start;--_td-minimap-width: var(--text-diff-minimap-width, 14px)}.text-diff-minimap{position:sticky;top:var(--text-diff-minimap-top, 0px);box-sizing:border-box;width:var(--_td-minimap-width);height:min(var(--text-diff-minimap-height, 100vh),100%);min-height:48px;border-radius:4px;background:var(--_td-minimap-bg);border:1px solid var(--_td-rule-color)}.text-diff-minimap .diff-minimap-mark{position:absolute;left:2px;right:2px;min-height:3px;border-radius:2px;background:var(--_td-minimap-modified)}.text-diff-minimap .diff-minimap-added{background:var(--_td-minimap-added)}.text-diff-minimap .diff-minimap-removed{background:var(--_td-minimap-removed)}.text-diff-minimap .diff-minimap-moved{background:var(--_td-minimap-moved)}.text-diff-minimap .diff-minimap-mark:hover{left:0;right:0}.text-diff-minimap .diff-minimap-mark:focus-visible{outline:2px solid CanvasText;outline-offset:1px}.text-diff [id]:target{outline:var(--text-diff-current-outline, 2px solid currentColor);outline-offset:1px}.text-diff-timeline{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px}.text-diff-timeline>.diff-rev-input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}.text-diff-timeline>.diff-rev-label{order:0;padding:2px 10px;border:1px solid var(--_td-rule-color);border-radius:999px;font-size:.875em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--_td-collapsed-color);cursor:pointer}.text-diff-timeline>.diff-rev-input:checked+.diff-rev-label{background:var(--_td-timeline-active-bg);border-color:var(--_td-timeline-active-bg);color:var(--_td-timeline-active-color)}.text-diff-timeline>.diff-rev-input:focus-visible+.diff-rev-label{outline:2px solid currentColor;outline-offset:2px}.text-diff-timeline>.diff-rev-panel{order:1;flex:1 0 100%;display:none;margin-top:8px;min-width:0}.text-diff-timeline>.diff-rev-input:checked+.diff-rev-label+.diff-rev-panel{display:block}.text-diff-timeline .diff-rev-caption{font-weight:600;margin-bottom:6px}.text-diff-timeline .diff-rev-panel>.text-diff-stats{margin-bottom:8px}.text-diff-timeline>.diff-empty{color:var(--_td-empty-color);font-style:italic}.text-diff-playback-wrap>.diff-replay-input{position:absolute;width:1px;height:1px;margin:0;opacity:0}.text-diff-playback-wrap>.diff-replay{display:inline-block;margin-bottom:8px;padding:2px 10px;border:1px solid var(--_td-rule-color);border-radius:999px;font-size:.875em;color:var(--_td-collapsed-color);cursor:pointer;-webkit-user-select:none;user-select:none}.text-diff-playback-wrap>.diff-replay-input:focus-visible+.diff-replay{outline:2px solid currentColor;outline-offset:2px}.text-diff-playback .diff-added,.text-diff-playback .diff-removed{animation-duration:var(--text-diff-playback-duration, .4s);animation-timing-function:ease-out;animation-fill-mode:both;animation-delay:calc(var(--td-i, 0) * var(--text-diff-playback-step, .35s))}.text-diff-playback .diff-added{animation-name:td-play-add-a}.text-diff-playback .diff-removed{animation-name:td-play-del-a;opacity:.55}.diff-replay-input:checked~.text-diff-playback .diff-added{animation-name:td-play-add-b}.diff-replay-input:checked~.text-diff-playback .diff-removed{animation-name:td-play-del-b}@keyframes td-play-add-a{0%{opacity:0;background-color:transparent}to{opacity:1}}@keyframes td-play-add-b{0%{opacity:0;background-color:transparent}to{opacity:1}}@keyframes td-play-del-a{0%{opacity:1;background-color:transparent;text-decoration-color:transparent}to{opacity:.55}}@keyframes td-play-del-b{0%{opacity:1;background-color:transparent;text-decoration-color:transparent}to{opacity:.55}}@media (prefers-reduced-motion: reduce){.text-diff-playback .diff-added,.text-diff-playback .diff-removed{animation:none}.text-diff-playback-wrap>.diff-replay-input,.text-diff-playback-wrap>.diff-replay{display:none}}@media (forced-colors: active){.text-diff-heatmap .diff-heat:not([data-heat="0"]),.text-diff-minimap .diff-minimap-mark{border:1px solid CanvasText}.text-diff-minimap .diff-minimap-mark{background:Highlight}}.text-diff .is-current{outline:var(--text-diff-current-outline, 2px solid currentColor);outline-offset:1px;border-radius:2px}:root{--ink: #16181d;--graphite: #5b6270;--paper: #f6f7f9;--sheet: #ffffff;--rule: #e2e5ea;--marker: #3b4bdb;--add-ink: #17693f;--add-wash: #dcf3e3;--del-ink: #b42318;--del-wash: #fde6e3;--add-line: #eff9f2;--del-line: #fef3f1;--text-diff-added-bg: var(--add-wash);--text-diff-added-color: var(--add-ink);--text-diff-removed-bg: var(--del-wash);--text-diff-removed-color: var(--del-ink);--text-diff-line-added-bg: var(--add-line);--text-diff-line-removed-bg: var(--del-line);--text-diff-gutter-bg: transparent;--text-diff-gutter-color: var(--graphite);--text-diff-sign-added-color: var(--add-ink);--text-diff-sign-removed-color: var(--del-ink);--text-diff-rule-color: var(--rule);--text-diff-collapsed-bg: var(--paper);--text-diff-collapsed-color: var(--graphite);--text-diff-empty-color: var(--graphite);--text-diff-font-mono: var(--f-mono);--f-display: "Bricolage Grotesque", system-ui, sans-serif;--f-body: "Hanken Grotesk", system-ui, sans-serif;--f-mono: "Martian Mono", ui-monospace, monospace}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--ink: #e8eaef;--graphite: #9aa1ae;--paper: #111318;--sheet: #181b21;--rule: #2a2e37;--marker: #8792ff;--add-ink: #7fdca4;--add-wash: #173524;--del-ink: #ff9d92;--del-wash: #3d1a17;--add-line: #12261a;--del-line: #2a1413}}:root[data-theme=dark]{--ink: #e8eaef;--graphite: #9aa1ae;--paper: #111318;--sheet: #181b21;--rule: #2a2e37;--marker: #8792ff;--add-ink: #7fdca4;--add-wash: #173524;--del-ink: #ff9d92;--del-wash: #3d1a17;--add-line: #12261a;--del-line: #2a1413}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}.demo{max-width:1080px;margin:0 auto;padding:0 24px 96px}.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;border-bottom:1px solid var(--rule)}.demo-mark{font:700 20px/1 var(--f-display);letter-spacing:-.02em}.demo-mark .del{color:var(--del-ink);text-decoration:line-through;text-decoration-thickness:2px}.demo-mark .add{color:var(--add-ink)}.demo-platforms{display:flex;gap:4px;font:500 13px/1 var(--f-body)}.demo-platforms a{padding:7px 11px;border-radius:999px;color:var(--graphite);text-decoration:none}.demo-platforms a:hover{color:var(--ink)}.demo-platforms a:focus-visible{outline:2px solid var(--marker);outline-offset:2px}.demo-platforms a[aria-current=page]{background:var(--ink);color:var(--paper)}.demo-hero{padding:72px 0 56px}.demo-hero-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px 56px;align-items:end;margin-bottom:40px}@media (max-width: 760px){.demo-hero-top{grid-template-columns:minmax(0,1fr)}}.demo-hero h1{margin:0;font:700 clamp(34px,5vw,56px)/1.02 var(--f-display);letter-spacing:-.035em;max-width:16ch}.demo-hero .lede{margin:0 0 14px;max-width:54ch;color:var(--graphite);font-size:18px}.demo-install{display:inline-block;padding:8px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--sheet);font:400 12px/1.2 var(--f-mono);color:var(--graphite);max-width:100%;white-space:nowrap;overflow-x:auto}.grain{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}.grain input{position:absolute;opacity:0;pointer-events:none}.grain label{padding:8px 14px;border:1px solid var(--rule);border-radius:999px;background:var(--sheet);font:500 14px/1 var(--f-body);cursor:pointer;transition:border-color .15s,color .15s}.grain label:hover{border-color:var(--graphite)}.grain input:checked+label{background:var(--ink);border-color:var(--ink);color:var(--paper)}.grain input:focus-visible+label{outline:2px solid var(--marker);outline-offset:2px}.grain .stage{flex-basis:100%;margin-top:12px}.stage{background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:clamp(20px,4vw,36px)}.stage-out{display:none}.stage .text-diff{font:400 clamp(17px,2.3vw,24px)/1.65 var(--f-mono);letter-spacing:-.01em}.stage-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:22px;padding-top:16px;border-top:1px solid var(--rule);font:400 12.5px/1.4 var(--f-mono);color:var(--graphite)}.stage-meta code{margin-left:auto;font:inherit}.text-diff-stats{font:400 12.5px/1.6 var(--f-mono)}#g-chars:checked~.stage [data-grain=chars],#g-words:checked~.stage [data-grain=words],#g-wordsWithSpace:checked~.stage [data-grain=wordsWithSpace],#g-sentences:checked~.stage [data-grain=sentences],#g-lines:checked~.stage [data-grain=lines]{display:block}.demo-section{padding-top:64px}.demo-section>h2{margin:0 0 6px;font:700 28px/1.1 var(--f-display);letter-spacing:-.025em}.demo-section>p{margin:0 0 28px;color:var(--graphite);max-width:60ch}.specimens{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,480px),1fr));gap:16px}.specimen{background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:22px 24px 24px;display:flex;flex-direction:column}.specimen header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}.specimen h3{margin:0;font:700 19px/1.2 var(--f-display);letter-spacing:-.015em}.specimen header code{font:400 11.5px/1 var(--f-mono);color:var(--graphite)}.specimen .use{margin:4px 0 16px;color:var(--graphite);font-size:14.5px}.inputs{margin:0 0 16px;display:grid;grid-template-columns:18px 1fr;row-gap:6px;font:400 12.5px/1.6 var(--f-mono);color:var(--graphite)}.inputs dt{font-weight:500}.inputs dt.old{color:var(--del-ink)}.inputs dt.new{color:var(--add-ink)}.inputs dd{margin:0;white-space:pre-wrap;word-break:break-word}.result{margin-top:auto;padding-top:16px;border-top:1px dashed var(--rule)}.result .text-diff{font:400 14.5px/1.7 var(--f-mono)}.result .text-diff-html{font:400 16px/1.6 var(--f-body)}.result .text-diff-html p{margin:0 0 8px}.result .text-diff-html ul{margin:0;padding-left:20px}.doc{background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:16px 20px 20px}.doc+.doc{margin-top:16px}.doc-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:14px}.doc-head h3{margin:0;font:700 17px/1.2 var(--f-display);letter-spacing:-.01em}.doc-head .doc-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}.doc-head code{font:400 11.5px/1 var(--f-mono);color:var(--graphite)}.doc-nav{display:flex;gap:6px}.doc-nav button{padding:6px 11px;border:1px solid var(--rule);border-radius:999px;background:var(--sheet);color:var(--graphite);font:500 12.5px/1 var(--f-body);cursor:pointer;transition:border-color .15s,color .15s}.doc-nav button:hover{border-color:var(--graphite);color:var(--ink)}.doc-nav button:focus-visible{outline:2px solid var(--marker);outline-offset:2px}.doc-body{font-size:13px;line-height:1.75}@media (max-width: 560px){.doc{padding:14px 12px 12px}.doc-body{font-size:12px}}.usage{margin:0;padding:22px 24px;border-radius:14px;background:var(--ink);color:var(--paper);font:400 13px/1.8 var(--f-mono);overflow-x:auto}.usage .c{color:#8a93a3}.demo-foot{margin-top:72px;padding-top:20px;border-top:1px solid var(--rule);color:var(--graphite);font-size:14px}.demo-foot a{color:inherit}@media (max-width: 560px){.demo{padding:0 16px 64px}.demo-hero{padding:48px 0 40px}.specimen{padding:18px 16px 20px}.usage{padding:18px 16px;font-size:12px}}@media (prefers-reduced-motion: reduce){*{transition:none!important}}
