/* Tokubaku visual proposal. Plain CSS, scoped to .cyber-theme; no build step. */
.cyber-theme {
  /* ダーク（既定）。すべて背景に対して 4.5:1 以上を実測で確認済み。
     --cy-money は金額にしか使わない。見出し・ボタン・アイコンには使わないこと。
     この一点集中があるから、装飾の中でも数字が必ず目に飛び込む。 */
  --cy-bg: #0A0B14;
  --cy-surface: #141726;
  --cy-raised: #1D2136;
  --cy-border: #8B93AE;
  --cy-text: #E8EAF5;
  --cy-muted: #9AA0BC;
  --cy-mint: #3DE1F0;
  --cy-pink: #FF4FA3;
  --cy-money: #FFC24B;
  --cy-success: #4ADE80;
  --cy-warning: #F97316;
  --cy-danger: #FF6B6B;
  --cy-glow: 0 0 0 1px rgba(61, 225, 240, .35), 0 18px 48px -24px rgba(61, 225, 240, .55);
  --cy-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  --cy-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --cy-ease: cubic-bezier(.22, 1, .36, 1);
  --cy-fast: 180ms;
  --cy-reveal: 520ms;
  margin: 0;
  background: var(--cy-bg);
  color: var(--cy-text);
  font-family: var(--cy-font);
  font-size: 16px;
  line-height: 1.8;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

.cyber-theme *, .cyber-theme *::before, .cyber-theme *::after { box-sizing: border-box; }
.cyber-theme :where(h1, h2, h3, p, figure, dl, dd) { margin: 0; }
.cyber-theme :where(a, button, input, summary) { -webkit-tap-highlight-color: transparent; }
/* :where() で詳細度を 0 にする。素の .cyber-theme a は Tailwind の
   .text-white より強く、既存 CTA の白文字を奪ってしまう（実測 2.64:1）。 */
:where(.cyber-theme) a { color: inherit; }
:where(.cyber-theme) button, :where(.cyber-theme) input { font: inherit; }
.cyber-theme :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--cy-mint); outline-offset: 5px; }
.cyber-theme ::selection { background: var(--cy-mint); color: var(--cy-bg); }
.cyber-theme [id] { scroll-margin-top: 24px; }
.cyber-theme .cyber-shell { width: min(1184px, calc(100% - 64px)); margin-inline: auto; }
.cyber-theme .cyber-muted { color: var(--cy-muted); }
.cyber-theme .cyber-small { font-size: .875rem; }
.cyber-theme .cyber-kicker { color: var(--cy-mint); font: 700 .75rem/1.5 var(--cy-mono); letter-spacing: .12em; }
.cyber-theme .cyber-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--cy-mint); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.cyber-theme .cyber-skip { position: absolute; z-index: 10; top: 8px; left: 16px; padding: 8px 16px; background: var(--cy-bg); color: var(--cy-text); clip-path: inset(100%); }
.cyber-theme .cyber-skip:focus { clip-path: none; }

.cyber-theme .cyber-preview-bar { padding: 8px 24px; background: var(--cy-raised); color: var(--cy-muted); text-align: center; font-size: .75rem; }
.cyber-theme .cyber-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 92px; }
.cyber-theme .cyber-brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; }
.cyber-theme .cyber-brand-mark { display: grid; place-items: center; width: 40px; height: 40px; background: var(--cy-mint); color: var(--cy-bg); clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%); font-size: 26px; font-weight: 900; line-height: 1; }
.cyber-theme .cyber-brand-name { display: block; font-size: 1.375rem; font-weight: 900; letter-spacing: .06em; line-height: 1.4; }
.cyber-theme .cyber-brand-sub { display: block; color: var(--cy-muted); font: 700 .625rem/1.4 var(--cy-mono); letter-spacing: .16em; }
.cyber-theme .cyber-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; font-size: .875rem; }
.cyber-theme .cyber-nav > a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.cyber-theme .cyber-nav > a:hover { text-decoration: underline; text-underline-offset: 6px; }
.cyber-theme .cyber-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 52px; padding: 12px 22px; border: 1px solid var(--cy-mint); border-radius: 6px; background: var(--cy-mint); color: var(--cy-bg); font-weight: 800; text-decoration: none; cursor: pointer; }
.cyber-theme .cyber-button--secondary { background: var(--cy-surface); border-color: var(--cy-border); color: var(--cy-text); }
.cyber-theme .cyber-button::after { position: absolute; right: 14px; bottom: 6px; left: 14px; height: 2px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: left; }
.cyber-theme .cyber-button:hover::after, .cyber-theme .cyber-button:focus-visible::after { transform: scaleX(1); }

.cyber-theme .cyber-hero { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 24px; padding-block: 32px 52px; }
.cyber-theme .cyber-hero-copy { position: relative; z-index: 1; }
.cyber-theme .cyber-eyebrow { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cyber-tag { display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid var(--cy-border); border-radius: 3px; color: var(--cy-mint); font: 700 .6875rem/1.5 var(--cy-mono); letter-spacing: .06em; }
.cyber-theme .cyber-hero h1 { font-size: clamp(2.5rem, 4.7vw, 4rem); font-weight: 900; line-height: 1.3; letter-spacing: -.045em; font-feature-settings: "palt"; }
.cyber-theme .cyber-title-line { display: block; }
.cyber-theme .cyber-hero h1 em { color: var(--cy-mint); font-style: normal; }
.cyber-theme .cyber-hero-desc { max-width: 34rem; margin-top: 24px; color: var(--cy-muted); font-size: 1rem; line-height: 2; }
.cyber-theme .cyber-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cyber-theme .cyber-hero-note { margin-top: 16px; color: var(--cy-muted); font-size: .75rem; }

/* Only the artwork moves. Copy, links and financial information stay stationary. */
.cyber-theme .cyber-stage { position: relative; isolation: isolate; min-width: 0; height: 520px; overflow: hidden; border-radius: 8px 8px 72px 8px; background: var(--cy-surface); }
.cyber-theme .cyber-stage-grid { position: absolute; inset: 0; background-image: linear-gradient(#8295B11A 1px, transparent 1px), linear-gradient(90deg, #8295B11A 1px, transparent 1px); background-size: 36px 36px; pointer-events: none; }
.cyber-theme .cyber-stage-top { position: absolute; top: 22px; left: 22px; right: 22px; z-index: 2; display: flex; justify-content: space-between; gap: 12px; }
.cyber-theme .cyber-stage-top span { padding: 3px 8px; background: var(--cy-bg); color: var(--cy-muted); font: 700 .6875rem/1.6 var(--cy-mono); }
.cyber-theme .cyber-pointer-layer { position: absolute; inset: 48px 8px 44px; pointer-events: none; transform: translate3d(var(--cy-pointer-x, 0px), var(--cy-pointer-y, 0px), 0); }
.cyber-theme .cyber-orbit { position: absolute; width: 330px; height: 330px; max-width: 90%; aspect-ratio: 1; top: 34px; left: 50%; margin-left: -165px; border: 1px solid var(--cy-mint); border-radius: 50%; }
.cyber-theme .cyber-orbit::before { position: absolute; inset: 18px; border: 1px dashed var(--cy-border); border-radius: 50%; content: ""; }
.cyber-theme .cyber-orbit::after { position: absolute; right: -5px; top: 70px; width: 16px; height: 16px; background: var(--cy-pink); content: ""; transform: rotate(45deg); }
.cyber-theme .cyber-character { position: absolute; left: 50%; bottom: -30px; width: 100%; max-width: 440px; height: calc(100% + 22px); transform: translateX(-50%); }
.cyber-theme .cyber-face--guide { display: none; }
.cyber-theme [data-cyber-expression="guide"] .cyber-face--welcome { display: none; }
.cyber-theme [data-cyber-expression="guide"] .cyber-face--guide { display: inline; }
.cyber-theme .cyber-stage-caption { position: absolute; z-index: 2; bottom: 22px; left: 22px; right: 22px; padding: 12px 16px; border-left: 3px solid var(--cy-pink); background: var(--cy-bg); font-size: .875rem; }
.cyber-theme .cyber-stage-caption small { display: block; color: var(--cy-muted); font-size: .6875rem; }
.cyber-theme .cyber-stage-spark { position: absolute; right: 22px; top: 105px; color: var(--cy-pink); font-size: 36px; line-height: 1; }
.cyber-theme .cyber-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; padding: 22px 0; border-block: 1px solid var(--cy-border); color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cyber-strip strong { color: var(--cy-text); font-size: 1rem; }
.cyber-theme .cyber-strip span::before { margin-right: 8px; color: var(--cy-mint); content: "+"; }

.cyber-theme .cyber-section { padding-top: 88px; }
.cyber-theme .cyber-section-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.cyber-theme .cyber-section h2 { margin-top: 8px; font-size: clamp(1.75rem, 2.8vw, 2.25rem); font-weight: 800; line-height: 1.45; letter-spacing: -.025em; }
.cyber-theme .cyber-section-intro { color: var(--cy-muted); font-size: .9375rem; margin-top: 10px; }
.cyber-theme .cyber-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cyber-theme .cyber-feature { position: relative; padding-top: 24px; }
.cyber-theme .cyber-feature::before { position: absolute; top: 0; left: 0; width: 100%; height: 2px; content: ""; background: var(--cy-mint); transform-origin: left; }
.cyber-theme .cyber-feature:nth-child(2)::before { background: var(--cy-pink); }
.cyber-theme .cyber-feature-number { display: inline-block; color: var(--cy-muted); font: 700 .8125rem/1.5 var(--cy-mono); }
.cyber-theme .cyber-feature h3 { margin-top: 24px; font-size: 1.25rem; line-height: 1.5; }
.cyber-theme .cyber-feature p { margin-top: 12px; color: var(--cy-muted); font-size: .9375rem; }
.cyber-theme .cyber-feature-icon { float: right; width: 40px; height: 40px; color: var(--cy-mint); }
.cyber-theme .cyber-feature:nth-child(2) .cyber-feature-icon { color: var(--cy-pink); }

.cyber-theme .cyber-broker-grid { display: grid; grid-template-columns: 1fr 1fr .85fr; gap: 20px; align-items: start; }
.cyber-theme .cyber-panel { min-width: 0; padding: 28px; border: 1px solid var(--cy-border); border-radius: 8px; background: var(--cy-surface); }
.cyber-theme .cyber-broker-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.cyber-theme .cyber-broker-mark { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 4px; background: var(--cy-raised); color: var(--cy-text); font: 800 1.125rem/1 var(--cy-mono); }
.cyber-theme .cyber-broker-head h3 { font-size: 1.25rem; }
.cyber-theme .cyber-broker-head p { color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-condition { padding: 16px; border-radius: 4px; background: var(--cy-raised); }
.cyber-theme .cyber-condition p { color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-condition strong { display: block; margin-top: 4px; font-size: 1rem; }
.cyber-theme .cyber-details { margin-top: 16px; font-size: .875rem; }
.cyber-theme .cyber-details summary { position: relative; min-height: 48px; padding-block: 10px; color: var(--cy-mint); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
.cyber-theme .cyber-details p { margin-top: 12px; color: var(--cy-muted); }
.cyber-theme .cyber-aside { padding: 24px 8px 24px 20px; border-left: 3px solid var(--cy-pink); }
.cyber-theme .cyber-aside h3 { font-size: 1.125rem; }
.cyber-theme .cyber-aside p { margin-top: 16px; color: var(--cy-muted); font-size: .875rem; }
.cyber-theme .cyber-checks { padding-left: 1.3em; color: var(--cy-muted); font-size: .875rem; }
.cyber-theme .cyber-checks li { margin-block: 10px; }
.cyber-theme .cyber-checks li::marker { color: var(--cy-pink); }

.cyber-theme .cyber-ledger { padding: 32px; border: 1px solid var(--cy-border); border-radius: 8px; background: var(--cy-surface); }
.cyber-theme .cyber-ledger-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.cyber-theme .cyber-ledger-heading h3 { font-size: 1.125rem; }
.cyber-theme .cyber-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid currentColor; border-radius: 4px; background: var(--cy-surface); font-size: .75rem; font-weight: 700; white-space: normal; max-inline-size: 100%; overflow-wrap: anywhere; }
.cyber-theme .cyber-badge--success, .cyber-theme .cyber-positive { color: var(--cy-success); }
.cyber-theme .cyber-badge--warning { color: var(--cy-warning); }
.cyber-theme .cyber-badge--danger, .cyber-theme .cyber-negative { color: var(--cy-danger); }
.cyber-theme .cyber-balances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cyber-theme .cyber-balance { min-width: 0; padding: 20px; border-radius: 4px; background: var(--cy-raised); }
.cyber-theme .cyber-balance dt { color: var(--cy-muted); font-size: .875rem; font-weight: 600; }
.cyber-theme .cyber-amount { margin-top: 12px; font: 700 clamp(1.5rem, 2.9vw, 2.125rem)/1.3 var(--cy-mono); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.04em; white-space: nowrap; color: var(--cy-text); }
.cyber-theme .cyber-balance dd:last-child:not(.cyber-amount) { margin-top: 8px; color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-ledger-note { margin-top: 20px; color: var(--cy-muted); font-size: .875rem; }
.cyber-theme .cyber-table-wrap { overflow-x: auto; margin-top: 24px; }
.cyber-theme .cyber-table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: .875rem; }
.cyber-theme .cyber-table caption { padding-bottom: 12px; text-align: left; color: var(--cy-text); font-weight: 700; }
.cyber-theme .cyber-table th, .cyber-theme .cyber-table td { padding: 16px 12px; border-bottom: 1px solid var(--cy-border); text-align: left; }
.cyber-theme .cyber-table thead th { color: var(--cy-muted); font-weight: 600; }
.cyber-theme .cyber-table .cyber-table-amount { text-align: right; white-space: nowrap; font-family: var(--cy-mono); font-variant-numeric: tabular-nums lining-nums; }
.cyber-theme .cyber-table time { white-space: nowrap; }
.cyber-theme .cyber-footnote { margin-top: 20px; color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cyber-preview-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 64px; padding: 24px; border: 1px solid var(--cy-border); border-radius: 8px; background: var(--cy-surface); }
.cyber-theme .cyber-toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: .875rem; cursor: pointer; }
.cyber-theme .cyber-toggle input { width: 20px; height: 20px; accent-color: var(--cy-mint); }
.cyber-theme .cyber-footer { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px; padding-block: 36px; margin-top: 56px; border-top: 1px solid var(--cy-border); }

/* Enhancement is opt-in. Without JS / IntersectionObserver, every section is visible. */
@media (prefers-reduced-motion: no-preference) {
  .cyber-theme[data-cyber-motion="on"] .cyber-button::after { transition: transform var(--cy-fast) var(--cy-ease); }
  .cyber-theme[data-cyber-motion="on"] [data-cyber-reveal]::before { transition: transform var(--cy-reveal) var(--cy-ease); }
  .cyber-theme[data-cyber-motion="on"] [data-cyber-reveal][data-cyber-pending="true"]::before { transform: scaleX(.12); }
  .cyber-theme[data-cyber-motion="on"] [data-cyber-reveal] .cyber-feature-icon { transition: transform var(--cy-reveal) var(--cy-ease); }
  .cyber-theme[data-cyber-motion="on"] [data-cyber-reveal][data-cyber-pending="true"] .cyber-feature-icon { transform: translateY(8px); }
  .cyber-theme[data-cyber-motion="on"] .cyber-pointer-layer { transition: transform 120ms linear; }
  .cyber-theme[data-cyber-motion="on"] [data-cyber-pointer-active="true"] .cyber-pointer-layer { will-change: transform; }
}

/* Financial islands reject motion even if a decorative class is accidentally reused. */
.cyber-theme [data-cyber-static],
.cyber-theme [data-cyber-static] *,
.cyber-theme [data-cyber-static]::before,
.cyber-theme [data-cyber-static]::after,
.cyber-theme [data-cyber-static] *::before,
.cyber-theme [data-cyber-static] *::after {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  text-shadow: none !important;
}
.cyber-theme[data-cyber-motion="off"] *,
.cyber-theme[data-cyber-motion="off"] *::before,
.cyber-theme[data-cyber-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.cyber-theme[data-cyber-motion="off"] .cyber-pointer-layer { transform: none !important; }
.cyber-theme[data-cyber-motion="off"] .cyber-button::after { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cyber-theme, .cyber-theme *, .cyber-theme *::before, .cyber-theme *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .cyber-theme .cyber-pointer-layer, .cyber-theme [data-cyber-reveal]::before, .cyber-theme .cyber-feature-icon, .cyber-theme .cyber-button::after { transform: none !important; }
}
@media (max-width: 1000px) {
  .cyber-theme .cyber-nav { gap: 16px; }
  .cyber-theme .cyber-hero h1 { font-size: clamp(2rem, 4.8vw, 3rem); }
  .cyber-theme .cyber-stage { height: 480px; }
  .cyber-theme .cyber-broker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cyber-theme .cyber-aside { grid-column: 1 / -1; }
  .cyber-theme .cyber-balances { grid-template-columns: 1fr; }
  .cyber-theme .cyber-amount { font-size: 2rem; }
}
@media (max-width: 760px) {
  .cyber-theme .cyber-shell { width: calc(100% - 40px); }
  .cyber-theme .cyber-header { padding-block: 22px; flex-wrap: wrap; gap: 16px; }
  .cyber-theme .cyber-nav { width: 100%; gap: 8px 20px; }
  .cyber-theme .cyber-hero { grid-template-columns: 1fr; padding-top: 24px; gap: 36px; }
  .cyber-theme .cyber-hero h1 { font-size: clamp(2.2rem, 7.5vw, 3.5rem); }
  .cyber-theme .cyber-hero-desc { margin-top: 20px; }
  .cyber-theme .cyber-stage { width: min(100%, 480px); height: 440px; margin-inline: auto; }
  .cyber-theme .cyber-feature-grid { grid-template-columns: 1fr; gap: 36px; }
  .cyber-theme .cyber-feature h3 { margin-top: 16px; }
  .cyber-theme .cyber-section { padding-top: 60px; }
  .cyber-theme .cyber-ledger { padding: 20px; }
}
@media (max-width: 480px) {
  .cyber-theme .cyber-shell { width: calc(100% - 32px); }
  .cyber-theme .cyber-preview-bar { text-align: left; padding-inline: 16px; }
  .cyber-theme .cyber-actions { flex-direction: column; }
  .cyber-theme .cyber-broker-grid { grid-template-columns: 1fr; }
  .cyber-theme .cyber-panel { padding: 24px; }
  .cyber-theme .cyber-stage { height: 390px; }
  .cyber-theme .cyber-orbit { width: 240px; height: 240px; margin-left: -120px; }
  .cyber-theme .cyber-stage-caption { left: 16px; right: 16px; padding: 10px 12px; }
  .cyber-theme .cyber-stage-top { left: 16px; right: 16px; }
  .cyber-theme .cyber-ledger { padding: 16px; }
  .cyber-theme .cyber-balance { padding: 16px; }
  .cyber-theme .cyber-amount { font-size: clamp(1.375rem, 6.2vw, 1.75rem); }
}

/* ライト。ネオンは白地では読めないので、色相を保ったまま暗くする。
   「昼のホログラム」として別物に振り、ダークの発光をそのまま薄めない。 */
.cyber-theme[data-theme="light"] {
  --cy-bg: #F4F6FC;
  --cy-surface: #FFFFFF;
  --cy-raised: #EAEEF8;
  --cy-border: #5A6280;
  --cy-text: #14172A;
  --cy-muted: #565D7A;
  --cy-mint: #0C7080;
  --cy-pink: #C2186E;
  --cy-money: #8A5A00;
  --cy-success: #0F7A3D;
  --cy-warning: #9A3412;
  --cy-danger: #C42222;
  --cy-glow: 0 0 0 1px rgba(12, 112, 128, .25), 0 18px 40px -28px rgba(20, 23, 42, .45);
  color-scheme: light;
}

/* 明示指定が無いときは OS の設定に従う */
@media (prefers-color-scheme: light) {
  .cyber-theme:not([data-theme="dark"]) {
    --cy-bg: #F4F6FC;
    --cy-surface: #FFFFFF;
    --cy-raised: #EAEEF8;
    --cy-border: #5A6280;
    --cy-text: #14172A;
    --cy-muted: #565D7A;
    --cy-mint: #0C7080;
    --cy-pink: #C2186E;
    --cy-money: #8A5A00;
    --cy-success: #0F7A3D;
    --cy-warning: #9A3412;
    --cy-danger: #C42222;
    --cy-glow: 0 0 0 1px rgba(12, 112, 128, .25), 0 18px 40px -28px rgba(20, 23, 42, .45);
    color-scheme: light;
  }
}

/* 金額。数字が動くと誤読されるので、アニメーションは一切かけない。 */
/* 金額の「規律」。色は持たない。
   色まで持たせると .cyber-positive / .cyber-negative の増減表示を上書きしてしまう。
   金額はアニメーションさせない。動いている最中の数字は誤読されるため。 */
.cyber-theme .cyber-money {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  text-shadow: none !important;
}
/* 金色は「残高そのもの」にだけ当てる。増減の行には当てない（緑/赤の意味を残す）。 */
.cyber-theme .cyber-money--value {
  color: var(--cy-money);
  font-weight: 800;
}
.cyber-theme .cyber-money small { color: var(--cy-muted); font-weight: 600; }

/* 案内役。画像は装飾なので支援技術には渡さない（意味は本文が持つ）。 */
.cyber-theme .cyber-guide {
  display: block;
  width: min(340px, 100%);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45));
}
.cyber-theme[data-theme="light"] .cyber-guide { filter: drop-shadow(0 20px 32px rgba(20, 23, 42, .28)); }
/* 移動は JS が管理する有効状態と、OS の設定の両方に連動させる。
   無条件の :hover だと、手動停止中・JS 無効時にも動いてしまう。 */
@media (prefers-reduced-motion: no-preference) {
  .cyber-theme[data-cyber-motion="on"] .cyber-guide { transition: transform 320ms var(--cy-ease); }
  .cyber-theme[data-cyber-motion="on"] .cyber-stage:hover .cyber-guide {
    transform: translateY(-6px);
    will-change: transform;
  }
}

/* テーマ切替ボタン */
.cyber-theme .cyber-theme-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--cy-border); border-radius: 6px;
  background: var(--cy-surface); color: var(--cy-text);
  font-size: .8125rem; font-weight: 700; cursor: pointer;
}
.cyber-theme .cyber-theme-toggle:hover { border-color: var(--cy-mint); color: var(--cy-mint); }

/* --- 本番テンプレートの共通部分（base.html）--------------------------------
   Tailwind の bg-white / text-slate-* を置き換える部品。色は必ずトークンから
   取り、テーマ切替 1 か所で全体が動くようにする。 */

.cyber-theme .cyber-chrome {
  background: var(--cy-surface);
  border-color: var(--cy-raised);
  color: var(--cy-text);
}
.cyber-theme .cyber-wordmark { color: var(--cy-mint); }
.cyber-theme .cyber-muted { color: var(--cy-muted); }

.cyber-theme .cyber-iconbutton { color: var(--cy-muted); background: transparent; }
.cyber-theme .cyber-iconbutton:hover { color: var(--cy-mint); background: var(--cy-raised); }

/* CTA。Tailwind の text-white を奪わないよう、色をここで明示する */
.cyber-theme .cyber-cta {
  background: var(--cy-mint);
  color: var(--cy-bg);
  border: 1px solid var(--cy-mint);
  text-decoration: none;
}
.cyber-theme .cyber-cta:hover { filter: brightness(1.08); }
.cyber-theme .cyber-cta:focus-visible { outline: 3px solid var(--cy-mint); outline-offset: 3px; }

.cyber-theme .cyber-footlink { color: var(--cy-muted); text-decoration: none; }
.cyber-theme .cyber-footlink:hover { color: var(--cy-mint); text-decoration: underline; }

/* 既存の Tailwind 部品を暗い面の上でも読めるようにする。
   .card / .form-input は app.css で白背景・濃い文字に固定されている。 */
.cyber-theme .card {
  background: var(--cy-surface);
  border-color: var(--cy-ui-line);
  border-radius: var(--cy-ui-radius);
  box-shadow: none;
  color: var(--cy-text);
}
.cyber-theme :is(.form-input, .form-select) {
  background: var(--cy-raised);
  border-color: var(--cy-border);
  color: var(--cy-text);
}
.cyber-theme :is(.form-input, .form-select)::placeholder { color: var(--cy-muted); }
.cyber-theme .btn-secondary {
  background: var(--cy-surface);
  border-color: var(--cy-border);
  color: var(--cy-text);
}
.cyber-theme .nav-link { color: var(--cy-muted); }
.cyber-theme .nav-link:hover { color: var(--cy-mint); }

/* --- 共通ヘッダー：高さは固定し、面と影でスクロールを伝える ----------------
   JS の初期化を待たず高さを確保する。JS 無効時は通常フローでリンクを表示する。
   1024px から横並び。管理者の全項目で約 980px 要る（2026-09-11 実測）。1280px にすると幅 1136px の画面でもハンバーガーになっていた。app.js とそろえる。
   ただし言語や項目の数によっては 1024px を超えても 1 行に入らない（2026-09-15 実測でロシア語は約 1170px 要った）。
   そのときは app.js が横並びの状態で測って data-nav-collapsed="true" を付け、幅があってもハンバーガーのままにする。
   横並びの指定はその印が無いときだけ効くよう :where() で囲み、既存の詳細度は変えない。 */
html:has(.site-header[data-header-ready]) { scroll-padding-top: 5rem; }
.cyber-theme .site-header {
  --cy-header-height: 4rem;
  position: sticky;
  top: 0;
  z-index: 40;
  isolation: isolate;
  border-bottom: 1px solid var(--cy-raised);
}
.cyber-theme .site-header::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  border-bottom: 1px solid var(--cy-border);
  box-shadow: 0 10px 28px -18px var(--cy-border);
  opacity: 0;
  content: "";
}
.cyber-theme .site-header:is([data-header-scrolled="true"], [data-menu-open="true"])::after { opacity: 1; }
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .cyber-theme .site-header[data-header-scrolled="true"] {
    background: color-mix(in srgb, var(--cy-surface) 96%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}
.cyber-theme .site-header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  max-width: 76rem;
  min-height: calc(var(--cy-header-height) - 1px);
  height: calc(var(--cy-header-height) - 1px);
  margin-inline: auto;
  padding: .5rem 1rem;
}
.cyber-theme .site-header__menu-toggle {
  display: none;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--cy-raised);
  border-radius: .75rem;
  color: var(--cy-text);
  cursor: pointer;
}
.cyber-theme .site-header[data-header-ready] .site-header__menu-toggle { display: inline-flex; }
.cyber-theme .site-header__menu-icon { position: relative; width: 20px; height: 20px; }
.cyber-theme .site-header__menu-icon > span {
  position: absolute;
  left: 0;
  top: 9px;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.cyber-theme .site-header__menu-icon > span:first-child { transform: translateY(-6px); }
.cyber-theme .site-header__menu-icon > span:last-child { transform: translateY(6px); }
.cyber-theme .site-header [aria-expanded="true"] .site-header__menu-icon > span:first-child { transform: rotate(45deg); }
.cyber-theme .site-header [aria-expanded="true"] .site-header__menu-icon > span:nth-child(2) { opacity: 0; }
.cyber-theme .site-header [aria-expanded="true"] .site-header__menu-icon > span:last-child { transform: rotate(-45deg); }
.cyber-theme .site-header__nav {
  display: grid;
  gap: 4px;
  width: 100%;
  padding-block: .75rem;
}
.cyber-theme .site-header .site-header__nav {
  position: absolute;
  top: calc(100% + 8px);
  left: 12px;
  right: 12px;
  width: auto;
  max-height: calc(100vh - var(--cy-header-height) - 20px);
  max-height: calc(100dvh - var(--cy-header-height) - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  border: 1px solid var(--cy-border);
  border-radius: 1rem;
  background: var(--cy-surface);
  box-shadow: 0 14px 32px -20px var(--cy-border);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.cyber-theme .site-header[data-menu-open="true"] .site-header__nav {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.cyber-theme .site-header .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: .5rem;
  color: var(--cy-text);
  font-size: .875rem;
  line-height: 1.5;
  /* 訳文の長い言語（ロシア語・スペイン語）で切らない。横並びに入らないときは
     app.js が幅を実測して data-nav-collapsed を付け、ハンバーガーへ畳む */
  white-space: normal;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  text-decoration: none;
  cursor: pointer;
}
.cyber-theme .site-header .nav-link::after {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 1px;
  background: var(--cy-mint);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  content: "";
}
.cyber-theme .site-header .nav-link:is(:hover, :focus-visible, [aria-current]) { color: var(--cy-mint); }
.cyber-theme .site-header .nav-link[aria-current] { background: var(--cy-raised); }
.cyber-theme .site-header .nav-link:is(:hover, :focus-visible, [aria-current])::after { transform: scaleX(1); opacity: 1; }
.cyber-theme .site-header__logout .nav-link { width: 100%; }
.cyber-theme .site-header .cyber-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: .75rem;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.cyber-theme .site-header .cyber-cta:hover { filter: none; }
.cyber-theme .site-header .cyber-cta[aria-current] { outline: 2px solid var(--cy-text); outline-offset: 2px; }
.cyber-theme .site-header .cyber-theme-toggle { justify-content: center; border-radius: .75rem; white-space: nowrap; }
.cyber-theme .site-header__theme-icon { display: inline-block; font-size: 1rem; line-height: 1; }
.cyber-theme[data-theme="light"] .site-header__theme-icon { transform: rotate(180deg); }
@media (prefers-color-scheme: light) {
  .cyber-theme:not([data-theme="dark"]) .site-header__theme-icon { transform: rotate(180deg); }
}
/* パネル内でもフォーカス枠を切らず、現在地の装飾より優先する。 */
.cyber-theme .site-header :is(a, button):focus-visible { outline: 3px solid var(--cy-mint); outline-offset: 3px; }
.cyber-theme .site-header .cyber-cta:focus-visible { outline-color: var(--cy-pink); }
@media (min-width: 1024px) {
  .cyber-theme .site-header { --cy-header-height: 4.5rem; }
  .cyber-theme .site-header__inner { flex-wrap: nowrap; padding-inline: 1.5rem; }
  /* 横並びのときは各項目を縮めない（縮むと 1 文字ずつ折り返して読めなくなる） */
  .cyber-theme .site-header__nav > * { flex-shrink: 0; }
  .cyber-theme .site-header[data-header-ready]:where(:not([data-nav-collapsed="true"])) .site-header__menu-toggle { display: none; }
  .cyber-theme .site-header:where(:not([data-nav-collapsed="true"])) .site-header__nav,
  .cyber-theme .site-header[data-header-ready]:where(:not([data-nav-collapsed="true"])) .site-header__nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .cyber-theme .site-header:where(:not([data-nav-collapsed="true"])) .nav-link { padding-inline: 6px; }
  .cyber-theme .site-header:where(:not([data-nav-collapsed="true"])) .nav-link::after { left: 6px; right: 6px; }
  .cyber-theme .site-header:where(:not([data-nav-collapsed="true"])) .cyber-theme-toggle { padding-inline: 10px; }
  /* 入りきらずにハンバーガーにしたときのパネル。画面いっぱいに広げず、右端のボタンの下に置く。 */
  .cyber-theme .site-header[data-nav-collapsed="true"] .site-header__nav {
    left: auto;
    right: max(1.5rem, calc((100% - 76rem) / 2 + 1.5rem));
    width: min(24rem, calc(100% - 24px));
  }
}
@media (scripting: none) {
  .cyber-theme .site-header { position: relative; }
}
@media (scripting: none) and (width < 1024px) {
  .cyber-theme .site-header__inner { height: auto; flex-wrap: wrap; }
  .cyber-theme .site-header .site-header__nav {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: .75rem 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

/* 動きは既存の OS 設定 + サイト設定の両方が許可したときだけ。
   開閉の後処理をタイマーに依存させず、停止設定の変更も即時に反映する。 */
@media (prefers-reduced-motion: no-preference) {
  .cyber-theme[data-cyber-motion="on"] .site-header::after { transition: opacity 240ms var(--cy-ease); }
  .cyber-theme[data-cyber-motion="on"] .site-header .nav-link::after {
    transition: transform 220ms var(--cy-ease), opacity 180ms var(--cy-ease);
  }
  .cyber-theme[data-cyber-motion="on"] .site-header :is(.cyber-cta, .cyber-theme-toggle, .site-header__theme-icon) {
    transition: transform 220ms var(--cy-ease);
  }
  .cyber-theme[data-cyber-motion="on"] .site-header .site-header__menu-icon > span {
    transition: transform 220ms var(--cy-ease), opacity 140ms var(--cy-ease);
  }
  .cyber-theme[data-cyber-motion="on"] .site-header .cyber-cta:focus-visible { transform: translateY(-2px); }
  .cyber-theme[data-cyber-motion="on"] .site-header :is(.cyber-cta, .cyber-theme-toggle):active { transform: scale(.98); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .cyber-theme[data-cyber-motion="on"] .site-header .cyber-cta:hover { transform: translateY(-2px); }
  .cyber-theme[data-cyber-motion="on"] .site-header .cyber-theme-toggle:hover { transform: translateY(-1px); }
  .cyber-theme[data-cyber-motion="on"] .site-header :is(.cyber-cta, .cyber-theme-toggle):active { transform: scale(.98); }
}
@media (prefers-reduced-motion: no-preference) and (width < 1024px) {
  .cyber-theme[data-cyber-motion="on"] .site-header[data-header-ready] .site-header__nav {
    transform: translateY(-6px);
    transition: opacity 140ms var(--cy-ease), transform 180ms var(--cy-ease), visibility 0s linear 180ms;
  }
  .cyber-theme[data-cyber-motion="on"] .site-header[data-menu-open="true"] .site-header__nav {
    transform: none;
    transition-duration: 220ms, 220ms, 0s;
    transition-delay: 0s;
  }
  .cyber-theme[data-cyber-motion="on"] .site-header[data-menu-open="true"] .site-header__nav > * {
    animation: cy-header-item-in 180ms var(--cy-ease) both;
    animation-delay: var(--cy-header-item-delay, 0ms);
  }
  .cyber-theme .site-header__nav > :nth-child(2) { --cy-header-item-delay: 16ms; }
  .cyber-theme .site-header__nav > :nth-child(3) { --cy-header-item-delay: 32ms; }
  .cyber-theme .site-header__nav > :nth-child(4) { --cy-header-item-delay: 48ms; }
  .cyber-theme .site-header__nav > :nth-child(5) { --cy-header-item-delay: 64ms; }
  .cyber-theme .site-header__nav > :nth-child(n+6) { --cy-header-item-delay: 80ms; }
  /* Tab で入った項目は遅延させない。フォーカス枠も即座に見せる。 */
  .cyber-theme[data-cyber-motion="on"] .site-header[data-menu-open="true"] .site-header__nav > :focus-within { animation: none; }
}
@keyframes cy-header-item-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
  .cyber-theme .site-header .nav-link[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
  .cyber-theme .site-header__menu-icon > span { background: ButtonText; }
}

/* トップのヒーローと一覧。青のベタ塗りをやめ、面と発光で階層を作る */
.cyber-theme .cyber-hero-panel {
  position: relative;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--cy-mint) 18%, transparent), transparent 60%),
    radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--cy-pink) 14%, transparent), transparent 55%),
    var(--cy-surface);
  border: 1px solid var(--cy-raised);
  box-shadow: var(--cy-glow);
}
.cyber-theme .cyber-cta-ghost {
  border: 1px solid var(--cy-border);
  color: var(--cy-text);
  background: transparent;
  text-decoration: none;
}
.cyber-theme .cyber-cta-ghost:hover { border-color: var(--cy-mint); color: var(--cy-mint); }
.cyber-theme .cyber-figure { background: var(--cy-raised); border: 1px solid var(--cy-ui-line); }
.cyber-theme .cyber-row { text-decoration: none; color: inherit; }
.cyber-theme .cyber-row:hover { background: var(--cy-raised); }
.cyber-theme .divide-y > * + * { border-color: var(--cy-raised); }


/* --- Tailwind 互換層 ---------------------------------------------------------
   既存テンプレートは 48 ファイル・約 300 箇所で Tailwind の色ユーティリティを
   直書きしている。1 つずつ書き換えるより、テーマ内でその色を読み替える方が
   確実で、今後書かれるテンプレートも自動で追従する。
   `.cyber-theme .text-slate-500` は詳細度 (0,2,0) で素の (0,1,0) に勝つ。 */

/* 文字 */
.cyber-theme :is(.text-slate-400, .text-slate-500, .text-slate-600) { color: var(--cy-muted); }
.cyber-theme :is(.text-slate-700, .text-slate-800, .text-slate-900) { color: var(--cy-text); }
.cyber-theme :is(.text-blue-600, .text-blue-700, .text-blue-800) { color: var(--cy-mint); }
.cyber-theme :is(.text-red-600, .text-red-700, .text-red-800) { color: var(--cy-danger); }
.cyber-theme :is(.text-green-700, .text-green-800, .text-emerald-700, .text-emerald-800) { color: var(--cy-success); }
.cyber-theme :is(.text-amber-700, .text-amber-800, .text-amber-900) { color: var(--cy-warning); }

/* 面 */
.cyber-theme .bg-white { background-color: var(--cy-surface); }
.cyber-theme :is(.bg-slate-50, .bg-slate-100) { background-color: var(--cy-raised); }
.cyber-theme :is(.hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover) { background-color: var(--cy-raised); }

/* 状態を示す淡い面。色は保ちつつ、暗い地の上で成立する濃度に落とす */
.cyber-theme :is(.bg-blue-50, .bg-blue-100) { background-color: color-mix(in srgb, var(--cy-mint) 16%, var(--cy-surface)); }
.cyber-theme :is(.bg-amber-50, .bg-amber-100) { background-color: color-mix(in srgb, var(--cy-warning) 16%, var(--cy-surface)); }
.cyber-theme :is(.bg-emerald-50, .bg-emerald-100, .bg-green-50, .bg-green-100) { background-color: color-mix(in srgb, var(--cy-success) 16%, var(--cy-surface)); }
.cyber-theme :is(.bg-red-50, .bg-red-100) { background-color: color-mix(in srgb, var(--cy-danger) 16%, var(--cy-surface)); }

/* 罫線 */
.cyber-theme :is(.border-slate-200, .border-slate-300) { border-color: var(--cy-raised); }
.cyber-theme .border-blue-200 { border-color: color-mix(in srgb, var(--cy-mint) 40%, transparent); }
.cyber-theme .border-amber-200 { border-color: color-mix(in srgb, var(--cy-warning) 40%, transparent); }
.cyber-theme :is(.divide-y) > * + * { border-color: var(--cy-raised); }

/* 見出しの下の淡い説明が消えないように、面の上でも十分な明度を保つ */
.cyber-theme .bg-slate-50 :is(.text-slate-500, .text-slate-600),
.cyber-theme .bg-slate-100 :is(.text-slate-500, .text-slate-600) { color: var(--cy-muted); }


/* --- 案内役の配置 ------------------------------------------------------------
   本文が主役。キャラは横に置き、狭い画面では文章の下へ回す。
   画像は装飾なので alt を空にし、支援技術には渡さない（意味は本文が持つ）。 */
.cyber-theme .cyber-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
@media (min-width: 900px) {
  .cyber-theme .cyber-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr); }
}
.cyber-theme .cyber-hero-figure {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* 画像が主張しすぎないよう上限を決める。文章の可読幅を削らない */
  max-height: 545px;
}
.cyber-theme .cyber-hero-figure .cyber-guide {
  width: auto;
  max-width: 100%;
  max-height: 545px;
  object-fit: contain;
}
/* 狭い画面ではキャラを小さくして、最初の画面に見出しと導線を収める */
@media (max-width: 899px) {
  .cyber-theme .cyber-hero-figure { max-height: clamp(180px, 42vw, 240px); order: -1; }
  .cyber-theme .cyber-hero-figure .cyber-guide { max-height: clamp(180px, 42vw, 240px); }
}

/* 携帯では上半身を大きく見せる。切り抜く枠で本文への重なりを防ぐ。 */
@media (max-width: 639px) {
  .cyber-theme .cyber-hero-figure {
    height: clamp(210px, 56vw, 280px);
    max-height: none;
    align-items: flex-start;
    overflow: hidden;
    padding-top: 8px;
    -webkit-mask-image: linear-gradient(#000 0 86%, transparent 100%);
    mask-image: linear-gradient(#000 0 86%, transparent 100%);
  }
  .cyber-theme .cyber-hero-figure .cyber-guide {
    height: clamp(350px, 94vw, 470px);
    max-height: none;
    max-width: none;
    flex-shrink: 0;
  }
}

/* 空状態。何をすればよいか分からない場面にだけ出す */
.cyber-theme .cyber-empty {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cyber-theme .cyber-empty-guide {
  width: 84px;
  height: auto;
  flex-shrink: 0;
  opacity: .92;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
}
.cyber-theme[data-theme="light"] .cyber-empty-guide { filter: drop-shadow(0 8px 14px rgba(20, 23, 42, .22)); }


/* --- 共通ブローカーロゴ ------------------------------------------------------
   ロゴは本文色・不透明。ブランド赤は SVG の fill を維持し、金額色は使わない。
   横長の XM は高さ 22px、HFM は余白込み 32px、単色マークは 32px で重さを揃える。 */
.cyber-theme .cyber-broker-logo {
  --logo-wordmark-height: 28px;
  --logo-mark-size: 32px;
  --logo-name-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  color: var(--cy-text);
  vertical-align: middle;
  line-height: 1.2;
}
.cyber-theme .cyber-broker-logo--xm { --logo-wordmark-height: 22px; }
.cyber-theme .cyber-broker-logo--hfm { --logo-wordmark-height: 32px; }
/* Axi は絵の周りに余白の多い viewBox（絵は横79%・縦57%）。 他社と文字の大きさを揃えるには枠を大きく取る必要がある */
.cyber-theme .cyber-broker-logo--axi { --logo-wordmark-height: 46px; }
/* Errante は長い赤の R が viewBox の縦いっぱい（60）を使い、文字は約 23/60。文字の高さを他社と揃えるため枠ごと大きく取る */
.cyber-theme .cyber-broker-logo--errante { --logo-wordmark-height: 44px; }
/* JMarkets は viewBox（26）いっぱいの横長ワードマーク。XM・HFM と文字の重さを揃える */
.cyber-theme .cyber-broker-logo--jmarkets { --logo-wordmark-height: 26px; }
/* DecodeFX は左の人物エンブレムが viewBox の縦いっぱい（46）を使い、右の DECODE の文字は約 13/46。文字が読める高さまで枠を取る */
.cyber-theme .cyber-broker-logo--decodefx { --logo-wordmark-height: 48px; }
/* IS6FX は金〜橙のグラデーションのまま img で出す（id 重複を避けるため展開しない）。ダーク・ライトどちらの地でも原色で読める */
.cyber-theme .cyber-broker-logo--is6fx { --logo-wordmark-height: 44px; }
@media (max-width: 639px) {
  .cyber-theme .cyber-broker-logo--errante { --logo-wordmark-height: 36px; }
  .cyber-theme .cyber-broker-logo--jmarkets { --logo-wordmark-height: 24px; }
  .cyber-theme .cyber-broker-logo--decodefx { --logo-wordmark-height: 40px; }
  .cyber-theme .cyber-broker-logo--is6fx { --logo-wordmark-height: 38px; }
}
.cyber-theme .cyber-broker-logo-art { display: flex; align-items: center; min-width: 0; max-width: 100%; }
.cyber-theme .cyber-broker-logo-art svg { display: block; width: auto; height: var(--logo-wordmark-height); max-width: 100%; }
.cyber-theme .cyber-broker-logo--is6fx .cyber-broker-logo-art img { display: block; width: auto; height: var(--logo-wordmark-height); max-width: 100%; }
/* HFM の viewBox 下端にある約 4/30 の余白を、上側でも補って図形を中央に置く。 */
.cyber-theme .cyber-broker-logo--hfm .cyber-broker-logo-art { padding-top: calc(var(--logo-wordmark-height) * .135); }
/* VT Markets は公式の白ワードマーク（WebP）。currentColor で色を変えられないため、
   ライト・ダークどちらのテーマでも同じ濃紺の角丸プレートに載せて読める状態を保つ。 */
.cyber-theme .cyber-broker-logo--vtmarkets { --logo-wordmark-height: 24px; }
@media (max-width: 639px) {
  .cyber-theme .cyber-broker-logo--vtmarkets { --logo-wordmark-height: 20px; }
}
.cyber-theme .cyber-broker-logo-plate {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 8px 14px;
  background: #0b1a3a;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
}
.cyber-theme .cyber-broker-logo-plate img { display: block; width: auto; height: var(--logo-wordmark-height); max-width: 100%; }
.cyber-theme .cyber-broker-logo-mark { display: block; flex: 0 0 var(--logo-mark-size); width: var(--logo-mark-size); height: var(--logo-mark-size); }
.cyber-theme .cyber-broker-logo-mark svg { display: block; width: 100%; height: 100%; }
.cyber-theme .cyber-broker-logo-mark--emc {
  background: currentColor;
  -webkit-mask: url("../img/brokers/emc-mark.png") center / contain no-repeat;
  mask: url("../img/brokers/emc-mark.png") center / contain no-repeat;
  mask-mode: alpha;
}
/* XS は mask で単色にしない。緑がブランド色で、単色化すると識別が落ちる。
   1色のマークなのでダーク地・ライト地のどちらでもそのまま読める */
.cyber-theme .cyber-broker-logo-mark--xs {
  background: url("../img/brokers/xs-mark.png") center / contain no-repeat;
}
.cyber-theme .cyber-broker-logo-name {
  min-width: 0;
  font: 800 var(--logo-name-size)/1.3 var(--cy-font);
  letter-spacing: .015em;
  overflow-wrap: anywhere;
}
/* Tailwind のロード状況に依存せず、見出しとリンクに社名を一度だけ渡す。 */
.cyber-theme .cyber-broker-logo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 公開ページ。見出しの高さを揃え、ロゴなし・長い社名も同じ領域で折り返す。 */
.cyber-theme .cyber-broker-card { min-width: 0; }
.cyber-theme .cyber-broker-card-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.cyber-theme .cyber-broker-title { display: flex; align-items: center; min-width: 0; max-width: 100%; min-height: 56px; line-height: 1.3; }
.cyber-theme .cyber-broker-status { flex: 0 1 auto; white-space: normal; max-inline-size: 100%; overflow-wrap: anywhere; }
.cyber-theme .cyber-broker-title--detail { min-height: 64px; margin-top: 16px; }
.cyber-theme .cyber-broker-title--detail .cyber-broker-logo { --logo-wordmark-height: 36px; --logo-mark-size: 44px; --logo-name-size: 1.625rem; gap: 12px; }
.cyber-theme .cyber-broker-title--detail .cyber-broker-logo--xm { --logo-wordmark-height: 30px; }
.cyber-theme .cyber-broker-title--detail .cyber-broker-logo--hfm { --logo-wordmark-height: 42px; }
.cyber-theme .cyber-broker-title--detail .cyber-broker-logo--axi { --logo-wordmark-height: 58px; }
.cyber-theme .cyber-broker-title--detail .cyber-broker-logo--errante { --logo-wordmark-height: 52px; }
.cyber-theme .cyber-broker-title--detail .cyber-broker-logo--jmarkets { --logo-wordmark-height: 34px; }
.cyber-theme .cyber-broker-title--detail .cyber-broker-logo--decodefx { --logo-wordmark-height: 56px; }
.cyber-theme .cyber-broker-title--detail .cyber-broker-logo--vtmarkets { --logo-wordmark-height: 32px; }
.cyber-theme .cyber-broker-title--detail .cyber-broker-logo--is6fx { --logo-wordmark-height: 56px; }

/* --- 対応ブローカーのテロップ ------------------------------------------------
   初期状態 / JS 無効 / 手動停止 / reduce は、重複のない横スクロール一覧。
   動きが有効な場合だけ、同幅のトラックを各 -100% 移動して継ぎ目を揃える。 */
.cyber-theme .cyber-ticker {
  --ticker-duration: 48s;
  --ticker-gap: 48px;
  --ticker-item-width: 176px;
  --ticker-edge: 40px;
  position: relative;
  min-width: 0;
  margin-top: 24px;
  padding-block: 8px 12px;
  background: var(--cy-surface);
  border-block: 1px solid var(--cy-raised);
}
.cyber-theme .cyber-ticker-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding-inline: 24px; }
.cyber-theme .cyber-ticker-label { color: var(--cy-muted); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; }
.cyber-theme .cyber-ticker-pause { display: none; align-items: center; gap: 8px; min-height: 44px; color: var(--cy-muted); font-size: .75rem; cursor: pointer; }
.cyber-theme .cyber-ticker-pause input { width: 16px; height: 16px; margin: 0; accent-color: var(--cy-mint); }
.cyber-theme .cyber-ticker-viewport {
  display: flex;
  width: 100%;
  overflow-x: auto;
  padding-block: 8px;
  scroll-padding-inline: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--cy-border) var(--cy-surface);
}
.cyber-theme .cyber-ticker-viewport:focus-visible { outline-offset: -3px; }
.cyber-theme .cyber-ticker-track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--ticker-gap);
  min-width: 100%;
  margin: 0;
  padding: 0 calc(var(--ticker-gap) / 2);
  list-style: none;
}
.cyber-theme .cyber-ticker-track[aria-hidden="true"],
.cyber-theme .cyber-ticker-item[data-ticker-repeat] { display: none; }
.cyber-theme .cyber-ticker-item { flex: 0 0 auto; }
.cyber-theme .cyber-ticker-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ticker-item-width);
  min-height: 56px;
  max-width: 280px;
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  border-radius: 4px;
  color: var(--cy-text);
  text-decoration: none;
}
.cyber-theme .cyber-ticker-link:is(:hover, :focus-visible) { border-bottom-color: var(--cy-mint); }
.cyber-theme .cyber-ticker .cyber-broker-logo { --logo-name-size: 1.125rem; }
@keyframes cyber-ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .cyber-theme[data-cyber-motion="on"] .cyber-ticker-pause { display: inline-flex; }
  /* チェックによる停止はフォーカスが離れても維持。キーボードで一覧へ入った際も
     静止表示へ戻し、画面外のリンクにフォーカスが取り残されることを防ぐ。 */
  .cyber-theme[data-cyber-motion="on"] .cyber-ticker:not(:has(.cyber-ticker-pause input:checked)) .cyber-ticker-viewport:not(:focus-visible):not(:has(:focus-visible)) {
    overflow-x: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--ticker-edge), #000 calc(100% - var(--ticker-edge)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--ticker-edge), #000 calc(100% - var(--ticker-edge)), transparent);
  }
  .cyber-theme[data-cyber-motion="on"] .cyber-ticker:not(:has(.cyber-ticker-pause input:checked)) .cyber-ticker-viewport:not(:focus-visible):not(:has(:focus-visible)) .cyber-ticker-track {
    display: flex;
    animation: cyber-ticker-scroll var(--ticker-duration) linear infinite;
    animation-play-state: var(--ticker-play-state, running);
    will-change: transform;
  }
  .cyber-theme[data-cyber-motion="on"] .cyber-ticker:not(:has(.cyber-ticker-pause input:checked)) .cyber-ticker-viewport:not(:focus-visible):not(:has(:focus-visible)) .cyber-ticker-item[data-ticker-repeat] { display: list-item; }
  .cyber-theme .cyber-ticker:hover { --ticker-play-state: paused; }
}
@media (max-width: 480px) {
  .cyber-theme .cyber-ticker { --ticker-gap: 24px; --ticker-item-width: 148px; --ticker-edge: 24px; margin-top: 20px; }
  .cyber-theme .cyber-ticker-heading { padding-inline: 16px; }
  .cyber-theme .cyber-ticker-viewport { scroll-padding-inline: 12px; }
}

/* --- 出金実績のテロップ ------------------------------------------------------
   対応ブローカーのテロップと同じ仕組み（静止時は横スクロールの一覧、動きが有効な
   ときだけ流す）。トップの一番上に置くので上の余白は取らない。項目は文字なので
   幅は中身なり。li は動きの有無で display が変わるため、並びは内側の span に持たせる。 */
.cyber-theme .cyber-ticker--payout { --ticker-duration: 60s; --ticker-gap: 36px; margin-top: 0; margin-bottom: 20px; }
.cyber-theme .cyber-payout-total { margin-left: .75rem; color: var(--cy-text); font-weight: 600; letter-spacing: 0; }
.cyber-theme .cyber-payout-entry { display: inline-flex; align-items: baseline; gap: .625rem; min-height: 40px; padding: 10px 4px; white-space: nowrap; }
.cyber-theme .cyber-payout-date { color: var(--cy-muted); font: 600 .8125rem/1 var(--cy-mono); }
.cyber-theme .cyber-payout-amount { color: var(--cy-money); font: 700 1.125rem/1 var(--cy-mono); font-variant-numeric: tabular-nums; }
.cyber-theme .cyber-payout-note { color: var(--cy-text); font-size: .8125rem; }
@media (max-width: 480px) {
  .cyber-theme .cyber-payout-total { display: block; margin-left: 0; }
}

/* --- 経済指標カレンダー ------------------------------------------------------
   ウィジェットは非透過。額縁の色合わせは --cy-calendar-widget-bg 一か所で調整する。
   必要ならこの節内でテーマ別に上書きする。iframe 内の色は TradingView が管理する。 */
.cyber-theme .cyber-calendar-page {
  --cy-calendar-line: color-mix(in srgb, var(--cy-border) 30%, var(--cy-surface));
  min-width: 0;
}
.cyber-theme .cyber-calendar-page [hidden] { display: none !important; }
.cyber-theme .cyber-calendar-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: center;
  gap: 32px;
  padding: 36px;
  border: 1px solid var(--cy-calendar-line);
  border-top: 2px solid var(--cy-mint);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--cy-mint) 12%, transparent), transparent 60%),
    radial-gradient(ellipse at 0 100%, color-mix(in srgb, var(--cy-pink) 8%, transparent), transparent 55%),
    var(--cy-surface);
}
.cyber-theme .cyber-calendar-eyebrow {
  display: flex; align-items: center; gap: 10px;
  color: var(--cy-mint); font-size: .75rem; font-weight: 700; letter-spacing: .12em;
}
.cyber-theme .cyber-calendar-eyebrow::before {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cy-mint);
  box-shadow: 0 0 14px color-mix(in srgb, var(--cy-mint) 50%, transparent); content: "";
}
.cyber-theme .cyber-calendar-hero h1 {
  margin-top: 12px; font-size: clamp(1.65rem, 3.4vw, 2.5rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.4;
}
.cyber-theme .cyber-calendar-intro { margin-top: 16px; color: var(--cy-muted); font-size: .875rem; line-height: 1.9; }
.cyber-theme .cyber-calendar-jumps { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 20px; }
.cyber-theme .cyber-calendar-jumps a {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  color: var(--cy-mint); font-size: .8125rem; font-weight: 700;
  text-decoration: underline; text-underline-offset: 5px;
}
.cyber-theme .cyber-calendar-jumps a:last-child { color: var(--cy-text); }
.cyber-theme .cyber-calendar-jumps a:last-child span { color: var(--cy-pink); }
.cyber-theme .cyber-calendar-scope { padding: 20px; border: 1px solid var(--cy-calendar-line); border-radius: 10px; background: var(--cy-surface); }
.cyber-theme .cyber-calendar-scope > p:first-child { color: var(--cy-muted); font-size: .6875rem; letter-spacing: .1em; }
.cyber-theme .cyber-calendar-scope dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block: 14px; }
.cyber-theme .cyber-calendar-scope dl > div + div { padding-left: 16px; border-left: 1px solid var(--cy-calendar-line); }
.cyber-theme .cyber-calendar-scope dt { color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-calendar-scope dd { display: flex; align-items: baseline; gap: 4px; min-height: 42px; font-size: .8125rem; font-weight: 700; }
.cyber-theme .cyber-calendar-scope dl > div:last-child dd { padding-top: 7px; font-size: 1.125rem; }
.cyber-theme .cyber-calendar-number { font: 600 2.25rem/1.2 var(--cy-mono); font-variant-numeric: tabular-nums; }
.cyber-theme .cyber-calendar-divider { color: var(--cy-pink); font-family: var(--cy-mono); }
.cyber-theme .cyber-calendar-scope-note { color: var(--cy-muted); font-size: .6875rem; line-height: 1.8; }
.cyber-theme .cyber-calendar {
  /* 実機の Chrome で採色（2026-09-11）。TradingView の非透過ウィジェットは暗 #000000 / 明 #FFFFFF で塗り、
     自前の 1px 枠（暗 #4A4A4A / 明 #EBEBEB）を持つ。外部の色なのでトークンではなく実測値を置く */
  --cy-calendar-widget-bg: #000000;
  --cy-calendar-height: clamp(640px, 78svh, 820px);
  margin-top: 28px;
  border: 1px solid var(--cy-calendar-line);
  border-radius: 14px;
  background: var(--cy-surface);
}
.cyber-theme[data-theme="light"] .cyber-calendar { --cy-calendar-widget-bg: #FFFFFF; }
@media (prefers-color-scheme: light) {
  .cyber-theme:not([data-theme="dark"]) .cyber-calendar { --cy-calendar-widget-bg: #FFFFFF; }
}
.cyber-theme .cyber-calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 24px 16px; }
.cyber-theme .cyber-calendar-section-label { display: flex; align-items: center; gap: 10px; color: var(--cy-muted); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; }
.cyber-theme .cyber-calendar-section-label span { color: var(--cy-mint); font: 600 .75rem/1.5 var(--cy-mono); font-variant-numeric: tabular-nums; }
.cyber-theme .cyber-calendar-toolbar h2, .cyber-theme .cyber-calendar-guide h2 { margin-top: 6px; font-size: 1.25rem; font-weight: 750; line-height: 1.5; }
.cyber-theme .cyber-calendar-provider { padding: 5px 10px; border: 1px solid var(--cy-calendar-line); border-radius: 5px; color: var(--cy-muted); font-size: .6875rem; }
.cyber-theme .cyber-calendar-context { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; padding: 0 24px 16px; color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-calendar-status { padding: 10px 24px; border-top: 1px solid var(--cy-calendar-line); color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-calendar-status:empty { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
.cyber-theme .cyber-calendar[data-calendar-state="waiting"] .cyber-calendar-status { color: var(--cy-text); border-left: 3px solid var(--cy-pink); }
/* 数字の対応表は独立した案内として置く。iframe 内の列位置には合わせない。
   狭幅の略記案内は、ページ幅ではなくカレンダーの実幅で切り替える。 */
.cyber-theme .cyber-calendar { container: calendar / inline-size; }
.cyber-theme .cyber-calendar-reading {
  margin: 0 24px 16px; padding: 16px 20px;
  border: 1px solid var(--cy-calendar-line); border-left: 3px solid var(--cy-mint);
  border-radius: 8px; background: var(--cy-raised); color: var(--cy-text);
}
.cyber-theme .cyber-calendar-reading-main { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.cyber-theme .cyber-calendar-reading-title { flex: 1 1 12rem; font-size: .875rem; font-weight: 700; }
.cyber-theme .cyber-calendar-order { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 20rem; max-width: 28rem; }
.cyber-theme .cyber-calendar-order > div { min-width: 0; padding-inline: 12px; text-align: center; }
.cyber-theme .cyber-calendar-order > div + div { border-left: 1px solid var(--cy-calendar-line); }
.cyber-theme .cyber-calendar-order dt { color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-calendar-order dd { font-size: 1.125rem; font-weight: 750; }
.cyber-theme .cyber-calendar-reading-note { margin-top: 12px; color: var(--cy-muted); font-size: .75rem; line-height: 1.8; }
.cyber-theme .cyber-calendar-reading-compact { display: none; }
/* この幅では viewport の左右余白も 0 なので、コンテナ幅が iframe 幅と一致する。
   コンテナクエリ非対応時も、基本の「左・中央・右」の案内をそのまま使える。 */
@container calendar (width < 500px) {
  .cyber-theme .cyber-calendar-reading-wide { display: none; }
  .cyber-theme .cyber-calendar-reading-compact { display: inline; }
  .cyber-theme .cyber-calendar-order > div { display: flex; justify-content: center; align-items: baseline; gap: 4px; padding-inline: 4px; }
  .cyber-theme .cyber-calendar-order dd { font-size: .875rem; }
}
/* 額縁の枠・余白は重ねない。重ねると暗色で二重枠と紺の帯が出た。ウィジェット自身の枠を見せる */
.cyber-theme .cyber-calendar-viewport { position: relative; margin-inline: 8px; overflow: hidden; border-radius: 6px; background: var(--cy-calendar-widget-bg); }
.cyber-theme .cyber-calendar-frame { display: block; width: 100%; height: var(--cy-calendar-height); border: 0; background: var(--cy-calendar-widget-bg); }
/* 親テーマを継承させず、実際に選んだ URL の配色に一致させる。noscript も暗色固定。 */
.cyber-theme .cyber-calendar-frame[data-widget-theme="dark"] { color-scheme: dark; }
.cyber-theme .cyber-calendar-frame[data-widget-theme="light"] { color-scheme: light; }
.cyber-theme .cyber-calendar-loading {
  position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 24px;
  background: var(--cy-calendar-widget-bg); color: var(--cy-text); text-align: center; pointer-events: none;
}
.cyber-theme .cyber-calendar-loading p { font-size: .875rem; font-weight: 700; }
.cyber-theme .cyber-calendar-loading > span:last-child { color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-calendar-loading-mark { display: flex; align-items: center; gap: 6px; height: 48px; margin-bottom: 8px; }
.cyber-theme .cyber-calendar-loading-mark i { width: 5px; height: 24px; border-radius: 2px; background: var(--cy-mint); }
.cyber-theme .cyber-calendar-loading-mark i:nth-child(2) { height: 44px; }
.cyber-theme .cyber-calendar-loading-mark i:nth-child(3) { height: 32px; background: var(--cy-pink); }
.cyber-theme .cyber-calendar-noscript { padding: 12px; color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cyber-calendar-support { padding: 12px 24px 8px; }
.cyber-theme .cyber-calendar-attribution {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--cy-mint); font-size: .75rem; text-decoration: underline; text-underline-offset: 4px;
}
.cyber-theme .cyber-calendar-help { border-top: 1px solid var(--cy-calendar-line); margin-top: 8px; font-size: .8125rem; }
.cyber-theme .cyber-calendar-help summary { min-height: 48px; padding-block: 12px; color: var(--cy-muted); cursor: pointer; }
.cyber-theme .cyber-calendar-help summary:hover, .cyber-theme .cyber-calendar-help[open] summary { color: var(--cy-text); }
.cyber-theme .cyber-calendar-help-body { padding-block: 4px 16px; }
.cyber-theme .cyber-calendar-help-body > p { max-width: 52rem; color: var(--cy-muted); }
.cyber-theme .cyber-calendar-help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 12px; }
.cyber-theme .cyber-calendar-retry {
  min-height: 44px; padding: 8px 16px; border: 1px solid var(--cy-mint); border-radius: 6px;
  background: var(--cy-surface); color: var(--cy-mint); font-size: .8125rem; font-weight: 700; cursor: pointer;
}
.cyber-theme .cyber-calendar-retry:hover { background: var(--cy-raised); }
.cyber-theme .cyber-calendar-help-actions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cy-mint); text-decoration: underline; text-underline-offset: 4px; }
.cyber-theme .cyber-calendar-help-note { margin-top: 12px; font-size: .75rem; }
.cyber-theme .cyber-calendar-guide { margin-top: 40px; }
.cyber-theme .cyber-calendar-guide-heading > p:last-child { max-width: 48rem; margin-top: 10px; color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cyber-calendar-guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.cyber-theme .cyber-calendar-guide-card { min-width: 0; padding: 24px; border: 1px solid var(--cy-calendar-line); border-radius: 12px; background: var(--cy-surface); }
.cyber-theme .cyber-calendar-guide-card h3 { margin-bottom: 16px; padding-left: 12px; border-left: 3px solid var(--cy-mint); font-size: .9375rem; font-weight: 700; }
.cyber-theme .cyber-calendar-guide-card + .cyber-calendar-guide-card h3 { border-color: var(--cy-pink); }
.cyber-theme .cyber-calendar-values > div, .cyber-theme .cyber-calendar-glossary > div { display: grid; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--cy-calendar-line); font-size: .8125rem; }
.cyber-theme .cyber-calendar-values > div { grid-template-columns: 3.5em minmax(0, 1fr); }
.cyber-theme .cyber-calendar-glossary > div { grid-template-columns: 7.5em minmax(0, 1fr); }
.cyber-theme .cyber-calendar-values dt { font-weight: 700; }
.cyber-theme .cyber-calendar-glossary dt { font: 600 .8125rem/1.8 var(--cy-mono); }
.cyber-theme .cyber-calendar-glossary dt span { color: var(--cy-muted); font-size: .6875rem; font-weight: 400; }
.cyber-theme .cyber-calendar-glossary abbr { text-decoration: none; }
.cyber-theme .cyber-calendar-values dd, .cyber-theme .cyber-calendar-glossary dd { color: var(--cy-muted); }
.cyber-theme .cyber-calendar-guide-note { margin-top: 16px; color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-calendar-disclaimer { margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--cy-calendar-line); color: var(--cy-muted); font-size: .75rem; line-height: 1.9; }
.cyber-theme .cyber-calendar-disclaimer p + p { margin-top: 8px; }
.cyber-theme .cyber-calendar-disclaimer a { color: var(--cy-mint); text-decoration: underline; text-underline-offset: 4px; }
.cyber-theme .cyber-calendar-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) {
  .cyber-theme .cyber-calendar-hero { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  .cyber-theme .cyber-calendar-scope { display: grid; grid-template-columns: minmax(180px, 1fr) 1fr; gap: 0 24px; }
  .cyber-theme .cyber-calendar-scope > p:first-child { grid-column: 1 / -1; }
  .cyber-theme .cyber-calendar-scope dl { margin-bottom: 0; }
  .cyber-theme .cyber-calendar-scope-note { align-self: center; margin-top: 12px; }
}
@media (max-width: 640px) {
  .cyber-theme .cyber-calendar-hero { padding: 24px 20px; gap: 20px; }
  .cyber-theme .cyber-calendar-hero h1 { font-size: clamp(1.375rem, 5.6vw, 1.9rem); }
  .cyber-theme .cyber-calendar-scope { display: block; padding: 16px; }
  .cyber-theme .cyber-calendar-scope dl { margin-block: 8px; }
  .cyber-theme .cyber-calendar-scope-note { margin-top: 8px; }
  .cyber-theme .cyber-calendar { --cy-calendar-height: clamp(600px, 80svh, 760px); margin-top: 20px; }
  .cyber-theme .cyber-calendar-toolbar { padding: 20px 16px 12px; gap: 12px; }
  .cyber-theme .cyber-calendar-context { padding: 0 16px 16px; }
  .cyber-theme .cyber-calendar-status { padding-inline: 16px; }
  .cyber-theme .cyber-calendar-reading { margin-inline: 16px; padding: 14px 12px; }
  .cyber-theme .cyber-calendar-viewport { margin-inline: 0; border-radius: 0; }
  .cyber-theme .cyber-calendar-support { padding-inline: 16px; }
  .cyber-theme .cyber-calendar-guide { margin-top: 28px; }
  .cyber-theme .cyber-calendar-guide-grid { grid-template-columns: 1fr; gap: 16px; }
  .cyber-theme .cyber-calendar-guide-card { padding: 20px 16px; }
  .cyber-theme .cyber-calendar-glossary > div { grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; }
}

/* --- トップのキービジュアル（オーナー支給の背景、2026-09-11） -------------------
   左 6 割が文字のための暗い余白、右にコインとカード。パネルの縦横比（約 2.1:1）に
   合わせて描かれているので、横並びのときは cover でほぼ全体が見える。
   地の色 #11172A は絵の中央の無地から採った（読み込み前・縦積みの下半分に使う）。 */
.cyber-theme .cyber-hero-panel {
  background: #11172A url("../img/hero/hero-bg.webp") right center / cover no-repeat;
  color: var(--cy-text);
}
/* 縦積み（キャラが上・文章が下）。cover のままだとコインが文章の真後ろに来て読みにくい。
   絵を上端に寄せてコインをキャラの後ろに置き、文章の手前で地の色へ溶かす。
   幅は max() で必ずパネル幅以上にする（タブレット幅で左に隙間を出さない）。 */
@media (max-width: 899px) {
  .cyber-theme .cyber-hero-panel {
    background:
      linear-gradient(to bottom, rgb(17 23 42 / 0) 230px, rgb(17 23 42) 340px),
      url("../img/hero/hero-bg.webp") right top / max(100%, 722px) auto no-repeat,
      #11172A;
  }
}
/* 中身に合わせて伸ばす。.cyber-stage の固定高（520/480/440/390px）と overflow: hidden の
   ままだと、縦積みの画面で説明文と「無料会員登録」ボタンが切れて見えなかった
   （375px 幅で中身 720px に対し枠 390px、820px 幅で 633px に対し 480px）。 */
.cyber-theme .cyber-hero-panel.cyber-stage { height: auto; }

/* 絵が暗い前提なので、明るいテーマでもこの面だけは暗色テーマの値で描く */
.cyber-theme[data-theme="light"] .cyber-hero-panel {
  --cy-bg: #0A0B14; --cy-surface: #141726; --cy-raised: #1D2136; --cy-border: #8B93AE;
  --cy-text: #E8EAF5; --cy-muted: #9AA0BC; --cy-mint: #3DE1F0; --cy-pink: #FF4FA3;
  --cy-glow: 0 0 0 1px rgba(61, 225, 240, .35), 0 18px 48px -24px rgba(61, 225, 240, .55);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  .cyber-theme:not([data-theme="dark"]) .cyber-hero-panel {
    --cy-bg: #0A0B14; --cy-surface: #141726; --cy-raised: #1D2136; --cy-border: #8B93AE;
    --cy-text: #E8EAF5; --cy-muted: #9AA0BC; --cy-mint: #3DE1F0; --cy-pink: #FF4FA3;
    --cy-glow: 0 0 0 1px rgba(61, 225, 240, .35), 0 18px 48px -24px rgba(61, 225, 240, .55);
    color-scheme: dark;
  }
}

/* --- トップページ：ご利用の流れ ---------------------------------------------
   手順は縦から横へ切り替える。文章・還元条件は常時表示し、番号だけを装飾する。 */
.cyber-theme .cyber-flow {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--cy-border);
  color: var(--cy-text);
  font-size: .875rem;
  overflow-wrap: anywhere;
}
.cyber-theme .cyber-flow__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
}
.cyber-theme .cyber-flow h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 800; line-height: 1.5; }
.cyber-theme .cyber-flow__intro { margin-top: .5rem; color: var(--cy-muted); }
.cyber-theme .cyber-flow__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}
.cyber-theme .cyber-flow__step { position: relative; min-width: 0; padding-left: 3.5rem; }
.cyber-theme .cyber-flow__step:not(:last-child)::after {
  position: absolute;
  top: 3rem;
  bottom: -.75rem;
  left: 1.25rem;
  width: 1px;
  background: var(--cy-border);
  content: "";
  pointer-events: none;
}
.cyber-theme .cyber-flow__number {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--cy-mint);
  border-radius: 50%;
  background: var(--cy-bg);
  color: var(--cy-mint);
  font: 700 .875rem/1 var(--cy-mono);
}
.cyber-theme .cyber-flow__content { min-width: 0; }
.cyber-theme .cyber-flow h3 { font-size: 1rem; font-weight: 700; line-height: 1.65; }
.cyber-theme .cyber-flow__content h3 { padding-block: .375rem; }
.cyber-theme .cyber-flow__roles { margin-top: .875rem; }
.cyber-theme .cyber-flow__roles dt { margin-top: .875rem; color: var(--cy-mint); font-size: .75rem; font-weight: 700; }
.cyber-theme .cyber-flow__roles dt:first-child { margin-top: 0; }
.cyber-theme .cyber-flow__roles .cyber-flow__operator { color: var(--cy-muted); }
.cyber-theme .cyber-flow__roles dd { margin: .25rem 0 0; }
.cyber-theme .cyber-flow__note { margin-top: .875rem; color: var(--cy-muted); font-size: .8125rem; line-height: 1.85; }
.cyber-theme .cyber-flow__transparency {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--cy-border);
  border-radius: 1rem;
  background: var(--cy-surface);
}
.cyber-theme .cyber-flow__rate,
.cyber-theme .cyber-flow__visibility { min-width: 0; padding: 1.25rem; }
.cyber-theme .cyber-flow__visibility { border-top: 1px solid var(--cy-border); }
.cyber-theme .cyber-flow__transparency h3 + p { margin-top: .875rem; }
.cyber-theme .cyber-flow__percentage {
  display: inline-block;
  padding-inline: .125rem;
  color: var(--cy-text);
  font: 800 2.75rem/1.4 var(--cy-mono);
  letter-spacing: -.04em;
  white-space: nowrap;
}
.cyber-theme .cyber-flow__percentage span { font-size: 1.5rem; }
.cyber-theme .cyber-flow__links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .75rem; }
.cyber-theme .cyber-flow__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.cyber-theme .cyber-flow__footer > p { font-weight: 700; }
.cyber-theme .cyber-flow__actions { display: flex; flex-wrap: wrap; gap: .75rem; width: 100%; }
.cyber-theme .cyber-flow__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  width: 100%;
  padding: .75rem 1.25rem;
  border-radius: .5rem;
  font-weight: 700;
  text-align: center;
}
@media (min-width: 640px) {
  .cyber-theme .cyber-flow__actions,
  .cyber-theme .cyber-flow__cta { width: auto; }
}
@media (min-width: 768px) {
  .cyber-theme .cyber-flow__transparency { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cyber-theme .cyber-flow__rate,
  .cyber-theme .cyber-flow__visibility { padding: 1.5rem; }
  .cyber-theme .cyber-flow__visibility { border-top: 0; border-left: 1px solid var(--cy-border); }
}
@media (min-width: 1024px) {
  .cyber-theme .cyber-flow__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; margin-block: 2.5rem; }
  .cyber-theme .cyber-flow__step { padding-left: 0; }
  .cyber-theme .cyber-flow__number { position: static; }
  .cyber-theme .cyber-flow__content { margin-top: 1rem; }
  .cyber-theme .cyber-flow__step:not(:last-child)::after {
    top: 1.25rem;
    right: -1.25rem;
    bottom: auto;
    left: 3rem;
    width: auto;
    height: 1px;
  }
}
/* 既存の IntersectionObserver に接続する。JS 無効・監視非対応時も隠さない。
   動作を許可した場合だけ番号を軽く動かし、停止時は pending が残っていても静止する。 */
@media (prefers-reduced-motion: no-preference) {
  .cyber-theme[data-cyber-motion="on"] .cyber-flow__step[data-cyber-reveal] .cyber-flow__number {
    transition: opacity var(--cy-reveal) var(--cy-ease), transform var(--cy-reveal) var(--cy-ease);
  }
  .cyber-theme[data-cyber-motion="on"] .cyber-flow__step[data-cyber-pending="true"] .cyber-flow__number {
    opacity: .55;
    transform: translateY(.25rem);
  }
}

/* --- ブローカーカード：面・上端の線・矢印の短いリアクション ----------------
   金額の島は data-cyber-static のまま。カード自体は移動・拡大せず、
   背景・文字色・明度も変えないため、数字と還元条件は静止して読めます。
   JS の decorative() も金融情報を含むカードを引き続き除外します。
   動くのは外枠と影 (220ms)、線 (220/180ms)、矢印 (180ms) の3か所だけ。
   停止中・JS 無効時は外枠・影・完成した線で静的に強調します。 */
.cyber-theme .card.cyber-broker-card {
  position: relative;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--cy-text) 5%, transparent);
}
.cyber-theme .card.cyber-broker-card::before {
  position: absolute;
  top: -1px;
  left: 24px;
  width: 72px;
  height: 2px;
  border-radius: 2px;
  background: var(--cy-mint);
  opacity: 0;
  content: "";
  pointer-events: none;
}
.cyber-theme .cyber-broker-card > .cyber-broker-link { gap: .5rem; }
.cyber-theme .cyber-broker-card .cyber-broker-arrow {
  display: inline-block;
  flex-shrink: 0;
}

/* タップで残る focus とキーボードの focus-visible を区別します。
   カードに tabindex は足さず、既存リンクのフォーカス枠も切りません。 */
.cyber-theme .card.cyber-broker-card:focus-within:has(:focus-visible) {
  border-color: var(--cy-mint);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--cy-mint) 28%, transparent);
}
.cyber-theme .card.cyber-broker-card:focus-within:has(:focus-visible)::before {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .cyber-theme .card.cyber-broker-card:hover {
    border-color: var(--cy-mint);
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--cy-mint) 28%, transparent);
  }
  .cyber-theme .card.cyber-broker-card:hover::before { opacity: 1; }
}

/* 動きは必ず motion=on と OS 設定の両方を満たす場合だけ。
   初期 transform もここに閉じ、停止へ切り替えた瞬間に通常位置へ戻します。 */
@media (prefers-reduced-motion: no-preference) {
  .cyber-theme[data-cyber-motion="on"] .card.cyber-broker-card {
    transition: border-color 220ms var(--cy-ease), box-shadow 220ms var(--cy-ease);
  }
  .cyber-theme[data-cyber-motion="on"] .card.cyber-broker-card::before {
    transform: scaleX(.333333);
    transform-origin: left;
    transition: transform 220ms var(--cy-ease), opacity 180ms var(--cy-ease);
  }
  .cyber-theme[data-cyber-motion="on"] .cyber-broker-card .cyber-broker-arrow {
    transition: transform 180ms var(--cy-ease);
  }
  .cyber-theme[data-cyber-motion="on"] .card.cyber-broker-card:focus-within:has(:focus-visible)::before {
    transform: scaleX(1);
  }
  .cyber-theme[data-cyber-motion="on"] .cyber-broker-card:focus-within:has(:focus-visible) .cyber-broker-arrow {
    transform: translateX(3px);
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .cyber-theme[data-cyber-motion="on"] .card.cyber-broker-card:hover::before {
    transform: scaleX(1);
  }
  .cyber-theme[data-cyber-motion="on"] .cyber-broker-card:hover .cyber-broker-arrow {
    transform: translateX(3px);
  }
}

/* --- COT：週次の偏りと変化 / マーケットメニュー --------------------------
   通貨を先頭に、符号・文言・矢印を色と併用します。数字はアニメーションしません。
   新しい色は作らず、既存の --cy-* に追従して両テーマを表示します。 */
.cyber-theme .site-header__market { position: relative; min-width: 0; }
.cyber-theme .site-header .site-header__market-toggle {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
}
.cyber-theme .site-header__market-toggle::-webkit-details-marker { display: none; }
.cyber-theme .site-header__market-chevron {
  width: 7px;
  height: 7px;
  margin: -3px 2px 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.cyber-theme .site-header__market[open] .site-header__market-chevron { margin-top: 3px; transform: rotate(225deg); }
.cyber-theme .site-header__market:has([aria-current]) > summary {
  color: var(--cy-mint);
  background: var(--cy-raised);
}
.cyber-theme .site-header__market:has([aria-current]) > summary::after { transform: scaleX(1); opacity: 1; }
.cyber-theme .site-header__market-toggle:focus-visible { outline: 3px solid var(--cy-mint); outline-offset: 3px; }
.cyber-theme .site-header__market-links {
  margin: 4px 0 8px 12px;
  padding-left: 8px;
  border-left: 2px solid var(--cy-border);
}
/* display を上書きしても、閉じた details の子リンクを露出させません。 */
.cyber-theme .site-header__market:not([open]) > .site-header__market-links { display: none; }
.cyber-theme .site-header .site-header__market-links .nav-link { display: flex; white-space: normal; }
@media (min-width: 1024px) {
  .cyber-theme :where(.site-header:not([data-nav-collapsed="true"])) .site-header__market { flex-shrink: 0; }
  .cyber-theme :where(.site-header:not([data-nav-collapsed="true"])) .site-header__market-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1;
    inline-size: max-content;
    max-inline-size: min(24rem, calc(100vw - 32px));
    margin: 0;
    padding: 8px;
    border: 1px solid var(--cy-border);
    border-radius: .75rem;
    background: var(--cy-surface);
    box-shadow: 0 14px 32px -20px var(--cy-border);
  }
  .cyber-theme .site-header:where(:not([data-nav-collapsed="true"])) .site-header__market-links .nav-link { padding-inline: 12px; }
}
@media (forced-colors: active) {
  .cyber-theme .site-header__market:has([aria-current]) > summary { text-decoration: underline; }
}

.cyber-theme .cyber-cot-page { min-width: 0; }
.cyber-theme .cyber-cot-hero { display: grid; gap: 24px; padding-block: 12px 32px; }
.cyber-theme .cyber-cot-eyebrow { color: var(--cy-mint); font-size: .75rem; font-weight: 700; letter-spacing: .06em; }
.cyber-theme .cyber-cot-eyebrow > span { padding-inline: 8px; color: var(--cy-muted); }
.cyber-theme .cyber-cot-hero h1 { margin-top: 14px; font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.4; }
.cyber-theme .cyber-cot-hero h1 > span { display: inline-block; color: var(--cy-muted); font-size: .65em; letter-spacing: 0; }
.cyber-theme .cyber-cot-intro { margin-top: 16px; color: var(--cy-muted); font-size: .9375rem; line-height: 1.9; }
.cyber-theme .cyber-cot-guide-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 12px; color: var(--cy-mint); font-size: .8125rem; text-decoration: underline; text-underline-offset: 5px; }
.cyber-theme .cyber-cot-asof { padding: 22px 24px; border: 1px solid var(--cy-border); border-top: 3px solid var(--cy-mint); border-radius: 4px 4px 16px 4px; background: var(--cy-surface); }
.cyber-theme .cyber-cot-label { color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-cot-asof > time { display: block; margin-top: 8px; font: 700 clamp(1.65rem, 3vw, 2rem)/1.4 var(--cy-mono); font-variant-numeric: tabular-nums; letter-spacing: .015em; }
.cyber-theme .cyber-cot-asof-caption { margin-top: 4px; font-size: .8125rem; }
.cyber-theme .cyber-cot-asof-pending { margin-top: 8px; font-weight: 700; }
.cyber-theme .cyber-cot-release { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--cy-raised); color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-cot-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-block: 16px; border-block: 1px solid var(--cy-border); }
.cyber-theme .cyber-cot-jumps { display: flex; flex-wrap: wrap; gap: 8px; }
.cyber-theme .cyber-cot-jumps a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--cy-border); border-radius: 6px; color: var(--cy-text); font-size: .8125rem; text-decoration: none; }
.cyber-theme .cyber-cot-jumps a:first-child { border-color: var(--cy-mint); }
.cyber-theme .cyber-cot-jumps a:hover { color: var(--cy-mint); background: var(--cy-surface); }
.cyber-theme .cyber-cot-jumps a > span { color: var(--cy-muted); font: .75rem var(--cy-mono); }
.cyber-theme .cyber-cot-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-cot-group { margin-top: 36px; }
.cyber-theme .cyber-cot-group-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 16px; }
.cyber-theme .cyber-cot-group-title { display: flex; align-items: center; gap: 12px; }
.cyber-theme .cyber-cot-group-title > span { color: var(--cy-muted); font: .75rem var(--cy-mono); }
.cyber-theme .cyber-cot-group h2 { font-size: 1.375rem; font-weight: 800; }
.cyber-theme .cyber-cot-group-heading > p { color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cyber-cot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.cyber-theme .cyber-cot-card { min-width: 0; padding: 20px; border: 1px solid var(--cy-ui-line); border-radius: var(--cy-ui-radius); background: var(--cy-surface); overflow-wrap: anywhere; }
.cyber-theme .cyber-cot-group--currencies .cyber-cot-card { border-top: 2px solid var(--cy-mint); }
.cyber-theme .cyber-cot-card-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cyber-theme .cyber-cot-card h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.6; }
.cyber-theme .cyber-cot-positive { color: var(--cy-mint); }
.cyber-theme .cyber-cot-negative { color: var(--cy-pink); }
.cyber-theme .cyber-cot-neutral { color: var(--cy-muted); }
.cyber-theme .cyber-cot-position { padding: 3px 8px; border: 1px solid currentColor; border-radius: 4px; font-size: .6875rem; font-weight: 700; line-height: 1.5; white-space: normal; max-inline-size: 100%; overflow-wrap: anywhere; }
.cyber-theme .cyber-cot-net { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cyber-theme .cyber-cot-net strong { min-width: 0; font: 700 clamp(1.75rem, 2.6vw, 2.125rem)/1.35 var(--cy-mono); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.cyber-theme .cyber-cot-net > span { color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cyber-cot-change { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; min-height: 76px; margin-top: 18px; padding: 12px; border-radius: 6px; background: var(--cy-raised); font-size: .8125rem; }
.cyber-theme .cyber-cot-change > div { flex: 1 0 auto; max-width: 100%; }
.cyber-theme .cyber-cot-change-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; max-width: 100%; }
.cyber-theme .cyber-cot-change-value strong { min-width: 0; font: 700 1.3125rem/1.4 var(--cy-mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.cyber-theme .cyber-cot-change-value > span { color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-cot-chart { margin-top: 22px; }
.cyber-theme .cyber-cot-chart figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; color: var(--cy-muted); font-size: .8125rem; line-height: 1.8; }
.cyber-theme .cyber-cot-zero-key { display: inline-flex; align-items: center; gap: 5px; }
.cyber-theme .cyber-cot-zero-key::before { width: 12px; border-top: 1px dashed currentColor; content: ""; }
.cyber-theme .cyber-cot-spark { display: block; width: 100%; height: 140px; margin-top: 4px; }
.cyber-theme .cyber-cot-chart-grid { stroke: var(--cy-border); stroke-width: 1; opacity: .2; }
.cyber-theme .cyber-cot-zero { stroke: var(--cy-muted); stroke-width: 1; stroke-dasharray: 4 4; }
.cyber-theme .cyber-cot-line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cyber-theme .cyber-cot-endpoint { fill: currentColor; stroke: var(--cy-surface); stroke-width: 1.5; }
.cyber-theme .cyber-cot-chart-axis { display: flex; justify-content: space-between; padding-inline: 8px; color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cyber-cot-chart-empty { padding-block: 40px; color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cyber-cot-range { margin-top: 18px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--cy-border) 35%, var(--cy-surface)); }
.cyber-theme .cyber-cot-range-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; color: var(--cy-muted); font-size: .8125rem; line-height: 1.8; }
.cyber-theme .cyber-cot-range-heading strong { color: var(--cy-text); font-weight: 700; }
.cyber-theme .cyber-cot-range-meter { display: block; width: 100%; height: 20px; margin-block: 8px; fill: none; stroke: var(--cy-muted); stroke-width: 1; }
.cyber-theme .cyber-cot-range-meter .cyber-cot-range-marker { stroke: var(--cy-text); stroke-width: 4; }
.cyber-theme .cyber-cot-range-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.cyber-theme .cyber-cot-range-values > div:last-child { text-align: right; }
.cyber-theme .cyber-cot-range-values dt { color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cyber-cot-range-values dt span { margin-left: 4px; }
.cyber-theme .cyber-cot-range-values dd { margin-top: 2px; font: .8125rem/1.5 var(--cy-mono); font-variant-numeric: tabular-nums; }
.cyber-theme .cyber-cot-stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--cy-border) 35%, var(--cy-surface)); }
.cyber-theme .cyber-cot-stats dt { color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cyber-cot-stats dd { margin-top: 4px; font: 700 .875rem/1.5 var(--cy-mono); font-variant-numeric: tabular-nums; }
.cyber-theme .cyber-cot-stats dd > span { margin-left: 4px; color: var(--cy-muted); font-family: var(--cy-font); font-size: .6875rem; font-weight: 400; }
.cyber-theme .cyber-cot-card-note { margin-top: 14px; color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-cot-guide { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--cy-border); }
.cyber-theme .cyber-cot-guide h2 { margin-top: 8px; font-size: 1.5rem; font-weight: 800; }
.cyber-theme .cyber-cot-guide-heading > p:last-child { margin-top: 8px; color: var(--cy-muted); font-size: .875rem; }
.cyber-theme .cyber-cot-definitions { display: grid; gap: 24px; margin-top: 28px; }
.cyber-theme .cyber-cot-definitions dt { margin-bottom: 8px; font-size: .875rem; font-weight: 700; }
.cyber-theme .cyber-cot-definitions dd { color: var(--cy-muted); font-size: .8125rem; line-height: 1.9; }
.cyber-theme .cyber-cot-caution { margin-top: 28px; padding: 20px 24px; border-left: 3px solid var(--cy-pink); background: var(--cy-surface); }
.cyber-theme .cyber-cot-caution h3 { font-size: .875rem; font-weight: 700; }
.cyber-theme .cyber-cot-caution p { margin-top: 8px; color: var(--cy-muted); font-size: .8125rem; line-height: 1.9; }
.cyber-theme .cyber-cot-caution strong { color: var(--cy-text); font-weight: 500; }
.cyber-theme .cyber-cot-source { margin-top: 20px; color: var(--cy-muted); font-size: .75rem; line-height: 2; }
.cyber-theme .cyber-cot-source a { color: var(--cy-mint); text-decoration: underline; text-underline-offset: 4px; }
.cyber-theme .cyber-cot-empty { padding: 40px 20px; border: 1px dashed var(--cy-border); border-radius: 12px; background: var(--cy-surface); text-align: center; }
.cyber-theme .cyber-cot-empty > span { color: var(--cy-mint); font: 2rem var(--cy-mono); }
.cyber-theme .cyber-cot-empty h2 { margin-top: 12px; font-size: 1.25rem; font-weight: 700; }
.cyber-theme .cyber-cot-empty p { margin-top: 12px; color: var(--cy-muted); font-size: .875rem; }
@media (min-width: 720px) {
  .cyber-theme .cyber-cot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cyber-theme .cyber-cot-definitions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
}
@media (min-width: 800px) {
  .cyber-theme .cyber-cot-hero { grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr); align-items: center; gap: 32px; padding-bottom: 36px; }
}
@media (min-width: 1024px) {
  .cyber-theme .cyber-cot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 419px) {
  .cyber-theme .cyber-cot-card { padding: 18px; }
  .cyber-theme .cyber-cot-jumps { gap: 6px; }
  .cyber-theme .cyber-cot-jumps a { gap: 6px; padding-inline: 9px; }
  .cyber-theme .cyber-cot-wide-break { display: none; }
}

/* --- COT detail: server-rendered numbers and axes, optional finite motion. ---
   COT is market data. Financial-island selectors above remain unchanged.
   The base state is complete; only opt-in animation rules alter it. */
.cyber-theme .cyber-cot-detail { min-width: 0; overflow-wrap: anywhere; }
.cyber-theme .cyber-cot-detail [hidden] { display: none !important; }
.cyber-theme .cyber-cot-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cyber-cot-breadcrumb a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cy-mint); text-decoration: underline; text-underline-offset: 5px; }
.cyber-theme .cyber-cot-detail-hero { display: grid; gap: 24px; padding-block: 24px 28px; }
.cyber-theme .cyber-cot-detail-hero h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin-top: 12px; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.3; }
/* 語順は言語で変わる（「金 の建玉」／"Posisi Emas"）。空きは flex の gap に任せ、余白を片側に固定しない */
.cyber-theme .cyber-cot-detail-hero h1 > .cyber-cot-detail-label { color: var(--cy-muted); font-size: .45em; font-weight: 500; letter-spacing: 0; }
.cyber-theme .cyber-cot-detail-sub { margin-top: 10px; color: var(--cy-muted); font: .75rem/1.7 var(--cy-mono); }
.cyber-theme .cyber-cot-detail-note { margin-top: 10px; color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cyber-cot-detail-asof { padding-left: 18px; border-left: 2px solid var(--cy-mint); }
.cyber-theme .cyber-cot-detail-asof > time { display: block; margin-top: 4px; font: 700 1.5rem/1.5 var(--cy-mono); font-variant-numeric: tabular-nums; }
.cyber-theme .cyber-cot-detail-asof > p:not(:first-child) { margin-top: 3px; color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-cot-detail-asof a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cy-mint); font-size: .75rem; text-decoration: underline; text-underline-offset: 4px; }
.cyber-theme .cyber-cot-detail-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cyber-theme .cyber-cot-metric { min-width: 0; padding: 18px; border: 1px solid var(--cy-ui-line); border-radius: var(--cy-ui-radius); background: var(--cy-surface); }
.cyber-theme .cyber-cot-metric--net { border-top: 3px solid var(--cy-mint); background: linear-gradient(120deg, color-mix(in srgb, var(--cy-mint) 7%, var(--cy-surface)), var(--cy-surface)); }
.cyber-theme .cyber-cot-metric dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 24px; color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-cot-metric-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 12px; }
.cyber-theme .cyber-cot-metric-value strong { min-width: 0; font: 700 clamp(1.3rem, 2.4vw, 1.875rem)/1.35 var(--cy-mono); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.045em; }
.cyber-theme .cyber-cot-metric-value > span { color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-cot-metric-caption { margin-top: 10px; color: var(--cy-muted); font-size: .6875rem; line-height: 1.8; }
.cyber-theme .cyber-cot-metric-caption > span { display: inline-block; }
.cyber-theme .cyber-cot-flip { display: inline-flex; align-items: center; padding: 2px 6px; border: 1px solid var(--cy-pink); border-radius: 4px; color: var(--cy-pink); font: 700 .6875rem/1.4 var(--cy-font); white-space: normal; max-inline-size: 100%; overflow-wrap: anywhere; vertical-align: middle; }
.cyber-theme .cyber-cot-detail-chart { margin-top: 28px; padding: 24px; border: 1px solid var(--cy-ui-line); border-radius: var(--cy-ui-radius); background: var(--cy-surface); }
.cyber-theme .cyber-cot-section-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
.cyber-theme .cyber-cot-section-heading h2 { margin-top: 6px; font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 800; line-height: 1.6; }
.cyber-theme .cyber-cot-section-heading h2 span { display: inline-block; margin-left: 6px; color: var(--cy-muted); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.cyber-theme .cyber-cot-section-heading > a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cy-mint); font-size: .75rem; text-decoration: underline; text-underline-offset: 4px; }
.cyber-theme .cyber-cot-section-heading > p { color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-cot-detail-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-block: 18px 22px; font-size: .75rem; }
.cyber-theme .cyber-cot-detail-legend .cyber-cot-zero-key { color: var(--cy-text); }
.cyber-theme .cyber-cot-detail-legend .cyber-cot-zero-key::before { width: 20px; border-top-width: 2px; }
.cyber-theme .cyber-cot-axis-heading { margin-bottom: 12px; color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-cot-axis-heading > span { margin-left: 8px; color: var(--cy-text); }
.cyber-theme .cyber-cot-chart-layout { display: grid; grid-template-columns: 90px minmax(0, 1fr); padding-right: 6px; }
.cyber-theme :is(.cyber-cot-y-axis, .cyber-cot-detail-plot) { display: block; width: 100%; height: 300px; min-width: 0; }
.cyber-theme .cyber-cot-detail-plot { overflow: visible; }
.cyber-theme .cyber-cot-line-layer { overflow: visible; pointer-events: none; }
.cyber-theme .cyber-cot-axis-label { fill: var(--cy-muted); font: .75rem var(--cy-mono); font-variant-numeric: tabular-nums; }
.cyber-theme .cyber-cot-x-axis { display: block; grid-column: 2; width: 100%; height: 46px; min-width: 0; overflow: visible; }
.cyber-theme .cyber-cot-axis-time { grid-column: 2; margin-top: 4px; color: var(--cy-muted); font-size: .75rem; text-align: right; }
.cyber-theme .cyber-cot-chart-buy { fill: color-mix(in srgb, var(--cy-mint) 5%, var(--cy-surface)); }
.cyber-theme .cyber-cot-chart-sell { fill: color-mix(in srgb, var(--cy-pink) 5%, var(--cy-surface)); }
.cyber-theme .cyber-cot-grid-line { stroke: var(--cy-border); stroke-width: 1; opacity: .2; }
.cyber-theme .cyber-cot-grid-line--vertical { stroke-dasharray: 2 5; opacity: .15; }
.cyber-theme .cyber-cot-axis { stroke: var(--cy-border); stroke-width: 1; opacity: .55; }
.cyber-theme .cyber-cot-detail-plot .cyber-cot-zero { stroke: var(--cy-text); stroke-width: 1.75; stroke-dasharray: 6 5; }
.cyber-theme .cyber-cot-detail-plot .cyber-cot-line { stroke: var(--cy-mint); stroke-width: 2.5; stroke-dasharray: none; stroke-dashoffset: 0; }
.cyber-theme .cyber-cot-data-point { fill: var(--cy-mint); stroke: var(--cy-surface); stroke-width: 1.5; }
.cyber-theme .cyber-cot-data-point[data-cot-selected] { r: 5px; fill: var(--cy-surface); stroke: var(--cy-mint); stroke-width: 3; }
.cyber-theme .cyber-cot-probe { stroke: var(--cy-muted); stroke-width: 1; stroke-dasharray: 3 4; pointer-events: none; }
.cyber-theme .cyber-cot-chart-caption { margin-top: 14px; color: var(--cy-muted); font-size: .6875rem; }
.cyber-theme .cyber-cot-chart-inspector { margin-top: 18px; padding: 16px; border-radius: 8px; background: var(--cy-raised); }
.cyber-theme .cyber-cot-chart-readout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 34px; }
.cyber-theme .cyber-cot-chart-readout > span:first-child { color: var(--cy-muted); font-size: .6875rem; }
.cyber-theme .cyber-cot-chart-readout time { font: .8125rem var(--cy-mono); }
.cyber-theme .cyber-cot-chart-readout strong { font: 700 1rem/1.6 var(--cy-mono); font-variant-numeric: tabular-nums; }
.cyber-theme .cyber-cot-chart-control { display: grid; gap: 4px; margin-top: 10px; }
.cyber-theme .cyber-cot-chart-control label { font-size: .75rem; }
.cyber-theme .cyber-cot-chart-control input { display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0; accent-color: var(--cy-mint); cursor: pointer; }
.cyber-theme .cyber-cot-chart-control input:disabled { cursor: default; }
.cyber-theme .cyber-cot-chart-control p { color: var(--cy-muted); font-size: .6875rem; }
.cyber-theme .cyber-cot-detail-range { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--cy-border) 35%, var(--cy-surface)); }
.cyber-theme .cyber-cot-detail-range dt { color: var(--cy-muted); font-size: .6875rem; }
.cyber-theme .cyber-cot-detail-range dd { margin-top: 5px; font: 700 clamp(.8125rem, 1.4vw, 1rem)/1.7 var(--cy-mono); font-variant-numeric: tabular-nums; }
.cyber-theme .cyber-cot-detail-range dd > span { color: var(--cy-muted); font: .6875rem var(--cy-font); }
.cyber-theme .cyber-cot-detail-table { min-width: 0; margin-top: 36px; }
.cyber-theme .cyber-cot-table-help { margin-block: 12px; color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-cot-table-scroll { width: 100%; border: 1px solid var(--cy-ui-line); border-radius: var(--cy-ui-radius); background: var(--cy-surface); overscroll-behavior-x: contain; scrollbar-color: var(--cy-border) var(--cy-surface); }
.cyber-theme .cyber-cot-table-scroll:focus-visible { outline-offset: 3px; }
.cyber-theme .cyber-cot-table-scroll table { width: 100%; min-width: 850px; border-spacing: 0; border-collapse: separate; font: .875rem/1.75 var(--cy-mono); font-variant-numeric: tabular-nums; white-space: normal; }
.cyber-theme .cyber-cot-table-scroll :is(th, td) { padding: 16px; border-bottom: 1px solid color-mix(in srgb, var(--cy-border) 25%, var(--cy-surface)); text-align: right; }
.cyber-theme .cyber-cot-table-scroll thead th { background: var(--cy-raised); color: var(--cy-muted); font: 500 .875rem/1.75 var(--cy-font); white-space: normal; overflow-wrap: anywhere; }
.cyber-theme .cyber-cot-table-scroll tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--cy-surface); text-align: left; box-shadow: 1px 0 color-mix(in srgb, var(--cy-border) 35%, var(--cy-surface)); }
.cyber-theme .cyber-cot-table-scroll thead tr > :first-child { background: var(--cy-raised); }
.cyber-theme .cyber-cot-table-scroll tbody th { font-weight: 500; }
.cyber-theme .cyber-cot-table-scroll tbody tr:first-child > * { background: color-mix(in srgb, var(--cy-mint) 5%, var(--cy-surface)); }
.cyber-theme .cyber-cot-table-scroll tbody tr:last-child > * { border-bottom: 0; }
.cyber-theme .cyber-cot-latest-tag { display: block; width: fit-content; margin-top: 4px; color: var(--cy-mint); font: 700 .8125rem/1.7 var(--cy-font); }
.cyber-theme .cyber-cot-table-scroll .cyber-cot-flip { margin-left: 6px; }
.cyber-theme .cyber-cot-table-footnote { margin-top: 12px; color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-cot-update { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--cy-border); }
.cyber-theme .cyber-cot-update-steps { display: grid; gap: 20px; margin: 20px 0 0; padding: 0; list-style: none; }
.cyber-theme .cyber-cot-update-steps li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.cyber-theme .cyber-cot-step-number { display: grid; flex-shrink: 0; place-items: center; width: 32px; height: 32px; border: 1px solid var(--cy-border); border-radius: 50%; color: var(--cy-mint); font: .6875rem var(--cy-mono); }
.cyber-theme .cyber-cot-update-steps h3 { color: var(--cy-muted); font-size: .75rem; font-weight: 500; }
.cyber-theme .cyber-cot-update-steps h3 + p { margin-top: 5px; font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cyber-theme .cyber-cot-update-steps p:last-child { margin-top: 5px; color: var(--cy-muted); font-size: .6875rem; }
.cyber-theme .cyber-cot-update-steps p > span { display: inline-block; font-size: .6875rem; font-weight: 400; }
.cyber-theme .cyber-cot-detail-notes { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--cy-border); }
.cyber-theme .cyber-cot-detail-notes > h2 { font-size: 1.25rem; font-weight: 800; }
.cyber-theme .cyber-cot-detail-notes .cyber-cot-definitions { margin-top: 20px; }
.cyber-theme .cyber-cot-return { margin-top: 24px; font-size: .875rem; }

/* Explicit links preserve selection and native keyboard / open-in-new-tab use. */
.cyber-theme .cyber-cot-name-link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; padding-block: 8px; text-decoration: underline; text-decoration-color: var(--cy-border); text-underline-offset: 5px; }
.cyber-theme .cyber-cot-detail-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; margin-top: 20px; padding: 12px; border: 1px solid color-mix(in srgb, var(--cy-mint) 45%, var(--cy-surface)); border-radius: 6px; color: var(--cy-mint); background: var(--cy-raised); text-decoration: none; }
.cyber-theme .cyber-cot-detail-link-title { display: block; font-size: .8125rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.cyber-theme .cyber-cot-detail-link-caption { display: block; margin-top: 5px; color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cyber-cot-detail-arrow { flex-shrink: 0; font-size: 1.25rem; }
.cyber-theme .cyber-cot-card:focus-within { border-color: var(--cy-mint); }
.cyber-theme .cyber-cot-detail-link:focus-visible { outline-offset: 3px; border-color: var(--cy-mint); }
@media (hover: hover) and (pointer: fine) {
  .cyber-theme .cyber-cot-card:hover { border-color: var(--cy-mint); }
  .cyber-theme .cyber-cot-detail-link:hover { border-color: var(--cy-mint); background: color-mix(in srgb, var(--cy-mint) 8%, var(--cy-raised)); }
  .cyber-theme .cyber-cot-name-link:hover { color: var(--cy-mint); }
  .cyber-theme .cyber-cot-table-scroll tbody tr:hover > * { background: var(--cy-raised); }
}
@media (min-width: 760px) {
  .cyber-theme .cyber-cot-detail-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; }
  .cyber-theme .cyber-cot-update-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1024px) {
  .cyber-theme .cyber-cot-detail-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .cyber-theme .cyber-cot-metric { padding: 14px; }
  .cyber-theme .cyber-cot-metric--net, .cyber-theme .cyber-cot-metric:last-child { grid-column: 1 / -1; }
  .cyber-theme .cyber-cot-metric--net .cyber-cot-metric-value strong { font-size: clamp(1.875rem, 8vw, 2.5rem); }
  .cyber-theme .cyber-cot-metric:last-child .cyber-cot-metric-value strong { font-size: 1.625rem; }
  .cyber-theme .cyber-cot-detail-chart { padding: 18px 14px; }
  .cyber-theme .cyber-cot-chart-layout { grid-template-columns: 82px minmax(0, 1fr); }
  .cyber-theme :is(.cyber-cot-y-axis, .cyber-cot-detail-plot) { height: 260px; }
  .cyber-theme .cyber-cot-axis-label { font-size: .6875rem; }
  .cyber-theme .cyber-cot-chart-inspector { padding: 12px; }
  .cyber-theme .cyber-cot-chart-readout { gap: 6px 12px; }
  .cyber-theme .cyber-cot-chart-readout > span:first-child { flex-basis: 100%; }
  .cyber-theme .cyber-cot-detail-range { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cyber-theme .cyber-cot-detail-range > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .cyber-theme .cyber-cot-detail-range dd { margin: 0; font-size: .875rem; }
  .cyber-theme .cyber-cot-table-scroll :is(th, td) { padding: 14px 12px; }
}

/* Only two entry effects; values are never counted up or hidden while waiting. */
@keyframes cyber-cot-value-enter {
  from { opacity: .65; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes cyber-cot-line-draw {
  from { stroke-dasharray: var(--cot-line-length); stroke-dashoffset: var(--cot-line-length); }
  to { stroke-dasharray: var(--cot-line-length); stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .cyber-theme[data-cyber-motion="on"] [data-cot-reveal="value"][data-cot-entered] { animation: cyber-cot-value-enter 360ms var(--cy-ease) both; }
  /* Dashes exist only during drawing; the base solid stroke also survives missed end events. */
  .cyber-theme[data-cyber-motion="on"] [data-cot-reveal="chart"][data-cot-entered] .cyber-cot-line[data-cot-drawing] { animation: cyber-cot-line-draw 900ms var(--cy-ease) backwards; }
  .cyber-theme[data-cyber-motion="on"] .cyber-cot-card { transition: border-color 180ms ease; }
  .cyber-theme[data-cyber-motion="on"] .cyber-cot-detail-link { transition: background-color 180ms ease, border-color 180ms ease; }
  .cyber-theme[data-cyber-motion="on"] .cyber-cot-detail-arrow { transition: transform 180ms var(--cy-ease); }
  .cyber-theme[data-cyber-motion="on"] .cyber-cot-detail-link:focus-visible .cyber-cot-detail-arrow { transform: translateX(3px); }
  .cyber-theme[data-cyber-motion="on"] .cyber-cot-table-scroll tbody tr > * { transition: background-color 140ms ease; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .cyber-theme[data-cyber-motion="on"] .cyber-cot-detail-link:hover .cyber-cot-detail-arrow { transform: translateX(3px); }
}
@media print {
  /* 表と余白の指定は、この下のデザインレビュー節の @media print にまとめてある */
  .cyber-theme [data-cot-reveal] { animation: none !important; transform: none !important; opacity: 1 !important; }
  .cyber-theme .cyber-cot-detail-plot .cyber-cot-line { animation: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}


/* --- トレード支援（準備中の案内ページと、メニューの「準備中」の印）-------------
   まだ中身が無いページを、何が来るのかだけ伝える形で置いておく。
   メニューでも「準備中」と分かるようにして、押してから気づくことを避ける。 */
.cyber-theme .site-header__soon {
  margin-left: 8px; padding: 1px 6px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cy-warning) 45%, transparent);
  color: var(--cy-warning); font-size: .625rem; font-weight: 700; letter-spacing: .04em;
}
.cyber-theme .cyber-soon { max-width: 52rem; margin-inline: auto; padding-block: 8px 24px; }
.cyber-theme .cyber-soon-hero { padding-bottom: 20px; border-bottom: 1px solid var(--cy-raised); }
.cyber-theme .cyber-soon-eyebrow {
  display: flex; align-items: center; gap: 4px;
  color: var(--cy-mint); font-size: .75rem; font-weight: 700; letter-spacing: .08em;
}
.cyber-theme .cyber-soon-badge {
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cy-warning) 45%, transparent);
  background: color-mix(in srgb, var(--cy-warning) 12%, transparent);
  color: var(--cy-warning); font-size: .6875rem;
}
.cyber-theme .cyber-soon h1 { margin-top: 10px; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; }
.cyber-theme .cyber-soon-lead { margin-top: 14px; color: var(--cy-muted); font-size: .9375rem; line-height: 2; }
.cyber-theme .cyber-soon-body, .cyber-theme .cyber-soon-meanwhile { margin-top: 28px; }
.cyber-theme .cyber-soon h2 { font-size: 1.125rem; font-weight: 700; }
.cyber-theme .cyber-soon-list { margin-top: 12px; display: grid; gap: 8px; }
.cyber-theme .cyber-soon-list li {
  position: relative; padding: 10px 14px 10px 30px; border-radius: 8px;
  border: 1px solid var(--cy-raised); background: var(--cy-surface);
  color: var(--cy-text); font-size: .875rem; line-height: 1.8;
}
.cyber-theme .cyber-soon-list li::before {
  content: ""; position: absolute; left: 14px; top: 1.15em;
  width: 6px; height: 6px; border-radius: 2px; background: var(--cy-mint);
}
.cyber-theme .cyber-soon-note { margin-top: 12px; color: var(--cy-muted); font-size: .8125rem; line-height: 1.9; }
.cyber-theme .cyber-soon-meanwhile p { margin-top: 8px; color: var(--cy-muted); font-size: .875rem; }
.cyber-theme .cyber-soon-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; }
.cyber-theme .cyber-soon-disclaimer {
  margin-top: 28px; padding: 14px 16px; border-left: 3px solid var(--cy-border);
  color: var(--cy-muted); font-size: .75rem; line-height: 1.9;
}


/* --- 言語切替 -----------------------------------------------------------------
   国旗 + 短いコードのピルと、自称を並べた一枚のパネル。
   details / summary の標準開閉を保ち、色は両テーマのトークンに追従する。 */
.cyber-theme .site-header .site-header__lang > summary {
  display: inline-flex; justify-content: center; gap: 8px; min-height: 44px; padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--cy-mint) 32%, var(--cy-surface));
  border-radius: 999px; background: var(--cy-surface); color: var(--cy-text);
}
.cyber-theme .site-header .site-header__lang > summary:is(:hover, :focus-visible),
.cyber-theme .site-header .site-header__lang[open] > summary {
  border-color: var(--cy-mint); background: var(--cy-raised); color: var(--cy-text);
}
/* 言語の現在地にはナビ共通の下線を重ねない。 */
.cyber-theme .site-header .site-header__lang .nav-link::after { content: none; }
.cyber-theme .site-header__lang-current {
  font: 700 .75rem/1 var(--cy-mono); letter-spacing: .06em; white-space: nowrap;
}
.cyber-theme .site-header__lang-flag {
  position: relative; display: inline-flex; flex: 0 0 20px; width: 20px; height: 14px; border-radius: 2px;
}
.cyber-theme .site-header__lang-flag img {
  display: block; width: 20px; height: 14px; object-fit: cover; border-radius: inherit;
}
/* img の上に内側の縁を重ね、白地の旗にも輪郭を残す。 */
.cyber-theme .site-header__lang-flag::after {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; content: "";
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cy-border) 35%, transparent);
}
.cyber-theme .site-header__lang > .site-header__market-links {
  width: 100%; min-width: 0; margin: 8px 0; padding: 0; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cy-border) 30%, var(--cy-surface));
  border-radius: 12px; background: var(--cy-surface);
  box-shadow: 0 12px 28px -20px var(--cy-border);
}
.cyber-theme .site-header__lang-heading {
  margin: 0; padding: 12px 14px 10px; color: var(--cy-muted);
  font-size: .625rem; font-weight: 700; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase;
}
.cyber-theme .site-header .site-header__lang .site-header__lang-option {
  justify-content: flex-start; align-items: center; gap: 12px; flex-wrap: nowrap; white-space: normal;
  min-height: 44px; padding: 10px 14px; border-radius: 0;
  border-top: 1px solid color-mix(in srgb, var(--cy-border) 16%, var(--cy-surface));
  color: var(--cy-text); font-size: .8125rem; line-height: 1.6;
}
.cyber-theme .site-header .site-header__lang .site-header__lang-option:is(:hover, :focus-visible) {
  background: var(--cy-raised); color: var(--cy-text);
}
.cyber-theme .site-header .site-header__lang .site-header__lang-option[aria-current] {
  background: color-mix(in srgb, var(--cy-mint) 10%, var(--cy-surface));
  color: var(--cy-text); font-weight: 700;
}
.cyber-theme .site-header .site-header__lang .site-header__lang-option:focus-visible {
  outline: 3px solid var(--cy-mint); outline-offset: -3px;
}
@media (min-width: 1024px) {
  .cyber-theme .site-header:where(:not([data-nav-collapsed="true"])) .site-header__lang > summary { min-height: 36px; }
  .cyber-theme :where(.site-header:not([data-nav-collapsed="true"])) .site-header__lang > .site-header__market-links {
    right: 0; left: auto; width: 12rem; max-width: calc(100vw - 32px); margin: 0;
  }
}
/* --- ヘッダーのメニューの開閉（マーケット・トレード支援・言語で共通）--------------
   動きの初期状態も含めて二重の許可条件内に閉じ込める。
   スマホはフェードのみ。高さは補間せず、各行に時間差も付けない。 */
@media (prefers-reduced-motion: no-preference) {
  .cyber-theme[data-cyber-motion="on"] .site-header__market[open] > .site-header__market-links {
    animation: cy-menu-panel-in 160ms ease-out;
  }
  @media (min-width: 1024px) {
    .cyber-theme[data-cyber-motion="on"] :where(.site-header:not([data-nav-collapsed="true"])) .site-header__market { --cy-menu-enter-y: -6px; }
  }
  @keyframes cy-menu-panel-in {
    from { opacity: 0; transform: translateY(var(--cy-menu-enter-y, 0px)); }
    to { opacity: 1; transform: none; }
  }
  @supports selector(::details-content) and (transition-behavior: allow-discrete) {
    /* 非表示化をフェード終了まで待つ。疑似要素は動かさず、
       絶対配置の基準を details 本体に保つ。非対応時は標準の即時閉鎖。 */
    .cyber-theme[data-cyber-motion="on"] .site-header__market::details-content {
      opacity: 0;
      transition: opacity 160ms ease-out, content-visibility 160ms allow-discrete;
    }
    .cyber-theme[data-cyber-motion="on"] .site-header__market[open]::details-content { opacity: 1; }
    .cyber-theme[data-cyber-motion="on"] .site-header__market:not([open]) > .site-header__market-links {
      /* 共通の display:none を解除。隠す責務は details（::details-content）に残す。 */
      display: block; pointer-events: none;
    }
    .cyber-theme[data-cyber-motion="on"] .site-header__market[open] > .site-header__market-links {
      animation-name: cy-menu-panel-slide;
    }
    @keyframes cy-menu-panel-slide {
      from { transform: translateY(var(--cy-menu-enter-y, 0px)); }
      to { transform: none; }
    }
  }
}


/* --- 法務文書（利用規約・プライバシーポリシー）--------------------------------
   長文を読み切ってもらうための体裁。条番号を見出しに出し、1 行を詰めすぎない。
   未確定の項目は [ ] で目立たせる（会社の登録番号など、埋め忘れたまま公開しないため）。 */
.cyber-theme .cyber-legal { max-width: 52rem; margin-inline: auto; padding-block: 8px 32px; }
.cyber-theme .cyber-legal-head { padding-bottom: 20px; border-bottom: 1px solid var(--cy-raised); }
.cyber-theme .cyber-legal h1 { font-size: clamp(1.625rem, 3.5vw, 2.25rem); font-weight: 800; letter-spacing: -.02em; }
.cyber-theme .cyber-legal-meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px;
  color: var(--cy-muted); font-size: .75rem; letter-spacing: .02em;
}
.cyber-theme .cyber-legal-sep { opacity: .5; }
.cyber-theme .cyber-legal-notice {
  margin-top: 14px; padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--cy-raised); background: var(--cy-surface);
  color: var(--cy-muted); font-size: .8125rem; line-height: 1.8;
}
.cyber-theme .cyber-legal-notice--translation {
  border-color: color-mix(in srgb, var(--cy-warning) 40%, transparent);
  color: var(--cy-text);
}
.cyber-theme .cyber-legal-notice .cyber-link { margin-left: 6px; white-space: nowrap; }
.cyber-theme .cyber-legal-body > section { margin-top: 28px; }
.cyber-theme .cyber-legal-body h2 {
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em;
  padding-bottom: 6px; border-bottom: 1px solid var(--cy-raised);
}
.cyber-theme .cyber-legal-body p { margin-top: 12px; font-size: .875rem; line-height: 2; }
.cyber-theme .cyber-legal-body ul { margin-top: 12px; display: grid; gap: 8px; }
.cyber-theme .cyber-legal-body li {
  position: relative; padding-left: 18px; font-size: .875rem; line-height: 1.9;
}
.cyber-theme .cyber-legal-body li::before {
  content: ""; position: absolute; left: 2px; top: .85em;
  width: 5px; height: 5px; border-radius: 1px; background: var(--cy-mint);
}
.cyber-theme .cyber-legal-facts {
  margin-top: 14px; display: grid; gap: 1px; border: 1px solid var(--cy-raised);
  border-radius: 8px; overflow: hidden; background: var(--cy-raised);
}
.cyber-theme .cyber-legal-facts dt {
  padding: 8px 12px; background: var(--cy-surface);
  color: var(--cy-muted); font-size: .75rem; font-weight: 700;
}
.cyber-theme .cyber-legal-facts dd {
  padding: 8px 12px; background: var(--cy-surface); font-size: .8125rem; line-height: 1.8;
}
.cyber-theme .cyber-legal-todo {
  padding: 1px 6px; border-radius: 4px;
  border: 1px dashed color-mix(in srgb, var(--cy-warning) 55%, transparent);
  color: var(--cy-warning); font-size: .8125rem;
}
@media (min-width: 640px) {
  .cyber-theme .cyber-legal-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

/* ── /tools（会員特典のインジケーター）──────────────────────────────────────
   帯の説明は文字より動きのほうが早い。ただし動きは飾りなので、モーションを
   切っている人・減らしたい人には止まった図として成立させる（色と形だけで読める）。 */
.cyber-theme .cyber-tools-hero { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .cyber-theme .cyber-tools-hero { grid-template-columns: 1.15fr .85fr; } }
.cyber-theme .cyber-tools-badge { display: inline-block; margin-left: 8px; padding: 2px 10px; border: 1px solid rgba(61, 225, 240, .45);
  border-radius: 999px; color: var(--cy-mint); font-size: .6875rem; letter-spacing: .08em; vertical-align: middle; }
.cyber-theme .cyber-tools-name { color: var(--cy-text); font-weight: 700; letter-spacing: .02em; }
.cyber-theme .cyber-tools-paused { margin-top: 18px; padding: 10px 14px; border: 1px solid rgba(255, 79, 163, .4);
  border-radius: 10px; color: var(--cy-text); font-size: .875rem; line-height: 1.8; background: rgba(255, 79, 163, .08); }

.cyber-theme .cyber-ribbon { margin: 0; border: 1px solid rgba(139, 147, 174, .28); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 23, 38, .95), rgba(20, 23, 38, .6)); }
.cyber-theme .cyber-ribbon__svg { display: block; width: 100%; height: 150px; }
.cyber-theme .cyber-ribbon--demo .cyber-ribbon__svg { height: 104px; }
.cyber-theme .cyber-ribbon__caption { padding: 8px 12px 10px; color: var(--cy-muted); font-size: .75rem; }
.cyber-theme .cyber-ribbon__set { transform-origin: 50% 100%; }
/* 灰色の図は「まだ判断しない」状態。色を落として見せる */
.cyber-theme .cyber-ribbon__set--unknown { filter: grayscale(1) opacity(.55); }

@media (prefers-reduced-motion: no-preference) {
  /* 呼吸するように上下する帯（ヒーロー） */
  .cyber-theme[data-cyber-motion="on"] .cyber-ribbon__set--breathe .cyber-ribbon__band { animation: cyber-ribbon-breathe 6s var(--cy-ease) infinite alternate; }
  .cyber-theme[data-cyber-motion="on"] .cyber-ribbon__set--breathe .cyber-ribbon__band:nth-child(2) { animation-delay: .2s; }
  .cyber-theme[data-cyber-motion="on"] .cyber-ribbon__set--breathe .cyber-ribbon__band:nth-child(3) { animation-delay: .4s; }
  /* 色が入れ替わる（向きの説明） */
  .cyber-theme[data-cyber-motion="on"] .cyber-ribbon__set--flip { animation: cyber-ribbon-flip 7s steps(1, end) infinite; }
  /* 帯が広がって縮む（伸び具合の説明） */
  .cyber-theme[data-cyber-motion="on"] .cyber-ribbon__set--stretch .cyber-ribbon__band { animation: cyber-ribbon-stretch 5s var(--cy-ease) infinite alternate; }
  .cyber-theme[data-cyber-motion="on"] .cyber-ribbon__set--stretch .cyber-ribbon__band:nth-child(2) { animation-delay: .12s; }
  .cyber-theme[data-cyber-motion="on"] .cyber-ribbon__set--stretch .cyber-ribbon__band:nth-child(3) { animation-delay: .24s; }
  /* 判断できない状態のゆらぎ */
  .cyber-theme[data-cyber-motion="on"] .cyber-ribbon__set--unknown { animation: cyber-ribbon-unknown 3.2s ease-in-out infinite alternate; }
}
@keyframes cyber-ribbon-breathe { from { transform: translateY(5px) scaleY(.94); } to { transform: translateY(-5px) scaleY(1.06); } }
@keyframes cyber-ribbon-stretch { from { transform: scaleY(.7); } to { transform: scaleY(1.18); } }
@keyframes cyber-ribbon-unknown { from { filter: grayscale(1) opacity(.4); } to { filter: grayscale(1) opacity(.7); } }
/* 塗りと線の色をまるごと差し替えて、向きが変わった瞬間を見せる */
@keyframes cyber-ribbon-flip {
  0%, 45% { filter: none; }
  50%, 95% { filter: hue-rotate(158deg) saturate(1.25); }
  100% { filter: none; }
}

.cyber-theme .cyber-tools-section { margin-top: 56px; }
.cyber-theme .cyber-tools-h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: .01em; }
.cyber-theme .cyber-tools-h2::after { display: block; width: 46px; height: 2px; margin-top: 10px; background: var(--cy-mint); content: ""; }

.cyber-theme .cyber-tools-steps { display: grid; gap: 14px; margin-top: 22px; padding: 0; list-style: none; }
@media (min-width: 900px) { .cyber-theme .cyber-tools-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cyber-theme .cyber-tools-steps li { display: flex; gap: 12px; padding: 16px 18px; border: 1px solid rgba(139, 147, 174, .24); border-radius: 12px; background: var(--cy-surface); }
/* 文字色は背景トークンに合わせる。固定の暗色にすると、明るいテーマで
   背景（濃いティール）と文字が近づいてコントラストが 3.3:1 まで落ちる */
.cyber-theme .cyber-tools-step-no { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--cy-mint); color: var(--cy-bg);
  font: 700 .8125rem/26px var(--cy-mono); text-align: center; }
.cyber-theme .cyber-tools-steps b { font-size: .9375rem; }
.cyber-theme .cyber-tools-steps p { margin-top: 6px; font-size: .8125rem; line-height: 1.8; }

.cyber-theme .cyber-tools-cards { display: grid; gap: 18px; margin-top: 22px; }
@media (min-width: 900px) { .cyber-theme .cyber-tools-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cyber-theme .cyber-tools-card { padding: 16px; border: 1px solid rgba(139, 147, 174, .24); border-radius: 14px; background: var(--cy-surface); }
.cyber-theme .cyber-tools-card h3 { margin-top: 14px; font-size: 1.0625rem; font-weight: 700; }
.cyber-theme .cyber-tools-card p { margin-top: 8px; font-size: .875rem; line-height: 1.9; }

.cyber-theme .cyber-tools-howto { margin-top: 20px; padding-left: 1.3em; display: grid; gap: 10px; font-size: .9375rem; line-height: 1.8; }
.cyber-theme .cyber-tools-howto li::marker { color: var(--cy-mint); font-weight: 700; }
.cyber-theme .cyber-tools-note { margin-top: 16px; font-size: .8125rem; line-height: 1.9; }

.cyber-theme .cyber-tools-conditions { margin-top: 20px; padding: 0; list-style: none; display: grid; gap: 10px; font-size: .9375rem; }
.cyber-theme .cyber-tools-conditions li { display: flex; gap: 10px; align-items: flex-start; }
.cyber-theme .cyber-tools-conditions span { color: var(--cy-mint); font-weight: 700; }

.cyber-theme .cyber-tools-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 22px; }
.cyber-theme .cyber-tools-disclaimer { margin-top: 48px; padding-top: 18px; border-top: 1px solid rgba(139, 147, 174, .22);
  color: var(--cy-muted); font-size: .75rem; line-height: 1.9; }

/* ── /tools のインジケーター一覧（デザイン: Codex / docs/_indicator-list-design）────────────
   2 本になったので、まず一覧で見渡せるようにする。横長の行を縦に並べ、長い説明は
   各行の <details> に畳む。図だけは両テーマで暗い面、本文と状態チップはテーマトークン。
   動きは OS とサイト設定の両方が許しているあいだだけ。止めても色と形だけで読める。 */
.cyber-theme .cyber-ind-catalog {
  --cyber-ind-line: color-mix(in srgb, var(--cy-border) 36%, transparent);
  --cyber-ind-plot-bg: var(--cy-bg);
  min-width: 0;
  color: var(--cy-text);
  overflow-wrap: anywhere;
}

/* 図だけは両テーマで暗い面にする。既存のテーマトークンは変更しない。 */
.cyber-theme[data-theme="light"] .cyber-ind-catalog {
  --cyber-ind-plot-bg: var(--cy-text);
}

@media (prefers-color-scheme: light) {
  .cyber-theme:not([data-theme="dark"]) .cyber-ind-catalog {
    --cyber-ind-plot-bg: var(--cy-text);
  }
}

.cyber-theme .cyber-ind-header {
  margin-bottom: 22px;
}

.cyber-theme .cyber-ind-eyebrow {
  margin: 0 0 6px;
  color: var(--cy-mint);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.cyber-theme .cyber-ind-heading {
  margin: 0;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 750;
  line-height: 1.5;
}

.cyber-theme .cyber-ind-intro {
  max-width: 46rem;
  margin: 10px 0 0;
  color: var(--cy-muted);
  font-size: .875rem;
  line-height: 1.9;
}

.cyber-theme .cyber-ind-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cyber-theme .cyber-ind-item {
  min-width: 0;
  opacity: 1;
  transform: none;
}

.cyber-theme .cyber-ind-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "visual" "actions" "details";
  gap: 18px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--cyber-ind-line);
  border-radius: 14px;
  background: var(--cy-surface);
}

.cyber-theme .cyber-ind-row > * {
  min-width: 0;
}

.cyber-theme .cyber-ind-copy {
  grid-area: copy;
}

.cyber-theme .cyber-ind-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.cyber-theme .cyber-ind-name {
  margin: 0;
  color: var(--cy-text);
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .015em;
}

.cyber-theme .cyber-ind-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 26px;
  padding: 2px 10px;
  border: 1px solid var(--cy-border);
  border-radius: 999px;
  color: var(--cy-muted);
  background: var(--cy-raised);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.cyber-theme .cyber-ind-status--live {
  border-color: color-mix(in srgb, var(--cy-mint) 60%, transparent);
  color: var(--cy-mint);
  background: color-mix(in srgb, var(--cy-mint) 8%, var(--cy-surface));
}

.cyber-theme .cyber-ind-status--soon {
  border-style: dashed;
}

.cyber-theme .cyber-ind-tagline {
  margin: 12px 0 0;
  color: var(--cy-text);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.7;
}

.cyber-theme .cyber-ind-points {
  display: grid;
  gap: 5px;
  margin: 12px 0 0;
  padding-left: 1.2em;
  color: var(--cy-muted);
  font-size: .875rem;
  line-height: 1.8;
  list-style: disc;
}

.cyber-theme .cyber-ind-points > li::marker {
  color: var(--cy-border);
}

.cyber-theme .cyber-ind-note {
  margin: 14px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--cy-border);
  color: var(--cy-text);
  font-size: .8125rem;
  line-height: 1.8;
}

.cyber-theme .cyber-ind-visual {
  grid-area: visual;
  align-self: start;
  margin: 0;
}

/* SVG の読み込みや演出で高さが変わらない。説明文は自然に折り返す。 */
.cyber-theme .cyber-ind-plot {
  height: 160px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cyber-ind-line);
  border-radius: 12px;
  background: var(--cyber-ind-plot-bg);
}

.cyber-theme .cyber-ind-plot--small {
  height: 104px;
}

.cyber-theme .cyber-ind-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.cyber-theme .cyber-ind-ma-fill {
  opacity: .9;
}

/* 琥珀色の本線とは別の装飾層。本線の色・位置・不透明度は変えない。 */
.cyber-theme .cyber-ind-tide-halo {
  opacity: .14;
  filter: blur(3px);
}

.cyber-theme .cyber-ind-caption {
  margin-top: 9px;
  color: var(--cy-muted);
  font-size: .75rem;
  line-height: 1.8;
}

.cyber-theme .cyber-ind-caption p {
  margin: 0;
}

.cyber-theme .cyber-ind-caption p + p {
  margin-top: 4px;
}

.cyber-theme .cyber-ind-panel {
  margin-top: 9px;
  padding: 8px 10px;
  border: 1px solid var(--cyber-ind-line);
  border-radius: 6px;
  background: var(--cy-raised);
  color: var(--cy-text);
  font-size: .75rem;
  line-height: 1.7;
}

.cyber-theme .cyber-ind-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  align-self: end;
}

.cyber-theme .cyber-ind-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding-block: 6px;
  color: var(--cy-mint);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.7;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.cyber-theme .cyber-ind-link > span:first-child {
  min-width: 0;
}

.cyber-theme .cyber-ind-arrow {
  display: inline-block;
  flex: none;
}

.cyber-theme .cyber-ind-availability {
  margin: 0;
  color: var(--cy-muted);
  font-size: .8125rem;
  line-height: 1.8;
}

.cyber-theme .cyber-ind-details {
  grid-area: details;
  border-top: 1px solid var(--cyber-ind-line);
}

/* ネイティブの開閉とマーカーを使う。高さのアニメーションは付けない。 */
.cyber-theme .cyber-ind-toggle {
  display: list-item;
  min-height: 44px;
  padding-block: 12px;
  color: var(--cy-text);
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.7;
  cursor: pointer;
  list-style-position: inside;
}

.cyber-theme .cyber-ind-toggle::marker {
  color: var(--cy-muted);
}

.cyber-theme .cyber-ind-detail-body {
  padding-top: 6px;
}

.cyber-theme .cyber-ind-reading-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.cyber-theme .cyber-ind-reading {
  min-width: 0;
}

.cyber-theme .cyber-ind-reading figure {
  margin: 0;
}

.cyber-theme .cyber-ind-reading h4 {
  margin: 0 0 8px;
  color: var(--cy-text);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.7;
}

.cyber-theme .cyber-ind-reading p,
.cyber-theme .cyber-ind-detail-note {
  margin: 0;
  color: var(--cy-muted);
  font-size: .8125rem;
  line-height: 1.9;
}

.cyber-theme .cyber-ind-reading figcaption {
  margin-top: 12px;
}

.cyber-theme .cyber-ind-detail-note {
  margin-top: 20px;
}

.cyber-theme .cyber-ind-empty {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--cyber-ind-line);
  border-radius: 12px;
  color: var(--cy-muted);
  font-size: .875rem;
}

@media (min-width: 900px) {
  .cyber-theme .cyber-ind-row {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
    grid-template-areas: "copy visual" "actions visual" "details details";
    column-gap: 28px;
    padding: 24px;
  }

  .cyber-theme .cyber-ind-reading-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 動きは OS とサイト設定の両方で許可されている間だけ有効。 */
@media (prefers-reduced-motion: no-preference) {
  .cyber-theme[data-cyber-motion="on"] .cyber-ind-item[data-cyber-reveal] {
    transition:
      opacity var(--cy-reveal) var(--cy-ease),
      transform var(--cy-reveal) var(--cy-ease);
    transition-delay: var(--cyber-ind-delay, 0ms);
  }

  /* pending は既存 JS が付ける。HTML には出力しない。 */
  .cyber-theme[data-cyber-motion="on"] .cyber-ind-item[data-cyber-pending="true"] {
    opacity: 0;
    transform: translateY(10px);
    transition: none;
  }

  /* キーボードで到達した行は、Observer や遅延を待たずに表示する。 */
  .cyber-theme[data-cyber-motion="on"] .cyber-ind-item[data-cyber-reveal]:focus-within {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cyber-theme[data-cyber-motion="on"] .cyber-ind-ma-fill {
    animation: cyber-ind-ma-breathe 6s ease-in-out infinite;
  }

  .cyber-theme[data-cyber-motion="on"] .cyber-ind-tide-halo {
    animation: cyber-ind-tide-quiet 8s ease-in-out infinite;
  }

  .cyber-theme[data-cyber-motion="on"] .cyber-ind-item[data-cyber-pending="true"]
  :is(.cyber-ind-ma-fill, .cyber-ind-tide-halo) {
    animation-play-state: paused;
  }

  .cyber-theme[data-cyber-motion="on"] .cyber-ind-link .cyber-ind-arrow {
    transition: transform var(--cy-fast) var(--cy-ease);
  }

  .cyber-theme[data-cyber-motion="on"] .cyber-ind-link:focus-visible .cyber-ind-arrow {
    transform: translateX(3px);
  }

  @media (hover: hover) and (pointer: fine) {
    .cyber-theme[data-cyber-motion="on"] .cyber-ind-link:hover .cyber-ind-arrow {
      transform: translateX(3px);
    }
  }

  @keyframes cyber-ind-ma-breathe {
    0%, 100% { opacity: .65; }
    50% { opacity: 1; }
  }

  @keyframes cyber-ind-tide-quiet {
    0%, 100% { opacity: .08; }
    50% { opacity: .3; }
  }
}

/* 保険（こちらで追加）。このサイトの既存の演出は「交差する前に中身を隠さない」作りで、
   行ごと透明にして待つのはこの一覧が初めて。IntersectionObserver が何かの理由で
   発火しなくても、中身が見えないまま固まらないようにする */
@media (prefers-reduced-motion: no-preference) {
  .cyber-theme[data-cyber-motion="on"] .cyber-ind-item[data-cyber-pending="true"] {
    animation: cyber-ind-failsafe 1ms linear 4s forwards;
  }
  @keyframes cyber-ind-failsafe { to { opacity: 1; transform: none; } }
}
@media print {
  .cyber-theme .cyber-ind-item { opacity: 1 !important; transform: none !important; }
  .cyber-theme .cyber-ind-details > .cyber-ind-detail-body { display: block; }
}

/* ══ デザインレビュー 2026-09-19（Codex） ══════════════════════════════════
   提案と理由は docs/_design-review/review.md。部品のクラスは snippets.html の形で使う。
   既存の宣言を変えた所（R 表）は、この上の元の場所を直接直してある。 */
/* [01,02] 追加トークン。既存 --cy-* の値は上書きしない。 */
.cyber-theme {
  --cy-ui-line: color-mix(in srgb, var(--cy-border) 30%, var(--cy-surface));
  --cy-ui-radius: 12px;
  --cy-ui-control-radius: 8px;
  --cy-ui-pad: clamp(20px, 2.5vw, 28px);
  --cy-ui-gap: 24px;
  --cy-ui-section-gap: clamp(32px, 4vw, 56px);
  --cy-ui-body-size: 1rem;
  --cy-ui-small-size: .875rem;
  --cy-ui-title-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.5rem);
  --cy-ui-h2-size: clamp(1.25rem, 1.05rem + .65vw, 1.5rem);
}
.cyber-theme[data-theme="light"] {
  --cy-ui-line: color-mix(in srgb, var(--cy-border) 26%, var(--cy-surface));
}
/* ライトでも暗い絵を使う既存ヒーローは、ローカルの色から派生させる。 */
.cyber-theme .cyber-hero-panel {
  --cy-ui-line: color-mix(in srgb, var(--cy-border) 30%, var(--cy-surface));
}
.cyber-theme :is(.text-emerald-900, .text-blue-900) { color: var(--cy-text); }
.cyber-theme .border-red-200 { border-color: color-mix(in srgb, var(--cy-danger) 40%, var(--cy-surface)); }
.cyber-theme .border-emerald-200 { border-color: color-mix(in srgb, var(--cy-success) 40%, var(--cy-surface)); }

/* [01] 旧青ボタンの互換補完 + 新しい操作部品。
 * .btn-primary のテーマ規則は既存 cyber.css に無い。app.css より詳細度が高い。
 * 新規 HTML では cyber-action を使い、色を持つ Tailwind クラスを併記しない。 */
.cyber-theme .btn-primary,
.cyber-theme .cyber-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 48px;
  block-size: auto;
  padding: .75rem 1.125rem;
  border: 1px solid var(--cy-mint);
  border-radius: var(--cy-ui-control-radius);
  background: var(--cy-mint);
  color: var(--cy-bg);
  box-shadow: none;
  font: 700 .9375rem/1.6 var(--cy-font);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.cyber-theme .cyber-action--secondary {
  background: var(--cy-surface);
  color: var(--cy-text);
  border-color: var(--cy-border);
}
.cyber-theme .cyber-action--full { inline-size: 100%; }
.cyber-theme :is(.btn-primary, .cyber-action) > span { min-inline-size: 0; }
.cyber-theme :is(.btn-primary, .cyber-action) > [aria-hidden="true"] { flex: none; }
.cyber-theme .btn-primary:hover,
.cyber-theme .cyber-action:hover { background: var(--cy-mint); color: var(--cy-bg); box-shadow: inset 0 0 0 1px currentColor; }
.cyber-theme .cyber-action--secondary:hover { background: var(--cy-raised); color: var(--cy-text); }
.cyber-theme :is(.btn-primary, .cyber-action):disabled {
  background: var(--cy-raised); color: var(--cy-muted); border-color: var(--cy-border);
  cursor: not-allowed; box-shadow: none;
}
.cyber-theme .cyber-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cyber-theme .cyber-action-row > * { min-inline-size: 0; max-inline-size: 100%; }
.cyber-theme .cyber-note {
  padding: 16px; border: 1px solid var(--cy-ui-line); border-inline-start: 3px solid var(--cy-mint);
  border-radius: var(--cy-ui-control-radius); background: var(--cy-surface);
  color: var(--cy-text); font-size: var(--cy-ui-small-size); line-height: 1.85; overflow-wrap: anywhere;
}
.cyber-theme .cyber-note--warning { border-inline-start-color: var(--cy-warning); }

/* [02] ページ見出し・カード・余白の共通型。高さは文章量に従う。 */
.cyber-theme .cyber-page { min-inline-size: 0; }
.cyber-theme .cyber-page--reading { max-inline-size: 52rem; margin-inline: auto; }
.cyber-theme .cyber-page--auth { max-inline-size: 30rem; margin-inline: auto; }
.cyber-theme .cyber-page--form { max-inline-size: 42rem; margin-inline: auto; }
.cyber-theme .cyber-page-head { display: grid; gap: 12px; margin-block-end: 32px; padding-block: 12px 24px; border-block-end: 1px solid var(--cy-ui-line); }
.cyber-theme .cyber-page-title { margin: 0; font-size: var(--cy-ui-title-size); font-weight: 800; line-height: 1.45; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cyber-theme .cyber-page-lead { max-inline-size: 65ch; color: var(--cy-muted); font-size: var(--cy-ui-body-size); line-height: 1.85; overflow-wrap: anywhere; }
.cyber-theme .cyber-section-title { margin: 0; font-size: var(--cy-ui-h2-size); font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.cyber-theme .cyber-card { min-inline-size: 0; padding: var(--cy-ui-pad); border: 1px solid var(--cy-ui-line); border-radius: var(--cy-ui-radius); background: var(--cy-surface); color: var(--cy-text); box-shadow: none; }
.cyber-theme .cyber-stack { display: grid; gap: var(--cy-ui-gap); }
.cyber-theme .cyber-stack > * { min-inline-size: 0; }
.cyber-theme .cyber-section-stack { display: grid; gap: var(--cy-ui-section-gap); }
.cyber-theme .cyber-section-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.cyber-theme .cyber-section-row > * { min-inline-size: 0; max-inline-size: 100%; }
.cyber-theme .cyber-copy { color: var(--cy-text); font-size: var(--cy-ui-body-size); line-height: 1.85; overflow-wrap: anywhere; }
.cyber-theme .cyber-help { color: var(--cy-muted); font-size: var(--cy-ui-small-size); line-height: 1.85; overflow-wrap: anywhere; }

/* [03] 比較カード。既存 cyber-broker-card の装飾を増やさずレイアウトだけ追加。 */
.cyber-theme .cyber-comparison-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.cyber-theme .cyber-comparison-card { display: flex; flex-direction: column; gap: 20px; min-inline-size: 0; }
.cyber-theme .cyber-comparison-card > * { min-inline-size: 0; }
.cyber-theme .cyber-comparison-card > .cyber-action { margin-block-start: auto; }
.cyber-theme .cyber-comparison-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.cyber-theme .cyber-comparison-head h2 { min-inline-size: 0; max-inline-size: 100%; }
.cyber-theme .cyber-status { display: inline-flex; align-items: center; gap: 6px; max-inline-size: 100%; padding: 4px 10px; border: 1px solid var(--cy-ui-line); border-radius: 6px; background: var(--cy-raised); color: var(--cy-text); font: 600 .8125rem/1.7 var(--cy-font); white-space: normal; overflow-wrap: anywhere; }
.cyber-theme .cyber-status::before { content: ""; flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--cy-muted); }
.cyber-theme .cyber-status--success::before { background: var(--cy-success); }
.cyber-theme .cyber-status--warning::before { background: var(--cy-warning); }
.cyber-theme .cyber-status--danger::before { background: var(--cy-danger); }
.cyber-theme .cyber-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.cyber-theme .cyber-detail-aside { min-inline-size: 0; }
@media (min-width: 900px) {
  .cyber-theme .cyber-comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .cyber-theme .cyber-detail-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* [04] 既存 name/id/type/制約は維持し、フォームに cyber-form を付ける。 */
.cyber-theme .cyber-form { display: grid; gap: 24px; }
.cyber-theme .cyber-field { display: grid; gap: 8px; min-inline-size: 0; }
.cyber-theme .cyber-field > label { color: var(--cy-text); font-size: .9375rem; font-weight: 600; line-height: 1.7; }
.cyber-theme .cyber-form :is(.form-input, .form-select) {
  display: block; min-inline-size: 0; inline-size: 100%; max-inline-size: 100%; min-block-size: 48px;
  padding: 11px 14px; border: 1px solid var(--cy-border); border-radius: var(--cy-ui-control-radius);
  background: var(--cy-bg); color: var(--cy-text); box-shadow: none;
  font-family: var(--cy-font); font-size: 1rem; line-height: 1.7;
}
.cyber-theme .cyber-form textarea.form-input { min-block-size: 10rem; resize: vertical; }
.cyber-theme .cyber-form :is(.form-input, .form-select):focus { border-color: var(--cy-mint); outline: 3px solid var(--cy-mint); outline-offset: 3px; box-shadow: none; }
.cyber-theme .cyber-form :is(.form-input, .form-select)[aria-invalid="true"] { border-color: var(--cy-danger); }
.cyber-theme .cyber-form :is(.form-input, .form-select)[aria-invalid="true"]:focus { outline-color: var(--cy-danger); }
.cyber-theme .cyber-form :is(.form-input, .form-select):disabled,
.cyber-theme .cyber-form :is(.form-input, .form-select)[readonly] { background: var(--cy-raised); color: var(--cy-muted); }
.cyber-theme .cyber-form input[type="file"] { min-inline-size: 0; max-inline-size: 100%; }
.cyber-theme .cyber-field-error { color: var(--cy-danger); font-size: .875rem; line-height: 1.8; overflow-wrap: anywhere; }
.cyber-theme .cyber-required { color: var(--cy-muted); margin-inline-start: .5em; font-size: .8125rem; font-weight: 400; }
.cyber-theme .cyber-check { display: flex; align-items: flex-start; gap: 12px; min-block-size: 44px; padding-block: 8px; color: var(--cy-text); font-size: .9375rem; line-height: 1.8; }
.cyber-theme .cyber-check input { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: .2em; accent-color: var(--cy-mint); }
.cyber-theme .cyber-check > span { min-inline-size: 0; overflow-wrap: anywhere; }
.cyber-theme .cyber-alert { padding: 16px 20px; margin-block-end: 24px; border: 1px solid var(--cy-ui-line); border-inline-start: 3px solid var(--cy-mint); border-radius: var(--cy-ui-control-radius); background: var(--cy-surface); color: var(--cy-text); font-size: .9375rem; line-height: 1.85; overflow-wrap: anywhere; }
.cyber-theme .cyber-alert--error { border-inline-start-color: var(--cy-danger); }
.cyber-theme .cyber-alert--success { border-inline-start-color: var(--cy-success); }

/* [05] 訳文の余裕。既存 nowrap の置換位置は review.md R 表。
 * Thai の字間は詰めない。全文の break-all / 自動省略は使わない。 */
.cyber-theme:lang(th) :is(.cyber-page-title, .cyber-section-title) { letter-spacing: normal; line-height: 1.7; }
.cyber-theme:lang(th) :is(.cyber-copy, .cyber-help, .cyber-page-lead, .cyber-form, .cyber-status, .cyber-action, .cyber-data-table) { line-height: 1.9; letter-spacing: normal; }
.cyber-theme:lang(th) :is(.cyber-cot-hero, .cyber-cot-card, .cyber-cot-detail, .cyber-tools-hero, .cyber-ind-catalog) :is(p, dt, figcaption, summary) { line-height: 1.9; letter-spacing: normal; }
.cyber-theme:lang(th) :is(.cyber-cot-hero, .cyber-tools-hero) h1 { line-height: 1.65; letter-spacing: normal; }
.cyber-theme .cyber-wrap { min-inline-size: 0; max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }

/* [06] 表。文章セルと数字セルを分ける。nowrap は数字・日付だけ。 */
.cyber-theme .cyber-data-scroll { min-inline-size: 0; max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: var(--cy-border) var(--cy-surface); border: 1px solid var(--cy-ui-line); border-radius: var(--cy-ui-control-radius); }
.cyber-theme .cyber-data-table { inline-size: 100%; border-collapse: collapse; color: var(--cy-text); font: .9375rem/1.75 var(--cy-font); }
.cyber-theme .cyber-data-table caption:not(.sr-only) { padding: 12px 16px; text-align: start; color: var(--cy-muted); font-size: .875rem; }
.cyber-theme .cyber-data-table :is(th, td) { padding: 14px 16px; border-block-end: 1px solid var(--cy-ui-line); text-align: start; vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.cyber-theme .cyber-data-table thead th { background: var(--cy-raised); color: var(--cy-muted); font-size: .875rem; font-weight: 600; line-height: 1.75; }
.cyber-theme .cyber-data-table tbody th { font-weight: 500; }
.cyber-theme .cyber-data-table tbody tr:last-child > * { border-block-end: 0; }
.cyber-theme .cyber-data-table .cyber-data-number { text-align: end; font-family: var(--cy-mono); font-variant-numeric: tabular-nums lining-nums; letter-spacing: normal; white-space: nowrap; overflow-wrap: normal; }
.cyber-theme .cyber-data-table .cyber-data-date { font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.cyber-theme .cyber-number-run { white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums lining-nums; }
.cyber-theme .cyber-data-table .cyber-data-note { min-inline-size: 12rem; }
.cyber-theme .cyber-data-table .cyber-data-empty { padding-block: 32px; text-align: center; color: var(--cy-muted); }
.cyber-theme .cyber-data-table--history { min-inline-size: 42rem; }
.cyber-theme .cyber-data-table--conditions { table-layout: fixed; }
.cyber-theme .cyber-data-table--conditions tr > :first-child { inline-size: 38%; }
.cyber-theme .cyber-data-table--conditions :is(th, td) { padding-inline: 12px; }
.cyber-theme .cyber-data-table--conditions tbody td { font-weight: 600; font-variant-numeric: tabular-nums; }
.cyber-theme .cyber-balance-value { margin-block-start: 8px; color: var(--cy-text); font: 700 clamp(1.5rem, 3vw, 2rem)/1.5 var(--cy-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* [07] ヘッダーの補助操作と会員現在地。開閉は既存 app.js に任せる。 */
.cyber-theme .site-header .cyber-nav-utility { border-inline-start: 1px solid var(--cy-ui-line); padding-inline-start: 8px; }
.cyber-theme .site-header__lang-option > span:last-child { min-inline-size: 0; overflow-wrap: anywhere; }
/* 会員メニュー: 10 項目のアイコン付きタイル。960px 以上は 5 列 × 2 行、それ未満は 2 列 × 5 行。
   項目名は切らずに折り返す（ru・uz）。動きは細いポインタの hover と押下だけで、reduce では止める。
   枠は overflow を切らないので、[06] の focus-visible の外枠はそのまま見える。 */
.cyber-theme .cyber-member-nav { margin-block-end: 24px; padding: 8px; border: 1px solid var(--cy-ui-line); border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--cy-mint) 5%, var(--cy-surface)), var(--cy-surface) 65%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.cyber-theme .cyber-member-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cyber-theme .cyber-member-links a { position: relative; display: flex; align-items: center; gap: 8px; min-inline-size: 0; min-block-size: 54px; padding: 8px 10px 8px 8px; border: 1px solid var(--cy-ui-line); border-radius: 10px; background: color-mix(in srgb, var(--cy-raised) 60%, var(--cy-surface)); color: var(--cy-text); font-size: .8125rem; font-weight: 600; line-height: 1.4; white-space: normal; text-decoration: none; }
.cyber-theme .cyber-member-well { flex: none; display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 8px; background: color-mix(in srgb, var(--cy-mint) 12%, var(--cy-raised)); color: var(--cy-mint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cy-mint) 18%, transparent); }
.cyber-theme .cyber-member-icon { display: block; inline-size: 20px; block-size: 20px; }
.cyber-theme .cyber-member-label { min-inline-size: 0; overflow-wrap: break-word; hyphens: auto; }
.cyber-theme .cyber-member-links a::after { content: none; position: absolute; inset-inline-end: 13px; inset-block-start: 50%; inline-size: 6px; block-size: 6px; border-block-start: 1.8px solid currentColor; border-inline-end: 1.8px solid currentColor; opacity: .35; transform: translateY(-50%) rotate(45deg); }
.cyber-theme .cyber-member-links a:focus-visible { border-color: var(--cy-mint); }
.cyber-theme .cyber-member-links a[aria-current] { border-color: var(--cy-mint); background: color-mix(in srgb, var(--cy-mint) 11%, var(--cy-surface)); font-weight: 700; }
.cyber-theme .cyber-member-links a[aria-current] .cyber-member-well { background: var(--cy-mint); color: var(--cy-bg); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--cy-mint) 65%, transparent); }
.cyber-theme .cyber-member-links a[aria-current]::after { inline-size: 7px; block-size: 7px; border: 0; border-radius: 50%; background: var(--cy-mint); opacity: 1; transform: translateY(-50%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cy-mint) 20%, transparent), 0 0 10px color-mix(in srgb, var(--cy-mint) 55%, transparent); }
@media (min-width: 600px) {
  .cyber-theme .cyber-member-nav { padding: 10px; }
  .cyber-theme .cyber-member-links a { min-block-size: 56px; font-size: .875rem; }
}
@media (min-width: 960px) {
  .cyber-theme .cyber-member-nav { padding: 12px; }
  .cyber-theme .cyber-member-links { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .cyber-theme .cyber-member-links a { gap: 10px; min-block-size: 68px; padding: 10px 30px 10px 12px; border-radius: 12px; }
  .cyber-theme .cyber-member-well { inline-size: 36px; block-size: 36px; border-radius: 10px; }
  .cyber-theme .cyber-member-icon { inline-size: 21px; block-size: 21px; }
  .cyber-theme .cyber-member-links a::after { content: ""; }
}
@media (hover: hover) and (pointer: fine) {
  .cyber-theme .cyber-member-links a:hover { border-color: color-mix(in srgb, var(--cy-mint) 55%, var(--cy-ui-line)); background: color-mix(in srgb, var(--cy-mint) 7%, var(--cy-raised)); }
  .cyber-theme .cyber-member-links a[aria-current]:hover { border-color: var(--cy-mint); }
  .cyber-theme .cyber-member-links a:not([aria-current]):hover::after { opacity: .75; }
}
@media (prefers-reduced-motion: no-preference) {
  .cyber-theme .cyber-member-links a { transition: transform 180ms var(--cy-ease), border-color 180ms ease-out, background-color 180ms ease-out, box-shadow 180ms ease-out; }
  .cyber-theme .cyber-member-icon, .cyber-theme .cyber-member-links a::after { transition: transform 180ms var(--cy-ease), opacity 180ms ease-out; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .cyber-theme .cyber-member-links a:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--cy-mint) 70%, transparent); }
  .cyber-theme .cyber-member-links a:hover .cyber-member-icon { transform: translateX(1px) rotate(-4deg); }
  .cyber-theme .cyber-member-links a:not([aria-current]):hover::after { transform: translate(2px, -50%) rotate(45deg); }
  .cyber-theme .cyber-member-links a:active { transform: translateY(0) scale(.98); box-shadow: none; transition-duration: 90ms; }
}
@media (prefers-reduced-motion: reduce) {
  .cyber-theme .cyber-member-links a, .cyber-theme .cyber-member-icon, .cyber-theme .cyber-member-links a::after { transition: none; }
  .cyber-theme .cyber-member-links a:is(:hover, :active), .cyber-theme .cyber-member-links a:hover .cyber-member-icon { transform: none; }
}
@media (forced-colors: active) {
  .cyber-theme .cyber-member-links a { border-color: CanvasText; }
  .cyber-theme .cyber-member-links a[aria-current] { border-color: Highlight; outline: 2px solid Highlight; outline-offset: -3px; }
  .cyber-theme .cyber-member-links a[aria-current]::after { background: Highlight; }
}

/* [08] 空状態とエラー。通常の空状態に警告色は使わない。 */
.cyber-theme .cyber-state { display: grid; justify-items: start; gap: 16px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--cy-ui-line); border-radius: var(--cy-ui-radius); background: var(--cy-surface); }
.cyber-theme .cyber-error-panel { max-inline-size: 44rem; margin: clamp(24px, 6vh, 64px) auto; }
.cyber-theme .cyber-error-panel .cyber-state { border-block-start: 2px solid var(--cy-mint); }
.cyber-theme .cyber-error-status { color: var(--cy-muted); font: 700 1rem/1.6 var(--cy-mono); }
.cyber-theme .cyber-error-panel .cyber-action-row { margin-block-start: 8px; }
.cyber-theme .cyber-calendar-fallback { display: grid; gap: 8px; margin: 0 24px 16px; padding: 12px 16px; border: 1px solid var(--cy-ui-line); border-radius: 8px; font-size: .875rem; line-height: 1.8; }

/* [09] ガイド・FAQ・会社情報。本文幅と見出しの間隔を共通化。 */
.cyber-theme .cyber-guide-list { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.cyber-theme .cyber-guide-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; }
.cyber-theme .cyber-step-number { color: var(--cy-mint); font: 600 1rem/1.8 var(--cy-mono); }
.cyber-theme .cyber-guide-item .cyber-copy { margin-block-start: 12px; }
.cyber-theme .cyber-faq-list { border-block-start: 1px solid var(--cy-ui-line); }
.cyber-theme .cyber-faq-item { padding-block: 8px; border-block-end: 1px solid var(--cy-ui-line); }
.cyber-theme .cyber-faq-item summary { display: list-item; min-block-size: 56px; padding: 16px 8px; color: var(--cy-text); font-size: 1rem; font-weight: 600; line-height: 1.8; list-style-position: inside; cursor: pointer; overflow-wrap: anywhere; }
.cyber-theme .cyber-faq-item summary::marker { color: var(--cy-mint); }
.cyber-theme .cyber-faq-item .cyber-copy { padding: 4px 8px 24px; color: var(--cy-muted); }
.cyber-theme .cyber-prose { font-size: 1rem; line-height: 1.9; overflow-wrap: anywhere; }
.cyber-theme .cyber-prose :where(p + p, p + ul, p + ol) { margin-block-start: 12px; }
.cyber-theme .cyber-prose :where(ul, ol) { padding-inline-start: 1.4em; }
.cyber-theme .cyber-prose ul { list-style: disc; }
.cyber-theme .cyber-prose ol { list-style: decimal; }
.cyber-theme .cyber-prose li + li { margin-block-start: 8px; }
.cyber-theme .cyber-facts { display: grid; }
.cyber-theme .cyber-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px 24px; padding-block: 16px; border-block-end: 1px solid var(--cy-ui-line); }
.cyber-theme .cyber-facts dt { color: var(--cy-muted); font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.cyber-theme .cyber-facts dd { min-inline-size: 0; font-size: 1rem; overflow-wrap: anywhere; }

/* [10] トップのキャラクターは残し、モバイルの最初の画面に本文を近づける。
 * 既存の order / 高さをここで上書きせず、修正位置を review.md R 表に記載。 */
.cyber-theme .cyber-hero-copy-refined { min-inline-size: 0; }
.cyber-theme .cyber-hero-copy-refined h1 { font-size: clamp(1.875rem, 1.3rem + 2.3vw, 3rem); font-weight: 800; line-height: 1.5; letter-spacing: -.025em; overflow-wrap: anywhere; }
.cyber-theme .cyber-hero-copy-refined .cyber-action-row { margin-block-start: 24px; }
.cyber-theme:lang(th) .cyber-hero-copy-refined h1 { line-height: 1.7; letter-spacing: normal; }

/* [11] フッター・リンク・フォーカス。ブランド画像は brand.css のまま。 */
.cyber-theme .cyber-site-footer { margin-block-start: 56px; padding-block: 40px 24px; border-block-start: 1px solid var(--cy-ui-line); background: var(--cy-surface); color: var(--cy-text); }
.cyber-theme .cyber-footer-inner { max-inline-size: 72rem; margin-inline: auto; padding-inline: 24px; }
.cyber-theme .cyber-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 32px; }
.cyber-theme .cyber-footer-group { display: grid; align-content: start; gap: 8px; min-inline-size: 0; }
.cyber-theme .cyber-footer-group h2 { margin-block-end: 4px; font-size: .875rem; font-weight: 700; }
.cyber-theme .cyber-footer-group a { min-block-size: 44px; display: inline-flex; align-items: center; color: var(--cy-muted); font-size: .9375rem; line-height: 1.7; overflow-wrap: anywhere; }
.cyber-theme .cyber-footer-bottom { margin-block-start: 32px; padding-block-start: 20px; border-block-start: 1px solid var(--cy-ui-line); color: var(--cy-muted); font-size: .8125rem; }
.cyber-theme .cyber-text-link,
.cyber-theme .cyber-prose a { color: var(--cy-mint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; overflow-wrap: anywhere; }
.cyber-theme .cyber-text-link { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; max-inline-size: 100%; font-size: .9375rem; line-height: 1.8; }
.cyber-theme .cyber-text-link > span { min-inline-size: 0; }
.cyber-theme .cyber-text-link > [aria-hidden="true"] { flex: none; }
.cyber-theme :is(.cyber-text-link, .cyber-prose a, .cyber-footer-group a):hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; }
.cyber-theme :is(.btn-primary, .cyber-action, .cyber-text-link, .cyber-data-scroll, .cyber-member-links a, .cyber-faq-item summary, .cyber-footer-group a):focus-visible { outline: 3px solid var(--cy-mint); outline-offset: 3px; }
.cyber-theme .cyber-form :is(select, textarea, input[type="checkbox"], input[type="radio"]):focus-visible { outline: 3px solid var(--cy-mint); outline-offset: 3px; }
.cyber-theme .cyber-data-scroll::-webkit-scrollbar { block-size: 12px; }
.cyber-theme .cyber-data-scroll::-webkit-scrollbar-thumb { background: var(--cy-border); border: 3px solid var(--cy-surface); border-radius: 12px; }
.cyber-theme .cyber-data-scroll::-webkit-scrollbar-track { background: var(--cy-surface); }

@media (max-width: 599px) {
  .cyber-theme .cyber-page-head { margin-block-end: 24px; padding-block: 8px 20px; }
  .cyber-theme .cyber-action-row--stack > .cyber-action { inline-size: 100%; }
  .cyber-theme .cyber-facts > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cyber-theme .cyber-guide-item { gap: 12px; }
  .cyber-theme .cyber-calendar-fallback { margin-inline: 16px; }
  .cyber-theme .cyber-footer-inner { padding-inline: 16px; }
}

/* [11] 追加の動きは操作枠の色だけ。表・金額・本文には演出を付けない。 */
@media (prefers-reduced-motion: no-preference) {
  .cyber-theme[data-cyber-motion="on"] .cyber-action:not([data-cyber-static]):not(.cyber-money) { transition: border-color 160ms var(--cy-ease); }
}
@media (prefers-reduced-motion: reduce) {
  .cyber-theme .cyber-action { transition: none; }
}

/* [06,11] 印刷は可読性を優先。色固定はこの媒体だけ。screen の同詳細度上書きではない。 */
@media print {
  .cyber-theme, .cyber-theme[data-theme="light"] {
    --cy-bg: #fff; --cy-surface: #fff; --cy-raised: #f1f1f1;
    --cy-text: #111; --cy-muted: #444; --cy-border: #777; --cy-ui-line: #bbb;
    --cy-mint: #075563; --cy-pink: #8a1850; --cy-money: #604000;
    --cy-success: #16552c; --cy-warning: #6e350e; --cy-danger: #8a2020;
    background: #fff !important; color: #111 !important;
  }
  .cyber-theme, .cyber-theme *, .cyber-theme *::before, .cyber-theme *::after { animation: none !important; transition: none !important; text-shadow: none !important; box-shadow: none !important; }
  .cyber-theme :is(.site-header, .cyber-site-footer, .cyber-member-nav, .cyber-calendar-viewport, .cyber-calendar-loading, .cyber-calendar-retry, .cyber-cot-chart-inspector, .cyber-guide, .cyber-ticker) { display: none !important; }
  .cyber-theme > main { max-width: none; width: 100%; padding: 0; }
  .cyber-theme :is(.cyber-hero-panel, .cyber-card, .card, .cyber-state, .cyber-cot-card, .cyber-cot-metric, .cyber-cot-detail-chart, .cyber-calendar, .cyber-calendar-hero, .cyber-calendar-guide-card, .cyber-ind-row, .cyber-note, .cyber-alert) { background: #fff !important; color: #111 !important; border-color: #777 !important; }
  .cyber-theme .cyber-hero-panel, .cyber-theme[data-theme="light"] .cyber-hero-panel { --cy-text: #111; --cy-muted: #444; --cy-bg: #fff; --cy-surface: #fff; --cy-mint: #075563; }
  .cyber-theme :is(.cyber-data-scroll, .table-scroll, .cyber-cot-table-scroll) { overflow: visible !important; max-width: none; }
  .cyber-theme :is(.cyber-data-table, .cyber-cot-table-scroll table) { min-width: 0 !important; width: 100%; table-layout: auto; font-size: 8.5pt; }
  .cyber-theme :is(.cyber-data-table, .cyber-cot-table-scroll table) :is(th, td) { position: static !important; min-width: 0; padding: 6pt 4pt; background: #fff !important; color: #111 !important; border-color: #bbb; white-space: normal; overflow-wrap: anywhere; }
  .cyber-theme table thead { display: table-header-group; }
  .cyber-theme table tr { break-inside: avoid; }
  .cyber-theme :is(.cyber-page-title, .cyber-section-title, h2, h3) { break-after: avoid; }
  .cyber-theme :is(.cyber-comparison-grid, .cyber-detail-layout, .cyber-section-stack) { display: block; }
  .cyber-theme .cyber-comparison-card { margin-block-end: 20pt; }
  .cyber-theme .cyber-faq-item > .cyber-copy { display: block; }
  .cyber-theme .cyber-faq-item::details-content { content-visibility: visible; }
  .cyber-theme .cyber-calendar-fallback { display: block; }
  .cyber-theme :is(.cyber-text-link, .cyber-prose a) { color: #111 !important; text-decoration: underline; }
}
@media (forced-colors: active) {
  .cyber-theme :is(.cyber-action, .cyber-status, .cyber-card, .cyber-data-scroll) { border-color: CanvasText; }
  .cyber-theme .cyber-status::before { background: CanvasText; }
}

/* 追加（Claude）: 数字と日付だけは改行させない。COT の週次表・会員の履歴で使う */
.cyber-theme .cyber-number-run { white-space: nowrap; }

/* 追加（Claude）: 短いページでもフッターを画面の下端に置く。本文が短いと、フッターの下に
   背景だけの広い余白が残っていた（ログイン・お知らせ・404 など） */
.cyber-theme { display: flex; flex-direction: column; }
.cyber-theme > main { flex: 1 0 auto; inline-size: 100%; }

/* 追加（Claude）: Markdown の箇条書き。.prose-like は記号が出ていなかった */
.cyber-theme .prose-like :where(ul) { list-style: disc; padding-inline-start: 1.4em; }
.cyber-theme .prose-like :where(ol) { list-style: decimal; padding-inline-start: 1.4em; }

/* 追加（Claude）: 一覧の頭に 1 回だけ出す、還元の説明 */
.cyber-theme .cyber-brokers-note { margin-block-end: 24px; }

/* 追加（Claude）: 会員ページの成功・案内の文字色。互換層が 700/800 番台しか拾っていなかった */
.cyber-theme :is(.text-emerald-900, .text-blue-900) { color: var(--cy-text); }
.cyber-theme :is(.border-emerald-200, .border-green-200) { border-color: color-mix(in srgb, var(--cy-success) 40%, var(--cy-surface)); }
.cyber-theme .border-red-200 { border-color: color-mix(in srgb, var(--cy-danger) 40%, var(--cy-surface)); }
.cyber-theme .border-amber-200 { border-color: color-mix(in srgb, var(--cy-warning) 40%, var(--cy-surface)); }
.cyber-theme .border-blue-200 { border-color: color-mix(in srgb, var(--cy-mint) 40%, var(--cy-surface)); }

/* 追加（Claude）: 見出しの下余白と節の間隔が重なって、詳細ページの頭だけ空きすぎていた */
.cyber-theme .cyber-section-stack > .cyber-page-head { margin-block-end: 0; }

/* Native image cursors: no tracking overlay, click interception or animation loop. */
@media (hover: hover) and (pointer: fine) and (forced-colors: none) {
  .cyber-theme { cursor: url('../img/cursors/tokubaku-arrow.svg') 4 3, auto; }
  .cyber-theme a[href],
  .cyber-theme button:not(:disabled),
  .cyber-theme summary,
  .cyber-theme [role="button"],
  .cyber-theme label[for],
  .cyber-theme input:is([type="checkbox"], [type="radio"], [type="submit"]):not(:disabled),
  .cyber-theme .cyber-ticker-pause {
    cursor: url('../img/cursors/tokubaku-pointer.svg') 14 4, pointer;
  }
  .cyber-theme input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="file"]):not(:disabled),
  .cyber-theme textarea:not(:disabled),
  .cyber-theme [contenteditable="true"] { cursor: text; }
  .cyber-theme :is(button, input, select, textarea):disabled,
  .cyber-theme [aria-disabled="true"] { cursor: not-allowed; }
}