* {box-sizing: border-box;}
body {background: #242423; font-family: Raleway, sans-serif; margin: 0;}

body, a {color: white;}

.Text p, .Text li, .Text td, .Text th {line-height: 150%;}/* Code block styling */
pre {background: #1e1e1e; border-radius: 8px; padding: 1.25rem; overflow-x: auto; margin: 1.5rem 0; position: relative; box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
pre code {font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace; color: #e1e1e1; line-height: 1.5; tab-size: 4;}
pre::before {content: attr(data-language); position: absolute; top: 0; right: 0; padding: 0.3rem 0.75rem; font-size: 0.75rem; background: rgba(255,204,0,0.15); color: #ffcc00; border-bottom-left-radius: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;}

/* Syntax highlighting */
.token.comment, .token.prolog, .token.doctype, .token.cdata {color: #6A9955;}
.token.punctuation {color: #d4d4d4;}
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol {color: #b5cea8;}
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin {color: #ce9178;}
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {color: #d4d4d4;}
.token.atrule, .token.attr-value, .token.keyword {color: #569cd6;}
.token.function {color: #dcdcaa;}
.token.regex, .token.important, .token.variable {color: #d16969;}
.token.important, .token.bold {font-weight: bold;}
.token.italic {font-style: italic;}
.token.namespace {opacity: .8;}

/* Documentation specific elements */
.note {background: rgba(41, 98, 255, 0.1); border-left: 4px solid #2962ff; padding: 1rem; margin: 1.5rem 0; border-radius: 0 4px 4px 0;}
.warning {background: rgba(255, 193, 7, 0.1); border-left: 4px solid #ffc107; padding: 1rem; margin: 1.5rem 0; border-radius: 0 4px 4px 0;}
.error {background: rgba(244, 67, 54, 0.1); border-left: 4px solid #f44336; padding: 1rem; margin: 1.5rem 0; border-radius: 0 4px 4px 0;}
.note::before, .warning::before, .error::before {font-weight: 600; display: block; margin-bottom: 0.5rem;}
.note::before {content: 'Note'; color: #2962ff;}
.warning::before {content: 'Warning'; color: #ffc107;}
.error::before {content: 'Error'; color: #f44336;}

/* API method display */
.api-method {background: rgba(0,0,0,0.2); border-radius: 8px; margin: 2rem 0; overflow: hidden;}
.api-method-header {background: rgba(255,255,255,0.05); padding: 1rem; border-bottom: 1px solid rgba(255,255,255,0.1);}
.api-method-name {font-size: 1.2rem; font-weight: 600; color: #ffffff;}
.api-method-description {margin-top: 0.5rem; color: rgba(255,255,255,0.7);}
.api-method-body {padding: 1rem;}
.api-param {margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed rgba(255,255,255,0.1);}
.api-param:last-child {border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
.api-param-name {font-weight: 600; display: flex; align-items: center;}
.api-param-type {font-size: 0.85rem; background: rgba(255,204,0,0.1); color: #ffcc00; padding: 0.2rem 0.5rem; border-radius: 4px; margin-left: 0.75rem; font-family: 'Fira Code', monospace;}
.api-param-required {font-size: 0.75rem; background: rgba(244,67,54,0.1); color: #f44336; padding: 0.1rem 0.5rem; border-radius: 4px; margin-left: 0.5rem;}
.api-param-optional {font-size: 0.75rem; background: rgba(158,158,158,0.1); color: #9e9e9e; padding: 0.1rem 0.5rem; border-radius: 4px; margin-left: 0.5rem;}
.api-param-description {margin-top: 0.25rem; color: rgba(255,255,255,0.7); font-size: 0.95rem;}

/* Method lifecycle visualization */
.lifecycle-chart {display: flex; margin: 2rem 0; position: relative; padding: 2rem 0;}
.lifecycle-chart::before {content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.1); z-index: 0;}
.lifecycle-step {flex: 1; position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center;}
.lifecycle-dot {width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #121212; border: 2px solid #ffcc00; margin-bottom: 1rem; position: relative;}
.lifecycle-step.completed .lifecycle-dot {background: #ffcc00;}
.lifecycle-step.active .lifecycle-dot {box-shadow: 0 0 0 4px rgba(255,204,0,0.2);}
.lifecycle-label {font-size: 0.85rem; font-weight: 600; max-width: 120px;}
.lifecycle-desc {font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-top: 0.5rem; max-width: 150px;}
* {box-sizing: border-box;}
body {background: #242423; font-family: Raleway, sans-serif; margin: 0;}

body, a {color: white;}

.Text p, .Text li, .Text td, .Text th {line-height: 150%;}nav {padding: 30px 15px; display: flex; justify-content: center; gap: 20px;}
nav a {color: white;}header {padding: 25px; border-bottom: 1px solid rgba(255,255,255,20%); margin-bottom: 60px; display: flex; align-items: center; gap: 25px;}
header div:has(svg) {display: flex;}
header strong {margin-right: 10px;}header {padding: 25px; border-bottom: 1px solid rgba(255,255,255,20%); margin-bottom: 60px; display: flex; align-items: center; gap: 25px;}
header div:has(svg) {display: flex;}
header strong {margin-right: 10px;}footer {padding: 25px; border-top: 1px solid rgba(255,255,255,20%); text-align: center;}
footer a {font-weight: bold;}footer {padding: 25px; border-top: 1px solid rgba(255,255,255,20%); text-align: center;}
footer a {font-weight: bold;}.Articles {max-width: 1200px; margin-left: auto; margin-right: auto; display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; margin-bottom: 60px;}
.Articles article {flex-basis: 300px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px;}
.Articles article a {padding: 25px; display: block; height: 100%; text-decoration: none;}
.Articles article:hover {border-color: white;}
.Articles h2 {margin-top: 0; margin-bottom: 0; font-size: 25px;}

.Articles .Tags, .ArticleDetail .Tags {display: flex; gap: 5px; font-size: 14px; margin-bottom: 8px;}

.ArticleDetail {max-width: 1100px; margin-left: auto; margin-right: auto; margin-bottom: 120px;}
.ArticleDetail h1 {margin-top: 0; margin-bottom: 55px; font-size: 36px;}
.ArticleDetail h2 {font-size: 28px;}
.ArticleDetail {display: grid; grid-template-columns: 250px 1fr; gap: 25px;}
.ArticleDetail .MediaGallery img {max-width: 100%; height: auto;}
.ArticleDetail .MediaGallery .Image {border-radius: 20px; overflow: hidden;}

.ArticlesList > div {margin-bottom: 10px;}
.ArticlesList a {text-decoration: none; font-size: 14px;}
.ArticlesList a:hover {text-decoration: underline;}

.ArticleDetail .ArticlesList h2 {margin-top: 0; margin-bottom: 40px; font-size: 20px;}.Articles {max-width: 1200px; margin-left: auto; margin-right: auto; display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; margin-bottom: 60px;}
.Articles article {flex-basis: 300px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px;}
.Articles article a {padding: 25px; display: block; height: 100%; text-decoration: none;}
.Articles article:hover {border-color: white;}
.Articles h2 {margin-top: 0; margin-bottom: 0; font-size: 25px;}

.Articles .Tags, .ArticleDetail .Tags {display: flex; gap: 5px; font-size: 14px; margin-bottom: 8px;}

.ArticleDetail {max-width: 1100px; margin-left: auto; margin-right: auto; margin-bottom: 120px;}
.ArticleDetail h1 {margin-top: 0; margin-bottom: 55px; font-size: 36px;}
.ArticleDetail h2 {font-size: 28px;}
.ArticleDetail {display: grid; grid-template-columns: 250px 1fr; gap: 25px;}
.ArticleDetail .MediaGallery img {max-width: 100%; height: auto;}
.ArticleDetail .MediaGallery .Image {border-radius: 20px; overflow: hidden;}

.ArticlesList > div {margin-bottom: 10px;}
.ArticlesList a {text-decoration: none; font-size: 14px;}
.ArticlesList a:hover {text-decoration: underline;}

.ArticleDetail .ArticlesList h2 {margin-top: 0; margin-bottom: 40px; font-size: 20px;}