.lj-playground { margin: 1.5rem 0; }
.lj-toolbar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.lj-example-picker { position: relative; display: flex; flex-direction: column; flex: 0 1 15rem; gap: .4rem; min-width: 0; }
.lj-example-picker::after { content: ''; position: absolute; right: 1rem; bottom: 1.1rem; width: .4rem; height: .4rem; border-right: 2px solid #5f7ea1; border-bottom: 2px solid #5f7ea1; transform: rotate(45deg); pointer-events: none; }
.lj-toolbar label { color: #555c65; font-size: .8rem; font-weight: 400; }
.lj-toolbar select,
.lj-toolbar button { min-height: 2.5rem; border: 1px solid #cbd2d9; border-radius: .5rem; font: inherit; font-size: .875rem; font-weight: 400; line-height: 1.4; }
.lj-toolbar select { appearance: none; width: 100%; padding: .6rem 2.5rem .6rem .85rem; color: #2a2f36; background: #fff; border-color: #c7d7ea; box-shadow: 0 1px 2px rgba(23, 26, 31, .05); cursor: pointer; }
.lj-toolbar select:hover { border-color: #5f7ea1; background: #fafcfe; }
.lj-examples { display: flex; align-items: flex-end; flex: 1 1 25rem; gap: .5rem; min-width: 0; }
.lj-toolbar button { padding: .5rem .9rem; color: #334e68; background: transparent; box-shadow: none; cursor: pointer; }
.lj-toolbar button:hover:not(:disabled) { background: #e5eef7; border-color: #5f7ea1; }
.lj-toolbar #lj-verify,
.lj-toolbar #lj-reset { min-width: 5rem; padding: .6rem .9rem; color: #fff; background: #334e68; border-color: #334e68; white-space: nowrap; flex-shrink: 0; }
.lj-toolbar #lj-verify:hover:not(:disabled),
.lj-toolbar #lj-reset:hover { background: #253b50; border-color: #253b50; }
.lj-toolbar #lj-verify[data-state="busy"] { background: #c62828; border-color: #c62828; }
.lj-toolbar #lj-verify[data-state="busy"]:hover { background: #a61f1f; border-color: #a61f1f; }
.lj-toolbar button:disabled { color: #8a929b; background: #efefec; border-color: #e4e4e7; cursor: default; }
.lj-toolbar #lj-verify:disabled { color: #fff; background: #7f90a1; border-color: #7f90a1; }
.lj-toolbar select:focus-visible,
.lj-toolbar button:focus-visible { outline: 2px solid #5f7ea1; outline-offset: 3px; }
#lj-editor { margin: 1rem 0; overflow: hidden; }
.lj-playground .cm-editor { font-size: .75em; border-radius: inherit; overflow: hidden; }
.lj-playground .cm-scroller { min-height: 200px; max-height: 560px; overflow: auto; font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace; line-height: 1.6; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .72) rgba(255, 255, 255, .16); }
.lj-playground .cm-focused { outline: 2px solid #7dd3fc; outline-offset: -2px; }
.lj-output { color: #e6edf7; }
#lj-status { margin: 0; padding: 1rem 1.15rem; font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .75em; line-height: 1.6; }
#lj-status.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#lj-status[data-state="success"] { color: #a7f3c1; }
#lj-status[data-state="warning"] { color: #f6c177; }
#lj-status:not(.sr-only) + #lj-results:not(:empty) { border-top: 1px solid #ffffff1a; }
.main-content #lj-results pre { margin: 0; }
.main-content #lj-results a { color: #e6edf7; text-decoration: underline; text-underline-offset: .2em; }
.main-content #lj-results a:hover { color: #e6edf7; }
.main-content #lj-results a:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 3px; }
#lj-results .ansi-black-fg { color: #111827; }
#lj-results .ansi-bright-black-fg { color: #9ca3af; }
#lj-status[data-state="error"],
#lj-status[data-state="failure"],
#lj-results :is(.ansi-red-fg, .ansi-bright-red-fg) { color: #f29e9e; }
#lj-results :is(.ansi-green-fg, .ansi-bright-green-fg) { color: #a7f3c1; }
#lj-results :is(.ansi-yellow-fg, .ansi-bright-yellow-fg) { color: #f6c177; }
#lj-results :is(.ansi-blue-fg, .ansi-bright-blue-fg) { color: #93b4f4; }
#lj-results :is(.ansi-magenta-fg, .ansi-bright-magenta-fg) { color: #c4b5fd; }
#lj-results :is(.ansi-cyan-fg, .ansi-bright-cyan-fg) { color: #7dd3fc; }
#lj-results :is(.ansi-white-fg, .ansi-bright-white-fg) { color: #e6edf7; }
