.demo-experience{--demo-ink:#1c2229;--demo-muted:#4c5763;--demo-faint:#6b7680;--demo-canvas:#f3f5f0;--demo-panel:#f7f8f4;--demo-surface:#fff;--demo-surface-strong:#edf0eb;--demo-line:#d0d6d2;--demo-line-strong:#aeb8b3;--demo-cyan:#0f9bb8;--demo-cyan-deep:#0a7189;--demo-cyan-soft:#e8f7fa;--demo-yellow:#dfb640;--demo-yellow-soft:#fff7d8;--demo-success:#16884f;--demo-focus:#096e83;color:var(--demo-ink);text-align:left;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.demo-experience *,.demo-experience :before,.demo-experience :after{box-sizing:border-box}.demo-experience button,.demo-experience input{font:inherit}.demo-experience button{color:inherit}.demo-experience__frame{background:var(--demo-panel);border:1px solid #29343a;border-radius:13px;overflow:hidden;box-shadow:0 18px 46px #0929322e}.demo-experience__topline{border-bottom:1px solid var(--demo-line);background:var(--demo-panel);justify-content:space-between;align-items:center;gap:12px;min-height:38px;padding:6px 8px 6px 11px;display:flex}.demo-experience__topline>div,.demo-experience__controls{align-items:center;gap:7px;display:flex}.demo-experience__mode{color:var(--demo-cyan-deep);letter-spacing:.07em;text-transform:uppercase;font-family:IBM Plex Mono,monospace;font-size:.62rem;font-weight:600}.demo-experience__pause-note{color:var(--demo-faint);font-size:.65rem}.demo-control-button,.demo-icon-button{border:1px solid var(--demo-line-strong);background:var(--demo-surface);cursor:pointer;border-radius:5px;justify-content:center;align-items:center;display:inline-flex}.demo-control-button{gap:4px;min-height:25px;padding:3px 8px;font-size:.68rem;font-weight:600}.demo-control-button:disabled{cursor:not-allowed;opacity:.44}.demo-progress{background:var(--demo-line);height:2px;overflow:hidden}.demo-progress__fill{transform-origin:0;background:var(--demo-cyan);width:100%;height:100%;display:block;transform:scaleX(0)}.demo-experience__viewport{background:var(--demo-canvas);grid-template-columns:minmax(0,1fr) 360px;height:560px;min-height:560px;display:grid}.demo-browser{background:#f8f9fb;flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.demo-browser__titlebar{background:#dfe4e7;border-bottom:1px solid #bdc5ca;align-items:flex-end;gap:9px;min-height:37px;padding:7px 8px 0;display:flex}.demo-browser__window-controls{gap:5px;padding:0 2px 10px;display:flex}.demo-browser__window-controls i{background:#ef6a61;border:1px solid #0000001f;border-radius:50%;width:8px;height:8px}.demo-browser__window-controls i:nth-child(2){background:#e7b54f}.demo-browser__window-controls i:nth-child(3){background:#55b865}.demo-browser__tabs{flex:1;align-items:flex-end;gap:2px;min-width:0;height:30px;display:flex;overflow:hidden}.demo-browser-tab{cursor:pointer;color:#344047;white-space:nowrap;background:#ccd3d7;border:0;border-radius:7px 7px 0 0;flex:95px;align-items:center;gap:6px;min-width:62px;max-width:125px;height:28px;padding:0 8px;font-size:.61rem;display:flex;overflow:hidden}.demo-browser-tab--tracking{background:#bcc6cb;flex:0 148px;min-width:128px;max-width:148px;font-weight:620}.demo-browser-tab[data-active]{color:#172027;background:#f8f9fb}.demo-browser-tab>span:last-child{text-overflow:ellipsis;overflow:hidden}.demo-browser-tab__favicon{color:#fff;background:#0f9bb8;border-radius:3px;flex:none;place-items:center;width:14px;height:14px;font-size:.5rem;font-weight:700;display:grid}.demo-browser-tab__brand-icon{object-fit:contain;flex:none;width:16px;height:16px}.demo-browser__overflow,.demo-browser__new-tab{color:#4c5961;flex:none;place-items:center;height:27px;display:grid}.demo-browser__overflow{min-width:28px;font-size:.6rem;font-weight:650}.demo-browser__new-tab{width:24px}.demo-browser__toolbar{background:#f6f8f9;border-bottom:1px solid #d5dade;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;min-height:39px;padding:6px 9px;display:grid}.demo-browser__nav,.demo-browser__toolbar-actions{color:#53616a;align-items:center;gap:7px;display:flex}.demo-browser__address{color:#53616a;text-overflow:ellipsis;white-space:nowrap;background:#fff;border:1px solid #d5dade;border-radius:14px;align-items:center;gap:6px;min-width:0;height:27px;padding:0 10px;font-size:.62rem;display:flex;overflow:hidden}.demo-browser__page{background:#fff;flex:1;min-height:0;overflow:hidden}.demo-page{background:#fff;height:100%}.demo-page__masthead{color:#3c474e;border-bottom:1px solid #e5e8e9;justify-content:space-between;align-items:center;height:44px;padding:0 17px;font-size:.66rem;display:flex}.demo-page__masthead>div{align-items:center;gap:7px;display:flex}.demo-page__masthead>span{color:#748087}.demo-page__site-icon{color:#fff;background:#1d2730;border-radius:5px;place-items:center;width:20px;height:20px;font-size:.58rem;display:grid}.demo-page__layout{grid-template-columns:116px minmax(0,1fr);height:calc(100% - 44px);display:grid}.demo-page__layout nav{background:#f7f8f8;border-right:1px solid #e5e8e9;flex-direction:column;gap:11px;padding:20px 15px;display:flex}.demo-page__layout nav span{background:#d8dddf;border-radius:2px;height:7px}.demo-page__layout nav span:nth-child(2){width:78%}.demo-page__layout nav span:nth-child(3){width:64%}.demo-page__layout article{width:min(100%,580px);padding:clamp(30px,6vw,60px)}.demo-page__layout article>p:first-child{color:#0a7189;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;font-size:.62rem;font-weight:700}.demo-page__layout h2{color:#1d2730;letter-spacing:-.045em;max-width:16ch;margin:0 0 7px;font-size:clamp(1.55rem,3.1vw,2.45rem);font-weight:680;line-height:1.04}.demo-page__host{color:#6b757c;margin:0;font-size:.7rem}.demo-page__content{gap:10px;max-width:480px;margin-top:34px;display:grid}.demo-page__content>span{background:#e0e4e5;border-radius:3px;width:100%;height:7px}.demo-page__content>span:nth-child(2){width:82%}.demo-page__content>span:nth-child(3){width:64%}.demo-page__content>div{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;display:grid}.demo-page__content i{background:#f7f8f8;border:1px solid #e0e4e5;border-radius:5px;height:52px}.demo-page__empty{color:#6b757c;align-content:center;place-items:center;gap:8px;height:100%;display:grid}.demo-panel{border-left:1px solid var(--demo-line-strong);background:var(--demo-panel);flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.demo-panel__header{justify-content:space-between;align-items:center;gap:8px;min-height:30px;padding:4px 7px;display:flex}.demo-panel__open-state{border:1px solid var(--demo-line);background:var(--demo-surface);color:var(--demo-faint);border-radius:999px;padding:2px 7px;font-size:.61rem;font-weight:650}.demo-panel__utility-actions{gap:4px;display:flex}.demo-panel__utility-actions span,.demo-panel__utility-actions button{border:1px solid var(--demo-line);background:var(--demo-surface);width:22px;height:22px;color:var(--demo-muted);border-radius:5px;place-items:center;padding:0;display:grid}.demo-panel__utility-actions button{cursor:pointer}.demo-panel__identity{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px;min-width:0;min-height:24px;padding:0 7px 4px;display:grid}.demo-panel__identity strong{text-overflow:ellipsis;white-space:nowrap;font-size:.65rem;font-weight:620;overflow:hidden}.demo-panel__identity>span{color:var(--demo-faint);white-space:nowrap;font-size:.58rem}.demo-panel__tools{grid-template-columns:minmax(0,1fr) 96px;gap:5px;padding:0 7px 7px;display:grid}.demo-search{border:1px solid var(--demo-line-strong);background:var(--demo-surface);min-width:0;height:25px;color:var(--demo-faint);border-radius:5px;align-items:center;gap:6px;padding:0 7px;display:flex}.demo-search input{width:100%;min-width:0;color:var(--demo-ink);text-overflow:ellipsis;background:0 0;border:0;outline:0;padding:0;font-size:.64rem}.demo-search input::placeholder{color:var(--demo-faint);opacity:1}.demo-scope-toggle{border:1px solid var(--demo-line-strong);background:var(--demo-surface);border-radius:5px;gap:1px;height:25px;padding:2px;display:flex}.demo-scope-toggle button{min-width:0;height:19px;color:var(--demo-muted);cursor:pointer;background:0 0;border:0;border-radius:3px;flex:50%;padding:0 4px;font-size:.61rem;font-weight:600;line-height:1}.demo-scope-toggle button[aria-pressed=true]{background:var(--demo-ink);color:var(--demo-panel)}.demo-panel__save-window{grid-template-columns:minmax(0,1fr) 96px;gap:5px;padding:0 7px 7px;display:grid}.demo-panel__save-window input,.demo-panel__save-window button{border:1px solid var(--demo-line-strong);background:var(--demo-surface);min-width:0;height:25px;color:var(--demo-ink);border-radius:5px;font-size:.61rem}.demo-panel__save-window input{text-overflow:ellipsis;outline:0;width:100%;padding:0 7px}.demo-panel__save-window input::placeholder{color:var(--demo-faint);opacity:1}.demo-panel__save-window button{cursor:pointer;white-space:nowrap;justify-content:center;align-items:center;gap:4px;padding:0 6px;font-weight:650;display:inline-flex}.demo-workspace-tree{scrollbar-width:thin;flex:auto;align-content:start;gap:5px;min-height:0;padding:0 7px 8px;display:grid;overflow-y:auto}.demo-folder,.demo-workspace-row{border:1px solid var(--demo-line);background:var(--demo-surface);border-radius:7px;overflow:hidden}.demo-folder{border-left:3px solid var(--demo-cyan);background:color-mix(in srgb, var(--demo-cyan) 7%, var(--demo-surface))}.demo-folder__header{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px;min-width:0;min-height:27px;padding:2px 3px;display:grid}.demo-folder__toggle{cursor:pointer;text-align:left;background:0 0;border:0;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:5px;width:100%;min-width:0;min-height:22px;padding:2px;display:grid}.demo-folder__toggle>span{text-overflow:ellipsis;white-space:nowrap;font-size:.68rem;font-weight:650;overflow:hidden}.demo-folder__toggle small{color:var(--demo-faint);text-overflow:ellipsis;white-space:nowrap;font-size:.54rem;overflow:hidden}.demo-folder__actions{flex:none;gap:1px;display:flex}.demo-folder__workspaces{border-top:1px solid color-mix(in srgb, var(--demo-line) 72%, transparent);gap:4px;padding:4px;display:grid}.demo-workspace-row[data-accent-edge=current-workspace]{border-color:var(--demo-line);border-left:3px solid var(--demo-cyan)}.demo-workspace-row[data-current] .demo-workspace-row__copy strong{color:var(--demo-cyan-deep)}.demo-workspace-row__main{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1px;min-height:27px;padding:2px 3px;display:grid}.demo-workspace-row__toggle{width:20px;height:20px;color:var(--demo-muted);cursor:pointer;background:0 0;border:0;border-radius:4px;place-items:center;padding:0;display:inline-grid}.demo-workspace-row__open{cursor:pointer;text-align:left;background:0 0;border:0;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px;min-width:0;padding:2px;display:grid}.demo-workspace-row__icon{border:1px solid var(--demo-line);background:var(--demo-panel);width:18px;height:18px;color:var(--demo-cyan-deep);border-radius:5px;place-items:center;display:grid}.demo-workspace-row__copy{align-items:baseline;gap:5px;min-width:0;display:flex}.demo-workspace-row__copy strong,.demo-workspace-row__copy span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.demo-workspace-row__copy strong{letter-spacing:-.01em;font-size:.72rem;font-weight:620}.demo-workspace-row__copy span{color:var(--demo-faint);flex:none;font-size:.59rem}.demo-workspace-row__status{background:var(--demo-success);border-radius:50%;width:8px;height:8px}.demo-workspace-row__status[data-current]{background:var(--demo-cyan)}.demo-workspace-row__actions{flex:none;gap:1px;display:flex}.demo-icon-button{width:22px;height:22px;color:var(--demo-muted);border-color:#0000;flex:none;padding:0}.demo-workspace-row__tabs{border-top:1px solid var(--demo-line);background:0 0;padding:4px 3px 5px}.demo-create{border:2px solid color-mix(in srgb, var(--demo-ink) 30%, transparent);background:color-mix(in srgb, var(--demo-surface-strong) 54%, var(--demo-panel));border-radius:6px;flex:none;gap:5px;margin:0 7px 7px;padding:6px 7px 7px;display:grid}.demo-create__label{color:var(--demo-faint);letter-spacing:.06em;text-transform:uppercase;margin:0;font-size:.55rem;font-weight:700;line-height:1}.demo-create__row{align-items:center;gap:5px;min-width:0;display:grid}.demo-create__row--folder{grid-template-columns:minmax(0,1fr) auto}.demo-create__row--workspace{grid-template-columns:minmax(0,1fr) 32px auto}.demo-create input{border:1px solid var(--demo-line-strong);background:var(--demo-surface);width:100%;min-width:0;height:25px;color:var(--demo-ink);text-overflow:ellipsis;border-radius:5px;outline:0;padding:0 7px;font-size:.62rem}.demo-create__row--workspace input:nth-child(2){text-align:center;padding-inline:0}.demo-create__button{border:1px solid var(--demo-line-strong);background:var(--demo-surface);cursor:pointer;white-space:nowrap;border-radius:5px;justify-content:center;align-items:center;gap:4px;height:25px;padding:0 7px;font-size:.6rem;font-weight:650;display:inline-flex}.demo-create__button:disabled{cursor:not-allowed;opacity:.48}.demo-create__swatches{align-items:center;gap:5px;min-height:14px;display:flex}.demo-create__swatches button{border:2px solid var(--demo-surface);width:13px;height:13px;box-shadow:0 0 0 1px var(--demo-line-strong);cursor:pointer;border-radius:4px;padding:0}.demo-create__swatches button[aria-pressed=true]{box-shadow:0 0 0 1px var(--demo-ink), 0 0 0 3px color-mix(in srgb, var(--demo-cyan) 20%, transparent)}.demo-tab-list{gap:4px;margin:0;padding:0;list-style:none;display:grid}.demo-tab-group{color:var(--demo-faint);letter-spacing:.06em;text-transform:uppercase;padding:3px 4px 0;font-size:.49rem;font-weight:700}.demo-tab-row{border:1px solid var(--demo-line);background:var(--demo-surface);border-radius:5px;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-width:0;display:grid;overflow:hidden}.demo-tab{cursor:pointer;text-align:left;background:0 0;border:0;border-radius:4px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px;width:100%;min-width:0;min-height:30px;padding:3px 5px;display:grid}.demo-tab__favicon{border:1px solid var(--demo-line);background:var(--demo-surface-strong);width:18px;height:18px;color:var(--demo-muted);border-radius:4px;place-items:center;font-family:IBM Plex Mono,monospace;font-size:.5rem;font-weight:700;display:grid}.demo-tab__copy{flex-direction:column;gap:1px;min-width:0;display:flex}.demo-tab__copy strong,.demo-tab__copy span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.demo-tab__copy strong{font-size:.68rem;font-weight:590;line-height:1.05}.demo-tab__copy span{color:var(--demo-faint);font-size:.59rem;line-height:1.05}.demo-tab__actions{color:var(--demo-faint);gap:1px;padding-right:3px;display:flex}.demo-tab__action{width:22px;height:22px;color:var(--demo-muted);cursor:pointer;background:0 0;border:0;border-radius:4px;place-items:center;padding:0;display:grid}.demo-tab-list__empty{border:1px dashed var(--demo-line-strong);color:var(--demo-muted);border-radius:5px;margin:5px;padding:10px;font-size:.61rem;line-height:1.4}.demo-experience :focus-visible{outline:2px solid var(--demo-focus);outline-offset:1px}@media (hover:hover) and (pointer:fine){.demo-control-button:hover:not(:disabled),.demo-icon-button:hover,.demo-panel__utility-actions button:hover,.demo-panel__save-window button:hover:not(:disabled),.demo-create__button:hover:not(:disabled){border-color:var(--demo-cyan);background:var(--demo-cyan-soft)}.demo-folder__toggle:hover,.demo-workspace-row__toggle:hover,.demo-workspace-row__open:hover,.demo-tab:hover,.demo-tab__action:hover{background:var(--demo-surface-strong)}}@media (width<=880px){.demo-experience__viewport{grid-template-columns:minmax(0,1fr) 330px}.demo-panel__tools,.demo-panel__save-window{grid-template-columns:minmax(0,1fr) 84px}}@media (width<=720px){.demo-experience__viewport{grid-template-columns:1fr;height:auto;min-height:0}.demo-browser{min-height:390px}.demo-panel{border-top:1px solid var(--demo-line-strong);border-left:0;min-height:560px}.demo-page__layout{grid-template-columns:78px minmax(0,1fr)}}@media (width<=520px){.demo-experience__topline{flex-direction:column;align-items:flex-start}.demo-experience__topline>div,.demo-experience__controls{width:100%}.demo-experience__controls{justify-content:flex-end}.demo-browser__window-controls,.demo-page__layout nav{display:none}.demo-page__layout{grid-template-columns:1fr}.demo-browser-tab:nth-of-type(n+5){display:none}.demo-browser-tab--tracking{display:flex}}@media (prefers-color-scheme:dark){.demo-experience{--demo-ink:#eef3f1;--demo-muted:#b5c0bc;--demo-faint:#8e9c98;--demo-canvas:#111718;--demo-panel:#172022;--demo-surface:#202a2c;--demo-surface-strong:#2a3537;--demo-line:#374446;--demo-line-strong:#59696c;--demo-cyan:#3ac8df;--demo-cyan-deep:#76d8e8;--demo-cyan-soft:#15363c;--demo-yellow:#e6c247;--demo-yellow-soft:#3d3518;--demo-success:#38ad72;--demo-focus:#f0cf54}.demo-browser,.demo-browser__page,.demo-page{background:#182022}.demo-browser__titlebar{background:#2c3739;border-color:#3a4649}.demo-browser-tab{color:#c5cfcc;background:#354144}.demo-browser-tab[data-active],.demo-browser__toolbar,.demo-browser__address{color:#e6eeec;background:#182022}.demo-browser__toolbar,.demo-browser__address,.demo-page__masthead,.demo-page__layout nav{border-color:#354245}.demo-page__masthead,.demo-page__masthead>span,.demo-browser__nav,.demo-browser__toolbar-actions,.demo-browser__address{color:#aebbb7}.demo-page__layout nav{background:#141b1d}.demo-page__layout nav span,.demo-page__content>span{background:#354144}.demo-page__layout h2{color:#eef3f1}.demo-page__content i{background:#202a2c;border-color:#354144}}@media (prefers-reduced-motion:reduce){.demo-experience *,.demo-experience :before,.demo-experience :after{scroll-behavior:auto!important;transition-duration:.01ms!important}.demo-progress__fill{display:none}}
