/* ============================================================
   SOLAR & LUNAR
   one site, two skies. the logo in the sidebar is the switch.
   every color is a var so both themes keep working. never hardcode
   hex inside a component.
   ============================================================ */

:root {
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* radius scale */
  --r-xs: 8px;
  --r-sm: 12px;
  --radius-sm: 12px;      /* old name, kept so nothing breaks */
  --r-md: 16px;
  --radius: 18px;         /* old name, kept */
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 999px;

  --rail-w: 168px;
  --topbar-h: 62px;
  --side-w: 280px;
  --measure: 760px;       /* the reading column */

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fast: .16s;
  --med: .28s;
}

/* ---- SOLAR: daylight. warm paper, marigold sun ---- */
html[data-theme="solar"] {
  --bg: #FBF8F1;
  --bg-2: #F5F0E4;
  --surface: #FFFFFF;
  --surface-2: #F4EFE4;
  --surface-3: #EDE6D7;
  --ink: #1A1712;
  --ink-2: #565046;
  --muted: #918A7E;
  --line: #EBE4D5;
  --line-2: #DCD3C0;
  --accent: #E29100;
  --accent-2: #C2540A;
  --accent-ink: #1F1400;
  --accent-soft: #FCEFD1;
  --glow: 226, 145, 0;
  --hero-deep: 226, 145, 0;
  --bubble-user: #EFE9DB;
  --bubble-user-ink: #1A1712;
  --bubble-ai: transparent;
  --focus: #E29100;
  --meter-on: #E29100;
  --meter-off: #E3DBC8;
  --danger: #B3402A;
  --shadow-sm: 0 1px 2px rgba(60, 44, 10, .05), 0 1px 1px rgba(60, 44, 10, .04);
  --shadow: 0 2px 4px rgba(60, 44, 10, .04), 0 8px 24px -12px rgba(60, 44, 10, .18);
  --shadow-lg: 0 4px 8px rgba(60, 44, 10, .05), 0 24px 48px -20px rgba(60, 44, 10, .28);
  --scrim: rgba(26, 23, 18, .38);
}

/* ---- LUNAR: night. deep blue, moonlight ---- */
html[data-theme="lunar"] {
  --bg: #0A0E18;
  --bg-2: #0F1522;
  --surface: #131A29;
  --surface-2: #1A2233;
  --surface-3: #222C41;
  --ink: #ECF1FA;
  --ink-2: #B4C0D6;
  --muted: #7B879E;
  --line: #1F2839;
  --line-2: #2C3750;
  --accent: #A6C0EA;
  --accent-2: #DCE6FF;
  --accent-ink: #0A0E18;
  --accent-soft: #1B2538;
  --glow: 166, 192, 234;
  --hero-deep: 79, 70, 229;
  --bubble-user: #222D44;
  --bubble-user-ink: #ECF1FA;
  --bubble-ai: transparent;
  --focus: #DCE6FF;
  --meter-on: #A6C0EA;
  --meter-off: #232E45;
  --danger: #FF8B79;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 32px -14px rgba(0, 0, 0, .8);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, .45), 0 28px 56px -22px rgba(0, 0, 0, .9);
  --scrim: rgba(4, 7, 14, .6);
}

/* ============================================================
   base
   ============================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .5s var(--ease), color .5s var(--ease);
}
/* a soft light source at the top of the page. cheap, and it sells the whole thing. */
html[data-theme="solar"] body {
  background-image: radial-gradient(120% 70% at 50% -20%, rgba(226, 145, 0, .10) 0%, transparent 60%);
  background-attachment: fixed;
}
html[data-theme="lunar"] body {
  background-image: radial-gradient(120% 70% at 50% -20%, rgba(166, 192, 234, .10) 0%, transparent 62%);
  background-attachment: fixed;
}

.hidden { display: none !important; }
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: -.01em; }
.fine { font-size: 12.5px; color: var(--muted); margin: 0; }
.spacer { flex: 1; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.status { font-size: 12.5px; color: var(--muted); }
.msg { font-size: 13px; margin: 10px 0 0; color: var(--ink-2); min-height: 18px; }
.danger { color: var(--danger); }
.optional { font-weight: 400; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
a { color: inherit; }
::selection { background: var(--accent-soft); color: var(--ink); }

/* scrollbars, quiet everywhere */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   controls
   ============================================================ */
.btn {
  font: inherit; font-weight: 600; font-size: 14px; letter-spacing: -.01em;
  padding: 10px 18px; border-radius: var(--r-full);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--fast) var(--ease), background var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.btn:hover { transform: translateY(-1px); background: var(--surface-2); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent; color: var(--accent-ink);
  box-shadow: 0 1px 2px rgba(var(--glow), .3), 0 8px 20px -10px rgba(var(--glow), .7);
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 2px 4px rgba(var(--glow), .34), 0 14px 28px -10px rgba(var(--glow), .8); }
html[data-theme="lunar"] .btn-primary:hover { filter: brightness(1.1); }
.btn-wide { width: 100%; }
.btn-big { padding: 14px 30px; font-size: 16px; }
.linkbtn {
  border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line-2); transition: color var(--fast);
}
.linkbtn:hover { color: var(--ink); text-decoration-color: var(--accent); }
.linkbtn.danger:hover { color: var(--danger); }

.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field span { font-size: 12px; font-weight: 600; color: var(--muted); }
input[type="text"], input[type="email"], input[type="password"], textarea, input:not([type]) {
  font: inherit; font-size: 15px; width: 100%; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 11px 13px; transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--glow), .16);
}
textarea { resize: vertical; line-height: 1.6; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px;
  padding: 4px 10px; border-radius: var(--r-full); background: var(--surface-2);
  border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.chip {
  font: inherit; font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: var(--r-full);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); }
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.chip:disabled, .chip[disabled] { opacity: .4; cursor: not-allowed; transform: none; }

.toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  width: 40px; height: 23px; border-radius: var(--r-full); background: var(--line-2);
  position: relative; flex: none; transition: background var(--med) var(--ease);
}
.toggle-track::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform var(--med) var(--ease-out);
}
.toggle input:checked + .toggle-track { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.toggle input:checked + .toggle-track::after { transform: translateX(17px); }
.toggle input:focus-visible + .toggle-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.toggle-label { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.toggle-label small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }

.icobtn {
  width: 36px; height: 36px; flex: none; border-radius: var(--r-sm); border: 1px solid transparent;
  background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; line-height: 1;
  display: grid; place-items: center; transition: all var(--fast) var(--ease);
}
.icobtn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.icobtn.rec { background: var(--danger); border-color: var(--danger); color: #fff; animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* ============================================================
   consent
   ============================================================ */
.consent { position: fixed; inset: 0; z-index: 50; display: grid; place-items: end center; padding: 18px; pointer-events: none; }
.consent-card {
  pointer-events: auto; max-width: 560px; width: 100%;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 20px; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  box-shadow: var(--shadow-lg); animation: rise .55s var(--ease-out);
}
.consent-card strong { font-family: var(--font-display); font-size: 16px; letter-spacing: -.02em; }
.consent-card p { margin: 5px 0 0; font-size: 13.5px; color: var(--ink-2); }
.consent-logo { width: 44px; height: 44px; object-fit: contain; }
.consent-card .btn { grid-column: 1 / -1; justify-self: end; }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================
   auth
   ============================================================ */
.auth {
  min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center;
  max-width: 1120px; margin: 0 auto; padding: 48px 28px; gap: 56px;
  overflow-y: auto; max-height: 100dvh;
}
.auth-hero { animation: rise .8s var(--ease-out) both; }
.auth-mark { position: relative; width: 128px; height: 128px; }
.auth-mark::after {
  content: ""; position: absolute; inset: -30%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(var(--glow), .38) 0%, transparent 68%);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: scale(1.14); opacity: .75; } }
.auth-mark img { width: 128px; height: 128px; object-fit: contain; animation: spin-in 1.2s var(--ease-out); }
@keyframes spin-in { from { transform: rotate(-30deg) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.auth h1 { font-size: clamp(46px, 7vw, 78px); margin: 16px 0 0; line-height: .92; letter-spacing: -.04em; }
.auth h1 .amp { font-weight: 500; color: var(--accent-2); font-style: italic; }
.tagline { font-family: var(--font-display); font-size: 21px; font-weight: 500; color: var(--muted); margin: 10px 0 26px; letter-spacing: -.02em; }
.auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 470px; }
.auth-points li { padding-left: 24px; position: relative; color: var(--ink-2); font-size: 14.5px; }
.auth-points li b { color: var(--ink); }
.auth-points li::before { content: "\2726"; position: absolute; left: 0; top: 0; color: var(--accent); font-size: 13px; }
.auth-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 26px; box-shadow: var(--shadow-lg); max-width: 400px; width: 100%; justify-self: end;
  animation: rise .8s .1s var(--ease-out) both;
}
.tabs { display: flex; gap: 3px; background: var(--surface-2); padding: 4px; border-radius: var(--r-full); margin-bottom: 18px; }
.tab {
  flex: 1; font: inherit; font-weight: 600; font-size: 13.5px; padding: 9px; border: 0;
  border-radius: var(--r-full); background: transparent; color: var(--muted); cursor: pointer;
  transition: color var(--fast), background var(--med) var(--ease), box-shadow var(--med);
}
.tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ============================================================
   app shell
   ============================================================ */
html, body { overflow: hidden; }
.app { display: grid; grid-template-columns: var(--side-w) 1fr; height: 100dvh; }

/* ---------- sidebar ---------- */
.side {
  display: flex; flex-direction: column; min-height: 0; gap: 12px; padding: 14px 12px;
  background: var(--bg-2); border-right: 1px solid var(--line); position: relative; z-index: 20;
}
.side-top { display: flex; align-items: center; gap: 11px; padding: 2px 4px 4px; }
.side-close { display: none; margin-left: auto; }
.brand { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-name { font-size: 17px; letter-spacing: -.03em; }
.brand-sub { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the logo is a square with the sun/moon circle AND rays that reach the edges.
   never clip it to a circle, that eats the rays. contain, on transparency. */
.modeswitch { position: relative; width: 40px; height: 40px; flex: none; }
.modeswitch img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform .7s var(--ease-out);
}
.modeswitch .half { position: absolute; top: 0; bottom: 0; width: 50%; background: transparent; border: 0; cursor: pointer; padding: 0; }
.modeswitch .half-solar { left: 0; }
.modeswitch .half-lunar { right: 0; }
html[data-theme="lunar"] .modeswitch img { transform: rotate(180deg); }
.modeswitch::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(var(--glow), .55), 0 0 20px rgba(var(--glow), .5);
  opacity: 0; transition: opacity var(--med);
}
.modeswitch:hover::after { opacity: 1; }

.newchat {
  display: flex; align-items: center; gap: 9px; width: 100%; font: inherit; font-size: 14px; font-weight: 600;
  padding: 11px 14px; border-radius: var(--r-sm); cursor: pointer; text-align: left;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm); transition: all var(--fast) var(--ease);
}
.newchat:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.newchat span { font-size: 15px; color: var(--accent-2); line-height: 1; }

.nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.nav-btn {
  display: flex; align-items: center; gap: 11px; width: 100%; font: inherit; font-size: 14px; font-weight: 500;
  padding: 9px 12px; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--ink-2);
  cursor: pointer; text-align: left; text-decoration: none; position: relative;
  transition: background var(--fast), color var(--fast);
}
.nav-btn:hover { background: var(--surface-2); color: var(--ink); }
.nav-btn.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.nav-btn.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 17px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.nav-btn .ico { width: 17px; text-align: center; font-size: 14px; color: var(--muted); flex: none; }
.nav-btn.active .ico { color: var(--accent-2); }
.nav-ray .ico, .nav-plus .ico { color: var(--accent-2); }
.nav-plus.is-plus { background: linear-gradient(90deg, var(--accent-soft), transparent); }
a.nav-btn { text-decoration: none; }

.side-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
  padding: 6px 12px 0; font-weight: 600;
}
.chatlist { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; align-content: start; margin: 0 -2px; padding: 0 2px; }
.chatlist::-webkit-scrollbar { width: 6px; }
.chatlist::-webkit-scrollbar-thumb { background: var(--line-2); border: 0; }
.ci {
  display: flex; align-items: center; gap: 6px; width: 100%; font: inherit; font-size: 13.5px;
  padding: 8px 10px; border-radius: var(--r-xs); border: 0; background: transparent; color: var(--ink-2);
  cursor: pointer; text-align: left; transition: background var(--fast), color var(--fast);
}
.ci:hover { background: var(--surface-2); color: var(--ink); }
.ci.active { background: var(--surface); color: var(--ink); font-weight: 600; }
.ci-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-menu { opacity: 0; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0 3px; line-height: 1; transition: opacity var(--fast), color var(--fast); }
.ci:hover .ci-menu, .ci.active .ci-menu { opacity: 1; }
.ci-menu:hover { color: var(--danger); }
.chatlist .none { font-size: 12.5px; color: var(--muted); padding: 8px 10px; }
/* rename happens in place now, no prompt() box */
.ci-rename {
  flex: 1; min-width: 0; font: inherit; font-size: 13.5px; padding: 2px 6px;
  border-radius: var(--r-xs); border: 1px solid var(--accent); background: var(--surface); color: var(--ink);
}
.ci-rename:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--glow), .16); }
/* the chat row menu is fixed to the viewport, .chatlist scrolls and would clip it */
.chat-menu { min-width: 168px; }
.menu button.danger { color: var(--danger); }
.menu button.danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.ec-actions { margin-top: 12px; }

/* the little always-on uses panel */
.side-uses {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  padding: 10px 12px; display: grid; gap: 5px; flex: none; box-shadow: var(--shadow-sm);
}
.su { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; color: var(--muted); }
.su span { text-transform: lowercase; }
.su b { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); font-weight: 600; }
.su b i { font-style: normal; color: var(--muted); font-size: 10.5px; }
.su.low b { color: var(--danger); }
.usage-err { font-size: 11.5px; color: var(--danger); margin: 0 2px; }

.side-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; flex: none; padding-top: 6px; border-top: 1px solid var(--line); }
.userchip {
  display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; padding: 8px 10px; margin-top: 4px;
  border-radius: var(--r-sm); border: 0; background: transparent; cursor: pointer; text-align: left;
  color: var(--ink);   /* buttons do NOT inherit color. without this it is black on navy in Lunar. */
  transition: background var(--fast);
}
.userchip:hover { background: var(--surface-2); }
.userchip .avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 800; font-size: 14px; text-transform: uppercase;
}
.uc-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.uc-text b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-text small { font-size: 11px; color: var(--muted); }
.uc-cog { color: var(--muted); font-size: 14px; }

.side-scrim { display: none; }

/* ---------- main ---------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100dvh; position: relative; }
.main-head {
  display: flex; align-items: center; gap: 14px; padding: 13px 24px; flex: none; z-index: 10;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.side-open { display: none; }
.head-title h1 { font-size: 20px; margin: 0; line-height: 1.15; letter-spacing: -.03em; }
.head-sub { font-size: 12px; color: var(--muted); }
.head-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.meter { display: flex; gap: 3px; align-items: flex-end; height: 18px; }
.meter i { width: 3px; border-radius: var(--r-full); background: var(--meter-off); display: block; transition: background var(--med), height var(--med); }
.meter i.on { background: var(--meter-on); }
html[data-theme="lunar"] .meter i { width: 6px; height: 6px !important; border-radius: 50%; }
.meter .inf { font-family: var(--font-display); font-size: 18px; color: var(--accent); line-height: 1; }

.views { flex: 1; min-height: 0; display: flex; }
.view { flex: 1; min-width: 0; min-height: 0; display: none; flex-direction: column; }
.view.active { display: flex; animation: fade .3s var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.scroller { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 24px 60px; }
.scroller > * { max-width: 940px; margin-left: auto; margin-right: auto; }

/* ---------- strip (lunar + ray still use it) ---------- */
.strip {
  display: flex; align-items: center; gap: 14px; padding: 12px 24px; flex: none; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.strip .toggle { margin-left: auto; }

/* ============================================================
   the control bar under the composer.
   two separate things on purpose: WHICH model answers, then HOW HARD
   it goes. deliberately small, it sits under what you are typing.
   ============================================================ */
.ctlbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 9px; padding: 0 4px;
}

/* ---- 1. model picker ---- */
.picker { position: relative; }
.pick-btn {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 5px 10px; border-radius: var(--r-full); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  transition: border-color var(--fast), background var(--fast);
}
.pick-btn:hover { border-color: var(--accent); background: var(--surface-2); }
.pick-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.pick-caret { color: var(--muted); font-size: 10px; }
/* .menu is defined further down the file, so it wins on source order at equal
   specificity. the extra .picker is what keeps this menu opening UPWARD,
   otherwise it drops off the bottom of the screen. */
.picker .pick-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; min-width: 210px; }
.pick-menu .tier {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  font: inherit; font-size: 13.5px; text-align: left; padding: 8px 11px;
  border: 0; border-radius: var(--r-xs); background: none; color: var(--ink-2); cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.pick-menu .tier:hover { background: var(--surface-2); color: var(--ink); }
.pick-menu .tier.active { background: var(--accent-soft); color: var(--ink); }
.pick-menu .tier b { font-weight: 600; }
.pick-menu .tier small { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.pick-menu .tier.locked { opacity: .45; }

/* ---- 2. effort. VERTICAL, beside the composer. Low at the bottom, Supernova at the top. ---- */
.dock-row { display: flex; gap: 12px; align-items: stretch; }
.dock-main { flex: 1; min-width: 0; }
.effort { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: none; width: 58px; }
.effort-lab { font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.effort-rail {
  position: relative; display: flex; flex-direction: column-reverse; gap: 2px; padding: 2px;
  border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line); cursor: pointer;
}
.effort-rail:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* scaleY from the bottom. set from js. */
.effort-fill {
  position: absolute; left: 2px; right: 2px; top: 2px; bottom: 2px;
  border-radius: var(--r-full); pointer-events: none; z-index: 0;
  transform-origin: center bottom; transform: scaleY(.1667);
  background: linear-gradient(0deg, rgba(var(--glow), .25), rgba(var(--glow), .55));
  transition: transform .34s var(--ease-out), background .3s;
}
.es { position: relative; z-index: 1; width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-full); }
.es::after { content: ""; position: absolute; inset: 6px 4px; border-radius: var(--r-full); background: var(--line-2); transition: background var(--fast), transform var(--fast); }
.es.on::after { background: var(--accent-2); }
.es.at::after { background: var(--ink); transform: scaleX(1.6); }
.es:hover::after { transform: scaleX(1.6); }
.effort-name { font-size: 10.5px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.1; }

/* ---- Supernova: the top of the scale. purple/blue neon. ---- */
:root { --nova-a: #7C3AED; --nova-b: #38BDF8; --nova-c: #C4B5FD; }
.effort.is-od .effort-fill {
  background: linear-gradient(0deg, rgba(56, 189, 248, .45), var(--nova-b), var(--nova-a), var(--nova-b));
  background-size: 100% 220%;
  animation: odflow 2.4s linear infinite;
  box-shadow: 0 0 10px rgba(56, 189, 248, .55);
}
@keyframes odflow { to { background-position: 0 -220%; } }
.effort.is-od .effort-name {
  background: linear-gradient(90deg, var(--nova-b), var(--nova-c), var(--nova-a), var(--nova-b));
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: odflowx 2.4s linear infinite;
}
@keyframes odflowx { to { background-position: -220% 0; } }
.effort.is-od .es-od::after { background: var(--nova-b); box-shadow: 0 0 8px var(--nova-a), 0 0 14px var(--nova-b); }
.effort.kick .effort-rail { animation: odkick .55s var(--ease-out); }
@keyframes odkick {
  0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, .7); }
  100% { box-shadow: 0 0 0 10px rgba(124, 58, 237, 0); }
}

/* the blast. starts AT the rail (--fx/--fy set by js), small, see-through,
   with lines of code streaming out of it. */
.novaflash { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; }
.novaflash::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--fx) var(--fy), rgba(124, 58, 237, .32), rgba(56, 189, 248, .14) 26%, transparent 52%);
  animation: novablind .55s ease-out forwards;
}
@keyframes novablind { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.nova-core {
  position: absolute; left: var(--fx); top: var(--fy); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 28%, var(--nova-b) 52%, var(--nova-a) 78%, transparent 80%);
  box-shadow: 0 0 22px 6px rgba(56, 189, 248, .8), 0 0 56px 18px rgba(124, 58, 237, .55);
  animation: novacore .7s var(--ease-out) forwards;
}
@keyframes novacore { 0% { transform: scale(0); opacity: 1; } 35% { transform: scale(8); opacity: .85; } 100% { transform: scale(14); opacity: 0; } }
.nova-ring {
  position: absolute; left: var(--fx); top: var(--fy); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid var(--nova-b); box-shadow: 0 0 12px var(--nova-a), inset 0 0 8px var(--nova-b);
  animation: novaring .8s var(--ease-out) .05s forwards; opacity: 0;
}
@keyframes novaring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(16); opacity: 0; } }
.nova-line {
  position: absolute; left: var(--fx); top: var(--fy); font-family: var(--font-mono); font-size: 10.5px; white-space: nowrap;
  color: var(--nova-c); text-shadow: 0 0 6px var(--nova-a), 0 0 12px var(--nova-b); opacity: 0;
  animation: novaline .9s cubic-bezier(.16, 1, .3, 1) var(--d) forwards;
}
@keyframes novaline {
  0% { transform: translate(-50%, -50%) translate(0, 0) scale(.7); opacity: 0; }
  18% { opacity: .55; }
  100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}

/* cut-off recovery card */
.cutoff {
  align-self: stretch; border: 1px solid var(--accent); border-left: 3px solid var(--accent-2);
  border-radius: var(--r-md); background: linear-gradient(150deg, var(--surface), var(--accent-soft));
  padding: 16px 18px; animation: pop .35s var(--ease-out); box-shadow: var(--shadow-sm);
}
.cutoff b { font-family: var(--font-display); font-size: 15px; letter-spacing: -.02em; }
.cutoff p { margin: 7px 0 0; font-size: 13.5px; color: var(--ink-2); }
.cutoff .row { margin-top: 12px; }

/* ---- files Overdrive hands back ---- */
.filetray { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 0 4px 8px; }
.filetray .ftitle { font-size: 11px; color: var(--muted); width: 100%; }
.fchip {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12px;
  padding: 5px 10px; border-radius: var(--r-full); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  transition: border-color var(--fast), transform var(--fast);
}
.fchip:hover { border-color: var(--accent); transform: translateY(-1px); }
.fchip .fx { font-family: var(--font-mono); font-size: 9px; color: var(--muted); text-transform: uppercase; }
.fchip.zip { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border-color: transparent; }

@media (max-width: 560px) {
  .ctlbar { gap: 8px; }
  .effort-lab { display: none; }
  .effort-name { min-width: 0; }
}


/* ---------- the log ---------- */
/* the log itself is the reading column. doing it with padding instead of
   centering each child is what lets a user bubble sit right-aligned INSIDE
   the column, instead of margin:auto dragging it back to the middle. */
.chatlog {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 28px max(24px, calc((100% - var(--measure)) / 2)) 10px;
  display: flex; flex-direction: column; align-items: stretch; gap: 22px; scroll-behavior: smooth;
}
/* flex: none matters. without it these are flex items that SHRINK once the log
   is taller than the pane, so a long message gets squashed and its text paints
   outside its own box on top of the next one. */
.chatlog > * { max-width: 100%; margin-left: 0; margin-right: 0; flex: none; }

.empty { margin: auto; text-align: center; color: var(--muted); font-size: 15px; max-width: 440px; animation: rise .7s var(--ease-out); }
.empty img { width: 66px; height: 66px; object-fit: contain; margin-bottom: 14px; }
.empty h2 { font-size: 30px; color: var(--ink); margin: 0 0 8px; letter-spacing: -.03em; }
.empty p { margin: 0; }
.empty .moon-blob, .empty .ray-blob { font-size: 46px; display: block; color: var(--accent); margin-bottom: 10px; line-height: 1; }

/* messages. the assistant gets no bubble, like every serious chat app:
   just the mark, then the text, full measure. the user gets the bubble. */
.bubble {
  max-width: 100%; width: fit-content; font-size: 15.5px; line-height: 1.68;
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
  animation: pop .35s var(--ease-out);
}
@keyframes pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.bubble.user {
  align-self: flex-end; max-width: 78%;
  background: var(--bubble-user); color: var(--bubble-user-ink);
  padding: 12px 17px; border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
}
.bubble.ai {
  align-self: stretch; width: auto; background: var(--bubble-ai); color: var(--ink);
  padding: 2px 0 0 44px; position: relative; min-height: 30px;
}
.bubble.err, .errorcard, .upsell { align-self: stretch; }
/* no ring, no fill. the mark has its own shape and rays, a bordered circle
   would crop them and fight the artwork. */
.bubble.ai::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 28px; height: 28px;
  background: center/contain no-repeat url("../img/solar-256.png");
}
.lunar-log .bubble.ai::before, #ray-log .bubble.ai::before {
  background-image: none; display: grid; place-items: center;
  font-size: 16px; color: var(--accent-2); text-align: center; line-height: 28px;
}
.lunar-log .bubble.ai::before { content: "\263E"; }
#ray-log .bubble.ai::before { content: "\2318"; }
.bubble.err { margin: 0 auto; color: var(--danger); font-size: 13.5px; padding: 10px 14px; border: 1px dashed var(--danger); border-radius: var(--r-sm); }
.bubble pre {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px; overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  white-space: pre; margin: 12px 0;
}
.bubble code { font-family: var(--font-mono); font-size: 13px; background: var(--surface-2); border: 1px solid var(--line); padding: 1.5px 6px; border-radius: var(--r-xs); }
.bubble pre code { border: 0; background: none; padding: 0; }
.bubble-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 10px; }
.bubble .shots { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.bubble .shots img { max-width: 160px; max-height: 160px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.bubble .filechip {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; padding: 3px 9px; border-radius: var(--r-xs);
  background: var(--surface-2); border: 1px solid var(--line); margin: 0 5px 5px 0; color: var(--ink-2);
}

/* thinking indicator. app.js wraps this in a .bubble.ai, so the 44px indent and
   the avatar come from the bubble. do NOT add padding here or it doubles up. */
.thinker { display: flex; align-items: center; gap: 11px; }
.thinker-shape {
  /* deliberately smaller than the 28px logo beside it, so the mark reads as the
     subject and the morphing blob reads as the activity. */
  width: 13px; height: 13px; flex: none; opacity: .85;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  animation: morph 4.8s infinite var(--ease), spin 4.8s infinite linear;
}
@keyframes morph {
  0%,14%   { clip-path: circle(50% at 50% 50%); border-radius: 50%; }
  20%,34%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); border-radius: 3px; }
  40%,54%  { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 2px; }
  60%,74%  { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
  80%,94%  { clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
  100%     { clip-path: circle(50% at 50% 50%); border-radius: 50%; }
}
@keyframes spin { to { transform: rotate(360deg); } }
.thinker-text { color: var(--muted); font-size: 14px; }
.bubble.typing::after {
  content: ""; display: inline-block; width: 8px; height: 16px; margin-left: 3px; vertical-align: -3px;
  border-radius: 2px; background: var(--accent-2); animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- the composer ---------- */
.dock {
  flex: none; padding: 12px 24px 18px;
  background: linear-gradient(to top, var(--bg) 55%, transparent);
}
.dock > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.composer {
  display: flex; gap: 6px; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 7px 8px; box-shadow: var(--shadow);
  transition: border-color var(--fast), box-shadow var(--med);
}
.composer:focus-within { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 4px rgba(var(--glow), .14); }
.composer textarea {
  flex: 1; border: 0; background: transparent; padding: 9px 4px; max-height: 200px; resize: none;
  font-size: 15.5px; line-height: 1.55; box-shadow: none;
}
.composer textarea:focus { border: 0; outline: none; box-shadow: none; }
.send {
  width: 36px; height: 36px; border-radius: var(--r-sm); border: 0; flex: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); font-size: 14px;
  box-shadow: 0 2px 8px -2px rgba(var(--glow), .8);
  transition: transform var(--fast) var(--ease), filter var(--fast), opacity var(--fast);
}
.send:hover { transform: translateY(-1px) scale(1.04); filter: brightness(1.08); }
.send:disabled { opacity: .45; transform: none; cursor: wait; }
.dock-foot { display: flex; align-items: center; gap: 12px; margin-top: 9px; flex-wrap: wrap; }
.composer-foot { gap: 12px; flex-wrap: wrap; }
.disclaimer { font-size: 11px; color: var(--muted); margin-left: auto; text-align: right; max-width: 60%; }
.disclaimer b { color: var(--ink-2); }

.attach-strip { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 2px 9px; }
.att {
  display: flex; align-items: center; gap: 9px; padding: 5px 9px 5px 5px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); font-size: 12px; max-width: 210px; box-shadow: var(--shadow-sm);
}
.att img { width: 30px; height: 30px; object-fit: cover; border-radius: var(--r-xs); flex: none; }
.att .ft { width: 30px; height: 30px; border-radius: var(--r-xs); background: var(--surface-2); display: grid; place-items: center; font-family: var(--font-mono); font-size: 9px; color: var(--muted); flex: none; text-transform: uppercase; }
.att .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.att .x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 2px; }
.att .x:hover { color: var(--danger); }

/* code blocks get a copy button */
.codewrap { position: relative; }
.copycode {
  position: absolute; top: 10px; right: 10px; font-family: var(--font-mono); font-size: 10px; padding: 4px 9px;
  border-radius: var(--r-xs); border: 1px solid var(--line-2); background: var(--surface); color: var(--muted);
  cursor: pointer; opacity: 0; transition: opacity var(--fast), color var(--fast), border-color var(--fast);
}
.codewrap:hover .copycode { opacity: 1; }
.copycode:hover { color: var(--ink); border-color: var(--accent); }

/* hide / show on big code blocks. a folded block keeps a six-line peek. */
.hidecode {
  position: absolute; top: 10px; right: 64px; font-family: var(--font-mono); font-size: 10px; padding: 4px 9px;
  border-radius: var(--r-xs); border: 1px solid var(--line-2); background: var(--surface); color: var(--muted);
  cursor: pointer; opacity: 0; transition: opacity var(--fast), color var(--fast), border-color var(--fast);
}
.codewrap:hover .hidecode, .codewrap.is-folded .hidecode { opacity: 1; }
.hidecode:hover { color: var(--ink); border-color: var(--accent); }
.codewrap pre.folded { max-height: 132px; overflow: hidden; }
.fold-fade { display: none; }
.codewrap.is-folded .fold-fade {
  display: flex; align-items: flex-end; justify-content: center; position: absolute; left: 1px; right: 1px; bottom: 12px; height: 76px;
  border-radius: 0 0 var(--r-sm) var(--r-sm); cursor: pointer;
  background: linear-gradient(to bottom, transparent, var(--surface-2) 70%);
}
.fold-fade span { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-2); font-weight: 600; padding-bottom: 8px; }

/* the preview tells you when a build will break the moment it is opened from Downloads */
.pv-warn {
  font-size: 11.5px; padding: 6px 10px; color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

/* ---------- error card + upsell ---------- */
.errorcard {
  align-self: stretch; border: 1px solid var(--line-2); border-left: 3px solid var(--danger);
  border-radius: var(--r-md); background: var(--surface); padding: 17px 18px;
  animation: pop .35s var(--ease-out); font-size: 13.5px; box-shadow: var(--shadow-sm);
}
.ec-head { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 15px; letter-spacing: -.02em; }
.ec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; animation: pulse 1.6s infinite; }
.ec-code { margin-left: auto; color: var(--muted); font-size: 11px; }
.ec-why { color: var(--ink-2); margin: 9px 0 12px; }
.ec-tips { background: var(--surface-2); border-radius: var(--r-sm); padding: 12px 14px; }
.ec-tips b { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.ec-tips ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); }
.ec-tips li { margin: 4px 0; }
.ec-report { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.ec-report a { color: var(--accent-2); font-weight: 600; }

.upsell {
  align-self: stretch; border: 1px solid var(--accent); border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--surface), var(--accent-soft));
  padding: 22px; text-align: center; animation: pop .35s var(--ease-out); box-shadow: var(--shadow);
}
.upsell h4 { font-family: var(--font-display); font-size: 19px; margin: 0 0 6px; letter-spacing: -.02em; }
.upsell p { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-2); }
.upsell .row { justify-content: center; margin: 0; }

/* ============================================================
   humanizer
   ============================================================ */
.hum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.hum-step {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px;
  box-shadow: var(--shadow-sm);
}
.hum-step-wide { grid-column: 1 / -1; }
.step-tag {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.slider-wrap { display: grid; gap: 6px; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--accent); box-shadow: var(--shadow); cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--accent); box-shadow: var(--shadow); cursor: grab;
}
.slider-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.slider-value { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); letter-spacing: -.02em; }
.custom-tone { margin-top: 12px; }
.style-status { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.style-status.ok { color: var(--accent-2); font-weight: 600; }
.style-setup { margin-top: 14px; display: grid; gap: 10px; }
.hum-output {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px;
  white-space: pre-wrap; font-size: 15px; line-height: 1.7; min-height: 90px; margin-top: 12px;
}
.hum-output.busy { opacity: .45; }

/* ============================================================
   lunar
   ============================================================ */
.brainbar { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.brain-name { font-size: 13px; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp { flex: 1; min-width: 120px; max-width: 320px; display: grid; gap: 4px; }
.xp-track { height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.xp-fill { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s var(--ease-out); }
.xp-text { display: flex; justify-content: space-between; color: var(--muted); font-size: 10.5px; }
.brain-menu { position: relative; margin-left: auto; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: grid; min-width: 178px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 6px;
  box-shadow: var(--shadow-lg); animation: rise .2s var(--ease-out);
}
.menu button {
  font: inherit; font-size: 13.5px; text-align: left; padding: 9px 11px; border: 0; border-radius: var(--r-xs);
  background: none; color: var(--ink-2); cursor: pointer; transition: background var(--fast), color var(--fast);
}
.menu button:hover { background: var(--surface-2); color: var(--ink); }
.lunar-log .bubble.ai { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6; }

/* ============================================================
   ray
   ============================================================ */
.ray-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ray-blob { font-size: 44px; display: block; color: var(--accent-2); line-height: 1; }
.ray-lock { display: grid; place-items: center; padding: 40px 24px; flex: 1; }
.ray-lock-in {
  text-align: center; max-width: 460px; border: 1px solid var(--accent); border-radius: var(--r-xl); padding: 34px 28px;
  background: linear-gradient(160deg, var(--surface), var(--accent-soft)); box-shadow: var(--shadow-lg);
}
.ray-lock-in h3 { font-size: 28px; margin: 8px 0 10px; letter-spacing: -.03em; }
.ray-lock-in p { color: var(--ink-2); font-size: 14.5px; margin: 0 0 18px; }
#view-ray .bubble pre { max-height: 460px; overflow: auto; }
.rail-ray .ico { font-size: 14px; }
.rail-plus .ico { color: var(--accent-2); }
.rail-btn.is-plus { background: linear-gradient(90deg, var(--accent-soft), transparent); }

/* ============================================================
   plus
   ============================================================ */
.plus-hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--line-2);
  background: linear-gradient(160deg, var(--surface), var(--accent-soft) 150%); padding: 44px 38px; margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.plus-rays {
  position: absolute; inset: -60% -20% auto -20%; height: 200%;
  background: repeating-conic-gradient(from 0deg at 50% 0%, rgba(var(--glow), .22) 0deg 2deg, transparent 2deg 8deg);
  opacity: .6; animation: slowspin 90s linear infinite; transform-origin: 50% 0;
}
@keyframes slowspin { to { transform: rotate(360deg); } }
.plus-hero-in { position: relative; }
.plus-eyebrow { color: var(--accent-2); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.plus-title { font-size: clamp(40px, 6vw, 64px); margin: 8px 0 6px; line-height: .92; letter-spacing: -.04em; }
.plus-lede { max-width: 480px; color: var(--ink-2); font-size: 15.5px; margin: 0 0 22px; }
.plus-price { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; }
.plus-amount { font-size: 52px; line-height: 1; letter-spacing: -.04em; }
.plus-per { font-size: 13px; color: var(--muted); padding-top: 8px; line-height: 1.35; }
.plus-per small { font-size: 11px; }
.plus-state { color: var(--accent-2); font-weight: 600; }
.plus-cta-row { margin-top: 0; }

.plus-table {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface);
  margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.pt-row {
  display: grid; grid-template-columns: 1.6fr .7fr .7fr; gap: 12px; padding: 13px 20px;
  border-bottom: 1px solid var(--line); font-size: 14px; align-items: center;
}
.pt-row:last-child { border-bottom: 0; }
.pt-row i { color: var(--muted); font-style: normal; font-size: 12px; }
.pt-row span:not(:first-child) { text-align: center; color: var(--ink-2); font-family: var(--font-mono); font-size: 12px; }
.pt-row .pt-plus { color: var(--ink); background: linear-gradient(180deg, transparent, var(--accent-soft)); border-radius: var(--r-xs); padding: 4px 0; font-weight: 600; }
.pt-head { background: var(--surface-2); }
.pt-head span { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-family: var(--font-body); font-weight: 600; }
.pt-head .pt-plus { color: var(--accent-2); background: none; }
.plus-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* the plan cards and the "you have" strip. numbers come from the server. */
.plus-you { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.plus-you span { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface); font-size: 11.5px; color: var(--muted); }
.plus-you b { font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.plus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.plan-card { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); padding: 24px 24px 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.plan-card.is-plus { border-color: var(--accent); background: linear-gradient(150deg, var(--surface), var(--accent-soft)); }
.plan-name { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); font-weight: 600; }
.plan-amt { font-size: 44px; line-height: 1; letter-spacing: -.04em; margin: 8px 0 6px; }
.plan-amt small { font-family: var(--font-body); font-size: 13px; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.plan-card ul { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; gap: 7px; }
.plan-card li { position: relative; padding-left: 20px; font-size: 14px; color: var(--ink-2); }
.plan-card li::before { content: "\2726"; position: absolute; left: 0; color: var(--accent-2); }
.plan-card .btn { margin-top: auto; align-self: flex-start; }
.effort-left { font-size: 9px; color: var(--muted); text-align: center; line-height: 1.2; max-width: 64px; }

/* ============================================================
   account
   ============================================================ */
.acct-top { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 24px; }
.acct-id { display: flex; align-items: center; gap: 18px; }
.acct-ring {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 800; font-size: 30px; text-transform: uppercase;
  box-shadow: 0 10px 30px -12px rgba(var(--glow), .9);
}
.acct-id h2 { font-size: 30px; margin: 0; letter-spacing: -.03em; }
.acct-id .sub { color: var(--muted); margin: 2px 0 8px; font-size: 12px; }
.acct-quick { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.acct-quick .q {
  min-width: 88px; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line); text-align: center; box-shadow: var(--shadow-sm);
}
.acct-quick .q b { display: block; font-family: var(--font-display); font-size: 26px; line-height: 1; letter-spacing: -.03em; }
.acct-quick .q span { font-size: 11px; color: var(--muted); }

.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px;
  box-shadow: var(--shadow-sm); transition: border-color var(--fast), box-shadow var(--med);
}
.card:hover { box-shadow: var(--shadow); }
.card h3 { font-family: var(--font-display); font-size: 17px; margin: 0 0 8px; letter-spacing: -.02em; }
.card-plus { background: linear-gradient(150deg, var(--surface), var(--accent-soft)); border-color: var(--accent); }
.card-plus h3 { display: flex; align-items: center; gap: 8px; }
.uses { display: grid; gap: 7px; }
.uses .u { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }
.uses .u span:last-child { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.card-uses .uses { margin-bottom: 4px; }
.acct-actions { margin-top: 22px; padding-bottom: 20px; }

.monthbar { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.mb-top { display: flex; justify-content: space-between; color: var(--muted); }
.mb-track { height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; margin: 6px 0; }
.mb-fill { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s var(--ease-out); }

/* ============================================================
   backgrounds
   ============================================================ */
.bg-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; transition: opacity .6s var(--ease), background .6s var(--ease); }
body[data-bg="rays"] .bg-layer {
  background: repeating-conic-gradient(from 0deg at 50% -20%, var(--accent-soft) 0deg 3deg, transparent 3deg 9deg);
  opacity: .5;
}
html[data-theme="lunar"] body[data-bg="rays"] .bg-layer { opacity: .22; }
body[data-bg="grid"] .bg-layer {
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px; opacity: .75;
}
body[data-bg="dots"] .bg-layer { background-image: radial-gradient(var(--line-2) 1.4px, transparent 1.4px); background-size: 22px 22px; opacity: .8; }
body[data-bg="dunes"] .bg-layer {
  background:
    radial-gradient(120% 60% at 50% 120%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(90% 50% at 10% 110%, var(--surface-2) 0%, transparent 60%);
}
body[data-bg="aurora"] .bg-layer {
  background:
    radial-gradient(60% 40% at 20% 10%, rgba(var(--glow), .35) 0%, transparent 60%),
    radial-gradient(50% 40% at 80% 0%, rgba(var(--glow), .22) 0%, transparent 60%),
    radial-gradient(70% 50% at 50% 100%, rgba(var(--glow), .18) 0%, transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(-2%, -1%, 0) scale(1.05); } to { transform: translate3d(2%, 2%, 0) scale(1.12); } }
body[data-bg="eclipse"] .bg-layer {
  background: radial-gradient(closest-side circle at 78% 18%, var(--accent) 0 12%, rgba(var(--glow), .2) 12% 16%, transparent 17%),
              radial-gradient(120% 90% at 50% 120%, var(--surface-2), transparent 70%);
}
body[data-bg="graph"] .bg-layer {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px; opacity: .6;
}

.bg-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 9px; margin-top: 10px; }
.bg-opt {
  position: relative; height: 58px; border-radius: var(--r-sm); border: 1px solid var(--line-2); cursor: pointer;
  overflow: hidden; background: var(--surface-2); padding: 0;
  transition: transform var(--fast) var(--ease), border-color var(--fast), box-shadow var(--fast);
}
.bg-opt:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
.bg-opt.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--glow), .25); }
.bg-opt span {
  position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--font-mono); font-size: 9.5px;
  padding: 3px 5px; background: color-mix(in srgb, var(--surface) 84%, transparent); color: var(--ink-2);
}
.bg-opt .lock { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 60%, transparent); font-size: 14px; color: var(--accent-2); }
.bg-swatch { position: absolute; inset: 0; }

/* the logo sits on whatever the page background is. no backing, no filters. */
.auth-mark img, .consent-logo, .empty img { filter: none; }

/* ============================================================
   toast
   ============================================================ */
.toast {
  /* sits above the composer + control bar now, and never eats a click */
  position: fixed; left: 50%; bottom: 128px; transform: translateX(-50%); z-index: 90;
  pointer-events: none;
  background: var(--ink); color: var(--bg); font-size: 13.5px; font-weight: 500;
  padding: 11px 20px; border-radius: var(--r-full); box-shadow: var(--shadow-lg);
  animation: rise .3s var(--ease-out); max-width: 90vw; text-align: center;
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1080px) {
  .hum-grid { grid-template-columns: 1fr; }
  .plus-cards { grid-template-columns: 1fr; }
  .plus-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side {
    position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); z-index: 40;
    transform: translateX(-102%); box-shadow: var(--shadow-lg);
  }
  body.side-open .side { transform: none; }
  body.side-open .side-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: var(--scrim); animation: fade .25s; }
  .side-close, .side-open { display: grid; }
  .main-head { padding: 11px 16px; }
  .head-sub { display: none; }
  .strip { padding: 10px 16px; gap: 10px; }
  .strip .toggle { margin-left: 0; }
  .tiers { width: 100%; justify-content: space-between; }
  .tier { flex: 1; padding: 6px 8px; }
  .chatlog { padding: 20px 16px 8px; gap: 18px; }
  .dock { padding: 10px 16px 14px; }
  .scroller { padding: 20px 16px 50px; }
  .bubble.user { max-width: 88%; }
  .bubble.ai { padding-left: 38px; }
  .bubble.ai::before { width: 26px; height: 26px; background-size: 19px 19px; }
  .acct-grid { grid-template-columns: 1fr; }
  .pt-row { grid-template-columns: 1.4fr .6fr .6fr; padding: 11px 14px; font-size: 13px; }
  .plus-hero { padding: 30px 22px; }
  .acct-top { gap: 16px; }
  .acct-quick { margin-left: 0; width: 100%; }
  .auth { grid-template-columns: 1fr; gap: 32px; padding: 32px 20px; }
  .auth-card { justify-self: stretch; max-width: 100%; }
  .disclaimer { max-width: 100%; margin: 4px 0 0; text-align: left; }
  .meter { display: none; }
}
@media (max-width: 520px) {
  .acct-quick .q { min-width: 72px; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   SOLAR OMNIS. steel and sunlight. a cosmic thing that turned up to
   help with homework. --omnis-* are the only new tokens.
   ============================================================ */
:root {
  --omnis-a: #C9CED6;   /* brushed steel */
  --omnis-b: #FFD766;   /* sunlight */
  --omnis-c: #FF8A1F;   /* the hot edge */
  --omnis-ink: #1A1712;
}
html[data-theme="lunar"] { --omnis-a: #9AA6B8; --omnis-ink: #0A0E18; }
.omnis-grad { background: linear-gradient(120deg, var(--omnis-a) 0%, var(--omnis-b) 48%, var(--omnis-c) 100%); }
.pick-menu .tier-omnis { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-xs) var(--r-xs); padding-top: 10px; }
.pick-menu .tier-omnis b {
  background: linear-gradient(90deg, var(--omnis-a), var(--omnis-b), var(--omnis-c));
  -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; letter-spacing: -.01em;
}
.pick-btn.is-omnis { border-color: transparent; color: var(--omnis-ink); background: linear-gradient(120deg, var(--omnis-a), var(--omnis-b) 55%, var(--omnis-c)); box-shadow: 0 6px 18px -8px rgba(255, 138, 31, .8); }
.pick-btn.is-omnis .pick-dot { background: #fff; box-shadow: 0 0 6px #fff; }
.pick-btn.is-omnis .pick-caret { color: var(--omnis-ink); opacity: .7; }

/* the empty state when Omnis is picked: the big thing in the middle */
.omnis-hero { text-align: center; max-width: 560px; margin: auto; animation: rise .7s var(--ease-out); }
.omnis-orb {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px; position: relative;
  background: radial-gradient(circle at 35% 30%, #fff 0, var(--omnis-b) 22%, var(--omnis-c) 58%, #7a3a00 100%);
  box-shadow: 0 0 0 6px rgba(201, 206, 214, .35), 0 0 0 12px rgba(201, 206, 214, .12), 0 18px 50px -12px rgba(255, 138, 31, .9);
  animation: orbspin 9s linear infinite;
}
.omnis-orb::before {
  content: ""; position: absolute; inset: -22px; border-radius: 50%; border: 1.5px solid var(--omnis-a);
  border-left-color: transparent; border-right-color: transparent; transform: rotate(-24deg); opacity: .8;
}
@keyframes orbspin { to { filter: hue-rotate(12deg); } }
.omnis-hero h2 { font-size: 32px; margin: 0 0 6px; letter-spacing: -.035em; color: var(--ink); }
.omnis-hero h2 span {
  background: linear-gradient(90deg, var(--omnis-a), var(--omnis-b) 50%, var(--omnis-c));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.omnis-hero p { margin: 0; color: var(--ink-2); font-size: 15px; }
.omnis-terms { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.omnis-term {
  padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface);
  min-width: 150px; text-align: left; box-shadow: var(--shadow-sm);
}
.omnis-term b { display: block; font-family: var(--font-display); font-size: 20px; letter-spacing: -.03em; line-height: 1; }
.omnis-term small { color: var(--muted); font-size: 11.5px; }
.omnis-term.plus { border-color: var(--omnis-c); background: linear-gradient(150deg, var(--surface), var(--accent-soft)); }
.omnis-hero .fine { margin-top: 12px; }
.omnis-hero .fine b { color: var(--accent-2); }

/* ============================================================
   LUNAR: chat on the left, the brain on the right
   ============================================================ */
.lunar-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 320px; }
.lunar-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.lunar-side {
  border-left: 1px solid var(--line); background: var(--bg-2); min-height: 0; display: flex; flex-direction: column;
  padding: 12px;
}
.lunar-tabs { margin-bottom: 8px; }
.lunar-stats { color: var(--muted); font-size: 11px; padding: 0 4px 8px; }
.lunar-pane { flex: 1; min-height: 0; overflow: auto; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); padding: 8px; }
.lunar-pane .none { color: var(--muted); font-size: 12.5px; padding: 8px; }
.ll { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 6px; align-items: baseline; font-family: var(--font-mono); font-size: 11.5px; padding: 3px 6px; border-radius: var(--r-xs); }
.ll:nth-child(odd) { background: var(--surface-2); }
.ll span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll span:last-of-type { color: var(--accent-2); }
.ll i { color: var(--muted); font-style: normal; }
.ll b { color: var(--muted); font-weight: 600; font-size: 10.5px; }
#lunar-canvas { width: 100%; height: auto; aspect-ratio: 1; display: block; border-radius: var(--r-sm); background: var(--surface-2); }
.lunar-raw { margin: 0; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; white-space: pre; color: var(--ink-2); }
#lunar-side-toggle { display: none; }
@media (max-width: 1000px) {
  .lunar-wrap { grid-template-columns: 1fr; }
  .lunar-side { display: none; border-left: 0; border-top: 1px solid var(--line); max-height: 46vh; }
  .lunar-side.open { display: flex; }
  #lunar-side-toggle { display: inline; }
}

/* ============================================================
   WORKSPACE
   ============================================================ */
.ws { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px 1fr; }
.ws-list { border-right: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; min-height: 0; padding: 14px 12px; gap: 10px; }
.ws-top { display: flex; gap: 6px; align-items: center; }
.ws-top .btn { flex: 1; }
.ws-scope { margin: 0; }
.ws-scope .chip.locked { opacity: .5; }
.ws-files { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: start; }
.ws-files .none { color: var(--muted); font-size: 12.5px; padding: 8px 10px; }
.wsf {
  display: flex; align-items: center; gap: 9px; width: 100%; font: inherit; font-size: 13px; padding: 7px 9px;
  border-radius: var(--r-xs); border: 0; background: transparent; color: var(--ink-2); cursor: pointer; text-align: left; min-width: 0;
  transition: background var(--fast), color var(--fast);
}
.wsf:hover { background: var(--surface-2); color: var(--ink); }
.wsf.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.wsf .ft { width: 30px; height: 26px; border-radius: var(--r-xs); background: var(--surface-2); display: grid; place-items: center; font-family: var(--font-mono); font-size: 9px; color: var(--muted); flex: none; text-transform: uppercase; }
.wsf .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsf small { font-family: var(--font-mono); font-size: 10px; color: var(--muted); flex: none; }
.wsf-x {
  flex: none; min-width: 22px; height: 22px; padding: 0 5px; border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--muted); font: inherit; font-size: 12px; line-height: 1; white-space: nowrap; cursor: pointer;
  opacity: 0; transition: opacity var(--fast), color var(--fast), background var(--fast);
}
.wsf:hover .wsf-x, .wsf:focus-within .wsf-x, .wsf-x.armed { opacity: 1; }
.wsf-x:hover, .wsf-x.armed { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.wsf-x.armed { font-size: 11px; font-weight: 600; }
@media (hover: none) { .wsf-x { opacity: 1; } }
.ws-meter { flex: none; padding-top: 8px; border-top: 1px solid var(--line); }
.ws-meter .mb-fill.hot { background: linear-gradient(90deg, var(--accent-2), var(--danger)); }
.ws-editor { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 18px 22px; }
.ws-empty { margin: auto; text-align: center; color: var(--muted); max-width: 460px; }
.ws-empty h2 { color: var(--ink); font-size: 28px; margin: 6px 0 8px; letter-spacing: -.03em; }
.ws-empty p { margin: 0; font-size: 14.5px; }
.ws-doc { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 10px; }
.ws-doc-top { display: flex; align-items: center; gap: 10px; }
.ws-name { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; max-width: 420px; }
.ws-text {
  flex: 1; min-height: 240px; resize: none; font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
  tab-size: 2; white-space: pre; overflow: auto;
}
.ws-doc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .ws { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ws-list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 40vh; }
  .ws-editor { padding: 14px; }
}

/* ============================================================
   the pill. one rounded container: text on top, the controls along
   the bottom edge. the <form> is display:contents so its children sit
   in this grid without moving a single node app.js looks up.
   ============================================================ */
.dock-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "text text text text" "attach ctl mic send";
  align-items: center; gap: 2px 6px;
  padding: 8px 8px 8px 10px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 26px;
  box-shadow: var(--shadow);
  transition: border-color var(--fast), box-shadow var(--med);
}
.dock-main:focus-within { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 4px rgba(var(--glow), .14); }
.dock-main > .composer { display: contents; }
.dock-main #chat-input { grid-area: text; padding: 10px 8px 6px; max-height: 220px; }
.dock-main #btn-attach { grid-area: attach; }
.dock-main .ctlbar { grid-area: ctl; margin: 0; padding: 0; min-width: 0; }
.dock-main #btn-mic { grid-area: mic; }
.dock-main #chat-send { grid-area: send; }

/* ============================================================
   empty chat = the hero. everything centred, a soft glow behind the
   pill, the serif mark above it. pure css off :has(), so app.js never
   has to know about it. falls back to the normal docked layout.
   ============================================================ */
.hero-mark {
  display: none; font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(30px, 4vw, 44px); letter-spacing: -.01em; line-height: 1.1;
  color: var(--ink); text-align: center; margin: 0 auto 18px; max-width: 760px;
  /* huge, soft, vibrant. three layers so it reads as light, not a drop shadow. */
  text-shadow:
    0 0 24px rgba(var(--glow), .95),
    0 0 70px rgba(var(--glow), .60),
    0 0 160px rgba(var(--hero-deep), .45);
  animation: rise .7s var(--ease-out);
}
#view-chat:has(#chat-empty) { justify-content: center; }
#view-chat:has(#chat-empty) .chatlog { flex: 0 0 auto; overflow: visible; padding: 0 24px 6px; }
#view-chat:has(#chat-empty) #chat-empty { margin: 0 auto; }

#view-chat:has(#chat-empty) #chat-empty:not(.omnis-hero):not(.model-hero) img { width: 56px; height: 56px; margin-bottom: 4px; }
#view-chat:has(#chat-empty) .hero-mark { display: block; }
#view-chat:has(#chat-empty) .dock { position: relative; z-index: 0; background: none; padding-top: 0; }
#view-chat:has(#chat-empty) .dock > * { max-width: 680px; }
/* the glow. rgba(var(--glow)) so it is amber on solar and blue on lunar with no extra rules. */
#view-chat:has(#chat-empty) .dock::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  width: min(980px, 140vw); height: 560px; border-radius: 50%;
  transform: translate(-50%, -54%);
  background:
    radial-gradient(closest-side, rgba(var(--glow), .30), rgba(var(--glow), .12) 42%, transparent 74%),
    radial-gradient(closest-side, rgba(var(--hero-deep), .16), transparent 70%);
}

/* ============================================================
   the effort rail is a fixture of the main panel now. right edge,
   vertically centred. shown only where there is something to send.
   ============================================================ */
.main > .effort { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 6; display: none; }
.main[data-view="chat"] > .effort,
.main[data-view="ray"] > .effort,
.main[data-view="humanizer"] > .effort { display: flex; }
/* keep the reading column and the humanizer cards clear of it */
.main[data-view="chat"] .chatlog, #ray-log { padding-left: max(84px, calc((100% - var(--measure)) / 2)); padding-right: max(84px, calc((100% - var(--measure)) / 2)); }
.main[data-view="humanizer"] .scroller { padding-right: 84px; }
.main[data-view="ray"] .dock > *, .main[data-view="chat"] .dock > * { max-width: min(var(--measure), calc(100% - 120px)); }

/* ============================================================
   the partition. a line between the sidebar and the main panel that
   is also the handle: drag to resize, double click to hide.
   ============================================================ */
.app { position: relative; }
.split {
  position: absolute; top: 0; bottom: 0; left: var(--side-w); width: 10px; margin-left: -5px;
  cursor: col-resize; z-index: 25; background: transparent; color: var(--muted);
}
.split::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: var(--line); transition: background var(--fast), width var(--fast), left var(--fast); }
.split:hover::before, .split.dragging::before { background: var(--accent); width: 3px; left: 3.5px; }
body.side-collapsed .split { left: 0; margin-left: 0; }
body.side-collapsed .split::before { left: 0; }
.app.resizing, .app.resizing * { transition: none !important; user-select: none !important; }

@media (max-width: 900px) {
  .split { display: none; }
  .main > .effort { right: 6px; width: 34px; }
  .main > .effort .effort-lab { display: none; }
  .main[data-view="chat"] .chatlog, #ray-log { padding-left: 16px; padding-right: 48px; }
  .main[data-view="humanizer"] .scroller { padding-right: 52px; }
  .main[data-view="ray"] .dock > *, .main[data-view="chat"] .dock > * { max-width: calc(100% - 44px); margin-left: 0; }
  #view-chat:has(#chat-empty) .dock::before { height: 440px; }
  .hero-mark { font-size: 24px; margin-bottom: 12px; }
  /* the hero rule above out-specifies the reservation, so restate it here.
     otherwise the pill runs under the rail on phones. */
  #view-chat:has(#chat-empty) .dock > * { max-width: calc(100% - 44px); margin-left: 0; }
  /* the level name is wider than the 34px rail. the lit dots carry it on phones. */
  .main > .effort .effort-name { display: none; }
}

/* ============================================================
   the thought chain. phases of the request, not the model's private
   reasoning (the api never sends that). step -> step -> step, lit as
   they pass, folded into a one-line summary the moment the answer lands.
   ============================================================ */
.chain { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; padding: 2px 0 4px; }
.cn {
  --cn-dot-size: 9px;
  --cn-dot-radius: 4.5px;
  position: relative; display: grid; grid-template-columns: var(--cn-dot-size) minmax(0, 1fr);
  align-items: start; gap: 6px 12px; padding: 4px 0; min-width: 0;
  color: var(--muted); font-size: 13px; line-height: 1.5; min-height: 28px;
}
.cn > b { grid-column: 2; grid-row: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: inherit; }
.cn > .cn-dot { grid-column: 1; grid-row: 1; margin-top: calc(.75em - var(--cn-dot-radius)); }
.cn.warn .cn-dot { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
.cn.warn > b { color: var(--danger); }
.cn-dot {
  position: relative; z-index: 1;
  width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--line-2);
  box-shadow: 0 0 0 3px var(--surface-2); transition: background var(--fast), box-shadow var(--med);
}
.cn::after {
  content: ""; position: absolute; left: calc(var(--cn-dot-radius) - .75px);
  top: calc(4px + .75em + var(--cn-dot-radius)); bottom: 0; width: 1.5px; z-index: 0;
  background: var(--line-2); transition: background var(--med);
}
.cn + .cn::before {
  content: ""; position: absolute; left: calc(var(--cn-dot-radius) - .75px);
  top: 0; height: calc(4px + .75em - var(--cn-dot-radius)); width: 1.5px; z-index: 0;
  background: var(--line-2); transition: background var(--med);
}
/* no tail on the step that is still running, or on the very last one */
.cn.now::after, .cn:last-child::after, .cn:has(+ .cn-meta)::after { display: none; }
.cn b { font-weight: 500; }
.cn.on { color: var(--ink-2); }
.cn.on .cn-dot { background: var(--accent-2); box-shadow: 0 0 0 3px rgba(var(--glow), .22); }
.cn.on::after, .cn.on + .cn::before { background: var(--accent-2); }
.cn.now { color: var(--ink); }
.cn.now .cn-dot { background: var(--accent); animation: cnpulse 1s ease-in-out infinite; }
.cn.now b { font-weight: 600; }
@keyframes cnpulse { 50% { box-shadow: 0 0 0 6px rgba(var(--glow), .10); } }
.cn-meta { font-size: 10.5px; color: var(--muted); margin-top: 6px; padding-left: 21px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cn-clock { white-space: nowrap; }
.cn-stop { font: inherit; font-size: 10.5px; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: var(--r-full); padding: 3px 9px; min-height: 26px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.cn-stop:hover { color: var(--danger); border-color: var(--danger); }
.cn-stop:disabled { cursor: default; opacity: .7; }
/* supernova: the passes repeat and it looks like it is grinding */
.chain.nova .cn.on .cn-dot { background: var(--nova-b); box-shadow: 0 0 0 3px rgba(56, 189, 248, .18); }
.chain.nova .cn.on::after, .chain.nova .cn.on + .cn::before { background: var(--nova-a); }
.chain.nova .cn.now .cn-dot { background: var(--nova-a); box-shadow: 0 0 10px var(--nova-b); }
.chain.nova .cn.pass b { font-family: var(--font-mono); font-size: 12px; }

/* what a step produced, shown under it. real text from a real call. */
.cn-out {
  font-size: 12px; line-height: 1.45; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere;
  grid-column: 2; grid-row: 2; min-width: 0; max-width: 100%; margin: 0 0 6px;
  padding: 8px 10px; max-height: 132px; overflow: auto; box-sizing: border-box;
  background: var(--surface-2); border-radius: var(--r-xs); border-left: 2px solid var(--line-2);
}
.cn.on .cn-out { border-left-color: rgba(var(--glow), .55); }
.chain.nova .cn.on .cn-out { border-left-color: var(--nova-b); }
.thought .cn-out { max-height: 90px; font-size: 11.5px; }

/* "show it": the build rendered under the chain, kept under the answer after the fold */
.inline-preview { margin-top: 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.inline-preview .bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 10.5px; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.inline-preview .pv-name { color: var(--ink-2); font-weight: 600; }
.inline-preview .pv-ver { color: var(--accent-2); font-weight: 600; }
.inline-preview iframe { display: block; width: 100%; height: 320px; border: 0; background: #fff; }
@media (max-width: 700px) { .inline-preview iframe { height: 240px; } }

/* folded: one line above the answer, click to see the steps again */
.thought { margin: 0 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.thought > summary {
  list-style: none; cursor: pointer; font-size: 12px; color: var(--muted); padding: 6px 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; user-select: none;
}
.thought > summary > * { min-width: 0; overflow-wrap: anywhere; }
.thought > summary::-webkit-details-marker { display: none; }
.thought > summary::before { content: "\25B8"; font-size: 10px; transition: transform var(--fast); }
.thought[open] > summary::before { transform: rotate(90deg); }
.thought > summary b { color: var(--ink-2); font-weight: 600; }
.thought .chain { padding: 2px 10px 8px; }
.thought .cn { font-size: 12px; min-height: 20px; }
.ans { display: block; }
.ans.typing::after {
  content: ""; display: inline-block; width: 8px; height: 16px; margin-left: 3px; vertical-align: -3px;
  border-radius: 2px; background: var(--accent-2); animation: blink 1s steps(2) infinite;
}

/* ============================================================
   wall designs. a faint texture on the main panel so it is not flat.
   solar: paper grain + a dot grid. lunar: grain + a star field.
   pointer-events none, under everything, on top of the user's bg-layer.
   ============================================================ */
.main::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .45;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    radial-gradient(rgba(60, 44, 10, .10) 1px, transparent 1.2px);
  background-size: 180px 180px, 22px 22px;
}
html[data-theme="lunar"] .main::before {
  opacity: .5;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    radial-gradient(rgba(255, 255, 255, .16) .8px, transparent 1.1px),
    radial-gradient(rgba(166, 192, 234, .14) 1px, transparent 1.4px);
  background-size: 180px 180px, 38px 38px, 61px 61px;
  background-position: 0 0, 0 0, 19px 27px;
}
.views { position: relative; z-index: 1; }

/* ============================================================
   sidebar: the omnis tab gets the gradient dot, what's new gets the unread dot
   ============================================================ */
.omnis-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--omnis-a), var(--omnis-b) 55%, var(--omnis-c));
  box-shadow: 0 0 6px rgba(255, 138, 31, .55);
}
.nav-omnis.active { background: linear-gradient(90deg, rgba(255, 215, 102, .18), transparent); color: var(--ink); }
.nav-updates { position: relative; }
.nav-updates .wn-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.nav-updates.unread .wn-dot { background: var(--accent-2); box-shadow: 0 0 0 3px rgba(var(--glow), .25); animation: pulse 1.6s infinite; }

/* ============================================================
   workspace preview: editor left, sandboxed frame right when open
   ============================================================ */
.ws-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ws-split.has-preview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ws-preview { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.ws-preview-bar { display: flex; align-items: center; gap: 12px; padding: 6px 10px; font-size: 10.5px; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ws-frame { flex: 1; min-height: 240px; width: 100%; border: 0; background: #fff; }
@media (max-width: 1000px) {
  .ws-split.has-preview { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(160px, 1fr) minmax(200px, 1fr); }
}

/* ============================================================
   what's new + the update log
   ============================================================ */
.wn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.upd-hero {
  display: flex; align-items: center; gap: 26px; padding: 30px 32px; margin-bottom: 18px;
  border: 1px solid var(--line-2); border-radius: var(--r-xl); background: linear-gradient(150deg, var(--surface), var(--accent-soft) 160%);
  box-shadow: var(--shadow);
}
.upd-hero h2 { font-size: 34px; margin: 6px 0 8px; letter-spacing: -.035em; }
.upd-hero p { margin: 0; color: var(--ink-2); max-width: 560px; }
.omnis-text { background: linear-gradient(90deg, var(--omnis-a), var(--omnis-b) 50%, var(--omnis-c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.omnis-orb.small { width: 76px; height: 76px; margin: 0; flex: none; }
.upd-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.upd-item {
  display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm);
}
.upd-item .when { font-family: var(--font-mono); font-size: 11px; color: var(--muted); padding-top: 3px; }
.upd-item h3 { font-family: var(--font-display); font-size: 16px; margin: 0 0 4px; letter-spacing: -.02em; }
.upd-item p { margin: 0; font-size: 14px; color: var(--ink-2); }
.upd-item.big { border-color: var(--accent); background: linear-gradient(150deg, var(--surface), var(--accent-soft)); }
.upd-item .tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border-radius: var(--r-full); background: var(--surface-2); color: var(--muted); margin-left: 6px; vertical-align: middle; }
@media (max-width: 700px) {
  .upd-hero { flex-direction: column; align-items: flex-start; padding: 22px; }
  .upd-item { grid-template-columns: 1fr; gap: 4px; }
  .whatsnew span + * { display: none; }
  .dock-row { gap: 8px; }
  .effort { width: 44px; }
  .effort-lab { display: none; }
}

/* ============================================================
   boot splash. the only thing on screen until app.js decides which
   view to show, so it must not depend on anything js does.
   ============================================================ */
.boot {
  position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center;
  gap: 18px; background: var(--bg);
}
.boot img { width: 72px; height: 72px; object-fit: contain; animation: bootpulse 1.6s ease-in-out infinite; }
@keyframes bootpulse { 50% { opacity: .55; transform: scale(.94); } }
.boot-bar { display: block; width: 120px; height: 3px; border-radius: var(--r-full); background: var(--line); overflow: hidden; }
.boot-bar i { display: block; width: 40%; height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--accent), var(--accent-2)); animation: bootslide 1.1s var(--ease) infinite; }
@keyframes bootslide { from { transform: translateX(-110%); } to { transform: translateX(320%); } }

/* ============================================================
   sidebar toggle. these live at the end on purpose: .icobtn earlier in
   the file kept overriding the display rules and showing the buttons
   on desktop where the drawer CSS did not apply. order matters here.

   ONE control on desktop: the burger in the header shows/hides the sidebar.
   The sidebar's own X is a mobile thing, where "close the drawer" is the
   obvious meaning. Two buttons for one job on desktop just confused people.
   ============================================================ */
#side-open { display: flex; }
#side-close { display: none !important; }
@media (max-width: 900px) { #side-open, #side-close { display: grid !important; } }

/* desktop: the buttons collapse the sidebar instead of opening a drawer */
body.side-collapsed .app { grid-template-columns: 0 1fr; }
body.side-collapsed .side { transform: translateX(-102%); opacity: 0; pointer-events: none; }
.side { transition: transform var(--med) var(--ease), opacity .2s; }
.app { transition: grid-template-columns var(--med) var(--ease); }

@media (max-width: 900px) {
  body.side-collapsed .app { grid-template-columns: 1fr; }
  body.side-collapsed .side { transform: translateX(-102%); opacity: 1; }
  body.side-open .side { transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
}

/* ============================================================
   live answers. the text streams in, so the cursor sits on the answer node.
   ============================================================ */
.ans.typing::after {
  content: ""; display: inline-block; width: 8px; height: 16px; margin-left: 3px; vertical-align: -3px;
  border-radius: 2px; background: var(--accent-2); animation: blink 1s steps(2) infinite;
}

/* ============================================================
   the Omnis room. same chat view, its own paint: no model picker (there is
   only one), a warm glow from the top, the orb instead of the sun mark.
   body.omnis-mode is set by app.js while the Omnis tab is the room.
   ============================================================ */
body.omnis-mode #model-picker { display: none; }
body.omnis-mode #view-chat { position: relative; }
body.omnis-mode #view-chat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(70% 45% at 50% 0%, color-mix(in srgb, var(--omnis-b) 26%, transparent), transparent 70%);
}
body.omnis-mode #view-chat > * { position: relative; z-index: 1; }
body.omnis-mode .main[data-view="chat"] .head-title h1 {
  background: linear-gradient(90deg, var(--omnis-a), var(--omnis-b) 45%, var(--omnis-c));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.omnis-mode .dock-main {
  border-color: transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, var(--omnis-a), var(--omnis-b), var(--omnis-c)) border-box;
}
body.omnis-mode .dock-main:focus-within { box-shadow: var(--shadow), 0 0 0 4px color-mix(in srgb, var(--omnis-c) 18%, transparent); }
body.omnis-mode #view-chat .bubble.ai::before {
  background: radial-gradient(circle at 35% 30%, #fff 0, var(--omnis-b) 22%, var(--omnis-c) 58%, #7a3a00 100%);
  border-radius: 50%; box-shadow: 0 0 12px color-mix(in srgb, var(--omnis-c) 45%, transparent);
}
body.omnis-mode #view-chat .bubble.user { background: linear-gradient(120deg, color-mix(in srgb, var(--omnis-b) 30%, var(--bubble-user)), var(--bubble-user)); }
body.omnis-mode #view-chat .send { background: linear-gradient(120deg, var(--omnis-b), var(--omnis-c)); color: var(--omnis-ink); }
body.omnis-mode #view-chat .hero-mark { display: none !important; }
body.omnis-mode .nav-omnis { background: linear-gradient(120deg, color-mix(in srgb, var(--omnis-b) 22%, transparent), color-mix(in srgb, var(--omnis-c) 12%, transparent)); }

/* the picker locks while a chat is open: the chat keeps the model it started with.
   pointer-events off so the tap reaches the picker box, which explains why. */
.pick-btn.locked::after { content: "locked"; font-size: 10px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.pick-menu .tier.off { opacity: .4; pointer-events: none; }
.pick-note { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.pick-note span { flex: 1; min-width: 0; }
.pick-note .linkbtn { flex: none; font-size: 11.5px; }

/* ============================================================
   the model marks. every model gets its own emblem in the empty chat, the way
   Omnis has its orb. the palette is the site's own (accent amber, the hot
   accent-2, ink), only the SHAPE changes: dim is a low soft sun, light a clear
   sun with rays, bright a blazing sun with a turning corona, solstice the sun on
   its horizon with the long ring. drawn in css, no images.
   ============================================================ */
.model-hero { text-align: center; max-width: 520px; margin: auto; animation: rise .7s var(--ease-out); }
.model-hero h2 { font-size: 27px; margin: 0 0 5px; letter-spacing: -.035em; color: var(--ink); }
.model-hero h2 span { color: var(--accent-2); }
.model-hero p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.mark { width: 68px; height: 68px; margin: 0 auto 16px; position: relative; border-radius: 50%; }
.mark-dim {
  background: radial-gradient(circle at 42% 36%, var(--accent-soft) 0, var(--accent) 62%, var(--accent-2) 100%);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 10%, transparent);
  opacity: .92;
}
.mark-light {
  background: radial-gradient(circle at 42% 36%, #fff 0, var(--accent) 56%, var(--accent-2) 100%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 26px color-mix(in srgb, var(--accent) 35%, transparent);
}
.mark-light::before {
  content: ""; position: absolute; inset: -18px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent-2) 60%, transparent) 0 5deg, transparent 5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 59%); mask: radial-gradient(circle, transparent 57%, #000 59%);
}
.mark-bright {
  background: radial-gradient(circle at 46% 40%, #fff 0, var(--accent) 38%, var(--accent-2) 74%, var(--ink) 100%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 28%, transparent), 0 0 40px 8px color-mix(in srgb, var(--accent-2) 40%, transparent);
}
.mark-bright::after {
  content: ""; position: absolute; inset: -26px; border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 38%, color-mix(in srgb, var(--accent) 50%, transparent) 50%, transparent 62%);
  filter: blur(6px); animation: spin 14s linear infinite;
}
.mark-solstice {
  background: radial-gradient(circle at 50% 62%, #fff 0, var(--accent) 46%, var(--accent-2) 100%);
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 45%, transparent);
}
.mark-solstice::before {
  content: ""; position: absolute; inset: -16px; border-radius: 50%;
  border: 1.5px solid var(--ink-2); opacity: .45; transform: rotate(-14deg) scaleY(.55);
}
.mark-solstice::after {
  content: ""; position: absolute; left: -34px; right: -34px; top: 54%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ink-2), transparent); opacity: .5;
}