:root{color-scheme:dark;--bg:#0a0a09;--panel:rgba(14,13,11,.78);--line:rgba(212,175,55,.26);--gold:#d4af37;--gold2:#b8860b;--muted:#8e8370;--text:#eee0bf;--soft:#c1ad86}
  *{box-sizing:border-box}
  html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--text)}
  body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.13;background-image:radial-gradient(rgba(224,190,112,.26) .45px,transparent .65px);background-size:4px 4px;mix-blend-mode:screen}
  body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.48) 100%)}
  #stage{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%;outline:none;touch-action:none}
  .hud{position:fixed;inset:0;z-index:5;pointer-events:none}
  .interactive{pointer-events:auto}
  .topbar{position:absolute;top:25px;left:30px;right:30px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
  .brand{display:flex;align-items:center;gap:14px;max-width:430px}
  .brand-mark{width:36px;height:42px;border:1px solid rgba(212,175,55,.65);display:grid;place-items:center;color:var(--gold);font-family:serif;font-size:21px;position:relative}
  .brand-mark:before,.brand-mark:after{content:"";position:absolute;background:var(--gold2);opacity:.6}
  .brand-mark:before{width:1px;height:52px;left:4px;top:-6px}.brand-mark:after{height:1px;width:52px;left:-9px;bottom:4px}
  .brand-cn{font-family:"Songti SC","STSong",serif;font-size:19px;letter-spacing:3px;color:#f2dfb3;line-height:1.25}
  .brand-en{font-size:9px;letter-spacing:2.8px;color:#8c7954;text-transform:uppercase;margin-top:5px}
  .brand-sub{font-size:10px;letter-spacing:2px;color:#97876b;margin-top:5px}
  .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  button,.file-label{font:inherit;cursor:pointer;color:#e8d4a6;background:rgba(20,18,14,.72);border:1px solid rgba(212,175,55,.34);padding:10px 13px;font-size:11px;letter-spacing:1px;transition:background .2s,border-color .2s,color .2s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
  button:hover,.file-label:hover{background:rgba(84,62,20,.35);border-color:rgba(226,191,94,.8);color:#fff0c8}
  button:focus-visible,.file-label:focus-within{outline:1px solid var(--gold);outline-offset:3px}
  button.primary{background:rgba(156,112,26,.19);border-color:rgba(212,175,55,.58)}
  button.active{background:rgba(212,175,55,.16);border-color:var(--gold)}
  button:disabled{opacity:.45;cursor:wait}
  .icon{font-size:14px;line-height:1;color:var(--gold)}
  .left-panel{position:absolute;left:30px;top:126px;width:226px;padding:15px 15px 13px;border-left:1px solid var(--line);background:linear-gradient(90deg,rgba(11,10,9,.82),rgba(11,10,9,.35));backdrop-filter:blur(5px)}
  .eyebrow{font-size:9px;letter-spacing:2.1px;color:#8e7954;text-transform:uppercase;margin-bottom:7px}
  .panel-title{font-family:"Songti SC","STSong",serif;font-size:16px;letter-spacing:2px;color:#e8d7b4;margin-bottom:14px}
  .stage-row{display:flex;gap:7px;align-items:center;font-size:11px;color:#e0c88f;margin-bottom:14px}
  .live-dot{width:5px;height:5px;display:inline-block;border-radius:50%;background:#d4af37;box-shadow:0 0 7px rgba(212,175,55,.65)}
  .meter-head{display:flex;justify-content:space-between;color:#9b8a6a;font-size:10px;letter-spacing:.7px;margin:16px 0 7px}
  .meter{height:2px;background:rgba(183,145,60,.18);overflow:hidden}
  .meter-fill{height:100%;width:0;background:linear-gradient(90deg,#7b571a,#f0cf77);box-shadow:0 0 9px rgba(212,175,55,.65);transition:width .2s}
  .layers{margin-top:17px;display:grid;gap:5px}
  .layer{display:flex;align-items:center;gap:8px;width:100%;justify-content:flex-start;text-align:left;background:transparent;border:1px solid transparent;padding:7px 6px;color:#a79a80;font-size:10px;letter-spacing:1px}
  .layer:hover{background:rgba(140,100,24,.08)}.layer.off{opacity:.42}
  .layer-mark{width:13px;height:2px;display:inline-block;background:#b8860b;box-shadow:0 0 5px rgba(212,175,55,.25)}
  .layer[data-layer="1"] .layer-mark{background:#e0b65b}.layer[data-layer="2"] .layer-mark{background:#f1d79a}
  .layer small{margin-left:auto;color:#726348;font-size:9px}
  .divider{height:1px;background:linear-gradient(90deg,rgba(212,175,55,.3),transparent);margin:14px 0}
  .flow{display:grid;gap:8px}
  .flow-step{display:flex;align-items:center;gap:9px;color:#756b59;font-size:10px;letter-spacing:1px}
  .flow-step .num{font-family:Georgia,serif;font-size:10px;color:#625237;border-bottom:1px solid #594820;padding-bottom:2px;width:15px}
  .flow-step.current{color:#e3c987}.flow-step.current .num{color:#e3c987;border-color:var(--gold)}.flow-step.done{color:#b7a276}
  .right-panel{position:absolute;right:30px;top:130px;width:206px;text-align:right;background:linear-gradient(270deg,rgba(11,10,9,.78),rgba(11,10,9,.25));padding:13px 12px 14px;border-right:1px solid var(--line);backdrop-filter:blur(5px)}
  .right-title{font-family:"Songti SC","STSong",serif;font-size:14px;letter-spacing:2px;color:#e4d1a7;margin-bottom:12px}
  .gesture-row{display:flex;justify-content:flex-end;gap:11px;align-items:center;margin:11px 0;color:#a1947a;font-size:10px;letter-spacing:.5px}
  .gesture-row .g-icon{font-family:serif;color:#c3a04f;font-size:17px;width:22px;text-align:center}
  .gesture-row b{color:#d7c297;font-weight:400}
  .camera-box{position:absolute;right:30px;bottom:83px;width:176px;height:122px;border:1px solid rgba(212,175,55,.35);background:#0c0b09;display:none;overflow:hidden}
  .camera-box.show{display:block}
  .camera-box video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:.75}
  .camera-box:after{content:"HAND TRACKING / LIVE";position:absolute;bottom:0;left:0;right:0;padding:5px 7px;font-size:8px;letter-spacing:1.4px;color:#dfc582;background:linear-gradient(transparent,rgba(0,0,0,.9))}
  .cursor{position:fixed;z-index:4;width:30px;height:30px;margin:-15px 0 0 -15px;border:1px solid rgba(237,201,106,.75);border-radius:50%;pointer-events:none;display:none;box-shadow:0 0 14px rgba(212,175,55,.18)}
  .cursor:before,.cursor:after{content:"";position:absolute;background:rgba(238,201,106,.78)}.cursor:before{width:1px;height:42px;left:14px;top:-7px}.cursor:after{height:1px;width:42px;top:14px;left:-7px}
  .cursor.show{display:block}.cursor i{position:absolute;width:3px;height:3px;border-radius:50%;background:#f4d67d;left:13px;top:13px;box-shadow:0 0 8px #e6bb43}
  .bottom{position:absolute;bottom:23px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
  .hint{font-size:10px;line-height:1.8;letter-spacing:.7px;color:#85775e;max-width:680px}
  .hint em{font-style:normal;color:#c8ad6d}
  .bottom-right{font-size:9px;color:#645943;letter-spacing:1.7px;text-align:right;white-space:nowrap}
  .toast{position:absolute;left:50%;bottom:75px;transform:translate(-50%,12px);padding:10px 17px;border:1px solid rgba(212,175,55,.35);background:rgba(15,13,10,.91);color:#e3cb91;font-size:11px;letter-spacing:1px;opacity:0;transition:all .25s;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
  .toast.show{opacity:1;transform:translate(-50%,0)}
  .corner{position:absolute;width:20px;height:20px;opacity:.45;pointer-events:none}.corner:before,.corner:after{content:"";position:absolute;background:#a18039}.corner:before{width:20px;height:1px}.corner:after{width:1px;height:20px}.corner.tl{left:15px;top:15px}.corner.tr{right:15px;top:15px;transform:rotate(90deg)}.corner.bl{left:15px;bottom:15px;transform:rotate(-90deg)}.corner.br{right:15px;bottom:15px;transform:rotate(180deg)}
  input[type=file]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%)}
  #errorPanel{position:fixed;z-index:20;inset:auto 20px 20px 20px;padding:15px;background:#19130b;border:1px solid #8f6520;color:#ead29b;font-size:12px;display:none;line-height:1.6}
  @media(max-width:760px){.topbar{top:17px;left:17px;right:17px}.brand-cn{font-size:16px}.brand-sub{display:none}.brand-mark{width:30px;height:34px}.actions{gap:5px}.actions button,.file-label{font-size:10px;padding:8px}.left-panel{left:17px;top:98px;width:176px;padding:10px}.right-panel{right:17px;top:100px;width:168px;padding:10px}.panel-title{font-size:14px}.camera-box{right:17px;bottom:105px;width:125px;height:88px}.bottom{left:17px;right:17px;bottom:14px}.hint{max-width:80%;font-size:9px}.bottom-right{font-size:8px}.gesture-row{gap:5px;font-size:9px;margin:9px 0}.flow-step{font-size:9px}.layer{font-size:9px}.toast{bottom:90px;font-size:10px}}
  @media(max-width:520px){.brand-en{font-size:8px;letter-spacing:1.5px}.brand-cn{font-size:14px;letter-spacing:1px}.actions button span.label-text,.file-label span.label-text{display:none}.left-panel{top:91px;width:145px}.right-panel{top:91px;width:145px}.right-title{font-size:12px}.gesture-row .g-icon{font-size:14px;width:17px}.gesture-row span:last-child{max-width:102px}.camera-box{display:none!important}.bottom-right{display:none}.hint{max-width:100%}}