:root { color-scheme: dark; --studio-radius: 4px; --editor-ink: var(--text, #f6f1e5); --editor-muted: var(--muted, #bbb4a6); --editor-line: var(--line, #827b6c); --editor-bg: var(--bg, #171715); --editor-surface: var(--colors__surface, #292823); --editor-accent: var(--colors__ember, #ffad76); }
body { margin: 0; background: var(--editor-bg); color: var(--editor-ink); font-family: var(--studio-mono, ui-monospace, monospace); }
:root, .example-studio * { scrollbar-color: var(--editor-line) var(--editor-surface); scrollbar-width: thin; }
.example-studio .cm-scroller, .example-studio textarea { scrollbar-color: #827b6c #171715; }
html:has(.example-studio)::-webkit-scrollbar, .example-studio ::-webkit-scrollbar { width: 10px; height: 10px; }
html:has(.example-studio)::-webkit-scrollbar-track, .example-studio ::-webkit-scrollbar-track { background: var(--editor-surface); }
html:has(.example-studio)::-webkit-scrollbar-thumb, .example-studio ::-webkit-scrollbar-thumb { background: var(--editor-line); border: 3px solid var(--editor-surface); border-radius: 6px; }
.example-studio .cm-scroller::-webkit-scrollbar-track, .example-studio textarea::-webkit-scrollbar-track { background: #171715; }
.example-studio .cm-scroller::-webkit-scrollbar-thumb, .example-studio textarea::-webkit-scrollbar-thumb { background: #827b6c; border-color: #171715; }
.example-studio, .example-studio * { box-sizing: border-box; }
.example-studio { max-width: 1360px; margin: auto; padding: 28px 32px 45px; --lumen-radius: var(--studio-radius); --lumen-blur: 0px; --lumen-bg: #ffaa710c; --lumen-glow-color: #ffaa71; --lumen-border-glow-color: #ffd4a3; --lumen-glow-opacity: .2; --lumen-border-opacity: .8; }
.example-studio [hidden] { display: none !important; }
.studio-back { color: var(--editor-muted); font-size: 11px; text-underline-offset: 4px; }
.example-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 34px 0 28px; }
.example-studio .eyebrow { color: var(--editor-accent); font-size: 9px; letter-spacing: .16em; margin: 0 0 14px; }
.example-heading h1 { font-weight: 600; line-height: 1.1; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.06em; margin: 0 0 14px; }
.example-heading p:not(.eyebrow) { margin: 0; max-width: 600px; color: var(--editor-muted); font-size: 12px; line-height: 1.8; }
.example-studio .studio-button { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 44px; padding: 10px 15px; border: 1px solid var(--editor-line); border-radius: var(--studio-radius); background-color: var(--editor-surface); color: var(--editor-ink); font: inherit; line-height: 1.4; font-size: 12px; cursor: pointer; }
.example-studio .studio-button:hover { border-color: var(--editor-accent); color: var(--editor-accent); }
.example-studio button:disabled { opacity: .45; cursor: wait; }
.example-studio :is(button, a, input, textarea):focus-visible { outline: 2px solid var(--editor-accent); outline-offset: 3px; }
.studio-workspace { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: stretch; }
.example-studio .studio-card { border: 1px solid var(--editor-line); border-radius: var(--studio-radius); min-width: 0; overflow: clip; background: var(--editor-surface); }
.panel-heading, .editor-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 10px 20px; border-bottom: 1px solid var(--editor-line); gap: 10px; }
.panel-heading h2 { margin: 0; font-size: 12px; font-weight: 500; }
#preview-state { font-size: 11px; color: var(--editor-muted); }
.preview-stage { min-height: 570px; display: grid; place-items: center; background: #24231f; }
#example-preview { display: block; width: 100%; height: 570px; border: 0; background: #24231f; }
#preview-poster { display: block; width: 100%; height: auto; }
.preview-caption { border-top: 1px solid var(--editor-line); color: var(--editor-muted); font-size: 10px; padding: 17px 20px; line-height: 1.6; }
.editor-card { display: flex; flex-direction: column; }
.editor-toolbar { padding: 0 16px 0 0; }
.code-tabs { display: flex; align-self: stretch; }
.code-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--editor-muted); font: inherit; font-size: 11px; padding: 16px 20px; cursor: pointer; min-height: 54px; }
.code-tabs button[aria-selected=true] { color: var(--editor-accent); border-bottom-color: var(--editor-accent); background: color-mix(in srgb, var(--editor-accent) 5%, transparent); }
.auto-run { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--editor-muted); white-space: nowrap; }
.auto-run input { accent-color: #ffaa71; }
.editor-card [role=tabpanel] { flex: 1; display: flex; min-height: 0; }
.example-studio textarea { display: block; resize: vertical; width: 100%; min-height: 540px; border: 0; border-radius: 0; padding: 20px; background: #171715; color: #f6f1e5; font: 12px/1.8 ui-monospace, monospace; tab-size: 2; caret-color: #ffad76; color-scheme: dark; }
.example-studio textarea:focus-visible { outline-offset: -3px; }
.editor-actions { padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-top: 1px solid var(--editor-line); }
#edit-status { font-size: 9px; color: var(--editor-muted); margin-left: auto; }
#preview-error { margin: 0; border: 0; border-top: 1px solid #ffad7155; border-radius: 0; padding: 14px 16px; white-space: pre-wrap; max-height: 130px; overflow: auto; font: 11px/1.6 ui-monospace, monospace; color: #ffbc93; background: #2c2525; }
.studio-bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 23px; align-items: flex-start; }
.studio-bottom p { margin: 0; color: var(--editor-muted); font-size: 10px; line-height: 1.8; }
.studio-export { display: flex; gap: 10px; flex-wrap: wrap; }
.studio-export form { margin: 0; }
#share-status { font-size: 11px; color: var(--editor-accent); }
#share-url { width: 100%; padding: 12px; background: var(--editor-surface); color: var(--editor-ink); border: 1px solid var(--editor-line); border-radius: var(--studio-radius); font: 12px ui-monospace, monospace; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 850px) { .studio-workspace { grid-template-columns: 1fr; } .preview-stage { min-height: 510px; } #example-preview { height: 510px; } .example-studio textarea { min-height: 340px; } }
@media (max-width: 600px) { .example-studio { padding: 22px 16px; } .example-heading { display: block; margin-block: 25px; } .example-heading .studio-button { margin-top: 20px; } .studio-bottom { flex-direction: column; } .studio-workspace { gap: 16px; } .code-tabs button { padding-inline: 14px; } .editor-toolbar { padding-right: 12px; } .panel-heading { padding-inline: 16px; } }
@media (forced-colors: active) { .example-studio .studio-card, .example-studio textarea, .example-studio .studio-button { background: Canvas; color: CanvasText; border-color: CanvasText; } .code-tabs button[aria-selected=true] { border-color: Highlight; color: Highlight; } }
.example-studio .studio-button { gap: 8px; }
.code-tabs button i { margin-right: 7px; }
.code-editor { width: 100%; min-width: 0; height: 540px; overflow: hidden; }
.code-editor .cm-editor { height: 100%; }
.code-editor .cm-scroller { max-width: 100%; }
#format-code { margin-left: auto; min-width: 42px; padding-inline: 10px; }
.editor-toolbar { gap: 6px; }
@media (max-width: 850px) { .code-editor { height: 380px; } }
@media (max-width: 600px) { .code-tabs button { padding-inline: 10px; } .code-tabs button i { margin-right: 4px; } .editor-toolbar { flex-wrap: wrap; padding-right: 8px; } .auto-run { font-size: 9px; } }

@media (prefers-reduced-motion: no-preference) { html:has(.example-studio) { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { html:has(.example-studio) { scroll-behavior: auto; } }

.share-control { position: relative; flex: none; }
.example-studio .share-options { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; display: grid; gap: 4px; width: min(260px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--editor-line); border-radius: var(--studio-radius); background: var(--editor-surface); box-shadow: 0 12px 32px #0003; }
.example-studio .share-options .studio-button { justify-content: flex-start; width: 100%; margin: 0; gap: 10px; text-decoration: none; border-color: transparent; background: transparent; }
.example-studio .share-options .studio-button:hover { background: #ffaa7112; border-color: #ffaa7140; }
.example-studio .share-options i { width: 16px; text-align: center; }
.example-studio .share-options p { margin: 4px 8px; font-size: 10px; line-height: 1.6; }
.example-studio .share-options #share-status:empty { display: none; }
@media (max-width: 600px) { .share-control { width: fit-content; } .share-options { left: 0; right: auto; } }
@media (forced-colors: active) { .example-studio .share-options { background: Canvas; border-color: ButtonText; } }