/* Schulcomputer — Design Tokens & Komponenten Farben (Light + Dark Mode), Typografie, Komponenten für den Web-Einsatz. Einbinden per: Dark Mode: folgt standardmäßig der Systemeinstellung (prefers-color-scheme). Manuell erzwingen: bzw. */ @font-face { font-family: "RockoUltraFLF"; src: url("../fonts/RockoUltraFLF.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "RockoUltraFLF"; src: url("../fonts/RockoUltraFLF-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Markenfarben — ändern sich nicht zwischen den Modi */ --sc-navy: #063852; --sc-navy-dark: #042a3f; --sc-teal: #69bac9; --sc-orange: #ffb23f; --sc-taupe: #b29082; --sc-black: #000000; --sc-white: #ffffff; --sc-navy-tint: #e6ebed; --sc-teal-tint: #f0f8f9; --sc-orange-tint: #fff7eb; --sc-taupe-tint: #f7f3f2; --sc-color-success: #3f9142; --sc-color-warning: var(--sc-orange); --sc-color-error: #c1443c; --sc-color-info: var(--sc-teal); /* Typografie */ --sc-font-display: "RockoUltraFLF", "Arial Black", "Arial", sans-serif; --sc-font-body: "Arial", "Helvetica Neue", Helvetica, sans-serif; --sc-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --sc-text-xs: 0.75rem; --sc-text-sm: 0.875rem; --sc-text-base: 1rem; --sc-text-lg: 1.25rem; --sc-text-xl: 1.75rem; --sc-text-2xl: 2.5rem; --sc-text-3xl: 3.25rem; --sc-leading-tight: 1.15; --sc-leading-normal: 1.5; /* Abstände */ --sc-space-1: 0.25rem; --sc-space-2: 0.5rem; --sc-space-3: 0.75rem; --sc-space-4: 1rem; --sc-space-6: 1.5rem; --sc-space-8: 2rem; --sc-space-12: 3rem; --sc-space-16: 4rem; /* Radien & Schatten */ --sc-radius-sm: 6px; --sc-radius-md: 12px; --sc-radius-lg: 20px; --sc-radius-pill: 999px; /* ---- Semantische Tokens: LIGHT (Standard) ---- */ --sc-color-bg: var(--sc-white); --sc-color-surface: var(--sc-white); --sc-color-surface-raised: var(--sc-white); --sc-color-text: #222222; --sc-color-text-muted: #6b7b82; --sc-color-heading: var(--sc-navy); --sc-color-border: #e2e6e8; --sc-color-link: var(--sc-navy); --sc-color-link-hover: var(--sc-teal); --sc-color-focus-ring: var(--sc-teal); --sc-shadow-sm: 0 1px 2px rgba(6, 56, 82, 0.08); --sc-shadow-md: 0 4px 16px rgba(6, 56, 82, 0.12); --sc-btn-primary-bg: var(--sc-orange); --sc-btn-primary-bg-hover: #ffc363; --sc-btn-primary-text: var(--sc-navy); --sc-btn-secondary-bg: var(--sc-navy); --sc-btn-secondary-bg-hover: var(--sc-navy-dark); --sc-btn-secondary-text: var(--sc-white); --sc-btn-ghost-border: var(--sc-navy); --sc-btn-ghost-text: var(--sc-navy); --sc-btn-ghost-bg-hover: var(--sc-navy-tint); --sc-badge-bg: var(--sc-orange-tint); --sc-badge-text: var(--sc-navy); --sc-callout-bg: var(--sc-teal-tint); --sc-callout-border: var(--sc-teal); --sc-callout-text: var(--sc-navy); --sc-input-bg: var(--sc-white); --sc-input-border: #cfd8db; --sc-input-text: var(--sc-color-text); --sc-input-placeholder: #93a1a6; --sc-track-bg: #e2e6e8; --sc-code-bg: #f4f1ea; --sc-code-text: var(--sc-navy); } /* ---- Semantische Tokens: DARK ---- Aktiv, wenn das System Dark Mode meldet UND kein explizites data-theme="light" gesetzt ist, ODER wenn data-theme="dark" explizit gesetzt ist. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --sc-color-bg: #051f2e; --sc-color-surface: #0b3550; --sc-color-surface-raised: #0e3f5e; --sc-color-text: #e7eef1; --sc-color-text-muted: #9fb6bf; --sc-color-heading: #ffffff; --sc-color-border: rgba(255, 255, 255, 0.14); --sc-color-link: var(--sc-teal); --sc-color-link-hover: var(--sc-orange); --sc-color-focus-ring: var(--sc-orange); --sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --sc-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --sc-btn-secondary-bg: var(--sc-teal); --sc-btn-secondary-bg-hover: #7fc6d3; --sc-btn-secondary-text: var(--sc-navy-dark); --sc-btn-ghost-border: rgba(255, 255, 255, 0.4); --sc-btn-ghost-text: var(--sc-white); --sc-btn-ghost-bg-hover: rgba(255, 255, 255, 0.08); --sc-badge-bg: rgba(255, 178, 63, 0.18); --sc-badge-text: var(--sc-orange); --sc-callout-bg: rgba(105, 186, 201, 0.12); --sc-callout-border: var(--sc-teal); --sc-callout-text: #e7eef1; --sc-input-bg: #0b3550; --sc-input-border: rgba(255, 255, 255, 0.2); --sc-input-text: #e7eef1; --sc-input-placeholder: #7f97a1; --sc-track-bg: rgba(255, 255, 255, 0.14); --sc-code-bg: #04202f; --sc-code-text: #cfe6ec; } } html[data-theme="dark"] { --sc-color-bg: #051f2e; --sc-color-surface: #0b3550; --sc-color-surface-raised: #0e3f5e; --sc-color-text: #e7eef1; --sc-color-text-muted: #9fb6bf; --sc-color-heading: #ffffff; --sc-color-border: rgba(255, 255, 255, 0.14); --sc-color-link: var(--sc-teal); --sc-color-link-hover: var(--sc-orange); --sc-color-focus-ring: var(--sc-orange); --sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --sc-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --sc-btn-secondary-bg: var(--sc-teal); --sc-btn-secondary-bg-hover: #7fc6d3; --sc-btn-secondary-text: var(--sc-navy-dark); --sc-btn-ghost-border: rgba(255, 255, 255, 0.4); --sc-btn-ghost-text: var(--sc-white); --sc-btn-ghost-bg-hover: rgba(255, 255, 255, 0.08); --sc-badge-bg: rgba(255, 178, 63, 0.18); --sc-badge-text: var(--sc-orange); --sc-callout-bg: rgba(105, 186, 201, 0.12); --sc-callout-border: var(--sc-teal); --sc-callout-text: #e7eef1; --sc-input-bg: #0b3550; --sc-input-border: rgba(255, 255, 255, 0.2); --sc-input-text: #e7eef1; --sc-input-placeholder: #7f97a1; --sc-track-bg: rgba(255, 255, 255, 0.14); --sc-code-bg: #04202f; --sc-code-text: #cfe6ec; } * { box-sizing: border-box; } body { font-family: var(--sc-font-body); font-size: var(--sc-text-base); line-height: var(--sc-leading-normal); color: var(--sc-color-text); background: var(--sc-color-bg); transition: background 0.2s ease, color 0.2s ease; } h1, h2, h3, .sc-display { font-family: var(--sc-font-display); font-weight: 700; color: var(--sc-color-heading); line-height: var(--sc-leading-tight); } a { color: var(--sc-color-link); text-decoration-color: var(--sc-orange); } a:hover { color: var(--sc-color-link-hover); } :focus-visible { outline: 3px solid var(--sc-color-focus-ring); outline-offset: 2px; } hr.sc-rule { border: none; border-top: 1px solid var(--sc-color-border); margin: var(--sc-space-8) 0; } /* ===== Buttons ===== */ .sc-btn { display: inline-flex; align-items: center; gap: var(--sc-space-2); font-family: var(--sc-font-body); font-weight: 700; font-size: var(--sc-text-base); padding: 0.75em 1.4em; border-radius: var(--sc-radius-pill); border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease; } .sc-btn:hover { transform: translateY(-1px); } .sc-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .sc-btn-sm { padding: 0.45em 1em; font-size: var(--sc-text-sm); } .sc-btn-lg { padding: 0.95em 1.8em; font-size: var(--sc-text-lg); } .sc-btn-primary { background: var(--sc-btn-primary-bg); color: var(--sc-btn-primary-text); } .sc-btn-primary:hover { background: var(--sc-btn-primary-bg-hover); } .sc-btn-secondary { background: var(--sc-btn-secondary-bg); color: var(--sc-btn-secondary-text); } .sc-btn-secondary:hover { background: var(--sc-btn-secondary-bg-hover); } .sc-btn-ghost { background: transparent; border-color: var(--sc-btn-ghost-border); color: var(--sc-btn-ghost-text); } .sc-btn-ghost:hover { background: var(--sc-btn-ghost-bg-hover); } /* ===== Icon-Button (z. B. Schließen-Buttons in Modal/Alerts) ===== */ .sc-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; flex-shrink: 0; border-radius: var(--sc-radius-pill); border: 2px solid transparent; background: transparent; color: var(--sc-color-text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .sc-btn-icon .sc-icon { width: 18px; height: 18px; } .sc-btn-icon:hover { background: var(--sc-btn-ghost-bg-hover); color: var(--sc-color-text); } .sc-btn-icon-sm { width: 26px; height: 26px; } .sc-btn-icon-sm .sc-icon { width: 15px; height: 15px; } .sc-card { background: var(--sc-color-surface); border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-lg); padding: var(--sc-space-6); box-shadow: var(--sc-shadow-sm); } .sc-card-stat { text-align: left; } .sc-card-stat .sc-stat-value { font-family: var(--sc-font-display); font-size: var(--sc-text-2xl); color: var(--sc-color-heading); } .sc-card-stat .sc-stat-label { font-size: var(--sc-text-sm); color: var(--sc-color-text-muted); } .sc-card-quote { border-left: 4px solid var(--sc-orange); } .sc-card-quote p { font-family: var(--sc-font-display); font-size: var(--sc-text-lg); margin: 0 0 var(--sc-space-3); } .sc-card-quote cite { font-style: normal; font-size: var(--sc-text-sm); color: var(--sc-color-text-muted); } /* ===== Badges ===== */ .sc-badge { display: inline-block; font-size: var(--sc-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3em 0.8em; border-radius: var(--sc-radius-pill); background: var(--sc-badge-bg); color: var(--sc-badge-text); } .sc-badge-success { background: rgba(63,145,66,0.15); color: var(--sc-color-success); } .sc-badge-error { background: rgba(193,68,60,0.15); color: var(--sc-color-error); } /* ===== Callout / Alerts ===== */ .sc-callout { border-left: 4px solid var(--sc-callout-border); background: var(--sc-callout-bg); border-radius: var(--sc-radius-sm); padding: var(--sc-space-4) var(--sc-space-6); color: var(--sc-callout-text); } .sc-alert { display: flex; gap: var(--sc-space-3); align-items: flex-start; border-radius: var(--sc-radius-md); padding: var(--sc-space-4) var(--sc-space-4); border: 1px solid transparent; border-left-width: 4px; font-size: var(--sc-text-sm); line-height: 1.5; } .sc-alert .sc-alert-icon { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; } .sc-alert-body { flex: 1; } .sc-alert strong { display: block; font-family: var(--sc-font-body); font-size: var(--sc-text-sm); margin-bottom: 2px; } .sc-alert-close { flex-shrink: 0; } .sc-alert-info { background: rgba(105,186,201,0.12); border-color: var(--sc-teal); color: var(--sc-color-text); } .sc-alert-info .sc-alert-icon { color: #2596ab; } .sc-alert-success { background: rgba(63,145,66,0.1); border-color: var(--sc-color-success); color: var(--sc-color-text); } .sc-alert-success .sc-alert-icon { color: var(--sc-color-success); } .sc-alert-warning { background: var(--sc-orange-tint); border-color: var(--sc-orange); color: var(--sc-color-text); } .sc-alert-warning .sc-alert-icon { color: #c07600; } .sc-alert-error { background: rgba(193,68,60,0.1); border-color: var(--sc-color-error); color: var(--sc-color-text); } .sc-alert-error .sc-alert-icon { color: var(--sc-color-error); } html[data-theme="dark"] .sc-alert-warning .sc-alert-icon { color: var(--sc-orange); } html[data-theme="dark"] .sc-alert-info .sc-alert-icon { color: var(--sc-teal); } html[data-theme="dark"] .sc-alert-warning { background: rgba(255,178,63,0.14); } html[data-theme="dark"] .sc-alert-info { background: rgba(105,186,201,0.14); } html[data-theme="dark"] .sc-alert-success { background: rgba(63,145,66,0.16); } html[data-theme="dark"] .sc-alert-error { background: rgba(193,68,60,0.16); } /* ===== Forms ===== */ .sc-field { display: flex; flex-direction: column; gap: var(--sc-space-1); } .sc-label { font-size: var(--sc-text-sm); font-weight: 700; color: var(--sc-color-heading); } .sc-input, .sc-select, .sc-textarea { font-family: var(--sc-font-body); font-size: var(--sc-text-base); padding: 0.65em 0.9em; border: 1.5px solid var(--sc-input-border); border-radius: var(--sc-radius-sm); background: var(--sc-input-bg); color: var(--sc-input-text); } .sc-input::placeholder, .sc-textarea::placeholder { color: var(--sc-input-placeholder); } .sc-input:focus, .sc-select:focus, .sc-textarea:focus { border-color: var(--sc-teal); } .sc-textarea { resize: vertical; min-height: 90px; } .sc-checkbox, .sc-radio { display: inline-flex; align-items: center; gap: var(--sc-space-2); font-size: var(--sc-text-sm); } .sc-checkbox input, .sc-radio input { accent-color: var(--sc-orange); width: 18px; height: 18px; } /* Toggle switch (z.B. für Dark-Mode-Umschalter) */ .sc-switch { position: relative; display: inline-flex; align-items: center; gap: var(--sc-space-2); cursor: pointer; user-select: none; } .sc-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .sc-switch-track { width: 44px; height: 26px; border-radius: var(--sc-radius-pill); background: var(--sc-track-bg); position: relative; transition: background 0.2s ease; } .sc-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--sc-white); box-shadow: var(--sc-shadow-sm); transition: transform 0.2s ease; } .sc-switch input:checked + .sc-switch-track { background: var(--sc-orange); } .sc-switch input:checked + .sc-switch-track::after { transform: translateX(18px); } /* ===== Navbar ===== */ .sc-navbar { display: flex; align-items: center; justify-content: space-between; padding: var(--sc-space-4) var(--sc-space-6); background: var(--sc-color-surface); border-bottom: 1px solid var(--sc-color-border); } .sc-navbar-links { display: flex; gap: var(--sc-space-6); list-style: none; margin: 0; padding: 0; } .sc-navbar-links a { font-weight: 700; font-size: var(--sc-text-sm); text-decoration: none; color: var(--sc-color-text); } .sc-navbar-links a:hover { color: var(--sc-color-link-hover); } /* ===== Tabs ===== */ .sc-tabs { display: flex; gap: var(--sc-space-2); border-bottom: 2px solid var(--sc-color-border); } .sc-tab { padding: var(--sc-space-2) var(--sc-space-4); font-size: var(--sc-text-sm); font-weight: 700; color: var(--sc-color-text-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; } .sc-tab.is-active { color: var(--sc-color-heading); border-color: var(--sc-orange); } /* ===== Breadcrumbs ===== */ .sc-breadcrumbs { display: flex; gap: var(--sc-space-2); font-size: var(--sc-text-sm); color: var(--sc-color-text-muted); list-style: none; padding: 0; margin: 0; } .sc-breadcrumbs a { color: var(--sc-color-text-muted); text-decoration: none; } .sc-breadcrumbs a:hover { color: var(--sc-color-link-hover); } .sc-breadcrumbs li { display: flex; gap: var(--sc-space-2); } .sc-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: var(--sc-space-2); color: var(--sc-color-border); } /* ===== Table ===== */ .sc-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .sc-table { width: 100%; border-collapse: collapse; font-size: var(--sc-text-sm); table-layout: auto; } .sc-table th { text-align: left; font-family: var(--sc-font-body); color: var(--sc-color-text-muted); font-size: var(--sc-text-xs); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--sc-space-3); border-bottom: 2px solid var(--sc-color-border); white-space: nowrap; } .sc-table td { padding: var(--sc-space-3); border-bottom: 1px solid var(--sc-color-border); vertical-align: middle; } .sc-table tr:hover td { background: var(--sc-callout-bg); } .sc-table tbody tr:last-child td { border-bottom: none; } /* Icon/Text- oder Avatar-Kombinationen in einer Zelle: Wrapper statt display:flex auf td (verhindert ungleiche Zeilenhöhen) */ .sc-td-flex { display: inline-flex; align-items: center; gap: var(--sc-space-2); } /* Kartenmodus auf sehr kleinen Screens: Tabelle wird zu gestapelten Karten statt seitlich zu scrollen */ @media (max-width: 560px) { .sc-table.sc-table-stack thead { display: none; } .sc-table.sc-table-stack, .sc-table.sc-table-stack tbody, .sc-table.sc-table-stack tr, .sc-table.sc-table-stack td { display: block; width: 100%; } .sc-table.sc-table-stack tr { border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-md); margin-bottom: var(--sc-space-3); padding: var(--sc-space-2) var(--sc-space-4); } .sc-table.sc-table-stack tbody tr:last-child { margin-bottom: 0; } .sc-table.sc-table-stack td { display: flex; justify-content: space-between; align-items: center; gap: var(--sc-space-4); border-bottom: 1px solid var(--sc-color-border); padding: var(--sc-space-2) 0; text-align: right; } .sc-table.sc-table-stack td:last-child { border-bottom: none; } .sc-table.sc-table-stack td::before { content: attr(data-label); font-size: var(--sc-text-xs); font-weight: 700; color: var(--sc-color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; text-align: left; } } /* ===== Pagination ===== */ .sc-pagination { display: flex; gap: var(--sc-space-2); list-style: none; padding: 0; margin: 0; } .sc-page-item { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--sc-radius-sm); font-size: var(--sc-text-sm); font-weight: 700; color: var(--sc-color-text); border: 1px solid var(--sc-color-border); cursor: pointer; } .sc-page-item.is-active { background: var(--sc-navy); color: var(--sc-white); border-color: var(--sc-navy); } /* ===== Progress ===== */ .sc-progress { width: 100%; height: 10px; border-radius: var(--sc-radius-pill); background: var(--sc-track-bg); overflow: hidden; } .sc-progress-bar { height: 100%; background: var(--sc-orange); border-radius: var(--sc-radius-pill); } /* ===== Avatar ===== */ .sc-avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sc-navy); color: var(--sc-white); font-family: var(--sc-font-display); font-size: var(--sc-text-sm); } .sc-user-chip { display: inline-flex; align-items: center; gap: var(--sc-space-3); } .sc-user-chip .sc-user-name { font-weight: 700; font-size: var(--sc-text-sm); color: var(--sc-color-heading); } .sc-user-chip .sc-user-role { font-size: var(--sc-text-xs); color: var(--sc-color-text-muted); } /* ===== Tooltip ===== */ .sc-tooltip { position: relative; border-bottom: 1px dotted var(--sc-color-text-muted); cursor: help; } .sc-tooltip::after { content: attr(data-tip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background: var(--sc-navy); color: var(--sc-white); font-size: var(--sc-text-xs); padding: 0.4em 0.7em; border-radius: var(--sc-radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .sc-tooltip:hover::after { opacity: 1; } /* ===== Icons ===== */ .sc-icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; color: currentColor; flex-shrink: 0; } .sc-icon + * { margin-left: 2px; } .sc-icon-sm { width: 16px; height: 16px; } .sc-icon-lg { width: 32px; height: 32px; } .sc-icon-navy { color: var(--sc-navy); } .sc-icon-orange { color: var(--sc-orange); } .sc-icon-teal { color: var(--sc-teal); } .sc-icon-muted { color: var(--sc-color-text-muted); } .sc-icon-tile { width: 44px; height: 44px; border-radius: var(--sc-radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--sc-orange-tint); color: var(--sc-navy); } html[data-theme="dark"] .sc-icon-tile { background: rgba(255,178,63,0.18); color: var(--sc-orange); } /* ===== Figure / Bild mit Unterschrift ===== */ .sc-figure { margin: 0; } .sc-figure img { width: 100%; height: auto; display: block; border-radius: var(--sc-radius-lg); } .sc-figure figcaption { margin-top: var(--sc-space-3); font-size: var(--sc-text-sm); color: var(--sc-color-text-muted); padding-left: var(--sc-space-1); border-left: 3px solid var(--sc-orange); padding-left: var(--sc-space-3); } /* ===== Modal ===== */ .sc-modal-demo { position: relative; border-radius: var(--sc-radius-lg); overflow: hidden; background: var(--sc-navy-tint); min-height: 340px; display: flex; align-items: center; justify-content: center; } html[data-theme="dark"] .sc-modal-demo { background: #03141e; } .sc-modal-backdrop { position: absolute; inset: 0; background: rgba(6,56,82,0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: var(--sc-space-6); } .sc-modal { background: var(--sc-color-surface); border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow-md); width: 100%; max-width: 380px; padding: var(--sc-space-6); position: relative; } .sc-modal-close { position: absolute; top: var(--sc-space-3); right: var(--sc-space-3); } .sc-modal-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sc-orange-tint); color: var(--sc-navy); margin-bottom: var(--sc-space-4); } html[data-theme="dark"] .sc-modal-icon { background: rgba(255,178,63,0.18); color: var(--sc-orange); } .sc-modal h3 { font-size: var(--sc-text-lg); margin: 0 0 var(--sc-space-2); } .sc-modal p { font-size: var(--sc-text-sm); color: var(--sc-color-text-muted); margin: 0 0 var(--sc-space-6); } .sc-modal-actions { display: flex; gap: var(--sc-space-3); } .sc-modal-actions .sc-btn { flex: 1; justify-content: center; } /* ===== Code ===== */ .sc-code { font-family: var(--sc-font-mono); background: var(--sc-code-bg); color: var(--sc-code-text); border-radius: var(--sc-radius-md); padding: var(--sc-space-4); font-size: var(--sc-text-sm); overflow-x: auto; } code.sc-inline-code { font-family: var(--sc-font-mono); background: var(--sc-code-bg); color: var(--sc-code-text); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; }