/* Cuedini account page — styles taken from the cuedini.app (v3) site so it looks
   the same (2026-10-03). Served by the cuedini-accounts Worker at
   account.cuedini-account.com. Edit here, then run tools/build-page.mjs. */
:root{
  --main-bg:#04060b; --border-gray:#1e1e1e; --text-primary:#ffffff; --text-secondary:#b0b0b0; --text-muted:#7a7a7a;
  --cue-c:#00d9ff;
  --ui-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--ui-font);background:var(--main-bg);color:var(--text-primary);min-height:100vh;overflow-x:hidden;line-height:1.6;
  background-image:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(0,90,120,.18),transparent 70%)}
.top{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid #111}
.top a{color:var(--text-secondary);text-decoration:none;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:600}
.top .brand{color:var(--cue-c);letter-spacing:3px;font-weight:800}
.top a:hover{color:#fff}
.chapter{padding:56px 16px 80px}
.chapter-inner{width:min(1180px,100%);margin:0 auto}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
.eyebrow span{
  font-family:var(--mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--cue-c);
}
.eyebrow i{display:block;width:32px;height:1px;background:var(--cue-c);opacity:.5}
.chapter h2{
  font-size:clamp(38px,6.4vw,78px);font-weight:900;letter-spacing:-.03em;line-height:.92;
  text-align:center;text-transform:none;
}
.chapter h2 em{font-style:normal;color:var(--cue-c)}
.lede{
  margin:22px auto 0;max-width:720px;text-align:center;
  font-size:clamp(16px,1.5vw,19px);color:var(--text-secondary);
}
.chapter-head{margin-bottom:56px}
}
.tabs button[aria-selected="true"]{color:var(--cue-c);background:#0d0d0d}
.field{margin-bottom:16px;text-align:left}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.field input,.field textarea{
  width:100%;background:#070707;border:1px solid var(--border-gray);border-radius:10px;
  padding:14px 16px;color:#fff;font-family:inherit;font-size:15px;transition:border-color 35ms ease;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cue-c)}
.submit{
  width:100%;padding:15px;border:0;border-radius:10px;background:var(--cue-c);color:#150610;
  font-family:inherit;font-size:13px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;cursor:pointer;
  transition:transform 35ms ease,box-shadow 45ms ease;
}
.submit:hover{transform:scale(1.01);box-shadow:0 0 30px color-mix(in srgb,var(--cue-c) 30%,transparent)}
.form-note{margin-top:14px;font-size:13px;color:var(--text-muted);text-align:center}
.form-note a{color:var(--cue-c)}
/* --- account: sign-in gate, then the account page (2026-10-02) ----------
   Not linked to a real login yet — a single demo login is checked in the
   browser, and "signed in" lasts for this tab only (sessionStorage). */
#account .chapter-head{margin-top:0}
.acct-gate{max-width:440px;margin:0 auto;width:100%}
#account .field input{background:#161a21;border-color:#2e3440}
.acct-err{min-height:20px;margin:-4px 0 12px;font-size:13px;color:#f87171;text-align:center}
.acct-gate .form-note button{background:none;border:0;padding:0;font:inherit;color:var(--cue-c);cursor:pointer}
.acct-gate.shake{animation:acct-shake .36s ease}
@keyframes acct-shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.acct-page{width:100%;max-width:1180px;margin:0 auto}
.acct-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.acct-who{display:flex;align-items:center;gap:14px}
.acct-avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:17px;color:#04060b;background:var(--cue-c)}
.acct-who b{display:block;font-size:17px}
.acct-who span{font-size:13px;color:#9aa3b2}
.acct-out{background:rgba(255,255,255,.05);border:1px solid #3a4250;border-radius:10px;color:#d6dbe3;
  font-family:inherit;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;padding:11px 18px;cursor:pointer;
  transition:border-color 35ms ease,color 35ms ease}
.acct-out:hover{border-color:var(--cue-c);color:#fff}
.acct-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:left}
.acct-card{background:linear-gradient(180deg,#1b1f27,#15181e);border:1px solid #2e3440;border-radius:14px;padding:22px 22px 20px;min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.acct-card.wide{grid-column:span 2}
.acct-card h3{font-family:var(--mono);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--cue-c);margin:0 0 16px;font-weight:600}
.acct-rows{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:14px}
.acct-rows dt{color:#9aa3b2}
.acct-rows dd{margin:0;text-align:right;color:var(--text-primary);overflow-wrap:anywhere}
.acct-rows .mono{font-family:var(--mono);font-size:13px}
.acct-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  background:rgba(255,255,255,.1);color:var(--text-secondary)}
.acct-pill.ok{background:rgba(34,197,94,.14);color:#4ade80}
.acct-pill.wip{background:rgba(250,204,21,.14);color:#facc15}
.acct-pill.new{background:rgba(0,217,255,.12);color:#00d9ff}
.acct-bugs{list-style:none;margin:0;padding:0}
.acct-bugs li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px 0;border-top:1px solid #2a303b;font-size:14px}
.acct-bugs li:first-child{border-top:0;padding-top:0}
.acct-bugs .id{font-family:var(--mono);font-size:12px;color:#9aa3b2}
.acct-bugs .t{min-width:0}
.acct-bugs .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-bugs .t span{font-size:12px;color:#9aa3b2}
.acct-card p{margin:0 0 16px;font-size:14px;color:#c9cfd8}
.acct-link{display:block;text-align:center;padding:12px;border-radius:10px;border:1px solid #3a4250;background:rgba(255,255,255,.04);color:#fff;text-decoration:none;
  font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;transition:border-color 35ms ease}
.acct-link + .acct-link{margin-top:10px}
.acct-link:hover{border-color:var(--cue-c)}
.acct-link.primary{background:var(--cue-c);border-color:var(--cue-c);color:#04060b}
@media (max-width:1000px){.acct-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.acct-grid{grid-template-columns:1fr}.acct-card.wide{grid-column:auto}}
/* account: real sign-in (2026-10-03) */
.acct-ok{font-size:14px;color:#4ade80;text-align:center;line-height:1.5;margin:6px 0 12px}
.acct-rule{font-size:12px;color:#9aa3b2;margin:-6px 0 10px;text-align:left}
#account .acct-code{font-family:var(--mono);font-size:24px;letter-spacing:8px;text-align:center}
.acct-mini{background:rgba(255,255,255,.05);border:1px solid #3a4250;border-radius:7px;color:#d6dbe3;font:inherit;font-size:12px;padding:3px 9px;cursor:pointer;margin-left:4px}
.acct-mini:hover{border-color:var(--cue-c);color:#fff}
.acct-mini:disabled{opacity:.5;cursor:default}
.acct-pill.off{background:rgba(248,113,113,.14);color:#f87171}
.acct-lic + .acct-lic{margin-top:16px;padding-top:16px;border-top:1px solid #2a303b}
.acct-devs{list-style:none;margin:0 0 14px;padding:0}
.acct-devs li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #2a303b;font-size:14px}
.acct-devs li:first-child{border-top:0;padding-top:0}
.acct-devs li b{display:block;font-weight:600}
.acct-devs li span span{font-size:12px;color:#9aa3b2}
.acct-dl{cursor:pointer}
.acct-dl small{display:block;font-size:11px;font-weight:500;opacity:.75;margin-top:2px}
button.acct-link{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:1.4px;cursor:pointer;width:100%}
#account form button.acct-link{margin-top:4px}
.acct-small{font-size:12px !important;color:#9aa3b2 !important;margin:12px 0 0 !important}
/* account page ("Welcome back"): grey, no cyan (2026-10-03) — sign-in screens keep the accent */
#acctPageView{--cue-c:#b3b3b3}
#acctPageView .acct-avatar{background:#3a3a3a;color:#fff}
/* neutral grey-black boxes (no blue tint) */
#acctPageView .acct-card{background:linear-gradient(180deg,#1d1d1d,#161616);border-color:#2e2e2e}
#acctPageView .acct-link,#acctPageView .acct-out,#acctPageView .acct-mini{background:#222;border-color:#3a3a3a}
#acctPageView .acct-link.primary{background:#2a2a2a;border-color:#3a3a3a;color:#fff}
#acctPageView .acct-link:hover,#acctPageView .acct-out:hover,#acctPageView .acct-mini:hover{border-color:#b3b3b3}
#acctPageView .field input{background:#141414;border-color:#333}
#acctPageView .acct-lic + .acct-lic,#acctPageView .acct-devs li,#acctPageView .acct-bugs li{border-top-color:#2a2a2a}
#acctPageView .acct-rows dt,#acctPageView .acct-who span,#acctPageView .acct-devs li span span,#acctPageView .acct-small{color:#a3a3a3 !important}
#acctPageView .acct-card p{color:#cfcfcf}
#acctPageView .acct-pill.new{background:rgba(179,179,179,.14);color:#d0d0d0}
#acctPageView .acct-dl-pair{gap:22px;margin:4px 0 6px;justify-content:center}
#acctPageView .acct-dl-pair .dl-get{gap:9px;padding:6px 8px;width:auto;font-size:inherit}
#acctPageView .acct-dl-pair .dl-icon{width:64px;height:64px;border-radius:17px}
#acctPageView .acct-dl-pair .dl-icon svg{width:27px;height:27px}
#acctPageView .acct-dl-pair .dl-get b{font-size:14px;text-align:center}
#acctPageView .acct-dl-pair .dl-ver{font-size:11px;margin-top:-4px}
.dl-pair{display:flex;justify-content:center;gap:68px;flex-wrap:wrap;margin-top:8px}
.dl-get{
  display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;
  padding:10px 18px;border-radius:14px;transition:transform .18s cubic-bezier(.16,1,.3,1);
}
/* one neutral family: stable + manual are grey, beta is the same grey pushed
   slightly red so it reads as the odd one out without shouting */
.dl-get.is-stable{--b-c:#9a9a9a}
.dl-get.is-beta{--b-c:#c96a6a}
.dl-get.is-plugin{--b-c:#9a9a9a}
.dl-get.is-manual{--b-c:#9a9a9a}
.dl-get:hover{transform:translateY(-4px)}
.dl-icon{
  display:grid;place-items:center;width:88px;height:88px;border-radius:22px;
  border:1px solid color-mix(in srgb,var(--b-c) 42%,transparent);
  background:color-mix(in srgb,var(--b-c) 9%,transparent);
  color:var(--b-c);transition:background-color .18s ease,border-color .18s ease;
}
.dl-icon svg{width:38px;height:38px}
.dl-get:hover .dl-icon{
  background:color-mix(in srgb,var(--b-c) 18%,transparent);
  border-color:var(--b-c);
}
.dl-get b{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--text-primary)}
/* phones: the whole Downloads page is re-laid-out further down, see the
   "DOWNLOAD ON A PHONE" block after the pricing one */
@media (max-width:640px){.dl-pair{gap:34px}}
/* a quieter second row under an "Others" rule: plug-ins and extras, one step
   smaller than the three main downloads so the hierarchy reads at a glance */
.dl-sub{
  display:flex;align-items:center;gap:14px;width:100%;max-width:640px;margin:36px auto 2px;
}
.dl-sub i{flex:1;height:1px;background:var(--border-gray)}
.dl-sub span{
  font-family:var(--mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-muted);
}
.dl-pair.is-others{gap:44px;margin-top:2px}
.dl-pair.is-others .dl-get{gap:9px}
.dl-pair.is-others .dl-icon{width:62px;height:62px;border-radius:17px}
.dl-pair.is-others .dl-icon svg{width:27px;height:27px}
.dl-pair.is-others .dl-get b{font-size:15px}
.dl-ver{font-family:var(--ui-font);font-size:11.5px;font-weight:600;letter-spacing:.2px;color:var(--b-c);margin-top:-6px}
@media (max-width:640px){.chapter{padding-top:36px}.top{padding:14px 16px}.chapter-head{margin-bottom:32px}}
