:root{
--text-primary:#23221E;--text-secondary:#5C594F;--text-muted:#8D897C;
--surface-1:#F1EFE9;--border:#DAD7CC;--border-strong:#C2BEB0;--border-stronger:#8A8578;
--fill-primary:#23221E;--on-primary:#FFFFFF;--text-accent:#2F6BD8;
}
*{box-sizing:border-box}
body{margin:0;padding:16px 20px;background:#FDFCF9;color:var(--text-primary);
font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.seclbl{font-size:13px;color:var(--text-muted);margin:1.5rem 0 .5rem}
.seclbl:first-of-type{margin-top:0}
.panel{background:var(--surface-1);border-radius:8px;padding:12px 16px;font-size:14px;line-height:1.6;color:var(--text-primary);margin:.75rem 0 0}
.chip{font-size:12px;padding:4px 10px;border:0.5px solid var(--border);border-radius:12px;color:var(--text-muted)}
button{font:inherit;font-size:13.5px;padding:6px 14px;border:1px solid var(--border);border-radius:8px;
background:#fff;color:var(--text-primary);cursor:pointer}
button:hover{border-color:var(--border-strong)}
input[type=range]{cursor:pointer}
svg text.th{font-family:inherit;font-size:14px;font-weight:500;fill:var(--text-primary)}
svg text.ts{font-family:inherit;font-size:12.5px;fill:var(--text-secondary)}
.node{cursor:pointer}
.node:hover rect{filter:brightness(.965)}
.arr{stroke:var(--border-stronger);stroke-width:1.5;fill:none}
rect.box,circle.box{fill:#FAF9F4;stroke:var(--border)}
g.c-gray>rect,rect.c-gray,circle.c-gray{fill:#F1EFE9;stroke:#C6C2B4}
g.c-purple>rect,rect.c-purple{fill:#ECE9FA;stroke:#8F84E8}
g.c-teal>rect,rect.c-teal{fill:#E2F3EB;stroke:#2FA47F}
g.c-amber>rect,rect.c-amber{fill:#FBEED6;stroke:#E8A33D}
g.c-coral>rect,rect.c-coral{fill:#FCE7DF;stroke:#E77C57}