* { box-sizing: border-box; margin: 0; padding: 0; } html, body, #root { height: 100%; }
/* Pico VI：token + 跨页面共享基元。
   分节：token → 基础 → 骨架 → 卡片与分隔条 → 按钮与输入 → 顶部栏 → 场景与错误。
   原则：
   - 组件样式不进本文件：留在组件内，只消费 --pico-* token；
   - 颜色一律走 token，不写颜色字面量；
   - 主题用 light-dark() 表达，data-pico-theme 只切 color-scheme，token 自动跟随；
   - 单层边框：骨架不描边，卡片自带皮肤。 */

/* ---------- token ----------
   颜色 token 用 light-dark(浅, 深) 书写一次；非颜色 token 与主题无关。 */
:root {
  color-scheme: light dark;
  --pico-paper: light-dark(#f8fafc, #0f172a);
  --pico-surface: light-dark(#f1f5f9, #1e293b);
  --pico-surface-raised: light-dark(#ffffff, #182338);
  --pico-ink: light-dark(#0f172a, #f8fafc);
  --pico-ink-soft: light-dark(#475569, #cbd5e1);
  --pico-hairline: light-dark(#cbd5e1, #334155);
  --pico-accent: #0ea5e9;
  --pico-accent-deep: light-dark(#075985, #22d3ee);
  --pico-accent-light: light-dark(#0284c7, #818cf8);
  --pico-accent-dark: light-dark(#0c4a6e, #0284c7);
  --pico-accent-wash: color-mix(in srgb, var(--pico-accent) 12%, transparent);
  --pico-accent-glow: color-mix(in srgb, var(--pico-accent) 32%, transparent);
  --pico-on-accent: #ffffff;
  /* 语义色：结构回放标签与块（fn/loop/branch/error）；组件不得直接使用颜色字面量。 */
  --pico-hue-fn-bg: light-dark(#eef2ff, #1c1c32);
  --pico-hue-fn-ink: light-dark(#3730a3, #c7d2fe);
  --pico-hue-fn-strong: light-dark(#6366f1, #818cf8);
  --pico-hue-loop-bg: light-dark(#fef3c7, #32260e);
  --pico-hue-loop-ink: light-dark(#92400e, #fcd34d);
  --pico-hue-loop-strong: light-dark(#d97706, #fbbf24);
  --pico-hue-branch-bg: light-dark(#ecfdf5, #0b281f);
  --pico-hue-branch-ink: light-dark(#065f46, #6ee7b7);
  --pico-hue-branch-strong: light-dark(#059669, #34d399);
  --pico-hue-error-bg: light-dark(#fee2e2, #321616);
  --pico-hue-error-ink: light-dark(#991b1b, #fca5a5);
  --pico-hue-error-strong: light-dark(#dc2626, #ef4444);
  /* Brendan Gregg 式 hot flame palette：暖色只分隔相邻 frame，不编码类别。 */
  --pico-flame-yellow: light-dark(#ffe188, #b8913c);
  --pico-flame-orange: light-dark(#ffc170, #b06d36);
  --pico-flame-salmon: light-dark(#f79578, #a25342);
  --pico-flame-red: light-dark(#e87568, #913f38);
  --pico-flame-ink: light-dark(#3a190c, #fff1d1);
  --pico-code-bg: var(--pico-surface-raised);
  /* 执行行高亮底：比 accent-wash 更实，浅色下也清晰可辨（错误行复用 hue-error-bg） */
  --pico-code-exec-bg: color-mix(in srgb, var(--pico-accent) 18%, transparent);
  /* 选中底：编辑器与终端共用；wash 的 12% 在白底上近乎不可见，提到执行行同档 */
  --pico-code-select-bg: color-mix(in srgb, var(--pico-accent) 18%, transparent);
  /* 行号槽最小宽：数字右对齐，短文档也不贴边；代码列起点稳定 */
  --pico-editor-gutter: 56px;
  --pico-code-ink: var(--pico-ink);
  --pico-code-dim: light-dark(#64748b, #94a3b8);
  --pico-syn-key: var(--pico-accent);
  --pico-syn-fn: light-dark(#4338ca, #818cf8);
  --pico-syn-str: light-dark(#1f7a5c, #7ee2b0);
  --pico-syn-num: light-dark(#a36118, #f0c375);
  --pico-syn-com: var(--pico-code-dim);
  --pico-shadow: 0 1px 3px light-dark(rgb(15 23 42 / 0.06), rgb(0 0 0 / 0.18));
  --pico-shadow-float: 0 12px 32px light-dark(rgb(15 23 42 / 0.14), rgb(0 0 0 / 0.32));
  --pico-font-text: ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    sans-serif;
  --pico-font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pico-font-mono: "FiraCode Nerd Font Mono", "FiraCode Nerd Font",
    "Fira Code", ui-monospace, "SF Mono", "JetBrains Mono", Menlo,
    Consolas, monospace;
  --pico-size-2xs: 12px;
  --pico-size-xs: 13px;
  --pico-size-sm: 15px;
  --pico-size-code: 15px;
  --pico-size-md: 18px;
  --pico-size-lg: 22px;
  --pico-size-xl: 30px;
  --pico-space-1: 4px;
  --pico-space-2: 8px;
  --pico-space-3: 12px;
  --pico-space-4: 16px;
  --pico-space-5: 24px;
  --pico-space-6: 40px;
  --pico-radius-sm: 4px;
  --pico-radius: 7.5px;
  --pico-line: 1px solid var(--pico-hairline);
  --pico-ease-out: cubic-bezier(.16, 1, .3, 1);
  --pico-duration-fast: 120ms;
  --pico-duration-move: 240ms;
}

/* 主题覆写只切 color-scheme，token 由 light-dark() 自行解析 */
:root[data-pico-theme="light"] { color-scheme: light; }
:root[data-pico-theme="dark"] { color-scheme: dark; }

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }

.pico-root {
  margin: 0;
  color: var(--pico-ink);
  background: var(--pico-paper);
  font: var(--pico-size-md)/1.65 var(--pico-font-text);
  /* UI 文案默认不可选中（顶栏、按钮、面板标签）；可复制文本在编辑器宿主重新打开 */
  user-select: none;
  -webkit-user-select: none;
}

.pico-root ::selection { background: var(--pico-code-select-bg); }
.pico-root button,
.pico-root input,
.pico-root select { font: inherit; }

.pico-root :focus-visible {
  outline: 2px solid var(--pico-accent);
  outline-offset: 3px;
}

/* ---------- 骨架 ----------
   page 是唯一定位上下文（顶层悬浮组件挂它上面），纵向两行：顶部栏 + 主体；
   shell 由 Split 撑起：左编辑卡 | 可拖分隔条 | 右世界列，自身无边框无底色。 */
.pico-page {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--pico-paper);
}


/* ---------- Playground 骨架（PlaygroundShell）----------
   pg-main：左编辑卡 | 可拖比例分条 | 右面板列；比例锁 34–60% 由 JS 拖拽约束，
   面板全关时编辑卡 100%。面板卡统一签发（data-view 记身份），页面按它定制。 */
.pico-pg-main { flex: 1; min-height: 0; padding: var(--pico-space-4); }
.pico-pg-main .pico-world { gap: var(--pico-space-2); }
/* 编辑栏按比例锁定（内联 %），世界列吃剩余全部：min-width:0 免被内容撑开 */
.pico-pg-main > .pico-world { flex: 1 1 0; min-width: 0; }
.pico-pg-panel > .pico-card-body { flex: 1; min-height: 0; }
/* pinned 面板：常显条（如输入卡），按内容高排在可开关面板列上方 */
.pico-pg-pinned { display: flex; flex: 0 0 auto; flex-direction: column; gap: var(--pico-space-2); }
.pico-pg-pinned .pico-card-body { flex: 0 0 auto; }

/* Split 分割容器：面板按 px 锁定（flex-basis 在 .pico-pane 上），分割条即间距；
   面板尺寸只随拖拽/开合/窗口缩放变化，内容变化在面板内滚动。 */
.pico-split { display: flex; flex: 1; min-width: 0; min-height: 0; }
.pico-split--row { flex-direction: row; }
.pico-split--column { flex-direction: column; }
.pico-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pico-pane > * { flex: 1 1 0; min-width: 0; min-height: 0; }
/* 宿主 div 只是挂载点（如编辑器自带的 .pico-card），里面的卡片同样要填满面板 */
.pico-pane > * > .pico-card { flex: 1 1 0; min-width: 0; min-height: 0; }

/* 重运行/切用例的内容换帧：宿主 remount 后自 0 淡入并微微上移 */
.pico-swap {
  transition: opacity 200ms var(--pico-ease-out), transform 200ms var(--pico-ease-out);
}
@starting-style {
  .pico-swap { opacity: 0; transform: translateY(4px); }
}

.pico-world {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

/* 编辑器外观。CodeMirror 主题应映射到同一批 token。 */
.pico-w-editor-host {
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  user-select: text;
  -webkit-user-select: text;
}

.pico-w-editor-host .cm-editor {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  flex: 1;
}

.pico-w-editor-host .cm-scroller {
  overflow: auto;
}

/* ---------- 卡片与分隔条 ---------- */
.pico-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: var(--pico-line);
  border-radius: 10px;
  background: var(--pico-surface-raised);
  box-shadow: var(--pico-shadow);
  overflow: hidden;
}
.pico-card[hidden] { display: none; }

/* 卡片内衬统一规则：内容卡一律 space-3 × space-4（12×16），页面不再各自覆写；
   场景卡（画布类内容自管留白）显式加 --flush 归零；编辑卡是满铺代码面，
   不走 card-body，上衬独立为 space-5（见 editor 主题）。 */
.pico-card-body {
  flex: 1;
  min-height: 0;
  padding: var(--pico-space-3) var(--pico-space-4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* 页面只提供挂载宿主，实际 widget 在其内部；宿主必须继承 card-body 的可用高度。 */
.pico-card-body > * { flex: 1 1 0; min-width: 0; min-height: 0; }
.pico-card-body:has(.pico-empty-surface:not([hidden])) { padding: 0; }
.pico-card-body--flush { padding: 0; }

/* 命令式 widget（Debugger/Terminal）的挂载根与空态面 */
.pico-widget { display: flex; flex-direction: column; gap: var(--pico-space-2); min-height: 0; }
.pico-empty-surface { flex: 1; width: 100%; height: 100%; min-width: 0; min-height: 0; background: var(--pico-code-bg); }
.pico-empty-surface[hidden] { display: none; }

/* 世界列的可折叠面板堆叠区：面板自带皮肤（.pico-card），分隔条见下。 */

/* 分隔条：卡片之间的拖拽调隙；--v 为左右（编辑卡与世界列）方向 */
.pico-dock-divider {
  position: relative;
  flex: 0 0 var(--pico-space-2);
  height: var(--pico-space-2);
  cursor: row-resize;
  touch-action: none;
  user-select: none;
}
.pico-dock-divider::after {
  content: "";
  position: absolute;
  left: var(--pico-space-2);
  right: var(--pico-space-2);
  top: 2px;
  height: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background var(--pico-duration-fast);
}
.pico-dock-divider:hover::after,
.pico-dock-divider[data-dragging="true"]::after {
  background: var(--pico-accent);
}
.pico-dock-divider--v {
  width: var(--pico-space-2);
  height: auto;
  cursor: col-resize;
}
.pico-dock-divider--v::after {
  top: var(--pico-space-2);
  bottom: var(--pico-space-2);
  left: 2px;
  right: auto;
  width: 3px;
  height: auto;
}

/* ---------- 按钮 ---------- */

/* 按钮共用状态与尺寸。 */
.pico-ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pico-space-1);
  min-width: 28px;
  height: 28px;
  padding: 0 9px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--pico-ink-soft);
  font: 600 var(--pico-size-xs)/1 var(--pico-font-ui);
  cursor: pointer;
  transition: color var(--pico-duration-fast), background var(--pico-duration-fast);
}
.pico-ghost-btn:hover:not(:disabled) {
  color: var(--pico-ink);
  background: color-mix(in srgb, var(--pico-ink) 9%, transparent);
}
.pico-ghost-btn:active:not(:disabled) {
  background: color-mix(in srgb, var(--pico-ink) 15%, transparent);
}
.pico-ghost-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.pico-ghost-btn[aria-pressed="true"] {
  color: var(--pico-accent);
  background: var(--pico-accent-wash);
}
.pico-ghost-btn--icon { width: 28px; padding: 0; }

/* ---------- 顶部栏 ---------- */
.pico-topbar {
  display: flex;
  align-items: center;
  justify-content: safe flex-end;
  gap: var(--pico-space-1);
  min-height: 48px;
  flex-shrink: 0;
  overflow-x: auto;
  padding: 0 var(--pico-space-4) 0 calc(var(--pico-space-4) + var(--pico-space-1));
  border-bottom: var(--pico-line);
  background: var(--pico-surface-raised);
}
.pico-topbar > * { flex-shrink: 0; }
/* 左端：品牌菜单 + 页面标题，auto 外边距把工具带推回右端；左右与工具带共用顶栏 padding。 */
.pico-topbar-left {
  display: flex;
  align-items: center;
  gap: var(--pico-space-2);
  margin-right: auto;
  min-width: 0;
}
/* 桌面宿主在顶栏最左端的返回入口。浏览器里 `HostHomeButton` 返回 null，没有这个元素；
   它是页面里唯一的宿主导航，所以用强调色，让"能回去"这件事一眼可见。 */
.pico-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: -4px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--pico-accent);
  cursor: pointer;
  transition: background var(--pico-duration-fast), color var(--pico-duration-fast);
}
.pico-home:hover { background: color-mix(in srgb, var(--pico-accent) 14%, transparent); color: var(--pico-accent-deep); }
.pico-home svg { width: 16px; height: 16px; }

.pico-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--pico-space-2);
  font: 600 var(--pico-size-sm)/1 var(--pico-font-ui);
  color: var(--pico-ink);
}
.pico-topbar-logo { display: block; width: 22px; height: 22px; flex: 0 0 auto; }
/* 页面标题（课程名）：品牌右侧，发丝线分隔，过长省略。 */
.pico-topbar-title {
  max-width: 32vw;
  padding-left: var(--pico-space-3);
  border-left: var(--pico-line);
  font: 600 var(--pico-size-sm)/1.2 var(--pico-font-ui);
  color: var(--pico-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 空间不足的两级收窄（TopBar 按实测溢出置 data-fit）：先藏课程名，再藏品牌字 */
.pico-topbar[data-fit="no-title"] .pico-topbar-title,
.pico-topbar[data-fit="no-brand"] .pico-topbar-title { display: none; }
.pico-topbar[data-fit="no-brand"] .pico-topbar-brand-text { display: none; }

/* 工具带内的控件分组 */
.pico-toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--pico-space-1);
}
.pico-toolbar-sep {
  width: 1px;
  height: 20px;
  margin: 0 var(--pico-space-1);
  background: var(--pico-hairline);
}
.pico-toolbar-choices {
  display: flex;
  align-items: center;
  gap: var(--pico-space-1);
  padding: 3px;
  border-radius: var(--pico-radius);
  background: var(--pico-surface);
}
/* 顶栏图标按钮使用更大的命中区。 */
.pico-topbar .pico-ghost-btn--icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.pico-topbar .pico-ghost-btn svg {
  width: 19px;
  height: 19px;
}

/* ---------- 场景与错误 ---------- */
.pico-scene {
  position: relative;
  display: grid;
  flex: 1;
  min-height: 0;
  place-items: center;
  overflow: hidden;
}

/* ---------- 响应式与动效偏好 ---------- */
@media (max-width: 760px) {
  .pico-pg-main { padding: var(--pico-space-3); gap: var(--pico-space-2); }
  .pico-pg-main > .pico-pane { flex: 1 1 0 !important; }
  /* 窄屏一律纵向堆叠：行分割翻转为列，竖分割条隐藏 */
  .pico-split--row { flex-direction: column; }
  .pico-dock-divider--v { display: none; }
}

@media (pointer: coarse) {
  .pico-topbar .pico-ghost-btn { min-width: 44px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .pico-root { scroll-behavior: auto; }
  .pico-swap { transition: none; }
}