/*
 * Home page chat (index.html + assets/chat.js).
 *
 * Until the first message the home page is exactly the one-box hero. The first
 * message adds html.is-chat: the hero copy leaves, the box becomes the composer
 * at the bottom, the thread fills the space between it and the nav. The draft
 * preview opens as a column on the right (a full-screen sheet under 880px).
 * Tokens are the page's own (:root in index.html).
 */

/* ── Chat mode: layout ───────────────── */
.thread, .chat-bar, .composer-note { display: none; }
html.is-chat { height: 100%; }
html.is-chat body { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
html.is-chat .sf { display: none; }
html.is-chat .start {
  flex: 1; min-height: 0; display: flex; align-items: stretch; padding: 0;
  background: none;
}
html.is-chat .start-in {
  position: relative; flex: 1 1 auto; min-width: 0; max-width: none; height: 100%;
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
}
html.is-chat .start-in > :not(.thread):not(.box):not(.chat-bar):not(.composer-note) { display: none; }
html.is-chat .start-in > * { animation: none; }

.thread {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges; scrollbar-width: thin; scrollbar-color: #d6d6e2 transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
}
html.is-chat .thread { display: block; }
.thread-in { max-width: 760px; margin: 0 auto; padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 26px; }

.chat-bar { flex: none; width: calc(100% - 48px); max-width: 760px; margin: 10px auto -6px; justify-content: flex-end; position: relative; z-index: 2; }
html.is-chat .chat-bar { display: flex; }
.ghost {
  appearance: none; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 550; color: var(--ink-2);
  padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.92);
  transition: color .15s, border-color .15s, background .15s;
}
.ghost:hover { color: var(--ink); border-color: var(--line-2); background: #fafafc; }
.ghost svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

html.is-chat .box { flex: none; width: calc(100% - 48px); max-width: 760px; margin: 6px auto 0; border-radius: 18px; }
html.is-chat .box textarea { min-height: 56px; max-height: 200px; padding: 16px 64px 16px 20px; font-size: 16px; border-radius: 18px; }
html.is-chat .send { right: 10px; bottom: 9px; }
.composer-note { text-align: center; font-size: 12.5px; color: var(--ink-3); padding: 9px 24px 14px; }
html.is-chat .composer-note { display: block; }

/* Stop while Uno answers */
.send .i-stop { display: none; }
.box.is-busy .send .i-up { display: none; }
.box.is-busy .send .i-stop { display: block; fill: currentColor; stroke: none; }
.box.is-busy .send { background: var(--ink); }

/* ── The hero → chat morph (View Transitions) ───────── */
.box { view-transition-name: uno-composer; }
.sn { view-transition-name: uno-nav; }
#ask-h { view-transition-name: uno-title; }
::view-transition-group(uno-composer) { animation-duration: .62s; animation-timing-function: var(--ease); }
::view-transition-old(uno-composer), ::view-transition-new(uno-composer) { height: 100%; object-fit: fill; }
::view-transition-old(uno-title) { animation: vt-title-out .42s var(--ease) both; }
::view-transition-new(uno-title) { animation: vt-title-in .5s var(--ease) both; }
::view-transition-old(root) { animation: vt-fade-out .26s ease both; }
::view-transition-new(root) { animation: vt-fade-in .44s .12s var(--ease) both; }
@keyframes vt-title-out { to { opacity: 0; transform: translateY(-28px) scale(.97); filter: blur(6px); } }
@keyframes vt-title-in { from { opacity: 0; transform: translateY(-18px); filter: blur(6px); } }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
/* No View Transitions (Firefox): a soft fade-up instead */
html.is-chat.no-vt .thread, html.is-chat.no-vt .box { animation: chat-in .5s var(--ease) both; }
@keyframes chat-in { from { opacity: 0; translate: 0 10px; } }

/* ── Messages ───────────────── */
.msg { display: flex; gap: 14px; min-width: 0; }
.msg-user { justify-content: flex-end; }
.bubble {
  max-width: min(78%, 560px); padding: 11px 16px; border-radius: 18px 18px 6px 18px;
  background: #f2f2f6; color: var(--ink); font-size: 16px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.msg-mark {
  flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 8px;
  background: var(--violet); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  box-shadow: 0 1px 2px rgba(24,24,27,.2), inset 0 1px rgba(255,255,255,.35);
}
.msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding-top: 2px; }
.md { font-size: 16px; line-height: 1.62; color: var(--ink); overflow-wrap: anywhere; }
.md p + p, .md p + ul, .md p + ol, .md ul + p, .md ol + p { margin-top: 10px; }
.md ul, .md ol { padding-left: 22px; }
.md li + li { margin-top: 4px; }
.md li::marker { color: var(--ink-3); }
.md strong { font-weight: 650; }
.md a { color: var(--violet-ink); text-decoration: underline; text-decoration-color: var(--vline); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.md a:hover { text-decoration-color: var(--violet); }
.md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: #f2f2f6; padding: 1px 6px; border-radius: 6px; }
.md .caret { display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: -2px; border-radius: 2px; background: var(--violet); }
@media (prefers-reduced-motion: no-preference) { .md .caret { animation: caret 1s steps(1) infinite; } }
@keyframes caret { 50% { opacity: 0; } }

.typing { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-3); height: 26px; }
.typing-dots { display: inline-flex; gap: 4px; }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .typing-dots i { animation: dot 1.1s var(--ease) infinite; }
  .typing-dots i:nth-child(2) { animation-delay: .15s; }
  .typing-dots i:nth-child(3) { animation-delay: .3s; }
}
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

@media (prefers-reduced-motion: no-preference) {
  .msg.is-new { animation: msg-in .42s var(--ease) both; }
  .opts.is-new .opt { animation: msg-in .4s var(--ease) both; }
  .opts.is-new .opt:nth-child(2) { animation-delay: .05s; }
  .opts.is-new .opt:nth-child(3) { animation-delay: .1s; }
  .opts.is-new .opt:nth-child(4) { animation-delay: .15s; }
  .opts.is-new .opt:nth-child(n+5) { animation-delay: .2s; }
  .art.is-new { animation: msg-in .5s var(--ease) both; }
}
@keyframes msg-in { from { opacity: 0; translate: 0 8px; } }

/* ── Icon squares (tiles, answer cards) ───────────────── */
.ico {
  --c: var(--violet); --bgc: var(--tint);
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: var(--c); background: var(--bgc);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 14%, transparent);
}
.ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-telegram, .ico-bot, .ico-chat, .ico-users { --c: #1f8fcf; --bgc: #e8f4fc; }
.ico-agent, .ico-clock, .ico-calendar { --c: #d0620f; --bgc: #fdf1e6; }
.ico-team, .ico-money, .ico-store, .ico-apps { --c: #0f9372; --bgc: #e6f6f0; }
.ico-code { --c: #18181b; --bgc: #f0f0f3; }
.ico-server, .ico-db { --c: #6c45d6; --bgc: #f1ecfd; }
.ico-folder { --c: #c9821b; --bgc: #fdf3e2; }
.ico-mail { --c: #d63b55; --bgc: #fdecef; }
.ico-lock { --c: #3f3f46; --bgc: #f0f0f3; }

/* ── "What can Uno do?" tiles ───────────────── */
.caps { display: flex; flex-direction: column; gap: 12px; }
.caps-h { font-size: 12.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.caps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cap {
  appearance: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0;
  padding: 14px 14px 15px; border-radius: 14px; border: 1px solid var(--line); background: #fff;
  box-shadow: 0 1px 2px rgba(24,24,27,.04);
  transition: border-color .18s, box-shadow .18s, transform .18s var(--ease);
}
.cap:hover { border-color: #c9c9f3; box-shadow: 0 1px 2px rgba(24,24,27,.05), 0 14px 28px -18px rgba(58,58,184,.45); transform: translateY(-2px); }
.cap:active { transform: translateY(0); }
.cap-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-bottom: 4px; }
.cap-badge { font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: #f4f4f7; border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.cap-badge.is-free { color: #17693c; background: #eaf7f0; }
.cap-t { font-size: 15px; font-weight: 650; letter-spacing: -.005em; line-height: 1.3; }
.cap-d { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }

/* ── "What should your assistant do?" (fishcode assistantspec): the same tiles,
   multi-select; then one question at a time; then the "Your assistant" card. ── */
.ico-image, .ico-edit { --c: #c2417a; --bgc: #fcecf3; }
.ico-search, .ico-spark, .ico-globe, .ico-form { --c: #3a3ab8; --bgc: #eeeefc; }
.ico-bell { --c: #b7791f; --bgc: #fdf4e1; }
.ico-check { --c: #17693c; --bgc: #eaf7f0; }
.ico-term { --c: #18181b; --bgc: #f0f0f3; }
.aq { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
.aq-grid { width: 100%; }
.aq-c[aria-pressed="true"] { border-color: var(--violet); background: #f7f7ff; box-shadow: 0 0 0 1px var(--violet) inset, 0 10px 22px -18px rgba(58,58,184,.6); }
.aq-c.is-max { opacity: .7; }
/* Phones: the nine quiz tiles in two compact columns (icon, tick, title). */
@media (max-width: 520px) {
  .aq-quiz .caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .aq-quiz .cap { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 11px 11px 12px; }
  .aq-quiz .cap-top { display: flex; }
  .aq-quiz .cap-t { font-size: 14px; line-height: 1.3; }
  .aq-quiz .cap-d { display: none; }
  .aq-quiz .ico { width: 30px; height: 30px; border-radius: 9px; }
  .aq-prog { width: 100%; margin-left: 0; }
}
.aq-tick { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); display: inline-grid; place-items: center; transition: background .15s, border-color .15s; }
.aq-tick svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.aq-c[aria-pressed="true"] .aq-tick { background: var(--violet); border-color: var(--violet); }
.aq-c[aria-pressed="true"] .aq-tick svg { opacity: 1; }
.choice.aq-c > svg:last-child { opacity: .55; }
.choice.aq-c[aria-pressed="true"] > svg:last-child { stroke: var(--violet); opacity: 1; }
.cap-badge.is-soon, .aq-badge.is-soon { color: #8a5a0b; background: #fdf3e2; }
.cap-badge.is-rec, .aq-badge.is-rec { color: var(--violet-ink); background: var(--tint); }
.aq-badge { display: inline-block; margin-left: 8px; vertical-align: 1px; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 7px; color: var(--ink-2); background: #f4f4f7; }
.aq-own { display: flex; gap: 8px; width: 100%; }
.aq-own[hidden] { display: none; }
.aq-own input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--ink);
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.aq-own input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px var(--tint); }
.aq-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: 100%; margin-top: 2px; }
.aq-next:disabled { opacity: .5; cursor: default; box-shadow: none; }
.aq-next[hidden] { display: none; }
.aq-decide svg { color: var(--violet); }
.aq-prog { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.acard-brief { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.acard-act { margin-top: 14px; padding-top: 0; border-top: 0; }
.acard-rows { margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
.acard-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.acard-row .ico { width: 30px; height: 30px; border-radius: 9px; }
.acard-row .ico svg { width: 17px; height: 17px; }
@media (max-width: 720px) { .acard-rows { grid-template-columns: 1fr; } }
.acard-t { min-width: 0; }
.acard-t dt { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.acard-t dd { margin: 1px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.acard-t dd small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.acard-edit { appearance: none; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--violet-ink); padding: 4px 2px; cursor: pointer; border-radius: 6px; }
.acard-edit:hover { text-decoration: underline; text-underline-offset: 3px; }
.acard-note { margin-top: 10px; font-size: 13px; color: var(--ink-3); }

/* ── Answer cards (options with a hint) ───────────────── */
.choices-box { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.choice {
  appearance: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink);
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 11px 12px 11px 11px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.choice:hover { border-color: #c4c4f2; background: #fbfbff; box-shadow: 0 10px 22px -16px rgba(58,58,184,.5); }
.choice:active { transform: translateY(1px); }
.choice:disabled { opacity: .5; cursor: default; }
.choice-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.choice-t b { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.choice-t small { font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.choice > svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s, stroke .15s; }
.choice:hover > svg { stroke: var(--violet); transform: translateX(2px); }
.choice-primary { border-color: var(--violet); background: var(--violet); color: #fff; }
.choice-primary:hover { background: var(--violet-deep); border-color: var(--violet-deep); }
.choice-primary .choice-t small { color: rgba(255,255,255,.78); }
.choice-primary > svg, .choice-primary:hover > svg { stroke: #fff; }
.choice-primary .ico { --c: #fff; --bgc: rgba(255,255,255,.16); }

.own-words {
  appearance: none; font: inherit; cursor: pointer; background: none; border: 0;
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 2px; text-align: left;
  font-size: 13.5px; color: var(--ink-3); border-radius: 6px; transition: color .15s;
}
.own-words:hover { color: var(--violet-ink); }
.own-words svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* "I have my own agent": on a server first, on your laptop second (chat.js agentEl). */
/* "Your AI agent: where should it work?" — two equal ways side by side. */
.agent-ways { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.agent-way { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.agent-way-t { font-weight: 650; font-size: 15px; color: var(--ink); }
.agent-way .md { flex: 1; font-size: 14.5px; }
.agent-way .btn { align-self: flex-start; padding: 9px 14px; }
.agent-laptop { margin-top: 16px; }
@media (max-width: 640px) { .agent-ways { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: no-preference) {
  .caps.is-new .cap, .msg.is-new .cap { animation: msg-in .5s var(--ease) both; animation-delay: calc(.08s + var(--i, 0) * .05s); }
  .choices-box.is-new .choice { animation: msg-in .4s var(--ease) both; }
  .choices-box.is-new .choice:nth-child(2) { animation-delay: .05s; }
  .choices-box.is-new .choice:nth-child(3) { animation-delay: .1s; }
  .choices-box.is-new .choice:nth-child(4) { animation-delay: .15s; }
}
@media (max-width: 720px) {
  .caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cap { padding: 12px; gap: 4px; }
  .cap-d { font-size: 12.5px; }
  .choices { grid-template-columns: 1fr; }
}
/* Phones: one column, each tile a row — icon left, title and text right, badge on top-right. */
@media (max-width: 520px) {
  .caps-grid { grid-template-columns: 1fr; gap: 8px; }
  .cap { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: start; padding: 12px 12px 12px 12px; }
  .cap-top { display: contents; }
  .cap-top .ico { grid-column: 1; grid-row: 1 / span 2; }
  .cap-badge { grid-column: 3; grid-row: 1; align-self: start; }
  .cap-t { grid-column: 2; grid-row: 1; font-size: 15px; }
  .cap-d { grid-column: 2 / span 2; grid-row: 2; font-size: 13px; }
}

/* ── Options ───────────────── */
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  appearance: none; font: inherit; cursor: pointer; text-align: left;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 520; line-height: 1.3; color: var(--ink);
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff;
  transition: border-color .15s, background .15s, color .15s, transform .15s, box-shadow .15s;
}
.opt:hover { border-color: #c4c4f2; background: var(--tint); color: var(--violet-ink); }
.opt:active { transform: translateY(1px); }
.opt:disabled { opacity: .5; cursor: default; }
.opt svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.opt-primary { background: var(--violet); border-color: var(--violet); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(24,24,27,.12), 0 8px 18px -10px rgba(91,91,232,.8); }
.opt-primary:hover { background: var(--violet-deep); border-color: var(--violet-deep); color: #fff; }

/* ── Buttons ───────────────── */
.btn {
  appearance: none; font: inherit; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  padding: 10px 16px; border-radius: 10px; border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--violet); color: #fff; box-shadow: 0 1px 2px rgba(24,24,27,.12), 0 8px 18px -10px rgba(91,91,232,.8); }
.btn-primary:hover { background: var(--violet-deep); }
.btn-primary:active { transform: translateY(1px); }
.btn-quiet { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-quiet:hover { border-color: #b9b9c6; background: #fafafc; }
.icon-btn {
  appearance: none; border: 0; cursor: pointer; background: transparent; color: var(--ink-2);
  width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex: none;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: #f0f0f4; color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ── Artifacts: snippet ───────────────── */
.snip { border-radius: 14px; background: #16161b; color: #ececf3; overflow: hidden; box-shadow: 0 1px 2px rgba(24,24,27,.18), 0 16px 32px -24px rgba(24,24,27,.6); }
.snip-h { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.snip-t { font-size: 13.5px; font-weight: 600; color: #f4f4f8; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snip-lang { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: #9d9db0; letter-spacing: .02em; margin-right: auto; }
.snip-btn {
  appearance: none; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 12.5px; font-weight: 600; color: #d4d4e0; padding: 6px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  transition: background .15s, color .15s, border-color .15s;
}
.snip-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.snip-btn:focus-visible { outline-color: #a5a5ff; }
.snip-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.snip-btn.is-done { color: #8fe0a9; border-color: rgba(143,224,169,.35); }
.snip pre { margin: 0; padding: 14px 16px 16px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #3a3a46 transparent; }
.snip code, .code-view code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.65; white-space: pre; tab-size: 2; }
.snip.is-long pre { max-height: 260px; overflow-y: auto; }
.snip ::selection, .code-view ::selection { background: #4b4bd6; color: #fff; }
.tk-c { color: #8a8aa0; font-style: italic; }
.tk-s { color: #a3e3b5; }
.tk-n { color: #f6c48e; }
.tk-k { color: #b7b4ff; }
.tk-f { color: #8fd3ff; }
.tk-v { color: #ffb4c8; }
.tk-t { color: #8fd3ff; }
.tk-a { color: #f6c48e; }
.tk-p { color: #9d9db0; }

/* ── Artifacts: brief card ───────────────── */
.brief {
  border: 1px solid var(--vline); border-radius: 16px; background: #fff; padding: 18px 20px 18px;
  box-shadow: 0 1px 2px rgba(24,24,27,.04), 0 18px 36px -30px rgba(58,58,184,.5);
}
.brief-h { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--violet-ink); letter-spacing: .005em; }
.brief-h svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.brief ul { list-style: none; margin-top: 12px; display: grid; gap: 9px; }
.brief li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.brief li svg { width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--violet); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.brief-act { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.brief-note { font-size: 13px; color: var(--ink-3); }
.brief-act .btn-quiet { padding: 9px 14px; }

/* ── Notices: limit / error / draft link ───────────────── */
.notice { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: #fafafc; display: grid; grid-template-columns: 22px 1fr; gap: 4px 12px; }
.notice > svg { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--ink-2); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.notice-t { font-weight: 650; font-size: 15.5px; color: var(--ink); }
.notice-d { grid-column: 2; font-size: 14.5px; color: var(--ink-2); }
.notice-act { grid-column: 2; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.notice-limit { background: var(--tint); border-color: var(--vline); }
.notice-limit > svg { stroke: var(--violet); }
.notice-error > svg { stroke: #c73a3a; }

.draft-link {
  appearance: none; font: inherit; cursor: pointer; text-align: left; width: 100%;
  display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px;
  border: 1px solid var(--line-2); border-radius: 14px; background: #fff;
  transition: border-color .15s, background .15s;
}
.draft-link:hover { border-color: #c4c4f2; background: #fbfbff; }
.draft-thumb { width: 52px; height: 40px; border-radius: 7px; flex: none; background: linear-gradient(#ececf6 0 9px, #fff 9px); border: 1px solid var(--line); position: relative; overflow: hidden; }
.draft-thumb::after { content: ""; position: absolute; left: 8px; right: 14px; top: 16px; height: 4px; border-radius: 2px; background: #d9d9ef; box-shadow: 0 8px 0 -0px #ececf4, 10px 16px 0 0 #ececf4; }
.draft-meta { display: grid; gap: 1px; min-width: 0; flex: 1; }
.draft-meta b { font-size: 14.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-meta span { font-size: 13px; color: var(--ink-3); }
.draft-link > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }


/* ── "I have a project": picker and the project card ───────────────── */
.up { border: 1px solid var(--line-2); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(24,24,27,.04), 0 18px 36px -30px rgba(58,58,184,.45); }
.up-zone {
  margin: 10px; padding: 26px 18px 22px; border: 1.5px dashed #cfcfe6; border-radius: 12px; background: #fbfbfe;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  transition: border-color .15s, background .15s;
}
html.is-drag .up-zone { border-color: var(--violet); background: var(--tint); }
.up-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fdf4e3; margin-bottom: 8px; }
.up-ic svg { width: 24px; height: 24px; fill: none; stroke: #e39b28; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.up-t { font-weight: 650; font-size: 16px; color: var(--ink); }
.up-d { font-size: 14px; color: var(--ink-3); max-width: 46ch; }
.up-act { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.up-act .btn svg { color: var(--ink-2); }
.up-bar { margin-top: 14px; width: min(240px, 70%); height: 4px; border-radius: 4px; background: var(--tint); position: relative; overflow: hidden; }
.up-bar i { position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: 4px; background: var(--violet); }
@media (prefers-reduced-motion: no-preference) { .up-bar i { animation: bar 1.4s var(--ease) infinite; } }
.up-note { display: flex; align-items: flex-start; gap: 8px; padding: 0 16px 12px; font-size: 13px; color: var(--ink-3); }
/* The link comes first; the folder / .zip zone is the quieter fallback under "or". */
.up-link { padding: 18px 18px 4px; }
.up-lt { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 16px; color: var(--ink); }
.up-lt svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--violet); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.up-lrow { margin-top: 10px; display: flex; gap: 8px; }
.up-lrow input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--ink);
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.up-lrow input::placeholder { color: var(--ink-3); }
.up-lrow input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px var(--tint); }
.up-lrow input[aria-invalid="true"] { border-color: #e2a4a4; }
.up-lrow input:disabled { background: #fafafc; color: var(--ink-2); }
.up-lrow .btn { flex: none; }
.up-lrow .btn:disabled { opacity: .7; cursor: default; }
.up-ld { margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.up-ld.is-err { color: #b42f2f; }
.up-lk { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--violet-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.up-or { display: flex; align-items: center; gap: 12px; margin: 12px 18px 0; font-size: 13px; color: var(--ink-3); }
.up-or::before, .up-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.up-or + .up-zone { padding: 16px 16px 16px; }
.up-or + .up-zone .up-ic { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 4px; }
.up-or + .up-zone .up-ic svg { width: 20px; height: 20px; }
.up-or + .up-zone .up-t { font-size: 15px; font-weight: 600; }
.up-or + .up-zone .up-act { margin-top: 8px; }
.up-d.is-err { color: #b42f2f; }
.proj-ic.is-git { background: var(--tint); }
.proj-ic.is-git svg { stroke: var(--violet); }
.proj-warn { color: #9a5a06; }
.proj .proj-f p.proj-warn svg { stroke: #c27a0e; }
.up-note svg, .proj-f svg { width: 15px; height: 15px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.proj { border: 1px solid var(--vline); border-radius: 16px; background: #fff; padding: 16px 18px; box-shadow: 0 1px 2px rgba(24,24,27,.04), 0 18px 36px -30px rgba(58,58,184,.5); }
.proj-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.proj-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #fdf4e3; flex: none; }
.proj-ic svg { width: 20px; height: 20px; fill: none; stroke: #e39b28; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.proj-n { display: grid; min-width: 0; flex: 1; }
.proj-n b { font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-n span { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.proj-badge { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.proj-badge.is-ok { background: #e7f6ee; color: #17803f; }
.proj-badge.is-warn { background: #fdf2e0; color: #9a5a06; }
.proj-l { list-style: none; margin-top: 14px; display: grid; gap: 10px; }
.proj-l li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15px; line-height: 1.45; }
.proj-l li > svg { width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--violet); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.proj-l b { font-weight: 600; }
.proj-l small { display: block; font-size: 13px; color: var(--ink-3); }
.proj-f { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 5px; font-size: 13.5px; color: var(--ink-2); }
.proj-f p { display: flex; gap: 8px; }
.proj-f p:nth-child(2) svg { stroke: var(--ok); }
.proj-skip { color: var(--ink-3); font-size: 12.5px; padding-left: 23px; }

/* Dragging files over the page */
html.is-drag body::after {
  content: "Drop your project — Uno reads it here, nothing is uploaded";
  position: fixed; inset: 12px; z-index: 100; pointer-events: none;
  display: grid; place-items: center; padding: 24px; text-align: center;
  border: 2px dashed var(--violet); border-radius: 22px; background: rgba(240, 240, 252, .88);
  font-size: 18px; font-weight: 650; color: var(--violet-ink);
}


/* ── Sign in by email code (in the chat) ───────────────── */
.auth { border: 1px solid var(--vline); border-radius: 16px; background: #fff; padding: 18px 20px; box-shadow: 0 1px 2px rgba(24,24,27,.04), 0 18px 36px -30px rgba(58,58,184,.5); max-width: 520px; }
.auth-h { font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.auth-d { margin-top: 4px; font-size: 14.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.auth-d b { font-weight: 600; color: var(--ink); }
.auth-row { margin-top: 14px; display: flex; gap: 8px; }
.auth-row input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--ink);
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.auth-row input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px var(--tint); }
.auth-row .btn { flex: none; }
.auth-row .btn:disabled { opacity: .7; cursor: default; }
.auth-err { font-size: 14px; color: #b42f2f; margin-top: 8px; }
.auth-err:empty { display: none; }
.auth-err a { color: var(--violet-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.otp { margin-top: 14px; display: grid; grid-template-columns: repeat(6, minmax(0, 48px)); gap: 8px; }
.otp input {
  width: 100%; height: 54px; text-align: center; font: inherit; font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--ink); border-radius: 11px; border: 1px solid var(--line-2); background: #fff; outline: 0; padding: 0;
  transition: border-color .15s, box-shadow .15s;
}
.otp input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px var(--tint); }
.otp input:disabled { background: #fafafc; color: var(--ink-3); }
.auth-links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.linkish { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 550; color: var(--violet-ink); cursor: pointer; }
.linkish:hover { text-decoration: underline; text-underline-offset: 3px; }
.linkish:disabled { color: var(--ink-3); cursor: default; text-decoration: none; font-variant-numeric: tabular-nums; }
.auth-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.auth-foot a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.auth-foot a:hover { color: var(--ink); }
.auth-going { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
/* Google first (05.10): Google's own button — white fill, #747775 outline,
   #1F1F1F text, the standard G (sign-in branding guidelines). Email behind
   «Use email instead». */
.gbtn {
  margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 50px; padding: 0 18px; box-sizing: border-box;
  border-radius: 12px; border: 1px solid #747775; background: #fff; color: #1f1f1f;
  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .1px;
  text-decoration: none; cursor: pointer; transition: background-color .15s, box-shadow .15s;
}
.gbtn svg { flex: none; }
.gbtn:hover { background: #f7f8f8; box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.gbtn:active { background: #eceded; }
.gbtn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.ghbtn {
  margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 50px; padding: 0 18px; box-sizing: border-box;
  border-radius: 12px; border: 1px solid #24292f; background: #24292f; color: #fff;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .1px;
  text-decoration: none; cursor: pointer; transition: background-color .15s;
}
.ghbtn svg { flex: none; }
.ghbtn:hover { background: #32383f; color: #fff; }
.ghbtn:active { background: #1b1f23; }
.ghbtn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.auth-alt { display: block; margin: 12px auto 0; padding: 6px 8px; color: var(--ink-2); font-weight: 500; }
.auth-alt:hover { color: var(--ink); }
.auth-or { margin-top: 16px; font-size: 13px; color: var(--ink-3); text-align: center; }
.auth-or + .auth-row { margin-top: 8px; }
.auth-note { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--vline); border-top-color: var(--violet); }
@media (prefers-reduced-motion: no-preference) { .spin { animation: spin .8s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Right panel ───────────────── */
.panel { display: none; }
html.is-chat .panel {
  display: block; flex: 0 0 auto; width: 0; height: 100%; overflow: hidden; position: relative;
  border-left: 1px solid transparent; background: #f6f6f9;
  transition: width .5s var(--ease), border-color .3s;
}
html.is-chat .start.has-panel .panel { width: min(50vw, 720px); border-left-color: var(--line); }
.panel-in { width: min(50vw, 720px); height: 100%; display: flex; flex-direction: column; }
.panel-h { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.panel-t { display: flex; align-items: center; gap: 9px; margin-right: auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.panel-t span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0a43a; flex: none; box-shadow: 0 0 0 3px #fbf0db; }
.panel-progress { height: 2px; background: transparent; position: relative; overflow: hidden; }
.panel.is-loading .panel-progress { background: var(--tint); }
.panel.is-loading .panel-progress i { position: absolute; inset: 0 auto 0 0; width: 38%; background: var(--violet); border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) { .panel.is-loading .panel-progress i { animation: bar 1.4s var(--ease) infinite; } }
@keyframes bar { from { translate: -100% 0; } to { translate: 270% 0; } }
.panel-body { flex: 1; min-height: 0; padding: 18px; display: flex; }
.panel-foot { display: none; }

.frame { flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 1px 2px rgba(24,24,27,.05), 0 24px 48px -32px rgba(24,24,27,.45); position: relative; }
.frame-bar { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #fbfbfc; }
.frame-dots { display: inline-flex; gap: 6px; }
.frame-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e2e2e8; }
.frame-url { flex: 1; min-width: 0; text-align: center; font-size: 12.5px; color: var(--ink-3); background: #f0f0f4; border-radius: 6px; padding: 3px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame-meta { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.frame iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.skel { position: absolute; inset: 41px 0 0; background: #fff; padding: 28px; display: grid; align-content: start; gap: 14px; transition: opacity .35s; }
.skel i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #f0f0f5 0%, #f7f7fb 40%, #f0f0f5 80%); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .skel i { animation: shimmer 1.4s linear infinite; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skel i:nth-child(1) { height: 30px; width: 46%; margin-bottom: 6px; }
.skel i:nth-child(2) { width: 82%; }
.skel i:nth-child(3) { width: 64%; }
.skel i:nth-child(4) { height: 150px; border-radius: 12px; margin: 10px 0; }
.skel i:nth-child(5) { width: 72%; }
.skel i:nth-child(6) { width: 54%; }
.skel-label { font-size: 13.5px; color: var(--ink-3); margin-top: 6px; }
.frame.is-live .skel { opacity: 0; pointer-events: none; }

.code-view { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.code-view .snip { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.code-view .snip pre { flex: 1; max-height: none; overflow: auto; }

/* ── Small screens ───────────────── */
@media (max-width: 880px) {
  html.is-chat .panel, html.is-chat .start.has-panel .panel {
    position: fixed; inset: 0; z-index: 60; width: auto; height: auto; border: 0;
    visibility: hidden; transform: translateY(100%);
    transition: transform .45s var(--ease), visibility 0s linear .45s;
  }
  html.is-chat .start.has-panel .panel { visibility: visible; transform: none; transition: transform .45s var(--ease); }
  .panel-in { width: 100%; }
  .panel-h { padding: 10px 10px 10px 16px; }
  .panel-h .btn-primary { display: none; }
  .panel-body { padding: 10px; }
  .panel-foot { display: block; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
  .panel-foot .btn { width: 100%; padding: 13px 16px; font-size: 15.5px; }
}
@media (max-width: 640px) {
  .thread-in { padding: 18px 16px 20px; gap: 22px; }
  .chat-bar { width: calc(100% - 24px); margin-top: 6px; }
  html.is-chat .box { width: calc(100% - 24px); }
  html.is-chat .box textarea { min-height: 54px; padding: 15px 58px 15px 16px; }
  .composer-note { padding: 7px 16px calc(10px + env(safe-area-inset-bottom)); font-size: 12px; }
  .msg { gap: 10px; }
  .msg-mark { width: 26px; height: 26px; font-size: 12px; }
  .bubble { max-width: 86%; }
  .brief { padding: 16px; }
  .proj { padding: 14px; }
  .proj-n b { white-space: normal; overflow-wrap: anywhere; }
  .auth { padding: 16px; }
  .auth-row { flex-direction: column; }
  .otp { gap: 6px; }
  .otp input { height: 50px; }
  .up-zone { margin: 8px; padding: 20px 12px 18px; }
  .up-link { padding: 14px 12px 2px; }
  .up-lrow { flex-direction: column; }
  .up-or { margin: 10px 12px 0; }
  .brief-act .btn { flex: 1 1 100%; }
  .composer-note .cn-long { display: none; }
  .opt { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html.is-chat .panel, html.is-chat .start.has-panel .panel { transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Flows 16.10: three ways in, "Do you already use Claude or ChatGPT?",
   "How much traffic do you expect?" (chat.js uploadEl / aiEl / scaleEl) ── */
.up-ways { margin: 12px 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.up-way {
  appearance: none; font: inherit; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px;
  border-radius: 12px; border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.up-way:hover { border-color: #c4c4f2; background: #fbfbff; }
.up-way:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.up-way:disabled { cursor: default; opacity: .8; }
.up-way.is-gh { background: #24292f; border-color: #24292f; color: #fff; }
.up-way.is-gh:hover { background: #32383f; border-color: #32383f; }
.up-wi { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; }
.up-way.is-gh .up-wi svg { width: 22px; height: 22px; }
.up-wi.is-folder { background: #fdf4e3; }
.up-wi.is-folder svg { width: 20px; height: 20px; fill: none; stroke: #e39b28; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.up-wt { display: grid; gap: 1px; min-width: 0; }
.up-wt b { font-size: 15px; font-weight: 650; }
.up-wt small { font-size: 12.5px; color: var(--ink-3); }
.up-way.is-gh .up-wt small { color: #b6bcc4; }
html.is-drag .up-way:not(.is-gh) { border-color: var(--violet); background: var(--tint); }
.up-ways + .up-bar { margin: 10px auto 0; }
.up-zip { margin: 8px 14px 0; font-size: 13px; color: var(--ink-3); }
.up-zip .up-lk { font-weight: 550; }
.up-ferr { margin: 8px 14px 0; font-size: 13.5px; }
.up .up-or + .up-link { padding-top: 6px; }

.ai-q { font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.ai-pick .opts, .scale .opts { margin-top: 12px; }
.ai-pick .opt.is-on, .scale .opt.is-on { border-color: var(--violet); background: var(--tint); color: var(--violet-ink); box-shadow: inset 0 0 0 1px var(--violet); }
.ai-ans { margin-top: 12px; font-size: 14.5px; color: var(--ink-2); display: grid; gap: 6px; }
.ai-ans p { margin: 0; }
.card-trial { margin: 0; font-size: 13.5px; color: var(--violet-ink); font-weight: 550; }
.card-trial[hidden] { display: none; }

.scale-svc { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.scale-svc b { color: var(--ink); font-weight: 650; }
.scale .ai-q { margin-top: 14px; }
.scale-rec { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #fafafe; border: 1px solid var(--vline); display: grid; gap: 4px; }
.scale-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.scale-badge { font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--violet-ink); }
.scale-name { font-size: 17px; font-weight: 700; color: var(--ink); }
.scale-price { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.scale-spec { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.scale-why { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.scale .card-trial { margin-top: 2px; }
.scale-fine { display: block; margin-top: 8px; }

@media (max-width: 640px) {
  .up-ways { grid-template-columns: 1fr; margin: 10px 10px 0; }
  .up-zip, .up-ferr { margin-left: 12px; margin-right: 12px; }
  .scale .opt, .ai-pick .opt { flex: 1 1 100%; }
}