/* Reading surfaces float above the shared, animated world. */
.scene-detail #main {
  --white: #15171b;
  --soft: #101216;
  --muted: #a0a3ad;
  --line: #2b2d33;
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  color: #f1f2f5;
  background: rgba(7, 8, 10, .93);
  border-inline: 1px solid rgba(255, 255, 255, .065);
  box-shadow: 0 0 100px 40px rgba(0, 0, 0, .2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.scene-detail #main .wrap { max-width: none; padding-inline: clamp(24px, 4vw, 54px); }
.scene-detail #main .page-enter { min-height: 65vh; }
.scene-detail #main .breadcrumb { opacity: .65; letter-spacing: .08em; }
.scene-detail #main .page-header { padding-top: 35px; padding-bottom: 35px; }
.scene-detail #main .page-header h1 { font-size: clamp(28px, 3.2vw, 43px); letter-spacing: -.045em; }
.scene-detail #main .page-header p { color: #92959f; }
.scene-detail #main .page-header .english-title { font-size: 10px; letter-spacing: .2em; }
.scene-detail #main .toolbar { border-color: #26282d; }
.scene-detail #main .input-search { color: #f1f2f5; border-color: #4a4d56; }
.scene-detail #main .input-search::placeholder { color: #9497a1; }
.scene-detail #main .chip { background: rgba(255, 255, 255, .015); border-color: #34363d; color: #c4c6ce; }
.scene-detail #main .chip:hover { background: #25272d; border-color: #727680; color: #fff; }
.scene-detail #main .chip.active { background: #ef3038; border-color: #ef3038; color: #fff; box-shadow: 0 0 24px #ef303823; }
.scene-detail #main .button.dark { background: #22252b; color: #fff; border: 1px solid #454852; }
.scene-detail #main .button.outline { color: #f1f2f5; border-color: #484b55; }
.scene-detail #main .button.outline:hover { color: #fff; background: #24262c; border-color: #848893; }
.scene-detail #main .button.primary { box-shadow: 0 4px 30px #ef30381a; }
.scene-detail #main .icon-button:hover { background: #ef3038; color: #fff; }
.scene-detail #main .text-link { border-color: #5d6069; }
.scene-detail #main .text-link:hover { border-color: #ef3038; }
.scene-detail #main .results-count { color: #9397a1; }

/* The diagrams retain their individual geometry within one dark palette. */
.scene-detail #main .article-art { background: #121419; color: #ef4049; border: 1px solid #2d2f36; }
.scene-detail #main .article-art.email { background: #281216; color: #ff6870; border-color: #4e242b; }
.scene-detail #main .article-art.identity,
.scene-detail #main .article-art.supply-chain { background: #15161b; color: #e1e3e9; }
.scene-detail #main .article-art.network { background: #11151b; color: #f74852; }
.scene-detail #main .article-art.cloud { background: #191318; color: #fb4f59; }
.scene-detail #main .article-art .art-grid { opacity: .12; }
.scene-detail #main .news-card .article-art::after,
.scene-detail #main .timeline-event .article-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 20%, #ffffff09 48%, transparent 75%); transform: translateX(-140%); animation: surface-sweep 11s ease-in-out infinite; }
.scene-detail #main .news-card:nth-child(2n) .article-art::after { animation-delay: -5.5s; }
.scene-detail #main .news-card h3 { font-weight: 500; }
.scene-detail #main .news-card:hover h3 { color: #ff6670; }
.scene-detail #main .news-card p { color: #9da1aa; }
.scene-detail #main .card-bottom b { color: #e8eaf0; }
.scene-detail #main .feed-section { background: linear-gradient(135deg, #171419, #111318 70%); border: 1px solid #323039; }
.scene-detail #main .feed-status.warning { color: #ff8790; }
.scene-detail #main .feed-item:hover strong { color: #ff6870; }
.scene-detail #main .empty-state { background: #111318; border-color: #494b55; }
.scene-detail #main .world-note { background: #111318; border-left: 1px solid #ba3039; }
.scene-detail #main .news-row { transition: background .25s, padding .35s var(--ease); }
.scene-detail #main .news-row:hover { background: #ffffff03; padding-inline: 9px; }
.scene-detail #main .news-row .row-date strong { color: #e2e4eb; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Timeline and attack paths remain navigable, spatial diagrams. */
.scene-detail #main .timeline-track { scrollbar-color: #ef3038 #15171c; }
.scene-detail #main .timeline-line::before { background: linear-gradient(90deg, #a7323b, #3a252b); }
.scene-detail #main .timeline-line::after { box-shadow: 0 0 0 5px #0b0c0f, 0 0 24px #f4374260; }
.scene-detail #main .timeline-event time { color: #ebedf3; font-weight: 400; }
.scene-detail #main .timeline-explainer { background: #14151b; border: 1px solid #30323a; }
.scene-detail #main .path-tabs { border-bottom: 0; gap: 6px; }
.scene-detail #main .path-tab { background: #101217; border: 1px solid #30333c; color: #aeb2be; }
.scene-detail #main .path-tab + button { border-left: 1px solid #30333c; }
.scene-detail #main .path-tab:hover { border-color: #8d4149; color: #fff; background: #23151b; }
.scene-detail #main .path-tab.active { color: #fff; background: #a61f2c; border-color: #f64150; box-shadow: inset 0 0 35px #ef303830, 0 0 30px #ef303811; }
.scene-detail #main .attack-journey { position: relative; isolation: isolate; background: radial-gradient(ellipse at 50% 100%, #3e121c55, transparent 65%), #101216; border: 1px solid #36313a; }
.scene-detail #main .attack-journey::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(transparent, #000); }
.scene-detail #main .journey-node { background: #12141bd9; border-color: #444651; transition: transform .5s var(--ease), border-color .5s; }
.scene-detail #main .journey-node:hover { transform: translateY(-4px); border-color: #b0b4c2; }
.scene-detail #main .journey-node.defended { color: #ff8c94; background: #30131b; border-color: #e64956; box-shadow: 0 0 40px #ef30381a; animation: defense-glow 5s ease-in-out infinite; }
.scene-detail #main .journey-node small { color: #a2a6b2; }
.scene-detail #main .path-related { margin-top: 40px; }
.scene-detail #main .path-related h2 { font-size: 21px; }

/* Comparison is a working table, with a visible swipe affordance on small screens. */
.scene-detail #main .comparison-scroll { border-top-color: #5c3c44; scrollbar-color: #ef3038 #111319; }
.scene-detail #main .comparison-table caption { padding: 17px 0 0; }
.scene-detail #main .comparison-table th { color: #b3b6c0; background: #101216; }
.scene-detail #main .comparison-table td { color: #d9dbe2; }
.scene-detail #main .comparison-table td strong { color: #f2f3f7; font-weight: 500; }
.scene-detail #main .comparison-table td small { color: #9296a3; }
.scene-detail #main .comparison-table tr:hover td { background: #1c171e; }
.scene-detail #main .comparison-table .term-source { color: #f16b76; }
.scene-detail #main .compare-tray { background: #19151e; border: 1px solid #79404d; color: #fff; box-shadow: 0 16px 50px #0009; }
.scene-detail #main .compare-result { background: #121419; border: 1px solid #373943; color: #f1f2f6; }
.scene-detail #main .compare-result dd { color: #d8dbe4; }
.scene-detail #main .notice { color: #979ca8; }

/* Defense tools and the glossary share the quieter reading treatment. */
.scene-detail #main .defense-score { background: radial-gradient(ellipse at 95% 20%, #52162177, transparent 66%), #13151a; border: 1px solid #4b2934; }
.scene-detail #main .defense-score .big-price { color: #f4f5f8; text-shadow: 0 0 50px #ef303819; }
.scene-detail #main .defense-score .big-price small { color: #a2a6b0; font-size: 14px; }
.scene-detail #main .progress-track { background: #35303b; }
.scene-detail #main .progress-fill { box-shadow: 0 0 15px #ff4d62a0; }
.scene-detail #main .defense-summary .step { color: #7c808b; }
.scene-detail #main .defense-summary h3 { font-weight: 500; }
.scene-detail #main .defense-item[open] .defense-summary h3 { color: #f8848d; }
.scene-detail #main .defense-check { background: #171a22; border: 1px solid #333745; }
.scene-detail #main .defense-body li { color: #dbdee7; }
.scene-detail #main .budget-note { background: #20151c; border: 1px solid #56303c; color: #c5bdc8; }
.scene-detail #main .budget-note strong { color: #f0d8df; }
.scene-detail #main .budget-meta span { background: #171a21; border: 1px solid #2c303b; color: #b7bcc9; }
.scene-detail #main .budget-card h3 { font-weight: 500; }
.scene-detail #main .concept-map { background: radial-gradient(ellipse at 50% 30%, #35202e55, transparent 70%), #111318; border: 1px solid #35313d; }
.scene-detail #main .concept-box { background: #12151bc9; border-color: #55505e; min-width: 0; }
.scene-detail #main .concept-box strong { font-size: clamp(20px, 2.7vw, 31px); white-space: nowrap; }
.scene-detail #main .concept-box:hover,
.scene-detail #main .concept-box.active { color: #fff; border-color: #fa5666; background: #32151f; box-shadow: 0 0 35px #e5324a1a; }
.scene-detail #main .concept-box small { color: #b5b8c4; }
.scene-detail #main .concept-relation { color: #b7acbb; line-height: 1.8; }
.scene-detail #main .concept-detail { color: #bdc0cb; border-color: #3c3542; }
.scene-detail #main .concept-detail strong { color: #ff8290; }
.scene-detail #main .term h3 { font-weight: 500; }
.scene-detail #main .term p strong { color: #dedfe7; font-weight: 500; }
.scene-detail #main .term .relation { color: #f67d89; }
.scene-detail #main .article-page { padding-top: 0; }
.scene-detail #main .article-page h1 { font-weight: 500; }
.scene-detail #main .article-intro { color: #e0e3eb; }
.scene-detail #main .article-page .body-copy { color: #afb3bf; }
.scene-detail #main .article-defense { background: #19151d; border: 1px solid #50303c; }
.scene-detail #main .article-source a { color: #dadde6; }
.scene-detail #main .about-page p,
.scene-detail #main .about-page li { color: #afb3bf; }

/* Overlays are also used from the immersive home. */
.immersive dialog { color: #eceef4; background: #101217f5; border: 1px solid #4c3b47; box-shadow: 0 30px 120px #000c, 0 0 80px #c82b4112; }
.immersive dialog::backdrop { background: #000b; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.immersive dialog .search-field { border-color: #b73647; }
.immersive dialog input { color: #f1f2f5; }
.immersive dialog input::placeholder { color: #8e939f; }
.immersive dialog .search-result { border-color: #30333b; }
.immersive dialog .search-help { color: #a3a8b5; }
.immersive .toast { background: #24161f; border: 1px solid #7b3c4d; color: #fff; box-shadow: 0 20px 60px #0009; }

@keyframes surface-sweep { 0%, 55% { transform: translateX(-140%); } 80%, 100% { transform: translateX(140%); } }
@keyframes defense-glow { 50% { box-shadow: 0 0 45px #ef303833, inset 0 0 20px #ef30380d; } }

@media (max-width: 860px) {
  .scene-detail #main { margin-inline: 18px; }
  .scene-detail #main .wrap { padding-inline: 27px; }
  .scene-detail #main .concept-diagram { grid-template-columns: 1fr 65px 1fr 65px 1fr; }
  .scene-detail #main .concept-box { padding-inline: 8px; }
  .scene-detail #main .concept-box strong { font-size: 23px; }
  .scene-detail #main .comparison-scroll::before { content: '← 横にスクロール →'; display: block; position: sticky; left: 0; width: max-content; padding: 11px 0 0; color: #f27884; font-size: 10px; letter-spacing: .08em; }
}
@media (max-width: 600px) {
  .scene-detail #main { margin-inline: 10px; border-color: #ffffff0d; background: rgba(7, 8, 10, .95); }
  .scene-detail #main .wrap { padding-inline: 20px; }
  .scene-detail #main .page-header { padding-top: 25px; padding-bottom: 26px; }
  .scene-detail #main .page-header h1 { font-size: 30px; line-height: 1.45; }
  .scene-detail #main .page-header p { font-size: 11px; line-height: 2; }
  .scene-detail #main .breadcrumb { padding-top: 22px; }
  .scene-detail #main .news-card h3 { font-size: 19px; }
  .scene-detail #main .article-art { height: 195px; }
  .scene-detail #main .news-row { grid-template-columns: 62px minmax(0, 1fr) 16px; gap: 10px; }
  .scene-detail #main .news-row .row-date { font-size: 10px; }
  .scene-detail #main .news-row .row-date strong { font-size: 19px; line-height: 1.65; }
  .scene-detail #main .news-row:hover { padding-inline: 0; }
  .scene-detail #main .timeline-event { width: 267px; min-width: 267px; }
  .scene-detail #main .timeline-event .article-art { height: 160px; }
  .scene-detail #main .path-tabs { gap: 5px; }
  .scene-detail #main .path-tab { border-bottom: 1px solid #30333c; }
  .scene-detail #main .attack-journey { padding: 23px 16px; }
  .scene-detail #main .attack-journey h2 { font-size: 22px; }
  .scene-detail #main .compare-tray { flex-wrap: wrap; gap: 12px; }
  .scene-detail #main .compare-tray > div { display: flex; gap: 9px; }
  .scene-detail #main .defense-score .big-price { font-size: 72px; }
  .scene-detail #main .defense-summary { grid-template-columns: 24px minmax(0, 1fr) 20px; gap: 10px; }
  .scene-detail #main .defense-summary h3 { font-size: 17px; }
  .scene-detail #main .defense-body { padding-left: 0; }
  .scene-detail #main .concept-map { padding: 25px 18px; }
  .scene-detail #main .concept-diagram { grid-template-columns: minmax(0, 1fr); padding: 25px 0; }
  .scene-detail #main .concept-box { padding: 21px 18px; width: 100%; }
  .scene-detail #main .concept-box strong { font-size: 29px; white-space: nowrap; }
  .scene-detail #main .concept-box small { font-size: 11px; }
  .scene-detail #main .concept-relation { padding: 11px 0; font-size: 10px; color: #bdb1c0; }
  .scene-detail #main .concept-relation::after { content: '↓'; font-size: 23px; margin-top: 6px; animation: relation-down 2.4s ease-in-out infinite; }
  .scene-detail #main .concept-top h2 { font-size: 22px; }
  .scene-detail #main .concept-detail { font-size: 12px; line-height: 1.95; }
  .scene-detail #main .article-page { padding-inline: 20px; }
  .scene-detail #main .article-page h1 { font-size: 27px; }
  .scene-detail #main .article-page .article-art { height: 200px; }
  .scene-detail #main .article-defense { padding: 20px; }
  .scene-detail #main .about-page { padding-inline: 20px; }
}
@keyframes relation-down { 50% { transform: translateY(4px); } }