/* ============================================================================
   DepthSnap — 唯一样式源
   一套 token 管全站；浅色默认，深色只覆盖颜色。
   字号 6 档 / 圆角 3 档 / 文字色 3 类。零 !important。
   ========================================================================== */

/* ---------- 1. token ---------- */
:root{
  /* 色：浅色（默认）。文字对纸底实测 15.35 / 7.58 / 5.29 */
  --bg:#F2EEE6; --panel:#FBFAF6; --panel2:#F7F4EE;
  --line:rgba(23,24,26,.16); --line2:rgba(23,24,26,.28);
  --text:#17181A; --text2:#4F4A43; --text3:#69655C;
  --accent:#A25611; --accent-ink:#FFFFFF; --accent-text:#7A3F0C;   /* 文字 4.68 / 白字 5.42；accent-text=小号文字用，白底 8.26:1 */
  --accent-soft:rgba(162,86,17,.10);
  --input-bg:#FFFFFF; --topbar:rgba(242,238,230,.92);
  --track:rgba(23,24,26,.16); --track-mid:rgba(23,24,26,.34);
  --stage-bg:#201E1B; --stage-ink:#F4F1EB; --stage-2:#BDB7AE;
  --ok:#3D7A4E; --err:#A33326;

  /* 字号：6 档 */
  --fs-1:40px; --fs-2:28px; --fs-3:20px; --fs-4:17px; --fs-5:15px; --fs-6:13px;
  /* 间距：8 的倍数 */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px;
  /* 圆角：3 档 */
  --r-card:10px; --r-ctl:6px; --r-pill:999px;
  /* 版心 */
  --w-col:720px; --sbs:520px;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0F0D0C; --panel:#171412; --panel2:#1C1815;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --text:#EDE8E3; --text2:#ABA29B; --text3:#8C847D;
  --accent:#FFB067; --accent-ink:#1A120A; --accent-text:#FFB067;
  --accent-soft:rgba(255,176,103,.14);
  --input-bg:#0B0908; --topbar:rgba(15,13,12,.88);
  --track:rgba(255,255,255,.13); --track-mid:rgba(255,255,255,.28);
  --stage-bg:#141312; --stage-ink:#EDE8E3; --stage-2:#9A938C;
  --ok:#6FD08A; --err:#F08A7A;
  color-scheme:dark;
}

/* ---------- 2. base ---------- */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font:var(--fs-5)/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
     "PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;
     line-break:strict;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em;line-height:1.25}
p{margin:0}
a{color:var(--text2);text-decoration:none}
a:hover{color:var(--accent)}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
select,input{font:inherit}
img,video,canvas{max-width:100%}
.tech-bg,.grid-overlay{display:none}

/* ---------- 3. 顶栏 ---------- */
.tech-navbar{position:sticky;top:0;z-index:20;height:56px;border-bottom:1px solid var(--line);
             background:var(--topbar);backdrop-filter:blur(8px)}
.navbar-container{max-width:var(--w-col);margin:0 auto;height:100%;padding:0 var(--s3);
                  display:flex;align-items:center;gap:var(--s2)}
.tech-logo{display:flex;align-items:center;gap:var(--s1);font-size:var(--fs-5);font-weight:650}
.tech-logo i{color:var(--accent);font-size:15px}
.nav-tech-links{display:flex;align-items:center;gap:var(--s2);margin:0 0 0 auto;padding:0;list-style:none}
.nav-tech-links a{font-size:var(--fs-6);color:var(--text2);display:inline-flex;align-items:center;gap:6px}
.theme-toggle{font-size:var(--fs-6);color:var(--text2);border:1px solid var(--line2);
              border-radius:var(--r-pill);padding:0 10px;white-space:nowrap;
              min-height:30px;display:inline-flex;align-items:center;justify-content:center}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- 4. 版心与首屏 ---------- */
.tech-container{max-width:var(--w-col);margin:0 auto;padding:0 var(--s3) var(--s5)}
.free-banner{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
             padding:12px 0 0;font-size:var(--fs-6);color:var(--text2)}
.free-banner b{font-weight:650;color:var(--text)}
.fb-dot{width:3px;height:3px;border-radius:var(--r-pill);background:var(--text3);display:inline-block}
.tech-hero{padding:var(--s2) 0 0}
.tech-title{font-size:var(--fs-1);line-height:1.12;letter-spacing:-.02em;max-width:24ch;
            margin-bottom:var(--s1);text-wrap:balance;word-break:keep-all}
.tech-subtitle{font-size:var(--fs-4);line-height:1.55;color:var(--text2);margin-bottom:var(--s1)}
.compat-strip{font-size:var(--fs-6);line-height:1.7;color:var(--text3);margin-bottom:var(--s2)}
.compat-strip strong{color:var(--text2);font-weight:600;white-space:nowrap}
.compat-strip a{white-space:nowrap;color:var(--text2);
  text-decoration:underline;text-underline-offset:3px}

/* ---------- 5. 工作台卡 ---------- */
.ucard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:20px}
.upload-area{position:relative}
/* 投放框本体是 <label for="uFile">：原生触发文件框，不依赖 JS */
.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
          border:1px dashed var(--line2);border-radius:var(--r-card);padding:var(--s2) var(--s3);
          text-align:center;cursor:pointer;transition:border-color .16s,background .16s}
.dropzone:hover,.dropzone:focus-within,.upload-area.is-over .dropzone{border-color:var(--accent);background:var(--accent-soft)}
/* 透明文件输入铺满投放区：点任何位置 = 原生点它，不依赖 label 转发，也不产生聚焦滚动 */
.dropzone #uFile{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
        opacity:0;cursor:pointer;pointer-events:auto;z-index:2;
        /* 必须清掉下面那条旧规则的裁剪，否则透明层被 cut 成零面积、点击直接穿透 */
        clip-path:none;overflow:visible;white-space:normal}
/* 不能 display:none：iOS Safari 会忽略对隐藏 input 的 .click()，表现为"点了没反应" */
#file-input,#vfile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
        overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#dropzone{display:none}  /* 隐藏的文件输入容器，投放在 .upload-area 上 */
.preview-empty-icon{font-size:18px;color:var(--text3);margin-bottom:var(--s1)}
.preview-empty-text{font-size:var(--fs-5);color:var(--text);margin-bottom:6px}
.preview-empty-hint{font-size:var(--fs-6);color:var(--text3)}
.image-preview-container{display:none;margin-top:var(--s2)}
.image-preview-container.is-on{display:block}
.image-preview{width:100%;border-radius:var(--r-ctl);display:block}
.upload-warning{display:none;margin-top:var(--s2);font-size:var(--fs-6);color:var(--accent)}
.upload-warning.is-on{display:block}

.urlrow{display:flex;align-items:center;gap:12px;margin-top:var(--s2);position:relative;flex-wrap:wrap}
.urlrow input{flex:1 1 260px;min-width:200px;background:var(--input-bg);border:1px solid var(--line2);
              border-radius:var(--r-ctl);padding:0 12px;height:36px;color:var(--text);font-size:var(--fs-6)}
.urlrow input:focus{outline:none;border-color:var(--accent)}
.urlhint{width:100%;font-size:var(--fs-6);color:var(--text3)}

/* 行内状态与操作 */
.urow{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3);
      margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.urow:first-of-type{align-items:center;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);
      padding-bottom:0;border-top:0;margin-top:var(--s2)}
.urow label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-6);color:var(--text3);min-width:0}
.urow select{background:var(--input-bg);border:1px solid var(--line);border-radius:var(--r-ctl);
             padding:6px 8px;color:var(--text);font-size:var(--fs-6);cursor:pointer;width:100%}
.urow select:focus{outline:none;border-color:var(--accent)}
.urow label:has(input[type=checkbox]){flex-direction:row;align-items:center;gap:8px;color:var(--text2)}
#vinfo,#umode{font-size:var(--fs-6);color:var(--text3)}
#vmobilehint{font-size:var(--fs-6);color:var(--text3);margin-top:var(--s1)}
#vExtra{display:contents}

/* 按钮 */
.vbtn{background:var(--accent);color:var(--accent-ink);border:1px solid transparent;
      border-radius:var(--r-ctl);padding:0 16px;font-size:var(--fs-6);font-weight:600;white-space:nowrap;
      min-height:36px;display:inline-flex;align-items:center;justify-content:center}
.vbtn:hover{filter:brightness(1.06)}
.vbtn:disabled{background:var(--panel2);color:var(--text3);border-color:var(--line2);cursor:not-allowed;filter:none}
.vbtn.ghost{background:transparent;color:var(--text);border-color:var(--line2);font-weight:500}
.settings .vbtn{min-height:44px}      /* 主操作 */
.vbtn.ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}
#vgo,#pgo{grid-column:1/-1}
/* #vcancel/#vreset 的初始隐藏写在 HTML 行内（见 index.html），不放这里：
   JS 用 style.display='' 恢复显示，CSS 写 none 会把它永远藏住。 */

/* 进度与提示 */
.vbar{display:none;height:3px;background:var(--track);border-radius:var(--r-pill);
      margin-top:var(--s2);overflow:hidden}
.vbar i{display:block;height:100%;width:0;background:var(--accent);border-radius:var(--r-pill);transition:width .2s}
#vstage{font-size:var(--fs-6);color:var(--text2);text-align:center;margin-top:var(--s1)}
#vstage:empty,#vnotice:empty,#vest:empty,#vdiag:empty,#vlog:empty,#vstats:empty{display:none}
#vnotice,#vest,#vdiag,#vstats{font-size:var(--fs-6);color:var(--text2);margin-top:var(--s2);
      border:1px solid var(--line);border-radius:var(--r-ctl);padding:10px 12px;background:var(--panel2)}
#vlog{display:none;font:12px/1.5 ui-monospace,Menlo,monospace;color:var(--text3);
      white-space:pre-wrap;margin:var(--s2) 0 0}
.blink-debug #vlog{display:block}

/* ---------- 5b. 参数区（C01：常驻可见，2 列） ---------- */
.settings{display:grid;grid-template-columns:repeat(3,1fr);gap:8px var(--s2);
          margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.settings #vExtra{display:contents}          /* 让内部 4 个 label 直接成为网格项 */
.settings label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-6);
                color:var(--text3);min-width:0}
.settings label:has(input[type=checkbox]){flex-direction:row;align-items:center;gap:8px;color:var(--text2)}
.settings select{width:100%;min-height:36px;padding:0 26px 0 10px;color:var(--text);
                 font-size:var(--fs-6);background:var(--input-bg);border:1px solid var(--line2);
                 border-radius:var(--r-ctl);cursor:pointer;appearance:none;-webkit-appearance:none;
                 background-repeat:no-repeat;background-position:right 9px center;
                 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2369655C'/%3E%3C/svg%3E")}
[data-theme="dark"] .settings select{
                 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238C847D'/%3E%3C/svg%3E")}
.settings select:focus{outline:none;border-color:var(--accent)}
.settings .vbtn,.settings #pgo,.settings #vcancel,.settings #vreset{grid-column:1/-1;width:100%}

/* 投放区里的「选择文件」按钮 */
.pickfile{display:inline-flex;align-items:center;justify-content:center;min-height:36px;
          margin-top:var(--s2);padding:0 18px;font-size:var(--fs-6);
          color:var(--text);background:var(--panel);border:1px solid var(--line2);
          border-radius:var(--r-ctl);cursor:pointer}
.pickfile:hover{border-color:var(--accent);color:var(--accent)}

/* 直链说明：左对齐，别居中折断 */
/* 说明文字必须独占一行（当年丢了 width:100% 就被挤成同行，把输入框压到 40px） */
.urlhint{flex:0 0 100%;width:100%;text-align:left;max-width:78ch;text-wrap:pretty}

/* 状态行：文件信息 + 两个次级示例按钮，横排不拉伸 */
.statusrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:var(--s2);
           padding-top:0;border-top:0}
.statusrow #vinfo{flex:1 1 auto;min-width:0}
.statusrow .vbtn{padding:0 12px;min-height:32px}

@media (max-width:640px){
  .settings{grid-template-columns:1fr}
  /* 手机：直链输入与按钮竖排，避免输入框被压到截断占位符 */
  .urlrow{flex-direction:column;align-items:stretch;gap:10px}
  .urlrow input{flex:0 0 auto;height:44px}   /* 列方向下 flex-basis 会变成高度 */
  .urlrow button{width:100%}
  .tech-subtitle{font-size:var(--fs-5);text-wrap:balance}
  .tech-title{max-width:none}
  .vbtn,.pickfile,.settings select,#vurl{min-height:44px}
  #vgo{min-height:46px}
  .nav-tech-links a,.theme-toggle{min-height:36px;display:inline-flex;align-items:center}
}

/* ---------- 6. 成品预览 ---------- */
/* 视频结果面板同样由 hidden 属性驱动（pvShow 里 shell.hidden=false），
   这里写 display:none 会让面板永远出不来 —— 与 #photoOut 同一类坑。 */
.pv{margin-top:var(--s3);border-top:1px solid var(--line);padding-top:var(--s3)}
.pv[hidden]{display:none}
.pv-head{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s2);flex-wrap:wrap}
.pv-name{font-size:var(--fs-5);color:var(--text);display:inline-flex;align-items:center;gap:6px}
.pv-meta{font-size:var(--fs-6);color:var(--text3)}
.pv-stage{position:relative;max-width:var(--sbs);margin:0 auto;background:var(--stage-bg);
          border-radius:var(--r-ctl);overflow:hidden;display:flex;align-items:center;justify-content:center}
.pv-stage>video,.pv-stage>canvas{width:100%;display:block}
.pv-bar{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);flex-wrap:wrap}
.pv-tabs{display:flex;gap:6px;flex-wrap:wrap}
.pv-tab{font-size:var(--fs-6);padding:0 12px;border-radius:var(--r-pill);
        border:1px solid var(--line2);color:var(--text2);min-height:30px;
        display:inline-flex;align-items:center}
.pv-tab.is-on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);
              box-shadow:inset 0 0 0 1px var(--accent)}
.pv-dl{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-6);color:var(--text);
       border:1px solid var(--line2);border-radius:var(--r-ctl);padding:7px 14px}
.pv-dl:hover{border-color:var(--accent);color:var(--accent)}
#videoDlRow{margin-left:auto;display:flex;gap:8px}

/* 照片结果 */
/* 结果区的显隐只由 hidden 属性驱动（JS 用 photoOut.hidden=false 显示）。
   这里绝不能再写 display:none，否则永远显示不出来 —— 本站踩过两次同类坑。 */
#photoOut{margin-top:var(--s3)}
#photoOut[hidden]{display:none}

/* 照片结果的下载区：真实 DOM 是 #effectsGallery + 裸 button，必须单独给样式 */
#effectsGallery{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
                margin-top:var(--s2)}
#effectsGallery button{min-height:42px;padding:0 16px;border-radius:var(--r-ctl);
                border:1px solid var(--line2);background:var(--panel2);color:var(--text);
                font-size:var(--fs-5);font-weight:600;cursor:pointer;
                display:inline-flex;align-items:center;justify-content:center;gap:6px}
#effectsGallery button:hover{border-color:var(--accent);color:var(--accent)}
/* 注意优先级：`#effectsGallery button` 是 (1,0,1)，单写 #downloadSbs (1,0,0) 会被压过，
   所以这里必须带上祖先 id 才能生效（上一版就是这样没生效的）。 */
#effectsGallery button#downloadSbs{background:var(--accent);color:var(--accent-ink);
        border-color:transparent;font-weight:700}
#effectsGallery button#downloadSbs:hover{filter:brightness(1.06);color:var(--accent-ink)}
/* 「怎么看」是帮助入口，不该跟下载按钮抢位置：单独一行、做成文字链接 */
#effectsGallery #howToViewBtn{grid-column:1/-1;justify-self:start;min-height:auto;
        padding:4px 0;background:transparent;border:0;color:var(--text2);
        font-weight:500;text-decoration:underline;text-underline-offset:3px}
#effectsGallery #howToViewBtn:hover{color:var(--accent)}
#resultProcessing{display:flex;align-items:center;justify-content:center;gap:12px;padding:var(--s3) 0}
#depth-canvas{width:100%;border-radius:var(--r-ctl);display:block;background:var(--stage-bg)}
.effects-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2);margin-top:var(--s2)}
.effect-card{border:1px solid var(--line);border-radius:var(--r-ctl);padding:var(--s2);background:var(--panel2)}
.effect-title{font-size:var(--fs-6);color:var(--text);margin-bottom:6px}
.effect-canvas{width:100%;border-radius:var(--r-ctl);display:block;background:var(--stage-bg)}
.effect-description{font-size:var(--fs-6);color:var(--text3);margin:6px 0 0}
.result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s2)}
.result-actions button{font-size:var(--fs-6);color:var(--text2);border:1px solid var(--line2);
                       border-radius:var(--r-ctl);padding:6px 12px}
.result-actions button:hover{border-color:var(--accent);color:var(--accent)}
.result-empty{font-size:var(--fs-6);color:var(--text3)}
.status-value{font-size:var(--fs-6);color:var(--text3)}
#modelStatus{display:inline}
#retryModelBtn{font-size:var(--fs-6);color:var(--text2);text-decoration:underline;text-underline-offset:3px}
.control-panel{display:none;margin-top:var(--s2)}

/* ---------- 7. 原理段 ---------- */
.dnf{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.dnf h2{font-size:var(--fs-2);margin-bottom:var(--s2)}
.dnf p{font-size:var(--fs-5);line-height:1.75;color:var(--text2);max-width:62ch;margin-bottom:var(--s2)}
.dnf a{color:var(--text2);text-decoration:underline;text-underline-offset:3px}
.dnf a:hover{color:var(--accent)}

/* ---------- 8. 示例画廊 ---------- */
.sl-gallery{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.sl-gallery h2{font-size:var(--fs-2);margin-bottom:var(--s1)}
.sl-sub{font-size:var(--fs-5);color:var(--text2);margin-bottom:var(--s3);max-width:62ch}
.sl-frame{width:100%;background:var(--stage-bg);border-radius:var(--r-card);overflow:hidden}
/* 卡片对齐正文左右边；真正要"平行眼能融合"的是画面，所以只把画面限到 520 并居中 */
.sl-stage{max-width:var(--sbs);margin:0 auto}
/* 卡片内每一行都与画面共用同一条左右边，否则标题栏贴边、画面居中，看起来错位 */
.sl-titlebar,.sl-modes,.sl-bar,.sl-clips,.sl-meta,.sl-credit{
        max-width:var(--sbs);margin-left:auto;margin-right:auto}
.sl-titlebar{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
             padding:10px 12px;color:var(--stage-ink);font-size:var(--fs-6)}
.sl-titlebar-hint{color:var(--stage-2);font-size:var(--fs-6)}
.sl-modes{display:flex;gap:6px;padding:0 12px 10px;flex-wrap:wrap}
.sl-modes button{font-size:var(--fs-6);color:var(--stage-ink);border:1px solid rgba(244,241,235,.28);
                 border-radius:var(--r-pill);padding:0 12px;background:transparent;
                 min-height:30px;display:inline-flex;align-items:center}
.sl-modes button.on{border-color:var(--accent);color:#FFB067;background:rgba(0,0,0,.2)}  /* 预览框恒暗，用亮色保证 4.5:1 */
#slStageCap{border-top:1px solid rgba(244,241,235,.12)}
.sl-stage{position:relative;aspect-ratio:32/9;background:#000;overflow:hidden}
/* poster / video / canvas 三者重叠在同一格，靠显隐切换（原来块级堆叠会让高度翻倍） */
.sl-stage img,.sl-stage video,.sl-stage canvas{position:absolute;inset:0;width:100%;height:100%;
        object-fit:cover;display:block}
.sl-seam{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.34)}
.sl-eye{position:absolute;top:6px;font-size:var(--fs-6);font-weight:600;color:var(--stage-ink);
        background:rgba(0,0,0,.55);border-radius:var(--r-ctl);padding:2px 7px;
        width:24px;box-sizing:border-box;padding:2px 0;text-align:center;line-height:1.25}  /* 定宽拉齐 L/R */
.sl-eye-l,.sl-eye-r{right:auto}   /* 位置由 JS 按画布几何写 left；这里若再给 right，盒子会被拉满整条 */
.sl-eye-l{left:6px}
.sl-eye-r{left:auto}
/* 控制条用网格排布：行1 播放/进度/时间 · 行2 会聚 · 行3 两个动作按钮 */
.sl-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
        gap:10px 12px;padding:10px 12px;color:var(--stage-ink)}
.sl-bar #slPlay{grid-column:1;grid-row:1}
.sl-bar #slSeek{grid-column:2;grid-row:1}
.sl-bar #slTime{grid-column:3;grid-row:1}
.sl-bar .sl-par{grid-column:1/-1;grid-row:2}
.sl-bar .vbtn.ghost{grid-row:3;justify-self:start;width:auto;min-width:112px;justify-content:center}
.sl-bar button{font-size:var(--fs-6);color:var(--stage-ink);min-height:34px;display:inline-flex;
        align-items:center;justify-content:center}
/* 播放键做成正经圆形按钮，不要裸字形 */
#slPlay{width:34px;min-width:34px;height:34px;border-radius:var(--r-pill);
        border:1px solid rgba(244,241,235,.32);background:rgba(255,255,255,.06);padding:0;font-size:11px}
#slPlay:hover{border-color:var(--accent);color:var(--accent)}
/* 进度条吃掉剩余宽度，别固定 110px */
#slSeek{flex:1 1 auto;min-width:80px;accent-color:var(--accent)}
.sl-bar .vbtn.ghost{min-height:34px;padding:0 14px;font-size:var(--fs-6)}
.sl-bar .sl-par input[type=range]{width:110px;-webkit-appearance:none;appearance:none;height:16px;background:transparent}
#slParallax::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:
  linear-gradient(to right,transparent calc(50% - 1px),rgba(244,241,235,.85) calc(50% - 1px),
  rgba(244,241,235,.85) calc(50% + 1px),transparent calc(50% + 1px)),rgba(244,241,235,.22)}
#slParallax::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:var(--r-pill);
  background:var(--accent);margin-top:-5px;border:0}
#slParallax::-moz-range-track{height:2px;background:rgba(244,241,235,.22);border:0}
#slParallax::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:var(--r-pill);background:var(--accent)}
.sl-time{font-size:var(--fs-6);font-variant-numeric:tabular-nums;color:var(--stage-2)}
.sl-par{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-6);color:var(--stage-2)}
.sl-par output{font-variant-numeric:tabular-nums;min-width:3em}
.sl-bar .vbtn.ghost{color:var(--stage-ink);border-color:rgba(244,241,235,.28)}
.sl-clips{display:flex;gap:8px;padding:0 12px 12px}
.sl-clips button{flex:1 1 0;min-width:0;border:1px solid rgba(244,241,235,.2);border-radius:var(--r-ctl);
                 overflow:hidden;padding:0;background:none}
.sl-clips button img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.sl-clips button.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}  /* JS 用 .on */
.sl-meta,.sl-credit{font-size:var(--fs-6);line-height:1.55;color:var(--stage-2);
           padding:0 12px 12px;margin:0 auto;max-width:var(--sbs);text-wrap:pretty}
.sl-meta a,.sl-credit a{color:var(--stage-2);text-decoration:underline;text-underline-offset:2px}

/* ---------- 9. 关于 / FAQ ---------- */
.seo-content{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.seo-content h2{font-size:var(--fs-2);margin-bottom:var(--s3)}
.seo-grid{display:grid;gap:var(--s2)}
.seo-card{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s3);background:var(--panel)}
.seo-card h3{font-size:var(--fs-5);margin-bottom:var(--s1)}
.seo-card p{font-size:var(--fs-5);line-height:1.7;color:var(--text2)}
.seo-faq{margin-top:var(--s4)}
.seo-faq h3{font-size:var(--fs-3);margin-bottom:var(--s1)}
.faq-group{font-size:var(--fs-6);color:var(--text3);font-weight:600;letter-spacing:.06em;
           margin:var(--s3) 0 var(--s1);text-transform:uppercase}
.seo-faq details{border-bottom:1px solid var(--line)}
.seo-faq summary{cursor:pointer;list-style:none;padding:13px 0;font-size:var(--fs-5);
                 display:flex;justify-content:space-between;gap:var(--s2)}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::after{content:"+";color:var(--text3)}
.seo-faq details[open] summary::after{content:"–"}
.seo-faq details p{font-size:var(--fs-5);line-height:1.7;color:var(--text2);padding-bottom:14px;margin:0}

/* ---------- 10. 广告位 ---------- */
.ad-wrap{margin:var(--s4) 0 0;padding:var(--s3) 0 0;border-top:1px solid var(--line);
         display:flex;justify-content:center;min-height:110px}
.ad-wrap[hidden]{display:none}

/* ---------- 11. 页脚 ---------- */
footer{border-top:1px solid var(--line);margin-top:var(--s5);padding:var(--s3) 0 var(--s5);
       max-width:var(--w-col);margin-left:auto;margin-right:auto;padding-left:var(--s3);
       padding-right:var(--s3);font-size:var(--fs-6);color:var(--text3)}
footer a{color:var(--text3);margin-right:var(--s2)}
footer a:hover{color:var(--accent)}

/* 平行眼放大态：整卡放宽，不只是舞台 */
body.sbs-large .sbs-cap{max-width:1072px}

/* ---------- 12. 移动端 ---------- */
@media (max-width:640px){
  :root{--fs-1:28px;--fs-2:22px;--fs-3:18px;--fs-4:16px;--sbs:100%}
  .navbar-container,.tech-container{padding-left:20px;padding-right:20px}
  .urow{grid-template-columns:1fr}
  .effects-gallery{grid-template-columns:1fr}
  .free-banner{padding-top:var(--s3)}
  #dropzone{padding:var(--s3) var(--s2)}
  .nav-tech-links a span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none;animation:none}
}

/* ---------- 13. 补充组件（原有功能件的样式归宿） ---------- */
.preview-empty{display:flex;flex-direction:column;align-items:center;gap:var(--s1);
               color:var(--text2);text-align:center}

/* 占位：成品舞台内的媒体约束（与旧版一致：不撑破卡片） */
.pv-stage>video,.pv-stage>canvas,.pv-stage .vm-canvas,.pv-stage img{
  max-width:100%;max-height:52vh;width:auto;height:auto;display:block;
  object-fit:contain;background:var(--stage-bg)}

/* 查看方式（view-modes.js 注入 #pvViewModes） */
.vm-host{margin-top:var(--s2)}
.vm-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s2)}
.vm-tab{font-size:var(--fs-6);padding:5px 12px;border-radius:var(--r-pill);cursor:pointer;
        background:transparent;color:var(--text2);border:1px solid var(--line2)}
.vm-tab:hover{border-color:var(--accent);color:var(--accent)}
.vm-tab.is-active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);
                  box-shadow:inset 0 0 0 1px var(--accent)}
.vm-canvas{border-radius:var(--r-ctl);background:var(--stage-bg);display:block}
.vm-hint{margin-top:var(--s1);font-size:var(--fs-6);line-height:1.55;color:var(--text2)}
/* 舞台内：只留画布，隐藏标签与提示 */
.pv-stage .vm-tabs,.pv-stage .vm-hint{display:none}
.pv-stage .vm-wrap{margin:0;padding:0;width:100%;display:flex;align-items:center;justify-content:center}

/* 处理中 */
.result-processing{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s4) 0}
.result-processing-spinner{width:34px;height:34px;border-radius:var(--r-pill);
  border:2px solid var(--line);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 照片处理滑块与按钮 */
.tech-slider{width:100%;height:4px;border-radius:var(--r-pill);background:var(--track);
  outline:none;-webkit-appearance:none;margin:var(--s1) 0}
.tech-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:var(--r-pill);
  background:var(--accent);cursor:pointer;border:0}
.tech-slider::-moz-range-thumb{width:16px;height:16px;border-radius:var(--r-pill);
  background:var(--accent);cursor:pointer;border:0}
.process-btn{background:var(--accent);color:var(--accent-ink);border:1px solid transparent;
  border-radius:var(--r-ctl);padding:10px 20px;font-size:var(--fs-5);font-weight:600;
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--s2)}
.process-btn:hover{filter:brightness(1.06)}
.process-btn:disabled{background:var(--panel2);color:var(--text3);border-color:var(--line2);cursor:not-allowed}

/* 可拖放的通用状态 */
.drag-over,.drag{border-color:var(--accent);background:var(--accent-soft)}

/* 全屏查看器 / VR 弹窗：JS 内联样式为主，这里只兜底层级与背景 */
.fullscreen-viewer,.vr-modal,.sbs-viewer{position:fixed;inset:0;z-index:200;background:#000;
  display:flex;align-items:center;justify-content:center}

/* ============================================================================
   14. 文档页（samples / contact / engine / player / 404 / privacy / full-sbs / half-sbs）
   作用域锁在 body.doc，不影响首页
   ========================================================================== */
.doc{padding:32px 0 72px}
.doc--bare{max-width:var(--w-col);margin:0 auto;padding-left:var(--s3);padding-right:var(--s3)}
.doc .wrap{max-width:var(--w-col);margin:0 auto;padding:0 var(--s3)}

/* 页头 */
.doc .top{display:flex;align-items:center;gap:10px;margin-bottom:var(--s4)}
.doc .top img{width:26px;height:26px;border-radius:var(--r-ctl);display:block}
.doc .top a{font-size:var(--fs-5);font-weight:650;color:var(--text)}
.doc .top span{font-size:var(--fs-6);color:var(--text3)}
.doc .top .theme-toggle{margin-left:auto}

/* 标题与正文 */
.doc h1{font-size:var(--fs-1);line-height:1.15;letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
.doc h2{font-size:var(--fs-2);line-height:1.25;margin:var(--s4) 0 12px;text-wrap:balance}
.doc h3{font-size:var(--fs-3);line-height:1.3;margin:var(--s3) 0 8px}
.doc p,.doc li{font-size:var(--fs-5);line-height:1.75;color:var(--text2)}
.doc p{margin:0 0 var(--s2)}
.doc ul{margin:0 0 var(--s2);padding-left:20px}
.doc li{margin-bottom:6px}
.doc strong{color:var(--text);font-weight:600}
.doc em{font-style:italic}
.doc a{color:var(--text2);text-decoration:underline;text-underline-offset:3px}
.doc a:hover{color:var(--accent)}
.doc code{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel2);
          border:1px solid var(--line);border-radius:var(--r-ctl);padding:1px 5px;color:var(--text)}
.doc .lede{font-size:var(--fs-4);line-height:1.6;color:var(--text2);max-width:56ch}
.doc .lead{font-size:var(--fs-4);line-height:1.6;color:var(--text2)}
.doc .meta{font-size:var(--fs-6);color:var(--text3)}

/* 卡片 */
.doc .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);
           padding:var(--s3);margin:0 0 var(--s2)}
.doc .card h2{margin-top:0;font-size:var(--fs-3)}
.doc .card p:last-child{margin-bottom:0}

/* 页脚 */
.doc .foot{margin-top:var(--s4);padding-top:var(--s2);border-top:1px solid var(--line);
           font-size:var(--fs-6);color:var(--text3);display:flex;flex-wrap:wrap;gap:var(--s2)}
.doc .foot p{margin:0;font-size:var(--fs-6);color:var(--text3)}
.doc .foot a{font-size:var(--fs-6);color:var(--text3)}

/* 404 */
.doc .code{font:600 64px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);
           letter-spacing:.02em;margin-bottom:var(--s2)}
.doc .btn{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:600;
          font-size:var(--fs-5);border-radius:var(--r-ctl);padding:10px 18px;text-decoration:none;margin-top:var(--s1)}
.doc .btn:hover{filter:brightness(1.06);color:var(--accent-ink)}
.doc .links{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.doc .links a{font-size:var(--fs-6);color:var(--text3)}

/* 示例页的双眼图 */
.doc .sbs-figure{position:relative;margin:0 0 var(--s2);background:var(--stage-bg);border-radius:var(--r-ctl);overflow:hidden}
.doc .sbs-figure img{width:100%;display:block}
.doc .sbs-tag{position:absolute;top:8px;font-size:11px;font-weight:600;letter-spacing:.08em;
              color:var(--stage-ink);background:rgba(0,0,0,.55);border-radius:var(--r-ctl);padding:2px 7px}
.doc .sbs-tag-l{left:8px}
.doc .sbs-tag-r{right:8px}

/* 播放器页（player.html，JS 驱动） */
.doc .drop{border:1px dashed var(--text3);border-radius:var(--r-card);padding:var(--s4) var(--s3);
           text-align:center;cursor:pointer;margin-bottom:var(--s3);background:var(--panel2)}
.doc .drop:hover{border-color:var(--accent);background:var(--accent-soft)}
.doc .stage{background:var(--stage-bg);border-radius:var(--r-ctl);overflow:hidden;
            display:flex;align-items:center;justify-content:center;min-height:180px;margin-bottom:var(--s2)}
.doc .stage canvas{width:100%;display:block}
.doc .bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--fs-6);color:var(--text2)}
.doc .bar button,.doc .bar select{font-size:var(--fs-6);color:var(--text2);background:var(--input-bg);
            border:1px solid var(--line2);border-radius:var(--r-ctl);padding:5px 10px}
.doc .bar button:hover,.doc .bar select:hover{border-color:var(--accent);color:var(--accent)}
.doc .bar input[type=range]{width:120px;accent-color:var(--accent)}
.doc input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;
  border:1px solid var(--line2);border-radius:var(--r-ctl);background:var(--input-bg);
  margin:0 2px 0 0;vertical-align:-3px;cursor:pointer;background-repeat:no-repeat;background-position:center}
.doc input[type=checkbox]:checked{border-color:var(--accent);background-color:var(--accent-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23A25611' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* 下拉框去掉系统原生外观，换成与胶囊控件一致的细箭头 */
.doc .bar select{appearance:none;-webkit-appearance:none;padding-right:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2369655C'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
[data-theme="dark"] .doc .bar select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238C847D'/%3E%3C/svg%3E")}
.doc .bar label{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-6);color:var(--text2)}
.doc .bar :disabled{opacity:.45;cursor:not-allowed}
.doc .pl-mode.is-active{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)}
.doc #plStatus{font-size:var(--fs-6);color:var(--text3);margin-top:var(--s2)}

@media (max-width:640px){
  .doc .wrap,.doc--bare{padding-left:20px;padding-right:20px}
  .doc .code{font-size:44px}
}

/* ============================================================================
   15. 内容页（device / guides / tools）
   同一批类名跨 16 页复用，作用域仍锁在 body.doc
   ========================================================================== */
.doc .in{max-width:var(--w-col);margin:0 auto;padding:0 var(--s3);display:flex;align-items:center;gap:var(--s2);height:56px}
.doc nav{border-bottom:1px solid var(--line);background:var(--topbar);backdrop-filter:blur(8px);
         position:sticky;top:0;z-index:20}
.doc .logo{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-5);font-weight:650;
           color:var(--text);text-decoration:none}
.doc .logo b{color:var(--accent);font-weight:650}
.doc .lk{margin-left:auto;display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-6)}
.doc .lk a{color:var(--text2);text-decoration:none}
.doc .lk a:hover{color:var(--accent)}
.doc .lk #langBtn,.doc .lk .theme-toggle{color:var(--text3);cursor:pointer}
.doc .lk .theme-toggle{margin-left:0}

/* 面包屑 / 小标签 */
.doc .crumb{font-size:var(--fs-6);color:var(--text3);margin-bottom:var(--s2)}
.doc .crumb a{color:var(--text2);text-decoration:underline;text-underline-offset:2px}
.doc .crumb a:hover{color:var(--accent)}
.doc .crumb .theme-toggle{float:right;margin-top:-4px}
.doc .badge{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
            color:var(--accent);border:1px solid var(--line2);border-radius:var(--r-pill);
            padding:2px 9px;margin-bottom:var(--s2)}
.doc .sub{color:var(--text2);font-size:var(--fs-4);line-height:1.6;max-width:62ch;margin:0 0 var(--s2)}

/* 规格胶囊 */
.doc .chips{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s2) 0 var(--s3)}
.doc .chip{font-size:var(--fs-6);color:var(--text2);background:var(--panel);
           border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 11px}
.doc .chip b{color:var(--text);font-weight:600}

/* 卡片网格 */
.doc .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
           gap:var(--s2);margin:var(--s2) 0}
.doc .grid>:last-child:nth-child(odd){grid-column:1/-1}
.doc .grid .card{margin:0}
.doc .card h3{font-size:var(--fs-5);color:var(--text);margin:0 0 6px}
.doc .card p{font-size:var(--fs-5);color:var(--text2);margin:0}

/* 步骤 */
.doc .steps{display:grid;gap:var(--s2);counter-reset:st;margin:var(--s2) 0}
.doc .step{display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);
           border-radius:var(--r-card);padding:var(--s2)}
.doc .step::before{counter-increment:st;content:counter(st);flex:0 0 22px;height:22px;line-height:22px;
                   text-align:center;border-radius:var(--r-pill);background:var(--accent-soft);
                   color:var(--accent);font-size:var(--fs-6);font-weight:600}
.doc .step div{font-size:var(--fs-5);color:var(--text2)}
.doc .step b{color:var(--text);font-weight:600}

/* 提示块 */
.doc .tip{border-left:2px solid var(--accent);background:var(--panel2);border-radius:var(--r-ctl);
          padding:10px 14px;font-size:var(--fs-5);color:var(--text2);margin:var(--s2) 0}
.doc .tip b,.doc .tip strong{color:var(--text)}

/* 强调条 */
.doc .band{margin:var(--s3) 0 0;border:1px solid var(--line2);border-radius:var(--r-card);
           padding:var(--s3);background:var(--panel)}
.doc .band p{font-size:var(--fs-5);max-width:52ch;margin:0}

/* 行动按钮 */
.doc .cta{display:inline-block;margin:var(--s2) 0;padding:10px 18px;background:var(--accent);
          color:var(--accent-ink);font-weight:600;font-size:var(--fs-5);
          border-radius:var(--r-ctl);text-decoration:none}
.doc .cta:hover{filter:brightness(1.06);color:var(--accent-ink)}

/* 设备页的对照表 */
.doc .player-table{width:100%;table-layout:fixed;border-collapse:collapse;margin:var(--s2) 0;font-size:var(--fs-6)}
.doc .player-table th,.doc .player-table td{text-align:left;padding:9px 10px;
          border-bottom:1px solid var(--line);color:var(--text2);vertical-align:top;
          overflow-wrap:anywhere;word-break:break-word}
.doc .player-table th{color:var(--text3);font-weight:600}

/* 工具页表单行 */
.doc .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:var(--s2)}
.doc .row button{margin-left:auto}
.doc .card>label{display:block;font-size:var(--fs-6);color:var(--text3);margin:var(--s2) 0 6px}
.doc .row select,.doc .row button{font-size:var(--fs-6);min-height:36px;display:inline-flex;
          align-items:center;border-radius:var(--r-ctl);padding:0 12px}
.doc select,.doc .row select{color:var(--text);background:var(--input-bg);border:1px solid var(--line2);min-height:36px;border-radius:var(--r-ctl);
          min-width:max-content;max-width:100%;
          appearance:none;-webkit-appearance:none;padding-right:26px;
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2369655C'/%3E%3C/svg%3E");
          background-repeat:no-repeat;background-position:right 9px center}
[data-theme="dark"] .doc select,[data-theme="dark"] .doc .row select{
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238C847D'/%3E%3C/svg%3E")}
.doc .row button{background:var(--accent);color:var(--accent-ink);border:1px solid transparent;font-weight:600}
.doc .row button:hover{filter:brightness(1.06)}
.doc .row button:disabled{background:var(--panel2);color:var(--text3);border-color:var(--line2);
          cursor:not-allowed;filter:none}
.doc .chk{display:inline-flex;gap:6px;align-items:center;font-size:var(--fs-6);color:var(--text2)}

@media (max-width:640px){
  /* 工具页表单行：窄屏竖排，避免下拉被压到显示不全 */
  .doc .row,.doc .bar{flex-direction:column;align-items:stretch}
  .doc .row select,.doc .row button,.doc .card select,.doc .bar select,.doc .bar button{width:100%}
  .doc .chk{width:auto}
  /* 对照表在窄屏改成上下堆叠，别横向挤成一条缝 */
  .doc .player-table,.doc .player-table thead,.doc .player-table tbody,
  .doc .player-table tr,.doc .player-table th,.doc .player-table td{display:block;width:100%}
  .doc .player-table thead{display:none}
  .doc .player-table tr{border-bottom:1px solid var(--line);padding:10px 0}
  .doc .player-table td{border:0;padding:2px 0}
  .doc .player-table td:first-child{color:var(--text);font-weight:600}
  .doc .in{padding-left:20px;padding-right:20px;height:auto;min-height:56px;padding-top:8px;padding-bottom:8px;
           flex-wrap:wrap;row-gap:6px}
  .doc nav{position:static}
  .doc .lk{margin-left:0;width:100%;justify-content:flex-start;flex-wrap:wrap;gap:10px}
  .doc .lk a{font-size:var(--fs-6)}
}

/* 辅助用文件输入（非投放区）：视觉隐藏但保留在布局里。
   注意不要用 position:absolute + 无偏移：聚焦时浏览器会把它滚进视口，
   表现就是"点了之后页面跳到顶部、文件框却没弹"。 */
input[type=file]{width:1px;height:1px;padding:0;margin:-1px;opacity:0;
        overflow:hidden;border:0;position:absolute;top:0;left:0;pointer-events:none}

/* 文件选择器没弹出时的兜底提示 */
.pickhint{margin:var(--s2) 0 0;padding:10px 12px;font-size:var(--fs-6);line-height:1.6;
          color:var(--text2);background:var(--panel2);border:1px solid var(--line);
          border-left:2px solid var(--accent);border-radius:var(--r-ctl)}
.pickhint[hidden]{display:none}

/* ---- [hidden] 必须永远生效 ----
   本站真实事故：`.sl-stage canvas{display:block}` 压过 UA 的 [hidden]{display:none}，
   带 hidden 的 canvas 以全尺寸+黑底永久盖住视频（表现为"播放黑屏"）。
   规则：凡是我们给元素写过 display 的，都要显式补一条 [hidden] 兜底。 */
.sl-stage canvas[hidden],.sl-stage video[hidden],.sl-stage img[hidden],
#slDl[hidden],#slPoster[hidden],#slSeam[hidden],.sl-eye[hidden],
#pvShell[hidden],#photoOut[hidden],#vdl[hidden],#vgo[hidden],#pgo[hidden],
#vExtra[hidden],#vSettings[hidden],#uploadEmpty[hidden],#imagePreview[hidden],
#vurlgo[hidden],#jumpSamples[hidden],#themeToggle[hidden],#depth-canvas[hidden]{
        display:none}