/* HumanEgo · Simulation — design tokens shared with the HumanEgo Data Gallery */
:root{
  --bg:#0a0c10; --card:#13161d; --card2:#171b23; --line:#242a35; --line2:#333c4a;
  --txt:#eef1f6; --mut:#98a2b3; --dim:#6b7586; --accent:#ff8c2b; --accent2:#ff6a00;
  --sb:#ff9a3c; --ok:#3ddc97; --bad:#ff5d6c; --cyan:#22d3ee; --violet:#c084fc;
  --grad:linear-gradient(90deg,#ffae52,#ff6a00);
  --radius:15px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; color:var(--txt); font-family:Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; background:var(--bg);
  background-image:radial-gradient(1100px 520px at 50% -8%, rgba(255,122,40,.13) 0%, rgba(10,12,16,0) 62%);}
a{color:inherit;}
button{font:inherit;}

/* ---------- hero ---------- */
.hero{max-width:1320px; margin:0 auto; padding:56px 28px 26px; text-align:center;}
.kicker{display:inline-block; font-size:13.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:#ff8c2b; padding:7px 18px; border:1px solid rgba(255,140,43,.45); border-radius:999px;
  background:rgba(255,140,43,.09); margin-bottom:22px;}
.logo{font-size:56px; font-weight:800; letter-spacing:-.03em; line-height:1; margin:0;}
.logo span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.logo small{font-size:.5em; font-weight:700; color:var(--mut); letter-spacing:-.01em; margin-left:.3em;}
.tag{color:var(--mut); margin:18px auto 0; font-size:18px; max-width:860px; line-height:1.5;}
.tag b{color:var(--txt); font-weight:600;}
.links{display:flex; gap:11px; justify-content:center; flex-wrap:wrap; margin:26px 0 6px;}
.links a{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; font-size:14px; font-weight:500;
  color:var(--txt); text-decoration:none; border:1px solid var(--line2); border-radius:999px;
  background:rgba(255,255,255,.03); transition:.18s;}
.links a:hover{border-color:var(--accent); background:rgba(255,140,43,.13); transform:translateY(-1px);}
.links svg{width:15px; height:15px;}
.stats{display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-top:20px;}
.chip{font-size:13px; color:var(--mut); padding:6px 13px; border:1px solid var(--line); border-radius:999px;
  font-variant-numeric:tabular-nums;}
.chip b{color:var(--txt); font-weight:600;}

/* ---------- sticky control bar ---------- */
.bar{position:sticky; top:0; z-index:30; margin-top:10px;
  background:rgba(10,12,16,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.bar-in{max-width:1320px; margin:0 auto; padding:11px 28px; display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.grp{display:flex; gap:7px; align-items:center; flex-wrap:wrap;}
.grp-l{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-right:3px;}
.pill{padding:7px 14px; border:1px solid var(--line2); border-radius:999px; background:transparent; color:var(--mut);
  font-size:13px; font-weight:500; cursor:pointer; transition:.16s; white-space:nowrap;}
.pill:hover{color:var(--txt); border-color:var(--accent);}
.pill.on{background:var(--grad); border-color:transparent; color:#0a0c10; font-weight:600;}
.pill:disabled{opacity:.35; cursor:not-allowed;}
.pill:disabled:hover{border-color:var(--line2); color:var(--mut);}
.bar .spacer{flex:1;}
.count{color:var(--mut); font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums;}

/* ---------- layout ---------- */
main{max-width:1320px; margin:0 auto; padding:22px 28px 70px;}
.stage{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.card-h{display:flex; align-items:center; gap:10px; padding:12px 15px; border-bottom:1px solid var(--line);}
.card-h h3{margin:0; font-size:13px; font-weight:700; letter-spacing:.02em;}
.card-h .meta{margin-left:auto;}
.meta{color:var(--mut); font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap;}

/* ---------- 3D viewport ---------- */
.viewport{position:relative; aspect-ratio:16/9; background:#b9b8b4; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line); box-shadow:0 22px 60px rgba(0,0,0,.45);}
.viewport canvas{display:block; width:100%; height:100%; outline:none;}
.vp-loading{position:absolute; inset:0; display:grid; place-items:center; background:#0d1015; z-index:6;
  transition:opacity .5s ease;}
.vp-loading.hide{opacity:0; pointer-events:none;}
.spinner{width:42px; height:42px; border-radius:50%; border:3px solid rgba(255,140,43,.18); border-top-color:var(--accent);
  animation:spin 0.9s linear infinite; margin:0 auto 14px;}
@keyframes spin{to{transform:rotate(360deg)}}
.vp-loading p{color:var(--mut); font-size:13px; margin:0; text-align:center;}

.hud{position:absolute; pointer-events:none; z-index:4;}
.hud-tl{left:14px; top:14px; display:flex; flex-direction:column; gap:7px; align-items:flex-start;}
.hud-chip{pointer-events:auto; display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  color:#eef1f6; padding:6px 11px; border-radius:999px; background:rgba(10,12,16,.62);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08);
  font-variant-numeric:tabular-nums;}
.hud-chip .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent);}
.arm-state{display:flex; gap:6px;}
.arm-badge{font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px; background:rgba(10,12,16,.62);
  backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08); color:#cfd5df; transition:.25s;}
.arm-badge b{color:#fff; font-weight:700; margin-right:4px;}
.arm-badge.grasp{border-color:rgba(192,132,252,.6); box-shadow:0 0 14px rgba(192,132,252,.25);}
.arm-badge.done{border-color:rgba(61,220,151,.6);}
.arm-badge.fail{border-color:rgba(255,93,108,.6);}

.hud-tr{right:14px; top:14px; width:31%; max-width:330px; min-width:200px; pointer-events:auto;}
.pip{border-radius:11px; overflow:hidden; background:#05070a; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.45); transition:opacity .3s;}
.pip video{display:block; width:100%; aspect-ratio:8/3; object-fit:cover; background:#05070a;}
.pip.single video{aspect-ratio:4/3;}
.pip-cap{display:flex; justify-content:space-between; font-size:10.5px; font-weight:600; color:#cfd5df;
  padding:5px 9px; background:rgba(10,12,16,.75); letter-spacing:.02em;}
.pip-cap span{color:var(--mut); font-weight:500;}

.hud-br{right:14px; bottom:72px; display:flex; gap:6px; pointer-events:auto;}
.icon-btn{width:34px; height:34px; display:grid; place-items:center; border-radius:10px; cursor:pointer;
  background:rgba(10,12,16,.6); border:1px solid rgba(255,255,255,.1); color:#dfe4ec;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:.16s; font-size:11px; font-weight:700;}
.icon-btn:hover{border-color:var(--accent); color:#fff;}
.icon-btn.on{background:var(--grad); color:#0a0c10; border-color:transparent;}
.icon-btn svg{width:16px; height:16px;}

/* timeline */
.timeline{position:absolute; left:0; right:0; bottom:0; z-index:5; padding:14px 14px 12px;
  background:linear-gradient(0deg, rgba(8,10,14,.82) 0%, rgba(8,10,14,.55) 60%, rgba(8,10,14,0) 100%);
  display:flex; align-items:center; gap:12px;}
.play-btn{width:40px; height:40px; flex:none; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center;
  background:var(--grad); box-shadow:0 6px 18px rgba(255,106,0,.35); transition:transform .15s;}
.play-btn:hover{transform:scale(1.06);}
.play-btn svg{width:16px; height:16px; fill:#0a0c10;}
.track{position:relative; flex:1; height:30px;}
.track canvas{position:absolute; inset:0; width:100%; height:100%;}
.track input{position:absolute; inset:0; width:100%; margin:0; opacity:0; cursor:pointer;}
.tlabel{color:#e9edf3; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; min-width:92px; text-align:right;}
.speed{display:flex; gap:4px;}
.speed button{font-size:11px; font-weight:700; color:#aeb6c3; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:7px; padding:4px 7px; cursor:pointer;}
.speed button.on{color:#0a0c10; background:#ffae52; border-color:transparent;}

/* ---------- side panel ---------- */
.side{display:flex; flex-direction:column; gap:18px;}
.minimap{display:block; width:100%; height:auto; background:#0c0f14; cursor:crosshair; touch-action:none;}
.mm-help{font-size:11.5px; color:var(--mut); padding:10px 15px 13px; line-height:1.45; border-top:1px solid var(--line);}
.mm-help b{color:var(--txt);}
.row-btns{display:flex; gap:8px; padding:0 15px 14px;}
.btn{flex:1; display:inline-flex; justify-content:center; align-items:center; gap:7px; padding:9px 12px; font-size:13px;
  font-weight:600; color:var(--txt); border:1px solid var(--line2); border-radius:10px; background:rgba(255,255,255,.03);
  cursor:pointer; transition:.16s;}
.btn:hover{border-color:var(--accent); background:rgba(255,140,43,.12);}
.btn.primary{background:var(--grad); color:#0a0c10; border-color:transparent;}
.btn svg{width:14px; height:14px;}

.result{padding:12px 15px 14px; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.res-arm{background:var(--card2); border:1px solid var(--line); border-radius:11px; padding:10px 11px;}
.res-arm .k{font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);}
.res-arm .v{font-size:15px; font-weight:700; margin-top:4px; display:flex; align-items:center; gap:6px;}
.res-arm .v.ok{color:var(--ok);} .res-arm .v.bad{color:var(--bad);}
.res-arm .s{font-size:11.5px; color:var(--mut); margin-top:3px; font-variant-numeric:tabular-nums;}
.res-sum{grid-column:1/-1; font-size:12px; color:var(--mut); display:flex; justify-content:space-between;}
.res-sum b{color:var(--txt);}

.legend{display:flex; flex-wrap:wrap; gap:10px 14px; padding:11px 15px 13px; font-size:11.5px; color:var(--mut);}
.legend i{display:inline-block; width:18px; height:3px; border-radius:2px; vertical-align:middle; margin-right:6px;}

/* ---------- sections ---------- */
.section{margin-top:56px;}
.sec-h{display:flex; align-items:baseline; gap:14px; margin-bottom:16px;}
.sec-h h2{font-size:26px; font-weight:800; letter-spacing:-.02em; margin:0;}
.sec-h p{color:var(--mut); margin:0; font-size:14px;}
.pipe{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 16px 18px; position:relative;}
.step .n{font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--accent);}
.step h4{margin:7px 0 7px; font-size:15px;}
.step p{margin:0; font-size:13px; color:var(--mut); line-height:1.5;}
.step code{font-size:11.5px; color:#ffcf9e; background:rgba(255,140,43,.08); padding:1px 5px; border-radius:5px;}
table.res{width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums;}
table.res th, table.res td{padding:11px 14px; border-bottom:1px solid var(--line); text-align:left;}
table.res th{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); font-weight:700;}
table.res td .bar-s{display:inline-block; height:6px; border-radius:3px; background:var(--grad); vertical-align:middle; margin-right:8px;}
pre.code{margin:0; padding:16px 18px; font-size:12.5px; line-height:1.6; overflow:auto; color:#d7dde7;
  background:#0c0f14; border-top:1px solid var(--line);}
pre.code .c{color:var(--dim);}
.note{font-size:12.5px; color:var(--mut); line-height:1.55; padding:14px 16px;}
.note b{color:var(--txt);}

footer{max-width:1320px; margin:0 auto; padding:10px 28px 60px; color:var(--mut); font-size:12.5px; text-align:center;}
footer a{color:var(--accent); text-decoration:none;}

@media(max-width:1080px){ .stage{grid-template-columns:1fr;} .pipe{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){
  .logo{font-size:40px;} .hero{padding:36px 16px 18px;} .tag{font-size:16px;} main{padding:14px 12px 50px;}
  .bar{position:static;}
  .bar-in{padding:9px 12px; gap:12px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;}
  .bar-in::-webkit-scrollbar{display:none;}
  .grp{flex-wrap:nowrap;} .count{display:none;}
  .pipe{grid-template-columns:1fr;}
  .viewport{aspect-ratio:4/3;}
  .hud-tl{left:8px; top:8px;} .hud-chip{font-size:10.5px; padding:4px 8px;} .arm-badge{font-size:10px; padding:3px 7px;}
  .hud-tr{width:42%; min-width:0; right:8px; top:8px;} .pip-cap{font-size:9px; padding:3px 6px;} .pip-cap span{display:none;}
  .hud-br{right:8px; bottom:60px; gap:4px;} .icon-btn{width:28px; height:28px; font-size:9px; border-radius:8px;}
  .timeline{padding:10px 8px 8px; gap:8px;} .play-btn{width:34px; height:34px;}
  .tlabel{min-width:0; font-size:11px;} .speed{display:none;}
  .legend{font-size:10.5px; gap:6px 10px; padding:9px 4px;}
}

/* kiosk mode (?kiosk=1): only the 3D viewport, full window — used for recording teaser videos */
body.kiosk{background:#b9b8b4; overflow:hidden;}
body.kiosk .hero, body.kiosk .bar, body.kiosk .side, body.kiosk .legend, body.kiosk .section, body.kiosk footer{display:none !important;}
body.kiosk main{max-width:none; padding:0;}
body.kiosk .stage{display:block;}
body.kiosk .viewport{position:fixed; inset:0; aspect-ratio:auto; border:0; border-radius:0; box-shadow:none;}
body.kiosk.nohud .hud, body.kiosk.nohud .timeline{display:none !important;}