:root {
  --zbla-ink: #24313a;
  --zbla-cream: #fffaf0;
  --zbla-paper: #ffffff;
  --zbla-magic: #6f56b3;
  --zbla-magic-dark: #503b8e;
  --zbla-sun: #f1b84b;
  --zbla-berry: #d97a91;
  --zbla-leaf: #70aa85;
  --zbla-line: rgba(36, 49, 58, 0.14);
  --zbla-shadow: 0 18px 50px rgba(60, 47, 92, 0.16);
}

.zbla-shell,
.zbla-shell * { box-sizing: border-box; }

.zbla-shell {
  width: 100%;
  min-height: min(720px, 86vh);
  margin: 0;
  padding: clamp(18px, 4vw, 46px);
  color: var(--zbla-ink);
  background:
    radial-gradient(circle at 13% 18%, rgba(241,184,75,.22) 0 5px, transparent 6px),
    radial-gradient(circle at 89% 15%, rgba(111,86,179,.16) 0 4px, transparent 5px),
    linear-gradient(145deg, #fbf4e7, #f1ecfb 56%, #eaf6ef);
  border-radius: 26px;
  font-family: ui-rounded, "Avenir Next", Avenir, system-ui, sans-serif;
  overflow: hidden;
}

.zbla-panel,
.zbla-app {
  position: relative;
  width: min(850px, 100%);
  min-height: 560px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 54px);
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 28px;
  box-shadow: var(--zbla-shadow);
  text-align: center;
}

.zbla-eyebrow {
  margin: 0 0 6px;
  color: var(--zbla-magic);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.zbla-shell h1 {
  margin: 0 0 16px;
  color: var(--zbla-ink);
  font-size: clamp(2.2rem, 7vw, 4.4rem);
  line-height: 1;
}

.zbla-lead { font-size: clamp(1.05rem, 2.4vw, 1.35rem); }

.zbla-notice {
  width: min(650px, 100%);
  margin: 24px auto;
  padding: 14px 18px;
  background: #fff7dc;
  border: 1px solid #efd58b;
  border-radius: 15px;
  font-size: .96rem;
  line-height: 1.45;
}

.zbla-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 34px auto 24px;
}

.zbla-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 100px;
  padding: 18px;
  color: var(--zbla-ink) !important;
  background: var(--zbla-paper);
  border: 2px solid var(--zbla-line);
  border-radius: 20px;
  text-align: left;
  text-decoration: none !important;
  transition: transform .15s ease, border-color .15s ease;
}

.zbla-card:hover,
.zbla-card:focus-visible { transform: translateY(-3px); border-color: var(--zbla-magic); }
.zbla-card-icon { display:grid; place-items:center; width:58px; height:58px; flex:0 0 58px; color:white; background:var(--zbla-magic); border-radius:18px; font-size:1.8rem; }
.zbla-card strong, .zbla-card small { display:block; }
.zbla-card small { margin-top:5px; color:#66727b; }
.zbla-version, .zbla-audio-note { color:#6f777e; font-size:.9rem; }

.zbla-back {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 2;
  color: var(--zbla-magic-dark) !important;
  font-weight: 750;
  text-decoration: none !important;
}

.zbla-activity-head { margin-top: 32px; }
.zbla-start-orb { display:grid; place-items:center; width:128px; height:128px; margin:34px auto; color:white; background:linear-gradient(145deg,var(--zbla-magic),#9b82d9); border-radius:50%; box-shadow:0 14px 28px rgba(111,86,179,.28); font-size:3.4rem; }

.zbla-primary,
a.zbla-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 56px;
  padding: 12px 28px;
  color: #fff !important;
  background: var(--zbla-magic);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 9px 20px rgba(111,86,179,.23);
  font: inherit;
  font-size: 1.12rem;
  font-weight: 800;
  text-decoration: none !important;
  cursor: pointer;
}

.zbla-primary:hover, .zbla-primary:focus-visible { background:var(--zbla-magic-dark); transform:translateY(-1px); }
.zbla-task-top { display:flex; align-items:center; justify-content:center; gap:22px; margin:22px 0 12px; }
.zbla-progress { display:flex; gap:9px; }
.zbla-progress-dot { width:22px; height:22px; background:#e9e5ee; border:2px solid #d4ccdf; border-radius:50%; }
.zbla-progress-dot.is-filled { background:var(--zbla-leaf); border-color:#4d8c67; }
.zbla-sound { display:grid; place-items:center; width:68px; height:68px; padding:0; background:#f0ebfb; border:2px solid #d9cff1; border-radius:22px; font-size:2rem; cursor:pointer; }
.zbla-spoken-fallback { margin:10px 0 26px; font-size:clamp(1.2rem,3vw,1.65rem); font-weight:750; }
.zbla-options { display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(14px,3vw,28px); }
.zbla-option { display:grid; place-items:center; width:clamp(120px,22vw,180px); height:clamp(120px,22vw,180px); padding:18px; background:#fff; border:3px solid #e3dde8; border-radius:26px; box-shadow:0 8px 18px rgba(47,40,57,.09); cursor:pointer; transition:transform .12s ease, border-color .12s ease; }
.zbla-option:hover, .zbla-option:focus-visible { transform:scale(1.035); border-color:var(--zbla-magic); outline:none; }
.zbla-option.is-correct { background:#eff9f2; border-color:#4d9b69; }
.zbla-option.is-wrong { background:#fff2f4; border-color:#c65d75; animation:zbla-shake .25s linear; }
.zbla-shape { display:block; width:72%; height:72%; background:currentColor; }
.zbla-shape--circle { border-radius:50%; }
.zbla-shape--square { border-radius:12%; }
.zbla-shape--triangle { clip-path:polygon(50% 3%, 98% 96%, 2% 96%); }
.zbla-color--sun { color:var(--zbla-sun); }
.zbla-color--berry { color:var(--zbla-berry); }
.zbla-color--leaf { color:var(--zbla-leaf); }
.zbla-feedback { min-height:98px; margin-top:24px; font-size:1.2rem; }
.zbla-feedback strong { display:block; margin-bottom:12px; }
.zbla-secondary, .zbla-training-link { display:inline-flex; align-items:center; min-height:46px; margin:4px 6px; padding:9px 16px; color:var(--zbla-magic-dark) !important; background:#f3eefc; border:2px solid #d8cef0; border-radius:14px; font:inherit; font-weight:750; text-decoration:none !important; cursor:pointer; }
.zbla-complete { display:flex; min-height:450px; flex-direction:column; align-items:center; justify-content:center; }
.zbla-complete-star { display:grid; place-items:center; width:130px; height:130px; margin-bottom:22px; color:#fff; background:var(--zbla-sun); border-radius:42% 58% 52% 48%; font-size:4.4rem; transform:rotate(-5deg); }
.zbla-complete h1 { font-size:clamp(2.2rem,6vw,3.8rem); }
.zbla-error { padding:30px; color:#9d2443; background:#fff1f3; border-radius:16px; }
.zbla-loading { margin-top:180px; }

@keyframes zbla-shake { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-6px)} 70%{transform:translateX(6px)} }

@media (max-width: 640px) {
  .zbla-shell { min-height:100vh; padding:0; border-radius:0; }
  .zbla-panel, .zbla-app { min-height:100vh; padding:62px 18px 28px; border-radius:0; }
  .zbla-cards { grid-template-columns:1fr; }
  .zbla-option { width:min(39vw,150px); height:min(39vw,150px); }
}

@media (prefers-reduced-motion: reduce) {
  .zbla-card, .zbla-option, .zbla-primary { transition:none; }
  .zbla-option.is-wrong { animation:none; }
}