:root {
  --bg: #0a0a0a;
  --panel: #111111;
  --panel-2: #161616;
  --line: #262626;
  --line-strong: #333333;
  --text: #f2f0ec;
  --muted: #737373;
  --muted-2: #a3a09a;
  --green: #62B87A;
  --green-soft: color-mix(in srgb, var(--green) 22%, transparent);
  --green-ink: #1C6840;
  --violet: #8A7EB4;
  --violet-soft: color-mix(in srgb, var(--violet) 22%, transparent);
  --ok: #22c55e;
  --warn: #eab308;
  --error: #ef4444;
  /* The 3D panel right of the viewport. The header's /feedback lines up with it. */
  --gen-panel-w: 232px;
  /* The site is dark. Without this, Chrome draws a classic scroll bar (macOS
     shows one when a mouse is connected) with a white track. */
  color-scheme: dark;
  scrollbar-color: var(--line-strong) transparent;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Thin text on a Retina (2x) screen only. On a 1x screen (a 4K monitor at
   "looks like 3840 x 2160"), antialiased text is too thin and has gaps; the
   macOS default draws it full. */
@media (min-resolution: 1.5dppx) {
  body { -webkit-font-smoothing: antialiased; }
}

header {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  /* A slight step above the black page, so the header stands apart
     (founder, 2026-10-08). The rest of the site stays dark. */
  background: var(--panel);
}
.account-btn {
  margin-left: auto;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.account-btn:hover { border-color: var(--line-strong); }
/* Signed in, the box holds the balance only, no word. */
.account-btn { font-variant-numeric: tabular-nums; }
/* Signed out, the box is "Get Started", in the primary buttons' colours
   (.plan-cta, .buy-pay): the one bright thing in the header. */
.account-btn.account-cta {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
}
.account-btn.account-cta:hover { border-color: #e8e6e1; background: #e8e6e1; }
/* Add credits: a "+" joined to the balance, one box with a line between them
   (both open Add credits). Signed out, the box is "Get Started" alone. */
.credits-plus {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -10px;               /* the header's gap */
  padding: 0;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 4px 4px 0;
  background: transparent;
  color: var(--green);
  cursor: pointer;
}
.account-btn:has(+ .credits-plus:not([hidden])) { border-radius: 4px 0 0 4px; }
.credits-plus:hover,
.account-btn:hover + .credits-plus:not([hidden]) {
  border-top-color: var(--line-strong);
  border-right-color: var(--line-strong);
  border-bottom-color: var(--line-strong);
}
.account-btn:has(+ .credits-plus:not([hidden]):hover) { border-color: var(--line-strong); }
.credits-plus[hidden] { display: none; }
/* Feedback: a quiet text link. The end of its text is on the line of the
   viewport's right edge, where the 3D panel starts (founder, 2026-10-07):
   the button's right edge is that line plus its 8px padding. A phone has no
   panel at the side; there it sits left of the credits (the phone rules). */
.header-feedback {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--gen-panel-w) - 8px);
  margin: auto 0;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted-2);
  font: 12px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  cursor: pointer;
}
/* Well above the header (var(--panel)), so the hover box shows. */
.header-feedback:hover { background: var(--line); color: var(--text); }
.header-feedback:focus-visible { outline: 1px solid var(--muted-2); outline-offset: 1px; }
/* User menu: a round button with the first letter, next to the credits. */
.user-menu-wrap { position: relative; }
.user-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.user-btn:hover, .user-btn[aria-expanded=true] { border-color: var(--line-strong); }
.user-btn:focus-visible { outline: 1px solid var(--muted-2); outline-offset: 1px; }
.user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 15;
  width: 240px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.user-menu-who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 -4px 4px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--line);
}
.user-menu-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.user-menu-name { overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-email { overflow: hidden; color: var(--muted-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
/* The plan next to the name: one color for each plan. */
.user-menu-tier {
  --tier: var(--muted-2);
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tier) 18%, transparent);
  color: var(--tier);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.user-menu-tier[data-tier=starter] { --tier: #6FA8DC; }
.user-menu-tier[data-tier=pro] { --tier: #A08CE6; }
.user-menu-tier[data-tier=studio] { --tier: #E0A458; }
.user-menu [role=menuitem] {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted-2);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.user-menu [role=menuitem]:hover,
.user-menu [role=menuitem]:focus-visible { outline: none; background: var(--panel-2); color: var(--text); }
.user-menu-sep { height: 1px; margin: 4px -4px; background: var(--line); }
.gate {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.72);
}
.gate-card {
  width: min(380px, calc(100% - 32px));
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.gate-card h2 { margin: 0 0 6px; font-size: 18px; font-weight: 560; }
.gate-lead { margin: 0 0 14px; color: var(--muted-2); }
.gate-card label {
  display: block;
  margin: 0 0 10px;
  color: var(--muted-2);
  font-size: 12px;
}
.gate-card input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.gate-error { min-height: 1.2em; margin: 0 0 8px; color: var(--error); }
.gate-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gate-actions button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-decoration: none;
  line-height: 30px;
  cursor: pointer;
}
.gate-actions .gate-primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.auth-window {
  width: min(400px, calc(100% - 32px));
  padding: 28px 24px 22px;
  border-radius: 16px;
  background: #171717;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  text-align: center;
}
.auth-window h2 {
  margin: 2px 0 22px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.gate-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1px solid #3a3a3a;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.gate-google:hover { background: #222; }
.gate-google + .gate-google { margin-top: 10px; }
.auth-window .gate-error { min-height: 0; margin: 14px 0 0; }
.auth-window .gate-error:empty { display: none; }
.g-mark { flex: 0 0 auto; }
.gate-legal {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}
.gate-legal:hover { color: var(--muted-2); }
.gate-legal a { color: var(--muted-2); text-decoration: none; }
.gate-legal a:hover { color: var(--text); }
/* "All payments are final" and the Terms, in the plans and Add credits windows. */
.pay-terms { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.pay-terms a { color: var(--muted-2); text-decoration: none; }
.pay-terms a:hover { color: var(--text); }
/* Delete confirmation: the site's dialog in place of the browser's confirm(). */
.confirm-dialog {
  width: min(380px, calc(100% - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #171717;
  color: var(--text);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.confirm-card { padding: 20px 20px 16px; }
.confirm-card h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.confirm-name {
  margin: 0 0 10px; color: var(--text); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.confirm-body { margin: 0 0 18px; color: var(--muted-2); font-size: 13px; line-height: 1.5; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.confirm-actions button {
  height: 30px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 4px;
  background: transparent; color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer;
}
.confirm-actions button:hover { border-color: var(--line-strong); background: var(--panel-2); }
.confirm-actions .confirm-danger {
  border-color: color-mix(in srgb, var(--error) 45%, var(--line)); color: #f87171;
}
.confirm-actions .confirm-danger:hover {
  border-color: color-mix(in srgb, var(--error) 70%, var(--line));
  background: color-mix(in srgb, var(--error) 12%, transparent);
}
.confirm-actions .confirm-primary {
  border-color: var(--text); background: var(--text); color: var(--bg); font-weight: 600;
}
.confirm-actions .confirm-primary:hover { border-color: #e8e6e1; background: #e8e6e1; }
.confirm-actions button:focus-visible { outline: 1px solid var(--muted-2); outline-offset: 1px; }
/* A title and buttons, no text between them (Not enough credits). */
.confirm-card h2.confirm-only { margin-bottom: 18px; }
.plans {
  position: relative;
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 28px 28px 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  text-align: center;
}
.plan-title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.plan-x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--muted-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.plan-x:hover { color: var(--text); border-color: var(--line-strong); }
.plan-interval {
  display: inline-flex;
  overflow: hidden;
  margin: 0 auto 28px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}
.plan-interval button {
  appearance: none;
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted-2);
  font: inherit;
  cursor: pointer;
}
.plan-interval button:last-child { border-right: 0; }
.plan-interval button:hover { color: var(--text); }
.plan-interval button.on { background: var(--text); color: var(--bg); }
.plan-save { margin-left: 6px; color: var(--green); }
.plan-interval button.on .plan-save { color: var(--green-ink); }
.plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
  text-align: left;
}
.plan-card {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
/* The plan the user has: a lighter card and a "✓ Current plan" button. */
.plan-card.current {
  border-color: #2e2e2e;
  background: #1f1f1f;
}
.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
}
.plan-name { font-size: 15px; font-weight: 600; }
.plan-badge {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.plan-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 22px;
}
.plan-amount {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1;
}
.plan-unit {
  display: flex;
  flex-direction: column;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}
.plan-cta {
  appearance: none;
  width: 100%;
  height: 36px;
  border: 1px solid var(--text);
  border-radius: 4px;
  background: var(--text);
  color: var(--bg);
  font: inherit;
  cursor: pointer;
}
.plan-cta:hover { background: #e8e6e1; }
.plan-cta-quiet { border-color: var(--line-strong); background: transparent; color: var(--text); }
.plan-cta-quiet:hover { background: var(--panel-2); }
.plan-cta:disabled {
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
  cursor: default;
}
.plan-cta:disabled:hover { background: transparent; }
.plan-card.current .plan-cta:disabled,
.plan-card.current .plan-cta:disabled:hover,
.plan-card.next .plan-cta:disabled,
.plan-card.next .plan-cta:disabled:hover {
  border-color: #3a3a3a;
  background: #2a2a2a;
  color: var(--text);
  font-weight: 600;
}
.plan-card.current .plan-cta::before { content: "✓"; margin-right: 6px; color: var(--green); }
.plan-card.current .plan-points { border-top-color: #333; }
.plan-fine {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}
/* A smaller plan that starts at the period end: one amber line above the
   cards. That plan's card has no amber (founder, 2026-10-05: the line is
   enough); its "Next plan" button looks like "Current plan" without the tick.
   The dates are brighter than "Cancel anytime". */
.plan-pending {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: -6px auto 22px;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}
.plan-pending strong { color: var(--text); font-weight: 600; white-space: nowrap; }
.plan-pending-ico { flex: 0 0 auto; display: flex; color: var(--warn); }
/* Cancel change: at the end of the line; on a phone, on a line of its own. */
.plan-pending { flex-wrap: wrap; }
.plan-pending > span:not(.plan-pending-ico) { flex: 1 1 240px; }
.plan-pending-undo {
  flex: 0 0 auto;
  height: 28px;
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.plan-pending-undo:hover { background: var(--panel-2); }
.plan-pending-undo:disabled { opacity: 0.5; cursor: default; }
.plan-fine-date { color: var(--muted-2); }
.plan-points {
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1.4;
}
.plan-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
}
.plan-points li:last-child { margin-bottom: 0; }
.plan-points li::before { content: "✓"; color: var(--green); }
.plan-point-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
/* The queue line of the plans that move up the queue. */
.plan-point-strong { color: var(--text); font-weight: 600; }
.plan-point-strong .plan-point-sub { font-weight: 400; }
.plan-point-violet { color: var(--violet); }
/* Under the cards: what every plan gets, three columns of ticks. */
.plan-includes {
  margin: 28px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
}
.plan-includes h3 {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.plan-includes ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1.4;
}
.plan-includes li { display: flex; align-items: flex-start; gap: 10px; }
.plan-includes li::before { content: "✓"; color: var(--green); }
.plans .gate-error { min-height: 0; margin: 18px 0 0; text-align: center; }
.plans .gate-error:empty { display: none; }
.gate-error.ok { color: var(--green); }
.gate-error.info { color: var(--muted-2); }
@media (max-width: 760px) {
  .plan-includes ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .plan-cards { grid-template-columns: 1fr; }
  .plan-includes ul { grid-template-columns: 1fr; }
}

/* Add credits: a card per amount and "Other", the total, the saved card. */
.buy-dialog {
  width: min(640px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.buy-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.buy-card { position: relative; padding: 20px 20px 16px; }
.buy-card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.buy-lead { margin: 0 0 14px; color: var(--muted-2); }
.buy-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.buy-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 84px;
  padding: 10px 10px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  user-select: none;
}
.buy-opt:hover { border-color: var(--line-strong); }
.buy-opt:focus-visible { outline: 1px solid var(--muted-2); outline-offset: 1px; }
.buy-opt[aria-checked=true] {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 6%, var(--bg));
}
.buy-opt-amount { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.buy-opt-sub { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.buy-badge {
  margin-top: auto;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--muted-2);
  font-size: 11px;
}
.buy-opt[aria-checked=true] .buy-badge { background: var(--green-soft); color: var(--green); }
.buy-other {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  margin-top: auto;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--panel);
  color: var(--muted-2);
}
.buy-other input {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.buy-box {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.buy-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.buy-row span:last-child { color: var(--text); }
.buy-row.on span:last-child { color: var(--green); }
.buy-total {
  margin-top: 6px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-weight: 600;
}
.buy-method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.buy-method-card { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-2); }
.buy-edit {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
}
.buy-edit:hover { color: var(--text); border-color: var(--line-strong); }
.buy-consent { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.buy-error { min-height: 1.2em; margin: 6px 0 0; color: var(--error); font-size: 12px; }
.buy-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.buy-actions button {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.buy-actions button:hover { border-color: var(--line-strong); background: var(--panel-2); }
.buy-actions .buy-pay {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
}
.buy-actions .buy-pay:hover { background: #e8e6e1; }
.buy-actions .buy-pay:disabled { opacity: 0.45; cursor: default; }
.buy-actions .buy-pay:disabled:hover { background: var(--text); }
@media (max-width: 600px) {
  .buy-options { grid-template-columns: repeat(3, 1fr); }
}

/* Settings: sections on the left, one page on the right. */
.settings-dialog {
  width: min(900px, calc(100% - 32px));
  max-width: none;
  height: min(620px, calc(100% - 48px));
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.settings-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.settings { display: grid; grid-template-columns: 210px 1fr; height: 100%; }
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 12px;
  border-right: 1px solid var(--line);
}
.settings-nav-title { padding: 0 10px 8px; color: var(--muted); font-size: 12px; }
.settings-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.on { background: var(--panel-2); color: var(--text); }
.settings-tab:focus-visible { outline: 1px solid var(--muted-2); outline-offset: -1px; }
.settings-main { position: relative; min-width: 0; overflow-y: auto; padding: 28px 36px 32px; }
.settings-x {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
}
.settings-x:hover { background: var(--panel-2); color: var(--text); }
.settings-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.settings-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.settings-head-gap { margin-top: 36px; }
.settings-saved { color: var(--green); font-size: 12px; }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.settings-row-joined { border-bottom: 0; }
.settings-label { color: var(--text); }
.settings-sub { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.settings-value { overflow-wrap: anywhere; color: var(--muted-2); text-align: right; }
.settings-input {
  width: min(280px, 100%);
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
}
.settings-input:focus { border-color: var(--line-strong); }
.settings-btn {
  flex: none;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.settings-btn:hover { border-color: var(--line-strong); }
.settings-btn:disabled { opacity: 0.45; cursor: default; }
.settings-btn.settings-danger { border-color: color-mix(in srgb, var(--error) 40%, var(--line)); color: #f87171; }
.settings-btn.settings-danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--error) 70%, var(--line));
  background: color-mix(in srgb, var(--error) 12%, var(--panel-2));
}
.settings-confirm {
  scroll-margin-bottom: 24px;
  margin: 12px 0 2px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--error) 30%, var(--line));
  border-radius: 8px;
  background: var(--bg);
}
.settings-confirm > .settings-sub { margin: 0 0 12px; }
.settings-confirm-field { display: flex; flex-direction: column; gap: 6px; }
.settings-confirm-field .settings-input { width: 100%; }
.settings-confirm-email { overflow-wrap: anywhere; color: var(--text); }
.settings-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.settings-main .buy-error { min-height: 0; margin-top: 12px; }
.settings-main .buy-error.ask { color: var(--muted-2); }
@media (max-width: 640px) {
  .settings { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .settings-nav { flex-direction: row; padding: 12px 52px 12px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .settings-nav-title { display: none; }
  .settings-main { padding: 20px 18px 24px; }
  .settings-x { top: 10px; right: 10px; }
  .settings-row { flex-wrap: wrap; }
  label.settings-row .settings-input { width: 100%; }
}

/* Report a problem: the Add credits window's box, with a text field. */
.report-dialog { width: min(520px, calc(100% - 32px)); }
.report-message {
  display: block;
  width: 100%;
  min-height: 140px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}
.report-message:focus { border-color: var(--line-strong); }
.report-message::placeholder { color: var(--muted); }
.report-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.report-count { flex: none; font-variant-numeric: tabular-nums; }
.report-dialog h2 { margin: 0 32px 8px 0; }
.report-kind { display: flex; gap: 6px; margin: 0 0 12px; }
.report-kind button {
  --kind: var(--muted-2);
  appearance: none;
  padding: 1px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--kind) 70%, var(--muted));
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}
.report-kind button[data-kind=feedback] { --kind: #A08CE6; }
.report-kind button[data-kind=bug] { --kind: #E06A5A; }
.report-kind button:hover { color: var(--kind); }
.report-kind button.on {
  background: color-mix(in srgb, var(--kind) 18%, transparent);
  color: var(--kind);
}
.report-kind button:disabled { opacity: 0.45; cursor: default; }
h1 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; }
h1 span { color: var(--green); }
/* The name with the toast bot at the end: the small-size file, heavier lines.
   24 px with no extra margin (founder: 20 px "looks too small", and extra room
   below it "takes a bit too much real estate"). */
h1 img { display: block; height: 24px; width: auto; }
.badge {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.2px;
}
.badge.mock { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); color: var(--warn); }
.badge.live { border-color: var(--line-strong); color: var(--muted-2); }

main { flex: 1; min-height: 0; display: flex; overflow: hidden; }

.lib {
  /* A fixed width: without min-width 0 and overflow hidden the list grew to fit its longest name. */
  flex: 0 0 320px; width: 320px; min-width: 0; overflow: hidden;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--bg);
  min-height: 0;
}
.lib-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 8px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.icon-btn {
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 4px;
  background: transparent; color: var(--muted-2); cursor: pointer;
  text-decoration: none;
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); background: var(--panel-2); }
.icon-btn[disabled] { opacity: 0.35; pointer-events: none; }
.icon-btn svg { display: block; }
.icon-btn-label {
  width: auto;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.projects { flex: 1; overflow-y: auto; padding: 0 8px 12px; scrollbar-width: thin; }

.project { margin-bottom: 2px; }
.project-h {
  position: relative;
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px; border: 0; border-radius: 4px;
  background: transparent; color: var(--muted-2);
  font: inherit; text-align: left; cursor: pointer;
}
.project-h:hover { background: var(--panel-2); color: var(--text); }
.project.open > .project-h { color: var(--text); }
.chev {
  width: 8px; height: 8px; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); opacity: 0.55;
}
.project.open .chev { transform: rotate(45deg); margin-top: -2px; }
.project-h .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-h .count { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.project-h .del,
.project-h .ren {
  opacity: 0;
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 3px;
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 11px; line-height: 18px; text-align: center;
}
/* Only a mouse shows them on hover. On a touch screen (iOS: Safari and Chrome
   both use WebKit) a tap that shows hidden content through :hover is only a
   hover, and the click needs a second tap. A touch screen shows them on the
   open project; see (hover: none) under the items. */
@media (hover: hover) {
  .project-h:hover .del,
  .project-h:hover .ren { opacity: 1; pointer-events: auto; }
}
.project-h:focus-within .del,
.project-h:focus-within .ren { opacity: 1; pointer-events: auto; }
/* Over the end of the row on hover, so the name keeps the room. */
.project-h .del, .project-h .ren {
  position: absolute; top: 50%; margin-top: -9px;
  background: var(--panel-2); pointer-events: none;
}
.project-h .del { right: 6px; }
.project-h .ren { right: 26px; }
.project-h .del:hover { color: var(--error); }
.project-h .ren:hover { color: var(--text); }
.project-name-edit {
  flex: 1;
  min-width: 0;
  height: 22px;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.project-name-edit:focus { outline: none; border-color: var(--muted-2); }
.project.naming .project-h { background: var(--panel-2); }

.items { display: none; padding: 0 0 6px 8px; }
.project.open .items { display: block; }

.item {
  position: relative;
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; margin: 1px 0;
  border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: var(--muted-2);
  font: inherit; text-align: left; cursor: pointer;
}
.item:hover { background: var(--panel-2); color: var(--text); }
.item.on {
  background: var(--panel-2);
  border-color: var(--line-strong);
  color: var(--text);
}
.item.on[data-kind="concept"] { box-shadow: inset 2px 0 0 var(--violet); }
.item.on[data-kind="mesh"] { box-shadow: inset 2px 0 0 var(--green); }
.item.new-take { color: var(--muted); }
.item.new-take .ph {
  color: var(--muted-2);
  font-size: 14px;
  font-weight: 400;
}
.item.new-take.on { color: var(--text); }
.item img, .item .ph {
  width: 32px; height: 32px; object-fit: contain;
  border-radius: 3px; background:
    radial-gradient(circle at 50% 40%, #3a3a3e, #1c1c1e);
  flex: 0 0 auto;
}
.item .ph { display: grid; place-items: center; font-size: 10px; color: var(--muted); }
.item .lab { flex: 1; min-width: 0; }
.item .lab b { display: block; font-weight: 500; font-size: 12px; }
.item .lab s { display: block; font-size: 10px; color: var(--muted); text-decoration: none; }
.item .x,
.item .act {
  opacity: 0;
  width: 16px; height: 16px; padding: 0; border: 0; border-radius: 3px;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 12px;
}
/* A mouse only: see the note on .project-h:hover above. */
@media (hover: hover) {
  .item:hover .x,
  .item:hover .act { opacity: 1; }
}
/* Rename and delete lie over the end of the row on hover, so the name keeps the room. */
.item .x, .item .act.ren {
  position: absolute; top: 50%; margin-top: -11px;
  width: 22px; height: 22px; line-height: 22px; font-size: 14px; border-radius: 4px;
  text-align: center; /* the cross sat at the left of its box without this */
  background: var(--panel-2); pointer-events: none;
}
/* The star keeps the row's right end. Star, delete and rename are evenly spaced, about 24 px apart. */
.item .x { right: 27px; }
.item .act.ren { right: 51px; }
@media (hover: hover) {
  .item:hover .x, .item:hover .ren { pointer-events: auto; }
}
/* The title and the second line stop short of the buttons that lie over the row end. */
.item .lab b, .item .lab s { margin-right: 48px; }
/* An example has none of those buttons. */
.item.example .lab b, .item.example .lab s { margin-right: 0; }
.item .x:hover { color: var(--error); }
.item .act { flex: 0 0 auto; width: 16px; height: 16px; line-height: 16px; text-align: center; cursor: pointer; font-size: 12px; color: var(--muted); }
.item .act:hover { color: var(--text); }
/* A starred item keeps its star in view. */
.item .act.star.on { opacity: 1; color: var(--warn); }
/* No hover on a touch screen (a phone, a tablet): the chosen item shows
   rename, star and delete, and the open project shows rename and delete. A
   tap on any other row is a click at once. */
@media (hover: none) {
  .item.on .x, .item.on .act,
  .project.open > .project-h .del,
  .project.open > .project-h .ren { opacity: 1; pointer-events: auto; }
}
.item .lab b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .lab s { display: flex; align-items: center; gap: 4px; min-width: 0; }
.item .lab s .note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badges { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.kind-ico { display: inline-flex; width: 11px; height: 11px; color: var(--line-strong); }
.kind-ico svg { width: 11px; height: 11px; }
.kind-ico.img.has { color: var(--violet); }
.kind-ico.cube.has { color: var(--green); }
/* While the model is made, the cube is yellow and pulses, as the Model tab's icon. */
.kind-ico.cube.busy { color: var(--warn); animation: step-pulse 1.2s ease-in-out infinite; }
/* The same for the picture while the concept is made. After `.has`, so yellow wins. */
.kind-ico.img.busy { color: var(--warn); animation: step-pulse 1.2s ease-in-out infinite; }
.item.renaming { cursor: default; }
.item.renaming .project-name-edit { width: 100%; }
.favorites .fav-star { color: var(--warn); }
.fav-empty { padding: 6px 8px; font-size: 11px; color: var(--muted); }

.work { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.stage {
  flex: 1; min-height: 0; position: relative;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 70% 55% at 50% 36%, #3f3f44 0%, transparent 58%),
    radial-gradient(ellipse 80% 35% at 50% 100%, #141416 0%, transparent 55%),
    linear-gradient(180deg, #2a2a2e 0%, #18181a 58%, #101012 100%);
}
.stage::after {
  content: "";
  position: absolute; left: 18%; right: 18%; bottom: 11%;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.45), transparent 70%);
  pointer-events: none;
}

.hud-l, .hud-r {
  position: absolute; top: 10px; z-index: 3;
  display: flex; align-items: center; gap: 6px;
}
.hud-l { left: 10px; }
.hud-r { right: 10px; }


.poly {
  color: var(--muted-2); font-size: 11px; font-variant-numeric: tabular-nums;
  line-height: 1.35; text-shadow: 0 1px 2px #000; pointer-events: none;
}

.tool-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: 0; padding: 0;
  border: 1px solid var(--line); border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--muted-2); cursor: pointer;
  backdrop-filter: blur(8px);
}
.tool-btn:hover { color: var(--text); border-color: var(--line-strong); }
.tool-btn[aria-pressed="true"] {
  color: var(--bg); background: var(--text); border-color: var(--text);
}

.hero {
  flex: 1; min-height: 0;
  /* One cell the size of the hero. An auto row grew with the picture, so the
     picture's max-height had nothing to hold it and it went over the status line. */
  display: grid; place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  padding: 28px 36px 48px;
  z-index: 1;
}
.hero img {
  max-width: min(520px, 70%);
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,0.4));
}
model-viewer {
  flex: 1; width: 100%; min-height: 0;
  background: transparent; z-index: 1;
}

.empty-stage {
  flex: 1; display: grid; place-items: center;
  color: var(--muted); font-size: 13px; z-index: 1; text-align: center;
}
.empty-stage strong { display: block; color: var(--muted-2); font-weight: 500; margin-bottom: 4px; }

.status-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.status-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text);
}
.status-label.alert { color: var(--error); }
.gen-progress {
  flex: 1 1 auto;
  min-width: 72px;
  display: flex;
  align-items: center;
}
.gen-progress-track {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.gen-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: #f2f0ec;
  transition: width 0.4s ease;
}
.status-report {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex: none;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--muted-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.status-report:hover { color: var(--text); border-color: var(--line-strong); }
/* Cancel: the same small button, for the work that is running. */
.status-cancel {
  flex: none;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--muted-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.status-cancel:hover { color: var(--text); border-color: var(--line-strong); }
.status-cancel[disabled] { opacity: 0.5; cursor: default; }
.status-cancel[disabled]:hover { color: var(--muted-2); border-color: var(--line); }

.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted); flex: 0 0 auto;
}
.dot.running { background: var(--warn); animation: pulse 1s infinite; }
.dot.done { background: var(--ok); }
.dot.error { background: var(--error); }
@keyframes pulse { 50% { opacity: 0.35; } }

.dock {
  position: relative;
  flex: 0 0 auto;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
/* The Model tab has no prompt. Problems show on the status line. */
.dock.no-prompt { display: none; }
/* Which mode the box is in: a new concept, or a change to the open one (violet, as the concept step). */
.mode-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 22px; margin: -2px 2px 6px; font-size: 11px; color: var(--muted);
}
.mode-tag { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.mode-tag b { font-weight: 500; flex: none; }
.mode-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); font-weight: 400;
}
.mode-ico { flex: none; }
.mode-ico.edit, .dock.is-edit .mode-ico.new { display: none; }
.dock.is-edit .mode-ico.edit { display: block; }
.dock.is-edit .mode-tag { color: var(--violet); }
/* A new concept has just arrived: the box is a change to it now. A short glow says so. */
.mode-row.flash .mode-tag { animation: mode-flash 2.2s ease-out 1; border-radius: 4px; }
@keyframes mode-flash {
  0%, 35% { background: var(--violet-soft); box-shadow: 0 0 0 4px var(--violet-soft); }
  100% { background: transparent; box-shadow: 0 0 0 4px transparent; }
}
.dock.is-edit .chat { border-color: color-mix(in srgb, var(--violet) 55%, var(--line)); }
.chat {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.chat:focus-within { border-color: var(--line-strong); }
.chat.has-file { border-color: var(--violet); }
.chat textarea {
  flex: 1; min-width: 0;
  /* Exactly two lines of text. The space above and below is margin, so a scrolled
     third line never shows in the padding. */
  height: calc(2 * 1.4em); overflow-y: auto;
  resize: none; border: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 13px;
  margin: 9px 0 7px; padding: 0 6px; line-height: 1.4;
}
.chat textarea:focus { outline: none; }
.chat textarea::placeholder { color: var(--muted); }
.chat-btns { display: flex; align-items: center; gap: 6px; }
/* The concept's style: a menu in the site's own style, not the system's. The list opens
   upward from the button, in the look of the earlier-prompts list. */
.style-menu { position: relative; display: flex; align-items: center; margin-right: 2px; }
.style-menu[hidden] { display: none; }
.style-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-top: 2px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--muted-2); font: inherit; font-size: 11px; white-space: nowrap; cursor: pointer;
}
.style-btn:hover, .style-btn[aria-expanded="true"], .style-btn:focus-visible {
  border-color: var(--line); color: var(--text); outline: none;
}
.style-btn svg { flex: none; opacity: 0.7; }
.style-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.style-list {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: 244px; padding: 4px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--panel); box-shadow: 0 -8px 24px rgba(0,0,0,0.45); z-index: 20;
}
.style-list[hidden] { display: none; }
.style-opt {
  display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 5px; cursor: pointer;
  color: var(--muted-2); font-size: 12px; line-height: 1.35;
}
.style-opt b { font-weight: 500; color: var(--text); }
.style-opt span { font-size: 11px; color: var(--muted); }
.style-opt.active, .style-opt:hover { background: var(--panel-2); }
.style-opt.on { background: var(--violet-soft); }
.hint-row {
  display: flex; justify-content: space-between;
  padding: 6px 4px 0;
  color: var(--muted); font-size: 10px;
}
.charcount { font-variant-numeric: tabular-nums; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 4px;
  background: var(--panel); color: var(--muted-2); font-size: 12px;
  opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 9;
}
.toast.on { opacity: 1; }

/* Earlier prompts: ↑ in the prompt box. The newest is at the bottom, next to the box. */
.history {
  position: absolute; left: 14px; right: 14px; bottom: calc(100% - 10px);
  max-height: 280px; overflow-y: auto; scrollbar-width: thin;
  margin-bottom: 4px; padding: 4px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--panel); box-shadow: 0 -8px 24px rgba(0,0,0,0.45);
  z-index: 20;
}
.history-item {
  padding: 6px 8px; border-radius: 5px; cursor: pointer;
  color: var(--muted-2); font-size: 12px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.history-item:hover { background: var(--panel-2); color: var(--text); }
.history-item.on { background: var(--violet-soft); color: var(--text); }

/* The pipeline: Concept, Model, Rigging, Animation. A row of its own above the viewport, flat, no gaps, edge to edge. */
.pipeline {
  flex: 0 0 auto; display: flex; align-items: stretch;
  background: var(--bg);
}
.step {
  flex: 1 1 0; min-width: 0; height: 36px; padding: 0 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 0; background: var(--panel); color: var(--muted-2);
  font: inherit; font-size: 12px; letter-spacing: 0.3px; cursor: pointer;
}
.step:hover:not(.on):not(:disabled):not(.soon) { background: var(--panel-2); color: var(--text); }
.step.on { background: #202023; color: var(--text); cursor: default; }
.step:disabled { opacity: 0.4; cursor: default; }
.step.soon { color: var(--muted); opacity: 0.55; cursor: default; }
.step-ico { width: 14px; height: 14px; flex: 0 0 auto; }
/* A ">" at the right edge of every step but the last, to show the order. */
.step { position: relative; }
.step:not(:last-child)::after {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: 0.45; pointer-events: none;
}
/* The icon takes the colour of its step when the step has something to show. It pulses while the concept or the model is made. */
#step-concept.has .step-ico { color: var(--violet); }
#step-model.has .step-ico { color: var(--green); }
#step-model.busy .step-ico { color: var(--warn); animation: step-pulse 1.2s ease-in-out infinite; }
#step-concept.busy .step-ico { color: var(--warn); animation: step-pulse 1.2s ease-in-out infinite; }
@keyframes step-pulse { 50% { opacity: 0.25; } }

/* Every concept (or, on the model, every 3D model) an item has had: a column of
   its own left of the viewport, oldest at the top. */
.stage-row { flex: 1; min-height: 0; display: flex; }
.stage-row > .stage { min-width: 0; }
/* The 3D column, right of the viewport: the concept strip's mirror. Polycount,
   texture and Generate 3D (Re-generate on a model), and the downloads
   at the bottom. It looks like a terminal UI (founder, 2026-10-05): boxes
   and tags with the same small rounding (4px), a ❯ list, in the site's own font. The tui-*
   rules are for other windows later. */
.gen-panel {
  flex: 0 0 auto; width: var(--gen-panel-w); box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: 12px 14px 14px; overflow-y: auto;
  border-left: 1px solid var(--line);
  background: var(--bg);
  font-size: 12px;
}
/* A section name as a terminal draws it: ─ icon Name ───────── to the edge.
   The small plain icon sits close to its name. */
.tui-head {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 10px; color: color-mix(in srgb, var(--text) 60%, var(--muted-2));
  font-size: 12.5px; font-weight: 500;
}
.tui-head::before { content: ""; flex: 0 0 6px; border-top: 1px solid var(--line-strong); }
.tui-head::after { content: ""; flex: 1; border-top: 1px solid var(--line-strong); }
.tui-head-ico { flex: 0 0 auto; display: flex; margin-right: -2px; color: var(--muted); }
/* The site's colours: green for the model (the mesh), violet for the image
   (the paint); the download arrow stays grey. */
.tui-head-ico.is-model { color: var(--green); }
.tui-head-ico.is-concept { color: var(--violet); }
.tui-head-ico svg { display: block; width: 13px; height: 13px; }
/* A prompt line: ❯ value  unit. The ❯ turns green while it has the caret. */
.tui-input {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 4px; background: var(--panel); cursor: text;
}
.tui-input:focus-within { border-color: var(--muted); }
.tui-prompt { color: var(--muted); }
.tui-input:focus-within .tui-prompt { color: var(--green); }
.tui-input input {
  flex: 1; min-width: 0; padding: 0; border: 0; outline: none;
  background: transparent; color: var(--text); caret-color: var(--green);
  font: inherit; font-variant-numeric: tabular-nums;
}
.tui-dim { color: var(--muted); }
/* Low | Medium | High: a row of options, the chosen one filled. */
.tui-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 0 28px; }
.tui-picks button {
  height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent;
  color: var(--muted-2); font: inherit; cursor: pointer;
}
.tui-picks button:hover { background: var(--panel-2); color: var(--text); }
.tui-picks button[aria-pressed="true"] { background: var(--line-strong); color: var(--text); font-weight: 700; }
/* A short thin line between two options, in the middle of the gap. */
.tui-picks button + button { position: relative; }
.tui-picks button + button::before {
  content: ""; position: absolute; left: -2.5px; top: 50%; width: 1px; height: 12px;
  margin-top: -6px; background: var(--line-strong);
}
.tui-picks button:focus-visible { outline: 1px solid var(--muted); outline-offset: 1px; }
/* No frame on a texture row: the keyboard is always on the chosen row (one
   tab stop), and its lit bar and ❯ already show it (founder, 2026-10-05). */
.tui-list button:focus-visible { outline: none; }
/* A list, as in a terminal picker: ❯ and a lit bar on the chosen row. */
.tui-list { display: flex; flex-direction: column; margin: 0 0 28px; }
.tui-list button {
  display: flex; align-items: center; width: 100%; padding: 3px 6px;
  border: 0; border-radius: 4px; background: transparent; text-align: left;
  color: var(--muted-2); font: inherit; cursor: pointer;
}
.tui-list button::before { content: ""; flex: 0 0 2ch; }
.tui-list button:hover { color: var(--text); }
.tui-list button.on { background: var(--panel-2); color: var(--text); font-weight: 700; }
.tui-list button.on::before { content: "❯"; color: var(--violet); }
/* An (i) after a name: its note shows under the row on hover, or while the
   row has the keyboard. */
.tui-list button { position: relative; }
.tui-info { display: inline-flex; margin-left: 7px; color: var(--muted); cursor: default; }
.tui-info svg { display: block; }
.tui-info:hover { color: var(--text); }
.tui-tip {
  display: none; position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0;
  padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--panel);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  color: var(--muted-2); font-size: 11.5px; font-weight: 400; line-height: 1.45;
  white-space: normal; cursor: default; pointer-events: none;
}
.tui-info:hover .tui-tip, .tui-list button:focus-visible .tui-tip { display: block; }
/* A rule between the settings and Generate 3D. */
.tui-rule { margin: 0 0 18px; border: 0; border-top: 1px solid var(--line-strong); }
/* Generate 3D: a soft grey box with the library's green cube. */
.gen-go {
  --frame: color-mix(in srgb, var(--muted) 50%, var(--line-strong));
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 32px; padding: 0 10px;
  border: 1px solid var(--frame); border-radius: 4px; background: transparent;
  color: var(--text); font: inherit; font-weight: 700; cursor: pointer;
}
.gen-go:hover { border-color: var(--muted); background: var(--panel-2); }
.gen-go[disabled] { opacity: 0.4; cursor: default; }
.gen-go[disabled]:hover { border-color: var(--frame); background: transparent; }
.gen-go-ico { flex: 0 0 auto; width: 13px; height: 13px; color: var(--green); }
/* Add texture, under Re-generate on a model with none: the same box, with the
   paint brush in violet (the image's colour, as the Texture heading's). */
.gen-texture { margin-top: 8px; }
.gen-texture .gen-go-ico { color: var(--violet); }
/* The downloads: at the bottom of the 3D column, also when the column has
   nothing else (an example, or while a job runs). Under the heading (its
   icon is the download arrow), one pill per format (GLB OBJ FBX), as the
   plan's pill in the user menu, or the concept's (PNG) on the concept view. */
.downloads { margin-top: auto; padding-top: 14px; }
.dl-row { display: flex; align-items: center; gap: 6px; }
.dl-pills { display: flex; gap: 6px; }
/* A pill has its pipeline step's colour, as the step's icon in the tabs:
   green for the model's formats, violet for the concept. */
.dl-pill {
  --pill: var(--green);
  padding: 2px 9px; border: 0; border-radius: 4px;
  background: color-mix(in srgb, var(--pill) 18%, transparent); color: var(--pill);
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1.4; cursor: pointer;
}
.dl-pill.is-concept { --pill: var(--violet); }
.dl-pill:hover:not(:disabled) { background: color-mix(in srgb, var(--pill) 32%, transparent); }
.dl-pill:focus-visible { outline: 1px solid var(--muted); outline-offset: 2px; }
.dl-pill:disabled { --pill: var(--muted); opacity: 0.45; cursor: default; }
.strip {
  flex: 0 0 auto; width: 84px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; overflow-y: auto; scrollbar-width: thin;
  background: var(--bg);
}
.strip-item {
  position: relative; flex: 0 0 auto; width: 64px; height: 64px; padding: 0;
  border: 0; border-radius: 4px; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #3a3a3e, #1c1c1e);
  opacity: 0.55;
}
.strip-item:hover { opacity: 0.9; }
.strip-item.on { opacity: 1; cursor: default; }
/* The selected one gets a thin, soft white frame. */
.strip-item.on::after {
  content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(242, 240, 236, 0.55);
}
/* While a model is made, the server keeps the current model: the others wait. */
.strip-item:disabled { cursor: default; }
.strip-item:disabled:hover { opacity: 0.55; }
/* The model being made: the Model tab's cube, pulsing as on the tab. */
.strip-item.pending { display: grid; place-items: center; }
.pending-ico {
  width: 26px; height: 26px; color: var(--warn);
  animation: step-pulse 1.2s ease-in-out infinite;
}
.empty-stage .pending-ico { display: block; width: 36px; height: 36px; margin: 0 auto 14px; }
.strip-item img { display: block; width: 100%; height: 100%; object-fit: contain; }
.strip-item span {
  position: absolute; right: 3px; bottom: 2px;
  font-size: 9px; color: var(--muted-2); text-shadow: 0 0 3px #000;
}
.hero.editing img { opacity: 0.45; animation: edit-pulse 1.2s ease-in-out infinite; }
@keyframes edit-pulse { 50% { opacity: 0.25; } }

/* The project bar and the dark layer behind the open projects: a phone only. */
.ws-bar, .lib-scrim { display: none; }

/* A phone (founder, 2026-10-05): one column that scrolls. At the top of the
   work area, a bar shows the open project and item; a tap on it opens the
   projects under it (founder, 2026-10-07: a menu button in the header looked
   like the site's menu). Under the bar: the steps, the view (full width), the
   versions in a row, the status line, the 3D panel, and the prompt, which
   stays at the bottom of the screen. Text fields are 16px: iOS zooms in on a
   field with smaller text. Also a phone on its side: a touch screen less than
   500px high. Nothing here applies to a PC. app.js has the same query. */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  html, body { height: auto; }
  body { min-height: 100vh; min-height: 100dvh; overflow: visible; }
  main { flex: 1 0 auto; flex-direction: column; overflow: visible; }

  /* The bar looks like a picker: project / item, and a chevron. */
  .ws-bar { display: block; order: -1; padding: 10px 12px; }
  .ws-switch {
    width: 100%; height: 44px; padding: 0 14px 0 12px;
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--panel); color: var(--text);
    font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  }
  .ws-switch[aria-expanded=true] { border-color: var(--line-strong); background: var(--panel-2); }
  .ws-ico { flex: 0 0 auto; color: var(--muted-2); }
  .ws-project {
    flex: 0 1 auto; max-width: 45%; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-2);
  }
  .ws-item { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ws-item:not(:empty)::before { content: "/"; margin-right: 8px; color: var(--muted); }
  .ws-chev {
    flex: 0 0 auto; width: 8px; height: 8px; margin: -4px 2px 0 4px;
    border-right: 1.5px solid var(--muted-2); border-bottom: 1.5px solid var(--muted-2);
    transform: rotate(45deg); transition: transform 0.15s;
  }
  .ws-switch[aria-expanded=true] .ws-chev { margin-top: 4px; transform: rotate(225deg); }

  /* The projects open under the bar, the same width (app.js sets --lib-top).
     The bar stays over the dark layer; a tap on it closes them. */
  .lib-open .ws-bar { position: relative; z-index: 31; }
  .lib {
    position: fixed; top: var(--lib-top, 64px); left: 12px; right: 12px; z-index: 30;
    width: auto; max-height: calc(100vh - var(--lib-top, 64px) - 16px);
    max-height: calc(100dvh - var(--lib-top, 64px) - 16px);
    border: 1px solid var(--line-strong); border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
    opacity: 0; transform: translateY(-6px); visibility: hidden;
    transition: opacity 0.15s, transform 0.15s ease, visibility 0s 0.15s;
  }
  .lib-open .lib { opacity: 1; transform: none; visibility: visible; transition: opacity 0.15s, transform 0.15s ease; }
  .lib-scrim {
    display: block; position: fixed; inset: 0; z-index: 29;
    background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.15s;
  }
  .lib-open .lib-scrim { opacity: 1; pointer-events: auto; }
  body.lib-open { overflow: hidden; }
  .lib-head { padding: 16px 12px 10px 16px; }
  .lib-head .icon-btn { width: 32px; height: 32px; }
  .project-h { padding: 10px 8px; }
  .item { padding: 6px 8px; }
  .item img, .item .ph { width: 40px; height: 40px; }
  .project-name-edit { height: 30px; font-size: 16px; }

  /* The strip, the view and the 3D panel join the column (order below). */
  .work { flex: 1 0 auto; }
  .stage-row { display: contents; }
  .pipeline { order: 0; }
  .stage { order: 1; }
  .strip { order: 2; }
  .status-bar { order: 3; }
  .gen-panel { order: 4; }
  .dock { order: 5; }

  /* Rigging and Animation (not yet) show their icons only. */
  .step { height: 44px; padding: 0 10px; }
  .step:not(:last-child)::after { right: 7px; }
  .step.soon { flex: 0 0 52px; padding: 0 12px 0 0; }
  .step.soon:last-child { padding: 0; }
  .step.soon span { display: none; }

  /* The status line, the prompt and the top of the 3D panel show under the
     view on the first screen; with the versions row, the view is shorter. */
  .stage { flex: none; height: max(260px, calc(100vh - 354px)); height: max(260px, calc(100svh - 354px)); }
  .work:has(.strip:not([hidden])) .stage {
    height: max(240px, calc(100vh - 422px)); height: max(240px, calc(100svh - 422px));
  }
  .hero { padding: 16px 16px 28px; }
  .hero img { max-width: 100%; }

  .strip {
    flex-direction: row; width: auto; padding: 8px 12px;
    overflow-x: auto; overflow-y: hidden; border-top: 1px solid var(--line);
  }
  .strip-item { width: 52px; height: 52px; }

  .gen-panel {
    width: auto; padding: 16px 16px 24px; overflow: visible;
    border-left: 0; border-top: 1px solid var(--line); font-size: 13px;
  }
  .tui-input { height: 40px; }
  .tui-input input { font-size: 16px; }
  .tui-picks button { height: 34px; }
  .tui-list button { padding: 8px 6px; }
  .gen-go { height: 44px; }
  .downloads { padding-top: 20px; }
  .dl-row, .dl-pills { gap: 8px; }
  .dl-pill { padding: 8px 16px; font-size: 12px; }

  .dock {
    position: sticky; bottom: 0; z-index: 6;
    padding: 8px 10px 10px;
  }
  .chat textarea { font-size: 16px; }
  .hint-row { display: none; }

  .gate-card input, .settings-input, .report-message, .buy-other input { font-size: 16px; }

  /* /feedback: in the header's row, left of the credits, 24px apart. */
  .header-feedback { position: static; margin: 0 14px 0 auto; }
  .header-feedback:not([hidden]) + .account-btn { margin-left: 0; }
}