.story-canvas { background:#263028; border:1px solid #475541; border-radius:2px; min-height:430px; padding:28px; position:relative; overflow:hidden; }
.canvas-top { display:flex; justify-content:space-between; font:9px var(--mono); color:#a3b29a; letter-spacing:.05em; }
.story-canvas:before { content:''; position:absolute; inset:0; background-image:radial-gradient(#74836a40 .7px,transparent .7px); background-size:18px 18px; pointer-events:none; }
.story-canvas>* { position:relative; }
.story-canvas .stage-card { background:var(--paper); color:var(--ink); padding:20px; border:1px solid #d5d7cd; box-shadow:0 14px 30px #0003; transition:transform 1.1s var(--ease),opacity .6s,border-color .6s; }
.stage-card .tag { font:9px var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:14px; }
.stage-card strong { display:block; font-size:24px; line-height:1.2; letter-spacing:-.03em; font-weight:500; }
.stage-card p { font-size:12px; line-height:1.6; margin-top:12px; }
.stage-card .source-line { display:block; height:6px; width:90%; background:#d5d7cd; margin:9px 0; }
.stage-card .source-line.short { width:60%; }
.flow-arrow { color:var(--orange); font-size:38px; line-height:1; }
.story-canvas label { display:block; font:10px var(--mono); margin-top:18px; }
.story-canvas input,.story-canvas select { width:100%; background:#fffdf5; border:1px solid #a7afa0; border-radius:0; padding:10px; font:13px var(--sans); color:var(--ink); margin-top:7px; }
.story-canvas button { border:0; border-radius:0; color:var(--ink); background:var(--orange); font:11px var(--mono); padding:11px 14px; cursor:pointer; margin-top:12px; }
.story-canvas .tiny-status { font:10px/1.6 var(--mono); min-height:3em; color:var(--muted); }
.stage-index { position:absolute; right:24px; bottom:10px; font-size:100px; letter-spacing:-.08em; color:#9caa9120; pointer-events:none; }
/* Knowledge: a branching graph converges into a cited answer. */
.knowledge-map { display:grid; grid-template-columns:1fr 1.4fr; align-items:center; gap:28px; margin-top:35px; }
.repo-stack { display:grid; gap:10px; }
.repo-node { padding:12px; border:1px solid #68795b; color:#c7d3bd; font:9px var(--mono); background:#2c392c; transition:transform .9s var(--ease),border-color .7s; }
.repo-node:nth-child(2) { transform:translateX(14px); }
.repo-node:nth-child(3) { transform:translateX(5px); }
.knowledge-map .stage-card { transform:translateY(22px); }
[data-step='1'] .knowledge-map .stage-card,[data-step='2'] .knowledge-map .stage-card { transform:translateY(0); border-color:var(--orange); }
[data-step='1'] .repo-node { transform:translateX(12px); border-color:var(--orange); }
[data-step='2'] .repo-node { transform:translateX(0); }
.knowledge-map .citation { margin-top:18px; border-top:1px solid #c9cebf; padding-top:10px; color:#965029; font:10px/1.5 var(--mono); }
.knowledge-question { color:#c7d3bd; max-width:100%; }
.knowledge-decision { margin-top:24px; color:#c7d3bd; font:11px/1.6 var(--mono); }
/* Declarations: records slide behind an editable draft, then become two forms. */
.declaration-stack { position:relative; min-height:325px; margin-top:28px; }
.record-stack { position:absolute; left:0; top:0; width:38%; display:grid; gap:7px; }
.record-stack span { background:#3a4835; border:1px solid #607053; padding:12px; font:9px var(--mono); color:#c9d3bf; transform:rotate(-5deg); }
.declaration-stack .draft { position:relative; margin-left:18%; width:82%; min-height:245px; transform:rotate(3deg) translateY(15px); }
[data-step='1'] .declaration-stack .draft { transform:rotate(0deg) translateY(0); }
[data-step='2'] .declaration-stack .draft { transform:translateY(-8px); }
.form-pair { display:flex; gap:8px; margin-top:17px; }
.form-pair span { background:#e6e8db; padding:10px; flex:1; font:9px/1.7 var(--mono); border-top:2px solid var(--orange); transition:transform .8s var(--ease); }
[data-step='2'] .form-pair span:first-child { transform:rotate(-3deg); }
[data-step='2'] .form-pair span:last-child { transform:rotate(3deg); }
/* Bank: statement, precedent and journal retain their different roles. */
.ledger-story { display:grid; grid-template-columns:.8fr 1.3fr; gap:18px; margin-top:30px; }
.statement-mini { border:1px solid #68795b; padding:15px; color:#c7d3bd; font:10px/1.7 var(--mono); }
.statement-mini div { border-top:1px solid #52624a; padding:14px 0; transition:background .7s; }
.statement-mini .selected-line { color:var(--orange); }
.ledger-story .stage-card { transform:translateX(18px); }
[data-step='1'] .ledger-story .stage-card,[data-step='2'] .ledger-story .stage-card { transform:translateX(0); border-color:var(--orange); }
.journal-preview { white-space:pre-wrap; font:10px/1.8 var(--mono); margin-top:18px; background:#e6e8db; padding:12px; border-left:2px solid var(--orange); }
/* Purchase orders: source fields reconcile against a separate master record. */
.po-story { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px; }
.po-source { transform:rotate(-4deg); }
.po-master { transform:rotate(4deg); }
[data-step='1'] .po-source,[data-step='2'] .po-source { transform:rotate(0); }
[data-step='1'] .po-master,[data-step='2'] .po-master { transform:rotate(0); border-color:var(--orange); }
.po-field { border-bottom:1px solid #cdd2c4; padding:12px 0; font:12px var(--mono); }
.po-outcome { grid-column:1/-1; border-left:3px solid var(--orange); padding:12px; background:#3b4834; font:11px/1.6 var(--mono); color:#d8ddce; }
@media(max-width:600px) { .story-canvas { padding:20px; min-height:390px; } .knowledge-map { gap:14px; grid-template-columns:.8fr 1.3fr; } .repo-node { padding:9px; font-size:8px; } .story-canvas .stage-card { padding:15px; } .stage-card strong { font-size:21px; } .ledger-story { gap:10px; grid-template-columns:.75fr 1.25fr; } .statement-mini { padding:10px; font-size:9px; } .po-story { gap:10px; } .po-field { font-size:10px; } .record-stack { width:42%; } }

.form-pair span { min-width:0; overflow-wrap:anywhere; }
#knowledge-references { font:10px/1.6 var(--mono); margin-top:8px; }