/* Colourful WeWIN surfaces: outlined cards, a quiet illustrated canvas and readable content. */
:root {
  --canvas-blue: #edf4ff;
  --canvas-mint: #e7f5ef;
  --canvas-lavender: #eeeaff;
  --card-outline: #d4deec;
  --card-foot: #dce3ed;
  --card-shadow: 0 5px 0 var(--card-foot), 0 12px 28px rgb(32 63 102 / .055);
  --hero-surface: #deefff;
  --stat-blue: #e7f1ff;
  --stat-mint: #e5f5ed;
  --stat-lavender: #eee9ff;
  --stat-gold: #fff2d9;
}
:root[data-theme=dark] {
  --canvas-blue: #152b46;
  --canvas-mint: #193a34;
  --canvas-lavender: #2b2848;
  --card-outline: #435b78;
  --card-foot: #0b1729;
  --card-shadow: 0 5px 0 var(--card-foot), 0 12px 28px rgb(0 0 0 / .16);
  --hero-surface: #1a3d63;
  --stat-blue: #203c5d;
  --stat-mint: #1e3e34;
  --stat-lavender: #342d50;
  --stat-gold: #403524;
}

.workspace-body {
  background:
    radial-gradient(ellipse at 4% 8%, var(--canvas-blue), transparent 55%),
    radial-gradient(ellipse at 95% 40%, color-mix(in srgb, var(--canvas-lavender) 72%, transparent), transparent 48%),
    radial-gradient(ellipse at 12% 95%, color-mix(in srgb, var(--canvas-mint) 70%, transparent), transparent 45%),
    var(--background);
}
.workspace-main { padding-top: 30px; }
.page-heading { align-items: center; margin-bottom: 24px; }
.workspace-header { border-bottom: 2px solid var(--card-outline); }
.learning-sidebar {
  border-right: 2px solid var(--card-outline);
  background: linear-gradient(180deg, var(--surface) 50%, color-mix(in srgb, var(--canvas-blue) 48%, var(--surface)));
  padding-bottom: 18px;
}
.sidebar-top { padding-bottom: 14px; }
.sidebar-link.is-active {
  box-shadow: inset 3px 0 0 var(--primary);
  background: color-mix(in srgb, var(--primary-light) 84%, var(--surface));
}
.sidebar-level.is-active { box-shadow: inset 0 0 0 1px var(--primary); }

/* The mascot and the copy each have their own box; nothing floats over a heading. */
.sidebar-bottom { padding-top: 24px; }
.sidebar-note {
  margin: 16px 3px 18px;
  padding: 0;
  background: var(--surface);
  border: 2px solid var(--card-outline);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 0 var(--card-foot);
}
.sidebar-note-art { position: relative; height: 84px; overflow: hidden; background: var(--canvas-lavender); }
.sidebar-note-art .sidebar-note-background {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: right 73%;
}
.sidebar-note-art .sidebar-note-mascot {
  position: absolute; bottom: 0; left: 13px; width: 49px; height: 76px; object-fit: contain;
  mix-blend-mode: multiply;
}
.sidebar-note-copy { padding: 14px 13px 5px; }
.sidebar-note-copy > strong { display: block; font-size: 12px; line-height: 1.55; }
.sidebar-note-copy > p { color: var(--muted); font-size: 11px; line-height: 1.65; margin-top: 6px; }
.sidebar-note-copy > .btn { padding-top: 7px; font-size: 11px; min-height: 40px; }
.sidebar-account {
  border: 1px solid var(--card-outline); background: var(--primary-light); border-radius: 13px;
  padding: 10px 8px; gap: 8px; align-items: center; margin-inline: 2px;
}
.sidebar-account > .user-avatar { width: 34px; height: 34px; border-width: 2px; }
.sidebar-account > div { flex: 1; min-width: 0; }
.sidebar-account strong { font-size: 11px; line-height: 1.4; }
.sidebar-account small { font-size: 9px; line-height: 1.5; }
.sidebar-account .sidebar-signout { width: 34px; height: 44px; min-height: 44px; padding: 8px; margin: 0; color: var(--primary); flex-shrink: 0; }
.sidebar-signout .icon { width: 17px; height: 17px; }

/* A bolder frame and a second shadow under the card match the supplied reference. */
.dashboard-hero,.cambridge-level,.learning-stat,.study-widget,.attempt-history,
.test-row,.score-card,.dashboard-history,.leaderboard-section,.writing-result,
.answer-review,.management-block,.platform-shell .intro-picture {
  border: 2px solid var(--card-outline);
  box-shadow: var(--card-shadow);
}
.dashboard-hero {
  background: linear-gradient(110deg, var(--surface), var(--hero-surface) 75%);
  border-color: color-mix(in srgb, var(--primary) 20%, var(--card-outline));
  grid-template-columns: minmax(0,1.08fr) minmax(0,1fr);
}
.dashboard-hero-copy { padding: 33px 0 31px 34px; }
.hero-pill { background: var(--surface); border-width: 1px; border-color: var(--card-outline); }
.hero-illustration { min-height: 295px; display: flex; align-items: center; justify-content: center; padding: 16px 8px 16px 0; }
.hero-illustration > img {
  width: 100%; height: auto; max-height: 340px; object-fit: contain;
  object-position: center; mask-image: linear-gradient(to right, transparent, #000 17%);
}
.hero-art-caption { background: var(--surface); color: var(--muted); border: 1px solid var(--card-outline); right: 22px; bottom: 20px; }
.hero-cta { box-shadow: 0 4px 0 color-mix(in srgb, var(--primary) 30%, transparent); }

.learning-stats { gap: 18px; align-items: stretch; margin: 24px 0 32px; }
.learning-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 22px; min-height: 190px; border-radius: 22px;
  position: relative; overflow: hidden; isolation: isolate;
}
.learning-stat::after {
  content: ''; position: absolute; right: -15px; top: -20px; z-index: -1;
  width: 88px; height: 88px; border: 18px solid color-mix(in srgb, var(--surface) 48%, transparent);
  border-radius: 50%; pointer-events: none;
}
.learning-stat.tone-blue { background: linear-gradient(135deg, var(--surface), var(--stat-blue)); border-color: color-mix(in srgb, var(--primary) 18%, var(--card-outline)); }
.learning-stat.tone-mint { background: linear-gradient(135deg, var(--surface), var(--stat-mint)); border-color: color-mix(in srgb, var(--mint-ink) 17%, var(--card-outline)); }
.learning-stat.tone-lavender { background: linear-gradient(135deg, var(--surface), var(--stat-lavender)); border-color: color-mix(in srgb, var(--lavender-ink) 19%, var(--card-outline)); }
.learning-stat.tone-gold { background: linear-gradient(135deg, var(--surface), var(--stat-gold)); border-color: color-mix(in srgb, var(--gold) 42%, var(--card-outline)); }
.learning-stat > div { width: 100%; }
.learning-stat > div > strong { font-size: 30px; }
.learning-stat h3 { font-size: 13px; min-height: 22px; margin-top: 6px; line-height: 1.55; }
.learning-stat p { font-size: 11px; line-height: 1.5; margin-top: 4px; min-height: 17px; }
.learning-stat .stat-icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent); }

.cambridge-level { box-shadow: 0 4px 0 var(--card-foot), 0 10px 24px rgb(32 63 102 / .045); }
.cambridge-level.level-starters { border-color: color-mix(in srgb, var(--gold) 48%, var(--card-outline)); }
.cambridge-level.level-movers { border-color: color-mix(in srgb, var(--primary) 28%, var(--card-outline)); }
.cambridge-level.level-flyers { border-color: color-mix(in srgb, var(--mint-ink) 30%, var(--card-outline)); }
.cambridge-level[aria-pressed=true] { border-color: var(--primary); outline: 1px solid var(--primary); }
.workspace-primary .level-grid { gap: 17px; }
.workspace-primary .cambridge-level { min-height: 154px; }
.workspace-primary .level-card-copy { padding-top: 21px; padding-bottom: 21px; }
.workspace-primary .level-card-progress { margin-top: 8px; }
.study-rail { gap: 22px; }
.study-widget { padding: 23px; }
.study-widget:has(.level-progress-list) { background: linear-gradient(145deg, var(--surface) 35%, var(--stat-blue)); }
.guide-widget { background: linear-gradient(145deg, var(--surface) 35%, var(--stat-gold)); }
.recent-widget { background: linear-gradient(145deg, var(--surface) 25%, var(--stat-lavender)); }
.recent-widget-art {
  display: block; width: calc(100% + 46px); max-width: none; height: 115px;
  margin: 14px -23px -23px; object-fit: cover; object-position: right 65%;
  border-top: 1px solid var(--card-outline);
}
.attempt-history { background: linear-gradient(160deg, var(--surface) 78%, var(--stat-blue)); }
.attempt-history > .section-heading { align-items: center; }
.attempt-row { gap: 14px; padding: 21px 0; }
.history-empty { background: linear-gradient(135deg, var(--primary-light), var(--lavender)); border: 1px solid var(--card-outline); }
.test-row { border-radius: 18px; padding: 15px; }
.test-thumbnail { border: 1px solid var(--border-strong); }
.test-cta { box-shadow: 0 2px 0 var(--card-foot); }
.level-filter { border-width: 2px; border-color: var(--card-outline); }
.catalog-search input { border-width: 2px; border-color: var(--card-outline); }
.board-panel { background: linear-gradient(155deg, var(--surface) 72%, var(--stat-gold)); }
.workspace-main:focus { outline: none; }
:root[data-theme=dark] .sidebar-note-art .sidebar-note-mascot { mix-blend-mode: normal; }
:root[data-theme=dark] .sidebar-note-art .sidebar-note-background,
:root[data-theme=dark] .recent-widget-art { opacity: .8; }

/* The reading picture and answer surfaces keep their existing dimensions and neutral fill. */
.exam-focus .workspace-body { background: var(--background); }
.exam-focus .figure-panel,.exam-focus .question-panel,.exam-focus .audio-panel { border: 2px solid var(--card-outline); box-shadow: 0 3px 0 var(--card-foot); }

@media(min-width:1600px) {
  .dashboard-hero-copy { padding: 38px 0 36px 40px; }
  .hero-illustration > img { max-height: 355px; }
  .learning-stat { min-height: 190px; }
}
@media(max-width:1250px) {
  .dashboard-hero-copy { padding-left: 26px; }
  .learning-stat { padding: 18px; min-height: 184px; gap: 14px; }
  .learning-stat h3 { font-size: 12px; }
  .learning-stat p { font-size: 10px; }
  .study-widget { padding: 18px; }
  .recent-widget-art { width: calc(100% + 36px); margin: 14px -18px -18px; }
  .hero-illustration { min-height: 270px; }
}
@media(min-width:1001px) and (max-height:820px) {
  .learning-sidebar { padding-top: 20px; }
  .sidebar-bottom { padding-top: 10px; }
  .sidebar-note { margin-top: 8px; margin-bottom: 12px; }
  .sidebar-note-art { height: 63px; }
  .sidebar-note-art .sidebar-note-mascot { height: 59px; width: 40px; }
  .sidebar-note-copy { padding: 10px 12px 3px; }
  .sidebar-note-copy > p { margin-top: 4px; font-size: 10px; }
}
@media(max-width:767px) {
  .workspace-main { padding-top: 24px; }
  .learning-stats { gap: 13px; }
  .learning-stat { padding: 17px; min-height: 180px; }
  .study-widget { padding: 20px; }
  .recent-widget-art { width: calc(100% + 40px); margin: 14px -20px -20px; height: 135px; }
  .test-row { padding: 12px; }
}
@media(max-width:600px) {
  .dashboard-hero { display: flex; }
  .dashboard-hero-copy { padding: 25px 23px 14px; }
  .hero-illustration { height: 180px; min-height: 180px; padding: 0 8px 8px; }
  .hero-illustration > img { width: 100%; height: 100%; max-height: none; transform: none; object-fit: contain; mask-image: linear-gradient(to bottom,transparent,#000 13%); }
  .learning-stat { display: flex; padding: 18px; min-height: 172px; gap: 13px; }
  .learning-stat .stat-icon { width: 36px; height: 36px; }
  .learning-stat h3 { font-size: 12px; line-height: 1.45; }
  .learning-stat p { display: block; font-size: 10px; min-height: 28px; }
  .learning-stat > div > strong { font-size: 27px; }
  .study-widget { padding: 22px; }
  .recent-widget-art { width: calc(100% + 44px); margin: 14px -22px -22px; }
  .catalog-tools { gap: 13px; }
  .test-row { border-radius: 17px; }
}
@media(max-width:359px) {
  .learning-stat { padding: 15px; min-height: 177px; }
  .learning-stat h3 { font-size: 11px; }
  .learning-stats { gap: 12px; }
}

/* Decorative educational motifs on the overall workspace, behind every card. */
body:not([data-screen=exam]) .workspace-body {
  background-color: var(--background);
  background-image:
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDExMDAgOTAwIiBmaWxsPSJub25lIj4KICA8IS0tIERlY29yYXRpdmUgZWR1Y2F0aW9uYWwgbGluZSBkcmF3aW5ncy4gTm8gY29udGVudCBvciBjb250cm9scyBhcmUgYmFrZWQgaW50byB0aGlzIGxheWVyLiAtLT4KICA8ZyBzdHJva2U9IiM4NmE5ZDciIHN0cm9rZS13aWR0aD0iMi4zIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIG9wYWNpdHk9Ii43MiI+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NiA4NCkgcm90YXRlKC0xMiAzNiAzMCkiPgogICAgICA8cGF0aCBmaWxsPSIjZGFlOGZhIiBmaWxsLW9wYWNpdHk9Ii43IiBkPSJNMzYgOEMyMyAwIDggMiAxIDd2NDljMTAtNiAyMy01IDM1IDMgMTItOCAyNS05IDM1LTNWN0M2MCAxIDQ5IDEgMzYgOFoiLz4KICAgICAgPHBhdGggZD0iTTM2IDh2NTFNOSAxNWM3LTIgMTQtMSAyMCAyTTkgMjVjNy0yIDE0LTEgMjAgMm0xNC0xMGM3LTMgMTQtNCAyMC0ybS0yMCAxMmM3LTMgMTQtNCAyMC0yIi8+CiAgICA8L2c+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MzAgMzgpIHJvdGF0ZSgyMCAzMCAzOCkiPgogICAgICA8cGF0aCBmaWxsPSIjZWZlN2ZiIiBmaWxsLW9wYWNpdHk9Ii42NSIgZD0iTTMgNmg1MmE3IDcgMCAwIDEgNyA3djU4SDEwYTcgNyAwIDAgMS03LTdWNloiLz4KICAgICAgPHBhdGggZD0iTTE0IDZ2NjVtNy00OWgzMG0tMzAgMTBoMjNNMyA1OGg1OSIvPgogICAgPC9nPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODIwIDEwMCkgcm90YXRlKDkgMzQgMzQpIj4KICAgICAgPGNpcmNsZSBjeD0iMzQiIGN5PSIzNCIgcj0iMzAiIGZpbGw9IiNlMWYyZWUiIGZpbGwtb3BhY2l0eT0iLjYiLz4KICAgICAgPGVsbGlwc2UgY3g9IjM0IiBjeT0iMzQiIHJ4PSIxMyIgcnk9IjMwIi8+CiAgICAgIDxwYXRoIGQ9Ik00IDM0aDYwTTkgMTloNTBNOSA0OWg1MG0tNDIgMjRoMzRNMzQgNjR2OSIvPgogICAgPC9nPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjY0IDM0MCkgcm90YXRlKC05IDM1IDM1KSI+CiAgICAgIDxwYXRoIGQ9Ik01IDQxVjI3YTI4IDI4IDAgMCAxIDU2IDB2MTQiLz4KICAgICAgPHJlY3QgeD0iMSIgeT0iMzEiIHdpZHRoPSIxMyIgaGVpZ2h0PSIyOCIgcng9IjYiIGZpbGw9IiNkOGU4ZmMiLz4KICAgICAgPHJlY3QgeD0iNTIiIHk9IjMxIiB3aWR0aD0iMTMiIGhlaWdodD0iMjgiIHJ4PSI2IiBmaWxsPSIjZDhlOGZjIi8+CiAgICA8L2c+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5NTggMzk2KSByb3RhdGUoMTUgMzUgMjUpIj4KICAgICAgPHBhdGggZmlsbD0iI2UxZWNmYiIgZmlsbC1vcGFjaXR5PSIuNzUiIGQ9Ik01IDJoNjBhNSA1IDAgMCAxIDUgNXYzNGE1IDUgMCAwIDEtNSA1SDI4TDE0IDU4VjQ2SDVhNSA1IDAgMCAxLTUtNVY3YTUgNSAwIDAgMSA1LTVaIi8+CiAgICAgIDxwYXRoIGQ9Im0xMSAzMiA2LTE5IDYgMTltLTEwLTZoOG04LTEzdjE5aDZjOSAwIDktMTAgMC0xMGgtNm0wLTloNmM4IDAgOCA5IDAgOW0yNi03Yy0xMC03LTE4IDktOCAxNiAzIDIgNiAxIDggMCIvPgogICAgPC9nPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjE2IDY2MCkgcm90YXRlKC0xNiAzNSAyNSkiPgogICAgICA8cGF0aCBmaWxsPSIjZGNlYWZiIiBmaWxsLW9wYWNpdHk9Ii42NSIgZD0ibTAgMTggMzUtMTYgMzUgMTYtMzUgMTZMMCAxOFoiLz4KICAgICAgPHBhdGggZD0iTTEzIDI1djE4YzE0IDEwIDI5IDEwIDQ0IDBWMjVtMTMtN3YyNG0wIDAtNCA4aDhsLTQtOCIvPgogICAgPC9nPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODMgNzE2KSByb3RhdGUoMTMgMzYgMjgpIj4KICAgICAgPHBhdGggZmlsbD0iI2U4ZTNmYSIgZmlsbC1vcGFjaXR5PSIuNSIgZD0iTTEgN2MxMC03IDIzLTcgMzUgMSAxMi04IDI1LTggMzUtMXY0N2MtMTItNi0yMy01LTM1IDItMTItNy0yNC04LTM1LTJWN1oiLz4KICAgICAgPHBhdGggZD0iTTM2IDh2NDhtLTI2LTM4aDE1bS0xNSA5aDE1bTIxLTloMTVtLTE1IDloMTUiLz4KICAgIDwvZz4KICA8L2c+CiAgPGcgc3Ryb2tlPSIjZDNhZjcwIiBzdHJva2Utd2lkdGg9IjIuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuNyI+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5NSA0MTApIHJvdGF0ZSgyNyAxMiA0OCkiPgogICAgICA8cGF0aCBmaWxsPSIjZjllYWM5IiBmaWxsLW9wYWNpdHk9Ii44IiBkPSJNMiAxMmgyMHY2NEwxMiA5NSAyIDc2VjEyWiIvPgogICAgICA8cGF0aCBkPSJNMiAxMlY1YTUgNSAwIDAgMSA1LTVoMTBhNSA1IDAgMCAxIDUgNXY3TTIgMjJoMjBNOCAyMnY1NG04LTU0djU0TTIgNzZoMjBNOSA4OWg2Ii8+CiAgICA8L2c+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NzIgMzE5KSByb3RhdGUoLTIzIDQ2IDEzKSI+CiAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI5NCIgaGVpZ2h0PSIyNyIgcng9IjUiIGZpbGw9IiNmYmVmZGEiIGZpbGwtb3BhY2l0eT0iLjciLz4KICAgICAgPHBhdGggZD0iTTEzIDB2MTFtMTMtMTF2Nm0xMy02djExbTEzLTExdjZtMTMtNnYxMW0xMy0xMXY2Ii8+CiAgICA8L2c+CiAgICA8cGF0aCBmaWxsPSIjZjhlOWM3IiBmaWxsLW9wYWNpdHk9Ii42IiBkPSJtMTAwMSA2OTMgNiAxMyAxNCAyLTEwIDEwIDIgMTQtMTItNy0xMyA3IDMtMTQtMTEtMTAgMTUtMiA2LTEzWiIvPgogICAgPHBhdGggZD0ibTMxNiAxNzEgNCA5IDEwIDEtNyA3IDIgMTAtOS01LTkgNSAyLTEwLTctNyAxMC0xIDQtOVoiLz4KICAgIDxwYXRoIGQ9Im00MzkgNzY2IDUgMTAgMTEgMi04IDggMiAxMS0xMC01LTEwIDUgMi0xMS04LTggMTEtMiA1LTEwWiIvPgogIDwvZz4KICA8ZyBzdHJva2U9IiM5YmJlYjMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIuNjUiPgogICAgPHBhdGggZD0iTTUzOCAyMTdoMTJtLTYtNnYxMk0xODggNjE3aDEybS02LTZ2MTJNOTAzIDgwMWgxMm0tNi02djEyIi8+CiAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjI5MCIgcj0iNSIvPgogICAgPGNpcmNsZSBjeD0iNzg0IiBjeT0iNTI4IiByPSI1Ii8+CiAgICA8Y2lyY2xlIGN4PSIxMDUyIiBjeT0iMjA0IiByPSI0Ii8+CiAgICA8cGF0aCBkPSJtNDI2IDUxMyA2IDYtNiA2LTYtNiA2LTZabTQyOC0yODIgNSA1LTUgNS01LTUgNS01WiIvPgogIDwvZz4KPC9zdmc+Cg=='),
    radial-gradient(ellipse at 5% 12%, var(--canvas-blue), transparent 65%),
    radial-gradient(ellipse at 95% 48%, var(--canvas-lavender), transparent 60%),
    radial-gradient(ellipse at 12% 95%, var(--canvas-mint), transparent 60%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-position: 14px 24px, center, center, center;
  background-size: 1100px 900px, 100% 100%, 100% 100%, 100% 100%;
}
@media(max-width:600px) {
  body:not([data-screen=exam]) .workspace-body {
    background-size: 760px 622px, 100% 100%, 100% 100%, 100% 100%;
    background-position: 8px 15px, center, center, center;
  }
}

/* Fade the hero's rectangular image edges and reduce cropping on level illustrations. */
.hero-illustration > img {
  max-height: 340px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 18px rgb(26 77 137 / .12));
  -webkit-mask-image: radial-gradient(ellipse 70% 78% at 64% 55%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 78% at 64% 55%, #000 50%, transparent 100%);
}
.hero-art-caption { display: none; }
.cambridge-level > .level-art {
  top: 50%;
  right: -1%;
  width: 54%;
  height: 136%;
  object-fit: cover;
  object-position: right 54%;
  transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%);
  mask-image: linear-gradient(to right, transparent 0%, #000 28%);
}
@media(max-width:600px) {
  .hero-illustration > img {
    max-height: 180px;
    -webkit-mask-image: radial-gradient(ellipse 70% 78% at 64% 55%, #000 50%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 78% at 64% 55%, #000 50%, transparent 100%);
  }
  .cambridge-level > .level-art {
    width: 52%;
    height: 140%;
    object-position: right 54%;
  }
}