/* hanzi.mitomeru.com: one static page, in Copybook (the app's quiet style), light or dark with the
   system. The values are Copybook's own tokens (packages/app-ui/src/index.css), declared once here
   as the same role names; rules below ask for roles, never a colour. */

@font-face { font-family: 'Source Sans 3'; src: url('/fonts/SourceSans3.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Source Code Pro'; src: url('/fonts/SourceCodePro.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }

:root {
  color-scheme: light dark;
  --paper: #f8faf9;
  --card: #ffffff;
  --ink: #14181a;
  --ink2: #5b6467;
  --ink3: #6b7578;
  --rule: #e3e8e6;
  --font-ui: 'Source Sans 3', system-ui, sans-serif;
  --font-mono: 'Source Code Pro', ui-monospace, monospace;
  --font-cjk: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --r3: 6px;
  --r4: 10px;
  --hairline: 1px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #101416;
    --card: #171d1f;
    --ink: #e9edec;
    --ink2: #a0abac;
    --ink3: #7b8789;
    --rule: #262f31;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font-ui);
  display: grid;
  place-items: center;
  padding: 48px 16px;
}
main {
  width: 100%;
  max-width: 34rem;
  background: var(--card);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--r4);
  padding: clamp(24px, 6vw, 44px);
}
.mark {
  display: flex;
  gap: 6px;
  margin: 0 0 28px;
}
.mark span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font: 500 30px/1 var(--font-cjk);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--r3);
  background:
    linear-gradient(var(--rule), var(--rule)) center / var(--hairline) 100% no-repeat,
    linear-gradient(var(--rule), var(--rule)) center / 100% var(--hairline) no-repeat;
}
.kicker {
  margin: 0 0 6px;
  font: 500 0.75rem/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink3);
}
h1 { margin: 0 0 14px; font-size: 1.75rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 14px; color: var(--ink2); }
p.lead { color: var(--ink); }
ul.where { list-style: none; margin: 22px 0 0; padding: 0; border-top: var(--hairline) solid var(--rule); }
ul.where li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: var(--hairline) solid var(--rule);
  color: var(--ink2);
}
ul.where b { color: var(--ink); font-weight: 600; }
.button {
  display: inline-block;
  margin: 8px 0 4px;
  padding: 10px 18px;
  border-radius: var(--r3);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.button:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
a { color: var(--ink); text-underline-offset: 3px; }
footer { margin-top: 28px; font: 400 0.8125rem/1.5 var(--font-mono); color: var(--ink3); }
footer a { color: var(--ink3); }

/* The Hanzi extension, when it is installed, marks the page while it opens the link in the Hanzi
   window (apps/extension/src/content/index.ts). Without it the page explains what to do. */
.opening { display: none; }
html[data-hanzi="opening"] .opening { display: block; }
html[data-hanzi="opening"] .waiting { display: none; }
[data-app-link]:not([href]) { display: none; }
/* A shared episode's feed address (link.html): long, so it breaks anywhere. */
.feed { font-family: var(--font-mono); font-size: .9em; overflow-wrap: anywhere; }

@media (max-width: 420px) {
  ul.where li { grid-template-columns: 1fr; gap: 2px; }
  .mark span { width: 44px; height: 44px; font-size: 26px; }
}
.after { margin-top: 22px; }