/* Shared Uranus ice-blue theme for information and documentation pages. */
html { color-scheme: light; scroll-padding-top: 6rem; }
body {
  --night: #163e54; --deep: #e1f4fb; --ice: #163e54;
  --mist: #315e73; --uranus: #116a91; --aqua: #1597c5;
  --line: #23678629; --muted: #46687b;
  color: #163e54;
  background: #eef9fd;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.page-story { background: radial-gradient(ellipse at 90% 0, #bce8fa70, transparent 45%), #eef9fd; }
::selection { background: #98dbf5; color: #163e54; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #116a91; outline-offset: 5px; }
.top { background: #f0fbfff2; border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); padding-block: .85rem; }
.top-brand { font-size: 1rem; letter-spacing: .02em; line-height: 1.4; }
.top-brand::before { content: ""; display: block; flex: 0 0 38px; width: 38px; height: 38px; background: url("assets/icon.png") center / contain no-repeat; }
.top-nav { font-size: .875rem; gap: 1.2rem; }
.top-nav a:hover, .top-nav a[aria-current="page"] { color: #08749b; text-decoration: underline; text-underline-offset: .4rem; }
.lang-switch { color: #165678; background: #e1f4fb; border-color: #78b8d7; padding: .55rem .8rem; font-size: .875rem; }
.story-hero { width: 100%; max-width: 70rem; margin: 0 auto; padding: 8rem var(--pad) 2.5rem; }
.eyebrow, .block-kicker { font-size: .875rem; line-height: 1.5; letter-spacing: .1em; margin-bottom: .75rem; }
.story-title-main { font-size: clamp(2.1rem, 4.5vw, 3.75rem); line-height: 1.15; letter-spacing: -.035em; }
.story-title-sub { font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.5; margin-top: .75rem; }
.story-lede { font-size: 1.0625rem; line-height: 1.85; max-width: 49rem; color: #46687b; }
.story-main { width: 100%; max-width: 70rem; padding: 0 var(--pad) 3rem; margin: 0 auto; }
.story-block, .story-block-alt, .story-closing {
  max-width: none; margin: 0 0 1.25rem; padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--line); border-radius: 14px; background: #f8fdff;
  opacity: 1; transform: none;
}
.story-block-alt { background: linear-gradient(125deg, #d4effc, #edfbff); }
.story-closing { background: #e1f4fb; }
.block-title { margin: .5rem 0 1.15rem; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.35; }
.story-prose { overflow-wrap: anywhere; }
.story-prose p, .story-closing p { color: #365a70; font-size: 1rem; line-height: 1.85; }
.story-prose h2 { margin: 1.75rem 0 .65rem; font-size: 1.375rem; line-height: 1.4; }
.story-prose a, .help-list a, .help-olist a { color: #116a91; text-decoration: underline; text-underline-offset: .2rem; }
.cta-main, .help-version-cta, .help-toc-back { color: #116a91; font-weight: 600; }
.cta-main { display: inline-block; padding: .6rem 0; }
.help-hub { width: 100%; max-width: 70rem; margin: 0 auto; padding: 0 var(--pad) 3rem; }
.help-version-card { background: #f8fdff; border-radius: 14px; padding: 1.75rem; }
.help-version-card:hover { border-color: #3496c0; background: #e1f4fb; }
.help-version-badge { font-size: .875rem; color: #116a91; }
.help-version-title { font-size: 1.5rem; line-height: 1.4; margin: .6rem 0; }
.help-version-desc, .help-hub-note { color: #46687b; font-size: 1rem; }
.help-layout { width: 100%; max-width: 86rem; padding: 7rem var(--pad) 3rem; grid-template-columns: 12rem minmax(0, 1fr); gap: 2rem; }
.help-layout > * { min-width: 0; }
.help-toc { background: #e1f4fb; border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem; top: 6rem; }
.help-toc-kicker { font-size: .875rem; color: #116a91; }
.help-toc-title { font-size: 1.125rem; }
.help-toc-nav { font-size: .9375rem; gap: .65rem; }
.help-toc-nav a:hover { color: #116a91; text-decoration: underline; }
.help-toc-back { display: inline-block; margin-top: 1.2rem; font-size: .875rem; }
.help-doc-hero { padding-bottom: 1.5rem; }
.help-doc-hero .story-title-main { font-size: clamp(1.8rem, 3.5vw, 3rem); }
.help-section { padding: 1.75rem 0; opacity: 1; transform: none; scroll-margin-top: 6rem; }
.help-h3 { font-size: 1.2rem; margin: 1.5rem 0 .65rem; }
.help-lead, .help-list, .help-olist, .help-footnote { font-size: 1rem; line-height: 1.8; color: #365a70; }
.help-list, .help-olist { padding-left: 1.25rem; }
.help-list li, .help-olist li { margin: .4rem 0; }
.help-list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem 1.5rem; }
.help-keys { font-size: 1rem; table-layout: fixed; overflow-wrap: anywhere; }
.help-keys th { background: #dceff7; font-size: .875rem; }
.help-keys td { background: #f8fdff; }
code, kbd { background: #dceff7; color: #194f6e; padding: .12em .3em; border-radius: 4px; overflow-wrap: anywhere; }
pre { max-width: 100%; overflow: auto; }
.help-closing-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.foot { margin-top: auto; background: #cfe9f5; color: #163e54; padding-block: 2rem; }
.foot-tag, .foot-copy { font-size: .875rem; }
@media (max-width: 900px) {
  .top { position: sticky; flex-wrap: wrap; gap: .5rem; }
  .top-tools { flex-wrap: wrap; gap: .75rem; }
  .top-nav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
  .story-hero { padding-top: 2.5rem; }
  .help-layout { grid-template-columns: 1fr; padding-top: 2rem; }
  .help-toc { position: static; }
  .help-toc-nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
}
@media (max-width: 560px) {
  .top-brand::before { width: 30px; height: 30px; flex-basis: 30px; }
  .help-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-keys td, .help-keys th { padding: .55rem .35rem; }
}
