:root {
      color-scheme: light dark;
      --primary-color: #00374f;
      --primary-color-light: #feffff;
      --accent-color: #ffd800;  /* AAA gold */
      --text-color: #000;
      --dark-header-bg: #000000;
      font-family: system-ui, sans-serif;
      background: #e1f9ff;
      font-synthesis: none;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: #e1f9ff;
      color: var(--text-color);
      transition: background 0.3s ease, color 0.3s ease, font-family 0.3s ease;
    }

    /* Accessibility modes */

    body.dark {
      background: #1e1e1e;
      color: #0d0d0d;
    }

    body.dark a {
      color: #fbcd00;
    }

    body.dark h2 {
      color: #ffffff;
    }

    body.dark h3 {
      color: #ffffff;
    }
    
    body.dark header {
      background: #00374f;
    }
    
    body.dark .responsible-fishing {
      background: #1e1e1e;
    }

    body.dyslexia {
      font-family: 'OpenDyslexic', 'Comic Sans MS', Arial, sans-serif;
      line-height: 1.8;
      letter-spacing: 0.03em;
    }

    /* Skip nav */
    .skip-nav {
      position: absolute;
      left: 10px;
      top: -50px;
      background: #ffeeb6;
      color: #000;
      font-weight: 700;
      padding: 10px;
      border-radius: 6px;
      transition: top 0.3s ease;
    }
    .skip-nav:focus { top: 10px; }

    /* Header & Navigation */
    header {
      background: var(--primary-color);
      text-align: center;
      padding: 1em 0;
    }

    header a:hover, header a:focus {
      background: red;
    
    }
    header {
      font-size: 1.5em;
      font-weight: 700;
    }

    header a { color: var(--accent-color); text-decoration: none; font-weight: 600; padding: 0.2em 0.4em; border-radius: 4px; }
    header a:hover, nav a:focus { background: #c00000; outline: 3px solid #ffcc00; outline-offset: 4px; }


  nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; font-size: 1.1em; padding: .5em; }
    nav a { color: var(--accent-color); text-decoration: none; font-weight: 600; padding: 0.2em 0.4em; border-radius: 4px; }
    nav a:hover, nav a:focus { background: #c00000; outline: 3px solid #ffcc00; outline-offset: 4px; }

    /* Shortcut and Accessibility Buttons */
    .shortcut-toggle, .accessibility-btn {
      background: #ffeeb6;
      border: 2px solid #00374f;
      color: #00374f;
      padding: 6px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
      margin: 0.5em auto;
      display: inline-block;
    }

    .shortcut-toggle:hover,
    .shortcut-toggle:focus,
    .accessibility-btn:hover,
    .accessibility-btn:focus {
      background: var(--accent-color);
      outline: 3px solid #00374f;
      outline-offset: 3px;
    }

    /* Modal Backdrop (Shortcuts & Accessibility share similar style) */
    .modal-backdrop,
    .accessibility-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .modal-backdrop.active,
    .accessibility-modal-backdrop.active {
      display: flex;
      animation: fadeIn 0.2s ease-in-out;
    }

    /* Modal Windows */
    .modal,
    .accessibility-modal {
      background: #fff;
      border-radius: 10px;
      max-width: 480px;
      width: 90%;
      padding: 1.5em;
      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
      text-align: left;
      position: relative;
      animation: slideIn 0.25s ease-out;
    }

    .modal h3,
    .accessibility-modal h3 {
      color: #00374f;
      margin-bottom: 0.8em;
      font-size: 1.4em;
    }

    .modal ul {
      list-style: none;
      padding-left: 0;
      margin-bottom: 1em;
    }

    .modal li {
      margin: 0.3em 0;
      font-size: 0.95em;
    }

    .modal-close,
    .accessibility-close {
      background: #00374f;
      color: var(--accent-color);
      border: none;
      font-weight: 700;
      border-radius: 6px;
      padding: 6px 12px;
      cursor: pointer;
      display: inline-block;
      margin-top: 0.5em;
    }

    .modal-close:hover,
    .modal-close:focus,
    .accessibility-close:hover,
    .accessibility-close:focus {
      background: #c00000;
      outline: 3px solid var(--accent-color);
      outline-offset: 2px;
    }

    /* Accessibility options */
    .accessibility-option {
      display: block;
      width: 100%;
      margin: 0.3em 0;
      padding: 0.4em;
      background: #f8f8f8;
      border: 1px solid #ccc;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1em;
    }

    .accessibility-option:hover,
    .accessibility-option:focus {
      background: #ffeeb6;
      outline: 2px solid #00374f;
    }

    .font-settings {
      margin-top: 1em;
      border-top: 1px solid #ccc;
      padding-top: 1em;
    }

    select, input[type="range"] {
      width: 100%;
      margin-top: 0.3em;
      padding: 0.3em;
      border-radius: 6px;
      border: 1px solid #ccc;
    }

    /* Main content */
    main {
      flex: 1;
      padding: 1em;
      text-align: center;
      max-width: 900px;
      margin: 0 auto;
    }

    .responsible-fishing {
      background: #fff8e1;
      margin: 1.5em auto;
      padding: 1em 1.5em;
      border-radius: 2em;
      margin-bottom: 1.2em;
      font-size: 1em;
      border-color: #00374f;
      border-width: .5em;
      border-style: solid;
    box-shadow: 0 .5em .5em rgba(0,0,0,0.1);}

    .responsible-fishing h2 {
      margin-bottom: 0.5em;
      font-size: 1.3em;
      color: var(--primary-color);
    }

    h2, h3 { margin-top: 1em; margin-bottom: .5em; line-height: 2em; font-weight: 700; }

    .hero-img {
      width: 300px;
      height: auto;
      object-fit: cover;
      border-radius: 8px;
      display: block;
      margin: 0 auto;
    }

    /* Footer */
    footer {
      background: var(--primary-color);
      color: var(--accent-color);
      text-align: center;
      padding: 10px;
      font-weight: 700;
      font-size: 1.2em;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes slideIn {
      from { transform: translateY(-10px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    @media (max-width: 768px) {
      nav { flex-direction: column; }
      header h1 { font-size: 1.4em; }
      .responsible-fishing { padding: 0.9rem 1rem; }
    }