#staff-demo .wf-eyebrow{font:12px/1.6 'IBM Plex Mono',monospace;color:#b9c4c5;margin:0 0 16px}
#company-canvas{border:1px solid #455054;background:#0b1012;isolation:isolate;color:#edf1ef}
#company-canvas *{box-sizing:border-box}
#company-canvas .cb-bar{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 24px;border-bottom:1px solid #354146;font:11px/1.6 'IBM Plex Mono',monospace;color:#b6c2c3}
#company-canvas .cb-bar>span:first-child{display:flex;gap:10px;align-items:center;color:#e4ebea}
#company-canvas .cb-bar i{width:7px;height:7px;background:#de142a;border-radius:50%}
#company-canvas .cb-intent{display:flex;align-items:center;gap:18px;padding:24px 32px;border-bottom:1px solid #354146;background:#121a1d}
#company-canvas .cb-person{display:grid;place-items:center;width:38px;height:38px;border:1px solid #718087;border-radius:50%;font-size:22px;flex-shrink:0}
#company-canvas .cb-intent small{font:10px/1.8 'IBM Plex Mono',monospace;color:#aebcbf;letter-spacing:.04em}
#company-canvas .cb-intent p{margin:6px 0 0;font:18px/1.6 'Manrope','IBM Plex Sans Thai',sans-serif;max-width:60ch;color:#e5ece9}
#company-canvas .cb-intent-tag{margin-left:auto;white-space:nowrap;font:10px/1.6 'IBM Plex Mono',monospace;color:#95a6ab}
#company-canvas .cb-stage{position:relative;background:radial-gradient(ellipse at 50% 30%,#1a292d66,transparent 70%)}
#company-canvas .cb-art{display:block;width:100%;height:auto;overflow:hidden;aspect-ratio:1040/720}
#company-canvas .cb-art text{font-family:'Manrope','IBM Plex Sans Thai',sans-serif;fill:#e6edeb}
#company-canvas .cb-node-bg{fill:#192327;stroke:#7b898d;stroke-width:1}
#company-canvas .cb-node[data-company-node=owner] .cb-node-bg{fill:#293437;stroke:#bdc9c8}
#company-canvas .cb-node-title{font-size:16px;font-weight:600}
#company-canvas .cb-node-sub{font-size:12px;fill:#afbec1}
#company-canvas .cb-glyph{stroke:#d0dbda;stroke-width:1.3}
#company-canvas .cb-link{stroke:#798a90;stroke-width:1.2;stroke-linejoin:round}
#company-canvas .cb-handoff{stroke:#f26474;stroke-width:1.7;stroke-dasharray:.015 .025}
#company-canvas .cb-selection rect:first-child{stroke:#ec5d71;stroke-width:1.2}
#company-canvas .cb-cursor{filter:drop-shadow(0 3px 6px #0008)}
#company-canvas .cb-cursor-label{font:10px 'IBM Plex Mono',monospace;fill:#fff}
#company-canvas .cb-bubble rect{fill:#1e2930;stroke:#74848a;stroke-width:.7}
#company-canvas .cb-bubble text{font-size:12px;fill:#e1e9e8}
#company-canvas .cb-empty-label{font-size:17px;fill:#a0b2b7}
#company-canvas .cb-ghost rect{fill:#de142a08;stroke:#d3707e;stroke-dasharray:5 5}
#company-canvas .cb-ghost text{fill:#bba3a9;font:10px 'IBM Plex Mono','IBM Plex Sans Thai',monospace}
#company-canvas .cb-canvas-note{position:absolute;bottom:22px;left:28px;font:10px/1.6 'IBM Plex Mono',monospace;color:#94a6ac;pointer-events:none}
#company-canvas .cb-narration{display:grid;grid-template-columns:185px 1fr;gap:20px;padding:22px 28px;border-top:1px solid #354146;background:#141c1f;min-height:95px;align-items:center}
#company-canvas .cb-narration>div{display:flex;gap:14px;align-items:center;font:13px/1.6 'IBM Plex Mono',monospace}
#company-canvas .cb-narration img{width:27px;height:27px;outline:0}
#company-canvas .cb-state{display:block;font-size:9px;color:#abbabd}
#company-canvas #cb-caption{margin:0;font:17px/1.7 'Manrope','IBM Plex Sans Thai',sans-serif;color:#e6efeb}
#company-canvas .cb-playbar{display:flex;gap:8px;align-items:center;padding:14px 24px}
#company-canvas button{font:12px/1.6 'IBM Plex Mono','IBM Plex Sans Thai',monospace;padding:10px 14px;border:1px solid #71838b;background:transparent;color:#e0e9e6;min-height:44px;border-radius:3px;cursor:pointer}
#company-canvas button:focus-visible{outline:2px solid #f0cc77;outline-offset:4px}
#company-canvas .cb-chapters{display:flex;margin-left:auto;gap:4px}
#company-canvas .cb-chapters button{border:1px solid transparent;color:#aebfc3}
#company-canvas .cb-chapters button[aria-pressed=true]{border-color:#715158;color:#f3d0d5;background:#271b21}
#company-canvas .cb-chapters small{font-size:9px;margin-right:8px;color:#94a3aa}
#company-canvas .cb-time{font:10px/1.6 'IBM Plex Mono',monospace;color:#adbdc1;margin-left:10px}
#company-canvas .cb-progress{height:2px;background:#303c42;overflow:hidden}
#company-canvas .cb-progress i{display:block;height:100%;background:#de142a;transform-origin:left}
@media(hover:hover){#company-canvas button:hover{background:#253239;color:#fff}}
@media(max-width:699px){
 #company-canvas .cb-bar{padding:14px 14px;font-size:9px;flex-wrap:wrap;gap:8px}
 #company-canvas .cb-intent{padding:20px 16px;gap:12px;align-items:flex-start}
 #company-canvas .cb-intent p{font-size:16px;line-height:1.7}
 #company-canvas .cb-person{width:30px;height:30px;font-size:18px}
 #company-canvas .cb-intent-tag{display:none}
 #company-canvas .cb-art{aspect-ratio:360/850}
 #company-canvas .cb-node-title{font-size:17px}
 #company-canvas .cb-node-sub{font-size:14px}
 #company-canvas .cb-narration{padding:19px 16px;grid-template-columns:1fr;gap:13px;min-height:145px}
 #company-canvas .cb-narration>div{font-size:12px}
 #company-canvas .cb-state{display:inline;margin-left:6px}
 #company-canvas #cb-caption{font-size:16px}
 #company-canvas .cb-playbar{padding:14px;flex-wrap:wrap;gap:8px}
 #company-canvas .cb-time{margin-left:auto;order:2}
 #company-canvas .cb-chapters{order:3;width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
 #company-canvas .cb-chapters button{font-size:11px;padding:8px 3px}
 #company-canvas .cb-chapters small{display:block;margin:0 0 2px}
}
html[lang=th] #company-canvas :is(button,.cb-bar,.cb-intent p,.cb-intent small,#cb-caption,.cb-art text){font-family:'IBM Plex Sans Thai',sans-serif;letter-spacing:0}
html[lang=th] #company-canvas .cb-node-title{font-size:16px}
html[lang=th] #company-canvas .cb-node-sub{font-size:13px}
@media(prefers-reduced-motion:no-preference){#company-canvas button{transition:background-color 150ms,transform 150ms ease-out}#company-canvas button:active{transform:scale(.96)}}

/* R27: clear editing and carried-block cues, all animated by the seekable timeline. */
#company-canvas .cb-cursor-halo{fill:#de142a19;stroke:#ec5a6c;stroke-width:1}
#company-canvas .cb-grip{stroke:#f395a2;stroke-width:1.5;stroke-linecap:round}
#company-canvas .cb-node[data-lifted=true] .cb-node-bg{fill:#2e232a;stroke:#ee8090;filter:drop-shadow(0 8px 9px #0009)}
#company-canvas .cb-edit-field{fill:#de142a24;stroke:#e16d7d;stroke-width:.75}
#company-canvas .cb-edit-caret{stroke:#f6b2bc;stroke-width:1.5}
#company-canvas .cb-edit-stamp{font:10px 'IBM Plex Mono','IBM Plex Sans Thai',monospace;fill:#f2bfc5}
#company-canvas .cb-selection rect:first-child{stroke-width:1.6}
#company-canvas .cb-chapters button{padding-left:10px;padding-right:10px}
@media(max-width:699px){#company-canvas .cb-chapters button{padding-left:2px;padding-right:2px;font-size:10px}#company-canvas .cb-edit-stamp{font-size:10px}}
