/*
  Shared tokens and base styles for the demo windows (demo-*.html). Each demo is a small
  same-origin page framed by the homepage; site.js keeps its theme and language in step with
  the page around it. The colour tokens match site/assets/home.css; keep the two in sync.
*/
:root {
  --page: #f5f5f7;
  --tile: #ffffff;
  --ink: #1d1d1f;
  --ink2: #424245;
  --ink3: #6e6e73;
  --line: #d2d2d7;
  --hair: #e8e8ed;
  --chip: #ececf0;
  --blue: #0066cc;
  --blue-soft: #e8f0fa;
  --blue-ink: #0b4f99;
  --green: #1d7a43;
  --shadow: 0 30px 60px -32px rgba(0, 0, 0, .35);
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --page: #000000;
  --tile: #1c1c1e;
  --ink: #f5f5f7;
  --ink2: #d1d1d6;
  --ink3: #a1a1a6;
  --line: #3a3a3c;
  --hair: #2c2c2e;
  --chip: #2c2c2e;
  --blue: #2997ff;
  --blue-soft: #10263f;
  --blue-ink: #8cc4ff;
  --green: #30d158;
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
  /* Matches the homepage's scheme, so Chrome keeps the frame's canvas transparent. */
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Each demo sets its own html font-size for its window. */
/* Transparent, so the homepage tile shows around the window's rounded corners. */
html, body { height: 100%; margin: 0; background: transparent; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  padding: 2px;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
:lang(zh) h1, :lang(zh) h2 { letter-spacing: 0; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.pill {
  border: 0; border-radius: 999px; padding: .6rem 1.2rem; background: var(--ink); color: var(--page);
  font: inherit; font-size: .95rem; font-weight: 500; cursor: pointer;
  transition: transform .3s var(--ease), opacity .2s;
}
.pill:hover { opacity: .88; }
.pill:active { transform: scale(.96); }
.pill:disabled { opacity: .45; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
}