@font-face { font-family: 'Roboto'; font-weight: 400; src: url(/fonts/roboto-latin-400-normal.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Roboto'; font-weight: 500; src: url(/fonts/roboto-latin-500-normal.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Roboto'; font-weight: 700; src: url(/fonts/roboto-latin-700-normal.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Roboto Mono'; font-weight: 400; src: url(/fonts/roboto-mono-latin-400-normal.woff2) format('woff2'); font-display: block; }

:root {
  --blue: #4285F4; --red: #EA4335; --yellow: #FBBC05; --green: #34A853;
  --bg: #F8F9FA; --panel: #FFFFFF; --line: #DADCE0; --soft: #E8EAED;
  --text: #202124; --mid: #5F6368; --muted: #9AA0A6; --hl: #FEEFC3;
  --font: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Roboto Mono', Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overflow: hidden; }
body { -webkit-font-smoothing: antialiased; }

/* Every screen is designed at 1920x1080 and scaled to fit the device (letterboxed). */
.viewport { position: fixed; inset: 0; background: var(--bg); }
.stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: var(--bg); }

.stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; display: flex; }
.stripe i { flex: 1; } .stripe i:nth-child(1) { background: var(--blue); } .stripe i:nth-child(2) { background: var(--red); }
.stripe i:nth-child(3) { background: var(--yellow); } .stripe i:nth-child(4) { background: var(--green); }

.logo { position: absolute; left: 80px; top: 50px; width: 220px; height: 80px; border: 2px solid #BDC1C6; background: var(--soft);
  display: flex; align-items: center; justify-content: center; font: 700 22px var(--font); color: var(--mid); }

.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 3px solid var(--blue);
  background: var(--blue); color: #fff; font: 700 38px var(--font); letter-spacing: 0.06em; cursor: pointer; padding: 0 60px; height: 120px; }
.btn.outline { background: var(--panel); color: var(--blue); }
.btn:focus-visible { outline: 6px solid rgba(66,133,244,.35); outline-offset: 4px; }

.label { font: 700 22px var(--font); letter-spacing: 0.15em; color: var(--mid); text-transform: uppercase; }
.center { text-align: center; }