:root {
    --cream:    #F7F3ED;
    --cream2:   #EDE8DF;
    --sand:     #D9D1C3;
    --tan:      #B8A99A;
    --brown:    #7A6658;
    --brown-dk: #4E3D32;

    --sage:     #7EA58A;
    --sage-lt:  #C8DDD0;
    --sage-dk:  #4A7560;

    --dusty:    #8BA3BF;
    --dusty-lt: #C5D5E8;
    --dusty-dk: #4A6A8A;

    --terr:     #C97B5A;
    --terr-lt:  #EDD4C4;
    --terr-dk:  #8B4E2E;

    --mauve:    #A07898;
    --mauve-lt: #DDC8D8;
    --mauve-dk: #6A4862;

    --gold:     #C8A84B;
    --gold-lt:  #EDE0BC;

    --text:     #3A2E26;
    --muted:    #8A7A6E;
    --border:   #DDD5C8;

    --r:   20px;
    --r-sm:12px;
    --shadow: 0 4px 20px rgba(58,46,38,0.08);
    --shadow-sm: 0 2px 8px rgba(58,46,38,0.06);
  }

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

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Comfortaa', sans-serif;
    background: var(--cream);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.6;
  }

  /* Subtle linen texture overlay */
  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 0;
  }

  .page {
    position: relative; z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 5rem;
  }

  /* ── HEADER ── */
  .header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1.5px solid var(--border);
    gap: 1rem;
  }

  .header-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 6px;
  }

  .header h1 {
    font-family: 'Comfortaa', sans-serif;
    font-size: clamp(1.9rem, 4.5vw, 2.8rem);
    font-weight: 700;
    color: var(--brown-dk);
    line-height: 1.1;
  }

  .header h1 em {
    font-style: normal;
    color: var(--sage-dk);
  }

  .header-sub {
    font-size: 13px;
    color: var(--muted);
    margin-top: 6px;
  }

  .header-deco {
    font-family: 'Comfortaa', sans-serif;
    font-size: 5rem;
    color: var(--cream2);
    line-height: 1;
    user-select: none;
    letter-spacing: -4px;
    flex-shrink: 0;
  }

  /* ── CASE TABS ── */
  .case-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 1.5rem;
    background: var(--cream2);
    border-radius: 14px;
    padding: 5px;
    width: fit-content;
  }

  .case-tab {
    font-family: 'Comfortaa', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    color: var(--muted);
    background: transparent;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
  }
  .case-tab:hover { color: var(--brown); }
  .case-tab.active {
    background: var(--cream);
    color: var(--brown-dk);
    box-shadow: 0 2px 8px rgba(58,46,38,0.1);
  }

  /* ── LETTER GRID ── */
  .grid-section {
    background: white;
    border-radius: var(--r);
    border: 1.5px solid var(--border);
    padding: 1.2rem 1rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
  }

  .letter-grid {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 5px;
  }

  .lbtn {
    aspect-ratio: 1;
    border-radius: 9px;
    border: 1.5px solid var(--cream2);
    font-family: 'Comfortaa', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    background: var(--cream);
    color: var(--tan);
    transition: all 0.18s ease;
  }
  .lbtn:hover {
    background: var(--sage-lt);
    color: var(--sage-dk);
    border-color: var(--sage);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(74,117,96,0.15);
  }
  .lbtn.sel {
    background: var(--sage);
    color: white;
    border-color: var(--sage-dk);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74,117,96,0.3);
  }

  /* ── STAGE ── */
  .stage {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    align-items: start;
  }

  /* Canvas column */
  .canvas-col { display: flex; flex-direction: column; gap: 10px; }

  .canvas-wrap {
    position: relative;
    background: white;
    border-radius: var(--r);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  /* Lines drawn via JS canvas */
  .canvas-lines { display: none; }

  canvas { display: block; position: relative; z-index: 1; }

  /* Speed control */
  .speed-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    box-shadow: var(--shadow-sm);
  }

  .speed-icon { font-size: 16px; flex-shrink: 0; }

  .speed-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
  }

  input[type=range] {
    flex: 1;
    height: 4px;
    appearance: none;
    background: linear-gradient(to right, var(--sage) var(--pct,40%), var(--cream2) var(--pct,40%));
    border-radius: 4px;
    outline: none;
    cursor: pointer;
  }
  input[type=range]::-webkit-slider-thumb {
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--sage);
    box-shadow: 0 1px 6px rgba(74,117,96,0.25);
    transition: transform 0.15s;
  }
  input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }

  /* ── RIGHT PANEL ── */
  .right-col { display: flex; flex-direction: column; gap: 12px; }

  /* Letter display */
  .letter-card {
    background: white;
    border-radius: var(--r);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .letter-glyph-wrap {
    width: 80px; height: 80px; flex-shrink: 0;
    border-radius: 16px;
    background: var(--sage-lt);
    border: 1.5px solid var(--sage);
    display: flex; align-items: center; justify-content: center;
  }

  .letter-glyph {
    font-family: 'Comfortaa', sans-serif;
    font-size: 52px;
    font-weight: 900;
    color: var(--sage-dk);
    line-height: 1;
  }

  .letter-meta { flex: 1; }

  .letter-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
  }

  .letter-reading {
    font-family: 'Comfortaa', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--brown-dk);
    line-height: 1.1;
  }

  .stroke-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    background: var(--gold-lt);
    color: var(--brown);
    font-size: 11px;
    font-weight: 700;
    border-radius: 50px;
    padding: 3px 10px;
    border: 1px solid var(--gold);
  }

  /* Controls */
  .controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .ctrl {
    padding: 11px 6px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: white;
    color: var(--brown);
    transition: all 0.16s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    box-shadow: var(--shadow-sm);
  }

  .ctrl:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(58,46,38,0.1); }
  .ctrl:active { transform: translateY(0); }

  .ctrl-icon { font-size: 20px; line-height: 1; }

  .ctrl.play {
    background: var(--sage);
    border-color: var(--sage-dk);
    color: white;
    box-shadow: 0 3px 0 var(--sage-dk), 0 4px 12px rgba(74,117,96,0.2);
  }
  .ctrl.play:hover {
    background: var(--sage-dk);
    transform: translateY(-2px);
    box-shadow: 0 5px 0 #2E5040, 0 6px 16px rgba(74,117,96,0.25);
  }
  .ctrl.play:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 var(--sage-dk);
  }

  /* Progress area */
  .progress-card {
    background: white;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
  }

  .progress-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .progress-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .progress-pct {
    font-family: 'Comfortaa', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--sage-dk);
  }

  .progress-track {
    height: 8px;
    background: var(--cream2);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
  }

  .progress-fill {
    height: 100%;
    background: var(--sage);
    border-radius: 8px;
    transition: width 0.12s ease;
    width: 0%;
  }

  .stars-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .star {
    font-size: 20px;
    opacity: 0.18;
    filter: grayscale(1);
    transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  }
  .star.lit {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.15);
  }

  /* Stroke list */
  .stroke-card {
    background: white;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }

  .stroke-head {
    padding: 9px 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--cream);
    border-bottom: 1.5px solid var(--border);
  }

  .stroke-body { padding: 8px; display: flex; flex-direction: column; gap: 5px; }

  .stroke-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1.5px solid transparent;
    font-size: 12px;
    font-weight: 700;
    color: var(--sand);
    background: var(--cream);
    transition: all 0.2s ease;
  }

  .stroke-item.active {
    background: var(--dusty-lt);
    border-color: var(--dusty);
    color: var(--dusty-dk);
  }
  .stroke-item.done {
    background: var(--sage-lt);
    border-color: var(--sage);
    color: var(--sage-dk);
  }

  .stroke-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--cream2);
    color: var(--tan);
    font-family: 'Comfortaa', sans-serif;
    font-size: 12px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
  }
  .stroke-item.active .stroke-num { background: var(--dusty); color: white; }
  .stroke-item.done  .stroke-num { background: var(--sage); color: white; }

  /* Done overlay message */
  .done-toast {
    position: fixed;
    bottom: 2rem; left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--brown-dk);
    color: white;
    font-family: 'Comfortaa', sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(58,46,38,0.25);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: none;
    z-index: 100;
    white-space: nowrap;
  }
  .done-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }

  @media (max-width: 680px) {
    .stage { grid-template-columns: 1fr; }
    .letter-grid { grid-template-columns: repeat(9, 1fr); }
    .header-deco { display: none; }
  }