/* ==========================================================================
   microNature — Atlas, solid register (EA-03D)
   Loads AFTER mn.css, ea-demo.css and ea-atlas.css. Two objects only:

     .stk   a light table. The same three drawings the flat sheet carries,
            set on tracing paper and separated in depth. Turn the deck square
            to the reader and the three ground lines register as one — which
            is the sheet's own claim, made checkable instead of asserted.

     .rig   a drawn scene with a camera in it. Line work, not shading: the
            page is a drawing set and should stay one.
   ========================================================================== */

/* ---- 1. Light table ----------------------------------------------------- */
.stk{ margin:26px 0 4px }

.stk-stage{
  perspective:1600px; perspective-origin:50% 44%;
  height:clamp(268px,33vw,414px);
  border:1px solid var(--rule-2); background:var(--ground);
  position:relative; overflow:hidden;
}
.stk-stage::before{
  /* Desk tone under the trace, so the sheets read as sheets. */
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg,transparent 0 31px,var(--rule-2) 31px 32px),
    repeating-linear-gradient(90deg,transparent 0 31px,var(--rule-2) 31px 32px);
  opacity:.5; pointer-events:none;
}

.stk-view{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(var(--rx,9deg)) rotateY(var(--ry,-42deg));
  transition:transform .85s cubic-bezier(.22,.68,.24,1);
  cursor:grab; touch-action:pan-y;
}
.stk-view.drag{ cursor:grabbing; transition:none }
.stk-view:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }

.stk-p{
  position:absolute; left:50%; top:50%; width:54%; aspect-ratio:300/140;
  transform:translate(-50%,-50%) translateZ(var(--z,0px));
  transform-style:preserve-3d;
  background:rgba(251,250,247,.70);
  border:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(21,24,27,.05);
}
.stk-p svg{ display:block; width:100%; height:auto; background:none }

.stk-p .k{
  position:absolute; left:-1px; bottom:100%; margin-bottom:5px;
  font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
  background:var(--ground); padding:1px 5px 2px; border:1px solid var(--rule-2);
}
.stk-p .k b{ font-weight:400; color:var(--ink-2) }

/* The ground line, marked on every sheet at the one height it always sits,
   and threaded through the deck so the registration is visible edge-on. */
.stk-g{
  position:absolute; left:0; top:68.571%; width:15%; height:0;
  border-top:1px solid var(--accent); opacity:.65;
}
.stk-tie{
  position:absolute; left:0; top:68.571%; width:var(--depth,320px); height:0;
  border-top:1px dashed var(--accent); opacity:.5;
  transform-origin:0 50%; transform:rotateY(-90deg);
}

.stk-cue{
  position:absolute; left:0; right:0; bottom:10px; text-align:center;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  color:var(--ink-3); pointer-events:none;
  opacity:0; transition:opacity .3s;
}
.stk.square .stk-cue{ opacity:1; color:var(--accent) }

/* Controls and captions */
.stk-bar{
  display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;
  margin-top:12px; padding-bottom:12px; border-bottom:1px solid var(--rule-2);
}
.stk-b{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  padding:6px 12px 7px; background:none; color:var(--ink-2);
  border:1px solid var(--rule); cursor:pointer; transition:.18s;
}
.stk-b:hover{ border-color:var(--ink-2); color:var(--ink) }
.stk-b[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.stk-tip{ font-size:11px; color:var(--ink-3); margin-left:auto }

.stk-caps{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 22px;
  margin-top:14px;
}
.stk-caps div{ min-width:0; font-size:11.5px; line-height:1.7; color:var(--ink-2) }
.stk-caps b{
  display:block; font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin-bottom:6px;
}

/* Flat: the sheet as it prints. Same panels, no depth, no transforms. */
.stk.flat .stk-stage{ perspective:none; height:auto; background:none; border:0; overflow:visible }
.stk.flat .stk-stage::before{ display:none }
.stk.flat .stk-view{
  position:static; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px 22px; transform:none; cursor:default;
}
.stk.flat .stk-p{
  position:static; width:auto; aspect-ratio:auto; transform:none;
  background:var(--paper); margin-top:18px;
}
.stk.flat .stk-tie,.stk.flat .stk-cue,.stk.flat .stk-g{ display:none }
.stk.flat .stk-p .k{ margin-bottom:4px }

/* ---- 2. Drawn scene with a camera in it --------------------------------- */
.rig{ border:1px solid var(--ink); margin:26px 0 8px; background:var(--paper) }

.rig-hd{
  display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline;
  padding:11px 16px 12px; border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink-3);
}
.rig-hd b{ color:var(--ink); font-weight:600; letter-spacing:.06em }

.rig-c{ position:relative; background:var(--paper) }
.rig-c canvas{ display:block; width:100%; height:auto; touch-action:pan-y; cursor:grab }
.rig-c canvas.drag{ cursor:grabbing }
.rig-c canvas:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }

.rig-ctl{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule);
}
.rig-f{ padding:13px 16px 15px; border-left:1px solid var(--rule); min-width:0 }
.rig-f:first-child{ border-left:0 }
.rig-f label{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:9px;
}
.rig-f label b{
  font-size:12px; font-weight:600; color:var(--ink); letter-spacing:.02em;
  text-transform:none; font-variant-numeric:tabular-nums;
}
.rig-f input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:15px;
  background:none; cursor:pointer; display:block;
}
.rig-f input[type=range]::-webkit-slider-runnable-track{
  height:1px; background:var(--ink-3);
}
.rig-f input[type=range]::-moz-range-track{ height:1px; background:var(--ink-3) }
.rig-f input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:3px; height:15px;
  background:var(--ink); margin-top:-7px; border:0; border-radius:0;
}
.rig-f input[type=range]::-moz-range-thumb{
  width:3px; height:15px; background:var(--ink); border:0; border-radius:0;
}
.rig-f input[type=range]:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

.rig-out{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  border-top:1px solid var(--ink);
}
.rig-out>div{ padding:13px 16px 15px; border-left:1px solid var(--rule); min-width:0 }
.rig-out>div:first-child{ border-left:0 }
.rig-k{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:6px;
}
.rig-v{ font-size:var(--t-sm); line-height:1.6; color:var(--ink-2) }
.rig-v b{
  font-family:var(--mono); font-size:15px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; margin-right:8px;
}
.rig-v em{ font-style:normal; font-weight:600 }
.rig-out.miss .rig-v em{ color:var(--flag) }
.rig-out.seen .rig-v em{ color:var(--accent) }

.rig-note{
  padding:12px 16px 14px; border-top:1px solid var(--rule);
  font-size:11.5px; line-height:1.75; color:var(--ink-3);
}

/* ---- 3. Narrow ---------------------------------------------------------- */
@media (max-width:820px){
  /* Carries the .flat variants too, so a deck left open on a wide screen
     does not survive a resize into three columns on a phone. */
  .stk .stk-stage,.stk.flat .stk-stage{ perspective:none; height:auto; background:none; border:0; overflow:visible }
  .stk .stk-stage::before,.stk.flat .stk-stage::before{ display:none }
  .stk .stk-view,.stk.flat .stk-view{
    position:static; display:grid; grid-template-columns:1fr; gap:26px;
    transform:none; cursor:default;
  }
  .stk .stk-p,.stk.flat .stk-p{
    position:static; width:auto; aspect-ratio:auto; transform:none;
    background:var(--paper); margin-top:18px;
  }
  .stk .stk-tie,.stk .stk-cue,.stk .stk-g,.stk.flat .stk-tie{ display:none }
  .stk-bar{ display:none }
  .stk-caps{ grid-template-columns:1fr; gap:14px }
  .rig-ctl{ grid-template-columns:1fr }
  .rig-f{ border-left:0; border-top:1px solid var(--rule) }
  .rig-f:first-child{ border-top:0 }
  .rig-out{ grid-template-columns:1fr }
  .rig-out>div{ border-left:0; border-top:1px solid var(--rule) }
  .rig-out>div:first-child{ border-top:0 }
}

/* ---- 4. Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .stk-view{ transition:none }
}

/* ---- 5. 场景定义列表 (vd) --------------------------------------------- */
.vd{ margin:6px 0 12px; border-top:1px solid var(--rule-2) }
.vd > div{ display:grid; grid-template-columns:78px 1fr; column-gap:18px; padding:10px 0; border-bottom:1px solid var(--rule-2) }
.vd dt{ margin:0; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--ink-3); align-self:baseline; line-height:1.6 }
.vd dd{ margin:0; font-size:14px; line-height:1.7; color:var(--ink) }
.vd dd .v-pass,.vd dd .v-fail,.vd dd .drift{ font-weight:600 }
@media (max-width:560px){
  .vd > div{ grid-template-columns:1fr; row-gap:3px }
}