.pack-view-switch {
  position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:615;
  display:flex;padding:4px;gap:3px;border:1px solid #ffffff12;border-radius:12px;
  background:#191b23d9;box-shadow:0 6px 24px #0003;backdrop-filter:blur(14px);
}
.pack-view-switch button { border:0;border-radius:8px;padding:8px 17px;background:transparent;color:#8d919e;font:inherit;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap; }
.pack-view-switch button[aria-pressed="true"] { color:#f0edf7;background:#34313f;box-shadow:0 2px 8px #0002; }
.pack-view-switch span { margin-left:5px;font-size:10px;color:#b4abca; }
#box-stage { display:none;position:fixed;inset:80px 0 var(--console-height);z-index:3;touch-action:none;cursor:grab;user-select:none; }
#box-stage.is-rotating { cursor:grabbing!important; }
.box-busy .pack-view-switch { pointer-events:none;opacity:.45; }
.box-busy #box-stage { cursor:wait!important; }
#box-stage:focus { outline:0; }
#box-stage:focus-visible:not(.pointer-focus) { outline:1px solid #b4abca55;outline-offset:-6px; }
#box-stage canvas { display:block;width:100%;height:100%;outline:0; }
.box-view #box-stage { display:block; }
.box-view #pack-stage { visibility:hidden;pointer-events:none; }
.box-view .hint { display:none; }
.box-info { display:none; }
.box-view .box-info { display:block; }
.box-caption { position:fixed;z-index:4;left:max(28px,calc(50% - 520px));top:118px;pointer-events:none; }
.box-caption > span { font:500 10px/1.5 "Segoe UI",sans-serif;letter-spacing:.2em;color:#a3a0af; }
.box-caption h1 { margin:9px 0 7px;color:#e9e7ef;font-size:24px;font-weight:500;letter-spacing:.015em; }
.box-caption p { color:#777d8c;font-size:11px;margin:0; }
.box-caption p.box-orbit-help { margin-top:12px;color:#b5b0c3; }
#box-angle { margin-left:10px;font-variant-numeric:tabular-nums;color:#827b94; }
.box-action-row { position:fixed;z-index:615;bottom:calc(var(--console-height) + 14px);left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;white-space:nowrap; }
.box-action-row button { border:1px solid #ffffff20;border-radius:9px;background:#24242edb;color:#dedce8;padding:9px 15px;font:inherit;font-size:11px;cursor:pointer;backdrop-filter:blur(10px); }
.box-action-row button:first-child { color:#252330;background:#e0dbea;border-color:#e0dbea;font-weight:600; }
.box-action-row button:disabled { opacity:.4;cursor:default; }
.box-action-row button:hover:not(:disabled) { filter:brightness(1.12); }
#box-count { font-size:11px;color:#8c8b9b;min-width:65px;text-align:right; }
.box-fallback { max-width:360px;padding:24px;border:1px solid #ffffff15;border-radius:12px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#aaa6b3;line-height:1.8;font-size:13px; }
@media(min-width:761px) {
  .packs-scattered .box-caption { left:24px;top:110px;max-width:165px; }
  .packs-scattered .box-caption h1 { font-size:18px;line-height:1.45; }
  .packs-scattered .box-caption p { line-height:1.7; }
}
@media(max-width:760px) {
  .pack-view-switch { top:95px; }
  #box-stage { top:174px; }
  body.single-pack #pack-stage { top:148px; }
  body.single-pack .realistic-pack .pack { width:min(var(--pack-width,380px),calc((100dvh - var(--console-height) - 200px) * .6036),calc(100vw - 48px)); }
  .box-caption { top:155px;left:24px; }
  .box-caption h1 { font-size:18px;margin:5px 0; }
  .box-caption > span { font-size:8px; }
  .box-caption p { font-size:9px; }
  .box-action-row { gap:7px;bottom:calc(var(--console-height) + 10px); }
  .box-action-row button { padding:8px 10px;font-size:10px; }
  #box-count { min-width:55px;font-size:10px; }
}