/* Kīhei presentation chrome only. The concept iframe retains its own identity. */
:root {
  color-scheme: dark;
  --chrome-bg: #080b0e;
  --chrome-panel: #151b20;
  --chrome-ink: #eff2ef;
  --chrome-muted: #a6b1b7;
  --chrome-line: #343c42;
  --chrome-action: #e5edef;
  --chrome-action-ink: #11171b;
}
[data-theme="light"] {
  color-scheme: light;
  --chrome-bg: #edf0f2;
  --chrome-panel: #e2e7ea;
  --chrome-ink: #172126;
  --chrome-muted: #4d5a62;
  --chrome-line: #bac4ca;
  --chrome-action: #23333d;
  --chrome-action-ink: #f5f8fa;
}
@font-face {font-family: Archivo;src:url('/fonts/library/archivo-variable-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;}
body {font-family:Archivo,Arial,sans-serif;color:var(--chrome-ink);background:var(--chrome-bg);}
.preview-bar {
  background: var(--chrome-panel);
  color: var(--chrome-ink);
  border-color: var(--chrome-line);
}
.preview-brand-mark,
.preview-action.primary {
  background: var(--chrome-action);
  color: var(--chrome-action-ink);
}
.preview-brand-copy > span {
  color: var(--chrome-muted);
}
.preview-stage,
.preview-app {
  background: var(--chrome-bg);
}
.preview-action,
.device-switcher,
.device-switcher button {
  border-radius: 4px;
}
.device-switcher button[aria-pressed="true"] {
  background: var(--chrome-action);
  color: var(--chrome-action-ink);
}
.preview-action,.device-switcher {color:var(--chrome-ink);border-color:var(--chrome-line);background:var(--chrome-panel);}
.device-switcher button {color:var(--chrome-muted);min-height:44px;font-family:inherit;text-transform:none;letter-spacing:0;}
.preview-action.primary {background:var(--chrome-action);color:var(--chrome-action-ink);}
.preview-brand-copy strong {text-transform:none;font-size:14px;}
.preview-brand-copy span {text-transform:none;font-family:inherit;}
.preview-frame-wrap.phone {border-color:var(--chrome-line);box-shadow:0 20px 60px #0003;}
.expired {background:var(--chrome-bg);color:var(--chrome-ink);}
.expired p {color:var(--chrome-muted);}
.expired a {background:var(--chrome-action);color:var(--chrome-action-ink);border-radius:4px;}
.preview-theme-toggle {display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;background:transparent;color:var(--chrome-ink);cursor:pointer;}
:focus-visible {outline:2px solid var(--chrome-ink);outline-offset:3px;}
@media(max-width:760px){.preview-bar {gap:6px;padding:8px;}.preview-actions {gap:4px;}.preview-brand {gap:6px;}.preview-brand-mark {width:26px;}.preview-brand-copy strong {font-size:12px;max-width:38vw;}}
