:root { color-scheme: light; background: transparent; }
body { padding: 0; background: transparent; --paper: #f8f7f3; }
.preview-head { display: none; }
.workspace { max-width: none; }
.frame { padding: clamp(8px, 1.5vw, 18px); border: 1px solid #41464c; border-radius: clamp(16px, 3vw, 32px); background: #22262b; box-shadow: inset 0 1px 0 #ffffff20; }
.screen { border: 0; border-radius: 8px; }
.preview-foot { color: #445161; margin: 14px 2px 0; }
.preview-foot > span { display: none; }
.controls { justify-content: center; gap: 12px; margin-top: 18px; }
.portfolio-embedded .controls [data-action="motion"] { display: none; }
.controls button { min-width: 112px; min-height: 48px; padding: 12px 22px; border: 1px solid #27313f; border-radius: 24px; background: #f8f7f3; color: #27313f; font-size: 15px; font-weight: 600; }
.controls [data-demo="next"] { border-color: #27313f; background: #27313f; color: #f8f7f3; }
.controls button:not(:disabled):hover { background: #e2e7ed; filter: none; }
.controls [data-demo="next"]:not(:disabled):hover { background: #3b4d62; }
/* Keep focus feedback inside the embedded preview's bounds. */
.controls button:focus { outline: none; }
.controls button:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; text-decoration: underline; text-underline-offset: 4px; }
.controls button:disabled { background: #dce1e6; color: #445161; border-color: #647181; opacity: 1; }