/* HIXOR cybersecurity site — staging stylesheet.
   Ported from the approved wireframe stylesheet (files/blueprint/wireframes/
   wireframes.css), which itself uses ONLY the production design tokens
   (B-tokens.md): --bgBase #f1f5f9, --deepDark #0f172a, --calmPurple #4f46e5,
   --calmPink #06b6d4 (cyan-500), --calmBlue #0ea5e9,
   font "Plus Jakarta Sans","Noto Sans JP",sans-serif, glass-panel/glass-nav
   verbatim. No new brand values. Tool/legal additions are at the end. */
:root{
  --bgBase:#f1f5f9; --deepDark:#0f172a; --calmPurple:#4f46e5; --calmPink:#06b6d4; --calmBlue:#0ea5e9;
  --electricCyan:#06b6d4; --softSlate:#64748b;
  --white:#ffffff; --slate50:#f8fafc;
  --gray100:#f3f4f6; --gray200:#e5e7eb; --gray500:#6b7280; --gray700:#374151;
  --guidesFrom:#0869D4; --guidesTo:#00C8F0;
  --radius-card:2rem; --radius-panel:1.5rem; --radius-inner:1rem; --radius-pill:9999px;
  --shadow-glass:0 10px 40px -10px rgba(15,23,42,0.08);
  --shadow-card:0 4px 6px -1px rgba(15,23,42,0.1),0 2px 4px -2px rgba(15,23,42,0.1);
  --shadow-lg:0 10px 15px -3px rgba(15,23,42,0.1),0 4px 6px -4px rgba(15,23,42,0.1);
  --font-sans:"Plus Jakarta Sans","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--bgBase);color:var(--deepDark);font-family:var(--font-sans);line-height:1.6;font-size:16px}
::selection{background:var(--calmPink);color:#fff}
a{color:inherit}
img{max-width:100%}
.container{width:100%;max-width:72rem;margin:0 auto;padding:0 1rem}
@media(min-width:768px){.container{padding:0 1.5rem}}
/* orbs — no hero gradient; bgBase + 3 blurred orbs per manifest §2 */
.orbs{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:9999px;mix-blend-mode:multiply;filter:blur(120px);opacity:.2}
.orb-purple{top:-10%;left:-10%;width:500px;height:500px;background:var(--calmPurple)}
.orb-pink{top:20%;right:-5%;width:400px;height:400px;background:var(--calmPink)}
.orb-blue{bottom:-20%;left:20%;width:600px;height:600px;background:var(--calmBlue)}
main,footer.site-footer,header.site-header{position:relative;z-index:1}
/* header / glass nav */
.glass-panel{background:rgba(255,255,255,0.7);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,0.8);box-shadow:var(--shadow-glass)}
.glass-nav{background:rgba(241,245,249,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(6,182,212,0.2)}
.site-header{position:sticky;top:0;z-index:50}
.nav-inner{display:flex;align-items:center;gap:.75rem;min-height:4rem;padding:.5rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:800;font-size:1.15rem;letter-spacing:.04em;flex-shrink:0}
.brand img{width:34px;height:30px}
.main-nav{display:none}
.main-nav a{text-decoration:none;font-size:.82rem;font-weight:600;padding:.5rem .45rem;border-radius:var(--radius-pill);white-space:nowrap}
.main-nav a:hover{color:var(--calmPink)}
.main-nav a[aria-current="page"]{color:var(--calmPink)}
@media(min-width:1024px){.main-nav{display:flex;align-items:center;gap:.1rem;margin-left:auto}}
.lang-selector{display:flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:700;margin-left:auto;flex-shrink:0}
@media(min-width:1024px){.lang-selector{margin-left:0}}
.lang-selector a{text-decoration:none;color:var(--gray500);padding:.5rem .3rem;min-height:44px;display:inline-flex;align-items:center}
.lang-selector [aria-current="true"]{color:var(--deepDark);text-decoration:underline;text-underline-offset:4px}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--gray200);background:rgba(255,255,255,.7);border-radius:var(--radius-pill);font-family:inherit;font-weight:700;cursor:pointer;flex-shrink:0}
@media(min-width:1024px){.menu-btn{display:none}}
.mobile-menu{display:none;background:var(--deepDark);color:#fff;padding:.75rem 1rem 1.25rem}
.mobile-menu.open{display:block}
.mobile-menu a{display:flex;align-items:center;min-height:44px;padding:.7rem .75rem;color:#fff;text-decoration:none;font-weight:600;border-radius:.5rem}
.mobile-menu a:hover{background:rgba(255,255,255,.1)}
@media(min-width:1024px){.mobile-menu{display:none!important}}
/* buttons — pill, fully rounded */
.btn{display:inline-block;text-decoration:none;border-radius:var(--radius-pill);font-weight:700;padding:.85rem 1.75rem;font-size:1rem;text-align:center;border:1px solid transparent;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--deepDark);color:#fff;box-shadow:var(--shadow-lg)}
.btn-primary:hover{background:var(--calmPink)}
.btn-secondary{background:rgba(255,255,255,.7);color:var(--deepDark);border-color:var(--gray200)}
.btn-secondary:hover{border-color:var(--calmPink);color:var(--calmPink)}
.btn-small{padding:.6rem 1.25rem;font-size:.875rem}
.btn-block{display:block;width:100%}
/* type & sections */
.eyebrow{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.12em;color:var(--calmPink);background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.2);padding:.3rem .8rem;border-radius:var(--radius-pill);text-transform:uppercase}
h1{font-size:2rem;line-height:1.25;margin:.75rem 0}
h2{font-size:1.5rem;line-height:1.3;margin:0 0 .75rem}
h3{font-size:1.1rem;margin:.25rem 0 .4rem}
@media(min-width:768px){h1{font-size:3rem}h2{font-size:1.9rem}}
.lead{color:var(--gray700);max-width:42rem}
.muted{color:var(--gray500);font-size:.9rem}
.section{padding:2.5rem 0}
.hero{padding:3rem 0 2.5rem;text-align:center}
.hero .lead{margin:0 auto 1.5rem}
.hero-actions{display:flex;flex-direction:column;gap:.75rem;align-items:stretch;max-width:26rem;margin:0 auto}
@media(min-width:768px){.hero-actions{flex-direction:row;max-width:none;justify-content:center}}
/* cards & grids */
.grid{display:grid;gap:1rem}
@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{border-radius:var(--radius-card);padding:1.75rem;text-decoration:none;display:flex;flex-direction:column;gap:.35rem}
.card:hover{box-shadow:var(--shadow-lg)}
.card .arrow{color:var(--calmPink);font-weight:800;margin-top:auto}
.icon-tile{width:3rem;height:3rem;border-radius:1rem;background:linear-gradient(to top right,var(--calmPurple),var(--calmPink));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:800}
.tag{display:inline-block;font-size:.68rem;font-weight:700;padding:.25rem .65rem;border-radius:var(--radius-pill);background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.4);color:var(--deepDark)}
.tag-cyan{background:rgba(6,182,212,.1);border-color:rgba(6,182,212,.3)}
.tag-planned{background:var(--gray100);border-color:var(--gray200);color:var(--gray500)}
.meta{font-size:.8rem;color:var(--gray500)}
.guide-cover{height:.6rem;border-radius:var(--radius-pill);background:linear-gradient(120deg,var(--guidesFrom) 0%,var(--guidesTo) 100%);margin-bottom:1rem}
/* chips / filters */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.5rem}
.chip{border:1px solid var(--gray200);background:#fff;border-radius:var(--radius-pill);padding:.55rem 1.1rem;font-family:inherit;font-weight:700;font-size:.875rem;cursor:pointer;min-height:44px}
.chip[aria-pressed="true"]{background:var(--deepDark);color:#fff;border-color:var(--deepDark)}
/* planned / placeholder */
.planned-panel{border:2px dashed var(--gray200);border-radius:var(--radius-card);padding:2rem;text-align:center;background:rgba(255,255,255,.5)}
.placeholder{border:1.5px dashed var(--gray200);border-radius:var(--radius-inner);padding:1.5rem;color:var(--gray500);background:rgba(255,255,255,.5)}
.notice{border-radius:var(--radius-inner);padding:1rem 1.25rem;background:rgba(14,165,233,.08);border:1px solid rgba(14,165,233,.35);font-size:.92rem}
.trust-strip{border-radius:var(--radius-card);padding:1.75rem;background:var(--deepDark);color:#fff}
.trust-strip .muted{color:#cbd5e1}
/* SECURITY ACTION badge card — mirrors the live LP's white badge card
   (badge image left + declaration line), inside the dark trust strip. */
.sa-card{display:flex;align-items:center;gap:1.25rem;background:#fff;color:var(--deepDark);border-radius:var(--radius-card);padding:1rem 1.5rem;margin:1.25rem 0}
.sa-card p{font-weight:700;margin:0}
.sa-badge{height:72px;width:auto;flex-shrink:0}
/* breadcrumb */
.breadcrumb{font-size:.85rem;color:var(--gray500);padding:1.25rem 0 0}
.breadcrumb a{color:var(--gray500)}
/* article body */
.prose{max-width:44rem}
.prose p{color:var(--gray700)}
.callout{border-left:4px solid var(--calmPink);padding:.75rem 1rem;background:rgba(255,255,255,.7);border-radius:0 var(--radius-inner) var(--radius-inner) 0}
/* forms */
.field{margin-bottom:1rem}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;padding:.8rem 1rem;border:1px solid var(--gray200);border-radius:var(--radius-inner);font-family:inherit;font-size:1rem;background:#fff;color:var(--deepDark)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--calmPink);outline-offset:1px}
.field-error{color:#b91c1c;font-size:.85rem;margin-top:.3rem} /* ABSENT in manifest: Tailwind default red-700 used as functional error color only */
.price{font-size:1.8rem;font-weight:800}
.price small{font-size:.85rem;color:var(--gray500);font-weight:600}
/* footer */
.site-footer{background:var(--deepDark);color:#fff;margin-top:3rem;padding:2.5rem 0 2rem}
.site-footer a{color:#e2e8f0}
.site-footer .muted{color:#94a3b8}
.footer-grid{display:grid;gap:1.75rem}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1.4fr}}
.footer-grid h3{font-size:.95rem}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.9rem}
.declaration{border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-inner);padding:1rem;font-size:.9rem;margin-top:1rem}
.index-list{display:grid;gap:.75rem}
.index-item{display:flex;gap:1rem;align-items:baseline;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow-glass);border-radius:var(--radius-inner);padding:1rem 1.25rem;text-decoration:none}
.index-item code{font-weight:700;color:var(--calmPurple);white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ---- Blueprint refinements 2026-11-07 (Yuji approved direction) ----
   Same token system only; no new colors/fonts. */
/* Hero headline phrase units: a phrase never breaks internally, so the
   JA headline can never strand 「を、」 alone on a line. */
.h-phrase{display:inline-block;white-space:nowrap}
/* Global positioning strip (under hero) */
.global-strip{max-width:46rem;margin:0 auto 1.25rem;text-align:center;font-size:.9rem;color:var(--gray700);background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow-glass);border-radius:var(--radius-panel);padding:.65rem 1.25rem}
.global-strip strong{color:var(--deepDark)}
/* Source note under the homepage advisories block */
.source-note{margin-top:1rem}
/* Trust block (advisory detail page): source / dates / limitations */
.trust-block{border-radius:var(--radius-panel);padding:1.25rem 1.5rem;margin:1.25rem 0}
.trust-block h2{font-size:1.05rem;margin-bottom:.6rem}
.trust-block dl{display:grid;grid-template-columns:7rem 1fr;gap:.4rem 1rem;margin:0}
.trust-block dt{font-weight:700;font-size:.88rem}
.trust-block dd{margin:0;font-size:.92rem;color:var(--gray700)}
.trust-block .limitations{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--gray200);font-size:.88rem;color:var(--gray700)}
/* Mobile refinements (<768px): JA hero size so phrase 1
   (「サイバーセキュリティを、」 = 12 full-width glyphs) fits one line at
   390px, tighter hero, and more compact section cards. */
@media(max-width:767px){
  .hero{padding:2.25rem 0 1.5rem}
  .hero h1:lang(ja){font-size:1.75rem;line-height:1.45}
  .home-cards{gap:.75rem}
  .home-cards .card{padding:1.15rem 1.25rem}
  .home-cards .icon-tile{width:2.5rem;height:2.5rem;border-radius:.8rem;font-size:1.05rem}
  .global-strip{margin-bottom:1rem}
}

/* ---- Staging additions: tools, legal tables, prose lists ---- */
.prose ol,.prose ul{color:var(--gray700);padding-left:1.4rem}
.prose li{margin:.3rem 0}
.prose h2{margin-top:1.75rem}
.progress-track{height:.6rem;border-radius:var(--radius-pill);background:var(--gray200);overflow:hidden;margin:.5rem 0 1rem}
.progress-fill{height:100%;background:linear-gradient(120deg,var(--guidesFrom),var(--guidesTo));width:0;transition:width .3s}
.tool-q{border-radius:var(--radius-inner);padding:1rem 1.25rem;margin-bottom:.75rem}
.tool-q .q-title{font-size:.72rem;font-weight:700;color:var(--gray500);margin:0 0 .25rem}
.tool-q .q-text{font-weight:600;margin:0 0 .6rem}
.answer-btns{display:flex;gap:.5rem;flex-wrap:wrap}
.ans-btn{border:1px solid var(--gray200);background:#fff;border-radius:var(--radius-pill);padding:.55rem 1.1rem;font-family:inherit;font-weight:700;font-size:.875rem;cursor:pointer;min-height:44px}
.ans-btn[aria-pressed="true"]{background:var(--calmPink);border-color:var(--calmPink);color:var(--deepDark)}
.ans-btn.sel-dark[aria-pressed="true"]{background:var(--deepDark);border-color:var(--deepDark);color:#fff}
.ans-btn.sel-purple[aria-pressed="true"]{background:var(--calmPurple);border-color:var(--calmPurple);color:#fff}
.result-panel{border-radius:var(--radius-card);padding:1.75rem;margin-top:1.5rem}
.result-panel[hidden]{display:none}
.gap-item{border-radius:var(--radius-inner);padding:1rem 1.25rem;margin-bottom:.6rem}
.chip-state{display:inline-block;font-size:.68rem;font-weight:700;padding:.2rem .6rem;border-radius:var(--radius-pill);border:1px solid var(--gray200);background:var(--gray100);margin-right:.5rem}
.chip-state.ok{background:rgba(6,182,212,.12);border-color:rgba(6,182,212,.4)}
.chip-state.ng{background:rgba(79,70,229,.1);border-color:rgba(79,70,229,.35)}
.area-row{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--gray200);padding:.45rem 0;font-size:.92rem}
.legal-table{width:100%;border-collapse:collapse;font-size:.92rem}
.legal-table th,.legal-table td{border:1px solid var(--gray200);padding:.6rem .8rem;text-align:left;vertical-align:top;background:rgba(255,255,255,.7)}
.legal-table th{width:11rem;background:var(--gray100);font-weight:700}
.courtesy{border-radius:var(--radius-inner);padding:1rem 1.25rem;background:rgba(14,165,233,.08);border:1px solid rgba(14,165,233,.35);font-size:.92rem;margin-bottom:1.25rem}
.success-panel{border-radius:var(--radius-card);padding:1.75rem;margin-bottom:1.5rem}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.filter-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.5rem}

/* ---- Threat Forecast (live monitor, 2026-11-07) ----
   Component styles ported from the approved /threat-level page build.
   The level colors are functional (data semantics), identical to the
   approved design; everything else uses this site's tokens. */
.tf-wrap{max-width:56rem;margin:0 auto}
.tf-stamp{font-size:.85rem;background:var(--deepDark);color:#fff;padding:.7rem 1rem;border-radius:var(--radius-inner);line-height:1.6}
.tf-scope{background:#fff;border:1px solid rgba(255,255,255,.8);border-radius:var(--radius-panel);padding:1.25rem 1.15rem;margin-bottom:1rem;box-shadow:var(--shadow-card)}
.tf-lv{display:flex;align-items:center;gap:.75rem}
.tf-dot{width:30px;height:30px;border-radius:50%;flex:none}
.tf-name{font-size:1.6rem;font-weight:700;line-height:1.2}
.tf-GREEN{background:#1a9e54}.tf-BLUE{background:#2470c7}
.tf-YELLOW{background:#d99a00}.tf-RED{background:#d42a2a}
.tf-UNKNOWN{background:#6b7280}
.tf-scope h2{font-size:1.05rem;font-weight:700;border-left:4px solid var(--guidesFrom);padding-left:.55rem;margin:1.2rem 0 .55rem;color:var(--deepDark)}
.tf-scope h3{font-size:.9rem;margin:.8rem 0 .4rem;color:var(--deepDark)}
.tf-summary{font-size:.92rem;line-height:1.8}
.tf-caution{background:#fff7e0;border:1px solid #e6c34a;border-radius:.6rem;padding:.65rem .8rem;font-size:.88rem;line-height:1.7}
.tf-conflict{background:#eef4ff;border:1px solid #9db9e8;border-radius:.6rem;padding:.65rem .8rem;font-size:.88rem;line-height:1.7}
ul.tf-ev{list-style:none;margin:0;padding:0}
ul.tf-ev li{border-top:1px solid var(--gray200);padding:.6rem 0;font-size:.88rem;line-height:1.7;overflow-wrap:anywhere}
.tf-tag{display:inline-block;font-size:.7rem;border-radius:.3rem;padding:.1rem .45rem;margin-right:.3rem;background:#e8eefc;color:var(--deepDark);font-weight:700}
.tf-tag.J1{background:#ffe1e1}.tf-tag.J2{background:#fff0c9}
.tf-tag.W{background:#e5e9f2}
.tf-life{font-size:.72rem;color:#666}
.tf-scope a{color:var(--guidesFrom)}
.tf-card{background:var(--slate50);border:1px solid var(--gray200);border-radius:var(--radius-inner);padding:1rem;margin-bottom:.7rem}
.tf-card h3{margin:0 0 .3rem;color:var(--deepDark);font-size:1rem}
.tf-card p{font-size:.88rem;line-height:1.8;margin:.4rem 0}
.tf-card ol{font-size:.88rem;line-height:1.9;margin:.4rem 0;padding-left:1.4rem}
.tf-card .tf-src{font-size:.72rem;color:#666}
.tf-status{width:100%;border-collapse:collapse;font-size:.78rem}
.tf-status td,.tf-status th{border-bottom:1px solid var(--gray200);padding:.4rem;text-align:left}
.tf-ok{color:#1a9e54;font-weight:700}.tf-ng{color:#d42a2a;font-weight:700}
.tf-chg{font-size:.8rem;line-height:1.7;border-top:1px solid var(--gray200);padding:.4rem 0}
.tf-unknown-box{background:#f1f2f5;border:2px dashed #6b7280;border-radius:var(--radius-inner);padding:1.25rem 1rem;text-align:center}
.tf-method{font-size:.9rem;line-height:1.9}
.tf-method li{margin-bottom:.3rem}
/* Status hero: weather-forecast style — color + icon + plain word
   together (never color alone), one friendly panel per scope. */
.tf-hero{border-radius:var(--radius-inner);padding:1.1rem 1rem .8rem;margin-bottom:.7rem;border:2px solid #6b7280;background:#eef0f3}
.tf-hero.GREEN{border-color:#1a9e54;background:#e9f7ee}
.tf-hero.BLUE{border-color:#2470c7;background:#e9f2fc}
.tf-hero.YELLOW{border-color:#d99a00;background:#fdf4d8}
.tf-hero.RED{border-color:#d42a2a;background:#fdecec}
.tf-hero.UNKNOWN{border-color:#6b7280;background:#eef0f3}
.tf-hero .tf-hrow{display:flex;align-items:center;gap:.9rem}
.tf-disc{width:58px;height:58px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.6rem;font-weight:800;line-height:1}
.tf-disc.GREEN{background:#1a9e54}.tf-disc.BLUE{background:#2470c7}
.tf-disc.YELLOW{background:#d99a00}.tf-disc.RED{background:#d42a2a}
.tf-disc.UNKNOWN{background:#6b7280}
.tf-hero .tf-hword{font-size:2.1rem;font-weight:800;line-height:1.15}
.tf-hero .tf-hscope{font-size:.85rem;color:#444}
.tf-hero .tf-hgloss{font-size:1rem;font-weight:700;margin-top:.7rem;line-height:1.6}
.tf-hero .tf-summary{margin:.3rem 0 .15rem}
.tf-hero .tf-latest{font-size:.85rem;color:#333;margin:.15rem 0 0}
/* Level meter: 5 steps, current level highlighted */
.tf-meter{display:flex;gap:.3rem;margin:.8rem 0 .15rem}
.tf-meter .tf-step{flex:1;text-align:center}
.tf-meter .tf-bar{height:12px;border-radius:6px;opacity:.25}
.tf-meter .tf-lab{font-size:.75rem;color:#666;margin-top:.3rem}
.tf-meter .tf-step.on .tf-bar{opacity:1;box-shadow:0 0 0 2px var(--deepDark) inset}
.tf-meter .tf-step.on .tf-lab{color:var(--deepDark);font-weight:800;font-size:.95rem}
/* 14-day history band */
.tf-band{display:flex;gap:3px;margin:.4rem 0 .15rem}
.tf-band div{flex:1;height:20px;border-radius:4px;min-width:0}
.tf-band .tf-norec{background:repeating-linear-gradient(45deg,#e5e9f2 0 4px,#f7f9fc 4px 8px);border:1px solid #d7dee9}
.tf-band-cap{font-size:.78rem;color:#555;line-height:1.7}
/* Evidence breakdown bars */
.tf-bars{margin:.7rem 0 .15rem}
.tf-bars .tf-brow{display:flex;align-items:center;gap:.55rem;font-size:.85rem;margin:.35rem 0;min-height:24px}
.tf-bars .tf-blab{width:118px;flex:none;color:#333;line-height:1.5}
.tf-bars .tf-btrack{flex:1;background:#eef2f8;border-radius:5px;height:16px}
.tf-bars .tf-bfill{height:16px;border-radius:5px;background:var(--guidesFrom)}
.tf-bars .tf-bfill.c-J1{background:#d42a2a}.tf-bars .tf-bfill.c-J2{background:#d99a00}
.tf-bars .tf-bfill.c-W{background:#6b7280}
.tf-bars .tf-bnum{width:84px;flex:none;text-align:right;white-space:nowrap;font-weight:800;font-size:1.05rem;color:var(--deepDark)}
.tf-bars .tf-bcap{font-size:.8rem;color:#555;line-height:1.7;margin-top:.35rem}
/* Progressive disclosure */
details.tf-details{margin-top:.8rem;border-top:1px solid var(--gray200)}
details.tf-details>summary{cursor:pointer;font-size:.98rem;font-weight:700;color:var(--guidesFrom);padding:.9rem 0 .4rem;min-height:44px;list-style:none}
details.tf-details>summary::-webkit-details-marker{display:none}
details.tf-details>summary::before{content:"▸ "}
details.tf-details[open]>summary::before{content:"▾ "}
/* Homepage forecast badge: the card is static; the level chips and the
   confirmation time stay hidden unless the feed loads and validates. */
.tf-badge-card{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;border-radius:var(--radius-card);padding:1.4rem 1.75rem;text-decoration:none}
.tf-badge-card:hover{box-shadow:var(--shadow-lg)}
.tf-badge-title{display:block;font-weight:800;font-size:1.05rem;margin-top:.35rem}
.tf-badge-levels{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.tf-badge-levels[hidden]{display:none}
.tf-badge-scope{font-size:.8rem;font-weight:700;color:var(--gray500)}
.tf-chip{color:#fff;font-weight:700;font-size:.85rem;padding:.3rem .9rem;border-radius:var(--radius-pill);min-width:3.5rem;text-align:center;display:inline-block}
.tf-badge-time{font-size:.75rem;color:var(--gray500)}
.tf-badge-time[hidden]{display:none}
.tf-badge-card .arrow{color:var(--calmPink);font-weight:800}

/* ---- Front-end fixes 2026-11-07 (owner review round) ----
   Footer SECURITY ACTION badge, About page build-out (founder's
   message + declaration panel), article hero image and share row.
   Site tokens only, except the rev2 share-button brand colors below. */
/* Footer declaration: badge left, declaration text right (the badge
   artwork is azure on transparency, legible on the dark footer). */
.footer-declaration{display:flex;align-items:center;gap:1rem}
.sa-badge-footer{height:64px}
/* About: declaration panel badge at the security-policy page's size */
.sa-badge-lg{height:88px;width:auto}
.sa-badge-row{text-align:center;margin-top:0}
/* About: founder's-message signature (small, at the end of the
   greeting text; 38mm print width ≈ 170px at web density) */
.founder-sign{margin-top:1.25rem;font-weight:700}
.founder-signature{width:170px;max-width:60%;height:auto;margin-top:.35rem}
/* Article hero image (replaces the gradient bar when a guide has one) */
.guide-hero{display:block;width:100%;height:auto;border-radius:var(--radius-card);margin-bottom:1rem}
/* Article share row: plain share URLs + copy button. Rev2 (owner):
   filled brand-color buttons with a subtle 3D look — gentle vertical
   gradient, top highlight, soft drop shadow, press-down on :active.
   Brand colors are scoped to these buttons only (X black, Facebook
   #1877F2, LINE #06C755); the copy button uses the site azure. */
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1rem 0}
.share-label{font-weight:700;font-size:.9rem;margin-right:.25rem}
.share-btn{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1.15rem;border:1px solid rgba(15,23,42,.18);border-radius:var(--radius-pill);font-family:inherit;font-weight:700;font-size:.875rem;color:#fff;text-decoration:none;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.12),0 3px 6px rgba(15,23,42,.22);transition:filter .15s ease,box-shadow .15s ease,transform .05s ease}
.share-btn:hover{filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.12),0 5px 10px rgba(15,23,42,.28)}
.share-btn:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 3px rgba(15,23,42,.25)}
.share-x{background:linear-gradient(180deg,#3d3d3d 0%,#101010 55%,#000 100%)}
.share-facebook{background:linear-gradient(180deg,#5ea0f7 0%,#1877F2 55%,#0d65d9 100%)}
.share-line{background:linear-gradient(180deg,#34d977 0%,#06C755 55%,#049f43 100%)}
.share-copy{background:linear-gradient(180deg,var(--calmBlue) 0%,var(--guidesFrom) 100%)}

/* ---- Front-end fixes rev2 2026-11-07 (owner feedback) ----
   About page: standard About Us layout — founder greeting as a
   two-column block (portrait + flowing text, no catalog-style panel)
   and a standard company-information table. */
/* Founder greeting: portrait left on desktop, stacked on mobile.
   The portrait is a single <img> (static/img/founder-portrait.jpg) —
   swapping in a new photo is a file replacement only. */
.founder-greeting{display:grid;gap:1.75rem;margin-top:1rem}
.founder-photo{margin:0;max-width:280px}
.founder-photo img{display:block;width:100%;height:auto;border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.founder-caption{margin-top:.65rem;font-size:.95rem;line-height:1.45}
@media(min-width:768px){
  .founder-greeting{grid-template-columns:300px 1fr;align-items:start}
  .founder-photo{max-width:none}
}
.founder-text>:first-child{margin-top:0}
/* Company information: standard definition table */
.company-table{width:100%;max-width:44rem;border-collapse:collapse;background:rgba(255,255,255,.55);border-radius:var(--radius-inner);overflow:hidden}
.company-table th,.company-table td{padding:.7rem 1rem;border-bottom:1px solid var(--gray200);text-align:left;vertical-align:top;font-size:.95rem}
.company-table th{width:32%;font-weight:700;background:rgba(255,255,255,.65);white-space:nowrap}
.company-table td{color:var(--gray700)}
.company-table tr:last-child th,.company-table tr:last-child td{border-bottom:none}

/* ---- Dark theme design system 2026-11-07 (owner-approved concept) ----
   Token-driven layer, applied per page via <body class="theme-dark">
   (base.html body_class block). The light theme above is untouched and
   remains the default; pages opt in individually so the rollout can be
   staged. Palette is the approved forecast dark-prototype palette
   (theme-dark restyle): deep navy #040b1a / HIXOR navy #101d42 /
   azure #039be1 / azure-hi #4fc3ff, text scale #dbe7f5 / #b9cde4 /
   #9db4cc (all >= 6:1 on the page background). The .theme-dark-article
   modifier adds the calmer long-text treatment for guide articles. */
body.theme-dark{
  --dt-bg:#040b1a; --dt-navy:#101d42; --dt-azure:#039be1; --dt-azure-hi:#4fc3ff;
  --dt-ink:#dbe7f5; --dt-ink2:#b9cde4; --dt-muted:#9db4cc;
  --dt-line:rgba(110,180,245,.24);
  --dt-panel:linear-gradient(160deg,rgba(23,42,92,.66),rgba(10,20,48,.80));
  --dt-shadow:inset 0 1px 0 rgba(160,210,255,.16),0 14px 44px -14px rgba(0,0,0,.60);
  background:
    radial-gradient(1100px 520px at 85% -10%,rgba(3,155,225,.20),transparent 60%),
    radial-gradient(900px 520px at -10% 32%,rgba(8,105,212,.16),transparent 60%),
    linear-gradient(180deg,#071633 0%,var(--dt-bg) 55%,#03081a 100%);
  background-color:var(--dt-bg);
  color:var(--dt-ink);
}
body.theme-dark ::selection{background:var(--dt-azure);color:#fff}
/* backdrop orbs: multiply would vanish on navy — switch to screen glow */
body.theme-dark .orb{mix-blend-mode:screen;opacity:.16}
/* header chrome */
body.theme-dark .glass-nav{background:rgba(4,11,26,.86);border-bottom:1px solid var(--dt-line)}
body.theme-dark .brand{color:#fff}
/* Official logo (static/img/Icon_logo.svg) is mostly #0F172A — near-black
   on navy. The asset itself is used UNMODIFIED; the header gives it a
   light plate so the genuine mark stays legible on the dark chrome. */
body.theme-dark .brand img{background:#f2f7fd;border-radius:10px;padding:5px 7px;width:46px;height:40px;box-shadow:0 0 0 1px rgba(110,180,245,.35),0 0 18px rgba(3,155,225,.35)}
body.theme-dark .main-nav a{color:var(--dt-ink2)}
body.theme-dark .main-nav a:hover{color:var(--dt-azure-hi)}
body.theme-dark .main-nav a[aria-current="page"]{color:var(--dt-azure-hi)}
body.theme-dark .lang-selector a{color:var(--dt-muted)}
body.theme-dark .lang-selector [aria-current="true"]{color:#fff}
body.theme-dark .menu-btn{background:rgba(16,29,66,.6);border-color:var(--dt-line);color:var(--dt-ink)}
body.theme-dark .mobile-menu{background:#03081a;border-bottom:1px solid var(--dt-line)}
/* type */
body.theme-dark .lead{color:var(--dt-ink2)}
body.theme-dark .muted{color:var(--dt-muted)}
body.theme-dark .meta{color:var(--dt-muted)}
body.theme-dark .eyebrow{color:var(--dt-azure-hi);background:rgba(3,155,225,.10);border-color:rgba(79,195,255,.30)}
/* buttons */
body.theme-dark .btn-primary{background:linear-gradient(180deg,var(--dt-azure),#0869d4);color:#fff;box-shadow:0 0 0 1px rgba(79,195,255,.35),0 10px 28px -8px rgba(3,155,225,.55)}
body.theme-dark .btn-primary:hover{background:linear-gradient(180deg,#1cabf0,#0a74e0)}
body.theme-dark .btn-secondary{background:rgba(16,29,66,.55);color:var(--dt-ink);border-color:var(--dt-line)}
body.theme-dark .btn-secondary:hover{border-color:var(--dt-azure-hi);color:#fff}
/* glass panels & cards */
body.theme-dark .glass-panel{background:var(--dt-panel);border:1px solid var(--dt-line);box-shadow:var(--dt-shadow)}
body.theme-dark .card:hover{box-shadow:0 0 0 1px rgba(79,195,255,.25),0 18px 50px -14px rgba(0,0,0,.65)}
body.theme-dark .card .arrow{color:var(--dt-azure-hi)}
body.theme-dark article.card a{color:var(--dt-azure-hi)}
body.theme-dark .tag{color:var(--dt-ink2);background:rgba(14,165,233,.12);border-color:rgba(79,195,255,.35)}
body.theme-dark .tag-planned{background:rgba(255,255,255,.06);border-color:var(--dt-line);color:var(--dt-muted)}
body.theme-dark .global-strip{background:var(--dt-panel);border:1px solid var(--dt-line);box-shadow:var(--dt-shadow);color:var(--dt-ink2)}
body.theme-dark .global-strip strong{color:#fff}
body.theme-dark .price small{color:var(--dt-muted)}
body.theme-dark .guide-cover{box-shadow:0 0 14px rgba(0,200,240,.35)}
/* home: forecast badge bits */
body.theme-dark .tf-badge-scope{color:var(--dt-muted)}
body.theme-dark .tf-badge-time{color:var(--dt-muted)}
/* home: trust strip becomes a glass panel; the SECURITY ACTION card
   inside it stays a WHITE plate — the genuine IPA badge artwork is
   unmodified and keeps its live-site white-card treatment. */
body.theme-dark .trust-strip{background:var(--dt-panel);border:1px solid var(--dt-line);box-shadow:var(--dt-shadow);color:var(--dt-ink)}
body.theme-dark .trust-strip .muted{color:var(--dt-muted)}
body.theme-dark .sa-card{box-shadow:0 0 0 1px rgba(110,180,245,.25),0 10px 30px -10px rgba(0,0,0,.5)}
/* footer: one step darker than the page so it reads as the base band */
body.theme-dark .site-footer{background:#03081a;border-top:1px solid var(--dt-line)}
/* ---- Article variant: calmer long-text treatment ----
   The article body sits on one deep, low-glow reading panel (dimmer
   border, no bright accents inside), body text #c9d9ec at 1.85 line
   height — tuned for multi-minute reading, ~10:1 on the panel. */
body.theme-dark-article .breadcrumb,body.theme-dark-article .breadcrumb a{color:var(--dt-muted)}
body.theme-dark-article .prose{background:linear-gradient(170deg,rgba(13,26,58,.82),rgba(7,14,33,.92));border:1px solid rgba(110,180,245,.16);border-radius:var(--radius-panel);box-shadow:0 18px 50px -20px rgba(0,0,0,.55);padding:1.75rem 1.25rem 2rem;line-height:1.85}
@media(min-width:768px){body.theme-dark-article .prose{padding:2.5rem 2.75rem 2.75rem}}
body.theme-dark-article .prose p,body.theme-dark-article .prose ol,body.theme-dark-article .prose ul{color:#c9d9ec}
body.theme-dark-article .prose h2,body.theme-dark-article .prose h3{color:#eef5fd}
body.theme-dark-article .prose a{color:var(--dt-azure-hi)}
body.theme-dark-article .callout{background:rgba(3,155,225,.07);border-left-color:var(--dt-azure);color:var(--dt-ink2)}
body.theme-dark-article .callout ol{color:var(--dt-ink2)}
body.theme-dark-article .notice{background:rgba(14,165,233,.10);border-color:rgba(79,195,255,.35);color:var(--dt-ink2)}
body.theme-dark-article .legal-table th,body.theme-dark-article .legal-table td{border-color:var(--dt-line)}
body.theme-dark-article .legal-table th{background:rgba(3,155,225,.13);color:#eef5fd}
body.theme-dark-article .legal-table td{background:rgba(255,255,255,.03);color:#c9d9ec}
body.theme-dark-article .guide-hero{border:1px solid var(--dt-line);box-shadow:0 12px 36px -12px rgba(0,0,0,.6)}

/* ---- Forecast page: dark 3D design (owner scope decision 2026-11-07:
   dark theme on the Forecast page ONLY). Component styles ported from
   the approved theme-dark prototype; every selector is scoped under
   body.theme-dark .tf3 so nothing leaks to the light pages, and the
   class names carry the tf3- prefix to avoid collisions with the site
   design system. The token layer above (body.theme-dark) supplies the
   page background and the header/footer chrome. ---- */
body.theme-dark .tf-wrap{max-width:72rem}
body.theme-dark .breadcrumb,body.theme-dark .breadcrumb a{color:var(--dt-muted)}
body.theme-dark .breadcrumb a:hover{color:var(--dt-azure-hi)}
body.theme-dark .notice{background:rgba(14,165,233,.10);border-color:rgba(79,195,255,.35);color:var(--dt-ink2)}
body.theme-dark .tf3-method-sec{background:var(--dt-panel);border:1px solid var(--dt-line);box-shadow:var(--dt-shadow);color:var(--dt-ink)}
body.theme-dark .tf3-method-sec h2{color:#fff;border-left-color:var(--dt-azure)}
body.theme-dark .tf3-method-sec .tf-method{color:var(--dt-ink2)}
body.theme-dark .tf-wrap>p a{color:var(--dt-azure-hi)}

body.theme-dark .tf3{
  --tf3-line:rgba(110,180,245,.22);
  --tf3-ink:#dbe7f5; --tf3-ink2:#b9cde4; --tf3-muted:#9db4cc; --tf3-faint:#7e97b5;
  --tf3-unknown:#8b9bb2;
}
/* header pills + chips (template chrome, filled by forecast.js) */
.tf3-hpills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tf3-hpill{display:inline-flex;align-items:center;gap:8px;border-radius:9999px;padding:6px 14px;font-size:12.5px;font-weight:700;color:#dff0ff;background:rgba(12,38,78,.6);border:1px solid rgba(96,196,255,.4);box-shadow:0 0 14px rgba(3,155,225,.18), inset 0 1px 0 rgba(255,255,255,.12)}
.tf3-hpill svg{width:15px;height:15px;fill:none;stroke:#7fd0ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tf3-hpill .tf3-dot{width:8px;height:8px;border-radius:50%;background:#2fe07c;box-shadow:0 0 9px #2fe07c;flex:none}
.tf3-hpill .tf3-dot.warn{background:#f5b90d;box-shadow:0 0 9px #f5b90d}
.tf3-hpill .tf3-dot.bad{background:#f43f4e;box-shadow:0 0 9px #f43f4e}
.tf3-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.tf3-chip{display:inline-flex;align-items:center;gap:6px;border-radius:9999px;padding:3px 12px;font-size:12.5px;font-weight:700;border:1.5px solid rgba(120,190,255,.3);background:rgba(10,32,68,.5);color:var(--tf3-ink2)}
.tf3-chip.warn{border-color:rgba(245,185,13,.5);color:#ffd97a;background:rgba(80,62,4,.35)}
.tf3-chip.grey{color:var(--tf3-muted)}
.tf3-band{display:flex;align-items:center;gap:10px;margin:34px 0 14px}
.tf3-band .tf3-bandtag{background:linear-gradient(180deg,#0e84d8,#075fb8);color:#fff;font-weight:800;font-size:12px;border-radius:8px;padding:3px 10px;letter-spacing:.06em;box-shadow:0 0 12px rgba(3,155,225,.5)}
.tf3-band h2{font-size:19px;margin:0;color:#fff}
.tf3-band .tf3-rule{flex:1;height:1px;background:linear-gradient(90deg, rgba(110,180,245,.45), transparent)}
.tf3-panel{background:linear-gradient(180deg, rgba(19,50,96,.58), rgba(9,28,60,.66));border:1px solid var(--tf3-line);border-radius:24px;box-shadow:0 18px 44px -16px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);padding:22px 24px}
.tf3-panel h3{margin:0 0 6px;font-size:17px;color:#fff}

/* ===== A: scope panels + 3D meters ===== */
.tf3-scopegrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.tf3-scopegrid{grid-template-columns:1fr}}
.tf3-scope{transition:box-shadow .4s ease, outline-color .4s ease;outline:3px solid transparent;outline-offset:3px}
.tf3-scope.tf3-focused{outline-color:rgba(79,195,255,.75);box-shadow:0 0 0 1px rgba(79,195,255,.3), 0 18px 44px -16px rgba(0,0,0,.65), 0 0 34px rgba(3,155,225,.28)}
.tf3-scopehead{display:flex;align-items:flex-start;gap:12px;text-align:left}
.tf3-scopehead .tf3-accent{width:4px;align-self:stretch;min-height:44px;border-radius:2px;background:linear-gradient(180deg,#4fc3ff,#0b6fd6);box-shadow:0 0 10px rgba(79,195,255,.8);flex:none}
.tf3-flagmark{width:34px;height:24px;border-radius:5px;background:#f4f7fb;position:relative;flex:none;margin-top:2px;box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.4)}
.tf3-flagmark::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;background:#e03a4e;transform:translate(-50%,-50%)}
.tf3-globemark{width:30px;height:30px;flex:none;color:#7fd0ff;margin-top:1px}
.tf3-stitle{flex:1;min-width:0}
.tf3-stitle h2{margin:0;font-size:19px;color:#fff;line-height:1.35}
.tf3-stitle .tf3-en{display:block;font-size:10px;letter-spacing:.22em;color:#8fc6ee;font-weight:700;margin-top:2px}
.tf3-hchips{display:flex;flex-direction:column;gap:5px;align-items:flex-end;flex:none}
.tf3-hchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#cfe4f8;background:rgba(10,34,70,.6);border:1px solid var(--tf3-line);border-radius:8px;padding:2px 9px;white-space:nowrap}
.tf3-hchip svg{width:12px;height:12px;fill:none;stroke:#7fd0ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tf3-hchip .tf3-dot{width:7px;height:7px;border-radius:50%;background:#2fe07c;box-shadow:0 0 8px #2fe07c}
.tf3-hchip.warn{color:#ffd97a;border-color:rgba(245,185,13,.45)}
.tf3-hchip.warn .tf3-dot{background:#f5b90d;box-shadow:0 0 8px #f5b90d}
.tf3-hchip.bad{color:#ff9aa4;border-color:rgba(244,63,78,.45)}
.tf3-hchip.bad .tf3-dot{background:#f43f4e;box-shadow:0 0 8px #f43f4e}
.tf3-meterrow{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.tf3-meterwrap{perspective:950px;width:252px;flex:none}
.tf3-meter{position:relative;width:252px;height:252px;margin:0 auto;transform-style:preserve-3d;will-change:transform}
.tf3-meter svg{display:block;filter:drop-shadow(0 18px 22px rgba(0,0,0,.55))}
.tf3-meter .tf3-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 46px;pointer-events:none;text-align:center}
.tf3-meter .tf3-icon{font-size:22px;font-weight:800;color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 18px rgba(3,155,225,.35), 0 7px 15px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.55), inset 0 -4px 7px rgba(0,0,0,.28)}
.tf3-meter .tf3-icon.tf3-tri{width:54px;height:48px;background:none;border-radius:0;box-shadow:none;filter:drop-shadow(0 0 10px rgba(245,185,13,.45))}
.tf3-meter .tf3-icon.tf3-tri svg{display:block;width:54px;height:48px;filter:none}
.tf3-meter .tf3-word{font-size:39px;font-weight:800;line-height:1.14;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.65)}
.tf3-meter .tf3-mword-en{font-size:10.5px;font-weight:700;letter-spacing:.3em;color:#9db4cc}
.tf3-meter .tf3-gloss{font-size:13px;font-weight:700;color:#cfe0f2;margin-top:2px}
@keyframes tf3Pulse{0%{opacity:.55}100%{opacity:1}}
.tf3-seg-on{animation:tf3Pulse .6s ease-out 1}
.tf3-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;text-align:left;min-width:160px}
.tf3-legend li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:#a9c2dc;padding:5px 13px 5px 9px;border-radius:9999px;border:1.5px solid transparent;white-space:nowrap}
.tf3-legend .tf3-sq{width:15px;height:15px;border-radius:4px;background:var(--lc);flex:none;box-shadow:inset 0 1px 2px rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.4)}
.tf3-legend .tf3-len{font-weight:600;color:#7e97b5;font-size:12px}
.tf3-legend li.on{color:#fff;border-color:var(--lc);background:rgba(255,255,255,.06);box-shadow:0 0 14px rgba(3,155,225,.18), inset 0 0 12px rgba(255,255,255,.04)}
.tf3-heldchip{display:inline-block;background:rgba(140,160,190,.14);border:1.5px dashed var(--tf3-unknown);color:#d5e2f0;border-radius:8px;padding:1px 9px;font-size:12px;font-weight:700}
.tf3-unknownbox{border:2px dashed var(--tf3-unknown);background:rgba(120,140,170,.10);border-radius:16px;padding:12px 14px;font-size:13.5px;text-align:left;margin-top:10px;color:var(--tf3-ink)}
.tf3-summary{font-size:14.5px;text-align:left;margin:12px 0 4px;color:var(--tf3-ink)}
.tf3-evbox{margin-top:12px;text-align:left;background:linear-gradient(180deg, rgba(21,54,104,.55), rgba(10,30,62,.6));border:1px solid var(--tf3-line);border-radius:16px;padding:13px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.tf3-evbox .tf3-evh{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px;color:#dff0ff;margin-bottom:5px}
.tf3-evbox .tf3-evh svg{width:18px;height:18px;fill:none;stroke:#4fc3ff;stroke-width:1.8;stroke-linejoin:round}
.tf3-outlookbox{font-size:13.5px;text-align:left;margin:2px 0}
.tf3-outlookbox .tf3-otag{display:inline-block;background:#f5b90d;color:#231a00;font-size:11px;font-weight:800;border-radius:6px;padding:0 7px;margin-bottom:4px}
.tf3-outlookbox a,.tf3-tcard a,.tf3-statcard a{color:#5ec2ff}
.tf3-srcline{font-size:12px;color:var(--tf3-muted)}
.tf3-fresh{font-size:12.5px;color:var(--tf3-muted);text-align:left}
.tf3-newct{font-size:13px;text-align:left;color:var(--tf3-ink2);margin:2px 0 0}
.tf3-caution{background:rgba(80,62,4,.35);border:1px solid rgba(245,185,13,.5);border-radius:12px;padding:9px 12px;font-size:13.5px;text-align:left;margin-top:10px;color:#ffe1a1}
.tf3-conflict{background:rgba(3,155,225,.10);border:1px solid rgba(79,195,255,.4);border-radius:12px;padding:9px 12px;font-size:13.5px;text-align:left;margin-top:10px;color:var(--tf3-ink)}
.tf3-rbtn,.tf3-scopebtn{font:inherit;font-size:13px;font-weight:700;border:1.5px solid rgba(120,190,255,.35);background:rgba(10,32,68,.55);color:#cfe4f8;border-radius:9999px;padding:7px 15px;cursor:pointer;min-height:40px}
.tf3-rbtn[aria-pressed="true"],.tf3-scopebtn[aria-pressed="true"]{background:linear-gradient(180deg,#0e84d8,#075fb8);color:#fff;border-color:#5ec2ff;box-shadow:0 0 16px rgba(3,155,225,.5)}
.tf3 button:focus-visible,.tf3 [tabindex="0"]:focus-visible{outline:3px solid #5ec2ff;outline-offset:2px}

/* ===== history: 3D step chart ===== */
.tf3-histpanel{margin-top:18px}
.tf3-histhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.tf3-histhead h3{margin:0}
.tf3-rangebtns{display:flex;gap:6px}
.tf3-sky{margin-top:14px}
.tf3-skyrow{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:end;margin-top:10px}
.tf3-skyrow .tf3-sname{font-size:12.5px;font-weight:800;color:#dff0ff;text-align:right;padding-bottom:2px}
.tf3-skyaxis{display:flex;gap:8px;align-items:stretch}
.tf3-yaxis{display:flex;flex-direction:column;justify-content:space-between;height:128px;font-size:10px;color:var(--tf3-faint);font-weight:700;text-align:right;padding:1px 0}
.tf3-skytrack{position:relative;flex:1;display:flex;align-items:flex-end;gap:2px;height:128px;border-bottom:2.5px solid #3f6391;padding:0 1px;
  background:linear-gradient(180deg, rgba(160,210,255,.07) 1px, transparent 1px) 0 0/100% 32px}
.tf3-day{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.tf3-day .tf3-blk{width:100%;max-width:44px;border-radius:4px 4px 1px 1px;position:relative;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset -3px 0 0 rgba(0,0,0,.35), inset 3px 0 0 rgba(255,255,255,.14), 0 3px 8px rgba(0,0,0,.5)}
.tf3-day .tf3-blk .tf3-bw{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12.5px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.tf3-day.tf3-before .tf3-blk{background:repeating-linear-gradient(45deg,#16294a 0 5px,#101f3a 5px 10px);border:1.5px dashed #54687f;box-shadow:none}
.tf3-day.tf3-norec .tf3-blk{background:repeating-linear-gradient(45deg,#1d3257 0 4px,#16294a 4px 8px);box-shadow:inset 0 0 0 1.5px #33507c}
.tf3-day.tf3-held .tf3-blk::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 4px,transparent 4px 8px);border-radius:inherit}
.tf3-day .tf3-dlabel{font-size:9.5px;color:var(--tf3-faint);margin-top:3px;height:12px;line-height:1}
.tf3-histlegend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--tf3-ink2);margin-top:12px}
.tf3-histlegend .tf3-sw{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:5px}
.tf3-caption{font-size:12.5px;color:var(--tf3-muted);margin-top:8px}
details.tf3-datatwin{margin-top:12px}
details.tf3-datatwin summary{cursor:pointer;font-weight:700;font-size:13.5px;color:#aee3ff}
table.tf3-data{border-collapse:collapse;font-size:12.5px;margin-top:10px;background:rgba(8,24,52,.6)}
table.tf3-data th,table.tf3-data td{border:1px solid var(--tf3-line);padding:4px 9px;text-align:left;white-space:nowrap;color:var(--tf3-ink)}
table.tf3-data th{background:rgba(20,50,96,.65);color:#dff0ff}
.tf3-tablewrap{overflow-x:auto}

/* ===== globe: scope navigator ===== */
.tf3-globepanel{margin-top:18px;text-align:center}
.tf3-globewrap{position:relative;width:min(430px,88vw);margin:8px auto 0}
.tf3-globewrap::before{content:"";position:absolute;inset:-8% -4%;background:radial-gradient(circle at 50% 46%, rgba(3,155,225,.28), transparent 62%);pointer-events:none}
#tf-globe-canvas{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 0 34px rgba(3,155,225,.30)) drop-shadow(0 22px 26px rgba(0,0,0,.6));cursor:grab;touch-action:pan-y}
#tf-globe-canvas:active{cursor:grabbing}
#tf-globe-fallback{display:none;width:100%;height:auto;position:relative;border-radius:50%}
.tf3-globebtns{display:flex;gap:8px;justify-content:center;margin-top:10px}
.tf3-globehint{font-size:12px;color:var(--tf3-muted);margin-top:6px}
.tf3-globecap{font-size:13px;color:var(--tf3-ink2);text-align:left;max-width:62rem;margin:12px auto 0}
.tf3-attrib{font-size:11px;color:var(--tf3-faint);margin-top:6px}

/* ===== B: threat cards + precaution cards ===== */
.tf3-threatgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.tf3-threatgrid{grid-template-columns:1fr}}
.tf3-tcard{background:linear-gradient(180deg, rgba(19,50,96,.55), rgba(9,28,60,.62));border:1px solid var(--tf3-line);border-radius:20px;box-shadow:0 14px 38px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);padding:18px 20px}
.tf3-tcard h3{font-size:16.5px;margin:8px 0 6px;line-height:1.45;color:#fff}
.tf3-tagrow{display:flex;flex-wrap:wrap;gap:6px}
.tf3-ttag{font-size:11px;font-weight:800;border-radius:6px;padding:1px 8px;border:1.5px solid}
.tf3-ttag.j1{color:#ff9aa4;border-color:rgba(244,63,78,.6);background:rgba(244,63,78,.12)}
.tf3-ttag.j2{color:#ffd97a;border-color:rgba(245,185,13,.55);background:rgba(245,185,13,.10)}
.tf3-ttag.life{color:var(--tf3-ink2);border-color:rgba(140,175,220,.4);background:rgba(90,130,180,.12)}
.tf3-ttag.cve{color:#7fd0ff;border-color:rgba(79,195,255,.55);background:rgba(3,155,225,.12);font-family:ui-monospace,monospace}
.tf3-factbox{border-left:5px solid #039be1;background:rgba(3,155,225,.10);border-radius:0 10px 10px 0;padding:9px 12px;font-size:13px;margin:10px 0;color:var(--tf3-ink)}
.tf3-factbox .tf3-fh{font-size:11px;font-weight:800;letter-spacing:.05em;margin-bottom:3px;color:#2f9bf0}
.tf3-pcards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width:900px){.tf3-pcards{grid-template-columns:1fr}}
.tf3-pcard{border:1.5px solid rgba(96,196,255,.4);background:rgba(14,44,88,.5);border-radius:20px;padding:18px 20px}
.tf3-pcard h3{margin:0 0 6px;font-size:16px;color:#fff}
.tf3-pcard p{font-size:13.5px;margin:6px 0;color:var(--tf3-ink)}
.tf3-pcard ul,.tf3-pcard ol{margin:6px 0 6px 1.1em;padding:0;font-size:13.5px;color:var(--tf3-ink)}
.tf3-pcard .tf3-plabel{font-size:11px;font-weight:800;color:#7fd0ff;letter-spacing:.05em}

/* ===== C: statistics (labeled table + cards; NO bar chart) ===== */
.tf3-statgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start}
@media (max-width:900px){.tf3-statgrid{grid-template-columns:1fr}}
table.tf3-cats{border-collapse:collapse;width:100%;font-size:13.5px;margin-top:8px}
table.tf3-cats th,table.tf3-cats td{border-bottom:1px solid var(--tf3-line);padding:8px 8px;text-align:left;vertical-align:top;color:var(--tf3-ink)}
table.tf3-cats th{font-size:12px;color:var(--tf3-muted)}
table.tf3-cats td.tf3-n{font-weight:800;font-size:16px;text-align:right;white-space:nowrap;color:#fff}
table.tf3-cats td.tf3-def{font-size:12px;color:var(--tf3-muted)}
.tf3-statcards{display:flex;flex-direction:column;gap:16px}
.tf3-statcard{background:linear-gradient(180deg, rgba(19,50,96,.55), rgba(9,28,60,.62));border:1px solid var(--tf3-line);border-radius:20px;box-shadow:0 14px 38px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);padding:16px 20px}
.tf3-statcard .tf3-bignum{font-size:32px;font-weight:800;line-height:1.15;color:#fff}
.tf3-statcard .tf3-slabel{font-weight:700;font-size:14px;color:var(--tf3-ink)}
.tf3-statcard .tf3-ssub{font-size:12.5px;color:var(--tf3-muted)}
.tf3-fchip{display:inline-block;font-size:11px;font-weight:800;border-radius:9999px;padding:1px 9px;margin-bottom:6px}
.tf3-fchip.cum{background:rgba(34,192,107,.16);color:#5eeaa0}
.tf3-fchip.mon{background:rgba(47,155,240,.16);color:#8fd0ff}
.tf3-fchip.stale{background:rgba(244,63,78,.14);color:#ff9aa4}
.tf3-statcard.tf3-gated .tf3-bignum{color:var(--tf3-muted)}

/* ===== D: evidence fold + monitoring ===== */
details.tf3-evfold{background:linear-gradient(180deg, rgba(19,50,96,.5), rgba(9,28,60,.6));border:1px solid var(--tf3-line);border-radius:20px;box-shadow:0 14px 38px -14px rgba(0,0,0,.55);padding:8px 20px 16px}
details.tf3-evfold>summary{cursor:pointer;font-weight:800;font-size:15px;color:#aee3ff;padding:10px 0}
table.tf3-ev{border-collapse:collapse;width:100%;font-size:12.8px}
table.tf3-ev th,table.tf3-ev td{border-bottom:1px solid var(--tf3-line);padding:7px 8px;text-align:left;vertical-align:top;color:var(--tf3-ink)}
table.tf3-ev th{font-size:11.5px;color:var(--tf3-muted)}
table.tf3-ev .tf3-evnote{display:block;font-size:11.5px;color:var(--tf3-muted)}
.tf3-scopechip{font-size:10.5px;font-weight:800;border-radius:5px;padding:0 6px;background:#0e4d8f;color:#fff;white-space:nowrap}
.tf3-scopechip.wd{background:#3d5a86}
.tf3-monlist{list-style:none;margin:6px 0 0;padding:0}
.tf3-monlist li{border-top:1px solid var(--tf3-line);padding:7px 0;font-size:13px;color:var(--tf3-ink)}
.tf3-monlist a{color:#5ec2ff;font-weight:700}

/* ===== notices board + level-change log ===== */
.tf3-boardlist{list-style:none;margin:0;padding:0}
.tf3-boardlist li{border-top:1px solid var(--tf3-line);padding:9px 0;font-size:13.5px;color:var(--tf3-ink)}
.tf3-boardlist li:first-child{border-top:none}
.tf3-boardlist a{color:#5ec2ff;font-weight:700}
.tf3-chg{font-size:13px;line-height:1.7;border-top:1px solid var(--tf3-line);padding:8px 0;color:var(--tf3-ink)}
.tf3-subh{font-size:15px;color:#fff;margin:14px 0 4px}

/* ===== S1: source status ===== */
.tf3-srcgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:980px){.tf3-srcgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.tf3-srcgrid{grid-template-columns:1fr}}
.tf3-srccard{background:linear-gradient(180deg, rgba(19,50,96,.55), rgba(9,28,60,.62));border:1px solid var(--tf3-line);border-radius:16px;box-shadow:0 10px 28px -12px rgba(0,0,0,.6);padding:13px 15px;font-size:12.5px;color:var(--tf3-ink2)}
.tf3-srccard .tf3-srcname{font-weight:800;font-size:13.5px;color:#fff}
.tf3-srccard .tf3-ok{color:#5eeaa0;font-weight:800}
.tf3-srccard .tf3-ng{color:#ff9aa4;font-weight:800}
.tf3-srccard .tf3-caveat{color:#ff9aa4;font-weight:700}
.tf3-foot{margin-top:34px;font-size:12.5px;color:var(--tf3-faint)}

/* whole-page unknown (validation failure / fetch failure) */
.tf3-unknownpanel{text-align:center}
.tf3-unknownpanel .tf3-meter{margin:6px auto}
.tf3-unknownpanel ul{display:inline-block;text-align:left;font-size:12.5px;color:var(--tf3-ink2)}
.tf3-problems{font-size:12.5px;color:var(--tf3-muted)}

@media (max-width:560px){
  .tf3-panel{padding:18px 16px}
  .tf3-scopehead{flex-wrap:wrap}
  .tf3-scopehead .tf3-stitle{flex:1 1 100%}
  .tf3-hchips{flex-direction:row;flex-wrap:wrap;align-items:center}
  .tf3-meterrow{flex-direction:column;gap:6px}
  .tf3-legend{display:grid;grid-template-columns:1fr 1fr;width:100%;min-width:0;gap:6px}
  .tf3-legend li{font-size:12.5px;padding:5px 9px}
}
@media (prefers-reduced-motion: reduce){
  .tf3-seg-on{animation:none}
  body.theme-dark .tf3 *{transition:none!important}
}
/* EN step words are wider than the JA two-character labels: shrink the
   history block word on English pages so it stays inside the block. */
html[lang="en"] .tf3-day .tf3-blk .tf3-bw{font-size:10.5px;letter-spacing:-.02em}