/* Physical AI demos, themed for the GSI blog. Scoped under .pai-demos so
   nothing here leaks into the surrounding article; the palette maps the
   demo's own variable names onto the blog's black / white / pink tokens. */
.pai-demos{
  --page-bg:#0a0a0a;
  --bg-primary:#111; --bg-secondary:#181818; --bg-success:rgba(34,197,94,0.14); --bg-info:rgba(241,89,178,0.14);
  --text-primary:rgba(255,255,255,0.92); --text-secondary:rgba(255,255,255,0.58); --text-tertiary:rgba(255,255,255,0.38);
  --text-success:#22c55e; --text-danger:#f47171; --text-info:var(--pink);
  --border-tertiary:rgba(255,255,255,0.08); --border-secondary:rgba(255,255,255,0.18); --border-info:rgba(241,89,178,0.55);
  --radius-md:8px; --radius-lg:12px;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:var(--mono);
  --track:#2a2a2a; --thumb:var(--pink);
  font-family:var(--font-sans); color:var(--text-primary); line-height:1.6; font-size:15px;
}
.pai-demos *{box-sizing:border-box;}
.pai-demos button, .pai-demos input{font-family:inherit;}

.pai-demos .demo-box{border:1px solid var(--border-tertiary); border-radius:var(--radius-lg);
  background:var(--page-bg); padding:18px; margin:0 0 14px;}
.pai-demos .demo-head{margin:0 0 16px; padding-bottom:12px;
  border-bottom:1px solid var(--border-tertiary);}
.pai-demos .demo-head h3{font-size:16px; font-weight:700; margin:0 0 4px; color:#fff; letter-spacing:-0.01em; line-height:1.3;}
.pai-demos .demo-head p{font-size:13px; line-height:1.5; margin:0; color:var(--text-secondary);}
.pai-demos .demo-box > .toggles:first-child, .pai-demos .demo-box > .sr-grid:first-child,
.pai-demos .demo-box > .demo-head + .toggles, .pai-demos .demo-box > .demo-head + .sr-grid{margin-top:0;}
.pai-demos .demo-box .panel{margin-bottom:0;}
.pai-demos .caption{font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; color:var(--text-tertiary); margin:12px 0 0; display:flex; align-items:center; gap:6px; line-height:1.5;}
.pai-demos .caption svg{width:13px; height:13px; flex:none; opacity:0.8;}

.pai-demos .toggles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:20px;}
.pai-demos .sensor-btn{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:var(--radius-md);
  border:1px solid var(--border-secondary); background:var(--bg-secondary); color:var(--text-primary);
  cursor:pointer; font-size:14px; text-align:left; transition:opacity .15s, background .15s;}
.pai-demos .sensor-btn svg{width:18px; height:18px; flex:none;}
.pai-demos .sensor-btn .lbl-txt{flex:1;}
.pai-demos .sensor-btn .pm{display:flex; align-items:center; justify-content:center; flex:none; width:18px; height:18px; border-radius:4px; border:1.5px solid currentColor;}
.pai-demos .sensor-btn .pm svg{width:12px; height:12px;}

.pai-demos .breadth{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:20px;}
.pai-demos .breadth .lbl{font-size:13px; color:var(--text-secondary); margin-right:4px;}
.pai-demos .breadth-btn{padding:7px 12px; border-radius:var(--radius-md); border:1px solid var(--border-secondary);
  background:transparent; color:var(--text-primary); cursor:pointer; font-size:13px; transition:background .15s;}

.pai-demos .panel{display:grid; grid-template-columns:1fr; gap:16px; align-items:start;}
@media(min-width:560px){ .pai-demos .panel{grid-template-columns:1.15fr 1fr;} }
@media(min-width:560px){ .pai-demos .panel.panel-wide{grid-template-columns:1.7fr 1fr;} }
.pai-demos .panel .toggles{grid-template-columns:repeat(2,1fr); margin-bottom:16px;}
@media(max-width:559px){ .pai-demos .panel .toggles{grid-template-columns:1fr;} }
/* position:relative is load-bearing: the .bug below is absolute. */
.pai-demos .scene-wrap{background:var(--bg-secondary); border-radius:var(--radius-lg); padding:8px; position:relative;}
.pai-demos .scene-wrap svg{width:100%; height:auto; display:block;}
.pai-demos .scene-wrap .bug{position:absolute; left:16px; top:14px; z-index:3;
  width:19%; min-width:56px; max-width:112px; height:auto;
  opacity:0.45; pointer-events:none; user-select:none; margin:0; border-radius:0;}

.pai-demos .group-label{font-size:13px; font-weight:600; color:var(--text-secondary); margin:16px 0 8px;}
.pai-demos .conf-row{display:flex; align-items:baseline; gap:10px; margin-bottom:6px;}
.pai-demos .conf-row .lbl{font-size:13px; color:var(--text-secondary);}
.pai-demos .conf-num{font-size:26px; font-weight:700; font-family:var(--font-mono); color:#fff;}
.pai-demos .track{height:8px; background:var(--bg-secondary); border-radius:var(--radius-md); overflow:hidden; margin-bottom:12px;}
.pai-demos .fill{height:100%; width:90%; background:#22c55e; border-radius:var(--radius-md); transition:width .25s, background .25s;}
.pai-demos .status{font-size:14px; line-height:1.6; color:var(--text-secondary); margin:0;}
.pai-demos .stats{margin:10px 0 14px; font-size:13px;}
.pai-demos .stats div{display:flex; align-items:baseline; gap:10px; padding:4px 0; border-bottom:1px solid var(--border-tertiary);}
.pai-demos .stats div span:first-child{flex:1; color:var(--text-secondary);}
.pai-demos .stats .n{font-family:var(--font-mono); min-width:30px; text-align:right;}
.pai-demos .stats .p{font-family:var(--font-mono); min-width:46px; text-align:right; color:var(--text-tertiary);}
.pai-demos .stats.big{font-size:15px;}
.pai-demos .stats.big div{padding:6px 0;}
.pai-demos .stats.big .n{min-width:34px;}
.pai-demos .stats div.ok span{color:var(--text-success);}
.pai-demos .reset-btn{margin-left:auto; padding:3px 10px; font-size:12px; color:var(--text-secondary); background:transparent; border:1px solid var(--border-secondary); border-radius:var(--radius-md); cursor:pointer;}
.pai-demos .reset-btn:hover{background:var(--bg-secondary);}

.pai-demos .verdict{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; margin-bottom:14px; color:#fff;}
.pai-demos .verdict svg{width:20px; height:20px; flex:none;}
.pai-demos .why{font-size:14px; line-height:1.6; color:var(--text-secondary); margin:0 0 18px;}
.pai-demos .slider{margin-bottom:14px;}
.pai-demos .slider .head{display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px;}
.pai-demos .slider .val{color:var(--text-secondary); font-family:var(--font-mono);}
.pai-demos .track-wrap{position:relative;}
.pai-demos .risk{font-size:12px; font-family:var(--font-mono); margin:0 0 4px;}
.pai-demos input[type=range]{position:relative; width:100%; -webkit-appearance:none; appearance:none; background:transparent; height:20px; margin:0; cursor:pointer;}
.pai-demos input[type=range]::-webkit-slider-runnable-track{height:8px; background:var(--track-bg, var(--track)); border-radius:4px;}
.pai-demos input[type=range]::-moz-range-track{height:8px; background:var(--track-bg, var(--track)); border-radius:4px;}
.pai-demos input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--thumb); border:2px solid #0a0a0a; margin-top:-5px;}
.pai-demos input[type=range]::-moz-range-thumb{width:18px; height:18px; border:none; border-radius:50%; background:var(--thumb);}
.pai-demos .note{font-size:12px; color:var(--text-tertiary); margin:8px 0 0; line-height:1.5;}
.pai-demos .deploy-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:18px;}
.pai-demos .deploy-btn{padding:9px 16px; border-radius:var(--radius-md); border:1px solid var(--border-secondary); background:var(--bg-secondary); color:var(--text-primary); cursor:pointer; font-size:14px; transition:background .15s, opacity .15s;}
.pai-demos .deploy-btn:hover:not(:disabled){background:var(--bg-primary);}
.pai-demos .deploy-btn:disabled{opacity:0.4; cursor:default;}
.pai-demos .deploy-btn.primary{background:var(--pink); border-color:var(--pink); color:#fff; font-weight:600;}
.pai-demos .deploy-btn.primary:hover:not(:disabled){background:#d94a9e;}
.pai-demos .gen-readout{font-family:var(--font-mono); font-size:13px; color:var(--text-secondary); flex:1 1 100%; margin-top:4px;}
.pai-demos .splitpanel{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
@media(max-width:540px){ .pai-demos .splitpanel{grid-template-columns:1fr;} }
.pai-demos .world{position:relative; border-radius:var(--radius-lg); overflow:hidden;}
.pai-demos .world-tag{position:absolute; top:6px; right:7px; z-index:2; font-family:var(--font-mono); font-size:9px; letter-spacing:0.06em; text-transform:uppercase; padding:2px 6px; border-radius:4px; background:rgba(0,0,0,0.45); color:#fff;}
.pai-demos .sim-wrap{background:radial-gradient(circle at 50% 40%, #14365e, #0a1f38); padding:5px;}
.pai-demos .real-wrap{background:linear-gradient(#222, #161616); padding:5px;}
.pai-demos .sim-wrap svg, .pai-demos .real-wrap svg{width:100%; height:auto; display:block;}
.pai-demos .meter{display:flex; justify-content:space-between; align-items:baseline; padding:5px 7px 0; font-size:11px; color:var(--text-secondary);}
.pai-demos .meter-val{font-family:var(--font-mono); font-size:15px; color:var(--text-primary);}
.pai-demos .sr-grid{display:grid; grid-template-columns:1fr 200px; gap:16px; align-items:start;}
@media(max-width:540px){ .pai-demos .sr-grid{grid-template-columns:1fr;} }
.pai-demos .sr-side{padding-top:2px;}
.pai-demos .sr-side .breadth{display:block; margin-bottom:10px;}
.pai-demos .sr-side .why{font-size:13px; line-height:1.55;}
.pai-demos .imit-wrap svg{width:100%; height:auto; display:block; cursor:grab; touch-action:none;}
.pai-demos .imit-wrap svg.grabbing{cursor:grabbing;}

/* Section eyebrows ("Demo 01 · Perception · Sensor Fusion") reuse the site's
   mono pink label and sit tight against their heading. */
.article-prose .section-label{margin-top:3em; margin-bottom:0;}
.article-prose .section-label + h2{margin-top:0.35em;}