html[data-ui="v3"] body,
html[data-ui="v3"] body *:not(pre, code, kbd, samp, pre *, code *, textarea.editor, .editor, .editor *, .font-mono, .sample, .sample *, .console-output, .test-io, .test-io *) {
    font-family: var(--t-font) !important;
}

html[data-ui="v3"] :is(pre, code, kbd, samp, textarea.editor, .editor, .font-mono) {
    font-family: var(--t-mono) !important;
}

html[data-ui="v3"],
html[data-ui="v3"] body {
    background: radial-gradient(circle at 85% 0, var(--t-bg-glow) 0, transparent 38%), var(--t-bg) !important;
    background-attachment: fixed !important;
}

html[data-ui="v3"] body {
    color: var(--t-text);
}

html[data-ui="v3"] body::before,
html[data-ui="v3"] body.site-standard-background::before {
    display: none !important;
}

html[data-ui="v3"] .site-standard-background {
    --site-background: transparent;
}

html[data-ui="v3"] body.site-standard-background {
    --site-background: radial-gradient(circle at 85% 0, var(--t-bg-glow) 0, transparent 38%), var(--t-bg) !important;
}

html[data-ui="v3"] .site-standard-background .site-standard-surface {
    background: transparent !important;
}

html[data-ui="v3"] .site-standard-background main > .flex:first-child h1,
html[data-ui="v3"] .site-standard-background main > .flex:first-child p {
    color: var(--t-text) !important;
    text-shadow: none !important;
}

html[data-ui="v3"] ::selection {
    background: rgba(194, 65, 12, 0.18);
}

html[data-ui="v3"][data-theme="dark"] ::selection {
    background: rgba(241, 170, 118, 0.3);
}

html[data-ui="v3"] .t-overline,
html[data-ui="v3"] .overline,
html[data-ui="v3"] .eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t-teal);
}

html[data-ui="v3"] :focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.45);
    outline-offset: 2px;
}

html[data-ui="v3"] * {
    scrollbar-color: color-mix(in srgb, var(--t-muted) 45%, transparent) transparent;
}

html[data-ui="v3"] {
    --ui-font: var(--t-font);
    --ui-display-font: var(--t-font);
    --ui-code-font: var(--t-mono);
    --ui-blue-600: var(--t-accent);
    --ui-blue-700: var(--t-accent);
    --ui-blue-50: var(--t-accent-soft);
    --ui-slate-900: var(--t-text);
    --ui-slate-700: var(--t-text);
    --ui-slate-500: var(--t-muted);
    --ui-slate-200: var(--t-line);
    --ui-slate-100: var(--t-panel-2);
    --ui-surface: var(--t-panel);
    --ui-radius-sm: var(--t-radius-sm);
    --ui-radius: var(--t-radius);
    --ui-radius-lg: var(--t-radius-lg);
    --ui-shadow: var(--t-shadow);
}

html[data-ui="v3"] .ui-btn-primary {
    color: var(--t-on-accent) !important;
}