/* 中継サーバーの案内ページを整える。
   index.html 専用で、端末にある標準のフォントだけを使う。
   小さな画面でも案内の住所がはみ出さないようにする。 */

/* 画面の基準を決める（セレクター）: 余白を含めて幅を計算し、暗い背景で読みやすくする。 */
* { box-sizing: border-box; }
body { margin: 0; background: #101422; color: #f3f5ff; font: 16px/1.8 system-ui, sans-serif; }
main { max-width: 680px; margin: 8vh auto; padding: 28px; }
h1 { margin: 8px 0 26px; font-size: clamp(30px, 7vw, 46px); }
h1 span { display: block; font-size: 16px; font-weight: 500; color: #c4cce2; }
.eyebrow { color: #ff9bc5; font-size: 13px; letter-spacing: .12em; }
/* 案内をまとめる（セレクター）: 開発中の住所と、参加者向けの説明を読み分けやすくする。 */
aside { padding: 20px; margin: 30px 0; background: #1c2236; border: 1px solid #343d5c; border-radius: 16px; }
h2 { margin-top: 0; font-size: 18px; }
code { overflow-wrap: anywhere; color: #ffd4e7; }
/* 補足を控えめに見せる（セレクター）: 本文と違う色と大きさで、HTTPS の条件と作者を読めるようにする。 */
.note, footer { color: #bac3da; font-size: 13px; }
footer { margin-top: 38px; }