:root { --studio-ink: #202a43; --studio-accent: #4655cf; }
body { background: #f4f6fa; color: var(--studio-ink); }
.brand { font-size: 1.3rem; font-weight: 750; color: var(--studio-ink); }
.brand-icon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; background: var(--studio-accent); color: #fff; font-size: 1rem; }
.eyebrow { color: #69768c; font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
.card { border-color: #dfe4ee; box-shadow: 0 2px 8px #1a254305; border-radius: .7rem; overflow: hidden; }
.card-header, .card-footer { border-color: #e6eaf1; }
.sample-button { border: 1px solid transparent; background: transparent; border-radius: .5rem; padding: .7rem; color: inherit; }
.sample-button:hover { background: #f5f6fb; }
.sample-button[aria-pressed="true"] { background: #eff1ff; border-color: #cdd3fa; }
.sample-button:focus-visible { outline: 2px solid var(--studio-accent); outline-offset: 2px; }
.source-editor { font: .8rem/1.6 ui-monospace, Consolas, monospace; background: #fafbfe; min-height: 17rem; tab-size: 2; }
.btn-primary { --bs-btn-bg: var(--studio-accent); --bs-btn-border-color: var(--studio-accent); --bs-btn-hover-bg: #3543b8; --bs-btn-hover-border-color: #3543b8; }
.preview-stage { background: #e9edf4; min-height: 17rem; max-height: 75vh; overflow: auto; padding: 1rem; }
.preview-stage iframe { display: block; border: 0; width: 100%; height: 38rem; background: white; border-radius: .3rem; }
.preview-stage[data-format="Pdf"] { padding: 0; overflow: hidden; }
.preview-stage iframe.pdf-preview { height: 75vh; min-height: 17rem; border-radius: 0; }
.preview-stage img { display: block; max-width: 100%; height: auto; margin: auto; background: #fff; }
.preview-stage[data-transparent="true"] img { background-image: repeating-conic-gradient(#eef0f4 0% 25%, #fff 0% 50%); background-size: 16px 16px; }
summary { cursor: pointer; color: #435074; }
#error { white-space: pre-line; }
[hidden] { display: none !important; }
@media (max-width: 575.98px) { main.container-fluid, header .container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; } .preview-stage { padding: .5rem; } }