.robot-experience { position:relative; min-height:100svh; overflow:hidden; background:radial-gradient(circle at 52% 45%,#253c38 0,#090d0d 61%); }
.robot-stage { position:absolute; inset:0; }
.robot-stage canvas { width:100%; height:100%; touch-action:none; }
.robot-fallback { position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(ellipse at 55% 54%,#1c342e,#080b0a 64%); color:#8d9992; font:800 10px/1 Consolas,monospace; letter-spacing:.2em; }
.robot-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(5,8,8,.92),rgba(5,8,8,.32) 42%,transparent 68%,rgba(5,8,8,.62)),linear-gradient(0deg,rgba(5,8,8,.78),transparent 34%,rgba(5,8,8,.18)); }
.robot-intro { position:absolute; z-index:3; top:124px; left:32px; width:min(505px,40vw); pointer-events:none; }
.robot-intro h1 { margin:14px 0 17px; font-size:clamp(42px,4.6vw,74px); line-height:.98; letter-spacing:-.07em; }
.robot-intro p { max-width:450px; margin:0; color:#afbbb4; font-size:14px; }
.robot-status { position:absolute; z-index:4; top:104px; right:28px; display:flex; align-items:center; gap:8px; color:#a6b0aa; font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.robot-status i { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 5px rgba(130,221,210,.1); }
.robot-toolbar { position:absolute; z-index:5; left:32px; bottom:112px; display:flex; gap:6px; padding:6px; border:1px solid var(--line); border-radius:999px; background:rgba(7,11,10,.62); backdrop-filter:blur(14px); }
.robot-toolbar button { min-height:36px; padding:8px 14px; border:0; border-radius:999px; background:transparent; color:#a9b5ae; cursor:pointer; font-size:11px; }
.robot-toolbar button.active { background:var(--lime); color:#10150d; font-weight:800; }
.robot-system-rail { position:absolute; z-index:5; left:32px; right:32px; bottom:26px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.robot-system-button { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:13px; padding:16px 18px 0; border:0; border-left:1px solid var(--line); background:transparent; color:#d7dfd9; cursor:pointer; text-align:left; }
.robot-system-button:first-child { border-left:0; padding-left:0; }
.robot-system-button b { color:var(--cyan); font:800 11px/1 Consolas,monospace; }
.robot-system-button span { display:block; font-size:12px; }
.robot-system-button small { display:block; margin-top:2px; color:#78847d; font-size:9px; letter-spacing:.1em; }
.robot-system-button.active span { color:var(--lime); }
.robot-guide { position:absolute; z-index:8; top:136px; right:28px; width:min(354px,calc(100vw - 56px)); border:1px solid rgba(255,255,255,.15); background:rgba(11,18,16,.8); box-shadow:0 30px 90px #0009; backdrop-filter:blur(22px); }
.robot-guide-head { display:flex; align-items:center; gap:10px; padding:14px; border-bottom:1px solid var(--line); }
.robot-guide-orb { width:35px; height:35px; display:grid; place-items:center; border:1px solid var(--cyan); border-radius:50%; color:var(--cyan); font:800 10px/1 Consolas,monospace; box-shadow:0 0 22px rgba(130,221,210,.12); }
.robot-guide-head strong { display:block; font-size:12px; }
.robot-guide-head small { display:block; margin-top:2px; color:#7f8d85; font-size:9px; }
.robot-guide-body { padding:16px; }
.robot-guide-message { min-height:108px; margin:0; padding:14px; border-left:2px solid var(--cyan); background:rgba(255,255,255,.035); color:#c8d1cb; font-size:12px; line-height:1.72; }
.robot-guide-actions { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:13px; }
.robot-guide-actions button,.robot-voice-toggle { min-height:38px; padding:9px 12px; border:1px solid var(--line); background:transparent; color:#c3ccc6; cursor:pointer; font-size:11px; }
.robot-guide-actions button:first-child { border-color:var(--lime); background:var(--lime); color:#11160d; font-weight:800; }
.robot-voice-toggle { display:flex; align-items:center; gap:8px; width:100%; margin-top:12px; border:0; padding:0; color:#7f8d85; min-height:auto; }
.robot-voice-toggle.active { color:var(--lime); }
.robot-focus-card { position:absolute; z-index:7; top:136px; left:28px; width:min(345px,calc(100vw - 56px)); padding:20px; border:1px solid var(--line); background:rgba(10,15,13,.88); box-shadow:0 28px 80px #000a; backdrop-filter:blur(20px); transform:translateX(calc(-100% - 40px)); opacity:0; visibility:hidden; transition:transform .35s,opacity .25s; }
.robot-focus-card.open { transform:translateX(0); opacity:1; visibility:visible; }
.robot-focus-close { position:absolute; top:10px; right:10px; width:32px; height:32px; border:1px solid var(--line); border-radius:50%; background:#0d1210; color:var(--muted); cursor:pointer; }
.robot-focus-card b { color:var(--cyan); font-size:10px; letter-spacing:.16em; }
.robot-focus-card h2 { margin:34px 0 10px; max-width:260px; font-size:31px; line-height:1; letter-spacing:-.05em; }
.robot-focus-card p { margin:0; color:var(--muted); font-size:13px; }
.robot-drag-hint { position:absolute; z-index:3; right:30px; bottom:80px; color:#708078; font-size:9px; letter-spacing:.12em; }
.robot-cap-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.robot-cap-grid article { min-height:320px; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.robot-cap-grid b { color:var(--cyan); font-size:11px; }
.robot-cap-grid h3 { margin:95px 0 13px; font-size:25px; line-height:1.05; letter-spacing:-.045em; }
.robot-cap-grid p { color:var(--muted); font-size:13px; }
@media(max-width:1180px){.robot-guide{top:auto;bottom:105px}.robot-system-rail{grid-template-columns:repeat(2,1fr);bottom:18px}.robot-system-button:nth-child(n+3){display:none}.robot-toolbar{bottom:103px}.robot-drag-hint{display:none}.robot-cap-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.robot-experience{min-height:980px}.robot-intro{left:16px;right:16px;top:104px;width:auto}.robot-intro h1{font-size:45px}.robot-intro p{max-width:90%}.robot-status{top:84px;right:16px}.robot-stage{top:210px;height:520px}.robot-shade{background:linear-gradient(180deg,rgba(5,8,8,.87),transparent 55%,rgba(5,8,8,.82))}.robot-guide{left:16px;right:16px;bottom:116px;width:auto}.robot-toolbar{left:16px;bottom:640px}.robot-system-rail{left:16px;right:16px;bottom:22px}.robot-focus-card{top:190px;left:16px;width:calc(100% - 32px)}.robot-cap-grid{grid-template-columns:1fr}.robot-cap-grid article{min-height:230px}.robot-cap-grid h3{margin-top:55px}}

/* The robot is the hero object; the copy stays in a protected left column. */
.robot-intro { left: 32px; top: 132px; width: min(540px, 43vw); }
.robot-intro h1 {
  max-width: 530px;
  margin: 14px 0 17px;
  font-size: clamp(48px, 4.25vw, 64px);
  line-height: 1.02;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.robot-intro p { max-width: 410px; line-height: 1.6; }
.robot-shade { background: linear-gradient(90deg, rgba(5,8,8,.94), rgba(5,8,8,.48) 31%, rgba(5,8,8,.04) 58%, rgba(5,8,8,.58)), linear-gradient(0deg, rgba(5,8,8,.78), transparent 38%, rgba(5,8,8,.12)); }

@media(max-width:1050px) and (min-width:651px){
  .robot-intro { width: min(500px, 48vw); }
  .robot-intro h1 { font-size: clamp(45px, 5vw, 58px); }
}
@media(max-width:650px){
  .robot-experience { min-height: 920px; }
  .robot-intro { left: 16px; right: 16px; top: 108px; width: auto; }
  .robot-intro h1 { max-width: 340px; font-size: clamp(36px, 10.2vw, 42px); line-height: 1.05; }
  .robot-intro p { max-width: 320px; font-size: 13px; line-height: 1.55; }
  .robot-stage { top: 250px; height: 500px; }
  .robot-shade { background: linear-gradient(180deg, rgba(5,8,8,.9) 0%, rgba(5,8,8,.26) 35%, transparent 60%, rgba(5,8,8,.86) 100%); }
  .robot-toolbar { left: 16px; top: 328px; bottom: auto; }
}