/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
=VARIABLES
=VAR-COLOURS
=VAR-SIZES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* CSS Custom Properties for Light-Dark Mode */
:root {
  /* Light mode colors (default) */
	--tut-hero-text: #ffffff;
	--bg-hero: #3c5d4a;
	--bg-secondary: #f8fafc;
	--bg-card: #ffffff;
  --bg-btn-hov: #aabbaa;
	--chip-bg: #E8E8E8;
  --chip-pale-bg: #F2F2F2;
  --text-primary-chip: #1a202c;
    --code-bg: #383838;
    --primary-color: #3c5d4a;
    --primary-btn-hov: #dedede;
    --primary-fkbtn-color: #3c5d4a;
    --primary-mid: #B9B9B9;
    --fill-color: #c9b56f;
    --primary-btn-color: #3c5d4a;
    --plain-color: #4f4d4d;
    --plain-bg: rgba(79, 77, 77, 0.9);
    --plain-bg-hatched: rgba(79, 77, 77, 0.1);
    --ok-color: #22c55e;
    --ok-bg: rgba(34, 197, 94, 0.08);
    --ok-bg-hatched: rgba(34, 197, 94, 0.03);
    --error-color: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.08);
    --error-bg-hatched: rgba(239, 68, 68, 0.03);

  @media (prefers-color-scheme: dark) {
  :root {
  	--tut-hero-text: #1e1e1e;
  	--bg-hero: #111414;
  	--bg-secondary: #282828;
    --bg-btn-hov: #787878;
    --primary-fkbtn-color: #ffffff;
  	--chip-bg: #5D5D5D;
    --chip-pale-bg: #444444;
    --text-primary-chip: #ffffff;
  	--bg-card: #171717;
    --code-bg: #161616;
    --primary-color: #3c5d4a;
    --primary-btn-hov: #ededed;
    --primary-mid: #2E2E2E;
    --fill-color: #c9b56f;
    --primary-btn-color: #3c5d4a;
    --plain-bg: rgba(79, 77, 77, 0.9);
    --plain-bg-hatched: rgba(79, 77, 77, 0.1);
    --ok-bg: rgba(34, 197, 94, 0.22);
    --ok-bg-hatched: rgba(34, 197, 94, 0.05);
    --error-bg: rgba(248, 113, 113, 0.22);
    --error-bg-hatched: rgba(239, 68, 68, 0.05);
  }
}

.dark-mode {
	--tut-hero-text:;
  	--bg-hero: #111414;
  	--bg-secondary: #282828;
    --bg-btn-hov: #464646;
  	--bg-card: #171717;
  	--chip-bg: #5D5D5D;
    --chip-pale-bg: #444444;
    --text-primary-chip: #ffffff;
    --code-bg: #161616;
    --primary-color: #3c5d4a;
    --primary-btn-hov: #ededed;
    --primary-fkbtn-color: #ffffff;
    --primary-mid: #2E2E2E;
    --fill-color: #c9b56f;
    --primary-btn-color: #3c5d4a;
    --plain-bg: rgba(79, 77, 77, 0.9);
    --plain-bg-hatched: rgba(79, 77, 77, 0.1);
    --ok-bg: rgba(34, 197, 94, 0.22);
    --ok-bg-hatched: rgba(34, 197, 94, 0.05);
    --error-bg: rgba(248, 113, 113, 0.22);
    --error-bg-hatched: rgba(239, 68, 68, 0.05);
}

	--radius-sm: 0.5rem;
    --radius-md: 0.9rem;
    --radius-lg: 1.25rem;
}


:root {
  /* Slider theming */
  --range-track-height: 0.6rem;
  --range-track-bg: var(--primary-green, #3c5d4a);
  --range-track-radius: 999px;

  --range-thumb-size: 1.3rem;
  --range-thumb-bg: #ffffff;
  --range-thumb-border: 2px solid #1e2f26;

  --range-focus-ring: 0 0 0 3px rgba(60, 93, 74, 0.45);
}


#tut-hero {
	background-color: var(--bg-hero); 
	margin-block-start: 0; 
	margin-block-end:: 0;
	padding: var(--spacer-8);
}

.tut-hero {
	padding-block: 1.75rem;
    padding-inline: 1rem;
    box-shadow: var(--shadow-soft);
    inset-block-start: 0;
}

#tut-hero h1, #tut-hero h2 {
	color: var(--tut-hero-text);
	font-weight: 700;
}

#tut-hero h1 {
	margin-block: 0 0.25rem;
    font-size: clamp(1.6rem, 2.4vw + 1rem, 2.3rem);	
}

#tut-hero h2 {
	font-size: 1em;
    margin-block-start: 0;
    margin-block-end: 0;
}

article header {
	position: revert;
	background-color: transparent;
	border-bottom: none;
}

section:first-of-type {
	margin-block-start: 0;
    margin-block-end: 0;
}

.tuts-ol,
.tuts-ul {
  display: block;
  margin-block-start: 0;
  margin-block-end: 1em;
  padding-inline-start: 40px;
  unicode-bidi: isolate;
}

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      font-size: 16px;
    }

/*    body {
      margin: 0;
      font-family: "Open Sans", sans-serif;
      background-color: var(--footer-bg);
      color: var(--text-color);
      line-height: 1.6;
    }*/

    a {
      color: var(--primary-color);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .site-header__inner {
      max-inline-size: 70rem;
      margin-inline: auto;
    }

    .site-header__bar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .site-header__text {
      max-inline-size: 46rem;
    */}

/*    .site-header h1 {
      margin-block: 0 0.25rem;
      font-size: clamp(1.6rem, 2.4vw + 1rem, 2.3rem);
    }*/

    .site-header h2 {
        font-size: 1em;
        margin-block-start: 0;
        margin-block-end: 0;
    }

    .site-header p {
      margin-block: 0.25rem 0;
      color: #e5ece9;
    }

    .site-header__meta {
      margin-block-start: 0.75rem;
      font-size: 0.9rem;
      color: #d7e3de;
    }

    .theme-toggle {
      font-size: 0.85rem;
      padding-block: 0.35rem;
      padding-inline: 0.9rem;
      white-space: nowrap;
    }

    main {
      padding-block: 1.75rem 2.5rem;
      padding-inline: 1rem;
    }
    #main-content {
      background-color: var(--bg-page);
    }

    .tutorial-layout {
      max-inline-size: 75rem;
      margin-inline: auto;
      display: grid;
      gap: 1.5rem;
      align-items: flex-start;
    }

    @media (min-width: 960px) {
      .tutorial-layout {
        grid-template-columns: minmax(0, 15rem) minmax(0, 2.5fr) minmax(0, 15rem);
      }
    }

    @media (max-width: 959.98px) {
      .tutorial-layout {
        grid-template-areas:
          "progress"
          "nav"
          "content"
          "aside";
      }

      .course-progress {
        grid-area: progress;
      }

      .lesson-nav {
        grid-area: nav;
      }

      .lesson-panels {
        grid-area: content;
      }

      .sidebar {
        grid-area: aside;
      }
    }

    /* Progress bar */
    .course-progress {
      grid-column: 1 / -1;
      background-color: var(--bg-card);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-soft);
      padding-block: 0.75rem;
      padding-inline: 1rem;
      border: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .course-progress__label {
      font-size: 0.85rem;
      color: var(--muted-color);
    }

    .course-progress__track {
      block-size: 0.6rem;
      border-radius: 999px;
      background-color: var(--chip-bg);
      overflow: hidden;
    }

    .course-progress__fill {
      block-size: 100%;
      inline-size: 11.11%;
      border-radius: inherit;
      background-image: linear-gradient(to right, var(--primary-color), var(--fill-color));
      transition: inline-size 0.25s ease-out;
    }

    .course-progress__text {
      font-size: 0.85rem;
      color: var(--muted-color);
    }

    .course-progress__step {
      display: none;
    }

    /* Progress width + text per lesson */
    #lesson-1-toggle:checked ~ .tutorial-layout .course-progress__fill { inline-size: 11.11%; }
    #lesson-2-toggle:checked ~ .tutorial-layout .course-progress__fill { inline-size: 22.22%; }
    #lesson-3-toggle:checked ~ .tutorial-layout .course-progress__fill { inline-size: 33.33%; }
    #lesson-4-toggle:checked ~ .tutorial-layout .course-progress__fill { inline-size: 44.44%; }
    #lesson-5-toggle:checked ~ .tutorial-layout .course-progress__fill { inline-size: 55.55%; }
    #lesson-6-toggle:checked ~ .tutorial-layout .course-progress__fill { inline-size: 66.66%; }
    #lesson-7-toggle:checked ~ .tutorial-layout .course-progress__fill { inline-size: 77.77%; }
    #lesson-8-toggle:checked ~ .tutorial-layout .course-progress__fill { inline-size: 88.88%; }
    #lesson-9-toggle:checked ~ .tutorial-layout .course-progress__fill { inline-size: 100%; }

    #lesson-1-toggle:checked ~ .tutorial-layout .course-progress__step--1,
    #lesson-2-toggle:checked ~ .tutorial-layout .course-progress__step--2,
    #lesson-3-toggle:checked ~ .tutorial-layout .course-progress__step--3,
    #lesson-4-toggle:checked ~ .tutorial-layout .course-progress__step--4,
    #lesson-5-toggle:checked ~ .tutorial-layout .course-progress__step--5,
    #lesson-6-toggle:checked ~ .tutorial-layout .course-progress__step--6,
    #lesson-7-toggle:checked ~ .tutorial-layout .course-progress__step--7,
    #lesson-8-toggle:checked ~ .tutorial-layout .course-progress__step--8,
    #lesson-9-toggle:checked ~ .tutorial-layout .course-progress__step--9 {
      display: inline;
    }

    /* Lesson navigation */
    .lesson-nav {
      background-color: var(--bg-card);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-soft);
      padding-block: 0.75rem;
      padding-inline: 0.75rem;
      border: 1px solid var(--border-color);
      /*position: sticky;*/
      inset-block-start: 1rem;
    }

    .lesson-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 0.25rem;
    }

    .lesson-list label {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      padding-block: 0.45rem;
      padding-inline: 0.7rem;
      border-radius: var(--radius-md);
      cursor: pointer;
      font-size: 0.9rem;
      color: var(--muted-color);
      border: 1px solid transparent;
      transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
        transform 0.1s ease;
    }

    .lesson-list label:hover {
      background-color: var(--primary-soft);
      border-color: var(--primary-color);
      color: var(--primary-dark);
      transform: translateY(-1px);
    }

    .lesson-list label:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }

    .lesson-list__index {
      inline-size: 1.6rem;
      block-size: 1.6rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background-color: #c9b56f;
      color: #1a202c;
      font-weight: 600;
      font-size: 0.8rem;
      flex-shrink: 0;
    }

    .lesson-list__label-text {
      flex: 1;
    }

    /* Hidden radios controlling state */
    .lesson-toggle {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
      clip: rect(0 0 0 0);
      overflow: hidden;
      white-space: nowrap;
    }

    .lesson-panels {
      background-color: var(--bg-card);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-soft);
      padding-block: 1.25rem;
      padding-inline: 1.5rem;
      border: 1px solid var(--border-color);
      min-block-size: 18rem;
    }

    .lesson {
      display: none;
      animation: fadeIn 180ms ease-out;
    }

    .lesson header h2 {
      margin-block: 0 0.35rem;
      font-size: 1.35rem;
    }

    .lesson header p {
      margin-block: 0 1rem;
      color: var(--muted-color);
    }

    .lesson section + section {
      margin-block-start: 1rem;
    }

    .lesson-description {
      font-size: 0.98rem;
    }

    .example-card {
      margin-block-start: 0.75rem;
      padding-block: 1rem;
      padding-inline: 1rem;
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      background-color: var(--primary-softer);
    }

    .example-card__title {
      font-weight: 600;
      margin-block: 0 0.5rem;
      font-size: 0.95rem;
      color: var(--primary-dark);
    }

    .example-card__hint {
      font-size: 0.88rem;
      color: var(--muted-color);
      margin-block-end: 0.5rem;
    }

    .example-form {
      display: grid;
      gap: 0.7rem;
      max-inline-size: 36rem;
    }

    .example-form--columns {
      grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }

    .example-form label {
      font-size: 0.9rem;
      gap: 0.25rem;
      color: var(--text-color);
    }

    .note--box {      
      padding:12px 16px;
      border-radius:10px;
      margin:1rem 0
    }
    .note--positive {
      border-left:6px solid var(--ok-bg);
      background:var(--ok-bg-hatched);
    }

    .note--negative {
      border-left:6px solid var(--error-bg);
      background:var(--error-bg-hatched);
    }

    .note--plain {
      border-left:6px solid var(--plain-bg);
      background:var(--plain-bg-hatched);
    }


    output#totalTickets, output#budgetDisplay {
      border: 2px solid #c9b56f; 
      padding: 1px 5px 2px;
    }

    .example-form small {
      font-size: 0.8rem;
      color: var(--muted-color);
    }

    .example-form input[type="text"],
    .example-form input[type="email"],
    .example-form input[type="password"],
    .example-form input[type="url"],
    .example-form input[type="tel"],
    .example-form input[type="search"],
    .example-form input[type="number"],
    .example-form input[type="date"],
    .example-form input[type="time"],
    .example-form input[type="datetime-local"],
    .example-form input[type="month"],
    .example-form input[type="week"],
    .example-form input[type="color"],
    .example-form select,
    .example-form textarea {
      padding-block: 0.45rem;
      padding-inline: 0.5rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-color);
      font: inherit;
      color: var(--text-primary-chip);
      background-color: var(--chip-pale-bg);
      inline-size: 100%;
    }

    :root[data-theme="dark"] .example-form input[type="text"],
    :root[data-theme="dark"] .example-form input[type="email"],
    :root[data-theme="dark"] .example-form input[type="password"],
    :root[data-theme="dark"] .example-form input[type="url"],
    :root[data-theme="dark"] .example-form input[type="tel"],
    :root[data-theme="dark"] .example-form input[type="search"],
    :root[data-theme="dark"] .example-form input[type="number"],
    :root[data-theme="dark"] .example-form input[type="date"],
    :root[data-theme="dark"] .example-form input[type="time"],
    :root[data-theme="dark"] .example-form input[type="datetime-local"],
    :root[data-theme="dark"] .example-form input[type="month"],
    :root[data-theme="dark"] .example-form input[type="week"],
    :root[data-theme="dark"] .example-form input[type="color"],
    :root[data-theme="dark"] .example-form select,
    :root[data-theme="dark"] .example-form textarea {
      background-color: #000000;
      color: var(--text-color);
    }

    .example-form textarea {
      min-block-size: 5rem;
      resize: vertical;
    }

    .example-form input[type="file"] {
      font-size: 0.9rem;
    }

    .example-form input:focus-visible,
    .example-form select:focus-visible,
    .example-form textarea:focus-visible {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: var(--focus-ring);
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--text-primary-chip);
    }   

    form input.button {
      width: revert;
    }

    fieldset {
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      padding-block: 0.75rem;
      padding-inline: 0.9rem;
      margin: 0;
    }

    legend {
      padding-inline: 0.25rem;
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--primary-dark);
    }

    .choice-group {
      display: grid;
      gap: 0.35rem;
      margin-block-start: 0.4rem;
    }

    .choice-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9rem;
    }

    li input[type="checkbox"] {
      width: revert;
      accent-color: var(--primary-color);
    }

    li label {
      font-size: inherit;
      font-size: inherit;
    }

    .choice-item input[type="checkbox"],
    .choice-item input[type="radio"] {
      inline-size: 1rem;
      block-size: 1rem;
      accent-color: var(--primary-color);
    }

    .button,
    .fake-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.3rem;
      padding-block: 0.45rem;
      padding-inline: 0.9rem;
      border-radius: 999px;
      font-size: 0.9rem;
      font-weight: 600;
      border: 1px solid transparent;
      background-color: var(--primary-btn-color);
      color: #ffffff;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
    }

    .button--secondary {
      background-color: var(--primary-btn-hov);
      color: var(--primary-btn-color);
      border-color: var(--primary-soft);
    }

    :root[data-theme="dark"] .button--secondary {
      background-color: transparent;
      color: #ffffff;
      border-color: #334155;
    }

    .button:hover,
    .fake-button:hover {
      background-color: var(--bg-btn-hov);
      color: var(--primary-dark);
      text-decoration: none;
    }

    .button--secondary:hover {
      background-color: var(--primary-softer);
      color: var(--primary-dark);
    }

    article.lesson footer .button, 
    article.lesson footer .fake-button, 
    article.lesson footer .button--secondary {
      border: 1px dotted var(--fill-color);
    } 

    /* Toggle */
    :root[data-theme="dark"] .button--secondary:hover {
      background-color: #111827;
      color: #ffffff;
    }

    .fake-button {
      border-radius: 999px;
    }

    .fake-button[role="button"] {
      text-decoration: none;
    }

    .fake-button:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }

    .lesson-footer {
      margin-block-start: 1.25rem;
      padding-block-start: 0.9rem;
      border-block-start: 1px solid var(--border-color);
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
      justify-content: space-between;
      font-size: 0.85rem;
    }

    .lesson-progress {
      color: var(--muted-color);
    }

    .lesson-controls {
      display: flex;
      gap: 0.5rem;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .lesson-controls label {
      xpadding: 0;
    }

    .lesson-controls .fake-button {
      padding-inline: 0.95rem;
    }

    .lesson-controls label.fake-button {
      border: none;
    }

    .lesson-controls label.fake-button:hover {
      background-color: var(--bg-btn-hov);
    }

    .lesson-controls label.fake-button.button--secondary:hover {
      background-color: var(--bg-btn-hov);
      color: var(--primary-fkbtn-color);
    }

    .lesson-controls label.fake-button:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }

    .lesson aside {
      margin-block-start: 0.75rem;
      padding-block: 0.75rem;
      padding-inline: 0.9rem;
      background-color: var(--surface-subtle);
      border-radius: var(--radius-md);
      border: 1px dashed var(--border-color);
      font-size: 0.85rem;
      color: var(--muted-color);
    }

    article.lesson footer {
      background-color: transparent;
    }

    .semantic-demo {
      margin-block-start: 0.75rem;
      border-radius: var(--radius-md);
      border: 1px dashed var(--border-color);
      padding-block: 0.75rem;
      padding-inline: 0.75rem;
      background: var(--primary-mid);
    }

    :root[data-theme="dark"] .semantic-demo {
      background: var(--primary-mid);
    }

    .semantic-demo__grid {
      display: grid;
      gap: 0.5rem;
      grid-template-areas:
        "header header"
        "nav nav"
        "article aside"
        "footer footer";
      grid-template-columns: 2fr 1fr;
    }

    .semantic-demo__box {
      border-radius: var(--radius-sm);
      padding-block: 0.45rem;
      padding-inline: 0.6rem;
      font-size: 0.85rem;
      background-color: var(--bg-card);
      border: 1px solid rgba(60, 93, 74, 0.25);
    }

    :root[data-theme="dark"] .semantic-demo__box {
      background-color: var(--bg-card);
      border-color: rgba(148, 163, 184, 0.4);
    }

    .semantic-demo__box strong {
      color: var(--primary-dark);
    }

    .semantic-demo__header {
      grid-area: header;
    }

    .semantic-demo__nav {
      grid-area: nav;
    }

    .semantic-demo__article {
      grid-area: article;
    }

    .semantic-demo__aside {
      grid-area: aside;
    }

    .semantic-demo__footer {
      grid-area: footer;
    }

    .semantic-demo__code {
      margin-block-start: 0.75rem;
      font-size: 0.8rem;
      background-color: var(--code-bg);
      color: #e5e7eb;
      border-radius: var(--radius-md);
      padding-block: 0.75rem;
      padding-inline: 0.75rem;
      overflow-x: auto;
    }

    .semantic-demo__code code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace;
      white-space: pre;
    }

    /* Base slider */
    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      margin: 0.75rem 0;
      background: transparent;
      cursor: pointer;
    }

    /* Remove default outline – we’ll add a custom focus style */
    input[type="range"]:focus {
      outline: none;
    }

    /* TRACK
       -------------------------------------------------- */
    /* Chrome / Edge / Safari */
    input[type="range"]::-webkit-slider-runnable-track {
      height: var(--range-track-height);
      background: var(--range-track-bg);
      border-radius: var(--range-track-radius);
      border: none;
    }

    /* Firefox */
    input[type="range"]::-moz-range-track {
      height: var(--range-track-height);
      background: var(--range-track-bg);
      border-radius: var(--range-track-radius);
      border: none;
    }

    /* THUMB
       -------------------------------------------------- */
    /* Chrome / Edge / Safari */
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: var(--range-thumb-size);
      height: var(--range-thumb-size);
      border-radius: 50%;
      background: var(--range-thumb-bg);
      border: var(--range-thumb-border);
      cursor: pointer;
      /* Center thumb on track – Chrome cares about this */
      margin-top: calc(
        (var(--range-track-height) - var(--range-thumb-size)) / 2
      );
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    }

    /* Firefox */
    input[type="range"]::-moz-range-thumb {
      width: var(--range-thumb-size);
      height: var(--range-thumb-size);
      border-radius: 50%;
      background: var(--range-thumb-bg);
      border: var(--range-thumb-border);
      cursor: pointer;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    }

    /* Firefox draws a dotted outline on the whole control – remove it
       since we’re handling focus on the thumb */
    input[type="range"]:-moz-focusring {
      outline: none;
    }

    /* FOCUS STATE
       -------------------------------------------------- */
    input[type="range"]:focus-visible::-webkit-slider-thumb,
    input[type="range"]:focus-visible::-moz-range-thumb {
      box-shadow: var(--range-focus-ring);
    }

    /* Optional: disabled state */
    input[type="range"]:disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      margin-bottom: 0.5em;
      padding-inline: 0.6rem;
      padding-block: 0.15rem;
      border-radius: 999px;
      background-color: var(--primary-btn-color);
      color: #ffffff;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .badge--outline {
      background-color: transparent;
      border: 1px solid var(--primary-soft);
    }

    .input-type-grid {
      display: grid;
      gap: 0.3rem 0.6rem;
      grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
      margin-block-start: 0.5rem;
      font-size: 0.8rem;
    }

    .input-type-grid span {
      padding-inline: 0.4rem;
      padding-block: 0.15rem;
      border-radius: 999px;
      background-color: var(--chip-bg);
      text-align: center;
    }

    .sidebar {
      background-color: var(--bg-card);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-soft);
      padding-block: 1rem;
      padding-inline: 1rem;
      border: 1px solid var(--border-color);
      font-size: 0.88rem;
    }

    .sidebar h2 {
      font-size: 1rem;
      margin-block: 0 0.5rem;
      color: var(--primary-dark);
    }

    .sidebar dl {
      margin: 0;
    }

    .sidebar dt {
      font-weight: 600;
      margin-block-start: 0.5rem;
      font-size: 0.88rem;
    }

    .sidebar dd {
      margin-inline: 0;
      margin-block: 0.15rem 0;
      color: var(--muted-color);
      font-size: 0.85rem;
    }

    .sidebar code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace;
      font-size: 0.85em;
      background-color: var(--chip-bg);
      padding-inline: 0.2rem;
      border-radius: 0.2rem;
    }

    .tagline {
      font-size: 0.86rem;
      color: var(--muted-color);
      margin-block-start: 0.5rem;
    }

    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-block-start: 0.4rem;
    }

    .pill-row span {
      font-size: 0.75rem;
      padding-inline: 0.5rem;
      padding-block: 0.15rem;
      border-radius: 999px;
      background-color: var(--chip-bg);
      color: var(--muted-color);
    }

    .site-footer {
      border-block-start: 1px solid var(--border-color);
      padding-block: 1rem 1.5rem;
      padding-inline: 1rem;
      font-size: 0.85rem;
      color: var(--muted-color);
      background-color: var(--bg-page);
    }

    .site-footer__inner {
      max-width: 32rem;
      margin: 0 auto;
    }

    footer a {
      color: var(--primary-color);
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 640px) {
      .lesson-panels {
        padding-inline: 1rem;
      }

      .lesson-nav {
        position: static;
      }
    }

    /* Connect radios to visible lessons */
    #lesson-1-toggle:checked ~ .tutorial-layout .lesson--1,
    #lesson-2-toggle:checked ~ .tutorial-layout .lesson--2,
    #lesson-3-toggle:checked ~ .tutorial-layout .lesson--3,
    #lesson-4-toggle:checked ~ .tutorial-layout .lesson--4,
    #lesson-5-toggle:checked ~ .tutorial-layout .lesson--5,
    #lesson-6-toggle:checked ~ .tutorial-layout .lesson--6,
    #lesson-7-toggle:checked ~ .tutorial-layout .lesson--7,
    #lesson-8-toggle:checked ~ .tutorial-layout .lesson--8,
    #lesson-9-toggle:checked ~ .tutorial-layout .lesson--9 {
      display: block;
    }

    /* Active styling for lesson navigation items */
    #lesson-1-toggle:checked ~ .tutorial-layout label[for="lesson-1-toggle"],
    #lesson-2-toggle:checked ~ .tutorial-layout label[for="lesson-2-toggle"],
    #lesson-3-toggle:checked ~ .tutorial-layout label[for="lesson-3-toggle"],
    #lesson-4-toggle:checked ~ .tutorial-layout label[for="lesson-4-toggle"],
    #lesson-5-toggle:checked ~ .tutorial-layout label[for="lesson-5-toggle"],
    #lesson-6-toggle:checked ~ .tutorial-layout label[for="lesson-6-toggle"],
    #lesson-7-toggle:checked ~ .tutorial-layout label[for="lesson-7-toggle"],
    #lesson-8-toggle:checked ~ .tutorial-layout label[for="lesson-8-toggle"],
    #lesson-9-toggle:checked ~ .tutorial-layout label[for="lesson-9-toggle"] {
      background-color: var(--primary-soft);
      border-color: var(--primary-color);
      color: var(--primary-dark);
      transform: translateY(-1px);
    }

    #lesson-1-toggle:checked ~ .tutorial-layout label[for="lesson-1-toggle"] .lesson-list__index,
    #lesson-2-toggle:checked ~ .tutorial-layout label[for="lesson-2-toggle"] .lesson-list__index,
    #lesson-3-toggle:checked ~ .tutorial-layout label[for="lesson-3-toggle"] .lesson-list__index,
    #lesson-4-toggle:checked ~ .tutorial-layout label[for="lesson-4-toggle"] .lesson-list__index,
    #lesson-5-toggle:checked ~ .tutorial-layout label[for="lesson-5-toggle"] .lesson-list__index,
    #lesson-6-toggle:checked ~ .tutorial-layout label[for="lesson-6-toggle"] .lesson-list__index,
    #lesson-7-toggle:checked ~ .tutorial-layout label[for="lesson-7-toggle"] .lesson-list__index,
    #lesson-8-toggle:checked ~ .tutorial-layout label[for="lesson-8-toggle"] .lesson-list__index,
    #lesson-9-toggle:checked ~ .tutorial-layout label[for="lesson-9-toggle"] .lesson-list__index {
      background-color: var(--primary-color);
      color: #ffffff;
    }

    /* Quiz styling */
    .quiz {
      margin-block-start: 0.75rem;
      padding-block: 0.75rem;
      padding-inline: 0.9rem;
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      background-color: var(--surface-subtle);
      font-size: 0.9rem;
    }

    .quiz__question {
      margin-block: 0 0.5rem;
      font-weight: 600;
    }

    .quiz__options {
      display: grid;
      gap: 0.35rem;
      margin-block-end: 0.35rem;
    }

    .quiz__options .choice-item {
      cursor: pointer;
    }

    .quiz__feedback {
      display: none;
      margin-block-start: 0.4rem;
      padding-block: 0.5rem;
      padding-inline: 0.7rem;
      border-radius: var(--radius-sm);
      border-inline-start: 3px solid transparent;
      font-size: 0.85rem;
    }

    .quiz__feedback.is-visible {
      display: block;
    }

    .quiz__feedback--correct {
      border-inline-start-color: var(--ok-color);
      background-color: var(--ok-bg);
    }

    .quiz__feedback--incorrect {
      border-inline-start-color: var(--error-color);
      background-color: var(--error-bg);
    }

    /* Quiz 1 logic */
    #quiz1-nav:checked ~ .quiz1-feedback-incorrect,
    #quiz1-aside:checked ~ .quiz1-feedback-incorrect {
      display: block;
    }

    #quiz1-main:checked ~ .quiz1-feedback-correct {
      display: block;
    }

    /* Quiz 2 logic */
    #quiz2-text:checked ~ .quiz2-feedback-incorrect,
    #quiz2-password:checked ~ .quiz2-feedback-incorrect {
      display: block;
    }

    #quiz2-email:checked ~ .quiz2-feedback-correct {
      display: block;
    }

    /* Quiz 3 logic */
    #quiz3-textarea:checked ~ .quiz3-feedback-incorrect,
    #quiz3-datalist:checked ~ .quiz3-feedback-incorrect {
      display: block;
    }

    #quiz3-select:checked ~ .quiz3-feedback-correct {
      display: block;
    }


    .gradient-bar-topper,
    .gradient-bar-baser {
      position: relative;
      margin-top: 0;
    }

    .gradient-bar-topper:after,
    .gradient-bar-baser:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0.7em;
      margin: 0;
      padding: 0;
      background: linear-gradient(to right, #a44336 0%, #a44336 25%, #92b5bd 25%, #92b5bd 50%, #E18726 50%, #E18726 75%, #a47391 75%, #a47391 100%);
    }
/* 
    .gradient-bar-topper:after {
      border-bottom: 1px solid #ffffff;
    } */

    /* .gradient-bar-topper {
      margin-top: 0;
      margin-bottom: 0.2em;
    } */

    /* .gradient-bar-baser:after {
      border-bottom: 1px solid #ffffff;
    } */


    #footer {
      margin: 0;
      padding: 1.5em;
      text-align: center;
      background-color: var(--footer-bg);
      color: var(--footer-text);
      clear: both;
    }

    #footer a {
      color: var(--footer-nav-text);
    }
    #footer .col-2 {
      float: left;
      width: 50%;
      padding-bottom: 3em;
    }

    #footer p {
      color: var(--footer-text);
      font-size: 80%;
    }
    #footer p#textLinks a {
      color: var(--footer-text);
      font-size: 90%;
    }

    #footer-nav {
      margin-bottom:  1.5em;
    }
    #footer-nav a {
      padding: var(--spacer-2) var(--spacer-3);
      text-decoration: none;
      border-bottom-width: 1px;
      border-bottom-color: var(--footer-text);
      color: var(--footer-nav-text)
    }
    #footer a:hover, #textLinks a:hover, #footer-nav a:hover,
    #footer a:active, #textLinks a:active, #footer-nav a:active,
    #footer a:focus, #textLinks a:focus, #footer-nav a:focus {
      background-color: var(--footer-text);
      color: var(--footer-bg);
      border-bottom: none;
    }

    @media only screen and (max-width: 420px) {
      #footer-nav a {
        line-height: 200%;
      }
    }

    @media only screen and (max-width: 920px) {
      footer .col-2 {
        float: none;
        width: 100%;
      }
    }

    .d-none {
      visibility: hidden;
      height: 0;
      width: 0;
    }


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
=SKIPLINK
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  .skip-link {
    position: absolute;
    top: -45px;
    left: var(--spacer-2);
    color: #ffffff;
    background:#0000ff ;
    font-weight: bold;
    padding: var(--spacer-2) var(--spacer-2);
    text-decoration: none;
    border-radius: var(--radius-md);
    z-index: 1000;
    transition: top 0.3s ease;
  }

  .skip-link:focus {
    top: var(--spacer-4);
    color: #ffffff;
  }


    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      * {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
    }

    @media print {
        header, footer, .card-footer, block-undhead, .btn, .section-divider, .wrapper, .flex-container, .print-none {
          display: none!important;
          height: 0!important;
        }
    }