/* Shared by the site and the four standalone applications. */
:root {
  --rl-ink: #103e4a;
  --rl-muted: #49676d;
  --rl-paper: #fffaf1;
  --rl-foam: #f7fcfb;
  --rl-surface: #dff3ef;
  --rl-wave: #0ea5c6;
  --rl-deep: #064f69;
  --rl-abyss: #032d4a;
  --rl-sun: #ffbf00;
  --rl-coral: #ff555a;
  --rl-action: #06627a;
  --rl-on-action: #f7fcfb;
  --rl-selected: #ffbf00;
  --rl-on-selected: #103e4a;
  --rl-success: #166747;
  --rl-warning: #865000;
  --rl-danger: #a8303d;
  --rl-boundary: #648992;
  --rl-divider: #bfd4d5;
  --rl-reading-surface: #fffaf1;
  --rl-tool-surface: #f7fcfb;
  --rl-hud-surface: #032d4aee;
  --rl-hud-text: #f7fcfb;
  --rl-font-body: "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  --rl-font-display: "Inter", "Noto Sans JP", "Segoe UI", sans-serif;
  --rl-text-body: 1rem;
  --rl-text-small: .875rem;
  --rl-text-lead: 1.125rem;
  --rl-text-title: clamp(2.5rem, 4vw + 1rem, 5.5rem);
  --rl-text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem);
  --rl-leading-body: 1.85;
  --rl-leading-heading: 1.2;
  --rl-space-1: .25rem;
  --rl-space-2: .5rem;
  --rl-space-3: .75rem;
  --rl-space-4: 1rem;
  --rl-space-6: 1.5rem;
  --rl-space-8: 2rem;
  --rl-space-12: 3rem;
  --rl-space-16: 4rem;
  --rl-space-24: 6rem;
  --rl-width-site: 75rem;
  --rl-width-tool: 80rem;
  --rl-width-reading: 42rem;
  --rl-radius-small: .375rem;
  --rl-radius: .75rem;
  --rl-radius-round: 999px;
  --rl-control-min: 44px;
  --rl-focus: #06627a;
  --rl-header-offset: 6.5rem;
  --rl-z-header: 50;
  --rl-z-hud: 10;
  --rl-z-dialog: 100;
  --rl-duration: 180ms;
  --rl-ease: cubic-bezier(.16, 1, .3, 1);
}

.rl-app-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rl-space-4);
  width: 100%;
  min-height: 72px;
  margin: 0 auto;
  padding: var(--rl-space-3) max(16px, calc((100% - 1280px) / 2));
  background: var(--rl-foam);
  border-bottom: 1px solid var(--rl-boundary);
  color: var(--rl-ink);
  font-family: var(--rl-font-display);
}
.rl-app-brand, .rl-app-return {
  display: inline-flex;
  align-items: center;
  gap: var(--rl-space-3);
  min-height: var(--rl-control-min);
  color: inherit;
  font-size: var(--rl-text-small);
  font-weight: 800;
  line-height: 1.4;
}
.rl-app-brand { text-decoration: none; }
.rl-app-brand img { width: 36px; height: 36px; object-fit: contain; }
.rl-app-return { text-decoration: underline; text-underline-offset: .25em; }
.rl-app-header a:focus-visible {
  outline: 3px solid var(--rl-focus);
  outline-offset: 4px;
  box-shadow: 0 0 0 3px var(--rl-foam);
}
body[data-rl-mode="tool"] :where(button, input, select) { min-block-size: var(--rl-control-min); }
@media (max-width: 360px) {
  .rl-app-header { gap: var(--rl-space-2); }
  .rl-app-brand { gap: var(--rl-space-2); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --rl-duration: 0ms; }
}