.window {background:#f7f7f9;border-radius:25px;overflow:hidden;min-height:520px;position:relative}

.window-bar {height:46px;background:#ececf0;border-bottom:1px solid rgba(0,0,0,.08);display:flex;align-items:center;padding:0 16px;gap:8px}

.dot {width:11px;height:11px;border-radius:50%}

.r {background:#ff5f57}

.y {background:#febc2e}

.g {background:#28c840}

.mock-shell {display:grid;grid-template-columns:148px 1fr;min-height:474px}

.mock-side {padding:20px 14px;background:#f1f1f4;border-right:1px solid rgba(0,0,0,.07)}

.mock-logo {width:86px;height:14px;border-radius:6px;background:#1d1d1f;margin-bottom:28px}

.mock-nav {height:10px;border-radius:6px;background:#c8c8ce;margin:14px 0;width:76%}

.mock-nav.active {height:34px;width:100%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.06)}

.mock-main {padding:24px;position:relative}

.mock-title {width:55%;height:26px;background:#1d1d1f;border-radius:8px;margin-bottom:8px}

.mock-sub {width:68%;height:10px;background:#c7c7cc;border-radius:8px;margin-bottom:24px}

.upload {
      height:138px;border:1.5px dashed #9d9da3;border-radius:18px;background:white;
      display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;color:#6e6e73;font-size:12px
    }

.upload-icon {
      width:42px;height:42px;border-radius:50%;background:rgba(0,113,227,.1);position:relative
    }

.upload-icon:before {content:"↑";position:absolute;inset:0;display:grid;place-items:center;font-weight:800;color:var(--blue);font-size:20px}

.ai-panel {
      margin-top:16px;border-radius:18px;background:linear-gradient(135deg,#111214,#27272b);
      color:white;padding:16px;box-shadow:0 20px 38px rgba(0,0,0,.18);position:relative;overflow:hidden
    }

.ai-panel:before {
      content:"";position:absolute;width:160px;height:160px;border-radius:50%;
      background:radial-gradient(circle,rgba(41,151,255,.48),transparent 67%);right:-40px;top:-70px
    }

.ai-head {display:flex;align-items:center;gap:9px;font-size:12px;font-weight:650;position:relative}

.spark {width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,var(--cyan),var(--violet));display:grid;place-items:center}

.ai-row {display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:14px;align-items:center;position:relative}

.ai-copy {height:9px;background:rgba(255,255,255,.74);border-radius:9px;margin:8px 0}

.ai-copy.short {width:62%}

.ai-copy.mid {width:82%}

.confidence {font-size:11px;color:#9ee7ff;border:1px solid rgba(100,210,255,.35);padding:6px 8px;border-radius:999px}

.mock-card-row {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.mock-card {height:72px;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,.07);padding:12px}

.mock-line {height:8px;border-radius:6px;background:#d1d1d6;margin:7px 0}

.mock-line.dark {background:#444449;width:56%}
.mock-line.width-72 {width:72%}
.mock-line.width-56 {width:56%}

.pulse {animation:pulse 2.6s ease-in-out infinite}

@keyframes pulse {0%,100%{opacity:.45;transform:scale(.98)}50%{opacity:1;transform:scale(1)}}

.persona {overflow:hidden}

.persona-head {padding:26px;color:white;min-height:158px}

.persona.user .persona-head {background:linear-gradient(135deg,#0071e3,#64d2ff)}

.persona.ai .persona-head {background:linear-gradient(135deg,#151519,#5e5ce6)}

.persona.team .persona-head {background:linear-gradient(135deg,#2c2c2e,#6e6e73)}

.persona-role {font-size:12px;opacity:.75;text-transform:uppercase;letter-spacing:.08em}

.persona-name {font-size:28px;font-weight:750;letter-spacing:-.035em;margin:6px 0}

.persona-desc {font-size:14px;opacity:.86;line-height:1.45}

.moment {display:grid;grid-template-columns:26px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--soft-line)}

.moment:last-child {border-bottom:0}

.moment-n {width:25px;height:25px;border-radius:8px;background:#f1f1f4;display:grid;place-items:center;font-size:11px;font-weight:800}

.moment b {display:block;font-size:14px}

.moment p {font-size:13px;color:var(--muted);margin:4px 0 0;line-height:1.55}

.blueprint-card {padding:14px;overflow:hidden}

.blueprint-scroll {overflow:auto;border-radius:18px}

.blueprint {display:grid;grid-template-columns:190px repeat(7,minmax(170px,1fr));min-width:1380px;background:white}
.blueprint-eight-stage {grid-template-columns:190px repeat(8,minmax(175px,1fr));min-width:1650px}

.bp-cell {padding:15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;line-height:1.55;min-height:86px}

.bp-cell.stage {font-weight:760;background:#f3f3f5;min-height:auto;color:#303035}

.bp-cell.layer {font-weight:760;background:#161618;color:white;position:sticky;left:0;z-index:3}
.bp-cell.layer.risk-control {background:#7a4f00}

.bp-cell.layer.user {background:#0071e3}

.bp-cell.layer.front {background:#5e5ce6}

.bp-cell.layer.ai {background:#2c2c2e}

.bp-cell.layer.back {background:#4d4d52}

.bp-cell.layer.support {background:#6e6e73}

.bp-cell.layer.evidence {background:#8e8e93}

.bp-cell small {color:var(--muted)}

.bp-risk {color:#aa4b00;font-weight:700}

.bp-opportunity {color:#0e7c2e;font-weight:700}

.blueprint-legend {display:flex;gap:16px;flex-wrap:wrap;padding:16px 4px 2px;font-size:12px;color:var(--muted)}

.system-card {padding:22px}

.diagram-wrap {overflow:auto;border-radius:22px;background:linear-gradient(180deg,#fcfcfe,#f0f0f4);border:1px solid var(--soft-line)}

.diagram-wrap svg {display:block;min-width:1040px;width:100%;height:auto}

.diagram-note {display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}

.legend-pill {display:inline-flex;align-items:center;gap:7px;font-size:12px;margin:4px 10px 4px 0;color:var(--muted)}

.legend-line {width:25px;height:3px;border-radius:3px;background:var(--blue)}

.legend-line.data {background:#5e5ce6}

.legend-line.control {background:#ff9f0a}

.callout {padding:18px;border-radius:18px;background:white;border:1px solid var(--soft-line)}

.callout p {font-size:13px;color:var(--muted);margin-bottom:0}

@media (max-width:980px) {
.diagram-note {grid-template-columns:1fr 1fr}
}

@media (max-width:640px) {
.window {border-radius:18px}

.mock-shell {grid-template-columns:88px 1fr}

.mock-side {padding:14px 8px}

.mock-main {padding:15px}

.mock-card-row {grid-template-columns:1fr}

.window {min-height:560px}

.diagram-note {grid-template-columns:1fr}
}

@media print {
.blueprint-scroll,
.diagram-wrap {overflow:visible}
}

.data-card {padding:24px;background:white;border:1px solid var(--soft-line);border-radius:22px}

.insight-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}

.insight {padding:17px;border-radius:17px;background:#f6f6f9;border:1px solid var(--soft-line)}

.insight b {display:block;font-size:24px;letter-spacing:-.04em}

.insight span {font-size:12px;color:var(--muted);line-height:1.45;display:block;margin-top:4px}

.codebox {margin:18px 0;padding:20px;border-radius:18px;background:#111214;color:#d6f0ff;overflow:auto;font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}

.technical-table {width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:18px 0}

.technical-table th,
.technical-table td {padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;font-size:13px;line-height:1.55}

.technical-table th {background:#f0f0f3;font-size:11px;letter-spacing:.04em;text-transform:uppercase}

.technical-table tr:last-child td {border-bottom:0}

.score {font-weight:780;color:var(--blue)}

.state-machine {display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0}

.state {padding:15px;border-radius:16px;background:white;border:1px solid var(--line);font-size:12px;position:relative}

.state:not(:last-child):after {content:"→";position:absolute;right:-10px;top:50%;transform:translate(50%,-50%);color:var(--blue);font-weight:800;z-index:2}

.state b {display:block;margin-bottom:5px}

.state small {color:var(--muted);line-height:1.45}

.event-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}

.event {padding:14px;border-radius:14px;background:#f4f8ff;border:1px solid rgba(0,113,227,.12)}

.event code {font-size:11px;color:var(--blue);font-weight:760}

.event p {font-size:12px;color:var(--muted);margin:7px 0 0;line-height:1.45}

.iteration-list {display:grid;gap:16px;margin:20px 0}

.iteration-card {padding:24px;background:white;border:1px solid var(--soft-line);border-radius:22px;box-shadow:0 10px 28px rgba(0,0,0,.035)}

.iteration-head {display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:13px}

.iteration-index {font-size:11px;letter-spacing:.08em;font-weight:780;color:var(--blue);text-transform:uppercase}

.iteration-metric {white-space:nowrap;padding:7px 10px;border-radius:999px;background:#eef7ff;color:#0064c8;font-size:11px;font-weight:750}

.iteration-grid {display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

.iteration-grid div {padding:13px;border-radius:14px;background:#f7f7f9;font-size:12px;line-height:1.55}

.iteration-grid b {display:block;margin-bottom:5px}

.metric-tree {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}

.metric-branch {padding:18px;border-radius:18px;background:#fff;border:1px solid var(--soft-line)}

.metric-branch h4 {font-size:15px}

.metric-branch ul {padding-left:17px;margin-bottom:0;color:var(--muted);font-size:12px;line-height:1.65}

.dashboard {padding:22px;border-radius:22px;background:#171719;color:white;margin:20px 0}
.dashboard-title {color:#fff}

.dashboard-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

.dash {padding:16px;border-radius:15px;background:rgba(255,255,255,.075)}

.dash small {color:rgba(255,255,255,.55);display:block}

.dash b {font-size:24px;letter-spacing:-.04em;display:block;margin:6px 0}

.dash span {font-size:11px;color:#9edaff}

.role-boundary {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}

.role-boundary>div {padding:20px;border-radius:18px}

.role-boundary .does {background:#effaf2;border:1px solid rgba(48,209,88,.18)}

.role-boundary .not {background:#fff5f3;border:1px solid rgba(255,69,58,.14)}

.role-boundary ul {padding-left:18px;font-size:13px;line-height:1.65;margin-bottom:0}

.persona-grid-five {display:grid;grid-template-columns:repeat(5,1fr);gap:14px}

.persona-compact {overflow:hidden}

.persona-compact .persona-head {min-height:180px;padding:22px}

.persona-compact .persona-name {font-size:22px}

.persona.teacher .persona-head {background:linear-gradient(135deg,#0071e3,#5ac8fa)}

.persona.learner .persona-head {background:linear-gradient(135deg,#34c759,#64d2ff)}

.persona.airline .persona-head {background:linear-gradient(135deg,#ff9f0a,#ff6b35)}

.persona.pipeline .persona-head {background:linear-gradient(135deg,#171719,#5e5ce6)}

.persona.delivery .persona-head {background:linear-gradient(135deg,#3a3a3c,#8e8e93)}

.compact-timeline {padding:12px 18px 20px}

.compact-timeline .moment {grid-template-columns:22px 1fr;padding:10px 0}

.compact-timeline .moment-n {width:22px;height:22px}

.compact-timeline .moment p {font-size:12px}

.evidence-note {padding:16px 18px;border-radius:16px;background:#fff9e9;border:1px solid rgba(255,159,10,.2);font-size:13px;line-height:1.6}

@media(max-width:1120px) {
.persona-grid-five {grid-template-columns:repeat(2,1fr)}

.insight-grid,
.metric-tree {grid-template-columns:repeat(2,1fr)}

.state-machine {grid-template-columns:repeat(2,1fr)}

.state:not(:last-child):after {display:none}

.iteration-grid,
.event-grid {grid-template-columns:1fr}

.dashboard-grid {grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px) {
.persona-grid-five,
.insight-grid,
.metric-tree,
.dashboard-grid,
.role-boundary {grid-template-columns:1fr}

}

.persona-desc,
.moment p {
  letter-spacing:.022em;
  text-wrap:pretty;
}

.story-card>p,
.story-card>.quote,
.story-card>.decision,
.story-card>.evidence-note,
.story-card>.role-boundary {
  max-width:var(--reading);
}

.story-card>h3,
.story-card>h4 {
  max-width:820px;
}

.story-card .data-card {
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
}

.story-card .insight-grid {
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.story-card .insight {
  background:transparent;
  border:0;
  border-radius:0;
  padding:24px 0 26px;
}

.story-card .insight:nth-child(odd) {
  border-right:1px solid var(--line);
  padding-right:32px;
}

.story-card .insight:nth-child(even) {padding-left:32px}

.story-card .iteration-list {gap:0}

.story-card .iteration-card {
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:42px 0;
  border-top:1px solid var(--line);
}

.story-card .iteration-card:last-child {border-bottom:1px solid var(--line)}

.story-card .iteration-grid div {
  background:transparent;
  border-radius:0;
  padding:0 26px 0 0;
}

.story-card .iteration-grid div:not(:last-child) {
  border-right:1px solid var(--line);
}

.story-card .metric-branch {
  background:transparent;
  border:0;
  border-radius:0;
  padding:22px 22px 8px 0;
  border-top:3px solid rgba(0,113,227,.18);
}

.story-card .role-boundary>div {
  border-radius:22px;
  padding:28px 30px;
}

.story-card .technical-table {
  margin:32px 0 46px;
}

.story-card .codebox {
  margin:28px 0 42px;
  padding:28px;
  border-radius:22px;
  font-size:13px;
  line-height:1.8;
}

.event-grid {
  gap:14px;
  margin:28px 0 44px;
}

.event {
  background:transparent;
  border:0;
  border-radius:0;
  padding:18px 0 18px 20px;
  border-left:3px solid rgba(0,113,227,.18);
}

.state-machine {
  gap:16px;
  margin:28px 0 44px;
}

.state {
  padding:20px;
  border-radius:18px;
  background:#fff;
  border:0;
  box-shadow:0 8px 26px rgba(0,0,0,.04);
}

.evidence-note {
  margin:26px 0 40px;
  padding:22px 24px;
  line-height:1.75;
}

.insight-grid {grid-template-columns:repeat(2,1fr)}

.metric-tree {grid-template-columns:repeat(2,1fr);gap:26px 34px}

.iteration-grid {grid-template-columns:repeat(3,1fr);gap:28px}

.event-grid {grid-template-columns:repeat(2,1fr)}

.dashboard {padding:34px;border-radius:28px;margin:34px 0}

.dashboard-grid {gap:18px}

.dash {padding:22px;border-radius:18px}

.dash b {font-size:28px}

.persona-grid-five {
  grid-template-columns:repeat(2,1fr);
  gap:32px;
}

.persona-grid-five .persona:last-child {
  grid-column:1 / -1;
  max-width:calc(50% - 16px);
}

.persona.card {
  border:0;
  box-shadow:0 18px 48px rgba(0,0,0,.07);
  border-radius:28px;
}

.persona-compact .persona-head {
  min-height:210px;
  padding:30px;
}

.persona-compact .persona-name {font-size:28px}

.compact-timeline {
  padding:18px 30px 34px;
}

.compact-timeline .moment {
  padding:18px 0;
}

.moment p {
  line-height:1.75;
  margin-top:8px;
}

.blueprint-card.card,
.system-card.card {
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:0;
}

.blueprint-scroll,
.diagram-wrap {
  border-radius:28px;
  box-shadow:0 18px 48px rgba(0,0,0,.06);
}

.blueprint-legend {padding-top:24px}

.diagram-note {
  gap:24px;
  margin-top:32px;
}

.callout {
  border:0;
  box-shadow:none;
  border-radius:0;
  background:transparent;
  padding:0 24px 0 0;
  border-right:1px solid var(--line);
}

.callout:last-child {border-right:0}

.bp-cell,
.legend-pill {
  letter-spacing:.035em;
}

@media(max-width:980px) {
.event-grid,
.iteration-grid {grid-template-columns:1fr}

.story-card .iteration-grid div {
    border-right:0!important;
    border-top:1px solid var(--line);
    padding:18px 0;
  }

.persona-grid-five {grid-template-columns:1fr}

.persona-grid-five .persona:last-child {
    grid-column:auto;
    max-width:none;
  }

.callout {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:0 0 22px;
  }

.callout:last-child {border-bottom:0}
}

@media(max-width:640px) {
.insight-grid,
.metric-tree,
.dashboard-grid {grid-template-columns:1fr}

.story-card .insight:nth-child(odd) {
    border-right:0;
    padding-right:0;
  }

.story-card .insight:nth-child(even) {padding-left:0}

.story-card .insight:not(:last-child) {
    border-bottom:1px solid var(--line);
  }

.persona-compact .persona-head {min-height:auto}
}