:root{font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:#17212b;background:#e8edf2;font-size:14px;color-scheme:light}
*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column}button,select,input{font:inherit}button,select{cursor:pointer}a{color:inherit}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #c8102e;outline-offset:3px}
.toolbar{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between;padding:18px 24px;background:#fff;border-bottom:1px solid #d7dfe7}.toolbar__intro h1{font-size:20px;margin:0;line-height:1.3}.toolbar__intro h1 span{font-weight:400;color:#667483;margin-left:12px}.toolbar__intro p{font-size:12px;color:#667483;margin:5px 0 0}.toolbar__controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.sizes{display:flex;background:#f1f4f7;border-radius:6px;padding:3px}.sizes button{border:0;padding:8px 12px;background:transparent;border-radius:4px;font-size:12px;color:#576574}.sizes button[aria-pressed=true]{color:#fff;background:#263a4d}.sync,.jump{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap}.sync input{accent-color:#c8102e}.jump select{background:#fff;border:1px solid #cfd8e1;border-radius:4px;max-width:160px;padding:7px}.live{text-decoration:none;font-size:12px;padding:8px 12px;background:#c8102e;color:white;border-radius:4px}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 20px;flex:1;min-height:0}.pane{display:flex;flex-direction:column;min-width:0;min-height:0;border:1px solid #cdd7e1;border-radius:8px;overflow:hidden;background:#dce3ea}.pane__label{padding:11px 16px;background:#f8fafb;border-bottom:1px solid #d7dfe7;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:5px 16px}.pane__label strong{font-size:14px}.pane__label strong span{font-weight:400;font-size:12px;margin-left:8px;color:#647382}.pane__label small{font-size:11px;color:#647382}.pane--after{border-color:#c8102e}.pane--after .pane__label{background:#fff4f5}.pane--after .pane__label strong{color:#a50d25}.pane__stage{position:relative;flex:1;min-height:0;overflow:hidden}.pane iframe{display:block;position:absolute;top:0;border:0;background:#fff;transform-origin:top left}.note{display:flex;justify-content:space-between;gap:12px;padding:0 24px 12px;font-size:11px;color:#647382}.note #status{white-space:nowrap}
@media(max-width:800px){.toolbar{padding:12px 16px;gap:12px}.toolbar__controls{gap:10px}.comparison{gap:8px;padding:10px}.pane__label{padding:9px}.pane__label small{display:none}.note{padding:0 12px 8px;font-size:10px}.note span:last-child{max-width:60%}.jump select{max-width:125px}.live{padding:7px 10px}}
.toolbar__intro{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}.toolbar__intro p{flex-basis:100%}.view-tabs{display:flex;gap:4px;flex-wrap:wrap}.view-tabs button{border:0;border-radius:4px;background:#f0f3f6;color:#566677;padding:8px 10px;font-size:12px}.view-tabs button[aria-pressed=true]{background:#263a4d;color:#fff}.share{border:1px solid #cfd8e1;border-radius:4px;background:white;padding:8px 10px;font-size:12px}.pane__link{font-size:11px;text-decoration:none;color:#536e85;margin-left:auto;white-space:nowrap}.pane__label small{flex:1}.pane--after .pane__link{color:#a50d25}