:root { color-scheme: dark; --app-bg: #09090b; --app-bg-dark: #070708; --app-panel: #17171b; --app-text: #f5f5f5; --app-link-color: #ff704b; --redot-brand: #ff3b0a; --redot-muted: #b0b0b8; --redot-border: #2a2a30; }
* { box-sizing: border-box; }
html { scroll-padding-top: 90px; }
body { margin: 0; background: var(--app-bg); color: var(--app-text); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
a { color: var(--app-link-color); text-underline-offset: .2em; }
a:hover { color: #ff967c; }
:focus-visible { outline: 2px solid #ff967c; outline-offset: 4px; }
img, video { max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
.mud-button { text-transform: none; font-weight: 600; letter-spacing: 0; }
.mud-button-filled-primary { color: #090909; }
.mud-button-outlined { border-color: var(--redot-border); }
.mud-link { color: var(--app-link-color); }
.skip-link { position: fixed; top: -80px; left: 1rem; z-index: 2000; background: var(--redot-brand); color: #090909; padding: .75rem 1rem; border-radius: 6px; }
.skip-link:focus { top: .5rem; }
.docs-appbar { border-bottom: 1px solid #ff3b0a28; }
.docs-appbar .mud-toolbar { gap: 20px; }
.docs-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff !important; font-size: 1.25rem; font-weight: 750; white-space: nowrap; }
.docs-brand strong { color: var(--redot-muted); font-weight: 400; }
.brand-icon { display: inline-block; width: 34px; height: 34px; background: var(--redot-brand); mask: url('/Icons/redot_logo.svg') center/contain no-repeat; flex-shrink: 0; }
.header-links { display: flex; gap: 24px; align-items: center; font-size: .875rem; }
.header-links .mud-link { color: #d0d0d5; }
.header-links .mud-link:hover { color: var(--redot-brand); }
.header-download { margin-left: 8px; }
.docs-drawer { border-right: 1px solid var(--redot-border); }
.docs-nav { padding: 24px 12px; }
.nav-kicker { font-size: .7rem; letter-spacing: .14em; color: var(--redot-muted); padding: 0 12px; margin: 0 0 14px; }
.version-select { margin: 0 8px 20px; }
.docs-nav .mud-nav-link { border-radius: 6px; margin: 2px 0; font-size: .85rem; padding-block: 8px; }
.docs-nav .mud-nav-link.active { color: #ff967c; background: #ff3b0a16; box-shadow: inset 2px 0 var(--redot-brand); }
.docs-nav .mud-nav-link-text { white-space: normal; overflow-wrap: anywhere; }
.docs-nav .mud-nav-group .mud-nav-menu { margin-left: 10px; padding-left: 5px; border-left: 1px solid #ffffff0c; }
.docs-main, .landing-main { min-height: 100vh; display: flex; flex-direction: column; }
.article-container { padding: 36px clamp(20px, 3vw, 54px) 56px; width: 100%; flex: 1; min-width: 0; }
.landing-container { flex: 1; min-width: 0; }
.landing-container > .doc-viewer-content { padding: 48px 24px; }
.doc-viewer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: clamp(24px, 4vw, 64px); max-width: 1260px; margin-inline: auto; align-items: start; }
.doc-viewer-layout:not(:has(.doc-viewer-toc)) { grid-template-columns: minmax(0, 1fr); }
.doc-viewer-content { min-width: 0; width: 100%; max-width: 80ch; margin-inline: auto; font-size: 1rem; line-height: 1.75; overflow-wrap: break-word; }
.doc-viewer-content h1 { font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.15; font-weight: 750; letter-spacing: -.035em; margin: .2rem 0 1.75rem; }
.doc-viewer-content h2 { font-size: 1.6rem; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; margin: 2.5rem 0 1rem; }
.doc-viewer-content h3 { font-size: 1.2rem; font-weight: 650; line-height: 1.4; margin: 2rem 0 .75rem; }
.doc-viewer-content h4 { margin: 1.5rem 0 .5rem; }
.doc-viewer-content p { margin: 0 0 1.2rem; }
.doc-viewer-content ul, .doc-viewer-content ol { padding-left: 1.5rem; margin: 1rem 0 1.5rem; }
.doc-viewer-content li { margin: .35rem 0; }
.doc-viewer-content li > p { margin-bottom: .5rem; }
.doc-viewer-content li > ul { margin-block: .25rem; }
.doc-viewer-content a:not(.mud-button-root) { text-decoration: underline; }
.doc-viewer-content img, .doc-viewer-content video { max-width: 100%; height: auto; border-radius: 6px; }
.doc-viewer-content pre { max-width: 100%; overflow: auto; padding: 20px; margin: 1.25rem 0; border: 1px solid var(--redot-border); border-radius: 10px; background: #121216; font-size: .85rem; line-height: 1.7; }
.doc-viewer-content code { font-family: Consolas, 'Cascadia Code', Menlo, monospace; font-size: .9em; }
.doc-viewer-content :not(pre) > code { color: #ffc2b2; background: #ffffff08; padding: .12em .3em; border-radius: 4px; overflow-wrap: anywhere; }
.doc-viewer-content pre code { background: none; padding: 0; }
.doc-viewer-content table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.5rem 0; font-size: .9rem; }
.doc-viewer-content th, .doc-viewer-content td { padding: .75rem 1rem; border: 1px solid var(--redot-border); text-align: left; }
.doc-viewer-content th { background: var(--app-panel); font-weight: 650; }
.doc-viewer-content blockquote { border-left: 3px solid var(--redot-brand); padding: .5rem 1rem; margin: 1rem 0; color: #c2c2ca; }
.doc-viewer-content hr { border: 0; border-top: 1px solid var(--redot-border); margin: 2rem 0; }
.doc-viewer-toc { position: sticky; top: 96px; border-left: 1px solid var(--redot-border); padding-left: 20px; max-height: calc(100vh - 120px); overflow-y: auto; font-size: .8rem; }
.doc-viewer-toc h4 { text-transform: uppercase; font-size: .7rem; letter-spacing: .12em; margin: 0 0 16px; color: #dedee3; }
.doc-viewer-toc ul { list-style: none; padding: 0; margin: 0; }
.doc-viewer-toc li { margin: 0 0 12px; line-height: 1.5; }
.doc-viewer-toc .toc-level-2 { padding-left: 10px; }
.doc-viewer-toc .toc-level-3 { padding-left: 20px; }
.doc-viewer-toc a { color: var(--redot-muted); text-decoration: none; }
.doc-viewer-toc a:hover { color: #ff967c; }
.mobile-toc { display: none; }
.doc-tabs { margin: 1.5rem 0; border: 1px solid var(--redot-border); border-radius: 10px; overflow: hidden; background: #121216; }
.doc-tab-buttons { display: flex; flex-wrap: wrap; gap: 4px; background: var(--app-panel); border-bottom: 1px solid var(--redot-border); padding: 0 12px; }
.doc-tab-button { border: 0; border-bottom: 2px solid transparent; padding: 12px 16px; background: transparent; color: var(--redot-muted); cursor: pointer; font: inherit; font-size: .85rem; }
.doc-tab-button.active { color: #ff967c; border-bottom-color: var(--redot-brand); }
.doc-tab-button:hover { color: white; }
.doc-tab-panel { display: none; padding: 12px 16px; }
.doc-tab-panel.active { display: block; }
.doc-tab-panel pre { border: 0; padding: 4px; margin: 0; }
[class^='callout-']:is(.callout-tip,.callout-note,.callout-info,.callout-warning,.callout-danger) { display: flex; gap: 16px; align-items: flex-start; border: 1px solid #ffffff12; border-left: 3px solid var(--callout-color); border-radius: 8px; padding: 20px; margin: 1.5rem 0; background: var(--callout-bg); }
.callout-tip { --callout-color: #56c997; --callout-bg: #11231d; }
.callout-note, .callout-info { --callout-color: #87baff; --callout-bg: #141f30; }
.callout-warning { --callout-color: #e8b95b; --callout-bg: #292216; }
.callout-danger { --callout-color: #ef8787; --callout-bg: #2d181b; }
.callout-title { color: var(--callout-color); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.callout-content { min-width: 0; flex: 1; }
.callout-message { color: #dedee5; font-size: .95rem; }
.callout-message p:last-child { margin-bottom: 0; }
.callout-icon-tip,.callout-icon-note,.callout-icon-info,.callout-icon-warning,.callout-icon-danger { flex: 0 0 20px; height: 20px; margin-top: 3px; background: var(--callout-color); mask: url('/Icons/Font-Awesome/solid/info-circle.svg') center/contain no-repeat; }
.callout-icon-warning,.callout-icon-danger { mask-image: url('/Icons/Font-Awesome/solid/exclamation-triangle.svg'); }
.documentation-attribution { border-top: 1px solid var(--redot-border); padding-top: 20px; margin-top: 48px; font-size: .75rem; line-height: 1.65; color: var(--redot-muted); }
.documentation-attribution p { margin: 0 0 12px; }
.site-footer { margin-top: auto; background: #070708; border-top: 1px solid #ff3b0a25; padding: 36px 24px; }
.footer-inner { max-width: 1180px; margin-inline: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; font-size: .8rem; }
.footer-inner nav .mud-link { color: var(--redot-muted); }
.footer-inner p { flex-basis: 100%; color: #9999a3; font-size: .7rem; margin: 0; }
.docs-home h1, .docs-home h2, .docs-home h3 { color: #f5f5f5; font-weight: 750; line-height: 1.15; }
.docs-home h1 { font-size: clamp(2.5rem, 4.3vw, 4.2rem); letter-spacing: -.04em; margin: 20px 0; }
.docs-home h1 span { color: #ff704b; }
.docs-home h2 { font-size: clamp(1.6rem, 2.5vw, 2.15rem); letter-spacing: -.025em; margin: 0 0 16px; }
.docs-home h3 { font-size: 1.1rem; margin: 20px 0 14px; }
.docs-home p { color: var(--redot-muted); line-height: 1.7; }
.home-hero { background: radial-gradient(ellipse at 10% 15%, #ff3b0a16, transparent 58%), linear-gradient(120deg, #141013, #09090b); border-bottom: 1px solid var(--redot-border); padding: clamp(48px, 7vw, 100px) 0; }
.eyebrow { font-size: .7rem; letter-spacing: .12em; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.brand-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--redot-brand); box-shadow: 0 0 0 5px #ff3b0a15; }
.home-lede { max-width: 32rem; font-size: 1.05rem; }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.home-actions .mud-button { padding: 13px 22px; }
.hero-preview { overflow: hidden; border: 1px solid #ffffff18; border-radius: 14px; box-shadow: 0 24px 80px #0007; transform: perspective(1400px) rotateY(-4deg); }
.preview-bar { display: flex; justify-content: space-between; background: #202026; padding: 10px 14px; font-size: .6rem; letter-spacing: .05em; color: #909099; }
.preview-bar > span:first-child { color: var(--redot-brand); }
.preview-bar > span:first-child span { color: #55555c; }
.hero-preview img { display: block; width: 100%; height: auto; }
.preview-caption { padding: 10px 14px; font-size: .75rem; color: #bcbcc5; background: #111114; }
.home-sections { padding-top: 56px; padding-bottom: 48px; }
.section-heading { display: flex; justify-content: space-between; gap: 32px; align-items: start; margin-bottom: 28px; }
.section-heading p { font-size: .85rem; max-width: 310px; }
.entry-card { border: 1px solid var(--redot-border); background: #17171b; height: 100%; display: flex; flex-direction: column; transition: border-color .18s, transform .18s; }
.entry-card:hover { border-color: #ff3b0a66; transform: translateY(-3px); }
.entry-card .mud-card-content { padding: 24px 22px 12px; flex: 1; }
.entry-card p { font-size: .86rem; }
.entry-card .mud-card-actions { padding: 8px 14px 18px; }
.entry-card .mud-button { font-size: .8rem; }
.entry-icon { display: inline-flex; color: var(--redot-brand); background: #ff3b0a12; padding: 10px; border-radius: 10px; }
.topic-band { display: grid; grid-template-columns: 1fr 1.35fr; gap: 48px; padding: 36px 0; margin-top: 48px; border-block: 1px solid var(--redot-border); align-items: center; }
.topic-band p { font-size: .85rem; }
.topic-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.topic-link { background: #17171b; justify-content: space-between; font-size: .75rem; padding: 12px; text-align: left; }
.topic-link .mud-button-icon-end { color: #777780; }
.lookup-section { padding: 64px 0 12px; }
.lookup-section p { font-size: .95rem; }
.lookup-section .eyebrow { font-size: .65rem; margin-bottom: 16px; }
.lookup-preview { overflow: hidden; border: 1px solid var(--redot-border); }
.lookup-preview img { display: block; width: 100%; }
.lookup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.lookup-actions .mud-button { font-size: .75rem; padding: 10px 14px; }
.class-doc-viewer, .class-index { max-width: 1000px; }
.class-search-field { max-width: 36rem; margin: 20px 0 32px; }
@media (max-width: 1250px) { .doc-viewer-layout { grid-template-columns: minmax(0,1fr); } .desktop-toc { display: none; } .mobile-toc { display: block; margin-bottom: 24px; } .mobile-toc .doc-viewer-toc { position: static; max-height: 320px; border: 0; padding: 0; } }
@media (max-width: 959px) { .header-links { gap: 12px; } .hero-preview { transform: none; } .topic-band { grid-template-columns: 1fr; gap: 20px; } .article-container { padding: 24px 20px 40px; } .footer-inner nav { margin-left: 0; } }
@media (max-width: 599px) { .docs-appbar .mud-toolbar { gap: 8px; padding-inline: 12px; } .header-links { display: none; } .docs-brand { font-size: 1.05rem; gap: 8px; } .brand-icon { width: 28px; height: 28px; } .section-heading { display: block; } .home-hero { padding: 40px 0; } .home-sections { padding-top: 36px; } .topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .topic-band { margin-top: 32px; } .home-actions .mud-button { flex-grow: 1; } .lookup-section { padding-top: 40px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; } }
.class-reference-header {
    border-bottom: 1px solid #333;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

.class-reference-kicker {
    color: #aaa;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: -1.5rem;
    text-transform: uppercase;
}

.class-inheritance,
.class-api-meta,
.class-reference-source {
    color: #bbb;
}

.class-brief {
    font-size: 1.12rem;
    line-height: 1.7;
}

.class-api-list {
    display: grid;
    gap: 1rem;
}

.class-api-item {
    background: var(--app-panel);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 0 1rem 0.75rem;
}

.class-api-item h3 {
    font-size: 1rem;
    margin: 1rem 0;
    overflow-wrap: anywhere;
}

.class-status {
    border-left: 4px solid #d19a40;
    margin: 0.75rem 0;
    padding: 0.7rem 0.9rem;
}

.class-status p {
    display: inline;
}

.class-status-deprecated {
    background: #402626;
    border-left-color: #e06c75;
}

.class-status-experimental,
.class-status-warning {
    background: #3d351e;
}

.class-reference-source {
    border-top: 1px solid #333;
    margin-top: 3rem;
    padding-top: 1rem;
}

.class-text-center {
    display: block;
    text-align: center;
}

.class-search {
    background: var(--app-panel);
    border: 1px solid #555;
    border-radius: 5px;
    color: var(--app-text);
    display: block;
    margin: 0.5rem 0 2rem;
    max-width: 34rem;
    padding: 0.7rem 0.9rem;
    width: 100%;
}

.class-index-group h2 {
    border-bottom: 1px solid #333;
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
}

.class-index-list {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
    list-style: none;
    padding: 0;
}

.class-index-list li {
    background: var(--app-panel);
    border-radius: 5px;
    margin: 0;
    padding: 0.75rem;
}

.class-index-list span {
    color: #bbb;
    display: block;
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.doc-viewer-layout:not(:has(.desktop-toc)) { grid-template-columns: minmax(0,1fr); }
.desktop-toc { position: sticky; top: 96px; }
.doc-viewer-content .class-index-list { padding: 0; list-style: none; }
.class-reference-kicker { margin-bottom: 1rem; }

h1[tabindex="-1"]:focus { outline: none; }
.status-page { padding-block: 48px; }
.request-id { margin-top: 20px; }
.article-container > h1 { font-size: 2.5rem; font-weight: 750; margin-bottom: 24px; }
.mobile-toc .doc-viewer-toc h4 { display: none; }

/* Keep search centered independently of the different widths on either side. */
.docs-appbar .mud-toolbar { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,480px) minmax(0,1fr); gap: 24px; }
.header-brand-group,.header-website-group { display:flex; align-items:center; gap:16px; }
.header-website-group { justify-content:flex-end; }
.header-search { width:100%; border-color:#38383e!important; background:#19191d; color:#bdbdc5!important; text-transform:none; }
.header-search .mud-button-label { display:flex; width:100%; gap:12px; }
.header-search kbd { margin-left:auto; font-size:11px; white-space:nowrap; }
.search-filters { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:12px 0; }
.search-status { color:#b0b0b0; margin:16px 0; }
.search-results { display:grid; gap:8px; }
.search-result { display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid #303038; border-radius:10px; color:#dedee3; text-decoration:none; }
.search-result:hover,.search-result.selected { background:#242026; border-color:#ff3b0a; }
.search-result strong { color:#fff; }
.search-result-kind { font-size:12px; color:#b0b0b0; overflow-wrap:anywhere; }
.search-result mark { color:#ffd0c4; background:#642515; }
.search-page { max-width:960px; margin:auto; padding:48px 24px; }
@media(max-width:1250px) {
 .docs-appbar .mud-toolbar { grid-template-columns:auto minmax(40px,1fr) auto; gap:16px; }
 .header-search { max-width:360px; justify-self:center; }
 .header-search kbd { display:none; }
}
@media(max-width:950px) {
 .header-search { width:44px; min-width:44px; justify-self:end; padding:8px; }
 .header-search .search-placeholder { display:none; }
 .header-search .mud-button-label { justify-content:center; }
 .header-brand-group,.header-website-group { gap:8px; }
}
@media(max-width:600px) {
 .docs-appbar .mud-toolbar { gap:8px; padding:0 12px; }
 .search-filters { gap:8px; }
}

@media(max-width:360px) { .header-website-group { display:none; } .docs-appbar .mud-toolbar { grid-template-columns:1fr auto; } }

/* Search keeps its geometry while requests and result counts change. */
.documentation-search-dialog { height:min(720px,calc(var(--search-viewport-height,100dvh) - 64px)); max-height:calc(var(--search-viewport-height,100dvh) - 64px)!important; }
.documentation-search-dialog .mud-dialog-content { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.documentation-search-dialog .search-panel { display:flex; flex-direction:column; height:100%; min-height:0; }
.search-panel > .search-query,.search-panel > .search-filters,.search-panel > .search-status,.search-panel > .search-actions { flex:none; }
.search-status { display:flex; align-items:center; gap:12px; height:3rem; font-size:14px; }
.search-summary { flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.search-loading { flex:none; font-size:12px; }
.search-announcement { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.search-result-region { min-height:0; overflow-y:auto; scrollbar-gutter:stable; overflow-anchor:none; }
.documentation-search-dialog .search-result-region { flex:1; }
.search-page .search-result-region { min-height:20rem; max-height:70dvh; }
.search-actions { height:48px; padding-top:8px; }
@media(max-width:600px) {
 .documentation-search-dialog { height:var(--search-viewport-height,100dvh); max-height:var(--search-viewport-height,100dvh)!important; }
 .documentation-search-dialog .mud-dialog-title { padding-block:12px; }
 .documentation-search-dialog .search-status { margin:8px 0; }
}