/* Slide canvas: the look of every slide in the editor, presenter, share links, thumbnails and exports.
   Theme tokens arrive as CSS variables on .sb-slide (themes.js). Content never uses the app's own classes. */
.sb-slide { position: relative; overflow: hidden; background: var(--sb-bg); color: var(--sb-text); font-family: var(--sb-font-body); font-size: 28px; line-height: 1.3;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; contain: layout paint; isolation: isolate; text-align: left; letter-spacing: normal; }
.sb-slide, .sb-slide * { box-sizing: border-box; }
.sb-slide :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, figure, pre, dl, dd, table) { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-transform: none; }
.sb-slide :is(b, strong) { font-weight: 700; }
.sb-slide a { color: var(--sb-primary); text-decoration: underline; text-underline-offset: .12em; }
.sb-slide img { max-width: none; border: 0; }
.sb-slide svg { display: block; }
.sb-slide.sb-bg-surface, .sb-slide.sb-bg-primary, .sb-slide.sb-bg-secondary, .sb-slide.sb-bg-accent, .sb-slide.sb-bg-dark { background: var(--sb-bg); }
.sb-slide.sb-bg-image { background: #111; }
.sb-bglayer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sb-bglayer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-bglayer .sb-overlay { position: absolute; inset: 0; }

.sb-el { position: absolute; z-index: 1; }
.sb-el[data-hidden="1"] { display: none; }
.sb-text, .sb-html, .sb-table, .sb-code { color: var(--sb-text); overflow-wrap: break-word; }
.sb-text { display: flex; flex-direction: column; justify-content: flex-start; }
.sb-text[data-valign="middle"] { justify-content: center; }
.sb-text[data-valign="bottom"] { justify-content: flex-end; }
.sb-text > * { flex: none; }
.sb-shape, .sb-line, .sb-icon, .sb-chart, .sb-diagram { line-height: 0; }
.sb-shape-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 6%; line-height: 1.25; text-align: center; color: var(--sb-on-primary); }
.sb-icon { color: var(--sb-primary); }
.sb-icon svg { width: 100%; height: 100%; }
.sb-image { overflow: hidden; background: color-mix(in srgb, var(--sb-text) 8%, transparent); }
.sb-image img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.sb-credit { position: absolute; right: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff;
  font: 500 13px/1.3 var(--sb-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 2; }
.sb-video { background: #000; overflow: hidden; }
.sb-video iframe, .sb-video video { width: 100%; height: 100%; border: 0; display: block; }
.sb-video .sb-poster { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: #111 center / cover no-repeat; font: 600 22px var(--sb-font-body); }
.sb-video .sb-poster::before { content: ""; width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 48px no-repeat; }
.sb-code { font-family: "JetBrains Mono", "Space Mono", ui-monospace, Menlo, monospace; background: #0f1520; color: #e6edf3; border-radius: var(--sb-radius); padding: 28px 32px; overflow: hidden; }
.sb-code pre { white-space: pre-wrap; font-family: inherit; line-height: 1.5; }
.sb-code .tk-k { color: #ff7b72; } .sb-code .tk-s { color: #a5d6ff; } .sb-code .tk-c { color: #8b949e; font-style: italic; } .sb-code .tk-n { color: #79c0ff; } .sb-code .tk-f { color: #d2a8ff; }

/* Typography classes (the AI and the layouts use them; sizes are set on each box) */
.sb-title { font-family: var(--sb-font-head); font-weight: var(--sb-title-weight, 700); letter-spacing: var(--sb-title-tracking, -0.02em); text-transform: var(--sb-title-case, none); font-style: var(--sb-title-style, normal); line-height: 1.08; color: var(--sb-text); }
.sb-kicker { font-family: var(--sb-font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--sb-primary); font-size: .9em; }
.sb-bg-primary .sb-kicker, .sb-bg-image .sb-kicker, .sb-bg-secondary .sb-kicker { color: inherit; opacity: .85; }
.sb-subtitle { color: var(--sb-muted); line-height: 1.35; }
.sb-h3 { font-family: var(--sb-font-head); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.sb-body { line-height: 1.45; }
.sb-small { font-size: .85em; line-height: 1.4; }
.sb-muted { color: var(--sb-muted); }
.sb-num { font-family: var(--sb-font-head); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sb-quote { font-family: var(--sb-font-head); font-weight: 500; line-height: 1.22; letter-spacing: -0.01em; font-style: var(--sb-title-style, normal); }
.sb-quote-mark { font-family: Georgia, serif; font-weight: 700; }
.sb-list { list-style: none; display: grid; gap: .55em; }
.sb-list li { position: relative; padding-left: 1.15em; line-height: 1.35; }
.sb-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: .42em; height: .42em; border-radius: 50%; background: var(--sb-primary); }
.sb-list.sb-checks li { padding-left: 1.5em; }
.sb-list.sb-checks li::before { top: .2em; width: 1em; height: 1em; border-radius: 0; background: currentColor; opacity: .9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.sb-list.sb-checks li::before { background: var(--sb-primary); }
.sb-bg-primary .sb-list.sb-checks li::before, [style*="on-primary"] .sb-list.sb-checks li::before { background: currentColor; }
.sb-list.sb-dashes li::before { top: .66em; width: .6em; height: 3px; border-radius: 2px; background: var(--sb-muted); }
.sb-slide ol:not([class]) , .sb-slide ul:not([class]) { padding-left: 1.2em; }
.sb-slide ul:not([class]) { list-style: disc; }
.sb-slide ol:not([class]) { list-style: decimal; }
.sb-table table, table.sb-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sb-table th, table.sb-table th { text-align: left; font-family: var(--sb-font-head); font-weight: 700; color: var(--sb-muted); font-size: .82em; text-transform: uppercase; letter-spacing: .06em; padding: .55em .8em; border-bottom: 3px solid var(--sb-primary); }
.sb-table td, table.sb-table td { padding: .6em .8em; border-bottom: 2px solid var(--sb-border); }
.sb-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--sb-surface) 70%, transparent); }
.sb-table td:first-child { font-weight: 600; }
.sb-callout { border-left: 6px solid var(--sb-primary); background: var(--sb-primary-soft); padding: .8em 1em; border-radius: 0 var(--sb-radius) var(--sb-radius) 0; }
.sb-watermark { position: absolute; right: 18px; bottom: 14px; z-index: 50; font: 600 16px/1 Inter, system-ui, sans-serif; color: rgba(0,0,0,.55); background: rgba(255,255,255,.82); border-radius: 999px; padding: 7px 12px; }
.sb-number { position: absolute; right: 36px; bottom: 26px; z-index: 40; font: 600 20px var(--sb-font-body); color: var(--sb-muted); }

/* Frames scale a slide (fixed pixel size) into any box */
.sb-frame { position: relative; overflow: hidden; }
.sb-frame > .sb-slide { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sb-slide .sb-title, .sb-slide .sb-num, .sb-slide .sb-h3 { overflow-wrap: normal; word-break: normal; }