:root {
  --red: #FF6B1A;
  --blue: #176B87;
  --green: #79A614;
  --gold: #FFB020;
  --bg: #FFFBF3;
  --card: #FFFFFF;
  --ink: #2E1F16;
  --muted: #9C8A76;
  --line: #2E1F16;
  --shadow: rgba(46,31,22,.20);
  --dash: rgba(156,138,118,.55);
  --track: #FFF6EC;
  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  min-width:320px;min-height:100vh;color:var(--ink);background:var(--bg);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.7;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle,rgba(46,31,22,.07) 1px,transparent 1px);
  background-size:16px 16px;
}
button{font:inherit}
.back-to-lab{
  position:fixed;top:14px;left:14px;z-index:20;padding:8px 14px;background:var(--card);
  color:var(--muted);font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:.04em;text-decoration:none;
  box-shadow:2px 0 0 var(--line),-2px 0 0 var(--line),0 2px 0 var(--line),0 -2px 0 var(--line);
  transition:color .08s steps(2),transform .08s steps(2);
}
.back-to-lab:hover{color:var(--red);transform:translate(-2px,-2px)}
.demo-shell{width:min(1080px,calc(100% - 40px));margin:0 auto;padding:72px 0 36px}
.demo-head{display:grid;gap:12px;margin-bottom:24px}
.px-tag,.stage-caption,.connection-pill,.live-label,.tracking-badge,.demo-foot{font-family:"Press Start 2P",monospace}
.px-tag{font-size:9px;color:var(--green);letter-spacing:.08em}
h1{font-size:clamp(32px,5vw,62px);line-height:1.12;font-weight:900;letter-spacing:.02em}
.demo-head p{max-width:720px;color:var(--muted);font-size:14px}
.play-card{
  background:var(--card);padding:22px;display:grid;gap:16px;
  box-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),10px 10px 0 var(--shadow);
}
.toolbar,.control-row,.button-row,.connection-pill,.tracking-badge,.readout-grid .readout:last-child{display:flex;align-items:center}
.toolbar{gap:12px;flex-wrap:wrap}
#imageInput{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.upload-button,.button{
  border:0;cursor:pointer;color:#FFF6EC;background:var(--red);font-size:12px;font-weight:900;
  padding:10px 14px;box-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink);
  transition:transform .08s steps(2),box-shadow .08s steps(2),background .08s steps(2);
}
.upload-button:hover,.button:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),5px 5px 0 var(--shadow)}
.button:focus-visible,.upload-button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.button:disabled{cursor:not-allowed;opacity:.45}
.button.ghost{background:var(--ink)}
.upload-name{min-width:0;max-width:280px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.connection-pill{
  margin-left:auto;gap:8px;padding:8px 10px;color:var(--muted);font-size:8px;background:var(--track);
  box-shadow:2px 0 0 var(--dash),-2px 0 0 var(--dash),0 2px 0 var(--dash),0 -2px 0 var(--dash);
}
.status-dot{width:8px;height:8px;background:var(--dash);display:inline-block}
.connection-pill.active .status-dot,.tracking-badge.active .status-dot{background:var(--green);box-shadow:0 0 0 2px rgba(121,166,20,.25)}
.camera-frame{
  position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--ink);
  box-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink);
}
#cameraVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:.92}
#stageCanvas{position:absolute;z-index:1;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#handCanvas{position:absolute;z-index:2;inset:0;width:100%;height:100%;transform:scaleX(-1);pointer-events:none}
.camera-frame::after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(46,31,22,.08),transparent 40%,rgba(46,31,22,.48))}
.camera-placeholder{position:absolute;z-index:4;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;color:#D9C7B2;padding:20px}
.camera-placeholder strong{color:#FFF6EC;font-size:14px}
.camera-placeholder span:last-child{font-size:12px}
.placeholder-ring{display:grid;place-items:center;width:58px;height:58px;margin-bottom:6px;color:var(--gold);font-size:34px;box-shadow:2px 0 0 var(--gold),-2px 0 0 var(--gold),0 2px 0 var(--gold),0 -2px 0 var(--gold)}
.camera-placeholder.hidden{opacity:0;pointer-events:none}
.live-label{position:absolute;z-index:5;right:14px;top:14px;color:#FFF6EC;background:var(--red);font-size:8px;padding:7px 9px}
.live-label.active{background:var(--green)}
.tracking-badge{position:absolute;z-index:5;bottom:14px;left:14px;gap:7px;padding:7px 9px;color:#FFF6EC;background:rgba(46,31,22,.78);font-size:8px}
.stage-caption{position:absolute;z-index:5;left:14px;right:14px;bottom:14px;display:flex;justify-content:flex-end;gap:18px;color:#FFE9A8;font-size:8px;pointer-events:none}
.control-row{justify-content:space-between;gap:16px}
.control-row p{color:var(--muted);font-size:12px}
.button-row{gap:10px;flex-shrink:0}
.readout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.readout{background:var(--track);padding:12px;min-width:0;box-shadow:2px 0 0 var(--dash),-2px 0 0 var(--dash),0 2px 0 var(--dash),0 -2px 0 var(--dash)}
.readout span{display:block;color:var(--muted);font-family:"Press Start 2P",monospace;font-size:8px;margin-bottom:7px;letter-spacing:.04em}
.readout strong{font-size:13px;font-weight:900;white-space:nowrap}
.readout-grid .readout:last-child{gap:8px;align-content:center;flex-wrap:wrap}
.readout-grid .readout:last-child span{width:100%}
.color-swatch{display:inline-block;width:12px;height:12px;background:var(--red);box-shadow:1px 0 0 var(--ink),-1px 0 0 var(--ink),0 1px 0 var(--ink),0 -1px 0 var(--ink)}
.error-banner{min-height:0;margin-top:14px;color:var(--red);font-size:13px;font-weight:700}
.error-banner:not(:empty){padding:11px 13px;background:#FFE3CB;box-shadow:2px 0 0 var(--red),-2px 0 0 var(--red),0 2px 0 var(--red),0 -2px 0 var(--red)}
.demo-foot{margin-top:22px;color:var(--muted);font-size:8px;letter-spacing:.04em;text-align:center}
@media(max-width:800px){
  .demo-shell{width:min(100% - 28px,640px);padding-top:64px}
  .play-card{padding:16px}
  .toolbar{align-items:flex-start}
  .connection-pill{margin-left:0}
  .control-row{display:grid}
  .button-row{width:100%}
  .button{flex:1}
  .readout-grid{grid-template-columns:1fr}
}
@media(max-width:460px){
  h1{font-size:34px}
  .stage-caption{font-size:7px;gap:8px}
  .upload-name{max-width:170px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}