/* TapRewind spike lab (dev only). System fonts only, no external assets. */
:root { color-scheme: light dark; font-family: -apple-system, system-ui, sans-serif; }
body { margin: 0 auto; padding: 16px; max-width: 640px; }
h1 { font-size: 22px; margin: 0 0 8px; }
p { margin: 8px 0; }
[data-lab-target] { display: block; touch-action: manipulation; }
button[data-lab-target] { width: 100%; min-height: 120px; font-size: 28px; border-radius: 16px; border: 0; background: #0a7cff; color: #fff; }
canvas[data-lab-target] { margin: 0 auto; border-radius: 12px; }
.readout { font: 13px/1.35 ui-monospace, Menlo, monospace; background: rgba(127, 127, 127, .15); padding: 8px; border-radius: 8px; margin: 8px 0 16px; }
.origin { font: 12px ui-monospace, Menlo, monospace; opacity: .7; }
iframe { width: 100%; height: 420px; border: 2px solid #888; border-radius: 12px; }
.label { font-weight: 600; margin-top: 16px; }
.big { font: 600 64px/1.1 ui-monospace, Menlo, monospace; text-align: center; margin: 8px 0; }
.stats { font: 18px/1.5 ui-monospace, Menlo, monospace; text-align: center; }
ul { padding-left: 20px; line-height: 1.9; }
/* Compact layout so frame.html shows the top, cross-site and srcdoc frames on one screen. */
html[data-lab="frame"] button[data-lab-target], .framed button[data-lab-target] { min-height: 56px; font-size: 20px; }
html[data-lab="frame"] .readout, .framed .readout { columns: 2; font-size: 11px; margin-bottom: 4px; }
html[data-lab="frame"] h1, .framed h1, .framed p:not(.origin) { display: none; }
html[data-lab="frame"] .label { margin-top: 8px; }
.framed body, html[data-lab="frame"] body { padding: 8px; }
html[data-lab="frame"] iframe { height: 190px; }