:root{color-scheme:light;--bg: #f4f6f8;--side: #ffffff;--panel: #ffffff;--line: #d5dbe3;--text: #1c2430;--muted: #4b5568;--blue: #a855f7;--btn: #ffffff;--btn-on: #f6edff;--btn-row-gap: .55rem}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif}button,textarea{font:inherit;color:inherit}.shell{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:100dvh;overflow:hidden;background:var(--bg)}.top{display:flex;align-items:center;gap:var(--btn-row-gap);min-width:0;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--side)}.top--side{grid-column:1;grid-row:1;border-right:1px solid var(--line)}.top--main{grid-column:2;grid-row:1}.top-copy{margin-left:auto;white-space:nowrap}.top-copy__note{color:var(--muted);font-size:12px;white-space:nowrap}.contour-row{display:flex;flex-wrap:wrap;gap:var(--btn-row-gap);min-width:0}.contour-row button{border:1px solid var(--line);background:var(--btn);border-radius:8px;padding:.45rem .75rem;cursor:pointer;font:600 13px/1.3 Segoe UI,system-ui,sans-serif;text-align:left;white-space:nowrap}.contour-row button.is-on{border-color:var(--blue);background:var(--btn-on)}.contour-row button:hover{border-color:color-mix(in srgb,var(--blue) 40%,var(--line))}.side{grid-column:1;grid-row:2;min-width:0;min-height:0;display:flex;flex-direction:column;gap:1rem;padding:16px;overflow:auto;background:var(--side);border-right:1px solid var(--line)}.brand__mark{margin:0;font:700 13px/1.2 Segoe UI,system-ui,sans-serif;letter-spacing:.08em}.nav-group{display:flex;flex-direction:column;gap:.45rem;min-width:0}.nav-group+.nav-group{margin-top:.35rem}.nav-group__label{margin:0;color:var(--muted);font:600 11px/1.2 Segoe UI,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}.nav{display:flex;flex-direction:column;gap:var(--btn-row-gap);min-width:0}.nav button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;border:1px solid var(--line);background:var(--btn);border-radius:8px;padding:.5rem .75rem;cursor:pointer}.nav button.is-on{border-color:var(--blue);background:var(--btn-on)}.nav button:hover{border-color:color-mix(in srgb,var(--blue) 40%,var(--line))}.tile__title{font:600 13px/1.3 Segoe UI,system-ui,sans-serif}.tile__hint{color:var(--muted);font:400 11px/1.35 Segoe UI,system-ui,sans-serif}.mark{font-weight:650}.mark--same{color:#3f6b2a}.mark--diff{color:#7a3e12}.workspace{grid-column:2;grid-row:2;min-width:0;min-height:0;display:flex;flex-direction:column}.workspace__body{flex:1;min-height:0;display:flex;flex-direction:column;gap:.75rem;padding:14px 16px 16px}.workspace__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--btn-row-gap) 1rem}.parity{margin:0;justify-self:end;max-width:16rem;border-radius:999px;border:1px solid var(--line);padding:.4rem .8rem;font:650 12px/1.35 Segoe UI,system-ui,sans-serif;text-align:right}.parity--same{color:#275316;background:#eef6e6;border-color:#c5ddb0}.parity--diff{color:#7a3e12;background:#fff4e8;border-color:#efd0b0}.workspace__titles{flex:1 1 240px;min-width:0}.workspace__title{margin:0;font:650 20px/1.25 Segoe UI,system-ui,sans-serif}.workspace__hint{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.4}.btn-row{display:flex;flex-wrap:wrap;gap:var(--btn-row-gap)}.btn{border:1px solid var(--line);background:var(--btn);border-radius:8px;padding:.5rem .85rem;cursor:pointer;font:600 13px/1.3 Segoe UI,system-ui,sans-serif}.btn--accent{border-color:var(--blue);background:var(--btn-on)}.btn:hover{border-color:color-mix(in srgb,var(--blue) 55%,var(--line))}.meta{margin:0;color:var(--muted);font-size:12px}.editor{flex:1 1 auto;min-height:0;width:100%;resize:none;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:12px 14px;font:13px/1.5 Consolas,ui-monospace,monospace;white-space:pre-wrap}.editor[readonly]{background:#f7f5fb;color:var(--text)}@media (max-width: 800px){.shell{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,34dvh) minmax(0,1fr)}.top--side,.top--main,.side,.workspace{grid-column:1}.top--side{grid-row:1;border-right:0}.top--main{grid-row:2}.side{grid-row:3;border-right:0;border-bottom:1px solid var(--line)}.workspace{grid-row:4}.workspace__head{grid-template-columns:1fr}.parity{justify-self:start;text-align:left}}