.demo-wrap{width:100%;max-width:1040px;margin:0 auto;position:relative}.demo-scale{pointer-events:none;cursor:default;transform-origin:top left;width:960px;height:580px;position:relative}.demo-scale,.demo-win{-webkit-user-select:none;-moz-user-select:none;user-select:none}.demo-win{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--stage);color:var(--text);font-size:13px}.demo-title{height:40px;display:flex;align-items:center;gap:14px;padding:0 14px;background:var(--toolbar);border-bottom:1px solid var(--line);flex:none}.demo-title b{font-size:13px;font-weight:600;flex:1;text-align:center;margin-right:52px}.demo-body{flex:1;position:relative;display:flex;min-height:0}.demo-rail{width:70px;margin:10px 0 10px 10px;border-radius:20px;display:flex;flex-direction:column;gap:2px;padding:8px 5px;flex:none;overflow:hidden;background:rgba(var(--cap-rgb),calc(var(--lg-alpha) + .1));backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));box-shadow:inset 0 1.5px 1px rgba(255,255,255,calc(var(--rim-a) * var(--lg-spec))),inset 0 -1px 1px rgba(255,255,255,.25),0 0 0 1px rgba(255,255,255,.4),0 8px 24px rgba(0,0,0,.14)}.demo-rbtn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 5px;border-radius:13px;font-size:10px;font-weight:500;line-height:1.15;text-align:center;color:var(--sub);border:0;background:none;cursor:pointer;font-family:inherit;transition:background .15s,color .15s,transform .06s}.demo-rbtn:hover{background:var(--fill)}.demo-rbtn:active{transform:scale(.96)}.demo-rbtn.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}.demo-ic{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}.demo-main{flex:1;position:relative;min-width:0;overflow:hidden}.demo-glass{background:rgba(var(--cap-rgb),calc(var(--lg-alpha) + .1));backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));box-shadow:inset 0 1.5px 1px rgba(255,255,255,calc(var(--rim-a) * var(--lg-spec))),inset 0 -1px 1px rgba(255,255,255,.25),0 0 0 1px rgba(255,255,255,.4),0 8px 24px rgba(0,0,0,.14)}@media (prefers-color-scheme:dark){.demo-glass,.demo-rail{box-shadow:inset 0 1.5px 1px rgba(255,255,255,calc(var(--rim-a) * var(--lg-spec))),inset 0 -1px 1px rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.14),0 8px 24px rgba(0,0,0,.4)}}@media (prefers-reduced-transparency:reduce){.demo-glass,.demo-rail{background:var(--solid);backdrop-filter:none}}.demo-head{position:absolute;top:10px;left:10px;height:34px;border-radius:999px;padding:0 18px;display:flex;align-items:center;gap:10px;z-index:5}.demo-head b{font-size:13px;font-weight:650}.demo-head small{color:var(--sub);font-size:12px}.demo-floaty{position:absolute;top:10px;right:10px;z-index:5;display:flex;gap:2px;padding:3px;border-radius:99px;background:var(--toolbar);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 0 0 1px var(--line),0 4px 14px rgba(0,0,0,.12)}.demo-floaty button{height:26px;padding:0 11px;border-radius:99px;border:0;background:none;font:500 12px inherit;font-family:inherit;color:var(--text);cursor:pointer}.demo-floaty button.on{background:var(--accent);color:var(--accent-text)}.demo-content{position:absolute;inset:52px 0 0 0;display:flex;gap:10px;padding:0 10px 10px}.demo-stage{flex:1;border-radius:14px;background:color-mix(in srgb,var(--stage) 70%,transparent);box-shadow:inset 0 0 0 1px var(--line);display:flex;justify-content:center;align-items:flex-start;padding:16px;overflow:hidden;position:relative}.demo-paper{width:100%;max-width:440px;background:#fff;color:#1d1d1f;border-radius:4px;box-shadow:0 6px 24px var(--drop),0 0 0 1px var(--outline);padding:26px 30px;font:12.5px/1.65 Helvetica Neue,Helvetica,Arial,sans-serif;position:relative}.demo-paper h4{margin:0 0 10px;font-size:17px;letter-spacing:.02em}.demo-paper p{margin:0 0 6px}.demo-line{position:relative;display:inline-block;border-radius:2px}.demo-hit{cursor:text;border-radius:2px;padding:0 2px;margin:0 -2px;transition:background .15s,box-shadow .15s}.demo-hit:hover{background:rgba(0,122,255,.12)}.demo-hit.sel{background:rgba(0,122,255,.14);box-shadow:0 0 0 1.5px var(--accent)}.demo-hit.done{background:rgba(40,167,69,.14);box-shadow:0 0 0 1px var(--green)}.demo-insp{width:230px;border-radius:14px;padding:12px;flex:none;display:flex;flex-direction:column;gap:8px;background:var(--inspector);box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat))}.demo-insp h5{margin:0;font-size:12px;font-weight:650;color:var(--sub);letter-spacing:.02em}.demo-field{height:30px;border-radius:8px;background:var(--solid);box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:center;padding:0 10px;font-size:13px;min-width:0;white-space:nowrap;overflow:hidden}.demo-field.focus{box-shadow:inset 0 0 0 2px var(--accent)}.demo-caret{display:inline-block;width:1px;height:14px;background:var(--accent);margin-left:1px;animation:demo-blink 1s steps(2) infinite}@keyframes demo-blink{50%{opacity:0}}.demo-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 12px;border-radius:8px;border:0;font:500 13px inherit;font-family:inherit;background:var(--fill);color:var(--text);cursor:pointer;transition:transform .06s,filter .15s}.demo-btn:hover{background:var(--fill-h)}.demo-btn:active{transform:scale(.97)}.demo-btn.primary{background:var(--accent);color:var(--accent-text)}.demo-btn.primary:hover{filter:brightness(1.08)}.demo-btn[disabled]{opacity:.35;pointer-events:none}.demo-seg{display:flex;padding:2px;border-radius:9px;background:var(--fill)}.demo-seg button{height:26px;padding:0 14px;border-radius:7px;font:500 12px inherit;font-family:inherit;color:var(--sub);border:0;background:none;cursor:pointer;transition:all .2s var(--ease)}.demo-seg button.on{background:var(--solid);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.18)}.demo-log{color:var(--sub);display:flex}.demo-badge,.demo-log{font-size:12px;gap:6px;align-items:center}.demo-badge{display:inline-flex;padding:5px 11px;border-radius:99px;font-weight:600;color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 40%,transparent);animation:demo-pop .35s var(--ease)}@keyframes demo-pop{0%{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}.demo-redbar{display:inline-block;background:#000;height:1.1em;vertical-align:-.2em;border-radius:1px;width:150px;animation:demo-pop .3s var(--ease)}.demo-dragbox{position:absolute;border:1.5px solid var(--red);background:rgba(229,52,43,.14);border-radius:3px;pointer-events:none;transition:width .9s var(--ease),height .9s var(--ease)}.demo-diffcols{display:flex;gap:10px;flex:1;min-width:0}.demo-diffcols .demo-paper{max-width:none;padding:18px 20px;font-size:12px}.demo-chg{border-radius:3px;padding:0 2px;transition:background .25s,box-shadow .25s}.demo-chg.on{background:rgba(229,52,43,.2);box-shadow:0 0 0 1px rgba(229,52,43,.5)}.demo-chg.old{text-decoration:line-through;color:var(--red)}.demo-tag{font-size:11px;font-weight:650;color:var(--sub);margin-bottom:6px;display:block}.demo-table{border-collapse:collapse;width:100%;font-size:12px;cursor:pointer;border-radius:4px;transition:box-shadow .15s}.demo-table td,.demo-table th{padding:5px 8px;border-bottom:1px solid #e5e5ea;text-align:left}.demo-table th{background:#f2f2f7;font-weight:650}.demo-table td:last-child,.demo-table th:last-child{text-align:right}.demo-table.sel{box-shadow:0 0 0 2px var(--accent)}.demo-csv{font:11.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--solid);border-radius:8px;padding:8px 10px;white-space:pre;overflow:hidden;color:var(--text);animation:demo-pop .3s var(--ease)}.demo-card,.demo-csv{box-shadow:inset 0 0 0 1px var(--line)}.demo-card{flex:1;border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:12px;align-content:flex-start;background:rgba(var(--cap-rgb),calc(var(--lg-alpha) + .1))}.demo-card h3{margin:0;font-size:17px;font-weight:650}.demo-card p{margin:0;font-size:13px}.demo-card .gg,.demo-card p{color:var(--sub);max-width:520px}.demo-card .gg{font-size:12px;display:grid;grid-template-columns:70px 1fr;gap:4px 10px}.demo-card .gg b{color:var(--accent);font-weight:650}.demo-card .gg b.o{color:var(--green)}.demo-caption{z-index:20;max-width:84%;text-align:center;pointer-events:none;color:var(--text)!important;font-weight:550;white-space:nowrap}.demo-caption,.demo-resume{position:absolute;left:50%;bottom:16px;transform:translateX(-50%)}.demo-resume{z-index:21;border:0;cursor:pointer;font-family:inherit;font-weight:600;color:var(--accent)!important}.demo-resume:hover{filter:brightness(1.1)}.demo-cursor{left:0;top:0;z-index:30;transition:transform .9s var(--ease);will-change:transform;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}.demo-cursor,.demo-ripple{position:absolute;pointer-events:none}.demo-ripple{z-index:29;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 25%,transparent);animation:demo-ripple .55s ease-out forwards}@keyframes demo-ripple{0%{transform:scale(.3);opacity:1}to{transform:scale(1.5);opacity:0}}.demo-note{font-size:11.5px;color:var(--faint);text-align:center;margin-top:10px}@media (max-width:640px){.demo-note{display:none}}