:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #eef3f8;
  color: #172033;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(45, 120, 255, .12), transparent 28rem),
    linear-gradient(145deg, #f7f9fc 0%, #e8eef7 100%);
}

.simulation-banner {
  position: relative;
  z-index: 5;
  padding: .8rem 1rem;
  border-bottom: 1px solid #f3c368;
  background: #fff2cf;
  color: #5a3900;
  font-size: .95rem;
  font-weight: 750;
  text-align: center;
}

.shell {
  width: min(100% - 2rem, 64rem);
  margin: 0 auto;
  padding: 3.5rem 0;
}

.training-note {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid #bed0e8;
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 34px rgba(24, 45, 76, .08);
}

.training-note svg { flex: 0 0 auto; color: #1558a6; }
.training-note strong, .training-note span { display: block; }
.training-note span { margin-top: .22rem; color: #4a5870; font-size: .91rem; line-height: 1.45; }

.login-card {
  width: min(100%, 28rem);
  margin: 0 auto;
  padding: 2.25rem;
  border: 1px solid rgba(97, 112, 139, .2);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(23, 42, 73, .16);
}

.brand-mark {
  margin: 0 0 1.7rem;
  color: var(--brand, #1558a6);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.04em;
}

h1 { margin: 0; font-size: 2rem; letter-spacing: -.035em; }
.subtitle { margin: .55rem 0 1.7rem; color: #556176; line-height: 1.5; }

label { display: block; margin: 1rem 0 .42rem; font-size: .9rem; font-weight: 700; }
input {
  width: 100%;
  min-height: 3.2rem;
  padding: .8rem .9rem;
  border: 1px solid #9ca8ba;
  border-radius: 9px;
  background: #fff;
  color: #172033;
  font: inherit;
}
input:hover { border-color: var(--brand, #1558a6); }
input:focus { outline: 3px solid color-mix(in srgb, var(--brand, #1558a6) 24%, transparent); border-color: var(--brand, #1558a6); }

.primary {
  width: 100%;
  min-height: 3rem;
  margin-top: 1.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--brand, #1558a6);
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.small-link { margin: 1.25rem 0 0; color: #59657a; font-size: .9rem; text-align: center; }
.small-link a, .back { color: #134f99; font-weight: 700; }
.back { display: block; width: fit-content; margin: 1.25rem auto 0; }

dialog {
  width: min(100% - 2rem, 32rem);
  padding: 0;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 28px 90px rgba(8, 20, 41, .35);
}
dialog::backdrop { background: rgba(8, 20, 41, .62); backdrop-filter: blur(4px); }
.lesson { padding: 1.7rem; }
.lesson-badge { display: inline-block; padding: .38rem .65rem; border-radius: 999px; background: #fff0c5; color: #633f00; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.lesson h2 { margin: 1rem 0 .6rem; font-size: 1.6rem; letter-spacing: -.025em; }
.lesson p { margin: .65rem 0; color: #47546a; line-height: 1.55; }
.url-box { margin: 1rem 0; padding: .8rem .9rem; border: 1px solid #f0c367; border-radius: 10px; background: #fff8e7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .87rem; overflow-wrap: anywhere; }
.lesson-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; }
.lesson-actions a, .lesson-actions button { min-height: 2.65rem; padding: .7rem 1rem; border-radius: 999px; font: inherit; font-weight: 750; cursor: pointer; text-decoration: none; }
.download { border: 0; background: #1558a6; color: #fff; }
.close { border: 1px solid #aab5c5; background: #fff; color: #27344a; }

.hub h1 { font-size: clamp(2.3rem, 7vw, 4.8rem); max-width: 12ch; }
.hub > p { max-width: 42rem; color: #526078; font-size: 1.1rem; line-height: 1.65; }
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.brand-tile { min-height: 10rem; padding: 1.3rem; border: 1px solid #cbd6e5; border-radius: 16px; background: rgba(255,255,255,.86); color: #172033; text-decoration: none; box-shadow: 0 10px 30px rgba(23,42,73,.07); transition: transform .16s ease, box-shadow .16s ease; }
.brand-tile:hover, .brand-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(23,42,73,.13); }
.brand-tile strong { display: block; color: var(--brand); font-size: 1.35rem; }
.brand-tile span { display: block; margin-top: .65rem; color: #5a667a; line-height: 1.45; }

@media (max-width: 720px) {
  .shell { padding: 2rem 0; }
  .login-card { padding: 1.55rem; border-radius: 16px; }
  .brand-grid { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
   Google simulation: a closer match to the real sign-in page.
   Scoped to body.sim-google so the other five simulations are untouched.
   No webfonts are loaded. These pages make no network requests at all, and
   that property is easier to keep true than to re-prove later.
   --------------------------------------------------------------------------- */
body.sim-google {
  background: #fff;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #202124;
}
body.sim-google .shell { max-width: none; padding: 0; }
body.sim-google .g-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 448px;
  margin: 24px auto;
  padding: 48px 40px 36px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #fff;
}
body.sim-google .g-logo {
  display: flex; justify-content: center; margin-bottom: 16px;
  font-size: 26px; font-weight: 500; letter-spacing: -1px; user-select: none;
}
body.sim-google .g-logo span:nth-child(1) { color: #4285f4; }
body.sim-google .g-logo span:nth-child(2) { color: #ea4335; }
body.sim-google .g-logo span:nth-child(3) { color: #fbbc05; }
body.sim-google .g-logo span:nth-child(4) { color: #4285f4; }
body.sim-google .g-logo span:nth-child(5) { color: #34a853; }
body.sim-google .g-logo span:nth-child(6) { color: #ea4335; }
body.sim-google h1 {
  font-size: 24px; font-weight: 400; line-height: 1.33;
  text-align: center; margin: 0 0 8px; color: #202124; letter-spacing: 0;
}
body.sim-google .g-sub { font-size: 16px; text-align: center; margin: 0 0 32px; color: #202124; }
body.sim-google .g-field { position: relative; margin-bottom: 24px; }
body.sim-google .g-field input {
  box-sizing: border-box; width: 100%; height: 56px; padding: 13px 15px;
  font-size: 16px; color: #202124; background: #fff;
  border: 1px solid #dadce0; border-radius: 4px; outline: none;
}
body.sim-google .g-field input:focus { border: 2px solid #1a73e8; padding: 12px 14px; }
body.sim-google .g-field label {
  position: absolute; left: 8px; top: -8px; padding: 0 8px;
  font-size: 12px; color: #5f6368; background: #fff; pointer-events: none;
}
body.sim-google .g-field input:focus + label { color: #1a73e8; }
body.sim-google .g-link {
  display: inline-block; font-size: 14px; font-weight: 500;
  color: #1a73e8; text-decoration: none; padding: 8px; margin: -8px 0 0 -8px;
  border-radius: 4px;
}
body.sim-google .g-link:hover { background: rgba(26,115,232,.04); }
body.sim-google .g-guest { font-size: 14px; line-height: 1.5; margin: 24px 0 32px; color: #202124; }
body.sim-google .g-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body.sim-google .g-actions .primary {
  /* the shared .primary is full width; inside this row it must hug its label */
  width: auto; flex: 0 0 auto;
  min-width: 88px; height: 36px; min-height: 36px; margin: 0; padding: 0 24px;
  font-size: 14px; font-weight: 500; line-height: 36px;
  color: #fff; background: #1a73e8; border: 0; border-radius: 4px; cursor: pointer;
  font-family: inherit;
}
body.sim-google .g-actions .g-link { white-space: nowrap; flex: 0 0 auto; }
body.sim-google .g-actions .primary:hover { background: #1b66c9; box-shadow: 0 1px 2px rgba(60,64,67,.3); }
body.sim-google .g-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 448px; margin: 0 auto 32px; padding: 0 4px; font-size: 12px; color: #5f6368;
}
body.sim-google .g-footer nav { display: flex; gap: 24px; }
body.sim-google .g-footer a { color: #5f6368; text-decoration: none; }
body.sim-google .g-footer a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  body.sim-google .g-card { border: 0; padding: 24px; margin: 0 auto; }
}

/* --- lesson step two: the two ways to get Bouncer --- */
.choice {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #d8dee9;
  border-radius: 10px;
  background: #fbfcfe;
}
.choice strong { display: block; margin-bottom: .25rem; font-size: 1rem; }
.choice p { margin: 0 0 .75rem; font-size: .9rem; }
.prompt-box {
  margin: 0 0 .75rem;
  padding: .75rem;
  max-height: 9rem;
  overflow: auto;
  border-radius: 8px;
  background: #0f172a;
  color: #e2e8f0;
  font: 500 .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.copy-status { display: inline-block; margin-left: .6rem; font-size: .85rem; color: #475569; }
.copy-status.ok { color: #15803d; font-weight: 600; }
.guide-link { font-weight: 600; }
.lesson [tabindex="-1"]:focus { outline: 3px solid var(--brand, #1558a6); outline-offset: 4px; }
.lesson-actions button:focus-visible,
.lesson-actions a:focus-visible,
.choice a:focus-visible,
.choice button:focus-visible { outline: 3px solid var(--brand, #1558a6); outline-offset: 2px; }