/* Shared Element-inspired tokens for static and React learning experiments.
   Native controls keep their application contracts; Vue uses real Element Plus. */
:root{--accent:#205ad3;--accent-hover:#1847a8;--accent-soft:#edf4fd;--on-accent:#fff;--ink:#263445;--muted:#5e6c7c;--line:#dfe5ed;--paper:#fff;--surface:#f5f7fa;--ops-accent:#205ad3;--ops-accent-strong:#1847a8;--ops-accent-soft:#edf4fd;--demo-background:#f5f7fa}
body[data-demo]{background:var(--demo-background);color:var(--ink);font-family:"Segoe UI","Microsoft YaHei",sans-serif}body[data-demo] .wrap{max-width:1368px;width:calc(100% - 64px)}body[data-demo] .site-header{background:#fff;border-bottom:1px solid var(--line);backdrop-filter:none}body[data-demo] .header-inner{min-height:68px}body[data-demo] .brand{font-size:19px}body[data-demo] .nav-links{font-size:13px}body[data-demo] .reading-progress{height:2px}body[data-demo] h1{font-family:inherit!important;font-size:clamp(27px,3vw,36px)!important;line-height:1.35!important;letter-spacing:.01em!important;font-weight:650!important}body[data-demo] h2{font-family:inherit;font-weight:600}body[data-demo] .demo-note{font-size:13px;line-height:1.85;color:var(--muted)}body[data-demo] .workflow-kicker,body[data-demo] .low-code-kicker,body[data-demo] .ops-kicker{font-size:15px;line-height:1.8;margin-top:10px}body[data-demo] .demo-badge,body[data-demo] .ops-badge{border-radius:4px;background:#edf4fd;color:#225d9f;border-color:#c4d9f2;letter-spacing:.02em;text-transform:none}body[data-demo] .ops-opening,body[data-demo] .low-code-opening,body[data-demo] .workflow-opening{max-width:none;padding-top:8px;padding-bottom:22px}body[data-demo] .workflow-demo,body[data-demo] .low-code-demo,body[data-demo] .demo-index{padding-top:22px}.demo-wayfinding{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;line-height:1.6;color:var(--muted);padding:18px 0 16px}.demo-wayfinding a{color:var(--muted);text-decoration:none}.demo-wayfinding a:hover{color:var(--accent)}.demo-wayfinding [aria-current=page]{color:var(--ink);font-weight:500}
body[data-demo] :is(.workflow-board,.form-studio,.ops-workbench){background:#fff;border:1px solid var(--line);border-radius:7px;box-shadow:0 3px 10px #243c5b04;padding:22px}body[data-demo] :is(.panel,.ops-panel,.demo-panel){background:#fff;border:1px solid var(--line);border-radius:6px;padding:20px}body[data-demo] :is(.studio-toolbar,.ops-toolbar,.board-toolbar){align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line)}body[data-demo] :is(.studio-toolbar,.ops-toolbar,.board-toolbar) h2{font-size:22px}body[data-demo] .panel-heading,body[data-demo] .ops-panel-heading{padding-bottom:13px;border-bottom:1px solid var(--line)}body[data-demo] .metric-grid{gap:14px}body[data-demo] .metric{border:1px solid var(--line);border-radius:5px;padding:16px;background:#fff}body[data-demo] .metric>strong{font-size:27px;color:#263f5e}body[data-demo] :is(.demo-toolbar,.prep-toolbar){background:white;border:1px solid var(--line);border-radius:6px;padding:18px;gap:18px}body[data-demo] :is(.demo-toolbar,.prep-toolbar,.ops-field,.dynamic-field,.schema-row-main,.board-controls) label{color:#46576c;font-weight:500}
body[data-demo] :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea){border-color:#cbd5e1;border-radius:4px;color:var(--ink);font-family:inherit;background:#fff;transition:border-color .18s,box-shadow .18s}body[data-demo] :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select){min-height:38px}body[data-demo] :is(input,select,textarea):focus-visible{outline:2px solid #205ad3;outline-offset:2px}body[data-demo] :is(input,select,textarea)[aria-invalid=true]{border-color:#b43835}body[data-demo] input{accent-color:var(--accent)}body[data-demo] textarea{line-height:1.75}body[data-demo] :is(.quiet-button,.ops-button,.form-submit,.button,.text-button,.demo-actions button){border-radius:4px;font-weight:500;transition:background .18s,border-color .18s,box-shadow .18s}body[data-demo] :is(.quiet-button,.ops-button,.form-submit,.button,.demo-actions button){min-height:38px}body[data-demo] button:focus-visible,body[data-demo] a:focus-visible,body[data-demo] [tabindex="0"]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}body[data-demo] .ops-button.primary,body[data-demo] .form-submit{background:var(--accent);border-color:var(--accent);color:#fff}body[data-demo] .ops-button.primary:hover,body[data-demo] .form-submit:hover{background:var(--accent-hover)}
body[data-demo] table{width:100%;border-collapse:collapse;font-size:13px}body[data-demo] :is(th,td){border-bottom:1px solid #e6ebf2;padding:12px 14px;line-height:1.7}body[data-demo] th{background:#f5f7fa;color:#46576c;font-weight:600;text-align:left}body[data-demo] tbody tr:nth-child(even){background:#fafbfd}body[data-demo] tbody tr:hover{background:#edf4fd}body[data-demo] :is(.data-table-wrap,.table-wrap){border:1px solid var(--line);border-radius:5px;max-width:100%;overflow:auto;background:#fff}body[data-demo] .ops-machine-card{border-radius:4px;background:#f5f8fc}.ops-step-list li[aria-current=step]>span{box-shadow:0 0 0 3px #edf4fd}body[data-demo] :is(.schema-row,.workflow-card){border-radius:5px}body[data-demo] :is(.demo-entry){border:1px solid var(--line);border-radius:7px;background:#fff;overflow:hidden;box-shadow:none}body[data-demo] .demo-entry:hover{border-color:#adc8e9;box-shadow:0 5px 18px #23476d0a}body[data-demo] .demo-entry-body{padding:20px}body[data-demo] .demo-gallery{gap:22px}body[data-demo] .demo-entry h3{font-size:20px}body[data-demo] .demo-entry p{line-height:1.85}body[data-demo] .process-panel{margin-top:30px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:6px}body[data-demo] .process-preview,body[data-demo] .process-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;font-size:13px}body[data-demo] .process-preview{color:var(--muted)}body[data-demo] .process-primary{color:var(--accent);font-weight:600}
/* The two standalone research tools share the same page rhythm. */
body[data-demo=bleu-explorer] header,body[data-demo=bleu-explorer] main,body[data-demo=bleu-explorer] footer{max-width:1368px}body[data-demo=bleu-explorer] .lab{border-radius:7px;background:#fff;border:1px solid var(--line);box-shadow:none}body[data-demo=bleu-explorer] .result{background:#edf4fd;color:#234361}body[data-demo=bleu-explorer] .result .eyebrow{color:#335f92}body[data-demo=bleu-explorer] h1 em{font-style:normal;color:var(--accent)}body[data-demo=bleu-explorer] .editor{background:#fff}body[data-demo=bleu-explorer] :is(.breakdown,.method){background:#fff;padding:24px;border:1px solid var(--line);border-radius:6px;margin-top:24px}body[data-demo=reliability-gates] .top{padding-top:4px}body[data-demo=reliability-gates] .result{background:#f5f7fa}
body[data-demo] .section-number{color:#536579}
body[data-demo] :is(.prep-pipeline button span,.prep-metrics .metric span,#row-count,#export-scope,.prep-unit,#policy-note){color:#536579}
body[data-demo] .prep-pipeline button[aria-pressed=true] span{color:#245e9e}
body[data-demo] .prep-row-table td:first-child,body[data-demo] .prep-table td:first-child{color:#536579}
.demo-diagram{display:flex;min-height:235px;background:#eaf2fd;color:#255b99;flex-direction:column;justify-content:center;padding:34px;text-decoration:none;gap:18px}
.demo-diagram span{font:14px Consolas,monospace;letter-spacing:2px}.demo-diagram strong{font-size:24px;font-weight:600}.demo-diagram--gates{background:#eef3fa;color:#36506f}
/* Navigation adopts the navy / blue palette supplied by the portfolio owner. */
body[data-demo] .site-header{background:#11213b;border-color:#263956;color:#dce6f4}
body[data-demo] .site-header .brand,body[data-demo] .site-header .brand span{color:#fff}
body[data-demo] .site-header .nav-links a{color:#c9d8ed}
body[data-demo] .site-header .nav-links a:hover,body[data-demo] .site-header .nav-links a[aria-current]{color:#fff;border-bottom-color:#7da7ff}
body[data-demo] .site-header .language-controls{background:transparent;border-color:#415571}
body[data-demo] .site-header .language-controls button{background:transparent;border-color:#415571;color:#c9d8ed}
body[data-demo] .site-header .language-controls button[aria-pressed=true]{background:#205ad3;color:#fff}
body[data-demo] .site-header .menu-toggle{background:transparent;border-color:#415571}
body[data-demo] .site-header .menu-toggle img{filter:brightness(0) invert(1)}
body[data-demo] .site-header :focus-visible{outline-color:#9cbeff}
body[data-demo=bleu-explorer]>header{background:#11213b;color:#dce6f4;border-color:#263956}
@media(max-width:800px){body[data-demo] .site-header .nav-links{background:#11213b;border-color:#415571}}
/* Ant Design uses its own controlled widgets; keep native-control rules out. */
body[data-demo] .board-controls .ant-control{display:grid;gap:7px;min-width:140px;font-size:12px}
body[data-demo] .ant-select{min-width:140px;width:100%}
body[data-demo] .ant-select input{min-height:0;background:transparent;border:0;outline:0}
body[data-demo] .ant-select input.ant-select-input{min-height:0!important;background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}
body[data-demo] .workflow-card.ant-card{padding:0;box-shadow:0 2px 6px #243c5b05}
body[data-demo] .workflow-card .ant-card-body{padding:16px}
body[data-demo] .workflow-card .card-actions{gap:8px}
body[data-demo] .workflow-card .ant-btn{min-height:32px;padding:4px 10px;font-size:12px;font-weight:400}
body[data-demo] .workflow-card .ant-btn-primary:not(:disabled){background:var(--accent);color:#fff;border-color:var(--accent)}
body[data-demo] .workflow-card .ant-btn-default:not(:disabled){background:#fff;color:var(--ink);border-color:#cbd5e1}
body[data-demo] .workflow-column{background:#f5f7fa;border-radius:5px;padding:12px}
body[data-demo] .board-status.ant-alert{padding:12px 14px;border-radius:5px;font-size:13px;margin:18px 0}
body[data-demo] .column-count.ant-tag{min-width:24px;text-align:center;margin:0;border-radius:4px}
/* Preserve keyboard focus, readable tables and touch targets at small widths. */
@media(max-width:800px){body[data-demo] .wrap{width:calc(100% - 36px)}body[data-demo] .demo-layout{gap:18px}.demo-wayfinding{gap:8px;font-size:11px}body[data-demo] :is(.workflow-board,.form-studio,.ops-workbench){padding:16px}}
@media(max-width:520px){body[data-demo] .wrap{width:calc(100% - 28px)}body[data-demo] .header-inner{min-height:60px}body[data-demo] .brand{font-size:16px}body[data-demo] .demo-wayfinding{padding:10px 0 16px}body[data-demo] .demo-wayfinding>span{max-width:100%;font-size:11px}body[data-demo] h1{font-size:26px!important}body[data-demo] .workflow-title-row,body[data-demo] .low-code-title-row,body[data-demo] .ops-title-row{align-items:start;gap:12px}body[data-demo] .demo-badge,body[data-demo] .ops-badge{white-space:normal;max-width:105px;font-size:10px}body[data-demo] :is(.panel,.ops-panel,.demo-panel){padding:14px}body[data-demo] :is(.demo-toolbar,.prep-toolbar){padding:14px;gap:14px}body[data-demo] :is(.studio-toolbar,.ops-toolbar,.board-toolbar){gap:14px}body[data-demo] :is(.studio-toolbar,.ops-toolbar,.board-toolbar) h2{font-size:19px}body[data-demo] :is(.quiet-button,.ops-button,.form-submit,.button,.demo-actions button){min-height:42px}body[data-demo] :is(th,td){padding:10px;font-size:12px}body[data-demo] .metric{padding:12px}body[data-demo] .metric>strong{font-size:24px}body[data-demo] .metric-grid{gap:10px}body[data-demo=bleu-explorer] :is(.breakdown,.method){padding:16px}}
@media(prefers-reduced-motion:reduce){body[data-demo] *,body[data-demo] *:before,body[data-demo] *:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{body[data-demo]{background:#fff}.demo-wayfinding{display:none}body[data-demo] .wrap{width:100%}}