deck-studio-mock {
  display: contents;
  --ide-chrome: #1a1a1c;
  --ide-edge: #2a2a2c;
  --ide-well: #0e0e10;
  --ide-canvas: #f4f1ea;
  --ide-canvas-fg: #0a0a0b;
  --ide-canvas-muted: #6b6862;
  --ide-canvas-paper: #ffffff;
  --ide-tl-red: #ff5f57;
  --ide-tl-amber: #febc2e;
  --ide-tl-green: #28c840;
  --ide-select: rgba(59, 130, 246, 0.15);
  --ide-accent: #3b82f6;
  --ide-text: #e4e4e7;
  --ide-text-muted: #71717a;
}
deck-studio-mock .mock { position: relative; display: grid; grid-template-columns: 56px 200px 1fr 240px; grid-template-rows: auto 1fr; width: 100%; height: 100%; max-height: 55vh; min-width: 0; box-sizing: border-box; overflow: hidden; background: var(--ide-chrome); border: 1px solid var(--ide-edge); border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.4), var(--slide-offset-lg) var(--slide-offset-lg) 0 var(--slide-shadow); font-family: var(--font-mono); font-size: var(--slide-ms-2xs); line-height: var(--slide-lh-body); color: var(--ide-text) }
deck-studio-mock .titlebar { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.4rem; height: 28px; padding: 0.5rem 1rem; box-sizing: border-box; background: var(--ide-well); border-bottom: 1px solid var(--ide-edge) }
deck-studio-mock .dot { flex: none; width: 10px; height: 10px; border-radius: var(--slide-radius-dot); background: var(--ide-edge) }
deck-studio-mock .dot.red { background: var(--ide-tl-red) }
deck-studio-mock .dot.amber { background: var(--ide-tl-amber) }
deck-studio-mock .dot.green { background: var(--ide-tl-green) }
deck-studio-mock .path { margin-left: 1rem; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ide-text-muted); font-size: var(--slide-ms-xs) }
deck-studio-mock .activity { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem 0; background: var(--ide-well); border-right: 1px solid var(--ide-edge) }
deck-studio-mock .icon { flex: none; width: 20px; height: 20px; border-radius: 3px; background: var(--ide-edge) }
deck-studio-mock .icon.active { background: var(--ide-accent) }
deck-studio-mock .panel { min-width: 0; overflow: hidden; padding: 1rem 0.75rem; border-right: 1px solid var(--ide-edge) }
deck-studio-mock .panel-head { margin-bottom: 0.75rem; font-size: var(--slide-ms-3xs); letter-spacing: var(--slide-lt-2); text-transform: uppercase; color: var(--ide-text-muted) }
deck-studio-mock .tree-item { padding: 0.25rem 0; white-space: nowrap; color: var(--ide-text) }
deck-studio-mock .tree-item.indent { padding-left: 1rem }
deck-studio-mock .tree-item.indent2 { padding-left: 2rem }
deck-studio-mock .tree-item.selected { padding-left: 0.5rem; border-radius: 3px; background: var(--ide-select); color: var(--ide-accent) }
deck-studio-mock .canvas { position: relative; min-width: 0; overflow: hidden; padding: 2rem; background: var(--ide-canvas); color: var(--ide-canvas-fg); font-family: var(--font-sans) }
deck-studio-mock .canvas-tab { position: absolute; top: 0.5rem; left: 50%; transform: translateX(-50%); padding: 0.25rem 0.75rem; white-space: nowrap; border-radius: var(--slide-radius-chip); background: var(--ide-well); color: var(--ide-canvas); font-size: var(--slide-ms-3xs); letter-spacing: var(--slide-lt-2); text-transform: uppercase }
deck-studio-mock .canvas-preview { margin-top: 2rem; padding: 1.5rem; background: var(--ide-canvas-paper); border: 2px solid var(--ide-accent); border-radius: var(--slide-radius-code); box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15) }
deck-studio-mock .canvas-preview h3 { margin: 0 0 0.5rem 0; font-family: var(--font-sans); font-size: 1.1rem; font-weight: var(--slide-fw-medium); line-height: var(--slide-lh-snug); letter-spacing: normal; color: var(--ide-canvas-fg) }
deck-studio-mock .canvas-preview p { margin: 0 0 0.75rem 0; font-size: var(--slide-ms-sm); line-height: 1.4; color: var(--ide-canvas-muted) }
deck-studio-mock .canvas-preview button { padding: 0.4rem 0.8rem; border: none; background: var(--ide-accent); color: var(--ide-canvas-paper); font-family: var(--font-mono); font-size: var(--slide-ms-xs); cursor: pointer }
deck-studio-mock .inspector { min-width: 0; overflow: hidden; padding: 1rem 0.75rem; background: var(--ide-well) }
deck-studio-mock .insp-tab { display: flex; gap: 1rem; padding-bottom: 0.5rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--ide-edge); font-size: var(--slide-ms-3xs); letter-spacing: var(--slide-lt-2); text-transform: uppercase; color: var(--ide-text-muted) }
deck-studio-mock .insp-tab .active { color: var(--ide-accent) }
deck-studio-mock .field { margin-bottom: 0.75rem }
deck-studio-mock .field .label { display: block; margin-bottom: 0.25rem; font-size: var(--slide-ms-3xs); letter-spacing: var(--slide-lt-2); text-transform: uppercase; color: var(--ide-text-muted) }
deck-studio-mock .field .input { padding: 0.4rem 0.5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--ide-chrome); border: 1px solid var(--ide-edge); border-radius: 2px; font-size: var(--slide-ms-sm); color: var(--ide-text) }