:root {
      --bg:#0d0912; --bg2:#15101d; --panel:#1b1425; --panel2:#241833;
      --text:#f7f2fb; --muted:#c6b9d3; --line:#3a2a4b;
      --purple:#9a62ff; --purple2:#6e35cc; --orange:#ff9e2c; --red:#ff5d66;
      --green:#48d597; --blue:#62b7ff; --shadow:0 18px 60px rgba(0,0,0,.28);
      --radius:22px; --max:1160px;
    }
    [data-theme="light"] {
      --bg:#f7f4fa; --bg2:#fff; --panel:#fff; --panel2:#f3edf9;
      --text:#24182f; --muted:#675a72; --line:#e2d7eb;
      --shadow:0 18px 50px rgba(48,28,68,.10);
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      margin:0; font-family:"Alata",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
      color:var(--text); background:
        radial-gradient(900px 500px at 10% -10%, rgba(154,98,255,.18), transparent 60%),
        radial-gradient(900px 500px at 100% 10%, rgba(255,158,44,.11), transparent 60%),
        var(--bg);
      line-height:1.72;
    }
    a { color:#b995ff; text-decoration:none; }
    a:hover { text-decoration:underline; }
    .topbar {
      position:sticky; top:0; z-index:50; backdrop-filter:blur(15px);
      background:color-mix(in srgb, var(--bg) 82%, transparent);
      border-bottom:1px solid var(--line);
    }
    .topbar-inner {
      max-width:var(--max); margin:auto; padding:10px 20px;
      display:flex; align-items:center; justify-content:space-between; gap:16px;
    }
    .brand { display:flex; gap:11px; align-items:center; font-size:15px; }
    .dot {
      width:13px; height:13px; border-radius:50%;
      background:linear-gradient(135deg,var(--purple),var(--orange));
      box-shadow:0 0 0 5px rgba(154,98,255,.10);
    }
    .actions { display:flex; gap:8px; flex-wrap:wrap; }
    .btn {
      appearance:none; border:1px solid var(--line); background:var(--panel);
      color:var(--text); border-radius:999px; padding:9px 14px; font:inherit; cursor:pointer;
    }
    .btn.primary {
      background:linear-gradient(135deg,var(--purple2),#8d4fe5);
      border-color:transparent; color:white;
    }
    .wrap { max-width:var(--max); margin:auto; padding:28px 20px 80px; }
    .hero {
      padding:42px 0 18px;
      display:grid; grid-template-columns:1.08fr .92fr; gap:34px; align-items:center;
    }
    .eyebrow {
      display:inline-flex; gap:9px; align-items:center; padding:7px 12px;
      border:1px solid var(--line); border-radius:999px; color:var(--muted);
      background:var(--panel); font-size:13px;
    }
    h1 { font-size:clamp(38px,6vw,72px); line-height:1.04; margin:18px 0; letter-spacing:-1.6px; }
    h2 { font-size:clamp(28px,4vw,42px); line-height:1.15; margin:8px 0 16px; }
    h3 { font-size:22px; line-height:1.25; margin-top:28px; }
    p { margin:12px 0; }
    .lead { color:var(--muted); font-size:19px; max-width:850px; }
    .hero-card {
      position:relative; border:1px solid var(--line); border-radius:28px; overflow:hidden;
      background:var(--panel); box-shadow:var(--shadow);
    }
    .hero-card img { width:100%; display:block; aspect-ratio:1/1; object-fit:cover; }
    .signature {
      position:absolute; right:18px; bottom:15px; color:#fff; font-size:18px;
      padding:7px 13px; border-radius:999px; background:rgba(13,9,18,.74);
      border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px);
      letter-spacing:.5px;
    }
    .hero-caption { padding:12px 15px 14px; color:var(--muted); font-size:13px; }
    .stats {
      display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:28px 0;
    }
    .stat {
      background:linear-gradient(180deg,var(--panel),var(--panel2));
      border:1px solid var(--line); border-radius:18px; padding:18px;
    }
    .stat b { display:block; font-size:29px; color:var(--text); }
    .stat span { color:var(--muted); font-size:13px; }
    .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
    .card {
      background:var(--panel); border:1px solid var(--line);
      border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
    }
    .card.soft { box-shadow:none; background:var(--panel2); }
    .section { padding:42px 0 8px; }
    .kicker { color:var(--orange); font-size:13px; text-transform:uppercase; letter-spacing:1.4px; }
    .notice {
      border-left:5px solid var(--orange); background:var(--panel);
      border-radius:16px; padding:17px 19px; margin:22px 0;
    }
    .success { border-left-color:var(--green); }
    .danger { border-left-color:var(--red); }
    blockquote {
      margin:18px 0; padding:22px 24px; border-left:5px solid var(--purple);
      background:linear-gradient(135deg,rgba(154,98,255,.12),rgba(255,158,44,.07));
      border-radius:16px; font-size:20px;
    }
    blockquote footer { color:var(--muted); font-size:13px; margin-top:10px; }
    .toc {
      columns:2; column-gap:32px; margin:18px 0 0; padding-left:20px;
    }
    .toc li { margin:5px 0; break-inside:avoid; }
    .table-wrap { overflow:auto; border:1px solid var(--line); border-radius:18px; }
    table { width:100%; border-collapse:collapse; min-width:760px; background:var(--panel); }
    th,td { text-align:left; padding:14px 15px; border-bottom:1px solid var(--line); vertical-align:top; }
    th { background:var(--panel2); font-size:13px; color:var(--muted); }
    tr:last-child td { border-bottom:0; }
    code {
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      font-size:.92em; padding:2px 6px; border-radius:7px;
      background:color-mix(in srgb,var(--panel2) 86%, #000 14%);
      border:1px solid var(--line);
    }
    .diagram {
      border:1px solid var(--line); border-radius:24px; overflow:hidden;
      background:#120c19; margin:22px 0;
    }
    .diagram svg { width:100%; height:auto; display:block; }
    .legend { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:13px; padding:0 18px 18px; }
    .lg { display:inline-flex; gap:7px; align-items:center; }
    .sw { width:10px; height:10px; border-radius:3px; }
    .steps { counter-reset:s; display:grid; gap:13px; }
    .step {
      counter-increment:s; display:grid; grid-template-columns:52px 1fr; gap:14px;
      border:1px solid var(--line); border-radius:16px; padding:15px; background:var(--panel);
    }
    .step::before {
      content:counter(s); width:42px; height:42px; display:grid; place-items:center;
      border-radius:13px; background:linear-gradient(135deg,var(--purple2),var(--orange));
      color:#fff; font-size:18px;
    }
    .step b { display:block; margin-bottom:3px; }
    details {
      border:1px solid var(--line); background:var(--panel); border-radius:15px;
      padding:14px 16px; margin:12px 0;
    }
    summary { cursor:pointer; }
    .tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
    .tag {
      border:1px solid var(--line); color:var(--muted); background:var(--panel);
      border-radius:999px; padding:6px 10px; font-size:12px;
    }
    .cta {
      margin-top:42px; padding:30px; border-radius:26px;
      background:linear-gradient(135deg,#3f2068,#6d2cb3 52%,#a55a1d);
      color:#fff; box-shadow:var(--shadow);
    }
    .cta a { color:white; }
    .sources li { margin:9px 0; color:var(--muted); }
    .footer {
      margin-top:42px; padding-top:24px; border-top:1px solid var(--line);
      display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:var(--muted); font-size:13px;
    }
    .small { color:var(--muted); font-size:13px; }
    .redacted { letter-spacing:2px; color:var(--muted); }
    @media (max-width:900px) {
      .hero,.grid2 { grid-template-columns:1fr; }
      .stats { grid-template-columns:1fr 1fr; }
      .hero { padding-top:26px; }
      .toc { columns:1; }
    }
    @media (max-width:560px) {
      .wrap { padding-left:14px; padding-right:14px; }
      .topbar-inner { padding-left:14px; padding-right:14px; }
      .stats { grid-template-columns:1fr; }
      .card { padding:19px; }
      .actions .primary { display:none; }
      h1 { letter-spacing:-.8px; }
    }
    @media print {
      .topbar,.actions { display:none!important; }
      body { background:#fff; color:#111; }
      .card,.stat,.diagram,details { box-shadow:none; break-inside:avoid; }
      a { color:#111; text-decoration:underline; }
    }
  
    .media-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px; }
    .media-card { background:var(--panel); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow); margin:0; }
    .media-card img { width:100%; height:auto; display:block; aspect-ratio:1/1; object-fit:cover; }
    .media-card .cap { padding:14px 16px 17px; color:var(--muted); font-size:13px; }
    .insight { margin:24px 0; padding:22px 24px; border-radius:18px; background:linear-gradient(135deg,rgba(154,98,255,.14),rgba(255,158,44,.08)); border:1px solid var(--line); }
    .quote-strong { font-size:clamp(20px,3vw,27px); line-height:1.45; margin:0; color:var(--text); }
    .inline-visual { margin:28px auto; max-width:820px; }
    .inline-visual img { width:100%; height:auto; display:block; border-radius:24px; border:1px solid var(--line); box-shadow:var(--shadow); }
    .inline-visual figcaption { color:var(--muted); font-size:13px; padding:10px 4px 0; }
    @media (max-width:900px) { .media-grid { grid-template-columns:1fr; } }

  
    
    .hero {
      grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);
      gap:42px;
      align-items:start;
      padding:40px 0 26px;
    }
    .hero > div:first-child { min-width:0; padding-top:6px; }
    .hero h1 {
      font-size:clamp(40px,4.45vw,62px);
      line-height:1.065;
      letter-spacing:-1.15px;
      max-width:760px;
    }
    .hero .lead {
      font-size:18px;
      line-height:1.72;
      max-width:720px;
    }
    .hero-card {
      width:100%;
      max-width:500px;
      justify-self:end;
      align-self:start;
      border-radius:24px;
      overflow:hidden;
    }
    .hero-card img {
      display:block;
      width:100%;
      height:auto;
      aspect-ratio:1 / 1;
      object-fit:contain;
      object-position:center;
      background:#10071e;
    }
    .hero-caption {
      padding:12px 15px 14px;
      line-height:1.5;
    }
    .hero .stats {
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
      margin:23px 0 16px;
    }
    .hero .stat {
      min-height:90px;
      padding:14px 16px;
    }
    .hero .stat b { font-size:25px; }
    .hero-insight {
      margin:16px 0 12px;
      padding:14px 16px;
      font-size:14px;
      line-height:1.6;
    }
    .hero .tags { margin-top:10px; }
    @media (max-width:980px) {
      .hero {
        grid-template-columns:1fr;
        gap:24px;
        padding-top:28px;
      }
      .hero > div:first-child { padding-top:0; }
      .hero-card {
        justify-self:center;
        max-width:720px;
      }
      .hero h1 { max-width:900px; }
    }
    @media (max-width:560px) {
      .hero .stats { grid-template-columns:1fr 1fr; }
      .hero .stat { min-height:84px; padding:12px; }
      .hero .stat b { font-size:22px; }
      .hero h1 { font-size:clamp(34px,11.5vw,48px); }
      .hero-card { border-radius:18px; }
    }

  

    .case-visual-note{color:var(--muted);font-size:13px}
    .inline-visual{margin:26px auto;max-width:900px}
    .inline-visual img{width:100%;height:auto;display:block;border-radius:24px;border:1px solid var(--line);box-shadow:var(--shadow)}
    .inline-visual figcaption{color:var(--muted);font-size:13px;padding:10px 4px 0}


html{scroll-padding-top:100px}
body{overflow-wrap:anywhere}
.hero-card{margin:0}
.topbar-inner{flex-wrap:wrap}
.brand{flex-wrap:wrap;gap:6px 11px}
.actions{align-items:center}
.article-breadcrumb{display:flex;flex-wrap:wrap;gap:8px 12px;color:var(--muted);font-size:14px;margin-bottom:2px}
.article-breadcrumb a{color:var(--muted)}
.article-breadcrumb a:hover{color:var(--text)}
.case-photo-frame{position:relative;line-height:0}
.case-photo-frame img{object-fit:contain}
[data-theme="light"] a{color:#6938ab}
[data-theme="light"] .btn.primary{color:#fff}
.table-wrap code{overflow-wrap:anywhere;word-break:break-word}
.btn{min-height:44px}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media(max-width:560px){
  html{scroll-padding-top:150px}
  .topbar-inner{gap:8px}
  .topbar .actions{width:100%}
  .topbar .article-share-trigger{flex:1}
  .hero{padding-top:22px}
  .hero h1{line-height:1.12}
  .grid2,.media-grid{min-width:0}
  .stat b{overflow-wrap:normal}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}