/* The same values as apps/web/src/app/globals.css - the app's Pearl
   Monochrome: a white page with the notice on a soft grey card (light), the
   deep blue-black page with a graphite card (dark). The
   inline script in each page's <head> sets `data-theme` before first paint,
   from the visitor's choice on the site or else the device's scheme. */

/* The site's typeface, as in apps/web/src/app/globals.css, served from this site (public/fonts, with their
   licences): Inter for everything.
   Both are variable fonts - one file covers every weight - and `swap` shows
   the fallback for the moment before they arrive rather than no text. */
@font-face {
  font-family: 'Inter';
  /* Cut down to Latin, punctuation, arrows and ₹, and weights 400-900 - all
     the site uses. The full file was 352 KB. */
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --card: #f3f5f7;
  --s2: #ffffff;
  --s3: #e4e4e0;
  --border: #d9d9d5;
  --border-hi: #c9c9c4;
  --t1: #1c1c1d;
  --t2: #2b2c2e;
  --t3: #52524f;
  --t4: #686865;
  --shadow: 0 1px 2px rgba(16, 16, 24, 0.05), 0 6px 16px rgba(16, 16, 24, 0.05), 0 24px 48px rgba(16, 16, 24, 0.07);
  --ring: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0c1014;
  --card: #25292e;
  --s2: #1f1f20;
  --s3: #2d2d2f;
  --border: #39393b;
  --border-hi: #444446;
  --t1: #f4f3f1;
  --t2: #dad7d2;
  --t3: #afada9;
  --t4: #969490;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 48px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0 16px 72px;
  background:
    radial-gradient(40% 380px at 10% 0%, rgba(254, 218, 117, 0.12), transparent 70%),
    radial-gradient(40% 380px at 90% 0%, rgba(150, 47, 191, 0.08), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
  background-color: var(--bg);
  color: var(--t2);
  font: 16px/1.7 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-feature-settings: 'cv11', 'cv02', 'cv03', 'cv04';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wrap { max-width: 800px; margin: 0 auto; }
header { padding: 28px 0 28px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--t1); }
.mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border-hi);
  background: var(--s3) url("/icon.webp") center/cover no-repeat;
}
.logo span { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
/* The notice itself, on a raised card with the ring along its top edge. */
main {
  position: relative;
  overflow: hidden;
  padding: 48px clamp(22px, 6vw, 64px) 56px;
  border-radius: 28px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #fa7e1e, #d62976, #962fbf, transparent);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { main { animation: none; } }
h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.15; margin: 0 0 10px; color: var(--t1); letter-spacing: -0.027em; font-weight: 750; }
h2 {
  font-size: 20px;
  margin: 40px 0 10px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  color: var(--t1);
  letter-spacing: -0.015em;
}
.updated {
  display: inline-block;
  margin: 0 0 20px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--s2);
  border: 1px solid var(--border);
  color: var(--t3);
  font-size: 13px;
}
p, li { color: var(--t2); }
ul { padding-left: 20px; }
li { margin: 6px 0; }
li::marker { color: #d62976; }
strong { color: var(--t1); }
h1, h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }
a { color: var(--t1); text-decoration-color: var(--border-hi); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--t1); }
footer { margin-top: 28px; padding: 0 8px; color: var(--t4); font-size: 14px; }
.note {
  background: var(--s2);
  border: 1px solid var(--border);
  border-left: 3px solid #d62976;
  border-radius: 14px;
  padding: 16px 18px;
}