@layer reset, legal;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: dark; }
  body, h1, h2, p, ul { margin: 0; }
}

@layer legal {
  body {
    min-width: 320px;
    min-height: 100vh;
    padding: 24px 12px;
    background:
      radial-gradient(55rem 38rem at 4% -8%, oklch(57% 0.09 235 / 0.23), transparent 62%),
      radial-gradient(42rem 32rem at 96% 18%, oklch(69% 0.075 72 / 0.1), transparent 60%),
      var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.82;
    -webkit-font-smoothing: antialiased;
  }

  .container {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: clamp(28px, 7vw, 68px) clamp(22px, 7vw, 70px) clamp(48px, 9vw, 88px);
    border: 1px solid var(--line);
    border-top-color: oklch(94% 0.012 235 / 0.28);
    border-radius: clamp(24px, 4vw, 38px);
    background: linear-gradient(145deg, oklch(92% 0.02 235 / 0.09), transparent 28%), var(--surface);
    box-shadow: 0 34px 90px oklch(5% 0.02 245 / 0.42), inset 0 1px 0 oklch(98% 0.01 235 / 0.09);
    backdrop-filter: blur(30px) saturate(135%);
    -webkit-backdrop-filter: blur(30px) saturate(135%);
  }

  .back {
    min-height: 44px;
    margin-bottom: 34px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-soft);
    background: oklch(34% 0.025 244 / 0.42);
    font-size: 0.82rem;
    text-decoration: none;
  }

  h1 { margin-bottom: 8px; color: var(--text); font-size: clamp(2.2rem, 7vw, 4.3rem); font-weight: 680; line-height: 1.06; letter-spacing: -0.055em; }
  .updated { margin-bottom: 46px; color: var(--text-muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
  h2 { margin-top: 46px; margin-bottom: 12px; color: var(--text); font-size: 1.12rem; font-weight: 650; letter-spacing: -0.02em; }
  p, ul { margin-bottom: 18px; color: var(--text-soft); font-size: 1rem; font-weight: 400; }
  ul { padding-left: 1.25rem; }
  li { margin-bottom: 8px; padding-left: 3px; }
  li::marker { color: var(--accent); }
  strong { color: var(--text); font-weight: 650; }
  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
  footer { margin-top: 54px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 0.82rem; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
  ::selection { color: oklch(16% 0.02 245); background: var(--accent); }

  @media (min-width: 640px) { body { padding-block: 54px; } }
  @media (prefers-reduced-transparency: reduce) { .container { background: oklch(20% 0.025 244); backdrop-filter: none; -webkit-backdrop-filter: none; } }
}