/* The private preview's landing (D55): the panel's tokens (spec D53 1.3 and 1.4), the brand lockup (2.2), one card on a
   flat page, no motion beyond focus and state. Dark by default, light when the system asks for it. */
:root {
  color-scheme: dark;
  --app-bg: #0d0d0c; --surface-0: #121211; --surface: #181816;
  --line: rgba(255, 250, 235, .07); --line-strong: rgba(255, 250, 235, .12);
  --text: #f3f1ea; --text-2: #b4b1a7; --text-3: #8a877e;
  --accent: #fed00b; --accent-hover: #ffda3a; --accent-press: #e9bf00; --on-accent: #16150f;
  --bad: #ff8a80;
  --card-hi: inset 0 1px 0 rgba(255, 255, 255, .04);
  --e1: 0 1px 0 rgba(0, 0, 0, .35), 0 12px 32px -18px rgba(0, 0, 0, .65);
  --focus: 0 0 0 2px var(--app-bg), 0 0 0 4px #fed00b;
  --brand-fg: #f3f1ea; --brand-me: #fed00b; --brand-plate: #16150f;
  --f-ui: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-display: "Jost Variable", "Jost", "Futura", "Avenir Next", "Century Gothic", system-ui, sans-serif;
  --f-ar: "Readex Pro Variable", "Readex Pro", "Noto Sans Arabic", "Geeza Pro", system-ui, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --app-bg: #f4f3ef; --surface-0: #efeee9; --surface: #ffffff;
    --line: rgba(22, 21, 15, .09); --line-strong: rgba(22, 21, 15, .16);
    --text: #16150f; --text-2: #55534b; --text-3: #6e6b62;
    --accent-hover: #f2c500; --accent-press: #e0b600;
    --bad: #b42318;
    --card-hi: none;
    --e1: 0 1px 2px rgba(22, 21, 15, .06), 0 12px 28px -18px rgba(22, 21, 15, .22);
    --focus: 0 0 0 2px #ffffff, 0 0 0 4px #16150f;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--app-bg); color: var(--text); font: 400 14px/20px var(--f-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html[dir=rtl] body { font-family: var(--f-ar); line-height: 24px; }

.gate {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.card {
  width: 100%; max-width: 400px; padding: 32px; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--card-hi), var(--e1);
}

/* The lockup: BUG-A-SALT is the real logo's top row (the mask is drawn at the box's width and the box shows its top 344.4
   of 529.9 units), MIDDLE EAST runs flush under it in the brand's yellow. Always on ink. */
.lockup {
  --w: 300px; display: inline-flex; flex-direction: column; gap: 7px; margin-bottom: 28px; padding: 14px 16px;
  border-radius: 10px; background: var(--brand-plate); forced-color-adjust: none;
}
.lockup__mark {
  display: block; width: var(--w); aspect-ratio: 3271.6 / 344.4; background: var(--brand-fg);
  -webkit-mask: url("logo-v1.svg") top left / 100% auto no-repeat; mask: url("logo-v1.svg") top left / 100% auto no-repeat;
}
.lockup__me {
  display: flex; justify-content: space-between; width: var(--w); color: var(--brand-me);
  font: 600 calc(var(--w) / 9.5 * .42) / 1 var(--f-display); text-transform: uppercase;
}
.lockup__me .sp { width: .5em; }

h1 { margin: 0 0 8px; font: 500 28px/34px var(--f-display); letter-spacing: -.01em; }
html[dir=rtl] h1 { font: 600 26px/38px var(--f-ar); letter-spacing: 0; }
.lead { margin: 0 0 24px; color: var(--text-2); }

.pin-form { width: 100%; display: flex; flex-direction: column; align-items: center; }
.pin { display: flex; gap: 12px; justify-content: center; margin: 0; padding: 0; border: 0; min-width: 0; }
.pin__box {
  width: 56px; height: 64px; padding: 0; border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--surface-0); color: var(--text); caret-color: var(--accent);
  font: 600 24px/1 var(--f-ui); font-variant-numeric: tabular-nums; text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pin__box:hover { border-color: var(--text-3); }
.pin__box:focus { outline: none; border-color: transparent; box-shadow: var(--focus); }
.pin__box::-ms-reveal { display: none; }
.error { min-height: 20px; margin: 12px 0 4px; color: var(--bad); font-weight: 500; }
html[dir=rtl] .error { min-height: 24px; }
.open {
  width: 100%; height: 44px; margin-top: 8px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font: 600 14px/1 var(--f-ui); transition: background-color .15s ease;
}
html[dir=rtl] .open { font-family: var(--f-ar); }
.open:hover { background: var(--accent-hover); }
.open:active { background: var(--accent-press); }
.open:focus-visible { outline: none; box-shadow: var(--focus); }
.pin-form.is-sending .open { opacity: .7; cursor: progress; }
.lang { margin-top: 20px; padding: 4px 6px; border-radius: 6px; color: var(--text-2); font-size: 13px; text-decoration: none; }
.lang:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.lang:focus-visible { outline: none; box-shadow: var(--focus); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 400px) {
  .card { padding: 24px; border-radius: 16px; }
  .lockup { --w: 240px; }
  .pin { gap: 10px; }
  .pin__box { width: 52px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media (forced-colors: active) {
  .card, .pin__box { border-color: CanvasText; }
  .lockup { background: Canvas; }
  .lockup__mark { background: CanvasText; }
  .lockup__me { color: CanvasText; }
  .open { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
}