.dt-diff{background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--rim), 0 1px 2px var(--shade-near), 0 4px 12px -6px var(--shade-near), 0 34px 70px -34px var(--shade);border-radius:10px;overflow:hidden;container:diff/inline-size}.dt-diff-tab{border-bottom:1px solid var(--line);height:42px;color:var(--ink-3);align-items:center;gap:8px;padding:0 18px;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.78125rem;display:flex}.dt-diff-tab .f{color:var(--ink-2)}.dt-diff-body{font-feature-settings:normal;color:var(--ink);padding:20px 0 22px;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.9375rem;line-height:1.8;overflow-x:auto}.dt-line{isolation:isolate;white-space:pre;grid-template-columns:2.5rem 1fr;padding-right:20px;display:grid;position:relative}.dt-line:before{content:"";z-index:-1;transform-origin:0;position:absolute;inset:0}.dt-line.del:before{background:var(--del-wash)}.dt-line.add:before{background:var(--green-wash)}.dt-line .m{text-align:center;-webkit-user-select:none;user-select:none}.dt-line.del .m{color:var(--del)}.dt-line.add .m{color:var(--green)}.dt-line .k{color:var(--key)}.dt-line .p{color:var(--ink-3)}.dt-line .v{color:var(--ink)}.dt-line mark{color:var(--ink);border-radius:3px;margin:0 -3px;padding:2px 3px;position:relative}.dt-line.del mark{background:var(--del-mark)}.dt-line.del mark:after{content:"";background:var(--del);transform-origin:0;height:1.5px;position:absolute;top:52%;left:3px;right:3px}.dt-line.add mark{background:var(--green-mark)}.dt-line .caret{vertical-align:-.18em;background:var(--green);opacity:0;width:1.5px;height:1.1em;margin-left:1px;display:inline-block}@container diff (width<=25rem){.dt-diff-body{font-size:.8125rem}.dt-line{grid-template-columns:2rem 1fr;padding-right:16px}}@media (width<=479px){.dt-diff-body{font-size:.8125rem}.dt-line{grid-template-columns:1.75rem 1fr;padding-right:12px}}@media (prefers-reduced-motion:no-preference){.dt-line.del:before{animation:.32s ease-out .45s backwards dt-fade}.dt-line.del mark{animation:.26s ease-out .7s backwards dt-mark}.dt-line.del mark:after{animation:.34s cubic-bezier(.6,0,.3,1) .78s backwards dt-strike}.dt-line.add>*{animation:.2s ease-out 1.15s backwards dt-fade}.dt-line.add:before{animation:.52s cubic-bezier(.3,.7,.2,1) 1.2s backwards dt-sweep}.dt-line.add mark{animation:.26s ease-out 1.64s backwards dt-mark}.dt-line.add .t{animation:dt-type 1ms linear calc(1.3s + var(--i) * 95ms) backwards}.dt-line.add .caret{animation:.9s linear 1.25s dt-caret}}@keyframes dt-fade{0%{opacity:0}}@keyframes dt-mark{0%{background:0 0}}@keyframes dt-strike{0%{transform:scaleX(0)}}@keyframes dt-sweep{0%{transform:scaleX(0)}}@keyframes dt-type{0%{visibility:hidden}}@keyframes dt-caret{0%,45%,70%{opacity:1}55%,60%,to{opacity:0}}.dt-diff-banner{border-bottom:1px solid var(--line);background:var(--green-wash);color:var(--green-deep);align-items:flex-start;gap:8px;padding:10px 18px;font-size:.875rem;line-height:1.35;display:flex}.dt-diff-banner b{font-weight:600}.dt-diff-banner svg{width:.875rem;height:1.35em;flex:none;height:1lh}.dt-diff-tag{height:18px;color:var(--ink-2);background:color-mix(in oklab, var(--ink) 7%, transparent);border-radius:999px;flex:none;align-items:center;padding:0 7px;font-size:.6875rem;font-weight:560;display:inline-flex}@container diff (width<=18.75rem){.dt-diff-body{font-size:.75rem}.dt-line{grid-template-columns:1.375rem 1fr;padding-right:8px}}
