:root {
  color-scheme:light;
  --ink:#243b35;
  --muted:#63726c;
  --green:#254f46;
  --paper:#f8f8f3;
  --line:#dce2d9;
  --soft:#eaf0e7;
  --surface:#ffffff;
  --on-accent:#ffffff;
  --focus:#a96923;
  --danger-bg:#fff3ee;
  --danger-line:#e7c8b9;
  --danger-ink:#963c23;
  --hero-bg:#e7ede3;
  --shadow:#283e3412;
  --waiting-bg:#f0f1ed;
  --waiting-ink:#636d64;
  --received-bg:#edf3fa;
  --received-ink:#315c89;
  --accepted-bg:#eaf3ea;
  --accepted-ink:#2c6650;
  --changes-bg:#fff0dc;
  --changes-ink:#99521f;
  --decorative:#936331;
  --input-line:#83978a;
  --disabled-bg:#f5f7f2;
  --disabled-ink:#536358;
  --placeholder:#63726c;
  --meter-bg:#e9eee6;
  --meter-fill:#5e886e;
  --meter-received:#a8c4bf;
  --banner-line:#ded5ba;
  --banner-bg:#faf4e5;
  --example-bg:#f6f7f1;
  --example-line:#c5d0b4;
  --example-ink:#596452;
  --unsaved:#a05822;
  --answer-bg:#f8faf6;
  --answer-line:#e4e9df;
  --comment-line:#d7b08c;
  --comment-bg:#fcf8f1;
  --comment-ink:#80613b;
  --toast-error:#843a29;
  --on-error:#ffffff;
  --error-bg:#fff1ed;
  --error-line:#e6c8bb;
  --error-ink:#8a3923;
  --backdrop:#172a2670;
  --toast-shadow:#0002;
  /* Google-prescribed brand colors, separate from the ContentReady palette. */
  --google-bg:#ffffff;
  --google-border:#747775;
  --radius:16px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none}
/* System fallback also works before JavaScript loads or when it is unavailable. */
@media (prefers-color-scheme:dark) {
:root:not([data-theme]) {
  color-scheme:dark;
  --ink:#e5eee9;
  --muted:#a6b8ad;
  --green:#99d5b9;
  --paper:#0d1110;
  --line:#35453c;
  --soft:#22362b;
  --surface:#161e1a;
  --on-accent:#10271c;
  --focus:#f2bb72;
  --danger-bg:#38211d;
  --danger-line:#825344;
  --danger-ink:#ffb9a3;
  --hero-bg:#1b2b21;
  --shadow:#0006;
  --waiting-bg:#29352e;
  --waiting-ink:#c0cec5;
  --received-bg:#1f3248;
  --received-ink:#b3d6ff;
  --accepted-bg:#203b2c;
  --accepted-ink:#a0dfb5;
  --changes-bg:#3d2d1c;
  --changes-ink:#ffd099;
  --decorative:#dfb881;
  --input-line:#6c8374;
  --disabled-bg:#202a24;
  --disabled-ink:#afc1b4;
  --placeholder:#a6b8ad;
  --meter-bg:#35453c;
  --meter-fill:#8bcda4;
  --meter-received:#8bb5d1;
  --banner-line:#6e5834;
  --banner-bg:#302819;
  --example-bg:#202b21;
  --example-line:#77945e;
  --example-ink:#beceb5;
  --unsaved:#ffd099;
  --answer-bg:#101813;
  --answer-line:#35453c;
  --comment-line:#b38b58;
  --comment-bg:#2c261d;
  --comment-ink:#e3c095;
  --toast-error:#7d3025;
  --on-error:#fff0eb;
  --error-bg:#38211d;
  --error-line:#825344;
  --error-ink:#ffb9a3;
  --backdrop:#000a;
  --toast-shadow:#0008;
  --google-bg:#131314;
  --google-border:#8e918f;
}
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --ink:#e5eee9;
  --muted:#a6b8ad;
  --green:#99d5b9;
  --paper:#0d1110;
  --line:#35453c;
  --soft:#22362b;
  --surface:#161e1a;
  --on-accent:#10271c;
  --focus:#f2bb72;
  --danger-bg:#38211d;
  --danger-line:#825344;
  --danger-ink:#ffb9a3;
  --hero-bg:#1b2b21;
  --shadow:#0006;
  --waiting-bg:#29352e;
  --waiting-ink:#c0cec5;
  --received-bg:#1f3248;
  --received-ink:#b3d6ff;
  --accepted-bg:#203b2c;
  --accepted-ink:#a0dfb5;
  --changes-bg:#3d2d1c;
  --changes-ink:#ffd099;
  --decorative:#dfb881;
  --input-line:#6c8374;
  --disabled-bg:#202a24;
  --disabled-ink:#afc1b4;
  --placeholder:#a6b8ad;
  --meter-bg:#35453c;
  --meter-fill:#8bcda4;
  --meter-received:#8bb5d1;
  --banner-line:#6e5834;
  --banner-bg:#302819;
  --example-bg:#202b21;
  --example-line:#77945e;
  --example-ink:#beceb5;
  --unsaved:#ffd099;
  --answer-bg:#101813;
  --answer-line:#35453c;
  --comment-line:#b38b58;
  --comment-bg:#2c261d;
  --comment-ink:#e3c095;
  --toast-error:#7d3025;
  --on-error:#fff0eb;
  --error-bg:#38211d;
  --error-line:#825344;
  --error-ink:#ffb9a3;
  --backdrop:#000a;
  --toast-shadow:#0008;
  --google-bg:#131314;
  --google-border:#8e918f;
}
* {
  box-sizing:border-box}
body {
  margin:0}
button,input,textarea,select {
  font:inherit}
button,a,input,textarea,select {
  touch-action:manipulation}
button,a {
   -webkit-tap-highlight-color:transparent}
button {
  cursor:pointer;
  border:1px solid transparent;
  border-radius:9px;
  min-height:44px;
  padding:11px 18px;
  background:var(--green);
  color:var(--on-accent);
  font-weight:650;
  line-height:1.3}
button:hover {
  filter:brightness(.94)}
button:disabled {
  opacity:.55;
  cursor:wait}
a {
  color:var(--green);
  text-underline-offset:4px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:3px}
button.secondary {
  background:var(--surface);
  color:var(--ink);
  border-color:var(--line)}
button.danger {
  background:var(--danger-bg);
  border-color:var(--danger-line);
  color:var(--danger-ink)}
.text-button {
  color:var(--green);
  background:transparent;
  padding:8px 10px}
.header {
  height:89px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 max(5vw,20px);
  border-bottom:1px solid var(--line);
  background:var(--surface)}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-size:21px;
  font-weight:750;
  letter-spacing:-.8px;
  color:var(--ink)}
.brand-mark {
  position:relative;
  background:var(--green);
  color:var(--on-accent);
  border-radius:10px;
  width:33px;
  height:33px;
  font-size:29px;
  line-height:25px;
  padding-left:6px}
.brand-mark span {
  position:absolute;
  right:1px;
  top:0;
  font-size:20px}
.pilot {
  font-size:9px;
  letter-spacing:1px;
  border:1px solid var(--line);
  border-radius:5px;
  padding:3px 5px;
  margin-left:5px;
  color:var(--muted)}
nav {
  display:flex;
  gap:12px;
  align-items:center}
nav a {
  font-size:14px;
  text-decoration:none}
main {
  max-width:1260px;
  margin:0 auto;
  padding:44px 40px 70px;
  min-height:calc(100vh - 170px)}
h1,h2,h3,p {
  margin-top:0}
h1 {
  font-size:36px;
  letter-spacing:-1.5px;
  line-height:1.16;
  margin-bottom:14px}
h2 {
  font-size:23px;
  letter-spacing:-.6px}
h3 {
  font-size:17px;
  line-height:1.4}
p {
  line-height:1.65}
small,.muted {
  color:var(--muted)}
small {
  line-height:1.5}
.eyebrow {
  font-size:11px;
  letter-spacing:1.7px;
  font-weight:750;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px}
.row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px}
.actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center}
.stack {
  display:grid;
  gap:18px}
.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px}
.hero {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  gap:70px;
  padding:50px 0 60px}
.hero h1 {
  font-size:60px;
  letter-spacing:-2.7px}
.hero .intro {
  max-width:490px;
  color:var(--muted);
  font-size:18px}
.hero small {
  display:block;
  margin-top:18px}
.hero-art {
  background:var(--hero-bg);
  border-radius:30px;
  padding:28px;
  transform:rotate(-2deg)}
.hero-art .card {
  transform:rotate(2deg);
  box-shadow:0 18px 55px var(--shadow)}
.sample-line {
  border-top:1px solid var(--line);
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:14px}
.sample-line:last-child {
  padding-bottom:0}
.mini-label {
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px}
.status {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:6px;
  padding:5px 9px;
  font-size:11px;
  letter-spacing:.2px;
  font-weight:700;
  white-space:nowrap;
  background:var(--waiting-bg);
  color:var(--waiting-ink)}
.status:before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor}
.status.received {
  color:var(--received-ink);
  background:var(--received-bg)}
.status.accepted {
  color:var(--accepted-ink);
  background:var(--accepted-bg)}
.status.changes_requested {
  color:var(--changes-ink);
  background:var(--changes-bg)}
.grid3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px}
.feature {
  padding:22px 5px;
  border-top:1px solid var(--line)}
.feature .number {
  color:var(--decorative);
  font-family:Georgia,serif;
  font-size:27px;
  display:block;
  margin-bottom:18px}
.feature p {
  font-size:14px;
  color:var(--muted)}
.section-title {
  margin:22px 0}
.pricing {
  margin-top:35px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px}
.price {
  font-size:32px;
  letter-spacing:-1px;
  font-weight:700}
.price small {
  font-size:14px;
  font-weight:400;
  letter-spacing:0}
.auth {
  max-width:480px;
  margin:28px auto}
.auth h1 {
  font-size:30px}
.auth .card {
  padding:32px}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px}
label {
  display:grid;
  gap:8px;
  font-size:13px;
  font-weight:650}
input,textarea,select {
  width:100%;
  background:var(--surface);
  border:1px solid var(--input-line);
  border-radius:8px;
  padding:12px;
  color:var(--ink);
  min-height:46px;
  max-width:100%}
textarea {
  min-height:125px;
  resize:vertical;
  line-height:1.6}
textarea.small {
  min-height:82px}
textarea:disabled {
  background:var(--disabled-bg);
  color:var(--disabled-ink)}
input::placeholder,textarea::placeholder {
  color:var(--placeholder)}
.hint {
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  font-weight:400}
.title-row {
  margin-bottom:28px}
.title-row p {
  margin-bottom:0;
  color:var(--muted)}
.stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  margin-bottom:32px}
.stat {
  padding:22px 26px;
  border-right:1px solid var(--line)}
.stat:last-child {
  border-right:none}
.stat strong {
  font-size:28px;
  display:block;
  margin-bottom:4px;
  letter-spacing:-1px}
.stat span {
  color:var(--muted);
  font-size:12px}
.empty {
  text-align:center;
  padding:55px 25px}
.empty h2 {
  margin-top:16px}
.empty .empty-icon {
  font-size:30px;
  color:var(--green);
  background:var(--soft);
  padding:13px 23px;
  border-radius:18px;
  display:inline-block}
.project-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px}
.project-card h2 {
  margin-bottom:8px}
.project-card p {
  font-size:14px;
  color:var(--muted)}
.project-card button {
  margin-top:20px}
.project-card .row {
  align-items:flex-start}
.meter {
  height:7px;
  display:flex;
  border-radius:10px;
  background:var(--meter-bg);
  overflow:hidden;
  margin:14px 0 9px}
.meter span {
  background:var(--meter-fill);
  display:block}
.meter .received-meter {
  background:var(--meter-received)}
.progress-copy {
  font-size:12px;
  color:var(--muted)}
.banner {
  padding:14px 20px;
  border:1px solid var(--banner-line);
  background:var(--banner-bg);
  border-radius:10px;
  font-size:13px;
  line-height:1.6;
  margin-bottom:25px}
.workspace {
  display:grid;
  grid-template-columns:235px minmax(0,1fr);
  gap:34px}
.sidebar {
  align-self:start;
  position:sticky;
  top:20px}
.page-nav {
  display:grid;
  gap:8px;
  margin:14px 0 25px}
.page-nav button {
  background:transparent;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  padding:13px 16px;
  border-radius:9px;
  font-weight:550}
.page-nav button.active {
  background:var(--green);
  color:var(--on-accent)}
.page-nav small {
  color:inherit;
  font-size:11px;
  opacity:.8}
.sidebar .card {
  padding:18px}
.sidebar .card p {
  font-size:12px;
  margin-bottom:10px;
  color:var(--muted)}
.sidebar .card strong {
  font-size:13px}
.section-heading {
  margin-bottom:22px}
.section-heading h2 {
  margin-bottom:5px}
.question-card {
  margin-bottom:20px;
  padding:27px}
.question-card .question-title {
  display:flex;
  align-items:start;
  gap:16px;
  justify-content:space-between;
  margin-bottom:13px}
.question-card h3 {
  margin:0;
  max-width:530px}
.question-card .help {
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:13px}
.example {
  background:var(--example-bg);
  border-left:3px solid var(--example-line);
  padding:12px 15px;
  font-size:13px;
  line-height:1.6;
  margin:0 0 20px;
  color:var(--example-ink)}
.example strong {
  font-size:10px;
  letter-spacing:1px;
  display:block;
  text-transform:uppercase;
  margin-bottom:4px}
.question-card form {
  display:grid;
  gap:16px}
.save-status {
  font-size:12px;
  color:var(--muted)}
.save-status.unsaved {
  color:var(--unsaved)}
.answer {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:14px;
  line-height:1.7;
  padding:17px;
  background:var(--answer-bg);
  border:1px solid var(--answer-line);
  border-radius:8px;
  margin-bottom:14px}
.link-list {
  display:grid;
  gap:10px;
  font-size:13px;
  overflow-wrap:anywhere;
  margin:14px 0}
.comment {
  border-left:2px solid var(--comment-line);
  padding:8px 14px;
  background:var(--comment-bg);
  font-size:13px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:10px 0}
.comment strong {
  font-size:10px;
  display:block;
  text-transform:uppercase;
  color:var(--comment-ink);
  letter-spacing:1px;
  margin-bottom:4px}
.review {
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:20px}
.review label {
  font-weight:500}
details {
  margin-top:16px}
summary {
  cursor:pointer;
  min-height:40px;
  display:list-item;
  font-size:13px;
  color:var(--muted);
  padding:10px 0}
details form {
  padding-top:10px}
.client-intro {
  max-width:740px}
.client-intro p {
  color:var(--muted);
  font-size:16px}
.back {
  display:inline-block;
  margin-bottom:20px;
  font-size:13px}
.toast {
  position:fixed;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  background:var(--green);
  color:var(--on-accent);
  padding:15px 22px;
  border-radius:12px;
  box-shadow:0 8px 30px var(--toast-shadow);
  z-index:20;
  max-width:min(92vw,700px);
  font-size:14px}
.toast.error {
  color:var(--on-error);
  background:var(--toast-error)}
.error-box {
  background:var(--error-bg);
  border:1px solid var(--error-line);
  color:var(--error-ink);
  border-radius:8px;
  padding:12px;
  font-size:13px;
  line-height:1.5}
.error-box:empty {
  display:none}
footer {
  border-top:1px solid var(--line);
  padding:20px max(5vw,20px);
  font-size:11px;
  color:var(--muted);
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between}
footer button {
  font-size:11px}
dialog {
  background:var(--surface);
  max-width:620px;
  width:calc(100% - 32px);
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px;
  color:var(--ink);
  max-height:88vh}
dialog::backdrop {
  background:var(--backdrop);
  backdrop-filter:blur(3px)}
dialog h2 {
  margin-bottom:12px}
dialog .stack {
  margin-bottom:20px}
dialog textarea {
  min-height:150px}
.loading {
  text-align:center;
  padding:70px;
  color:var(--muted)}
.skip {
  position:fixed;
  top:-60px;
  left:10px;
  z-index:30;
  background:var(--surface);
  padding:12px}
.skip:focus {
  top:10px}
.list {
  padding-left:20px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8}
.no-margin {
  margin:0}
.metric-row {
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  gap:16px}
.chip {
  background:var(--soft);
  padding:5px 9px;
  border-radius:5px;
  font-size:12px;
  color:var(--green)}
.toolbar {
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line)}

@media(max-width:900px) {
  .hero {
  gap:30px}
.hero h1 {
  font-size:45px}
.workspace {
  grid-template-columns:195px minmax(0,1fr);
  gap:20px}
.question-title {
  flex-wrap:wrap}
.question-card {
  padding:22px}
main {
  padding:30px 24px 60px}
.header {
  padding:0 24px}
.hero-art {
  padding:18px}
}

@media(max-width:650px) {
  .header {
  height:auto;
  min-height:76px;
  padding:16px 20px;
  flex-wrap:wrap;
  gap:12px}
.brand {
  font-size:19px}
nav {
  gap:3px}
nav button {
  font-size:12px;
  padding:9px}
nav a {
  font-size:12px}
main {
  padding:25px 18px 45px}
h1 {
  font-size:30px}
.hero {
  grid-template-columns:1fr;
  padding:20px 0 35px;
  gap:35px}
.hero h1 {
  font-size:45px}
.hero .intro {
  font-size:16px}
.hero-art {
  margin:0 6px}
.grid3 {
  grid-template-columns:1fr;
  gap:5px}
.feature {
  padding:20px 0}
.feature .number {
  float:left;
  margin:0 17px 15px 0;
  font-size:23px}
.pricing,.project-grid,.form-grid {
  grid-template-columns:1fr}
.title-row {
  align-items:flex-start;
  flex-direction:column;
  gap:18px}
.stats {
  margin-bottom:25px}
.stat {
  padding:16px 12px}
.stat strong {
  font-size:24px}
.stat span {
  font-size:11px}
.workspace {
  display:block}
.sidebar {
  position:static}
.page-nav {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  margin:8px 0 22px}
.page-nav button {
  padding:10px 5px;
  font-size:12px;
  display:grid;
  justify-items:center;
  gap:5px}
.sidebar>.eyebrow {
  display:none}
.sidebar .card {
  margin-bottom:22px}
.question-card {
  padding:20px 16px}
.question-card .question-title {
  gap:10px}
.question-card h3 {
  font-size:16px}
.auth {
  margin-top:5px}
.auth .card {
  padding:24px}
.card {
  padding:22px}
.actions {
  gap:8px}
.actions button {
  font-size:13px;
  padding:10px 13px}
.client-intro p {
  font-size:14px}
.banner {
  padding:12px 14px}
.section-heading {
  margin-top:10px}
footer {
  align-items:flex-start;
  flex-direction:column;
  padding:20px}
footer button {
  padding-left:0}
dialog {
  padding:23px}
textarea {
  font-size:16px}
.project-card .row {
  flex-wrap:wrap}
.row.wrap {
  flex-wrap:wrap}
}


progress {
  appearance:none;
  width:100%;
  height:7px;
  border:0;
  border-radius:10px;
  background:var(--meter-bg);
  margin:17px 0 9px;
  overflow:hidden}
progress::-webkit-progress-bar {
  background:var(--meter-bg);
  border-radius:10px}
progress::-webkit-progress-value {
  background:var(--meter-fill);
  border-radius:10px}
progress::-moz-progress-bar {
  background:var(--meter-fill);
  border-radius:10px}
.sample-progress {
  width:42%}


.skip:not(:focus) {
  clip-path:inset(50%);
  width:1px;
  height:1px;
  overflow:hidden;
  padding:0}

.account-settings { max-width:680px; margin:0 auto; }
.account-settings .muted { overflow-wrap:anywhere; }
nav { flex-wrap:wrap; }

.header-tools { display:flex; align-items:center; justify-content:flex-end; gap:16px; flex-wrap:wrap; }
.theme-control { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.theme-picker { position:relative; display:inline-flex; }
.theme-control select { appearance:none; -webkit-appearance:none; width:auto; min-height:44px; padding:8px 36px 8px 12px; font-size:13px; }
.theme-chevron { position:absolute; right:10px; top:50%; transform:translateY(-50%); pointer-events:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
@media (forced-colors:active) {
  .theme-control select { appearance:auto; -webkit-appearance:auto; padding:8px 12px; }
  .theme-chevron { display:none; }
}
@media(max-width:650px) {
  .header-tools { width:100%; justify-content:space-between; gap:8px; }
  .theme-control { gap:5px; }
}

/* Official Google logo and vector lettering keep their proportions and colors.
   The responsive native button supplies the boundary instead of a fixed SVG box. */
button.google-signin {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  padding:3px 12px;
  border:1px solid var(--google-border);
  border-radius:9px;
  background:var(--google-bg);
}
button.google-signin:hover { filter:none; box-shadow:0 2px 6px var(--shadow); }
button.google-signin:active { box-shadow:inset 0 0 0 1px var(--google-border); }
.google-signin img { display:block; width:180px; height:40px; max-width:100%; object-fit:contain; }
.auth-divider {
  display:flex;
  align-items:center;
  gap:12px;
  margin:24px 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.auth-divider::before,.auth-divider::after {
  content:"";
  height:1px;
  flex:1;
  background:var(--line);
}
.auth .card > .muted { margin-bottom:24px; }
.auth .card > form[data-form="auth"] + .hint { margin-top:16px; }
.auth .card > .text-button { display:block; width:100%; margin-top:8px; }

.google-signin .google-dark { display:none; }
:root[data-theme="dark"] .google-signin .google-light { display:none; }
:root[data-theme="dark"] .google-signin .google-dark { display:block; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .google-signin .google-light { display:none; }
  :root:not([data-theme="light"]) .google-signin .google-dark { display:block; }
}