/* The frames (frames.js): a browser window, the taskbar's end, Memoir for Windows' window, the pointer and keycaps.
   Dark, every corner rounded, no one's real branding. */
.live-clock { display: inline-block; flex: none; }
.live-clock .logo { width: 100%; }

/* ---------- a browser window ---------- */
.bw {
  --bw-r: 16px;
  position: relative;
  border-radius: var(--bw-r);
  background: #202124;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: clip;
  font-family: var(--inter);
}
.bw svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bw-tabs { display: flex; align-items: flex-end; gap: 6px; height: 40px; padding: 0 12px; background: #161618; }
.bw-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(240px, 46%);
  height: 32px;
  padding: 0 10px 0 12px;
  border-radius: 10px 10px 0 0;
  background: #202124;
  color: #e8e8ea;
  font-size: 12.5px;
}
.bw-fav { flex: none; width: 14px; height: 14px; border-radius: 4px; background: #3c3c41; }
.bw-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bw-x, .bw-new { display: grid; place-items: center; color: #9aa0a6; }
.bw-x svg { width: 12px; height: 12px; transform: rotate(45deg); }
.bw-new { width: 28px; height: 28px; margin-bottom: 2px; border-radius: 8px; }
.bw-tool { display: flex; align-items: center; gap: 4px; height: 46px; padding: 0 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.bw-btn { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; color: #c4c7c5; }
.bw-btn.dim { color: #5f6368; }
.bw-url {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  height: 34px;
  margin: 0 6px;
  padding: 0 14px;
  border-radius: 999px;
  background: #2b2c2f;
  color: #c4c7c5;
  font-size: 13.5px;
}
.bw-url svg { width: 14px; height: 14px; flex: none; }
.bw-addr { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bw-ext { position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; }
.bw-page { position: relative; background: #000; }

/* ---------- the taskbar's end ---------- */
.tb {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  padding: 0 10px 0 8px;
  background: rgba(32, 32, 34, 0.96);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06);
  color: #f3f3f3;
  font-family: var(--inter);
}
.tb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tb-up, .tb-tray { display: grid; place-items: center; width: 32px; height: 40px; border-radius: 6px; }
.tb-sys { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 6px; }
.tb-time { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; height: 40px; padding: 0 8px; border-radius: 6px; font-size: 12px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tb-time b { font-weight: 400; }
.tb-time small { font-size: 12px; color: #f3f3f3; }

/* ---------- Memoir for Windows' window ---------- */
.ww {
  position: relative;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 32px 80px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4);
  overflow: clip;
}

/* ---------- the pointer ---------- */
.ptr {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}
.ptr-arrow { position: absolute; top: -4px; left: -5px; width: 28px; height: 28px; transform-origin: 5px 4px; }
.ptr-arrow svg { width: 28px; height: 28px; }
.ptr-tap {
  position: absolute;
  top: -18px;
  left: -18px;
  z-index: 39;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

/* ---------- keycaps ---------- */
.keycap {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: 11px;
  background: #1c1c1e;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #f5f5f7;
  font: 600 16px/1 var(--inter);
  font-variant-numeric: tabular-nums;
}
.keycap.wide { min-width: 64px; font-size: 14px; }

/* ---------- the real app, in a section (appframe.js) ---------- */
.appframe { position: relative; overflow: clip; background: #000; }
.appframe iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #000; color-scheme: dark; }
.appframe.inert iframe { pointer-events: none; }