@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap");

:root {
  --page-top: #2f76b9;
  /*--page-top-2: #2a6aa8;*/
  --tab-mint: #7fffe0;
  --bg: #d7e9f6;
  --panel-edge: #ffffff26;
  --panel-inner: #00000012;
  --text: #f7feff;
  --text-muted: #e9fbff;
  --code-bg: #00000022;
  --shadow:
    0 14px 24px rgba(19, 78, 110, 0.18), 0 2px 6px rgba(19, 78, 110, 0.1);
  --radius: 16px;
  --maxw: 980px;
  --header-h: 140px; /* updated at runtime */
  --font-body:
    "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    sans-serif;
  --font-display:
    "Manrope", "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, sans-serif;
  --focus-ring: #125a84;
  --focus-ring-soft: #c5e4f7;
  --pill-bg: #edf7fd;
  --pill-border: #b7d8eb;
  --pill-text: #24516a;
  --pill-hover-border: #4f88a7;
  --pill-active-bg: #d7efe2;
  --pill-active-border: #4f8f6e;
  --pill-active-text: #1e5c43;
  --btn-bg: #fff6fb;
  --btn-border: #d6abc7;
  --btn-text: #7a2a6b;
  --btn-hover-border: #8a3d77;
  --btn-primary-bg: #7a2a6b;
  --btn-primary-border: #7a2a6b;
  --btn-primary-text: #fff7fc;
  --btn-primary-hover-border: #4f1a45;
  --surface-border: #537892;
  --surface-border-strong: #274f67;
  --surface-hover-ring: #1b4f6d;
  --surface-card-bg: #2f9fe1;
  --surface-card-text: #f7fcff;
  --surface-card-text-muted: #dff1fa;
  --surface-card-code-bg: rgba(29, 55, 82, 0.9);
  --surface-card-code-border: rgba(232, 248, 255, 0.28);
  --welcome-bg: #f8f3e6;
  --welcome-border: #6b2b2b;
  --welcome-text: #2e1b1b;
  --welcome-text-muted: #6f422d;
  --welcome-link-bg: rgba(255, 248, 230, 0.78);
  --welcome-link-border: rgba(107, 43, 43, 0.2);
  --welcome-link-hover: #6b2b2b;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: auto;
  min-height: 100%;
}
body {
  margin: 0;
  padding-top: var(--header-h);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  background: var(--bg);
  color: #033b57;
}

#appMain > [data-view][hidden] {
  display: none;
}

.topbar {
  z-index: 1000;
  background: var(--page-top);
  color: #dff4ff;
  padding: 24px 20px 10px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  overflow: visible;
}
.topbar-row {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  max-width: var(--maxw);
  margin: 0 auto;
  font-weight: 800;
  font-size: 30px;
  color: #dff4ff;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* Pillbar: scrollable container for pill buttons/text */
.pillbar {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  min-height: 36px;
  overflow: visible;
}
.pills {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow-x: visible;
  overflow-y: visible;
  max-width: 100%;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  /*padding: 3px;
  margin: -3px;*/
}
.pill,
.theme-toggle {
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--pill-border);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  background: var(--pill-bg);
  color: var(--pill-text);
  white-space: nowrap;
  transition: none;
}

.pill.active {
  background: var(--pill-active-bg);
  border-color: var(--pill-active-border);
  color: var(--pill-active-text);
}
.pill.inactive {
  background: var(--pill-bg);
  border-color: var(--pill-border);
  color: var(--pill-text);
}
.pill:hover,
.theme-toggle:hover {
  border-color: var(--pill-hover-border);
}
/*.pill:focus-visible,
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}*/
.pill:focus-visible,
.theme-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.tabs {
  display: grid;
  /* Keep tabs on a single row and divide space equally regardless of count */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  max-width: var(--maxw);
  margin: 14px auto 0;
  position: relative;
}
.tabs a {
  text-decoration: none;
  color: #9cfbe7;
  opacity: 0.8;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  font-family: var(--font-display);
  padding: 14px 6px 16px;
  position: relative;
  user-select: none;
  transition:
    color 0.22s ease,
    opacity 0.22s ease;
}
.tabs a:hover {
  opacity: 1;
}
.tabs a:focus-visible {
  outline: 2px solid var(--tab-mint);
  outline-offset: -2px;
  opacity: 1;
}
.tabs a[aria-current="page"] {
  color: var(--tab-mint);
  opacity: 1;
}
.tabs::after {
  content: "";
  position: absolute;
  left: var(--tabs-indicator-left, 0px);
  bottom: 0;
  width: var(--tabs-indicator-width, 74px);
  height: 4px;
  border-radius: 4px;
  background: var(--tab-mint);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08) inset;
  opacity: var(--tabs-indicator-opacity, 0);
  transition:
    left 0.26s ease,
    width 0.26s ease,
    opacity 0.18s ease;
}

.wrap {
  max-width: calc(var(--maxw) + 120px);
  margin: 48px auto;
  padding: 0 20px;
  width: min(100%, calc(var(--maxw) + 120px));
}
.featured-wrap {
  display: grid;
  justify-items: center;
}
.divider {
  height: 1px;
  background: rgba(22, 70, 100, 0.18);
  margin: 8px auto 22px;
  max-width: 820px;
  width: 100%;
}

/* shared featured card shell */
.card,
.welcome-card {
  border-radius: var(--radius);
  padding: 26px 26px 28px;
  color: var(--text);
  position: relative;
  margin: 22px 0 36px;
  max-width: 820px;
  width: 100%;
  justify-self: center;
}

/* cards */
.card {
  border: 1px solid var(--surface-border);
  background: var(--surface-card-bg);
  color: var(--surface-card-text);
}
.card:has(.stretched):hover {
  box-shadow: 0 0 0 1px var(--surface-hover-ring);
  border-color: var(--surface-border-strong);
}
.card:has(.stretched):focus-within {
  box-shadow: 0 0 0 5px var(--surface-hover-ring);
  border-color: var(--surface-border-strong);
}

.welcome-card {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.95fr);
  gap: 28px;
  align-items: center;
  background: var(--welcome-bg);
  border: 1px solid var(--welcome-border);
  color: var(--welcome-text);
}

.welcome-links {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.article-link {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--welcome-link-border);
  background: var(--welcome-link-bg);
  color: var(--welcome-border);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  min-height: 84px;
  align-content: start;
}
.article-link strong {
  font-size: 17px;
  font-family: var(--font-display);
}
.article-link span {
  color: var(--welcome-text-muted);
  font-size: 14px;
  line-height: 1.5;
}
.article-link:hover {
  border-color: var(--welcome-link-hover);
}
.article-link:focus-visible {
  outline: 2px solid var(--welcome-border);
  outline-offset: 3px;
}

.card h2 {
  margin: 0 0 12px;
  font-size: 26px;
  color: var(--surface-card-text);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.card p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--surface-card-text-muted);
}

.welcome-card h2 {
  color: var(--welcome-border);
}
.welcome-card p {
  color: var(--welcome-text-muted);
  max-width: 34rem;
}

.card .code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 10px 12px;
  /*border: 1px solid var(--surface-card-code-border);*/
  border-radius: 6px;
  background: var(--surface-card-code-bg);
  color: var(--surface-card-text);
  white-space: pre-wrap;
  font-size: 14px;
}
.card a.stretched {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  text-indent: -9999px;
}

/* breadcrumbs and folder header */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #0b4060;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.crumb-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #9fc7df;
  border-radius: 999px;
  background: #f4fbff;
  color: #0b4060;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.crumb-back:hover {
  border-color: #4f88a7;
}
.crumb-back:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.breadcrumbs a {
  color: #0b4060;
  text-decoration: none;
}
.breadcrumbs .sep {
  opacity: 0.6;
}
.folder-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  max-width: 820px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.folder-head .icon {
  font-size: 22px;
}
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  justify-items: center;
}
.grid > .card,
.grid > .welcome-card {
  margin: 0;
}

/* edge buttons for tab cycling (below header only) */
.edge {
  position: fixed;
  left: 0;
  right: auto;
  top: var(--header-h);
  bottom: 0;
  width: 10vw;
  min-width: 44px;
  z-index: 6;
  cursor: pointer;
  background: transparent;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.edge.right {
  left: auto;
  right: 0;
}
.edge:focus {
  outline: none;
}
.edge:focus-visible {
  box-shadow:
    inset 0 0 0 2px #fff8,
    inset 0 0 0 4px #0006;
}
.edge::-moz-focus-inner {
  border: 0;
}

/* Playground editor */
.editor {
  background: #f6fbff;
  border: 1px solid #cfe6f6;
  border-radius: 14px;
  overflow: hidden;
  /*box-shadow: 0 6px 14px rgba(20, 60, 100, 0.08);*/
}

.repl {
  background: #f6fbff;
  border: 1px solid #cfe6f6;
  border-radius: 14px;
  overflow: hidden;
  /*box-shadow: 0 6px 14px rgba(20, 60, 100, 0.08);*/
  color: #0b4060;
}
.repl-flow {
  display: flex;
  flex-direction: column;
  /*min-height: 70vh;*/
}
.repl .headbar {
  position: sticky;
  top: 8px;
  border-bottom: 1px solid #cfe6f6;
}
.repl-topbar {
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}
.repl-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.repl-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  min-height: 340px;
  max-height: calc(100vh - var(--header-h) - 96px);
  overflow: auto;
  background: #f7fcff;
}
.repl-turn {
  display: flex;
}
.repl-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
.repl-line-meta {
  flex: 0 0 auto;
  min-width: 58px;
  padding-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #6a8da8;
}
.repl-line-meta-input {
  color: #0d6d99;
}
.repl-line-meta-output {
  color: #c03f8e;
}
.repl-line-meta-system {
  color: #7f96a8;
}
.repl-line-body {
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #0b4060;
  flex: 1 1 auto;
}
.repl-composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid #cfe6f6;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  /*box-shadow: 0 14px 30px rgba(27, 82, 118, 0.12);*/
}
.composer-frame {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.repl-input {
  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 160px;
  border: 1px solid #d4e8f6;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 12px 14px;
  overflow-y: auto;
  resize: none;
  line-height: 1.45;
}
.composer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.composer-stdin {
  flex: 1 1 320px;
  min-width: 220px;
}
.composer-send {
  margin-left: auto;
}
.repl-composer .btn {
  border: 1px solid var(--btn-border);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: inherit;
}
.repl-composer .btn.primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-text);
}
.repl-composer .mini {
  font-size: 12px;
  opacity: 0.8;
}
.composer-hint {
  white-space: nowrap;
}
.repl-composer .stdin {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: center;
}
.repl-composer input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #cfe6f6;
  background: white;
  color: #0b4060;
  font-family: inherit;
  outline: none;
}
/*.repl-composer input[type="text"]:focus,
.repl-input:focus {
  border: 1px solid var(--focus-ring);
  outline: 2px solid var(--focus-ring-soft);
  outline-offset: 0;
}*/
.toolbar {
  position: sticky;
  top: 8px;
  background: #f6fbff;
  border-bottom: 1px solid #cfe6f6;
  border-radius: 14px 14px 0 0;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  z-index: 2;
}
.repl-actions {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.debug-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.debug-controls .pills {
  flex-wrap: wrap;
}
.repl-topbar .pills {
  margin-left: auto;
}
.repl-debug-controls {
  margin-left: auto;
}
.toolbar.inner {
  /* inner bars (e.g., REPL codebar) */
  top: 8px;
  border-radius: 0;
}
.toolbar.flat {
  /* no rounded corners (e.g., REPL terminal bar) */
  border-radius: 0;
}
.toolbar .btn {
  border: 1px solid var(--btn-border);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--btn-text);
  white-space: nowrap;
  /*box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12) inset;*/
}
.repl-copy-btn {
  flex: 0 0 auto;
  line-height: 1.2;
}
.toolbar .btn.primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-text);
}
.toolbar .btn:hover,
.repl-composer .btn:hover {
  border-color: var(--btn-hover-border);
}
.toolbar .btn.primary:hover,
.repl-composer .btn.primary:hover {
  border-color: var(--btn-primary-hover-border);
}
.toolbar .btn:focus-visible,
.repl-composer .btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/*.toolbar .btn:active {
}*/
.toolbar .mini {
  font-size: 12px;
  opacity: 0.8;
  text-wrap: balance;
}
.toolbar .stdin {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: center;
}
.toolbar .debug-controls {
  flex: 0 1 auto;
}
.toolbar input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #cfe6f6;
  background: white;
  font-family: inherit;
  outline: none;
}

.playground-shell {
  display: grid;
  gap: 18px;
}
.playground-templates {
  gap: 16px;
}
.playground-templates-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.playground-templates h2 {
  margin: 0 0 6px;
  font-size: clamp(30px, 4.8vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.playground-templates-copy {
  margin: 0;
  max-width: 420px;
  color: #54758e;
  font-size: 16px;
  line-height: 1.6;
}
.playground-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.playground-template-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 180px;
  width: 100%;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  color: #0b4060;
  box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.playground-template-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.playground-template-card strong {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.playground-template-desc {
  color: #3d6178;
  font-size: 16px;
  line-height: 1.6;
}
.playground-template-code {
  margin-top: auto;
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  font-size: 12px;
  line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.playground-template-card-1 {
  border-color: #e9b44c;
  background: rgba(233, 180, 76, 0.18);
  color: #8a651a;
}
.playground-template-card-2 {
  border-color: #82a352;
  background: rgba(130, 163, 82, 0.15);
  color: #3e5223;
}
.playground-template-card-3 {
  border-color: #72a1e5;
  background: rgba(114, 161, 229, 0.15);
  color: #2d4a7a;
}
.playground-template-card-4 {
  border-color: #e07aab;
  background: rgba(224, 122, 171, 0.15);
  color: #853a5f;
}
.playground-template-card-1:hover {
  border-color: #d4a23d;
}
.playground-template-card-2:hover {
  border-color: #6a8543;
}
.playground-template-card-3:hover {
  border-color: #5a85c4;
}
.playground-template-card-4:hover {
  border-color: #c46492;
}

.editor-area {
  display: grid;
  grid-template-columns: 56px 1fr;
  min-height: 340px;
  overflow: hidden;
}
.gutter {
  background: #eaf5ff;
  border-right: 1px solid #d7ebfb;
  padding: 10px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #5a86a6;
  text-align: right;
  user-select: none;
  overflow: visible;
}
.gutter .ln {
  height: 22px;
  line-height: 22px;
}
.codepane {
  position: relative;
  overflow: auto;
  overflow-y: hidden;
}
textarea.editor-text {
  width: 100%;
  height: 100%;
  min-height: 340px;
  resize: none;
  border: 0;
  outline: 0;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: white;
  color: #0b4060;
}
textarea.editor-text.repl-input {
  height: 44px;
  min-height: 44px;
  max-height: 160px;
}

/* When output is shown, square off the editor area's bottom so
   the radius is only at the overall card bottom */
.editor.has-output .editor-area {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.run-output {
  border-top: 1px dashed #cfe6f6;
  margin: 0;
  padding: 10px 12px;
  background: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #0b4060;
  white-space: pre-wrap;
  overflow: auto;
  /*word-break: break-word;*/
  min-height: 0; /* allow flex children to not overflow containers */
  /*max-height: 400px;*/
  border-radius: 0 0 14px 14px;
}
.run-output:empty {
  display: none;
}
.info-doc {
  background: white;
  border: 1px solid #cfe6f6;
  border-radius: 14px;
  /*box-shadow: 0 6px 14px rgba(20, 60, 100, 0.08);*/
  padding: 20px;
}
.info-doc h2 {
  margin-top: 0;
}
@media (max-width: 560px) {
  .wrap {
    margin: 28px auto;
    padding: 0 16px;
  }

  .brand {
    font-size: 26px;
  }
  .repl-topbar,
  .repl-actions,
  .composer-actions {
    align-items: stretch;
  }
  .toolbar,
  .repl-actions,
  .composer-actions,
  .composer-stdin {
    width: 100%;
  }
  .toolbar,
  .repl-actions,
  .debug-controls {
    flex-wrap: wrap;
  }
  .repl-debug-controls {
    margin-left: 0;
  }
  .composer-send {
    margin-left: 0;
    width: 100%;
  }
  .repl-thread {
    padding: 12px;
    max-height: none;
  }
  .playground-templates-head {
    flex-direction: column;
  }
  .playground-templates-copy {
    max-width: none;
  }
  .repl-line {
    gap: 8px;
  }
  .repl-line-meta {
    min-width: 48px;
  }
}

/* --- Tutorial layout --- */
.layout-3col {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
}
.layout-3col > * {
  min-width: 0;
}
.left-rail,
.right-rail {
  position: relative;
}
.left-rail .sticky,
.right-rail .sticky {
  position: sticky;
  top: calc(var(--header-h) + 12px);
}
.outline {
  background: #ffffff;
  border: 1px solid #cfe6f6;
  border-radius: 22px;
  padding: 12px;
  /*box-shadow: 0 6px 14px rgba(20, 60, 100, 0.06);*/
}
.outline h3 {
  margin: 6px 0 8px;
  font-size: 14px;
  color: #0b4060;
  letter-spacing: 0.3px;
}
.outline a {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  color: #2b5870;
  text-decoration: none;
  font-size: 14px;
}
.outline a:focus-visible,
.mobile-outline a:focus-visible,
.mobile-outline summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.outline a.active {
  background: #dbefff;
  color: #0b4060;
  font-weight: 700;
}
.outline .sub {
  padding-left: 18px;
  font-size: 13px;
}

.article {
  background: #ffffff;
  border: 1px solid #cfe6f6;
  border-radius: 22px;
  /*box-shadow: 0 6px 14px rgba(20, 60, 100, 0.08);*/
  padding: 26px;
  color: #0b4060;
  min-width: 0; /* allow grid child to shrink and not overflow */
}
.article h1 {
  margin-top: 0;
  font-size: 30px;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.article h2 {
  margin-top: 28px;
  font-size: 22px;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.article h3 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.article p {
  line-height: 1.75;
  font-size: 17px;
}
.article strong {
  color: #e11d48;
  font-weight: 800;
}
.article em {
  color: #2563eb;
  /*color: midnightblue;*/
  font-style: normal;
  text-decoration-line: underline;
  text-decoration-style: wavy;
}
.article li {
  margin-top: 14px;
  line-height: 1.65;
  font-size: 16.5px;
}
.article ul {
  list-style: none;
  padding-left: 1.4rem;
  margin: 0.85rem 0;
}

.article ul li::before {
  content: "⁃";
  color: hotpink;
  margin-right: 8px;
}

.article ol {
  list-style-position: outside;
  padding-left: 1.75rem;
  margin: 0.85rem 0;
}

.article li > ul,
.article li > ol {
  margin-top: 0.55rem;
}

.article ul ul,
.article ul ol,
.article ol ul,
.article ol ol {
  padding-left: 1.5rem;
}

.article a {
  color: hotpink;
  text-decoration: underline;
}

/* More page layout */
.more-page .more-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.more-page .lede {
  margin: 0;
  color: #2b5870;
  font-size: 16px;
}
.more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.more-card {
  background: #f7fcff;
  border: 1px solid #cfe6f6;
  border-radius: 16px;
  padding: 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.more-card h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.more-card p {
  margin: 0 0 10px;
  font-size: 16.5px;
  line-height: 1.6;
}
.more-card p:first-child {
  margin-top: 0;
}
.more-card p:last-child {
  margin-bottom: 0;
}
.more-card table {
  margin: 12px 0 0;
}
.more-card.span-2 {
  grid-column: span 2;
}
@media (max-width: 760px) {
  .more-card.span-2 {
    grid-column: auto;
  }
  .composer-hint {
    display: none;
  }

  .welcome-card {
    grid-template-columns: 1fr;
  }
}

.right-rail .support {
  background: #f7fcff;
  border: 1px solid #cfe6f6;
  border-radius: 12px;
  padding: 14px;
  /*box-shadow: 0 6px 14px rgba(20, 60, 100, 0.06);*/
}
.support h3 {
  margin: 6px 0 8px;
}
.support .btn {
  display: inline-block;
  margin-top: 8px;
  border: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  background: #2aa8f1;
  color: white;
  text-decoration: none;
}

.mobile-outline {
  display: none;
}
@media (max-width: 1100px) {
  .layout-3col {
    grid-template-columns: 220px 1fr;
  }
  .right-rail {
    display: none;
  }
}
@media (max-width: 820px) {
  .layout-3col {
    grid-template-columns: 1fr;
  }
  .left-rail {
    display: none;
  }
  /* Show a mobile outline drop-down at top of article */
  .mobile-outline {
    display: block;
    margin-bottom: 12px;
    background: white;
    border: 1px solid #cfe6f6;
    border-radius: 12px;
    overflow: hidden;
  }
  .mobile-outline summary {
    cursor: pointer;
    padding: 12px 14px;
    font-weight: 700;
    color: #0b4060;
    list-style: none;
  }
  .mobile-outline[open] summary {
    border-bottom: 1px solid #cfe6f6;
  }
  .mobile-outline a {
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    color: #2b5870;
  }
  .mobile-outline a + a {
    border-top: 1px dashed #e2eef9;
  }
}

/* remove right-rail on wide screens */
.right-rail {
  display: none;
}

/* mobile-outline hidden by default */
.mobile-outline {
  display: none;
}

/* code block style */
.code-wrapper {
  margin: 16px 0;
  border: 1px solid #b5e6b5;
  border-radius: 12px;
  background: #e8ffe8;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #d4fcd4;
  border-bottom: 1px solid #b5e6b5;
}
.code-header .lang {
  font-weight: 700;
  font-size: 12px;
  color: #000;
  opacity: 1;
}
.code-actions {
  display: flex;
  gap: 8px;
}
.article pre {
  background: transparent;
  color: #111;
  border: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.article pre code {
  display: block;
  padding: 14px 16px;
  color: #000;
  background: transparent;
  border: 0;
}
.article code {
  background: #e6f8e6;
  border: 1px solid #bfe8bf;
  color: #000;
  line-height: 1.4;
  padding: 0.1em 0.35em;
  margin: auto 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.copy-btn {
  position: static;
  font-size: 12px;
  border: 0;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  background: #c9f5c9;
  border: 1px solid #b5e6b5;
  color: #063a0c;
}
.copy-btn:hover {
  background: #bdf0bd;
}

/* Markdown tables inside articles */
.article table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 16px 0 20px;
  background: #ffffff;
  border: 1px solid #cfe6f6;
  border-radius: 12px;
  overflow: hidden;
}
.article thead th {
  background: #eaf5ff;
  color: #0b4060;
  text-align: left;
  font-weight: 700;
  border-bottom: 1px solid #cfe6f6;
}
.article th,
.article td {
  padding: 10px 12px;
  border-right: 1px solid #e1effa;
  font-size: 15.5px;
  line-height: 1.5;
}
.article tr th:last-child,
.article tr td:last-child {
  border-right: 0;
}
.article tbody tr:nth-child(odd) td {
  background: #f8fcff;
}
.article tbody tr:nth-child(even) td {
  background: #ffffff;
}

/* Inline run result panel after code blocks */
.run-result {
  margin: 10px 0 18px;
  border: 1px solid #b5e6b5;
  border-radius: 12px;
  background: #e8ffe8;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.run-result .run-head {
  padding: 6px 10px;
  background: #d4fcd4;
  border-bottom: 1px solid #b5e6b5;
  border-top: 1px solid #b5e6b5;
  font-weight: 700;
  font-size: 12px;
  color: #000;
}
.run-result pre {
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.run-result pre code {
  display: block;
  padding: 14px 16px;
  background: transparent;
  color: #0b2a0b;
}

/* Visually connect run-result to preceding code block */
.code-wrapper + .run-result {
  margin-top: 0;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.code-wrapper.attached {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
.code-wrapper + .run-result .run-head {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.layout-2col {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
}
@media (max-width: 1100px) {
  .layout-2col {
    grid-template-columns: 220px 1fr;
  }
}
@media (max-width: 820px) {
  .layout-2col {
    grid-template-columns: 1fr;
  }
  .left-rail {
    display: none;
  }
}