.ibd-panel {
  --ibd-ink: #f4eaf0;
  --ibd-muted: #ac99aa;
  --ibd-accent: #f1a180;
  --ibd-frame: #5d4a53;
  margin: 0;
  color: var(--ibd-ink);
  background: #211b23;
  border: 1px solid #59434e;
  border-radius: 12px;
  overflow: hidden;
  font-family: Geist, 'Plex Arabic', sans-serif;
}

.ibd-project-bar {
  height: 47px;
  padding: 0 23px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #493a46;
  background: #271f28;
}

.ibd-project-bar > svg {
  width: 20px;
  height: 20px;
  color: var(--ibd-accent);
}

.ibd-project-bar > bdi {
  font: 11px AtwMono, monospace;
  color: #d9c5d7;
}

.ibd-project-bar > [data-handoff-status] {
  margin-inline-start: auto;
  font-size: 10px;
  color: var(--ibd-accent);
  min-width: 85px;
  text-align: end;
}

.ibd-scene {
  height: 420px;
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, .62fr) minmax(0, 1.06fr);
  gap: 27px;
  align-items: center;
  justify-items: center;
  padding: 20px 27px;
  direction: ltr;
}

.ibd-device {
  position: relative;
  width: 100%;
  min-width: 0;
  transform: translateY(3px);
  transition: transform 400ms cubic-bezier(.2, .7, .3, 1), opacity 300ms;
}

.ibd-device[data-active=true] {
  transform: translateY(-3px);
}

.ibd-hardware {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 7px;
  border: 1px solid #6e5864;
  border-radius: 10px;
  background: #322932;
  box-shadow: 0 14px 28px #0b080b40;
  transition: border-color 300ms, box-shadow 300ms;
}

.ibd-device[data-active=true] .ibd-hardware {
  border-color: #e1a083;
  box-shadow: 0 14px 28px #0b080b50, 0 0 0 2px #f1a18012;
}

.ibd-screen {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #24202a;
  border: 1px solid #514153;
  border-radius: 4px;
}

.ibd-desktop {
  max-width: 480px;
  aspect-ratio: 16 / 10;
}

.ibd-laptop-base {
  position: absolute;
  top: calc(100% - 1px);
  left: -3%;
  width: 106%;
  height: 9px;
  background: #69545d;
  border-top: 1px solid #96737a;
  border-radius: 1px 1px 60% 60%;
}

.ibd-laptop-base::before {
  content: '';
  position: absolute;
  top: 0;
  left: 41%;
  width: 18%;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: #44333d;
}

.ibd-phone {
  width: 100%;
  max-width: 212px;
  aspect-ratio: 9 / 16;
}

.ibd-phone .ibd-hardware {
  padding: 0 6px;
  border-radius: 24px;
  border-width: 2px;
  background: #3a2e36;
}

.ibd-phone .ibd-screen {
  border-radius: 5px;
}

.ibd-phone-top {
  height: 21px;
  display: grid;
  place-items: center;
  flex: none;
}

.ibd-phone-top > span {
  width: 35px;
  height: 4px;
  background: #1c151c;
  border-radius: 8px;
}

.ibd-phone-bottom {
  height: 17px;
  display: grid;
  place-items: center;
  flex: none;
}

.ibd-phone-bottom > span {
  width: 54px;
  height: 3px;
  background: #ad8a94;
  border-radius: 6px;
}

.ibd-tablet {
  max-width: 390px;
  aspect-ratio: 4 / 3;
}

.ibd-tablet .ibd-hardware {
  padding: 8px 11px;
  border-radius: 17px;
}

.ibd-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px;
  border-bottom: 1px solid #4a3c4c;
  background: #342a36;
  font-size: 10px;
  color: #ddc8dd;
  flex: none;
}

.ibd-chrome > svg {
  width: 12px;
  height: 12px;
  color: #aa8baf;
}

.ibd-app-mark {
  color: var(--ibd-accent);
  font: 600 13px Georgia, serif;
}

.ibd-window-control {
  margin-left: auto;
  font-size: 12px;
  font-style: normal;
  color: #a48aab;
}

.ibd-file-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  border-bottom: 1px solid #433448;
  font-size: 9px;
  color: #a990b3;
  flex: none;
}

.ibd-file-tab > bdi {
  font: 10px AtwMono, monospace;
  color: #f0b596;
  align-self: stretch;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #d88c71;
}

.ibd-source {
  padding: 10px 9px 8px 0;
  flex: 1;
  min-height: 0;
  direction: ltr;
}

.ibd-source-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  min-height: 23px;
}

.ibd-source-row > i {
  font: 9px/23px AtwMono, monospace;
  color: #8c7396;
  text-align: center;
  font-style: normal;
}

.ibd-source-row > code {
  min-width: 0;
  font: 12px/23px AtwMono, 'Plex Arabic', monospace;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
  color: #d3bddc;
  text-align: left;
}

.ibd-command,
.ibd-source-row [data-device-line=label] {
  color: #e9ad8f;
}

.ibd-source-row > .ibd-equation {
  color: #ced7ad;
}

.ibd-source-row > .ibd-prose {
  font-family: AtwSourceSans, Geist, sans-serif;
  font-size: 13px;
  color: #eee3ee;
}

.ibd-source-row > code.ibd-arabic,
.ibd-source-row > code.ibd-arabic > span {
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
  font-family: AtwNotoArabic, 'Plex Arabic', sans-serif;
  font-size: 14px;
  color: #eee3ee;
}

.ibd-caret {
  display: inline-block;
  vertical-align: -2px;
  width: 1px;
  height: 14px;
  margin-inline-start: 1px;
  background: #ffb88e;
  opacity: 0;
}

.ibd-device[data-typing=label] [data-source-row="15"],
.ibd-device[data-typing=arabic] [data-source-row="17"],
.ibd-device[data-typing=continuation] [data-source-row="18"] {
  background: #e69d7910;
}

.ibd-device[data-typing=label] [data-device-line=label] + .ibd-caret,
.ibd-device[data-typing=arabic] [data-device-line=arabic] + .ibd-caret,
.ibd-device[data-typing=continuation] [data-device-line=continuation] + .ibd-caret {
  opacity: 1;
}

.ibd-editor-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 23px;
  padding: 0 9px;
  border-top: 1px solid #413448;
  color: #ab90b6;
  font-size: 8px;
  flex: none;
}

.ibd-editor-status > [data-device-status] {
  color: var(--ibd-accent);
}

.ibd-phone .ibd-chrome,
.ibd-phone .ibd-file-tab {
  height: 27px;
  padding-inline: 8px;
}

.ibd-phone .ibd-source {
  padding: 16px 7px 6px 0;
}

.ibd-phone .ibd-source-row {
  grid-template-columns: 22px minmax(0, 1fr);
  min-height: 26px;
}

.ibd-phone .ibd-source-row > code {
  font-size: 11.5px;
  line-height: 26px;
}

.ibd-phone .ibd-source-row > .ibd-prose {
  font-size: 12px;
}

.ibd-phone .ibd-source-row > code.ibd-arabic,
.ibd-phone .ibd-source-row > code.ibd-arabic > span {
  font-size: 14px;
}

.ibd-phone .ibd-source-row > i {
  font-size: 8px;
}

.ibd-phone .ibd-editor-status {
  font-size: 7px;
  padding-inline: 6px;
}

.ibd-tablet .ibd-source-row {
  min-height: 21px;
}

.ibd-tablet .ibd-source-row > code,
.ibd-tablet .ibd-source-row > i {
  line-height: 21px;
}

.ibd-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 28px;
  height: 62px;
  border-top: 1px solid #493a46;
  background: #271f28;
  direction: ltr;
}

.ibd-progress > span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #8e778d;
  font-size: 11px;
  transition: color 250ms;
}

.ibd-progress > span > svg {
  width: 21px;
  height: 21px;
}

.ibd-progress > span > i {
  position: absolute;
  height: 2px;
  left: 22%;
  right: 22%;
  bottom: 0;
  background: var(--ibd-accent);
  transform: scaleX(0);
  transition: transform 300ms;
}

.ibd-progress > [data-progress=active] {
  color: var(--ibd-accent);
}

.ibd-progress > [data-progress=complete] {
  color: #d8bdce;
}

.ibd-progress > [data-progress=active] > i {
  transform: scaleX(1);
}

@media (max-width: 1300px) and (min-width: 1201px) {
  .ibd-scene { gap: 20px; padding-inline: 22px; }
  .ibd-source { padding-block: 6px; }
  .ibd-source-row { min-height: 21px; grid-template-columns: 23px minmax(0, 1fr); }
  .ibd-source-row > code { font-size: 11px; line-height: 21px; }
  .ibd-source-row > i { line-height: 21px; }
  .ibd-source-row > .ibd-prose { font-size: 12px; }
  .ibd-chrome, .ibd-file-tab { height: 25px; }
  .ibd-tablet .ibd-hardware { padding: 7px; }
}

@media (max-width: 1200px) {
  .ibd-project-bar { height: 42px; padding-inline: 17px; }
  .ibd-scene { height: 390px; display: block; padding: 0 18px; }
  .ibd-device {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% - 36px);
    opacity: 0;
    visibility: hidden;
    transform: translate(calc(-50% + 15px), -50%);
    transition: opacity 260ms, transform 400ms cubic-bezier(.2, .7, .3, 1), visibility 260ms;
  }
  .ibd-device[data-active=true] {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
  }
  .ibd-desktop { max-width: 520px; }
  .ibd-phone { width: 212px; }
  .ibd-tablet { max-width: 460px; }
  .ibd-progress { height: 56px; padding-inline: 15px; }
  .ibd-progress > span { font-size: 11px; gap: 8px; }
}

@media (max-width: 600px) {
  .ibd-scene { height: 380px; padding-inline: 11px; }
  .ibd-device { width: calc(100% - 22px); }
  .ibd-phone { width: 212px; }
  .ibd-desktop { max-width: 410px; }
  .ibd-tablet { max-width: 410px; }
  .ibd-project-bar { height: 40px; padding-inline: 13px; }
  .ibd-project-bar > bdi { font-size: 10px; }
  .ibd-project-bar > svg { width: 18px; height: 18px; }
  .ibd-project-bar > [data-handoff-status] { font-size: 9px; }
  .ibd-progress { height: 54px; padding-inline: 7px; }
  .ibd-progress > span { font-size: 10px; gap: 6px; }
  .ibd-progress > span > svg { width: 19px; height: 19px; }
  .ibd-desktop .ibd-hardware { padding: 5px; border-radius: 7px; }
  .ibd-desktop .ibd-chrome, .ibd-tablet .ibd-chrome { height: 23px; font-size: 9px; padding-inline: 8px; }
  .ibd-desktop .ibd-file-tab, .ibd-tablet .ibd-file-tab { height: 24px; padding-inline: 8px; }
  .ibd-desktop .ibd-source, .ibd-tablet .ibd-source { padding: 5px 8px 4px 0; }
  .ibd-desktop .ibd-source-row, .ibd-tablet .ibd-source-row { min-height: 20px; grid-template-columns: 24px minmax(0, 1fr); }
  .ibd-desktop .ibd-source-row > code, .ibd-tablet .ibd-source-row > code { font-size: 12px; line-height: 20px; }
  .ibd-desktop .ibd-source-row > i, .ibd-tablet .ibd-source-row > i { line-height: 20px; font-size: 8px; }
  .ibd-tablet .ibd-source-row > .ibd-prose { font-size: 12px; }
  .ibd-tablet .ibd-source-row > code.ibd-arabic, .ibd-tablet .ibd-source-row > code.ibd-arabic > span { font-size: 14px; }
  .ibd-desktop .ibd-editor-status, .ibd-tablet .ibd-editor-status { height: 18px; font-size: 7px; padding-inline: 8px; }
  .ibd-desktop [data-source-row="17"], .ibd-desktop [data-source-row="18"] { display: none; }
  .ibd-tablet .ibd-hardware { padding: 6px 8px; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ibd-caret { display: none; }
  .ibd-device { transition: none; }
}