/* Izayoi の画面と同じ調子で。黒地・細い字・余白。外部フォントは読まない。
   JS は moon.js（最初の画面の月）と連絡先の組み立てだけ。無くても説明書は読める。 */
:root {
  --ink: #dbdbdb;      /* 本文。アプリの Color(white: 0.86) */
  --ink-dim: #737373;  /* 補足。Color(white: 0.45) */
  --ink-faint: #4f4f4f;
  --rule: #1f1f1f;
  --link: #9db4c8;
}

* { box-sizing: border-box; }

html {
  background: #000;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #000;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
}

main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

/* ---- 最初の画面（TodayView と同じ構図） -------------------------------------
   アプリの Layout: 月の直径 = 短辺 × 0.64（iPhone 13 mini の 240 / 375）、月と日付のあいだ = 64pt を
   同じ倍率で伸ばす。文字は伸ばさない（日付 17pt、light、white 0.86）。
   月・あいだ・日付のまとまりを上下の余白が等分する = 縦の中央。
   ただしアプリと違い、下端にストアの行と署名の帯（absolute）がある。中央寄せはこの帯を知らないので、
   横長で背の低い画面（高さ約 860px 未満、1024×768 など）では月が高さいっぱいまで育ち、
   日付がストアの行に重なった（2026-10-11 sena が Chrome で発見）。
   → まとまりの上下の余白が帯（+ 日付との間 24px）以上になるよう、直径に高さからの上限を掛ける。
   直径 d のまとまりの高さ = d × 304/240 + 日付の行 20.4px（17px × 1.2）。
   縦長の画面（iPhone など）では上限より 0.64 倍の方が小さいので、アプリと同じ構図のまま。 */
.today {
  --vh: 100vh;
  --band: calc(max(16px, env(safe-area-inset-bottom)) + 56px + 24px);
  --short: min(100vw, var(--vh));
  --diameter: min(calc(var(--short) * 0.64),
                  calc((var(--vh) - 2 * var(--band) - 20.4px) * 240 / 304));
  position: relative;
  height: var(--vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
}
@supports (height: 100svh) {
  .today { --vh: 100svh; }
}
.today[hidden] { display: none; }

/* 暗部は輪郭だけ（MoonDisc: strokeBorder 1pt、white 10%）。輝面は white 0.94。 */
.disc {
  width: var(--diameter);
  height: var(--diameter);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.disc svg { display: block; width: 100%; height: 100%; }
.disc .lit { fill: #f0f0f0; }

.today .date {
  margin: calc(var(--diameter) * 64 / 240) 0 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.2;
  color: #dbdbdb;
}

/* アプリの About と同じ位置・同じ控えめさ（11pt、white 0.3）。 */
.today .signature {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(16px, env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #4d4d4d;
}

header { margin-bottom: 56px; }

h1 {
  font-size: 22px;
  font-weight: 200;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}

.tagline {
  color: var(--ink-dim);
  font-size: 14px;
  margin: 0;
}

h2 {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 56px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

p { margin: 0 0 16px; }

a { color: var(--link); text-decoration: none; border-bottom: 1px solid #2f3d47; }
a:hover { border-bottom-color: var(--link); }

dl { margin: 0; }

dt {
  margin-top: 24px;
  color: var(--ink);
  font-size: 15px;
}
dt:first-of-type { margin-top: 0; }

dd {
  margin: 4px 0 0;
  color: var(--ink-dim);
  font-size: 14px;
}

.note {
  color: var(--ink-faint);
  font-size: 13px;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  color: var(--ink-dim);
}

.credit {
  color: var(--ink-dim);
  font-size: 14px;
}

footer {
  margin-top: 72px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: 13px;
}

footer a { color: var(--ink-dim); border-bottom-color: var(--rule); }

@media (max-width: 480px) {
  main { padding: 40px 20px 72px; }
}

/* ストアの行。Release 前（2026-10-08〜）は「Coming soon to the App Store」の文字だけ、
   Release 日に release-day ブランチで /store へのリンクに差し替わる。
   最初の画面が出ているときはその下端、署名の上に重ねる。
   最初の画面が hidden（JS 無し）のときは普通の段落としてページの先頭に出る。 */
.store { margin: 24px 0 0; text-align: center; font-size: 13px; letter-spacing: 0.04em; color: #9a9a9a; }
.store a { color: #9a9a9a; border-bottom-color: #3a3a3a; }
.store a:hover { color: #dbdbdb; border-bottom-color: #9a9a9a; }
.today:not([hidden]) + .store {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100vh - max(16px, env(safe-area-inset-bottom)) - 56px);
  margin: 0;
}
@supports (height: 100svh) {
  .today:not([hidden]) + .store { top: calc(100svh - max(16px, env(safe-area-inset-bottom)) - 56px); }
}