@ai-ecoverse/slicc-spectrum 1.107.2 → 1.108.1

package/dist/slicc-ui.js

@@ -51747,7 +51747,7 @@ var SliccDiffPanel = class extends ThemedElement {
 // src/app/lucide.ts
 var library = null;
 function load2() {
-  library ??= import("./chunk-AI3R2QZY.js");
+  library ??= import("./chunk-FPDH5YML.js");
   return library;
 }
 function pascal(name) {
@@ -53808,7 +53808,21 @@ var accountStatus = {
   rejected: ["notice", "Rejected"],
   "needs-sign-in": ["neutral", "Needs sign-in"],
   "sign-in-expired": ["notice", "Sign-in expired"],
-  unreachable: ["notice", "Unreachable"]
+  unreachable: ["notice", "Unreachable"],
+  connecting: ["info", "Connecting\u2026"],
+  "needs-token": ["neutral", "Needs a token"],
+  failed: ["negative", "Couldn\u2019t connect"],
+  disabled: ["neutral", "Disabled"],
+  refused: ["negative", "Refused"],
+  removing: ["info", "Removing\u2026"]
+};
+var serverStatus = {
+  connecting: "connecting",
+  "needs-secret": "needs-token",
+  "needs-auth": "needs-sign-in",
+  failed: "failed",
+  disabled: "disabled",
+  refused: "refused"
 };
 var authHints = {
   "api-key": "API key",
@@ -53830,6 +53844,25 @@ var removeBodies = {
   oauth: "Its sign-in is deleted from the vault. Models from it stop working.",
   local: "Models from it stop working."
 };
+var serverGone = "Agents can\u2019t use it any more.";
+var serversFailure = "mcp";
+function serverLeft(account, left) {
+  const url = left.some(([part2]) => part2 === "url");
+  const record = left.some(([part2]) => part2 === "record");
+  const held2 = account.auth === "oauth" ? "sign-in" : "token";
+  const locked = left.some(([, error]) => isVaultFailure(error) && error.code === "EACCES");
+  const what = !url ? `its ${held2} stayed in the vault` : record ? `its ${held2} and URL stayed in the vault` : "the vault kept its URL";
+  const next = url ? locked ? "Unlock the vault, then add the server and remove it again." : "Add the server and remove it again." : locked ? "Unlock the vault, then remove it under Secrets." : "Open Secrets to remove it.";
+  return `${account.provider} is removed, but ${what}. ${next}`;
+}
+var refusedEntry = "This entry was refused. Remove it and add it again here.";
+var urlSecret = "This URL contains a secret. Remove it, turn on Uses a token, and paste the token when you connect.";
+var sentence2 = (text4) => text4.charAt(0).toUpperCase() + text4.slice(1);
+function serverRefusal(edit) {
+  if (edit.code === "url-secret") return { field: "url", message: urlSecret };
+  return { field: "form", message: sentence2(edit.reason) };
+}
+var serverName = /^[A-Za-z0-9_-]+$/;
 function draft(option) {
   return {
     id: option.id,
@@ -53874,6 +53907,7 @@ function words(message, word2) {
   return new RegExp(`\\b${word2.replace(/[^a-z0-9 ]/gi, "\\$&")}\\b`, "i").test(message);
 }
 var popup = (account) => account.group === "mcp" && account.auth === "oauth";
+var signsIn = (account) => account.group !== "mcp" || !(account.auth === "local" || account.state === "disabled" || account.state === "refused");
 var dual = (account) => account.auth === "oauth" && account.secret === "api-key";
 var signInMethod = (account) => dual(account) ? { method: "sign-in" } : void 0;
 var start = (options2, value) => options2.some((option) => option.value === value) ? value : options2[0]?.value ?? "";
@@ -53902,7 +53936,13 @@ var SliccSettings = class extends ThemedElement {
     query: { state: true },
     filled: { state: true },
     developing: { state: true },
-    developerError: { state: true }
+    developerError: { state: true },
+    serverOpen: { state: true },
+    serverBusy: { state: true },
+    serverProblem: { state: true },
+    serverToken: { state: true },
+    refusals: { state: true },
+    removing: { state: true }
   };
   #waits = new SignInWaits(() => this.requestUpdate());
   #copies = new SignInCopies(() => this.requestUpdate());
@@ -53912,6 +53952,7 @@ var SliccSettings = class extends ThemedElement {
   #wanted = null;
   #developerPort;
   #call = 0;
+  #refusalCall = 0;
   #scroll = new ViewScroll(this, "settings:scroll", { scroller: () => this, rows: "[data-id]" });
   constructor() {
     super();
@@ -53926,6 +53967,12 @@ var SliccSettings = class extends ThemedElement {
     this.filled = /* @__PURE__ */ new Set();
     this.developing = false;
     this.developerError = null;
+    this.serverOpen = false;
+    this.serverBusy = false;
+    this.serverProblem = null;
+    this.serverToken = false;
+    this.refusals = {};
+    this.removing = /* @__PURE__ */ new Set();
   }
   static styles = [
     fieldStyles,
@@ -54089,6 +54136,9 @@ var SliccSettings = class extends ThemedElement {
         align-items: center;
         gap: var(--swc-spacing-75);
       }
+      [data-group='mcp'] .actions {
+        justify-content: flex-end;
+      }
       .notes {
         grid-column: 1 / -1;
         display: grid;
@@ -54109,6 +54159,16 @@ var SliccSettings = class extends ThemedElement {
         flex: none;
         margin-block-start: var(--swc-spacing-50);
       }
+      .server {
+        display: grid;
+        gap: var(--swc-spacing-200);
+        max-width: 420px;
+        margin-block-start: var(--swc-spacing-300);
+      }
+      .entry {
+        display: grid;
+        gap: var(--swc-spacing-75);
+      }
       .other-way {
         justify-self: start;
         padding: 0;
@@ -54287,6 +54347,10 @@ var SliccSettings = class extends ThemedElement {
       update();
     };
     queueMicrotask(() => settleModels(model));
+    this.removing = /* @__PURE__ */ new Set();
+    this.refusals = {};
+    if (this.failure?.id === serversFailure) this.failure = null;
+    void this.#readRefusals(model);
     if (model.updates !== this.#developerPort) {
       this.#developerPort = model.updates;
       this.#call += 1;
@@ -54299,7 +54363,11 @@ var SliccSettings = class extends ThemedElement {
       ...super.subscribe(model),
       ...developer && model.updates ? [model.updates.on("items", update)] : [],
       model.settings.on("settings", settle3),
-      model.settings.on("accounts", settle3),
+      model.settings.on("accounts", () => {
+        this.#settleRemoved(model);
+        void this.#readRefusals(model);
+        settle3();
+      }),
       model.settings.on("providers", update),
       ...model.vault ? [model.vault.on("status", update), model.vault.on("list", update)] : []
     ];
@@ -54671,7 +54739,7 @@ var SliccSettings = class extends ThemedElement {
   #moved(account) {
     const url = this.#mcpUrl(account);
     const old = registrations2()[serverOf(account)] ?? this.#pinned(account);
-    return url && old && old !== url ? url : null;
+    return signsIn(account) && url && old && old !== url ? url : null;
   }
   async #reconnectMcp(account, url) {
     const model = this.model;
@@ -54935,12 +55003,14 @@ var SliccSettings = class extends ThemedElement {
     const accounts = this.model?.settings.accounts() ?? [];
     if (accounts.some((account) => this.#signingIn(account))) return "signing in";
     if (this.entering !== null) return "a key is being entered";
+    if (this.serverOpen) return "a server is being added";
     return this.picking ? "a provider is being added" : null;
   }
   #signingIn(account) {
     return account.status === "signing-in" || account.auth !== "api-key" && account.status !== "connected" && this.entering !== account.id && this.pending.has(account.id);
   }
   #action(account) {
+    if (!signsIn(account)) return A;
     if (this.#signingIn(account) && this.model?.settings.cancel) {
       return b`<swc-button
         size="m"
@@ -54957,6 +55027,7 @@ var SliccSettings = class extends ThemedElement {
         data-action="disconnect"
         accessible-label=${`Disconnect ${account.provider}`}
         ?pending=${this.pending.has(account.id)}
+        ?disabled=${this.removing.has(account.id)}
         @click=${() => this.#disconnect(account)}
       >Disconnect</swc-button>`;
     }
@@ -54970,16 +55041,19 @@ var SliccSettings = class extends ThemedElement {
       data-action="connect"
       accessible-label=${signs ? `Sign in to ${account.provider}` : `${label} ${account.provider}`}
       ?pending=${busy}
-      ?disabled=${entering || !!account.blocked}
+      ?disabled=${entering || !!account.blocked || this.removing.has(account.id)}
       @click=${() => this.#start(account)}
     >${label}</swc-button>`;
   }
   #status(account) {
+    if (this.removing.has(account.id)) return "removing";
     if (this.#signingIn(account)) return "signing-in";
     if (account.status === "connected" && account.blocked) return "unreachable";
     if (account.status === "expired" && account.auth === "api-key") return "rejected";
-    if (popup(account) && account.status === "disconnected") return "needs-sign-in";
     if (popup(account) && account.status === "expired") return "sign-in-expired";
+    const server = account.state && serverStatus[account.state];
+    if (server) return server;
+    if (popup(account) && account.status === "disconnected") return "needs-sign-in";
     return account.status;
   }
   #account(account) {
@@ -54992,7 +55066,7 @@ var SliccSettings = class extends ThemedElement {
           </div>` : A;
     return b`<div class="account" data-id=${account.id}>
       <span class="provider">${account.provider}</span>
-      <span class="identity">${account.identity}${this.#inVault(account) ? b`<span class="kept" data-store="vault">${account.identity ? " \xB7 " : ""}${kept2(account)}</span>` : A}</span>
+      <span class="identity">${account.identity}${this.#inVault(account) ? b`<span class="kept" data-store="vault">${account.identity ? " \xB7 " : ""}${kept2(account)}</span>` : A}${this.#refusedNote(account)}</span>
       <swc-status-light class="state" variant=${variant}>${label}</swc-status-light>
       ${this.#actions(account)}
     </div>
@@ -55000,6 +55074,11 @@ var SliccSettings = class extends ThemedElement {
     ${this.#movedNote(account)}
     ${this.adding?.id === account.id ? A : b`${this.#key(account)}${this.#otherKey(account)}${failure2}`}`;
   }
+  #refusedNote(account) {
+    if (account.state !== "refused") return A;
+    const reason = this.refusals[serverOf(account)]?.reason;
+    return b`<span data-refusal>${account.identity ? " \xB7 " : ""}${reason ? sentence2(reason) : refusedEntry}</span>`;
+  }
   #otherKey(account) {
     if (this.entering !== account.id) return A;
     const other = this.#otherWay(account);
@@ -55007,35 +55086,41 @@ var SliccSettings = class extends ThemedElement {
   }
   #actions(account) {
     const moved2 = account.status === "connected" ? this.#moved(account) : null;
-    if (moved2)
-      return b`<div class="actions"><swc-button
-          size="m"
-          variant="accent"
-          data-action="reconnect-mcp"
-          accessible-label=${`Reconnect ${account.provider}`}
-          ?pending=${this.pending.has(account.id)}
-          @click=${() => this.#reconnectMcp(account, moved2)}
-        >Reconnect</swc-button>${this.#action(account)}</div>`;
-    if (this.#removable(account))
-      return b`<div class="actions">${this.#action(account)}${this.#removeButton(account)}</div>`;
-    return this.#action(account);
+    const removable = this.#removable(account);
+    if (!moved2 && !removable) return this.#action(account);
+    return b`<div class="actions">${moved2 ? this.#reconnect(account, moved2) : A}${this.#action(account)}${removable ? this.#removeButton(account) : A}</div>`;
+  }
+  #reconnect(account, url) {
+    return b`<swc-button
+      size="m"
+      variant="accent"
+      data-action="reconnect-mcp"
+      accessible-label=${`Reconnect ${account.provider}`}
+      ?pending=${this.pending.has(account.id)}
+      ?disabled=${this.removing.has(account.id)}
+      @click=${() => this.#reconnectMcp(account, url)}
+    >Reconnect</swc-button>`;
   }
   #removable(account) {
-    return !!this.#offered() && !!this.model?.settings.remove && account.group !== "mcp";
+    const settings = this.model?.settings;
+    if (account.group === "mcp") return !!settings?.removeServer;
+    return !!this.#offered() && !!settings?.remove;
   }
   #removeButton(account) {
     const id = `remove-${account.id}`;
     const label = `Remove ${account.provider}`;
+    const server = account.group === "mcp";
+    const removing = this.removing.has(account.id);
     return b`<swc-action-button
         id=${id}
         size="m"
         quiet
-        data-action="remove-account"
+        data-action=${server ? "remove-server" : "remove-account"}
         accessible-label=${label}
-        ?disabled=${this.pending.has(account.id)}
-        @click=${() => this.#remove(account)}
+        ?disabled=${this.pending.has(account.id) || removing}
+        @click=${() => server ? this.#removeServer(account) : this.#remove(account)}
         ><swc-icon-delete slot="icon"></swc-icon-delete></swc-action-button
-      ><swc-tooltip for=${id} placement="top">${label}</swc-tooltip>`;
+      >${removing ? A : b`<swc-tooltip for=${id} placement="top">${label}</swc-tooltip>`}`;
   }
   async #closeTip(id) {
     const tip = this.renderRoot.querySelector(
@@ -55071,6 +55156,201 @@ var SliccSettings = class extends ThemedElement {
     this.focusOn("[data-action=add-provider]");
     for (const field of account.fields ?? []) this.#bases.delete(`${account.id} ${field.name}`);
   }
+  #heldRecords(account, vault) {
+    const server = serverOf(account);
+    const name = recordName(account);
+    return (vault.list()?.secrets ?? []).filter(
+      (secret) => secret.kind === "mcp" && secret.state !== "removed" && (secret.server === server || secret.name === name)
+    ).map((secret) => secret.name);
+  }
+  #serverRecords(account, vault) {
+    const token = account.auth === "api-key" ? [recordName(account)] : [];
+    const names2 = /* @__PURE__ */ new Set([...token, ...this.#heldRecords(account, vault)]);
+    return [...names2].map((name) => [name, "mcp"]);
+  }
+  #removeServerBody(account) {
+    const vault = this.model?.vault;
+    if (!vault?.remove || !this.#heldRecords(account, vault).length) return serverGone;
+    const held2 = account.auth === "oauth" ? "sign-in" : "token";
+    return `Its ${held2} is deleted from the vault. ${serverGone}`;
+  }
+  #serverClear(model, account) {
+    const vault = model.vault;
+    const server = serverOf(account);
+    const records = vault?.remove ? this.#serverRecords(account, vault) : [];
+    const held2 = !!vault?.remove && this.#heldRecords(account, vault).length > 0;
+    const pinned = !!this.#pinned(account);
+    const url = registrations2()[server] ?? (held2 && !pinned && this.#mcpUrl(account));
+    return async () => {
+      const left = [];
+      for (const [name, kind] of records)
+        await gone2(vault, name, kind).catch((error) => left.push(["record", error]));
+      try {
+        if (url) await vault?.endpoints?.({ remove: { mcp: [{ server, url }] } });
+        register(server, void 0);
+      } catch (error) {
+        register(server, url);
+        left.push(["url", error]);
+      }
+      return left;
+    };
+  }
+  #markRemoving(id, on2) {
+    const rest = [...this.removing].filter((candidate) => candidate !== id);
+    this.removing = new Set(on2 ? [...rest, id] : rest);
+  }
+  async #readRefusals(model) {
+    const call = ++this.#refusalCall;
+    const refused3 = model.settings.accounts().some((account) => account.state === "refused");
+    if (!(refused3 && model.settings.refusals)) {
+      this.refusals = {};
+      return;
+    }
+    const refusals = await model.settings.refusals().catch(() => ({}));
+    if (call === this.#refusalCall && this.model === model) this.refusals = refusals;
+  }
+  #settleRemoved(model) {
+    const listed2 = new Set(model.settings.accounts().map((account) => account.id));
+    const left = [...this.removing].filter((id) => listed2.has(id));
+    if (left.length !== this.removing.size) this.removing = new Set(left);
+  }
+  async #removeServer(account) {
+    const model = this.model;
+    const { id } = account;
+    const title2 = `Remove ${account.provider}?`;
+    const body2 = this.#removeServerBody(account);
+    if (!await confirm({ title: title2, body: body2, action: "Remove" })) return;
+    if (this.model !== model) return;
+    clearValues(this.renderRoot);
+    if (this.entering === id) this.entering = null;
+    await this.#closeTip(`remove-${id}`);
+    this.#markRemoving(id, true);
+    this.failure = null;
+    const refused3 = (message) => {
+      this.#markRemoving(id, false);
+      if (this.model === model) this.failure = { id, message };
+    };
+    try {
+      const clear2 = this.#serverClear(model, account);
+      const edit = await model.settings.removeServer?.(id);
+      if (!edit.ok) return refused3(sentence2(edit.reason));
+      const left = await clear2();
+      if (this.model !== model) return;
+      if (left.length) this.failure = { id: serversFailure, message: serverLeft(account, left) };
+      this.focusOn("[data-action=add-server]");
+    } catch (error) {
+      refused3(failureText(error));
+    }
+  }
+  #openServerForm() {
+    this.serverProblem = null;
+    this.serverToken = false;
+    this.serverOpen = true;
+    void this.updateComplete.then(() => this.focusOn("[data-server-field=name]"));
+  }
+  #closeServerForm() {
+    this.serverProblem = null;
+    this.serverOpen = false;
+    void this.updateComplete.then(() => this.focusOn("[data-action=add-server]"));
+  }
+  #checkServer(name, url) {
+    if (!name) return { field: "name", message: "Name can\u2019t be empty" };
+    if (!serverName.test(name))
+      return { field: "name", message: "Use only letters, digits, _ and - in the name." };
+    if (!url) return { field: "url", message: "URL can\u2019t be empty" };
+    if (!this.#baseOf(url)) return { field: "url", message: "The URL must use https://." };
+    return null;
+  }
+  #submitServer(event2) {
+    event2.preventDefault();
+    if (this.serverBusy) return;
+    const form = event2.currentTarget;
+    const text4 = (field) => form.querySelector(`[data-server-field=${field}]`)?.value.trim();
+    const name = text4("name");
+    const url = text4("url");
+    const problem = this.#checkServer(name, url);
+    this.serverProblem = problem;
+    if (problem) {
+      this.focusOn(`[data-server-field=${problem.field}]`);
+      return;
+    }
+    void this.#addServer(name, this.serverToken ? { url, token: true } : { url });
+  }
+  async #addServer(name, entry) {
+    const model = this.model;
+    this.serverBusy = true;
+    try {
+      const edit = await model.settings.addServer?.(name, entry);
+      if (this.model !== model) return;
+      if (edit.ok) this.#closeServerForm();
+      else this.#refuseServer(serverRefusal(edit));
+    } catch (error) {
+      if (this.model === model) this.serverProblem = { field: "form", message: failureText(error) };
+    } finally {
+      this.serverBusy = false;
+    }
+  }
+  #refuseServer(problem) {
+    this.serverProblem = problem;
+    if (problem.field !== "form") this.focusOn(`[data-server-field=${problem.field}]`);
+  }
+  #serverNote(field) {
+    if (this.serverProblem?.field !== field) return A;
+    return b`<div class="problem" id=${`server-${field}-problem`} role="alert" data-problem=${field}>
+      <swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle>
+      <span>${this.serverProblem.message}</span>
+    </div>`;
+  }
+  #serverInput(field, type, help2) {
+    const invalid = this.serverProblem?.field === field;
+    const problem = invalid ? `server-${field}-problem ` : "";
+    return b`<input
+      type=${type}
+      autocomplete="off"
+      spellcheck="false"
+      data-server-field=${field}
+      aria-required="true"
+      aria-invalid=${invalid ? "true" : A}
+      aria-describedby=${`${problem}${help2}`}
+    />`;
+  }
+  #serverForm() {
+    return b`<form class="server" data-form="add-server" novalidate @submit=${(event2) => this.#submitServer(event2)} @keydown=${(event2) => this.#submitOnEnter(event2)}>
+      <div class="entry">
+        <label class="field"><span>Name</span>${this.#serverInput("name", "text", "server-name-help")}</label>
+        <p class="hint" id="server-name-help">Letters, digits, _ and -</p>
+        ${this.#serverNote("name")}
+      </div>
+      <div class="entry">
+        <label class="field"><span>URL</span>${this.#serverInput("url", "url", "server-url-help")}</label>
+        <p class="hint" id="server-url-help">The server’s https:// address</p>
+        ${this.#serverNote("url")}
+      </div>
+      <div class="entry">
+        <sp-switch data-server-field="token" @change=${(event2) => {
+      this.serverToken = this.#checked(event2);
+    }}>Uses a token</sp-switch>
+        ${this.serverToken ? b`<p class="hint" data-token-help>You paste the token when you connect the server. It stays in the vault.</p>` : A}
+      </div>
+      ${this.#serverNote("form")}
+      <div class="buttons">
+        <swc-button size="m" variant="accent" data-action="save" ?pending=${this.serverBusy} @click=${(event2) => this.#send(event2)}>Add</swc-button>
+        <swc-button size="m" variant="secondary" data-action="cancel" ?disabled=${this.serverBusy} @click=${() => this.#closeServerForm()}>Cancel</swc-button>
+      </div>
+    </form>`;
+  }
+  #serverList(servers) {
+    const add = !!this.model?.settings.addServer;
+    const failed2 = this.failure?.id === serversFailure;
+    if (!(servers.length || add || failed2)) return A;
+    return b`<h2>MCP servers</h2>
+      <div class="accounts" data-group="mcp">${c(
+      servers,
+      (account) => account.id,
+      (account) => this.#account(account)
+    )}${failed2 ? b`<div class="failure" role="alert" data-failure="servers"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${this.failure?.message}</span></div>` : A}</div>
+      ${add && this.serverOpen ? this.#serverForm() : add ? b`<div class="add"><swc-action-button size="m" quiet data-action="add-server" @click=${() => this.#openServerForm()}><swc-icon-add slot="icon"></swc-icon-add>Add server</swc-action-button></div>` : A}`;
+  }
   #notice(row, size4 = "long") {
     const needs = row.blocked;
     if (needs !== "cors-free-transport") return A;
@@ -55375,15 +55655,14 @@ var SliccSettings = class extends ThemedElement {
       </div>
       <h2 data-section="accounts">Accounts</h2>
       ${this.#providerList(providers)}
-      ${servers.length ? b`<h2>MCP servers</h2>
-              <div class="accounts" data-group="mcp">${servers.map((account) => this.#account(account))}</div>` : A}
+      ${this.#serverList(servers)}
       ${this.model?.vault ? b`<slicc-secrets .model=${this.model}></slicc-secrets>` : A}
     </div>`;
   }
 };
 
 // src/app/sprinkle-theme.css
-var sprinkle_theme_default = ':root {\n  --s2-gray-25: var(--swc-gray-25);\n  --s2-gray-50: var(--swc-gray-50);\n  --s2-gray-75: var(--swc-gray-75);\n  --s2-gray-100: var(--swc-gray-100);\n  --s2-gray-200: var(--swc-gray-200);\n  --s2-gray-300: var(--swc-gray-300);\n  --s2-gray-400: var(--swc-gray-400);\n  --s2-gray-500: var(--swc-gray-500);\n  --s2-gray-600: var(--swc-gray-600);\n  --s2-gray-700: var(--swc-gray-700);\n  --s2-gray-800: var(--swc-gray-800);\n  --s2-gray-900: var(--swc-gray-900);\n  --s2-gray-1000: var(--swc-gray-1000);\n\n  --s2-bg-base: var(--swc-background-base-color);\n  --s2-bg-layer-1: var(--swc-background-layer-1-color);\n  --s2-bg-layer-2: var(--swc-background-layer-2-color);\n  --s2-bg-elevated: var(--swc-background-elevated-color);\n  --s2-bg-sunken: var(--swc-background-pasteboard-color);\n\n  --s2-content-default: var(--swc-neutral-content-color-default);\n  --s2-content-secondary: var(--swc-neutral-subdued-content-color-default);\n  --s2-content-tertiary: var(--swc-gray-600);\n  --s2-content-disabled: var(--swc-disabled-content-color);\n  --s2-content-accent: var(--swc-accent-content-color-default);\n  --s2-content-negative: var(--swc-negative-content-color-default);\n  --s2-content-positive: var(--swc-positive-color-900);\n  --s2-content-notice: var(--swc-notice-color-900);\n  --s2-content-informative: var(--swc-informative-color-900);\n\n  --slicc-cone: #ef7000;\n  --slicc-scoop-blue: #3562ff;\n  --slicc-scoop-purple: #a962e8;\n  --slicc-scoop-teal: #2db9be;\n  --slicc-accent: #15d675;\n\n  --s2-accent: var(--swc-accent-background-color-default);\n  --s2-accent-hover: var(--swc-accent-background-color-hover);\n  --s2-accent-down: var(--swc-accent-background-color-down);\n\n  --s2-negative: var(--swc-negative-background-color-default);\n  --s2-positive: var(--swc-positive-background-color-default);\n  --s2-informative: var(--swc-informative-background-color-default);\n  --s2-notice: var(--swc-notice-background-color-default);\n\n  --s2-border-default: var(--swc-gray-300);\n  --s2-border-subtle: var(--swc-gray-200);\n  --s2-border-focus: var(--swc-focus-indicator-color);\n\n  --s2-font-family:\n    adobe-clean-spectrum-vf, "Adobe Clean Spectrum VF", adobe-clean, "Adobe Clean",\n    var(--swc-sans-font-family-stack);\n  --s2-font-mono: var(--swc-code-font-family-stack);\n\n  --s2-font-size-50: var(--swc-font-size-50);\n  --s2-font-size-75: var(--swc-font-size-75);\n  --s2-font-size-100: var(--swc-font-size-100);\n  --s2-font-size-200: var(--swc-font-size-200);\n  --s2-font-size-300: var(--swc-font-size-300);\n  --s2-font-size-400: var(--swc-font-size-400);\n  --s2-font-size-500: var(--swc-font-size-500);\n  --s2-font-size-600: var(--swc-font-size-600);\n\n  --s2-line-height-50: var(--swc-line-height-font-size-50);\n  --s2-line-height-75: var(--swc-line-height-font-size-75);\n  --s2-line-height-100: var(--swc-line-height-font-size-100);\n  --s2-line-height-200: var(--swc-line-height-font-size-200);\n  --s2-line-height-300: var(--swc-line-height-font-size-300);\n\n  --s2-spacing-50: var(--swc-spacing-75);\n  --s2-spacing-75: var(--swc-spacing-85);\n  --s2-spacing-100: var(--swc-spacing-100);\n  --s2-spacing-200: var(--swc-spacing-200);\n  --s2-spacing-300: var(--swc-spacing-300);\n  --s2-spacing-400: var(--swc-spacing-400);\n  --s2-spacing-500: var(--swc-spacing-500);\n  --s2-spacing-600: var(--swc-spacing-600);\n\n  --s2-radius-s: var(--swc-corner-radius-small-default);\n  --s2-radius-default: var(--swc-corner-radius-medium-default);\n  --s2-radius-l: var(--swc-corner-radius-large-default);\n  --s2-radius-xl: var(--swc-corner-radius-extra-large-default);\n  --s2-radius-pill: 9999px;\n\n  --s2-shadow-elevated: var(--swc-drop-shadow-elevated);\n  --s2-shadow-container: var(--swc-drop-shadow-emphasized);\n\n  --s2-transition-default: var(--swc-animation-duration-100) var(--swc-animation-ease-in-out);\n\n  --s2-header-height: var(--swc-component-height-400);\n\n  --uxc-yellow-subtle-bg: var(--swc-yellow-subtle-background-color-default);\n  --uxc-yellow-subtle-text: var(--swc-yellow-1000);\n  --uxc-purple-subtle-bg: var(--swc-purple-subtle-background-color-default);\n  --uxc-purple-subtle-text: var(--swc-purple-1000);\n  --uxc-cyan-subtle-bg: var(--swc-cyan-subtle-background-color-default);\n  --uxc-cyan-subtle-text: var(--swc-cyan-1000);\n  --uxc-magenta-subtle-bg: var(--swc-magenta-subtle-background-color-default);\n  --uxc-magenta-subtle-text: var(--swc-magenta-1000);\n  --uxc-indigo-subtle-bg: var(--swc-indigo-subtle-background-color-default);\n  --uxc-indigo-subtle-text: var(--swc-indigo-1000);\n  --uxc-gray-subtle-bg: var(--swc-gray-subtle-background-color-default);\n  --uxc-gray-subtle-text: var(--swc-neutral-content-color-default);\n  --uxc-positive-subtle-bg: var(--swc-positive-subtle-background-color-default);\n  --uxc-positive-subtle-text: var(--swc-positive-color-1000);\n  --uxc-notice-subtle-bg: var(--swc-notice-subtle-background-color-default);\n  --uxc-notice-subtle-text: var(--swc-notice-color-1000);\n  --uxc-negative-subtle-bg: var(--swc-negative-subtle-background-color-default);\n  --uxc-negative-subtle-text: var(--swc-negative-color-1000);\n  --uxc-accent-subtle-bg: var(--swc-accent-subtle-background-color-default);\n  --uxc-accent-subtle-text: var(--swc-accent-color-1000);\n  --uxc-neutral-subtle-bg: var(--swc-neutral-subtle-background-color-default);\n\n  --uxc-positive-text: var(--s2-content-positive);\n  --uxc-notice-text: var(--s2-content-notice);\n  --uxc-negative-text: var(--s2-content-negative);\n  --uxc-informative-text: var(--s2-content-informative);\n  --uxc-accent-text: var(--s2-content-accent);\n\n  --uxc-nav-rail-width: 58px;\n  --uxc-thread-header-height: var(--swc-component-height-400);\n  --uxc-content-max-width: 800px;\n\n  --slicc-warm-bg: color-mix(in oklch, var(--s2-gray-50) 94%, var(--slicc-cone) 6%);\n  --slicc-brand-gradient: linear-gradient(\n    90deg,\n    var(--slicc-cone) 0%,\n    var(--slicc-scoop-blue) 50%,\n    var(--slicc-scoop-purple) 100%\n  );\n}\n\n:where(:root) {\n  color-scheme: dark;\n}\n:where(:root.theme-light, :root:has(body[data-theme="light"])) {\n  color-scheme: light;\n}\n\n.theme-light .tok-keyword,\n:root:where(:has(body[data-theme="light"])) .tok-keyword {\n  color: var(--swc-purple-1000);\n}\n.theme-light .tok-string,\n:root:where(:has(body[data-theme="light"])) .tok-string {\n  color: var(--swc-green-1000);\n}\n.theme-light .tok-number,\n:root:where(:has(body[data-theme="light"])) .tok-number {\n  color: var(--swc-orange-1000);\n}\n.theme-light .tok-comment,\n:root:where(:has(body[data-theme="light"])) .tok-comment {\n  color: var(--s2-content-secondary);\n}\n.theme-light .tok-punct,\n:root:where(:has(body[data-theme="light"])) .tok-punct {\n  color: var(--swc-blue-1000);\n}\n.theme-light .tok-fn,\n:root:where(:has(body[data-theme="light"])) .tok-fn {\n  color: var(--swc-cyan-1000);\n}\n\n.theme-light .s2-tooltip,\n:root:where(:has(body[data-theme="light"])) .s2-tooltip {\n  background: var(--s2-gray-900);\n  color: var(--s2-gray-25);\n}\n\n.theme-light ::-webkit-scrollbar-thumb,\n:root:where(:has(body[data-theme="light"])) ::-webkit-scrollbar-thumb {\n  background: var(--s2-gray-300);\n}\n.theme-light ::-webkit-scrollbar-thumb:hover,\n:root:where(:has(body[data-theme="light"])) ::-webkit-scrollbar-thumb:hover {\n  background: var(--s2-gray-400);\n}\n\n.sprinkle-content {\n  padding: var(--s2-spacing-200);\n}\n\n.sprinkle-heading {\n  font-size: var(--s2-font-size-300);\n  font-weight: 700;\n  color: var(--s2-gray-900);\n  margin: 0 0 var(--s2-spacing-100);\n  line-height: 1.3;\n  letter-spacing: 0;\n}\n.sprinkle-heading--m {\n  font-size: var(--s2-font-size-200);\n}\n.sprinkle-heading--s {\n  font-size: var(--s2-font-size-100);\n}\n.sprinkle-label {\n  font-size: var(--s2-font-size-75);\n  font-weight: 600;\n  color: var(--s2-gray-600);\n  line-height: 1.3;\n  margin: 0;\n}\n.sprinkle-body {\n  font-size: var(--s2-font-size-100);\n  font-weight: 400;\n  color: var(--s2-content-default);\n  line-height: 1.5;\n}\n.sprinkle-detail {\n  font-size: var(--s2-font-size-75);\n  font-weight: 500;\n  color: var(--s2-gray-600);\n  line-height: 1.3;\n}\n\n.sprinkle-icon {\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  stroke-width: 2;\n  vertical-align: middle;\n}\n.sprinkle-icon svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.sprinkle-icon--xs {\n  width: 12px;\n  height: 12px;\n}\n.sprinkle-icon--s {\n  width: 14px;\n  height: 14px;\n}\n.sprinkle-icon--m {\n  width: 16px;\n  height: 16px;\n}\n.sprinkle-icon--l {\n  width: 20px;\n  height: 20px;\n}\n.sprinkle-icon--xl {\n  width: 24px;\n  height: var(--swc-component-height-75);\n}\n\n.sprinkle-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--s2-spacing-75);\n  height: var(--swc-component-height-100);\n  padding: 0 var(--s2-spacing-300);\n  border: var(--swc-border-width-100) solid var(--s2-gray-200);\n  border-radius: var(--s2-radius-xl);\n  background: var(--s2-gray-50);\n  color: var(--s2-gray-800);\n  font-size: var(--s2-font-size-100);\n  font-weight: 700;\n  font-family: var(--s2-font-family);\n  cursor: default;\n  box-shadow: var(--s2-shadow-container);\n  transition:\n    background var(--s2-transition-default),\n    border-color var(--s2-transition-default),\n    transform var(--s2-transition-default);\n}\n.sprinkle-btn:hover {\n  background: var(--s2-gray-100);\n}\n.sprinkle-btn:active {\n  transform: scale(0.98);\n}\n.sprinkle-btn:disabled,\n.sprinkle-btn[disabled] {\n  opacity: 0.4;\n  pointer-events: none;\n}\n\n.sprinkle-btn--primary {\n  background: var(--s2-accent);\n  color: var(--swc-white);\n  border-color: transparent;\n  border-radius: var(--s2-radius-pill);\n  box-shadow: none;\n}\n.sprinkle-btn--primary:hover {\n  background: var(--s2-accent-hover);\n}\n.sprinkle-btn--primary:active {\n  background: var(--s2-accent-down);\n  transform: scale(0.98);\n}\n\n.sprinkle-btn--secondary {\n  background: var(--s2-gray-50);\n  border-color: var(--s2-gray-200);\n  color: var(--s2-gray-800);\n}\n.sprinkle-btn--secondary:hover {\n  background: var(--s2-gray-100);\n}\n\n.sprinkle-btn--negative {\n  background: var(--s2-negative);\n  color: var(--swc-white);\n  border-color: transparent;\n  border-radius: var(--s2-radius-pill);\n  box-shadow: none;\n}\n.sprinkle-btn--negative:hover {\n  background: var(--swc-negative-background-color-hover);\n}\n\n.sprinkle-btn--quiet {\n  background: transparent;\n  border-color: transparent;\n  box-shadow: none;\n  color: var(--s2-gray-800);\n}\n.sprinkle-btn--quiet:hover {\n  background: var(--s2-gray-100);\n}\n.sprinkle-btn-group {\n  display: inline-flex;\n  gap: var(--s2-spacing-100);\n}\n\n.sprinkle-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s2-spacing-50);\n  padding: var(--s2-spacing-50) var(--s2-spacing-100);\n  border-radius: var(--s2-radius-default);\n  font-size: var(--s2-font-size-75);\n  font-weight: 700;\n  line-height: var(--s2-line-height-75);\n  white-space: nowrap;\n  background: var(--s2-gray-800);\n  color: var(--s2-gray-25);\n}\n\n.sprinkle-badge--positive {\n  background: var(--s2-positive);\n  color: var(--swc-white);\n}\n.sprinkle-badge--negative {\n  background: var(--s2-negative);\n  color: var(--swc-white);\n}\n.sprinkle-badge--notice {\n  background: var(--s2-notice);\n  color: var(--swc-black);\n}\n.sprinkle-badge--informative {\n  background: var(--s2-informative);\n  color: var(--swc-white);\n}\n.sprinkle-badge--accent {\n  background: var(--s2-accent);\n  color: var(--swc-white);\n}\n\n.sprinkle-badge--subtle {\n  background: var(--uxc-neutral-subtle-bg);\n  color: var(--s2-gray-700);\n}\n.sprinkle-badge--subtle.sprinkle-badge--positive {\n  background: var(--uxc-positive-subtle-bg);\n  color: var(--uxc-positive-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--negative {\n  background: var(--uxc-negative-subtle-bg);\n  color: var(--uxc-negative-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--notice {\n  background: var(--uxc-notice-subtle-bg);\n  color: var(--uxc-notice-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--informative {\n  background: var(--uxc-accent-subtle-bg);\n  color: var(--uxc-accent-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--accent {\n  background: var(--uxc-accent-subtle-bg);\n  color: var(--uxc-accent-subtle-text);\n}\n\n.sprinkle-badge--yellow {\n  background: var(--uxc-yellow-subtle-bg);\n  color: var(--uxc-yellow-subtle-text);\n}\n.sprinkle-badge--purple {\n  background: var(--uxc-purple-subtle-bg);\n  color: var(--uxc-purple-subtle-text);\n}\n.sprinkle-badge--cyan {\n  background: var(--uxc-cyan-subtle-bg);\n  color: var(--uxc-cyan-subtle-text);\n}\n.sprinkle-badge--magenta {\n  background: var(--uxc-magenta-subtle-bg);\n  color: var(--uxc-magenta-subtle-text);\n}\n.sprinkle-badge--indigo {\n  background: var(--uxc-indigo-subtle-bg);\n  color: var(--uxc-indigo-subtle-text);\n}\n.sprinkle-badge--gray {\n  background: var(--uxc-gray-subtle-bg);\n  color: var(--uxc-gray-subtle-text);\n}\n\n.sprinkle-badge--outline {\n  background: transparent;\n  color: var(--s2-content-secondary);\n  box-shadow: inset 0 0 0 var(--swc-border-width-100) var(--s2-border-default);\n}\n.sprinkle-badge--outline.sprinkle-badge--positive {\n  color: var(--s2-content-positive);\n  box-shadow: inset 0 0 0 var(--swc-border-width-100) var(--swc-positive-visual-color);\n}\n.sprinkle-badge--outline.sprinkle-badge--negative {\n  color: var(--s2-content-negative);\n  box-shadow: inset 0 0 0 var(--swc-border-width-100) var(--swc-negative-visual-color);\n}\n.sprinkle-badge--outline.sprinkle-badge--notice {\n  color: var(--s2-content-notice);\n  box-shadow: inset 0 0 0 var(--swc-border-width-100) var(--swc-notice-visual-color);\n}\n.sprinkle-badge--outline.sprinkle-badge--informative {\n  color: var(--s2-content-informative);\n  box-shadow: inset 0 0 0 var(--swc-border-width-100) var(--swc-informative-visual-color);\n}\n\n.sprinkle-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s2-spacing-75);\n  padding: var(--s2-spacing-75) var(--s2-spacing-200);\n  border: var(--swc-border-width-100) solid var(--s2-gray-200);\n  border-radius: var(--s2-radius-pill);\n  font-size: var(--s2-font-size-75);\n  font-weight: 500;\n  color: var(--s2-gray-800);\n  background: var(--s2-bg-layer-1);\n  cursor: default;\n  transition: background var(--s2-transition-default);\n}\n.sprinkle-chip:hover {\n  background: var(--s2-gray-100);\n}\n.sprinkle-chip svg {\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n}\n\n.sprinkle-status-light {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s2-spacing-75);\n  font-size: var(--s2-font-size-75);\n  color: var(--s2-content-default);\n}\n.sprinkle-status-light::before {\n  content: "";\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--s2-content-tertiary);\n  flex-shrink: 0;\n}\n.sprinkle-status-light--positive::before {\n  background: var(--swc-positive-visual-color);\n}\n.sprinkle-status-light--negative::before {\n  background: var(--swc-negative-visual-color);\n}\n.sprinkle-status-light--notice::before {\n  background: var(--swc-notice-visual-color);\n}\n.sprinkle-status-light--informative::before {\n  background: var(--swc-informative-visual-color);\n}\n\n.sprinkle-status-light--m {\n  font-size: var(--s2-font-size-100);\n  color: var(--s2-gray-600);\n}\n.sprinkle-status-light--m::before {\n  width: 10px;\n  height: 10px;\n}\n\n.sprinkle-card {\n  background: var(--s2-gray-25);\n  border: var(--swc-border-width-100) solid var(--s2-gray-300);\n  border-radius: var(--s2-radius-xl);\n  padding: var(--s2-spacing-400);\n  box-shadow: var(--s2-shadow-container);\n  transition: box-shadow var(--s2-transition-default);\n}\n.sprinkle-card:hover {\n  box-shadow: var(--s2-shadow-elevated);\n}\n\n.sprinkle-stat-card {\n  background: var(--s2-gray-25);\n  border: var(--swc-border-width-100) solid var(--s2-gray-300);\n  border-radius: var(--s2-radius-xl);\n  padding: var(--s2-spacing-200) var(--s2-spacing-300);\n  text-align: center;\n  box-shadow: var(--s2-shadow-container);\n  transition: box-shadow var(--s2-transition-default);\n}\n.sprinkle-stat-card:hover {\n  box-shadow: var(--s2-shadow-elevated);\n}\n.sprinkle-stat-card .value {\n  font-size: var(--s2-font-size-500);\n  font-weight: 700;\n  color: var(--s2-content-default);\n  line-height: 1.2;\n}\n.sprinkle-stat-card .label {\n  font-size: var(--s2-font-size-75);\n  font-weight: 500;\n  color: var(--s2-gray-600);\n  margin-top: var(--s2-spacing-50);\n}\n\n.sprinkle-action-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--s2-gray-25);\n  border: var(--swc-border-width-100) solid var(--s2-gray-200);\n  border-radius: var(--s2-radius-xl);\n  overflow: hidden;\n  box-shadow: var(--s2-shadow-container);\n}\n.sprinkle-action-card__header {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-200);\n  padding: var(--s2-spacing-300) var(--s2-spacing-400);\n  font-weight: 700;\n  font-size: var(--s2-font-size-200);\n  line-height: 1.3;\n  color: var(--s2-gray-900);\n}\n.sprinkle-action-card__header .sprinkle-badge {\n  margin-left: auto;\n}\n.sprinkle-action-card__title-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--swc-spacing-50);\n  min-width: 0;\n}\n\n.sprinkle-action-card__icon {\n  width: var(--swc-component-height-200);\n  height: var(--swc-component-height-200);\n  min-width: var(--swc-component-height-200);\n  border-radius: var(--s2-radius-default);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--s2-font-size-300);\n  flex-shrink: 0;\n}\n.sprinkle-action-card__icon--yellow {\n  background: var(--uxc-yellow-subtle-bg);\n  color: var(--uxc-yellow-subtle-text);\n}\n.sprinkle-action-card__icon--blue {\n  background: var(--uxc-accent-subtle-bg);\n  color: var(--uxc-accent-subtle-text);\n}\n.sprinkle-action-card__icon--green {\n  background: var(--uxc-positive-subtle-bg);\n  color: var(--uxc-positive-subtle-text);\n}\n.sprinkle-action-card__icon--indigo {\n  background: var(--uxc-indigo-subtle-bg);\n  color: var(--uxc-indigo-subtle-text);\n}\n\n.sprinkle-action-card__meta {\n  font-size: var(--s2-font-size-75);\n  font-weight: 400;\n  color: var(--s2-gray-600);\n}\n\n.sprinkle-action-card__header-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-200);\n  margin-left: auto;\n  font-size: var(--s2-font-size-75);\n  font-weight: 500;\n  color: var(--s2-gray-800);\n}\n.sprinkle-action-card__header-actions a {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-50);\n  color: var(--s2-gray-800);\n  text-decoration: none;\n}\n.sprinkle-action-card__body {\n  padding: 0 var(--s2-spacing-400) var(--s2-spacing-300);\n  font-size: var(--s2-font-size-100);\n  color: var(--s2-gray-700);\n  line-height: 1.5;\n}\n.sprinkle-action-card__actions {\n  display: flex;\n  gap: var(--s2-spacing-100);\n  justify-content: flex-end;\n  padding: var(--s2-spacing-200) var(--s2-spacing-400);\n  border-top: var(--swc-border-width-100) solid var(--s2-gray-200);\n}\n\nbody\n  > :is(.sprinkle-card, .sprinkle-stat-card, .sprinkle-action-card):not(\n    :has(~ :not(script, style, template)),\n    :not(script, style, template) ~ *\n  ),\nbody\n  > :is(.sprinkle-card, .sprinkle-stat-card, .sprinkle-action-card):not(\n    :has(~ :not(script, style, template)),\n    :not(script, style, template) ~ *\n  ):hover {\n  background: transparent;\n  border: 0;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.sprinkle-list-item {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-300);\n  padding: var(--s2-spacing-300) var(--s2-spacing-400);\n  border-top: var(--swc-border-width-100) solid var(--s2-gray-100);\n  min-height: var(--swc-component-height-400);\n}\n.sprinkle-list-item__icon {\n  width: var(--swc-component-height-200);\n  height: var(--swc-component-height-200);\n  min-width: var(--swc-component-height-200);\n  border-radius: var(--s2-radius-default);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--s2-font-size-200);\n  flex-shrink: 0;\n  background: var(--s2-gray-75);\n}\n.sprinkle-list-item__content {\n  flex: 1;\n  min-width: 0;\n}\n.sprinkle-list-item__title {\n  font-size: var(--s2-font-size-100);\n  font-weight: 700;\n  color: var(--s2-gray-900);\n  line-height: 1.3;\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-75);\n}\n.sprinkle-list-item__subtitle {\n  font-size: var(--s2-font-size-100);\n  font-weight: 400;\n  color: var(--s2-gray-600);\n  line-height: 1.5;\n  margin-top: var(--swc-spacing-50);\n}\n.sprinkle-list-item__end {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  flex-shrink: 0;\n}\n\n.sprinkle-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--s2-font-size-100);\n  border: var(--swc-border-width-100) solid var(--s2-gray-100);\n  border-radius: var(--s2-radius-default);\n  overflow: hidden;\n}\n.sprinkle-table th {\n  text-align: left;\n  padding: var(--s2-spacing-75) var(--s2-spacing-300);\n  background: transparent;\n  border-bottom: var(--swc-border-width-100) solid var(--s2-gray-100);\n  color: var(--s2-gray-700);\n  font-weight: 700;\n  font-size: var(--s2-font-size-100);\n  line-height: 1.3;\n  height: var(--swc-component-height-100);\n  box-sizing: border-box;\n}\n.sprinkle-table td {\n  padding: var(--s2-spacing-200) var(--s2-spacing-300);\n  border-bottom: var(--swc-border-width-100) solid var(--s2-gray-100);\n  color: var(--s2-content-default);\n  font-size: var(--s2-font-size-100);\n  line-height: 1.5;\n  box-sizing: border-box;\n}\n.sprinkle-table tr:last-child td {\n  border-bottom: none;\n}\n.sprinkle-table tr:hover td {\n  background: var(--s2-gray-50);\n}\n\n.sprinkle-task-group {\n  background: var(--s2-gray-50);\n  border-radius: var(--s2-radius-default);\n  padding: var(--s2-spacing-300);\n  display: flex;\n  flex-direction: column;\n  gap: var(--s2-spacing-100);\n}\n.sprinkle-task-group__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.sprinkle-task-group__title {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  font-size: var(--s2-font-size-200);\n  font-weight: 700;\n  color: var(--s2-gray-1000);\n}\n.sprinkle-task-group__title svg {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n}\n.sprinkle-task-group__meta {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-300);\n  font-size: var(--s2-font-size-75);\n  color: var(--s2-gray-600);\n}\n.sprinkle-task-item {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  height: var(--swc-component-height-75);\n  padding-left: var(--s2-spacing-50);\n  font-size: var(--s2-font-size-100);\n  line-height: var(--s2-line-height-100);\n}\n.sprinkle-task-item--done {\n  color: var(--s2-gray-600);\n}\n.sprinkle-task-item--pending {\n  color: var(--s2-gray-800);\n}\n.sprinkle-task-item__check {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n  border-radius: 50%;\n  border: var(--swc-border-width-200) solid var(--s2-gray-400);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.sprinkle-task-item--done .sprinkle-task-item__check {\n  background: var(--s2-positive);\n  border-color: var(--s2-positive);\n}\n.sprinkle-task-item--done .sprinkle-task-item__check::after {\n  content: "";\n  width: 8px;\n  height: 5px;\n  border-left: var(--swc-border-width-200) solid var(--swc-white);\n  border-bottom: var(--swc-border-width-200) solid var(--swc-white);\n  transform: rotate(-45deg) translateY(-1px);\n}\n\n.sprinkle-progress-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s2-spacing-75);\n  --_bar-color: var(--swc-accent-visual-color);\n}\n.sprinkle-progress-bar--positive {\n  --_bar-color: var(--swc-positive-visual-color);\n}\n.sprinkle-progress-bar--negative {\n  --_bar-color: var(--swc-negative-visual-color);\n}\n.sprinkle-progress-bar--notice {\n  --_bar-color: var(--swc-notice-visual-color);\n}\n.sprinkle-progress-bar--informative {\n  --_bar-color: var(--swc-informative-visual-color);\n}\n.sprinkle-progress-bar__header {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  font-size: var(--s2-font-size-75);\n  color: var(--s2-content-default);\n}\n.sprinkle-progress-bar__header .label {\n  font-weight: 400;\n}\n.sprinkle-progress-bar__header .value {\n  font-weight: 400;\n  color: var(--s2-gray-600);\n}\n.sprinkle-progress-bar__track {\n  height: var(--swc-progress-bar-thickness-small);\n  border-radius: var(--s2-radius-pill);\n  background: var(--s2-gray-200);\n  overflow: hidden;\n  position: relative;\n}\n.sprinkle-progress-bar__track .fill {\n  height: 100%;\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n\n.sprinkle-progress-bar__track::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  right: auto;\n  width: var(--progress, var(--value, 0%));\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n.sprinkle-progress-bar__track:has(> .fill)::after {\n  display: none;\n}\n\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track)) {\n  height: var(--swc-progress-bar-thickness-small);\n  width: 100%;\n  border-radius: var(--s2-radius-pill);\n  background: var(--s2-gray-200);\n  overflow: hidden;\n  flex-direction: row;\n  position: relative;\n}\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track)) > .fill {\n  height: 100%;\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track))::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  right: auto;\n  width: var(--progress, var(--value, 0%));\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track)):has(> .fill)::after {\n  display: none;\n}\n\n.sprinkle-meter {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s2-spacing-75);\n  --_meter-color: var(--swc-informative-visual-color);\n}\n.sprinkle-meter--positive {\n  --_meter-color: var(--swc-positive-visual-color);\n}\n.sprinkle-meter--notice {\n  --_meter-color: var(--swc-notice-visual-color);\n}\n.sprinkle-meter--negative {\n  --_meter-color: var(--swc-negative-visual-color);\n}\n.sprinkle-meter__header {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  font-size: var(--s2-font-size-75);\n  color: var(--s2-content-default);\n}\n.sprinkle-meter__header .label {\n  font-weight: 400;\n}\n.sprinkle-meter__header .value {\n  font-weight: 400;\n  color: var(--s2-gray-600);\n}\n.sprinkle-meter__track {\n  height: var(--swc-progress-bar-thickness-small);\n  border-radius: var(--s2-radius-pill);\n  background: var(--s2-gray-200);\n  overflow: hidden;\n  position: relative;\n}\n.sprinkle-meter__track .fill {\n  height: 100%;\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_meter-color));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n.sprinkle-meter__track::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  right: auto;\n  width: var(--progress, var(--value, 0%));\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_meter-color));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n.sprinkle-meter__track:has(> .fill)::after {\n  display: none;\n}\n\n.sprinkle-meter:not(:has(.sprinkle-meter__track)) {\n  height: var(--swc-progress-bar-thickness-small);\n  width: 100%;\n  border-radius: var(--s2-radius-pill);\n  background: var(--s2-gray-200);\n  overflow: hidden;\n  flex-direction: row;\n  position: relative;\n}\n.sprinkle-meter:not(:has(.sprinkle-meter__track)) > .fill {\n  height: 100%;\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_meter-color));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n.sprinkle-meter:not(:has(.sprinkle-meter__track))::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  right: auto;\n  width: var(--progress, var(--value, 0%));\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_meter-color));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n.sprinkle-meter:not(:has(.sprinkle-meter__track)):has(> .fill)::after {\n  display: none;\n}\n\n.sprinkle-kv-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n.sprinkle-kv-list li {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--s2-spacing-100) 0;\n  border-bottom: var(--swc-border-width-100) solid var(--s2-border-subtle);\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-kv-list li:last-child {\n  border-bottom: none;\n}\n.sprinkle-kv-list .key {\n  color: var(--s2-gray-600);\n  font-weight: 400;\n}\n.sprinkle-kv-list .value {\n  color: var(--s2-content-default);\n  font-weight: 700;\n}\ndl.sprinkle-kv-list {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 0;\n  font-size: var(--s2-font-size-75);\n}\ndl.sprinkle-kv-list dt,\ndl.sprinkle-kv-list dd {\n  padding: var(--s2-spacing-100) 0;\n  border-bottom: var(--swc-border-width-100) solid var(--s2-border-subtle);\n  margin: 0;\n}\ndl.sprinkle-kv-list dt {\n  color: var(--s2-gray-600);\n  font-weight: 400;\n  padding-right: var(--s2-spacing-300);\n}\ndl.sprinkle-kv-list dd {\n  color: var(--s2-content-default);\n  font-weight: 700;\n  text-align: right;\n}\ndl.sprinkle-kv-list dt:last-of-type,\ndl.sprinkle-kv-list dd:last-of-type {\n  border-bottom: none;\n}\n\n.sprinkle-text-field {\n  width: 100%;\n  padding: var(--s2-spacing-75) var(--s2-spacing-200);\n  font-size: var(--s2-font-size-100);\n  font-family: var(--s2-font-family);\n  color: var(--s2-content-default);\n  background: var(--s2-bg-layer-1);\n  border: var(--swc-border-width-100) solid var(--s2-gray-200);\n  border-radius: var(--s2-radius-default);\n  transition: border-color var(--s2-transition-default);\n  box-sizing: border-box;\n}\n.sprinkle-text-field::placeholder {\n  color: var(--s2-content-secondary);\n}\n.sprinkle-text-field:hover {\n  border-color: var(--s2-gray-700);\n}\n.sprinkle-text-field:focus {\n  border-color: var(--s2-gray-800);\n}\n\n.sprinkle-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: var(--s2-spacing-200);\n}\n.sprinkle-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s2-spacing-200);\n}\n.sprinkle-row {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-200);\n}\n\n.sprinkle-divider {\n  border: none;\n  border-top: var(--swc-border-width-100) solid var(--s2-border-subtle);\n  margin: var(--s2-spacing-200) 0;\n}\n.sprinkle-divider--medium {\n  border-top-width: var(--swc-border-width-200);\n  border-top-color: var(--s2-border-default);\n  margin: var(--s2-spacing-300) 0;\n}\n\n.sprinkle-empty-state {\n  text-align: center;\n  padding: var(--s2-spacing-500) var(--s2-spacing-300);\n  color: var(--s2-content-tertiary);\n  font-size: var(--s2-font-size-100);\n}\n\n.sprinkle-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  padding: var(--s2-spacing-100) var(--s2-spacing-200);\n  border-bottom: var(--swc-border-width-100) solid var(--s2-gray-200);\n  background: var(--s2-gray-50);\n  min-height: var(--swc-component-height-200);\n  flex-shrink: 0;\n}\n.sprinkle-toolbar__start {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n}\n.sprinkle-toolbar__center {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  flex: 1;\n  justify-content: center;\n}\n.sprinkle-toolbar__end {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  margin-left: auto;\n}\n\n.sprinkle-tabs {\n  display: flex;\n  gap: 0;\n  border-bottom: var(--swc-border-width-100) solid var(--s2-gray-200);\n  background: var(--s2-gray-50);\n  flex-shrink: 0;\n  overflow-x: auto;\n}\n.sprinkle-tabs__tab {\n  padding: var(--s2-spacing-100) var(--s2-spacing-200);\n  font-size: var(--s2-font-size-100);\n  font-weight: 500;\n  color: var(--s2-gray-600);\n  background: none;\n  border: none;\n  border-bottom: var(--swc-border-width-200) solid transparent;\n  cursor: default;\n  white-space: nowrap;\n  transition:\n    color var(--s2-transition-default),\n    border-color var(--s2-transition-default);\n  font-family: var(--s2-font-family);\n}\n.sprinkle-tabs__tab:hover {\n  color: var(--s2-gray-800);\n}\n.sprinkle-tabs__tab--active {\n  color: var(--s2-gray-900);\n  border-bottom-color: var(--s2-gray-900);\n  font-weight: 700;\n}\n.sprinkle-tabs__panel {\n  display: none;\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n.sprinkle-tabs__panel--active {\n  display: flex;\n  flex-direction: column;\n}\n\n.sprinkle-sidebar {\n  display: flex;\n  gap: 0;\n  min-height: 0;\n  flex: 1;\n}\n.sprinkle-sidebar__nav {\n  width: 240px;\n  min-width: 240px;\n  overflow-y: auto;\n  border-right: var(--swc-border-width-100) solid var(--s2-gray-200);\n  background: var(--s2-gray-50);\n  padding: var(--s2-spacing-200) 0;\n}\n.sprinkle-sidebar__nav-item {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  padding: var(--s2-spacing-100) var(--s2-spacing-200);\n  font-size: var(--s2-font-size-100);\n  color: var(--s2-gray-700);\n  cursor: default;\n  border-radius: 0;\n  transition: background var(--s2-transition-default);\n}\n.sprinkle-sidebar__nav-item:hover {\n  background: var(--s2-gray-100);\n}\n.sprinkle-sidebar__nav-item--active {\n  background: var(--s2-gray-800);\n  color: var(--s2-gray-25);\n  font-weight: 600;\n}\n.sprinkle-sidebar__nav-label {\n  padding: var(--s2-spacing-200) var(--s2-spacing-200) var(--s2-spacing-50);\n  font-size: var(--s2-font-size-75);\n  font-weight: 700;\n  color: var(--s2-gray-600);\n}\n.sprinkle-sidebar__main {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n  padding: var(--s2-spacing-200);\n}\n\n.sprinkle-dialog {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n}\n.sprinkle-dialog[hidden] {\n  display: none;\n}\n.sprinkle-dialog__backdrop {\n  position: absolute;\n  inset: 0;\n  background: var(--swc-overlay-color);\n  opacity: var(--swc-overlay-opacity-light);\n}\n.sprinkle-dialog__content {\n  position: relative;\n  background: var(--s2-gray-25);\n  border-radius: var(--s2-radius-xl);\n  box-shadow: var(--s2-shadow-elevated);\n  padding: var(--s2-spacing-400);\n  max-width: min(560px, calc(100% - 32px));\n  max-height: calc(100% - 64px);\n  overflow-y: auto;\n  min-width: 280px;\n}\n.sprinkle-dialog__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: var(--s2-spacing-300);\n}\n.sprinkle-dialog__title {\n  font-size: var(--s2-font-size-200);\n  font-weight: 700;\n  color: var(--s2-content-default);\n}\n.sprinkle-dialog__close {\n  width: var(--swc-component-height-100);\n  height: var(--swc-component-height-100);\n  border-radius: var(--s2-radius-pill);\n  border: none;\n  background: none;\n  color: var(--s2-gray-600);\n  cursor: default;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--s2-font-size-300);\n  transition: background var(--s2-transition-default);\n}\n.sprinkle-dialog__close:hover {\n  background: var(--s2-gray-100);\n}\n.sprinkle-dialog__footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--s2-spacing-100);\n  margin-top: var(--s2-spacing-300);\n}\n\n.sprinkle-collapsible__header {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  padding: var(--s2-spacing-100) var(--s2-spacing-200);\n  cursor: default;\n  font-size: var(--s2-font-size-100);\n  font-weight: 600;\n  color: var(--s2-content-default);\n  background: none;\n  border: none;\n  width: 100%;\n  text-align: left;\n  border-radius: var(--s2-radius-default);\n  transition: background var(--s2-transition-default);\n  font-family: var(--s2-font-family);\n}\n.sprinkle-collapsible__header:hover {\n  background: var(--s2-gray-100);\n}\n.sprinkle-collapsible__chevron {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  transition: transform var(--swc-animation-duration-200) var(--swc-animation-ease-in-out);\n  flex-shrink: 0;\n}\n.sprinkle-collapsible__chevron::before {\n  content: "";\n  width: var(--s2-spacing-75);\n  height: var(--s2-spacing-75);\n  border-right: var(--swc-border-width-200) solid var(--s2-content-tertiary);\n  border-bottom: var(--swc-border-width-200) solid var(--s2-content-tertiary);\n  transform: translateX(calc(-1 * var(--swc-spacing-50))) rotate(-45deg);\n}\n.sprinkle-collapsible--open .sprinkle-collapsible__chevron {\n  transform: rotate(90deg);\n}\n.sprinkle-collapsible__body {\n  display: none;\n  padding: var(--s2-spacing-100) var(--s2-spacing-200) var(--s2-spacing-200)\n    calc(var(--s2-spacing-200) + 16px + var(--s2-spacing-100));\n}\n.sprinkle-collapsible--open .sprinkle-collapsible__body {\n  display: block;\n}\n\n.sprinkle-split {\n  display: flex;\n  gap: 0;\n  min-height: 0;\n  flex: 1;\n}\n.sprinkle-split > * {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n.sprinkle-split > :not(:last-child) {\n  border-right: var(--swc-border-width-100) solid var(--s2-border-default);\n}\n.sprinkle-split--vertical {\n  flex-direction: column;\n}\n.sprinkle-split--vertical > :not(:last-child) {\n  border-right: none;\n  border-bottom: var(--swc-border-width-100) solid var(--s2-border-default);\n}\n\n.sprinkle-canvas {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--s2-radius-l);\n  background: var(--s2-bg-layer-1);\n}\n.sprinkle-canvas--16x9 {\n  aspect-ratio: 16 / 9;\n}\n.sprinkle-canvas--4x3 {\n  aspect-ratio: 4 / 3;\n}\n.sprinkle-canvas--1x1 {\n  aspect-ratio: 1 / 1;\n}\n.sprinkle-canvas svg,\n.sprinkle-canvas canvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.sprinkle-density-compact .sprinkle-content {\n  padding: var(--s2-spacing-100);\n}\n.sprinkle-density-compact .sprinkle-heading {\n  font-size: var(--s2-font-size-100);\n  margin-bottom: var(--s2-spacing-50);\n}\n.sprinkle-density-compact .sprinkle-heading--m {\n  font-size: var(--s2-font-size-100);\n}\n.sprinkle-density-compact .sprinkle-body {\n  font-size: var(--s2-font-size-75);\n  line-height: 1.4;\n}\n.sprinkle-density-compact .sprinkle-detail {\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-table th {\n  padding: var(--s2-spacing-50) var(--s2-spacing-200);\n  font-size: var(--s2-font-size-75);\n  height: var(--swc-component-height-75);\n}\n.sprinkle-density-compact .sprinkle-table td {\n  padding: var(--s2-spacing-75) var(--s2-spacing-200);\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-btn {\n  height: var(--swc-component-height-75);\n  font-size: var(--s2-font-size-75);\n  padding: 0 var(--s2-spacing-100);\n}\n.sprinkle-density-compact .sprinkle-badge {\n  font-size: var(--s2-font-size-75);\n  padding: var(--swc-spacing-50) var(--s2-spacing-75);\n}\n.sprinkle-density-compact .sprinkle-card {\n  padding: var(--s2-spacing-200);\n}\n.sprinkle-density-compact .sprinkle-list-item {\n  padding: var(--s2-spacing-100) var(--s2-spacing-300);\n  min-height: var(--swc-component-height-200);\n  gap: var(--s2-spacing-100);\n}\n.sprinkle-density-compact .sprinkle-list-item__icon {\n  width: var(--swc-component-height-75);\n  height: var(--swc-component-height-75);\n  min-width: var(--swc-component-height-75);\n  font-size: var(--s2-font-size-100);\n}\n.sprinkle-density-compact .sprinkle-list-item__title {\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-list-item__subtitle {\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-sidebar__nav-item {\n  padding: var(--s2-spacing-75) var(--s2-spacing-200);\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-text-field {\n  height: var(--swc-component-height-75);\n  font-size: var(--s2-font-size-75);\n  padding: var(--s2-spacing-50) var(--s2-spacing-100);\n}\n.sprinkle-density-compact .sprinkle-tabs__tab {\n  padding: var(--s2-spacing-75) var(--s2-spacing-200);\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-kv-list li {\n  padding: var(--s2-spacing-75) 0;\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-chip {\n  padding: var(--swc-spacing-50) var(--s2-spacing-100);\n  font-size: var(--s2-font-size-75);\n}\n\n.sprinkle-density-spacious .sprinkle-content {\n  padding: var(--s2-spacing-400);\n}\n.sprinkle-density-spacious .sprinkle-heading {\n  font-size: var(--s2-font-size-500);\n  margin-bottom: var(--s2-spacing-200);\n}\n.sprinkle-density-spacious .sprinkle-heading--m {\n  font-size: var(--s2-font-size-300);\n}\n.sprinkle-density-spacious .sprinkle-body {\n  font-size: var(--s2-font-size-200);\n  line-height: 1.65;\n}\n.sprinkle-density-spacious .sprinkle-card {\n  padding: var(--s2-spacing-500);\n}\n.sprinkle-density-spacious .sprinkle-btn {\n  height: var(--swc-component-height-200);\n  padding: 0 var(--swc-spacing-350);\n}\n.sprinkle-density-spacious .sprinkle-action-card__body {\n  padding: 0 var(--s2-spacing-500) var(--s2-spacing-400);\n  font-size: var(--s2-font-size-200);\n}\n\n:is(\n  .sprinkle-btn,\n  .sprinkle-chip,\n  .sprinkle-text-field,\n  .sprinkle-tabs__tab,\n  .sprinkle-sidebar__nav-item,\n  .sprinkle-dialog__close,\n  .sprinkle-collapsible__header,\n  .sprinkle-action-card__header-actions a\n):focus-visible {\n  outline: var(--swc-focus-indicator-thickness) solid var(--s2-border-focus);\n  outline-offset: var(--swc-focus-ring-gap);\n}\n\n@media (forced-colors: active) {\n  :is(\n    .sprinkle-btn,\n    .sprinkle-chip,\n    .sprinkle-text-field,\n    .sprinkle-tabs__tab,\n    .sprinkle-sidebar__nav-item,\n    .sprinkle-dialog__close,\n    .sprinkle-collapsible__header,\n    .sprinkle-action-card__header-actions a\n  ):focus-visible {\n    outline-color: Highlight;\n  }\n}\n\n.sprinkle-panel {\n  container-type: inline-size;\n}\n\n@container (max-width: 400px) {\n  .sprinkle-sidebar {\n    flex-direction: column;\n  }\n  .sprinkle-sidebar__nav {\n    width: 100%;\n    min-width: 0;\n    max-height: 200px;\n    border-right: none;\n    border-bottom: var(--swc-border-width-100) solid var(--s2-border-default);\n  }\n  .sprinkle-grid {\n    grid-template-columns: 1fr;\n  }\n  .sprinkle-split:not(.sprinkle-split--vertical) {\n    flex-direction: column;\n  }\n  .sprinkle-split:not(.sprinkle-split--vertical) > :not(:last-child) {\n    border-right: none;\n    border-bottom: var(--swc-border-width-100) solid var(--s2-border-default);\n  }\n  .sprinkle-toolbar {\n    flex-wrap: wrap;\n  }\n}\n\n@container (min-width: 600px) {\n  .sprinkle-sidebar__nav {\n    width: 240px;\n    min-width: 240px;\n  }\n  .sprinkle-grid {\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  }\n}\n';
+var sprinkle_theme_default = ':root {\n  --s2-gray-25: var(--swc-gray-25);\n  --s2-gray-50: var(--swc-gray-50);\n  --s2-gray-75: var(--swc-gray-75);\n  --s2-gray-100: var(--swc-gray-100);\n  --s2-gray-200: var(--swc-gray-200);\n  --s2-gray-300: var(--swc-gray-300);\n  --s2-gray-400: var(--swc-gray-400);\n  --s2-gray-500: var(--swc-gray-500);\n  --s2-gray-600: var(--swc-gray-600);\n  --s2-gray-700: var(--swc-gray-700);\n  --s2-gray-800: var(--swc-gray-800);\n  --s2-gray-900: var(--swc-gray-900);\n  --s2-gray-1000: var(--swc-gray-1000);\n\n  --s2-bg-base: var(--swc-background-base-color);\n  --s2-bg-layer-1: var(--swc-background-layer-1-color);\n  --s2-bg-layer-2: var(--swc-background-layer-2-color);\n  --s2-bg-elevated: var(--swc-background-elevated-color);\n  --s2-bg-sunken: var(--swc-background-pasteboard-color);\n\n  --s2-content-default: var(--swc-neutral-content-color-default);\n  --s2-content-secondary: var(--swc-neutral-subdued-content-color-default);\n  --s2-content-tertiary: var(--swc-gray-600);\n  --s2-content-disabled: var(--swc-disabled-content-color);\n  --s2-content-accent: var(--swc-accent-content-color-default);\n  --s2-content-negative: var(--swc-negative-content-color-default);\n  --s2-content-positive: var(--swc-positive-color-900);\n  --s2-content-notice: var(--swc-notice-color-900);\n  --s2-content-informative: var(--swc-informative-color-900);\n\n  --slicc-cone: #ef7000;\n  --slicc-scoop-blue: #3562ff;\n  --slicc-scoop-purple: #a962e8;\n  --slicc-scoop-teal: #2db9be;\n  --slicc-accent: #15d675;\n\n  --s2-accent: var(--swc-accent-background-color-default);\n  --s2-accent-hover: var(--swc-accent-background-color-hover);\n  --s2-accent-down: var(--swc-accent-background-color-down);\n\n  --s2-negative: var(--swc-negative-background-color-default);\n  --s2-positive: var(--swc-positive-background-color-default);\n  --s2-informative: var(--swc-informative-background-color-default);\n  --s2-notice: var(--swc-notice-background-color-default);\n\n  --s2-border-default: var(--swc-gray-300);\n  --s2-border-subtle: var(--swc-gray-200);\n  --s2-border-focus: var(--swc-focus-indicator-color);\n\n  --s2-font-family:\n    adobe-clean-spectrum-vf, "Adobe Clean Spectrum VF", adobe-clean, "Adobe Clean",\n    var(--swc-sans-font-family-stack);\n  --s2-font-mono: var(--swc-code-font-family-stack);\n\n  --s2-font-size-50: var(--swc-font-size-50);\n  --s2-font-size-75: var(--swc-font-size-75);\n  --s2-font-size-100: var(--swc-font-size-100);\n  --s2-font-size-200: var(--swc-font-size-200);\n  --s2-font-size-300: var(--swc-font-size-300);\n  --s2-font-size-400: var(--swc-font-size-400);\n  --s2-font-size-500: var(--swc-font-size-500);\n  --s2-font-size-600: var(--swc-font-size-600);\n\n  --s2-line-height-50: var(--swc-line-height-font-size-50);\n  --s2-line-height-75: var(--swc-line-height-font-size-75);\n  --s2-line-height-100: var(--swc-line-height-font-size-100);\n  --s2-line-height-200: var(--swc-line-height-font-size-200);\n  --s2-line-height-300: var(--swc-line-height-font-size-300);\n\n  --s2-spacing-50: var(--swc-spacing-75);\n  --s2-spacing-75: var(--swc-spacing-85);\n  --s2-spacing-100: var(--swc-spacing-100);\n  --s2-spacing-200: var(--swc-spacing-200);\n  --s2-spacing-300: var(--swc-spacing-300);\n  --s2-spacing-400: var(--swc-spacing-400);\n  --s2-spacing-500: var(--swc-spacing-500);\n  --s2-spacing-600: var(--swc-spacing-600);\n\n  --s2-radius-s: var(--swc-corner-radius-small-default);\n  --s2-radius-default: var(--swc-corner-radius-medium-default);\n  --s2-radius-l: var(--swc-corner-radius-large-default);\n  --s2-radius-xl: var(--swc-corner-radius-extra-large-default);\n  --s2-radius-pill: 9999px;\n\n  --s2-shadow-elevated: var(--swc-drop-shadow-elevated);\n  --s2-shadow-container: var(--swc-drop-shadow-emphasized);\n\n  --s2-transition-default: var(--swc-animation-duration-100) var(--swc-animation-ease-in-out);\n\n  --s2-header-height: var(--swc-component-height-400);\n\n  --uxc-yellow-subtle-bg: var(--swc-yellow-subtle-background-color-default);\n  --uxc-yellow-subtle-text: var(--swc-yellow-1000);\n  --uxc-purple-subtle-bg: var(--swc-purple-subtle-background-color-default);\n  --uxc-purple-subtle-text: var(--swc-purple-1000);\n  --uxc-cyan-subtle-bg: var(--swc-cyan-subtle-background-color-default);\n  --uxc-cyan-subtle-text: var(--swc-cyan-1000);\n  --uxc-magenta-subtle-bg: var(--swc-magenta-subtle-background-color-default);\n  --uxc-magenta-subtle-text: var(--swc-magenta-1000);\n  --uxc-indigo-subtle-bg: var(--swc-indigo-subtle-background-color-default);\n  --uxc-indigo-subtle-text: var(--swc-indigo-1000);\n  --uxc-gray-subtle-bg: var(--swc-gray-subtle-background-color-default);\n  --uxc-gray-subtle-text: var(--swc-neutral-content-color-default);\n  --uxc-positive-subtle-bg: var(--swc-positive-subtle-background-color-default);\n  --uxc-positive-subtle-text: var(--swc-positive-color-1000);\n  --uxc-notice-subtle-bg: var(--swc-notice-subtle-background-color-default);\n  --uxc-notice-subtle-text: var(--swc-notice-color-1000);\n  --uxc-negative-subtle-bg: var(--swc-negative-subtle-background-color-default);\n  --uxc-negative-subtle-text: var(--swc-negative-color-1000);\n  --uxc-accent-subtle-bg: var(--swc-accent-subtle-background-color-default);\n  --uxc-accent-subtle-text: var(--swc-accent-color-1000);\n  --uxc-neutral-subtle-bg: var(--swc-neutral-subtle-background-color-default);\n\n  --uxc-positive-text: var(--s2-content-positive);\n  --uxc-notice-text: var(--s2-content-notice);\n  --uxc-negative-text: var(--s2-content-negative);\n  --uxc-informative-text: var(--s2-content-informative);\n  --uxc-accent-text: var(--s2-content-accent);\n\n  --uxc-nav-rail-width: 58px;\n  --uxc-thread-header-height: var(--swc-component-height-400);\n  --uxc-content-max-width: 800px;\n\n  --slicc-warm-bg: color-mix(in oklch, var(--s2-gray-50) 94%, var(--slicc-cone) 6%);\n  --slicc-brand-gradient: linear-gradient(\n    90deg,\n    var(--slicc-cone) 0%,\n    var(--slicc-scoop-blue) 50%,\n    var(--slicc-scoop-purple) 100%\n  );\n}\n\n:where(:root) {\n  color-scheme: dark;\n}\n:where(:root.theme-light, :root:has(body[data-theme="light"])) {\n  color-scheme: light;\n}\n\n.theme-light .tok-keyword,\n:root:where(:has(body[data-theme="light"])) .tok-keyword {\n  color: var(--swc-purple-1000);\n}\n.theme-light .tok-string,\n:root:where(:has(body[data-theme="light"])) .tok-string {\n  color: var(--swc-green-1000);\n}\n.theme-light .tok-number,\n:root:where(:has(body[data-theme="light"])) .tok-number {\n  color: var(--swc-orange-1000);\n}\n.theme-light .tok-comment,\n:root:where(:has(body[data-theme="light"])) .tok-comment {\n  color: var(--s2-content-secondary);\n}\n.theme-light .tok-punct,\n:root:where(:has(body[data-theme="light"])) .tok-punct {\n  color: var(--swc-blue-1000);\n}\n.theme-light .tok-fn,\n:root:where(:has(body[data-theme="light"])) .tok-fn {\n  color: var(--swc-cyan-1000);\n}\n\n.theme-light .s2-tooltip,\n:root:where(:has(body[data-theme="light"])) .s2-tooltip {\n  background: var(--s2-gray-900);\n  color: var(--s2-gray-25);\n}\n\n.theme-light ::-webkit-scrollbar-thumb,\n:root:where(:has(body[data-theme="light"])) ::-webkit-scrollbar-thumb {\n  background: var(--s2-gray-300);\n}\n.theme-light ::-webkit-scrollbar-thumb:hover,\n:root:where(:has(body[data-theme="light"])) ::-webkit-scrollbar-thumb:hover {\n  background: var(--s2-gray-400);\n}\n\n.sprinkle-content {\n  padding: var(--s2-spacing-200);\n}\n\n.sprinkle-heading {\n  font-size: var(--s2-font-size-300);\n  font-weight: 700;\n  color: var(--s2-gray-900);\n  margin: 0 0 var(--s2-spacing-100);\n  line-height: 1.3;\n  letter-spacing: 0;\n}\n.sprinkle-heading--m {\n  font-size: var(--s2-font-size-200);\n}\n.sprinkle-heading--s {\n  font-size: var(--s2-font-size-100);\n}\n.sprinkle-label {\n  font-size: var(--s2-font-size-75);\n  font-weight: 600;\n  color: var(--s2-gray-600);\n  line-height: 1.3;\n  margin: 0;\n}\n.sprinkle-body {\n  font-size: var(--s2-font-size-100);\n  font-weight: 400;\n  color: var(--s2-content-default);\n  line-height: 1.5;\n}\n.sprinkle-detail {\n  font-size: var(--s2-font-size-75);\n  font-weight: 500;\n  color: var(--s2-gray-600);\n  line-height: 1.3;\n}\n\n.sprinkle-icon {\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  stroke-width: 2;\n  vertical-align: middle;\n}\n.sprinkle-icon svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.sprinkle-icon--xs {\n  width: 12px;\n  height: 12px;\n}\n.sprinkle-icon--s {\n  width: 14px;\n  height: 14px;\n}\n.sprinkle-icon--m {\n  width: 16px;\n  height: 16px;\n}\n.sprinkle-icon--l {\n  width: 20px;\n  height: 20px;\n}\n.sprinkle-icon--xl {\n  width: 24px;\n  height: var(--swc-component-height-75);\n}\n\n.sprinkle-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--s2-spacing-75);\n  height: var(--swc-component-height-100);\n  padding: 0 var(--s2-spacing-300);\n  border: var(--swc-border-width-100) solid var(--s2-gray-200);\n  border-radius: var(--s2-radius-xl);\n  background: var(--s2-gray-50);\n  color: var(--s2-gray-800);\n  font-size: var(--s2-font-size-100);\n  font-weight: 700;\n  font-family: var(--s2-font-family);\n  cursor: default;\n  box-shadow: var(--s2-shadow-container);\n  transition:\n    background var(--s2-transition-default),\n    border-color var(--s2-transition-default),\n    transform var(--s2-transition-default);\n}\n.sprinkle-btn:hover {\n  background: var(--s2-gray-100);\n}\n.sprinkle-btn:active {\n  transform: scale(0.98);\n}\n.sprinkle-btn:disabled,\n.sprinkle-btn[disabled] {\n  opacity: 0.4;\n  pointer-events: none;\n}\n\n.sprinkle-btn--primary {\n  background: var(--s2-accent);\n  color: var(--swc-white);\n  border-color: transparent;\n  border-radius: var(--s2-radius-pill);\n  box-shadow: none;\n}\n.sprinkle-btn--primary:hover {\n  background: var(--s2-accent-hover);\n}\n.sprinkle-btn--primary:active {\n  background: var(--s2-accent-down);\n  transform: scale(0.98);\n}\n\n.sprinkle-btn--secondary {\n  background: var(--s2-gray-50);\n  border-color: var(--s2-gray-200);\n  color: var(--s2-gray-800);\n}\n.sprinkle-btn--secondary:hover {\n  background: var(--s2-gray-100);\n}\n\n.sprinkle-btn--negative {\n  background: var(--s2-negative);\n  color: var(--swc-white);\n  border-color: transparent;\n  border-radius: var(--s2-radius-pill);\n  box-shadow: none;\n}\n.sprinkle-btn--negative:hover {\n  background: var(--swc-negative-background-color-hover);\n}\n\n.sprinkle-btn--quiet {\n  background: transparent;\n  border-color: transparent;\n  box-shadow: none;\n  color: var(--s2-gray-800);\n}\n.sprinkle-btn--quiet:hover {\n  background: var(--s2-gray-100);\n}\n.sprinkle-btn-group {\n  display: inline-flex;\n  gap: var(--s2-spacing-100);\n}\n\n.sprinkle-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s2-spacing-50);\n  padding: var(--s2-spacing-50) var(--s2-spacing-100);\n  border-radius: var(--s2-radius-default);\n  font-size: var(--s2-font-size-75);\n  font-weight: 700;\n  line-height: var(--s2-line-height-75);\n  white-space: nowrap;\n  background: var(--s2-gray-800);\n  color: var(--s2-gray-25);\n}\n\n.sprinkle-badge--positive {\n  background: var(--s2-positive);\n  color: var(--swc-white);\n}\n.sprinkle-badge--negative {\n  background: var(--s2-negative);\n  color: var(--swc-white);\n}\n.sprinkle-badge--notice {\n  background: var(--s2-notice);\n  color: var(--swc-black);\n}\n.sprinkle-badge--informative {\n  background: var(--s2-informative);\n  color: var(--swc-white);\n}\n.sprinkle-badge--accent {\n  background: var(--s2-accent);\n  color: var(--swc-white);\n}\n\n.sprinkle-badge--subtle {\n  background: var(--uxc-neutral-subtle-bg);\n  color: var(--s2-gray-700);\n}\n.sprinkle-badge--subtle.sprinkle-badge--positive {\n  background: var(--uxc-positive-subtle-bg);\n  color: var(--uxc-positive-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--negative {\n  background: var(--uxc-negative-subtle-bg);\n  color: var(--uxc-negative-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--notice {\n  background: var(--uxc-notice-subtle-bg);\n  color: var(--uxc-notice-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--informative {\n  background: var(--uxc-accent-subtle-bg);\n  color: var(--uxc-accent-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--accent {\n  background: var(--uxc-accent-subtle-bg);\n  color: var(--uxc-accent-subtle-text);\n}\n\n.sprinkle-badge--yellow {\n  background: var(--uxc-yellow-subtle-bg);\n  color: var(--uxc-yellow-subtle-text);\n}\n.sprinkle-badge--purple {\n  background: var(--uxc-purple-subtle-bg);\n  color: var(--uxc-purple-subtle-text);\n}\n.sprinkle-badge--cyan {\n  background: var(--uxc-cyan-subtle-bg);\n  color: var(--uxc-cyan-subtle-text);\n}\n.sprinkle-badge--magenta {\n  background: var(--uxc-magenta-subtle-bg);\n  color: var(--uxc-magenta-subtle-text);\n}\n.sprinkle-badge--indigo {\n  background: var(--uxc-indigo-subtle-bg);\n  color: var(--uxc-indigo-subtle-text);\n}\n.sprinkle-badge--gray {\n  background: var(--uxc-gray-subtle-bg);\n  color: var(--uxc-gray-subtle-text);\n}\n\n.sprinkle-badge--outline {\n  background: transparent;\n  color: var(--s2-content-secondary);\n  box-shadow: inset 0 0 0 var(--swc-border-width-100) var(--s2-border-default);\n}\n.sprinkle-badge--outline.sprinkle-badge--positive {\n  color: var(--s2-content-positive);\n  box-shadow: inset 0 0 0 var(--swc-border-width-100) var(--swc-positive-visual-color);\n}\n.sprinkle-badge--outline.sprinkle-badge--negative {\n  color: var(--s2-content-negative);\n  box-shadow: inset 0 0 0 var(--swc-border-width-100) var(--swc-negative-visual-color);\n}\n.sprinkle-badge--outline.sprinkle-badge--notice {\n  color: var(--s2-content-notice);\n  box-shadow: inset 0 0 0 var(--swc-border-width-100) var(--swc-notice-visual-color);\n}\n.sprinkle-badge--outline.sprinkle-badge--informative {\n  color: var(--s2-content-informative);\n  box-shadow: inset 0 0 0 var(--swc-border-width-100) var(--swc-informative-visual-color);\n}\n\n.sprinkle-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s2-spacing-75);\n  padding: var(--s2-spacing-75) var(--s2-spacing-200);\n  border: var(--swc-border-width-100) solid var(--s2-gray-200);\n  border-radius: var(--s2-radius-pill);\n  font-size: var(--s2-font-size-75);\n  font-weight: 500;\n  color: var(--s2-gray-800);\n  background: var(--s2-bg-layer-1);\n  cursor: default;\n  transition: background var(--s2-transition-default);\n}\n.sprinkle-chip:hover {\n  background: var(--s2-gray-100);\n}\n.sprinkle-chip svg {\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n}\n\n.sprinkle-status-light {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s2-spacing-75);\n  font-size: var(--s2-font-size-75);\n  color: var(--s2-content-default);\n}\n.sprinkle-status-light::before {\n  content: "";\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--s2-content-tertiary);\n  flex-shrink: 0;\n}\n.sprinkle-status-light--positive::before {\n  background: var(--swc-positive-visual-color);\n}\n.sprinkle-status-light--negative::before {\n  background: var(--swc-negative-visual-color);\n}\n.sprinkle-status-light--notice::before {\n  background: var(--swc-notice-visual-color);\n}\n.sprinkle-status-light--informative::before {\n  background: var(--swc-informative-visual-color);\n}\n\n.sprinkle-status-light--m {\n  font-size: var(--s2-font-size-100);\n  color: var(--s2-gray-600);\n}\n.sprinkle-status-light--m::before {\n  width: 10px;\n  height: 10px;\n}\n\n.sprinkle-card {\n  background: var(--s2-gray-25);\n  border: var(--swc-border-width-100) solid var(--s2-gray-300);\n  border-radius: var(--s2-radius-xl);\n  padding: var(--s2-spacing-400);\n  box-shadow: var(--s2-shadow-container);\n  transition: box-shadow var(--s2-transition-default);\n}\n.sprinkle-card:hover {\n  box-shadow: var(--s2-shadow-elevated);\n}\n\n.sprinkle-stat-card {\n  background: var(--s2-gray-25);\n  border: var(--swc-border-width-100) solid var(--s2-gray-300);\n  border-radius: var(--s2-radius-xl);\n  padding: var(--s2-spacing-200) var(--s2-spacing-300);\n  text-align: center;\n  box-shadow: var(--s2-shadow-container);\n  transition: box-shadow var(--s2-transition-default);\n}\n.sprinkle-stat-card:hover {\n  box-shadow: var(--s2-shadow-elevated);\n}\n.sprinkle-stat-card .value {\n  font-size: var(--s2-font-size-500);\n  font-weight: 700;\n  color: var(--s2-content-default);\n  line-height: 1.2;\n}\n.sprinkle-stat-card .label {\n  font-size: var(--s2-font-size-75);\n  font-weight: 500;\n  color: var(--s2-gray-600);\n  margin-top: var(--s2-spacing-50);\n}\n\n.sprinkle-action-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--s2-gray-25);\n  border: var(--swc-border-width-100) solid var(--s2-gray-200);\n  border-radius: var(--s2-radius-xl);\n  overflow: hidden;\n  box-shadow: var(--s2-shadow-container);\n}\n.sprinkle-action-card__header {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-200);\n  padding: var(--s2-spacing-300) var(--s2-spacing-400);\n  font-weight: 700;\n  font-size: var(--s2-font-size-200);\n  line-height: 1.3;\n  color: var(--s2-gray-900);\n}\n.sprinkle-action-card__header .sprinkle-badge {\n  margin-left: auto;\n}\n.sprinkle-action-card__title-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--swc-spacing-50);\n  min-width: 0;\n}\n\n.sprinkle-action-card__icon {\n  width: var(--swc-component-height-200);\n  height: var(--swc-component-height-200);\n  min-width: var(--swc-component-height-200);\n  border-radius: var(--s2-radius-default);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--s2-font-size-300);\n  flex-shrink: 0;\n}\n.sprinkle-action-card__icon--yellow {\n  background: var(--uxc-yellow-subtle-bg);\n  color: var(--uxc-yellow-subtle-text);\n}\n.sprinkle-action-card__icon--blue {\n  background: var(--uxc-accent-subtle-bg);\n  color: var(--uxc-accent-subtle-text);\n}\n.sprinkle-action-card__icon--green {\n  background: var(--uxc-positive-subtle-bg);\n  color: var(--uxc-positive-subtle-text);\n}\n.sprinkle-action-card__icon--indigo {\n  background: var(--uxc-indigo-subtle-bg);\n  color: var(--uxc-indigo-subtle-text);\n}\n\n.sprinkle-action-card__meta {\n  font-size: var(--s2-font-size-75);\n  font-weight: 400;\n  color: var(--s2-gray-600);\n}\n\n.sprinkle-action-card__header-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-200);\n  margin-left: auto;\n  font-size: var(--s2-font-size-75);\n  font-weight: 500;\n  color: var(--s2-gray-800);\n}\n.sprinkle-action-card__header-actions a {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-50);\n  color: var(--s2-gray-800);\n  text-decoration: none;\n}\n.sprinkle-action-card__body {\n  padding: 0 var(--s2-spacing-400) var(--s2-spacing-300);\n  font-size: var(--s2-font-size-100);\n  color: var(--s2-gray-700);\n  line-height: 1.5;\n}\n.sprinkle-action-card__actions {\n  display: flex;\n  gap: var(--s2-spacing-100);\n  justify-content: flex-end;\n  padding: var(--s2-spacing-200) var(--s2-spacing-400);\n  border-top: var(--swc-border-width-100) solid var(--s2-gray-200);\n}\n\nbody\n  > :is(.sprinkle-card, .sprinkle-stat-card, .sprinkle-action-card):not(\n    :has(~ :not(script, style, template)),\n    :not(script, style, template) ~ *\n  ),\nbody\n  > :is(.sprinkle-card, .sprinkle-stat-card, .sprinkle-action-card):not(\n    :has(~ :not(script, style, template)),\n    :not(script, style, template) ~ *\n  ):hover {\n  background: transparent;\n  border: 0;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n.sprinkle-list-item {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-300);\n  padding: var(--s2-spacing-300) var(--s2-spacing-400);\n  border-top: var(--swc-border-width-100) solid var(--s2-gray-100);\n  min-height: var(--swc-component-height-400);\n}\n.sprinkle-list-item__icon {\n  width: var(--swc-component-height-200);\n  height: var(--swc-component-height-200);\n  min-width: var(--swc-component-height-200);\n  border-radius: var(--s2-radius-default);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--s2-font-size-200);\n  flex-shrink: 0;\n  background: var(--s2-gray-75);\n}\n.sprinkle-list-item__content {\n  flex: 1;\n  min-width: 0;\n}\n.sprinkle-list-item__title {\n  font-size: var(--s2-font-size-100);\n  font-weight: 700;\n  color: var(--s2-gray-900);\n  line-height: 1.3;\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-75);\n}\n.sprinkle-list-item__subtitle {\n  font-size: var(--s2-font-size-100);\n  font-weight: 400;\n  color: var(--s2-gray-600);\n  line-height: 1.5;\n  margin-top: var(--swc-spacing-50);\n}\n.sprinkle-list-item__end {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  flex-shrink: 0;\n}\n\n.sprinkle-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--s2-font-size-100);\n  border: var(--swc-border-width-100) solid var(--s2-gray-100);\n  border-radius: var(--s2-radius-default);\n  overflow: hidden;\n}\n.sprinkle-table th {\n  text-align: left;\n  padding: var(--s2-spacing-75) var(--s2-spacing-300);\n  background: transparent;\n  border-bottom: var(--swc-border-width-100) solid var(--s2-gray-100);\n  color: var(--s2-gray-700);\n  font-weight: 700;\n  font-size: var(--s2-font-size-100);\n  line-height: 1.3;\n  height: var(--swc-component-height-100);\n  box-sizing: border-box;\n}\n.sprinkle-table td {\n  padding: var(--s2-spacing-200) var(--s2-spacing-300);\n  border-bottom: var(--swc-border-width-100) solid var(--s2-gray-100);\n  color: var(--s2-content-default);\n  font-size: var(--s2-font-size-100);\n  line-height: 1.5;\n  box-sizing: border-box;\n}\n.sprinkle-density-compact .sprinkle-table th {\n  padding: var(--s2-spacing-50) var(--s2-spacing-200);\n  font-size: var(--s2-font-size-75);\n  height: var(--swc-component-height-75);\n}\n.sprinkle-density-compact .sprinkle-table td {\n  padding: var(--s2-spacing-75) var(--s2-spacing-200);\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-table tr:last-child td {\n  border-bottom: none;\n}\n.sprinkle-table tr:hover td {\n  background: var(--s2-gray-50);\n}\n\n.sprinkle-task-group {\n  background: var(--s2-gray-50);\n  border-radius: var(--s2-radius-default);\n  padding: var(--s2-spacing-300);\n  display: flex;\n  flex-direction: column;\n  gap: var(--s2-spacing-100);\n}\n.sprinkle-task-group__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.sprinkle-task-group__title {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  font-size: var(--s2-font-size-200);\n  font-weight: 700;\n  color: var(--s2-gray-1000);\n}\n.sprinkle-task-group__title svg {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n}\n.sprinkle-task-group__meta {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-300);\n  font-size: var(--s2-font-size-75);\n  color: var(--s2-gray-600);\n}\n.sprinkle-task-item {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  height: var(--swc-component-height-75);\n  padding-left: var(--s2-spacing-50);\n  font-size: var(--s2-font-size-100);\n  line-height: var(--s2-line-height-100);\n}\n.sprinkle-task-item--done {\n  color: var(--s2-gray-600);\n}\n.sprinkle-task-item--pending {\n  color: var(--s2-gray-800);\n}\n.sprinkle-task-item__check {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n  border-radius: 50%;\n  border: var(--swc-border-width-200) solid var(--s2-gray-400);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.sprinkle-task-item--done .sprinkle-task-item__check {\n  background: var(--s2-positive);\n  border-color: var(--s2-positive);\n}\n.sprinkle-task-item--done .sprinkle-task-item__check::after {\n  content: "";\n  width: 8px;\n  height: 5px;\n  border-left: var(--swc-border-width-200) solid var(--swc-white);\n  border-bottom: var(--swc-border-width-200) solid var(--swc-white);\n  transform: rotate(-45deg) translateY(-1px);\n}\n\n.sprinkle-progress-bar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s2-spacing-75);\n  --_bar-color: var(--swc-accent-visual-color);\n}\n.sprinkle-progress-bar--positive {\n  --_bar-color: var(--swc-positive-visual-color);\n}\n.sprinkle-progress-bar--negative {\n  --_bar-color: var(--swc-negative-visual-color);\n}\n.sprinkle-progress-bar--notice {\n  --_bar-color: var(--swc-notice-visual-color);\n}\n.sprinkle-progress-bar--informative {\n  --_bar-color: var(--swc-informative-visual-color);\n}\n.sprinkle-progress-bar__header {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  font-size: var(--s2-font-size-75);\n  color: var(--s2-content-default);\n}\n.sprinkle-progress-bar__header .label {\n  font-weight: 400;\n}\n.sprinkle-progress-bar__header .value {\n  font-weight: 400;\n  color: var(--s2-gray-600);\n}\n.sprinkle-progress-bar__track {\n  height: var(--swc-progress-bar-thickness-small);\n  border-radius: var(--s2-radius-pill);\n  background: var(--s2-gray-200);\n  overflow: hidden;\n  position: relative;\n}\n.sprinkle-progress-bar__track .fill {\n  height: 100%;\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n\n.sprinkle-progress-bar__track::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  right: auto;\n  width: var(--progress, var(--value, 0%));\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n.sprinkle-progress-bar__track:has(> .fill)::after {\n  display: none;\n}\n\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track)) {\n  height: var(--swc-progress-bar-thickness-small);\n  width: 100%;\n  border-radius: var(--s2-radius-pill);\n  background: var(--s2-gray-200);\n  overflow: hidden;\n  flex-direction: row;\n  position: relative;\n}\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track))::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  right: auto;\n  width: var(--progress, var(--value, 0%));\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track)):has(> .fill)::after {\n  display: none;\n}\n\n.sprinkle-meter {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s2-spacing-75);\n  --_meter-color: var(--swc-informative-visual-color);\n}\n.sprinkle-meter--positive {\n  --_meter-color: var(--swc-positive-visual-color);\n}\n.sprinkle-meter--notice {\n  --_meter-color: var(--swc-notice-visual-color);\n}\n.sprinkle-meter--negative {\n  --_meter-color: var(--swc-negative-visual-color);\n}\n.sprinkle-meter__header {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  font-size: var(--s2-font-size-75);\n  color: var(--s2-content-default);\n}\n.sprinkle-meter__header .label {\n  font-weight: 400;\n}\n.sprinkle-meter__header .value {\n  font-weight: 400;\n  color: var(--s2-gray-600);\n}\n.sprinkle-meter__track {\n  height: var(--swc-progress-bar-thickness-small);\n  border-radius: var(--s2-radius-pill);\n  background: var(--s2-gray-200);\n  overflow: hidden;\n  position: relative;\n}\n.sprinkle-meter__track .fill {\n  height: 100%;\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_meter-color));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n.sprinkle-meter__track::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  right: auto;\n  width: var(--progress, var(--value, 0%));\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_meter-color));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n.sprinkle-meter__track:has(> .fill)::after {\n  display: none;\n}\n\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track)) > .fill {\n  height: 100%;\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n\n.sprinkle-meter:not(:has(.sprinkle-meter__track)) {\n  height: var(--swc-progress-bar-thickness-small);\n  width: 100%;\n  border-radius: var(--s2-radius-pill);\n  background: var(--s2-gray-200);\n  overflow: hidden;\n  flex-direction: row;\n  position: relative;\n}\n.sprinkle-meter:not(:has(.sprinkle-meter__track)) > .fill {\n  height: 100%;\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_meter-color));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n.sprinkle-meter:not(:has(.sprinkle-meter__track))::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  right: auto;\n  width: var(--progress, var(--value, 0%));\n  border-radius: var(--s2-radius-pill);\n  background: var(--fill-color, var(--_meter-color));\n  transition: width var(--swc-animation-duration-600) var(--swc-animation-ease-in-out);\n}\n.sprinkle-meter:not(:has(.sprinkle-meter__track)):has(> .fill)::after {\n  display: none;\n}\n\n.sprinkle-kv-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n.sprinkle-kv-list li {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--s2-spacing-100) 0;\n  border-bottom: var(--swc-border-width-100) solid var(--s2-border-subtle);\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-kv-list li:last-child {\n  border-bottom: none;\n}\n.sprinkle-kv-list .key {\n  color: var(--s2-gray-600);\n  font-weight: 400;\n}\n.sprinkle-kv-list .value {\n  color: var(--s2-content-default);\n  font-weight: 700;\n}\ndl.sprinkle-kv-list {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 0;\n  font-size: var(--s2-font-size-75);\n}\ndl.sprinkle-kv-list dt,\ndl.sprinkle-kv-list dd {\n  padding: var(--s2-spacing-100) 0;\n  border-bottom: var(--swc-border-width-100) solid var(--s2-border-subtle);\n  margin: 0;\n}\ndl.sprinkle-kv-list dt {\n  color: var(--s2-gray-600);\n  font-weight: 400;\n  padding-right: var(--s2-spacing-300);\n}\ndl.sprinkle-kv-list dd {\n  color: var(--s2-content-default);\n  font-weight: 700;\n  text-align: right;\n}\ndl.sprinkle-kv-list dt:last-of-type,\ndl.sprinkle-kv-list dd:last-of-type {\n  border-bottom: none;\n}\n\n.sprinkle-text-field {\n  width: 100%;\n  padding: var(--s2-spacing-75) var(--s2-spacing-200);\n  font-size: var(--s2-font-size-100);\n  font-family: var(--s2-font-family);\n  color: var(--s2-content-default);\n  background: var(--s2-bg-layer-1);\n  border: var(--swc-border-width-100) solid var(--s2-gray-200);\n  border-radius: var(--s2-radius-default);\n  transition: border-color var(--s2-transition-default);\n  box-sizing: border-box;\n}\n.sprinkle-text-field::placeholder {\n  color: var(--s2-content-secondary);\n}\n.sprinkle-text-field:hover {\n  border-color: var(--s2-gray-700);\n}\n.sprinkle-text-field:focus {\n  border-color: var(--s2-gray-800);\n}\n\n.sprinkle-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: var(--s2-spacing-200);\n}\n.sprinkle-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s2-spacing-200);\n}\n.sprinkle-row {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-200);\n}\n\n.sprinkle-divider {\n  border: none;\n  border-top: var(--swc-border-width-100) solid var(--s2-border-subtle);\n  margin: var(--s2-spacing-200) 0;\n}\n.sprinkle-divider--medium {\n  border-top-width: var(--swc-border-width-200);\n  border-top-color: var(--s2-border-default);\n  margin: var(--s2-spacing-300) 0;\n}\n\n.sprinkle-empty-state {\n  text-align: center;\n  padding: var(--s2-spacing-500) var(--s2-spacing-300);\n  color: var(--s2-content-tertiary);\n  font-size: var(--s2-font-size-100);\n}\n\n.sprinkle-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  padding: var(--s2-spacing-100) var(--s2-spacing-200);\n  border-bottom: var(--swc-border-width-100) solid var(--s2-gray-200);\n  background: var(--s2-gray-50);\n  min-height: var(--swc-component-height-200);\n  flex-shrink: 0;\n}\n.sprinkle-toolbar__start {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n}\n.sprinkle-toolbar__center {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  flex: 1;\n  justify-content: center;\n}\n.sprinkle-toolbar__end {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  margin-left: auto;\n}\n\n.sprinkle-tabs {\n  display: flex;\n  gap: 0;\n  border-bottom: var(--swc-border-width-100) solid var(--s2-gray-200);\n  background: var(--s2-gray-50);\n  flex-shrink: 0;\n  overflow-x: auto;\n}\n.sprinkle-tabs__tab {\n  padding: var(--s2-spacing-100) var(--s2-spacing-200);\n  font-size: var(--s2-font-size-100);\n  font-weight: 500;\n  color: var(--s2-gray-600);\n  background: none;\n  border: none;\n  border-bottom: var(--swc-border-width-200) solid transparent;\n  cursor: default;\n  white-space: nowrap;\n  transition:\n    color var(--s2-transition-default),\n    border-color var(--s2-transition-default);\n  font-family: var(--s2-font-family);\n}\n.sprinkle-tabs__tab:hover {\n  color: var(--s2-gray-800);\n}\n.sprinkle-tabs__tab--active {\n  color: var(--s2-gray-900);\n  border-bottom-color: var(--s2-gray-900);\n  font-weight: 700;\n}\n.sprinkle-tabs__panel {\n  display: none;\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n.sprinkle-tabs__panel--active {\n  display: flex;\n  flex-direction: column;\n}\n\n.sprinkle-sidebar {\n  display: flex;\n  gap: 0;\n  min-height: 0;\n  flex: 1;\n}\n.sprinkle-sidebar__nav {\n  width: 240px;\n  min-width: 240px;\n  overflow-y: auto;\n  border-right: var(--swc-border-width-100) solid var(--s2-gray-200);\n  background: var(--s2-gray-50);\n  padding: var(--s2-spacing-200) 0;\n}\n.sprinkle-sidebar__nav-item {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  padding: var(--s2-spacing-100) var(--s2-spacing-200);\n  font-size: var(--s2-font-size-100);\n  color: var(--s2-gray-700);\n  cursor: default;\n  border-radius: 0;\n  transition: background var(--s2-transition-default);\n}\n.sprinkle-sidebar__nav-item:hover {\n  background: var(--s2-gray-100);\n}\n.sprinkle-sidebar__nav-item--active {\n  background: var(--s2-gray-800);\n  color: var(--s2-gray-25);\n  font-weight: 600;\n}\n.sprinkle-sidebar__nav-label {\n  padding: var(--s2-spacing-200) var(--s2-spacing-200) var(--s2-spacing-50);\n  font-size: var(--s2-font-size-75);\n  font-weight: 700;\n  color: var(--s2-gray-600);\n}\n.sprinkle-sidebar__main {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n  padding: var(--s2-spacing-200);\n}\n\n.sprinkle-dialog {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n}\n.sprinkle-dialog[hidden] {\n  display: none;\n}\n.sprinkle-dialog__backdrop {\n  position: absolute;\n  inset: 0;\n  background: var(--swc-overlay-color);\n  opacity: var(--swc-overlay-opacity-light);\n}\n.sprinkle-dialog__content {\n  position: relative;\n  background: var(--s2-gray-25);\n  border-radius: var(--s2-radius-xl);\n  box-shadow: var(--s2-shadow-elevated);\n  padding: var(--s2-spacing-400);\n  max-width: min(560px, calc(100% - 32px));\n  max-height: calc(100% - 64px);\n  overflow-y: auto;\n  min-width: 280px;\n}\n.sprinkle-dialog__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: var(--s2-spacing-300);\n}\n.sprinkle-dialog__title {\n  font-size: var(--s2-font-size-200);\n  font-weight: 700;\n  color: var(--s2-content-default);\n}\n.sprinkle-dialog__close {\n  width: var(--swc-component-height-100);\n  height: var(--swc-component-height-100);\n  border-radius: var(--s2-radius-pill);\n  border: none;\n  background: none;\n  color: var(--s2-gray-600);\n  cursor: default;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--s2-font-size-300);\n  transition: background var(--s2-transition-default);\n}\n.sprinkle-dialog__close:hover {\n  background: var(--s2-gray-100);\n}\n.sprinkle-dialog__footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--s2-spacing-100);\n  margin-top: var(--s2-spacing-300);\n}\n\n.sprinkle-collapsible__header {\n  display: flex;\n  align-items: center;\n  gap: var(--s2-spacing-100);\n  padding: var(--s2-spacing-100) var(--s2-spacing-200);\n  cursor: default;\n  font-size: var(--s2-font-size-100);\n  font-weight: 600;\n  color: var(--s2-content-default);\n  background: none;\n  border: none;\n  width: 100%;\n  text-align: left;\n  border-radius: var(--s2-radius-default);\n  transition: background var(--s2-transition-default);\n  font-family: var(--s2-font-family);\n}\n.sprinkle-collapsible__header:hover {\n  background: var(--s2-gray-100);\n}\n.sprinkle-collapsible__chevron {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  transition: transform var(--swc-animation-duration-200) var(--swc-animation-ease-in-out);\n  flex-shrink: 0;\n}\n.sprinkle-collapsible__chevron::before {\n  content: "";\n  width: var(--s2-spacing-75);\n  height: var(--s2-spacing-75);\n  border-right: var(--swc-border-width-200) solid var(--s2-content-tertiary);\n  border-bottom: var(--swc-border-width-200) solid var(--s2-content-tertiary);\n  transform: translateX(calc(-1 * var(--swc-spacing-50))) rotate(-45deg);\n}\n.sprinkle-collapsible--open .sprinkle-collapsible__chevron {\n  transform: rotate(90deg);\n}\n.sprinkle-collapsible__body {\n  display: none;\n  padding: var(--s2-spacing-100) var(--s2-spacing-200) var(--s2-spacing-200)\n    calc(var(--s2-spacing-200) + 16px + var(--s2-spacing-100));\n}\n.sprinkle-collapsible--open .sprinkle-collapsible__body {\n  display: block;\n}\n\n.sprinkle-split {\n  display: flex;\n  gap: 0;\n  min-height: 0;\n  flex: 1;\n}\n.sprinkle-split > * {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n.sprinkle-split > :not(:last-child) {\n  border-right: var(--swc-border-width-100) solid var(--s2-border-default);\n}\n.sprinkle-split--vertical {\n  flex-direction: column;\n}\n.sprinkle-split--vertical > :not(:last-child) {\n  border-right: none;\n  border-bottom: var(--swc-border-width-100) solid var(--s2-border-default);\n}\n\n.sprinkle-canvas {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--s2-radius-l);\n  background: var(--s2-bg-layer-1);\n}\n.sprinkle-canvas--16x9 {\n  aspect-ratio: 16 / 9;\n}\n.sprinkle-canvas--4x3 {\n  aspect-ratio: 4 / 3;\n}\n.sprinkle-canvas--1x1 {\n  aspect-ratio: 1 / 1;\n}\n.sprinkle-canvas svg,\n.sprinkle-canvas canvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.sprinkle-density-compact .sprinkle-content {\n  padding: var(--s2-spacing-100);\n}\n.sprinkle-density-compact .sprinkle-heading {\n  font-size: var(--s2-font-size-100);\n  margin-bottom: var(--s2-spacing-50);\n}\n.sprinkle-density-compact .sprinkle-heading--m {\n  font-size: var(--s2-font-size-100);\n}\n.sprinkle-density-compact .sprinkle-body {\n  font-size: var(--s2-font-size-75);\n  line-height: 1.4;\n}\n.sprinkle-density-compact .sprinkle-detail {\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-btn {\n  height: var(--swc-component-height-75);\n  font-size: var(--s2-font-size-75);\n  padding: 0 var(--s2-spacing-100);\n}\n.sprinkle-density-compact .sprinkle-badge {\n  font-size: var(--s2-font-size-75);\n  padding: var(--swc-spacing-50) var(--s2-spacing-75);\n}\n.sprinkle-density-compact .sprinkle-card {\n  padding: var(--s2-spacing-200);\n}\n.sprinkle-density-compact .sprinkle-list-item {\n  padding: var(--s2-spacing-100) var(--s2-spacing-300);\n  min-height: var(--swc-component-height-200);\n  gap: var(--s2-spacing-100);\n}\n.sprinkle-density-compact .sprinkle-list-item__icon {\n  width: var(--swc-component-height-75);\n  height: var(--swc-component-height-75);\n  min-width: var(--swc-component-height-75);\n  font-size: var(--s2-font-size-100);\n}\n.sprinkle-density-compact .sprinkle-list-item__title {\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-list-item__subtitle {\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-sidebar__nav-item {\n  padding: var(--s2-spacing-75) var(--s2-spacing-200);\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-text-field {\n  height: var(--swc-component-height-75);\n  font-size: var(--s2-font-size-75);\n  padding: var(--s2-spacing-50) var(--s2-spacing-100);\n}\n.sprinkle-density-compact .sprinkle-tabs__tab {\n  padding: var(--s2-spacing-75) var(--s2-spacing-200);\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-kv-list li {\n  padding: var(--s2-spacing-75) 0;\n  font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-chip {\n  padding: var(--swc-spacing-50) var(--s2-spacing-100);\n  font-size: var(--s2-font-size-75);\n}\n\n.sprinkle-density-spacious .sprinkle-content {\n  padding: var(--s2-spacing-400);\n}\n.sprinkle-density-spacious .sprinkle-heading {\n  font-size: var(--s2-font-size-500);\n  margin-bottom: var(--s2-spacing-200);\n}\n.sprinkle-density-spacious .sprinkle-heading--m {\n  font-size: var(--s2-font-size-300);\n}\n.sprinkle-density-spacious .sprinkle-body {\n  font-size: var(--s2-font-size-200);\n  line-height: 1.65;\n}\n.sprinkle-density-spacious .sprinkle-card {\n  padding: var(--s2-spacing-500);\n}\n.sprinkle-density-spacious .sprinkle-btn {\n  height: var(--swc-component-height-200);\n  padding: 0 var(--swc-spacing-350);\n}\n.sprinkle-density-spacious .sprinkle-action-card__body {\n  padding: 0 var(--s2-spacing-500) var(--s2-spacing-400);\n  font-size: var(--s2-font-size-200);\n}\n\n:is(\n  .sprinkle-btn,\n  .sprinkle-chip,\n  .sprinkle-text-field,\n  .sprinkle-tabs__tab,\n  .sprinkle-sidebar__nav-item,\n  .sprinkle-dialog__close,\n  .sprinkle-collapsible__header,\n  .sprinkle-action-card__header-actions a\n):focus-visible {\n  outline: var(--swc-focus-indicator-thickness) solid var(--s2-border-focus);\n  outline-offset: var(--swc-focus-ring-gap);\n}\n\n@media (forced-colors: active) {\n  :is(\n    .sprinkle-btn,\n    .sprinkle-chip,\n    .sprinkle-text-field,\n    .sprinkle-tabs__tab,\n    .sprinkle-sidebar__nav-item,\n    .sprinkle-dialog__close,\n    .sprinkle-collapsible__header,\n    .sprinkle-action-card__header-actions a\n  ):focus-visible {\n    outline-color: Highlight;\n  }\n}\n\n.sprinkle-panel {\n  container-type: inline-size;\n}\n\n@container (max-width: 400px) {\n  .sprinkle-sidebar {\n    flex-direction: column;\n  }\n  .sprinkle-sidebar__nav {\n    width: 100%;\n    min-width: 0;\n    max-height: 200px;\n    border-right: none;\n    border-bottom: var(--swc-border-width-100) solid var(--s2-border-default);\n  }\n  .sprinkle-grid {\n    grid-template-columns: 1fr;\n  }\n  .sprinkle-split:not(.sprinkle-split--vertical) {\n    flex-direction: column;\n  }\n  .sprinkle-split:not(.sprinkle-split--vertical) > :not(:last-child) {\n    border-right: none;\n    border-bottom: var(--swc-border-width-100) solid var(--s2-border-default);\n  }\n  .sprinkle-toolbar {\n    flex-wrap: wrap;\n  }\n}\n\n@container (min-width: 600px) {\n  .sprinkle-sidebar__nav {\n    width: 240px;\n    min-width: 240px;\n  }\n  .sprinkle-grid {\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  }\n}\n';
 
 // src/app/sprinkle-tokens.ts
 var reference = /--swc-[\w-]+/g;
@@ -58289,12 +58568,16 @@ function findLeaf(candiateNode, last) {
   if (candiateNode instanceof BranchNode) return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
   throw new Error("invalid node");
 }
+function childSizing(node2, index2, size4, scale = 1) {
+  const cachedVisibleSize = node2.getChildCachedVisibleSize(index2);
+  return cachedVisibleSize === void 0 ? size4 : Sizing.Invisible(Math.round(cachedVisibleSize * scale));
+}
 function cloneNode(node2, size4, orthogonalSize) {
   if (node2 instanceof BranchNode) {
     const result = new BranchNode(node2.orientation, node2.proportionalLayout, node2.styles, size4, orthogonalSize, node2.disabled, node2.margin);
     for (let i25 = node2.children.length - 1; i25 >= 0; i25--) {
       const child = node2.children[i25];
-      result.addChild(cloneNode(child, child.size, child.orthogonalSize), child.size, 0, true);
+      result.addChild(cloneNode(child, child.size, child.orthogonalSize), childSizing(node2, i25, child.size), 0, true);
     }
     return result;
   } else return new LeafNode(node2.view, node2.orientation, orthogonalSize);
@@ -58303,13 +58586,14 @@ function flipNode(node2, size4, orthogonalSize) {
   if (node2 instanceof BranchNode) {
     const result = new BranchNode(orthogonal(node2.orientation), node2.proportionalLayout, node2.styles, size4, orthogonalSize, node2.disabled, node2.margin);
     let totalSize = 0;
+    const cachedSizeScale = node2.size === 0 ? 1 : size4 / node2.size;
     for (let i25 = node2.children.length - 1; i25 >= 0; i25--) {
       const child = node2.children[i25];
       const childSize = child instanceof BranchNode ? child.orthogonalSize : child.size;
       let newSize = node2.size === 0 ? 0 : Math.round(size4 * childSize / node2.size);
       totalSize += newSize;
       if (i25 === 0) newSize += size4 - totalSize;
-      result.addChild(flipNode(child, orthogonalSize, newSize), newSize, 0, true);
+      result.addChild(flipNode(child, orthogonalSize, newSize), childSizing(node2, i25, newSize, cachedSizeScale), 0, true);
     }
     return result;
   } else return new LeafNode(node2.view, orthogonal(node2.orientation), orthogonalSize);
@@ -58764,7 +59048,8 @@ var Gridview = class {
       sizes.splice(parentIndex, 1, ...sibling.children.map((c28) => c28.size));
       for (let i25 = 0; i25 < sibling.children.length; i25++) {
         const child = sibling.children[i25];
-        grandParent.addChild(child, child.size, parentIndex + i25);
+        const childSize = childSizing(sibling, i25, child.size);
+        grandParent.addChild(child, !isSiblingVisible && typeof childSize === "number" ? Sizing.Invisible(childSize) : childSize, parentIndex + i25);
       }
       while (sibling.children.length > 0) sibling.removeChild(0);
     } else {
@@ -61159,6 +61444,9 @@ var ContentContainer = class extends CompositeDisposable {
   get element() {
     return this._element;
   }
+  get dimensions() {
+    return this._dimensions;
+  }
   constructor(accessor, group) {
     var _this$accessor$resolv, _this$accessor, _this$accessor$resolv2, _this$accessor2, _this$accessor$onDidO, _this$accessor$onDidO2, _this$accessor3;
     super();
@@ -61169,12 +61457,14 @@ var ContentContainer = class extends CompositeDisposable {
     this.onDidFocus = this._onDidFocus.event;
     this._onDidBlur = new Emitter2();
     this.onDidBlur = this._onDidBlur.event;
+    this._onDidDimensionsChange = new Emitter2();
+    this.onDidDimensionsChange = this._onDidDimensionsChange.event;
     this._element = document.createElement("div");
     this._element.className = "dv-content-container";
     this._element.tabIndex = -1;
     this._element.id = nextContentId();
     this._element.setAttribute("role", "tabpanel");
-    this.addDisposables(this._onDidFocus, this._onDidBlur);
+    this.addDisposables(this._onDidFocus, this._onDidBlur, this._onDidDimensionsChange);
     const getOverrideTarget = () => {
       var _group$dropTargetCont;
       return (_group$dropTargetCont = group.dropTargetContainer) === null || _group$dropTargetCont === void 0 ? void 0 : _group$dropTargetCont.model;
@@ -61284,7 +61574,14 @@ var ContentContainer = class extends CompositeDisposable {
     if (this.panel === panel) return;
     this.renderPanel(panel);
   }
-  layout(_width, _height) {
+  layout(width, height) {
+    var _this$_dimensions;
+    if (((_this$_dimensions = this._dimensions) === null || _this$_dimensions === void 0 ? void 0 : _this$_dimensions.width) === width && this._dimensions.height === height) return;
+    this._dimensions = {
+      width,
+      height
+    };
+    this._onDidDimensionsChange.fire(this._dimensions);
   }
   closePanel() {
     if (this.panel) {
@@ -65635,7 +65932,6 @@ var DockviewGroupPanelModel = class extends CompositeDisposable {
     return (_this$_headerPosition = this._headerPosition) !== null && _this$_headerPosition !== void 0 ? _this$_headerPosition : "top";
   }
   set headerPosition(value) {
-    var _this$_activePanel;
     this._headerPosition = value;
     this.invalidateHeaderSize();
     removeClasses(this.container, "dv-groupview-header-top", "dv-groupview-header-bottom", "dv-groupview-header-left", "dv-groupview-header-right");
@@ -65645,10 +65941,7 @@ var DockviewGroupPanelModel = class extends CompositeDisposable {
     this._headerDirection = direction;
     this.tabsContainer.direction = direction;
     this.header.direction = direction;
-    if ((_this$_activePanel = this._activePanel) === null || _this$_activePanel === void 0 ? void 0 : _this$_activePanel.layout) {
-      const { width, height } = this.contentDimensions();
-      this._activePanel.layout(width, height);
-    }
+    if (this.panels.length > 0) this.layoutContent();
     this.updateHeaderActions();
     if (previousDirection !== void 0 && previousDirection !== direction) {
       var _this$groupPanel;
@@ -66152,10 +66445,7 @@ var DockviewGroupPanelModel = class extends CompositeDisposable {
     this.panels.forEach((panel) => {
       this.rerender(panel);
     });
-    if (this._activePanel) {
-      const { width, height } = this.contentDimensions();
-      this._activePanel.layout(width, height);
-    }
+    if (this.panels.length > 0) this.layoutContent();
   }
   get renderContainer() {
     var _this$_overwriteRende;
@@ -66202,10 +66492,10 @@ var DockviewGroupPanelModel = class extends CompositeDisposable {
     return this.tabsContainer.indexOf(panel.id);
   }
   toJSON() {
-    var _this$_activePanel2;
+    var _this$_activePanel;
     const result = {
       views: this.tabsContainer.panels,
-      activeView: (_this$_activePanel2 = this._activePanel) === null || _this$_activePanel2 === void 0 ? void 0 : _this$_activePanel2.id,
+      activeView: (_this$_activePanel = this._activePanel) === null || _this$_activePanel === void 0 ? void 0 : _this$_activePanel.id,
       id: this.id
     };
     if (this.locked !== false) result.locked = this.locked;
@@ -66245,8 +66535,8 @@ var DockviewGroupPanelModel = class extends CompositeDisposable {
   update(_params) {
   }
   focus() {
-    var _this$_activePanel3;
-    (_this$_activePanel3 = this._activePanel) === null || _this$_activePanel3 === void 0 || _this$_activePanel3.focus();
+    var _this$_activePanel2;
+    (_this$_activePanel2 = this._activePanel) === null || _this$_activePanel2 === void 0 || _this$_activePanel2.focus();
   }
   openPanel(panel, options2 = {}) {
     if (typeof options2.index !== "number" || options2.index > this.panels.length) options2.index = this.panels.length;
@@ -66304,12 +66594,24 @@ var DockviewGroupPanelModel = class extends CompositeDisposable {
     this.updateContainer();
   }
   layout(width, height) {
-    var _this$_activePanel4;
     this._width = width;
     this._height = height;
-    const { width: contentWidth, height: contentHeight } = this.contentDimensions();
-    this.contentContainer.layout(contentWidth, contentHeight);
-    if ((_this$_activePanel4 = this._activePanel) === null || _this$_activePanel4 === void 0 ? void 0 : _this$_activePanel4.layout) this._activePanel.layout(contentWidth, contentHeight);
+    this.layoutContent();
+  }
+  /**
+  * Apply the current content box (group box minus header extent) to the
+  * content container and the active panel. Every path that can change that
+  * box goes through here so the container's recorded dimensions, which size
+  * overlay-rendered panels, never lag the active panel's. Callers other
+  * than `layout()` skip it for a group with no panels: there is nothing to
+  * size, and measuring the header of a group that is not in the document
+  * yet (the constructor sets `headerPosition`) would cache a zero extent.
+  */
+  layoutContent() {
+    var _this$_activePanel3;
+    const { width, height } = this.contentDimensions();
+    this.contentContainer.layout(width, height);
+    if ((_this$_activePanel3 = this._activePanel) === null || _this$_activePanel3 === void 0 ? void 0 : _this$_activePanel3.layout) this._activePanel.layout(width, height);
   }
   /**
   * Re-run the group's layout with its current dimensions. Used to propagate a
@@ -66402,8 +66704,7 @@ var DockviewGroupPanelModel = class extends CompositeDisposable {
       this.tabsContainer.setActivePanel(panel);
       this.contentContainer.setLabelledBy(this.tabsContainer.getTabId(panel.id));
       this.contentContainer.openPanel(panel);
-      const { width, height } = this.contentDimensions();
-      panel.layout(width, height);
+      this.layoutContent();
       this.updateMru(panel);
       this.contentContainer.refreshFocusState();
       this._onDidActivePanelChange.fire({
@@ -66415,8 +66716,8 @@ var DockviewGroupPanelModel = class extends CompositeDisposable {
   }
   /** Label the group region with its active panel's title (the WAI-ARIA region name). */
   updateAccessibleLabel() {
-    var _this$_activePanel5;
-    const title2 = (_this$_activePanel5 = this._activePanel) === null || _this$_activePanel5 === void 0 ? void 0 : _this$_activePanel5.title;
+    var _this$_activePanel4;
+    const title2 = (_this$_activePanel4 = this._activePanel) === null || _this$_activePanel4 === void 0 ? void 0 : _this$_activePanel4.title;
     if (title2) this.container.setAttribute("aria-label", title2);
     else this.container.removeAttribute("aria-label");
   }
@@ -69149,6 +69450,10 @@ function createFocusableElement() {
   element2.tabIndex = -1;
   return element2;
 }
+function setPixels(style2, property, value) {
+  const next = `${value}px`;
+  if (style2[property] !== next) style2[property] = next;
+}
 var OverlayRenderContainer = class extends CompositeDisposable {
   constructor(element2, accessor) {
     super();
@@ -69238,6 +69543,14 @@ var OverlayRenderContainer = class extends CompositeDisposable {
     const generation = mapEntry.generation;
     const focusContainer = mapEntry.element;
     const contentElement = panel.view.content.element;
+    const applySize = (size4) => {
+      if (!size4 || size4.width <= 0 || size4.height <= 0) return;
+      const entry = this.map[panel.api.id];
+      if (!entry || entry.forceVisible || entry.positioned && panel.api.isVisible) return;
+      setPixels(focusContainer.style, "width", size4.width);
+      setPixels(focusContainer.style, "height", size4.height);
+    };
+    applySize(referenceContainer.dimensions);
     if (contentElement.parentElement !== focusContainer) focusContainer.appendChild(contentElement);
     if (focusContainer.parentElement !== this.element) this.element.appendChild(focusContainer);
     const resize = () => {
@@ -69268,10 +69581,10 @@ var OverlayRenderContainer = class extends CompositeDisposable {
         }
         entry.retainPreviousGeometry = false;
         entry.positioned = true;
-        focusContainer.style.left = `${left}px`;
-        focusContainer.style.top = `${top}px`;
-        focusContainer.style.width = `${width}px`;
-        focusContainer.style.height = `${height}px`;
+        setPixels(focusContainer.style, "left", left);
+        setPixels(focusContainer.style, "top", top);
+        setPixels(focusContainer.style, "width", width);
+        setPixels(focusContainer.style, "height", height);
         if (panel.api.isVisible || forceVisible) {
           focusContainer.style.visibility = "";
           focusContainer.style.pointerEvents = "";
@@ -69366,6 +69679,9 @@ var OverlayRenderContainer = class extends CompositeDisposable {
         if (!panel.api.isVisible) return;
         resize();
       }),
+      referenceContainer.onDidDimensionsChange((size4) => {
+        applySize(size4);
+      }),
       panel.api.onDidLocationChange(() => {
         correctLayerPosition();
       })
@@ -83260,7 +83576,7 @@ lit-html/static.js:
 dockview-core/dist/package/main.esm.mjs:
   (**
    * dockview-core
-   * @version 8.6.0
+   * @version 8.6.1
    * @link https://github.com/dockview/dockview
    * @license MIT
    *)