:root {
  --story-line: rgba(255, 255, 255, 0.14);
  --story-panel: rgba(255, 255, 255, 0.045);
  --story-cyan: #7ff4ff;
  --story-warm: #ff8a5b;
}

.brief-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 36px;
  overflow: hidden;
  border: 1px solid var(--story-line);
  border-radius: 18px;
  background: var(--story-line);
}
.brief-strip > div {
  display: flex;
  min-height: 128px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 24px;
  background: rgba(8, 13, 22, 0.94);
}
.brief-strip strong { color: var(--story-cyan); font: 700 clamp(28px, 3vw, 48px)/1 "Syne", sans-serif; }
.brief-strip span { color: rgba(255,255,255,.64); font-size: 14px; }
.source-note {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  margin-top: 18px;
  padding: 24px 28px;
  border-left: 2px solid var(--story-warm);
  background: linear-gradient(90deg, rgba(255,138,91,.09), transparent 72%);
}
.source-note > span { color: var(--story-warm); font: 700 12px/1.5 "Syne", sans-serif; letter-spacing: .12em; }
.source-note p { max-width: 880px; color: rgba(255,255,255,.68); line-height: 1.8; }

.architecture .section-head { max-width: 1180px; }
@media (min-width: 901px) { .architecture .section-head > p:last-child { white-space: nowrap; } }

.architecture { padding-top: 128px; }
.intent-map { margin-top: 56px; }
.intent-hub {
  display: grid;
  width: min(620px, 100%);
  margin: 0 auto 42px;
  padding: 28px;
  border: 1px solid rgba(127,244,255,.36);
  border-radius: 18px;
  text-align: center;
  background: radial-gradient(circle at 50% 0, rgba(127,244,255,.16), transparent 62%), rgba(8,13,22,.9);
  box-shadow: 0 0 50px rgba(46,190,211,.08);
}
.intent-hub::after { content: ""; position: absolute; }
.intent-hub small { color: var(--story-cyan); font-size: 11px; letter-spacing: .16em; }
.intent-hub b { margin: 7px 0; font-size: clamp(24px, 3vw, 36px); }
.intent-hub span { color: rgba(255,255,255,.52); font-size: 13px; }
.intent-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.intent-groups article {
  min-height: 250px;
  padding: 24px;
  border: 1px solid var(--story-line);
  border-radius: 18px;
  background: var(--story-panel);
}
.intent-groups i { display: block; margin-bottom: 32px; color: rgba(255,255,255,.2); font: 700 34px/1 "Syne", sans-serif; font-style: normal; }
.intent-groups small { color: var(--story-cyan); font: 700 10px/1 "Syne", sans-serif; letter-spacing: .16em; }
.intent-groups h3 { margin: 10px 0 8px; font-size: 22px; }
.intent-groups p { min-height: 48px; color: rgba(255,255,255,.8); line-height: 1.55; }
.intent-groups span { display: block; margin-top: 22px; color: rgba(255,255,255,.42); font-size: 12px; line-height: 1.6; }

.process-evidence {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .7fr);
  gap: 18px;
  margin-top: 18px;
}
.process-evidence figure,
.evidence-frame,
.evidence-pair figure,
.iteration-compare figure {
  overflow: hidden;
  border: 1px solid var(--story-line);
  border-radius: 18px;
  background: rgba(5,9,16,.92);
  cursor: zoom-in;
}
.process-evidence figure img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top; }
.process-evidence figcaption,
.evidence-frame figcaption,
.evidence-pair figcaption {
  display: grid;
  gap: 7px;
  padding: 20px 22px 22px;
}
.process-evidence figcaption b,
.evidence-frame figcaption b,
.evidence-pair figcaption b { color: #fff; font-size: 15px; }
.process-evidence figcaption span,
.evidence-frame figcaption span,
.evidence-pair figcaption span { color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.7; }
.logic-figure { cursor: default !important; }
.hub-wireframe { position: relative; min-height: 480px; overflow: hidden; background: radial-gradient(circle at 50% 52%, rgba(255,138,91,.12), transparent 25%), linear-gradient(145deg,#101a26,#080d15 72%); }
.hub-wireframe::before { content:""; position:absolute; inset:0; opacity:.45; background-image: linear-gradient(rgba(127,244,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(127,244,255,.08) 1px,transparent 1px); background-size:42px 42px; }
.wf-label { position:absolute; left:22px; top:20px; z-index:3; color:rgba(255,255,255,.45); font:700 9px/1 "Syne",sans-serif; letter-spacing:.16em; }
.wf-core,.wf-node { position:absolute; z-index:2; display:grid; place-items:center; min-width:150px; padding:18px; border:1px solid rgba(127,244,255,.35); border-radius:14px; background:rgba(8,13,22,.88); text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.28); }
.wf-core { left:50%; top:50%; min-width:210px; min-height:118px; transform:translate(-50%,-50%); border-color:rgba(255,138,91,.7); box-shadow:0 0 45px rgba(255,92,55,.18); }
.wf-node small,.wf-core small { color:var(--story-cyan); font:700 9px/1 "Syne",sans-serif; letter-spacing:.14em; }.wf-core small{color:var(--story-warm)}
.wf-node b,.wf-core b { margin-top:9px; font-size:14px; }.wf-core b{font-size:20px}
.wf-return{right:7%;top:29%}.wf-redeem-a{left:7%;top:34%}.wf-redeem-b{left:16%;bottom:11%}.wf-moment{left:50%;top:12%;transform:translateX(-50%)}
.wf-path{position:absolute;z-index:1;border:1px dashed rgba(127,244,255,.25);border-left:0;border-bottom:0}.path-a{left:25%;right:25%;top:28%;height:32%}.path-b{left:25%;right:17%;top:48%;height:30%;transform:rotate(8deg)}
.evidence-notes { padding: 28px; border: 1px solid var(--story-line); border-radius: 18px; background: var(--story-panel); }
.evidence-notes > span { color: var(--story-warm); font-size: 11px; letter-spacing: .14em; }
.evidence-notes h3 { margin: 12px 0 28px; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; }
.evidence-notes ol { display: grid; gap: 20px; padding: 0; list-style: none; counter-reset: note; }
.evidence-notes li { position: relative; padding-left: 34px; counter-increment: note; }
.evidence-notes li::before { content: "0" counter(note); position: absolute; left: 0; top: 2px; color: var(--story-cyan); font: 700 11px/1 "Syne", sans-serif; }
.evidence-notes li b { display: block; margin-bottom: 4px; font-size: 14px; }
.evidence-notes li p { color: rgba(255,255,255,.5); font-size: 13px; line-height: 1.65; }

.decision-section { padding-top: 138px; }
.decision-story { margin-top: 74px; padding-top: 28px; border-top: 1px solid var(--story-line); }
.decision-story > header { display: grid; grid-template-columns: minmax(180px, .5fr) 1.5fr; align-items: start; gap: 28px; margin-bottom: 30px; }
.decision-story > header span { color: var(--story-cyan); font: 700 11px/1.5 "Syne", sans-serif; letter-spacing: .13em; }
.decision-story > header h3 { max-width: 760px; font-size: clamp(28px, 4.1vw, 54px); line-height: 1.12; }
.story-logic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px calc(25% + 7px); }
.story-logic > div { min-height: 180px; padding: 22px; border: 1px solid var(--story-line); border-radius: 15px; background: var(--story-panel); }
.story-logic small { color: var(--story-warm); font-size: 11px; letter-spacing: .12em; }
.story-logic p { margin-top: 14px; color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.75; }
.evidence-frame { margin-left: calc(25% + 7px); }
.evidence-frame img { display: block; width: 100%; aspect-ratio: 16/8.7; object-fit: cover; object-position: top; }
.evidence-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-left: calc(25% + 7px); }
.evidence-pair img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top; }
.state-language { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 18px calc(25% + 7px); overflow: hidden; border: 1px solid var(--story-line); border-radius: 15px; background: var(--story-line); }
.state-language > div { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 18px; background: rgba(8,13,22,.96); }
.state-language i { grid-row: span 2; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: #7ff4ff; box-shadow: 0 0 14px currentColor; }
.state-language i.claim { background: #ffb04d; }.state-language i.done { background: #70d49c; }.state-language i.locked { background: #69717c; box-shadow: none; }
.state-language b { font-size: 13px; }.state-language span { color: rgba(255,255,255,.42); font-size: 11px; }

.iteration-compare { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 52px; }
.iteration-compare figure > span { display: block; padding: 16px 18px; color: var(--story-cyan); font: 700 10px/1 "Syne", sans-serif; letter-spacing: .14em; }
.iteration-compare figure img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top; }
.iteration-compare figcaption { padding: 20px; }
.iteration-compare figcaption b { font-size: 15px; }.iteration-compare figcaption p { margin-top: 7px; color: rgba(255,255,255,.52); font-size: 13px; line-height: 1.7; }
.iteration-arrow { display: grid; justify-items: center; gap: 8px; color: var(--story-warm); }
.iteration-arrow i { font: 300 28px/1 sans-serif; font-style: normal; }
.iteration-arrow span { writing-mode: vertical-rl; color: rgba(255,255,255,.34); font-size: 10px; letter-spacing: .16em; }
.iteration-summary { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:18px; margin-top:52px; align-items:stretch; }
.iteration-rationale { padding:34px; border:1px solid var(--story-line); border-radius:18px; background:var(--story-panel); }
.iteration-rationale>span { color:var(--story-warm); font:700 10px/1 "Syne",sans-serif; letter-spacing:.14em; }.iteration-rationale h3{margin:18px 0;font-size:clamp(24px,2.6vw,38px);line-height:1.25}.iteration-rationale p,.iteration-rationale li{color:rgba(255,255,255,.55);font-size:13px;line-height:1.75}.iteration-rationale ul{padding-left:1.2em;margin:24px 0 0}
.iteration-summary figure { overflow:hidden; margin:0; border:1px solid var(--story-line); border-radius:18px; background:rgba(5,9,16,.92); cursor:zoom-in; }.iteration-summary figure>span{display:block;padding:16px 18px;color:var(--story-cyan);font:700 10px/1 "Syne",sans-serif;letter-spacing:.14em}.iteration-summary figure img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top}.iteration-summary figcaption{padding:20px}.iteration-summary figcaption b{font-size:15px}.iteration-summary figcaption p{margin-top:7px;color:rgba(255,255,255,.52);font-size:13px;line-height:1.7}
.iteration-decisions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.iteration-decisions article { padding: 24px; border: 1px solid var(--story-line); border-radius: 16px; background: var(--story-panel); }
.iteration-decisions span { color: var(--story-warm); font: 700 10px/1 "Syne", sans-serif; letter-spacing: .12em; }
.iteration-decisions h3 { margin: 13px 0 16px; font-size: 20px; line-height: 1.35; }
.iteration-decisions p { color: rgba(255,255,255,.54); font-size: 13px; line-height: 1.7; }
.iteration-decisions p b { color: rgba(255,255,255,.82); }

@media (max-width: 900px) {
  .brief-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brief-strip > div { min-height: 105px; }
  .intent-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-evidence { grid-template-columns: 1fr; }
  .iteration-summary { grid-template-columns:1fr; }
  .decision-story > header { grid-template-columns: 1fr; gap: 12px; }
  .story-logic, .evidence-frame, .evidence-pair, .state-language { margin-left: 0; }
  .state-language { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .source-note { grid-template-columns: 1fr; gap: 10px; padding: 20px; }
  .architecture, .decision-section { padding-top: 92px; }
  .intent-groups { grid-template-columns: 1fr; }
  .intent-groups article { min-height: auto; }
  .intent-groups i { margin-bottom: 20px; }
  .story-logic, .evidence-pair, .iteration-decisions { grid-template-columns: 1fr; }
  .story-logic > div { min-height: auto; }
  .decision-story { margin-top: 56px; }
  .iteration-compare { grid-template-columns: 1fr; }
  .iteration-arrow { grid-template-columns: auto auto; justify-content: center; }
  .iteration-arrow i { transform: rotate(90deg); }
  .iteration-arrow span { writing-mode: initial; }
  .brief-strip > div { padding: 18px; }
  .brief-strip span { font-size: 12px; }
  .state-language { grid-template-columns: 1fr 1fr; }
  .hub-wireframe{min-height:420px}.wf-node{min-width:120px;padding:14px}.wf-core{min-width:165px}.wf-return{right:3%}.wf-redeem-a{left:3%}.wf-redeem-b{left:7%}
}