/* The recorded desktop application's dark work area, inside the site's paper palette. */
.pc-shell {
  --pc-surface: var(--color-ink);
  --pc-panel: color-mix(in srgb, var(--color-ink) 84%, var(--color-body));
  --pc-line: color-mix(in srgb, var(--color-paper) 22%, transparent);
  --pc-muted: var(--color-hairline);
  container: pc-frame / inline-size;
  background: var(--pc-surface);
  color: var(--color-paper);
  border: 1px solid var(--pc-line);
  border-radius: 4px;
  overflow: hidden;
  font: 400 14px/1.5 var(--wb-sans);
  letter-spacing: .01em;
}
.pc-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--pc-line); }
.pc-app-name { font-size: 16px; font-weight: 500; letter-spacing: .01em; }
.pc-demo-label { color: var(--pc-muted); font-size: 13px; }
.pc-tabbar { display: flex; gap: 4px; padding: 0 10px; background: var(--pc-panel); border-bottom: 1px solid var(--pc-line); }
.pc-shell button { min-height: 44px; border: 0; border-radius: 2px; padding: 8px 12px; color: var(--color-paper); background: transparent; font-size: 14px; line-height: 1.5; letter-spacing: .01em; }
.pc-shell button:hover:not(:disabled) { background: color-mix(in srgb, var(--color-paper) 10%, transparent); }
.pc-shell button:focus-visible, .pc-shell a:focus-visible, .pc-shell input:focus-visible { outline-color: var(--color-accent-wash); outline-offset: -3px; }
.pc-tabbar button { border-bottom: 2px solid transparent; border-radius: 0; min-width: 96px; }
.pc-tabbar button[aria-selected="true"] { border-bottom-color: var(--color-accent-wash); background: color-mix(in srgb, var(--color-accent-wash) 12%, transparent); font-weight: 500; }
.pc-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 148px; }
.pc-canvas { --pc-inspector-width: 148px; --pc-player-height: 58px; aspect-ratio: 574 / 372; position: relative; min-width: 0; background: var(--pc-surface); }
.pc-shell .pc-canvas > video, .pc-shell .pc-canvas > img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; }
.pc-shell[data-mode="result"] .pc-canvas, .pc-shell[data-mode="dual"] .pc-canvas { aspect-ratio: auto; height: calc((100cqw - var(--pc-inspector-width)) * 372 / 574 + var(--pc-player-height)); }
.pc-inspector { background: var(--pc-panel); padding: 18px 14px; border-left: 1px solid var(--pc-line); overflow-wrap: anywhere; }
.pc-inspector-label { font-size: 13px; color: var(--pc-muted); margin-bottom: 8px; }
.pc-content-title { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.pc-inspector #pc-content-description { color: var(--pc-muted); font-size: 13px; line-height: 1.65; }
.pc-player { box-sizing: border-box; height: 58px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 6px 10px; align-items: center; border-top: 1px solid var(--pc-line); background: var(--pc-panel); }
.pc-shell #pc-play { background: var(--color-accent-wash); color: var(--color-ink); min-width: 88px; }
.pc-shell #pc-play:hover:not(:disabled) { background: var(--color-paper); }
.pc-timeline { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pc-timeline input { min-width: 0; width: 100%; height: 44px; margin: 0; accent-color: var(--color-accent-wash); cursor: pointer; }
.pc-timeline input:disabled { cursor: default; }
.pc-timeline output { flex-shrink: 0; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--pc-muted); }
.pc-statusbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--pc-line); color: var(--pc-muted); font-size: 12px; }
.pc-statusbar a { color: var(--color-paper); display: inline-flex; align-items: center; min-height: 36px; }
.pc-media-error { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 16px; padding: 24px; background: var(--pc-panel); text-align: center; }
.pc-shell #pc-retry { border: 1px solid var(--pc-line); }
.pc-product-figure > figcaption { font-size: 14px; min-height: 3em; }
.pc-shell:not(.pc-ready) .pc-tabbar { display: none; }
@container pc-frame (max-width: 560px) {
  .pc-workspace { grid-template-columns: minmax(0, 1fr); }
  .pc-inspector { display: none; }
  .pc-canvas { --pc-inspector-width: 0px; --pc-player-height: 62px; }
  .pc-titlebar { padding: 12px; gap: 8px; }
  .pc-app-name { font-size: 15px; }
  .pc-tabbar { padding-inline: 6px; }
  .pc-tabbar button { flex: 1; min-width: 0; padding-inline: 8px; }
  .pc-player { height: 62px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; padding: 6px; }
  .pc-shell button { padding-inline: 8px; }
  .pc-timeline { flex-direction: column; gap: 0; }
  .pc-timeline input { height: 32px; }
  .pc-timeline output { font-size: 11px; }
  .pc-shell #pc-play { min-width: 76px; }
}
@media (prefers-reduced-motion: no-preference) {
  .pc-shell button { transition: background-color .16s ease, border-color .16s ease; }
}