.b5-comparison{--bd-surface:#fffdf9;--bd-ink:#312b29;--bd-muted:#8a817b;--bd-line:#e9e3dc;--bd-code:#fcfaf7;--bd-command:#b85c40;--bd-math:#8b6c36;--bd-selection:#eaa58070;--bd-good:#a34c32;--bd-weak:#8c8580;--bd-shadow:0 22px 50px #40302115;width:100%;font-family:Geist,'Plex Arabic',sans-serif;color:var(--bd-ink);container-type:inline-size}
.b5-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.07fr);gap:17px;align-items:start;perspective:1100px;padding:12px 14px 30px;isolation:isolate}
.b5-editor{min-width:0;border-radius:14px;border:1px solid var(--bd-line);background:var(--bd-surface);overflow:hidden;transform-origin:center top;box-shadow:var(--bd-shadow)}
.b5-editor-other{transform:translateY(17px) translateZ(-65px) scale(.96);opacity:.84;filter:saturate(.65);box-shadow:0 7px 16px #30261d09}
.b5-editor-good{transform:translateZ(12px);position:relative;z-index:2;border-color:color-mix(in srgb,var(--bd-good) 54%,var(--bd-line));box-shadow:var(--bd-shadow),0 0 0 3px color-mix(in srgb,var(--bd-good) 7%,transparent),0 0 38px color-mix(in srgb,var(--bd-good) 9%,transparent)}
.b5-editor-top{display:flex;flex-direction:column;justify-content:center;min-height:69px;padding:14px 20px;gap:4px;direction:ltr}
.b5-editor-top strong{font-size:14px;font-weight:570;line-height:1.4}.b5-editor-top>span{font-size:10px;color:var(--bd-muted);line-height:1.3}
.b5-editor-good .b5-editor-top strong{color:var(--bd-good);font-size:16px}
.b5-file-tab{display:flex;align-items:center;justify-content:space-between;gap:8px;border-block:1px solid var(--bd-line);height:36px;padding:0 20px;background:var(--bd-code);color:var(--bd-muted);font:10px AtwMono,monospace;direction:ltr}.b5-file-tab>bdi{color:var(--bd-ink)}.b5-file-tab>span{font-size:9px}
.b5-code{padding:25px 0 29px;background:var(--bd-code);overflow:hidden}
.b5-code-row{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;min-height:37px;direction:ltr;font:12px/37px AtwMono,AtwNotoArabic,monospace;white-space:nowrap}
.b5-line-number{text-align:center;font-size:10px;font-variant-numeric:tabular-nums;color:var(--bd-muted);opacity:.65;user-select:none}
.b5-code-text{min-width:0;padding-right:17px}.b5-command{color:var(--bd-command)}.b5-comment{color:var(--bd-muted)}
.b5-target-row{margin-block:6px;background:color-mix(in srgb,var(--bd-good) 3%,transparent)}
.b5-drag-line{position:relative;width:fit-content;max-width:100%;font:22px/44px AtwNotoArabic,AtwMono,monospace;text-align:start;white-space:nowrap}
.b5-editor-other .b5-drag-line{direction:ltr;unicode-bidi:normal}
.b5-editor-good .b5-drag-line{direction:rtl;unicode-bidi:isolate;margin-left:auto}
.b5-line-ink{position:relative;z-index:2;unicode-bidi:normal}
.b5-math{font-family:AtwMono,monospace;font-size:.85em;color:var(--bd-math);unicode-bidi:isolate}
.b5-selection-layer{position:absolute;inset:0;pointer-events:none;z-index:1;direction:ltr}
.b5-selection-run{position:absolute;left:0;top:0;width:1px;height:1px;background:var(--bd-selection);transform-origin:0 0;opacity:0;pointer-events:none;will-change:transform}
.b5-editor-other .b5-selection-run{background:color-mix(in srgb,var(--bd-weak) 32%,transparent)}
.b5-select-pointer.motion-pointer{left:0;top:0;width:15px;height:19px;color:var(--bd-ink);transform:translate3d(0,0,0);transition:none;opacity:0;z-index:4;filter:drop-shadow(0 1px 1px #0003);will-change:transform}
.b5-select-pointer i{display:none}.b5-comparison[data-frame="1"] .b5-select-pointer,.b5-comparison[data-frame="2"] .b5-select-pointer,.b5-comparison[data-frame="3"] .b5-select-pointer,.b5-comparison[data-frame="4"] .b5-select-pointer{opacity:1}
.b5-comparison>figcaption{text-align:end;font-size:10px;line-height:1.5;color:var(--muted);margin-top:1px;padding-inline:4px}
.b5-skin-b{--bd-surface:#252329;--bd-ink:#f4eee9;--bd-muted:#b2a6af;--bd-line:#423a42;--bd-code:#211f25;--bd-command:#f7a189;--bd-math:#dac28c;--bd-selection:#df785b75;--bd-good:#f4a388;--bd-weak:#b1a3af;--bd-shadow:0 24px 52px #0004}
.b5-skin-b .b5-editor{border-radius:8px}.b5-skin-b .b5-editor-good{border-top:3px solid var(--bd-good)}.b5-skin-b .b5-editor-other{transform:translateY(22px) translateZ(-85px) scale(.95)}
.b5-skin-c{--bd-surface:#12313f;--bd-ink:#f3efe6;--bd-muted:#b2c6c6;--bd-line:#34515a;--bd-code:#0b2432;--bd-command:#94edcc;--bd-math:#e3c89a;--bd-selection:#53bb9777;--bd-good:#94edcc;--bd-weak:#8ba6ac;--bd-shadow:0 23px 48px #071d2b22}
.b5-skin-c .b5-pair{gap:22px}.b5-skin-c .b5-editor{border-radius:10px}.b5-skin-c .b5-editor-good{box-shadow:var(--bd-shadow),0 0 0 3px #94edcc0b,0 0 45px #94edcc19}
.b5-skin-d{--bd-surface:#fff9f3;--bd-ink:#2f2935;--bd-muted:#88777c;--bd-line:#ecd9ca;--bd-code:#fffcf8;--bd-command:#c54e36;--bd-math:#8d6a3e;--bd-selection:#ed98787d;--bd-good:#c94b35;--bd-weak:#a08c83;--bd-shadow:0 17px 33px #a85f2917}
.b5-skin-d .b5-editor{border-radius:4px}.b5-skin-d .b5-editor-good{border-top:3px solid var(--bd-good);box-shadow:7px 8px 0 color-mix(in srgb,var(--bd-good) 12%,transparent),var(--bd-shadow)}
html[data-theme=dark] .b5-skin-a{--bd-surface:#302a27;--bd-code:#292422;--bd-ink:#f4ece4;--bd-muted:#b4a69b;--bd-line:#51433a;--bd-command:#edaa8a;--bd-math:#d5ba85;--bd-selection:#bc795b77;--bd-good:#edb093;--bd-weak:#a29285}

html[data-theme=dark] .b5-skin-d{--bd-surface:#302936;--bd-code:#28232e;--bd-ink:#f8eee9;--bd-muted:#baa6b1;--bd-line:#51414e;--bd-command:#f1a38b;--bd-math:#dbc291;--bd-selection:#bc6f577a;--bd-good:#f1a38b;--bd-weak:#af9b9e}
@container(max-width:720px){.b5-pair,.b5-skin-c .b5-pair{gap:9px;padding-inline:8px}.b5-code-row{grid-template-columns:27px minmax(0,1fr);font-size:10px;min-height:32px;line-height:32px}.b5-code-text{padding-right:11px}.b5-drag-line{font-size:14px;line-height:35px}.b5-editor-top{padding:12px 13px;min-height:65px}.b5-file-tab{padding-inline:13px}.b5-code{padding-block:20px}.b5-editor-other{transform:translateY(14px) translateZ(-40px) scale(.97)}.b5-skin-b .b5-editor-other{transform:translateY(18px) translateZ(-50px) scale(.96)}}
@container(max-width:430px){.b5-pair,.b5-skin-c .b5-pair{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:6px;padding:8px 8px 22px}.b5-editor{border-radius:8px}.b5-editor-top{padding:10px 9px;min-height:68px}.b5-editor-top strong{font-size:11px}.b5-editor-good .b5-editor-top strong{font-size:12px}.b5-editor-top>span{font-size:8px;max-width:105px}.b5-file-tab{padding:0 9px;font-size:8px;height:29px}.b5-file-tab>span{display:none}.b5-code{padding-block:17px}.b5-code-row{grid-template-columns:19px minmax(0,1fr);font-size:9px;min-height:28px;line-height:28px}.b5-line-number{font-size:8px}.b5-code-text{padding-right:6px}.b5-drag-line{font-size:13px;line-height:34px}.b5-select-pointer.motion-pointer{width:11px;height:14px}.b5-editor-other{opacity:.9;transform:translateY(12px) translateZ(-22px) scale(.98)}.b5-skin-b .b5-editor-other{transform:translateY(16px) translateZ(-30px) scale(.97)}.b5-skin-c .b5-editor{border-radius:4px}.b5-skin-d .b5-editor-good{box-shadow:4px 5px 0 color-mix(in srgb,var(--bd-good) 12%,transparent)}.b5-comparison>figcaption{font-size:9px}}
@media(prefers-reduced-motion:reduce){.b5-select-pointer{display:none!important}.b5-selection-run{will-change:auto}}

/* Keep the RTL drag anchored to the line even while font metrics settle. */
.b5-editor-good .b5-selection-run{left:auto;right:0;transform-origin:100% 0}
.b5-editor-good .b5-select-pointer.motion-pointer{left:auto;right:0}