:root {
color-scheme: light;
font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
--bg-base: #f1f5fa;
--bg-accent: #e8eef7;
--bg-rim: #dde6f0;
--text-main: #13263e;
--text-muted: #4a607a;
--panel-bg: rgba(255, 255, 255, 0.92);
--panel-border: rgba(17, 33, 56, 0.12);
--surface-bg: #ffffff;
--surface-border: rgba(17, 33, 56, 0.2);
--button-bg: #f6f9fe;
--button-border: rgba(17, 33, 56, 0.2);
--button-text: #133055;
--button-active-bg: #1f6feb;
--button-active-text: #f4f9ff;
--tab-bg: rgba(17, 33, 56, 0.06);
--tab-text: #244366;
--tab-active-bg: #ffffff;
--tab-active-text: #0f2a4d;
--status-bg: #e9f5ff;
--status-border: #7bb4e7;
--status-text: #0f4a80;
--error-bg: #ffecec;
--error-border: #e15d5d;
--error-text: #9d2020;
--editor-token-type: #7a44cd;
--editor-token-keyword: #275f98;
--editor-token-comment: #6a7f95;
--editor-token-string: #926100;
--editor-token-number: #5f48bf;
--editor-token-variable: #9f237f;
--editor-token-class: #1a8b74;
--editor-token-transition: #0a8146;
--editor-token-delimiter: #355a82;
--snippet-code-bg: #0d1b2f;
--snippet-code-text: #d5e4f8;
--focus-ring: 0 0 0 2px rgba(31, 111, 235, 0.3);
}
:root[data-theme="dark"] {
color-scheme: dark;
--bg-base: #101826;
--bg-accent: #0e1828;
--bg-rim: #0b1420;
--text-main: #d7e6fa;
--text-muted: #9cb5d1;
--panel-bg: rgba(14, 26, 42, 0.94);
--panel-border: rgba(140, 171, 208, 0.2);
--surface-bg: rgba(10, 20, 32, 0.92);
--surface-border: rgba(152, 186, 227, 0.36);
--button-bg: rgba(22, 38, 60, 0.94);
--button-border: rgba(132, 169, 216, 0.36);
--button-text: #dceaff;
--button-active-bg: #2f85ff;
--button-active-text: #f3f8ff;
--tab-bg: rgba(132, 169, 216, 0.16);
--tab-text: #c1daf8;
--tab-active-bg: rgba(225, 240, 255, 0.2);
--tab-active-text: #f5f9ff;
--status-bg: rgba(22, 79, 128, 0.35);
--status-border: rgba(128, 181, 231, 0.66);
--status-text: #d5ecff;
--error-bg: rgba(140, 35, 35, 0.38);
--error-border: rgba(240, 132, 132, 0.65);
--error-text: #ffd7d7;
--editor-token-type: #b68dff;
--editor-token-keyword: #79b8ff;
--editor-token-comment: #7f97b3;
--editor-token-string: #f0bf6d;
--editor-token-number: #b99bff;
--editor-token-variable: #f291de;
--editor-token-class: #7be3c5;
--editor-token-transition: #66dfa5;
--editor-token-delimiter: #b8cde5;
--snippet-code-bg: #0a1323;
--snippet-code-text: #bfd6f4;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background: linear-gradient(
165deg,
var(--bg-base) 0%,
var(--bg-accent) 55%,
var(--bg-rim) 100%
);
color: var(--text-main);
}
.playground {
max-width: 1200px;
margin: 0 auto;
padding: 1.15rem;
display: grid;
gap: 0.85rem;
}
.toolbar {
border: 1px solid var(--panel-border);
border-radius: 14px;
padding: 0.85rem;
background: var(--panel-bg);
display: grid;
gap: 0.7rem;
}
.toolbar-title-group {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.toolbar-title-actions {
display: inline-flex;
align-items: center;
margin-left: auto;
}
.toolbar h1 {
margin: 0;
font-size: clamp(1.35rem, 2.1vw, 1.7rem);
letter-spacing: -0.02em;
}
.toolbar-subtitle {
margin: 0;
color: var(--text-muted);
font-size: 0.95rem;
}
.repo-link {
color: var(--text-muted);
text-decoration: none;
font-size: 0.62em;
margin-left: 0.55rem;
font-weight: 500;
}
.repo-link:hover {
text-decoration: underline;
}
.toolbar-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.toolbar-actions-primary {
justify-content: space-between;
flex-wrap: nowrap;
}
.toolbar-actions-left,
.toolbar-actions-right {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.toolbar-actions-left {
min-width: 0;
flex: 1 1 auto;
flex-wrap: wrap;
}
.toolbar-actions-right {
margin-left: auto;
flex: 0 0 auto;
flex-wrap: nowrap;
}
.example-picker {
display: inline-flex;
align-items: center;
gap: 0.55rem;
border-radius: 10px;
border: 1px solid var(--button-border);
background: var(--button-bg);
padding: 0.25rem 0.5rem;
}
.example-picker span {
color: var(--text-muted);
font-size: 0.78rem;
font-weight: 700;
}
.example-picker select,
.render-setting select {
border: 1px solid var(--surface-border);
border-radius: 10px;
padding: 0.36rem 0.55rem;
background: var(--surface-bg);
color: var(--button-text);
font-size: 0.9rem;
min-width: 8rem;
}
.example-picker select {
border: 0;
background: transparent;
min-width: 14rem;
max-width: 26rem;
}
.example-picker select:focus-visible,
.render-setting select:focus-visible,
.toolbar-button:focus-visible,
.preview-controls-toggle:focus-visible,
.preview-toolbar-button:focus-visible,
.snippet-action-button:focus-visible,
.export-menu button:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.format-tabs {
display: inline-flex;
gap: 0.25rem;
background: var(--tab-bg);
padding: 0.2rem;
border-radius: 10px;
}
.format-tabs button {
border: 0;
border-radius: 8px;
padding: 0.33rem 0.75rem;
font-weight: 700;
color: var(--tab-text);
background: transparent;
cursor: pointer;
}
.format-tabs button.is-active {
background: var(--tab-active-bg);
color: var(--tab-active-text);
box-shadow: 0 1px 3px rgba(10, 22, 35, 0.2);
}
.toolbar-button {
border: 1px solid var(--button-border);
border-radius: 10px;
padding: 0.38rem 0.75rem;
background: var(--button-bg);
color: var(--button-text);
font-weight: 640;
cursor: pointer;
}
.toolbar-button.is-active {
background: var(--button-active-bg);
color: var(--button-active-text);
border-color: transparent;
}
.theme-cycler {
width: 2rem;
min-width: 2rem;
height: 2rem;
padding: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.72;
}
.theme-cycler-subtle {
border-color: transparent;
background: transparent;
}
.theme-cycler:hover {
opacity: 0.95;
}
.theme-cycler-subtle:hover {
border-color: color-mix(in srgb, var(--button-border) 45%, transparent);
background: color-mix(in srgb, var(--tab-bg) 65%, transparent);
}
.theme-cycler svg {
width: 1.05rem;
height: 1.05rem;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.toolbar-button-toggle::after {
content: "â–¾";
display: inline-block;
margin-left: 0.4rem;
transform: rotate(0deg);
transition: transform 120ms ease-out;
}
.toolbar-button-toggle.is-active::after {
transform: rotate(180deg);
}
.export-control {
position: relative;
}
.export-menu {
position: absolute;
top: calc(100% + 0.4rem);
right: 0;
z-index: 8;
border: 1px solid var(--surface-border);
background: var(--surface-bg);
border-radius: 12px;
min-width: 10rem;
box-shadow: 0 10px 22px rgba(6, 16, 30, 0.28);
overflow: hidden;
}
.export-menu button {
width: 100%;
border: 0;
background: transparent;
text-align: left;
color: var(--button-text);
padding: 0.58rem 0.75rem;
cursor: pointer;
}
.export-menu button:hover {
background: rgba(43, 115, 206, 0.1);
}
.advanced-panel {
border: 1px solid var(--panel-border);
border-radius: 12px;
background: var(--panel-bg);
padding: 0.85rem;
display: grid;
gap: 0.75rem;
}
.advanced-panel[hidden] {
display: none;
}
.advanced-panel h2 {
margin: 0;
font-size: 0.84rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
}
.render-settings-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.8rem;
}
.render-setting {
border: 1px solid var(--surface-border);
border-radius: 12px;
background: var(--surface-bg);
padding: 0.7rem;
display: grid;
gap: 0.55rem;
}
.render-setting label {
color: var(--text-main);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
.render-help {
margin: 0;
color: var(--text-muted);
font-size: 0.77rem;
line-height: 1.35;
}
.render-setting.is-disabled {
opacity: 0.78;
}
.workspace {
display: grid;
gap: 0.85rem;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.panel {
border: 1px solid var(--panel-border);
border-radius: 12px;
background: var(--panel-bg);
padding: 0.85rem;
}
.panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.panel h2 {
margin: 0;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
}
.text-preview-toolbar {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
flex-wrap: wrap;
}
.text-preview-toolbar[hidden] {
display: none;
}
.preview-mode-tabs {
display: inline-flex;
gap: 0.18rem;
background: var(--tab-bg);
border: 1px solid var(--surface-border);
border-radius: 999px;
padding: 0.18rem;
}
.preview-mode-tabs button,
.preview-text-action {
border: 0;
border-radius: 999px;
background: transparent;
color: var(--button-text);
cursor: pointer;
font-size: 0.8rem;
font-weight: 650;
line-height: 1;
min-height: 1.95rem;
}
.preview-mode-tabs button {
padding: 0.4rem 0.72rem;
}
.preview-mode-tabs button.is-active {
background: var(--button-active-bg);
color: var(--button-active-text);
}
.preview-text-actions {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.preview-text-action {
border: 1px solid var(--button-border);
background: color-mix(in srgb, var(--button-bg) 88%, transparent);
padding: 0.4rem 0.72rem;
}
.preview-mode-tabs button:hover,
.preview-text-action:hover {
background: color-mix(in srgb, var(--button-active-bg) 18%, var(--button-bg));
}
.preview-mode-tabs button.is-active:hover {
background: var(--button-active-bg);
}
.share-status,
.editor-status,
.preview-error {
margin: 0;
padding: 0.58rem 0.75rem;
border-radius: 10px;
font-size: 0.84rem;
}
.share-status,
.editor-status {
border: 1px solid var(--status-border);
background: var(--status-bg);
color: var(--status-text);
}
.preview-error {
border: 1px solid var(--error-border);
background: var(--error-bg);
color: var(--error-text);
}
.share-status {
margin: 0 0 0.7rem;
}
.editor-status,
.preview-error {
margin: 0.7rem 0 0;
}
.share-status[hidden],
.editor-status[hidden],
.preview-error[hidden] {
display: none;
}
.editor-codemirror,
.preview-stage {
width: 100%;
min-height: 430px;
border: 1px solid var(--surface-border);
border-radius: 12px;
background: var(--surface-bg);
color: var(--text-main);
font:
500 0.93rem / 1.45 "IBM Plex Mono",
"Iosevka",
"SFMono-Regular",
monospace;
}
.preview-stage {
position: relative;
overflow: hidden;
height: 430px;
}
.preview-controls-overlay {
position: absolute;
z-index: 5;
top: 0.6rem;
right: 0.6rem;
display: inline-flex;
align-items: center;
justify-content: flex-end;
flex-direction: row-reverse;
gap: 0.35rem;
}
.preview-controls-overlay[hidden] {
display: none;
}
.preview-controls-toggle {
border: 1px solid var(--surface-border);
background: var(--tab-bg);
color: var(--button-text);
border-radius: 999px;
width: 2.05rem;
min-width: 2.05rem;
height: 2.05rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.preview-controls-toggle-icon {
width: 1rem;
height: 1rem;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.preview-controls-overlay.is-expanded .preview-controls-toggle {
background: var(--button-active-bg);
border-color: transparent;
color: var(--button-active-text);
}
.preview-toolbar {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: var(--tab-bg);
border: 1px solid var(--surface-border);
border-radius: 999px;
padding: 0.18rem;
overflow: hidden;
transform-origin: right center;
transition:
max-width 160ms ease,
opacity 160ms ease,
transform 160ms ease,
margin-inline-end 160ms ease,
border-color 160ms ease;
}
.preview-controls-overlay:not(.is-expanded) .preview-toolbar {
max-width: 0;
opacity: 0;
transform: translateX(8px);
margin-inline-end: 0;
border-color: transparent;
pointer-events: none;
padding-left: 0;
padding-right: 0;
}
.preview-controls-overlay.is-expanded .preview-toolbar {
max-width: 24rem;
opacity: 1;
transform: translateX(0);
margin-inline-end: 0.2rem;
pointer-events: auto;
}
.preview-toolbar-button {
border: 0;
background: transparent;
border-radius: 999px;
color: var(--button-text);
cursor: pointer;
font-weight: 650;
min-width: 2rem;
height: 1.95rem;
padding: 0 0.6rem;
}
.preview-toolbar-button:hover {
background: rgba(43, 115, 206, 0.15);
}
.preview-zoom-label {
min-width: 3.35rem;
text-align: center;
color: var(--text-main);
font-weight: 700;
font-size: 0.82rem;
}
.preview-output {
height: 100%;
min-height: 100%;
padding: 0.75rem;
overflow: auto;
white-space: pre;
}
.preview-output.is-terminal {
background:
radial-gradient(
circle at top right,
rgba(56, 136, 233, 0.14),
transparent 34%
),
linear-gradient(180deg, rgba(11, 23, 39, 0.98), rgba(7, 15, 28, 0.98));
color: #edf5ff;
}
.preview-output.is-svg {
overflow: hidden;
white-space: normal;
}
.preview-output.is-svg.is-draggable {
cursor: grab;
}
.preview-output.is-svg.is-dragging {
cursor: grabbing;
}
.preview-output.is-svg.is-draggable *,
.preview-output.is-svg.is-draggable svg,
.preview-output.is-svg.is-draggable [data-panzoom-viewport] {
cursor: grab;
}
.preview-output.is-svg.is-dragging *,
.preview-output.is-svg.is-dragging svg,
.preview-output.is-svg.is-dragging [data-panzoom-viewport] {
cursor: grabbing;
}
.editor-codemirror {
overflow: hidden;
}
.editor-codemirror .cm-editor {
height: 100%;
min-height: inherit;
background: transparent;
color: var(--text-main);
}
.editor-codemirror .cm-scroller {
font:
500 0.93rem / 1.45 "IBM Plex Mono",
"Iosevka",
"SFMono-Regular",
monospace;
}
.editor-codemirror .cm-content {
min-height: 100%;
padding: 0.86rem;
}
.editor-codemirror .cm-line {
padding: 0;
}
.editor-codemirror .cm-gutters {
border-right: 0;
background: transparent;
}
.editor-codemirror .cm-cursor,
.editor-codemirror .cm-dropCursor {
border-left-color: var(--text-main);
}
.editor-codemirror .cm-lintRange-error {
background-image: linear-gradient(
to bottom,
transparent calc(100% - 2px),
var(--error-border) calc(100% - 2px)
);
}
.editor-codemirror .cm-tooltip .cm-tooltip-lint {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid var(--surface-border);
border-radius: 10px;
background: var(--panel-bg);
color: var(--text-main);
}
.editor-codemirror .cm-tooltip .cm-diagnostic {
font-size: 0.82rem;
color: inherit;
}
.editor-codemirror .cm-tooltip .cm-diagnosticText {
color: inherit;
}
.editor-codemirror .cm-tooltip .cm-diagnosticSource {
color: var(--text-muted);
}
.editor-codemirror .cm-tooltip .cm-diagnosticAction {
border: 1px solid var(--button-border);
background: var(--button-bg);
color: var(--button-text);
}
.editor-input {
resize: vertical;
padding: 0.86rem;
}
.editor-input-sync {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
}
.preview-output svg {
display: block;
margin: 0;
max-width: none;
max-height: none;
transform-origin: top left;
touch-action: none;
}
.ansi-preview {
margin: 0;
min-height: 100%;
white-space: pre;
font: inherit;
}
.snippet-gallery {
border: 1px solid var(--panel-border);
border-radius: 12px;
background: var(--panel-bg);
padding: 0.85rem;
display: grid;
gap: 0.7rem;
}
.snippet-gallery-header h2 {
margin: 0;
font-size: 1.05rem;
letter-spacing: -0.01em;
}
.snippet-gallery-header p {
margin: 0.3rem 0 0;
color: var(--text-muted);
font-size: 0.88rem;
}
.snippet-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
}
.snippet-card {
border: 1px solid var(--surface-border);
border-radius: 10px;
background: var(--surface-bg);
padding: 0.7rem;
display: grid;
gap: 0.5rem;
}
.snippet-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.7rem;
}
.snippet-title {
margin: 0;
font-size: 0.92rem;
}
.snippet-category {
border-radius: 999px;
border: 1px solid var(--surface-border);
background: var(--tab-bg);
color: var(--text-muted);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
padding: 0.18rem 0.5rem;
}
.snippet-description {
margin: 0;
font-size: 0.8rem;
color: var(--text-muted);
}
.snippet-preview {
margin: 0;
border-radius: 10px;
border: 1px solid rgba(148, 184, 225, 0.2);
background: var(--snippet-code-bg);
color: var(--snippet-code-text);
min-height: 96px;
max-height: 132px;
overflow: hidden;
padding: 0.64rem;
font:
500 0.77rem / 1.4 "IBM Plex Mono",
"Iosevka",
"SFMono-Regular",
monospace;
}
.snippet-token {
color: var(--snippet-code-text);
}
.snippet-token-type {
color: var(--editor-token-type);
font-weight: 700;
}
.snippet-token-keyword {
color: var(--editor-token-keyword);
font-weight: 600;
}
.snippet-token-comment {
color: var(--editor-token-comment);
font-style: italic;
}
.snippet-token-string {
color: var(--editor-token-string);
}
.snippet-token-number {
color: var(--editor-token-number);
}
.snippet-token-variable {
color: var(--editor-token-variable);
}
.snippet-token-class {
color: var(--editor-token-class);
}
.snippet-token-transition {
color: var(--editor-token-transition);
font-weight: 700;
}
.snippet-token-delimiter {
color: var(--editor-token-delimiter);
}
.snippet-actions {
display: flex;
gap: 0.45rem;
}
.snippet-action-button {
border: 1px solid var(--button-border);
border-radius: 999px;
background: var(--button-bg);
color: var(--button-text);
font-weight: 650;
cursor: pointer;
padding: 0.35rem 0.7rem;
font-size: 0.82rem;
}
.snippet-action-button-primary {
background: var(--button-active-bg);
border-color: transparent;
color: var(--button-active-text);
}
.benchmark-mode .toolbar {
gap: 0.6rem;
}
.benchmark-mode .toolbar h1 {
font-size: 1.5rem;
}
.benchmark-mode .toolbar-actions {
justify-content: flex-end;
}
.benchmark-mode ul {
margin: 0;
padding-left: 1rem;
color: var(--text-main);
}
.benchmark-mode .preview-stage {
min-height: 320px;
height: 320px;
}
:root[data-theme="dark"] .preview-output svg [fill="white"] {
fill: #1b2734;
}
:root[data-theme="dark"] .preview-output svg [fill="#333"] {
fill: #e6edf7;
}
:root[data-theme="dark"] .preview-output svg [stroke="#333"] {
stroke: #96adc8;
}
:root[data-theme="dark"] .preview-output svg rect.subgraph {
stroke: #5c738d;
}
:root[data-theme="dark"] .preview-output svg [fill="#fff5ad"] {
fill: #3d3a1e;
}
:root[data-theme="dark"] .preview-output svg [stroke="#aaaa33"] {
stroke: #8a8a2a;
}
@media (max-width: 1120px) {
.render-settings-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.snippet-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 920px) {
.toolbar-title-group {
align-items: baseline;
}
.workspace {
grid-template-columns: 1fr;
}
.editor-codemirror,
.editor-input,
.preview-stage {
min-height: 340px;
}
.preview-stage {
height: 340px;
}
.toolbar-actions-primary {
width: 100%;
flex-wrap: wrap;
}
.toolbar-actions-left {
flex: 1 1 100%;
}
.toolbar-actions-right {
margin-left: 0;
}
.example-picker {
width: 100%;
border-radius: 12px;
justify-content: space-between;
}
.example-picker select {
min-width: 0;
width: 100%;
}
}
@media (max-width: 760px) {
.playground {
padding: 1rem;
}
.toolbar-title-group {
align-items: center;
}
.toolbar-actions {
gap: 0.5rem;
}
.toolbar-actions-primary {
flex-direction: column;
align-items: stretch;
}
.toolbar-actions-left,
.toolbar-actions-right {
width: 100%;
margin-left: 0;
}
.toolbar-actions-right {
justify-content: flex-end;
}
.toolbar-actions-left .toolbar-button,
.toolbar-actions-left .format-tabs,
.toolbar-actions-left .export-control {
width: 100%;
}
.toolbar-actions-right .toolbar-button[data-share] {
width: auto;
}
.toolbar-actions-left .format-tabs {
justify-content: center;
}
.toolbar-actions-left .toolbar-button {
border-radius: 12px;
text-align: center;
}
.toolbar-actions-left .export-control {
display: grid;
}
.export-menu {
position: static;
margin-top: 0.35rem;
width: 100%;
}
.render-settings-grid {
grid-template-columns: 1fr;
}
.snippet-grid {
grid-template-columns: 1fr;
}
.snippet-actions {
flex-wrap: wrap;
}
}