/* MetaCircle edition: brand colours, geometric accents and clear typography. */
:root {
  --brand-primary: #7158D6;
  --brand-lavender: #CBBBF7;
  --brand-lime: #A4DF38;
  --brand-soft: #EDE6FC;
  --brand-deep: #503891;
  --sans: 'Avenir Next', 'PingFang HK', 'PingFang TC', 'Microsoft JhengHei', Arial, sans-serif;
  --serif: var(--sans);
}
html[lang=zh-HK] { --sans: 'PingFang HK', 'PingFang TC', 'Microsoft JhengHei', 'Avenir Next', sans-serif; --serif: var(--sans); }
body { background: #FAF9FD; }
h1,h2,h3 { font-weight: 700; }
.header { background: #FFFFFF; border-top: 4px solid var(--brand-primary); }
.brand-name { font-family: var(--sans); font-weight: 750; letter-spacing: -1px; }
.brand-name small { font-size: 8px; letter-spacing: 1.4px; color: var(--brand-deep); }
.brand-mark { border-radius: 11px; background: var(--brand-primary); color: var(--brand-lime); }
.header nav .active { border-color: var(--brand-primary); color: var(--brand-deep); }
.avatar { background: var(--brand-lavender); color: #35215C; }
.teacher-link { border-color: var(--brand-lavender)!important; }
.language-switch { background: #F1ECFC; }
.language-switch button[aria-pressed=true] { background: var(--brand-primary); color: #FFFFFF; }
.sidebar,.teacher .sidebar { background: #F4F0FB; }
.side-links a.active,.teacher-mobile-nav a.active { background: #E6DCF9; color: #503891; box-shadow: inset 3px 0 0 var(--brand-primary); }
.side-links a.active .side-num { color: var(--brand-deep); }
.note-card { border-top: 3px solid var(--brand-lavender); background: #FFFFFF; }
.micro,.eyebrow { letter-spacing: 1.4px; }
.hero .eyebrow,.teacher-top .eyebrow,.activity-heading .eyebrow { color: var(--brand-deep); }
.hero .eyebrow::before,.teacher-top .eyebrow::before { content: ''; display: inline-block; width: 25px; height: 8px; margin-right: 10px; background: var(--brand-lime); vertical-align: middle; }
.hero h1 { font-size: 52px; font-weight: 750; line-height: 1.07; letter-spacing: -2.5px; }
.hero h1 em { color: var(--brand-primary); font-style: normal; }
.hero-art { background: #F0EBFC; border-radius: 18px 4px 18px 4px; padding: 20px 8px 26px; transform: none; isolation: isolate; }
.hero-art::before,.hero-art::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.hero-art::before { width: 24px; height: 94px; top: -10px; right: 22px; background: var(--brand-primary); }
.hero-art::after { width: 92px; height: 14px; right: -8px; top: 34px; background: var(--brand-lime); }
.hero-art svg { position: relative; }
.art-caption { bottom: 8px; left: 0; width: 100%; text-align: center; transform: none; font-style: normal; color: #6B588D; }
.btn { background: var(--brand-primary); box-shadow: 0 3px 0 #503891; border-radius: 8px; }
.btn:hover { background: #5B42BD; }
.btn.light { box-shadow: none; }
.btn.light:hover { background: #EEE7FC; }
.hero .btn { background: var(--brand-lime); color: #2A3711; box-shadow: 0 3px 0 #80B021; }
.hero .btn:hover { background: #B6EB5C; }
.level-tabs a.active { color: var(--brand-deep); box-shadow: inset 0 -3px 0 var(--brand-primary); }
.mission { border-color: #DCD1EF; }
.mission:hover { border-color: var(--brand-primary); box-shadow: 0 12px 28px #7158D612; }
.mission-count { background: #FFFFFFE6; border-radius: 5px; padding: 0 5px; font-weight: 700; }
.round-arrow { background: #EEE7FC; border-color: transparent; color: var(--brand-deep); }
.learning-steps b { background: var(--brand-lavender); color: #39265E; }
.book { border-color: #BCA8EE; }
.book-left h2,.book-left .big-question { font-weight: 650; }
.feedback { background: #EFE9FC; color: #43345E; }
.completion { border-color: #97BD47; background: #EFF8DD; }
.completion h3 { color: #3D551A; }
.choice.selected { background: #EEE7FC; border-color: var(--brand-primary); }
.stats-grid .stat { border-top: 3px solid var(--brand-lavender); }
.stats-grid .stat:nth-child(3) { border-top-color: var(--brand-lime); }
.stat strong { color: var(--brand-deep); }
.lesson-preview { position: relative; background: var(--brand-soft); border-top: 7px solid var(--brand-primary); padding: 24px; }
.lesson-preview::after { content: ''; position: absolute; width: 70px; height: 12px; right: 24px; top: -7px; background: var(--brand-lime); }
.lesson-preview h3 { font-size: 28px; line-height: 1.18; color: #443063; }
.lesson-preview .badge { background: #FFFFFFB3; color: #574273; }
.teacher-top h1 { letter-spacing: -1.5px; }
.teacher-mobile-nav { background: #F4F0FB; }
.footer { color: #716580; }
@media(min-width:1500px) { .hero h1 { font-size: 60px; } }
@media(max-width:1180px) { .hero h1 { font-size: 44px; } }
@media(max-width:660px) {
  .brand-name small { font-size: 7px; letter-spacing: .8px; }
  .hero h1 { font-size: 42px; letter-spacing: -1.8px; }
  html[lang=zh-HK] .hero h1 { font-size: 40px; }
  .hero-art { margin: 12px 6px 0; }
  .lesson-preview h3 { font-size: 26px; }
}