*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#101113;color:#dfe6ee;font-family:system-ui,sans-serif;overflow:hidden}.room{height:100svh;background:radial-gradient(ellipse at 50% 45%,#25282b,#101113 80%)}.stage{position:relative;width:100%;height:100%;display:grid;place-items:center;perspective:1400px;isolation:isolate}.card{position:relative;width:min(79vw,440px,calc(74svh / 1.4));aspect-ratio:5/7;transform-style:preserve-3d;will-change:transform;cursor:grab;touch-action:none;user-select:none;transform:rotateX(-5deg) rotateY(-12deg)}.card:active{cursor:grabbing}.card:focus-visible{outline:2px solid #d6ef9d;outline-offset:12px;border-radius:18px}.face{position:absolute;inset:0;border-radius:4.5%/3.2%;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 0 1px #202329,0 30px 65px #000b;overflow:hidden}.front{transform:translateZ(.2px);background:#101318}.front canvas{display:block;width:100%;height:100%}.back{visibility:hidden;transform:rotateY(180deg) translateZ(.2px);background:#13216a}.back img{width:100%;height:100%;object-fit:fill;display:block}.status{position:absolute;bottom:24px;left:20px;right:20px;text-align:center;font-size:14px;line-height:1.5}.status[hidden]{display:none}

.controls{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:min(380px,90vw);display:grid;grid-template-columns:90px 1fr 48px;gap:12px;align-items:center;padding:16px 18px;background:#1b1e22e8;border:1px solid #ffffff18;border-radius:16px;font-size:13px}.controls input{width:100%;accent-color:#e8edf2}.controls output{text-align:right;font-variant-numeric:tabular-nums}.stage{height:calc(100% - 105px)}

.depth-track{position:relative;min-width:0}.depth-track:before{content:"";position:absolute;left:50%;top:5px;width:1px;height:15px;background:#dfe6ee88;pointer-events:none}.depth-ticks{display:flex;justify-content:space-between;font-size:10px;color:#a4acb5;margin-top:3px}.depth-ticks span:nth-child(2){position:absolute;left:50%;transform:translateX(-50%)}

.controls{bottom:max(12px,env(safe-area-inset-bottom));gap:9px}.interaction{grid-column:1/-1;display:flex;gap:8px}.interaction button{flex:1;min-height:38px;border:1px solid #ffffff25;border-radius:9px;background:#2b3036;color:inherit;font:inherit;cursor:pointer}.interaction button[aria-pressed=true]{background:#d6ef9d;color:#182017}.interaction button:focus-visible{outline:2px solid #d6ef9d;outline-offset:2px}.interaction button:disabled{opacity:.6}#motion-hint{grid-column:1/-1;margin:0;font-size:11px;line-height:1.4;color:#b9c1ca;text-align:center;min-height:16px}.stage{height:calc(100% - 200px);padding-top:env(safe-area-inset-top)}.card{max-height:calc(100svh - 230px);max-width:calc((100svh - 230px) / var(--card-aspect,1.4))}@media (max-height:500px) and (orientation:landscape){.stage{width:60%;height:100%;padding:20px}.card{max-height:88svh;max-width:calc(88svh / var(--card-aspect,1.4))}.controls{left:auto;right:12px;top:50%;bottom:auto;transform:translateY(-50%);width:37%;grid-template-columns:75px 1fr 40px;padding:12px;gap:8px;font-size:11px}}

[hidden]{display:none!important}dialog{width:min(340px,90vw);border:1px solid #ffffff25;border-radius:18px;background:#202429;color:#dfe6ee;text-align:center;padding:24px}dialog::backdrop{background:#0009}dialog h2{font-size:18px}dialog img{display:block;width:220px;max-width:100%;margin:20px auto;border-radius:8px}dialog a{color:#d6ef9d}dialog p{font-size:12px;color:#b9c1ca}.close{position:absolute;right:10px;top:8px;border:0;background:none;color:inherit;font-size:26px;cursor:pointer}.interaction button{font-size:12px}

/* Spacious controls and a card-only immersive view. */
.controls{row-gap:24px;padding:22px 18px}.interaction{margin-top:2px}#motion-hint{display:block;color:#cfd6de}.stage{height:calc(100% - 220px)}.card{max-height:calc(100svh - 250px);max-width:calc((100svh - 250px) / var(--card-aspect,1.4))}.immersive-toggle{position:fixed;z-index:20;top:calc(16px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));width:42px;height:42px;display:grid;place-items:center;border:1px solid #ffffff20;border-radius:50%;color:#dfe6ee;background:#202429b3;cursor:pointer;touch-action:manipulation}.immersive-toggle:focus-visible{outline:2px solid #d6ef9d;outline-offset:3px}.eye-slash{display:none}.immersive .eye-slash{display:block}.immersive .controls,.immersive .status{display:none}.immersive .stage{height:100%;width:100%;padding:0}.immersive .card{width:min(88vw,calc(84svh / var(--card-aspect,1.4)))!important;max-width:none;max-height:none}@media (max-height:500px) and (orientation:landscape){.controls{row-gap:18px}.stage{height:100%}.card{max-height:88svh;max-width:calc(88svh / var(--card-aspect,1.4))}}

/* Oversized transparent foreground surface; background clipping is done in the shader. */
.front{overflow:visible;background:transparent}.front canvas{position:absolute;width:160%;height:160%;max-width:none;left:-30%;top:-30%;border-radius:0;pointer-events:none}

/* 加载态：先把控件藏起来、居中显示真实进度，避免看着像卡住了。 */
.stage{transition:opacity .45s ease}
body.loading .controls,body.loading .immersive-toggle{visibility:hidden}
body.loading .stage{opacity:0}
body.loading .status{bottom:auto;top:50%;left:50%;right:auto;transform:translate(-50%,-50%);font-size:15px;letter-spacing:.06em;color:#c7cfd8;white-space:nowrap}
body.loading .status:after{content:"";display:inline-block;width:6px;height:6px;margin-left:9px;border-radius:50%;background:#e8edf2;vertical-align:middle;animation:loadpulse 1.1s ease-in-out infinite}
@keyframes loadpulse{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){body.loading .status:after{animation:none;opacity:.8}}

/* ==== 控制面板改版（2026-09-30）：黑白灰单色 + 发丝线 + 直角。
   去掉原来那套：半透明玻璃底、16px 大圆角、黄绿高亮、圆形悬浮按钮。 ==== */
.controls{
  width:min(340px,88vw);
  grid-template-columns:56px 1fr 56px;
  gap:8px 14px;
  row-gap:20px;
  padding:18px 20px 15px;
  background:#0e1013;
  border:1px solid #2b3138;
  border-radius:2px;
  box-shadow:none;
  font-size:12px;
  color:#c8d0d8;
}
.controls label{font-size:10.5px;letter-spacing:.14em;color:#8b939c}
.controls output{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:#dfe6ec}
.controls input[type=range]{-webkit-appearance:none;appearance:none;height:22px;background:transparent;cursor:pointer}
.controls input[type=range]::-webkit-slider-runnable-track{height:1px;background:#3a4148;border:0}
.controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:4px;height:16px;margin-top:-7.5px;border:0;border-radius:0;background:#e8edf2}
.controls input[type=range]::-moz-range-track{height:1px;background:#3a4148;border:0}
.controls input[type=range]::-moz-range-thumb{width:4px;height:16px;border:0;border-radius:0;background:#e8edf2}
.controls input[type=range]:focus-visible{outline:1px solid #e8edf2;outline-offset:5px}
.depth-track:before{top:7px;height:9px;width:1px;background:#5a626a}
.depth-ticks{font-size:9px;letter-spacing:.1em;color:#6d757e;margin-top:0}
.interaction{gap:6px;margin-top:2px}
.interaction button{
  min-height:34px;
  border:1px solid #333941;
  border-radius:2px;
  background:transparent;
  color:#c8d0d8;
  font-size:11.5px;
  letter-spacing:.08em;
  transition:background .12s linear,color .12s linear,border-color .12s linear;
}
.interaction button:hover:not(:disabled){background:#171b20;border-color:#4a525a;color:#e8edf2}
.interaction button[aria-pressed=true]{background:#e8edf2;color:#0e1013;border-color:#e8edf2}
.interaction button:focus-visible{outline:1px solid #e8edf2;outline-offset:3px}
.interaction button:disabled{opacity:1;color:#5a6169;border-color:#23272c;background:transparent;cursor:not-allowed}
#motion-hint{display:block;font-size:10.5px;letter-spacing:.05em;line-height:1.6;color:#767e87;min-height:15px}
.immersive-toggle{border:1px solid #2b3138;border-radius:2px;background:#0e1013;color:#c8d0d8}
.immersive-toggle:hover{border-color:#4a525a;color:#e8edf2}
.immersive-toggle:focus-visible{outline:1px solid #e8edf2;outline-offset:3px}
.card:focus-visible{outline:1px solid #e8edf2;outline-offset:12px}
dialog{border:1px solid #2b3138;border-radius:2px;background:#0e1013}
dialog a{color:#e8edf2}
@media (max-height:500px) and (orientation:landscape){.controls{grid-template-columns:52px 1fr 48px;padding:12px 14px}}