@font-face {
  font-family: Alexandria;
  src: url("assets/alexandria-arabic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: Alexandria;
  src: url("assets/alexandria-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  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;
}

:root {
  color-scheme: light;
  --ground: #f6f3ea;
  --paper: #fffdf7;
  --ink: #171d24;
  --muted: #52605e;
  --line: #aeb9b6;
  --blue: #173d74;
  --blue-dark: #0c2d57;
  --green: #087f6a;
  --green-dark: #055c4d;
  --amber: #f1ad3d;
  --gutter: clamp(18px, 4.2vw, 68px);
  scroll-padding-block-start: 7rem;
  scrollbar-color: var(--muted) var(--ground);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ground);
  font: 400 1rem/1.65 Alexandria, "Noto Sans Arabic", Tahoma, sans-serif;
}
::selection { color: var(--blue-dark); background: #f8e3b9; }
a { color: var(--blue); text-underline-offset: 0.25em; }
a:hover { color: var(--blue-dark); }
:focus-visible { outline: 3px solid var(--aspl-focus, #173d74); outline-offset: 4px; }
a, button, select, summary, [tabindex], [role="textbox"] { scroll-margin-block: 9rem 1rem; }
button, select { cursor: pointer; }
h1, h2, h3, p { margin-block-start: 0; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; }
p { max-inline-size: 68ch; }
code, .commands {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: "Noto Sans Mono", "Cascadia Code", Consolas, monospace;
}
.skip-link {
  position: fixed;
  z-index: 3;
  inset-block-start: 0.5rem;
  inset-inline-start: var(--gutter);
  padding: 0.75rem;
  color: var(--blue-dark);
  background: var(--paper);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
.site-header {
  --aspl-focus: #fff;
  position: sticky;
  z-index: 2;
  inset-block-start: 0;
  display: flex;
  align-items: stretch;
  gap: 2rem;
  padding-inline: var(--gutter);
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}
.site-brand {
  display: flex;
  align-items: center;
  min-block-size: 74px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  text-decoration: none;
}
.site-locale {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding-inline: 0.75rem;
  margin-inline-start: auto;
  color: #fff;
  font-size: 0.85rem;
}
.site-header nav {
  display: flex;
  min-inline-size: 0;
  overflow-x: auto;
  scrollbar-color: #dfe8f3 var(--blue-dark);
}
.site-header nav a {
  display: flex;
  flex: 0 0 auto;
  gap: 0.35em;
  align-items: center;
  justify-content: center;
  min-block-size: 58px;
  padding-inline: clamp(16px, 2vw, 32px);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 650;
  text-decoration: none;
}
.site-header a:hover { color: #fff; background: var(--blue-dark); }
.site-header nav a[aria-current] { --aspl-focus: #173d74; color: var(--ink); background: var(--amber); }
.site-header nav a:focus-visible { outline-offset: -5px; }
.try-section {
  max-inline-size: 1540px;
  min-block-size: calc(100svh - 74px);
  margin-inline: auto;
  padding: 2rem var(--gutter) 4rem;
  border-block-start: 5px solid var(--amber);
}
h1 {
  margin-block-end: 1.5rem;
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 800;
  line-height: 1.3;
}
#playground-host {
  min-inline-size: 0;
  box-shadow: 0 18px 46px rgb(18 36 54 / 16%);
}
.try-introduction {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 3rem;
  margin-block-start: 2rem;
}
.try-introduction p { margin: 0; }
.next-stop { justify-self: start; padding-block: 0.5rem; font-weight: 650; }
.journey-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(82px, 8vw, 130px);
  padding-inline: max(var(--gutter), calc((100vw - 1404px) / 2));
  border-block-start: 1px solid var(--line);
}
.journey-section:nth-child(even) { background: var(--paper); }
.journey-section h2 {
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  line-height: 1.4;
  font-weight: 800;
}
.station-number {
  display: block;
  inline-size: 3rem;
  margin-block-end: 1.5rem;
  color: var(--ink);
  background: var(--amber);
  font-size: 1.25rem;
  line-height: 3rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.reading-rows { border-block-start: 5px solid var(--blue); }
.reading-rows article { padding-block: 1.5rem; border-block-end: 1px solid var(--line); }
.reading-rows h3 { margin-block-end: 0.75rem; font-size: 1.25rem; }
.reading-rows p { margin-block-end: 1rem; }
.reading-rows a { display: inline-block; padding-block: 0.5rem; font-weight: 650; }
.host-label { color: var(--green-dark); font-size: 0.85rem; font-weight: 650; }
.decision-note { padding: 1rem; color: #65400a; background: #f8e3b9; }
.commands { margin: 0; padding: 1rem; color: #f5f6ef; background: #101a24; white-space: pre-wrap; overflow-wrap: anywhere; }
.site-footer { padding: 2rem var(--gutter); border-block-start: 5px solid var(--green); }
.site-footer p { margin-block-end: 0.5rem; }
.site-footer a { display: inline-block; min-block-size: 44px; padding-block: 0.5rem; }

@media (max-width: 50rem) {
  :root { scroll-padding-block-start: 9rem; }
  .site-header { display: grid; grid-template-columns: 1fr auto; gap: 0; padding-inline: 0; }
  .site-header nav { grid-column: 1 / -1; grid-row: 2; }
  .site-locale { grid-column: 2; grid-row: 1; margin-inline-end: var(--gutter); }
  .site-brand { min-block-size: 56px; padding-inline: var(--gutter); font-size: 1.25rem; }
  .site-header nav a { min-block-size: 48px; padding-inline: 1rem; }
  .try-section { padding-block: 1.25rem 3rem; }
  h1 { margin-block-end: 1rem; }
  .try-introduction, .journey-section { grid-template-columns: minmax(0, 1fr); }
  .journey-section { gap: 2rem; }
}

@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight !important; }
  .site-header, #playground-host, .decision-note { border: 1px solid CanvasText; }
  .site-header nav a[aria-current] { text-decoration: underline; }
}

.reading-rows { min-inline-size: 0; }
.reading-rows figure { margin: 1.5rem 0 2rem; min-inline-size: 0; }
.reading-rows figcaption { font-weight: 650; margin-block-end: 0.5rem; }
.reading-rows figure a { margin-inline-end: 1rem; }
.reading-rows figure pre { margin-block-end: 0.75rem; }
.reading-rows code, .reading-rows bdi { overflow-wrap: anywhere; }
.reading-rows dt { margin-block-start: 1rem; }
.reading-rows dd { margin-inline-start: 0; max-inline-size: 68ch; }
.aspl-source-view { min-block-size: 0; white-space: normal; }

.limits-table { inline-size: 100%; table-layout: fixed; overflow-wrap: anywhere; border-collapse: collapse; font-size: 0.85rem; }
.limits-table caption { font-weight: 650; text-align: start; margin-block-end: 0.75rem; }
.limits-table th, .limits-table td { padding: 0.5rem 0.25rem; border-block-end: 1px solid var(--line); text-align: start; }