main { padding:10px 20px 40px; display:flex; flex-direction:column; align-items:center; }
.bcap { text-align:center; }
.bcap h1 { font-size:20px; font-weight:650; margin:0; letter-spacing:-.01em; }
.bcap p { margin:3px 0 0; color:var(--muted); font-size:13px; }
.bcap a { color:var(--accent); text-decoration:none; }
.bcap a:hover { text-decoration:underline; }
#stage { position:relative; width:100%; max-width:920px; height:min(72vh,900px);
  perspective:3400px; perspective-origin:50% 46%;
  display:grid; place-items:center; touch-action:none; cursor:grab; }
#stage.grabbing { cursor:grabbing; }
#box { position:relative; transform-style:preserve-3d; will-change:transform; }
/* Every surface is sized to its own edge of the cross-section and centred in
   the box, so one translate and one rotate place it. The selectors all carry
   #box: without it .f's own width and left win on specificity. */
#box .f { position:absolute; transform-origin:50% 50%; backface-visibility:hidden;
  background-repeat:no-repeat; background-color:#f2efe8; }
#box .f::after { content:""; position:absolute; inset:0; background:#000;
  opacity:var(--dark,0); }
/* The cut edge of the card, catching the light along the top of every wall. */
#box .wall { box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(0,0,0,.18); }
#shadow { position:absolute; left:50%; top:50%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.36), transparent 68%);
  filter:blur(15px); }
#views { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; padding:0 16px; }
#views button { font:inherit; font-size:13px; color:var(--fg); cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:20px; padding:6px 13px; }
#views button:hover { border-color:var(--fg); }
#views button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.hint { color:var(--muted); font-size:12px; margin:12px 0 0; text-align:center; }
.missing { color:var(--muted); padding:60px 0; }