:root {
      --bg: #071019;
      --bg-2: #0b1621;
      --panel: rgba(15, 29, 43, 0.76);
      --panel-solid: #0f1d2b;
      --panel-2: #132437;
      --text: #edf6ff;
      --muted: #9fb2c6;
      --line: rgba(159, 194, 224, 0.18);
      --cyan: #54d6ff;
      --cyan-2: #8be7ff;
      --blue: #749bff;
      --violet: #a585ff;
      --green: #55e6a5;
      --amber: #ffcf70;
      --red: #ff8a92;
      --shadow: 0 24px 70px rgba(0,0,0,.38);
      --radius: 20px;
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 10% -5%, rgba(84,214,255,.18), transparent 28%),
        radial-gradient(circle at 90% 8%, rgba(165,133,255,.16), transparent 25%),
        linear-gradient(180deg, #061019 0%, #07111b 45%, #08121d 100%);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.72;
      letter-spacing: .01em;
    }

    a { color: var(--cyan-2); text-decoration: none; }
    a:hover { text-decoration: underline; }
    code, .mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }

    .progress {
      position: fixed; top: 0; left: 0; height: 3px; width: 0;
      background: linear-gradient(90deg, var(--cyan), var(--violet));
      z-index: 99; box-shadow: 0 0 16px rgba(84,214,255,.7);
    }

    .shell { width: min(var(--max), calc(100% - 36px)); margin: 0 auto; }

    .hero { padding: 84px 0 52px; position: relative; overflow: hidden; }
    .hero:after {
      content: ""; position: absolute; inset: auto 0 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--line), transparent);
    }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 9px;
      border: 1px solid rgba(84,214,255,.23); background: rgba(84,214,255,.07);
      color: var(--cyan-2); border-radius: 999px; padding: 7px 12px;
      font-size: 13px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase;
    }
    .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
    h1 { font-size: clamp(38px, 6vw, 72px); line-height: 1.05; margin: 24px 0 18px; letter-spacing: -.035em; max-width: 980px; }
    .gradient-text {
      background: linear-gradient(90deg, #ffffff 0%, #aeeeff 38%, #a89cff 82%, #ffffff 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .hero-sub { max-width: 900px; color: #b9c8d8; font-size: clamp(17px, 2vw, 21px); margin: 0 0 28px; }
    .hero-meta { display: flex; flex-wrap: wrap; gap: 10px; }
    .chip { border: 1px solid var(--line); background: rgba(255,255,255,.035); color: #c6d8e8; border-radius: 999px; padding: 7px 11px; font-size: 13px; }

    .summary-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; margin-top: 36px; }
    .card {
      border: 1px solid var(--line); background: linear-gradient(180deg, rgba(19,36,55,.8), rgba(10,24,37,.82));
      border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px);
    }
    .lead-card { padding: 28px; }
    .lead-card .quote { font-size: 22px; line-height: 1.55; margin: 0; color: #f4fbff; }
    .lead-card .quote strong { color: var(--cyan-2); }
    .metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; }
    .metric { padding: 18px; border-radius: 15px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.055); }
    .metric b { display: block; font-size: 27px; line-height: 1.05; color: #fff; margin-bottom: 7px; }
    .metric span { color: var(--muted); font-size: 13px; }

    .layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; padding: 46px 0 100px; align-items: start; }
    .toc { position: sticky; top: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(10,23,35,.72); backdrop-filter: blur(14px); }
    .toc-title { font-size: 12px; color: #7e93a7; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 10px; }
    .toc a { display: block; color: #9eb1c3; padding: 7px 8px; border-radius: 9px; font-size: 14px; transition: .2s; }
    .toc a:hover, .toc a.active { color: #fff; background: rgba(84,214,255,.08); text-decoration: none; }

    main { min-width: 0; }
    section { scroll-margin-top: 26px; margin-bottom: 72px; }
    h2 { font-size: clamp(28px, 4vw, 43px); letter-spacing: -.025em; line-height: 1.18; margin: 0 0 18px; }
    h3 { font-size: 23px; margin: 30px 0 12px; color: #f0f7ff; }
    p { color: #c2d1df; margin: 12px 0; }
    .section-kicker { color: var(--cyan); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; margin-bottom: 8px; }
    .section-lead { color: #dbe8f3; font-size: 18px; max-width: 850px; }

    .callout { margin: 20px 0; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(84,214,255,.18); background: rgba(84,214,255,.055); color: #dceef6; }
    .callout strong { color: var(--cyan-2); }
    .callout.warn { border-color: rgba(255,207,112,.2); background: rgba(255,207,112,.055); }
    .callout.warn strong { color: var(--amber); }

    .problem-flow, .pipeline { display: grid; gap: 10px; margin: 26px 0; }
    .problem-flow { grid-template-columns: repeat(4, 1fr); }
    .flowbox { position: relative; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.035); min-height: 126px; }
    .flowbox:not(:last-child):after { content: "→"; position: absolute; right: -20px; top: 43%; color: #61829f; font-size: 24px; z-index: 2; }
    .flowbox b { display: block; color: #fff; margin-bottom: 5px; }
    .flowbox span { font-size: 13px; color: #9fb2c4; }

    .arch {
      margin: 30px 0; padding: 22px; border-radius: 20px; border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(10,25,39,.9), rgba(13,29,44,.68)); overflow: hidden;
    }
    .arch-row { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: stretch; gap: 12px; }
    .arch-block { padding: 22px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); }
    .arch-block.encoder { box-shadow: inset 0 0 0 1px rgba(84,214,255,.05); }
    .arch-block.decoder { box-shadow: inset 0 0 0 1px rgba(165,133,255,.06); }
    .arch-block h4 { margin: 0 0 8px; font-size: 18px; }
    .arch-block ul { margin: 10px 0 0 18px; padding: 0; color: #a9bbca; }
    .arch-arrow { display: grid; place-items: center; font-size: 30px; color: #88a8c5; }
    .arch-footer { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .mini { padding: 13px; border-radius: 12px; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.05); color: #a9bccd; font-size: 13px; }
    .mini b { color: #fff; display: block; margin-bottom: 2px; }

    .module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
    .module { padding: 22px; border: 1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 17px; }
    .module .tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); font-weight: 800; }
    .module h3 { margin: 8px 0 10px; font-size: 21px; }
    .module p { margin: 0; font-size: 14px; color: #aebfce; }

    .compare { width: 100%; border-collapse: collapse; margin: 22px 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
    .compare th, .compare td { padding: 14px 15px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
    .compare th { background: rgba(255,255,255,.055); color: #fff; font-size: 13px; }
    .compare td { color: #b8c8d7; font-size: 14px; background: rgba(255,255,255,.022); }
    .compare tr:last-child td { border-bottom: 0; }
    .good { color: var(--green); font-weight: 700; }

    .memory-map { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 24px 0; }
    .memory-line { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; }
    .memory-label { color: #dfeaf4; font-weight: 700; font-size: 14px; }
    .bar { height: 42px; border-radius: 12px; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); }
    .bar > i { display: block; height: 100%; border-radius: 11px; background: linear-gradient(90deg, rgba(84,214,255,.48), rgba(116,155,255,.55)); }
    .bar > span { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 12px; font-size: 12px; color: #edf7ff; }

    .stack { display: grid; gap: 9px; margin: 22px 0; }
    .stack > div { display: grid; grid-template-columns: 170px 1fr; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
    .stack .name { padding: 13px 15px; background: rgba(84,214,255,.06); color: #dff7ff; font-weight: 700; }
    .stack .desc { padding: 13px 15px; color: #aebfce; background: rgba(255,255,255,.02); }

    .takeaways { counter-reset: item; display: grid; gap: 12px; margin-top: 24px; }
    .takeaway { position: relative; padding: 19px 18px 19px 68px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.025); }
    .takeaway:before { counter-increment: item; content: counter(item); position: absolute; left: 18px; top: 18px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #071019; font-weight: 900; background: linear-gradient(135deg, var(--cyan), #d6f7ff); }
    .takeaway b { color: #fff; }

    .sources { padding: 24px; }
    .sources ol { margin: 12px 0 0 20px; padding: 0; }
    .sources li { margin: 10px 0; color: #aebfce; }
    .sources small { display: block; color: #758b9f; margin-top: 4px; }

    footer { padding: 30px 0 70px; color: #6f8598; font-size: 13px; border-top: 1px solid var(--line); }

    @media (max-width: 920px) {
      .summary-grid, .layout { grid-template-columns: 1fr; }
      .toc { display: none; }
      .problem-flow { grid-template-columns: 1fr 1fr; }
      .flowbox:nth-child(2):after { display: none; }
      .arch-row { grid-template-columns: 1fr; }
      .arch-arrow { transform: rotate(90deg); }
      .arch-footer { grid-template-columns: 1fr; }
      .module-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 620px) {
      .shell { width: min(100% - 22px, var(--max)); }
      .hero { padding-top: 58px; }
      .metrics, .problem-flow { grid-template-columns: 1fr; }
      .flowbox:after { display: none !important; }
      .memory-line { grid-template-columns: 1fr; gap: 6px; }
      .stack > div { grid-template-columns: 1fr; }
      .lead-card, .arch { padding: 18px; }
      .compare { display: block; overflow-x: auto; white-space: nowrap; }
    }

/* Shared Soren frame around the architecture note. */
body{min-width:320px}
a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.sp-header{position:relative;z-index:2}
.sp-header .sp-brand,.sp-nav a{color:var(--text)}
.sp-footer{color:var(--muted)}
.hero{padding-top:clamp(48px,6vw,78px)}
.back-link{display:inline-block;margin-bottom:22px;color:var(--cyan-2);font-size:14px;text-decoration:none}
.back-link:hover{text-decoration:underline}
.note-context{max-width:850px;margin:22px 0 0;color:var(--muted);font-size:14px}
.toc{max-height:calc(100vh - 44px);overflow:auto}
.sources small{color:#a4b8c9}
@media(max-width:920px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .layout main,.toc{min-width:0}
  .toc{display:block;position:static;max-height:none;padding:13px 15px}
  .toc-title{margin-bottom:4px}
  .toc-links{display:flex;gap:4px 9px;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
  .toc a{flex:none}
}
@media(max-width:620px){
  .layout{padding-top:22px}
  .lead-card,.arch,.sources{padding:18px}
  .metric{padding:14px}
  .metric b{font-size:23px}
  .arch{max-width:100%}
  .problem-flow{gap:9px}
  .flowbox{min-height:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.sp-header,.sp-footer{display:none}}