@property --c1{syntax:"<color>";inherits:true;initial-value:#fad7a0}@property --c2{syntax:"<color>";inherits:true;initial-value:#f7c09e}@property --c3{syntax:"<color>";inherits:true;initial-value:#f4a99b}@property --veil{syntax:"<color>";inherits:true;initial-value:#0000}.demo-frame{width:100%;position:relative}.demo-stage{transform-origin:0 0;-webkit-font-smoothing:auto;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;--spring-arc:linear(0, .0596, .186, .3294, .4656, .584, .6819, .7601, .821, .8677, .9029, .9292, .9487, .963, .9734, .9809, .9864, .9903, .9931, .9951, .9966, .9976, .9983, .9988, 1);--spring-arc-ms:.3s;--spring-peek:linear(0, .056, .1833, .337, .4897, .6262, .7399, .8294, .8963, .9439, .976, .9962, 1.0078, 1.0134, 1.0151, 1.0146, 1.0127, 1.0105, 1.0081, 1.006, 1.0042, 1.0028, 1.0017, 1.001, 1);--spring-peek-ms:.24s;--spring-peek-out:linear(0, .0507, .1684, .3141, .4623, .5984, .7146, .8086, .8809, .934, .9709, .995, 1.0094, 1.017, 1.0197, 1.0195, 1.0176, 1.0148, 1.0118, 1.009, 1.0065, 1.0045, 1.0029, 1.0017, 1);--spring-peek-out-ms:.2s;--sidebar-hide:83ms cubic-bezier(0, .4, .3, 1) 33ms;--sidebar-show:83ms cubic-bezier(.25, .85, .7, 1);--hover-out:.1s ease-out;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,system-ui,sans-serif;font-size:13px;line-height:17px;transition:opacity .4s;position:absolute;top:0;left:0}.demo-light{--text:#14191c;--pill-text:#14191ccc;--secondary:#00000073;--icon:#0000008c;--selection:#ffffffd9;--selection-shadow:0 1px 3px #00000024, 0 0 0 .5px #00000008;--hover:#0000000a;--press:#00000014;--fill:#0000000d;--divider:#0000001f;--dot:#00000087;--dot-other:#00000047;--light-off:#00000017}.demo-dark{--text:#dedfff;--pill-text:#ffffff8f;--secondary:#ffffff73;--icon:#fff9;--selection:#ffffff30;--selection-shadow:none;--hover:#ffffff1a;--press:#ffffff29;--fill:#ffffff1a;--divider:#ffffff1f;--dot:#ffffff85;--dot-other:#ffffff2e;--light-off:#ffffff4d}.demo-window{isolation:isolate;width:1280px;height:800px;color:var(--text);background:linear-gradient(var(--veil), var(--veil)), linear-gradient(122deg, var(--c1), var(--c2), var(--c3));border-radius:10px;position:absolute;top:0;left:0;overflow:hidden;box-shadow:0 0 0 .5px #00000038,0 24px 60px #003a5f47,0 8px 20px #003a5f1f}.demo-theming,.demo-theming .demo-column,.demo-theming .demo-header,.demo-theming .demo-subtitle,.demo-theming .demo-glyph,.demo-theming .demo-pill,.demo-theming .demo-tile,.demo-theming .demo-row,.demo-theming .demo-divider,.demo-theming .demo-dot,.demo-theming .demo-lights i{transition:--c1 .45s,--c2 .45s,--c3 .45s,--veil .45s,color .45s,background-color .45s,box-shadow .45s}.demo-grain{pointer-events:none;background-size:128px;animation:.45s demo-fade-in;position:absolute;inset:0}@keyframes demo-fade-in{0%{opacity:0}}.demo-abs{position:absolute}.demo-glyph{background-color:var(--icon);-webkit-mask:var(--m) center / 100% 100% no-repeat;mask:var(--m) center / 100% 100% no-repeat;-webkit-mask:var(--m) center / 100% 100% no-repeat;position:absolute}.demo-chrome{width:219px;height:800px;transition:transform var(--sidebar-show);overscroll-behavior-x:contain;touch-action:pan-y;position:absolute;top:0;left:0}.demo-chrome-hidden{transition:transform var(--sidebar-hide);pointer-events:none;transform:translate(-219px)}.demo-chrome-peek{z-index:2;background:linear-gradient(var(--veil), var(--veil)) -5px -5px / 1280px 800px, linear-gradient(122deg, var(--c1), var(--c2), var(--c3)) -5px -5px / 1280px 800px;pointer-events:auto;height:790px;transition:transform var(--spring-peek-ms) var(--spring-peek);border-radius:10px;top:5px;left:5px;overflow:hidden;transform:none;box-shadow:0 0 0 .5px #0000002e,inset 0 0 0 .5px #ffffff59,0 10px 30px #00000038}.demo-chrome-peek.demo-chrome-hidden{transition:transform var(--spring-peek-out-ms) var(--spring-peek-out);pointer-events:none;transform:translate(-230px)}.demo-lights{gap:8px;display:flex;position:absolute;top:18px;left:14px}.demo-lights i{background:var(--light-off);border-radius:50%;width:12px;height:12px}.demo-lights:hover i:first-child{background:#ff5f57}.demo-lights:hover i:nth-child(2){background:#febc2e}.demo-lights:hover i:nth-child(3){background:#28c840}.demo-button,.demo-row,.demo-tile,.demo-pill{cursor:pointer;transition:background-color var(--hover-out), box-shadow var(--hover-out)}.demo-button{border-radius:6px;position:absolute}.demo-button:hover,.demo-button[data-hover],.demo-row:hover,.demo-row[data-hover]{background:var(--hover);transition:none}.demo-button:active,.demo-button[data-press],.demo-row:active,.demo-row[data-press]{background:var(--press)}.demo-pill{background:var(--fill);width:203px;height:36px;color:var(--pill-text);white-space:nowrap;border-radius:12px;padding-left:13px;line-height:37px;position:absolute;top:46px;left:8px;overflow:hidden}.demo-pill:hover,.demo-pill[data-hover],.demo-tile:hover,.demo-tile[data-hover]{background:color-mix(in srgb, var(--fill), var(--text) 5%);transition:none}.demo-pill:active,.demo-pill[data-press],.demo-tile:active,.demo-tile[data-press]{background:color-mix(in srgb, var(--fill), var(--text) 10%)}.demo-tile{background:var(--fill);border-radius:10px;width:58.5px;height:47px;position:absolute}.demo-tile-on,.demo-tile-on:hover,.demo-tile-on[data-hover],.demo-row-on,.demo-row-on:hover,.demo-row-on[data-hover],.demo-row-on[data-press]{background:var(--selection);box-shadow:var(--selection-shadow)}.demo-folder{background:url(/demo/i/g-folder-light.png) 0 0/100% 100%;width:26px;height:24px;position:absolute;top:6px;left:4px}.demo-dark .demo-folder{background-image:url(/demo/i/g-folder-dark.png)}.demo-favicon{background-size:18px 18px;width:18px;height:18px;position:absolute}.demo-strip{width:657px;height:548px;transition:transform var(--spring-arc-ms) var(--spring-arc);display:flex;position:absolute;top:0;left:0}.demo-column{width:219px;height:100%;color:var(--text);flex:none;position:relative}.demo-header{color:var(--secondary);font-weight:600;position:absolute;top:9.5px;left:36px}.demo-row{border-radius:8px;width:203px;height:36px;position:absolute;left:8px}.demo-title{white-space:nowrap;text-overflow:ellipsis;font-size:14px;position:absolute;top:9px;right:10px;overflow:hidden}.demo-subtitle{color:var(--secondary);white-space:nowrap;font-size:11px;line-height:14px;position:absolute;top:18px}.demo-divider{background:var(--divider);width:183px;height:1px;position:absolute;left:18px}.demo-dot{background:var(--dot-other);border-radius:50%;width:8px;height:8px;position:absolute;top:6px;left:13px}.demo-page{width:1051px;height:780px;transition:left var(--sidebar-show), width var(--sidebar-show);background:#fff;border-radius:6px;position:absolute;top:10px;left:219px;overflow:hidden;box-shadow:0 0 0 .5px #00000014,0 1px 3px #00000014}.demo-page-wide{width:1260px;transition:left var(--sidebar-hide), width var(--sidebar-hide);left:10px}.demo-layer{height:780px;position:absolute;top:0;left:0;overflow:hidden}.demo-scroller{scrollbar-width:none;position:absolute;inset:0;overflow:hidden auto}.demo-scroller::-webkit-scrollbar{display:none}@media (pointer:coarse){.demo-scroller{overflow-y:hidden}}.demo-pin{pointer-events:none;background-repeat:no-repeat;position:absolute}.demo-hit{cursor:pointer;pointer-events:auto;transition:filter var(--hover-out), transform var(--hover-out);background-repeat:no-repeat;border-radius:6px;position:absolute}.demo-hit:hover,.demo-hit[data-hover]{filter:brightness(.94);transition:none}.demo-hit-dark:hover,.demo-hit-dark[data-hover]{filter:brightness(1.35)}.demo-hit:active,.demo-hit[data-press]{filter:brightness(.86);transform:scale(.97)}.demo-hit-dark:active,.demo-hit-dark[data-press]{filter:brightness(1.6)}.demo-mini{background:#ffffff24;border-radius:6px;width:96.5px;height:30px;position:absolute;top:3px}.demo-page-split{box-shadow:none;background:0 0}.demo-pane{--icon:#0009;--off:#0000004d;--host:#000000ac;--line:#00000009;--hover:#0000000f;--press:#0000001a;background:#fff;border-radius:6px;height:780px;position:absolute;top:0;overflow:hidden;box-shadow:0 0 0 .5px #00000014}.demo-pane-dark{--icon:#ffffffc2;--off:#ffffff6b;--host:#ffffffe6;--line:#ffffff0a;--hover:#ffffff1f;--press:#ffffff2e}.demo-pane-on:after{content:"";z-index:1;border-radius:inherit;pointer-events:none;border:1px solid #47ccbb;position:absolute;inset:0}.demo-pane-bar{border-bottom:1px solid var(--line);height:32px;position:relative}.demo-pane-host{color:var(--host);justify-content:center;align-items:center;gap:8.5px;font-size:13px;display:flex;position:absolute;inset:0}.demo-pane-body{position:absolute;inset:32px 0 0;overflow:hidden}.demo-backdrop{position:absolute;inset:0}.demo-bar{color:#3c3d3f;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background:#f8f8f8f5;border-radius:12px;width:766px;font-weight:500;position:absolute;top:228.8px;left:257px;overflow:hidden;box-shadow:0 0 0 .5px #0000002e,0 24px 94px #00000080}.demo-bar-dark{color:#e4e5e9;background:#141517cc}.demo-input{border-bottom:1px solid #0000001a;height:64px;margin:0 12px;font-size:18px;line-height:64.5px;position:relative}.demo-field{font:inherit;opacity:0;cursor:text;border:0;padding-left:40px;position:absolute;inset:0 40px 0 0}.demo-bar-dark .demo-input{border-bottom-color:#ffffff1a}.demo-info{opacity:.8;background:#0000000d;border-radius:50%;place-items:center;width:24px;height:24px;display:grid;position:absolute;top:20px;left:708px}.demo-bar-dark .demo-info{background:#ffffff14}.demo-placeholder{color:#bbb}.demo-bar-dark .demo-placeholder{color:#5a5c5d}.demo-caret{background:#3b6fdc;border-radius:1px;width:2px;height:22px;margin:0 0 -4px 1px;animation:1s step-end infinite demo-blink;display:inline-block}@keyframes demo-blink{50%{opacity:0}}.demo-rows{padding:6px 10px 12px}.demo-option{white-space:nowrap;cursor:pointer;border-radius:8px;align-items:center;height:46px;margin-bottom:4px;padding:2px 14px 0;display:flex;position:relative}.demo-option:last-child{margin-bottom:0}.demo-option:hover{background:#0000000a}.demo-bar-dark .demo-option:hover{background:#ffffff0f}.demo-option-on,.demo-option-on:hover,.demo-bar-dark .demo-option-on:hover{background:var(--tint);color:#fff;font-weight:600}.demo-detail{color:#3c3d3f73}.demo-bar-dark .demo-detail{color:#676868}.demo-switch{color:#3c3d3f66;margin-left:auto;font-weight:400}.demo-option-on .demo-switch{color:#fff;font-weight:600}.demo-arrow{color:#3c3d3f;background:#0000000d;border-radius:5px;place-items:center;width:24px;height:24px;margin-left:10px;display:grid}.demo-option-on .demo-arrow{color:var(--tint);background:#fff}.demo-badge{background:#fff;border-radius:6px;place-items:center;width:24px;height:24px;margin:0 8px 0 -4px;display:grid}.demo-library{cursor:pointer;transition:transform var(--spring-arc-ms) var(--spring-arc);background-size:100% 100%;position:absolute;inset:0}.demo-panel{border-radius:10px;width:354px;height:478px;position:absolute;overflow:hidden;box-shadow:0 0 0 .5px #0003,0 22px 60px #003a5f4d,0 6px 16px #003a5f1f}.demo-panel-state{background-size:100% 100%;transition:opacity .45s;position:absolute;inset:0}.demo-pad{pointer-events:none;width:340px;height:340px;position:absolute;top:7px;left:7px}.demo-handle{pointer-events:auto;touch-action:none;cursor:grab;border:solid #fff;border-radius:50%;transition:left .45s,top .45s,background-color .45s;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 6px #0000004d,0 0 6px #0000004d,inset 0 0 6px #0000004d}.demo-dragging .demo-handle{cursor:grabbing;transition:none}.demo-dragging .demo-panel-state,.demo-dragging .demo-thumb,.demo-dragging .demo-knob,.demo-dragging .demo-lit{transition:none}.demo-swatch{cursor:pointer;border-radius:50%;width:23.5px;height:23.5px;position:absolute;top:361px}.demo-mode{cursor:pointer;border-radius:7px;position:absolute}.demo-mode:active,.demo-mode[data-press]{opacity:.7}.demo-mode i{-webkit-mask:var(--m) center / 100% 100% no-repeat;mask:var(--m) center / 100% 100% no-repeat;-webkit-mask:var(--m) center / 100% 100% no-repeat;transition:background-color .45s;position:absolute;inset:0}.demo-tap{pointer-events:auto;cursor:pointer;justify-content:center;align-items:center;font-size:13px;font-weight:600;display:flex;position:absolute;inset:0}.demo-slider,.demo-dial{touch-action:none;cursor:pointer;position:absolute}.demo-slider svg,.demo-dial svg{display:block;overflow:visible}.demo-thumb,.demo-knob{transition:transform .45s}.demo-lit{transition:clip-path .45s}.demo-cursor{pointer-events:none;filter:drop-shadow(0 1px 1.5px #00000059);will-change:transform;width:22px;height:30px;transition:opacity .3s;position:absolute;top:0;left:0}.demo-cursor svg{transform-origin:3px 3px;transition:transform 90ms ease-out;display:block}.demo-cursor-down svg{transform:scale(.88)}.demo-sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.demo-stage *,.demo-stage :before{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}}