/* --- Theme Variables --- */
        :root {
            --bg-color: #ffffff; 
--text-color: #333333; 
--surface-color: #fcfcfc;
--border-color: #eeeeee;
--primary-brand: #2E7D32;
--header-text: #FFFFFF;
--primary-container: #EADDFF;
--on-primary-container: #21005D;
--alert-note-bg: #E3F2FD;
--alert-note-border: #01579B;
--alert-tip-bg: #E8F5E9;
--alert-tip-border: #1B5E20;
--alert-important-bg: #F3E5F5;
--alert-important-border: #4A148C;
--alert-warning-bg: #FFF3E0;
--alert-warning-border: #E65100;
--alert-caution-bg: #FFEBEE;
--alert-caution-border: #B71C1C;
--app-surface: #FEF7FF;
--app-on-surface: #1D1B20;
--app-surface-variant: #E7E0EC;
--app-on-surface-variant: #49454F;
--app-surface-elevation-one: #F3F1F5;
--app-surface-elevation-two: #EFEEF1;
--app-surface-elevation-lowest: #FFFFFF;
--app-surface-elevation-low: #F7F2FA;
--app-surface-elevation-high: #ECE6F0;
--app-surface-elevation-highest: #E6E0E9;
--app-dialog-surface: #FEF7FF;
--app-disabled-button: #1D1B201F;
--app-disabled-button-content: #1D1B2061;
--app-outline-variant: #CAC4D0FF;
--app-outline: #79747EFF;
--app-secondary: #558B2F;
--app-on-secondary: #FFFFFF;
--app-on-tertiary: #00695C;
        }
    
        @media (prefers-color-scheme: dark) {
            :root { --bg-color: #121212; 
--text-color: #e0e0e0; 
--surface-color: #1e1e1e;
--border-color: #333333;
--primary-brand: #A5D6A7;
--header-text: #003910;
--primary-container: #4F378B;
--on-primary-container: #EADDFF;
--alert-note-bg: #003355;
--alert-note-border: #81D4FA;
--alert-tip-bg: #1B3320;
--alert-tip-border: #A5D6A7;
--alert-important-bg: #311B92;
--alert-important-border: #CE93D8;
--alert-warning-bg: #4E342E;
--alert-warning-border: #FFB74D;
--alert-caution-bg: #5C0002;
--alert-caution-border: #EF9A9A;
--app-surface: #141218;
--app-on-surface: #E6E0E9;
--app-surface-variant: #49454F;
--app-on-surface-variant: #CAC4D0;
--app-surface-elevation-one: #1B1C1F;
--app-surface-elevation-two: #1E2022;
--app-surface-elevation-lowest: #0F0D13;
--app-surface-elevation-low: #1D1B20;
--app-surface-elevation-high: #2B2930;
--app-surface-elevation-highest: #36343B;
--app-dialog-surface: #383B3D;
--app-disabled-button: #E6E0E91F;
--app-disabled-button-content: #E6E0E961;
--app-outline-variant: #49454FFF;
--app-outline: #938F99FF;
--app-secondary: #C5E1A5;
--app-on-secondary: #332D41;
--app-on-tertiary: #80CBC4; }
        }
        [data-theme="light"] {
            --bg-color: #ffffff; 
--text-color: #333333; 
--surface-color: #fcfcfc;
--border-color: #eeeeee;
--primary-brand: #2E7D32;
--header-text: #FFFFFF;
--primary-container: #EADDFF;
--on-primary-container: #21005D;
--alert-note-bg: #E3F2FD;
--alert-note-border: #01579B;
--alert-tip-bg: #E8F5E9;
--alert-tip-border: #1B5E20;
--alert-important-bg: #F3E5F5;
--alert-important-border: #4A148C;
--alert-warning-bg: #FFF3E0;
--alert-warning-border: #E65100;
--alert-caution-bg: #FFEBEE;
--alert-caution-border: #B71C1C;
--app-surface: #FEF7FF;
--app-on-surface: #1D1B20;
--app-surface-variant: #E7E0EC;
--app-on-surface-variant: #49454F;
--app-surface-elevation-one: #F3F1F5;
--app-surface-elevation-two: #EFEEF1;
--app-surface-elevation-lowest: #FFFFFF;
--app-surface-elevation-low: #F7F2FA;
--app-surface-elevation-high: #ECE6F0;
--app-surface-elevation-highest: #E6E0E9;
--app-dialog-surface: #FEF7FF;
--app-disabled-button: #1D1B201F;
--app-disabled-button-content: #1D1B2061;
--app-outline-variant: #CAC4D0FF;
--app-outline: #79747EFF;
--app-secondary: #558B2F;
--app-on-secondary: #FFFFFF;
--app-on-tertiary: #00695C;
            scroll-behavior: smooth;
        }
        [data-theme="dark"] {
            --bg-color: #121212; 
--text-color: #e0e0e0; 
--surface-color: #1e1e1e;
--border-color: #333333;
--primary-brand: #A5D6A7;
--header-text: #003910;
--primary-container: #4F378B;
--on-primary-container: #EADDFF;
--alert-note-bg: #003355;
--alert-note-border: #81D4FA;
--alert-tip-bg: #1B3320;
--alert-tip-border: #A5D6A7;
--alert-important-bg: #311B92;
--alert-important-border: #CE93D8;
--alert-warning-bg: #4E342E;
--alert-warning-border: #FFB74D;
--alert-caution-bg: #5C0002;
--alert-caution-border: #EF9A9A;
--app-surface: #141218;
--app-on-surface: #E6E0E9;
--app-surface-variant: #49454F;
--app-on-surface-variant: #CAC4D0;
--app-surface-elevation-one: #1B1C1F;
--app-surface-elevation-two: #1E2022;
--app-surface-elevation-lowest: #0F0D13;
--app-surface-elevation-low: #1D1B20;
--app-surface-elevation-high: #2B2930;
--app-surface-elevation-highest: #36343B;
--app-dialog-surface: #383B3D;
--app-disabled-button: #E6E0E91F;
--app-disabled-button-content: #E6E0E961;
--app-outline-variant: #49454FFF;
--app-outline: #938F99FF;
--app-secondary: #C5E1A5;
--app-on-secondary: #332D41;
--app-on-tertiary: #80CBC4;
            scroll-behavior: smooth;
        }
                :root {
    /* Default Layout State */
    --header-height: 90px;
    --header-button-height: 52px;
    --header-launch-button-height: calc(var(--header-button-height) + calc(var(--header-launch-button-border) * 2));            
    --header-launch-button-border: 1px;
    --button-border-radius: 8px;
    --container-width: 900px;
    --title-font-size: 1.6rem;
    --index-play-height-desktop: 60px;
    --index-play-height-mobile: 48px; 
    --index-launch-button-border: 2px;
    --index-launch-button-height-desktop: calc(var( --index-play-height-desktop) - calc(2 * var(--index-launch-button-border)));
    --index-launch-button-height-mobile: calc(var( --index-play-height-mobile) - calc(2 * var(--index-launch-button-border)));
    --index-launch-button-horizontal-padding: 28px;
    --index-launch-button-min-width-desktop: calc(calc(var(--index-play-height-desktop) * 3.375) - calc(2 * var(--index-launch-button-horizontal-padding)) - calc(2 * var(--index-launch-button-border)));
    --index-launch-button-min-width-mobile: calc(calc(var(--index-play-height-mobile) * 3.375) - calc(2 * var(--index-launch-button-horizontal-padding)) - calc(2 * var(--index-launch-button-border)));
    scroll-behavior: smooth;
}

body.layout-compact {
    --header-height: 64px;
    --title-font-size: 1.25rem;
    
}

body.layout-wide {
    --container-width: 1400px;
}
                            body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.7; margin: 0; padding: 0; background: var(--bg-color); color: var(--text-color); transition: background-color 0.3s, color 0.3s; }
h1, h2, h3, h4, h5, h6 {
 margin-top: 1.5em;
 scroll-margin-top: calc(var(--header-height) + 24px);
}
@media (max-width: 768px) { h1, h2, h3, h4, h5, h6 { scroll-margin-top: 80px; } }

h1 {color: var(--primary-brand);}
h2 {color: var(--app-secondary);}
h3 {color: var(--app-tertiary);}
h4 h5 {color: var(--app-on-surface);}
h6 {color: var(--app-on-surface-variant);}

h5 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
h6 {
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

@media print {
    .toc, .toc-toggle-label, .collapse-btn { display: none !important; }
    .page-container, .content { display: block; width: 100%; max-width: 100%; padding: 0; margin: 0; border: none; box-shadow: none; }
    .alert { page-break-inside: avoid; }
    .inline-icon { background-color: #000000 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}
            .page-container { display: flex; width: 100%; max-width: 1400px; margin: 0 auto; align-items: flex-start; }
.page-container.no-toc { justify-content: center; }

.content { flex-grow: 1; width: 100%; min-width: 0; max-width: var(--container-width); background: var(--surface-color); border-radius: 0px; box-shadow: 0 8px 30px rgba(0,0,0,0.04); border: 1px solid var(--border-color); padding: 20px 80px; box-sizing: border-box; font-size: 1.05rem; }
.content > *:first-child { margin-top: 0; }
.content a { color: var(--primary-brand); text-decoration: none; font-weight: 500; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.content a:hover { border-bottom: 1px solid var(--primary-brand); }

.main-footer { text-align: center; padding: 60px 20px; color: var(--text-color); opacity: 0.8; }
.main-footer a { color: var(--primary-brand); text-decoration: none; font-weight: 600; }
.main-footer a:hover { text-decoration: underline; }
            .main-header { background-color: var(--primary-brand); color: var(--header-text); min-height: var(--header-height); padding: 0 60px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 25px rgba(0,0,0,0.2); position: sticky; top: 0; z-index: 1000; }
.header-bg-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: var(--header-text); -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16.0 -8.0 832.0 416.0' preserveAspectRatio='none'%3E %3Cdefs%3E %3ClinearGradient id='grad_header_bg_0' x1='625.95' y1='-90' x2='434.7' y2='304.68' gradientUnits='userSpaceOnUse'%3E %3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0.28627452'/%3E %3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0.0'/%3E %3C/linearGradient%3E %3ClinearGradient id='grad_header_bg_1' x1='386.19' y1='-77.25' x2='314.57' y2='277.16' gradientUnits='userSpaceOnUse'%3E %3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0.3137255'/%3E %3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0.0'/%3E %3C/linearGradient%3E %3ClinearGradient id='grad_header_bg_2' x1='515.81' y1='40.76' x2='429.65' y2='241.49' gradientUnits='userSpaceOnUse'%3E %3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0.29803923'/%3E %3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0.0'/%3E %3C/linearGradient%3E %3ClinearGradient id='grad_header_bg_3' x1='716.1' y1='-95.74' x2='131.91' y2='346.48' gradientUnits='userSpaceOnUse'%3E %3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0.30980393'/%3E %3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0.0'/%3E %3C/linearGradient%3E %3ClinearGradient id='grad_header_bg_4' x1='442.76' y1='-118.95' x2='392.42' y2='363.69' gradientUnits='userSpaceOnUse'%3E %3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0.3019608'/%3E %3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0.0'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cpath d='m-17.86,82.2c0,0 92.64,-80.95 193.99,-62.15 101.35,18.81 210.21,214.88 427.56,255.13 220.6,40.84 266.04,-69.51 266.04,-69.51l12.67,191.34 -919.26,-4.91z' fill='url(%23grad_header_bg_0)' stroke='none' stroke-width='21.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='m-13.11,179.51c0,0 108.71,-47.02 176.81,-33.93 68.09,13.08 174.75,67.46 360.82,70.73 186.07,3.27 342.05,-133.29 342.05,-133.29l0,315.64l-917.68,-18.81 28.5,-201.97z' fill='url(%23grad_header_bg_1)' stroke='none' stroke-width='21.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='m-85.95,160.7c0,0 259.71,-107.94 488.53,-39.25 228.83,68.69 472.7,102.21 472.7,102.21l8.71,168.45 -954.1,2.45z' fill='url(%23grad_header_bg_2)' stroke='none' stroke-width='21.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='m1028.73,268.48c0,0 -359.39,-273.85 -687.82,-76.46 -328.43,197.39 -592.26,175.15 -592.26,175.15l18.84,176.54 1367.57,-54.21 -99.61,-739.54z' fill='url(%23grad_header_bg_3)' stroke='none' stroke-width='21.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M-15.8,-116.58l853.39,0l0,539.18l-853.39,0z' fill='url(%23grad_header_bg_4)' stroke='none' stroke-width='23.64' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16.0 -8.0 832.0 416.0' preserveAspectRatio='none'%3E %3Cdefs%3E %3ClinearGradient id='grad_header_bg_0' x1='625.95' y1='-90' x2='434.7' y2='304.68' gradientUnits='userSpaceOnUse'%3E %3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0.28627452'/%3E %3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0.0'/%3E %3C/linearGradient%3E %3ClinearGradient id='grad_header_bg_1' x1='386.19' y1='-77.25' x2='314.57' y2='277.16' gradientUnits='userSpaceOnUse'%3E %3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0.3137255'/%3E %3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0.0'/%3E %3C/linearGradient%3E %3ClinearGradient id='grad_header_bg_2' x1='515.81' y1='40.76' x2='429.65' y2='241.49' gradientUnits='userSpaceOnUse'%3E %3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0.29803923'/%3E %3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0.0'/%3E %3C/linearGradient%3E %3ClinearGradient id='grad_header_bg_3' x1='716.1' y1='-95.74' x2='131.91' y2='346.48' gradientUnits='userSpaceOnUse'%3E %3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0.30980393'/%3E %3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0.0'/%3E %3C/linearGradient%3E %3ClinearGradient id='grad_header_bg_4' x1='442.76' y1='-118.95' x2='392.42' y2='363.69' gradientUnits='userSpaceOnUse'%3E %3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0.3019608'/%3E %3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0.0'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cpath d='m-17.86,82.2c0,0 92.64,-80.95 193.99,-62.15 101.35,18.81 210.21,214.88 427.56,255.13 220.6,40.84 266.04,-69.51 266.04,-69.51l12.67,191.34 -919.26,-4.91z' fill='url(%23grad_header_bg_0)' stroke='none' stroke-width='21.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='m-13.11,179.51c0,0 108.71,-47.02 176.81,-33.93 68.09,13.08 174.75,67.46 360.82,70.73 186.07,3.27 342.05,-133.29 342.05,-133.29l0,315.64l-917.68,-18.81 28.5,-201.97z' fill='url(%23grad_header_bg_1)' stroke='none' stroke-width='21.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='m-85.95,160.7c0,0 259.71,-107.94 488.53,-39.25 228.83,68.69 472.7,102.21 472.7,102.21l8.71,168.45 -954.1,2.45z' fill='url(%23grad_header_bg_2)' stroke='none' stroke-width='21.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='m1028.73,268.48c0,0 -359.39,-273.85 -687.82,-76.46 -328.43,197.39 -592.26,175.15 -592.26,175.15l18.84,176.54 1367.57,-54.21 -99.61,-739.54z' fill='url(%23grad_header_bg_3)' stroke='none' stroke-width='21.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M-15.8,-116.58l853.39,0l0,539.18l-853.39,0z' fill='url(%23grad_header_bg_4)' stroke='none' stroke-width='23.64' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; pointer-events: none; z-index: 0; overflow: hidden; }
.main-header > *:not(.header-bg-mask) { z-index: 1; position: relative; }

.logo { display: flex; align-items: center; gap: 12px; z-index: 1; position: relative; }
.logo h1, .logo h2 { margin: 0; font-size: var(--title-font-size); letter-spacing: -0.5px; }
.logo a, .logo a:link, .logo a:visited, .logo a:hover, .logo a:active { color: var(--header-text); text-decoration: none; }

.header-nav { display: flex; gap: 16px; align-items: center; z-index: 1; position: relative; margin-left: auto; }
.icon-group { display: flex; gap: 8px; align-items: center; }
.action-buttons { display: flex; gap: 12px; align-items: center; }

/* Visibility Defaults (Hidden on Desktop) */
.mobile-header-controls { display: none; }
.mobile-only-icon { display: none !important; }
.mobile-label { display: none; }
.mobile-menu-btn { display: none; z-index: 1; position: relative; background: transparent; border: none; color: var(--header-text); cursor: pointer; padding: 6px; }
.desktop-only-btn { display: inline-block; }

.header-nav a:not(.launch-btn):not(.secondary-btn) { color: var(--header-text); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: opacity 0.2s ease; }
.header-nav a:not(.launch-btn):not(.secondary-btn):hover { opacity: 0.6; }
.nav-link { display: flex; align-items: center; gap: 12px; color: var(--header-text); text-decoration: none; font-weight: 600; transition: opacity 0.2s; }
.nav-link:hover { opacity: 0.8; }
            .custom-dropdown { position: relative; }
.dropdown-menu { position: absolute; top: calc(100% + 15px); right: -10px; background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); list-style: none; padding: 8px 0; margin: 0; min-width: 180px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 2000; }
.dropdown-menu::before { content: ''; position: absolute; top: -6px; right: 20px; width: 10px; height: 10px; background-color: var(--surface-color); border-left: 1px solid var(--border-color); border-top: 1px solid var(--border-color); transform: rotate(45deg); }
.custom-dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown-item { width: 100%; text-align: left; background: none; border: none; padding: 12px 20px; color: var(--text-color); font-family: inherit; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s, color 0.2s; display: block; }
.dropdown-item:hover { background-color: rgba(128, 128, 128, 0.08); }
.dropdown-item.active { color: var(--primary-brand); font-weight: 700; background-color: rgba(128, 128, 128, 0.04); }
.header-action { display: flex; align-items: center; gap: 12px; padding: 0; background: transparent; border: none; color: var(--header-text); cursor: pointer; height: 42px; transition: opacity 0.2s ease, transform 0.1s ease; position: relative; }
.header-action:hover { opacity: 0.6; }
.header-action:active { transform: scale(0.92); }

.theme-btn { width: 42px; border-radius: 50%; justify-content: center; padding: 0; }
.launch-btn { 
    display: inline-flex;
    justify-content: center;
    align-items: center; 
    height: var(--header-launch-button-height); 
    background: var(--header-text); 
    color: var(--primary-brand) !important; 
    padding: 0px 20px; 
    border-radius: var(--button-border-radius); 
    font-weight: 700; 
    text-decoration: none; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    transition: transform 0.2s; 
}

.launch-btn:hover { transform: scale(1.02);  }

.secondary-btn { 
    display: inline-flex;
    align-items: center;
    height: var(--header-button-height);
    background: color-mix(in srgb, var(--header-text) 15%, transparent); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    color: var(--header-text) !important; 
    padding: 0px 20px;
    border-radius: var(--button-border-radius); 
    font-weight: 600; 
    text-decoration: none; 
    border: 1px solid color-mix(in srgb, var(--header-text) 30%, transparent);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: background 0.2s, transform 0.2s; 
}

.secondary-btn:hover { 
    background: color-mix(in srgb, var(--header-text) 25%, transparent); 
    transform: scale(1.02); 
}

/* Page badge sizing (used in Hero and Footer) */
.secondary-btn.index { 
    font-size: 1.1rem; 
    padding: 0px var(--index-launch-button-horizontal-padding); 
    color: var(--primary-brand) !important; 
    border: var(--index-launch-button-border) solid var(--primary-brand); 
    backdrop-filter: none;
    height: var(--index-launch-button-height-desktop);
    min-width: var(--index-launch-button-min-width-desktop);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Mobile fallback adjustment for page badges */
@media (max-width: 600px) {
    .secondary-btn.index {
        height: var(--index-launch-button-height-mobile);
        min-width: var(--index-launch-button-min-width-mobile);
    }
}

  /* --- Play Store Badge Styling --- */
.play-badge { 
    display: inline-flex; 
    will-change: transform;
    transition: transform 0.2s ease, opacity 0.2s ease; 
}
.play-badge:hover { 
    transform: scale(1.02); 
    opacity: 0.95; 
    border-bottom: 1px solid transparent !important;
}
/* Setting height locks the proportion perfectly per Google's guidelines */
.play-badge img { 
    height: 100%; 
    width: auto; 
    display: block; 
}

/* Page badge sizing (used in Hero and Footer) */
.page-badge { height: var(--index-play-height-desktop); }

/* Mobile fallback adjustment for page badges */
@media (max-width: 600px) {
    .page-badge { height: var(--index-play-height-mobile); }
}

.header-icon-svg { display: flex; align-items: center; justify-content: center; color: var(--header-text); }
.header-icon-svg svg { width: 100%; height: 100%; fill: currentColor; }

.inline-svg-icon { 
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    color: currentColor;
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em
}
.inline-svg-icon svg { width: 100%; height: 100%; fill: currentColor; }
.inline-icon { display: inline-block; height: 1.2em; width: 1.2em; vertical-align: middle; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }

.alert-body ul, .markdown-body ul { 
    padding-left: 30px;
    margin-bottom: 10px;
}

code { 
    font-family: 'JetBrains Mono', monospace;
    background-color: rgb(from var(--app-surface-variant) r g b / 50%) ; 
    padding: 2px 4px; 
    border-radius: 4px; 
    font-size: 0.9em;
}
pre {
    background-color: rgb(from var(--app-surface-variant) r g b / 50%);
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1rem 0;
    line-height: 1.5;
}

pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
    font-size: 0.85rem;
}

/* Ensure code inside alerts is still readable */
.alert code {
    background-color: rgba(0, 0, 0, 0.08);
}
.alert { padding: 15px; margin: 15px 0; border-radius: 8px; border-left: 4px solid; display: flex; gap: 15px; }
.alert-icon { flex-shrink: 0; font-size: 1.4em; margin-top: 2px; }
.alert-body { flex-grow: 1; overflow-wrap: break-word; }
.alert-body ul { 
    margin: 10px 0; 
    padding-left: 1.5rem; /* Standard bullet indentation */
    list-style-type: disc; 
}
.alert-body ul ul { 
    list-style-type: circle; /* Sub-list icon */
    margin-top: 5px;
}
.alert-body > *:first-child { margin-top: 0; }
.alert-body > *:last-child { margin-bottom: 0; }

.alert-note { background-color: var(--alert-note-bg); border-color: var(--alert-note-border); color: var(--alert-note-border); }
.alert-tip { background-color: var(--alert-tip-bg); border-color: var(--alert-tip-border); color: var(--alert-tip-border); }
.alert-important { background-color: var(--alert-important-bg); border-color: var(--alert-important-border); color: var(--alert-important-border); }
.alert-warning { background-color: var(--alert-warning-bg); border-color: var(--alert-warning-border); color: var(--alert-warning-border); }
.alert-caution { background-color: var(--alert-caution-bg); border-color: var(--alert-caution-border); color: var(--alert-caution-border); }
            @media (max-width: 900px) {
    .page-container {  flex-direction: column; } 
    .content { padding: 30px 20px; width: 100%; box-sizing: border-box; } 

    .main-header { height: 70px; min-height: 70px; padding: 0 20px; }
    .logo h1 { font-size: 1.5rem; }
    
    .mobile-header-controls { display: flex; align-items: center; margin-left: auto; gap: 12px; z-index: 1; position: relative; }
    .mobile-top-btn { 
        display: inline-flex;
        align-items: center; 
        height: auto;
        padding: 6px 14px; 
        font-size: 0.9rem; 
        border-radius: var(--button-border-radius); 
    }
    .mobile-menu-btn { display: block; padding: 4px; }
    .desktop-only-btn { display: none !important; }
    
    /* Reveal labels on mobile */
    .mobile-label { display: block; font-weight: 600; }

    .header-nav { display: none !important; flex-direction: column; position: absolute !important; top: 70px !important; left: 0; width: 100%; background-color: var(--surface-color); padding: 20px; box-sizing: border-box; border-bottom: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0,0,0,0.2); align-items: flex-start; gap: 20px; margin-left: 0; }
    .header-nav.open { display: flex !important; }
    .header-nav.open .header-action { justify-content: flex-start; width: 100%; }

    .header-nav.open a:not(.launch-btn), .header-nav.open .header-action, .header-nav.open .secondary-btn, .header-nav.open .header-icon-svg { color: var(--text-color) !important; font-size: 1.1rem !important; font-weight: 600 !important; opacity: 1 !important; }
    .header-nav.open .icon-group { width: 100%; flex-direction: column; align-items: flex-start; gap: 20px; }
    .header-nav.open .launch-btn { width: 100%; text-align: center; box-sizing: border-box; margin-top: 10px; }
    
    /* Reveal icons ONLY when mobile menu is open */
    .header-nav.open .mobile-only-icon { display: flex !important; }
    
    .header-nav.open .action-buttons { flex-direction: column; width: 100%; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--border-color); }
    .header-nav.open .secondary-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; box-sizing: border-box; border: none; background: transparent; padding: 0; }
    .header-nav.open .secondary-btn:hover { background: transparent; color: var(--primary-brand) !important; transform: none; }

    .custom-dropdown { width: 100%; }
    .dropdown-menu { position: static; background: transparent; border: none; box-shadow: none; padding: 0; margin-top: 10px; display: none; transform: none; opacity: 1; visibility: visible; padding-left: 36px; }
    .dropdown-menu::before { display: none; }
    .custom-dropdown.open .dropdown-menu { display: block; }
    .dropdown-item { padding: 10px 0; font-size: 1.1rem; }
}
@media (max-width: 420px) {
    .hide-on-tiny { display: none; }
    .logo h1 { font-size: 1.2rem; }
    .mobile-top-btn { 
        display: inline-flex;
        align-items: center; 
        height: auto;
        padding: 5px 12px; 
        font-size: 0.85rem; 
    }
    
    .main-header { padding: 0 15px; } /* Squeeze a bit more horizontal room */
}