.about_text {
    color: light-dark(#606570, #aab5c5);
    line-height: 1.75;
}

.account_check_label {
    align-items: center;
    display: flex;
    font-size: .78rem;
    font-weight: 700;
    color: light-dark(#5c626d,#aab6c5);
    gap: 8px;
}

.account_checkbox {
    height: 16px;
    width: 16px;
}

.account_eyebrow {
    font-size: .70rem;
    font-weight: 900;
    color: light-dark(#4f53d4,#73e7ff);
    letter-spacing: .14em;
    margin: 0;
}

.account_field_grid {
    display: grid;
    gap: 13px;
    grid-template-columns: repeat(2,minmax(0,1fr));
}

.account_form {
    display: grid;
    gap: 17px;
}

.account_form_footer {
    align-items: center;
    border-top: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.08));
    display: flex;
    font-size: .80rem;
    color: light-dark(#6c727d,#98a5b5);
    gap: 7px;
    justify-content: center;
    padding-top: 18px;
}

.account_form_header {
    display: grid;
    gap: 8px;
}

.account_form_panel {
    align-content: center;
    background-color: light-dark(#ffffff,#0d121a);
    display: grid;
    gap: 26px;
    padding: clamp(30px,5vw,60px);
}

.account_form_row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
}

.account_form_text {
    color: light-dark(#6a707b,#9eabbc);
    line-height: 1.62;
    margin: 0;
}

.account_form_title {
    font-size: clamp(2rem,4vw,3rem);
    color: light-dark(#181c24,#f8fbff);
    letter-spacing: -.04em;
    line-height: 1.06;
    margin: 0;
}

.account_identity_core {
    font-size: 2.2rem;
    font-weight: 950;
    color: #ffffff;
    letter-spacing: -.05em;
}

.account_identity_label {
    font-size: .64rem;
    font-weight: 900;
    color: #74e8ff;
    letter-spacing: .16em;
    margin-top: -46px;
}

.account_identity_mark {
    background: radial-gradient(circle,rgba(110,231,255,.17),rgba(255,255,255,.04) 58%,transparent 60%);
    border: 1px solid rgba(255,255,255,.12);
    display: grid;
    height: 170px;
    margin-top: 18px;
    place-items: center;
    border-radius: 50%;
    width: 170px;
}

.account_input {
    background-color: light-dark(#f7f8fa,#111722);
    border: 1px solid light-dark(rgba(32,36,45,.14),rgba(255,255,255,.11));
    box-sizing: border-box;
    font-size: .92rem;
    color: light-dark(#171a21,#f6f9fc);
    padding: 13px 14px;
    border-radius: 9px;
    width: 100%;
}

.account_intro {
    align-content: center;
    background: radial-gradient(circle at 18% 14%,rgba(110,231,255,.18),transparent 30%),linear-gradient(145deg,#151c2b,#252f5e 60%,#101722);
    display: grid;
    color: #ffffff;
    gap: 22px;
    padding: clamp(36px,6vw,72px);
}

.account_intro_create {
    background: radial-gradient(circle at 78% 18%,rgba(110,231,255,.18),transparent 28%),linear-gradient(145deg,#111824,#29316d 62%,#141b29);
}

.account_intro_text {
    font-size: 1rem;
    color: #bac6d7;
    line-height: 1.72;
    margin: 0;
    max-width: 610px;
}

.account_intro_title {
    font-size: clamp(2.8rem,5vw,5rem);
    color: #ffffff;
    letter-spacing: -.055em;
    line-height: 1;
    margin: 0;
    max-width: 650px;
}

.account_label {
    display: grid;
    font-size: .78rem;
    font-weight: 850;
    color: light-dark(#343943,#e6edf5);
    gap: 8px;
}

.account_page {
    display: grid;
    margin: 34px auto 0;
    padding-bottom: 58px;
    width: min(1180px, calc(100% - 28px));
}

.account_point {
    background-color: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    display: grid;
    gap: 12px;
    grid-template-columns: 34px minmax(0,1fr);
    padding: 14px;
    border-radius: 11px;
}

.account_point_index {
    background-color: rgba(110,231,255,.12);
    display: grid;
    font-size: .66rem;
    font-weight: 900;
    color: #78e9ff;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    width: 30px;
}

.account_point_text {
    font-size: .83rem;
    color: #aebacc;
    line-height: 1.52;
    margin: 0;
}

.account_point_title {
    font-size: .92rem;
    color: #ffffff;
    margin: 0 0 4px;
}

.account_points {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.account_recovery_header {
    text-align: center;
}

.account_recovery_mark {
    background: linear-gradient(135deg,#5b5ee8,#43c7ed);
    display: grid;
    font-size: 1.8rem;
    font-weight: 900;
    color: #ffffff;
    height: 62px;
    margin: 0 auto;
    place-items: center;
    border-radius: 18px;
    width: 62px;
}

.account_recovery_panel {
    border: 1px solid light-dark(rgba(32,36,45,.11),rgba(255,255,255,.09));
    box-sizing: border-box;
    padding: clamp(30px,6vw,56px);
    border-radius: 18px;
    box-shadow: 0 24px 65px light-dark(rgba(32,36,45,.09),rgba(0,0,0,.24));
    width: min(520px,100%);
}

.account_recovery_shell {
    background: radial-gradient(circle at 50% 10%,light-dark(rgba(91,94,232,.14),rgba(110,231,255,.10)),transparent 34%),light-dark(#f8f9fb,#0b1119);
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    min-height: 630px;
    padding: 26px;
    place-items: center;
    border-radius: 22px;
}

.account_shell {
    background-color: light-dark(#ffffff,#0d121a);
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
    min-height: 650px;
    overflow: hidden;
    border-radius: 22px;
    box-shadow: 0 28px 80px light-dark(rgba(32,36,45,.10),rgba(0,0,0,.28));
}

.account_submit {
    background: linear-gradient(135deg,#5b5ee8,#43c7ed);
    border: 1px solid transparent;
    box-sizing: border-box;
    cursor: pointer;
    font-size: .90rem;
    font-weight: 900;
    color: #ffffff;
    padding: 14px 18px;
    border-radius: 9px;
    width: 100%;
}

.account_terms {
    line-height: 1.5;
}

.account_text_link {
    font-size: .79rem;
    font-weight: 900;
    color: light-dark(#4e53d5,#73e8ff);
    text-decoration: none;
}

.app_page {
    background-color: light-dark(#f6f7f9, #07090d);
    color-scheme: light dark;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: light-dark(#1d2430, #eaf0f7);
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

.architecture_flow {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-top: 22px;
}

.architecture_panel {
    align-items: start;
    background-color: light-dark(#eef2f6, #121823);
    border: 1px solid light-dark(rgba(29, 36, 48, 0.09), rgba(255, 255, 255, 0.075));
    display: grid;
    padding: 24px;
    border-radius: 16px;
}

.blog_bottom_grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2,minmax(0,1fr));
}

.blog_card {
    align-content: space-between;
    background-color: light-dark(#ffffff,#0e141d);
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    gap: 18px;
    min-height: 260px;
    padding: 24px;
    border-radius: 19px;
    box-shadow: 0 18px 48px light-dark(rgba(32,36,45,.06),rgba(0,0,0,.18));
}

.blog_card_accent {
    background: linear-gradient(135deg,light-dark(#eef0ff,#111a2a),light-dark(#eaf9fc,#0b151d));
    grid-column: span 12;
    min-height: 230px;
}

.blog_card_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog_card_compact {
    grid-column: span 4;
    min-height: 250px;
}

.blog_card_date {
    font-size: .72rem;
    font-weight: 850;
    color: light-dark(#858b96,#7f8b9c);
}

.blog_card_footer {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.blog_card_index {
    font-size: .72rem;
    font-weight: 900;
    color: light-dark(#a5aab4,#637083);
}

.blog_card_large {
    background: radial-gradient(circle at 90% 10%,light-dark(rgba(91,94,232,.18),rgba(110,231,255,.12)),transparent 36%),light-dark(#ffffff,#0e141d);
    grid-column: span 7;
    min-height: 410px;
}

.blog_card_link {
    font-weight: 900;
    color: light-dark(#4d50cf,#78e9ff);
    text-decoration: none;
}

.blog_card_quote {
    background-color: light-dark(#f1f3f7,#131b27);
    border-left: 3px solid light-dark(#5b5ee8,#6ee7ff);
    font-weight: 700;
    color: light-dark(#3d424c,#dce6f1);
    line-height: 1.6;
    padding: 18px;
    border-radius: 12px;
}

.blog_card_tag {
    background-color: light-dark(rgba(91,94,232,.10),rgba(110,231,255,.10));
    font-size: .66rem;
    font-weight: 900;
    color: light-dark(#4d50cf,#78e9ff);
    letter-spacing: .08em;
    padding: 6px 8px;
    border-radius: 7px;
}

.blog_card_tall {
    grid-column: span 5;
    grid-row: span 2;
    min-height: 520px;
}

.blog_card_text {
    color: light-dark(#656b76,#aab6c6);
    line-height: 1.68;
    margin: 0;
}

.blog_card_title {
    font-size: clamp(1.45rem,3vw,2.2rem);
    color: light-dark(#1c2028,#f6f9fd);
    letter-spacing: -.03em;
    line-height: 1.08;
    margin: 0;
}

.blog_card_title_large {
    font-size: clamp(2.4rem,5vw,4.6rem);
    color: light-dark(#181b22,#ffffff);
    letter-spacing: -.05em;
    line-height: 1;
    margin: 0;
    max-width: 720px;
}

.blog_card_top {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.blog_card_wide {
    grid-column: span 8;
    min-height: 300px;
}

.blog_eyebrow {
    font-size: .72rem;
    font-weight: 900;
    color: light-dark(#4f53d4,#73e7ff);
    letter-spacing: .14em;
    margin: 0;
}

.blog_featured {
    align-content: space-between;
    background: linear-gradient(160deg,light-dark(#1b2030,#121a27),light-dark(#2c3470,#071018));
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    gap: 24px;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 28px 70px rgba(0,0,0,.20);
}

.blog_featured_category {
    font-size: .7rem;
    font-weight: 900;
    color: #7ee9ff;
    letter-spacing: .12em;
}

.blog_featured_date {
    font-size: .75rem;
    font-weight: 850;
    color: #8f9daf;
}

.blog_featured_footer {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.blog_featured_link {
    font-weight: 900;
    color: #78e9ff;
    text-decoration: none;
}

.blog_featured_meta {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.blog_featured_text {
    color: #b9c5d5;
    line-height: 1.7;
    margin: 0;
}

.blog_featured_time {
    font-size: .72rem;
    font-weight: 850;
    color: #b7c4d5;
}

.blog_featured_title {
    font-size: clamp(2rem,4vw,3.5rem);
    color: #ffffff;
    letter-spacing: -.04em;
    line-height: 1.04;
    margin: 0;
}

.blog_feed {
    display: grid;
    gap: 20px;
    padding: 12px 0;
}

.blog_hero {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    min-height: 520px;
}

.blog_hero_actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.blog_hero_copy {
    align-content: center;
    background: radial-gradient(circle at 85% 15%, light-dark(rgba(91,94,232,.16),rgba(110,231,255,.12)), transparent 34%), light-dark(#ffffff,#0d121a);
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    gap: 20px;
    padding: clamp(34px, 6vw, 76px);
    border-radius: 24px;
}

.blog_hero_text {
    font-size: clamp(1rem,2vw,1.18rem);
    color: light-dark(#626874,#aab6c6);
    line-height: 1.75;
    margin: 0;
    max-width: 720px;
}

.blog_hero_title {
    font-size: clamp(3rem,7vw,6.4rem);
    color: light-dark(#171a21,#ffffff);
    letter-spacing: -.055em;
    line-height: .98;
    margin: 0;
    max-width: 880px;
}

.blog_info_link {
    background-color: light-dark(rgba(91,94,232,.09),rgba(255,255,255,.09));
    font-weight: 850;
    color: light-dark(#4549c7,#ffffff);
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
}

.blog_info_links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog_info_panel {
    background-color: light-dark(#ffffff,#0e141d);
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    gap: 14px;
    padding: 28px;
    border-radius: 19px;
}

.blog_info_panel_dark {
    background: light-dark(linear-gradient(145deg,#eef1f8,#e7edf7),linear-gradient(145deg,#20263a,#101827));
}

.blog_info_text {
    color: light-dark(#656b76,#aab6c6);
    line-height: 1.7;
    margin: 0;
}

.blog_info_title {
    font-size: clamp(1.7rem,3vw,2.6rem);
    color: light-dark(#1b1f27,#f7fbff);
    letter-spacing: -.035em;
    margin: 0;
}

.blog_masonry {
    display: grid;
    gap: 14px;
    grid-auto-flow: dense;
    grid-template-columns: repeat(12,minmax(0,1fr));
}

.blog_page {
    display: grid;
    gap: 30px;
    margin: 28px auto 0;
    padding-bottom: 56px;
    width: min(1240px, calc(100% - 28px));
}

.blog_primary_action {
    background: linear-gradient(135deg,#5b5ee8,#43c7ed);
    font-weight: 850;
    color: #ffffff;
    padding: 13px 18px;
    border-radius: 10px;
    text-decoration: none;
}

.blog_secondary_action {
    background-color: light-dark(#f7f8fa,#121925);
    border: 1px solid light-dark(rgba(32,36,45,.14),rgba(255,255,255,.12));
    font-weight: 800;
    color: light-dark(#252a34,#eef4fb);
    padding: 12px 17px;
    border-radius: 10px;
    text-decoration: none;
}

.blog_section_heading {
    align-items: end;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.blog_section_link {
    font-weight: 850;
    color: light-dark(#4f53d4,#73e7ff);
    text-decoration: none;
}

.blog_section_title {
    font-size: clamp(2rem,4vw,3.3rem);
    color: light-dark(#181b22,#f8fbff);
    letter-spacing: -.04em;
    margin: 4px 0 0;
}

.blog_small_action {
    background-color: light-dark(#ffffff,#111925);
    border: 1px solid light-dark(rgba(32,36,45,.12),rgba(255,255,255,.10));
    font-weight: 850;
    color: light-dark(#30353f,#edf3fa);
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
}

.blog_structure_arrow {
    color: light-dark(#5b5ee8,#6ee7ff);
}

.blog_structure_line {
    align-items: center;
    background-color: light-dark(#f0f2f6,#080c12);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px;
    border-radius: 11px;
}

.blog_structure_node {
    font-size: .72rem;
    font-weight: 900;
    color: light-dark(#303640,#e9f1fa);
    letter-spacing: .08em;
}

.blog_topic {
    background-color: light-dark(#eef1f5,#151c27);
    font-size: .78rem;
    font-weight: 800;
    color: light-dark(#343943,#dce5ef);
    padding: 8px 11px;
    border-radius: 999px;
    text-decoration: none;
}

.blog_topics {
    align-items: center;
    background-color: light-dark(#ffffff,#0d121a);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 14px;
    border-radius: 15px;
}

.blog_topics_label {
    font-size: .67rem;
    font-weight: 900;
    color: light-dark(#777d88,#8d9aab);
    letter-spacing: .12em;
    padding: 8px 10px;
}

.brand_block {
    display: grid;
    gap: 2px;
}

.brand_subtitle {
    font-size: 0.72rem;
    font-weight: 700;
    color: light-dark(#737782, #8f9bad);
    letter-spacing: 0.10em;
    margin: 0;
    text-transform: uppercase;
}

.brand_title {
    font-size: clamp(1.2rem, 4vw, 1.75rem);
    font-weight: 900;
    color: light-dark(#171a21, #ffffff);
    letter-spacing: 0.14em;
    margin: 0;
}

.capability_console {
    display: grid;
    gap: 18px;
    padding: 24px 0;
}

.capability_grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.capability_heading {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.capability_item {
    background-color: light-dark(#ffffff, #0f141d);
    border: 1px solid light-dark(rgba(32, 36, 45, 0.09), rgba(255, 255, 255, 0.08));
    padding: 20px;
    border-radius: 13px;
}

.capability_meter {
    background-color: light-dark(#5b5ee8, #6ee7ff);
    height: 4px;
    border-radius: 999px;
}

.capability_state {
    background-color: light-dark(rgba(91, 94, 232, 0.10), rgba(110, 231, 255, 0.10));
    font-size: 0.68rem;
    font-weight: 900;
    color: light-dark(#4d50cf, #7deaff);
    padding: 5px 7px;
    border-radius: 6px;
}

.capability_text {
    color: light-dark(#6a6f79, #a5b0c0);
    line-height: 1.65;
    margin: 12px 0 18px;
}

.capability_title {
    color: light-dark(#22262e, #f2f5f9);
    margin: 0;
}

.code_line {
    display: block;
    min-height: 1.7em;
}

.command_code {
    color: light-dark(#f4f6fb, #dffaff);
    overflow-x: auto;
}

.command_line {
    align-items: center;
    background-color: light-dark(#171c27, #020406);
    border: 1px solid light-dark(rgba(32, 36, 45, 0.14), rgba(101, 221, 255, 0.12));
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 30px 0 0;
    padding: 13px 15px;
    border-radius: 9px;
}

.command_panel {
    border: 1px solid light-dark(rgba(32, 36, 45, 0.08), rgba(255, 255, 255, 0.07));
    padding: clamp(30px, 5vw, 68px);
}

.command_prompt {
    font-weight: 900;
    color: light-dark(#8a8cff, #6ee7ff);
}

.command_text {
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    color: light-dark(#656a74, #aab5c5);
    line-height: 1.75;
    margin: 0;
    max-width: 760px;
}

.command_title {
    font-size: clamp(2.15rem, 6vw, 4.55rem);
    color: light-dark(#171a21, #ffffff);
    letter-spacing: -0.05em;
    line-height: 1.01;
    margin: 0 0 22px;
}

.component_error {
    border-color: rgba(255,92,122,.28);
}

.component_route {
    background: linear-gradient(145deg, light-dark(#ffffff,#0c1119), light-dark(#eef0ff,#101a28));
}

.component_state {
    background: radial-gradient(circle at 75% 20%, rgba(101,221,255,.14), transparent 42%), light-dark(#ffffff,#0c1119);
}

.component_symbol {
    font-size: 2rem;
    color: light-dark(#5b5ee8,#6ee7ff);
}

.component_system {
    border-color: rgba(77,230,164,.25);
}

.component_tile {
    align-content: space-between;
    background-color: light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    gap: 14px;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 18px 50px light-dark(rgba(32,36,45,.06),rgba(0,0,0,.20));
}

.component_tile_tall {
    grid-row: span 2;
}

.component_tile_wide {
    grid-column: span 2;
}

.components_bento {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(3,minmax(170px,auto));
}

.components_intro {
    display: grid;
    gap: 10px;
    max-width: 760px;
}

.components_kicker {
    font-size: .72rem;
    font-weight: 900;
    color: light-dark(#5b5ee8,#6ee7ff);
    letter-spacing: .18em;
}

.components_page {
    display: grid;
    gap: 30px;
    margin: 0 auto;
    padding: 58px 0 78px;
    width: min(1240px, calc(100% - 28px));
}

.components_subtitle {
    font-size: 1.15rem;
    color: light-dark(#687080,#98a5b8);
    margin: 0;
}

.components_title {
    font-size: clamp(3.5rem,10vw,7rem);
    letter-spacing: -.06em;
    line-height: .9;
    margin: 0;
}

.contact_form {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.d2_action_meta {
    font-size: .68rem;
    font-weight: 900;
    color: light-dark(#737b8a,#7f8da0);
    letter-spacing: .14em;
}

.d2_action_primary {
    background: linear-gradient(135deg,#5b5ee8,#43c7ed);
    font-weight: 900;
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
}

.d2_actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 4px;
}

.d2_arch {
    align-items: center;
    background: radial-gradient(circle at 86% 45%,rgba(91,94,232,.12),transparent 32%),light-dark(#ffffff,#0a0f17);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(0,1fr) minmax(340px,.72fr);
    padding: 54px;
    border-radius: 26px;
}

.d2_arch_copy {
    display: grid;
    gap: 15px;
}

.d2_bento {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(12,minmax(0,1fr));
}

.d2_check {
    align-content: start;
    background-color: light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 10px;
    min-height: 200px;
    padding: 24px;
    border-radius: 16px;
}

.d2_check_accent {
    background: radial-gradient(circle at 90% 10%,rgba(101,221,255,.13),transparent 35%),light-dark(#ffffff,#0c1119);
}

.d2_check_grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.d2_check_icon {
    background-color: light-dark(rgba(91,94,232,.10),rgba(101,221,255,.10));
    display: grid;
    font-size: .66rem;
    font-weight: 1000;
    color: light-dark(#5155d6,#6ee7ff);
    height: 42px;
    place-items: center;
    border-radius: 12px;
    width: 42px;
}

.d2_check_text {
    font-size: .87rem;
    color: light-dark(#6c7482,#92a1b4);
    line-height: 1.65;
    margin: 0;
}

.d2_check_title {
    font-size: 1.22rem;
    color: light-dark(#1c222c,#f4f7fb);
    margin: 6px 0 0;
}

.d2_checks {
    display: grid;
    gap: 22px;
    padding: 38px 0;
}

.d2_closing {
    align-content: center;
    background: radial-gradient(circle at 50% 115%,rgba(101,221,255,.16),transparent 45%),light-dark(#ffffff,#080c12);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 18px;
    min-height: 430px;
    padding: 48px;
    place-items: center;
    border-radius: 28px;
    text-align: center;
}

.d2_closing_flow {
    display: flex;
    flex-wrap: wrap;
    font-size: .70rem;
    font-weight: 1000;
    color: light-dark(#5155d6,#6ee7ff);
    gap: 12px;
    justify-content: center;
    letter-spacing: .12em;
    margin-top: 12px;
}

.d2_closing_title {
    font-size: clamp(2.8rem,5.8vw,5.6rem);
    color: light-dark(#151a23,#ffffff);
    letter-spacing: -.055em;
    line-height: .96;
    margin: 0;
    max-width: 980px;
}

.d2_core {
    aspect-ratio: 1;
    background: radial-gradient(circle at 35% 28%,#c8f8ff 0%,#43c7ed 15%,rgba(43,117,207,.78) 42%,rgba(16,23,38,.18) 70%);
    border: 1px solid rgba(126,232,255,.42);
    bottom: 6%;
    display: grid;
    place-items: center;
    position: absolute;
    border-radius: 50%;
    right: 7%;
    box-shadow: 0 0 60px rgba(67,199,237,.34);
    width: 78px;
    z-index: 6;
}

.d2_core_letter {
    font-size: 1.9rem;
    font-weight: 1000;
    color: #ffffff;
}

.d2_core_text {
    bottom: -25px;
    font-size: .60rem;
    font-weight: 1000;
    color: #86eafa;
    letter-spacing: .18em;
    position: absolute;
}

.d2_future {
    background: linear-gradient(135deg,light-dark(#f2f3fa,#0b1019),light-dark(#eef8fb,#111a2c));
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    grid-template-columns: minmax(330px,.82fr) minmax(0,1.18fr);
    min-height: 680px;
    overflow: hidden;
    border-radius: 28px;
}

.d2_future_art {
    background: radial-gradient(circle,rgba(101,221,255,.14),transparent 55%);
    display: grid;
    overflow: hidden;
    place-items: center;
    position: relative;
}

.d2_future_copy {
    align-content: center;
    display: grid;
    gap: 18px;
    padding: clamp(34px,5vw,74px);
}

.d2_future_title {
    font-size: clamp(2.8rem,5.2vw,5.2rem);
    color: light-dark(#151a23,#ffffff);
    letter-spacing: -.055em;
    line-height: .97;
    margin: 0;
    max-width: 760px;
}

.d2_hero {
    background: radial-gradient(circle at 83% 20%,rgba(101,221,255,.18),transparent 30%),radial-gradient(circle at 68% 78%,rgba(91,94,232,.14),transparent 34%),light-dark(#ffffff,#080c12);
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    gap: 26px;
    grid-template-columns: minmax(0,.92fr) minmax(430px,1.08fr);
    grid-template-rows: 1fr auto;
    min-height: 690px;
    overflow: hidden;
    padding: clamp(34px,5vw,70px);
    position: relative;
    border-radius: 30px;
    box-shadow: 0 38px 100px light-dark(rgba(32,36,45,.10),rgba(0,0,0,.42));
}

.d2_hero_art {
    display: grid;
    min-height: 540px;
    place-items: center;
    position: relative;
    transform: translateX(2%);
}

.d2_hero_copy {
    align-content: center;
    display: grid;
    gap: 18px;
    position: relative;
    z-index: 5;
}

.d2_hero_strip {
    backdrop-filter: blur(12px);
    background-color: light-dark(rgba(255,255,255,.78),rgba(9,14,22,.78));
    border: 1px solid light-dark(rgba(32,36,45,.08),rgba(255,255,255,.07));
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4,1fr);
    overflow: hidden;
    border-radius: 16px;
    z-index: 7;
}

.d2_hero_text {
    font-size: clamp(1rem,1.4vw,1.17rem);
    color: light-dark(#687181,#9ba8ba);
    line-height: 1.72;
    margin: 0;
    max-width: 760px;
}

.d2_hero_title {
    font-size: clamp(3.2rem,6.1vw,6.2rem);
    color: light-dark(#11151d,#ffffff);
    letter-spacing: -.06em;
    line-height: .94;
    margin: 0;
    max-width: 760px;
}

.d2_intro {
    align-items: end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding: 38px 2px 8px;
}

.d2_kicker {
    font-size: .70rem;
    font-weight: 1000;
    color: light-dark(#5155d6,#6ee7ff);
    letter-spacing: .17em;
    margin: 0;
}

.d2_kicker_dark {
    color: #78eaff;
}

.d2_matrix {
    border-top: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    margin-top: 8px;
}

.d2_matrix_key {
    font-size: .75rem;
    font-weight: 800;
    color: light-dark(#79818f,#8290a4);
}

.d2_matrix_row {
    border-bottom: 1px solid light-dark(rgba(32,36,45,.075),rgba(255,255,255,.06));
    display: grid;
    gap: 18px;
    grid-template-columns: 150px minmax(0,1fr);
    padding: 14px 0;
}

.d2_matrix_value {
    font-size: .76rem;
    font-weight: 1000;
    color: light-dark(#202631,#e8eef6);
    letter-spacing: .08em;
}

.d2_page {
    display: grid;
    gap: 22px;
    margin: 0 auto;
    padding: 34px 0 82px;
    width: min(1280px, calc(100% - 28px));
}

.d2_pill {
    align-items: center;
    background-color: light-dark(rgba(255,255,255,.74),rgba(17,23,34,.72));
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: flex;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 999px;
    width: fit-content;
}

.d2_pill_dot {
    font-size: .62rem;
    color: #4de6a4;
}

.d2_pill_label {
    font-size: .63rem;
    font-weight: 900;
    color: light-dark(#7a8290,#8190a3);
    letter-spacing: .13em;
}

.d2_pill_value {
    font-size: .67rem;
    font-weight: 1000;
    color: light-dark(#3437bd,#7deaff);
    letter-spacing: .12em;
}

.d2_process {
    background: radial-gradient(circle at 75% 50%,rgba(31,124,176,.16),transparent 38%),linear-gradient(145deg,#08111e,#03070c);
    border: 1px solid rgba(255,255,255,.07);
    display: grid;
    gap: 30px;
    overflow: hidden;
    padding: 48px;
    border-radius: 26px;
    box-shadow: 0 30px 80px rgba(0,0,0,.30);
}

.d2_process_arrow {
    align-self: center;
    font-size: 1.25rem;
    color: #6ee7ff;
}

.d2_process_focus {
    background: linear-gradient(145deg,rgba(91,94,232,.18),rgba(101,221,255,.09));
    border-color: rgba(101,221,255,.35);
}

.d2_process_head {
    display: grid;
    gap: 8px;
}

.d2_process_name {
    font-size: 1.2rem;
    color: #ffffff;
    margin: 0;
}

.d2_process_node {
    align-content: start;
    background-color: rgba(16,25,39,.62);
    border: 1px solid rgba(255,255,255,.08);
    display: grid;
    gap: 10px;
    min-height: 220px;
    padding: 20px;
    border-radius: 15px;
}

.d2_process_num {
    font-size: .65rem;
    font-weight: 1000;
    color: #6ee7ff;
}

.d2_process_text {
    font-size: .86rem;
    color: #8fa0b4;
    line-height: 1.62;
    margin: 0;
}

.d2_process_title {
    font-size: clamp(2.2rem,4.8vw,4.4rem);
    color: #ffffff;
    letter-spacing: -.05em;
    line-height: 1;
    margin: 0;
    max-width: 800px;
}

.d2_process_track {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
}

.d2_profile {
    background-color: light-dark(#ffffff,#0a0f17);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    min-height: 620px;
    overflow: hidden;
    border-radius: 26px;
}

.d2_profile_art {
    background: radial-gradient(circle at 52% 46%,rgba(101,221,255,.14),transparent 42%),linear-gradient(145deg,#08101c,#05080d);
    display: grid;
    min-height: 580px;
    overflow: hidden;
    place-items: center;
    position: relative;
}

.d2_profile_caption {
    bottom: 22px;
    font-size: .63rem;
    font-weight: 1000;
    color: #7feaff;
    left: 24px;
    letter-spacing: .16em;
    position: absolute;
}

.d2_profile_copy {
    align-content: center;
    display: grid;
    gap: 18px;
    padding: clamp(34px,5vw,72px);
}

.d2_roadmap {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2,minmax(0,1fr));
    padding-top: 8px;
}

.d2_roadmap_item {
    align-items: center;
    background-color: light-dark(rgba(255,255,255,.68),rgba(17,23,34,.72));
    border: 1px solid light-dark(rgba(32,36,45,.08),rgba(255,255,255,.065));
    display: grid;
    gap: 10px;
    grid-template-columns: 34px minmax(0,1fr);
    padding: 13px;
    border-radius: 12px;
}

.d2_roadmap_name {
    font-size: .82rem;
    font-weight: 800;
    color: light-dark(#303642,#dce5ef);
}

.d2_roadmap_num {
    font-size: .65rem;
    font-weight: 1000;
    color: light-dark(#5155d6,#6ee7ff);
}

.d2_section_note {
    color: light-dark(#757d8a,#8491a3);
    line-height: 1.65;
    margin: 0;
    max-width: 380px;
}

.d2_section_text {
    color: light-dark(#687181,#96a5b7);
    line-height: 1.75;
    margin: 0;
}

.d2_section_title {
    font-size: clamp(2.3rem,4.5vw,4.4rem);
    color: light-dark(#151a23,#f7faff);
    letter-spacing: -.05em;
    line-height: 1;
    margin: 6px 0 0;
    max-width: 860px;
}

.d2_stack {
    display: grid;
    gap: 8px;
    place-items: center;
}

.d2_stack_arrow {
    font-size: 1.2rem;
    color: light-dark(#5155d6,#6ee7ff);
}

.d2_stack_focus {
    background: linear-gradient(145deg,rgba(91,94,232,.18),rgba(101,221,255,.10));
    border-color: rgba(101,221,255,.34);
}

.d2_stack_name {
    font-size: 1.18rem;
    font-weight: 1000;
    color: light-dark(#1d2430,#ffffff);
    letter-spacing: .08em;
}

.d2_stack_node {
    background-color: light-dark(#f7f8fa,#111722);
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    gap: 5px;
    padding: 18px 20px;
    border-radius: 14px;
    text-align: center;
    width: min(100%,340px);
}

.d2_stack_small {
    font-size: .60rem;
    font-weight: 900;
    color: light-dark(#818895,#79889d);
    letter-spacing: .12em;
}

.d2_stat {
    border-right: 1px solid light-dark(rgba(32,36,45,.07),rgba(255,255,255,.06));
    display: grid;
    gap: 5px;
    padding: 18px 20px;
}

.d2_stat_label {
    font-size: .61rem;
    font-weight: 900;
    color: light-dark(#838a97,#738298);
    letter-spacing: .14em;
}

.d2_stat_ok {
    color: #4de6a4;
}

.d2_stat_value {
    font-size: .86rem;
    font-weight: 1000;
    color: light-dark(#202631,#edf4fb);
    letter-spacing: .06em;
}

.d2_tag {
    background-color: light-dark(#f0f2f6,#121a26);
    font-size: .61rem;
    font-weight: 900;
    color: light-dark(#626a78,#9daec2);
    letter-spacing: .08em;
    padding: 7px 9px;
    border-radius: 999px;
}

.d2_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    padding-top: 22px;
}

.d2_tile {
    align-content: start;
    background-color: light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 12px;
    min-height: 320px;
    overflow: hidden;
    padding: 28px;
    border-radius: 20px;
    box-shadow: 0 18px 50px light-dark(rgba(32,36,45,.055),rgba(0,0,0,.18));
}

.d2_tile_index {
    font-size: .68rem;
    font-weight: 1000;
    color: light-dark(#a8adb6,#59677b);
}

.d2_tile_kicker {
    font-size: .67rem;
    font-weight: 1000;
    color: light-dark(#5155d6,#6ee7ff);
    letter-spacing: .16em;
    margin: 0;
}

.d2_tile_network {
    background: radial-gradient(circle at 90% 12%,rgba(101,221,255,.14),transparent 34%),light-dark(#ffffff,#0c1119);
    grid-column: span 7;
}

.d2_tile_security {
    grid-column: span 5;
}

.d2_tile_services {
    grid-column: span 5;
    min-height: 380px;
}

.d2_tile_system {
    background: radial-gradient(circle at 92% 8%,rgba(91,94,232,.16),transparent 34%),light-dark(#ffffff,#0c1119);
    grid-column: span 7;
    min-height: 380px;
}

.d2_tile_text {
    color: light-dark(#69717f,#98a6b8);
    line-height: 1.7;
    margin: 0;
    max-width: 660px;
}

.d2_tile_title {
    font-size: clamp(1.8rem,3.2vw,3rem);
    color: light-dark(#181e27,#f6f9fd);
    letter-spacing: -.04em;
    line-height: 1.03;
    margin: 4px 0 0;
}

.d3_hero_rail {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: .63rem;
    font-weight: 900;
    color: light-dark(#7c8492,#8190a3);
    gap: 8px;
    letter-spacing: .11em;
    margin-top: 2px;
}

.d3_rail_dot {
    color: light-dark(#5155d6,#6ee7ff);
}

.d3_rail_item {
    display: inline-block;
}

.d3_score_value {
    font-size: clamp(2.5rem,4vw,4.2rem);
    color: light-dark(#176c50,#67e5a7);
    letter-spacing: -.04em;
    line-height: .95;
    margin: 2px 0 0;
}

.d3_surface {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
    padding: 18px 0 8px;
}

.d3_surface_card {
    align-content: start;
    background-color: light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 9px;
    min-height: 180px;
    padding: 22px;
    border-radius: 16px;
}

.d3_surface_grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2,minmax(0,1fr));
}

.d3_surface_intro {
    align-content: center;
    display: grid;
    gap: 12px;
    padding: 30px 12px 30px 2px;
}

.d3_surface_label {
    font-size: .62rem;
    font-weight: 1000;
    color: light-dark(#7e8591,#7e8da0);
    letter-spacing: .14em;
}

.d3_surface_score {
    background: radial-gradient(circle at 88% 15%,rgba(77,230,164,.13),transparent 38%),light-dark(#ffffff,#0c1119);
}

.d3_surface_text {
    font-size: .86rem;
    color: light-dark(#6e7684,#8f9db0);
    line-height: 1.6;
    margin: 0;
}

.d3_surface_title {
    font-size: clamp(2rem,3.8vw,3.7rem);
    color: light-dark(#151a23,#f7faff);
    letter-spacing: -.045em;
    line-height: 1.02;
    margin: 0;
    max-width: 620px;
}

.d3_surface_value {
    font-size: 1.35rem;
    color: light-dark(#1b212a,#f2f6fa);
    letter-spacing: -.02em;
    margin: 2px 0 0;
}

.d4_ecosystem {
    background: radial-gradient(circle at 92% 18%,rgba(101,221,255,.11),transparent 34%),light-dark(#ffffff,#0a0f17);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 34px;
    grid-template-columns: 170px minmax(0,1fr);
    padding: 52px;
    border-radius: 26px;
}

.d4_ecosystem_copy {
    display: grid;
    gap: 16px;
}

.d4_ecosystem_index {
    font-size: .72rem;
    font-weight: 1000;
    color: light-dark(#b5bac3,#425067);
    letter-spacing: .14em;
}

.d4_ecosystem_statement {
    background-color: light-dark(#f6f7fa,#101722);
    border-left: 2px solid light-dark(#5155d6,#6ee7ff);
    font-size: 1rem;
    font-weight: 900;
    color: light-dark(#2f3642,#dce7f2);
    line-height: 1.65;
    margin: 10px 0 0;
    max-width: 840px;
    padding: 18px 20px;
}

.d4_ecosystem_text {
    font-size: 1rem;
    color: light-dark(#687181,#98a6b8);
    line-height: 1.78;
    margin: 0;
    max-width: 880px;
}

.d4_ecosystem_title {
    font-size: clamp(2.6rem,5vw,4.9rem);
    color: light-dark(#151a23,#ffffff);
    letter-spacing: -.05em;
    line-height: .98;
    margin: 0;
    max-width: 900px;
}

.doragon_architecture {
    align-items: center;
    background: radial-gradient(circle at 86% 44%, rgba(91,94,232,.12), transparent 32%), light-dark(#ffffff,#0a0f17);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 38px;
    grid-template-columns: minmax(0,1fr) minmax(340px,.72fr);
    padding: 50px;
    border-radius: 24px;
}

.doragon_architecture_copy {
    display: grid;
    gap: 15px;
}

.doragon_architecture_stack {
    display: grid;
    gap: 8px;
    place-items: center;
}

.doragon_card_index {
    font-size: .66rem;
    font-weight: 1000;
    color: light-dark(#a3a8b1,#566379);
}

.doragon_card_kicker {
    font-size: .66rem;
    font-weight: 1000;
    color: light-dark(#5b5ee8,#6ee7ff);
    letter-spacing: .16em;
    margin: 0;
}

.doragon_card_text {
    color: light-dark(#69717f,#97a5b7);
    line-height: 1.7;
    margin: 0;
}

.doragon_card_title {
    font-size: clamp(1.7rem,3vw,2.8rem);
    color: light-dark(#191e27,#f4f7fb);
    letter-spacing: -.035em;
    line-height: 1.05;
    margin: 6px 0 0;
}

.doragon_check_grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.doragon_check_group {
    background-color: light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 8px;
    padding: 24px;
    border-radius: 16px;
}

.doragon_check_highlight {
    background: radial-gradient(circle at 90% 10%, rgba(77,230,164,.10), transparent 35%), light-dark(#ffffff,#0c1119);
}

.doragon_check_item {
    border-bottom: 1px solid light-dark(rgba(32,36,45,.065),rgba(255,255,255,.055));
    font-size: .86rem;
    color: light-dark(#69717f,#93a2b5);
    margin: 0;
    padding: 8px 0;
}

.doragon_check_title {
    font-size: 1.24rem;
    color: light-dark(#202631,#f2f6fa);
    margin: 2px 0 10px;
}

.doragon_checks {
    display: grid;
    gap: 20px;
    padding: 34px 0;
}

.doragon_closing {
    align-content: center;
    background: radial-gradient(circle at 50% 110%, rgba(101,221,255,.16), transparent 45%), light-dark(#ffffff,#080c12);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 16px;
    min-height: 440px;
    overflow: hidden;
    padding: 48px;
    place-items: center;
    position: relative;
    border-radius: 26px;
    text-align: center;
}

.doragon_closing_line {
    display: flex;
    flex-wrap: wrap;
    font-size: .72rem;
    font-weight: 1000;
    color: light-dark(#5b5ee8,#6ee7ff);
    gap: 12px;
    justify-content: center;
    letter-spacing: .12em;
    margin-top: 16px;
}

.doragon_closing_text {
    font-size: 1.05rem;
    color: light-dark(#6f7785,#94a3b5);
    line-height: 1.7;
    margin: 0;
    max-width: 760px;
}

.doragon_closing_title {
    font-size: clamp(2.7rem,6vw,5.6rem);
    color: light-dark(#151a23,#ffffff);
    letter-spacing: -.055em;
    line-height: .96;
    margin: 0;
    max-width: 900px;
}

.doragon_domain {
    align-content: start;
    background-color: light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 12px;
    min-height: 320px;
    padding: 30px;
    border-radius: 20px;
}

.doragon_domain_accent {
    background: radial-gradient(circle at 85% 16%, rgba(101,221,255,.16), transparent 34%), light-dark(#ffffff,#0c1119);
}

.doragon_domain_grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2,minmax(0,1fr));
}

.doragon_domain_primary {
    background: radial-gradient(circle at 90% 10%, rgba(91,94,232,.15), transparent 32%), light-dark(#ffffff,#0c1119);
}

.doragon_dragon {
    display: block;
    filter: saturate(1.15) contrast(1.04);
    max-height: 520px;
    mix-blend-mode: normal;
    object-fit: contain;
    opacity: .86;
    position: relative;
    width: min(100%, 560px);
    z-index: 2;
}

.doragon_dragon_secondary {
    opacity: .74;
    transform: scale(1.05);
    width: 92%;
}

.doragon_dragon_tertiary {
    opacity: .54;
    transform: translateX(-3%) scale(1.08);
    width: 110%;
}

.doragon_eyebrow {
    font-size: .72rem;
    font-weight: 1000;
    color: light-dark(#5b5ee8,#6ee7ff);
    letter-spacing: .18em;
    margin: 0;
}

.doragon_future {
    background: linear-gradient(135deg,light-dark(#f4f5fb,#0b1019),light-dark(#eef8fb,#111a2c));
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    grid-template-columns: minmax(320px,.78fr) minmax(0,1.22fr);
    min-height: 620px;
    overflow: hidden;
    border-radius: 26px;
}

.doragon_future_copy {
    align-content: center;
    display: grid;
    gap: 18px;
    padding: clamp(34px,5vw,72px);
}

.doragon_future_grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2,minmax(0,1fr));
    padding-top: 8px;
}

.doragon_future_index {
    font-size: .65rem;
    font-weight: 1000;
    color: light-dark(#5b5ee8,#6ee7ff);
}

.doragon_future_item {
    align-items: center;
    background-color: light-dark(rgba(255,255,255,.68),rgba(17,23,34,.72));
    border: 1px solid light-dark(rgba(32,36,45,.08),rgba(255,255,255,.065));
    display: grid;
    gap: 10px;
    grid-template-columns: 34px minmax(0,1fr);
    padding: 13px;
    border-radius: 12px;
}

.doragon_future_name {
    font-size: .82rem;
    font-weight: 800;
    color: light-dark(#303642,#dce5ef);
}

.doragon_future_title {
    font-size: clamp(2.5rem,5vw,5rem);
    color: light-dark(#151a23,#ffffff);
    letter-spacing: -.055em;
    line-height: .98;
    margin: 0;
    max-width: 760px;
}

.doragon_future_visual {
    background: radial-gradient(circle, rgba(101,221,255,.14), transparent 55%);
    display: grid;
    overflow: hidden;
    place-items: center;
    position: relative;
}

.doragon_hero {
    align-items: center;
    background: radial-gradient(circle at 82% 24%, rgba(74,216,255,.18), transparent 32%), radial-gradient(circle at 72% 70%, rgba(91,94,232,.14), transparent 34%), light-dark(#ffffff,#090d14);
    border: 1px solid light-dark(rgba(32,36,45,.10), rgba(255,255,255,.08));
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    min-height: 620px;
    overflow: hidden;
    padding: clamp(34px, 5vw, 68px);
    position: relative;
    border-radius: 30px;
    box-shadow: 0 34px 90px light-dark(rgba(32,36,45,.11), rgba(0,0,0,.38));
}

.doragon_hero_actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding-top: 4px;
}

.doragon_hero_copy {
    display: grid;
    gap: 18px;
    position: relative;
    z-index: 4;
}

.doragon_identity {
    align-items: center;
    background-color: light-dark(rgba(255,255,255,.72),rgba(17,23,34,.72));
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: flex;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 999px;
    width: fit-content;
}

.doragon_identity_dot {
    font-size: .65rem;
    color: #4de6a4;
}

.doragon_identity_label {
    font-size: .64rem;
    font-weight: 900;
    color: light-dark(#7d8492,#8290a4);
    letter-spacing: .13em;
}

.doragon_identity_value {
    font-size: .68rem;
    font-weight: 1000;
    color: light-dark(#3236b8,#7ee8ff);
    letter-spacing: .12em;
}

.doragon_lead {
    font-size: clamp(1rem,1.5vw,1.22rem);
    color: light-dark(#687181,#9ba8ba);
    line-height: 1.7;
    margin: 0;
    max-width: 760px;
}

.doragon_manifest {
    align-items: center;
    background-color: light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 26px;
    grid-template-columns: 80px minmax(0,1fr) minmax(240px,.55fr);
    padding: 30px 34px;
    border-radius: 20px;
}

.doragon_manifest_copy {
    display: grid;
    gap: 8px;
}

.doragon_manifest_number {
    font-size: 3.6rem;
    font-weight: 1000;
    color: light-dark(#d6d9df,#263143);
    letter-spacing: -.06em;
}

.doragon_manifest_statement {
    border-left: 2px solid light-dark(#5b5ee8,#6ee7ff);
    font-size: .78rem;
    font-weight: 900;
    color: light-dark(#39404d,#c5d2e2);
    letter-spacing: .07em;
    line-height: 1.7;
    padding: 18px;
}

.doragon_meta {
    font-size: .68rem;
    font-weight: 900;
    color: light-dark(#737b8a,#77869a);
    letter-spacing: .14em;
}

.doragon_orb {
    aspect-ratio: 1;
    background: radial-gradient(circle at 35% 28%, #bff7ff 0%, #43c7ed 15%, rgba(43,117,207,.78) 42%, rgba(16,23,38,.18) 70%);
    border: 1px solid rgba(126,232,255,.42);
    bottom: 12%;
    display: grid;
    place-items: center;
    position: absolute;
    border-radius: 50%;
    right: 8%;
    box-shadow: 0 0 60px rgba(67,199,237,.34);
    width: 118px;
    z-index: 3;
}

.doragon_orb_core {
    font-size: 2rem;
    font-weight: 1000;
    color: #ffffff;
}

.doragon_orb_label {
    bottom: -26px;
    font-size: .62rem;
    font-weight: 1000;
    color: light-dark(#35546b,#83dff4);
    letter-spacing: .18em;
    position: absolute;
}

.doragon_page {
    display: grid;
    gap: 28px;
    margin: 0 auto;
    padding: 44px 0 80px;
    width: min(1240px, calc(100% - 28px));
}

.doragon_pipeline {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
}

.doragon_pipeline_arrow {
    align-self: center;
    font-size: 1.35rem;
    color: light-dark(#5b5ee8,#6ee7ff);
}

.doragon_pipeline_focus {
    background: linear-gradient(145deg, light-dark(rgba(91,94,232,.10),rgba(91,94,232,.17)), light-dark(rgba(101,221,255,.08),rgba(101,221,255,.08)));
    border-color: rgba(101,221,255,.32);
}

.doragon_pipeline_index {
    font-size: .66rem;
    font-weight: 1000;
    color: light-dark(#5b5ee8,#6ee7ff);
}

.doragon_pipeline_node {
    align-content: start;
    background-color: light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 10px;
    min-height: 230px;
    padding: 22px;
    border-radius: 16px;
}

.doragon_pipeline_section {
    display: grid;
    gap: 22px;
    padding: 38px 0;
}

.doragon_pipeline_text {
    font-size: .88rem;
    color: light-dark(#707887,#8f9db0);
    line-height: 1.6;
    margin: 0;
}

.doragon_pipeline_title {
    font-size: 1.25rem;
    color: light-dark(#1a2029,#f4f7fb);
    margin: 0;
}

.doragon_platform_card {
    align-content: start;
    background-color: light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 12px;
    min-height: 270px;
    padding: 28px;
    border-radius: 18px;
}

.doragon_platform_future {
    background: radial-gradient(circle at 88% 18%, rgba(101,221,255,.14), transparent 35%), light-dark(#ffffff,#0c1119);
}

.doragon_platform_title {
    font-size: 2.2rem;
    color: light-dark(#171c25,#f4f7fb);
    letter-spacing: -.035em;
    margin: 0;
}

.doragon_platforms {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3,minmax(0,1fr));
    padding: 14px 0 34px;
}

.doragon_profile_key {
    font-size: .72rem;
    font-weight: 800;
    color: light-dark(#7b8391,#8290a4);
}

.doragon_profile_row {
    border-bottom: 1px solid light-dark(rgba(32,36,45,.08),rgba(255,255,255,.065));
    display: grid;
    gap: 18px;
    grid-template-columns: 140px minmax(0,1fr);
    padding: 14px 0;
}

.doragon_profile_table {
    border-top: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    margin-top: 10px;
}

.doragon_profile_value {
    font-size: .76rem;
    font-weight: 1000;
    color: light-dark(#202632,#e7edf5);
    letter-spacing: .08em;
}

.doragon_section {
    display: grid;
    gap: 22px;
    padding: 34px 0;
}

.doragon_section_head {
    align-items: end;
    display: flex;
    gap: 22px;
    justify-content: space-between;
}

.doragon_section_note {
    color: light-dark(#747c8a,#8390a2);
    line-height: 1.6;
    margin: 0;
    max-width: 350px;
}

.doragon_section_text {
    font-size: 1rem;
    color: light-dark(#6a7280,#97a5b7);
    line-height: 1.75;
    margin: 0;
}

.doragon_section_title {
    font-size: clamp(2rem,4.5vw,4rem);
    color: light-dark(#171c25,#f5f8fc);
    letter-spacing: -.045em;
    line-height: 1.02;
    margin: 5px 0 0;
    max-width: 820px;
}

.doragon_split_copy {
    align-content: center;
    display: grid;
    gap: 18px;
    padding: clamp(32px,5vw,70px);
}

.doragon_split_feature {
    background-color: light-dark(#ffffff,#0a0f17);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
    min-height: 600px;
    overflow: hidden;
    border-radius: 26px;
}

.doragon_split_visual {
    background: radial-gradient(circle at 50% 45%, rgba(101,221,255,.16), transparent 40%), linear-gradient(145deg, rgba(8,16,28,.98), rgba(5,8,13,.98));
    display: grid;
    min-height: 560px;
    overflow: hidden;
    place-items: center;
    position: relative;
}

.doragon_stack_arrow {
    font-size: 1.2rem;
    color: light-dark(#5b5ee8,#6ee7ff);
}

.doragon_stack_focus {
    background: linear-gradient(145deg,rgba(91,94,232,.18),rgba(101,221,255,.10));
    border-color: rgba(101,221,255,.34);
}

.doragon_stack_name {
    font-size: 1.2rem;
    font-weight: 1000;
    color: light-dark(#1d2430,#ffffff);
    letter-spacing: .08em;
}

.doragon_stack_node {
    background-color: light-dark(#f7f8fa,#111722);
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    gap: 5px;
    padding: 18px 20px;
    border-radius: 14px;
    text-align: center;
    width: min(100%,330px);
}

.doragon_stack_small {
    font-size: .61rem;
    font-weight: 900;
    color: light-dark(#818895,#79889d);
    letter-spacing: .12em;
}

.doragon_title {
    font-size: clamp(3.3rem,7.2vw,7rem);
    color: light-dark(#121721,#ffffff);
    letter-spacing: -.065em;
    line-height: .93;
    margin: 0;
    max-width: 820px;
}

.doragon_token {
    background-color: light-dark(#f1f3f6,#111a27);
    font-size: .61rem;
    font-weight: 900;
    color: light-dark(#626a78,#9dafc3);
    letter-spacing: .08em;
    padding: 7px 9px;
    border-radius: 999px;
}

.doragon_token_row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    padding-top: 20px;
}

.doragon_value_ok {
    color: #4de6a4;
}

.doragon_visual {
    background: radial-gradient(circle at 50% 48%, rgba(67,199,237,.12), transparent 58%), #08101c;
    display: grid;
    min-height: 470px;
    place-items: center;
    position: relative;
}

.doragon_visual_caption {
    bottom: 24px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    left: 26px;
    position: absolute;
    right: 26px;
    z-index: 4;
}

.doragon_visual_glow {
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(101,221,255,.17), rgba(91,94,232,.07) 48%, transparent 72%);
    filter: blur(8px);
    position: absolute;
    border-radius: 50%;
    width: 78%;
}

.doragon_visual_index {
    font-size: .64rem;
    font-weight: 1000;
    color: #7feaff;
    letter-spacing: .16em;
}

.doragon_visual_status {
    font-size: .64rem;
    font-weight: 1000;
    color: #4de6a4;
    letter-spacing: .16em;
}

.dr_architecture {
    align-items: center;
    background: radial-gradient(circle at 86% 45%,rgba(91,94,232,.12),transparent 32%),light-dark(#ffffff,#0a0f17);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(0,1fr) minmax(340px,.72fr);
    padding: 54px;
    border-radius: 26px;
}

.dr_architecture_copy {
    display: grid;
    gap: 15px;
}

.dr_bento {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(12,minmax(0,1fr));
}

.dr_button_primary {
    background: linear-gradient(135deg,#5b5ee8,#43c7ed);
    font-weight: 900;
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
}

.dr_card {
    align-content: start;
    background-color: light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 12px;
    min-height: 320px;
    overflow: hidden;
    padding: 28px;
    border-radius: 20px;
    box-shadow: 0 18px 50px light-dark(rgba(32,36,45,.055),rgba(0,0,0,.18));
}

.dr_card_index {
    font-size: .68rem;
    font-weight: 1000;
    color: light-dark(#a8adb6,#59677b);
}

.dr_card_kicker {
    font-size: .67rem;
    font-weight: 1000;
    color: light-dark(#5155d6,#6ee7ff);
    letter-spacing: .16em;
    margin: 0;
}

.dr_card_narrow {
    grid-column: span 5;
}

.dr_card_network {
    background: radial-gradient(circle at 90% 12%,rgba(101,221,255,.14),transparent 34%),light-dark(#ffffff,#0c1119);
}

.dr_card_system {
    background: radial-gradient(circle at 92% 8%,rgba(91,94,232,.16),transparent 34%),light-dark(#ffffff,#0c1119);
    min-height: 380px;
}

.dr_card_text {
    color: light-dark(#69717f,#98a6b8);
    line-height: 1.7;
    margin: 0;
    max-width: 660px;
}

.dr_card_title {
    font-size: clamp(1.8rem,3.2vw,3rem);
    color: light-dark(#181e27,#f6f9fd);
    letter-spacing: -.04em;
    line-height: 1.03;
    margin: 4px 0 0;
}

.dr_card_wide {
    grid-column: span 7;
}

.dr_check {
    align-content: start;
    background-color: light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 10px;
    min-height: 200px;
    padding: 24px;
    border-radius: 16px;
}

.dr_check_accent {
    background: radial-gradient(circle at 90% 10%,rgba(101,221,255,.13),transparent 35%),light-dark(#ffffff,#0c1119);
}

.dr_check_code {
    background-color: light-dark(rgba(91,94,232,.10),rgba(101,221,255,.10));
    display: grid;
    font-size: .66rem;
    font-weight: 1000;
    color: light-dark(#5155d6,#6ee7ff);
    height: 42px;
    place-items: center;
    border-radius: 12px;
    width: 42px;
}

.dr_check_grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.dr_check_text {
    font-size: .87rem;
    color: light-dark(#6c7482,#92a1b4);
    line-height: 1.65;
    margin: 0;
}

.dr_check_title {
    font-size: 1.22rem;
    color: light-dark(#1c222c,#f4f7fb);
    margin: 6px 0 0;
}

.dr_checks {
    display: grid;
    gap: 22px;
    padding: 38px 0;
}

.dr_closing {
    align-content: center;
    background: radial-gradient(circle at 50% 115%,rgba(101,221,255,.16),transparent 45%),light-dark(#ffffff,#080c12);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 18px;
    min-height: 420px;
    padding: 48px;
    place-items: center;
    border-radius: 28px;
    text-align: center;
}

.dr_closing_flow {
    display: flex;
    flex-wrap: wrap;
    font-size: .70rem;
    font-weight: 1000;
    color: light-dark(#5155d6,#6ee7ff);
    gap: 12px;
    justify-content: center;
    letter-spacing: .12em;
    margin-top: 12px;
}

.dr_closing_title {
    font-size: clamp(2.8rem,5.8vw,5.6rem);
    color: light-dark(#151a23,#ffffff);
    letter-spacing: -.055em;
    line-height: .96;
    margin: 0;
    max-width: 980px;
}

.dr_ecosystem {
    background: radial-gradient(circle at 92% 18%,rgba(101,221,255,.11),transparent 34%),light-dark(#ffffff,#0a0f17);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 38px;
    grid-template-columns: 220px minmax(0,1fr);
    padding: 54px;
    border-radius: 26px;
}

.dr_ecosystem_copy {
    display: grid;
    gap: 16px;
}

.dr_ecosystem_mark {
    align-content: start;
    display: grid;
    gap: 5px;
    padding-top: 4px;
}

.dr_ecosystem_mark_hsk {
    font-size: 2.6rem;
    font-weight: 1000;
    color: light-dark(#181d26,#ffffff);
    letter-spacing: .05em;
}

.dr_ecosystem_mark_sub {
    font-size: .60rem;
    font-weight: 900;
    color: light-dark(#7b8390,#7f8da0);
    letter-spacing: .12em;
}

.dr_ecosystem_statement {
    background-color: light-dark(#f6f7fa,#101722);
    border-left: 2px solid light-dark(#5155d6,#6ee7ff);
    font-size: 1rem;
    font-weight: 900;
    color: light-dark(#2f3642,#dce7f2);
    line-height: 1.65;
    margin: 10px 0 0;
    max-width: 860px;
    padding: 18px 20px;
}

.dr_ecosystem_text {
    font-size: 1rem;
    color: light-dark(#687181,#98a6b8);
    line-height: 1.78;
    margin: 0;
    max-width: 900px;
}

.dr_ecosystem_title {
    font-size: clamp(2.6rem,5vw,4.9rem);
    color: light-dark(#151a23,#ffffff);
    letter-spacing: -.05em;
    line-height: .98;
    margin: 0;
    max-width: 930px;
}

.dr_future {
    background: linear-gradient(135deg,light-dark(#f2f3fa,#0b1019),light-dark(#eef8fb,#111a2c));
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr);
    min-height: 660px;
    overflow: hidden;
    border-radius: 28px;
}

.dr_future_copy {
    align-content: center;
    display: grid;
    gap: 18px;
    padding: clamp(34px,5vw,74px);
}

.dr_future_dragon {
    max-height: 640px;
    mix-blend-mode: normal;
    object-fit: contain;
    opacity: .58;
    transform: translateX(4%) scale(1.02);
    width: 110%;
}

.dr_future_title {
    font-size: clamp(2.8rem,5.2vw,5.2rem);
    color: light-dark(#151a23,#ffffff);
    letter-spacing: -.055em;
    line-height: .97;
    margin: 0;
    max-width: 780px;
}

.dr_future_visual {
    background: radial-gradient(circle at 52% 45%,rgba(101,221,255,.13),transparent 48%),#08101c;
    display: grid;
    overflow: hidden;
    place-items: center;
    position: relative;
}

.dr_hero {
    background: radial-gradient(circle at 82% 20%,rgba(50,194,238,.15),transparent 32%),radial-gradient(circle at 72% 82%,rgba(74,77,199,.13),transparent 34%),light-dark(#ffffff,#080c12);
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0,.92fr) minmax(420px,1.08fr);
    grid-template-rows: 1fr auto;
    min-height: 720px;
    overflow: hidden;
    padding: clamp(34px,5vw,68px);
    position: relative;
    border-radius: 30px;
    box-shadow: 0 36px 90px light-dark(rgba(32,36,45,.10),rgba(0,0,0,.40));
}

.dr_hero_actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 4px;
}

.dr_hero_copy {
    align-content: center;
    display: grid;
    gap: 18px;
    position: relative;
    z-index: 4;
}

.dr_hero_dragon {
    filter: saturate(1.03) contrast(1.02);
    max-height: 620px;
    mix-blend-mode: normal;
    object-fit: contain;
    opacity: .96;
    transform: translateX(4%);
    width: 108%;
}

.dr_hero_text {
    font-size: clamp(1rem,1.35vw,1.16rem);
    color: light-dark(#687181,#9ba8ba);
    line-height: 1.72;
    margin: 0;
    max-width: 730px;
}

.dr_hero_title {
    font-size: clamp(3.2rem,6vw,6rem);
    color: light-dark(#11151d,#ffffff);
    letter-spacing: -.06em;
    line-height: .94;
    margin: 0;
    max-width: 760px;
}

.dr_hero_topics {
    display: flex;
    flex-wrap: wrap;
    font-size: .62rem;
    font-weight: 900;
    color: light-dark(#7a8290,#7c8ba0);
    gap: 8px;
    letter-spacing: .12em;
}

.dr_hero_visual {
    background: radial-gradient(circle at 50% 45%,rgba(67,199,237,.12),transparent 58%),#08101c;
    display: grid;
    min-height: 520px;
    overflow: hidden;
    place-items: center;
    position: relative;
}

.dr_identity {
    align-items: center;
    background-color: light-dark(rgba(255,255,255,.76),rgba(17,23,34,.72));
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: flex;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 999px;
    width: fit-content;
}

.dr_identity_dot {
    font-size: .62rem;
    color: #4de6a4;
}

.dr_identity_label {
    font-size: .63rem;
    font-weight: 900;
    color: light-dark(#7a8290,#8190a3);
    letter-spacing: .13em;
}

.dr_identity_value {
    font-size: .67rem;
    font-weight: 1000;
    color: light-dark(#3538bd,#77eaff);
    letter-spacing: .12em;
}

.dr_kicker {
    font-size: .70rem;
    font-weight: 1000;
    color: light-dark(#5155d6,#6ee7ff);
    letter-spacing: .17em;
    margin: 0;
}

.dr_kicker_on_dark {
    color: #77eaff;
}

.dr_ok {
    color: #4de6a4;
}

.dr_page {
    display: grid;
    gap: 22px;
    margin: 0 auto;
    padding: 34px 0 82px;
    width: min(1280px, calc(100% - 28px));
}

.dr_platform_card {
    align-content: start;
    background-color: light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    gap: 12px;
    min-height: 250px;
    padding: 28px;
    border-radius: 18px;
}

.dr_platform_future {
    background: radial-gradient(circle at 88% 18%,rgba(101,221,255,.14),transparent 35%),light-dark(#ffffff,#0c1119);
}

.dr_platform_label {
    font-size: .68rem;
    font-weight: 900;
    color: light-dark(#737b8a,#7f8da0);
    letter-spacing: .14em;
}

.dr_platform_title {
    font-size: 2.2rem;
    color: light-dark(#171c25,#f4f7fb);
    letter-spacing: -.035em;
    margin: 0;
}

.dr_platforms {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.dr_process {
    background: radial-gradient(circle at 76% 46%,rgba(31,124,176,.15),transparent 38%),linear-gradient(145deg,#08111e,#03070c);
    border: 1px solid rgba(255,255,255,.07);
    display: grid;
    gap: 30px;
    overflow: hidden;
    padding: 48px;
    border-radius: 26px;
    box-shadow: 0 30px 80px rgba(0,0,0,.30);
}

.dr_process_arrow {
    align-self: center;
    font-size: 1.25rem;
    color: #6ee7ff;
}

.dr_process_focus {
    background: linear-gradient(145deg,rgba(91,94,232,.18),rgba(101,221,255,.09));
    border-color: rgba(101,221,255,.35);
}

.dr_process_intro {
    display: grid;
    gap: 10px;
}

.dr_process_name {
    font-size: 1.2rem;
    color: #ffffff;
    margin: 0;
}

.dr_process_node {
    align-content: start;
    background-color: rgba(16,25,39,.62);
    border: 1px solid rgba(255,255,255,.08);
    display: grid;
    gap: 10px;
    min-height: 210px;
    padding: 20px;
    border-radius: 15px;
}

.dr_process_note {
    color: #8fa0b4;
    line-height: 1.68;
    margin: 0;
    max-width: 740px;
}

.dr_process_num {
    font-size: .65rem;
    font-weight: 1000;
    color: #6ee7ff;
}

.dr_process_text {
    font-size: .86rem;
    color: #8fa0b4;
    line-height: 1.62;
    margin: 0;
}

.dr_process_title {
    font-size: clamp(2.2rem,4.8vw,4.4rem);
    color: #ffffff;
    letter-spacing: -.05em;
    line-height: 1;
    margin: 0;
    max-width: 800px;
}

.dr_process_track {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
}

.dr_profile {
    background-color: light-dark(#ffffff,#0a0f17);
    border: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    grid-template-columns: minmax(0,1.04fr) minmax(380px,.96fr);
    min-height: 620px;
    overflow: hidden;
    border-radius: 26px;
}

.dr_profile_copy {
    align-content: center;
    display: grid;
    gap: 18px;
    padding: clamp(34px,5vw,72px);
}

.dr_profile_dragon {
    max-height: 610px;
    mix-blend-mode: normal;
    object-fit: contain;
    opacity: .82;
    transform: translateX(6%) scale(1.03);
    width: 106%;
}

.dr_profile_key {
    font-size: .75rem;
    font-weight: 800;
    color: light-dark(#79818f,#8290a4);
}

.dr_profile_overlay {
    bottom: 22px;
    display: grid;
    gap: 3px;
    left: 24px;
    position: absolute;
}

.dr_profile_overlay_label {
    font-size: .62rem;
    font-weight: 1000;
    color: #7feaff;
    letter-spacing: .16em;
}

.dr_profile_overlay_value {
    font-size: .86rem;
    font-weight: 900;
    color: #ffffff;
}

.dr_profile_row {
    border-bottom: 1px solid light-dark(rgba(32,36,45,.075),rgba(255,255,255,.06));
    display: grid;
    gap: 18px;
    grid-template-columns: 150px minmax(0,1fr);
    padding: 14px 0;
}

.dr_profile_table {
    border-top: 1px solid light-dark(rgba(32,36,45,.09),rgba(255,255,255,.075));
    display: grid;
    margin-top: 8px;
}

.dr_profile_value {
    font-size: .76rem;
    font-weight: 1000;
    color: light-dark(#202631,#e8eef6);
    letter-spacing: .08em;
}

.dr_profile_visual {
    background: radial-gradient(circle at 50% 45%,rgba(101,221,255,.12),transparent 44%),linear-gradient(145deg,#08101c,#05080d);
    display: grid;
    min-height: 580px;
    overflow: hidden;
    place-items: center;
    position: relative;
}

.dr_roadmap {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2,minmax(0,1fr));
    padding-top: 8px;
}

.dr_roadmap_item {
    align-items: center;
    background-color: light-dark(rgba(255,255,255,.68),rgba(17,23,34,.72));
    border: 1px solid light-dark(rgba(32,36,45,.08),rgba(255,255,255,.065));
    display: grid;
    gap: 10px;
    grid-template-columns: 34px minmax(0,1fr);
    padding: 13px;
    border-radius: 12px;
}

.dr_roadmap_name {
    font-size: .82rem;
    font-weight: 800;
    color: light-dark(#303642,#dce5ef);
}

.dr_roadmap_num {
    font-size: .65rem;
    font-weight: 1000;
    color: light-dark(#5155d6,#6ee7ff);
}

.dr_section_head {
    align-items: end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding: 38px 2px 8px;
}

.dr_section_note {
    color: light-dark(#757d8a,#8491a3);
    line-height: 1.65;
    margin: 0;
    max-width: 390px;
}

.dr_section_text {
    color: light-dark(#687181,#96a5b7);
    line-height: 1.75;
    margin: 0;
}

.dr_section_title {
    font-size: clamp(2.3rem,4.5vw,4.4rem);
    color: light-dark(#151a23,#f7faff);
    letter-spacing: -.05em;
    line-height: 1;
    margin: 6px 0 0;
    max-width: 860px;
}

.dr_stack {
    display: grid;
    gap: 8px;
    place-items: center;
}

.dr_stack_arrow {
    font-size: 1.2rem;
    color: light-dark(#5155d6,#6ee7ff);
}

.dr_stack_focus {
    background: linear-gradient(145deg,rgba(91,94,232,.18),rgba(101,221,255,.10));
    border-color: rgba(101,221,255,.34);
}

.dr_stack_name {
    font-size: 1.18rem;
    font-weight: 1000;
    color: light-dark(#1d2430,#ffffff);
    letter-spacing: .08em;
}

.dr_stack_node {
    background-color: light-dark(#f7f8fa,#111722);
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    gap: 5px;
    padding: 18px 20px;
    border-radius: 14px;
    text-align: center;
    width: min(100%,340px);
}

.dr_stack_small {
    font-size: .60rem;
    font-weight: 900;
    color: light-dark(#818895,#79889d);
    letter-spacing: .12em;
}

.dr_stat {
    border-right: 1px solid light-dark(rgba(32,36,45,.07),rgba(255,255,255,.06));
    display: grid;
    gap: 5px;
    padding: 18px 20px;
}

.dr_stat_label {
    font-size: .61rem;
    font-weight: 900;
    color: light-dark(#838a97,#738298);
    letter-spacing: .14em;
}

.dr_stat_value {
    font-size: .86rem;
    font-weight: 1000;
    color: light-dark(#202631,#edf4fb);
    letter-spacing: .06em;
}

.dr_status_strip {
    backdrop-filter: blur(12px);
    background-color: light-dark(rgba(255,255,255,.78),rgba(9,14,22,.78));
    border: 1px solid light-dark(rgba(32,36,45,.08),rgba(255,255,255,.07));
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4,1fr);
    overflow: hidden;
    border-radius: 16px;
    z-index: 5;
}

.dr_tag {
    background-color: light-dark(#f0f2f6,#121a26);
    font-size: .61rem;
    font-weight: 900;
    color: light-dark(#626a78,#9daec2);
    letter-spacing: .08em;
    padding: 7px 9px;
    border-radius: 999px;
}

.dr_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    padding-top: 22px;
}

.dr_visual_badge {
    backdrop-filter: blur(10px);
    background-color: rgba(6,13,22,.72);
    border: 1px solid rgba(101,221,255,.16);
    bottom: 10%;
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    position: absolute;
    border-radius: 10px;
    right: 8%;
}

.dr_visual_badge_label {
    font-size: .64rem;
    font-weight: 1000;
    color: #7feaff;
    letter-spacing: .16em;
}

.dr_visual_badge_value {
    font-size: .72rem;
    font-weight: 900;
    color: #ffffff;
}

.engine_core_orb {
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(101,221,255,.22), rgba(91,94,232,.08) 48%, transparent 70%);
    border: 1px solid rgba(101,221,255,.22);
    display: grid;
    justify-self: center;
    place-items: center;
    position: relative;
    border-radius: 50%;
    box-shadow: 0 0 70px rgba(101,221,255,.15);
    width: 230px;
}

.engine_eyebrow {
    font-size: .72rem;
    font-weight: 900;
    color: light-dark(#5b5ee8,#6ee7ff);
    letter-spacing: .18em;
}

.engine_heading {
    font-size: clamp(4rem,12vw,8.5rem);
    color: light-dark(#11151d,#ffffff);
    letter-spacing: -.07em;
    line-height: .82;
    margin: 0;
}

.engine_hero {
    align-items: center;
    background: radial-gradient(circle at 80% 22%, rgba(101,221,255,.18), transparent 34%), light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.10), rgba(255,255,255,.08));
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 1fr) 280px;
    min-height: 320px;
    padding: 44px;
    border-radius: 28px;
    box-shadow: 0 28px 80px light-dark(rgba(32,36,45,.10), rgba(0,0,0,.34));
}

.engine_hero_copy {
    display: grid;
    gap: 12px;
}

.engine_lead {
    font-size: clamp(1rem,2vw,1.3rem);
    color: light-dark(#687080,#98a5b8);
    margin: 0;
}

.engine_link {
    font-size: 1.4rem;
    color: light-dark(#5b5ee8,#6ee7ff);
}

.engine_node {
    background-color: light-dark(#f7f8fa,#111722);
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    gap: 4px;
    min-width: 120px;
    padding: 18px;
    border-radius: 14px;
}

.engine_node_focus {
    background: linear-gradient(145deg, rgba(91,94,232,.18), rgba(101,221,255,.10));
    border-color: rgba(101,221,255,.35);
}

.engine_node_index {
    font-size: .62rem;
    font-weight: 900;
    color: light-dark(#888d98,#718096);
}

.engine_node_output {
    border-color: rgba(77,230,164,.34);
}

.engine_node_source {
    border-color: rgba(91,94,232,.34);
}

.engine_orb_name {
    font-size: 1.8rem;
    font-weight: 1000;
    color: light-dark(#3236b8,#bff5ff);
    letter-spacing: .2em;
}

.engine_orb_ring {
    font-size: 10rem;
    color: rgba(101,221,255,.14);
    line-height: 1;
    position: absolute;
}

.engine_orb_state {
    bottom: 50px;
    font-size: .65rem;
    font-weight: 900;
    color: #4de6a4;
    letter-spacing: .16em;
    position: absolute;
}

.engine_page {
    display: grid;
    gap: 34px;
    margin: 0 auto;
    padding: 54px 0 72px;
    width: min(1240px, calc(100% - 28px));
}

.engine_pipeline {
    align-items: center;
    background-color: light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(11, auto);
    justify-content: space-between;
    overflow-x: auto;
    padding: 24px;
    border-radius: 20px;
}

.engine_signal {
    background-color: light-dark(#ffffff,#0c1119);
    border-top: 2px solid light-dark(#5b5ee8,#6ee7ff);
    display: grid;
    gap: 6px;
    padding: 20px;
    border-radius: 0 0 14px 14px;
}

.engine_signals {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4,1fr);
}

.error_action {
    background-color: light-dark(#5b5ee8, #6ee7ff);
    border: 1px solid transparent;
    display: inline-block;
    font-weight: 900;
    color: light-dark(#ffffff, #071016);
    padding: 12px 16px;
    border-radius: 9px;
    text-decoration: none;
    user-select: none;
}

.error_brand {
    font-weight: 900;
    color: light-dark(#171a21, #ffffff);
    letter-spacing: 0.12em;
}

.error_code {
    font-size: clamp(5.2rem, 15vw, 10rem);
    color: light-dark(#171a21, #ffffff);
    letter-spacing: -0.08em;
    line-height: 0.82;
    margin: 0;
}

.error_code_label {
    font-size: 0.82rem;
    font-weight: 900;
    color: light-dark(#737985, #94a1b3);
    letter-spacing: 0.14em;
    margin: 22px 0 0;
}

.error_code_panel {
    align-content: center;
    background-color: light-dark(#f8fafc, #0b1017);
    border-right: 1px solid light-dark(rgba(29, 36, 48, 0.075), rgba(255, 255, 255, 0.065));
    display: grid;
    padding: clamp(34px, 6vw, 72px);
}

.error_footer {
    align-items: center;
    background-color: light-dark(#e9edf2, #05070a);
    border-top: 1px solid light-dark(rgba(29, 36, 48, 0.075), rgba(255, 255, 255, 0.065));
    display: grid;
    font-size: 0.72rem;
    font-weight: 750;
    color: light-dark(#777e89, #8794a6);
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px 20px;
}

.error_footer_fail {
    color: light-dark(#b7353d, #ff8992);
}

.error_footer_state {
    font-weight: 900;
    color: light-dark(#176c50, #67e5a7);
    letter-spacing: 0.07em;
}

.error_identity {
    display: grid;
    gap: 3px;
}

.error_kicker {
    font-size: 0.72rem;
    font-weight: 900;
    color: light-dark(#5b5ee8, #6ee7ff);
    letter-spacing: 0.13em;
    margin: 0 0 18px;
}

.error_layout {
    box-sizing: border-box;
    display: grid;
    min-height: 100vh;
    padding: 28px;
    place-items: center;
}

.error_message_panel {
    padding: clamp(32px, 5vw, 62px);
}

.error_page {
    background-color: light-dark(#f6f7f9, #07090d);
    color-scheme: light dark;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: light-dark(#1d2430, #eaf0f7);
    margin: 0;
    min-height: 100vh;
}

.error_runtime {
    font-size: 0.68rem;
    font-weight: 850;
    color: light-dark(#787f8b, #8995a6);
    letter-spacing: 0.10em;
}

.error_status {
    border: 1px solid light-dark(rgba(29, 36, 48, 0.10), rgba(255, 255, 255, 0.08));
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    padding: 8px 11px;
    border-radius: 8px;
}

.error_status_404 {
    background-color: light-dark(rgba(91, 94, 232, 0.10), rgba(110, 231, 255, 0.10));
    color: light-dark(#4d50cf, #7deaff);
}

.error_status_500 {
    background-color: light-dark(rgba(208, 68, 72, 0.10), rgba(255, 105, 115, 0.10));
    color: light-dark(#b7353d, #ff8992);
}

.error_text {
    color: light-dark(#666d79, #aab5c5);
    line-height: 1.75;
    margin: 0;
}

.error_title {
    font-size: clamp(1.8rem, 5vw, 3rem);
    color: light-dark(#1a1e27, #f8fafc);
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 0 0 16px;
}

.error_topbar {
    align-items: center;
    background-color: light-dark(#edf1f5, #0b1017);
    border-bottom: 1px solid light-dark(rgba(29, 36, 48, 0.075), rgba(255, 255, 255, 0.065));
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 18px 20px;
}

.error_trace {
    border: 1px solid light-dark(rgba(29, 36, 48, 0.09), rgba(255, 255, 255, 0.075));
    display: grid;
    margin: 28px 0;
    overflow: hidden;
    border-radius: 12px;
}

.error_trace_key {
    font-size: 0.80rem;
    color: light-dark(#767d88, #8f9bac);
}

.error_trace_row {
    align-items: center;
    border-bottom: 1px solid light-dark(rgba(29, 36, 48, 0.07), rgba(255, 255, 255, 0.06));
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 13px 14px;
}

.error_trace_value {
    font-size: 0.74rem;
    font-weight: 900;
    color: light-dark(#252b36, #edf2f8);
    letter-spacing: 0.06em;
}

.error_value_fail {
    color: light-dark(#b7353d, #ff8992);
}

.error_window {
    background-color: light-dark(#ffffff, #0f141d);
    border: 1px solid light-dark(rgba(29, 36, 48, 0.10), rgba(255, 255, 255, 0.08));
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 28px 90px light-dark(rgba(29, 36, 48, 0.13), rgba(0, 0, 0, 0.48));
    width: min(980px, 100%);
}

.error_workspace {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
}

.flow_arrow {
    font-weight: 900;
    color: light-dark(#a2a6af, #647184);
}

.flow_node {
    background-color: light-dark(#ffffff, #090d12);
    border: 1px solid light-dark(rgba(32, 36, 45, 0.10), rgba(255, 255, 255, 0.09));
    font-size: 0.78rem;
    font-weight: 850;
    color: light-dark(#2a2e37, #edf2f8);
    padding: 8px 10px;
    border-radius: 7px;
}

.footer_brand {
    font-weight: 900;
    color: light-dark(#242832, #f2f5f9);
    letter-spacing: 0.08em;
}

.footer_chip {
    border: 1px solid light-dark(rgba(32, 36, 45, 0.09), rgba(255, 255, 255, 0.07));
    font-size: 0.66rem;
    font-weight: 850;
    color: light-dark(#656a74, #929faf);
    padding: 5px 7px;
    border-radius: 6px;
}

.footer_credit {
    font-size: 0.78rem;
    color: light-dark(#747984, #8995a6);
}

.footer_identity {
    display: grid;
    gap: 2px;
}

.footer_link {
    font-weight: 850;
    color: light-dark(#5b5ee8, #6ee7ff);
    text-decoration: none;
}

.footer_shell {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    margin: 0 auto;
    width: min(1240px, calc(100% - 28px));
}

.footer_status {
    align-items: center;
    display: flex;
    gap: 6px;
}

.footer_text {
    font-size: 0.75rem;
    color: light-dark(#747984, #8995a6);
}

.form_input {
    background-color: light-dark(#f2f0eb, #07090d);
    border: 1px solid light-dark(rgba(32, 36, 45, 0.13), rgba(255, 255, 255, 0.10));
    box-sizing: border-box;
    color: light-dark(#20242d, #f7f9fc);
    padding: 13px 14px;
    border-radius: 8px;
    width: 100%;
}

.form_label {
    display: grid;
    font-weight: 700;
    color: light-dark(#30343d, #e9eef5);
    gap: 8px;
}

.guard_footer_note {
    display: grid;
    gap: 6px;
    justify-self: center;
    letter-spacing: .12em;
    text-align: center;
}

.guard_kicker {
    font-size: .7rem;
    font-weight: 900;
    color: light-dark(#5b5ee8,#6ee7ff);
    letter-spacing: .2em;
}

.guard_lead {
    font-size: 1.1rem;
    color: light-dark(#687080,#98a5b8);
    margin: 0;
}

.guard_mark {
    display: grid;
    height: 128px;
    place-items: center;
    position: relative;
    width: 128px;
}

.guard_mark_inner {
    font-size: 3.6rem;
    color: light-dark(#5b5ee8,#6ee7ff);
}

.guard_mark_outer {
    font-size: 8rem;
    color: rgba(101,221,255,.18);
    position: absolute;
}

.guard_matrix {
    border-top: 1px solid light-dark(rgba(32,36,45,.12),rgba(255,255,255,.09));
    display: grid;
}

.guard_number {
    font-size: .7rem;
    font-weight: 900;
    color: light-dark(#9096a2,#667085);
}

.guard_page {
    display: grid;
    gap: 54px;
    margin: 0 auto;
    padding: 68px 0 90px;
    width: min(1120px, calc(100% - 28px));
}

.guard_row {
    align-items: center;
    border-bottom: 1px solid light-dark(rgba(32,36,45,.12),rgba(255,255,255,.09));
    display: grid;
    gap: 22px;
    grid-template-columns: 80px minmax(0,1fr) auto;
    padding: 24px 8px;
}

.guard_stage {
    align-content: center;
    background: radial-gradient(circle at center, rgba(91,94,232,.14), transparent 46%);
    display: grid;
    gap: 10px;
    min-height: 420px;
    place-items: center;
    position: relative;
    text-align: center;
}

.guard_state {
    background-color: rgba(77,230,164,.10);
    font-size: .68rem;
    font-weight: 900;
    color: light-dark(#176c50,#7df0ba);
    letter-spacing: .1em;
    padding: 7px 10px;
    border-radius: 999px;
}

.guard_title {
    font-size: clamp(4rem,12vw,8rem);
    letter-spacing: -.07em;
    line-height: .9;
    margin: 0;
}

.header_actions {
    align-items: center;
    display: flex;
    gap: 9px;
    justify-content: end;
}

.lower_grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding: 24px 0 48px;
}

.main_layout {
    display: grid;
    gap: 26px;
    margin: 28px auto 0;
    width: min(1240px, calc(100% - 28px));
}

.nav_button {
    align-items: center;
    background-color: transparent;
    border: 1px solid transparent;
    box-sizing: border-box;
    display: grid;
    font-weight: 700;
    color: light-dark(#30343d, #dfe6ef);
    gap: 10px;
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 10px;
    border-radius: 8px;
    text-align: left;
    text-decoration: none;
    user-select: none;
}

.nav_details {
    position: relative;
}

.nav_icon {
    background-color: light-dark(rgba(91, 94, 232, 0.10), rgba(110, 231, 255, 0.10));
    display: grid;
    font-weight: 900;
    color: light-dark(#5b5ee8, #6ee7ff);
    height: 28px;
    place-items: center;
    border-radius: 7px;
    width: 28px;
}

.nav_list {
    background-color: light-dark(#ffffff, #0f141d);
    border: 1px solid light-dark(rgba(29, 36, 48, 0.09), rgba(255, 255, 255, 0.075));
    box-sizing: border-box;
    display: grid;
    gap: 3px;
    grid-template-columns: 1fr;
    list-style: none;
    margin: 10px 0 0;
    max-width: calc(100vw - 24px);
    padding: 7px;
    position: absolute;
    border-radius: 13px;
    right: 0;
    box-shadow: 0 24px 60px light-dark(rgba(32, 36, 45, 0.16), rgba(0, 0, 0, 0.50));
    width: 240px;
    z-index: 135;
}

.nav_shell {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.nav_summary {
    align-items: center;
    background-color: light-dark(#ffffff, #111722);
    border: 1px solid light-dark(rgba(32, 36, 45, 0.11), rgba(255, 255, 255, 0.09));
    cursor: pointer;
    display: grid;
    font-weight: 800;
    color: light-dark(#20242d, #f4f7fb);
    gap: 8px;
    grid-template-columns: 18px auto;
    list-style: none;
    padding: 10px 13px;
    border-radius: 9px;
    user-select: none;
}

.nav_summary_icon {
    color: light-dark(#5b5ee8, #6ee7ff);
}

.nav_summary_text {
    display: block;
}

.nav_text {
    display: block;
}

.panel_label {
    font-size: 0.75rem;
    font-weight: 850;
    color: light-dark(#5b5ee8, #6ee7ff);
    letter-spacing: 0.12em;
    margin: 0 0 16px;
}

.pipeline_grid {
    border: 1px solid light-dark(rgba(29, 36, 48, 0.09), rgba(255, 255, 255, 0.075));
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    overflow: hidden;
    border-radius: 16px;
}

.pipeline_index {
    display: block;
    font-size: 0.72rem;
    font-weight: 900;
    color: light-dark(#b2b5bd, #5f6b7c);
    margin-bottom: 18px;
}

.pipeline_node {
    background-color: light-dark(#ffffff, #0f141d);
    border: 1px solid light-dark(rgba(32, 36, 45, 0.08), rgba(255, 255, 255, 0.07));
    padding: 22px;
}

.pipeline_section {
    display: grid;
    gap: 18px;
    padding: 24px 0;
}

.pipeline_text {
    color: light-dark(#6a6f79, #a4afbf);
    line-height: 1.65;
    margin: 0;
}

.pipeline_title {
    color: light-dark(#22262e, #f2f5f9);
    margin: 0 0 9px;
}

.reference_code {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #dff8ff;
    line-height: 1.75;
    padding: 28px;
    white-space: pre-wrap;
}

.reference_code_bar {
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    font-size: .72rem;
    font-weight: 800;
    color: #93a4b8;
    justify-content: space-between;
    padding: 12px 16px;
}

.reference_code_window {
    background-color: #07090d;
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(0,0,0,.24);
}

.reference_document {
    display: grid;
    gap: 26px;
}

.reference_heading {
    border-bottom: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    gap: 10px;
    padding: 30px;
}

.reference_kicker {
    font-size: .68rem;
    font-weight: 900;
    color: light-dark(#5b5ee8,#6ee7ff);
    letter-spacing: .16em;
}

.reference_label {
    font-size: .68rem;
    font-weight: 900;
    color: light-dark(#5b5ee8,#6ee7ff);
    letter-spacing: .18em;
}

.reference_nav {
    display: grid;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.reference_nav_active {
    font-weight: 900;
    color: light-dark(#3337bd,#8deeff);
}

.reference_notes {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3,1fr);
}

.reference_page {
    align-items: start;
    display: grid;
    gap: 28px;
    grid-template-columns: 250px minmax(0,1fr);
    margin: 0 auto;
    padding: 46px 0 76px;
    width: min(1240px, calc(100% - 28px));
}

.reference_sidebar {
    background-color: light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    gap: 16px;
    padding: 22px;
    position: sticky;
    border-radius: 18px;
    top: 96px;
}

.runtime_dot {
    font-size: 0.72rem;
    color: light-dark(#1ea672, #4de6a4);
}

.runtime_label {
    font-size: 0.68rem;
    font-weight: 800;
    color: light-dark(#777b85, #8995a6);
    letter-spacing: 0.08em;
}

.runtime_strip {
    align-items: center;
    background-color: light-dark(#ffffff, #111722);
    border: 1px solid light-dark(rgba(29, 36, 48, 0.09), rgba(255, 255, 255, 0.075));
    display: grid;
    gap: 7px;
    grid-template-columns: auto auto auto;
    padding: 8px 11px;
    border-radius: 9px;
}

.runtime_value {
    font-size: 0.72rem;
    font-weight: 900;
    color: light-dark(#176c50, #7df0ba);
}

.section_header {
    display: grid;
    gap: 4px;
}

.section_kicker {
    font-size: 0.72rem;
    font-weight: 850;
    color: light-dark(#5b5ee8, #6ee7ff);
    letter-spacing: 0.12em;
    margin: 0;
}

.section_title {
    font-size: clamp(1.55rem, 4vw, 2.35rem);
    color: light-dark(#1a1d24, #f8fafc);
    letter-spacing: -0.025em;
    margin: 0;
}

.site_footer {
    background-color: light-dark(#e9edf2, #05070a);
    border-top: 1px solid light-dark(rgba(32, 36, 45, 0.09), rgba(255, 255, 255, 0.07));
    margin-top: 0;
    padding: 18px;
}

.site_header {
    backdrop-filter: blur(18px);
    background-color: light-dark(rgba(246, 247, 249, 0.92), rgba(7, 9, 13, 0.92));
    border-bottom: 1px solid light-dark(rgba(32, 36, 45, 0.10), rgba(255, 255, 255, 0.08));
    position: sticky;
    top: 0;
    z-index: 100;
}

.site_nav {
    margin: 0 auto;
    padding: 12px 0;
    width: min(1240px, calc(100% - 28px));
}

.status_badge {
    background-color: light-dark(#f7f9fb, #151b25);
    border: 1px solid light-dark(rgba(29, 36, 48, 0.09), rgba(255, 255, 255, 0.075));
    font-size: 0.68rem;
    font-weight: 850;
    color: light-dark(#565b66, #aeb9c8);
    letter-spacing: 0.06em;
    padding: 7px 9px;
    border-radius: 7px;
}

.studio_canvas {
    align-content: center;
    background: radial-gradient(circle at 50% 20%, rgba(101,221,255,.16), transparent 44%), light-dark(#f7f8fa,#111722);
    display: grid;
    gap: 12px;
    margin: 28px;
    place-items: center;
    border-radius: 16px;
}

.studio_canvas_badge {
    background-color: rgba(91,94,232,.12);
    font-size: .68rem;
    font-weight: 900;
    color: light-dark(#3337bd,#8deeff);
    letter-spacing: .12em;
    padding: 7px 10px;
    border-radius: 999px;
}

.studio_canvas_button {
    background: linear-gradient(135deg,#5b5ee8,#43c7ed);
    border: 0;
    font-weight: 900;
    color: #ffffff;
    padding: 11px 22px;
    border-radius: 10px;
}

.studio_code {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #dff8ff;
    line-height: 1.75;
    padding: 28px;
    white-space: pre-wrap;
}

.studio_editor {
    background-color: #07090d;
    border: 1px solid rgba(255,255,255,.08);
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border-radius: 20px;
}

.studio_heading {
    align-items: end;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.studio_kicker {
    font-size: .68rem;
    font-weight: 900;
    color: light-dark(#5b5ee8,#6ee7ff);
    letter-spacing: .18em;
}

.studio_page {
    display: grid;
    gap: 20px;
    margin: 0 auto;
    padding: 42px 0 72px;
    width: min(1320px, calc(100% - 28px));
}

.studio_panel_bar {
    border-bottom: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: flex;
    font-size: .7rem;
    font-weight: 900;
    color: light-dark(#687080,#93a4b8);
    justify-content: space-between;
    letter-spacing: .08em;
    padding: 13px 16px;
}

.studio_preview {
    background-color: light-dark(#ffffff,#0c1119);
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border-radius: 20px;
}

.studio_split {
    display: grid;
    gap: 14px;
    grid-template-columns: 1.05fr .95fr;
    min-height: 620px;
}

.studio_status {
    align-items: center;
    display: flex;
    font-size: .72rem;
    color: #4de6a4;
    gap: 8px;
}

.studio_toolbar {
    background-color: light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    border: 1px solid light-dark(rgba(32,36,45,.10),rgba(255,255,255,.08));
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(4,1fr);
    overflow: hidden;
    border-radius: 12px;
}

.submit_button {
    background-color: light-dark(#5b5ee8, #6ee7ff);
    border: 1px solid transparent;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 900;
    color: light-dark(#ffffff, #071016);
    padding: 13px 20px;
    border-radius: 8px;
    user-select: none;
    width: 100%;
}

.system_badges {
    align-items: center;
    display: flex;
    gap: 7px;
    justify-content: end;
}

.system_kicker {
    font-size: 0.72rem;
    font-weight: 800;
    color: light-dark(#777b85, #8591a2);
    letter-spacing: 0.12em;
    margin: 0;
}

.system_shell {
    background-color: light-dark(#ffffff, #0f141d);
    border: 1px solid light-dark(rgba(29, 36, 48, 0.09), rgba(255, 255, 255, 0.075));
    display: grid;
    gap: 0;
    overflow: hidden;
    border-radius: 20px;
}

.system_title {
    font-size: clamp(1.35rem, 4vw, 2rem);
    color: light-dark(#181b22, #ffffff);
    margin: 0;
}

.system_title_group {
    display: grid;
    gap: 3px;
}

.system_topbar {
    align-items: center;
    background-color: light-dark(#edf1f5, #0b1017);
    border-bottom: 1px solid light-dark(rgba(29, 36, 48, 0.075), rgba(255, 255, 255, 0.065));
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 18px 20px;
}

.telemetry_header {
    align-items: center;
    border-bottom: 1px solid light-dark(rgba(29, 36, 48, 0.075), rgba(255, 255, 255, 0.065));
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: 16px;
}

.telemetry_key {
    font-size: 0.82rem;
    color: light-dark(#777b85, #8995a6);
}

.telemetry_list {
    display: grid;
}

.telemetry_live {
    font-size: 0.72rem;
    font-weight: 900;
    color: light-dark(#176c50, #67e5a7);
}

.telemetry_panel {
    background-color: light-dark(#f8fafc, #0b1017);
    padding: 24px;
}

.telemetry_row {
    align-items: center;
    border-bottom: 1px solid light-dark(rgba(32, 36, 45, 0.07), rgba(255, 255, 255, 0.06));
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px 0;
}

.telemetry_title {
    font-size: 1rem;
    color: light-dark(#22262e, #f3f6fa);
    margin: 0;
}

.telemetry_value {
    font-size: 0.78rem;
    font-weight: 850;
    color: light-dark(#252932, #edf2f8);
    letter-spacing: 0.05em;
}

.terminal_bar {
    align-items: center;
    background-color: light-dark(#e7e5de, #11161d);
    border-bottom: 1px solid light-dark(rgba(29, 36, 48, 0.075), rgba(255, 255, 255, 0.065));
    display: grid;
    gap: 7px;
    grid-template-columns: auto auto auto minmax(0, 1fr);
    padding: 12px 14px;
}

.terminal_dot {
    font-size: 0.65rem;
    color: light-dark(#5b5ee8, #6ee7ff);
}

.terminal_name {
    font-size: 0.75rem;
    color: light-dark(#747984, #8e9aab);
    justify-content: end;
}

.terminal_section {
    background-color: light-dark(#ffffff, #0e1218);
    border: 1px solid light-dark(rgba(29, 36, 48, 0.09), rgba(255, 255, 255, 0.075));
    overflow: hidden;
    border-radius: 16px;
}

.theme_details {
    position: relative;
}

.theme_menu {
    background-color: light-dark(#ffffff, #0f141d);
    border: 1px solid light-dark(rgba(29, 36, 48, 0.09), rgba(255, 255, 255, 0.075));
    box-sizing: border-box;
    display: grid;
    gap: 3px;
    list-style: none;
    margin: 10px 0 0;
    max-width: calc(100vw - 24px);
    padding: 7px;
    position: absolute;
    border-radius: 13px;
    right: 0;
    box-shadow: 0 24px 60px light-dark(rgba(32, 36, 45, 0.16), rgba(0, 0, 0, 0.50));
    width: 220px;
    z-index: 140;
}

.theme_option {
    align-items: center;
    background-color: transparent;
    border: 1px solid transparent;
    box-sizing: border-box;
    cursor: pointer;
    display: grid;
    font-family: inherit;
    font-weight: 700;
    color: light-dark(#30343d, #dfe6ef);
    gap: 10px;
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 10px;
    border-radius: 8px;
    text-align: left;
    user-select: none;
    width: 100%;
}

.theme_option_text {
    display: block;
}

.theme_swatch_aurora {
    background: linear-gradient(135deg, #ff6a48, #685fff 52%, #47ddb7);
    border: 1px solid rgba(255, 255, 255, 0.30);
    display: block;
    height: 22px;
    border-radius: 6px;
    width: 22px;
}

.theme_swatch_dark {
    background-color: #090b10;
    border: 1px solid rgba(101, 221, 255, 0.22);
    display: block;
    height: 22px;
    border-radius: 6px;
    width: 22px;
}

.theme_swatch_light {
    background-color: #f1f0eb;
    border: 1px solid rgba(32, 36, 45, 0.14);
    display: block;
    height: 22px;
    border-radius: 6px;
    width: 22px;
}

.theme_swatch_midnight {
    background: radial-gradient(circle at 30% 28%, #65ddff 0%, #312e81 36%, #02040a 78%);
    border: 1px solid rgba(129, 140, 248, 0.28);
    display: block;
    height: 22px;
    border-radius: 6px;
    width: 22px;
}

.theme_swatch_system {
    background: linear-gradient(135deg, #f1f0eb 0%, #f1f0eb 48%, #090b10 52%, #090b10 100%);
    border: 1px solid rgba(100, 116, 139, 0.30);
    display: block;
    height: 22px;
    border-radius: 6px;
    width: 22px;
}

.theme_trigger {
    background-color: light-dark(#ffffff, #111722);
    border: 1px solid light-dark(rgba(32, 36, 45, 0.11), rgba(255, 255, 255, 0.09));
    box-sizing: border-box;
    cursor: pointer;
    display: grid;
    font-weight: 900;
    color: light-dark(#5b5ee8, #6ee7ff);
    height: 40px;
    list-style: none;
    padding: 0;
    place-items: center;
    border-radius: 9px;
    user-select: none;
    width: 40px;
}

.workspace_grid {
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
}

@media screen and (max-width: 768px) {
.account_field_grid {
    grid-template-columns: 1fr;
}

@media screen and (max-width: 768px) {
.account_form_footer {
    flex-wrap: wrap;
    text-align: center;
}

@media screen and (max-width: 768px) {
.account_form_panel {
    padding: 30px 20px;
}

@media screen and (max-width: 768px) {
.account_form_row {
    align-items: start;
    flex-direction: column;
}

@media screen and (max-width: 768px) {
.account_intro {
    padding: 30px 20px;
}

@media screen and (max-width: 768px) {
.account_intro_title {
    font-size: clamp(2.5rem, 13vw, 4rem);
}

@media screen and (max-width: 768px) {
.account_page {
    margin: 20px auto 0;
    padding-bottom: 48px;
    width: calc(100% - 20px);
}

@media screen and (max-width: 768px) {
.account_recovery_panel {
    padding: 28px 20px;
}

@media screen and (max-width: 768px) {
.account_recovery_shell {
    min-height: 0;
    padding: 18px;
}

@media screen and (max-width: 768px) {
.account_shell {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 18px;
}

@media screen and (max-width: 768px) {
.app_page {
    overflow-x: hidden;
}

@media screen and (max-width: 768px) {
.blog_bottom_grid {
    grid-template-columns: 1fr;
}

@media screen and (max-width: 768px) {
.blog_card {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    padding: 22px;
}

@media screen and (max-width: 768px) {
.blog_card_accent {
    grid-column: auto;
    min-height: 0;
}

@media screen and (max-width: 768px) {
.blog_card_compact {
    grid-column: auto;
    min-height: 0;
}

@media screen and (max-width: 768px) {
.blog_card_footer {
    align-items: start;
    flex-direction: column;
}

@media screen and (max-width: 768px) {
.blog_card_large {
    grid-column: auto;
    min-height: 0;
}

@media screen and (max-width: 768px) {
.blog_card_tall {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
}

@media screen and (max-width: 768px) {
.blog_card_top {
    flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
.blog_card_wide {
    grid-column: auto;
    min-height: 0;
}

@media screen and (max-width: 768px) {
.blog_featured {
    min-height: 0;
    padding: 22px;
}

@media screen and (max-width: 768px) {
.blog_featured_footer {
    align-items: start;
    flex-direction: column;
}

@media screen and (max-width: 768px) {
.blog_featured_meta {
    align-items: start;
    flex-direction: column;
}

@media screen and (max-width: 768px) {
.blog_hero {
    gap: 14px;
    grid-template-columns: 1fr;
    min-height: 0;
}

@media screen and (max-width: 768px) {
.blog_hero_copy {
    gap: 16px;
    padding: 28px 20px;
}

@media screen and (max-width: 768px) {
.blog_hero_title {
    font-size: clamp(2.7rem, 14vw, 4.5rem);
}

@media screen and (max-width: 768px) {
.blog_info_panel {
    padding: 22px;
}

@media screen and (max-width: 768px) {
.blog_masonry {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
}

@media screen and (max-width: 768px) {
.blog_page {
    gap: 20px;
    margin: 20px auto 0;
    width: calc(100% - 20px);
}

@media screen and (max-width: 768px) {
.blog_section_heading {
    align-items: start;
    flex-direction: column;
    gap: 10px;
}

@media screen and (max-width: 768px) {
.capability_grid {
    grid-template-columns: 1fr;
}

@media screen and (max-width: 768px) {
.command_line {
    align-items: start;
    gap: 6px;
    grid-template-columns: 1fr;
    margin: 24px 0 0;
    padding: 12px;
}

@media screen and (max-width: 768px) {
.command_panel {
    padding: 28px 20px;
}

@media screen and (max-width: 768px) {
.command_text {
    font-size: 0.98rem;
    line-height: 1.68;
}

@media screen and (max-width: 768px) {
.command_title {
    font-size: clamp(2.2rem, 11vw, 3.45rem);
    letter-spacing: -0.045em;
    line-height: 1.02;
}

@media screen and (max-width: 768px) {
.component_tile_tall {
    grid-row: auto;
}

@media screen and (max-width: 768px) {
.component_tile_wide {
    grid-column: auto;
}

@media screen and (max-width: 768px) {
.components_bento {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

@media screen and (max-width: 768px) {
.components_page {
    gap: 20px;
    padding: 32px 0 54px;
    width: calc(100% - 20px);
}

@media screen and (max-width: 768px) {
.components_title {
    font-size: clamp(2.8rem, 15vw, 5rem);
}

@media screen and (max-width: 768px) {
.d2_closing {
    min-height: 340px;
    padding: 34px 20px;
    border-radius: 18px;
}

@media screen and (max-width: 768px) {
.d2_closing_title {
    font-size: clamp(2.4rem,11.5vw,4rem);
}

@media screen and (max-width: 768px) {
.d4_ecosystem {
    gap: 18px;
    grid-template-columns: 1fr;
    padding: 30px 20px;
    border-radius: 18px;
}

@media screen and (max-width: 768px) {
.d4_ecosystem_statement {
    font-size: .92rem;
    padding: 16px;
}

@media screen and (max-width: 768px) {
.d4_ecosystem_title {
    font-size: clamp(2.3rem,11vw,3.8rem);
}

@media screen and (max-width: 768px) {
.dr_architecture {
    gap: 28px;
    grid-template-columns: 1fr;
    padding: 30px 20px;
    border-radius: 18px;
}

@media screen and (max-width: 768px) {
.dr_bento {
    grid-template-columns: 1fr;
}

@media screen and (max-width: 768px) {
.dr_card {
    min-height: 0;
    padding: 22px;
}

@media screen and (max-width: 768px) {
.dr_card_narrow {
    grid-column: auto;
}

@media screen and (max-width: 768px) {
.dr_card_wide {
    grid-column: auto;
}

@media screen and (max-width: 768px) {
.dr_check {
    min-height: 0;
}

@media screen and (max-width: 768px) {
.dr_check_grid {
    grid-template-columns: 1fr;
}

@media screen and (max-width: 768px) {
.dr_checks {
    padding: 24px 0;
}

@media screen and (max-width: 768px) {
.dr_closing {
    min-height: 340px;
    padding: 34px 20px;
    border-radius: 18px;
}

@media screen and (max-width: 768px) {
.dr_closing_title {
    font-size: clamp(2.4rem,11.5vw,4rem);
}

@media screen and (max-width: 768px) {
.dr_ecosystem {
    gap: 18px;
    grid-template-columns: 1fr;
    padding: 30px 20px;
    border-radius: 18px;
}

@media screen and (max-width: 768px) {
.dr_ecosystem_statement {
    font-size: .92rem;
    padding: 16px;
}

@media screen and (max-width: 768px) {
.dr_ecosystem_title {
    font-size: clamp(2.3rem,11vw,3.8rem);
}

@media screen and (max-width: 768px) {
.dr_future {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 18px;
}

@media screen and (max-width: 768px) {
.dr_future_copy {
    padding: 32px 20px;
}

@media screen and (max-width: 768px) {
.dr_future_dragon {
    max-height: 420px;
    transform: none;
    width: 100%;
}

@media screen and (max-width: 768px) {
.dr_future_title {
    font-size: clamp(2.5rem,12vw,4rem);
}

@media screen and (max-width: 768px) {
.dr_future_visual {
    min-height: 360px;
}

@media screen and (max-width: 768px) {
.dr_hero {
    gap: 16px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
    padding: 28px 20px 22px;
    border-radius: 20px;
}

@media screen and (max-width: 768px) {
.dr_hero_dragon {
    max-height: 390px;
    transform: none;
    width: 100%;
}

@media screen and (max-width: 768px) {
.dr_hero_text {
    font-size: .96rem;
}

@media screen and (max-width: 768px) {
.dr_hero_title {
    font-size: clamp(2.6rem,12.5vw,4.4rem);
}

@media screen and (max-width: 768px) {
.dr_hero_visual {
    min-height: 360px;
}

@media screen and (max-width: 768px) {
.dr_page {
    gap: 16px;
    padding: 20px 0 54px;
    width: calc(100% - 20px);
}

@media screen and (max-width: 768px) {
.dr_platform_card {
    min-height: 0;
    padding: 22px;
}

@media screen and (max-width: 768px) {
.dr_platforms {
    grid-template-columns: 1fr;
}

@media screen and (max-width: 768px) {
.dr_process {
    padding: 30px 20px;
    border-radius: 18px;
}

@media screen and (max-width: 768px) {
.dr_process_arrow {
    text-align: center;
    transform: rotate(90deg);
}

@media screen and (max-width: 768px) {
.dr_process_node {
    min-height: 0;
}

@media screen and (max-width: 768px) {
.dr_process_track {
    grid-template-columns: 1fr;
}

@media screen and (max-width: 768px) {
.dr_profile {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 18px;
}

@media screen and (max-width: 768px) {
.dr_profile_copy {
    padding: 30px 20px;
}

@media screen and (max-width: 768px) {
.dr_profile_dragon {
    max-height: 410px;
    transform: none;
    width: 100%;
}

@media screen and (max-width: 768px) {
.dr_profile_row {
    gap: 10px;
    grid-template-columns: 110px minmax(0,1fr);
}

@media screen and (max-width: 768px) {
.dr_profile_visual {
    min-height: 360px;
}

@media screen and (max-width: 768px) {
.dr_roadmap {
    grid-template-columns: 1fr;
}

@media screen and (max-width: 768px) {
.dr_section_head {
    align-items: start;
    flex-direction: column;
    padding: 24px 2px 4px;
}

@media screen and (max-width: 768px) {
.dr_section_note {
    max-width: none;
}

@media screen and (max-width: 768px) {
.dr_section_title {
    font-size: clamp(2rem,10vw,3.25rem);
}

@media screen and (max-width: 768px) {
.dr_stat {
    padding: 14px 13px;
}

@media screen and (max-width: 768px) {
.dr_status_strip {
    grid-column: auto;
    grid-template-columns: repeat(2,1fr);
}

@media screen and (max-width: 768px) {
.dr_visual_badge {
    bottom: 5%;
    right: 4%;
}

@media screen and (max-width: 768px) {
.engine_core_orb {
    width: min(210px, 72vw);
}

@media screen and (max-width: 768px) {
.engine_heading {
    font-size: clamp(3rem, 17vw, 5.2rem);
    line-height: .9;
}

@media screen and (max-width: 768px) {
.engine_hero {
    gap: 22px;
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 28px 20px;
    border-radius: 18px;
}

@media screen and (max-width: 768px) {
.engine_link {
    text-align: center;
    transform: rotate(90deg);
}

@media screen and (max-width: 768px) {
.engine_node {
    min-width: 0;
    width: auto;
}

@media screen and (max-width: 768px) {
.engine_page {
    gap: 20px;
    padding: 30px 0 54px;
    width: calc(100% - 20px);
}

@media screen and (max-width: 768px) {
.engine_pipeline {
    grid-template-columns: 1fr;
    justify-content: stretch;
    overflow-x: visible;
    padding: 18px;
}

@media screen and (max-width: 768px) {
.engine_signals {
    grid-template-columns: 1fr;
}

@media screen and (max-width: 768px) {
.footer_chip {
    white-space: normal;
    word-break: break-word;
}

@media screen and (max-width: 768px) {
.footer_credit {
    justify-self: center;
    min-width: 0;
    text-align: center;
    word-break: break-word;
}

@media screen and (max-width: 768px) {
.footer_identity {
    justify-items: center;
    min-width: 0;
    text-align: center;
}

@media screen and (max-width: 768px) {
.footer_shell {
    align-items: center;
    box-sizing: border-box;
    gap: 12px;
    grid-template-columns: 1fr;
    justify-content: center;
    text-align: center;
    width: 100%;
}

@media screen and (max-width: 768px) {
.footer_status {
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
}

@media screen and (max-width: 768px) {
.guard_page {
    gap: 28px;
    padding: 34px 0 56px;
    width: calc(100% - 20px);
}

@media screen and (max-width: 768px) {
.guard_row {
    align-items: start;
    gap: 9px;
    grid-template-columns: 1fr;
    padding: 18px 4px;
}

@media screen and (max-width: 768px) {
.guard_stage {
    min-height: 330px;
}

@media screen and (max-width: 768px) {
.guard_state {
    justify-self: start;
}

@media screen and (max-width: 768px) {
.guard_title {
    font-size: clamp(3rem, 17vw, 5.4rem);
}

@media screen and (max-width: 768px) {
.header_actions {
    grid-column: 2;
    grid-row: 1;
    justify-content: end;
}

@media screen and (max-width: 768px) {
.main_layout {
    gap: 18px;
    margin: 20px auto 0;
    width: calc(100% - 20px);
}

@media screen and (max-width: 768px) {
.nav_shell {
    align-items: center;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

@media screen and (max-width: 768px) {
.pipeline_grid {
    grid-template-columns: 1fr;
}

@media screen and (max-width: 768px) {
.pipeline_section {
    padding: 18px 0;
}

@media screen and (max-width: 768px) {
.reference_code {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: auto;
    padding: 18px;
    word-break: break-word;
}

@media screen and (max-width: 768px) {
.reference_code_bar {
    flex-wrap: wrap;
    gap: 8px;
}

@media screen and (max-width: 768px) {
.reference_code_window {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

@media screen and (max-width: 768px) {
.reference_document {
    gap: 18px;
    min-width: 0;
}

@media screen and (max-width: 768px) {
.reference_heading {
    padding: 22px 18px;
}

@media screen and (max-width: 768px) {
.reference_notes {
    grid-template-columns: 1fr;
}

@media screen and (max-width: 768px) {
.reference_page {
    gap: 18px;
    grid-template-columns: 1fr;
    padding: 26px 0 54px;
    width: calc(100% - 20px);
}

@media screen and (max-width: 768px) {
.reference_sidebar {
    padding: 18px;
    position: relative;
    top: auto;
}

@media screen and (max-width: 768px) {
.runtime_strip {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    width: fit-content;
}

@media screen and (max-width: 768px) {
.site_footer {
    overflow: hidden;
}

@media screen and (max-width: 768px) {
.site_nav {
    padding: 10px 0;
    width: calc(100% - 20px);
}

@media screen and (max-width: 768px) {
.studio_canvas {
    margin: 16px;
    min-height: 280px;
}

@media screen and (max-width: 768px) {
.studio_code {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: auto;
    padding: 18px;
    word-break: break-word;
}

@media screen and (max-width: 768px) {
.studio_editor {
    min-width: 0;
}

@media screen and (max-width: 768px) {
.studio_heading {
    align-items: start;
    flex-direction: column;
    gap: 10px;
}

@media screen and (max-width: 768px) {
.studio_page {
    gap: 16px;
    padding: 26px 0 54px;
    width: calc(100% - 20px);
}

@media screen and (max-width: 768px) {
.studio_panel_bar {
    flex-wrap: wrap;
    gap: 8px;
}

@media screen and (max-width: 768px) {
.studio_preview {
    min-width: 0;
}

@media screen and (max-width: 768px) {
.studio_split {
    gap: 14px;
    grid-template-columns: 1fr;
    min-height: 0;
}

@media screen and (max-width: 768px) {
.studio_toolbar {
    grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 768px) {
.system_badges {
    flex-wrap: wrap;
    justify-content: start;
}

@media screen and (max-width: 768px) {
.system_shell {
    border-radius: 16px;
}

@media screen and (max-width: 768px) {
.system_topbar {
    align-items: start;
    gap: 12px;
    grid-template-columns: 1fr;
    padding: 16px;
}

@media screen and (max-width: 768px) {
.telemetry_header {
    grid-template-columns: 1fr auto;
}

@media screen and (max-width: 768px) {
.telemetry_panel {
    padding: 20px;
}

@media screen and (max-width: 768px) {
.telemetry_row {
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
}

@media screen and (max-width: 768px) {
.workspace_grid {
    grid-template-columns: 1fr;
}