.product-runtime, .product-runtime[data-theme], .product-runtime[data-resolved-theme] {
  --font-sans: inherit !important;
  --bg: inherit !important; --text: inherit !important; --muted: inherit !important; --soft: inherit !important;
  --surface: inherit !important; --surface-raised: inherit !important;
  --line: inherit !important; --line-strong: inherit !important;
  --accent: inherit !important; --accent-text: inherit !important; --accent-hover: inherit !important; --shadow: inherit !important;
  --timer: var(--text) !important; --focus: var(--accent) !important;
  width: 100%; min-width: 0; margin-top: 76px;
  font-family: var(--font-sans); color: var(--text); background: var(--bg) !important;
}
.product-runtime h1, .product-runtime h2, .product-runtime h3 { font-family: var(--font-sans); color: var(--text); font-weight: 850; }
.product-runtime .metadata-app-shell { width: min(calc(100% - 2 * var(--gutter)), var(--max, 1180px)); }
.product-runtime .metadata-topbar, .product-runtime .file-panel, .product-runtime .editor-panel, .product-runtime .result-panel { border-radius: 8px; background: var(--surface) !important; }
.product-runtime .result-panel { background: var(--surface-raised) !important; }
.product-runtime .tool-button, .product-runtime .button, .product-runtime .mode-button, .product-runtime .segmented button, .product-runtime .preset-row button {
  border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text); font-family: var(--font-sans); font-weight: 750;
}
.product-runtime .tool-button--primary, .product-runtime .button-primary, .product-runtime .tool-button--download { border-color: var(--accent); background: transparent; color: var(--text); }
.product-runtime .tool-button:hover:not(:disabled), .product-runtime .button:hover:not(:disabled), .product-runtime .mode-button:hover, .product-runtime .segmented button:hover, .product-runtime .preset-row button:hover { border-color: var(--accent); background: transparent; color: var(--accent-text); }
.product-runtime .mode-button.is-active, .product-runtime .segmented button[aria-pressed="true"], .product-runtime .preset-row button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.product-runtime .tool-button:focus-visible, .product-runtime .button:focus-visible, .product-runtime .mode-button:focus-visible, .product-runtime .mode-button.is-active:focus-visible, .product-runtime .segmented button:focus-visible, .product-runtime .preset-row button:focus-visible, .product-runtime input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.product-runtime .button:focus-visible { color: var(--accent-text); background: transparent; }
.product-runtime .eyebrow { color: var(--accent-text); }
.product-runtime .duration-form { opacity: 1; }
.product-runtime .tool-button:disabled, .product-runtime .button:disabled { border-color: var(--line); background: transparent; color: var(--muted); }
.product-runtime .timer-display { color: var(--text); font-weight: 850; }
.product-runtime .timer-title { margin: 0 0 1.5rem; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.05; letter-spacing: -.035em; }
.product-runtime .status-message.is-warning, .product-runtime .status-message.is-error { color: var(--accent-text); }
.product-runtime .progress-shell { border-radius: 8px; }
.product-runtime .app-shell { width: min(100%, var(--max, 1180px)); margin-inline: auto; background: var(--bg); }
.product-runtime .page-main { padding-top: 0; }
.product-frame-page { margin-top: 76px; padding: 1.25rem 0 0; }
.product-frame { display: block; width: 100%; height: max(820px, calc(100svh - 4.75rem)); border: 0; background: var(--paper); }
.product-frame-direct { padding-block: 1rem; }
.product-runtime .has-reveal .reveal, .product-runtime.has-reveal .reveal { opacity: 1; transform: none; }
@media (max-width: 900px) { .product-frame { height: max(900px, calc(100svh - 4.75rem)); } }