:root{
    --cream: #F5EFE1;
    --ink: #2B2418;
    --paper: #FFFDF8;
    --hero-text: #55492F;
    --track-bg: #E4D9BC;
    --label-text: #6B5E3E;
    --body-text: #3A3223;
    --divider: #EAE2CC;
    --checkbox-border: #C9BB94;
    --footer-text: #8A7A56;

    --c1: #8E6FA1;
    --c1-dark: #4E3861;
    --c2: #8B9A57;
    --c2-dark: #4A5527;
    --c3: #E0A62E;
    --c3-dark: #8A5D0C;
    --c4: #D97539;
    --c4-dark: #843C13;
  }

  html[data-theme="dark"]{
    --cream: #1C1812;
    --ink: #EFE7D6;
    --paper: #26211A;
    --hero-text: #C9BCA0;
    --track-bg: #3A3226;
    --label-text: #B4A683;
    --body-text: #DCD2BC;
    --divider: #3A3226;
    --checkbox-border: #5A4F3B;
    --footer-text: #8A7A56;
  }

  *{ box-sizing: border-box; }

  body{
    margin:0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Work Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background 0.3s ease, color 0.3s ease;
  }

  .theme-toggle{
    position: fixed;
    top: 1.2rem;
    right: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--checkbox-border);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    font-size: 1.1rem;
    z-index: 10;
    transition: background 0.3s ease, color 0.3s ease;
  }

  .display{
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  .hero{
    padding: 4.5rem 1.5rem 2.5rem;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
  }
  .hero .eyebrow{
    font-size: 0.8rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c4-dark);
    font-weight: 600;
    margin-bottom: 1rem;
  }
  .hero h1{
    font-size: clamp(2.4rem, 7vw, 4.2rem);
    line-height: 0.95;
    margin: 0 0 1.25rem;
  }
  .hero p{
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--hero-text);
    max-width: 540px;
    margin: 0 auto;
  }

  .progress-wrap{
    max-width: 820px;
    margin: 0 auto 2.5rem;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
  }
  .progress-track{
    flex: 1;
    height: 8px;
    background: var(--track-bg);
    border-radius: 99px;
    overflow: hidden;
  }
  .progress-fill{
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4));
    transition: width 0.4s ease;
  }
  .progress-label{
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--label-text);
    white-space: nowrap;
  }

  .stack{
    max-width: 820px;
    margin: 0 auto 4rem;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .item{
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 0 var(--divider);
  }

  .item-head{
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.4rem 1.6rem;
    cursor: pointer;
    color: var(--paper);
    user-select: none;
  }
  .item:nth-child(1) .item-head{ background: var(--c1); }
  .item:nth-child(2) .item-head{ background: var(--c2); }
  .item:nth-child(3) .item-head{ background: var(--c3); }
  .item:nth-child(4) .item-head{ background: var(--c4); }

  .item-num{
    font-family: 'Anton', sans-serif;
    font-size: 1.6rem;
    opacity: 0.55;
    min-width: 2.2rem;
  }
  .item-title{
    flex: 1;
  }
  .item-title .kicker{
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.85;
    margin-bottom: 0.15rem;
  }
  .item-title h2{
    font-size: clamp(1.25rem, 3vw, 1.7rem);
    margin: 0;
    line-height: 1.05;
  }
  .chevron{
    font-size: 1.4rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }
  .item.open .chevron{
    transform: rotate(180deg);
  }

  .item-body-wrap{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  .item.open .item-body-wrap{
    max-height: 500px;
  }
  .item-body{
    padding: 1.6rem 1.6rem 1.8rem;
    background: var(--paper);
  }
  .item-body p{
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 1rem;
    color: var(--body-text);
  }
  .practice-row{
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--divider);
  }
  .practice-row label{
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--ink);
  }
  .item:nth-child(1) .practice-row input:checked{ background: var(--c1); border-color: var(--c1); }
  .item:nth-child(2) .practice-row input:checked{ background: var(--c2); border-color: var(--c2); }
  .item:nth-child(3) .practice-row input:checked{ background: var(--c3); border-color: var(--c3); }
  .item:nth-child(4) .practice-row input:checked{ background: var(--c4); border-color: var(--c4); }

  .practice-row input[type="checkbox"]{
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--checkbox-border);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
  }
  .practice-row input[type="checkbox"]:checked::after{
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--paper);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  footer{
    text-align: center;
    padding: 0 1.5rem 3.5rem;
    font-size: 0.82rem;
    color: var(--footer-text);
  }

  @media (prefers-reduced-motion: reduce){
    .item-body-wrap, .chevron{ transition: none; }
  }

  @media (min-width: 720px){
    .stack{
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: start;
    }
    .item-head{
      cursor: default;
    }
    .chevron{
      display: none;
    }
    .item-body-wrap,
    .item.open .item-body-wrap{
      max-height: none;
    }
  }