:root {
      --duo: #58cc02;
      --duo-dark: #46a302;
      --sky: #80d8ff;
      --ocean: #0b5f89;
      --ink: #172033;
      --paper: #ffffff;
      --soft: #f3f7fb;
      --muted: #6b7280;
      --line: #d8e2ee;
      --gold: #ffc800;
      --red: #ff4b4b;
      --blue: #1cb0f6;
      --purple: #ce82ff;
      --teal: #00c2a8;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      font-family: "Cairo", sans-serif;
      background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.9) 0 6%, transparent 7%),
        radial-gradient(circle at 84% 20%, rgba(255,255,255,.75) 0 4%, transparent 5%),
        linear-gradient(180deg, #8de1ff 0%, #dff8ff 38%, #eaffd8 38%, #d7f4ba 100%);
      overflow-x: hidden;
    }

    button {
      border: 0;
      font-family: inherit;
      cursor: pointer;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 14px clamp(16px, 4vw, 52px);
      background: rgba(255,255,255,.9);
      border-bottom: 2px solid rgba(216,226,238,.8);
      backdrop-filter: blur(12px);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 22px;
      font-weight: 900;
      color: var(--duo-dark);
      white-space: nowrap;
    }

    .brand-mark {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: var(--duo);
      color: white;
      box-shadow: 0 5px 0 var(--duo-dark);
    }

    .stats {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 900;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 8px 14px;
      border: 2px solid var(--line);
      border-radius: 999px;
      background: white;
    }

    .shell {
      width: min(1180px, calc(100% - 28px));
      margin: 24px auto 64px;
    }

    .hero {
      position: relative;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 28px;
      align-items: center;
      min-height: 330px;
      padding: clamp(24px, 4vw, 48px);
      overflow: hidden;
    }

    .hero h1 {
      margin: 0 0 10px;
      color: #102033;
      font-size: clamp(38px, 6vw, 76px);
      line-height: 1.05;
      letter-spacing: 0;
    }

    .hero p {
      max-width: 660px;
      margin: 0;
      color: #365066;
      font-size: clamp(18px, 2.4vw, 25px);
      line-height: 1.7;
      font-weight: 700;
    }

    .mascot-scene {
      position: relative;
      min-height: 260px;
    }

    .island-art {
      position: absolute;
      inset: auto 0 6px;
      height: 150px;
      border-radius: 50% 50% 45% 45%;
      background: linear-gradient(180deg, #69d64d, #35a852 65%, #8d6e63 66%, #5d4037);
      box-shadow: 0 16px 0 rgba(12,74,110,.18);
      transform: rotate(-2deg);
    }

    .mascot {
      position: absolute;
      left: 50%;
      top: 0;
      translate: -50% 0;
      width: 184px;
      height: 184px;
      border-radius: 48% 48% 44% 44%;
      background: var(--duo);
      box-shadow: inset 0 -12px 0 rgba(0,0,0,.08), 0 12px 0 var(--duo-dark);
    }

    .mascot::before,
    .mascot::after {
      content: "";
      position: absolute;
      top: 58px;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: white;
      box-shadow: inset 0 -4px 0 rgba(0,0,0,.08);
    }

    .mascot::before { right: 36px; }
    .mascot::after { left: 36px; }

    .eye {
      position: absolute;
      top: 77px;
      width: 20px;
      height: 20px;
      z-index: 2;
      border-radius: 50%;
      background: #263238;
    }

    .eye.r { right: 53px; }
    .eye.l { left: 53px; }

    .beak {
      position: absolute;
      top: 108px;
      left: 50%;
      translate: -50% 0;
      width: 44px;
      height: 30px;
      border-radius: 8px 8px 18px 18px;
      background: var(--gold);
      z-index: 3;
    }

    .map {
      position: relative;
      padding: 26px 0 46px;
    }

    .map-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 12px;
    }

    .map-title h2 {
      margin: 0;
      font-size: clamp(28px, 4vw, 44px);
      color: #16324a;
    }

    .map-title p {
      margin: 4px 0 0;
      color: #577084;
      font-weight: 800;
    }

    .path {
      position: absolute;
      top: 130px;
      bottom: 90px;
      right: 50%;
      width: 9px;
      border-radius: 999px;
      background: rgba(255,255,255,.75);
      box-shadow: inset 0 0 0 2px rgba(28,176,246,.16);
      transform: translateX(50%);
    }

    .lessons {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
      padding-top: 16px;
    }

    .lesson-row {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .lesson-row:nth-child(3n+1) { transform: translateX(-110px); }
    .lesson-row:nth-child(3n+2) { transform: translateX(110px); }

    .lesson-card {
      width: min(460px, 86vw);
      display: grid;
      grid-template-columns: 86px 1fr auto;
      align-items: center;
      gap: 16px;
      padding: 14px;
      border-radius: 24px;
      background: rgba(255,255,255,.9);
      border: 2px solid rgba(216,226,238,.9);
      box-shadow: 0 8px 0 rgba(23,32,51,.12);
      transition: transform .18s ease, filter .18s ease;
    }

    .lesson-card:not(.locked):hover { transform: translateY(-3px); filter: brightness(1.02); }

    .lesson-card.locked {
      opacity: .58;
      filter: grayscale(.25);
    }

    .lesson-node {
      width: 78px;
      height: 70px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: white;
      font-size: 30px;
      box-shadow: 0 7px 0 rgba(0,0,0,.2);
    }

    .lesson-info strong {
      display: block;
      font-size: 18px;
      line-height: 1.35;
    }

    .lesson-info span {
      display: block;
      color: var(--muted);
      font-size: 14px;
      font-weight: 800;
      line-height: 1.5;
    }

    .start-btn,
    .primary-btn,
    .secondary-btn {
      min-height: 48px;
      padding: 12px 22px;
      border-radius: 16px;
      font-size: 17px;
      font-weight: 900;
      transition: transform .1s ease, box-shadow .1s ease;
    }

    .start-btn,
    .primary-btn {
      color: white;
      background: var(--duo);
      box-shadow: 0 5px 0 var(--duo-dark);
    }

    .secondary-btn {
      color: #335064;
      background: white;
      border: 2px solid var(--line);
      box-shadow: 0 5px 0 #d8e2ee;
    }

    .start-btn:disabled {
      cursor: not-allowed;
      background: #b8c2cc;
      box-shadow: 0 5px 0 #92a0ad;
    }

    .primary-btn:active,
    .secondary-btn:active,
    .start-btn:active {
      transform: translateY(4px);
      box-shadow: none;
    }

    .activity {
      display: none;
      min-height: calc(100vh - 88px);
      padding: 22px 0 40px;
    }

    .activity.active { display: block; }

    .activity-panel {
      width: min(1040px, calc(100% - 28px));
      margin: 0 auto;
      background: rgba(255,255,255,.95);
      border: 2px solid var(--line);
      border-radius: 28px;
      box-shadow: 0 12px 0 rgba(23,32,51,.12);
      overflow: hidden;
    }

    .activity-head {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 16px;
      padding: 18px;
      border-bottom: 2px solid var(--line);
      background: #fbfdff;
    }

    .close-btn {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      color: #637083;
      background: #eef4f8;
      font-size: 22px;
    }

    .progress {
      height: 18px;
      overflow: hidden;
      border-radius: 999px;
      background: #e6edf4;
    }

    .progress span {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: var(--duo);
      transition: width .35s ease;
    }

    .stage-label {
      min-width: 135px;
      color: var(--blue);
      font-weight: 900;
      text-align: left;
    }

    .stage {
      padding: clamp(18px, 4vw, 42px);
    }

    .stage h2 {
      margin: 0 0 12px;
      color: #102033;
      font-size: clamp(28px, 4vw, 46px);
      line-height: 1.15;
      letter-spacing: 0;
    }

    .stage p {
      margin: 0;
      color: #41576b;
      font-size: 20px;
      line-height: 1.75;
      font-weight: 700;
    }

    .video-frame {
      position: relative;
      width: 100%;
      margin: 24px 0;
      overflow: hidden;
      border-radius: 22px;
      aspect-ratio: 16 / 9;
      background: #0f172a;
      border: 4px solid #172033;
    }

    .video-frame iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }

    .practice-frame {
      position: relative;
      width: 100%;
      min-height: 680px;
      margin: 24px 0;
      overflow: hidden;
      border-radius: 22px;
      background: #0f172a;
      border: 4px solid #172033;
    }

    .practice-frame iframe {
      width: 100%;
      height: 680px;
      border: 0;
      background: white;
    }

    .voice-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 18px;
      padding: 14px 16px;
      border: 2px solid var(--line);
      border-radius: 18px;
      background: #fbfdff;
    }

    .voice-bar p {
      margin: 0;
      color: #41576b;
      font-size: 16px;
      line-height: 1.55;
    }

    .voice-tools {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
    }

    .upload-label {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border: 2px solid var(--line);
      border-radius: 16px;
      color: #335064;
      background: white;
      box-shadow: 0 5px 0 #d8e2ee;
      font-weight: 900;
      white-space: nowrap;
      cursor: pointer;
    }

    .upload-label input {
      display: none;
    }

    .audio-name {
      color: var(--muted);
      font-size: 14px;
      font-weight: 800;
    }

    .icon-action {
      width: 48px;
      height: 48px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 16px;
      color: white;
      background: var(--blue);
      box-shadow: 0 5px 0 #168dcc;
      font-size: 18px;
    }

    .stop-audio-btn {
      background: var(--red);
      box-shadow: 0 5px 0 #d92828;
    }

    .slide-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      margin-top: 24px;
    }

    .bubble {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      margin-top: 18px;
      padding: 18px;
      border-radius: 22px;
      background: #eef9e7;
      border: 2px solid #b7e996;
    }

    .avatar {
      width: 58px;
      height: 58px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: white;
      background: var(--duo);
      box-shadow: 0 5px 0 var(--duo-dark);
      font-size: 27px;
    }

    .mini-card {
      min-height: 150px;
      padding: 20px;
      border-radius: 18px;
      background: var(--soft);
      border: 2px solid var(--line);
    }

    .mini-card i {
      margin-bottom: 10px;
      color: var(--blue);
      font-size: 32px;
    }

    .mini-card h3 {
      margin: 0 0 8px;
      font-size: 22px;
    }

    .mini-card p {
      font-size: 17px;
      line-height: 1.65;
    }

    .code {
      direction: ltr;
      text-align: left;
      overflow-x: auto;
      margin-top: 22px;
      padding: 18px;
      border-radius: 18px;
      color: #e6edf3;
      background: #0d1117;
      border: 2px solid #30363d;
      font-family: "Fira Code", monospace;
      font-size: 15px;
      line-height: 1.7;
      white-space: pre;
    }

    .actions {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      margin-top: 30px;
    }

    .quiz-options {
      display: grid;
      gap: 14px;
      margin-top: 24px;
    }

    .option {
      width: 100%;
      padding: 20px;
      border-radius: 18px;
      color: #213246;
      background: white;
      border: 2px solid var(--line);
      box-shadow: 0 5px 0 #d8e2ee;
      font-size: 18px;
      font-weight: 900;
      text-align: right;
    }

    .option.selected {
      color: #09619a;
      background: #ddf4ff;
      border-color: #84d8ff;
      box-shadow: 0 5px 0 #1cb0f6;
    }

    .option.correct {
      color: #2b7a00;
      background: #d7ffb8;
      border-color: var(--duo);
      box-shadow: 0 5px 0 var(--duo-dark);
    }

    .option.wrong {
      color: #b51616;
      background: #ffdfe0;
      border-color: var(--red);
      box-shadow: 0 5px 0 #d92828;
    }

    .toast {
      display: none;
      margin-top: 22px;
      padding: 16px 18px;
      border-radius: 18px;
      font-size: 20px;
      font-weight: 900;
    }

    .toast.good {
      display: block;
      color: #2b7a00;
      background: #d7ffb8;
    }

    .toast.bad {
      display: block;
      color: #b51616;
      background: #ffdfe0;
    }

    .result {
      display: none;
      text-align: center;
      padding: 52px clamp(18px, 5vw, 70px);
    }

    .result.active { display: block; }

    .result-icon {
      width: 150px;
      height: 150px;
      display: grid;
      place-items: center;
      margin: 0 auto 20px;
      border-radius: 44px;
      color: white;
      background: var(--gold);
      box-shadow: 0 9px 0 #d6a500;
      font-size: 68px;
    }

    @media (max-width: 820px) {
      .topbar { align-items: flex-start; flex-direction: column; }
      .stats { width: 100%; justify-content: space-between; }
      .hero { grid-template-columns: 1fr; }
      .mascot-scene { min-height: 230px; }
      .lesson-row:nth-child(n) { transform: none; }
      .lesson-card { grid-template-columns: 70px 1fr; }
      .lesson-card .start-btn { grid-column: 1 / -1; width: 100%; }
      .activity-head { grid-template-columns: auto 1fr; }
      .stage-label { grid-column: 1 / -1; text-align: right; }
      .slide-grid { grid-template-columns: 1fr; }
      .voice-bar { align-items: stretch; flex-direction: column; }
      .voice-tools { align-items: stretch; flex-direction: column; }
      .upload-label { justify-content: center; }
      .icon-action { width: 100%; }
      .practice-frame,
      .practice-frame iframe { min-height: 620px; height: 620px; }
      .actions { flex-direction: column-reverse; }
      .actions button { width: 100%; }
    }