/* Playground tabs, and the Live examples tab: real sites running inside a phone or a computer frame. */
.pg-tabs-wrap { padding-top: clamp(18px, 3vw, 34px); }
.pg-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--mist); }
.pg-tab { border: 0; background: transparent; border-radius: 999px; padding: 11px 22px; font: inherit; font-weight: 800; font-size: var(--t-sm); color: var(--muted); cursor: pointer; transition: background 250ms var(--ease-out), color 250ms var(--ease-out); white-space: nowrap; }
.pg-tab[aria-selected="true"] { background: var(--ink); color: var(--white); }
.pg-tab:not([aria-selected="true"]):hover { color: var(--ink); }
.pg-tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.live { padding-block: clamp(24px, 4vw, 52px) clamp(56px, 8vw, 110px); }
.live[hidden] { display: none; }
.live-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.live-head h1 { margin: 0 0 14px; }
.live-head .lead { margin: 0; }
.live-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.live-card { border: 1.5px solid var(--line); border-radius: 22px; background: var(--white); overflow: hidden; transition: border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out); }
.live-card[data-on="true"] { border-color: var(--ink); box-shadow: 0 18px 40px -22px oklch(0 0 0 / 0.45); }
.live-pick { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; padding: 14px; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.live-pick:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; border-radius: 22px; }
.live-thumb { display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--mist); box-shadow: 0 8px 20px -12px oklch(0 0 0 / 0.5); }
.live-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.live-txt { display: grid; gap: 4px; min-width: 0; }
.live-txt b { font-size: 1.15rem; font-weight: 860; line-height: 1.15; }
.live-txt small { color: var(--muted); font-size: var(--t-sm); }
.live-badge { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; }
.live-badge--elite { background: var(--ink); color: #E9CF8E; }
.live-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.live-tags i { font-style: normal; font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--mist); }
.live-open { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--line); background: var(--mist); color: var(--brand-ink); font-weight: 800; font-size: var(--t-sm); text-decoration: none; }
.live-open:hover, .live-open:focus-visible { background: var(--brand-tint); }
.live-open span:last-child { direction: ltr; color: var(--muted); font-weight: 700; font-size: 0.8rem; }

.live-stage { position: sticky; top: 92px; display: grid; justify-items: center; gap: 16px; }
.live-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--mist); }
.live-mode { border: 0; background: transparent; border-radius: 999px; padding: 8px 18px; font: inherit; font-weight: 800; font-size: var(--t-sm); color: var(--muted); cursor: pointer; }
.live-mode[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.live-mode:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.live-frame { position: relative; background: var(--ink); box-shadow: 0 40px 80px -36px oklch(0 0 0 / 0.55); animation: live-pop 420ms var(--ease-out); }
@keyframes live-pop { from { opacity: 0.4; scale: 0.97; } }
.live-frame[data-mode="phone"] { height: clamp(380px, calc(100svh - 290px), 632px); width: auto; max-width: 100%; aspect-ratio: 390 / 844; padding: 9px; border-radius: 40px; }
.live-frame[data-mode="desktop"] { width: 100%; max-width: 660px; border-radius: 14px; overflow: hidden; }
.live-bar { display: none; }
.live-frame[data-mode="desktop"] .live-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #2B2B2B; direction: ltr; }
.live-bar i { width: 9px; height: 9px; border-radius: 50%; background: #6B6B6B; }
.live-bar span { flex: 1; margin-inline: 12px; text-align: center; font-size: 0.72rem; color: #BDBDBD; font-weight: 600; }
.live-view { position: relative; overflow: hidden; background: #0D0D0E; direction: ltr; }
.live-frame[data-mode="phone"] .live-view { position: absolute; inset: 9px; border-radius: 32px; }
.live-frame[data-mode="desktop"] .live-view { aspect-ratio: 16 / 10; }
.live-island { display: none; }
.live-frame[data-mode="phone"] .live-island { display: block; position: absolute; top: 17px; left: 50%; translate: -50% 0; width: 27%; height: 17px; border-radius: 10px; background: #000; z-index: 3; pointer-events: none; }
.live-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #9A9A9A; font-weight: 700; font-size: var(--t-sm); }
.live-view iframe { position: absolute; top: 0; left: 0; border: 0; background: #fff; transform-origin: 0 0; background: transparent; opacity: 0; transition: opacity 400ms var(--ease-out); }
.live-view iframe.is-ready { opacity: 1; }
.live-note { margin: 0; text-align: center; color: var(--muted); font-size: var(--t-sm); max-width: 36ch; }
.live-big { gap: 8px; }

@media (max-width: 960px) {
  .live-grid { grid-template-columns: minmax(0, 1fr); }
  .live-stage { display: none; }
}
@media (max-width: 760px) {
  .pg-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .pg-tab { padding: 12px 8px; text-align: center; }
  .live-pick { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .live-thumb { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { .live-frame { animation: none; } .live-view iframe { transition: none; } }
.live-frame[data-mode="phone"] .live-island { display: none; }
@media (max-width: 480px) { .live-open span:last-child { display: none; } .live-open { padding-block: 13px; } }
.live-open span:first-child { white-space: nowrap; }
@media (max-height: 900px) { .live-note { display: none; } .live-frame[data-mode="phone"] { height: clamp(380px, calc(100svh - 232px), 632px); } }

/* Make it yours: the preview phone stays on screen for as long as the options are being changed.
   It is sized to the window, so it always fits between the header and the bottom edge. */
@media (min-width: 961px) {
  .try-stage { top: 100px; }
  .try-stage .phone { --pw: clamp(180px, calc((100svh - 240px) / 2.08), 312px); }
}
@media (min-width: 961px) and (max-height: 900px) {
  .try-stage .phone { --pw: clamp(180px, calc((100svh - 132px) / 2.08), 312px); }
  .try-hint { display: none; }
}

/* No rounded clipping of the embedded site (some Windows graphics cards leave a white wedge in the clipped corner).
   The screen is a plain rectangle; the bezel around it is thick enough that the screen's square corners sit inside the
   frame's rounded outline, like an older iPhone. */
.live-frame[data-mode="phone"] { padding: 14px; border-radius: 46px; }
.live-frame[data-mode="phone"] .live-view { inset: 14px; border-radius: 0; }
.live-frame[data-mode="desktop"] { overflow: visible; border-radius: 12px 12px 0 0; }
.live-frame[data-mode="desktop"] .live-bar { border-radius: 12px 12px 0 0; }
.live-frame[data-mode="desktop"] .live-view { border-radius: 0; }