/* Sign-in, sign-up and password pages, and the public calculators: one layout, one dark theme.
   Both products look the same (the apps' black terminal theme, the sun mark, green for actions); only the
   lockup and copy differ, chosen by html[data-product]:
   html[data-product="sparko"]  Ezinore's SPARKO TERMINAL (the default)
   html[data-product="twin"]    Ezinore Digital Twin
   Chivo for text, Chivo Mono for figures, labels and codes (self-hosted, SIL Open Font License). */

@font-face { font-family: "Chivo"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/chivo-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Chivo"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/chivo-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Chivo Mono"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/chivo-mono-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Chivo Mono"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/chivo-mono-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* --- tokens ------------------------------------------------------------------------------- */

:root {
  --sans: "Chivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Chivo Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Pure black, structure from thin borders, green for actions, gold for the sun: the apps' dark theme
     (brand, faint and dark text on green match web/src/styles.css; panels 10px, fields and buttons 7px). */
  --bg: #000000; --bar: #000000; --panel: #0B0B0C; --panel-2: #111214; --border: #1E1F22; --border-strong: #2B2D31;
  --text: #F2F3F5; --muted: #A0A4AB; --faint: #7A7F87; --label: #C2C6CC;
  --brand: #12A37F; --brand-text: #2BC79C; --fill: #12A37F; --fill-hover: #17B98F; --on-fill: #03140F;
  --accent: #F4B832; --tint: rgba(18, 163, 127, .12); --ring: rgba(18, 163, 127, .5);
  --field: #000000; --field-border: #5C6068; --field-hover: #7A7F87; --field-readonly: #111214;
  --danger: #F87171; --danger-bg: rgba(239, 68, 68, .1); --ok: #4ADE9F; --ok-bg: rgba(18, 163, 127, .12);
  --shadow: none; --radius: 10px; --radius-field: 7px;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A0A4AB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* Each product shows only its own lockup and copy. */
:root[data-product="twin"] [data-for="sparko"], :root:not([data-product="twin"]) [data-for="twin"] { display: none !important; }
[hidden] { display: none !important; }

/* --- base ---------------------------------------------------------------------------------- */

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
a { color: var(--brand-text); text-underline-offset: 2px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
a:focus-visible { border-radius: 3px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--mono); }

/* --- top bar and lockups ------------------------------------------------------------------- */

.bar { height: 60px; background: var(--bar); border-bottom: 1px solid var(--border); }
.bar-inner { width: min(1160px, 100%); height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lockup { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); }
.lockup-text { display: flex; flex-direction: column; font-family: var(--mono); line-height: 1.15; white-space: nowrap; }
.lockup-text small { font-size: 10px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }
.lockup-text b { font-size: 13.5px; font-weight: 600; letter-spacing: .05em; }
.sun { display: block; width: 30px; height: 30px; flex: none; }
.bar-link {
  flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-field); color: var(--text); font: 500 12px/1 var(--mono); letter-spacing: .04em; text-decoration: none;
}
.bar-link:hover { border-color: var(--brand); color: var(--text); }

/* --- layout -------------------------------------------------------------------------------- */

.layout {
  width: min(1160px, 100%); margin: 0 auto; padding: 56px 24px 72px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 72px; align-items: start;
}
.layout.wide-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 64px; }
.layout.single { grid-template-columns: minmax(0, 460px); justify-content: center; }
.layout.centred { min-height: calc(100vh - 61px); align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.layout.centred .intro { position: static; }
.intro { position: sticky; top: 32px; max-width: 560px; }
.eyebrow { margin: 0; color: var(--accent); font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
h1 { margin: 14px 0 16px; max-width: 16em; font-size: 38px; line-height: 1.1; font-weight: 700; letter-spacing: -.012em; text-wrap: balance; }
.lede { margin: 0 0 14px; max-width: 36em; color: var(--muted); font-size: 15.5px; line-height: 1.62; }
.honest { margin: 20px 0 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--accent); color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 36em; }
.aside { margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.aside a { font-weight: 600; }

/* What SPARKO TERMINAL does: a compact board of its screens. */
.features { margin: 22px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.features li { padding: 12px 14px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--panel); min-width: 0; }
.features li:nth-child(2n) { border-right: 0; }
.features li:nth-last-child(-n+2) { border-bottom: 0; }
.features b { display: flex; align-items: center; gap: 7px; font: 600 11.5px/1.3 var(--mono); letter-spacing: .02em; }
.features b::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--brand); border-radius: 1px; }
.features span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.4; }

/* The steps from sign-up to live. */
.steps { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.steps b { color: var(--text); font-weight: 600; }
.steps i {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--mono); font-style: normal;
  border: 1px solid var(--accent); color: var(--accent);
}

/* Scope strip on the sign-in page. */
.scope { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.scope div { padding: 14px 14px 14px 0; }
.scope div + div { padding-left: 14px; border-left: 1px solid var(--border); }
.scope strong { display: block; font: 600 11.5px/1.3 var(--mono); letter-spacing: .02em; }
.scope span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.4; }

/* --- panel and forms ----------------------------------------------------------------------- */

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.panel-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--border); }
.panel-head h1, .panel-head h2 { margin: 0; max-width: none; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.005em; }
.panel-head p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.progress { display: flex; gap: 6px; margin-top: 14px; }
.progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--border-strong); }
.progress span.on { background: var(--brand); }

form { padding: 20px 24px 24px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.section + .section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.section-title { display: flex; align-items: baseline; gap: 10px; float: left; width: 100%; margin: 0 0 14px; padding: 0; font: 600 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.section-title i { font-style: normal; color: var(--accent); font-weight: 500; }
.section-title + * { clear: both; }

label, .label { display: block; margin-bottom: 6px; color: var(--label); font: 500 11.5px/1.35 var(--mono); letter-spacing: .02em; }
label small, .label small { font: 400 11.5px/1.35 var(--sans); letter-spacing: 0; color: var(--muted); }
.field + .field, .row + .field, .field + .row, .row + .row, .row + .hint + .field { margin-top: 14px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.row > .field { margin-top: 0; }
.row.keep { gap: 8px; }

input, select, textarea {
  display: block; width: 100%; min-height: 42px; margin: 0; padding: 9px 11px; border: 1px solid var(--field-border); border-radius: var(--radius-field);
  background: var(--field); color: var(--text); font: 400 14px/1.4 var(--sans); transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--field-hover); }
input:focus, select:focus, textarea:focus { outline: 2px solid transparent; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
input[readonly] { background: var(--field-readonly); color: var(--muted); }
input[type="number"], input.mono { font-family: var(--mono); font-size: 13.5px; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
select { -webkit-appearance: none; appearance: none; padding-right: 32px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 11px center; cursor: pointer; }
select option { background: var(--panel); color: var(--text); }
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.phone { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
.phone select { font-family: var(--mono); font-size: 13px; }
.unit { position: relative; }
.unit input { padding-right: 52px; }
.unit span { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font: 500 12px/1 var(--mono); pointer-events: none; }
.code-input { min-height: 58px; font: 500 28px/1 var(--mono); letter-spacing: .42em; text-align: center; padding-left: calc(11px + .42em); }
/* Two-factor set-up: the QR code stays black on white (what phone cameras read best), the key and codes in the mono face. */
.qr { margin: 12px 0 4px; }
.qr img { display: block; width: 180px; height: 180px; padding: 8px; border-radius: 8px; background: #ffffff; }
.setup-key { color: var(--text); word-break: break-all; }
.codes { margin: 0 0 4px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-field); background: var(--field); color: var(--text); font: 500 14px/1.7 var(--mono); white-space: pre; }
.recovery { padding: 20px 24px 24px; }
.recovery .check { margin-top: 14px; }

/* Checkbox tiles: the native box (keyboard and screen readers as usual), in the product's colour. */
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.checks.wide { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.checks + .field { margin-top: 16px; }
.check {
  display: flex; align-items: center; gap: 9px; min-height: 40px; margin: 0; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-field); background: var(--field); color: var(--text); font: 400 13px/1.3 var(--sans); letter-spacing: 0; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.check:hover { border-color: var(--field-hover); }
.check input { flex: none; width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: var(--brand); cursor: pointer; box-shadow: none; }
.check:has(input:checked) { border-color: var(--brand); background: var(--tint); }
.check:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.check input:focus { box-shadow: none; }

.hint { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.hint.warn { color: var(--danger); }
.counter { margin-top: 5px; text-align: right; color: var(--muted); font: 400 11px/1.3 var(--mono); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

button { font: inherit; }
.primary {
  display: block; width: 100%; min-height: 46px; margin-top: 22px; padding: 0 16px; border: 1px solid var(--fill); border-radius: var(--radius-field);
  background: var(--fill); color: var(--on-fill); cursor: pointer; font: 600 14.5px/1.2 var(--sans); letter-spacing: .005em;
  transition: background-color .15s ease, border-color .15s ease;
}
.primary:hover { background: var(--fill-hover); border-color: var(--fill-hover); }
.primary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.primary:disabled { opacity: .6; cursor: wait; }
.link-button { padding: 0; border: 0; background: none; color: var(--brand-text); font: 600 13px/1.4 var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-button:hover { color: var(--text); }
.link-button:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; }
.forgot { margin: 8px 0 0; text-align: right; font-size: 12.5px; }
.forgot a { font-weight: 600; }

.error, .done { display: none; margin-top: 14px; padding: 10px 12px; border-radius: var(--radius-field); font-size: 13px; line-height: 1.5; }
.error { border-left: 3px solid var(--danger); background: var(--danger-bg); color: var(--danger); }
.done { border-left: 3px solid var(--brand); background: var(--ok-bg); color: var(--ok); }
.visible { display: block; }
form > .done:first-child { margin-top: 0; }
.invite { margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-field); background: var(--tint); color: var(--text); font-size: 13px; line-height: 1.5; }
.sent-to { margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
.foot, .security { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.switch { padding: 14px 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; line-height: 1.5; }
.switch a { font-weight: 600; }
.switch p { margin: 0; }
.switch p + p { margin-top: 8px; }
.apply-line { display: flex; align-items: flex-start; gap: 8px; }
.apply-line img { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* --- the code field appears where registration takes access codes -------------------------- */

.code-field { display: none; }
:root[data-registration="code_or_approval"] .code-field, :root[data-registration="code"] .code-field { display: block; }

/* --- smaller screens ------------------------------------------------------------------------ */

@media (max-width: 960px) {
  .layout, .layout.wide-panel, .layout.centred { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 36px; min-height: 0; }
  .intro { position: static; max-width: 640px; }
  .panel { width: 100%; max-width: 600px; }
  .layout.single .panel { max-width: none; }
  h1 { font-size: 32px; }
  /* Sign-in: the form first. */
  .layout.centred .panel { order: -1; }
  /* Sign-up: the form comes straight after the headline (and Sparko's honest note); the rest of the story follows it. */
  .layout.wide-panel { row-gap: 0; }
  .layout.wide-panel .intro { display: contents; }
  .layout.wide-panel .intro > * { max-width: 640px; }
  .layout.wide-panel .panel { order: 1; margin-top: 24px; }
  .layout.wide-panel .intro > .honest { margin-top: 4px; }
  .layout.wide-panel .intro > .features, .layout.wide-panel .intro > .steps, .layout.wide-panel .intro > .aside { order: 2; }
  .layout.wide-panel .intro > .features, .layout.wide-panel .intro > .steps { margin-top: 32px; }
}
@media (max-width: 560px) {
  .bar-inner { padding: 0 16px; }
  .layout, .layout.wide-panel { padding: 24px 16px 48px; gap: 28px; }
  .layout.wide-panel { row-gap: 0; }
  h1 { font-size: 27px; margin-top: 10px; }
  .lede { font-size: 15px; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .row.keep { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .scope { grid-template-columns: minmax(0, 1fr); }
  .scope div, .scope div + div { padding: 12px 0; border-left: 0; }
  .scope div + div { border-top: 1px solid var(--border); }
  form { padding: 18px 16px 20px; }
  .panel-head { padding: 18px 16px 14px; }
  .switch { padding: 14px 16px; }
}
@media (max-width: 400px) {
  .lockup-text b { font-size: 12.5px; letter-spacing: .03em; }
  .bar-link { padding: 0 10px; }
  .phone { grid-template-columns: 92px minmax(0, 1fr); }
  .features span { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* --- the sign-in page: the logo and the product's name, the form, and the energy assets behind them --- */

body.signin-page { min-height: 100vh; display: grid; place-items: center; overflow-x: hidden; }
/* The scene: wind, solar, a substation, batteries and the grid in fine line work along the bottom of the page, wired to
   one bus with power moving along it. It fits the page's width and sits on its bottom edge at every size. */
.energy-scene { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 24%, #000 56%); mask-image: linear-gradient(to bottom, transparent 24%, #000 56%); }
.energy-scene * { vector-effect: non-scaling-stroke; }
.energy-scene .es-line, .energy-scene .es-cable { fill: none; stroke: rgba(196, 202, 210, .36); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.energy-scene .es-cable { stroke: rgba(196, 202, 210, .2); stroke-dasharray: 3 4; }
.energy-scene .es-bus { fill: none; stroke: rgba(43, 199, 156, .22); stroke-width: 1.2; }
.energy-scene .es-fill { fill: #060708; stroke: rgba(196, 202, 210, .4); stroke-width: 1.1; stroke-linejoin: round; }
.energy-scene .es-rib { fill: none; stroke: rgba(196, 202, 210, .14); stroke-width: 1; }
.energy-scene .es-ground { fill: none; stroke: rgba(196, 202, 210, .22); stroke-width: 1; }
.energy-scene .es-solar-base { fill: #0b0a07; }
.energy-scene .es-solar { fill: url(#es-glint); stroke: rgba(238, 194, 110, .55); stroke-width: 1.1; stroke-linejoin: round; }
.energy-scene .es-solar-grid { fill: none; stroke: rgba(238, 194, 110, .24); stroke-width: .9; }
.energy-scene .es-track { fill: rgba(196, 202, 210, .1); }
.energy-scene .es-charge { fill: rgba(43, 199, 156, .8); }
.energy-scene .es-node { fill: #060708; stroke: rgba(43, 199, 156, .6); stroke-width: 1.1; }
.energy-scene .es-hub { fill: rgba(43, 199, 156, .85); }
.energy-scene .es-flow { fill: none; stroke: rgba(43, 199, 156, .8); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 16; animation: es-flow 2.2s linear infinite; }
.energy-scene .es-flow.slow { stroke: rgba(43, 199, 156, .6); animation-duration: 3.4s; }
/* Into the batteries while they fill, still while they are full, back out while they empty, in step with their charge bars. */
.energy-scene .es-flow.es-store { animation: es-store 24s linear infinite; }
@keyframes es-flow { to { stroke-dashoffset: -18; } }
@keyframes es-store { 0% { stroke-dashoffset: 0; opacity: 1; } 42% { stroke-dashoffset: -108; opacity: 1; } 46%, 54% { opacity: .2; }
  58% { stroke-dashoffset: -108; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .energy-scene .es-flow, .energy-scene .es-flow.es-store { animation: none; } }
body.signin-page::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 30% 34% at 50% 40%, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .3) 60%, transparent 100%); }
.signin { position: relative; z-index: 1; width: min(380px, calc(100% - 32px)); padding: 48px 0; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.signin-mark { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.signin-logo { display: block; width: min(232px, 64vw); height: auto; }
.signin-product { padding-left: .34em; font: 600 13.5px/1 var(--mono); letter-spacing: .34em; color: var(--text); white-space: nowrap; }
.signin-panel { width: 100%; background: rgba(11, 11, 12, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.signin-panel form { padding: 22px 22px 20px; }
.signin-panel .field + .field { margin-top: 12px; }
.signin-panel input::placeholder { color: var(--faint); opacity: 1; }
.signin-step { margin: 0; padding: 20px 22px 0; font-size: 16px; line-height: 1.3; font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }