/* 古代の空 ─ 調査用ツール */

:root{
  --accent:#7fb6e8;
  --gold:#ffd08a;
  --ink:#dce9fb;
  --dim:#8fa8c6;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#03060d;color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Sans",sans-serif;overflow:hidden}

#stage{position:fixed;inset:0}
#sky{display:block;width:100%;height:100%}

/* ── 年の表示。主役なので大きく ────────────────── */
.year{position:fixed;left:38px;top:30px;z-index:10;pointer-events:none}
.year b{display:block;font-size:clamp(38px,5.2vw,76px);font-weight:900;line-height:1;
  letter-spacing:.02em;color:#fff;text-shadow:0 0 26px rgba(120,180,255,.55)}
.year span{display:block;margin-top:6px;font-size:13px;letter-spacing:.3em;color:var(--dim)}
.year.rush b{color:var(--gold);text-shadow:0 0 34px rgba(255,208,138,.7)}

/* ── 右の読み取り値 ──────────────────────────── */
.panel{position:fixed;right:26px;top:28px;z-index:10;width:310px;
  background:linear-gradient(180deg,rgba(6,12,24,.82),rgba(6,12,24,.62));
  border:1px solid rgba(120,165,220,.18);border-radius:16px;padding:16px 18px;
  backdrop-filter:blur(6px)}
.panel h2{margin:0 0 12px;font-size:11px;letter-spacing:.28em;color:var(--dim);font-weight:700}
.row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 0;border-top:1px solid rgba(120,165,220,.1)}
.row:first-of-type{border-top:0}
.row .k{font-size:12px;color:var(--dim);letter-spacing:.06em;flex-shrink:0}
.row .v{font-size:16px;font-weight:700;color:#fff;text-align:right;
  font-variant-numeric:tabular-nums}
.row .v small{display:block;font-size:11px;font-weight:400;color:var(--dim);margin-top:2px}
.row.hit .v{color:var(--gold);text-shadow:0 0 14px rgba(255,208,138,.5)}

/* ── 下の操作 ────────────────────────────────── */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:11;padding:16px 38px 16px;
  background:linear-gradient(180deg,rgba(3,6,13,0),rgba(3,6,13,.86) 40%)}
.marks{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.marks button{border:1px solid rgba(140,185,235,.26);background:rgba(10,18,32,.8);
  color:var(--ink);border-radius:999px;padding:8px 15px;font-size:12.5px;font-weight:700;
  cursor:pointer;transition:background .2s,border-color .2s,color .2s;letter-spacing:.04em}
.marks button:hover{background:rgba(30,52,86,.95);border-color:var(--accent)}
.marks button.on{background:var(--accent);color:#05101c;border-color:transparent}

.slider{display:flex;align-items:center;gap:16px}
.slider input{flex:1;-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;
  background:linear-gradient(90deg,#1f3757,#3a6ea8);outline:none}
.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  border-radius:50%;background:#eaf4ff;cursor:pointer;
  box-shadow:0 0 12px var(--accent),0 0 26px rgba(127,182,232,.5)}
.slider input::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;
  background:#eaf4ff;cursor:pointer;box-shadow:0 0 12px var(--accent)}
.slider .ends{font-size:11px;color:var(--dim);letter-spacing:.1em;white-space:nowrap}

/* ── 見る向き ────────────────────────────────── */
.dirs{position:fixed;left:38px;bottom:126px;z-index:10;display:flex;gap:7px}
.dirs button{width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(140,185,235,.26);background:rgba(10,18,32,.8);
  color:var(--ink);font-size:14px;font-weight:800;cursor:pointer;transition:.2s}
.dirs button:hover{border-color:var(--accent);background:rgba(30,52,86,.95)}
.dirs button.on{background:var(--accent);color:#05101c;border-color:transparent}

/* ── 注意書き。時刻について嘘をつかないための一行 ── */
.caveat{position:fixed;left:38px;top:150px;z-index:10;max-width:330px;
  font-size:11.5px;line-height:1.7;color:rgba(143,168,198,.72)}
.caveat b{color:var(--gold);font-weight:700}

@media (max-width:900px){
  /* スマホ。縦が足りないので、読み取りは横1本の帯にして下へ寄せる。
     右の縦長パネルのままだと縦434pxを占め、空が縦129pxしか残らず
     「何も見えない」状態になった（実機で確認済み）。 */
  .year{left:16px;top:14px}
  .year b{font-size:30px}
  .year span{font-size:10px;letter-spacing:.18em;margin-top:3px}
  .caveat{display:none}

  /* 方角ボタン。共通ヘッダーのロゴが画面上部の中央にあり、
     top:16px に置くとロゴと重なって押せなくなった（実機で確認）。
     ヘッダーの高さ60pxより下へ逃がす。 */
  /* ボタンの列は出さない。かわりにロゴの左右へセレクトを置く。
     ボタンのままだと観測地4つ＋方角4つで上半分が埋まり、
     空が見えなくなった（実機で確認） */
  .sites,.dirs{display:none}
  .mini{display:flex}

  /* 年もヘッダーの下へ。ロゴは中央なので左右は当たらないが、
     上端に並ぶと窮屈に見える */
  .year{top:66px}

  /* 読み取り。横スクロールする帯にして、6項目ぜんぶ残す */
  /* 操作盤のすぐ上に貼りつける。高さはJSが実測して --dockH に入れる。
     決め打ちにしていたときは27pxの隙間が空いた */
  .panel{left:0;right:0;top:auto;bottom:var(--dockH,88px);width:auto;
    border-radius:0;border-left:0;border-right:0;border-bottom:0;
    padding:8px 14px;display:flex;gap:18px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .panel::-webkit-scrollbar{display:none}
  .panel h2{display:none}
  .row{display:block;border-top:0;padding:0;flex:0 0 auto}
  .row .k{display:block;font-size:9.5px;letter-spacing:.04em}
  .row .v{font-size:14px;text-align:left;margin-top:2px}
  .row .v small{font-size:9px;margin-top:0}

  /* 節目ボタンは折り返さず横スクロール。折り返すと3段になって空を潰す */
  .dock{padding:10px 0 12px}
  .marks{flex-wrap:nowrap;overflow-x:auto;margin:0 0 8px;padding:0 14px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .marks::-webkit-scrollbar{display:none}
  .marks button{flex:0 0 auto;font-size:11.5px;padding:7px 12px}
  .slider{padding:0 14px;gap:10px}
  .slider .ends{font-size:9.5px}
}

/* 論文の図を撮るとき（?clean=1）。操作まわりを画から外す */
body.is-clean .dock,
body.is-clean .dirs,
body.is-clean .caveat,
body.is-clean .sp-key{display:none}

/* 共通ヘッダーとの噛み合わせ。
   このページは1画面固定でスクロールしないので、押し下げ用の隙間は要らない。
   置いたままだと画面の下に70pxぶんの余白が生まれる */
.site-header-spacer{display:none}
body.is-clean .site-header{display:none}

/* ── 観測地 ──────────────────────────────────── */
.sites{position:fixed;left:38px;bottom:196px;z-index:10;display:flex;gap:6px}
.sites button{border:1px solid rgba(140,185,235,.24);background:rgba(10,18,32,.78);
  color:var(--dim);border-radius:999px;padding:6px 12px;font-size:11.5px;font-weight:700;
  cursor:pointer;transition:.2s;letter-spacing:.04em}
.sites button:hover{border-color:var(--accent);color:var(--ink)}
.sites button.on{background:var(--accent);color:#05101c;border-color:transparent}
body.is-clean .sites{display:none}

/* ── スマホ用のセレクト（ロゴの左右）─────────── */
.mini{position:fixed;left:0;right:0;top:13px;z-index:10;
  display:none;justify-content:space-between;padding:0 10px;pointer-events:none}
.mini select{pointer-events:auto;-webkit-appearance:none;appearance:none;
  border:1px solid rgba(140,185,235,.28);background:rgba(10,18,32,.85);
  color:var(--ink);border-radius:999px;padding:6px 22px 6px 12px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(160,195,235,.8) 50%),
    linear-gradient(135deg,rgba(160,195,235,.8) 50%,transparent 50%);
  background-position:calc(100% - 13px) 13px,calc(100% - 9px) 13px;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.mini select:focus{outline:none;border-color:var(--accent)}
#mDir{padding-right:24px}
body.is-clean .mini{display:none}

/* スマホの打ち消しは、いちばん最後に置くこと。
   .sites / .mini の基本の指定をこのファイルの後ろに足したため、
   前のメディアクエリで display を消しても勝てなくなっていた（実機で確認） */
@media (max-width:900px){
  .sites,.dirs{display:none}
  .mini{display:flex}
}

/* 共通ヘッダーは幅いっぱいの帯（高さ60px・z-index 10000）で、
   中央のロゴ以外の場所でもタップを受け取ってしまう。
   そのせいでロゴの左右に置いたセレクトが押せなかった（実機で確認）。
   帯そのものはタップを素通しにして、ロゴだけ受け取るようにする。
   共通CSSは他のシステムも使うので、こちら側で打ち消す。 */
.site-header{pointer-events:none}
.site-home{pointer-events:auto}
.mini{z-index:10001}

/* スマホは横幅がせまく、左寄せだと右側が間のびして落ち着かない。
   年も読み取りも中央に揃える。ロゴは上の帯（top 16〜44px）にあり、
   年は66pxから始まるので、中央に置いてもぶつからない。 */
@media (max-width:900px){
  .year{left:0;right:0;text-align:center}
  .row{text-align:center}
  .row .v{text-align:center}
  .row .k{display:block;text-align:center}
  /* 節目ボタンは横スクロール。入りきるときだけ中央に寄せる */
  .marks{justify-content:safe center}
  .slider .ends{font-size:9px}
}

/* ══ ボタンの手ごたえ ══════════════════════════════
   押しても画がすぐ動かない場面があるので、押した瞬間に
   その場で反応を返す。どのボタンを押したかも目で追えるようにする */
.marks button,.sites button,.dirs button{position:relative;overflow:visible}
.marks button:active,.sites button:active,.dirs button:active{transform:scale(.94)}

/* 押した場所から広がる光の輪 */
.marks button::after,.sites button::after,.dirs button::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid var(--accent);opacity:0;transform:scale(1)}
.marks button.fired::after,.sites button.fired::after,.dirs button.fired::after{
  animation:btn-ring .7s cubic-bezier(.2,.9,.3,1)}
@keyframes btn-ring{
  0%{opacity:.9;transform:scale(1);box-shadow:0 0 0 0 rgba(127,182,232,.45)}
  100%{opacity:0;transform:scale(1.5);box-shadow:0 0 0 14px rgba(127,182,232,0)}
}

/* 年が流れているあいだ。数字が息をして、目盛りも光る */
.year b{transition:text-shadow .4s ease,transform .4s ease}
body.is-moving .year b{
  transform:scale(1.04);
  text-shadow:0 0 46px rgba(140,196,255,.85),0 0 90px rgba(90,150,240,.5)}
body.is-moving .slider input::-webkit-slider-thumb{
  box-shadow:0 0 20px var(--accent),0 0 46px rgba(127,182,232,.8)}
body.is-moving .panel{border-color:rgba(127,182,232,.45)}

/* ══ 説明の挿絵（sky_figure.js）══════════════════════
   空の上に重ねる説明図。3Dとは別の層なので描画の負担は増えない。
   模式図であって、実際の星の位置ではない。数値の根拠にはしない。 */
.sky-fig{position:fixed;inset:0;z-index:57;display:flex;align-items:center;
  justify-content:center;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 70% 65% at 50% 50%,
    rgba(2,5,12,.90) 0%, rgba(2,5,12,.72) 60%, rgba(2,5,12,.35) 100%);
  transition:opacity .65s ease}
.sky-fig.on{opacity:1}
/* 中身は暗幕とは別にフェードする。2枚重ねて入れ替えるので、
   絶対配置にして場所を取り合わないようにする（片方だけ動くと画が跳ねる） */
.sky-fig .fg-in{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;opacity:0;transition:opacity .42s ease}
.sky-fig .fg-in.on{opacity:1}
.fg-svg{width:min(92vw,1100px);height:auto;overflow:visible}

/* 文字 */
.fg-t{fill:#fff;font-size:26px;font-weight:800;letter-spacing:.08em;
  paint-order:stroke;text-shadow:0 0 18px rgba(140,200,255,.7)}
.fg-lb{fill:#cfe3ff;font-size:21px;font-weight:700;letter-spacing:.08em;opacity:.9}
.fg-s{fill:#9db8d8;font-size:19px;letter-spacing:.14em}

/* ① 日周運動 */
/* 太さは1本ずつ属性で指定するので、ここでは決めない */
.fg-trail{fill:none;stroke:#a8d2ff;stroke-linecap:round;
  opacity:0;transform-origin:0 0;
  filter:drop-shadow(0 0 6px rgba(140,200,255,.55));
  animation:fg-draw .9s ease forwards var(--d), fg-turn 26s linear infinite var(--d)}
@keyframes fg-draw{to{opacity:var(--o)}}
@keyframes fg-turn{to{transform:rotate(360deg)}}
.fg-spin{transform-origin:0 0}

/* 中心の点 */
.fg-pole{fill:#fff;filter:drop-shadow(0 0 12px #8fc4ff)}
.fg-pulse{fill:none;stroke:#8fc4ff;stroke-width:2;opacity:.9;
  transform-origin:0 0;animation:fg-pulse 2.6s ease-out infinite}
@keyframes fg-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.2);opacity:0}}

/* ② 星をつなぐ図 */
.fg-line{fill:none;stroke:#6fa8e8;stroke-width:2.6;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:fg-stroke 1.6s ease forwards .2s}
@keyframes fg-stroke{to{stroke-dashoffset:0}}
.fg-star{fill:#fff;opacity:0;filter:drop-shadow(0 0 8px #9fd0ff);
  animation:fg-pop .5s ease forwards var(--d)}
@keyframes fg-pop{from{opacity:0}to{opacity:1}}
.fg-arrow{stroke:#ffd08a;stroke-width:3;stroke-linecap:round;stroke-dasharray:10 12;
  opacity:0;filter:drop-shadow(0 0 10px rgba(255,208,138,.8))}
.fg-arrow.a1{animation:fg-arrow 1.5s ease forwards 1.6s, fg-flow 1.4s linear infinite 1.6s}
.fg-arrow.a2{animation:fg-arrow 1.5s ease forwards 2.9s, fg-flow 1.4s linear infinite 2.9s}
@keyframes fg-arrow{to{opacity:.95}}
@keyframes fg-flow{to{stroke-dashoffset:-44}}

/* ③ こまの首ふり */
.fg-cone{fill:none;stroke:rgba(255,208,138,.5);stroke-width:2.4;stroke-dasharray:8 10}
.fg-rot{fill:none;stroke:rgba(255,208,138,.85);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:520;stroke-dashoffset:520;
  animation:fg-stroke2 2.4s ease forwards .6s}
@keyframes fg-stroke2{to{stroke-dashoffset:0}}
.fg-wob{transform-origin:0 140px;animation:fg-wobble 9s ease-in-out infinite}
@keyframes fg-wobble{
  0%,100%{transform:rotate(-11deg)}
  25%{transform:rotate(0deg) translateX(6px)}
  50%{transform:rotate(11deg)}
  75%{transform:rotate(0deg) translateX(-6px)}
}
.fg-axis{stroke:#eaf4ff;stroke-width:5;stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(150,205,255,.8))}
.fg-body{fill:rgba(110,165,230,.28);stroke:#8fc4ff;stroke-width:2.6}
.fg-body2{fill:rgba(70,120,190,.34);stroke:#8fc4ff;stroke-width:2.6}
.fg-tip{fill:#fff;filter:drop-shadow(0 0 14px #ffd08a)}

/* 台本モード中の写り込み防止は不要（挿絵は写すためのもの）。
   ただし図の撮影用モードでは出さない */
body.is-clean .sky-fig{display:none}

/* 図の中心が原点でないとき用（北極星が原点からずれている図） */
.fg-pulse2{fill:none;stroke:#8fc4ff;stroke-width:2;opacity:.9;
  transform-box:fill-box;transform-origin:center;
  animation:fg-pulse 2.6s ease-out infinite}

/* ── 挿絵④ いただいたコメント ────────────────────
   番組の出発点。原文のまま出す（要約すると、都合よく変えたように見える） */
.fc{width:min(88vw,1080px);border-radius:20px;padding:34px 40px;
  background:linear-gradient(180deg,rgba(18,32,54,.86),rgba(10,20,36,.78));
  border:1px solid rgba(120,165,220,.26);
  box-shadow:0 24px 70px rgba(0,0,0,.5)}
.fc-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;
  border-bottom:1px solid rgba(120,165,220,.16)}
.fc-av{width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-style:normal;
  font-size:22px;font-weight:900;color:#05101c;
  background:linear-gradient(140deg,#a8d2ff,#6fa8e8)}
.fc-name{font-size:18px;font-weight:800;color:#dfeaf9;letter-spacing:.04em}
.fc-body{padding-top:20px}
.fc-l{margin:0;font-size:clamp(15px,1.9vw,23px);line-height:1.85;color:#e8f1fd;
  opacity:0;transform:translateY(8px);
  animation:fc-in .7s cubic-bezier(.2,.9,.3,1) forwards var(--d)}
.fc-br{height:.9em}
@keyframes fc-in{to{opacity:1;transform:none}}
@media (min-width:901px){
  .fc{padding:44px 56px}
  .fc-av{width:56px;height:56px;font-size:28px}
  .fc-name{font-size:22px}
}

/* ── 挿絵⑤ 歳差運動（3D）──────────────────────── */
.fe{display:flex;flex-direction:column;align-items:center;gap:14px;
  width:min(92vw,1100px)}
.fe-head{text-align:center}
.fe-head b{display:block;font-size:clamp(24px,3.6vw,44px);font-weight:900;color:#fff;
  letter-spacing:.14em;text-shadow:0 0 26px rgba(140,200,255,.6)}
.fe-head i{display:block;margin-top:4px;font-style:normal;font-size:12px;
  letter-spacing:.34em;color:#8fa8c6}
.fe-stage{width:100%;height:min(56vh,520px);position:relative}
.fe-stage canvas.fg-3d{display:block;width:100%;height:100%}
.fe-legend{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;
  font-size:13px;color:#9db8d8;letter-spacing:.06em}
.fe-legend span{display:flex;align-items:center;gap:7px}
.fe-legend i{width:16px;height:3px;border-radius:2px;display:inline-block}
.fe-legend .k-axis{background:#eaf4ff}
.fe-legend .k-ring{background:#ffd08a}
.fe-legend .k-plane{background:rgba(111,168,232,.6)}
.fe-note{font-size:clamp(13px,1.7vw,18px);color:#cfe0f5;letter-spacing:.06em;
  text-align:center}
.fe-note b{color:#fff;font-weight:800}

/* ── 挿絵⑥ 500年で変わったこと（文字）──────────── */
.fh{width:min(90vw,1000px)}
.fh-head{text-align:center;margin-bottom:26px}
.fh-head b{display:block;font-size:clamp(22px,3.2vw,38px);font-weight:900;color:#fff;
  letter-spacing:.1em;text-shadow:0 0 26px rgba(140,200,255,.5)}
.fh-head i{display:block;margin-top:8px;font-style:normal;font-size:12.5px;
  letter-spacing:.16em;color:#8fa8c6}
.fh-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.fh-r{display:flex;align-items:center;gap:16px;padding:14px 20px;border-radius:14px;
  background:rgba(18,32,54,.55);border:1px solid rgba(120,165,220,.2);
  opacity:0;transform:translateX(-14px);
  animation:fh-in .65s cubic-bezier(.2,.9,.3,1) forwards var(--d)}
@keyframes fh-in{to{opacity:1;transform:none}}
.fh-k{flex-shrink:0;width:38px;height:38px;border-radius:50%;font-style:normal;
  display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:900}
.fh-k.to-mid{background:rgba(255,208,138,.16);color:#ffd08a}
.fh-k.to-set{background:rgba(120,160,220,.16);color:#8fb8e8}
.fh-k.to-keep{background:rgba(140,230,190,.16);color:#7fe0b8}
.fh-r b{display:block;font-size:clamp(15px,1.9vw,21px);color:#eaf3ff;font-weight:700}
.fh-r em{display:block;margin-top:3px;font-style:normal;font-size:13px;color:#93a9c4}

.fh-more{margin-top:26px;padding-top:22px;border-top:1px solid rgba(120,165,220,.18);
  text-align:center;opacity:0;animation:fh-in .7s ease forwards var(--d)}
.fh-more > b{display:block;font-size:13px;letter-spacing:.24em;color:var(--accent)}
.fh-cmp{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:20px;
  flex-wrap:wrap}
.fh-cmp span{display:block;padding:12px 22px;border-radius:12px;
  background:rgba(18,32,54,.55);border:1px solid rgba(120,165,220,.2);
  font-size:clamp(15px,1.9vw,20px);font-weight:700;color:#eaf3ff}
.fh-cmp span i{display:block;font-style:normal;font-size:11px;letter-spacing:.2em;
  color:#8fa8c6;margin-bottom:4px}
.fh-cmp span em{display:block;margin-top:4px;font-style:normal;font-size:13px;
  color:#93a9c4;font-weight:400}
.fh-cmp span.is-now{border-color:rgba(255,208,138,.45)}
.fh-cmp span.is-now em{color:#ffd08a}
.fh-cmp u{text-decoration:none;font-size:22px;color:var(--accent)}
.fh-more p{margin:16px 0 0;font-size:clamp(14px,1.8vw,19px);color:#cfe0f5;letter-spacing:.06em}

/* ── 挿絵⑦ 元データと検証 ─────────────────────── */
.fs{width:min(90vw,980px)}
.fs-head{text-align:center;margin-bottom:26px}
.fs-head b{font-size:clamp(20px,2.9vw,34px);font-weight:900;color:#fff;letter-spacing:.08em;
  text-shadow:0 0 24px rgba(140,200,255,.5)}
.fs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.fs-r{padding:16px 22px;border-radius:14px;background:rgba(18,32,54,.55);
  border:1px solid rgba(120,165,220,.2);
  opacity:0;transform:translateY(10px);
  animation:fh-in .6s cubic-bezier(.2,.9,.3,1) forwards var(--d)}
.fs-r i{display:inline-block;font-style:normal;font-size:11px;letter-spacing:.2em;
  color:var(--accent);border:1px solid rgba(127,182,232,.35);border-radius:999px;
  padding:3px 11px;margin-bottom:9px}
.fs-r b{display:block;font-size:clamp(16px,2.1vw,23px);color:#fff;font-weight:800}
.fs-r em{display:block;margin-top:5px;font-style:normal;font-size:13px;color:#93a9c4;
  line-height:1.7}
.fs-note{margin:22px 0 0;text-align:center;font-size:clamp(13px,1.7vw,17px);
  color:#cfe0f5;letter-spacing:.06em;opacity:0;
  animation:fh-in .7s ease forwards var(--d)}
.fs-note u{display:inline-block;margin-top:6px;text-decoration:none;font-size:.88em;
  color:#93a9c4}