/* Framework page additions: structured, readable, and aligned with the existing blue system. */
.framework-hero {
  padding-top: 64px;
  padding-bottom: 54px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
}
.framework-hero .section-shell { align-items: center; }
.framework-hero-lead { max-width: 720px; font-size: var(--font-body); line-height: 1.85; }
.framework-hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.framework-hero-tags span { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:7px 12px; border:1px solid rgba(22,119,255,.16); border-radius:999px; background:#fff; color:var(--muted); font-size:var(--font-caption); font-weight:600; line-height:1; }
.framework-hero-stats { width: 330px; display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.framework-stat { min-height:112px; padding:18px; border:1px solid rgba(22,119,255,.15); border-radius:12px; background:rgba(255,255,255,.8); box-shadow:0 12px 30px rgba(22,119,255,.08); }
.framework-stat strong { display:block; color:#1677ff; font: 700 var(--font-display)/1 'DM Sans',sans-serif; letter-spacing:.01em; }
.framework-stat span { display:block; margin-top:10px; color:#5d7390; font-size: var(--font-caption); }
.framework-intro-band { background:#fff; }
.framework-intro-grid { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:60px; align-items:end; }
.framework-intro-copy { max-width:620px; color:#435a73; font-size: var(--font-body); line-height:1.85; }
.framework-intro-copy p { margin:0 0 12px; }
.muted-note { color:#7890aa; font-size: var(--font-caption); }
.empathy-chain { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:stretch; gap:12px; margin-top:42px; }
.empathy-chain > i { align-self:center; color:#76a9df; font-style:normal; font-size: var(--font-title); }
.chain-node { min-height:120px; padding:20px; border:1px solid rgba(22,119,255,.14); border-top:3px solid #1677ff; border-radius:10px; background:#fbfdff; box-shadow:0 10px 24px rgba(29,92,155,.06); }
.chain-node b { display:block; color:#1677ff; font: 700 var(--font-caption)/1 'DM Sans',sans-serif; letter-spacing:.1em; }
.chain-node span { display:block; margin-top:13px; color:#172b43; font-size: var(--font-title); font-weight:700; }
.chain-node small { display:block; margin-top:8px; color:#7890aa; font-size: var(--font-caption); line-height:1.5; }
.chain-cognitive { border-top-color:#705cff; }.chain-cognitive b{color:#705cff}.chain-concern{border-top-color:#3d9fe8}.chain-concern b{color:#2186c8}.chain-safety{border-top-color:#0b6ab5}.chain-safety b{color:#0b6ab5}
.framework-capability-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
.framework-capability-card { display:block; min-height:270px; padding:26px; border:1px solid #dbe8f6; border-radius:12px; background:#fff; color:inherit; text-decoration:none; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.framework-capability-card:hover,.framework-capability-card:focus-visible { transform:translateY(-5px); border-color:#86b9e9; box-shadow:0 18px 38px rgba(27,92,153,.12); }
.capability-card-top { display:flex; align-items:center; justify-content:space-between; }
.capability-index { color:#1677ff; font: 700 var(--font-display)/1 'DM Sans',sans-serif; }
.capability-en { color:#7f98b3; font: 600 var(--font-caption)/1 'DM Sans',sans-serif; letter-spacing:.13em; }
.framework-capability-card h3 { margin:22px 0 10px; color:#172b43; font-size: var(--font-title); }
.framework-capability-card p { margin:0; color:#687f98; font-size: var(--font-caption); line-height:1.72; }
.framework-capability-card .capability-question { color:#111827; font-size: var(--font-body); font-weight:600; line-height:1.6; }
.capability-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.capability-tags span { padding:4px 8px; border-radius:4px; background:#f1f7ff; color:#4380b9; font: 500 var(--font-caption)/1.2 'DM Sans',sans-serif; }
.framework-capability-card .capability-datasets { margin-top:18px; padding-top:14px; border-top:1px solid #e6eef7; color:#6f88a0; font: 500 var(--font-caption)/1.6 'DM Sans','Noto Sans SC',sans-serif; }
.framework-capability-card .capability-datasets span { margin-right:8px; color:#111827; font-weight:700; }
.tone-cognitive .capability-index { color:#705cff; }.tone-cognitive .capability-tags span{background:#f4f1ff;color:#6755c3}.tone-concern .capability-index{color:#2789c7}.tone-concern .capability-tags span{background:#eff9ff;color:#2679aa}.tone-safety .capability-index{color:#0b6ab5}.tone-safety .capability-tags span{background:#eef6fb;color:#27638a}
.framework-dark-band { background:#f5f9fe; border-top:1px solid #e3eef9; border-bottom:1px solid #e3eef9; }
.architecture-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.architecture-tab { min-height:42px; padding:0 17px; border:1px solid #cfe0f1; border-radius:8px; background:#fff; color:#53718f; cursor:pointer; font: 600 var(--font-caption) 'Noto Sans SC',sans-serif; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.architecture-tab:hover,.architecture-tab.active { border-color:#1677ff; background:#1677ff; color:#fff; }
.architecture-panel { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:28px; align-items:stretch; margin-top:14px; padding:28px; border:1px solid #d5e5f5; border-radius:12px; background:#fff; box-shadow:0 15px 35px rgba(32,92,148,.08); }
.architecture-kicker { color:#1677ff; font: 700 var(--font-caption)/1 'DM Sans',sans-serif; letter-spacing:.16em; }
.architecture-panel h3 { margin:14px 0 10px; color:#172b43; font-size: var(--font-title); }
.architecture-panel p { max-width:670px; margin:0; color:#607993; font-size: var(--font-body); line-height:1.8; }
.architecture-code { margin:0; padding:22px; overflow:auto; border-radius:8px; background:#102844; color:#c9e5ff; font: 500 var(--font-caption)/1.75 'JetBrains Mono',monospace; }
.architecture-guard { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px; color:#7890aa; font-size: var(--font-caption); }
.architecture-guard span { margin-right:4px; color:#1677ff; font-weight:700; }.architecture-guard b{color:#385975}.architecture-guard i{font-style:normal;color:#aac5de}
.architecture-overview { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:stretch; gap:12px; margin-top:28px; }
.architecture-overview-item { min-height:172px; padding:20px; border:1px solid #cfe2f4; border-top:3px solid #1677ff; border-radius:10px; background:#fff; box-shadow:0 12px 26px rgba(32,92,148,.06); }
.architecture-overview-item.is-task { border-top-color:#705cff; }.architecture-overview-item.is-result { border-top-color:#0b6ab5; }
.architecture-overview-item span { color:#7c9bb8; font: 700 var(--font-caption)/1 'DM Sans',sans-serif; letter-spacing:.14em; }
.architecture-overview-item b { display:block; margin-top:12px; color:#172b43; font-size: var(--font-title); }
.architecture-overview-item p { margin:9px 0 0; color:#6d849b; font-size: var(--font-caption); line-height:1.65; }
.architecture-overview-item code { display:block; margin-top:14px; color:#3975a8; font: 500 var(--font-caption)/1.5 'JetBrains Mono',monospace; white-space:normal; }
.architecture-overview-connector { align-self:center; color:#7aa9d5; font-size: var(--font-title); }
.workflow-strip { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin-top:30px; padding:15px; border:1px solid #dbe8f6; border-radius:10px; background:#fbfdff; }
.workflow-strip span { padding:7px 10px; border-radius:5px; background:#edf6ff; color:#1768b2; font-size: var(--font-caption); font-weight:600; }.workflow-strip b{color:#8bb1d4;font-size: var(--font-body)}
.workflow-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:18px; }
.workflow-card { min-height:208px; padding:22px; border:1px solid #dbe8f6; border-radius:10px; background:#fff; transition:transform .25s ease, box-shadow .25s ease; }.workflow-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(32,92,148,.1)}
.workflow-no { color:#1677ff; font: 700 var(--font-display)/1 'DM Sans',sans-serif; }.workflow-card h3{margin:16px 0 8px;color:#172b43;font-size: var(--font-title)}.workflow-card p{margin:0;color:#687f98;font-size: var(--font-caption);line-height:1.7}.workflow-meta{display:block;margin-top:14px;color:#82a4c3;font: 500 var(--font-caption) 'JetBrains Mono',monospace}
.framework-metrics-band { background:#fbfdff; border-top:1px solid #e4eef8; border-bottom:1px solid #e4eef8; }
.metric-method-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.metric-method-card { min-height:220px; padding:22px; border:1px solid #d7e6f5; border-radius:10px; background:#fff; }.metric-method-icon{color:#1677ff;font: 700 var(--font-title)/1 'DM Sans',sans-serif}.metric-method-card h3{margin:17px 0 8px;color:#172b43;font-size: var(--font-body)}.metric-method-card p{margin:0;color:#70869e;font-size: var(--font-caption);line-height:1.6}.metric-method-card b{display:block;margin-top:16px;color:#1768b2;font: 600 var(--font-caption) 'JetBrains Mono',monospace}.metric-method-card small{display:block;margin-top:12px;color:#91a4b8;font-size: var(--font-caption);line-height:1.55}
.formula-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; padding:16px; border-radius:10px; background:#102844; }.formula-step{min-height:84px;padding:14px;border:1px solid rgba(190,224,250,.16);border-radius:7px}.formula-step span{color:#7ec4ff;font: 700 var(--font-caption) 'JetBrains Mono',monospace}.formula-step b{display:block;margin-top:8px;color:#fff;font-size: var(--font-body)}.formula-step code{display:block;margin-top:8px;color:#a7c6e0;font: 500 var(--font-caption)/1.5 'JetBrains Mono',monospace;white-space:normal}
.comparability-note { display:flex; gap:16px; align-items:flex-start; margin-top:16px; padding:15px 18px; border-left:3px solid #1677ff; background:#eef6ff; color:#58738f; font-size: var(--font-caption); line-height:1.6; }.comparability-note strong{color:#1768b2;white-space:nowrap}
.coverage-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }.coverage-card{min-height:170px;padding:22px;border:1px solid #d7e6f5;border-radius:10px;background:#fff}.coverage-card strong{display:block;color:#1677ff;font: 700 var(--font-display)/1 'DM Sans',sans-serif}.coverage-card span{display:block;margin-top:12px;color:#304e6c;font-size: var(--font-body);font-weight:700}.coverage-card p{margin:9px 0 0;color:#7890aa;font-size: var(--font-caption);line-height:1.6}
.framework-results-section { background:#fff; }.radar-insight{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;margin-top:18px;padding:18px 20px;border:1px solid #d7e6f5;border-radius:9px;background:#f7fbff}.radar-insight-heading span{display:block;color:#7f9ab4;font: 700 var(--font-caption) 'DM Sans',sans-serif;letter-spacing:.15em}.radar-insight-heading b{display:block;margin-top:8px;color:#1768b2;font-size: var(--font-body)}.radar-insight ul{margin:0;padding-left:18px;color:#607993;font-size: var(--font-caption);line-height:1.75}.radar-insight li+li{margin-top:5px}.results-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.results-principles div{padding:17px;border:1px solid #e0ebf6;border-radius:8px;background:#fbfdff}.results-principles b{display:block;color:#294c6d;font-size: var(--font-body)}.results-principles span{display:block;margin-top:7px;color:#7790a8;font-size: var(--font-caption);line-height:1.6}
.framework-tool-band { background:#f5f9fe; border-top:1px solid #e3eef9; border-bottom:1px solid #e3eef9; }.tool-access-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.tool-access-card{min-height:160px;padding:20px;border:1px solid #d7e6f5;border-radius:10px;background:#fff}.tool-step{color:#1677ff;font: 700 var(--font-title) 'DM Sans',sans-serif}.tool-access-card h3{margin:15px 0 8px;color:#172b43;font-size: var(--font-body)}.tool-access-card p{margin:0;color:#71879e;font-size: var(--font-caption);line-height:1.65}.tool-console{margin-top:18px;border-radius:10px;overflow:hidden;background:#102844;box-shadow:0 16px 35px rgba(14,49,85,.14)}.tool-console-head{display:flex;justify-content:space-between;gap:16px;padding:15px 20px;border-bottom:1px solid rgba(192,224,249,.15);color:#a8c9e3}.tool-console-head span{color:#7ec4ff;font: 700 var(--font-caption) 'DM Sans',sans-serif;letter-spacing:.16em}.tool-console-head b{color:#fff;font-size: var(--font-caption)}.tool-console-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.78fr);gap:0}.tool-console pre{margin:0;padding:22px;overflow:auto;color:#d5ebff;font: 500 var(--font-caption)/1.7 'JetBrains Mono',monospace}.tool-console pre em{color:#75b9ec;font-style:normal}.tool-output{padding:22px;border-left:1px solid rgba(192,224,249,.12);background:#0d2239}.output-label{color:#7ec4ff;font: 700 var(--font-caption) 'DM Sans',sans-serif;letter-spacing:.16em}.output-tree{display:grid;gap:3px;margin-top:16px;color:#d8ecff;font: 500 var(--font-caption)/1.55 'JetBrains Mono',monospace}.output-tree span{color:#a7c6e0}.tool-output p{margin:18px 0 0;color:#87a6c0;font-size: var(--font-caption);line-height:1.65}.tool-responsibility{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;margin-top:16px;padding:15px 18px;border:1px solid #d3e4f4;border-radius:8px;background:#fff;color:#69839c;font-size: var(--font-caption);line-height:1.6}.tool-responsibility b{color:#1768b2;white-space:nowrap}.tool-responsibility strong{color:#1768b2;white-space:nowrap;font: 600 var(--font-caption) 'JetBrains Mono',monospace}
.tool-composition-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:26px; }
.tool-composition-card { min-height:184px; padding:20px; border:1px solid #d7e6f5; border-radius:10px; background:#fff; box-shadow:0 10px 24px rgba(32,92,148,.05); }
.tool-composition-index { color:#1677ff; font: 700 var(--font-title)/1 'DM Sans',sans-serif; }
.tool-composition-card h3 { margin:15px 0 8px; color:#172b43; font-size: var(--font-body); }
.tool-composition-card p { margin:0; color:#71879e; font-size: var(--font-caption); line-height:1.65; }
.tool-composition-card code { display:block; margin-top:14px; color:#3975a8; font: 500 var(--font-caption)/1.5 'JetBrains Mono',monospace; white-space:normal; }
.tool-composition-card code,.quickstart-steps article code { padding:4px 7px; border:0; border-radius:4px; background:#eef4ff; }
.tool-subsection { display:flex; align-items:baseline; gap:14px; margin-top:42px; }
.tool-subsection h3 { margin:0; color:#172b43; font-size: var(--font-title); }
.quickstart-section { margin-top:40px; padding:24px; border:1px solid #d2e3f3; border-radius:12px; background:#fff; box-shadow:0 10px 28px rgba(32,92,148,.05); }
.quickstart-heading { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.quickstart-heading h3 { margin:0; color:#172b43; font-size: var(--font-title); }
.quickstart-heading p { flex:1 1 100%; margin:8px 0 0; color:#71879e; font-size: var(--font-caption); line-height:1.65; }
.quickstart-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:20px; }
.quickstart-steps article { min-height:142px; padding:15px; border:1px solid #dbe8f6; border-radius:8px; background:#f8fbff; }
.quickstart-steps article span { color:#1677ff; font: 700 var(--font-title)/1 'DM Sans',sans-serif; }
.quickstart-steps article b { display:block; margin-top:10px; color:#294c6d; font-size: var(--font-body); }
.quickstart-steps article p { margin:7px 0 0; color:#7890aa; font-size: var(--font-caption); line-height:1.55; }
.quickstart-steps article code { display:block; margin-top:10px; color:#3975a8; font: 500 var(--font-caption)/1.45 'JetBrains Mono',monospace; white-space:normal; }
.quickstart-section .tool-console { margin-top:20px; }
.tool-access-card { min-height:160px; padding:20px; border:1px solid #d7e6f5; border-radius:10px; background:#fff; box-shadow:0 10px 24px rgba(32,92,148,.05); }
.framework-limitations-band { background:#fff; }.limitation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.limitation-item{padding:0 18px;border:1px solid #dbe8f6;border-radius:8px;background:#fbfdff}.limitation-item summary{padding:16px 0;color:#2a4d6f;font-size: var(--font-body);font-weight:700;cursor:pointer;list-style:none}.limitation-item summary::-webkit-details-marker{display:none}.limitation-item summary:after{content:'+';float:right;color:#6f9bc1;font: 700 var(--font-title)/1 'DM Sans',sans-serif}.limitation-item[open] summary:after{content:'−'}.limitation-item p{margin:0;padding:0 0 17px;color:#7890aa;font-size: var(--font-caption);line-height:1.7}
@media (min-width: 1600px) {
  .framework-hero {
    min-height: 460px;
    padding-top: 84px;
    padding-bottom: 72px;
  }

  .framework-hero .section-shell {
    gap: 120px;
  }

  .framework-hero-lead {
    max-width: 860px;
  }

  .framework-hero-stats {
    width: 420px;
    gap: 16px;
  }

  .framework-stat {
    min-height: 136px;
    padding: 24px;
  }

  .framework-intro-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 100px;
  }

  .framework-intro-copy {
    max-width: 720px;
  }

  .empathy-chain {
    gap: 20px;
    margin-top: 56px;
  }

  .chain-node {
    min-height: 145px;
    padding: 26px;
  }

  .framework-capability-grid {
    gap: 28px;
  }

  .framework-capability-card {
    min-height: 300px;
    padding: 34px;
  }

  .architecture-panel {
    gap: 48px;
    padding: 36px;
  }

  .workflow-grid,
  .metric-method-grid,
  .coverage-grid,
  .tool-access-grid,
  .tool-composition-grid {
    gap: 24px;
  }
}

@media (max-width: 900px) {
  .framework-hero .section-shell,.framework-intro-grid{display:block}.framework-hero-stats{width:100%;margin-top:30px}.empathy-chain{grid-template-columns:1fr 1fr;gap:12px}.empathy-chain>i{display:none}.architecture-overview{grid-template-columns:1fr;gap:8px}.architecture-overview-connector{transform:rotate(90deg);justify-self:center}.workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-method-grid,.coverage-grid,.tool-access-grid,.tool-composition-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quickstart-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.formula-board{grid-template-columns:1fr}.tool-console-grid{grid-template-columns:1fr}.tool-output{border-top:1px solid rgba(192,224,249,.12);border-left:0}.tool-responsibility{grid-template-columns:1fr}.tool-responsibility strong{white-space:normal}.results-principles{grid-template-columns:1fr}.radar-insight{grid-template-columns:1fr}.framework-intro-copy{margin-top:18px}
}
@media (max-width: 600px) {
  .framework-hero{padding-top:40px}.framework-hero-stats{gap:8px}.framework-stat{min-height:92px;padding:14px}.framework-stat strong{font-size: var(--font-display)}.framework-capability-grid,.workflow-grid,.metric-method-grid,.coverage-grid,.tool-access-grid,.tool-composition-grid,.limitation-grid{grid-template-columns:1fr}.framework-capability-card{min-height:0}.architecture-overview-item{min-height:0}.architecture-panel{grid-template-columns:1fr;padding:18px}.architecture-code{font-size: var(--font-caption)}.workflow-strip{justify-content:flex-start}.workflow-strip b{display:none}.workflow-strip span{flex:1 1 42%;text-align:center}.formula-step code{font-size: var(--font-caption)}.empathy-chain{grid-template-columns:1fr}.chain-node{min-height:0}.radar-insight{padding:15px}.tool-subsection{display:block}.tool-subsection h3{margin-top:9px}.quickstart-section{padding:18px}.quickstart-heading{display:block}.quickstart-heading h3{margin-top:9px}.quickstart-steps{grid-template-columns:1fr}.tool-console-head{display:block}.tool-console-head b{display:block;margin-top:7px}.tool-console pre{font-size: var(--font-caption);padding:17px}.framework-hero-tags span{font-size: var(--font-caption)}
}