.native-demo{--modified-fill:#e2efff;--modified-stroke:#afcbea;--deleted-fill:#ffd9d9;--deleted-stroke:#e8a5a5;--added-fill:#ebffd4;--added-stroke:#c5dea7}.native-demo-controls{justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px;padding-inline:5px;display:flex}.native-demo .scenario-tabs{background:#eceee5}.native-demo .scenario-tabs button{min-width:60px}.native-demo .demo-actions button{min-height:34px;font-size:16px}.native-window{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 22px 50px -24px #27343a35,0 0 0 1px #1b283414}.native-header{color:#555;background:#fff;border-bottom:1px solid #ececec;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:stretch;min-height:49px;padding-right:9px;display:grid}.native-file{letter-spacing:0;align-items:center;gap:9px;min-width:0;padding:0 17px;font-size:12px;font-weight:600;display:flex}.native-document{background:url(/images/document-icon.png) 50%/contain no-repeat;flex-shrink:0;width:14px;height:18px;display:block}.native-file>i{background:#0983ff;border-radius:50%;width:5px;height:5px;margin-left:3px;display:block}.native-navigation{color:#888;border-inline:1px solid #f1f1f1;justify-content:center;align-items:center;gap:4px;font-size:10px;display:flex}.native-navigation>button{color:#888;background:0 0;border:0;min-width:20px;min-height:35px;padding:0;font-size:17px}.native-navigation>button:disabled{opacity:.3}.native-navigation>span{text-align:center;white-space:nowrap;min-width:25px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:10px}.native-scroll{scrollbar-width:thin;scrollbar-color:#c2c2c2 #f5f5f5;background:#fff;max-height:595px;overflow:auto}.native-canvas{isolation:isolate;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr) 9px;min-width:750px;display:grid;position:relative}.native-pane{background:#fff;grid-area:1/1;min-width:0;position:relative;overflow:hidden}.native-right{grid-column:3}.native-line{white-space:pre;color:#111;background:#fff;height:22px;line-height:22px;position:absolute;left:0;right:0;overflow:hidden}.native-line code{white-space:pre;font-variant-ligatures:none;padding:0;font:11.5px/22px SFMono-Regular,Menlo,Consolas,PingFang SC,monospace}.native-line.modified{background:var(--modified-fill);box-shadow:inset 0 1px 0 var(--modified-stroke),inset 0 -1px 0 var(--modified-stroke)}.native-line.deleted{background:var(--deleted-fill);box-shadow:inset 0 1px #e8a5a54a,inset 0 -1px #e8a5a54a}.native-line.added{background:var(--added-fill);box-shadow:inset 0 1px #c5dea74a,inset 0 -1px #c5dea74a}.native-line mark{color:inherit;background:#a8d0ff;padding:0}.native-line.native-active{box-shadow:inset 0 0 0 1px #82b3ef}.native-gutter{background:#f8f8f8;grid-area:1/2;position:relative}.native-connections{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.native-connections path{stroke-width:.6px;vector-effect:non-scaling-stroke}.native-connections .modified{fill:var(--modified-fill);stroke:var(--modified-stroke)}.native-connections .deleted{fill:var(--deleted-fill);stroke:var(--deleted-stroke)}.native-connections .added{fill:var(--added-fill);stroke:var(--added-stroke)}.native-merge{color:#272727;width:26px;height:22px;transition:transform .2s var(--spring),background .2s var(--spring);background:0 0;border:0;border-radius:3px;place-items:center;padding:0;font-size:16px;line-height:1;display:grid;position:absolute}.native-merge.from-left{left:1px}.native-merge.from-right{right:1px}.native-merge img{pointer-events:none;width:14px;height:14px;display:block}.native-merge.from-right img{transform:scaleX(-1)}.native-merge:hover{background:#0000000c}.native-overview{background:#fafafa;border-left:1px solid #ededed;grid-area:1/4;position:relative}.native-overview button{background:#0089ff;border:0;border-radius:2px;min-height:3px;padding:0;position:absolute;left:1px;right:1px}.native-overview .deleted{background:#ff454a}.native-overview .added{background:#34bd54}.native-footer{color:#999;background:#fff;border-top:1px solid #f4f4f4;grid-template-columns:auto 1fr 64px auto 1fr;align-items:center;gap:0;min-height:31px;padding-inline:15px;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,sans-serif;font-size:9px;display:grid}.native-file-meta{color:#bababa;justify-self:end;font-size:8px}.native-info{color:#888;justify-self:center;font-size:14px}.native-demo-status{color:#8a9181;justify-content:space-between;align-items:center;padding:17px 6px 0;font-size:9px;display:flex}.native-legend{gap:19px;display:flex}.native-legend>span{align-items:center;gap:6px;display:flex}.native-legend>span:before{content:"";background:#9ec8fa;border-radius:2px;width:7px;height:7px}.native-legend>.legend-deleted:before{background:#ecaaaa}.native-legend>.legend-added:before{background:#b3db8c}.native-demo .demo-caption{margin-top:17px}.native-demo .demo-topline{padding-bottom:14px}.native-demo .mobile-demo-hint{font-size:9px}@media (width<=760px){.native-header{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)}.native-file{gap:7px;padding-inline:12px;font-size:11px}.native-footer{grid-template-columns:auto 1fr 32px auto 1fr;padding-inline:10px;font-size:8px}.native-file-meta{font-size:7px}.native-demo-controls{margin-bottom:11px}.native-demo .scenario-tabs button{min-width:48px;padding-inline:9px;font-size:9px}.native-demo .demo-actions{gap:7px}.native-window{border-radius:9px}.native-scroll{max-height:500px}.native-demo .demo-topline{font-size:9px}.native-demo .native-demo-status{padding-top:13px}}@media (width<=480px){.native-demo .scenario-tabs button{min-width:39px;padding:6px;font-size:8px}.native-demo .demo-actions button span{font-size:8px}.native-demo .demo-actions button{gap:3px;padding-inline:2px}.native-file{gap:6px;padding:0 10px;font-size:10px}.native-header{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);min-height:43px}.native-document{width:11px;height:15px}.native-footer{grid-template-columns:auto 1fr 16px auto 1fr;min-height:30px;padding-inline:8px;font-size:7px}.native-file-meta{font-size:6px}.native-info{font-size:11px}.native-scroll{max-height:420px}.native-demo .demo-topline{font-size:8px}.native-demo .demo-indicator{font-size:7px}.native-demo .mobile-demo-hint{font-size:8px}.native-legend{gap:14px}.native-demo-status{font-size:8px}}