*, ::before, ::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: linear-gradient(180deg, #120F18 0%, #261C3B 100%) fixed;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device {
  position: relative;
  flex-shrink: 0;
  width: 393px;
  height: 852px;
  border-radius: 55px;
  overflow: hidden;
  background: #110e17;
  box-shadow: 0 40px 120px #00000080, 0 0 0 1px #ffffff0f;
  transform: scale(var(--scale, 1));
  /* keeps the rounded clip crisp while children animate */
  isolation: isolate;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
}
.screen.is-active { display: block; }
.screen.is-leaving { display: block; z-index: 2; pointer-events: none; }

/* pen.dev exports gradient borders as border-image, which ignores border-radius.
   Re-draw them as a masked ring inside the (1px larger) padding box. */
.gb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gb);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

.tap { cursor: pointer; transition: transform .14s ease, opacity .14s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.tap:active { transform: scale(.94); opacity: .8; }

.toggle-knob { transition: transform .22s cubic-bezier(.3,.7,.3,1); }

.caret { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.flip-spin { animation: spin .45s cubic-bezier(.3,.7,.3,1); }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(180deg); } }

.chat-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
[data-pencil-name="Chat"][data-chat] { transition: opacity .25s ease, transform .25s ease; }