:root {
  color-scheme: light dark;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --canvas-glow-shift: 0;
  --shift-amount: 0%;
  --bg-base: #f5f7fa;
  --bg-peak: #ffffff;
  --text-base: #1f2933;
  --text-peak: #12263f;
  --accent-base: #2d7ff9;
  --accent-peak: #5aa7ff;
  --accent-dark-base: #1d5fcc;
  --accent-dark-peak: #4d82d8;
  --card-base: rgba(255, 255, 255, 0.8);
  --card-peak: rgba(255, 255, 255, 0.95);
  --shadow-color-base: rgba(31, 41, 51, 0.12);
  --shadow-color-peak: rgba(17, 24, 39, 0.08);
  --control-bg-base: rgba(17, 25, 40, 0.65);
  --control-bg-peak: rgba(255, 255, 255, 0.82);
  --control-border-base: rgba(255, 255, 255, 0.35);
  --control-border-peak: rgba(255, 255, 255, 0.65);
  --control-text-base: #ecf6ff;
  --control-text-peak: #1b2a3d;
  --layer-space-xs: 0.5rem;
  --layer-space-sm: 0.75rem;
  --layer-space-md: 1rem;
  --layer-space-lg: 1.5rem;
  --layer-space-xl: 2rem;
  --layer-radius-sm: 16px;
  --layer-radius-md: 18px;
  --layer-radius-lg: 24px;
  --layer-radius-xl: 28px;
  --layer-radius-2xl: 32px;
  --layer-radius-pill: 999px;
  --bg-color: color-mix(in srgb, var(--bg-base) calc(100% - var(--shift-amount)), var(--bg-peak) var(--shift-amount));
  --text-color: color-mix(in srgb, var(--text-base) calc(100% - var(--shift-amount)), var(--text-peak) var(--shift-amount));
  --accent-color: color-mix(in srgb, var(--accent-base) calc(100% - var(--shift-amount)), var(--accent-peak) var(--shift-amount));
  --accent-color-dark: color-mix(
    in srgb,
    var(--accent-dark-base) calc(100% - var(--shift-amount)),
    var(--accent-dark-peak) var(--shift-amount)
  );
  --card-bg: color-mix(in srgb, var(--card-base) calc(100% - var(--shift-amount)), var(--card-peak) var(--shift-amount));
  --shadow-color: color-mix(
    in srgb,
    var(--shadow-color-base) calc(100% - var(--shift-amount)),
    var(--shadow-color-peak) var(--shift-amount)
  );
  --layer-shadow-soft: 0 20px 40px var(--shadow-color);
  --layer-shadow-strong: 0 25px 55px color-mix(in srgb, var(--shadow-color) 65%, transparent);
  --layer-shadow-thread: color-mix(in srgb, var(--shadow-color) 42%, transparent);
  --layer-shadow-float: 0 18px 36px rgba(0, 0, 0, 0.35);
  --layer-shadow-outline: 0 0 0 4px color-mix(in srgb, var(--accent-color) 45%, white 55%);
  --shadow: var(--layer-shadow-soft);
  --control-bg: color-mix(in srgb, var(--control-bg-base) calc(100% - var(--shift-amount)), var(--control-bg-peak) var(--shift-amount));
  --control-border: color-mix(
    in srgb,
    var(--control-border-base) calc(100% - var(--shift-amount)),
    var(--control-border-peak) var(--shift-amount)
  );
  --control-text: color-mix(in srgb, var(--control-text-base) calc(100% - var(--shift-amount)), var(--control-text-peak) var(--shift-amount));
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-base: #101418;
    --bg-peak: #f5f7fa;
    --text-base: #e5ecf5;
    --text-peak: #0f172a;
    --accent-base: #6ea8ff;
    --accent-peak: #8cc4ff;
    --accent-dark-base: #4d82d8;
    --accent-dark-peak: #5f93e5;
    --card-base: rgba(23, 31, 40, 0.9);
    --card-peak: rgba(248, 250, 252, 0.82);
    --shadow-color-base: rgba(0, 0, 0, 0.45);
    --shadow-color-peak: rgba(16, 24, 40, 0.2);
    --control-bg-base: rgba(17, 25, 40, 0.72);
    --control-bg-peak: rgba(255, 255, 255, 0.82);
    --control-border-base: rgba(0, 228, 255, 0.35);
    --control-border-peak: rgba(255, 255, 255, 0.7);
    --control-text-base: #ecf6ff;
    --control-text-peak: #1b2a3d;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-color);
  color: var(--text-color);
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.25rem, 6vw, 4rem);
  position: relative;
  overflow-x: hidden;
  transition: background 0.35s ease, color 0.35s ease;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 4vw, 2.5rem);
}

h1 {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  margin: 0 0 1rem;
  letter-spacing: -0.03em;
}

p {
  margin: 0 0 2.5rem;
  line-height: 1.6;
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--text-color) 80%, #6b7a90);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.visually-hidden:focus,
.visually-hidden:focus-within {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}