:root {
  color-scheme: light;
  --blue: #00a1de;
  --purple: #bf00ff;
  --green: #00ff00;
  --orange: #ffa500;
  --cyan: #00ffff;
  --ink: #000;
  --muted: #333;
  --paper: #fff;
  --line: #cdd8df;
  --link: #005983;
  --unit: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: #f5f8fa;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button, input, summary { font: inherit; }
a { color: var(--link); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a, summary, label { -webkit-tap-highlight-color: #b4ecff; }
:focus-visible { outline: 3px solid #005983; outline-offset: 4px; }
p, ul, ol, figure { margin: 0 0 24px; }
p { max-width: 72ch; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.035em; font-weight: 750; margin: 0 0 24px; text-wrap: balance; }
h1 { font-size: 2.25rem; max-width: 22ch; }
h2 { font-size: clamp(1.5rem, 2vw, 2rem); max-width: 30ch; }
h3 { font-size: 1.25rem; }
img { display: block; max-width: 100%; height: auto; }
strong { font-weight: 700; }
small, figcaption { font-size: 1rem; }
[data-shell] { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 40px; max-width: 1280px; padding: 24px; margin-inline: auto; align-items: start; }
main { min-width: 0; }
main:focus { outline: none; }
main a { display: inline-flex; align-items: center; min-width: 40px; min-height: 44px; max-width: 100%; padding-block: 8px; }
article > section { padding-block: 40px; border-bottom: 1px solid var(--line); }
article > section:first-of-type { padding-top: 24px; }
article > section > a, section > p > a { display: inline-flex; min-height: 44px; align-items: center; padding-block: 8px; }
article > section > a { font-weight: 650; max-width: 100%; }
[data-page-intro] { padding: 40px 0 32px; border-bottom: 1px solid var(--line); }
[data-page-intro] > p:last-child { color: var(--muted); font-size: 1.125rem; margin-bottom: 0; max-width: 62ch; }
[data-kicker] { font-size: 1rem; line-height: 1.5; font-weight: 600; display: inline-block; padding-left: 16px; border-left: 4px solid var(--blue); margin-bottom: 24px; color: var(--muted); }
[data-hero] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); gap: 32px; align-items: center; padding-block: 24px 32px; }
[data-hero] h1 { font-size: clamp(2.5rem, 4vw, 3.75rem); line-height: 1.04; letter-spacing: -.055em; max-width: 14ch; margin-bottom: 24px; }
[data-hero] > div > p:not([data-kicker]) { color: var(--muted); max-width: 40ch; font-size: 1.125rem; }
[data-actions] { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
[data-actions] a { display: flex; min-height: 48px; align-items: center; padding: 12px 16px; font-size: 1rem; font-weight: 650; width: fit-content; }
[data-actions] a:first-child { color: #000; background: var(--blue); border: 1px solid #000; text-decoration: none; border-radius: 4px; box-shadow: 3px 3px 0 #000; }
[data-actions] a:first-child:hover { background: var(--cyan); }
[data-actions] a:last-child { padding-inline: 0; }
[data-art] { min-width: 0; margin: 0; }
[data-art] > div { overflow: hidden; position: relative; background: #e7f3ff; border: 1px solid #b4c6d5; border-radius: 48px 8px 48px 8px; isolation: isolate; }
[data-art] > div::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 62% 30%, #00ffff66 0, #00ffff00 38%), radial-gradient(circle at 32% 73%, #bf00ff55 0, #bf00ff00 40%), repeating-linear-gradient(135deg, #fff8 0, #fff8 1px, transparent 1px, transparent 24px); }
[data-art] > div::after { content: ""; position: absolute; z-index: -1; width: 56%; aspect-ratio: 1; border: 20px solid #00a1de88; box-shadow: 32px 32px 0 -24px #bf00ff, -48px 96px 0 -64px #00ff00; border-radius: 50%; top: 25%; left: 18%; }
[data-art] img { width: 100%; object-fit: cover; color: transparent; font-size: 0; }
[data-art="0"] img { aspect-ratio: 768 / 896; }
[data-art="1"] { margin-block: 40px 24px; }
[data-art="1"] > div { border-radius: 8px 40px 8px 40px; }
[data-art="1"] img { aspect-ratio: 1024 / 640; }
[data-art] figcaption { margin-top: 16px; color: var(--muted); line-height: 1.5; max-width: 60ch; }
footer { border-top: 2px solid #000; padding: 32px 0 24px; margin-top: 40px; font-size: 1rem; }
footer p { max-width: 64ch; color: var(--muted); margin-bottom: 16px; }
footer > div { display: flex; flex-wrap: wrap; gap: 8px 24px; }
footer a { display: inline-flex; align-items: center; min-height: 48px; padding-block: 8px; }
[data-skip] { position: fixed; top: 8px; left: 8px; z-index: 10; transform: translateY(-160%); background: #000; color: #fff; padding: 12px 16px; min-height: 48px; border-radius: 4px; }
[data-skip]:focus { transform: translateY(0); outline-color: var(--cyan); }
html { scroll-padding-top: 24px; }
@media (max-width: 1040px) {
  [data-shell] { grid-template-columns: 224px minmax(0, 1fr); gap: 24px; padding: 16px; }
  [data-hero] { grid-template-columns: minmax(0, 1fr); }
  [data-hero] h1 { max-width: 19ch; }
  [data-hero] [data-art] { max-width: 448px; }
  [data-hero] [data-art] img { max-height: 384px; }
}
@media (max-width: 720px) {
  [data-shell] { display: flex; flex-direction: column; gap: 0; padding: 0 24px; }
  main { width: 100%; order: 1; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.625rem; }
  [data-page-intro] { padding: 32px 0; }
  [data-hero] { gap: 24px; padding: 32px 0 24px; }
  [data-hero] h1 { font-size: 2.5rem; max-width: 17ch; }
  [data-hero] > div > p:not([data-kicker]) { font-size: 1.0625rem; }
  [data-kicker] { margin-bottom: 24px; }
  [data-actions] { gap: 8px; }
  [data-hero] [data-art] { width: 100%; max-width: none; }
  [data-hero] [data-art] img { max-height: 320px; }
  article > section { padding-block: 32px; }
  footer { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}