/* --- START: M3 Emulation CSS --- */

  /*------------------------------------------------------------------
      LOADING OVERLAY STYLES
  --------------------------------------------------------------------*/
  #loading-overlay {
    position: fixed; inset: 0;
    background-color: var(--md-sys-color-background);
    z-index: 9999; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    transition: opacity 0.6s var(--md-sys-motion-easing-standard) 0.2s,
                visibility 0s linear 0.8s;
    opacity: 1; visibility: visible;
  }
  #loading-overlay.loading-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
  #loading-logo { width: 80px; height: 80px; margin-bottom: 24px; animation: pulseLogo 2s infinite ease-in-out; }
  #loading-indicator {
    width: 40px; height: 40px; border: 4px solid var(--md-sys-color-primary-container);
    border-top-color: var(--md-sys-color-primary); border-radius: 50%;
    animation: spin 1s linear infinite; margin-bottom: 16px;
  }
  #loading-percentage {
    font-family: var(--md-sys-typescale-font-family-code);
    font-size: var(--md-sys-typescale-label-large-font-size);
    color: var(--md-sys-color-primary); font-weight: 500;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pulseLogo { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } }

  /*------------------------------------------------------------------
     MATERIAL DESIGN 3 EMULATION - VARIABLES & THEMES
  --------------------------------------------------------------------*/
  :root {
   /* M3 Color Palette - Light Theme */
   --md-sys-color-primary-light: #0061a4; --md-sys-color-on-primary-light: #ffffff;
   --md-sys-color-primary-container-light: #d1e4ff; --md-sys-color-on-primary-container-light: #001d36;
   --md-sys-color-secondary-light: #535f70; --md-sys-color-on-secondary-light: #ffffff;
   --md-sys-color-secondary-container-light: #d7e3f7; --md-sys-color-on-secondary-container-light: #101c2b;
   --md-sys-color-tertiary-light: #6b5778; --md-sys-color-on-tertiary-light: #ffffff;
   --md-sys-color-tertiary-container-light: #f2daff; --md-sys-color-on-tertiary-container-light: #251431;
   --md-sys-color-error-light: #ba1a1a; --md-sys-color-on-error-light: #ffffff;
   --md-sys-color-error-container-light: #ffdad6; --md-sys-color-on-error-container-light: #410002;
   --md-sys-color-background-light: #f8faff; --md-sys-color-on-background-light: #1a1c1e;
   --md-sys-color-surface-light: #fdfcff; --md-sys-color-on-surface-light: #1a1c1e;
   --md-sys-color-surface-variant-light: #dfe3eb; --md-sys-color-on-surface-variant-light: #42474e;
   --md-sys-color-outline-light: #73777f; --md-sys-color-outline-variant-light: #c2c7cf;
   --md-sys-color-shadow-light: #000000; --md-sys-color-inverse-surface-light: #2f3033;
   --md-sys-color-inverse-on-surface-light: #f1f0f4; --md-sys-color-inverse-primary-light: #9ecaff;
   --md-sys-color-surface-tint-light: #0061a4;
   --md-sys-color-surface-tint-layer-opacity-light-1: 0.05; --md-sys-color-surface-tint-layer-opacity-light-2: 0.08;
   --md-sys-color-surface-tint-layer-opacity-light-3: 0.11; --md-sys-color-surface-tint-layer-opacity-light-4: 0.12;
   --md-sys-color-surface-tint-layer-opacity-light-5: 0.14;
   --md-sys-color-highlight-light: #FF4500; /* Orangered */
   --md-sys-color-search-highlight-light: rgba(255, 69, 0, 0.25);
   --md-sys-color-hero-bg-light: linear-gradient(135deg, var(--md-sys-color-primary-container-light), var(--md-sys-color-secondary-container-light));
   --md-sys-color-hero-text-light: var(--md-sys-color-on-primary-container-light);
   --md-sys-color-quiz-correct-light: var(--md-sys-color-tertiary-container-light);
   --md-sys-color-on-quiz-correct-light: var(--md-sys-color-on-tertiary-container-light);
   --md-sys-color-quiz-correct-border-light: var(--md-sys-color-tertiary-light);
   --md-sys-color-quiz-incorrect-light: var(--md-sys-color-error-container-light);
   --md-sys-color-on-quiz-incorrect-light: var(--md-sys-color-on-error-container-light);
   --md-sys-color-quiz-incorrect-border-light: var(--md-sys-color-error-light);

   /* M3 Color Palette - Dark Theme */
   --md-sys-color-primary-dark: #9ecaff; --md-sys-color-on-primary-dark: #003258;
   --md-sys-color-primary-container-dark: #00497d; --md-sys-color-on-primary-container-dark: #d1e4ff;
   --md-sys-color-secondary-dark: #bbc7db; --md-sys-color-on-secondary-dark: #253140;
   --md-sys-color-secondary-container-dark: #3b4858; --md-sys-color-on-secondary-container-dark: #d7e3f7;
   --md-sys-color-tertiary-dark: #d7bee4; --md-sys-color-on-tertiary-dark: #3b2948;
   --md-sys-color-tertiary-container-dark: #523f5f; --md-sys-color-on-tertiary-container-dark: #f2daff;
   --md-sys-color-error-dark: #ffb4ab; --md-sys-color-on-error-dark: #690005;
   --md-sys-color-error-container-dark: #93000a; --md-sys-color-on-error-container-dark: #ffdad6;
   --md-sys-color-background-dark: #1a1c1e; --md-sys-color-on-background-dark: #e2e2e6;
   --md-sys-color-surface-dark: #111418; --md-sys-color-on-surface-dark: #e2e2e6;
   --md-sys-color-surface-variant-dark: #42474e; --md-sys-color-on-surface-variant-dark: #c2c7cf;
   --md-sys-color-outline-dark: #8c9199; --md-sys-color-outline-variant-dark: #42474e;
   --md-sys-color-shadow-dark: #000000; --md-sys-color-inverse-surface-dark: #e2e2e6;
   --md-sys-color-inverse-on-surface-dark: #1a1c1e; --md-sys-color-inverse-primary-dark: #0061a4;
   --md-sys-color-surface-tint-dark: #9ecaff;
   --md-sys-color-surface-tint-layer-opacity-dark-1: 0.05; --md-sys-color-surface-tint-layer-opacity-dark-2: 0.08;
   --md-sys-color-surface-tint-layer-opacity-dark-3: 0.11; --md-sys-color-surface-tint-layer-opacity-dark-4: 0.12;
   --md-sys-color-surface-tint-layer-opacity-dark-5: 0.14;
   --md-sys-color-highlight-dark: #FF6347;
   --md-sys-color-search-highlight-dark: rgba(255, 99, 71, 0.3);
   --md-sys-color-hero-bg-dark: linear-gradient(135deg, var(--md-sys-color-primary-container-dark), var(--md-sys-color-secondary-container-dark));
   --md-sys-color-hero-text-dark: var(--md-sys-color-on-primary-container-dark);
   --md-sys-color-quiz-correct-dark: var(--md-sys-color-tertiary-container-dark);
   --md-sys-color-on-quiz-correct-dark: var(--md-sys-color-on-tertiary-container-dark);
   --md-sys-color-quiz-correct-border-dark: var(--md-sys-color-tertiary-dark);
   --md-sys-color-quiz-incorrect-dark: var(--md-sys-color-error-container-dark);
   --md-sys-color-on-quiz-incorrect-dark: var(--md-sys-color-on-error-container-dark);
   --md-sys-color-quiz-incorrect-border-dark: var(--md-sys-color-error-dark);

   /* Shape */
   --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px;
   --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 20px;

   /* Typography */
   --md-sys-typescale-font-family-brand: 'Montserrat', 'Roboto', sans-serif;
   --md-sys-typescale-font-family-plain: 'Poppins', 'Roboto', sans-serif;
   --md-sys-typescale-font-family-code: 'Inconsolata', 'Roboto Mono', monospace;
   --md-sys-typescale-font-family-display: 'Orbitron', 'Montserrat', sans-serif;
   --md-sys-typescale-display-large-font-size: clamp(40px, 8vw, 57px); --md-sys-typescale-display-large-line-height: 1.15;
   --md-sys-typescale-display-large-font-weight: 800; --md-sys-typescale-headline-large-font-size: clamp(28px, 6vw, 32px);
   --md-sys-typescale-headline-large-line-height: 1.25; --md-sys-typescale-headline-large-font-weight: 700;
   --md-sys-typescale-headline-medium-font-size: clamp(24px, 5vw, 28px); --md-sys-typescale-headline-medium-line-height: 1.28;
   --md-sys-typescale-headline-medium-font-weight: 600; --md-sys-typescale-title-large-font-size: 22px;
   --md-sys-typescale-title-large-line-height: 28px; --md-sys-typescale-title-large-font-weight: 600;
   --md-sys-typescale-title-medium-font-size: 16px; --md-sys-typescale-title-medium-line-height: 24px;
   --md-sys-typescale-title-medium-font-weight: 600; --md-sys-typescale-body-large-font-size: 16px;
   --md-sys-typescale-body-large-line-height: 24px; --md-sys-typescale-body-large-font-weight: 400;
   --md-sys-typescale-body-medium-font-size: 14px; --md-sys-typescale-body-medium-line-height: 20px;
   --md-sys-typescale-label-large-font-size: 14px; --md-sys-typescale-label-large-line-height: 20px;
   --md-sys-typescale-label-large-font-weight: 600; --md-sys-typescale-label-medium-font-size: 12px;
   --md-sys-typescale-label-medium-line-height: 16px; --md-sys-typescale-label-medium-font-weight: 500;

   /* Motion */
   --md-sys-motion-duration-short: 150ms; --md-sys-motion-duration-medium: 250ms;
   --md-sys-motion-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
   --md-sys-motion-easing-decelerated: cubic-bezier(0.0, 0.0, 0.2, 1);

   /* States */
   --md-sys-state-hover-state-layer-opacity: 0.08; --md-sys-state-focus-state-layer-opacity: 0.12;
   --md-sys-state-pressed-state-layer-opacity: 0.12;

   /* Layout */
   --m3-section-padding: clamp(48px, 8vh, 64px) 0; --m3-container-padding: 16px;
   --m3-fixed-header-height-desktop: 64px; --m3-main-content-top-padding: 0;
  }
  html[data-theme="light"] {
    color-scheme: light; --md-sys-color-primary: var(--md-sys-color-primary-light); --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
    --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
    --md-sys-color-secondary: var(--md-sys-color-secondary-light); --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
    --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
    --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
    --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
    --md-sys-color-error: var(--md-sys-color-error-light); --md-sys-color-on-error: var(--md-sys-color-on-error-light);
    --md-sys-color-error-container: var(--md-sys-color-error-container-light); --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
    --md-sys-color-background: var(--md-sys-color-background-light); --md-sys-color-on-background: var(--md-sys-color-on-background-light);
    --md-sys-color-surface: var(--md-sys-color-surface-light); --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
    --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
    --md-sys-color-outline: var(--md-sys-color-outline-light); --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
    --md-sys-color-shadow: var(--md-sys-color-shadow-light); --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
    --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
    --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
    --md-sys-color-surface-tint-layer-opacity-1: var(--md-sys-color-surface-tint-layer-opacity-light-1);
    --md-sys-color-surface-tint-layer-opacity-2: var(--md-sys-color-surface-tint-layer-opacity-light-2);
    --md-sys-color-surface-tint-layer-opacity-3: var(--md-sys-color-surface-tint-layer-opacity-light-3);
    --md-sys-color-highlight: var(--md-sys-color-highlight-light); --md-sys-color-search-highlight: var(--md-sys-color-search-highlight-light);
    --md-sys-color-hero-bg: var(--md-sys-color-hero-bg-light); --md-sys-color-hero-text: var(--md-sys-color-hero-text-light);
    --md-sys-color-quiz-correct: var(--md-sys-color-quiz-correct-light); --md-sys-color-on-quiz-correct: var(--md-sys-color-on-quiz-correct-light);
    --md-sys-color-quiz-correct-border: var(--md-sys-color-quiz-correct-border-light);
    --md-sys-color-quiz-incorrect: var(--md-sys-color-quiz-incorrect-light); --md-sys-color-on-quiz-incorrect: var(--md-sys-color-on-quiz-incorrect-light);
    --md-sys-color-quiz-incorrect-border: var(--md-sys-color-quiz-incorrect-border-light);
  }
  html[data-theme="dark"] {
    color-scheme: dark; --md-sys-color-primary: var(--md-sys-color-primary-dark); --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
    --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
    --md-sys-color-secondary: var(--md-sys-color-secondary-dark); --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
    --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
    --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
    --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
    --md-sys-color-error: var(--md-sys-color-error-dark); --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
    --md-sys-color-error-container: var(--md-sys-color-error-container-dark); --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
    --md-sys-color-background: var(--md-sys-color-background-dark); --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
    --md-sys-color-surface: var(--md-sys-color-surface-dark); --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
    --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
    --md-sys-color-outline: var(--md-sys-color-outline-dark); --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
    --md-sys-color-shadow: var(--md-sys-color-shadow-dark); --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
    --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
    --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
    --md-sys-color-surface-tint-layer-opacity-1: var(--md-sys-color-surface-tint-layer-opacity-dark-1);
    --md-sys-color-surface-tint-layer-opacity-2: var(--md-sys-color-surface-tint-layer-opacity-dark-2);
    --md-sys-color-surface-tint-layer-opacity-3: var(--md-sys-color-surface-tint-layer-opacity-dark-3);
    --md-sys-color-highlight: var(--md-sys-color-highlight-dark); --md-sys-color-search-highlight: var(--md-sys-color-search-highlight-dark);
    --md-sys-color-hero-bg: var(--md-sys-color-hero-bg-dark); --md-sys-color-hero-text: var(--md-sys-color-hero-text-dark);
    --md-sys-color-quiz-correct: var(--md-sys-color-quiz-correct-dark); --md-sys-color-on-quiz-correct: var(--md-sys-color-on-quiz-correct-dark);
    --md-sys-color-quiz-correct-border: var(--md-sys-color-quiz-correct-border-dark);
    --md-sys-color-quiz-incorrect: var(--md-sys-color-quiz-incorrect-dark); --md-sys-color-on-quiz-incorrect: var(--md-sys-color-on-quiz-incorrect-dark);
    --md-sys-color-quiz-incorrect-border: var(--md-sys-color-quiz-incorrect-border-dark);
  }

  /*------------------------------------------------------------------
     GLOBAL STYLES & RESETS
  --------------------------------------------------------------------*/
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
  body.m3-body {
   font-family: var(--md-sys-typescale-font-family-plain); font-size: var(--md-sys-typescale-body-medium-font-size);
   line-height: var(--md-sys-typescale-body-medium-line-height); color: var(--md-sys-color-on-background);
   background-color: var(--md-sys-color-background); overflow-x: hidden !important;
   transition: background-color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard),
               color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
  }
  a { color: var(--md-sys-color-primary); text-decoration: none; }
  a:hover, a:focus { text-decoration: underline; }
  img { max-width: 100%; height: auto; display: block; }
  ul, li, ol { list-style: none; }
  button, input { font: inherit; border: none; background: none; color: inherit; }
  button { cursor: pointer; }
  :focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; border-radius: var(--md-sys-shape-corner-extra-small); }
  :focus:not(:focus-visible) { outline: none; }
  .m3-main-content { padding-top: var(--m3-main-content-top-padding); }

  /*------------------------------------------------------------------
     M3 LAYOUT & TYPOGRAPHY HELPERS
  --------------------------------------------------------------------*/
  .m3-headline-large { font-family: var(--md-sys-typescale-font-family-brand); font-size: var(--md-sys-typescale-headline-large-font-size); line-height: var(--md-sys-typescale-headline-large-line-height); font-weight: var(--md-sys-typescale-headline-large-font-weight); }
  .m3-headline-medium { font-family: var(--md-sys-typescale-font-family-brand); font-size: var(--md-sys-typescale-headline-medium-font-size); line-height: var(--md-sys-typescale-headline-medium-line-height); font-weight: var(--md-sys-typescale-headline-medium-font-weight); }
  .m3-title-large { font-family: var(--md-sys-typescale-font-family-brand); font-size: var(--md-sys-typescale-title-large-font-size); line-height: var(--md-sys-typescale-title-large-line-height); font-weight: var(--md-sys-typescale-title-large-font-weight); }
  .m3-title-medium { font-family: var(--md-sys-typescale-font-family-brand); font-size: var(--md-sys-typescale-title-medium-font-size); line-height: var(--md-sys-typescale-title-medium-line-height); font-weight: var(--md-sys-typescale-title-medium-font-weight); }
  .m3-body-large { font-family: var(--md-sys-typescale-font-family-plain); font-size: var(--md-sys-typescale-body-large-font-size); line-height: var(--md-sys-typescale-body-large-line-height); font-weight: var(--md-sys-typescale-body-large-font-weight); }
  .m3-label-medium { font-family: var(--md-sys-typescale-font-family-brand); font-size: var(--md-sys-typescale-label-medium-font-size); line-height: var(--md-sys-typescale-label-medium-line-height); font-weight: var(--md-sys-typescale-label-medium-font-weight); }
  .m3-container { width: 100%; padding-left: var(--m3-container-padding); padding-right: var(--m3-container-padding); margin: 0 auto; max-width: 1320px; }
  @media (min-width: 768px) { .m3-container { --m3-container-padding: 24px;} }
  @media (min-width: 1200px) { .m3-container { --m3-container-padding: 32px;} }
  .m3-row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; }
  .m3-col-md-12, .m3-col-lg-3, .m3-col-lg-4, .m3-col-md-6 { position: relative; width: 100%; padding: 12px; margin-bottom: 24px; }
  @media (min-width: 768px) { .m3-col-md-6 { flex: 0 0 50%; max-width: 50%; } .m3-col-md-12 { flex: 0 0 100%; max-width: 100%; } }
  @media (min-width: 992px) { .m3-col-lg-3 { flex: 0 0 25%; max-width: 25%; } .m3-col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; } }

  /*------------------------------------------------------------------
     M3 COMPONENT STYLES: STATE LAYERS & BUTTONS
  --------------------------------------------------------------------*/
  .m3-state-layer { position: absolute; inset: 0; background-color: currentColor; opacity: 0; transition: opacity var(--md-sys-motion-duration-short); pointer-events: none; border-radius: inherit; }
  .m3-button, .m3-icon-button, .m3-fab { display: inline-flex; align-items: center; justify-content: center; position: relative; border: none; vertical-align: middle; text-align: center; text-decoration: none; overflow: hidden; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: all var(--md-sys-motion-duration-short); }
  .m3-button:hover > .m3-state-layer, .m3-icon-button:hover > .m3-state-layer, .m3-fab:hover > .m3-state-layer, .m3-list-item--interactive:hover > .m3-state-layer, .circuitOption:hover > .m3-state-layer { opacity: var(--md-sys-state-hover-state-layer-opacity); }
  *:focus-visible > .m3-state-layer, .m3-button:active > .m3-state-layer, .m3-icon-button:active > .m3-state-layer, .m3-fab:active > .m3-state-layer, .m3-list-item--interactive:active > .m3-state-layer, .circuitOption:active > .m3-state-layer { opacity: var(--md-sys-state-pressed-state-layer-opacity); }
  .m3-button { font-family: var(--md-sys-typescale-font-family-brand); font-size: var(--md-sys-typescale-label-large-font-size); font-weight: var(--md-sys-typescale-label-large-font-weight); height: 40px; padding: 0 24px; border-radius: var(--md-sys-shape-corner-full); }
  .m3-button .btn-icon { margin-left: 8px; font-size: 1.1em; } .m3-button .btn-icon:first-child { margin-left: -8px; margin-right: 8px; }
  .m3-button--filled { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); box-shadow: 0 1px 2px 0 rgba(var(--md-sys-color-shadow-light), 0.3); } html[data-theme="dark"] .m3-button--filled { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3); } .m3-button--filled:hover { box-shadow: 0 1px 2px 0 rgba(var(--md-sys-color-shadow-light), 0.3), 0 2px 6px 2px rgba(var(--md-sys-color-shadow-light), 0.15); } html[data-theme="dark"] .m3-button--filled:hover { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15); } .m3-button--filled:active { transform: scale(0.98); } .m3-button--filled > .m3-state-layer { background-color: var(--md-sys-color-on-primary); }
  .m3-button--outlined { color: var(--md-sys-color-primary); background-color: transparent; border: 1px solid var(--md-sys-color-outline); padding: 0 23px; } .m3-button--outlined:hover { background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity)); border-color: var(--md-sys-color-primary); } .m3-button--outlined:active { transform: scale(0.98); border-color: var(--md-sys-color-primary); } .m3-button--outlined > .m3-state-layer { background-color: var(--md-sys-color-primary); }
  .m3-button--text { color: var(--md-sys-color-primary); padding: 0 12px; background-color: transparent; } .m3-button--text > .m3-state-layer { background-color: var(--md-sys-color-primary); }
  .m3-icon-button { width: 40px; height: 40px; padding: 8px; border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); font-size: 1.25rem; } .m3-icon-button:hover { color: var(--md-sys-color-on-surface); } .m3-icon-button:active { transform: scale(0.95); }
  .m3-button-group { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 1rem; }
  .m3-button:disabled, .m3-icon-button:disabled { opacity: 0.38; cursor: default; pointer-events: none; } .m3-button:disabled > .m3-state-layer { opacity: 0 !important; } .m3-button--filled:disabled { background-color: rgba(var(--md-sys-color-on-surface), 0.12); color: rgba(var(--md-sys-color-on-surface), 0.38); box-shadow: none; } .m3-button--outlined:disabled { border-color: rgba(var(--md-sys-color-on-surface), 0.12); color: rgba(var(--md-sys-color-on-surface), 0.38); } .m3-button--text:disabled, .m3-icon-button:disabled { color: rgba(var(--md-sys-color-on-surface), 0.38); }

  /*------------------------------------------------------------------
     M3 COMPONENT STYLES: TOP APP BAR & NAV DRAWER
  --------------------------------------------------------------------*/
  .m3-top-app-bar__container { position: absolute; top: 16px; left: 5%; width: 90%; z-index: 100; transition: all var(--md-sys-motion-duration-medium); border-radius: var(--md-sys-shape-corner-large); }
  .m3-top-app-bar__container.fixed-menu { position: fixed; top: 0; left: 0; width: 100%; border-radius: 0; background: linear-gradient(0deg, rgba(var(--md-sys-color-surface-tint), var(--md-sys-color-surface-tint-layer-opacity-3)), rgba(var(--md-sys-color-surface-tint), var(--md-sys-color-surface-tint-layer-opacity-3))), var(--md-sys-color-surface); box-shadow: 0 2px 4px -1px rgba(var(--md-sys-color-shadow-light), 0.2); html[data-theme="dark"] & { box-shadow: 0 2px 4px -1px rgba(0,0,0, 0.2); } animation: fadeInDown 0.4s var(--md-sys-motion-easing-standard) both; }
  .m3-top-app-bar { display: flex; align-items: center; justify-content: space-between; height: var(--m3-fixed-header-height-desktop, 64px); padding: 0 4px 0 16px; color: var(--md-sys-color-on-surface); border-radius: inherit; }
  .m3-top-app-bar__container.fixed-menu .m3-top-app-bar { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .m3-top-app-bar__navigation-icon { margin-right: 12px; }
  .m3-top-app-bar__title { display: flex; align-items: center; gap: 8px; }
  .m3-top-app-bar__title img { height: 32px; object-fit: contain; }
  .m3-top-app-bar__actions { display: flex; align-items: center; gap: 4px; }
  .m3-top-app-bar__desktop-nav { display: none; }
  @media (min-width: 992px) { .m3-top-app-bar__desktop-nav { display: flex; gap: 4px; margin-right: 8px; } .m3-top-app-bar__navigation-icon { display: none; } .m3-top-app-bar { padding: 0 16px; } }
  .theme-switch-wrapper { display: flex; align-items: center; margin-left: 8px; } .theme-switch { position: relative; display: inline-block; width: 52px; height: 32px; } .theme-switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--md-sys-color-surface-variant); transition: var(--md-sys-motion-duration-medium); border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 24px; width: 24px; left: 4px; bottom: 4px; background-color: var(--md-sys-color-outline); box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: var(--md-sys-motion-duration-medium); border-radius: 50%; } input:checked + .slider { background-color: var(--md-sys-color-primary); } input:focus-visible + .slider { box-shadow: 0 0 0 2px var(--md-sys-color-primary); } input:checked + .slider:before { transform: translateX(20px); background-color: var(--md-sys-color-on-primary); } .slider .sun-moon { position: absolute; height: 24px; width: 24px; left: 4px; bottom: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; } .slider .sun-moon i { font-size: 12px; position: absolute; transition: opacity var(--md-sys-motion-duration-short), transform var(--md-sys-motion-duration-medium); } .slider .sun-moon .fa-sun { color: var(--md-sys-color-on-surface-variant); opacity: 1; transform: rotate(0deg); } .slider .sun-moon .fa-moon { color: var(--md-sys-color-primary); opacity: 0; transform: rotate(-90deg); } input:checked + .slider .sun-moon .fa-sun { opacity: 0; transform: rotate(90deg); } input:checked + .slider .sun-moon .fa-moon { color: var(--md-sys-color-on-primary); opacity: 1; transform: rotate(0deg); }
  .m3-navigation-drawer.m3-modal { position: fixed; top: 0; left: 0; height: 100%; width: clamp(280px, 80vw, 360px); background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); box-shadow: 0 8px 10px -5px rgba(var(--md-sys-color-shadow-light), 0.2); html[data-theme="dark"] & { box-shadow: 0 8px 10px -5px rgba(0,0,0, 0.2); } transform: translateX(-110%); visibility: hidden; transition: transform var(--md-sys-motion-duration-medium), visibility 0s linear var(--md-sys-motion-duration-medium); z-index: 1200; display: flex; flex-direction: column; border-radius: 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0; }
  .m3-navigation-drawer.m3-modal.active { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  .m3-scrim { position: fixed; inset: 0; background-color: #000; opacity: 0; visibility: hidden; transition: opacity var(--md-sys-motion-duration-medium), visibility 0s linear var(--md-sys-motion-duration-medium); z-index: 1100; }
  .m3-scrim.active { opacity: 0.4; visibility: visible; transition-delay: 0s; }
  .m3-navigation-drawer__header { padding: 16px; display: flex; justify-content: space-between; align-items: center; min-height: 64px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
  .m3-navigation-drawer__title img { height: 30px; object-fit: contain; }
  .m3-navigation-drawer__content { flex-grow: 1; overflow-y: auto; padding: 12px 0; }
  .m3-list-item { display: flex; align-items: center; position: relative; min-height: 48px; padding: 0 16px; color: var(--md-sys-color-on-surface); overflow: hidden; border-radius: var(--md-sys-shape-corner-small); }
  .m3-list-item--interactive { cursor: pointer; text-decoration: none; }
  .m3-list-item__leading-icon { display: inline-flex; width: 24px; height: 24px; font-size: 1.1rem; color: var(--md-sys-color-on-surface-variant); flex-shrink: 0; margin-right: 16px; }
  .m3-list-item__label-text { flex-grow: 1; font-size: var(--md-sys-typescale-body-large-font-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m3-navigation-drawer .m3-list-item { min-height: 56px; border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0; margin: 0 12px; padding: 0 16px; }
  .m3-navigation-drawer .m3-list-item.active { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .m3-navigation-drawer .m3-list-item.active .m3-list-item__label-text { font-weight: var(--md-sys-typescale-label-large-font-weight); }

  /*------------------------------------------------------------------
     SEARCH & CONTENT STYLES
  --------------------------------------------------------------------*/
  .m3-hero-section { padding: clamp(60px, 15vh, 120px) var(--m3-container-padding); background: var(--md-sys-color-hero-bg); color: var(--md-sys-color-hero-text); text-align: center; margin-bottom: 32px; border-radius: 0 0 var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large); overflow: hidden; position: relative; } .m3-hero-section .m3-container { position: relative; z-index: 1; } .m3-hero-title { color: var(--md-sys-color-hero-text); margin-bottom: 16px; text-shadow: 1px 1px 3px rgba(0,0,0,0.1); html[data-theme="dark"] & { text-shadow: 1px 1px 3px rgba(0,0,0,0.3); } } .m3-hero-subtitle { color: var(--md-sys-color-hero-text); opacity: 0.9; max-width: 600px; margin: 0 auto; font-size: var(--md-sys-typescale-title-medium-font-size); }
  .page-intro-actions { padding: 16px 0; text-align: center; }
  .outcome-button-section { padding: 24px 0; } .m3-button-group[aria-label="Learning Outcome Selection"] .m3-button { flex-grow: 1; margin-bottom: 8px; } .m3-button-group[aria-label="Learning Outcome Selection"] .m3-button[aria-current="page"] { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-color: var(--md-sys-color-primary); } .m3-button-group[aria-label="Learning Outcome Selection"] .m3-button:not([aria-current="page"]):hover { background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity)); border-color: var(--md-sys-color-primary); }
  .m3-search-section-wrapper { background: var(--md-sys-color-surface-variant); padding: 32px var(--m3-container-padding); margin-bottom: 32px; border-radius: var(--md-sys-shape-corner-large); position: relative; overflow: visible; }
  .Dorothy-search-section { position: relative; max-width: 700px; margin: 0 auto; z-index: 1; }
  .Dorothy-search-title { color: var(--md-sys-color-on-surface-variant); text-align: center; margin-bottom: 24px; letter-spacing: 0.5px; }
  .Dorothy-search-container { margin-bottom: 0; width: 100%; }
  .m3-text-field--filled { position: relative; display: inline-flex; align-items: center; border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0; min-height: 56px; cursor: text; background-color: color-mix(in srgb, var(--md-sys-color-surface-variant) 90%, transparent); border-bottom: 1px solid var(--md-sys-color-on-surface-variant); } .m3-text-field--filled:hover { border-bottom-color: var(--md-sys-color-on-surface); } .m3-text-field--filled::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--md-sys-color-primary); transform: scaleX(0); transition: transform var(--md-sys-motion-duration-short); } .m3-text-field--filled:focus-within { border-bottom-color: transparent; } .m3-text-field--filled:focus-within::after { transform: scaleX(1); } .m3-text-field__input { font-size: var(--md-sys-typescale-body-large-font-size); color: var(--md-sys-color-on-surface); background-color: transparent; border: none; outline: none; padding: 20px 16px 4px 16px; width: 100%; z-index: 1; } .m3-text-field__label { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--md-sys-color-on-surface-variant); pointer-events: none; transition: all var(--md-sys-motion-duration-short); white-space: nowrap; } .m3-text-field__input:not(:placeholder-shown) + .m3-text-field__label, .m3-text-field:focus-within .m3-text-field__label { transform: translateY(-110%) scale(0.75); transform-origin: left top; top: 8px; } .m3-text-field:focus-within .m3-text-field__label { color: var(--md-sys-color-primary); }
  .dorothy-inline-results { display: block; width: 100%; overflow-y: auto; max-height: 0; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease, border 0.3s ease; border-radius: 0 0 var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium); background: linear-gradient(0deg, rgba(var(--md-sys-color-surface-tint), var(--md-sys-color-surface-tint-layer-opacity-2)), rgba(var(--md-sys-color-surface-tint), var(--md-sys-color-surface-tint-layer-opacity-2))), var(--md-sys-color-surface); border: 0px solid transparent; } .dorothy-inline-results.dorothy-results--visible { max-height: 350px; opacity: 1; margin-top: -1px; border: 1px solid var(--md-sys-color-outline-variant); border-top: none; } .dorothy-inline-results .m3-list { padding: 8px 0; } .dorothy-inline-results .m3-list-item { min-height: 48px; padding: 8px 16px; border-radius: var(--md-sys-shape-corner-medium); margin: 2px 8px; } .dorothy-inline-results .search-result-icon { margin-right: 16px; color: var(--md-sys-color-on-surface-variant); width: 20px; text-align: center; } .dorothy-inline-results .m3-list-item:hover .search-result-icon { color: var(--md-sys-color-primary); } .dorothy-inline-results .Dorothy-no-results { color: var(--md-sys-color-on-surface-variant); justify-content: center; font-style: italic; padding: 16px; } .dorothy-inline-results .highlight { color: var(--md-sys-color-primary); font-weight: 600; background-color: var(--md-sys-color-primary-container); padding: 1px 3px; border-radius: 3px; }
  .page-content-section { padding: clamp(24px, 5vw, 48px) var(--m3-container-padding); background-color: var(--md-sys-color-surface); border-radius: var(--md-sys-shape-corner-medium); margin-bottom: 32px; opacity: 1 !important; transform: none !important; }
  .page-content-section h1, .page-content-section h2, .page-content-section h3, .page-content-section h4 { margin-top: 1.8em; margin-bottom: 0.8em; color: var(--md-sys-color-primary); scroll-margin-top: calc(var(--m3-fixed-header-height-desktop, 64px) + 24px); }
  .page-content-section h1:first-of-type, .page-content-section h2:first-of-type, .page-content-section h3:first-of-type, .page-content-section h4:first-of-type { margin-top: 0; }
  .page-content-section p { margin-bottom: 1.2em; line-height: 1.75; color: var(--md-sys-color-on-surface-variant); } .page-content-section strong { color: var(--md-sys-color-on-surface); font-weight: 600; } .page-content-section em { color: var(--md-sys-color-secondary); font-style: italic; }
  .page-content-section > ul, .page-content-section > ol { margin-bottom: 1.2em; color: var(--md-sys-color-on-surface-variant); }
  .page-content-section > ul > li, .page-content-section > ol > li { margin-bottom: 0.6em; padding-left: 24px; position: relative; line-height: 1.6; }
  .page-content-section > ul > li::before { content: "\2022"; color: var(--md-sys-color-primary); font-weight: bold; position: absolute; left: 10px; top: 1px; }
  .page-content-section > ol { list-style: none; counter-reset: section-list-counter; } .page-content-section > ol > li::before { counter-increment: section-list-counter; content: counter(section-list-counter) "."; color: var(--md-sys-color-primary); font-weight: bold; position: absolute; left: 10px; top: 1px; width: 1.5em; margin-left: -1.5em; text-align: right; padding-right: 0.5em; }
  .page-main-title { color: var(--md-sys-color-highlight); text-align: center; margin-bottom: 1.5rem; }
  
  /* M3-inspired Table Styles */
  .m3-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .m3-table {
    width: 100%; border-collapse: collapse; margin: 1.5em 0;
    background-color: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-small);
    overflow: hidden;
    min-width: 600px;
  }
  .m3-table th, .m3-table td {
    padding: 12px 16px; text-align: left;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }
  .m3-table thead th {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-weight: var(--md-sys-typescale-title-medium-font-weight);
    border-bottom: 2px solid var(--md-sys-color-primary);
  }
  .m3-table tbody tr:last-child td { border-bottom: none; }
  .m3-table tbody tr:hover { background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity)); }
  
  /* --- START: Enhanced Quiz Styling --- */
  .quiz-card-section { background-color: var(--md-sys-color-background); padding: var(--m3-section-padding); margin-top: 32px; }
  .quiz-card { background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); box-shadow: 0 2px 5px rgba(var(--md-sys-color-shadow-light), 0.1); html[data-theme="dark"] & { box-shadow: 0 2px 5px rgba(0,0,0, 0.1); } padding: clamp(24px, 4vw, 32px); width: 100%; max-width: 800px; margin: 0 auto; text-align: center; transition: all 0.3s ease; overflow: hidden; position: relative; }
  .quiz-title { margin-bottom: 1.5rem; font-size: var(--md-sys-typescale-headline-medium-font-size); color: var(--md-sys-color-primary); font-family: var(--md-sys-typescale-font-family-brand); }
  .question-number { font-size: var(--md-sys-typescale-label-medium-font-size); margin-bottom: 1rem; color: var(--md-sys-color-on-surface-variant); }
  .question-text { font-size: var(--md-sys-typescale-body-large-font-size); margin-bottom: 2rem; color: var(--md-sys-color-on-surface); line-height: 1.6; }
  .options-list { list-style: none; padding: 0; margin: 0 0 2rem 0; text-align: left; }
  .circuitOption { background-color: transparent; border: 1px solid var(--md-sys-color-outline); color: var(--md-sys-color-on-surface); border-radius: var(--md-sys-shape-corner-full); padding: 12px 20px; margin-bottom: 12px; text-align: left; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; font-size: var(--md-sys-typescale-body-medium-font-size); display: flex; align-items: center; position: relative; overflow: hidden; user-select: none; -webkit-tap-highlight-color: transparent; }
  .circuitOption:hover { border-color: var(--md-sys-color-primary); }
  .circuitOption.chosen { background-color: var(--md-sys-color-primary-container); border-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary-container); font-weight: 500; }
  .circuitOption.correct { background-color: var(--md-sys-color-quiz-correct); color: var(--md-sys-color-on-quiz-correct); border-color: var(--md-sys-color-quiz-correct-border); font-weight: 600; }
  .circuitOption.incorrect { background-color: var(--md-sys-color-quiz-incorrect); color: var(--md-sys-color-on-quiz-incorrect); border-color: var(--md-sys-color-quiz-incorrect-border); font-weight: 500; }
  .quiz-buttons { display: flex; justify-content: space-between; margin-top: 2rem; flex-wrap: wrap; gap: 10px; }
  .progress-bar-track { background-color: var(--md-sys-color-surface-variant); border-radius: var(--md-sys-shape-corner-full); height: 10px; margin: 1.5rem 0 0 0; overflow: hidden; }
  .progress-bar-fill { background-color: var(--md-sys-color-primary); height: 100%; width: 0%; border-radius: var(--md-sys-shape-corner-full); transition: width 0.5s ease; }
  .results-panel { display: none; background-color: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface-variant); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); padding: clamp(24px, 4vw, 32px); width: 100%; max-width: 800px; margin: 2rem auto 0 auto; text-align: left; }
  .result-title { font-size: var(--md-sys-typescale-title-large-font-size); margin-bottom: 1rem; color: var(--md-sys-color-on-surface-variant); }
  .result-text { font-size: var(--md-sys-typescale-body-medium-font-size); margin-bottom: 0.5rem; } .result-text strong { color: var(--md-sys-color-primary); font-weight: 600; font-size: var(--md-sys-typescale-body-large-font-size); }
  .result-review-title { font-size: var(--md-sys-typescale-title-medium-font-size); margin-top: 1.5rem; margin-bottom: 0.8rem; color: var(--md-sys-color-on-surface-variant); padding-bottom: 4px; border-bottom: 1px solid var(--md-sys-color-outline); display: block; }
  .result-review-list { list-style: none; padding: 0; margin: 0; display: block; }
  .assessment-error-item { margin-bottom: 1rem; padding: 12px; background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); border-radius: var(--md-sys-shape-corner-small); line-height: 1.6; border-left: 4px solid var(--md-sys-color-error); } .assessment-error-item strong { display: block; margin-bottom: 6px; } .assessment-error-item .user-answer { color: var(--md-sys-color-error); font-weight: 500; } .assessment-error-item .skipped-answer { color: var(--md-sys-color-on-surface-variant); font-style: italic; } .assessment-error-item .correct-answer-label { font-weight: 500; color: var(--md-sys-color-tertiary); margin-right: 4px; } .assessment-error-item .correct-answer-text { color: var(--md-sys-color-tertiary); font-weight: 500; }
  .perfect-score-message { padding: 12px; background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); border-radius: var(--md-sys-shape-corner-small); margin-top: 1rem; border-left: 4px solid var(--md-sys-color-tertiary); text-align: center; font-weight: 600; }
  .results-actions { border-top: 1px solid var(--md-sys-color-outline); padding-top: 1.5rem; margin-top: 1.5rem; text-align: center; }
  /* --- END: Enhanced Quiz Styling --- */

  .next-chapter-section { padding: 24px var(--m3-container-padding); text-align: right; margin-top: 16px; border-top: 1px solid var(--md-sys-color-outline-variant); }
  #scroll-to-top { position: fixed; bottom: 16px; right: 16px; z-index: 100; opacity: 0; visibility: hidden; transform: scale(0.8); width: 56px; height: 56px; border-radius: var(--md-sys-shape-corner-large); background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } #scroll-to-top.visible { opacity: 1; visibility: visible; transform: scale(1); } #scroll-to-top .m3-fab__icon { font-size: 1.5rem; }
  .m3-footer { background: var(--md-sys-color-surface-variant); padding-top: 48px; padding-bottom: 0; margin-top: 48px; } html[data-theme="dark"] .m3-footer { background: #111418; } .footer-section { margin-bottom: 32px; } .footer-logo { max-height: 40px; margin-bottom: 16px; } .footer-heading { margin-bottom: 16px; color: var(--md-sys-color-on-surface-variant); border-bottom: 2px solid var(--md-sys-color-primary); padding-bottom: 8px; display: inline-block; } .footer-text, .footer-link-list li a, .contact-info-list li a { color: var(--md-sys-color-on-surface-variant); } .contact-info-list li a i { color: var(--md-sys-color-primary); } .m3-footer-bottom { background: rgba(var(--md-sys-color-shadow-light), 0.1); padding: 16px 0; margin-top: 32px; text-align: center; } html[data-theme="dark"] .m3-footer-bottom { background: rgba(0,0,0, 0.2); }
  .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.6s var(--md-sys-motion-easing-decelerated), transform 0.6s var(--md-sys-motion-easing-decelerated); } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
  @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
  .highlight-target { background-color: var(--md-sys-color-search-highlight) !important; outline: 2px solid var(--md-sys-color-highlight) !important; outline-offset: 3px !important; transition: background-color 0.3s ease, outline 0.2s ease !important; border-radius: var(--md-sys-shape-corner-small); }
  @media (max-width: 575.98px) { .m3-top-app-bar__container { width: 100%; left: 0; top: 0; border-radius: 0; } .m3-top-app-bar { height: var(--m3-fixed-header-height-mobile, 56px); } .m3-hero-title { font-size: var(--md-sys-typescale-headline-large-font-size); } .m3-hero-subtitle { font-size: var(--md-sys-typescale-title-medium-font-size); } }
  /* --- END: M3 Emulation CSS --- */