@oversk7/pi-web-dsh-style 1.0.1 → 1.1.0

package/web/index.html

@@ -8,11 +8,15 @@
     <link rel="manifest" href="/manifest.webmanifest" />
     <title>Pi Web</title>
     <link rel="stylesheet" href="/app.css" />
+    <link rel="stylesheet" href="/themes.css" />
   </head>
   <body>
     <script>
       (() => {
-        const preference = localStorage.getItem("pi-web-theme") || "system";
+        const saved = localStorage.getItem("pi-web-theme");
+        const preference = ["light", "dark", "system"].includes(saved) ? saved : "system";
+        const style = localStorage.getItem("pi-web-theme-style");
+        document.body.dataset.themeStyle = ["classic", "sakura", "starlight"].includes(style) ? style : "classic";
         const systemDark = preference === "system" && matchMedia("(prefers-color-scheme: dark)").matches;
         const dark = preference === "dark" || systemDark;
         document.documentElement.style.colorScheme = dark ? "dark" : "light";

package/web/markdown.ts

@@ -0,0 +1,118 @@
+import MarkdownIt from "markdown-it";
+import hljs from "highlight.js/lib/common";
+import dockerfile from "highlight.js/lib/languages/dockerfile";
+import powershell from "highlight.js/lib/languages/powershell";
+
+hljs.registerLanguage("dockerfile", dockerfile);
+hljs.registerLanguage("powershell", powershell);
+
+function localFileLink(target: string) {
+  let value = target.trim();
+  let line: number | null = null;
+  const location = /#L(\d+)(?:C\d+)?$/i.exec(value) || /:(\d+)(?::\d+)?$/.exec(value);
+  if (location) {
+    line = Number(location[1]);
+    value = value.slice(0, location.index);
+  }
+  if (/^file:\/\/\//i.test(value)) {
+    try {
+      value = decodeURIComponent(new URL(value).pathname).replace(/^\/([A-Za-z]:[\\/])/, "$1");
+    } catch {
+      return null;
+    }
+  }
+  value = value.replace(/^\/([A-Za-z]:[\\/])/, "$1");
+  if (!/^[A-Za-z]:[\\/]/.test(value) && !/^\\\\[^\\]+\\[^\\]+/.test(value)) return null;
+  const href = `/api/fs/view?path=${encodeURIComponent(value)}${line ? `#L${line}` : ""}`;
+  return { path: value, line, href };
+}
+
+const parser = new MarkdownIt({ html: false, breaks: false, linkify: true });
+const InlineState = parser.inline.State;
+parser.inline.State = class extends InlineState {
+  scanDelims(start: number, canSplitWord: boolean) {
+    const scanned = super.scanDelims(start, canSplitWord);
+    if (this.src[start] !== "*" || scanned.length < 2) return scanned;
+    const before = this.src.slice(Math.max(0, start - 2), start);
+    const end = start + scanned.length;
+    const after = end < this.posMax ? String.fromCodePoint(this.src.codePointAt(end)!) : "";
+    // Chinese punctuation can border emphasis even beside Latin text or numbers.
+    const cjkPunctuation = /[\u2000-\u206f\u3000-\u303f\uff00-\uffef]/u;
+    if (/^\p{P}/u.test(after) && (cjkPunctuation.test(after) || /\p{Script=Han}$/u.test(before))) scanned.can_open = true;
+    if (/\p{P}$/u.test(before) && (cjkPunctuation.test(before.slice(-1)) || /^\p{Script=Han}/u.test(after))) scanned.can_close = true;
+    return scanned;
+  }
+};
+const escape = parser.utils.escapeHtml;
+const normalizeLink = parser.normalizeLink;
+const validateLink = parser.validateLink;
+parser.normalizeLink = (target) => localFileLink(target) ? target : normalizeLink(target);
+parser.validateLink = (target) => Boolean(localFileLink(target)) || validateLink(target);
+
+parser.renderer.rules.link_open = (tokens, index, options, env, renderer) => {
+  const token = tokens[index];
+  const target = String(token.attrGet("href") || "");
+  const local = localFileLink(target);
+  if (local) {
+    token.attrSet("href", local.href);
+    token.attrJoin("class", "md-local-file");
+    token.attrSet("data-file-path", local.path);
+    token.attrSet("data-file-line", local.line ? String(local.line) : "");
+    token.attrSet("title", `${local.path}${local.line ? `:${local.line}` : ""}`);
+  } else if (/^https?:\/\//i.test(target)) {
+    token.attrSet("target", "_blank");
+    token.attrSet("rel", "noopener noreferrer");
+  }
+  return renderer.renderToken(tokens, index, options);
+};
+
+const renderImage = parser.renderer.rules.image!;
+parser.renderer.rules.image = (tokens, index, options, env, renderer) => {
+  const local = localFileLink(String(tokens[index].attrGet("src") || ""));
+  if (local) tokens[index].attrSet("src", `/api/fs/view?path=${encodeURIComponent(local.path)}&format=image`);
+  tokens[index].attrSet("loading", "lazy");
+  tokens[index].attrSet("decoding", "async");
+  tokens[index].attrSet("referrerpolicy", "no-referrer");
+  return renderImage(tokens, index, options, env, renderer);
+};
+
+parser.renderer.rules.fence = (tokens, index) => {
+  const token = tokens[index];
+  const language = token.info.trim().split(/\s+/)[0];
+  let code = escape(token.content);
+  // Bound synchronous highlighting work while streaming large tool-generated snippets.
+  if (language && hljs.getLanguage(language) && token.content.length <= 32 * 1024) {
+    code = hljs.highlight(token.content, { language, ignoreIllegals: true }).value;
+  }
+  const label = language ? `<div class="md-code-language">${escape(language)}</div>` : "";
+  return `<div class="md-code-container">${label}<pre class="md-code-block"><code class="hljs">${code}</code></pre></div>\n`;
+};
+parser.renderer.rules.code_block = (tokens, index) => `<pre class="md-code-block"><code>${escape(tokens[index].content)}</code></pre>\n`;
+parser.renderer.rules.table_open = () => '<div class="md-table-wrap"><table>\n';
+parser.renderer.rules.table_close = () => '</table></div>\n';
+
+parser.core.ruler.after("inline", "task_lists", (state) => {
+  for (let i = 2; i < state.tokens.length; i += 1) {
+    const token = state.tokens[i];
+    const paragraph = state.tokens[i - 1];
+    const item = state.tokens[i - 2];
+    if (token.type !== "inline" || paragraph.type !== "paragraph_open" || item.type !== "list_item_open") continue;
+    const first = token.children?.[0];
+    if (first?.type !== "text") continue;
+    const match = /^\[([ xX])\](?:\s+|$)/.exec(first.content);
+    if (!match) continue;
+    first.content = first.content.slice(match[0].length);
+    const checkbox = new state.Token("task_checkbox", "input", 0);
+    checkbox.meta = { checked: match[1].toLowerCase() === "x" };
+    token.children!.unshift(checkbox);
+    item.attrJoin("class", "md-task-item");
+  }
+});
+parser.renderer.rules.task_checkbox = (tokens, index) => {
+  const checked = tokens[index].meta!.checked;
+  return `<input type="checkbox" disabled${checked ? " checked" : ""} aria-label="${checked ? "已完成" : "未完成"}"/> `;
+};
+
+export function markdown(src: unknown): string {
+  return parser.render(String(src ?? ""));
+}

package/web/slash-commands.d.ts

@@ -0,0 +1,11 @@
+export interface WebSlashCommand {
+  name: string;
+  description: string;
+  acceptsArgs?: boolean;
+  source: string;
+  local: boolean;
+}
+export const webSlashCommands: WebSlashCommand[];
+export const unsupportedSlashCommands: Record<string, string>;
+export function parseSlashCommand(text: string): { name: string; args: string } | null;
+export function builtinCommandError(name: string): string | null;

package/web/slash-commands.js

@@ -0,0 +1,46 @@
+// Shared by the browser and server so built-in commands never fall through to RPC prompts.
+export const webSlashCommands = [
+  { name: "settings", description: "打开界面与运行时设置" },
+  { name: "model", description: "选择当前模型", acceptsArgs: true },
+  { name: "thinking", description: "选择思考强度", acceptsArgs: true },
+  { name: "export", description: "将当前会话下载为 HTML" },
+  { name: "copy", description: "复制最后一条助手回复" },
+  { name: "name", description: "设置当前会话名称", acceptsArgs: true },
+  { name: "session", description: "显示会话统计信息" },
+  { name: "new", description: "在当前工作区创建新会话" },
+  { name: "resume", description: "打开侧栏搜索并切换会话" },
+  { name: "rewind", description: "回溯对话，可选择同步恢复文件" },
+  { name: "tree", description: "打开当前会话的分支树" },
+  { name: "compact", description: "压缩当前会话，可附加压缩要求", acceptsArgs: true },
+  { name: "reload", description: "重新加载当前会话的扩展与配置" },
+].map((command) => ({ ...command, source: "builtin", local: true }));
+
+export const unsupportedSlashCommands = {
+  "scoped-models": "Web 暂不支持终端模型轮换范围，请使用 /model 选择模型。",
+  import: "Web 暂不支持从命令导入 JSONL 文件，请在 Pi 终端执行 /import。",
+  share: "Web 暂不支持发布 GitHub gist，请使用 /export 下载会话，或在 Pi 终端执行 /share。",
+  fork: "Web 暂不支持创建分叉副本，请在 Pi 终端执行 /fork；同一会话内切换分支可使用 /tree。",
+  clone: "Web 暂不支持复制整个会话，请在 Pi 终端执行 /clone。",
+  trust: "项目信任设置需要在 Pi 终端中通过 /trust 管理。",
+  changelog: "Web 暂不展示 Pi 更新日志，请在 Pi 终端执行 /changelog。",
+  hotkeys: "终端快捷键不适用于网页。网页输入框支持 Enter 发送、Shift+Enter 换行，命令菜单支持方向键选择和 Tab 补全。",
+  debug: "此调试命令仅支持 Pi 终端。",
+  arminsayshi: "此彩蛋命令仅支持 Pi 终端。",
+  dementedelves: "此彩蛋命令仅支持 Pi 终端。",
+  login: "Web 暂不支持登录流程，请在启动 Pi 的终端执行 /login。",
+  logout: "Web 暂不支持注销流程，请在启动 Pi 的终端执行 /logout。",
+  quit: "请关闭网页标签页；如需退出 Pi，请在启动 Pi 的终端执行 /quit。",
+};
+
+export function parseSlashCommand(text) {
+  const match = /^\/([^\s]+)(?:\s+([\s\S]*))?$/.exec(text.trim());
+  return match ? { name: match[1], args: (match[2] || "").trim() } : null;
+}
+
+export function builtinCommandError(name) {
+  if (Object.hasOwn(unsupportedSlashCommands, name)) return unsupportedSlashCommands[name];
+  if (webSlashCommands.some((command) => command.name === name)) {
+    return `/${name} 需要由 Web 命令入口执行，请刷新网页后重试。`;
+  }
+  return null;
+}

package/web/themes.css

@@ -0,0 +1,158 @@
+body[data-theme-style=classic][data-custom-background]{
+  --pi-base:#f9fafb;--pi-surface:#fff;--pi-raised:#fff;--pi-soft:#f1f3f5;--pi-sidebar:#f5f6f7;
+  --pi-text:#0f1115;--pi-secondary:#50555e;--pi-muted:#656b76;--pi-accent:#416ee5;--pi-on-accent:#fff;
+  --pi-tint:#e4edfd;--pi-border:#dbe0e9;--pi-code:#f5f6f8;--pi-code-banner:#eceff4;
+  --pi-art:none;--pi-scene-wash:rgba(249,250,251,.12);--pi-shadow:0 12px 40px rgb(30 40 60 / .12);
+}
+body[data-theme-style=classic][data-custom-background][data-ds-dark-theme]{
+  --pi-base:#151517;--pi-surface:#232324;--pi-raised:#353638;--pi-soft:#2c2c2e;--pi-sidebar:#1b1b1c;
+  --pi-text:#f5f6f7;--pi-secondary:#cfd3d6;--pi-muted:#adb2b8;--pi-accent:#a5bbff;--pi-on-accent:#182344;
+  --pi-tint:#30394e;--pi-border:#454850;--pi-code:#1b1b1c;--pi-code-banner:#2c2c2e;
+  --pi-scene-wash:rgba(21,21,23,.2);--pi-shadow:0 12px 40px rgb(0 0 0 / .22);
+}
+body[data-theme-style=sakura]{
+  --pi-base:#fff9fb;--pi-surface:#fffdfd;--pi-raised:#fff;--pi-soft:#f8edf3;--pi-sidebar:#f8eef3;
+  --pi-text:#382d3b;--pi-secondary:#6c5366;--pi-muted:#876779;--pi-accent:#ac406e;--pi-on-accent:#fff;
+  --pi-tint:#f5dfeb;--pi-border:#e9d6e1;--pi-code:#f8f1f6;--pi-code-banner:#f1e7ef;
+  --pi-art:url('/assets/themes/sakura.webp');--pi-scene-wash:rgba(255,249,251,.12);
+  --pi-shadow:0 12px 40px rgb(114 54 88 / .09);
+}
+body[data-theme-style=sakura][data-ds-dark-theme]{
+  --pi-base:#211c28;--pi-surface:#2b2432;--pi-raised:#352c3e;--pi-soft:#342a3b;--pi-sidebar:#251e2e;
+  --pi-text:#f3e7f0;--pi-secondary:#cfbace;--pi-muted:#b99eb4;--pi-accent:#efa7c8;--pi-on-accent:#362032;
+  --pi-tint:#4c3149;--pi-border:#4d3b51;--pi-code:#241e2d;--pi-code-banner:#312738;
+  --pi-scene-wash:rgba(33,28,40,.46);--pi-shadow:0 12px 40px rgb(0 0 0 / .18);
+}
+body[data-theme-style=starlight]{
+  --pi-base:#f6f8ff;--pi-surface:#fcfcff;--pi-raised:#fff;--pi-soft:#eaf0fb;--pi-sidebar:#eaf0fb;
+  --pi-text:#263252;--pi-secondary:#506084;--pi-muted:#657398;--pi-accent:#5553b6;--pi-on-accent:#fff;
+  --pi-tint:#e3e4fb;--pi-border:#d5def0;--pi-code:#eef1fa;--pi-code-banner:#e5e9f5;
+  --pi-art:url('/assets/themes/starlight.webp');--pi-scene-wash:rgba(246,248,255,.16);
+  --pi-shadow:0 12px 40px rgb(61 79 131 / .1);
+}
+body[data-theme-style=starlight][data-ds-dark-theme]{
+  --pi-base:#141b2e;--pi-surface:#1c253c;--pi-raised:#28324f;--pi-soft:#242f49;--pi-sidebar:#172037;
+  --pi-text:#e6edff;--pi-secondary:#b8c7e8;--pi-muted:#9aaccf;--pi-accent:#b6afff;--pi-on-accent:#222040;
+  --pi-tint:#35345a;--pi-border:#394563;--pi-code:#151e32;--pi-code-banner:#202a42;
+  --pi-scene-wash:rgba(20,27,46,.08);--pi-shadow:0 12px 40px rgb(0 0 0 / .22);
+}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]){
+  --dsw-alias-bg-base:var(--pi-base);
+  --dsw-alias-bg-layer-1:var(--pi-surface);--dsw-alias-bg-layer-2:var(--pi-surface);--dsw-alias-bg-layer-3:var(--pi-raised);
+  --dsw-alias-bg-module-platform:var(--pi-soft);--dsw-alias-bg-multi-select:var(--pi-soft);--dsw-alias-bg-overlay:var(--pi-tint);
+  --dsw-alias-label-primary:var(--pi-text);--dsw-alias-label-primary-dimmed:var(--pi-text);--dsw-alias-label-primary-bluish:var(--pi-accent);
+  --dsw-alias-label-secondary:var(--pi-secondary);--dsw-alias-label-tertiary:var(--pi-muted);--dsw-alias-label-caption:var(--pi-muted);
+  --dsw-alias-label-primary-foreground:var(--pi-on-accent);--dsw-alias-label-primary-inverted:var(--pi-on-accent);
+  --dsw-alias-brand-primary:var(--pi-accent);--dsw-alias-brand-primary-invert:var(--pi-accent);--dsw-alias-brand-text:var(--pi-text);
+  --dsw-alias-state-business-primary:var(--pi-accent);--dsw-alias-state-business-tertiary:var(--pi-tint);
+  --dsw-alias-border-l1:color-mix(in srgb,var(--pi-border) 65%,transparent);
+  --dsw-alias-border-l2:var(--pi-border);--dsw-alias-border-l2-darkmode-thin:var(--pi-border);
+  --dsw-alias-border-l3:color-mix(in srgb,var(--pi-border) 65%,var(--pi-muted));--dsw-alias-border-l4:var(--pi-muted);
+  --dsw-alias-button-primary-fill:var(--pi-accent);--dsw-alias-button-primary-hover:color-mix(in srgb,var(--pi-accent) 85%,var(--pi-text));
+  --dsw-alias-button-info-fill:var(--pi-accent);--dsw-alias-button-info-hover:color-mix(in srgb,var(--pi-accent) 85%,var(--pi-text));
+  --dsw-alias-button-primary-dimmed:var(--pi-border);--dsw-alias-button-elevated-fill:var(--pi-surface);
+  --dsw-alias-button-floating-fill:var(--pi-raised);--dsw-alias-button-floating-hover:var(--pi-soft);
+  --dsw-alias-button-ghost-active-fill:var(--pi-tint);--dsw-alias-button-ghost-active-hover:var(--pi-soft);
+  --dsw-alias-interactive-bg-hover:color-mix(in srgb,var(--pi-accent) 8%,transparent);
+  --dsw-alias-interactive-bg-hover-accent:color-mix(in srgb,var(--pi-accent) 16%,transparent);
+  --dsw-alias-interactive-bg-active:var(--pi-tint);--dsw-alias-interactive-bg-hover-solid:var(--pi-soft);
+  --dsw-alias-markdown-code-block:var(--pi-code);--dsw-alias-markdown-code-block-banner:var(--pi-code-banner);
+  --dsw-alias-markdown-inline-code:var(--pi-soft);--dsw-alias-markdown-citation:var(--pi-tint);
+  --dsw-alias-markdown-code-segment-selected:var(--pi-raised);--dsw-alias-markdown-code-segment-unselected:var(--pi-code);
+  --dsw-alias-markdown-placeholder:var(--pi-soft);--dsw-alias-markdown-tag:var(--pi-soft);
+  --dsw-specific-bubble:var(--pi-tint);--dsw-specific-bubble-highlight:var(--pi-border);
+  --dsw-specific-input-major:var(--pi-surface);--dsw-specific-selector:var(--pi-soft);--dsw-specific-tip:var(--pi-soft);
+  --dsw-specific-sidebar-fill:var(--pi-sidebar);--dsw-specific-sidebar-nav-item-active:var(--pi-tint);
+  --dsw-specific-sidebar-nav-item-active-accent:var(--pi-tint);--dsw-specific-sidebar-nav-item-hover:var(--pi-soft);
+  --dsw-alias-scrollbar-bg-l1:var(--pi-border);--dsw-alias-scrollbar-bg-l2:var(--pi-border);
+  --dsw-alias-scrollbar-hover-l1:var(--pi-muted);--dsw-alias-scrollbar-hover-l2:var(--pi-muted);
+  --dsw-linear-gradient-think:linear-gradient(180deg,var(--pi-base) 20%,transparent);
+  --dsw-linear-think-select:linear-gradient(180deg,var(--pi-soft) 20%,transparent);
+}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .pI_x6G_frame{
+  background-image:linear-gradient(var(--pi-scene-wash),var(--pi-scene-wash)),var(--pi-background-image,var(--pi-art));
+  background-size:cover;background-position:center;background-repeat:no-repeat;
+}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) :is(.hHd-Xa_root,.wSkVaW_root){background:transparent}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .pI_x6G_sidebarCol{
+  background:color-mix(in srgb,var(--pi-sidebar) 62%,transparent);
+  backdrop-filter:blur(12px);border-right-color:color-mix(in srgb,var(--pi-raised) 45%,transparent);
+}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .wSkVaW_header{
+  background:color-mix(in srgb,var(--pi-surface) 72%,transparent);backdrop-filter:blur(12px);
+}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .wSkVaW_root[data-phase=active] .wSkVaW_composerSeat{background:transparent}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) :is(.uV2eYG_card,.pi-settingsPanel){
+  background:color-mix(in srgb,var(--pi-surface) 72%,transparent);
+  backdrop-filter:blur(16px);border-color:color-mix(in srgb,var(--pi-raised) 55%,var(--pi-border));
+}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) [data-chat-flow-kind=assistant-text]{
+  box-sizing:border-box;padding:18px 22px;border:1px solid color-mix(in srgb,var(--pi-raised) 50%,var(--pi-border));border-radius:20px;
+  background:color-mix(in srgb,var(--pi-surface) 78%,transparent);backdrop-filter:blur(8px);box-shadow:var(--pi-shadow);
+}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) :is(.gdEzaW_bubble,.oRe1gG_bubble){
+  background:color-mix(in srgb,var(--pi-tint) 74%,transparent);backdrop-filter:blur(8px);
+  border:1px solid color-mix(in srgb,var(--pi-raised) 50%,var(--pi-border));box-shadow:var(--pi-shadow);
+}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .pi-compactionCard{
+  background:color-mix(in srgb,var(--pi-surface) 84%,transparent);backdrop-filter:blur(8px);
+}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .CY-8Ka_card{
+  background:color-mix(in srgb,var(--pi-surface) 48%,transparent);backdrop-filter:blur(8px);border-radius:8px;
+}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .CY-8Ka_root{background:transparent}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .CY-8Ka_card :is(.Sxvs8a_root,.Sxvs8a_body,.Y0dWHa_payload){background:transparent}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .CY-8Ka_card .Y0dWHa_payload{color:var(--pi-text)}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) :is(.pXSMma_headline,.wSkVaW_heroWorkspaceRow){
+  align-self:center;max-width:calc(100% - 32px);padding:10px 16px;border:1px solid var(--dsw-alias-border-l2);border-radius:18px;
+  background:color-mix(in srgb,var(--pi-surface) 72%,transparent);backdrop-filter:blur(12px);
+}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .wSkVaW_heroWorkspaceRow{align-self:flex-start;margin-left:16px;padding:6px 12px}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .p-xYUq_action{background:color-mix(in srgb,var(--pi-surface) 80%,transparent)}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .pi-filePreview{
+  background:color-mix(in srgb,var(--pi-surface) 86%,transparent);backdrop-filter:blur(16px);
+}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .pi-filePreviewScroll{background:transparent}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .pi-settingsSidebar{background:color-mix(in srgb,var(--pi-sidebar) 40%,transparent)}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .pi-settingsBackdrop{background:rgb(15 20 30 / .18);backdrop-filter:blur(3px)}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .wSkVaW_heroGlow{display:none}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .pXSMma_headlineText{font-weight:600;letter-spacing:.04em;text-shadow:0 2px 18px var(--pi-base)}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) :is(.pi-settingsActionPrimary,.uV2eYG_primary){color:var(--pi-on-accent)}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .cubgiG_seatIcon text{fill:var(--pi-on-accent)}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .uV2eYG_card{box-shadow:var(--pi-shadow)}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .pi-settingsPanel{box-shadow:var(--pi-shadow)}
+body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .hHd-Xa_newSession{border-radius:14px;box-shadow:0 3px 12px color-mix(in srgb,var(--pi-accent) 7%,transparent)}
+.pi-backgroundCard{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:14px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px}
+.pi-backgroundPreview{height:72px;overflow:hidden;border-radius:8px;background-color:var(--dsw-alias-bg-module-platform);background-image:var(--pi-art,none);background-size:cover;background-position:center}
+.pi-backgroundPreview img{width:100%;height:100%;object-fit:cover}
+.pi-backgroundCopy{min-width:0;align-self:center}
+.pi-backgroundCopy strong{display:block;font-size:12px;line-height:20px;overflow-wrap:anywhere}
+.pi-backgroundCopy p{margin:4px 0 0;font-size:11px;line-height:18px;color:var(--dsw-alias-label-secondary)}
+.pi-backgroundActions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}
+.pi-backgroundError{grid-column:1/-1;margin:0;font-size:12px;line-height:20px;color:var(--dsw-alias-state-error-primary);overflow-wrap:anywhere}
+.pi-themeModeHeading{margin-top:28px}
+.pi-settingsStyles button{text-align:left}
+.pi-stylePreview{position:relative;display:flex;align-items:end;justify-content:center;height:104px;border-radius:7px;overflow:hidden;background-color:#eef1f6;background-size:cover;background-position:center}
+.pi-stylePreview-classic{background-image:linear-gradient(145deg,#f1f3f9,#dce3f1)}
+.pi-stylePreview-sakura{background-image:url('/assets/themes/sakura.webp')}
+.pi-stylePreview-starlight{background-image:url('/assets/themes/starlight.webp')}
+.pi-stylePreviewWindow{display:flex;flex-direction:column;gap:5px;width:68%;height:42px;padding:10px;margin-bottom:10px;border:1px solid rgb(255 255 255 / .7);border-radius:7px;background:rgb(255 255 255 / .85);box-shadow:0 4px 16px rgb(25 30 60 / .1)}
+.pi-stylePreviewWindow i{display:block;width:68%;height:3px;border-radius:3px;background:#b5bdd2}
+.pi-stylePreviewWindow i:first-child{align-self:end;width:48%;height:10px;background:#d9def0}
+.pi-stylePreviewWindow i:last-child{width:45%}
+.pi-stylePreview-sakura .pi-stylePreviewWindow i{background:#c6a0b8}
+.pi-stylePreview-sakura .pi-stylePreviewWindow i:first-child{background:#f0d1e2}
+.pi-stylePreview-starlight .pi-stylePreviewWindow{background:rgb(24 33 56 / .9);border-color:rgb(184 195 238 / .35)}
+.pi-stylePreview-starlight .pi-stylePreviewWindow i{background:#7f91b5}
+.pi-stylePreview-starlight .pi-stylePreviewWindow i:first-child{background:#66659a}
+.pi-styleDescription{display:block;padding:0 3px 4px;color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:18px}
+@media(max-width:640px){
+  .pi-stylePreview{height:84px}
+  .pi-stylePreviewWindow{width:72%;height:34px;padding:7px;margin-bottom:7px}
+  .pi-styleDescription{padding:2px 1px;font-size:10px}
+  body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .pXSMma_headline{grid-template-columns:30px minmax(0,auto);row-gap:8px;margin:0 16px;font-size:22px;line-height:30px}
+  body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .pXSMma_headlineText{letter-spacing:.02em}
+  body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .pXSMma_previewBadge{grid-area:2/2;justify-self:start;margin:0}
+  body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) [data-chat-flow-kind=assistant-text]{padding:14px;border-radius:16px}
+  body:is([data-theme-style=sakura],[data-theme-style=starlight],[data-custom-background]) .pXSMma_headline{padding:10px 12px;margin:0;box-sizing:border-box}
+}