:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #08090d; color: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #08090d; }
a { color: inherit; text-decoration: none; }
body::before, body::after { position: fixed; z-index: 0; width: 32rem; height: 32rem; border-radius: 999px; content: ""; filter: blur(120px); pointer-events: none; }
body::before { top: -12rem; left: -14rem; background: rgb(255 41 66 / 15%); }
body::after { right: -16rem; bottom: -14rem; background: rgb(255 255 255 / 5%); }
.page-shell { position: relative; z-index: 1; width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 1.75rem 0 1rem; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 3rem; padding: .75rem 1rem; border: 1px solid rgb(255 255 255 / 10%); border-radius: 1.5rem; background: rgb(13 14 20 / 82%); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand-mark { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid rgb(255 41 66 / 45%); border-radius: .9rem; background: #111118; color: #ff2942; box-shadow: 0 0 28px rgb(255 41 66 / 20%); }
.logo { width: 1.7rem; height: 1.7rem; }
.brand strong, .brand small { display: block; }
.brand strong { color: rgb(255 255 255 / 78%); font-size: .8rem; letter-spacing: .22em; }
.brand small { margin-top: .12rem; color: rgb(255 255 255 / 42%); font-size: .72rem; }
.site-header nav { display: flex; align-items: center; gap: .25rem; font-size: .86rem; }
.site-header nav a { padding: .65rem .85rem; border-radius: 999px; color: rgb(255 255 255 / 58%); transition: color .18s, background .18s, border-color .18s; }
.site-header nav a:hover, .site-header nav a:focus-visible { color: #fff; }
.site-header nav .active { border: 1px solid rgb(255 255 255 / 13%); background: rgb(255 255 255 / 6%); color: rgb(255 255 255 / 90%); }
.site-header nav .github-link { color: rgb(255 255 255 / 75%); }
.eyebrow { color: #ff7587; font-size: .68rem; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: .85rem 1.15rem; border: 1px solid transparent; border-radius: .9rem; font-weight: 680; transition: transform .18s, background .18s, border-color .18s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: #ff2942; box-shadow: 0 16px 48px rgb(255 41 66 / 24%); }
.button.primary:hover { background: #ff4057; }
.button.secondary { border-color: rgb(255 255 255 / 15%); background: rgb(255 255 255 / 4%); color: rgb(255 255 255 / 82%); }
.button.secondary:hover { border-color: rgb(255 255 255 / 28%); background: rgb(255 255 255 / 8%); }
.redweb-code { min-width: 0; margin: 1.25rem 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 12%); border-radius: 1rem; background: rgb(0 0 0 / 42%); box-shadow: 0 14px 38px rgb(0 0 0 / 35%); }
.redweb-code figcaption { padding: .65rem 1rem; border-bottom: 1px solid rgb(255 255 255 / 9%); color: rgb(255 255 255 / 50%); font-size: .65rem; letter-spacing: .17em; text-transform: uppercase; }
.redweb-code pre { max-width: 100%; margin: 0; overflow-x: auto; padding: 1.15rem; }
.redweb-code code { color: rgb(255 255 255 / 82%); font: .8rem/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; tab-size: 2; }
.token-comment { color: #7dd3fc; font-style: italic; }
.token-keyword { color: #93c5fd; font-weight: 700; }
.token-literal { color: #c4b5fd; }
.token-number { color: #fcd34d; }
.token-string { color: #fca5a5; }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem 0 1rem; color: rgb(255 255 255 / 36%); font-size: .78rem; }
.build-note { margin: 2rem 0 0; color: rgb(255 255 255 / 35%); font-size: .78rem; text-align: center; }
.version-notice { display: flex; flex-wrap: wrap; gap: .75rem; padding: 1rem; margin: -1.5rem 0 2rem; border: 1px solid #6b4f20; border-radius: .8rem; background: #201b13; color: #e8dab9; font-size: .84rem; line-height: 1.6; }
.version-notice a { color: #ffd98a; text-decoration: underline; }
.documentation-links { margin: 2rem 0 3rem; }
.documentation-links > p { color: #b7bdcb; line-height: 1.7; }
.documentation-links > p a { color: #ff8795; text-decoration: underline; }
.recipe-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: .7rem; }
.recipe-links a { display: grid; gap: .6rem; padding: 1rem; border: 1px solid #303441; border-radius: .8rem; background: #12151d; }
.recipe-links a:hover, .recipe-links a:focus-visible { border-color: #ff7587; }
.recipe-links span { color: #b1b8c8; font-size: .85rem; line-height: 1.6; }
.task-guides h2 { margin: .75rem 0; font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.025em; }
.recipe-links .guide-callout { color: #ff8795; font-weight: 650; }
.recipe-files { min-width: 0; margin-top: 1rem; }
.recipe-files summary { color: #b7bdcb; cursor: pointer; line-height: 1.6; }
.recipe-files ul { display: grid; gap: .5rem; padding-left: 1.2rem; overflow-wrap: anywhere; }
.recipe-files a { color: #ff8795; text-underline-offset: .2em; }
.recipe-files a:focus-visible, .recipe-files summary:focus-visible { outline: 2px solid #ff8795; outline-offset: 3px; }
@media (max-width: 680px) { .page-shell { width: min(100% - 1rem, 1180px); padding-top: .5rem; } .site-header { align-items: stretch; flex-direction: column; border-radius: 1rem; } .site-header nav { justify-content: space-between; } .site-header nav a { padding-inline: .5rem; } .site-header nav .github-link { display: none; } .site-footer { align-items: center; flex-direction: column; text-align: center; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }