/* The in-progress page (public/soon.html): a black anodised unit whose screen is booting SunoMPC,
   with the waiting-list form above it. Same tokens as the app's dark unit. */
:root {
  --desk: #121315; --chassis: #2b2d31; --chassis-2: #222428; --ink: #e6e8ea; --ink-2: #9ea4aa;
  --screen: #0b0d0c; --screen-line: #1f2621; --phos: #e9f1ea; --phos-2: #8fa394; --seg-off: #1c231e;
  --key: #3a3d42; --key-edge: #17181a; --field: #1d1f22; --line: #3a3d42;
  --orange: #ff5b1f; --orange-edge: #c43c0b; --green: #19b56a; --bad: #ff7a5c; --blue: #4d7dff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100svh; display: grid; place-items: center; padding: 32px 16px; background: var(--desk); color: var(--ink); font: 500 18px/1.5 "Barlow Semi Condensed", system-ui, sans-serif; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.wrap { width: min(640px, 100%); display: grid; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 26px; letter-spacing: -.01em; }
.brand svg { width: 34px; height: 34px; }
.brand b { color: var(--orange); }
h1 { margin: 0; font-size: clamp(38px, 7vw, 60px); line-height: 1.02; letter-spacing: -.02em; }
.lead { margin: 10px 0 0; max-width: 46ch; color: var(--ink-2); font-size: 19px; }

/* The waiting list */
.notify { display: grid; gap: 8px; }
.notify > label { font-weight: 700; font-size: 17px; }
.notify-row { display: flex; gap: 10px; }
.notify input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink); font: 500 18px "Barlow Semi Condensed", system-ui, sans-serif; }
.notify input::placeholder { color: #8d9399; }
.notify input[aria-invalid="true"] { border-color: var(--bad); }
.notify button { flex: none; height: 48px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--orange); color: #fff; font: 700 19px "Barlow Semi Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 3px 0 var(--orange-edge); transition: transform .08s, box-shadow .08s; }
.notify button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--orange-edge); }
.notify button:disabled { cursor: progress; opacity: .75; }
.msg { margin: 0; min-height: 1.5em; font-size: 16px; }
.msg.ok { color: var(--green); }
.msg.info { color: var(--phos); }
.msg.bad { color: var(--bad); }
.note { margin: 0; color: var(--ink-2); font-size: 14px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The unit */
.unit { padding: 18px; border-radius: 18px; background: linear-gradient(180deg, var(--chassis), var(--chassis-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 48px rgba(0, 0, 0, .5); }
.lcd { min-height: 236px; padding: 16px 18px; border-radius: 8px; background: var(--screen); box-shadow: inset 0 0 0 1px var(--screen-line), inset 0 3px 10px rgba(0, 0, 0, .7); font: 500 14px/1.7 "JetBrains Mono", ui-monospace, monospace; color: var(--phos); }
.lcd p { margin: 0; white-space: pre-wrap; }
.lcd .dim { color: var(--phos-2); }
.lcd .ok { color: var(--green); }
.cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--phos); animation: blink 1s steps(2) infinite; }
.meter { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; margin-top: 12px; }
.meter i { height: 10px; border-radius: 1px; background: var(--seg-off); }
.meter i.on { background: var(--orange); }
.keys { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.key { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 6px; background: var(--key); box-shadow: 0 2px 0 var(--key-edge); color: #d5d8db; font: 700 13px/1 "Barlow Semi Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.key::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2a2c30; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.key.rec { margin-left: auto; }
.key.rec::before { background: var(--orange); animation: pulse 1.6s ease-in-out infinite; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--ink-2); font-size: 15px; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cursor, .key.rec::before { animation: none; } .notify button { transition: none; } }
@media (max-width: 480px) {
  .lcd { font-size: 12.5px; padding: 14px; }
  .key.rec { margin-left: 0; }
  .notify-row { flex-direction: column; }
}