.paper-archive-module.paper-archive-spatial-active > .paper-archive-panel {
  grid-template-rows: minmax(0, 1fr);
}

.paper-archive-module.paper-archive-spatial-active .paper-archive-header,
.paper-archive-module.paper-archive-spatial-active .paper-archive-tabs {
  display: none;
}

.paper-archive-content.paper-archive-spatial-host {
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(ellipse at 43% 7%, rgba(255, 255, 255, 0.9), transparent 42%),
    linear-gradient(180deg, #dfe9e5 0%, #cbd8d3 100%);
}

.paper-archive-3d {
  --pa3d-ink: #17352d;
  --pa3d-muted: #60736d;
  --pa3d-green: #14895f;
  --pa3d-green-soft: rgba(20, 137, 95, 0.13);
  --pa3d-line: rgba(64, 103, 91, 0.2);
  --pa3d-glass: rgba(249, 252, 251, 0.4);
  --pa3d-space-ceiling: #e8f0ed;
  --pa3d-space-wall: #d5e1dd;
  --pa3d-space-floor: #c3d0cb;
  --pa3d-metal-light: #f1f5f3;
  --pa3d-metal: #cbd5d1;
  --pa3d-metal-mid: #aab8b3;
  --pa3d-metal-dark: #71807b;
  --pa3d-blue: #a9bec8;
  --pa3d-blue-deep: #657f8b;
  --pa3d-kraft: #c99757;
  --pa3d-object-shadow: 0 24px 42px rgba(43, 63, 56, 0.16);
  --pa3d-cabinet-open-duration: 760ms;
  --pa3d-box-open-duration: 980ms;
  --pa3d-box-close-duration: 960ms;
  --pa3d-box-restack-duration: 680ms;
  --pa3d-bag-open-duration: 680ms;
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 560px;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  color: var(--pa3d-ink);
  background:
    radial-gradient(ellipse at 42% 0%, rgba(255, 255, 255, 0.88), transparent 46%),
    linear-gradient(180deg, var(--pa3d-space-ceiling), var(--pa3d-space-wall) 58%, var(--pa3d-space-floor));
  isolation: isolate;
}

.paper-archive-3d,
.paper-archive-3d * {
  box-sizing: border-box;
}

.paper-archive-3d button {
  font: inherit;
}

.pa3d-header {
  position: relative;
  z-index: 30;
  display: grid;
  min-height: 62px;
  grid-template-columns: minmax(145px, 1fr) minmax(180px, 1.4fr) minmax(145px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(73, 108, 97, 0.16);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 30px rgba(29, 60, 51, 0.05);
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
}

.pa3d-back {
  justify-self: start;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(60, 98, 86, 0.24);
  border-radius: 12px;
  color: var(--pa3d-ink);
  background: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.pa3d-back:hover {
  border-color: rgba(20, 137, 95, 0.5);
  background: #fff;
  transform: translateX(-2px);
}

.pa3d-heading {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  text-align: center;
}

.pa3d-heading strong {
  max-width: 100%;
  overflow: hidden;
  color: #102c24;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa3d-heading span {
  max-width: 100%;
  overflow: hidden;
  color: var(--pa3d-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa3d-mode-badge {
  justify-self: end;
  padding: 8px 13px;
  border: 1px solid rgba(20, 137, 95, 0.22);
  border-radius: 999px;
  color: #0d7350;
  background: rgba(226, 246, 237, 0.72);
  font-size: 12px;
  white-space: nowrap;
}

.pa3d-layout {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 262px);
  gap: 14px;
  justify-content: stretch;
  padding: 14px 12px 24px 20px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 43% 16%, rgba(255, 255, 255, 0.7), transparent 43%),
    radial-gradient(ellipse at 50% 71%, rgba(103, 132, 121, 0.11), transparent 48%),
    linear-gradient(100deg, rgba(83, 111, 101, 0.11) 0%, transparent 15%, transparent 85%, rgba(83, 111, 101, 0.1) 100%),
    linear-gradient(180deg, rgba(233, 241, 238, 0.72) 0 25%, rgba(211, 224, 219, 0.82) 61.8%, rgba(112, 136, 127, 0.2) 62%, rgba(194, 207, 202, 0.92) 62.4% 100%);
  perspective: 1600px;
  transform-style: preserve-3d;
}

.pa3d-layout::before {
  position: absolute;
  z-index: 0;
  right: -7%;
  bottom: -20%;
  left: -7%;
  height: 62%;
  opacity: 0.56;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 9.86%, rgba(68, 96, 87, 0.13) 9.94% 10.05%),
    repeating-linear-gradient(0deg, transparent 0 17.7%, rgba(68, 96, 87, 0.12) 17.86% 18.08%),
    linear-gradient(180deg, rgba(228, 236, 233, 0.22), rgba(126, 149, 140, 0.13));
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  content: "";
  transform: rotateX(61deg) translateZ(-42px);
  transform-origin: center bottom;
}

.pa3d-layout::after {
  position: absolute;
  z-index: 0;
  top: -11%;
  right: -7%;
  left: -7%;
  height: 41%;
  opacity: 0.56;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(91, 118, 109, 0.1) 50%, transparent 50.1%),
    repeating-linear-gradient(90deg, transparent 0 16.55%, rgba(101, 126, 118, 0.065) 16.67%),
    linear-gradient(180deg, rgba(247, 251, 249, 0.72), rgba(216, 229, 224, 0.1));
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
  content: "";
  transform: translateZ(-86px);
  transform-origin: center top;
}

.pa3d-room-layout {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
}

.pa3d-room-layout .pa3d-hud {
  display: none;
}

.pa3d-scene {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 480px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.pa3d-scene::before {
  display: none;
}

.pa3d-floor {
  display: none;
}

.pa3d-hud {
  position: relative;
  z-index: 15;
  align-self: stretch;
  justify-self: end;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 262px;
  max-height: none;
  padding: 20px 18px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.14) 52%, rgba(255, 255, 255, 0.08) 100%),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.76),
    inset -1px -1px 0 rgba(64, 71, 68, 0.1),
    inset 0 -9px 18px rgba(44, 51, 48, 0.026),
    0 18px 38px rgba(37, 51, 46, 0.1);
  backdrop-filter: blur(16px) saturate(130%) contrast(1.02);
  -webkit-backdrop-filter: blur(16px) saturate(130%) contrast(1.02);
  scrollbar-width: thin;
  transition: opacity 180ms ease, filter 180ms ease;
}

.pa3d-hud::before {
  position: absolute;
  z-index: 0;
  top: 1px;
  right: 18px;
  bottom: 18%;
  left: 1px;
  border-radius: 25px 0 0 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.44), transparent 18%) 0 0 / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent 24%) 0 0 / 100% 1px no-repeat,
    radial-gradient(ellipse at 18% 3%, rgba(255, 255, 255, 0.1), transparent 38%);
  pointer-events: none;
  content: "";
}

.pa3d-hud > * {
  position: relative;
  z-index: 1;
}

.pa3d-hud.is-pending {
  opacity: 0.62;
  filter: saturate(0.72);
  pointer-events: none;
}

.paper-archive-3d.is-interaction-locked .pa3d-back,
.paper-archive-3d.is-camera-transitioning .pa3d-back {
  opacity: 0.66;
  pointer-events: none;
}

.pa3d-hud::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 1px;
  left: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(64, 92, 83, 0.2) 32% 68%, transparent);
  pointer-events: none;
}

.pa3d-hud-eyebrow {
  margin-bottom: 8px;
  color: var(--pa3d-green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.pa3d-hud h3 {
  margin: 0;
  color: #15342b;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.25;
}

.pa3d-hud > p {
  margin: 10px 0 16px;
  color: var(--pa3d-muted);
  font-size: 13px;
  line-height: 1.65;
}

.pa3d-stat-line {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.pa3d-stat-line span {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 0;
  border-bottom: 1px solid rgba(68, 105, 93, 0.13);
  border-radius: 0;
  color: var(--pa3d-muted);
  background: transparent;
  font-size: 11px;
}

.pa3d-stat-line b {
  color: var(--pa3d-ink);
  font-size: 18px;
}

.pa3d-hud-list {
  display: grid;
  gap: 7px;
}

.pa3d-hud-list.compact {
  gap: 5px;
}

.pa3d-hud-row {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 53px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--pa3d-ink);
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.pa3d-hud-row:hover,
.pa3d-hud-row:focus-visible {
  border-color: rgba(72, 102, 92, 0.16);
  outline: none;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: none;
  transform: translateY(-1px);
}

.pa3d-hud-row.static {
  cursor: default;
}

.pa3d-hud-row.static:hover {
  border-color: rgba(65, 104, 92, 0.14);
  box-shadow: none;
  transform: none;
}

.pa3d-hud-row span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.pa3d-hud-row strong,
.pa3d-hud-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa3d-hud-row strong {
  font-size: 13px;
  font-weight: 650;
}

.pa3d-hud-row small {
  color: var(--pa3d-muted);
  font-size: 11px;
}

.pa3d-hud-row em {
  flex: 0 0 auto;
  color: var(--pa3d-green);
  font-size: 11px;
  font-style: normal;
}

.pa3d-hud-empty {
  padding: 28px 16px;
  border: 1px dashed rgba(77, 111, 101, 0.28);
  border-radius: 14px;
  color: var(--pa3d-muted);
  text-align: center;
  font-size: 13px;
}

.pa3d-notice {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 11px 12px;
  border: 0;
  border-left: 2px solid rgba(194, 135, 48, 0.28);
  border-radius: 0;
  color: #785423;
  background: transparent;
}

.pa3d-notice.neutral {
  margin: 0 0 14px;
  border-color: rgba(76, 107, 98, 0.2);
  color: var(--pa3d-ink);
  background: transparent;
}

.pa3d-notice strong {
  font-size: 12px;
}

.pa3d-notice span {
  color: inherit;
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.82;
}

.pa3d-room-light {
  position: absolute;
  z-index: 0;
  top: 4%;
  left: 50%;
  width: 72%;
  height: 24%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.82), rgba(235, 243, 240, 0.18) 46%, transparent 72%);
  filter: blur(18px);
  transform: translateX(-50%);
}

.pa3d-cabinet-grid {
  position: absolute;
  z-index: 4;
  inset: 4% 5% 13%;
  display: grid;
  grid-template-columns: repeat(4, minmax(84px, 1fr));
  align-content: center;
  gap: clamp(10px, 2vw, 24px);
  transform-style: preserve-3d;
}

.pa3d-cabinet-grid.is-transitioning {
  pointer-events: none;
}

.pa3d-cabinet-grid.is-transitioning > .pa3d-room-cabinet:not(.is-opening):not(.is-open):not(.is-camera-entering) {
  opacity: 0.52;
  filter: saturate(0.7) brightness(0.98);
  transform: translateZ(-10px) scale(0.992);
}

.pa3d-room-cabinet {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 8px;
  padding: 8px 4px;
  border: 0;
  color: var(--pa3d-ink);
  background: transparent;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 220ms ease, filter 220ms ease, opacity 180ms ease;
}

.pa3d-room-cabinet:hover,
.pa3d-room-cabinet:focus-visible {
  z-index: 5;
  outline: none;
  filter: drop-shadow(0 8px 10px rgba(24, 57, 47, 0.12));
  transform: translate3d(0, -2px, 8px) scale(1.006);
}

.pa3d-room-cabinet-body {
  position: relative;
  display: block;
  width: clamp(68px, 8.5vw, 104px);
  aspect-ratio: 0.72;
  border: 2px solid #788781;
  border-radius: 5px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.74) 0 7%, transparent 19% 74%, rgba(93, 111, 104, 0.16) 100%),
    linear-gradient(145deg, var(--pa3d-metal-light), var(--pa3d-metal-mid));
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.78),
    inset -2px -2px 0 rgba(73, 91, 84, 0.12),
    7px 10px 0 rgba(76, 94, 87, 0.15),
    0 17px 28px rgba(44, 65, 58, 0.14);
  transform: rotateX(-2deg) rotateY(-2deg);
  transform-style: preserve-3d;
  perspective: 720px;
  transition: transform 360ms cubic-bezier(0.18, 0.74, 0.2, 1), box-shadow 180ms ease, filter 180ms ease;
}

.pa3d-room-cabinet-body::before,
.pa3d-room-cabinet-body::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.pa3d-room-cabinet-body::before {
  top: -7px;
  right: -3px;
  left: 2px;
  height: 8px;
  border: 1px solid rgba(94, 112, 105, 0.48);
  background: linear-gradient(180deg, #f5f8f7, #bcc8c4);
  clip-path: polygon(4% 0, 94% 0, 100% 100%, 0 100%);
  transform: rotateX(64deg);
  transform-origin: center bottom;
}

.pa3d-room-cabinet-body::after {
  top: 1px;
  right: -7px;
  bottom: -3px;
  width: 8px;
  border: 1px solid rgba(79, 98, 91, 0.36);
  background: linear-gradient(90deg, #a8b5b0, #71817b);
  clip-path: polygon(0 0, 100% 3%, 100% 97%, 0 100%);
  transform: rotateY(24deg);
  transform-origin: left center;
}

.pa3d-room-cabinet-interior {
  position: absolute;
  z-index: 1;
  inset: 3px;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  overflow: hidden;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(32, 50, 44, 0.2), transparent 14%, transparent 84%, rgba(38, 56, 50, 0.2)),
    linear-gradient(180deg, #b9c5c1, #9caeA8);
  box-shadow:
    inset 0 0 16px rgba(31, 52, 46, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateZ(0);
}

.pa3d-room-mini-shelf {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-row: var(--mini-shelf-no);
  align-items: end;
  overflow: hidden;
  border-bottom: 2px solid #667971;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(44, 67, 60, 0.055));
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.22);
}

.pa3d-room-mini-shelf::after {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: rgba(55, 76, 69, 0.34);
  content: "";
}

.pa3d-room-mini-boxes {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  height: 100%;
  align-items: flex-end;
  gap: 1px;
  padding: 3px 3px 2px;
  overflow: hidden;
}

.pa3d-room-mini-box {
  display: grid;
  flex: 0 1 clamp(7px, 0.9vw, 11px);
  width: clamp(7px, 0.9vw, 11px);
  min-width: 5px;
  height: calc(100% - 1px);
  min-height: 0;
  place-items: center;
  padding: 1px 0;
  overflow: hidden;
  border: 1px solid #657f8b;
  border-radius: 2px 2px 1px 1px;
  color: #314f5b;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.58), transparent 34% 78%, rgba(63, 83, 91, 0.11)),
    #aec2ca;
  box-shadow: 1px 1px 0 rgba(47, 67, 74, 0.18);
  font-size: clamp(4px, 0.46vw, 6px);
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.pa3d-room-cabinet-door {
  position: absolute;
  z-index: 3;
  top: 3px;
  bottom: 3px;
  width: calc(50% - 3px);
  border: 1px solid rgba(84, 102, 96, 0.58);
  background:
    linear-gradient(108deg, rgba(255, 255, 255, 0.86) 0 8%, transparent 22% 72%, rgba(86, 103, 97, 0.15) 100%),
    linear-gradient(140deg, #f4f7f6, #c8d2ce 66%, #a4b1ac);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.82),
    inset -2px -1px 0 rgba(71, 89, 82, 0.13),
    0 2px 3px rgba(39, 58, 52, 0.1);
  backface-visibility: visible;
  transform-style: preserve-3d;
  transition: transform var(--pa3d-cabinet-open-duration) linear, box-shadow 180ms ease;
  will-change: transform;
}

.pa3d-room-cabinet-door::before {
  position: absolute;
  z-index: -1;
  inset: 1px;
  border: 1px solid rgba(75, 94, 87, 0.46);
  border-radius: 2px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.42), transparent 32%),
    linear-gradient(90deg, #a7b5b0, #d5ddda);
  box-shadow: 0 0 0 2px #7f9089;
  content: "";
  transform: translateZ(-3px);
}

.pa3d-room-cabinet-door::after {
  position: absolute;
  z-index: 5;
  top: 11%;
  bottom: 11%;
  width: 4px;
  border: 1px solid rgba(68, 87, 80, 0.58);
  border-radius: 4px;
  background:
    repeating-linear-gradient(180deg, #687972 0 9%, #d6dedb 9% 13%, transparent 13% 39%),
    #86968f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.32);
  content: "";
  transform: translateZ(3px);
}

.pa3d-room-cabinet-door.left {
  left: 3px;
  transform-origin: left center;
}

.pa3d-room-cabinet-door.left::after {
  left: -3px;
}

.pa3d-room-cabinet-door.right {
  right: 3px;
  transform-origin: right center;
}

.pa3d-room-cabinet-door.right::after {
  right: -3px;
}

.pa3d-room-cabinet-door i {
  position: absolute;
  top: 46%;
  width: 3px;
  height: 14%;
  border-radius: 4px;
  border: 1px solid rgba(52, 71, 64, 0.56);
  background: linear-gradient(90deg, #667a72, #aab8b3 52%, #5d7169);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.42) inset;
}

.pa3d-room-cabinet-door.left i {
  right: 3px;
}

.pa3d-room-cabinet-door.right i {
  left: 3px;
}

.pa3d-room-cabinet-number {
  position: absolute;
  top: 9%;
  left: 50%;
  z-index: 5;
  min-width: 28px;
  padding: 3px 4px;
  border: 1px solid rgba(78, 98, 92, 0.28);
  border-radius: 4px;
  color: #42554f;
  background: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  text-align: center;
  transform: translateX(-50%);
  transition: opacity 160ms ease, transform 180ms ease;
}

.pa3d-room-cabinet.is-opening,
.pa3d-room-cabinet.is-open {
  z-index: 12;
  filter: drop-shadow(0 12px 16px rgba(24, 57, 47, 0.16));
}

.pa3d-room-cabinet.is-opening .pa3d-room-cabinet-door.left,
.pa3d-room-cabinet.is-open .pa3d-room-cabinet-door.left {
  transform: rotateY(-112deg);
}

.pa3d-room-cabinet.is-opening .pa3d-room-cabinet-door.right,
.pa3d-room-cabinet.is-open .pa3d-room-cabinet-door.right {
  transform: rotateY(112deg);
}

.pa3d-room-cabinet.is-opening .pa3d-room-cabinet-number,
.pa3d-room-cabinet.is-open .pa3d-room-cabinet-number {
  opacity: 0;
  transform: translateX(-50%) translateZ(-8px) scale(0.96);
}

.pa3d-room-cabinet-meta {
  display: grid;
  min-width: 0;
  gap: 2px;
  text-align: center;
  transition: opacity 180ms ease;
}

.pa3d-room-cabinet-meta strong {
  font-size: 12px;
}

.pa3d-room-cabinet-meta small {
  color: var(--pa3d-muted);
  font-size: 10px;
}

.pa3d-cabinet-scene {
  display: grid;
  place-items: center;
  padding: 28px 12%;
}

.pa3d-cabinet-focus {
  position: relative;
  z-index: 4;
  width: min(330px, 72%);
  aspect-ratio: 0.82;
  perspective: 1320px;
  perspective-origin: 50% 44%;
  transform: translateY(14px) scale(0.84);
  transform-style: preserve-3d;
  transform-origin: center 72%;
  transition: transform 280ms cubic-bezier(0.18, 0.72, 0.2, 1);
}

.pa3d-cabinet-focus.is-near {
  transform: translateY(0) scale(1);
}

.pa3d-cabinet-focus.is-arrived {
  transition: none;
  will-change: auto;
}

.pa3d-full-cabinet {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 9px solid #7b8a84;
  border-top-width: 14px;
  border-radius: 8px 8px 5px 5px;
  background:
    linear-gradient(108deg, rgba(255, 255, 255, 0.52), transparent 18% 76%, rgba(58, 78, 70, 0.15)),
    var(--pa3d-metal-mid);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.66),
    inset -2px -2px 0 rgba(62, 80, 73, 0.16),
    14px 19px 0 rgba(67, 83, 77, 0.13),
    0 34px 44px rgba(41, 64, 57, 0.22);
  transform-style: preserve-3d;
  overflow: visible;
}

.pa3d-full-cabinet::before {
  position: absolute;
  z-index: 0;
  top: 1px;
  right: -19px;
  bottom: -8px;
  width: 19px;
  border: 1px solid rgba(69, 88, 81, 0.4);
  background: linear-gradient(90deg, #a8b5b0, #70807a);
  box-shadow: 2px 0 4px rgba(42, 59, 53, 0.12);
  clip-path: polygon(0 0, 100% 2.5%, 100% 97.5%, 0 100%);
  content: "";
  transform: rotateY(22deg);
  transform-origin: left center;
}

.pa3d-full-cabinet::after {
  position: absolute;
  z-index: -1;
  right: -14%;
  bottom: -18px;
  left: 6%;
  height: 24px;
  border-radius: 50%;
  background: rgba(48, 68, 60, 0.18);
  filter: blur(9px);
  pointer-events: none;
  content: "";
  transform: translateZ(-28px) rotateX(76deg);
}

.pa3d-cabinet-top {
  position: absolute;
  top: -15px;
  right: -10px;
  left: -10px;
  height: 12px;
  border-radius: 5px 5px 0 0;
  border: 1px solid rgba(86, 105, 98, 0.42);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.66), transparent 18% 80%, rgba(76, 94, 87, 0.14)),
    linear-gradient(180deg, #edf2f0, #9eada8);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5);
}

.pa3d-cabinet-interior {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  grid-auto-rows: minmax(58px, 1fr);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(27, 47, 40, 0.18), transparent 12%, transparent 86%, rgba(26, 45, 39, 0.2)),
    linear-gradient(180deg, #bdc8c4, #9caca6);
  box-shadow:
    inset 0 0 30px rgba(34, 57, 50, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  opacity: 1;
  visibility: visible;
  transform: translateZ(0);
  backface-visibility: hidden;
  isolation: isolate;
}

.pa3d-cabinet-shelf {
  position: relative;
  display: grid;
  min-height: 0;
  align-items: end;
  padding: 8px 14px 8px 30px;
  border-bottom: 7px solid #687a73;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(44, 66, 59, 0.085));
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.28);
}

.pa3d-shelf-label {
  position: absolute;
  top: 7px;
  left: 5px;
  color: rgba(39, 63, 55, 0.72);
  font-size: 9px;
  writing-mode: vertical-rl;
}

.pa3d-shelf-boxes {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: stretch;
  gap: 5px;
}

.pa3d-box-spine {
  position: relative;
  display: grid;
  width: clamp(18px, 2.2vw, 22px);
  min-height: 55px;
  place-items: center;
  padding: 5px 2px;
  overflow: hidden;
  border: 1px solid var(--pa3d-blue-deep);
  border-radius: 3px 3px 1px 1px;
  color: #314f5b;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.62), transparent 34% 78%, rgba(57, 79, 87, 0.12)),
    var(--pa3d-blue);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.42),
    0 7px 14px rgba(43, 63, 56, 0.1);
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}

.pa3d-box-spine-code {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  transition: opacity 160ms ease;
}

.pa3d-box-spine-front {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: auto;
  height: calc(100% + 4px);
  aspect-ratio: 0.85;
  align-content: center;
  gap: 3px;
  padding: 7px 8px;
  overflow: hidden;
  border: 1px solid var(--pa3d-blue-deep);
  border-radius: 3px 8px 8px 3px;
  color: #304f5b;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.52) 0 11%, rgba(62, 84, 92, 0.14) 11.5% 12.5%, transparent 13%),
    linear-gradient(145deg, #c8d7dc, #94abb5);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.58),
    8px 12px 18px rgba(47, 69, 77, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) rotateY(88deg);
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 420ms cubic-bezier(0.18, 0.74, 0.2, 1), opacity 90ms linear;
  will-change: transform;
}

.pa3d-box-spine-front-code {
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1;
}

.pa3d-box-spine-front-name,
.pa3d-box-spine-front-location {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.25;
  -webkit-box-orient: vertical;
}

.pa3d-box-spine-front-name {
  font-size: clamp(7px, 0.62vw, 9px);
  font-weight: 700;
  -webkit-line-clamp: 2;
}

.pa3d-box-spine-front-location {
  color: #5d716a;
  font-size: clamp(6px, 0.54vw, 8px);
  -webkit-line-clamp: 1;
}

.pa3d-cabinet-scene,
.pa3d-box-scene {
  --pa3d-box-target-width: min(660px, 86%);
  --pa3d-box-target-aspect: 1.7;
}

.pa3d-cabinet-scene.is-box-turning {
  pointer-events: none;
  transform-style: preserve-3d;
}

.pa3d-cabinet-scene.is-box-turning .pa3d-box-spine:not(.is-turning-front):not(.is-turned-front) {
  opacity: 0.56;
  filter: saturate(0.72);
}

.pa3d-cabinet-scene .pa3d-box-spine.is-turning-front,
.pa3d-cabinet-scene .pa3d-box-spine.is-turned-front {
  z-index: 12;
  opacity: 1;
  overflow: visible;
  pointer-events: none;
  transform: none;
  transform-style: preserve-3d;
  filter: brightness(1.035);
}

.pa3d-cabinet-scene .pa3d-box-spine.is-turning-front .pa3d-box-spine-code,
.pa3d-cabinet-scene .pa3d-box-spine.is-turned-front .pa3d-box-spine-code {
  opacity: 0;
}

.pa3d-cabinet-scene .pa3d-box-spine.is-turning-front .pa3d-box-spine-front,
.pa3d-cabinet-scene .pa3d-box-spine.is-turned-front .pa3d-box-spine-front {
  opacity: 1;
  transform: translateY(-50%) rotateY(0deg);
}

.pa3d-box-spine.is-flight-source-hidden .pa3d-box-spine-front {
  visibility: hidden;
}

.pa3d-box-flight,
.pa3d-box-flight * {
  box-sizing: border-box;
}

.pa3d-box-flight {
  --pa3d-blue-deep: #657f8b;
  --pa3d-flight-depth: 14px;
  --pa3d-flight-shell-transform: rotateY(88deg);
  position: fixed;
  z-index: 10000;
  overflow: visible;
  pointer-events: none;
  perspective: 1400px;
  transform:
    translate3d(var(--pa3d-flight-x, 0), var(--pa3d-flight-y, 0), 0)
    scale(var(--pa3d-flight-scale-x, 1), var(--pa3d-flight-scale-y, 1));
  transform-origin: left top;
  transform-style: preserve-3d;
  transition: transform 620ms linear;
  will-change: transform;
}

.pa3d-box-flight.is-approaching,
.pa3d-box-flight.is-approached,
.pa3d-box-flight.is-at-target {
  transform: translate3d(0, 0, 0) scale(1);
}

.pa3d-box-flight.is-flying {
  --pa3d-flight-shell-transform: rotateY(88deg);
  transform: translate3d(0, 0, 0) scale(1);
}

.pa3d-box-flight.is-turning-front {
  --pa3d-flight-shell-transform: rotateY(0deg);
}

.pa3d-box-flight.is-turned-front,
.pa3d-box-flight.is-front-facing,
.pa3d-box-flight.is-facing {
  --pa3d-flight-shell-transform: rotateY(0deg);
}

.pa3d-box-flight.is-reduced-motion {
  transition-duration: 0.01ms;
}

.pa3d-box-flight.is-reduced-motion > .pa3d-box-flight-object,
.pa3d-box-flight.is-reduced-motion > .pa3d-box-flight-shell,
.pa3d-box-flight.is-reduced-motion .pa3d-box-flight-face,
.pa3d-box-flight.is-reduced-motion .pa3d-box-flight-spine {
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
}

.pa3d-box-flight > .pa3d-box-flight-object,
.pa3d-box-flight > .pa3d-box-flight-shell {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 0 12px 12px 0;
  backface-visibility: visible;
  transform: var(--pa3d-flight-shell-transform);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: none;
  will-change: transform;
}

.pa3d-box-flight > .pa3d-box-flight-object::before,
.pa3d-box-flight > .pa3d-box-flight-shell::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 2px solid var(--pa3d-blue-deep);
  border-radius: 0 12px 12px 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), transparent 38% 78%, rgba(57, 80, 89, 0.14)),
    #91a9b2;
  box-shadow: 0 13px 24px rgba(47, 69, 77, 0.13);
  content: "";
  transform: translateZ(-14px);
}

.pa3d-box-flight > .pa3d-box-flight-object::after,
.pa3d-box-flight > .pa3d-box-flight-shell::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--pa3d-flight-depth);
  border: 1px solid var(--pa3d-blue-deep);
  border-radius: 4px 0 0 4px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.58), transparent 42% 76%, rgba(55, 78, 87, 0.18)),
    #9bb1ba;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.48);
  content: "";
  transform: rotateY(-90deg);
  transform-origin: left center;
}

.pa3d-box-flight.is-turning-front > .pa3d-box-flight-object,
.pa3d-box-flight.is-turning-front > .pa3d-box-flight-shell,
.pa3d-box-flight.is-turned-front > .pa3d-box-flight-object,
.pa3d-box-flight.is-turned-front > .pa3d-box-flight-shell,
.pa3d-box-flight.is-front-facing > .pa3d-box-flight-object,
.pa3d-box-flight.is-front-facing > .pa3d-box-flight-shell,
.pa3d-box-flight.is-facing > .pa3d-box-flight-object,
.pa3d-box-flight.is-facing > .pa3d-box-flight-shell {
  transform: var(--pa3d-flight-shell-transform);
  transition: transform 440ms cubic-bezier(0.18, 0.74, 0.2, 1);
}

.pa3d-box-flight-face {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--pa3d-blue-deep);
  border-radius: 0 12px 12px 0;
  color: #294955;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), transparent 38% 78%, rgba(57, 80, 89, 0.12)),
    #a9bec8;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.52),
    8px 12px 20px rgba(47, 69, 77, 0.15);
  opacity: 0;
  backface-visibility: hidden;
  font-family: inherit;
  transform: translateZ(1px);
  transition: opacity 120ms linear;
}

.pa3d-box-flight.is-turning-front .pa3d-box-flight-face,
.pa3d-box-flight.is-turned-front .pa3d-box-flight-face,
.pa3d-box-flight.is-front-facing .pa3d-box-flight-face,
.pa3d-box-flight.is-facing .pa3d-box-flight-face {
  opacity: 1;
}

.pa3d-box-flight-spine {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: 0;
  display: grid;
  width: var(--pa3d-flight-depth);
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--pa3d-blue-deep);
  border-radius: 4px 0 0 4px;
  color: #314f5b;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.62), transparent 38% 78%, rgba(57, 79, 87, 0.15)),
    #a9bec8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  opacity: 1;
  transform: rotateY(-90deg);
  transform-origin: left center;
  transition: opacity 120ms linear;
}

.pa3d-box-flight > .pa3d-box-flight-object:has(.pa3d-box-flight-spine)::after,
.pa3d-box-flight > .pa3d-box-flight-shell:has(.pa3d-box-flight-spine)::after {
  display: none;
}

.pa3d-box-flight.is-turning-front .pa3d-box-flight-spine,
.pa3d-box-flight.is-turned-front .pa3d-box-flight-spine,
.pa3d-box-flight.is-front-facing .pa3d-box-flight-spine,
.pa3d-box-flight.is-facing .pa3d-box-flight-spine {
  opacity: 0;
}

.pa3d-box-flight:not(:has(.pa3d-box-flight-object)):not(:has(.pa3d-box-flight-shell)) .pa3d-box-flight-face {
  opacity: 1;
  transform: rotateY(88deg);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: none;
}

.pa3d-box-flight:not(:has(.pa3d-box-flight-object)):not(:has(.pa3d-box-flight-shell)).is-turning-front .pa3d-box-flight-face,
.pa3d-box-flight:not(:has(.pa3d-box-flight-object)):not(:has(.pa3d-box-flight-shell)).is-turned-front .pa3d-box-flight-face,
.pa3d-box-flight:not(:has(.pa3d-box-flight-object)):not(:has(.pa3d-box-flight-shell)).is-front-facing .pa3d-box-flight-face,
.pa3d-box-flight:not(:has(.pa3d-box-flight-object)):not(:has(.pa3d-box-flight-shell)).is-facing .pa3d-box-flight-face {
  opacity: 1;
  transform: rotateY(0deg);
  transition: transform 440ms cubic-bezier(0.18, 0.74, 0.2, 1), opacity 120ms linear;
}

.pa3d-box-flight .pa3d-bag-surface,
.pa3d-box-flight .pa3d-bag-deck,
.pa3d-box-flight .pa3d-bag-card {
  display: none !important;
}

.pa3d-box-spine:hover,
.pa3d-box-spine:focus-visible {
  z-index: 4;
  outline: 2px solid rgba(20, 137, 95, 0.3);
  transform: translate3d(0, -2px, 5px);
  filter: brightness(1.015);
}

.pa3d-empty-slot {
  align-self: center;
  color: rgba(54, 77, 70, 0.4);
  font-size: 10px;
}

.pa3d-cabinet-door {
  position: absolute;
  z-index: 8;
  top: -5px;
  bottom: -5px;
  width: calc(50% + 7px);
  border: 2px solid #6f7f79;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.88) 0 8%, transparent 23% 73%, rgba(75, 93, 86, 0.15) 100%),
    linear-gradient(90deg, #e8eeec, #bec9c5 72%, #a2b0aa);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.78),
    inset -3px -2px 0 rgba(67, 85, 78, 0.13),
    0 3px 5px rgba(41, 59, 53, 0.11);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform var(--pa3d-cabinet-open-duration) linear;
  will-change: transform;
}

.pa3d-cabinet-door::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 1px solid rgba(68, 87, 80, 0.42);
  border-radius: inherit;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.48), transparent 28% 74%, rgba(59, 79, 71, 0.18)),
    repeating-linear-gradient(180deg, transparent 0 32%, rgba(73, 94, 86, 0.08) 32.2% 32.8%),
    linear-gradient(90deg, #96a8a1, #d2dcD8 62%, #a9b8b2);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.36),
    inset -3px -2px 0 rgba(57, 77, 69, 0.17),
    0 0 0 4px #73867e;
  transform: rotateY(180deg) translateZ(5px);
  backface-visibility: hidden;
}

.pa3d-cabinet-door::after {
  position: absolute;
  z-index: 4;
  top: 9%;
  bottom: 9%;
  width: 8px;
  border: 1px solid rgba(58, 78, 70, 0.52);
  border-radius: 6px;
  background:
    repeating-linear-gradient(180deg, #687a73 0 8%, #dbe2df 8% 11%, transparent 11% 39%),
    #879790;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.4),
    0 0 0 1px rgba(53, 72, 65, 0.12);
  content: "";
  transform: translateZ(4px);
}

.pa3d-cabinet-door-left {
  left: -5px;
  border-radius: 7px 2px 2px 7px;
  transform-origin: left center;
}

.pa3d-cabinet-door-left::after {
  left: -6px;
}

.pa3d-cabinet-door-right {
  right: -5px;
  border-radius: 2px 7px 7px 2px;
  transform-origin: right center;
}

.pa3d-cabinet-door-right::after {
  right: -6px;
}

.pa3d-full-cabinet.is-open .pa3d-cabinet-door-left {
  pointer-events: none;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.62),
    inset -3px -2px 0 rgba(61, 80, 73, 0.18),
    6px 0 0 #778b83,
    11px 14px 21px rgba(33, 53, 46, 0.2);
  transform: rotateY(-112deg) translateZ(4px);
}

.pa3d-full-cabinet.is-open .pa3d-cabinet-door-right {
  pointer-events: none;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.62),
    inset -3px -2px 0 rgba(61, 80, 73, 0.18),
    -6px 0 0 #778b83,
    -11px 14px 21px rgba(33, 53, 46, 0.2);
  transform: rotateY(112deg) translateZ(4px);
}

.pa3d-full-cabinet.is-arrived-open .pa3d-cabinet-door,
.pa3d-full-cabinet.is-arrived-open .pa3d-cabinet-interior {
  transition: none;
}

.pa3d-door-label {
  position: absolute;
  z-index: 2;
  top: 10%;
  left: 50%;
  padding: 5px 7px;
  border: 1px solid rgba(77, 98, 91, 0.28);
  border-radius: 4px;
  color: #52655f;
  background: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  transform: translateX(-50%);
  backface-visibility: hidden;
}

.pa3d-handle {
  position: absolute;
  z-index: 2;
  top: 47%;
  width: 7px;
  height: 52px;
  border: 2px solid #596d65;
  border-radius: 5px;
  background: linear-gradient(90deg, #71847c, #c2ccc8 52%, #667a72);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.52),
    0 2px 4px rgba(39, 57, 51, 0.14);
  backface-visibility: hidden;
}

.pa3d-cabinet-door-left .pa3d-handle {
  right: 12px;
}

.pa3d-cabinet-door-right .pa3d-handle {
  left: 12px;
}

.pa3d-box-scene {
  display: grid;
  place-items: center;
  padding: 0;
}

.pa3d-box-object {
  position: relative;
  z-index: 5;
  width: var(--pa3d-box-target-width);
  aspect-ratio: var(--pa3d-box-target-aspect);
  isolation: isolate;
  transform: translate3d(32px, 20px, -160px) rotateY(-18deg) scale(0.76);
  transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(0.18, 0.75, 0.2, 1);
}

.pa3d-box-object.is-near {
  transform: translate3d(0, 0, 0) rotateY(0) scale(1);
}

.pa3d-box-object.is-arrived-open,
.pa3d-box-object.is-arrived-open .pa3d-box-base,
.pa3d-box-object.is-arrived-open .pa3d-box-cover,
.pa3d-box-object.is-arrived-open .pa3d-bag-surface {
  transition: none;
}

.pa3d-box-base {
  position: absolute;
  inset: 0;
  overflow: visible;
  border: 2px solid var(--pa3d-blue-deep);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.46) 0 24.8%, rgba(54, 80, 90, 0.15) 25%, transparent 25.6%),
    linear-gradient(145deg, #c8d7dc, #94abb5);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.52),
    var(--pa3d-object-shadow);
  clip-path: inset(0 0 0 50% round 12px);
  transition: none;
}

.pa3d-box-object.is-opening .pa3d-box-base {
  clip-path: inset(0 0 0 50% round 12px);
}

.pa3d-box-object.is-open .pa3d-box-base {
  clip-path: inset(0 0 0 50% round 12px);
}

.pa3d-box-cover {
  position: absolute;
  z-index: 12;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  transform: translateZ(2px) rotateY(0.01deg);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform var(--pa3d-box-open-duration) cubic-bezier(0.2, 0.72, 0.18, 1);
}

.pa3d-box-object.is-opening .pa3d-box-cover,
.pa3d-box-object.is-open .pa3d-box-cover {
  transform: translateZ(2px) rotateY(-174deg);
}

.pa3d-box-object.is-open .pa3d-box-cover {
  transform: translateZ(2px) rotateY(-174deg);
}

.pa3d-box-cover-front,
.pa3d-box-cover-back {
  position: absolute;
  inset: 0;
  border: 2px solid var(--pa3d-blue-deep);
  border-radius: 0 12px 12px 0;
  backface-visibility: hidden;
}

.pa3d-box-cover-front {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), transparent 38% 78%, rgba(57, 80, 89, 0.12)),
    #a9bec8;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.52),
    8px 12px 20px rgba(47, 69, 77, 0.15);
}

.pa3d-box-cover-front > span:not(.pa3d-box-front-info) {
  min-width: 74px;
  padding: 12px 15px;
  border: 1px solid rgba(65, 88, 97, 0.25);
  border-radius: 9px;
  color: #304f5b;
  background: rgba(250, 252, 251, 0.82);
  text-align: center;
  white-space: nowrap;
}

.pa3d-box-front-info {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(78%, 250px);
  min-width: 0;
  justify-items: center;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid rgba(67, 91, 101, 0.24);
  border-radius: 10px;
  color: #294955;
  text-align: center;
  background: rgba(250, 252, 251, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 7px 16px rgba(43, 65, 72, 0.08);
  filter: none;
  transform: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.pa3d-box-front-code {
  display: grid;
  min-width: 74px;
  min-height: 38px;
  place-items: center;
  padding: 7px 12px;
  border: 1px solid rgba(65, 88, 97, 0.25);
  border-radius: 9px;
  color: #304f5b;
  background: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pa3d-box-front-name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pa3d-box-front-meta {
  max-width: 100%;
  overflow: hidden;
  color: #62746e;
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa3d-box-cover-back {
  display: grid;
  place-items: center;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.34), transparent 36%),
    linear-gradient(145deg, #c8d6db, #91a9b2);
  transform: rotateY(180deg);
}

.pa3d-bag-surface {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 50% round 0 12px 12px 0);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  contain: paint;
  backface-visibility: hidden;
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition: opacity 80ms linear;
}

.pa3d-box-object.is-opening .pa3d-bag-surface {
  overflow: hidden;
  clip-path: inset(0 0 0 50% round 0 12px 12px 0);
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  contain: paint;
  transform: translateZ(0);
}

.pa3d-box-object.is-open .pa3d-bag-surface {
  overflow: hidden;
  clip-path: inset(0 0 0 50% round 0 12px 12px 0);
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  contain: paint;
  transform: translateZ(0);
}

.pa3d-box-object.is-ready .pa3d-bag-surface {
  z-index: 24;
  overflow: visible;
  clip-path: none;
  visibility: visible;
  opacity: 1;
  contain: none;
  transform: translateZ(56px);
  transition: none;
}

.pa3d-bag-deck {
  position: absolute;
  top: 7%;
  right: 4%;
  bottom: 7%;
  width: 42%;
  overflow: visible;
  pointer-events: none;
  transform-style: preserve-3d;
}

.pa3d-box-object:not(.is-ready) .pa3d-bag-deck {
  overflow: hidden;
}

.pa3d-bag-card {
  position: absolute;
  z-index: calc(20 - var(--bag-index));
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid #916533;
  border-radius: 5px;
  color: #563918;
  text-align: left;
  background:
    repeating-linear-gradient(8deg, rgba(96, 62, 27, 0.018) 0 1px, transparent 1px 5px),
    linear-gradient(140deg, rgba(255, 255, 255, 0.3), transparent 34% 78%, rgba(102, 67, 29, 0.09)),
    linear-gradient(180deg, #d9ad70, var(--pa3d-kraft));
  box-shadow:
    inset 1px 1px 0 rgba(255, 242, 215, 0.32),
    4px 6px 0 rgba(107, 73, 34, 0.2),
    0 18px 30px rgba(67, 52, 35, 0.15);
  cursor: grab;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  transform: translate3d(var(--bag-x), var(--bag-y), calc(var(--bag-lift, 0px) + (var(--bag-index) * -8px))) scale(var(--bag-scale, 1));
  transform-style: preserve-3d;
  transition: transform 180ms ease, box-shadow 160ms ease, filter 160ms ease, opacity 180ms ease;
}

.pa3d-box-object:not(.is-ready) .pa3d-bag-card {
  --bag-x: 0px !important;
  --bag-y: 0px !important;
  --bag-lift: 0px !important;
  --bag-scale: 1 !important;
  pointer-events: none;
}

.pa3d-box-object.is-ready .pa3d-bag-card {
  pointer-events: auto;
}

.pa3d-bag-card.is-surface-placed {
  --bag-lift: 12px;
  z-index: calc(60 - var(--bag-index));
  box-shadow:
    5px 7px 0 rgba(107, 73, 34, 0.16),
    0 20px 32px rgba(67, 47, 25, 0.2);
}

.pa3d-bag-card:hover,
.pa3d-bag-card:focus-visible {
  outline: 1px solid rgba(126, 86, 40, 0.26);
  outline-offset: 1px;
  filter: none;
  box-shadow:
    4px 6px 0 rgba(107, 73, 34, 0.17),
    0 18px 29px rgba(67, 47, 25, 0.17);
}

.pa3d-bag-card.is-selected {
  z-index: 64;
  outline: 1px solid rgba(126, 86, 40, 0.34);
  outline-offset: 1px;
  filter: none;
}

.pa3d-bag-card.is-dragging {
  --bag-lift: 22px;
  z-index: 80;
  cursor: grabbing;
  filter: none;
  box-shadow: 0 22px 34px rgba(67, 47, 25, 0.22);
  transition: none;
}

.pa3d-bag-flap-panel {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  left: 0;
  height: 22%;
  border-bottom: 1px solid rgba(105, 70, 29, 0.42);
  background:
    linear-gradient(140deg, rgba(255, 247, 228, 0.18), transparent 34%),
    linear-gradient(155deg, #d9aa6c 49.5%, #ba8243 50%);
  clip-path: polygon(0 0, 100% 0, 100% 56%, 50% 100%, 0 56%);
  backface-visibility: visible;
  transform: translateZ(3px) rotateX(0.01deg);
  transform-origin: center top;
  transition: transform var(--pa3d-bag-open-duration) cubic-bezier(0.18, 0.72, 0.2, 1), filter 180ms ease;
  will-change: transform;
}

.pa3d-box-cover::after {
  position: absolute;
  z-index: 4;
  top: 4px;
  right: -5px;
  bottom: 4px;
  width: 5px;
  border: 1px solid rgba(52, 76, 85, 0.42);
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, #718b96, #b9cbd1 58%, #617a85);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.34);
  pointer-events: none;
  content: "";
  transform: rotateY(90deg) translateZ(2px);
  transform-origin: left center;
}

.pa3d-bag-mouth {
  position: absolute;
  z-index: 3;
  top: 3%;
  right: 4%;
  left: 4%;
  height: 19%;
  border-radius: 50% 50% 5px 5px;
  background: linear-gradient(180deg, rgba(94, 59, 24, 0.54), rgba(142, 93, 42, 0.24));
  clip-path: polygon(0 14%, 50% 0, 100% 14%, 96% 100%, 4% 100%);
  opacity: 0;
  pointer-events: none;
  transform: translateZ(2px) scaleY(0.42);
  transform-origin: center top;
  transition: opacity 180ms ease, transform 300ms cubic-bezier(0.18, 0.72, 0.2, 1);
}

.pa3d-bag-first-document {
  position: absolute;
  z-index: 4;
  top: 4%;
  right: 13%;
  left: 13%;
  display: grid;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  border: 1px solid rgba(91, 98, 91, 0.22);
  border-radius: 2px 2px 4px 4px;
  background: #fffef9;
  box-shadow: 0 7px 13px rgba(71, 48, 25, 0.11);
  clip-path: inset(0 0 100% 0 round 2px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transform-origin: center top;
  transition:
    clip-path 380ms cubic-bezier(0.18, 0.76, 0.2, 1) 90ms,
    opacity 150ms ease 90ms,
    transform 380ms cubic-bezier(0.18, 0.76, 0.2, 1) 90ms;
}

.pa3d-bag-first-document-image,
.pa3d-bag-first-document > img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: center top;
  background: #fff;
  filter: none;
  transform: none;
  image-rendering: auto;
}

.pa3d-bag-first-document-fallback {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 5px;
  padding: 12px 13px;
  overflow: hidden;
  color: #354941;
  background:
    repeating-linear-gradient(180deg, transparent 0 12px, rgba(87, 111, 104, 0.08) 12px 13px),
    linear-gradient(145deg, #fffefb, #eff3f0);
  font-size: 10px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa3d-bag-card.is-opening .pa3d-bag-first-document {
  clip-path: inset(0 0 74% 0 round 2px);
  opacity: 1;
  transform: translateY(-10px);
}

.pa3d-bag-card.is-open .pa3d-bag-first-document {
  clip-path: inset(0 0 74% 0 round 2px);
  opacity: 1;
  transform: translateY(-10px);
}

.pa3d-bag-card.is-opening,
.pa3d-bag-card.is-open,
.pa3d-bag-card.is-camera-entering {
  z-index: 88;
  filter: none;
}

.pa3d-bag-card.is-opening .pa3d-bag-flap-panel {
  transform: translateZ(3px) rotateX(-150deg);
}

.pa3d-bag-card.is-open .pa3d-bag-flap-panel {
  transform: translateZ(3px) rotateX(-150deg);
}

.pa3d-bag-card.is-opening .pa3d-bag-mouth,
.pa3d-bag-card.is-open .pa3d-bag-mouth {
  visibility: hidden;
  opacity: 0;
  transform: translateZ(-2px) scaleY(1);
}

.pa3d-bag-card.is-camera-entering {
  --bag-scale: 1;
  transition: transform 360ms cubic-bezier(0.18, 0.74, 0.2, 1), box-shadow 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.pa3d-box-scene.is-bag-transitioning .pa3d-bag-card:not(.is-opening):not(.is-open):not(.is-camera-entering) {
  opacity: 0.4;
  filter: saturate(0.68);
  pointer-events: none;
}

.pa3d-bag-card-copy {
  position: absolute;
  z-index: 7;
  top: 31%;
  right: 10%;
  left: 10%;
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid rgba(100, 69, 31, 0.24);
  color: #503616;
  background: rgba(248, 226, 189, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 227, 0.46),
    0 4px 9px rgba(77, 51, 24, 0.055);
  filter: none;
  transform: none;
  pointer-events: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.pa3d-bag-card-copy strong {
  font-size: 14px;
  line-height: 1.4;
}

.pa3d-bag-card-copy small,
.pa3d-bag-card-copy em {
  font-size: 10px;
  font-style: normal;
}

.pa3d-bag-card-copy small {
  color: #78572f;
}

.pa3d-bag-scene {
  display: grid;
  place-items: center;
  padding: 26px;
}

.pa3d-bag-focus {
  position: relative;
  z-index: 5;
  width: min(390px, 62%);
  aspect-ratio: 0.72;
  border: 2px solid #8b612f;
  border-radius: 6px;
  color: #563918;
  background:
    repeating-linear-gradient(8deg, rgba(96, 62, 27, 0.018) 0 1px, transparent 1px 5px),
    linear-gradient(140deg, rgba(255, 255, 255, 0.3), transparent 34% 78%, rgba(102, 67, 29, 0.09)),
    linear-gradient(180deg, #d8aa6c, #c38d4b);
  box-shadow:
    inset 1px 1px 0 rgba(255, 242, 215, 0.32),
    14px 20px 0 rgba(104, 73, 34, 0.14),
    0 34px 48px rgba(72, 52, 31, 0.2);
  opacity: 0.88;
  transform: translate3d(0, 8px, -160px) rotateY(15deg) scale(0.8);
  transform-style: preserve-3d;
  transition: transform 580ms cubic-bezier(0.18, 0.76, 0.2, 1), opacity 260ms ease;
}

.pa3d-bag-focus.is-facing {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateY(0) scale(1);
}

.pa3d-bag-flap {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 21%;
  border-bottom: 1px solid rgba(105, 70, 29, 0.42);
  background: linear-gradient(155deg, #d8aa6c 49.5%, #ba8243 50%);
  clip-path: polygon(0 0, 100% 0, 100% 56%, 50% 100%, 0 56%);
}

.pa3d-bag-focus-copy {
  position: absolute;
  z-index: 3;
  top: 26%;
  right: 12%;
  left: 12%;
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(101, 70, 33, 0.25);
  background: rgba(246, 223, 183, 0.58);
}

.pa3d-bag-kicker {
  color: #7a5529;
  font-size: 10px;
  letter-spacing: 0.09em;
}

.pa3d-bag-focus-copy h3,
.pa3d-bag-focus-copy p {
  margin: 0;
}

.pa3d-bag-focus-copy h3 {
  font-size: clamp(18px, 2.4vw, 25px);
}

.pa3d-bag-focus-copy p {
  color: #765630;
  font-size: 11px;
}

.pa3d-bag-focus-copy ul {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  color: #65471f;
  font-size: 10px;
  list-style: none;
}

.pa3d-bag-focus-copy li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa3d-bag-disclaimer {
  position: absolute;
  right: 10%;
  bottom: 7%;
  left: 10%;
  padding: 7px 10px;
  border: 1px solid rgba(77, 86, 82, 0.18);
  border-radius: 8px;
  color: #5c6662;
  text-align: center;
  background: rgba(239, 242, 240, 0.72);
  font-size: 10px;
}

.pa3d-matter-list {
  display: grid;
  width: min(820px, 96%);
  max-height: 100%;
  gap: 10px;
  margin: auto;
  padding: 18px 8px 28px;
  overflow: auto;
  scrollbar-color: rgba(78, 105, 96, 0.25) transparent;
  scrollbar-width: thin;
}

.pa3d-matter-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.pa3d-matter-group.is-expanded {
  border-color: rgba(73, 103, 93, 0.12);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

.pa3d-matter-toggle {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 10px;
  padding: 9px 11px;
  border: 0;
  border-radius: 13px;
  color: var(--pa3d-ink);
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.pa3d-matter-toggle:hover,
.pa3d-matter-toggle:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.pa3d-matter-toggle > strong,
.pa3d-matter-toggle > .pa3d-matter-title {
  grid-column: 2;
  align-self: end;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa3d-matter-toggle > small,
.pa3d-matter-toggle > .pa3d-matter-meta {
  grid-column: 2;
  align-self: start;
  overflow: hidden;
  color: var(--pa3d-muted);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa3d-matter-toggle > em,
.pa3d-matter-toggle > .pa3d-matter-count {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  color: #6c7c77;
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.pa3d-matter-copy {
  display: grid;
  min-width: 0;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  gap: 2px;
}

.pa3d-matter-copy strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa3d-matter-copy small {
  overflow: hidden;
  color: var(--pa3d-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa3d-matter-chevron,
.pa3d-row-arrow {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #6c7c77;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pa3d-matter-chevron {
  grid-column: 3;
  grid-row: 1 / 3;
  transition: transform 260ms ease;
}

.pa3d-matter-group.is-expanded .pa3d-matter-chevron,
.pa3d-matter-toggle[aria-expanded="true"] .pa3d-matter-chevron {
  transform: rotate(180deg);
}

.pa3d-row-arrow {
  justify-self: end;
  width: 15px;
  height: 15px;
  opacity: 0.66;
  transition: opacity 180ms ease, transform 180ms ease;
}

.pa3d-matter-bag-icon {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
  width: 32px;
  height: 36px;
  perspective: 280px;
  transform-style: preserve-3d;
}

.pa3d-matter-icon {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
  width: 32px;
  height: 36px;
  border: 1px solid rgba(112, 74, 35, 0.48);
  border-radius: 2px 2px 4px 4px;
  background: linear-gradient(145deg, #d8aa6c, #bb8244);
  box-shadow: 2px 3px 5px rgba(83, 55, 26, 0.14);
  perspective: 280px;
  transform-style: preserve-3d;
  transition: transform 300ms cubic-bezier(0.18, 0.76, 0.2, 1);
}

.pa3d-matter-icon::before,
.pa3d-matter-icon::after {
  position: absolute;
  display: block;
  pointer-events: none;
  content: "";
}

.pa3d-matter-icon::before {
  z-index: 2;
  top: 7px;
  right: 6px;
  left: 6px;
  height: 20px;
  border: 1px solid rgba(93, 102, 97, 0.18);
  border-radius: 1px 1px 3px 3px;
  background:
    repeating-linear-gradient(180deg, transparent 0 4px, rgba(90, 106, 100, 0.1) 4px 5px),
    #f8f6eb;
  box-shadow: 2px 3px 0 rgba(239, 235, 220, 0.86);
  opacity: 0;
  transform: translate3d(0, 7px, 2px);
  transition: opacity 160ms ease 70ms, transform 300ms cubic-bezier(0.18, 0.76, 0.2, 1) 60ms;
}

.pa3d-matter-icon::after {
  z-index: 3;
  top: 5px;
  right: -1px;
  left: -1px;
  height: 12px;
  border: 1px solid rgba(112, 74, 35, 0.42);
  border-top: 0;
  background: linear-gradient(155deg, #daa968 49%, #ba8041 50%);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 50% 100%, 0 45%);
  backface-visibility: visible;
  transform: translateZ(4px) rotateX(0.01deg);
  transform-origin: center top;
  transition: transform 360ms cubic-bezier(0.18, 0.76, 0.2, 1), filter 180ms ease;
}

.pa3d-matter-toggle[aria-expanded="true"] .pa3d-matter-icon {
  transform: translateY(1px);
}

.pa3d-matter-toggle[aria-expanded="true"] .pa3d-matter-icon::before {
  opacity: 1;
  transform: translate3d(0, -5px, 3px);
}

.pa3d-matter-toggle[aria-expanded="true"] .pa3d-matter-icon::after {
  filter: brightness(1.02);
  transform: translateZ(4px) rotateX(-145deg);
}

.pa3d-matter-bag-icon .bag-body,
.pa3d-matter-bag-icon .bag-paper,
.pa3d-matter-bag-icon .bag-flap {
  position: absolute;
  display: block;
  pointer-events: none;
}

.pa3d-matter-bag-icon .bag-body {
  z-index: 2;
  right: 2px;
  bottom: 1px;
  left: 2px;
  height: 27px;
  border: 1px solid rgba(112, 74, 35, 0.48);
  border-radius: 2px 2px 4px 4px;
  background: linear-gradient(145deg, #d8aa6c, #bb8244);
  box-shadow: 2px 3px 5px rgba(83, 55, 26, 0.14);
  transition: transform 300ms cubic-bezier(0.18, 0.76, 0.2, 1);
}

.pa3d-matter-bag-icon .bag-paper {
  z-index: 3;
  top: 8px;
  right: 7px;
  left: 7px;
  height: 20px;
  border: 1px solid rgba(93, 102, 97, 0.18);
  border-radius: 1px 1px 3px 3px;
  background:
    repeating-linear-gradient(180deg, transparent 0 4px, rgba(90, 106, 100, 0.1) 4px 5px),
    #f8f6eb;
  box-shadow: 2px 3px 0 rgba(239, 235, 220, 0.86);
  opacity: 0;
  transform: translate3d(0, 7px, 2px);
  transition: opacity 160ms ease 70ms, transform 300ms cubic-bezier(0.18, 0.76, 0.2, 1) 60ms;
}

.pa3d-matter-bag-icon .bag-flap {
  z-index: 4;
  top: 7px;
  right: 2px;
  left: 2px;
  height: 12px;
  border: 1px solid rgba(112, 74, 35, 0.42);
  border-top: 0;
  background: linear-gradient(155deg, #daa968 49%, #ba8041 50%);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 50% 100%, 0 45%);
  backface-visibility: visible;
  transform: translateZ(4px) rotateX(0.01deg);
  transform-origin: center top;
  transition: transform 360ms cubic-bezier(0.18, 0.76, 0.2, 1), filter 180ms ease;
}

.pa3d-matter-group.is-expanded .pa3d-matter-bag-icon .bag-body,
.pa3d-matter-toggle[aria-expanded="true"] .pa3d-matter-bag-icon .bag-body {
  transform: translateY(1px);
}

.pa3d-matter-group.is-expanded .pa3d-matter-bag-icon .bag-paper,
.pa3d-matter-toggle[aria-expanded="true"] .pa3d-matter-bag-icon .bag-paper {
  opacity: 1;
  transform: translate3d(0, -5px, 3px);
}

.pa3d-matter-group.is-expanded .pa3d-matter-bag-icon .bag-flap,
.pa3d-matter-toggle[aria-expanded="true"] .pa3d-matter-bag-icon .bag-flap {
  filter: brightness(1.02);
  transform: translateZ(4px) rotateX(-145deg);
}

.pa3d-matter-files {
  display: grid;
  min-width: 0;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.22, 0.72, 0.2, 1);
}

.pa3d-matter-group.is-expanded .pa3d-matter-files,
.pa3d-matter-toggle[aria-expanded="true"] + .pa3d-matter-files {
  grid-template-rows: 1fr;
}

.pa3d-matter-files-inner {
  display: grid;
  min-width: 0;
  min-height: 0;
  gap: 5px;
  padding: 0 10px 0 48px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 180ms ease, transform 260ms ease, padding-bottom 260ms ease, visibility 0s linear 260ms;
}

.pa3d-matter-group.is-expanded .pa3d-matter-files-inner,
.pa3d-matter-toggle[aria-expanded="true"] + .pa3d-matter-files .pa3d-matter-files-inner {
  padding-bottom: 10px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 70ms, 50ms, 0ms, 0s;
}

.pa3d-matter-file {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 0;
  border-radius: 10px;
  color: var(--pa3d-ink);
  text-align: left;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pa3d-matter-file:hover,
.pa3d-matter-file:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  transform: translateY(-1px);
}

.pa3d-matter-file > strong,
.pa3d-matter-file > span:not(.pa3d-type-icon):not(.pa3d-matter-file-meta) {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa3d-matter-file > small,
.pa3d-matter-file > em,
.pa3d-matter-file-meta {
  color: var(--pa3d-muted);
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
}

.pa3d-matter-file > span:not(.pa3d-type-icon):not(.pa3d-file-icon) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.pa3d-matter-file > span strong,
.pa3d-matter-file > span small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa3d-matter-file > span strong {
  font-size: 11px;
}

.pa3d-matter-file > span small {
  color: var(--pa3d-muted);
  font-size: 9px;
  font-weight: 400;
}

.pa3d-type-icon {
  --type-color: #687872;
  --type-soft: rgba(104, 120, 114, 0.1);
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--type-color) 24%, transparent);
  border-radius: 9px;
  color: var(--type-color);
  background: var(--type-soft);
  font-size: 0;
}

.pa3d-file-icon {
  --type-color: #687872;
  --type-soft: rgba(104, 120, 114, 0.1);
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(104, 120, 114, 0.2);
  border-radius: 9px;
  color: var(--type-color);
  background: var(--type-soft);
  font-size: 0;
}

.pa3d-file-icon::before {
  width: 16px;
  height: 19px;
  background: linear-gradient(135deg, transparent 0 70%, currentColor 71% 100%) top right / 6px 6px no-repeat;
  box-shadow: inset 0 0 0 1.4px currentColor;
  clip-path: polygon(0 0, 69% 0, 100% 27%, 100% 100%, 0 100%);
  content: "";
}

.pa3d-file-icon::after {
  position: absolute;
  top: 13px;
  left: 9px;
  width: 8px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 3px 0 currentColor, 0 6px 0 currentColor;
  opacity: 0.72;
  content: "";
}

.pa3d-type-icon svg,
.pa3d-type-icon img {
  display: block;
  width: 18px;
  height: 18px;
}

.pa3d-type-icon svg {
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pa3d-type-icon.contract,
.pa3d-type-icon.is-contract,
.pa3d-file-icon.contract,
.pa3d-file-icon.is-contract {
  --type-color: #925f5b;
  --type-soft: rgba(146, 95, 91, 0.1);
}

.pa3d-type-icon.invoice,
.pa3d-type-icon.is-invoice,
.pa3d-file-icon.invoice,
.pa3d-file-icon.is-invoice {
  --type-color: #567694;
  --type-soft: rgba(86, 118, 148, 0.1);
}

.pa3d-type-icon.certificate,
.pa3d-type-icon.is-certificate,
.pa3d-file-icon.certificate,
.pa3d-file-icon.is-certificate {
  --type-color: #8b703f;
  --type-soft: rgba(139, 112, 63, 0.1);
}

.pa3d-type-icon.report,
.pa3d-type-icon.is-report,
.pa3d-file-icon.report,
.pa3d-file-icon.is-report {
  --type-color: #716c89;
  --type-soft: rgba(113, 108, 137, 0.1);
}

.pa3d-type-icon.drawing,
.pa3d-type-icon.is-drawing,
.pa3d-file-icon.drawing,
.pa3d-file-icon.is-drawing {
  --type-color: #557b78;
  --type-soft: rgba(85, 123, 120, 0.1);
}

.pa3d-type-icon.spreadsheet,
.pa3d-type-icon.is-spreadsheet,
.pa3d-file-icon.spreadsheet,
.pa3d-file-icon.is-spreadsheet {
  --type-color: #627d69;
  --type-soft: rgba(98, 125, 105, 0.1);
}

.pa3d-type-icon.image,
.pa3d-type-icon.is-image,
.pa3d-file-icon.image,
.pa3d-file-icon.is-image {
  --type-color: #627986;
  --type-soft: rgba(98, 121, 134, 0.1);
}

.pa3d-type-icon.official,
.pa3d-type-icon.is-official,
.pa3d-file-icon.official,
.pa3d-file-icon.is-official {
  --type-color: #68786f;
  --type-soft: rgba(104, 120, 111, 0.1);
}

.pa3d-type-icon.other,
.pa3d-type-icon.is-other,
.pa3d-file-icon.other,
.pa3d-file-icon.is-other {
  --type-color: #75817d;
  --type-soft: rgba(117, 129, 125, 0.1);
}

.pa3d-hud .pa3d-matter-list {
  width: 100%;
  max-height: none;
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.pa3d-hud .pa3d-matter-group {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.pa3d-hud .pa3d-matter-group.is-expanded {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.pa3d-files-scene.is-expanded + .pa3d-hud .pa3d-matter-group {
  opacity: 0;
  animation: pa3d-name-generate 360ms ease forwards;
  animation-delay: calc(var(--matter-index) * 70ms + 180ms);
}

.pa3d-hud .pa3d-matter-toggle {
  min-height: 52px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 2px 7px;
  padding: 7px;
}

.pa3d-hud .pa3d-matter-bag-icon,
.pa3d-hud .pa3d-matter-icon {
  width: 28px;
  height: 32px;
}

.pa3d-hud .pa3d-matter-files-inner {
  padding-right: 7px;
  padding-left: 36px;
}

.pa3d-hud .pa3d-matter-file {
  min-height: 42px;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  gap: 7px;
  padding: 6px;
}

.pa3d-hud .pa3d-type-icon,
.pa3d-hud .pa3d-file-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.pa3d-files-layout {
  min-height: 0;
  align-items: stretch;
}

.pa3d-files-scene {
  display: grid;
  min-height: clamp(580px, calc(100vh - 122px), 760px);
  align-items: stretch;
  padding: clamp(26px, 3.8vh, 44px) 2.2% 152px;
  perspective: 1800px;
  transform-style: preserve-3d;
}

.pa3d-files-scene::before {
  position: absolute;
  z-index: 0;
  inset: 4% 1.5% 16%;
  display: block;
  border-radius: 36% 36% 18px 18px;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(255, 255, 255, 0.78), rgba(226, 236, 232, 0.28) 48%, transparent 74%),
    linear-gradient(180deg, rgba(241, 247, 244, 0.3), rgba(156, 177, 169, 0.055) 72%);
  box-shadow: inset 0 -1px 0 rgba(68, 96, 87, 0.09);
  opacity: 0.72;
  pointer-events: none;
  content: "";
  transform: translate3d(0, -1%, -150px) scale(0.97);
}

.pa3d-files-scene::after {
  position: absolute;
  z-index: 1;
  right: 3%;
  bottom: 34px;
  left: 3%;
  height: 32%;
  background:
    linear-gradient(180deg, transparent, rgba(91, 116, 107, 0.065) 58%, rgba(67, 92, 83, 0.105)),
    repeating-linear-gradient(90deg, transparent 0 12.4%, rgba(74, 101, 92, 0.065) 12.5%),
    repeating-linear-gradient(0deg, transparent 0 24.6%, rgba(74, 101, 92, 0.06) 25%);
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
  opacity: 0.58;
  pointer-events: none;
  content: "";
  transform: rotateX(66deg) translateZ(-90px);
  transform-origin: center bottom;
}

.pa3d-file-cloud {
  --file-column-gap: clamp(9px, 1.1vw, 17px);
  position: relative;
  z-index: 7;
  display: grid;
  width: min(1240px, 100%);
  min-height: clamp(410px, 58vh, 590px);
  height: 100%;
  max-height: none;
  margin: 0 auto;
  grid-template-columns: repeat(var(--file-columns), clamp(100px, 8.4vw, 138px));
  grid-template-rows: repeat(var(--file-rows), auto);
  grid-auto-flow: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.2vh, 26px) var(--file-column-gap);
  padding: 12px 10px 24px;
  overflow-x: auto;
  overflow-y: hidden;
  perspective: 1700px;
  perspective-origin: 50% 43%;
  scroll-snap-type: x proximity;
  scrollbar-color: rgba(72, 112, 99, 0.24) transparent;
  scrollbar-width: thin;
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(0.32, 0.08, 0.3, 1), opacity 220ms ease;
}

.pa3d-files-scene.is-returning .pa3d-file-cloud {
  opacity: 0.54;
  transform: none;
}

.pa3d-files-scene.is-returning .pa3d-file-card {
  pointer-events: none;
}

.pa3d-file-card {
  position: relative;
  left: calc(var(--final-row-shift, 0) * (100% + var(--file-column-gap)));
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  height: auto;
  aspect-ratio: auto;
  align-self: center;
  justify-self: center;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 8px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: #263b35;
  text-align: left;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  isolation: isolate;
  opacity: 0;
  scroll-snap-align: center;
  transform: translate3d(-40px, 230px, -300px) rotateX(48deg) rotateZ(-8deg) scale(0.52);
  transform-origin: center bottom;
  transition: transform 360ms cubic-bezier(0.18, 0.76, 0.2, 1), opacity 220ms ease;
  will-change: transform;
}

.pa3d-file-card::after {
  display: none;
  content: none;
}

.pa3d-file-nameplate {
  position: relative;
  z-index: 5;
  display: grid;
  width: calc(100% - 4px);
  min-width: 0;
  min-height: 42px;
  place-items: center;
  justify-self: center;
  padding: 6px 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 10px;
  color: #1d3930;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.1)),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.68),
    inset -1px -1px 0 rgba(64, 71, 68, 0.08),
    0 7px 14px rgba(37, 51, 46, 0.09);
  backdrop-filter: blur(10px) saturate(116%);
  -webkit-backdrop-filter: blur(10px) saturate(116%);
  font-size: clamp(9px, 0.76vw, 11px);
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.pa3d-file-nameplate strong {
  display: -webkit-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pa3d-file-paper,
.pa3d-file-card > .pa3d-file-preview {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  border: 1px solid rgba(91, 109, 103, 0.18);
  border-radius: 2px 5px 4px 2px;
  background: #fffefa;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.94),
    0 2px 3px rgba(44, 65, 58, 0.08),
    0 17px 28px rgba(34, 61, 52, 0.15);
  filter: none;
  transform: none;
  pointer-events: none;
}

.pa3d-file-preview {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  overflow: hidden;
  border-radius: inherit;
  background: #fffefa;
  filter: none;
  transform: none;
  backface-visibility: visible;
}

.pa3d-file-preview > .pa3d-file-fallback,
.pa3d-file-preview > .pa3d-file-page-image {
  grid-area: 1 / 1;
}

.pa3d-file-preview > .pa3d-file-fallback {
  z-index: 1;
}

.pa3d-file-preview > .pa3d-file-page-image {
  position: relative;
  z-index: 2;
}

.pa3d-file-page-image,
.pa3d-file-preview > img,
.pa3d-file-card > img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  object-fit: contain;
  object-position: center top;
  background: #fff;
  image-rendering: auto;
  filter: none;
  transform: none;
  backface-visibility: visible;
}

.pa3d-file-preview > img.pa3d-file-page-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pa3d-file-card > img {
  position: absolute;
  z-index: 3;
  inset: 0;
}

.pa3d-file-page-image[src=""],
.pa3d-file-page-image:not([src]),
.pa3d-file-preview > img[src=""],
.pa3d-file-preview > img:not([src]) {
  display: none;
}

.pa3d-file-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  align-content: start;
  gap: clamp(5px, 0.65vw, 9px);
  padding: clamp(11px, 1.15vw, 17px);
  overflow: hidden;
  color: #344941;
  background:
    linear-gradient(90deg, rgba(145, 96, 76, 0.12) 0 1px, transparent 1px) 13% 0 / 100% 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 17px, rgba(87, 111, 104, 0.09) 17px 18px),
    linear-gradient(145deg, #fffefb, #eff3f0);
}

.pa3d-file-fallback strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(10px, 0.88vw, 13px);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.pa3d-file-fallback small,
.pa3d-file-fallback em {
  color: var(--pa3d-muted);
  font-size: clamp(8px, 0.7vw, 10px);
  font-style: normal;
}

.pa3d-file-card > .pa3d-type-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

.pa3d-file-fallback .pa3d-type-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

.pa3d-files-scene.is-expanded.is-settled .pa3d-file-card.is-muted {
  opacity: 0.56;
  filter: none;
}

.pa3d-files-scene.is-expanded.is-settled .pa3d-file-card.is-matter-active {
  opacity: 1;
  filter: none;
}

.pa3d-files-scene.is-expanded.is-settled .pa3d-file-card.is-matter-active .pa3d-file-paper,
.pa3d-files-scene.is-expanded.is-settled .pa3d-file-card.is-matter-active > .pa3d-file-preview {
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.94),
    0 2px 3px rgba(44, 65, 58, 0.08),
    0 18px 30px rgba(38, 67, 57, 0.17);
}

.pa3d-files-scene.is-expanded .pa3d-file-card {
  animation: pa3d-file-fly 640ms cubic-bezier(0.12, 0.74, 0.18, 1) forwards;
  animation-delay: calc(var(--file-index) * 90ms);
}

.pa3d-files-scene.is-expanded .pa3d-file-card.is-away {
  animation-name: pa3d-file-ghost;
}

.pa3d-files-scene.is-expanded.is-settled .pa3d-file-card {
  opacity: 1;
  animation: pa3d-file-float 2.9s ease-in-out infinite;
  animation-delay: calc(var(--file-index) * -120ms);
  filter: none;
  transform: translateY(-1px);
  will-change: auto;
}

.pa3d-files-scene.is-expanded.is-settled .pa3d-file-card.is-away {
  opacity: 0.54;
}

.pa3d-files-scene.is-settled .pa3d-file-card:hover,
.pa3d-files-scene.is-settled .pa3d-file-card:focus-visible,
.pa3d-files-scene.is-settled .pa3d-file-card.is-selected,
.pa3d-files-scene.is-settled .pa3d-file-card[aria-pressed="true"] {
  opacity: 1;
  outline: none;
}

.pa3d-files-scene.is-settled .pa3d-file-card:hover .pa3d-file-paper,
.pa3d-files-scene.is-settled .pa3d-file-card:focus-visible .pa3d-file-paper,
.pa3d-files-scene.is-settled .pa3d-file-card.is-selected .pa3d-file-paper,
.pa3d-files-scene.is-settled .pa3d-file-card[aria-pressed="true"] .pa3d-file-paper,
.pa3d-files-scene.is-settled .pa3d-file-card:hover > .pa3d-file-preview,
.pa3d-files-scene.is-settled .pa3d-file-card:focus-visible > .pa3d-file-preview,
.pa3d-files-scene.is-settled .pa3d-file-card.is-selected > .pa3d-file-preview,
.pa3d-files-scene.is-settled .pa3d-file-card[aria-pressed="true"] > .pa3d-file-preview {
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.94),
    0 2px 3px rgba(44, 65, 58, 0.08),
    0 20px 31px rgba(38, 67, 57, 0.18);
}

.pa3d-files-scene.is-settled .pa3d-file-card:hover .pa3d-file-nameplate,
.pa3d-files-scene.is-settled .pa3d-file-card:focus-visible .pa3d-file-nameplate,
.pa3d-files-scene.is-settled .pa3d-file-card.is-selected .pa3d-file-nameplate,
.pa3d-files-scene.is-settled .pa3d-file-card[aria-pressed="true"] .pa3d-file-nameplate {
  border-color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16)),
    rgba(255, 255, 255, 0.045);
}

.pa3d-files-scene.is-settled .pa3d-matter-file:hover,
.pa3d-files-scene.is-settled .pa3d-matter-file:focus-visible {
  z-index: 20;
  animation: none;
  outline: none;
  filter: none;
  transform: translateY(-1px);
}

.pa3d-files-scene.is-settled .pa3d-matter-file.is-selected,
.pa3d-files-scene.is-settled .pa3d-matter-file[aria-pressed="true"] {
  z-index: 20;
  animation: none;
  filter: none;
  transform: translateY(-1px);
}

.pa3d-file-card.is-away {
  opacity: 0.54;
  filter: none;
  background: transparent;
}

.pa3d-file-card.has-exception {
  box-shadow: none;
}

.pa3d-file-card.has-exception .pa3d-file-paper,
.pa3d-file-card.has-exception > .pa3d-file-preview {
  box-shadow:
    inset 0 0 0 1px rgba(176, 105, 45, 0.4),
    0 17px 28px rgba(46, 70, 62, 0.15);
}

.pa3d-file-corner {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: linear-gradient(225deg, #cfd8d5 49%, transparent 50%);
}

.pa3d-file-type {
  color: var(--pa3d-green);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pa3d-file-card > strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(10px, 0.92vw, 13px);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.pa3d-file-card > small {
  color: var(--pa3d-muted);
  font-size: clamp(8px, 0.72vw, 10px);
}

.pa3d-file-card > em {
  align-self: end;
  margin-top: auto;
  color: var(--pa3d-green);
  font-size: clamp(8px, 0.72vw, 10px);
  font-style: normal;
}

.pa3d-open-bag {
  position: absolute;
  z-index: 8;
  bottom: 12px;
  left: 50%;
  width: min(440px, 52%);
  height: 112px;
  border: 0;
  border-radius: 10px 10px 18px 18px;
  background: linear-gradient(180deg, transparent 0 42%, #d1a064 43%, #a97038 100%);
  box-shadow: none;
  pointer-events: none;
  transform: translate3d(-50%, 0, 0) rotateX(58deg) translateZ(-8px);
  transform-origin: center bottom;
  transform-style: preserve-3d;
}

.pa3d-open-box {
  position: absolute;
  bottom: 12px;
  background: transparent;
  transform: translate3d(-50%, 0, 0) rotateX(58deg) translateZ(-8px);
  transform-style: preserve-3d;
}

.pa3d-open-box::before {
  display: none;
}

.pa3d-open-bag::after {
  content: "数字展示袋已打开";
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 2;
  padding: 5px 10px;
  border: 1px solid rgba(105, 70, 29, 0.28);
  border-radius: 7px;
  color: #6d4a24;
  background: rgba(242, 211, 166, 0.62);
  font-size: 9px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.pa3d-open-bag-papers {
  position: absolute;
  z-index: 2;
  right: 13%;
  bottom: 78%;
  left: 13%;
  height: 56px;
  pointer-events: none;
  transform: rotate(-1deg);
}

.pa3d-open-bag-papers i {
  position: absolute;
  inset: 0;
  display: block;
  border: 1px solid rgba(94, 92, 78, 0.24);
  border-radius: 3px 3px 1px 1px;
  background:
    repeating-linear-gradient(180deg, transparent 0 9px, rgba(103, 118, 112, 0.09) 9px 10px),
    linear-gradient(145deg, #fffdf5, #e9e7dc);
  box-shadow: 0 12px 18px rgba(72, 50, 27, 0.12);
}

.pa3d-open-bag-papers i:nth-child(2) {
  transform: translate3d(-5px, 5px, -1px) rotate(-1.3deg);
}

.pa3d-open-bag-papers i:nth-child(3) {
  transform: translate3d(5px, 9px, -2px) rotate(1.5deg);
}

.pa3d-open-bag > span:only-child,
.pa3d-open-bag-body {
  position: absolute;
  right: -2px;
  bottom: calc(100% - 3px);
  left: -2px;
  height: 46px;
  border: 2px solid #8e6330;
  border-bottom: 0;
  background: linear-gradient(160deg, #d3a160, #b98041);
  clip-path: polygon(0 100%, 12% 0, 88% 0, 100% 100%);
  z-index: 3;
  transform: none;
  transform-origin: center bottom;
}

.pa3d-open-bag::before {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: 28%;
  left: 7%;
  height: 34%;
  border: 2px solid rgba(102, 65, 30, 0.58);
  border-radius: 44% 44% 9px 9px / 24% 24% 9px 9px;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(56, 34, 17, 0.38), transparent 64%),
    linear-gradient(180deg, #7c4f27, #9b6734 58%, #bc8449);
  box-shadow:
    inset 0 11px 18px rgba(55, 32, 15, 0.36),
    inset 0 -3px 5px rgba(237, 188, 125, 0.28),
    0 2px 0 rgba(244, 206, 155, 0.32);
  pointer-events: none;
  content: "";
  transform: translateZ(16px);
}

.pa3d-open-bag::after {
  z-index: -2;
  top: auto;
  right: -4%;
  bottom: -20px;
  left: -4%;
  width: auto;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: transparent;
  background: radial-gradient(ellipse, rgba(45, 57, 52, 0.32), rgba(45, 57, 52, 0.11) 48%, transparent 74%);
  filter: blur(6px);
  opacity: 0.88;
  font-size: 0;
  white-space: normal;
  pointer-events: none;
  content: "";
  transform: translateZ(-28px) scaleX(1.06);
}

.pa3d-open-bag > span:only-child,
.pa3d-open-bag-body,
.pa3d-open-box-lid {
  position: absolute;
  z-index: 2;
  right: 3%;
  bottom: 55%;
  left: 3%;
  height: 58%;
  border: 2px solid #8d5d2d;
  border-radius: 8px 8px 3px 3px;
  background:
    linear-gradient(180deg, rgba(245, 207, 156, 0.24), transparent 28%),
    linear-gradient(160deg, #d8aa6e, #b97f42);
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  box-shadow:
    inset 0 0 0 4px rgba(226, 174, 110, 0.35),
    0 -7px 16px rgba(74, 45, 21, 0.12);
  transform: translate3d(0, 9px, -16px) rotateX(-18deg);
  transform-origin: center bottom;
  transform-style: preserve-3d;
}

.pa3d-open-bag-body::before,
.pa3d-open-box-lid::before {
  position: absolute;
  inset: 8px 10px 9px;
  border: 1px solid rgba(107, 70, 32, 0.3);
  border-radius: 4px;
  background:
    linear-gradient(145deg, rgba(255, 232, 195, 0.36), transparent 46%),
    rgba(172, 112, 57, 0.24);
  box-shadow: inset 0 4px 9px rgba(88, 53, 24, 0.12);
  content: "";
}

.pa3d-open-box-lid {
  border-color: #59737e;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.45), transparent 38% 78%, rgba(51, 74, 83, 0.12)),
    linear-gradient(160deg, #bacbd1, #829ba5);
  box-shadow:
    inset 0 0 0 4px rgba(221, 233, 236, 0.24),
    0 -7px 16px rgba(43, 64, 71, 0.12);
}

.pa3d-open-box-lid::before {
  border-color: rgba(65, 88, 97, 0.3);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), transparent 46%),
    rgba(75, 102, 112, 0.16);
  box-shadow: inset 0 4px 9px rgba(43, 65, 72, 0.1);
}

.pa3d-open-box-lid::after {
  background: rgba(59, 83, 92, 0.3);
}

.pa3d-open-bag-body::after,
.pa3d-open-box-lid::after {
  position: absolute;
  right: 8%;
  bottom: 8px;
  left: 8%;
  height: 1px;
  background: rgba(104, 65, 29, 0.34);
  content: "";
}

.pa3d-open-bag.pa3d-open-box .pa3d-open-box-lid::after {
  background: rgba(59, 83, 92, 0.3);
}

.pa3d-open-box-base {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 58%;
  border: 2px solid #58727d;
  border-radius: 5px 5px 16px 16px;
  background:
    linear-gradient(180deg, rgba(238, 247, 248, 0.28), transparent 32%),
    linear-gradient(160deg, #aec2ca, #78939e);
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
  box-shadow:
    inset 0 -8px 14px rgba(42, 64, 72, 0.16),
    0 9px 13px rgba(43, 62, 69, 0.15);
  transform: translateZ(9px);
}

.pa3d-open-box-cavity {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: 28%;
  left: 7%;
  height: 34%;
  border: 2px solid rgba(52, 76, 85, 0.58);
  border-radius: 44% 44% 9px 9px / 24% 24% 9px 9px;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(24, 43, 49, 0.42), transparent 64%),
    linear-gradient(180deg, #415e68, #587984 58%, #77939d);
  box-shadow:
    inset 0 11px 18px rgba(25, 43, 49, 0.36),
    inset 0 -3px 5px rgba(218, 233, 236, 0.2),
    0 2px 0 rgba(231, 241, 243, 0.24);
  transform: translateZ(16px);
}

.pa3d-open-box-label {
  position: absolute;
  z-index: 6;
  bottom: 8%;
  left: 50%;
  max-width: 56%;
  padding: 4px 13px;
  overflow: hidden;
  border: 1px solid rgba(65, 88, 97, 0.26);
  border-radius: 5px;
  color: #304f5b;
  background: rgba(245, 250, 249, 0.8);
  box-shadow: 0 2px 5px rgba(41, 62, 69, 0.08);
  font-size: 9px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translate3d(-50%, 0, 20px);
}

.pa3d-generated-row {
  opacity: 0;
  transform: translateX(16px);
}

.pa3d-box-object.is-open.is-closing .pa3d-box-cover {
  transform: translateZ(2px) rotateY(0.01deg);
  transition: transform var(--pa3d-box-close-duration) cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.pa3d-box-object.is-open.is-closing .pa3d-box-base {
  clip-path: inset(0 0 0 50% round 12px);
  transition: none;
}

.pa3d-box-object.is-closing .pa3d-bag-surface {
  z-index: 24;
  overflow: visible;
  clip-path: none;
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  transform: translateZ(56px);
  transform-style: preserve-3d;
  transition: none;
}

.pa3d-box-object.is-closing .pa3d-bag-card {
  --bag-x: 0px !important;
  --bag-y: 0px !important;
  --bag-lift: 0px !important;
  --bag-scale: 1 !important;
  z-index: calc(20 - var(--bag-index));
  pointer-events: none;
  transform: translate3d(0, 0, calc(var(--bag-index) * -1px)) scale(1);
  transition:
    transform var(--pa3d-box-restack-duration) cubic-bezier(0.2, 0.72, 0.18, 1),
    box-shadow 260ms ease,
    opacity 180ms ease;
  will-change: transform;
}

.pa3d-box-object.is-content-stowed .pa3d-bag-surface {
  overflow: hidden;
  clip-path: inset(0 0 0 50% round 0 12px 12px 0);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.pa3d-cabinet-focus.is-near.is-returning {
  transform: translateY(0) scale(1);
  transition: none;
}

.pa3d-full-cabinet.is-open.is-closing .pa3d-cabinet-door-left,
.pa3d-full-cabinet.is-open.is-closing .pa3d-cabinet-door-right {
  transform: rotateY(0.01deg);
  transition: transform 520ms cubic-bezier(0.32, 0.08, 0.3, 1);
}

.pa3d-room-scene {
  transform: translate3d(0, 0, 0);
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: transform 480ms linear, opacity 180ms ease;
}

.pa3d-cabinet-scene,
.pa3d-box-scene,
.pa3d-files-scene {
  transform: translate3d(0, 0, 0);
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: transform 480ms cubic-bezier(0.18, 0.74, 0.2, 1), opacity 180ms ease;
}

.pa3d-room-scene.is-camera-entering {
  transform:
    translate3d(var(--pa3d-camera-x, 0px), var(--pa3d-camera-y, 0px), 0)
    scale(var(--pa3d-camera-scale, 1.16));
  pointer-events: none;
  will-change: transform;
}

.pa3d-cabinet-scene.is-camera-entering,
.pa3d-box-scene.is-camera-entering,
.pa3d-files-scene.is-camera-entering {
  transform:
    translate3d(var(--pa3d-camera-x, 0px), var(--pa3d-camera-y, 0px), 150px)
    scale(var(--pa3d-camera-scale, 1.16));
  pointer-events: none;
  will-change: transform;
}

.pa3d-room-scene.is-camera-returning,
.pa3d-cabinet-scene.is-camera-returning,
.pa3d-cabinet-scene.is-returning,
.pa3d-box-scene.is-camera-returning,
.pa3d-files-scene.is-camera-returning,
.pa3d-files-scene.is-returning {
  opacity: 0.54;
  transform: translate3d(0, 0, -140px) scale(0.96);
  pointer-events: none;
  will-change: transform;
}

.pa3d-file-card.is-camera-entering {
  z-index: 24;
  opacity: 1;
  animation-play-state: paused;
}

.pa3d-files-scene.is-settled .pa3d-file-card.is-camera-entering .pa3d-file-paper,
.pa3d-files-scene.is-settled .pa3d-file-card.is-camera-entering > .pa3d-file-preview {
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.94),
    0 2px 3px rgba(44, 65, 58, 0.08),
    0 20px 31px rgba(38, 67, 57, 0.18);
}

@media (max-width: 720px) {
  .pa3d-room-scene.is-camera-entering {
    transform:
      translate3d(var(--pa3d-camera-x, 0px), var(--pa3d-camera-y, 0px), 0)
      scale(var(--pa3d-camera-scale, 1.08));
  }

  .pa3d-cabinet-scene.is-camera-entering,
  .pa3d-box-scene.is-camera-entering,
  .pa3d-files-scene.is-camera-entering {
    transform:
      translate3d(var(--pa3d-camera-x, 0px), var(--pa3d-camera-y, 0px), 90px)
      scale(var(--pa3d-camera-scale, 1.08));
  }

  .pa3d-room-scene.is-camera-returning,
  .pa3d-cabinet-scene.is-camera-returning,
  .pa3d-cabinet-scene.is-returning,
  .pa3d-box-scene.is-camera-returning,
  .pa3d-files-scene.is-camera-returning,
  .pa3d-files-scene.is-returning {
    transform: translate3d(0, 0, -80px) scale(0.975);
  }
}

.pa3d-files-scene.is-expanded + .pa3d-hud .pa3d-generated-row,
.pa3d-generated-row {
  animation: pa3d-name-generate 360ms ease forwards;
  animation-delay: calc(var(--file-index) * 90ms + 240ms);
}

@keyframes pa3d-file-float {
  0%,
  100% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes pa3d-file-fly {
  0% {
    opacity: 0;
    transform: translate3d(-40px, 230px, -300px) rotateX(48deg) rotateZ(-8deg) scale(0.52);
  }
  58% {
    opacity: 1;
    transform: translate3d(18px, -24px, 80px) rotateX(-4deg) rotateZ(2deg) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0) rotateZ(0) scale(1);
  }
}

@keyframes pa3d-file-ghost {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, -80px) scale(0.88);
  }
  100% {
    opacity: 0.55;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes pa3d-name-generate {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.pa3d-back:focus-visible,
.pa3d-room-cabinet:focus-visible,
.pa3d-box-spine:focus-visible,
.pa3d-hud-row:focus-visible,
.pa3d-file-card:focus-visible {
  outline-offset: 2px;
}

@media (max-width: 1100px) and (min-width: 721px) {
  .pa3d-files-scene {
    min-height: clamp(560px, calc(100vh - 118px), 710px);
    padding-right: 1.4%;
    padding-left: 1.4%;
  }

  .pa3d-file-cloud {
    --file-column-gap: clamp(8px, 0.9vw, 13px);
    grid-template-columns: repeat(var(--file-columns), clamp(94px, 8.2vw, 120px));
    column-gap: var(--file-column-gap);
  }

  .pa3d-open-bag {
    width: min(380px, 58%);
  }
}

@media (max-width: 720px) {
  .paper-archive-3d {
    min-height: 620px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .pa3d-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(470px, 64vh) auto;
    overflow: visible;
  }

  .pa3d-files-layout {
    grid-template-rows: minmax(600px, 72vh) auto;
  }

  .pa3d-hud {
    align-self: start;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    max-height: 360px;
  }

  .pa3d-cabinet-grid {
    gap: 12px;
  }
}

@media (max-width: 720px) {
  .paper-archive-3d {
    min-height: 0;
  }

  .pa3d-header {
    min-height: 58px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding: 8px 10px;
  }

  .pa3d-back {
    min-height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }

  .pa3d-heading {
    justify-items: end;
    text-align: right;
  }

  .pa3d-heading strong {
    font-size: 14px;
  }

  .pa3d-heading span {
    font-size: 10px;
  }

  .pa3d-mode-badge {
    display: none;
  }

  .pa3d-layout {
    gap: 10px;
    padding: 10px;
    grid-template-rows: minmax(440px, 62vh) auto;
  }

  .pa3d-layout.pa3d-files-layout {
    grid-template-rows: minmax(600px, 72vh) auto;
  }

  .pa3d-scene {
    min-height: 440px;
    border-radius: 18px;
  }

  .pa3d-layout::before {
    bottom: -17%;
    height: 56%;
    opacity: 0.42;
  }

  .pa3d-layout::after {
    height: 34%;
    opacity: 0.4;
  }

  .pa3d-hud {
    width: 100%;
    max-width: none;
    max-height: 410px;
    padding: 15px;
    border-radius: 18px;
  }

  .pa3d-cabinet-grid {
    inset: 4% 4% 15%;
    grid-template-columns: repeat(4, minmax(58px, 1fr));
    gap: 8px 5px;
  }

  .pa3d-room-cabinet-body {
    width: min(64px, 17vw);
  }

  .pa3d-room-cabinet-meta small {
    display: none;
  }

  .pa3d-cabinet-scene {
    padding: 30px 16%;
  }

  .pa3d-cabinet-focus {
    width: min(282px, 72vw);
    aspect-ratio: 0.82;
    perspective: 1120px;
  }

  .pa3d-full-cabinet::before {
    right: -13px;
    bottom: -5px;
    width: 13px;
  }

  .pa3d-cabinet-door {
    transition-duration: 620ms;
  }

  .pa3d-box-scene {
    padding: 0;
  }

  .pa3d-cabinet-scene,
  .pa3d-box-scene {
    --pa3d-box-target-width: min(530px, 92vw);
    --pa3d-box-target-aspect: 1.45;
  }

  .pa3d-box-spine-front {
    aspect-ratio: 0.725;
  }

  .pa3d-bag-card-copy {
    top: 31%;
    right: 7%;
    left: 7%;
    padding: 9px;
  }

  .pa3d-bag-focus {
    width: min(310px, 76vw);
  }

  .pa3d-files-scene {
    min-height: 600px;
    padding: 24px 2% 132px;
  }

  .pa3d-file-cloud {
    --file-column-gap: 8px;
    width: 100%;
    min-height: 430px;
    height: 100%;
    max-height: none;
    grid-template-columns: repeat(var(--file-columns), minmax(88px, 106px));
    grid-template-rows: repeat(var(--file-rows), auto);
    gap: 12px var(--file-column-gap);
    padding: 14px 8px 24px;
  }

  .pa3d-file-card {
    min-height: 0;
    gap: 6px;
    padding: 0;
  }

  .pa3d-file-nameplate {
    min-height: 38px;
    padding: 5px 7px;
    border-radius: 9px;
    font-size: 9px;
  }

  .pa3d-file-fallback {
    gap: 5px;
    padding: 10px 9px;
  }

  .pa3d-open-bag {
    bottom: 5px;
    width: min(330px, 72%);
    height: 92px;
  }

}

@media (prefers-reduced-transparency: reduce) {
  .paper-archive-3d .pa3d-header {
    background: #edf3f0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .paper-archive-3d .pa3d-header {
    background: rgba(246, 249, 248, 0.98);
  }

  .paper-archive-3d .pa3d-hud {
    border-color: rgba(62, 91, 81, 0.2);
    background: rgba(237, 243, 240, 0.96);
  }

  .paper-archive-3d .pa3d-file-nameplate {
    border-color: rgba(62, 91, 81, 0.18);
    background: rgba(237, 243, 240, 0.96);
  }
}

@media (prefers-contrast: more) {
  .paper-archive-3d {
    --pa3d-ink: #0b241d;
    --pa3d-muted: #41554e;
    --pa3d-line: rgba(35, 64, 54, 0.36);
  }

  .paper-archive-3d .pa3d-hud {
    border-color: rgba(31, 61, 51, 0.36);
    background: rgba(239, 245, 242, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .paper-archive-3d .pa3d-hud-row:hover,
  .paper-archive-3d .pa3d-hud-row:focus-visible,
  .paper-archive-3d .pa3d-matter-group.is-expanded {
    border-color: rgba(28, 62, 51, 0.44);
  }

  .paper-archive-3d .pa3d-file-nameplate {
    border-color: rgba(31, 61, 51, 0.34);
    background: rgba(239, 245, 242, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .paper-archive-3d,
  .paper-archive-3d .pa3d-layout,
  .paper-archive-3d .pa3d-hud {
    color: CanvasText;
    background: Canvas;
  }

  .paper-archive-3d .pa3d-hud,
  .paper-archive-3d .pa3d-hud-row,
  .paper-archive-3d .pa3d-matter-toggle,
  .paper-archive-3d .pa3d-matter-file,
  .paper-archive-3d .pa3d-file-card,
  .paper-archive-3d .pa3d-file-nameplate,
  .paper-archive-3d .pa3d-file-paper {
    border: 1px solid CanvasText;
    forced-color-adjust: auto;
  }

  .paper-archive-3d .pa3d-hud {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.pa3d-reduce-motion *,
.pa3d-reduce-motion *::before,
.pa3d-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0ms !important;
  transition-duration: 0.01ms !important;
}

.pa3d-reduce-motion .pa3d-files-scene.is-expanded.is-settled .pa3d-file-card {
  animation: none !important;
  transform: none !important;
}

.pa3d-reduce-motion .pa3d-box-spine.is-turning-front,
.pa3d-reduce-motion .pa3d-box-spine.is-turned-front {
  transform: none !important;
  transition: none !important;
}

.pa3d-reduce-motion .pa3d-box-spine.is-turning-front .pa3d-box-spine-front,
.pa3d-reduce-motion .pa3d-box-spine.is-turned-front .pa3d-box-spine-front {
  opacity: 1 !important;
  transform: translateY(-50%) rotateY(0deg) !important;
  transition: none !important;
}

.pa3d-reduce-motion .pa3d-room-scene.is-camera-entering,
.pa3d-reduce-motion .pa3d-room-scene.is-camera-returning,
.pa3d-reduce-motion .pa3d-cabinet-scene.is-camera-entering,
.pa3d-reduce-motion .pa3d-cabinet-scene.is-camera-returning,
.pa3d-reduce-motion .pa3d-cabinet-scene.is-returning,
.pa3d-reduce-motion .pa3d-box-scene.is-camera-entering,
.pa3d-reduce-motion .pa3d-box-scene.is-camera-returning,
.pa3d-reduce-motion .pa3d-files-scene.is-camera-entering,
.pa3d-reduce-motion .pa3d-files-scene.is-camera-returning,
.pa3d-reduce-motion .pa3d-files-scene.is-returning {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .paper-archive-3d *,
  .paper-archive-3d *::before,
  .paper-archive-3d *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .paper-archive-3d .pa3d-files-scene.is-expanded.is-settled .pa3d-file-card {
    animation: none !important;
    transform: none !important;
  }

  .paper-archive-3d .pa3d-box-spine.is-turning-front,
  .paper-archive-3d .pa3d-box-spine.is-turned-front,
  .paper-archive-3d .pa3d-room-scene.is-camera-entering,
  .paper-archive-3d .pa3d-room-scene.is-camera-returning,
  .paper-archive-3d .pa3d-cabinet-scene.is-camera-entering,
  .paper-archive-3d .pa3d-cabinet-scene.is-camera-returning,
  .paper-archive-3d .pa3d-cabinet-scene.is-returning,
  .paper-archive-3d .pa3d-box-scene.is-camera-entering,
  .paper-archive-3d .pa3d-box-scene.is-camera-returning,
  .paper-archive-3d .pa3d-files-scene.is-camera-entering,
  .paper-archive-3d .pa3d-files-scene.is-camera-returning,
  .paper-archive-3d .pa3d-files-scene.is-returning {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .paper-archive-3d .pa3d-box-spine.is-turning-front .pa3d-box-spine-front,
  .paper-archive-3d .pa3d-box-spine.is-turned-front .pa3d-box-spine-front {
    opacity: 1 !important;
    transform: translateY(-50%) rotateY(0deg) !important;
    transition: none !important;
  }

  .pa3d-box-flight,
  .pa3d-box-flight *,
  .pa3d-box-flight *::before,
  .pa3d-box-flight *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}