:root{--b:#07558a;--b2:#083f66;--t:#08796d;--ts:#e8f5f2;--bs:#eef5fb;--i:#202a34;--m:#5f6b76;--bd:#ccd7e2;--bg:#f2f5f8;--g:#067647;--gg:#ecfdf3;--r:#b42318;--rr:#fef3f2;--y:#fff1c7}
*{box-sizing:border-box}body{margin:0;font:16px/1.55 Arial,Helvetica,sans-serif;color:var(--i);background:var(--bg)}button,input,select,textarea{font:inherit}.shell{max-width:1240px;margin:auto;padding:22px}.hero,.panel{background:#fff;border:1px solid var(--bd);border-radius:20px;box-shadow:0 10px 26px rgba(0,53,94,.08)}.hero{padding:28px}.panel{padding:24px;margin-top:20px}.panel[hidden]{display:none}.eyebrow{margin:0 0 6px;color:var(--t);font-weight:700}h1,h2,h3{color:var(--b2)}h1{font-size:clamp(2rem,4vw,3rem);line-height:1.12;margin:0}.lead{max-width:960px;font-size:1.08rem}.ref{font-size:.87rem;color:var(--m);margin:0 0 18px}.pbl,.call,.note,.warn,.ok,.prompt{border-radius:12px;padding:13px 15px;margin-top:14px}.pbl,.call,.prompt{background:var(--ts);border:1px solid #91d0c6;color:#075f55;font-weight:700}.note{background:var(--bs);border:1px solid #bbd4e8}.warn{background:#fff7df;border:1px solid #efce76;color:#624600}.ok{background:var(--gg);border:1px solid #98e6ba;color:var(--g)}.nav{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:18px}.nav button,.btn{border:1px solid var(--bd);border-radius:10px;background:#fff;color:var(--b2);font-weight:700;padding:10px 12px;min-height:46px;cursor:pointer}.nav button.active,.btn.primary{background:var(--b);color:#fff;border-color:var(--b)}.btn.teal{background:var(--ts);border-color:#8fcfc5;color:#08685e}.progress{height:8px;margin-top:14px;background:#dfe7ee;border-radius:99px;overflow:hidden}.progress>div{height:100%;width:0;background:linear-gradient(90deg,var(--b),var(--t))}.progress-label{font-size:.9rem;color:var(--m);margin-top:6px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{border:1px solid var(--bd);border-radius:14px;padding:17px;background:#fff}.soft{background:#f8fafc}.diagram{border:1px solid var(--bd);border-radius:14px;background:#fcfdfe;padding:14px;overflow:auto}.diagram svg{min-width:820px;width:100%;height:auto}.component{fill:#eef5fb;stroke:#07558a;stroke-width:2}.component.active{fill:#fff1c7;stroke:#b07a00;stroke-width:4}.wire{stroke:#6d7b88;stroke-width:3;fill:none}.wire.active{stroke:#08796d;stroke-width:5}.label{fill:#083f66;font-size:18px;font-weight:700}.smalllabel{fill:#45525f;font-size:14px}.stagebar{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:12px 0}.stage{padding:8px;border:1px solid var(--bd);border-radius:8px;text-align:center;font-size:.88rem;font-weight:700}.stage.active{background:var(--y);border-color:#d6a525;color:#5e4400}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}.metric{border:1px solid var(--bd);border-radius:12px;padding:11px;text-align:center}.metric small{display:block;color:var(--m)}.metric strong{font-size:1.13rem;color:var(--b2)}.controls{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.status{border:1px solid var(--bd);border-radius:10px;padding:12px;background:#f8fafc}.status.good{background:var(--gg);border-color:#98e6ba;color:var(--g)}.status.bad{background:var(--rr);border-color:#efb7b1;color:var(--r)}table{width:100%;border-collapse:collapse;margin-top:12px}th,td{border:1px solid var(--bd);padding:9px 10px;text-align:left;vertical-align:top}th{background:var(--b);color:#fff}.tablewrap{overflow-x:auto}.mono,code,textarea{font-family:Consolas,"Courier New",monospace}.steps{padding-left:23px}.steps li{margin:7px 0}input,select,textarea{width:100%;border:1px solid var(--bd);border-radius:9px;padding:9px 10px;background:#fff;min-height:43px}label{font-weight:700}textarea{min-height:190px}.footer{text-align:center;color:var(--m);font-size:.9rem;margin:24px 0}
.micro-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:stretch;margin-top:16px}.micro-card{border:2px solid var(--bd);border-radius:14px;padding:14px;background:#fff;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}.micro-card small{display:block;color:var(--m);margin-top:4px}.micro-card.current{border-color:#d6a525;background:var(--y)}.micro-card.done{border-color:#6fc79f;background:var(--gg)}.micro-step-num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bs);color:var(--b2);font-weight:800}.micro-card.done .micro-step-num{background:#c9f1da;color:var(--g)}.micro-badge{grid-column:1/-1;justify-self:start;border-radius:999px;padding:3px 9px;font-size:.78rem;font-weight:700;background:#eef2f5;color:var(--m)}.micro-card.current .micro-badge{background:#ffe8a3;color:#654900}.micro-card.done .micro-badge{background:#c9f1da;color:var(--g)}.micro-arrow{align-self:center;font-size:1.7rem;color:var(--t);font-weight:800}.micro-controls{grid-template-columns:1fr 1fr 1fr}.state-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.state-box{border:1px solid var(--bd);border-radius:12px;padding:13px;text-align:center;background:#f8fafc}.state-box small{display:block;color:var(--m)}.state-box strong{display:block;color:var(--b2);font-size:1.2rem;margin-top:4px}.state-box.changed{background:var(--y);border-color:#d6a525}.trace-count{max-width:220px}.trace-table tbody tr[data-trace-index]{cursor:pointer}.trace-table tbody tr[data-trace-index]:hover{background:#eef5fb}.trace-table tbody tr.selected{background:#e8f5f2}.trace-inspector .status{min-height:108px}.trace-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.trace-detail-grid>div{border:1px solid var(--bd);border-radius:10px;padding:10px;background:#f8fafc}.trace-detail-grid small{display:block;color:var(--m)}.trace-detail-grid strong{display:block;margin-top:4px;color:var(--b2)}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}.nav{grid-template-columns:1fr 1fr}.metrics{grid-template-columns:1fr 1fr}.stagebar{grid-template-columns:1fr}.shell{padding:12px}.hero,.panel{padding:18px}.micro-flow{grid-template-columns:1fr}.micro-arrow{transform:rotate(90deg);justify-self:center}.micro-controls{grid-template-columns:1fr}.trace-detail-grid{grid-template-columns:1fr}}
@media(max-width:520px){.nav,.controls,.metrics{grid-template-columns:1fr}}