:root {
  --bone: #e8e4d8; --ink: #070707; --ash: #9d998d; --line: rgba(232, 228, 216, .22);
  --mono: ui-monospace, 'SF Mono', 'DM Mono', Menlo, Consolas, monospace;
  --bar: 44px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--ink); color: var(--bone); font: 400 11px/1 var(--mono); overflow: hidden; display: grid; grid-template-rows: var(--bar) 1fr; height: 100vh; height: 100dvh; }
button { font: inherit; color: inherit; background: none; border: 1px solid var(--line); padding: 7px 10px; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; touch-action: manipulation; }
button:hover, button:focus-visible { border-color: var(--bone); outline: none; }
button[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }

/* ---------- bar ---------- */
.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 10px; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .06em; min-width: 0; }
.side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.side.b { justify-content: flex-end; }
.side b { font-weight: 400; background: var(--bone); color: var(--ink); width: 20px; height: 20px; display: grid; place-items: center; flex: none; }
.who { color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who em { font-style: normal; color: var(--bone); }
.ctl { display: flex; align-items: center; gap: 8px; }
.name { margin-right: 6px; }
.seg { display: flex; }
.seg button + button { border-left: 0; }
.snd { padding: 5px 8px; flex: none; }

/* ---------- stage ---------- */
.stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.pane + .pane { border-left: 1px solid var(--line); }
.stage.swapped .pane:first-child { order: 2; border-left: 1px solid var(--line); }
.stage.swapped .pane + .pane { border-left: 0; }
.pane.live::after { content: ''; position: absolute; inset: 0; border-top: 2px solid var(--bone); pointer-events: none; }
.device { width: 100%; height: 100%; }
iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--ink); }

/* two phones */
.stage[data-view="phones"] .pane { display: grid; place-items: center; }
.stage[data-view="phones"] .device {
  width: 390px; height: 844px; flex: none;
  transform: scale(var(--k, 1)); transform-origin: center;
  border: 1px solid var(--line); border-radius: 34px; overflow: hidden;
  box-shadow: 0 0 0 7px #151514, 0 0 0 8px var(--line);
}

/* ---------- the mirrored cursor ---------- */
.ghost { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .2s; will-change: transform; }
.ghost.on { opacity: 1; }
.ghost svg { display: block; margin: -2px 0 0 -4px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.ghost i { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px; border: 1.5px solid var(--bone); border-radius: 50%; opacity: 0; }
.ghost.tap i { animation: tap .45s ease-out; }
@keyframes tap { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(1.2); } }

.note { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9; background: var(--bone); color: var(--ink); padding: 10px 14px; line-height: 1.5; max-width: 90vw; }

/* ---------- narrow screens: stack the two ---------- */
@media (max-width: 820px) {
  :root { --bar: 76px; }
  .bar { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0 8px; padding: 0 8px; }
  .ctl { grid-column: 1 / -1; grid-row: 1; justify-content: center; }
  .name, #swap { display: none; }
  .side { grid-row: 2; }
  .stage[data-view="split"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .stage[data-view="split"] .pane + .pane { border-left: 0; border-top: 1px solid var(--line); }
}