:root { font: 14px system-ui, sans-serif; color: #202124; background: #f1f3f4; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1320px; margin: auto; padding: 16px; }
header, .bar, form, #tabs { display: flex; align-items: center; gap: 8px; }
header { justify-content: space-between; padding: 4px 0 14px; }
header b { font-size: 20px; }
header span { font-size: 11px; letter-spacing: 1px; color: #5f6368; }
article { border: 1px solid #dadce0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 8px 30px #20212415; }
.bar, form { padding: 8px 12px; border-bottom: 1px solid #dadce0; }
.tab-strip { background: #dfe5ed; align-items: end; padding-bottom: 0; }
#tabs { gap: 4px; overflow-x: auto; }
#tabs button { width: clamp(90px, 15vw, 175px); overflow: hidden; text-overflow: ellipsis; border-radius: 10px 10px 0 0; background: #d0d9e5; text-align: left; }
#tabs button[aria-pressed="true"] { background: white; font-weight: 600; }
#navigation { background: white; }
input, button { font: inherit; padding: 8px 12px; }
input { min-width: 0; border: 1px solid #dadce0; border-radius: 8px; }
#url, #text { flex: 1; }
#url { border: 1px solid transparent; background: #f1f3f4; border-radius: 24px; }
#url:focus { background: #fff; border-color: #1a73e8; outline: 2px solid #d2e3fc; }
button { background: #eef3fa; color: #174ea6; border: 0; border-radius: 8px; cursor: pointer; white-space: nowrap; }
button:hover:enabled { background: #d2e3fc; }
button:disabled { opacity: .45; cursor: default; }
#start, #go, #save { background: #1a73e8; color: white; }
#stop { background: #fce8e6; color: #a50e0e; }
#timer { margin-left: auto; font-variant-numeric: tabular-nums; }
#screen { background: #fff; min-height: 320px; display: grid; place-items: center; }
#empty { text-align: center; padding: 32px; }
#empty p, footer { color: #5f6368; }
#image { width: 100%; display: block; cursor: default; }
#image[hidden] { display: none; }
#image:focus-visible { outline: 2px solid #1a73e8; outline-offset: -2px; }
footer { font-size: 12px; padding-bottom: 10px; }
@media(max-width: 700px) {
  main { padding: 8px; }
  .bar, form { flex-wrap: wrap; }
  #password { flex: 1; }
  #text { flex-basis: 100%; }
}
