:root{
  --bg:#F5F2EA;--panel:#FFFDF8;--ink:#011535;--muted:#55657A;--line:#E2DCCD;
  --teal:#0F8F84;--teal-strong:#0A756C;--coral-strong:#C4472B;--teal-soft:#D6EEEA;--coral:#E2674A;--coral-soft:#FBE3DB;--amber:#C98A16;--amber-soft:#F7EBCF;
  --r:14px;
  font-family:"Noto Sans TC","PingFang TC","Heiti TC",-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink)}
body{display:flex;flex-direction:column;overflow:hidden;font-size:14px}
button{font:inherit;color:inherit;cursor:pointer}
header#top{display:flex;align-items:center;gap:16px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.brand{display:flex;flex-direction:column;line-height:1.25}
.brand b{font-size:17px;letter-spacing:.2px}
.brand span{font-size:12px;color:var(--muted)}
.modes{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px;margin-left:auto}
.modes button{border:0;background:transparent;padding:6px 14px;border-radius:999px}
.modes button.on{background:var(--ink);color:#fff}
.ghostbtn{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 12px}

#stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.95fr) 340px;gap:12px;padding:12px}
#scene3d{position:relative;border-radius:var(--r);overflow:hidden;background:linear-gradient(#EEF2EF,#E4EAE6);border:1px solid var(--line);min-height:0}
#c3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#camBar{position:absolute;left:10px;top:10px;display:flex;flex-wrap:wrap;gap:4px}
#camBar button{border:1px solid var(--line);background:rgba(255,253,248,.92);border-radius:999px;padding:4px 10px;font-size:12px}
#camBar button.on{background:var(--teal);border-color:var(--teal);color:#fff}
#hint3d{position:absolute;left:10px;bottom:10px;right:10px;font-size:12px;color:var(--muted);background:rgba(255,253,248,.85);padding:5px 10px;border-radius:10px;width:max-content;max-width:calc(100% - 20px)}
#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--line);padding:10px 16px;border-radius:12px}

#usPanel{display:flex;flex-direction:column;gap:10px;min-height:0}
#usWrap{position:relative;flex:1;min-height:0;border-radius:var(--r);overflow:hidden;background:#000;border:1px solid #1d2733}
#cus,#cusOverlay{position:absolute;inset:0;width:100%;height:100%;display:block}
#cusOverlay{pointer-events:none}
#readouts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#readouts>div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 8px;display:flex;flex-direction:column;line-height:1.15}
#readouts>div.wide{grid-column:1/-1;flex-direction:row;gap:10px;align-items:baseline}
#readouts span{font-size:11px;color:var(--muted)}
#readouts b{font-size:19px;font-variant-numeric:tabular-nums}
#readouts>div.wide b{font-size:14px;font-weight:600}
#readouts i{font-style:normal;font-size:11px;color:var(--muted)}

#side{overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:10px;padding-right:2px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.card h2{font-size:15px;margin:0}
.legend{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.st{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:4px}
.st.verified{background:var(--teal)}.st.single_source{background:var(--amber)}.st.pending{background:var(--coral)}
#presetGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#presetGrid button{position:relative;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:7px 4px 6px;font-size:12.5px;text-align:center;line-height:1.2}
#presetGrid button small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
#presetGrid button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
#presetGrid button.on small{color:#cfd8e6}
#presetGrid button .st{position:absolute;right:5px;top:5px;margin:0;width:7px;height:7px}
.badge{font-size:11px;padding:3px 8px;border-radius:999px;white-space:nowrap}
.badge.verified{background:var(--teal-soft);color:#075E57}.badge.single_source{background:var(--amber-soft);color:#7A5208}.badge.pending{background:var(--coral-soft);color:#9A3218}
.vibody{font-size:13px;line-height:1.55}
.vibody .en{color:var(--muted);font-size:12px;margin:-4px 0 6px}
.vibody dl{display:grid;grid-template-columns:72px 1fr;gap:3px 8px;margin:6px 0}
.vibody dt{color:var(--muted)}
.vibody dd{margin:0}
.vibody details{margin-top:6px}
.vibody summary{cursor:pointer;color:var(--teal);font-weight:600}
.vibody ul{margin:4px 0 0 18px;padding:0}
.vibody .warn{margin-top:8px;font-size:12px;background:var(--coral-soft);color:#7d2a14;border-radius:8px;padding:6px 8px}
.vibody .note{margin-top:8px;font-size:12px;color:var(--muted)}
.ctlgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;align-items:center}
.chk{display:flex;align-items:center;gap:6px;font-size:13px}
.chk input{accent-color:var(--teal);width:16px;height:16px}
.rng{grid-column:1/-1;display:grid;grid-template-columns:72px 1fr 52px;align-items:center;gap:8px;font-size:13px}
.rng input{accent-color:var(--teal);width:100%}
.rng output{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.toggle{grid-column:1/-1;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:7px}
.toggle.on{background:var(--teal-soft);border-color:#9fd3cc;color:#075E57}
.primary{border:0;background:var(--coral);color:#fff;border-radius:999px;padding:6px 14px;font-weight:600}
.practiceRow{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:start}
#targetThumb{width:120px;height:85px;border-radius:8px;background:#000}
.tname{font-weight:700;margin-bottom:4px}
.meter{display:grid;grid-template-columns:46px 1fr 54px;gap:6px;align-items:center;font-size:12px;margin:3px 0}
.meter .bar{height:7px;border-radius:9px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.meter .bar i{display:block;height:100%;width:0;background:var(--coral);transition:width .15s}
.meter .bar i.ok{background:var(--teal)}
.meter b{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.close{margin:6px 0 4px;font-size:13px}
#matchBanner{margin-top:8px;text-align:center;font-weight:700;color:#fff;background:var(--teal);border-radius:10px;padding:8px;animation:pop .5s ease}
@keyframes pop{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
table.keys{width:100%;border-collapse:collapse;font-size:12.5px}
table.keys th{text-align:left;font-weight:600;padding:3px 6px 3px 0;white-space:nowrap;color:var(--muted)}
table.keys td{padding:3px 0}
.fine{font-size:12px;color:var(--muted);line-height:1.5}
.credit{font-size:11px;color:var(--muted);line-height:1.5;margin:0 4px 8px}

/* 錄影模式：ui=0 */
body.noui header#top,body.noui #side,body.noui .ui{display:none!important}
body.noui #stage{grid-template-columns:1fr 1fr;padding:0;gap:0}
body.noui #scene3d,body.noui #usWrap{border-radius:0;border:0}
body.noui #usPanel{gap:0}
body.layout-us #scene3d{display:none}
body.layout-us #stage{grid-template-columns:1fr}
body.layout-3d #usPanel{display:none}
body.layout-3d #stage{grid-template-columns:1fr}

@media (max-width:1180px){
  #stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  #side{grid-column:1/-1;max-height:42vh}
}
@media (max-width:760px){
  body{overflow:auto;height:auto}
  html,body{height:auto}
  header#top{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .brand span{display:none}
  .modes{margin-left:0}
  #stage{display:flex;flex-direction:column;padding:8px;gap:8px}
  #usPanel{order:1}
  #usWrap{flex:none;height:44vh;min-height:250px}
  #scene3d{order:2;height:46vh;min-height:280px;flex:none}
  #side{order:3;max-height:none;overflow:visible}
  #readouts{grid-template-columns:repeat(4,1fr)}
  #readouts b{font-size:16px}
  #hint3d{font-size:11px}
  #presetGrid{grid-template-columns:repeat(4,1fr)}
}

/* 錄影模式不吃手機版面 */
body.noui,html:has(body.noui){height:100%!important;overflow:hidden!important}
body.noui #stage{display:grid!important;height:100vh;padding:0;gap:0}
body.noui #usPanel{height:100vh}
body.noui #usWrap{height:100%!important;min-height:0!important;flex:1}
body.noui #scene3d{height:100vh!important;min-height:0!important}

/* ---- v2：家族分頁、四格說明卡、教練語、導覽、精調、直式錄影 ---- */
.ghostbtn.small{padding:4px 10px;font-size:12px}
#familyTabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:6px}
#familyTabs button{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:6px 2px;font-size:12px;line-height:1.2}
#familyTabs button small{display:block;color:var(--muted);font-size:10.5px}
#familyTabs button.on{background:var(--teal);border-color:var(--teal);color:#fff}
#familyTabs button.on small{color:#e0f5f2}
.famline{font-size:12px;color:var(--muted);margin:0 2px 8px;line-height:1.45}
.cells{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.cells .cell{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:6px 8px;font-size:12.5px;line-height:1.45}
.cells .cell span{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.cells .cell.none{color:var(--muted)}
.tbd{display:inline-block;font-size:10.5px;background:var(--coral-soft);color:#9A3218;border-radius:6px;padding:0 5px;margin-left:4px;vertical-align:1px;cursor:help}
.sub{display:block;font-size:11px;color:var(--muted);margin-top:2px}
#readouts em{font-style:normal;font-size:11px;color:var(--coral);font-weight:600;min-height:13px}
#readouts em.ok{color:var(--teal)}
#stages{list-style:none;margin:4px 0 6px;padding:0;font-size:12.5px}
#stages li{display:flex;justify-content:space-between;gap:6px;padding:3px 6px;border-radius:7px;margin-bottom:2px;background:var(--bg)}
#stages li.ok{background:var(--teal-soft);color:#075E57}
#stages li.ok b::after{content:" ✓"}
#coach{margin-top:8px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
#coach>div{display:grid;grid-template-columns:62px 1fr;gap:8px;padding:6px 8px;font-size:13px;line-height:1.45}
#coach .do{background:var(--ink);color:#fff}
#coach .do span{color:#b9c6d8}
#coach .how{background:var(--panel)}
#coach span{font-size:11px;color:var(--muted);padding-top:2px}
#judgeBox{margin-top:6px}
#judgeBox .ok{color:var(--teal)}#judgeBox .no{color:var(--coral)}
#summary{margin-top:8px;font-size:12.5px}
#summary table{width:100%;border-collapse:collapse}
#summary th,#summary td{border-bottom:1px solid var(--line);padding:3px 4px;text-align:left}
.rwrap{position:relative;display:block}
.rwrap input{position:relative;z-index:1}
#depthBand{position:absolute;top:50%;height:8px;transform:translateY(-50%);background:rgba(15,143,132,.25);border-radius:4px;z-index:0}
.conv{margin-top:10px;border-top:1px solid var(--line);padding-top:8px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.convhead{width:100%;font-size:12px;color:var(--muted)}
.conv .fine{width:100%;margin:2px 0 0}
#clipChip{position:absolute;right:10px;top:10px;display:flex;align-items:center;gap:6px;background:rgba(255,253,248,.92);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px}
#clipChip:has(input:checked){background:var(--coral);color:#fff;border-color:var(--coral)}
#tour{position:fixed;inset:0;z-index:50}
#tourHole{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(1,21,53,.5);border:3px solid var(--coral);transition:all .25s}
#tourBubble{position:fixed;max-width:320px;background:var(--panel);border-radius:14px;padding:12px 14px;box-shadow:0 8px 30px rgba(0,0,0,.25);transition:all .25s}
#tourBubble h3{margin:2px 0 4px;font-size:15px}#tourBubble p{margin:0 0 10px;font-size:13px;line-height:1.55}
#tourStep{font-size:11px;color:var(--muted)}
.tb{display:flex;gap:6px;justify-content:flex-end}
/* 直式（1080x1920）：上半 3D、下半扇形 */
body.layout-portrait #stage{grid-template-columns:1fr!important;grid-template-rows:1fr 1fr}
body.layout-portrait.noui #scene3d,body.layout-portrait.noui #usPanel{height:50vh!important}
body.layout-portrait.noui #stage{height:100vh}
.cells .cell span.tbd{display:inline-block;margin:0 0 0 4px}

/* ---- v3：審查修正（對比、焦點、練習置頂、手機同屏、說明卡減重） ---- */
.primary{background:var(--coral-strong)}
#camBar button.on,#familyTabs button.on,#matchBanner{background:var(--teal-strong);border-color:var(--teal-strong)}
.vibody summary,.fine a{color:var(--teal-strong)}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--teal-strong);outline-offset:2px}
button:hover{filter:brightness(.97)}
.devonly{display:none!important}
body.dev .devonly{display:inline-flex!important}
#presetGrid button .st{display:none}
body.dev #presetGrid button .st{display:block}
body.practice #presetCard,body.practice #markerCard{display:none}
.pline{font-size:13px;font-weight:600;background:var(--ink);color:#fff;border-radius:8px;padding:5px 8px;margin-bottom:8px}
.cardhead h2 small{font-size:12px;color:var(--muted);font-weight:500;margin-left:6px}
.thumbfig{margin:0}.thumbfig figcaption{font-size:11px;color:var(--muted);text-align:center}
#targetThumb{width:150px;height:108px}
.practiceRow{grid-template-columns:150px 1fr}
#usWrap.flash{animation:flash .7s ease}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(10,117,108,.0)}40%{box-shadow:0 0 0 6px rgba(10,117,108,.9)}100%{box-shadow:0 0 0 0 rgba(10,117,108,0)}}
.vimain{display:grid;grid-template-columns:74px 1fr;gap:6px 8px;font-size:13.5px;line-height:1.55;margin:4px 0 8px}
.vimain dt{color:var(--muted);font-size:12.5px}.vimain dd{margin:0}
#viewInfo{border-left:4px solid var(--teal)}
#viName{font-size:18px}
.vibody details{border-top:1px solid var(--line);padding-top:6px}
.chk{min-height:36px}.chk input{width:18px;height:18px}
.build{font-size:10px;background:var(--amber-soft);color:#7A5208;border-radius:5px;padding:0 4px;margin-left:3px}
@media (prefers-reduced-motion:reduce){#matchBanner,#usWrap.flash{animation:none}#tourHole,#tourBubble{transition:none}}
@media (max-width:760px){
  #stage{gap:6px}
  #usWrap{height:34vh!important;min-height:200px}
  #scene3d{height:34vh!important;min-height:200px}
  #readouts{grid-template-columns:repeat(4,1fr)}
  #readouts>div.wide{display:none}
  #readouts b{font-size:15px}#readouts span{font-size:10.5px}
  body.practice #practicePanel{position:sticky;top:0;z-index:20;order:0;padding:8px}
  body.practice #practicePanel .practiceRow,body.practice #practicePanel #judgeBox{display:none}
  #stage>#practicePanel{order:0;margin:0}
  #camBar button{min-height:34px;padding:6px 10px}
  #hint3d{display:none}
  .ctlgrid{grid-template-columns:1fr}
  #presetGrid{grid-template-columns:repeat(3,1fr)}
  #presetGrid button small{display:none}
  input[type=range]{height:30px}
  #helpBtn{width:36px;padding:0}
}
#viCells{display:block}
@media (max-width:760px){#camBar{flex-wrap:nowrap;overflow-x:auto;right:96px;scrollbar-width:none}#camBar button{flex:none}#clipChip{top:10px;right:8px}}

.build{white-space:nowrap;display:inline-block;line-height:1.3}
#presetGrid button{white-space:normal}

/* batchC P2-8：Marker 方向對照表（文字全部取自 spec/views.json） */
#markerCard summary{cursor:pointer;list-style:none}
#markerCard summary::-webkit-details-marker{display:none}
#markerCard summary h2::after{content:" ▸";font-weight:400;color:#6b7a86}
#markerCard[open] summary h2::after{content:" ▾"}
.mtable{width:100%;border-collapse:collapse;font-size:12.5px;line-height:1.45;margin-top:6px}
.mtable th{text-align:left;font-weight:600;color:#33475E;padding:4px 6px;border-bottom:1px solid #e3ddd0;white-space:nowrap}
.mtable td{padding:5px 6px;border-bottom:1px solid #efe9de;vertical-align:top}
.mtable tr.fam td{background:#F5F2EA;font-weight:600;color:#075E57;padding-top:7px}
.mtable .tag{display:inline-block;font-size:11px;padding:0 5px;margin-left:4px;border-radius:6px;background:#FCEFD9;color:#8a5a14}
.mtable .tag.tbd{background:#FBE3DC;color:#a33a1f}
.mtable .devcol{display:none}
body.dev .mtable .devcol{display:table-cell;color:#5B7189;white-space:nowrap}
#markerBody{overflow-x:auto}
.mtable td:first-child{min-width:7.5em}
.mtable td:nth-child(2){min-width:8em}
.mtable td:nth-child(3){min-width:6em}

/* batchC：切面說明欄的「模型限制」提示 */
#viCells .limit{background:#FCF1E4;border-left:3px solid #C4472B;padding:6px 9px;margin:2px 0 8px;font-size:12.5px;line-height:1.55;color:#4a3426;border-radius:4px}
#viCells .limit b{color:#C4472B;margin-right:6px}
/* 批次0（P7）：?dev=1 逐段效能面板 */
.devperf{position:fixed;left:8px;bottom:8px;z-index:90;margin:0;padding:6px 8px;background:rgba(10,14,20,.82);color:#cfe9e4;font:11px/1.45 ui-monospace,Menlo,monospace;border-radius:6px;pointer-events:none;white-space:pre}

/* Pages 公開版：頁尾版權與「教學示意」（不疊在主畫面上，佔獨立一列） */
#siteFoot{flex:none;display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:center;padding:4px 12px 6px;font-size:11px;line-height:1.4;color:var(--muted);border-top:1px solid var(--line);background:var(--panel);text-align:center}
@media (max-width:760px){#siteFoot{padding:8px 12px 12px}}