/* Only these four showcase chapters adopt the timetable's device shell. */
:is(#deadlines,#ispace,#xiaou,#campus) .desktop-frame {
  border: 6px solid #2c2e32;
  border-radius: 17px;
  background: #f4f7fa;
  overflow: hidden;
  box-shadow: 0 25px 55px #152e461c;
}
:is(#deadlines,#ispace,#xiaou,#campus) .phone {
  padding: 6px;
  border-radius: 42px;
  background: #202327;
  box-shadow: 0 0 0 1px #63696f, 0 30px 60px #1c365a25;
}
:is(#deadlines,#ispace,#xiaou,#campus) .phone-full-capture-screen {
  border-radius: 36px;
  background: #f6f6fa;
  overflow: hidden;
}
:is(#deadlines,#ispace,#xiaou,#campus) .phone-full-capture-screen > img {
  border-radius: inherit;
}
@media (max-width:1000px) {
  :is(#deadlines,#ispace,#xiaou,#campus) .phone {
    padding: 4px;
    border-radius: 31px;
  }
  :is(#deadlines,#ispace,#xiaou,#campus) .phone-full-capture-screen {
    border-radius: 26px;
  }
}
@media (max-width:700px),(max-width:959px) and (max-height:500px) {
  :is(#deadlines,#ispace,#xiaou,#campus) .desktop-frame {
    border-width: 4px;
    border-radius: 12px;
    box-shadow: 0 18px 32px #18375614;
  }
  :is(#deadlines,#ispace,#xiaou,#campus) .phone {
    border-radius: 15% / 7%;
  }
  :is(#deadlines,#ispace,#xiaou,#campus) .phone-full-capture-screen {
    border-radius: 34px;
  }
}
/* The timetable can enable this existing narrow-screen layout at runtime. */
.showcase:has(.chapter-schedule[data-phone-schedule="true"])
:is(#deadlines,#ispace,#xiaou,#campus) .phone {
  padding: 6px;
}