:root {
  --atlas-text-font: Inter, Arial, sans-serif;
  --atlas-heading-font: Manrope, Arial, sans-serif;
  --atlas-display-font: 'Archivo Black', var(--atlas-heading-font);
  --atlas-block-font: 'Atkinson Hyperlegible Next', var(--atlas-text-font);
  --atlas-code-font: 'IBM Plex Mono', Consolas, monospace;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(assets/inter-400-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(assets/inter-400-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(assets/manrope-600-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(assets/manrope-600-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/archivo-black-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/archivo-black-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/atkinson-hyperlegible-next-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/atkinson-hyperlegible-next-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/ibm-plex-mono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Apply the same type hierarchy across the menu, lessons, and dialogs. */
html body,
html body *,
html body #lesson,
html body #lesson *,
html body .atlas-language * {
  font-family: var(--atlas-text-font) !important;
}

html body :is(h1,h2,h3,h4,h5,h6,b,strong,em,.brand,.eyebrow,.account-kicker,.island-label),
html body #lesson :is(h1,h2,h3,h4,h5,h6,b,strong,em,.mini-label,.reward-kicker),
html body .account-header button,
html body .enter-world {
  font-family: var(--atlas-heading-font) !important;
}


html body :is(h1,h2,h3),
html body #lesson :is(h1,h2,h3) {
  font-weight: 800;
}

html body .intro h1,
html body .intro h1 em,
html body #place-name,
html body #lesson #task-title,
html body #curriculum-title {
  font-family: var(--atlas-display-font) !important;
  font-weight: 400 !important;
  font-synthesis: none;
}

/* Keep block labels easy to distinguish and editor characters fixed-width. */
html body #lesson :is(#program,.palette-block,.command-card,.start-block),
html body #lesson :is(#program,.palette-block,.command-card,.start-block) * {
  font-family: var(--atlas-block-font) !important;
  font-weight: 700 !important;
}

html body #lesson :is(#code-preview,.code-tabs,.help-code),
html body #lesson :is(#code-preview,.code-tabs,.help-code) *,
html body :is(pre,code,kbd,samp) {
  font-family: var(--atlas-code-font) !important;
  font-weight: 500 !important;
  font-variant-ligatures: none;
}

html body #lesson :is(#code-preview,.code-tabs) :is(.text-editor-toolbar,button),
html body #lesson #code-preview .text-editor-toolbar * {
  font-weight: 600 !important;
}

/* Leave more vertical room for the program in every world. */
html body #lesson .code-tabs {
  height: 56px;
  min-height: 56px;
  padding-block: 7px 9px;
}

html body #lesson[data-world="gobeklitepe"] .code-tabs {
  padding-bottom: 9px;
}

html body #lesson .code-tabs button {
  min-height: 32px;
  padding-block: 5px 6px;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.2;
}

html body #lesson .workspace-tools {
  height: auto !important;
  min-height: 42px !important;
  padding-block: 4px !important;
}

html body #lesson :is(#undo-code,#redo-code) {
  min-height: 30px;
  padding-block: 3px;
}

html body #lesson :is(#undo-code,#redo-code) > span {
  font-size: 18px;
}

html body #lesson :is(#undo-code,#redo-code) b {
  font-size: 12px;
}

html body #lesson .text-editor-body :is(textarea,pre) {
  font-size: 14px !important;
  line-height: 1.55 !important;
  padding-block: 12px;
}

html body #lesson:not(.large-blocks) {
  --block-row-height: 38px;
  --block-label-size: 14px;
}

html body #lesson:not(.large-blocks) :is(.palette-block,.command-card),
html body #lesson:not(.large-blocks) .palette-block .puzzle-label {
  font-size: var(--block-label-size) !important;
}

html body #lesson:not(.large-blocks) :is(.palette-block,.command-card):not(.repeat) {
  height: var(--block-row-height) !important;
  min-height: var(--block-row-height) !important;
  padding-block: 5px 9px !important;
  gap: 4px !important;
}

html body #lesson:not(.large-blocks) .command-card:not(.repeat) {
  min-width: 136px !important;
}

html body #lesson:not(.large-blocks) .start-block {
  width: 146px !important;
  min-width: 146px !important;
  max-width: 146px !important;
  height: 43px !important;
  min-height: 43px !important;
  padding-block: 7px 11px !important;
  font-size: 16px !important;
}

html body #lesson:not(.large-blocks) .palette-block.repeat {
  height: 80px !important;
  min-height: 80px !important;
}

html body #lesson:not(.large-blocks) .command-card.repeat {
  min-height: 84px !important;
}

html body #lesson:not(.large-blocks) :is(.repeat-head,.repeat-palette-head):not(:has(.condition-editor)) {
  height: var(--block-row-height);
  min-height: var(--block-row-height);
  padding-block: 5px 9px;
}

html body #lesson[data-world="erciyes"]:not(.large-blocks) .repeat-head:has(.condition-editor) {
  min-height: var(--block-row-height);
  padding-block: 5px 9px;
}

html body #lesson:not(.large-blocks) :is(.palette-block,.command-card).repeat::before {
  top: 28px !important;
}

html body #lesson:not(.large-blocks) .palette-block.repeat::after,
html body #lesson:not(.large-blocks) .repeat-end {
  height: 19px;
  min-height: 19px;
}

html body #lesson:not(.large-blocks) .repeat-body {
  min-height: 35px;
}

html body #lesson:not(.large-blocks) .repeat-add {
  height: 32px;
  margin-block: 4px;
}

html body #lesson[data-world]:not(.large-blocks) .branch-head {
  min-height: 32px;
  padding-block: 4px 5px;
  font-size: var(--block-label-size);
}

@media (max-width: 700px) {
  html body #lesson .code-tabs {
    height: 50px;
    min-height: 50px;
  }

  html body #lesson:not(.large-blocks) {
    --block-row-height: 36px;
    --block-label-size: 13px;
  }
}