:root { --ink:#19213a; --muted:#68718a; --paper:#fff; --canvas:#f5f7fb; --line:#dde3ef; --indigo:#5053df; --indigo-dark:#3538b7; --mint:#dff8ed; --mint-ink:#167757; --rose:#ffe8ed; --rose-ink:#bd3c5a; --shadow:0 18px 55px rgba(35,48,87,.1); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); }
* { box-sizing:border-box; } html { min-height:100%; background:var(--canvas); } body { margin:0; min-height:100vh; background:radial-gradient(circle at 84% 0%,#e9e7ff 0,transparent 28rem),var(--canvas); } button,textarea { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; }
.site-header { height:76px; padding:0 max(24px,calc((100vw - 1240px)/2)); display:flex; align-items:center; gap:42px; background:rgba(255,255,255,.88); border-bottom:1px solid rgba(212,219,234,.75); backdrop-filter:blur(14px); position:sticky; top:0; z-index:10; }
.brand { font-size:21px; font-weight:820; letter-spacing:-1px; display:flex; align-items:center; gap:9px; white-space:nowrap; }.brand>span:last-child>span { color:var(--indigo); }.brand-mark { position:relative; width:30px; height:30px; border-radius:10px 10px 10px 3px; display:grid; place-items:center; overflow:visible; background:linear-gradient(135deg,#6d6df2,#3636b5); color:white; font:900 17px Georgia,serif; box-shadow:0 5px 12px #5d5de85e; transform:rotate(-7deg); }.brand-mark i { color:#fff; font-size:15px; font-style:normal; transform:rotate(7deg); }.brand-mark b { position:absolute; right:-5px; bottom:-5px; display:grid; width:14px; height:14px; place-items:center; border:2px solid #fff; border-radius:50%; background:#f4c857; color:#46366b; font-size:7px; transform:rotate(7deg); }
nav { display:flex; align-self:stretch; gap:24px; } nav a { color:var(--muted); display:grid; place-items:center; font-size:14px; font-weight:700; position:relative; } nav a.active { color:var(--indigo); } nav a.active::after { content:""; height:3px; width:100%; background:var(--indigo); position:absolute; bottom:0; border-radius:3px 3px 0 0; }.games-link { margin-left:auto; color:var(--indigo); font-weight:750; font-size:14px; }.games-link span { font-size:17px; margin-left:3px; }
.tool-hub,.tool-shell { width:min(1120px,calc(100% - 40px)); margin:0 auto; }.hub-hero { padding:100px 0 48px; max-width:670px; }.eyebrow { color:var(--indigo); letter-spacing:.13em; font-size:11px; font-weight:850; margin:0 0 12px; }.hub-hero h1,.tool-intro h1 { font-size:clamp(38px,6vw,64px); line-height:1; letter-spacing:-.055em; margin:0 0 16px; }.hub-hero p:not(.eyebrow),.tool-intro>p { font-size:18px; color:var(--muted); line-height:1.55; margin:0; }.tool-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding-bottom:100px; }.tool-card { min-height:138px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px; display:flex; align-items:center; gap:18px; box-shadow:0 8px 22px rgba(45,58,91,.04); transition:transform .18s,box-shadow .18s,border-color .18s; }.tool-card:not(.muted-card):hover { transform:translateY(-4px); border-color:#bbbdf8; box-shadow:var(--shadow); }.tool-icon { height:50px; width:50px; border-radius:16px; display:grid; place-items:center; font-size:25px; background:#e8e8ff; color:var(--indigo); }.tool-card strong { display:block; font-size:19px; letter-spacing:-.025em; }.tool-card small { display:block; color:var(--muted); line-height:1.45; margin-top:5px; }.card-arrow { margin-left:auto; font-size:23px; color:var(--indigo); }.muted-card { opacity:.58; }.muted-card .tool-icon { background:#eff1f6; color:#77819a; }
.tool-shell { padding:45px 0 72px; }.crumb { color:var(--muted); font-weight:700; font-size:14px; display:inline-block; margin-bottom:27px; }.crumb:hover { color:var(--indigo); }.tool-intro { max-width:700px; margin-bottom:30px; }.tool-intro h1 { font-size:clamp(40px,5vw,56px); margin-bottom:13px; }.workspace { background:var(--paper); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); overflow:visible; }.workspace-bar { min-height:64px; border-bottom:1px solid var(--line); padding:0 22px; display:flex; justify-content:space-between; align-items:center; gap:20px; }.mode-tabs { height:64px; display:flex; align-items:stretch; gap:20px; }.mode-tab { background:none; border:0; padding:0; font-weight:780; color:var(--ink); font-size:14px; position:relative; }.mode-tab.is-selected:after { content:""; position:absolute; height:3px; bottom:-1px; left:0; right:0; background:var(--indigo); border-radius:3px 3px 0 0; }.mode-tab:disabled { color:#a1a9ba; cursor:not-allowed; }.mode-tab span { font-size:10px; background:#eeeefc; color:#7274c8; padding:2px 5px; border-radius:5px; }.options { display:flex; align-items:center; gap:16px; color:var(--muted); font-size:12px; font-weight:650; }.options label { display:flex; align-items:center; gap:6px; white-space:nowrap; }.options input { accent-color:var(--indigo); }
.editors { padding:22px; display:grid; grid-template-columns:1fr 46px 1fr; align-items:center; }.editor-card { height:332px; border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; background:#fbfcfe; transition:border-color .2s,box-shadow .2s; }.editor-card:focus-within { border-color:#8d8ee8; box-shadow:0 0 0 3px #5f60df18; }.editor-head,.editor-foot { min-height:43px; display:flex; align-items:center; justify-content:space-between; padding:0 13px; background:#fff; color:#4f5a74; font-size:13px; font-weight:760; }.editor-head { border-bottom:1px solid var(--line); }.editor-head span { display:flex; gap:7px; align-items:center; }.editor-head i { height:8px; width:8px; border-radius:50%; background:#ff93a7; }.editor-after .editor-head i { background:#53dba6; }.editor-foot { border-top:1px solid var(--line); color:#99a2b4; font-size:11px; font-weight:600; }.text-button { border:0; background:transparent; color:var(--indigo); padding:4px; font-size:12px; font-weight:750; }.text-button:hover { color:var(--indigo-dark); text-decoration:underline; }.editor-card textarea { width:100%; border:0; background:#fbfcfe; resize:none; padding:16px; flex:1; outline:0; color:#29334e; font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }.editor-card textarea::placeholder { color:#a6afbf; }.swap-button { width:36px; height:36px; border-radius:50%; border:1px solid #cfd4ee; color:var(--indigo); background:white; display:grid; place-items:center; margin:auto; font-size:18px; transition:.18s; box-shadow:0 3px 8px #2d34751a; }.swap-button:hover { background:var(--indigo); color:white; transform:rotate(180deg); }.compare-row { min-height:88px; padding:16px 22px; display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); }.primary-button,.secondary-button { border-radius:10px; border:0; font-weight:780; font-size:14px; transition:.16s; }.primary-button { background:var(--indigo); color:white; padding:13px 18px; box-shadow:0 7px 15px #4b4cdc3b; }.primary-button:hover { background:var(--indigo-dark); transform:translateY(-1px); }.primary-button span { font-size:17px; margin-right:6px; }.secondary-button { border:1px solid var(--line); background:white; color:#536078; padding:10px 13px; }.secondary-button:hover { border-color:#aeb3db; color:var(--indigo); }.input-message { color:var(--rose-ink); font-size:13px; font-weight:650; margin-left:4px; }
.result-section { margin-top:42px; }.result-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }.result-head h2,.about-tool h2 { margin:0; font-size:25px; letter-spacing:-.035em; }.result-actions { display:flex; gap:8px; }.summary { display:flex; gap:10px; margin:19px 0 12px; flex-wrap:wrap; }.summary span { padding:7px 11px; border-radius:7px; font-size:12px; font-weight:750; }.summary .same { color:#5c6576; background:#e9edf4; }.summary .removed { color:var(--rose-ink); background:var(--rose); }.summary .added { color:var(--mint-ink); background:var(--mint); }.legend { display:flex; gap:17px; color:var(--muted); font-size:12px; margin:0 0 12px; }.legend b { height:9px; width:9px; display:inline-block; border-radius:50%; margin-right:4px; }.removed-dot { background:#ec8da2; }.added-dot { background:#59ca99; }.same-dot { background:#aab4c3; }.diff-output { border:1px solid var(--line); border-radius:18px; overflow:hidden; background:white; }.diff-row { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid #edf0f5; }.diff-row:last-child { border-bottom:0; }.diff-cell { display:grid; grid-template-columns:42px minmax(0,1fr); min-height:37px; font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }.diff-cell+ .diff-cell { border-left:1px solid var(--line); }.line-number { padding:9px 8px; text-align:right; color:#a3aabb; user-select:none; background:#f9fafc; }.line-text { padding:9px 12px; white-space:pre-wrap; word-break:break-word; }.line-text.empty { color:#c8ced8; }.removed-cell .line-text { background:var(--rose); color:#76283c; }.added-cell .line-text { background:var(--mint); color:#155b43; }.same-cell .line-text { color:#6e788a; }.about-tool { margin-top:36px; background:#edf0ff; border-radius:16px; padding:22px; display:flex; align-items:center; gap:16px; }.about-tool p { margin:5px 0 0; color:#606a84; font-size:14px; }.about-icon { width:39px; height:39px; border-radius:12px; display:grid; place-items:center; color:var(--indigo); background:white; font-size:20px; }
footer { text-align:center; color:#7b8498; font-size:12px; padding:0 20px 35px; }footer a { color:var(--indigo); font-weight:700; }
@media (max-width:720px) { .site-header { height:65px; padding:0 18px; gap:17px; }.brand { font-size:18px; }.brand-mark { width:27px; height:27px; }.site-header nav { display:none; }.games-link { font-size:12px; }.tool-hub,.tool-shell { width:min(100% - 28px,1120px); }.hub-hero { padding:62px 0 34px; }.tool-list { grid-template-columns:1fr; }.tool-shell { padding-top:27px; }.tool-intro { margin-bottom:24px; }.tool-intro>p,.hub-hero p:not(.eyebrow) { font-size:16px; }.workspace { border-radius:17px; }.workspace-bar { padding:0 14px; align-items:flex-start; flex-direction:column; min-height:102px; gap:0; }.mode-tabs { height:50px; }.options { width:100%; height:42px; gap:14px; }.editors { padding:14px; display:flex; flex-direction:column; gap:11px; }.editor-card { width:100%; height:235px; }.swap-button { flex:none; transform:rotate(90deg); }.swap-button:hover { transform:rotate(270deg); }.compare-row { padding:14px; min-height:78px; flex-wrap:wrap; }.input-message { width:100%; margin:0; }.result-head { align-items:flex-start; flex-direction:column; }.result-actions { width:100%; }.result-actions button { flex:1; }.diff-row { grid-template-columns:1fr; }.diff-cell+ .diff-cell { border-left:0; border-top:1px solid var(--line); }.diff-cell { grid-template-columns:35px minmax(0,1fr); }.line-number { padding-left:3px; }.legend { gap:10px; font-size:11px; }.about-tool { align-items:flex-start; }.tool-card { padding:21px; }.muted-card { display:none; } }

/* Diff Checker: deliberately calm and work-area first. */
.diff-page { background:#f4f6f7; }
.diff-page .site-header { height:62px; background:#fff; box-shadow:none; padding-inline:24px; }
.diff-page .brand { font-size:19px; }.diff-page .brand-mark { width:28px; height:28px; border-radius:7px 7px 7px 2px; }
.simple-tool-shell { width:calc(100% - 48px); max-width:none; padding:22px 0 26px; }
.tool-titlebar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 2px 17px; }.tool-titlebar h1 { margin:0; font-size:21px; letter-spacing:-.025em; }.tool-titlebar p { margin:3px 0 0; color:var(--muted); font-size:13px; }.tool-titlebar .options { height:auto; }
.simple-workspace { min-height:calc(100vh - 178px); border-radius:8px; box-shadow:none; background:#fff; overflow:hidden; }.editor-stage { min-height:inherit; display:flex; flex-direction:column; }.simple-workspace .editors { flex:1; padding:18px; grid-template-columns:1fr 34px 1fr; }.simple-workspace .editor-card { height:auto; min-height:calc(100vh - 296px); border-radius:7px; }.simple-workspace .editor-head { min-height:42px; padding-inline:13px; font-size:13px; }.simple-workspace .editor-foot { min-height:35px; }.simple-workspace .editor-card textarea { font-size:13px; padding:15px; line-height:1.7; }.simple-workspace .swap-button { width:27px; height:27px; font-size:14px; box-shadow:none; }.simple-workspace .compare-row { min-height:63px; padding:12px 18px; justify-content:flex-end; border-top:1px solid var(--line); }.simple-workspace .compare-row .secondary-button { margin-right:auto; }.simple-workspace .primary-button { padding:11px 19px; border-radius:6px; box-shadow:none; }.simple-workspace .secondary-button { padding:9px 12px; border-radius:6px; }.simple-workspace .input-message { margin-right:auto; order:1; }.simple-workspace .compare-row .secondary-button { order:0; }.simple-workspace .compare-row .primary-button { order:2; }
.comparison-stage { height:calc(100vh - 178px); margin:0; padding:0; display:flex; flex-direction:column; }.comparison-stage[hidden] { display:none; }.comparison-stage .result-head { flex:0 0 68px; padding:12px 18px; align-items:center; border-bottom:1px solid var(--line); }.comparison-stage .result-head h2 { font-size:17px; }.comparison-stage .summary { margin:4px 0 0; gap:6px; }.comparison-stage .summary span { padding:3px 7px; font-size:10px; }.comparison-stage .legend { flex:0 0 31px; margin:0; padding:9px 18px; border-bottom:1px solid var(--line); }.comparison-stage .diff-output { flex:1; min-height:0; overflow:auto; border:0; border-radius:0; }.comparison-stage .diff-row { min-width:680px; }.comparison-stage .diff-cell { min-height:32px; font-size:12px; }.comparison-stage .line-number,.comparison-stage .line-text { padding-top:7px; padding-bottom:7px; }.comparison-stage .result-actions { display:flex; gap:8px; }
.diff-page footer { padding:14px 20px 20px; }.diff-page .privacy-note { color:#57606a; font-weight:650; }
@media (max-width:720px) { .diff-page .site-header { padding-inline:15px; }.diff-page .games-link { display:none; }.simple-tool-shell { width:calc(100% - 20px); padding-top:14px; }.tool-titlebar { align-items:flex-start; flex-direction:column; gap:11px; padding-bottom:13px; }.tool-titlebar .options { width:auto; }.simple-workspace { min-height:calc(100vh - 221px); }.simple-workspace .editors { padding:10px; gap:9px; }.simple-workspace .editor-card { min-height:calc((100vh - 355px)/2); height:calc((100vh - 355px)/2); }.simple-workspace .editor-card textarea { padding:11px; }.simple-workspace .swap-button { transform:rotate(90deg); }.simple-workspace .compare-row { min-height:58px; padding:9px 10px; }.simple-workspace .input-message { font-size:11px; }.comparison-stage { height:calc(100vh - 221px); }.comparison-stage .result-head { align-items:flex-start; flex-direction:column; flex-basis:103px; padding:10px; gap:7px; }.comparison-stage .result-actions { width:100%; }.comparison-stage .result-actions button { flex:1; }.comparison-stage .legend { padding-inline:10px; }.comparison-stage .diff-row { min-width:0; grid-template-columns:1fr; }.comparison-stage .diff-cell + .diff-cell { border-left:0; border-top:1px solid var(--line); }.comparison-stage .diff-cell { grid-template-columns:32px minmax(0,1fr); }.diff-page footer { display:none; } }

/* Developer diff theme: familiar code-review contrast without GitHub branding. */
.diff-page { --ink:#24292f; --muted:#57606a; --paper:#fff; --canvas:#f6f8fa; --line:#d0d7de; --indigo:#0969da; --indigo-dark:#0550ae; --mint:#dafbe1; --mint-ink:#116329; --rose:#ffebe9; --rose-ink:#cf222e; background:#fff; color:var(--ink); }
.diff-page .site-header { background:#f6f8fa; border-bottom-color:#d0d7de; box-shadow:none; }.diff-page .brand { letter-spacing:-.45px; }.diff-page .brand-mark { position:relative; display:grid; place-items:center; background:linear-gradient(140deg,#947dff,#5741cc 72%); border:1px solid #ffffff5e; border-radius:10px 13px 9px 14px; box-shadow:0 6px 13px #4c35ad59; transform:rotate(-7deg); overflow:visible; }.diff-page .brand-mark i { color:#fff; font-size:15px; font-style:normal; transform:rotate(7deg); }.diff-page .brand-mark b { position:absolute; right:-5px; bottom:-5px; display:grid; width:14px; height:14px; place-items:center; border:2px solid #f6f8fa; border-radius:50%; background:#f4c857; color:#46366b; font-size:7px; transform:rotate(7deg); }.diff-page .brand>span:last-child>span { color:#57606a; font-weight:650; }.diff-page nav a.active { color:#24292f; }.diff-page nav a.active::after { height:2px; background:#fd8c73; }.diff-page .games-link { color:#0969da; }
.diff-page .tool-titlebar { border-bottom:1px solid #d0d7de; padding:0 0 16px; }.diff-page .tool-titlebar h1 { font-size:20px; font-weight:600; letter-spacing:0; }.diff-page .tool-titlebar p { font-size:13px; color:#57606a; }.diff-page .options { color:#57606a; font-size:12px; font-weight:500; }.diff-page .options input { accent-color:#0969da; }
.diff-page .simple-workspace { border:0; border-radius:0; }.diff-page .simple-workspace .editors { padding:16px 0; gap:16px; grid-template-columns:1fr 24px 1fr; }.diff-page .simple-workspace .editor-card { border-color:#d0d7de; border-radius:6px; background:#fff; box-shadow:none; }.diff-page .simple-workspace .editor-card:focus-within { border-color:#0969da; box-shadow:0 0 0 3px #0969da26; }.diff-page .simple-workspace .editor-head,.diff-page .simple-workspace .editor-foot { background:#f6f8fa; color:#24292f; border-color:#d0d7de; }.diff-page .simple-workspace .editor-head { font-weight:600; }.diff-page .editor-head i { background:#cf222e; }.diff-page .editor-after .editor-head i { background:#1a7f37; }.diff-page .editor-card textarea { background:#fff; color:#24292f; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }.diff-page .editor-card textarea::placeholder { color:#8c959f; }.diff-page .text-button { color:#0969da; }.diff-page .swap-button { width:24px; height:24px; border-color:#d0d7de; border-radius:5px; color:#57606a; box-shadow:none; }.diff-page .swap-button:hover { background:#f6f8fa; color:#0969da; transform:none; }.diff-page .simple-workspace .compare-row { padding:12px 0 0; border-top:1px solid #d0d7de; }.diff-page .primary-button { background:#1f883d; border:1px solid #1f883d; border-radius:6px; box-shadow:none; }.diff-page .primary-button:hover { background:#1a7f37; transform:none; }.diff-page .secondary-button { border-color:#d0d7de; border-radius:6px; color:#24292f; background:#f6f8fa; }.diff-page .secondary-button:hover { color:#24292f; border-color:#8c959f; background:#f3f4f6; }
.diff-page .comparison-stage { border:1px solid #d0d7de; border-radius:6px; overflow:hidden; }.diff-page .comparison-stage .result-head { background:#f6f8fa; border-bottom-color:#d0d7de; }.diff-page .comparison-stage .result-head h2 { font-size:14px; font-weight:600; letter-spacing:0; }.diff-page .comparison-stage .summary span { border-radius:20px; font-weight:500; }.diff-page .comparison-stage .summary .same { background:#ddf4ff; color:#0969da; }.diff-page .comparison-stage .summary .removed { background:#ffebe9; color:#cf222e; }.diff-page .comparison-stage .summary .added { background:#dafbe1; color:#1a7f37; }.diff-page .comparison-stage .legend { background:#f6f8fa; color:#57606a; border-bottom-color:#d0d7de; }.diff-page .removed-dot { background:#cf222e; }.diff-page .added-dot { background:#1a7f37; }.diff-page .same-dot { background:#8c959f; }.diff-page .diff-output { background:#fff; }.diff-page .diff-row { border-bottom-color:#d8dee4; }.diff-page .diff-cell + .diff-cell { border-left-color:#d8dee4; }.diff-page .line-number { background:#f6f8fa; color:#8c959f; }.diff-page .same-cell .line-text { color:#24292f; }.diff-page .removed-cell .line-text { background:#ffebe9; color:#82071e; }.diff-page .added-cell .line-text { background:#dafbe1; color:#0a5d1c; }
@media (max-width:720px) { .diff-page .simple-workspace .editors { padding-inline:0; }.diff-page .simple-workspace .compare-row { padding-bottom:8px; }.diff-page .comparison-stage { border-radius:5px; }.diff-page .comparison-stage .result-head { background:#f6f8fa; } }

/* Full review window for a focused, split-code comparison. */
.diff-page .comparison-stage { display:grid; grid-template-columns:220px minmax(0,1fr); height:calc(100vh - 140px); border:0; border-radius:0; background:#fff; overflow:visible; }
.diff-page .diff-sidebar { border-right:1px solid #d8dee4; background:#f6f8fa; color:#57606a; display:flex; flex-direction:column; min-height:0; }.diff-page .side-tabs { display:flex; gap:6px; padding:10px 10px 9px; border-bottom:1px solid #d8dee4; }.diff-page .side-tab { flex:1; border:1px solid transparent; border-radius:6px; background:transparent; color:#57606a; padding:7px 4px; font-weight:600; font-size:12px; }.diff-page .side-tab.is-selected { border-color:#d0d7de; background:#fff; color:#24292f; }.diff-page .side-tab:disabled { cursor:default; color:#8c959f; }.diff-page .side-section { padding:13px 13px 2px; }.diff-page .side-section>p { margin:0 0 8px; color:#57606a; font-size:11px; font-weight:600; }.diff-page .segmented { display:inline-flex; overflow:hidden; border:1px solid #d0d7de; border-radius:6px; background:#fff; }.diff-page .segmented button { border:0; background:#fff; color:#8c959f; padding:5px 9px; font-size:11px; }.diff-page .segmented button+button { border-left:1px solid #d0d7de; }.diff-page .segmented .is-selected { background:#ddf4ff; color:#0969da; font-weight:600; }.diff-page .controls { display:grid; gap:10px; padding-top:14px; }.diff-page .controls label { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; }.diff-page .controls input { appearance:none; width:28px; height:16px; margin:0; border-radius:10px; background:#d0d7de; position:relative; cursor:pointer; transition:background .15s; }.diff-page .controls input:after { content:""; width:12px; height:12px; border-radius:50%; background:#fff; position:absolute; top:2px; left:2px; box-shadow:0 1px 2px #0003; transition:left .15s; }.diff-page .controls input:checked { background:#1f883d; }.diff-page .controls input:checked:after { left:14px; }.diff-page .side-actions { margin-top:auto; padding:12px; display:grid; gap:8px; border-top:1px solid #d8dee4; }.diff-page .side-actions button { border:1px solid #d0d7de; border-radius:6px; background:#fff; color:#57606a; text-align:left; padding:8px; font-size:12px; font-weight:600; }.diff-page .side-actions button:hover { border-color:#8c959f; color:#24292f; }
.diff-page .diff-review { min-width:0; min-height:0; display:grid; grid-template-rows:50px 32px minmax(0,1fr); }.diff-page .comparison-stage .result-head { min-height:0; height:50px; padding:9px 14px; flex:initial; background:#fff; border-bottom:1px solid #d8dee4; }.diff-page .comparison-stage .result-head h2 { font-size:15px; line-height:18px; }.diff-page .comparison-stage .summary { display:flex; margin-top:2px; }.diff-page .comparison-stage .summary span { font-size:9px; padding:2px 5px; }.diff-page .diff-column-headings { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid #d8dee4; background:#f6f8fa; font-size:12px; font-weight:600; color:#24292f; }.diff-page .diff-column-headings span { padding:8px 12px; }.diff-page .diff-column-headings span+span { border-left:1px solid #d8dee4; }.diff-page .comparison-stage .legend { display:none; }.diff-page .comparison-stage .diff-output { min-height:0; border:0; overflow:auto; background:#fff; }.diff-page .comparison-stage .diff-row { min-width:760px; border-bottom:0; }.diff-page .comparison-stage .diff-cell { min-height:24px; font-size:13px; line-height:1.45; }.diff-page .comparison-stage .diff-cell + .diff-cell { border-left:1px solid #d8dee4; }.diff-page .comparison-stage .line-number { padding:2px 9px 2px 4px; background:#fff; color:#8c959f; font-size:11px; }.diff-page .comparison-stage .line-text { padding:2px 12px; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }.diff-page .comparison-stage .removed-cell .line-text { background:#ffebe9; color:#82071e; }.diff-page .comparison-stage .added-cell .line-text { background:#dafbe1; color:#0a5d1c; }.diff-page .comparison-stage .line-text.empty { background:repeating-linear-gradient(-45deg,#fafbfc 0,#fafbfc 2px,#f1f3f5 2px,#f1f3f5 4px); color:transparent; }.diff-page .diff-output.hide-unchanged .same-row { display:none; }.diff-page .diff-output.disable-wrap .line-text { white-space:pre; overflow:visible; word-break:normal; }
@media (max-width:720px) { .diff-page .comparison-stage { grid-template-columns:1fr; height:calc(100vh - 179px); }.diff-page .diff-sidebar { display:none; }.diff-page .diff-review { grid-template-rows:58px 31px minmax(0,1fr); }.diff-page .comparison-stage .result-head { height:58px; padding:8px 10px; flex-direction:row; align-items:center; }.diff-page .comparison-stage .result-actions { width:auto; }.diff-page .comparison-stage .result-actions button { min-width:76px; }.diff-page .diff-column-headings span { padding:8px; font-size:11px; }.diff-page .comparison-stage .diff-row { min-width:0; }.diff-page .comparison-stage .diff-cell { grid-template-columns:30px minmax(0,1fr); }.diff-page .comparison-stage .diff-cell + .diff-cell { border-left:0; border-top:0; }.diff-page .comparison-stage .line-number { padding-right:5px; }.diff-page .comparison-stage .line-text { padding-inline:8px; } }

/* The source inputs stay in place; the review is rendered below and scrolls independently. */
.diff-page .diff-sidebar { position:sticky; top:62px; align-self:start; height:calc(100vh - 62px); }.diff-page .side-tab { display:block; width:100%; text-align:center; cursor:default; }.diff-page .diff-output.unified .diff-row { display:block; min-width:0; }.diff-page .diff-output.unified .diff-cell { min-height:24px; }.diff-page .diff-output.unified .same-row .diff-cell:last-child { display:none; }.diff-page .diff-output.unified .diff-cell + .diff-cell { border-left:0; }.diff-page .diff-column-headings.unified { grid-template-columns:1fr; }.diff-page .diff-column-headings.unified span:last-child { display:none; }.diff-page .segmented button { cursor:pointer; }.diff-page .segmented button[aria-pressed="true"] { background:#ddf4ff; color:#0969da; font-weight:600; }

/* Keep the primary comparison action centered under the editors. */
.diff-page .simple-workspace .compare-row { position:relative; display:flex; min-height:64px; height:64px; align-items:center; justify-content:center; gap:0; }.diff-page .simple-workspace .compare-row .secondary-button { position:absolute; left:0; order:initial; margin:0; }.diff-page .simple-workspace .compare-row .primary-button { position:static; order:initial; min-width:148px; margin:0; }.diff-page .simple-workspace .compare-row .input-message { position:absolute; right:0; order:initial; width:auto; margin:0; text-align:right; }
@media (max-width:720px) { .diff-page .simple-workspace .compare-row { height:auto; min-height:58px; padding-bottom:8px; justify-content:flex-end; }.diff-page .simple-workspace .compare-row .input-message { position:static; width:100%; order:3; text-align:left; }.diff-page .simple-workspace .compare-row .primary-button { min-width:0; } }