/* A display, a proof, and an instrument: depth belongs to the work itself. */
.music-project .product-screen {
  --screen-light-x: 50%;
  --screen-light-y: 18%;
  --screen-tilt-x: 0deg;
  --screen-tilt-y: 0deg;
  isolation: isolate;
  overflow: hidden;
  margin: 8px 0 28px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(145deg, #10171a, #030506 68%) padding-box,
    linear-gradient(115deg, #82fff089, #319dd871 24%, #303944 49%, #e84ca271 76%, #5de3d66b) border-box;
  box-shadow: inset 0 1px 0 #d9f6ff14, 0 26px 70px -38px #2b91ad8c, 0 18px 38px -26px #000;
  transform: none;
  transform-origin: 50% 70%;
}
.music-project .product-screen::before {
  content: '';
  position: absolute;
  inset: 7px;
  z-index: 2;
  border-radius: 9px;
  background:
    radial-gradient(440px circle at var(--screen-light-x) var(--screen-light-y), #bafff017, transparent 46%),
    linear-gradient(108deg, transparent 32%, #bbfff014 47%, transparent 59%);
  background-size: auto, 220% 100%;
  background-position: center, 150% 0;
  mix-blend-mode: screen;
  opacity: .72;
  pointer-events: none;
}
.music-project .product-screen::after {
  content: none;
}
.music-project .product-screen img {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 9px;
  opacity: 1;
  filter: none;
  transform: none;
}
.music-project .product-screen:hover img { transform: none; }
.music-project .screen-launch { z-index: 3; }

.zeta-project .zeta-feature { grid-template-columns: .85fr 1.35fr; align-items: center; gap: 40px; }
.theorem-result { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin: 22px 0 28px; padding: 30px 0 18px; border-block: 1px solid var(--line); }
.theorem-result .art-label { position: static; }
.theorem-result .theorem-number { font-size: clamp(58px, 7.7vw, 112px); margin: 20px 0 0; text-shadow: none; }
.theorem-result > figcaption { max-width: 440px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.theorem-result .proof-link { margin-top: 19px; padding-bottom: 4px; }

/* The active state sits above its neighbors; system layers form a stack. */
.ops-project .architecture-frame {
  padding: 18px 20px 0;
  border: 1px solid #29363d;
  border-top-color: #65767e;
  border-bottom-color: #174557;
  border-radius: 5px;
  background: #000;
  box-shadow: 0 5px 0 #080b0d, 0 6px 0 #23414c;
}
.ops-architecture .states { padding-block: 4px 6px; }
.ops-architecture .states button {
  border-color: #37454c;
  border-top-color: #64767d;
  border-bottom-color: #18232b;
  border-radius: 4px;
  background: #000;
  box-shadow: 0 4px 0 #0b1115, 0 5px 0 #293d48;
}
.ops-architecture .states .on button {
  background: #000;
  border-color: #00efc6;
  border-top-color: #a0ffe9;
  box-shadow: 0 5px 0 #04382f, 0 6px 0 #007d69;
  transform: translateY(-2px);
}
.ops-architecture .layers { gap: 17px; padding: 4px 7px 8px 0; }
.ops-architecture .layer {
  padding: 18px 20px;
  border: 1px solid #35464e;
  border-top-color: #738d94;
  border-left: 3px solid #00efc6;
  border-radius: 3px;
  background: #000;
  box-shadow: 4px 5px 0 #000, 5px 6px 0 #244d5a;
}
.ops-architecture .layer:nth-child(2) { margin-left: 14px; border-left-color: #228ed4; }
.ops-architecture .layer:nth-child(3) { margin-left: 28px; border-left-color: var(--amber); }
.ops-architecture .layer:nth-child(3) b { color: var(--amber); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .music-project .product-screen { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
  .music-project .product-screen:hover { transform: perspective(1200px) rotateX(var(--screen-tilt-x)) rotateY(var(--screen-tilt-y)) translateY(-3px); box-shadow: inset 0 1px 0 #d9f6ff1f, 0 32px 82px -38px #2b91ada6, 0 22px 44px -27px #000; }
  .ops-architecture .states button { transition: border-color .2s, transform .2s, box-shadow .2s; }
  .ops-architecture .states button:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .music-project .product-screen.screen-depth-entered::before { animation: modal-screen-glint 1.35s cubic-bezier(.2,.75,.25,1) both; }
  @keyframes modal-screen-glint {
    0% { background-position: center, -120% 0; opacity: .28; }
    55% { opacity: .9; }
    100% { background-position: center, 150% 0; opacity: .72; }
  }
}
@media (max-width: 760px) {
  .zeta-project .zeta-feature { grid-template-columns: 1fr; gap: 26px; }
  .theorem-result { grid-template-columns: 1fr; gap: 20px; margin-top: 25px; padding: 24px 0; }
  .theorem-result .theorem-number { font-size: clamp(50px, 12.8vw, 86px); margin-top: 20px; }
  .theorem-result > figcaption { font-size: 12px; }
  .music-project .product-screen { margin: 3px 0 20px; padding: 4px; border-radius: 10px; transform: none; box-shadow: inset 0 1px 0 #d9f6ff14, 0 18px 44px -28px #2b91ad70; }
  .music-project .product-screen img { border-radius: 6px; }
  .music-project .product-screen::before { inset: 4px; border-radius: 6px; }
  .ops-project .architecture-frame { padding: 14px 12px 0; }
  .ops-architecture .states button { padding-inline: 11px; }
  .ops-architecture .layer { padding: 17px 13px; }
  .ops-architecture .layer:nth-child(2) { margin-left: 8px; }
  .ops-architecture .layer:nth-child(3) { margin-left: 16px; }
}