/* 海 (水面より下)。テーマ切替の影響を受けない専用の見た目。本体の海系テーマ tidal (web/themes/tidal) を基にした:
   深海色の地 (#060B2A 系) に、白い芯のネオン管 (水色 #3FF5FF)。ピンク (#FF4FD8) は決定ボタンの熱だけ。角はすべて丸い。
   位置は水深 (m)。--m に水深を書くと、top が calc(var(--m) * var(--ppm)) になる (--ppm = 1m あたりの px。site.css の :root)。 */
.sea { color: #E8F7FF; font-family: "M PLUS Rounded 1c", "Yu Gothic UI", sans-serif;
  background: linear-gradient(180deg, #0b4a66 0px, #073246 160px, #04192a calc(200 * var(--ppm)), #020e1a calc(500 * var(--ppm)), #010810 calc(1000 * var(--ppm)), #000409 calc(1600 * var(--ppm)), #000204 100%); }
.sea-body { position: relative; height: calc(2000 * var(--ppm) + 120vh); overflow: hidden; }
.deep-canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.sea-body > * { position: absolute; z-index: 2; }

/* 水深の目盛り (左端。100m ごと) */
.deep-ticks { inset: 0; z-index: 1; pointer-events: none; }
.deep-tick { position: absolute; left: 0; top: calc(var(--m) * var(--ppm)); display: flex; align-items: center; gap: 8px; font: 500 11px "IBM Plex Mono", monospace; letter-spacing: .12em; color: rgba(141,163,201,.75); }
.deep-tick::before { content: ""; width: 26px; height: 1px; background: rgba(141,163,201,.5); }
.deep-tick.is-big { color: rgba(63,245,255,.8); } .deep-tick.is-big::before { width: 42px; background: rgba(63,245,255,.6); }

/* 200m: 「さあ行こう インターネットの深海へ」。ネオン管の文字 */
.deep-call { left: 0; right: 0; top: calc(var(--m) * var(--ppm)); transform: translateY(-50%); text-align: center; padding: 0 16px; }
.deep-call small { display: block; margin-bottom: 14px; font: 500 12px "IBM Plex Mono", monospace; letter-spacing: .3em; color: #3FF5FF; }
.deep-call h2 { margin: 0; font: 800 clamp(34px, 6vw, 72px)/1.15 "M PLUS Rounded 1c", sans-serif; letter-spacing: .02em; color: #F4FDFF;
  text-shadow: 0 0 1px #F4FDFF, 0 0 4px #3FF5FF, 0 0 12px #3FF5FF, 0 0 28px rgba(63,245,255,.6), 0 0 60px rgba(63,245,255,.35); animation: deep-hum 4s ease-in-out infinite; }
.deep-call p { margin: 22px 0 0; font: 700 13px "M PLUS Rounded 1c", sans-serif; letter-spacing: .1em; color: #8DA3C9; animation: deep-bob 2.4s ease-in-out infinite; }
@keyframes deep-hum { 50% { opacity: .88; } }
@keyframes deep-bob { 50% { transform: translateY(5px); } }

/* 海底に沈んだ機能紹介の札。ネオン管の枠、水越しのにじみ、少し傾いて沈んでいる */
.df { top: calc(var(--m) * var(--ppm)); left: 7vw; width: min(640px, 86vw); box-sizing: border-box; padding: 22px 26px 24px; transform: rotate(-1.2deg);
  background: rgba(11,26,82,.58); border: 2px solid #3FF5FF; border-radius: 28px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 4px #3FF5FF, 0 0 22px rgba(63,245,255,.35), inset 0 0 18px rgba(63,245,255,.1); transition: box-shadow .3s, transform .3s; }
.df.is-r { left: auto; right: 7vw; transform: rotate(1.1deg); }
.df:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 0 6px #3FF5FF, 0 0 34px rgba(63,245,255,.5), inset 0 0 18px rgba(63,245,255,.14); }
.df-tag { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 14px; font: 500 11px "IBM Plex Mono", monospace; letter-spacing: .14em; color: #8DA3C9; }
.df-tag b { font-weight: 700; color: #3FF5FF; text-shadow: 0 0 6px rgba(63,245,255,.6); }
.df-fig { position: relative; margin: 0 0 16px; overflow: hidden; border-radius: 16px; background: radial-gradient(ellipse at 50% 35%, #0E2470, #060B2A 80%); border: 1px solid rgba(232,247,255,.14); aspect-ratio: 16 / 9; max-height: 300px; }
.df-fig img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.df-fig.is-empty img { display: none; }
.df-glyph { display: none; position: absolute; inset: 0; place-items: center; font: 400 96px/1 "Segoe UI Symbol", "M PLUS Rounded 1c", sans-serif; color: transparent; -webkit-text-stroke: 2px #FF4FD8; filter: drop-shadow(0 0 12px rgba(255,79,216,.6)); }
.df-fig.is-empty .df-glyph, .df-urlbar .df-glyph { display: grid; }
.df-fig.df-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #060B2A; }
.df-fig.df-two img { aspect-ratio: 16 / 9; height: auto; }
.df-fig.df-two.is-empty img { display: block; } .df-fig.df-two.is-empty .df-glyph { display: none; }
.df-fig.df-two.is-empty img[src*="shots"] { display: none; } .df-fig.df-two.is-empty { grid-template-columns: 1fr; } .df-fig.df-two.is-empty .df-glyph { display: grid; }
/* 検索・動画の札は絵の代わりにアドレス欄の模型 */
.df-urlbar { display: grid; align-content: center; gap: 14px; padding: 22px; box-sizing: border-box; aspect-ratio: 16 / 7; }
.df-urlbar .df-glyph { display: none; }
.df-url { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 999px; background: rgba(6,11,42,.8); border: 2px solid #3FF5FF; box-shadow: 0 0 4px #3FF5FF, 0 0 16px rgba(63,245,255,.35); }
.df-url span { font: 500 10px "IBM Plex Mono", monospace; letter-spacing: .14em; color: #3FF5FF; }
.df-url b { font: 500 14px "IBM Plex Mono", monospace; color: #8DA3C9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-url b::after { content: "_"; animation: deep-blink 1s steps(1) infinite; color: #E8F7FF; }
.df-url em { font-style: normal; color: #FF4FD8; text-shadow: 0 0 6px #FF4FD8; }
.df-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.df-tabs i { padding: 5px 12px; border-radius: 999px; border: 1px dashed rgba(232,247,255,.35); font: 700 11px "M PLUS Rounded 1c", sans-serif; color: #E8F7FF; font-style: normal; }
.df-tabs i:first-child { border-style: solid; border-color: #3FF5FF; color: #3FF5FF; }
@keyframes deep-blink { 50% { opacity: 0; } }
.df h2 { margin: 0 0 10px; font: 800 26px/1.2 "M PLUS Rounded 1c", sans-serif; color: #F4FDFF; }
.df h2 small { display: block; margin-top: 4px; font: 500 12px "IBM Plex Mono", monospace; letter-spacing: .1em; color: #3FF5FF; }
.df p { margin: 0; font-size: 14px; line-height: 1.8; color: #E8F7FF; }
.df-rules { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.df-rules li { padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(63,245,255,.45); font: 700 11px "M PLUS Rounded 1c", sans-serif; color: #E8F7FF; background: rgba(63,245,255,.06); }
.df-link { display: inline-block; margin-top: 14px; padding: 8px 18px; border-radius: 999px; border: 2px solid #3FF5FF; color: #F4FDFF; font: 700 13px "M PLUS Rounded 1c", sans-serif; text-decoration: none; box-shadow: 0 0 4px #3FF5FF, 0 0 14px rgba(63,245,255,.4); }
.df-link:hover { background: rgba(63,245,255,.12); }

/* 海の底 (2000m): Steam への導線。ピンクのネオン管はここだけ */
.deep-floor { left: 0; right: 0; top: calc(var(--m) * var(--ppm)); height: 120vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; padding: 40px 16px 24px; box-sizing: border-box; text-align: center; }
.deep-steam { position: relative; max-width: 620px; }
.deep-steam small { display: block; margin-bottom: 14px; font: 500 12px "IBM Plex Mono", monospace; letter-spacing: .3em; color: #3FF5FF; }
.deep-steam h2 { margin: 0 0 16px; font: 800 clamp(30px, 5vw, 52px)/1.2 "M PLUS Rounded 1c", sans-serif; color: #F4FDFF; text-shadow: 0 0 4px #3FF5FF, 0 0 18px rgba(63,245,255,.5); }
.deep-steam p { margin: 0 0 28px; font-size: 14px; line-height: 1.8; color: #8DA3C9; }
.deep-cta { display: inline-block; padding: 16px 34px; border-radius: 999px; border: 2px solid #FF4FD8; color: #F4FDFF; font: 800 18px "M PLUS Rounded 1c", sans-serif; letter-spacing: .04em; text-decoration: none;
  text-shadow: 0 0 6px #FF4FD8; box-shadow: 0 0 6px #FF4FD8, 0 0 18px rgba(255,79,216,.55), inset 0 0 10px rgba(255,79,216,.3); transition: box-shadow .2s, transform .2s; }
.deep-cta:hover { transform: translateY(-2px); box-shadow: 0 0 9px #FF4FD8, 0 0 27px rgba(255,79,216,.75), inset 0 0 14px rgba(255,79,216,.4); }
.deep-up { display: block; margin-top: 22px; font: 700 12px "IBM Plex Mono", monospace; letter-spacing: .14em; color: #8DA3C9; text-decoration: none; }
.deep-up:hover { color: #3FF5FF; }
.site-foot { display: flex; justify-content: space-between; gap: 16px; width: min(960px, 92vw); padding-top: 14px; border-top: 1px solid rgba(232,247,255,.12); font: 500 11px "IBM Plex Mono", monospace; letter-spacing: .1em; color: rgba(141,163,201,.75); }

/* 右端の水深計 (固定)。水面より下にいる時だけ */
.deep-gauge { position: fixed; right: 18px; top: 50%; z-index: 5; transform: translateY(-50%); display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 6px; align-items: baseline;
  padding: 10px 12px 12px; border-radius: 14px; background: rgba(6,11,42,.72); border: 1px solid rgba(63,245,255,.45); backdrop-filter: blur(6px); color: #E8F7FF; font-family: "IBM Plex Mono", monospace;
  opacity: 0; pointer-events: none; transition: opacity .35s; }
.deep-gauge.is-on { opacity: 1; }
.deep-gauge small { grid-column: 1 / 3; font-size: 9px; letter-spacing: .3em; color: #3FF5FF; }
.deep-gauge b { font-size: 26px; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(63,245,255,.6); }
.deep-gauge span { font-size: 11px; color: #8DA3C9; }
.deep-gauge-rule { position: absolute; right: -10px; top: 10%; bottom: 10%; width: 3px; border-radius: 2px; background: repeating-linear-gradient(180deg, rgba(141,163,201,.5) 0 2px, transparent 2px 10px); }
.deep-gauge-rule em { position: absolute; left: -3px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: #3FF5FF; box-shadow: 0 0 8px #3FF5FF; }

@media (max-width: 860px) {
  .df, .df.is-r { left: 4vw; right: 4vw; width: auto; padding: 16px 16px 18px; border-radius: 20px; }
  .df h2 { font-size: 21px; } .df p { font-size: 13px; }
  .deep-tick { font-size: 9px; } .deep-tick::before { width: 14px; } .deep-tick.is-big::before { width: 22px; }
  /* 水深計は札と重ならないよう右上の角に */
  .deep-gauge { right: 8px; top: 8px; transform: none; padding: 6px 8px 8px; column-gap: 4px; } .deep-gauge b { font-size: 16px; } .deep-gauge small { font-size: 8px; } .deep-gauge-rule { display: none; }
  .deep-cta { padding: 14px 24px; font-size: 15px; }
  .site-foot { flex-direction: column; gap: 6px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .deep-call h2, .deep-call p { animation: none; } }