/* Nested Learning & HOPE Architecture Page Styles */

.nl_main {
    background: linear-gradient(180deg, #f9f8f4, #fff7e8 43.2%, #effaea 77.2%);
}

/* Hero Section */
.nl_hero {
    padding: 13vw 11.4vw 4vw 11.4vw;
    text-align: center;
}

.nl_hero_content h1 {
    font-weight: 500;
    font-size: 3vw;
    line-height: 1.3;
    color: #1a1a1a;
}

.nl_hero_content p {
    font-size: 1.2vw;
    color: #2B2B2B;
    margin-top: 1.5vw;
}

/* Tab Navigation */
.nl_tabs_section {
    padding: 2vw 11.4vw;
}

.nl_tabs_wrap {
    display: flex;
    justify-content: center;
    gap: 0;
    background: #f9f8f4;
    border-radius: 0.7vw;
    padding: 0.3vw;
    max-width: fit-content;
    margin: 0 auto;
}

.nl_tab {
    padding: 0.8vw 2vw;
    font-size: 1vw;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0.5vw;
    color: #2B2B2B;
    transition: all 0.2s ease;
}

.nl_tab:hover {
    background: #fff;
    color: #1E1614;
}

.nl_tab.active {
    background: #1E1614;
    color: #fff;
}

/* Tab Content */
.nl_tab_content {
    display: none;
    padding: 2vw 11.4vw 4vw 11.4vw;
}

.nl_tab_content.active {
    display: block;
}

/* Content Card */
.nl_content_card {
    background: #fff;
    border-radius: 1.3vw;
    padding: 3vw;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.nl_section_header {
    text-align: center;
    margin-bottom: 2vw;
}

.nl_section_header h2 {
    font-weight: 500;
    font-size: 2vw;
    color: #1a1a1a;
    margin-bottom: 0.5vw;
}

.nl_section_header p {
    font-size: 1vw;
    color: #666;
}

/* Equation Box */
.nl_equation_box {
    background: linear-gradient(135deg, #e5f1de 0%, #d8eace 100%);
    border-radius: 1vw;
    padding: 1.8vw 2vw;
    margin-bottom: 2vw;
    text-align: center;
}

.nl_equation_box.nl_eq_orange {
    background: linear-gradient(135deg, #fcf3e1 0%, #f5e8d0 100%);
}

.equation_label {
    font-size: 0.85vw;
    font-weight: 600;
    color: #3d5a30;
    margin-bottom: 0.8vw;
}

.nl_eq_orange .equation_label {
    color: #8b6914;
}

.equation_formula {
    font-size: 1.3vw;
    font-family: 'Times New Roman', serif;
    color: #1a1a1a;
    margin-bottom: 0.5vw;
}

.equation_desc {
    font-size: 0.9vw;
    color: #5a7a4a;
}

.nl_eq_orange .equation_desc {
    color: #a68a3d;
}

/* Info Cards */
.nl_info_card {
    border-radius: 1vw;
    padding: 1.5vw 2vw;
    margin-bottom: 2vw;
}

.nl_info_card h4 {
    font-size: 1.1vw;
    font-weight: 600;
    margin-bottom: 0.8vw;
}

.nl_info_card p {
    font-size: 0.95vw;
    line-height: 1.6;
    margin-bottom: 0.5vw;
}

.nl_info_card p:last-child {
    margin-bottom: 0;
}

.nl_card_green {
    background: linear-gradient(135deg, #e5f1de 0%, #d8eace 100%);
}

.nl_card_green h4 {
    color: #3d5a30;
}

.nl_card_green p {
    color: #5a7a4a;
}

.nl_card_blue {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
}

.nl_card_blue h4 {
    color: #0369a1;
}

.nl_card_blue p {
    color: #0284c7;
}

.nl_card_orange {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
}

.nl_card_orange h4,
.nl_card_orange strong {
    color: #c2410c;
}

.nl_card_orange p {
    color: #ea580c;
}

.nl_card_yellow {
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
}

.nl_card_yellow h5 {
    color: #a16207;
}

.nl_card_yellow p {
    color: #ca8a04;
}

.nl_card_pink {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
}

.nl_card_pink h5 {
    color: #be185d;
}

.nl_card_pink p {
    color: #db2777;
}

/* Frequency Section */
.nl_frequency_section {
    margin: 2vw 0;
}

.nl_frequency_section h4 {
    font-size: 1.1vw;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.5vw;
}

.frequency_desc {
    font-size: 0.9vw;
    color: #666;
    margin-bottom: 1.5vw;
}

.frequency_bars {
    display: flex;
    flex-direction: column;
    gap: 0.8vw;
}

.frequency_bar {
    display: flex;
    align-items: center;
    gap: 1vw;
    background: #f9f8f4;
    border-radius: 0.6vw;
    padding: 1vw 1.5vw;
}

.freq_dot {
    width: 1vw;
    height: 1vw;
    min-width: 1vw;
    border-radius: 50%;
}

.freq_info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.freq_label {
    font-size: 0.95vw;
    font-weight: 500;
    color: #1a1a1a;
}

.freq_value {
    font-size: 0.85vw;
    color: #666;
}

.freq_indicator {
    display: flex;
    gap: 0.3vw;
}

.freq_indicator span {
    width: 0.6vw;
    height: 0.6vw;
    background: #789165;
    border-radius: 50%;
}

/* Architecture Section */
.nl_arch_toggle {
    display: flex;
    justify-content: center;
    gap: 0.5vw;
    margin-bottom: 2vw;
}

.arch_btn {
    padding: 0.7vw 1.8vw;
    font-size: 0.95vw;
    font-weight: 500;
    background: #f9f8f4;
    border: 1px solid #e5e7eb;
    border-radius: 0.5vw;
    cursor: pointer;
    transition: all 0.2s ease;
}

.arch_btn:hover {
    background: #fff;
    border-color: #789165;
}

.arch_btn.active {
    background: #1E1614;
    color: #fff;
    border-color: #1E1614;
}

/* Architecture Views */
.nl_arch_view {
    display: none;
}

.nl_arch_view.active {
    display: block;
}

.arch_block {
    background: #f9f8f4;
    border-radius: 1vw;
    padding: 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
}

.arch_block.arch_transformer {
    border: 2px solid #e5e7eb;
}

.arch_block.arch_hope {
    border: 2px solid #789165;
}

.arch_title {
    text-align: center;
    margin-bottom: 1vw;
}

.arch_title h3 {
    font-size: 1.4vw;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.3vw;
}

.arch_title span {
    font-size: 0.85vw;
    color: #666;
}

.arch_node {
    padding: 0.6vw 1.5vw;
    border-radius: 0.5vw;
    font-size: 1vw;
    font-weight: 500;
}

.arch_input {
    background: #dbeafe;
    color: #1e40af;
}

.arch_output {
    background: #dcfce7;
    color: #166534;
}

.arch_norm {
    background: #f3f4f6;
    color: #374151;
    font-size: 0.9vw;
}

.arch_arrow {
    width: 2px;
    height: 1.5vw;
    background: #9ca3af;
    position: relative;
}

.arch_arrow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #9ca3af;
}

/* Architecture Modules */
.arch_module {
    width: 100%;
    max-width: 30vw;
    background: #fff;
    border-radius: 0.8vw;
    padding: 1.5vw;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.arch_module h4 {
    font-size: 1.1vw;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.5vw;
}

.arch_subtitle {
    font-size: 0.8vw;
    color: #666;
    display: block;
    margin-bottom: 0.8vw;
}

.arch_projections {
    display: flex;
    justify-content: center;
    gap: 0.8vw;
    margin-bottom: 0.5vw;
}

.arch_projections span {
    padding: 0.4vw 0.8vw;
    background: #e5e7eb;
    border-radius: 0.3vw;
    font-size: 0.9vw;
    font-family: monospace;
}

.arch_note {
    font-size: 0.8vw;
    color: #666;
    margin: 0.3vw 0;
}

.arch_formula {
    font-size: 0.85vw;
    font-family: monospace;
    color: #444;
    margin: 0.5vw 0;
}

.arch_computation {
    font-size: 1vw;
    font-family: 'Times New Roman', serif;
    color: #1a1a1a;
    margin: 0.5vw 0;
}

.arch_frozen {
    font-size: 0.85vw;
    color: #6b7280;
    margin-top: 0.5vw;
}

/* MLP Visual */
.arch_mlp_visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
    margin: 0.8vw 0;
}

.mlp_layer {
    width: 1.5vw;
    height: 3vw;
    background: #e5e7eb;
    border-radius: 0.2vw;
}

.mlp_layer.wide {
    width: 2vw;
    height: 4vw;
}

.arch_mlp_visual span {
    font-size: 0.8vw;
    color: #9ca3af;
}

/* Memory Module (HOPE) */
.arch_memory_module {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: 0.6vw;
    padding: 1vw;
    margin: 0.8vw 0;
    border: 2px solid #10b981;
}

.memory_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5vw;
}

.memory_header span:first-child {
    font-size: 0.95vw;
    font-weight: 600;
    color: #065f46;
}

.memory_active {
    font-size: 0.75vw;
    background: #10b981;
    color: #fff;
    padding: 0.2vw 0.6vw;
    border-radius: 0.3vw;
}

.memory_equation {
    font-size: 0.9vw;
    font-family: 'Times New Roman', serif;
    color: #1a1a1a;
    margin-bottom: 0.3vw;
}

.memory_desc {
    font-size: 0.75vw;
    color: #047857;
    margin-bottom: 0.5vw;
}

.memory_visual {
    width: 3vw;
    height: 3vw;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 0.4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.9vw;
    margin: 0 auto;
}

.memory_highlight {
    font-size: 0.8vw;
    color: #059669;
    font-weight: 500;
    margin-top: 0.5vw;
}

/* CMS Module */
.arch_cms {
    border: 2px dashed #789165;
}

.cms_equation {
    font-size: 0.9vw;
    font-family: monospace;
    color: #444;
    margin-bottom: 0.8vw;
}

.cms_visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
    margin: 0.8vw 0;
}

.cms_mlp {
    padding: 0.6vw 0.8vw;
    border-radius: 0.4vw;
    color: #fff;
    text-align: center;
    min-width: 4vw;
}

.cms_mlp span {
    display: block;
    font-size: 0.85vw;
    font-weight: 600;
}

.cms_mlp small {
    display: block;
    font-size: 0.7vw;
    opacity: 0.9;
}

.cms_arrow {
    color: #9ca3af;
    font-size: 1vw;
}

.cms_desc {
    font-size: 0.85vw;
    color: #666;
    margin: 0.5vw 0;
}

.cms_note {
    font-size: 0.8vw;
    color: #789165;
}

/* Architecture Info Boxes */
.arch_info_box {
    width: 100%;
    max-width: 30vw;
    padding: 1vw 1.5vw;
    border-radius: 0.6vw;
    font-size: 0.9vw;
    margin-top: 1vw;
}

.arch_warning {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
}

.arch_success {
    background: #d1fae5;
    border: 1px solid #10b981;
    color: #065f46;
}

/* Side-by-Side Comparison */
.arch_comparison_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
}

.arch_block.compact {
    padding: 1.5vw;
    gap: 0.8vw;
}

.arch_block.compact .arch_title {
    margin-bottom: 0.5vw;
}

.arch_block.compact .arch_title h3 {
    font-size: 1.1vw;
}

.arch_module.compact {
    max-width: 100%;
    padding: 1vw;
}

.arch_module.compact h4 {
    font-size: 0.95vw;
    margin-bottom: 0.3vw;
}

/* Optimizer Section */
.nl_arrow_down {
    text-align: center;
    font-size: 2vw;
    color: #9ca3af;
    margin: 1vw 0;
}

.nl_reinterpret {
    text-align: center;
    font-size: 1vw;
    color: #666;
    font-style: italic;
    margin-bottom: 1.5vw;
}

/* Nested Box */
.nl_nested_box {
    margin: 1.5vw 0;
}

.nested_level {
    border-radius: 0.8vw;
    padding: 1.5vw;
}

.level_2 {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
}

.level_1 {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid #10b981;
    margin-top: 1vw;
}

.level_label {
    font-size: 0.85vw;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.5vw;
}

.level_formula {
    font-size: 1vw;
    font-family: 'Times New Roman', serif;
    color: #1a1a1a;
    margin-bottom: 0.3vw;
}

.level_desc {
    font-size: 0.85vw;
    color: #047857;
}

/* Extensions */
.nl_extensions {
    margin-top: 2vw;
}

.nl_extensions h4 {
    font-size: 1.1vw;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 1vw;
}

.extensions_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1vw;
}

.extension_card {
    border-radius: 0.8vw;
    padding: 1.2vw;
}

.extension_card h5 {
    font-size: 0.95vw;
    font-weight: 600;
    margin-bottom: 0.4vw;
}

.extension_card p {
    font-size: 0.85vw;
    line-height: 1.5;
    margin: 0;
}

/* Training Section */
.nl_training_visual {
    margin-bottom: 2vw;
}

.training_level {
    border-radius: 0.8vw;
    padding: 1.2vw;
    margin-bottom: 0.8vw;
}

.training_level.level_4 {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 2px solid #ef4444;
}

.training_level.level_3 {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
    border: 2px solid #f97316;
}

.training_level.level_2 {
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    border: 2px solid #eab308;
}

.training_level.level_1 {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid #22c55e;
}

.level_header {
    display: flex;
    align-items: center;
    gap: 0.8vw;
    margin-bottom: 0.8vw;
}

.level_dot {
    width: 0.8vw;
    height: 0.8vw;
    min-width: 0.8vw;
    border-radius: 50%;
}

.level_header span:last-child {
    font-size: 0.95vw;
    font-weight: 500;
    color: #1a1a1a;
}

.level_equation {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0.5vw;
    padding: 0.8vw 1vw;
    font-size: 0.9vw;
    font-family: 'Times New Roman', serif;
    color: #1a1a1a;
    margin-bottom: 0.8vw;
}

.eq_ref {
    font-size: 0.75vw;
    color: #666;
    font-family: sans-serif;
    margin-left: 0.5vw;
}

.eq_label {
    font-size: 0.8vw;
    font-weight: 600;
    color: #1a1a1a;
    font-family: sans-serif;
    margin-bottom: 0.3vw;
}

.eq_note {
    font-size: 0.8vw;
    color: #666;
    font-family: sans-serif;
    margin-top: 0.3vw;
}

/* Memory Animation */
.memory_animation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8vw;
    margin-top: 1vw;
}

.mem_block {
    padding: 0.8vw 1.2vw;
    border-radius: 0.5vw;
    font-size: 0.9vw;
    font-weight: 500;
}

.mem_block.current {
    background: #10b981;
    color: #fff;
}

.mem_block.prev {
    background: #6b7280;
    color: #fff;
}

.mem_block.delta {
    background: #3b82f6;
    color: #fff;
}

.mem_equals,
.mem_plus {
    font-size: 1.2vw;
    color: #6b7280;
}

/* Steps List */
.nl_steps_list {
    margin-top: 2vw;
}

.nl_steps_list h4 {
    font-size: 1.1vw;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 1vw;
}

.step_item {
    display: flex;
    gap: 1vw;
    margin-bottom: 1vw;
}

.step_num {
    width: 2vw;
    height: 2vw;
    min-width: 2vw;
    background: #789165;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9vw;
    font-weight: 600;
}

.step_content {
    flex: 1;
}

.step_content strong {
    font-size: 0.95vw;
    color: #1a1a1a;
}

.step_content p {
    font-size: 0.85vw;
    color: #666;
    margin: 0.3vw 0 0 0;
}

/* Inference Section */
.nl_inference_visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8vw;
    margin-bottom: 2vw;
}

.inf_node {
    text-align: center;
}

.inf_input span,
.inf_output span {
    font-size: 0.85vw;
    color: #666;
    display: block;
}

.inf_token {
    padding: 0.5vw 1vw;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 0.4vw;
    font-size: 1vw;
    font-weight: 500;
    margin-top: 0.3vw;
}

.inf_arrow {
    width: 2px;
    height: 1.2vw;
    background: #9ca3af;
    position: relative;
}

.inf_arrow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #9ca3af;
}

/* Inference Projections */
.inf_projections {
    display: flex;
    gap: 0.8vw;
}

.inf_proj {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 0.4vw;
    padding: 0.5vw 1vw;
    display: flex;
    align-items: center;
    gap: 0.4vw;
}

.inf_proj span {
    font-size: 0.9vw;
    font-family: monospace;
    color: #374151;
}

.inf_proj small {
    font-size: 0.7vw;
    color: #9ca3af;
}

.inf_note {
    font-size: 0.8vw;
    color: #666;
    font-family: monospace;
    margin: 0.5vw 0;
}

/* KVQ */
.inf_kvq {
    display: flex;
    gap: 0.8vw;
}

.kvq_item {
    padding: 0.4vw 0.8vw;
    background: #e5e7eb;
    border-radius: 0.3vw;
    font-size: 0.9vw;
    font-family: monospace;
    color: #374151;
}

/* Inference Memory Block */
.inf_memory_block {
    width: 100%;
    max-width: 35vw;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 2px solid #10b981;
    border-radius: 0.8vw;
    padding: 1.5vw;
    text-align: center;
}

.inf_memory_header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8vw;
    margin-bottom: 0.8vw;
}

.inf_memory_header span:first-child {
    font-size: 1vw;
    font-weight: 600;
    color: #065f46;
}

.inf_active_badge {
    font-size: 0.7vw;
    background: #10b981;
    color: #fff;
    padding: 0.2vw 0.5vw;
    border-radius: 0.3vw;
    font-weight: 600;
}

.inf_memory_eq {
    font-size: 0.95vw;
    font-family: 'Times New Roman', serif;
    color: #1a1a1a;
    margin-bottom: 0.5vw;
}

.inf_memory_desc {
    font-size: 0.8vw;
    color: #047857;
    margin-bottom: 0.8vw;
}

.inf_memory_visual {
    width: 3vw;
    height: 3vw;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 0.4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.9vw;
    margin: 0 auto 0.5vw auto;
}

.inf_memory_highlight {
    font-size: 0.85vw;
    color: #059669;
    font-weight: 500;
    margin: 0;
}

/* Inference Output */
.inf_output_block {
    background: #dcfce7;
    border-radius: 0.5vw;
    padding: 0.8vw 1.5vw;
    text-align: center;
}

.inf_output_block span {
    font-size: 1vw;
    font-family: 'Times New Roman', serif;
    color: #166534;
    font-weight: 500;
}

.inf_output_block small {
    display: block;
    font-size: 0.75vw;
    color: #15803d;
    margin-top: 0.2vw;
}

/* Inference CMS */
.inf_cms_block {
    width: 100%;
    max-width: 35vw;
    background: #f9f8f4;
    border: 2px dashed #789165;
    border-radius: 0.8vw;
    padding: 1.5vw;
    text-align: center;
}

.inf_cms_block h4 {
    font-size: 0.95vw;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.8vw;
}

.inf_cms_visual {
    display: flex;
    justify-content: center;
    gap: 0.5vw;
    margin-bottom: 0.5vw;
}

.inf_cms_mlp {
    padding: 0.5vw 0.8vw;
    border-radius: 0.3vw;
    color: #fff;
    font-size: 0.8vw;
    font-weight: 500;
}

.inf_cms_block p {
    font-size: 0.8vw;
    color: #666;
    margin: 0;
}

/* Key Equations Section */
.nl_equations_section {
    padding: 4vw 11.4vw 8vw 11.4vw;
}

.nl_equations_section h2 {
    font-weight: 500;
    font-size: 2vw;
    text-align: center;
    margin-bottom: 2vw;
    color: #1a1a1a;
}

.nl_equations_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;
    max-width: 55vw;
    margin: 0 auto;
}

.eq_ref_card {
    background: #f9f8f4;
    border: 1px solid #e5e7eb;
    border-radius: 0.6vw;
    padding: 1vw 1.2vw;
    font-size: 0.9vw;
    color: #1a1a1a;
}

.eq_ref_card code {
    background: #e5e7eb;
    padding: 0.2vw 0.5vw;
    border-radius: 0.3vw;
    font-size: 0.85vw;
    color: #789165;
    margin-right: 0.5vw;
}

/* Mobile Responsive */
@media (max-width: 500px) {
    .nl_hero {
        padding: 43vw 5vw 10vw 5vw;
    }

    .nl_hero_content h1 {
        font-size: 7vw;
    }

    .nl_hero_content p {
        font-size: 4vw;
        margin-top: 4vw;
    }

    .nl_tabs_section {
        padding: 5vw;
        overflow-x: auto;
    }

    .nl_tabs_wrap {
        width: max-content;
        border-radius: 3vw;
        padding: 1vw;
    }

    .nl_tab {
        padding: 3vw 4vw;
        font-size: 3.5vw;
        border-radius: 2vw;
        white-space: nowrap;
    }

    .nl_tab_content {
        padding: 0 5vw 10vw 5vw;
    }

    .nl_content_card {
        border-radius: 4vw;
        padding: 6vw;
    }

    .nl_section_header h2 {
        font-size: 5.5vw;
    }

    .nl_section_header p {
        font-size: 3.5vw;
    }

    .nl_equation_box {
        border-radius: 4vw;
        padding: 5vw;
        margin-bottom: 5vw;
    }

    .equation_label {
        font-size: 3vw;
        margin-bottom: 2vw;
    }

    .equation_formula {
        font-size: 4vw;
        margin-bottom: 2vw;
    }

    .equation_desc {
        font-size: 3.2vw;
    }

    .nl_info_card {
        border-radius: 4vw;
        padding: 5vw;
        margin-bottom: 5vw;
    }

    .nl_info_card h4 {
        font-size: 4vw;
        margin-bottom: 3vw;
    }

    .nl_info_card p {
        font-size: 3.3vw;
        margin-bottom: 2vw;
    }

    .nl_frequency_section {
        margin: 5vw 0;
    }

    .nl_frequency_section h4 {
        font-size: 4vw;
        margin-bottom: 2vw;
    }

    .frequency_desc {
        font-size: 3.2vw;
        margin-bottom: 4vw;
    }

    .frequency_bars {
        gap: 3vw;
    }

    .frequency_bar {
        gap: 3vw;
        padding: 4vw;
        border-radius: 3vw;
    }

    .freq_dot {
        width: 4vw;
        height: 4vw;
        min-width: 4vw;
    }

    .freq_info {
        flex-direction: column;
        align-items: flex-start;
        gap: 1vw;
    }

    .freq_label {
        font-size: 3.5vw;
    }

    .freq_value {
        font-size: 3vw;
    }

    .freq_indicator span {
        width: 2vw;
        height: 2vw;
    }

    .nl_arch_toggle {
        flex-wrap: wrap;
        gap: 2vw;
        margin-bottom: 5vw;
    }

    .arch_btn {
        padding: 3vw 5vw;
        font-size: 3.5vw;
        border-radius: 2vw;
    }

    .arch_block {
        border-radius: 4vw;
        padding: 5vw;
        gap: 3vw;
    }

    .arch_title h3 {
        font-size: 5vw;
    }

    .arch_title span {
        font-size: 3vw;
    }

    .arch_node {
        padding: 2.5vw 5vw;
        border-radius: 2vw;
        font-size: 4vw;
    }

    .arch_arrow {
        height: 5vw;
    }

    .arch_module {
        max-width: 100%;
        border-radius: 3vw;
        padding: 5vw;
    }

    .arch_module h4 {
        font-size: 4vw;
        margin-bottom: 2vw;
    }

    .arch_subtitle {
        font-size: 3vw;
        margin-bottom: 3vw;
    }

    .arch_projections {
        gap: 2vw;
        margin-bottom: 2vw;
    }

    .arch_projections span {
        padding: 2vw 3vw;
        font-size: 3.5vw;
        border-radius: 1.5vw;
    }

    .arch_note,
    .arch_frozen {
        font-size: 3vw;
    }

    .arch_formula {
        font-size: 3vw;
    }

    .arch_computation {
        font-size: 3.5vw;
    }

    .arch_mlp_visual {
        gap: 2vw;
        margin: 3vw 0;
    }

    .mlp_layer {
        width: 6vw;
        height: 12vw;
    }

    .mlp_layer.wide {
        width: 8vw;
        height: 16vw;
    }

    .arch_memory_module {
        border-radius: 3vw;
        padding: 4vw;
    }

    .memory_header span:first-child {
        font-size: 3.5vw;
    }

    .memory_active {
        font-size: 2.8vw;
        padding: 1vw 2vw;
    }

    .memory_equation {
        font-size: 3.5vw;
    }

    .memory_desc {
        font-size: 3vw;
    }

    .memory_visual {
        width: 12vw;
        height: 12vw;
        font-size: 4vw;
    }

    .memory_highlight {
        font-size: 3vw;
    }

    .cms_equation {
        font-size: 3vw;
    }

    .cms_visual {
        gap: 2vw;
        flex-wrap: wrap;
    }

    .cms_mlp {
        padding: 3vw;
        min-width: 18vw;
    }

    .cms_mlp span {
        font-size: 3vw;
    }

    .cms_mlp small {
        font-size: 2.5vw;
    }

    .cms_desc,
    .cms_note {
        font-size: 3vw;
    }

    .arch_info_box {
        max-width: 100%;
        padding: 4vw 5vw;
        border-radius: 3vw;
        font-size: 3.3vw;
    }

    .arch_comparison_grid {
        grid-template-columns: 1fr;
        gap: 5vw;
    }

    .nl_arrow_down {
        font-size: 8vw;
        margin: 4vw 0;
    }

    .nl_reinterpret {
        font-size: 3.5vw;
        margin-bottom: 4vw;
    }

    .nested_level {
        border-radius: 3vw;
        padding: 4vw;
    }

    .level_label {
        font-size: 3vw;
        margin-bottom: 2vw;
    }

    .level_formula {
        font-size: 3.5vw;
    }

    .level_desc {
        font-size: 3vw;
    }

    .nl_extensions {
        margin-top: 5vw;
    }

    .nl_extensions h4 {
        font-size: 4vw;
        margin-bottom: 4vw;
    }

    .extensions_grid {
        grid-template-columns: 1fr;
        gap: 3vw;
    }

    .extension_card {
        border-radius: 3vw;
        padding: 4vw;
    }

    .extension_card h5 {
        font-size: 3.5vw;
        margin-bottom: 2vw;
    }

    .extension_card p {
        font-size: 3vw;
    }

    .training_level {
        border-radius: 3vw;
        padding: 4vw;
        margin-bottom: 3vw;
    }

    .level_header {
        gap: 3vw;
        margin-bottom: 3vw;
    }

    .level_dot {
        width: 3vw;
        height: 3vw;
        min-width: 3vw;
    }

    .level_header span:last-child {
        font-size: 3.3vw;
    }

    .level_equation {
        border-radius: 2vw;
        padding: 3vw;
        font-size: 3.3vw;
    }

    .eq_ref,
    .eq_label,
    .eq_note {
        font-size: 2.8vw;
    }

    .memory_animation {
        gap: 2vw;
        margin-top: 4vw;
    }

    .mem_block {
        padding: 3vw 4vw;
        font-size: 3.5vw;
    }

    .mem_equals,
    .mem_plus {
        font-size: 5vw;
    }

    .nl_steps_list {
        margin-top: 5vw;
    }

    .nl_steps_list h4 {
        font-size: 4vw;
        margin-bottom: 4vw;
    }

    .step_item {
        gap: 3vw;
        margin-bottom: 4vw;
    }

    .step_num {
        width: 8vw;
        height: 8vw;
        min-width: 8vw;
        font-size: 3.5vw;
    }

    .step_content strong {
        font-size: 3.5vw;
    }

    .step_content p {
        font-size: 3vw;
        margin-top: 1vw;
    }

    .inf_token {
        padding: 2vw 4vw;
        font-size: 4vw;
        margin-top: 1vw;
    }

    .inf_projections {
        flex-wrap: wrap;
        justify-content: center;
        gap: 3vw;
    }

    .inf_proj {
        padding: 2.5vw 4vw;
        gap: 2vw;
    }

    .inf_proj span {
        font-size: 3.5vw;
    }

    .inf_proj small {
        font-size: 2.8vw;
    }

    .inf_note {
        font-size: 3vw;
        margin: 2vw 0;
    }

    .inf_kvq {
        gap: 3vw;
    }

    .kvq_item {
        padding: 2vw 3vw;
        font-size: 3.5vw;
    }

    .inf_memory_block {
        max-width: 100%;
        border-radius: 3vw;
        padding: 5vw;
    }

    .inf_memory_header span:first-child {
        font-size: 4vw;
    }

    .inf_active_badge {
        font-size: 2.8vw;
        padding: 1vw 2.5vw;
    }

    .inf_memory_eq {
        font-size: 3.5vw;
    }

    .inf_memory_desc {
        font-size: 3vw;
    }

    .inf_memory_visual {
        width: 12vw;
        height: 12vw;
        font-size: 4vw;
    }

    .inf_memory_highlight {
        font-size: 3vw;
    }

    .inf_output_block {
        padding: 3vw 5vw;
    }

    .inf_output_block span {
        font-size: 3.5vw;
    }

    .inf_output_block small {
        font-size: 3vw;
    }

    .inf_cms_block {
        max-width: 100%;
        border-radius: 3vw;
        padding: 5vw;
    }

    .inf_cms_block h4 {
        font-size: 3.5vw;
        margin-bottom: 3vw;
    }

    .inf_cms_visual {
        flex-wrap: wrap;
        gap: 2vw;
    }

    .inf_cms_mlp {
        padding: 2vw 4vw;
        font-size: 3vw;
    }

    .inf_cms_block p {
        font-size: 3vw;
    }

    .nl_equations_section {
        padding: 10vw 5vw 20vw 5vw;
    }

    .nl_equations_section h2 {
        font-size: 5.5vw;
        margin-bottom: 6vw;
    }

    .nl_equations_grid {
        grid-template-columns: 1fr;
        gap: 3vw;
        max-width: 100%;
    }

    .eq_ref_card {
        border-radius: 3vw;
        padding: 4vw;
        font-size: 3.3vw;
    }

    .eq_ref_card code {
        padding: 1vw 2vw;
        font-size: 3vw;
        margin-right: 2vw;
    }
}

/* Tablet Responsive */
@media (min-width: 501px) and (max-width: 1024px) {
    .nl_hero {
        padding: 20vw 8vw 8vw 8vw;
    }

    .nl_hero_content h1 {
        font-size: 4.5vw;
    }

    .nl_hero_content p {
        font-size: 2vw;
    }

    .nl_tabs_section,
    .nl_tab_content,
    .nl_equations_section {
        padding-left: 8vw;
        padding-right: 8vw;
    }

    .nl_tab {
        font-size: 1.5vw;
        padding: 1.2vw 2.5vw;
    }

    .nl_content_card {
        padding: 4vw;
    }

    .nl_section_header h2 {
        font-size: 3vw;
    }

    .nl_section_header p {
        font-size: 1.5vw;
    }

    .equation_label {
        font-size: 1.2vw;
    }

    .equation_formula {
        font-size: 1.8vw;
    }

    .equation_desc {
        font-size: 1.3vw;
    }

    .nl_info_card h4 {
        font-size: 1.6vw;
    }

    .nl_info_card p {
        font-size: 1.4vw;
    }

    .freq_label {
        font-size: 1.4vw;
    }

    .freq_value {
        font-size: 1.2vw;
    }

    .arch_btn {
        font-size: 1.4vw;
        padding: 1vw 2.5vw;
    }

    .arch_title h3 {
        font-size: 2vw;
    }

    .arch_module h4 {
        font-size: 1.6vw;
    }

    .arch_module {
        max-width: 45vw;
    }

    .arch_info_box {
        max-width: 45vw;
    }

    .step_num {
        width: 3vw;
        height: 3vw;
        min-width: 3vw;
        font-size: 1.3vw;
    }

    .step_content strong {
        font-size: 1.4vw;
    }

    .step_content p {
        font-size: 1.2vw;
    }

    .nl_equations_section h2 {
        font-size: 3vw;
    }

    .nl_equations_grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 70vw;
    }

    .eq_ref_card {
        font-size: 1.3vw;
    }
}