:root {
  /* Warm neutrals with one accent — calm, readable, close to the chat apps people already use. */
  --bg: #faf9f5; --fg: #1f1e1d; --surface: #f4f3ee; --surface-2: #ecebe4; --card: #ffffff; --popover: #ffffff;
  --muted: #6f6d66; --border: #e4e2d9; --input: #d7d4ca; --accent: #efede6;
  --primary: #d0612e; --primary-hover: #b8521f; --primary-fg: #fff; --primary-soft: #f6e8de;
  --strong: #1f1e1d; --strong-hover: #3a3936; --strong-fg: #faf9f5;
  --dev: var(--primary); --dev-soft: var(--primary-soft);
  --success: #2f7a4f; --success-soft: #e5f0e8; --warning: #9a5b0c; --warning-soft: #f7eddc; --danger: #c0392b; --danger-soft: #f8e4e1;
  --code: #f3f1ea; --ring: color-mix(in srgb, var(--fg) 30%, transparent);
  --shadow: 0 1px 2px rgba(31, 30, 29, .04), 0 12px 40px -12px rgba(31, 30, 29, .16); --radius: 10px;
  --font: "Roboto", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
.dark {
  --bg: #262624; --fg: #f1f0eb; --surface: #1f1e1d; --surface-2: #30302e; --card: #2b2b29; --popover: #30302e;
  --muted: #a4a299; --border: #3a3936; --input: #4a4945; --accent: #33322f;
  --primary: #e07b4c; --primary-hover: #ea9068; --primary-fg: #1f1e1d; --primary-soft: #3a2b23;
  --strong: #ecebe6; --strong-hover: #d9d8d2; --strong-fg: #1f1e1d;
  --success: #74c08f; --success-soft: #1f2d24; --warning: #e2ad61; --warning-soft: #33291b; --danger: #ef7d70; --danger-soft: #3a2421;
  --code: #1f1e1d;
  --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 16px 48px -16px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 9px; border: 1px solid transparent; background: var(--strong); color: var(--strong-fg); font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--strong-hover); }
.btn-accent { background: var(--primary); color: var(--primary-fg); } .btn-accent:hover { background: var(--primary-hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 11px; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-outline { background: transparent; color: var(--fg); border-color: var(--input); }
.btn-outline:hover { background: var(--accent); }
.btn-ghost { background: transparent; color: var(--fg); }
.btn-ghost:hover { background: var(--accent); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger); opacity: .9; }
.btn-block { width: 100%; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); }
.icon-btn:hover { background: var(--accent); color: var(--fg); }
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--surface-2); color: var(--muted); }
.badge-primary { background: var(--surface-2); color: var(--fg); }

/* brand */
.mark { width: 26px; height: 26px; flex: none; border-radius: 7px; }
.wordmark .logo-img { height: 26px; width: auto; display: block; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 650; font-size: 17px; letter-spacing: -.01em; }
.wordmark .dev-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 2px 6px; border-radius: 5px; background: var(--dev-soft); color: var(--dev); }

/* site header / footer */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); }
.site-header .inner { max-width: 1120px; margin: 0 auto; height: 64px; display: flex; align-items: center; gap: 24px; padding: 0 20px; }
.site-nav { display: flex; gap: 2px; }
.site-nav a { padding: 8px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 14px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--fg); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mobile-toggle { display: none; }
.mobile-nav { display: none; border-top: 1px solid var(--border); padding: 8px 16px 16px; background: var(--bg); }
.mobile-nav a { display: block; padding: 12px 8px; border-radius: 8px; text-decoration: none; font-size: 15px; }
.mobile-nav a:hover { background: var(--accent); }
.site-header.open .mobile-nav { display: block; }
.site-footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 40px; }
.site-footer .cols { max-width: 1120px; margin: 0 auto; padding: 48px 20px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.site-footer h4 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer li a { color: var(--muted); text-decoration: none; font-size: 14px; }
.site-footer li a:hover { color: var(--fg); }
.site-footer .bottom { border-top: 1px solid var(--border); }
.site-footer .bottom div { max-width: 1120px; margin: 0 auto; padding: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.raneddie { font-size: 11px; font-weight: 650; letter-spacing: .22em; color: var(--muted); }
.theme-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.theme-switch button { border: 0; background: none; color: var(--muted); padding: 4px 8px; border-radius: 6px; font-size: 12px; }
.theme-switch button[aria-pressed="true"] { background: var(--accent); color: var(--fg); }

/* sections */
.section { max-width: 1120px; margin: 0 auto; padding: 80px 20px; }
.eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 650; margin: 18px 0; text-wrap: balance; }
.h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 650; margin: 10px 0 12px; text-wrap: balance; }
.lead { font-size: 18px; color: var(--muted); line-height: 1.65; max-width: 640px; text-wrap: pretty; }
.center { text-align: center; } .center .lead { margin-left: auto; margin-right: auto; }
.pill-note { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--muted); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.center .cta-row { justify-content: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; margin-top: 40px; }
.feature { background: var(--bg); padding: 26px; }
.feature h3 { font-size: 15.5px; margin: 12px 0 6px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.feature .i { color: var(--primary); width: 20px; height: 20px; }
.product-card { display: flex; flex-direction: column; gap: 18px; padding: 30px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); text-decoration: none; transition: border-color .15s; }
.product-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.product-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }
.product-card li { display: flex; gap: 8px; } .product-card li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); margin-top: 8px; flex: none; }
.product-card .more { color: var(--primary); font-weight: 500; font-size: 14px; margin-top: auto; }
.product-card.dev { --primary: var(--dev); }
.trust { display: grid; gap: 14px; }
.trust li { list-style: none; display: flex; gap: 14px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; }
.trust p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.cta-box { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 56px 24px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.steps li { display: flex; gap: 12px; font-size: 14.5px; }
.steps li span { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--surface-2); color: var(--fg); font: 600 12px var(--mono); display: grid; place-items: center; }
.panel-box { border: 1px solid var(--border); border-radius: 18px; padding: 30px; }
table.compare { width: 100%; border-collapse: collapse; font-size: 14px; }
table.compare th, table.compare td { padding: 14px 18px; text-align: left; border-top: 1px solid var(--border); vertical-align: top; }
table.compare thead th { background: var(--surface); border-top: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 18px; margin-top: 40px; }

/* preview illustration */
.preview { margin: 56px auto 0; max-width: 980px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.preview .bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.preview .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.preview .body { display: grid; grid-template-columns: 150px 1fr 1.3fr; height: 330px; }
.preview .col { padding: 16px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--border); }
.preview .col:last-child { border-right: 0; }
.preview .col:first-child { background: var(--surface); }
.sk { height: 10px; border-radius: 999px; background: var(--surface-2); }
.sk.p { background: color-mix(in srgb, var(--primary) 30%, transparent); }
.sk.d { background: color-mix(in srgb, var(--dev) 40%, transparent); }
.sk-box { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: grid; gap: 8px; }

/* pricing / faq / legal / contact */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.plan { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
.plan.featured { border-color: color-mix(in srgb, var(--primary) 50%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent); }
.plan h3 { margin: 0; font-size: 18px; display: flex; justify-content: space-between; align-items: center; }
.plan .desc { color: var(--muted); font-size: 14px; min-height: 42px; margin: 6px 0 0; }
.plan .price { font-size: 30px; font-weight: 650; margin: 20px 0; }
.plan .price small { font-size: 14px; font-weight: 400; color: var(--muted); }
.plan .soon { font-size: 16px; color: var(--muted); font-weight: 500; }
.plan ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.plan li { display: flex; gap: 8px; } .plan li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 3px; background: var(--fg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M5 12l5 5 9-10%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M5 12l5 5 9-10%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / contain no-repeat; }
.fine { color: var(--muted); font-size: 13px; text-align: center; margin-top: 28px; }
.faq { border: 1px solid var(--border); border-radius: 18px; margin-top: 36px; }
.faq details { padding: 20px 24px; border-top: 1px solid var(--border); }
.faq details:first-child { border-top: 0; }
.faq summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--muted); margin: 12px 0 0; line-height: 1.65; }
.legal { max-width: 760px; margin: 0 auto; padding: 64px 20px; }
.legal h2 { margin-top: 36px; font-size: 19px; }
.legal p { color: var(--muted); line-height: 1.7; }
.alert { display: flex; gap: 12px; padding: 12px 16px; border-radius: 10px; border: 1px solid; font-size: 14px; }
.alert-warning { border-color: color-mix(in srgb, var(--warning) 35%, transparent); background: var(--warning-soft); }
.alert-success { border-color: color-mix(in srgb, var(--success) 35%, transparent); background: var(--success-soft); }
.alert-error { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); }
.alert-info { border-color: color-mix(in srgb, var(--primary) 30%, transparent); background: var(--primary-soft); }
.alert p { margin: 0; color: var(--muted); }
.alert strong { display: block; color: var(--fg); }

/* forms */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 14px; font-weight: 500; }
.field small { color: var(--muted); font-size: 13px; }
.field .err { color: var(--danger); font-size: 13px; min-height: 0; }
.input, .textarea, .select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--input); border-radius: 10px; background: var(--card); color: var(--fg); font-size: 14.5px; }
.textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 100px; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: color-mix(in srgb, var(--fg) 40%, var(--input)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 8%, transparent); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--strong); }
.check a { color: var(--primary); }
.pw-wrap { position: relative; } .pw-wrap .input { padding-right: 64px; }
.pw-toggle { position: absolute; right: 4px; top: 4px; height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: 13px; }
.pw-toggle:hover { background: var(--accent); color: var(--fg); }

/* auth */
.auth-page { min-height: 100dvh; display: flex; flex-direction: column; background: var(--surface); }
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.auth-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 36px 34px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 26px; }
.auth-brand b { font-size: 13px; letter-spacing: .14em; color: var(--muted); }
.auth-card h1 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.auth-card .sub { margin: 6px 0 26px; color: var(--muted); font-size: 15px; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 14px; color: var(--muted); }
.auth-foot a, .link { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--input); cursor: pointer; font-weight: 500; text-decoration: none; background: none; border: 0; padding: 0; font-size: 14px; }
.auth-links { display: flex; justify-content: center; gap: 20px; padding: 0 16px 28px; font-size: 13px; color: var(--muted); flex-wrap: wrap; align-items: center; }
.auth-links a { color: var(--muted); text-decoration: none; }

/* chat app */
.chat-app { display: flex; height: 100dvh; overflow: hidden; }
.chat-side { width: 272px; flex: none; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); }
.chat-side .head { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 14px; }
.chat-side .logo { display: flex; align-items: center; padding: 4px; margin-left: -4px; border-radius: 8px; }
.chat-side .logo img { height: 24px; width: auto; display: block; }
#dev-app .chat-side .logo img { height: 30px; }
.switcher { position: relative; display: flex; align-items: center; margin: 0 12px 12px; padding: 3px; border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.switcher a { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 4px; border-radius: 7px; text-decoration: none; color: var(--muted); font-weight: 550; transition: color .15s; }
.switcher a img { height: 11px; width: auto; opacity: .55; filter: grayscale(1); transition: opacity .15s, filter .15s; display: none; }
.switcher a:hover { color: var(--fg); }
.switcher a.on { color: var(--fg); }
.switcher a.on img { opacity: 1; filter: none; }
.switcher::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 2); border-radius: 7px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 .5px var(--border); transition: transform .25s cubic-bezier(.3,.7,.2,1); }
html[data-app="dev"] .switcher::before { transform: translateX(100%); }
.switcher kbd { width: 26px; text-align: center; font: 10.5px var(--mono); color: var(--muted); border: 0; background: none; }
.side-label { display: flex; align-items: center; justify-content: space-between; margin: 2px 12px 4px 14px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* FIZZ and FIZZ DEV live on one page; only the active one is shown */
html[data-app="chat"] #dev-app, html[data-app="dev"] #chat-app { display: none !important; }
html[data-app] .switcher a.on { color: var(--fg); }
::view-transition-old(root) { animation: fizz-out .16s ease both; }
::view-transition-new(root) { animation: fizz-in .22s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fizz-out { to { opacity: 0; } }
@keyframes fizz-in { from { opacity: 0; transform: translateY(6px) scale(.995); } }
.side-search { position: relative; margin: 0 12px 8px; }
.side-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.side-search input { width: 100%; height: 36px; padding: 0 10px 0 32px; border: 1px solid transparent; border-radius: 9px; background: var(--surface-2); font-size: 14px; }
.side-search input:focus { outline: none; border-color: var(--input); background: var(--card); }
.conv-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; scrollbar-width: thin; }
.conv-group { margin: 12px 0 4px 10px; font-size: 12px; font-weight: 500; color: var(--muted); }
.conv { position: relative; display: flex; align-items: center; border-radius: 8px; }
.conv:hover { background: var(--accent); } .conv.on { background: var(--surface-2); }
.conv.on { font-weight: 500; }
.conv a, .conv input { flex: 1; min-width: 0; display: block; padding: 8px 32px 8px 10px; font-size: 14px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv input { margin: 3px; padding: 4px 8px; border: 1px solid var(--input); border-radius: 6px; background: var(--bg); }
.conv .more { position: absolute; right: 4px; width: 26px; height: 26px; opacity: 0; }
.conv:hover .more, .conv .more:focus, .conv .more[aria-expanded="true"] { opacity: 1; }
.empty-list { padding: 24px 12px; text-align: center; color: var(--muted); font-size: 14px; }
.side-foot { border-top: 1px solid var(--border); padding: 8px; display: grid; gap: 2px; }
.side-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 14px; text-align: left; }
.side-btn:hover { background: var(--accent); color: var(--fg); }
.me { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border: 0; border-radius: 9px; background: none; text-align: left; }
.me:hover { background: var(--accent); }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--strong); color: var(--strong-fg); display: grid; place-items: center; font-weight: 650; font-size: 13px; }
.me b { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me small { color: var(--muted); font-size: 12px; }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.chat-top { display: none; height: 50px; align-items: center; padding: 0 8px; gap: 6px; border-bottom: 1px solid var(--border); }
.chat-top .title { flex: 1; text-align: center; font-weight: 600; font-size: 15px; }
.scroll { flex: 1; overflow-y: auto; scrollbar-width: thin; }
.thread { max-width: 768px; margin: 0 auto; padding: 36px 20px 24px; display: grid; gap: 28px; }
.welcome { min-height: 52vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; }
.welcome h1 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2rem); font-weight: 650; letter-spacing: -.02em; }
.welcome p { margin: 6px 0 0; color: var(--muted); }
.suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.suggestion { display: flex; gap: 10px; text-align: left; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); transition: background .15s, border-color .15s; }
.suggestion:hover { background: var(--accent); }
.suggestion b { display: block; font-size: 14px; font-weight: 500; }
.suggestion span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 290px; }
.suggestion .i { color: var(--muted); margin-top: 2px; }
.m-user { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.m-user .bubble { max-width: 85%; background: var(--surface-2); padding: 10px 16px; border-radius: 18px 18px 6px 18px; white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.6; }
.m-ai { display: flex; gap: 12px; }
.m-ai .mark { margin-top: 2px; }
.m-ai .content { min-width: 0; flex: 1; }
.m-actions { display: flex; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); opacity: 0; transition: opacity .15s; margin-top: 4px; }
.m-user:hover .m-actions, .m-ai:hover .m-actions, .m-actions:focus-within { opacity: 1; }
.m-actions button { border: 0; background: none; color: var(--muted); padding: 4px 8px; border-radius: 6px; font-size: 12px; }
.m-actions button:hover { background: var(--accent); color: var(--fg); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-working { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.m-working .i { width: 15px; height: 15px; flex: none; animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); font-size: 12.5px; }
.chip .i { width: 14px; height: 14px; color: var(--muted); }
.chip button { border: 0; background: none; color: var(--muted); padding: 0 2px; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 10px; font-size: 14px; border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-soft); }
.notice.warn { border-color: color-mix(in srgb, var(--warning) 35%, transparent); background: var(--warning-soft); }
.notice .btn { margin-left: auto; }
.dots { display: inline-flex; gap: 5px; height: 26px; align-items: center; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
.composer-area { padding: 8px 20px 14px; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.composer-inner { max-width: 768px; margin: 0 auto; display: grid; gap: 8px; }
.composer { border: 1px solid var(--border); border-radius: 20px; background: var(--card); box-shadow: 0 1px 2px rgba(31,30,29,.04), 0 6px 24px -8px rgba(31,30,29,.12); transition: border-color .15s; }
.dark .composer { background: var(--popover); box-shadow: 0 6px 24px -8px rgba(0,0,0,.5); }
.composer:focus-within { border-color: color-mix(in srgb, var(--fg) 22%, var(--border)); }
.composer.drag { border-color: var(--fg); background: var(--accent); }
.composer textarea { display: block; width: 100%; max-height: 260px; border: 0; outline: none; resize: none; background: transparent; padding: 14px 16px 6px; font-size: 15px; line-height: 1.55; }
.composer .chips { padding: 12px 12px 0; }
.composer .row { display: flex; align-items: center; gap: 4px; padding: 4px 8px 8px; }
.model-btn { margin-left: auto; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.model-btn:hover { background: var(--accent); color: var(--fg); }
.send { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--primary); color: var(--primary-fg); display: grid; place-items: center; transition: background .15s, opacity .15s; }
.send:hover { background: var(--primary-hover); }
.send:disabled { opacity: .4; cursor: not-allowed; }
.disclaimer { text-align: center; font-size: 11.5px; color: var(--muted); margin: 0; }

/* menus & dialogs */
.menu { position: fixed; z-index: 80; min-width: 220px; padding: 5px; background: var(--popover); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 14px; }
.menu button:hover { background: var(--accent); }
.menu button small { display: block; color: var(--muted); font-size: 12px; }
.menu .danger { color: var(--danger); }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px -4px; }
.menu .label { padding: 6px 10px; font-size: 12px; color: var(--muted); }
dialog.dlg { width: min(520px, calc(100vw - 32px)); max-height: 90dvh; border: 1px solid var(--border); border-radius: 18px; padding: 0; background: var(--popover); color: var(--fg); box-shadow: var(--shadow); }
dialog.dlg::backdrop { background: rgba(20, 19, 18, .45); }
.dlg-body { padding: 24px; display: grid; gap: 16px; }
.dlg-body h2 { margin: 0; font-size: 18px; }
.dlg-body .desc { margin: -8px 0 0; color: var(--muted); font-size: 14px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.dlg-tabs { display: flex; gap: 4px; padding: 3px; background: var(--surface-2); border-radius: 9px; }
.dlg-tabs button { flex: 1; border: 0; background: none; padding: 6px; border-radius: 7px; font-size: 13px; color: var(--muted); }
.dlg-tabs button.on { background: var(--card); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* markdown */
.md { font-size: 15.5px; line-height: 1.7; word-break: break-word; }
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md p { margin: .75em 0; } .md h1, .md h2, .md h3 { margin: 1.3em 0 .5em; line-height: 1.3; font-size: 1.15em; }
.md ul, .md ol { padding-left: 1.4em; } .md li { margin: .25em 0; }
.md a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent); }
.md a:hover { text-decoration-color: var(--fg); }
.md code { font-family: var(--mono); font-size: .85em; background: var(--surface-2); border-radius: 5px; padding: .12em .38em; }
.md pre { position: relative; margin: 1em 0; background: var(--code); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; overflow-x: auto; }
.md pre code { background: none; border: 0; padding: 0; font-size: 13px; line-height: 1.6; }
.md pre .copy { position: absolute; top: 6px; right: 6px; border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: 6px; font-size: 11.5px; padding: 2px 8px; }
.md table { border-collapse: collapse; display: block; overflow-x: auto; } .md th, .md td { border: 1px solid var(--border); padding: 6px 10px; }
.md th { background: var(--surface); } .md blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid var(--border); color: var(--muted); }

.fizz-toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 10px 16px; border-radius: 12px; background: var(--strong); color: var(--strong-fg); box-shadow: var(--shadow); font-size: 14px; transition: .2s; }
.fizz-toast.show { opacity: 1; transform: translate(-50%, 0); }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 59; }

/* responsive */
@media (max-width: 960px) {
  .plans { grid-template-columns: 1fr 1fr; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .site-nav, .header-actions .hide-sm { display: none; }
  .mobile-toggle { display: inline-flex; }
  .section { padding: 56px 18px; }
  .grid-2, .feature-grid, .plans, .suggestions { grid-template-columns: 1fr; }
  .preview .body { grid-template-columns: 90px 1fr; height: 260px; } .preview .col:last-child { display: none; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .chat-side { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .chat-app.drawer .chat-side { transform: none; }
  .chat-top { display: flex; }
  .thread { padding-top: 20px; }
  .composer-area { padding: 6px 10px 10px; }
  .auth-card { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* settings: providers & connections */
.settings-dlg { width: min(600px, calc(100vw - 24px)); }
.mono { font-family: var(--mono); }
.muted-sm { color: var(--muted); font-size: 13px; margin: 0; }
.row-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.provider-list { display: grid; gap: 8px; }
.provider { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.provider:has(input:checked) { border-color: color-mix(in srgb, var(--fg) 45%, var(--border)); background: var(--accent); }
.provider input { margin-top: 3px; accent-color: var(--strong); }
.provider b { display: block; font-size: 14px; font-weight: 600; }
.provider small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.conn-list { display: grid; gap: 8px; }
.conn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.conn > .i { width: 22px; height: 22px; flex: none; }
.conn-body { flex: 1; min-width: 0; }
.conn-body b { display: block; font-size: 14px; }
.conn-body small { display: block; color: var(--muted); font-size: 12.5px; }
.conn-body .conn-state { color: var(--fg); margin-top: 3px; }
@media (hover: none) { .m-actions { opacity: 1; } }

/* RanEddie ID in FIZZ: header button, signed-in name, sidebar invite */
.rid-signin-btn { display: inline-flex; align-items: center; gap: 8px; }
.rid-signin-btn img { height: 16px; width: auto; }
.hdr-user { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-user .avatar { width: 26px; height: 26px; font-size: 11px; flex: none; }
.rid-invite { margin: 0 10px 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); font-size: 13px; position: relative; }
.rid-invite p { margin: 0 0 8px; color: var(--muted); line-height: 1.45; padding-right: 16px; }
.rid-invite b { display: block; color: var(--fg); margin-bottom: 2px; }
.rid-invite .btn { width: 100%; }
.rid-invite .x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; background: none; color: var(--muted); border-radius: 6px; font-size: 14px; }
.rid-invite .x:hover { background: var(--accent); color: var(--fg); }
.me small.rid-cta { color: var(--fg); font-weight: 600; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tool-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--input); flex: none; margin: 0 4px; }
.tool-dot.on { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.check span small { display: block; font-size: 12.5px; color: var(--muted); opacity: .85; margin-top: 2px; }
.check span { color: var(--fg); }
.menu button .i { width: 16px; height: 16px; color: var(--muted); }
.menu button > span:not(.menu-check) { flex: 1; min-width: 0; }
.menu-check { margin-left: auto; display: inline-flex; color: var(--fg); }
.menu-check .i { color: var(--fg); }
.chip button .i { width: 13px; height: 13px; }
.icon-btn .i { width: 17px; height: 17px; }
.rid-invite .x .i { width: 14px; height: 14px; }
.pal-foot kbd, .disclaimer kbd { font: 10.5px var(--mono); padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--card); margin-right: 3px; }
svg.dots3 { stroke-width: 3; }
.dlg-body:focus { outline: none; }

.vtoken { display: flex; gap: 6px; margin: 6px 0 2px; }
.vtoken .input { flex: 1; min-width: 0; height: 32px; font-size: 13px; }
.conn-group { margin: 18px 0 2px; font-size: 14px; }
.app-ic { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; font-size: 13px; color: var(--fg); }
.app-mark { width: 28px; height: 28px; flex: none; object-fit: contain; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.conn-acts { display: flex; gap: 6px; flex: none; }
.mcp-add { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 10px; }
.mcp-add .input { height: 32px; font-size: 13px; }
.mcp-add .btn { justify-self: start; }


/* FIZZ Settings — comfortable dialog sizing and readable connection cards */
.settings-dlg { width: min(920px, calc(100vw - 48px)); max-height: min(88dvh, 920px); padding: 0; overflow: hidden; }
.settings-dlg::backdrop { background: rgba(4, 8, 14, .62); backdrop-filter: blur(7px); }
.settings-dlg > .dlg-body { max-height: min(88dvh, 920px); overflow: auto; padding: 0 26px 22px; gap: 20px; }
.settings-heading { position: sticky; top: 0; z-index: 4; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 22px 0 14px; background: var(--popover); border-bottom: 1px solid var(--border); }
.settings-heading h2 { margin: 3px 0 0; font-size: 23px; letter-spacing: -.035em; }
.settings-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.settings-kicker { font-size: 10px; letter-spacing: .14em; color: var(--muted); font-weight: 700; }
.settings-close { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.settings-close:hover { color: var(--fg); background: var(--accent); }
.settings-dlg .dlg-tabs { position: sticky; top: 83px; z-index: 3; overflow-x: auto; display: flex; gap: 5px; padding: 5px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); scrollbar-width: thin; }
.settings-dlg .dlg-tabs button { min-width: max-content; padding: 9px 13px; border-radius: 8px; font-weight: 550; }
.settings-dlg .dlg-tabs button.on { background: var(--accent); box-shadow: none; color: var(--fg); }
.settings-dlg [data-pane] { min-width: 0; }
.settings-dlg [data-pane="general"] { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 18px 22px; }
.settings-dlg [data-pane="general"] > .field:nth-last-child(-n+2) { grid-column: 1 / -1; }
.settings-dlg [data-pane="connections"] > [data-conn-list] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.settings-dlg [data-pane="connections"] > [data-conn-list] > .conn { min-width: 0; }
.settings-dlg [data-pane="connections"] .conn { align-items: flex-start; gap: 14px; padding: 16px; background: var(--card); transition: border-color .15s, background .15s; }
.settings-dlg [data-pane="connections"] .conn:hover { border-color: color-mix(in srgb, var(--fg) 22%, var(--border)); background: var(--surface); }
.settings-dlg [data-pane="connections"] .conn > .conn-body { padding-top: 2px; }
.settings-dlg [data-pane="connections"] .conn > .btn { align-self: flex-start; white-space: nowrap; }
.settings-dlg [data-pane="tools"] > [data-tools] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.settings-dlg [data-pane="tools"] > [data-tools] .conn { padding: 14px 16px; background: var(--card); }
.settings-dlg [data-pane] > .field, .settings-dlg [data-sub] > .field { margin: 0 0 14px; }
.settings-dlg .field > span { font-size: 13px; font-weight: 600; }
.settings-dlg .field small { line-height: 1.5; }
.settings-dlg .input, .settings-dlg .select, .settings-dlg .textarea { min-width: 0; border-radius: 10px; }
.settings-dlg .provider-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.settings-dlg .provider { min-width: 0; position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.settings-dlg .provider:hover { border-color: color-mix(in srgb, var(--fg) 28%, var(--border)); background: var(--surface); transform: translateY(-1px); }
.settings-dlg .provider:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent); }
.settings-dlg .provider input { margin: 3px 0 0; accent-color: var(--primary); flex: none; }
.settings-dlg .provider span { display: grid; gap: 4px; min-width: 0; }
.settings-dlg .provider b { font-size: 13.5px; line-height: 1.3; }
.settings-dlg .provider small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.settings-dlg [data-sub] { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.settings-dlg [data-pane="ai"] > .provider-list + [data-sub] { margin-top: 14px; }
.settings-dlg [data-pane="ai"] > [data-sub]:not(.hidden) { margin-top: 14px; }
.settings-dlg [data-pane="ai"] > .provider-list { margin-bottom: 14px; }
.settings-dlg [data-pane="ai"] [data-sub].hidden { display: none !important; }
.settings-dlg .dlg-actions { position: sticky; bottom: -22px; z-index: 2; margin: 0 -26px -22px; padding: 15px 26px; background: var(--popover); border-top: 1px solid var(--border); }
.settings-dlg .conn { padding: 12px; border-radius: 12px; }
.settings-dlg .conn-list { display: grid; gap: 9px; }
@media (max-width: 800px) {
  .settings-dlg { width: calc(100vw - 32px); max-height: 92dvh; }
  .settings-dlg > .dlg-body { max-height: 92dvh; padding: 0 22px 18px; gap: 18px; }
  .settings-heading { padding-top: 18px; }
  .settings-dlg .dlg-tabs { top: 79px; }
  .settings-dlg .dlg-tabs button { padding: 8px 10px; font-size: 12px; }
  .settings-dlg [data-pane="connections"] > [data-conn-list],
  .settings-dlg [data-pane="tools"] > [data-tools] { grid-template-columns: minmax(0, 1fr); }
  .settings-dlg [data-pane="general"] { gap: 14px; }
  .settings-dlg .provider-list { grid-template-columns: minmax(0, 1fr); }
  .settings-dlg [data-sub] { padding: 12px; }
  .settings-dlg .dlg-actions { bottom: -18px; margin: 0 -22px -18px; padding: 13px 22px; }
}
@media (max-width: 600px) {
  .settings-dlg { width: calc(100vw - 12px); max-height: 94dvh; }
  .settings-dlg > .dlg-body { max-height: 94dvh; padding: 0 14px 14px; gap: 14px; }
  .settings-heading { padding-top: 16px; }
  .settings-dlg .dlg-tabs { top: 77px; }
  .settings-dlg [data-pane="general"] { grid-template-columns: minmax(0, 1fr); }
  .settings-dlg [data-pane="general"] > .field:nth-last-child(-n+2) { grid-column: auto; }
  .settings-dlg .dlg-tabs button { padding: 8px 10px; font-size: 12px; }
  .settings-dlg .provider-list { grid-template-columns: minmax(0, 1fr); }
  .settings-dlg [data-sub] { padding: 12px; }
  .settings-dlg .dlg-actions { bottom: -14px; margin: 0 -14px -14px; padding: 11px 14px; }
}


/* Landing page refresh */
.landing-hero{position:relative;isolation:isolate;overflow:hidden;max-width:1440px;margin:0 auto;padding:92px max(32px,calc((100% - 1160px)/2)) 76px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:54px;min-height:620px}
.landing-hero:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 76% 44%,color-mix(in srgb,var(--primary) 11%,transparent),transparent 43%),radial-gradient(ellipse at 15% 8%,color-mix(in srgb,#8b7cf6 8%,transparent),transparent 38%)}
.hero-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(2px);pointer-events:none}.hero-glow-a{width:240px;height:240px;right:12%;top:4%;background:color-mix(in srgb,var(--primary) 7%,transparent)}.hero-glow-b{width:150px;height:150px;right:40%;bottom:0;background:color-mix(in srgb,#8b7cf6 7%,transparent)}
.hero-copy{position:relative;z-index:2}.hero-kicker{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--border);background:color-mix(in srgb,var(--card) 76%,transparent);padding:8px 12px;border-radius:999px;font-size:10px;letter-spacing:.15em;font-weight:700;color:var(--muted)}.hero-kicker-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.hero-title{font-size:clamp(44px,5.1vw,70px);line-height:1.015;letter-spacing:-.065em;font-weight:700;margin:26px 0 20px;text-wrap:balance}.hero-title span{color:var(--primary)}.hero-description{font-size:17px;line-height:1.8;color:var(--muted);max-width:490px;margin:0}.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px}.hero-primary{background:var(--primary);color:var(--primary-fg);box-shadow:0 9px 24px color-mix(in srgb,var(--primary) 23%,transparent);border-radius:12px}.hero-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}.hero-secondary{border-color:var(--border);background:var(--card);border-radius:12px}.hero-proof{display:flex;gap:16px;flex-wrap:wrap;margin-top:27px;color:var(--muted);font-size:11px}.hero-proof>span{display:inline-flex;align-items:center;gap:6px}.hero-proof svg{width:14px;height:14px;color:var(--success)}
.hero-visual{position:relative;min-width:0;padding:22px 0 24px}.visual-orbit{position:absolute;border:1px solid color-mix(in srgb,var(--primary) 14%,transparent);border-radius:50%;pointer-events:none}.orbit-one{width:440px;height:440px;right:-55px;top:50%;transform:translateY(-50%)}.orbit-two{width:540px;height:540px;right:-105px;top:50%;transform:translateY(-50%);border-style:dashed;opacity:.5}
.workspace-window{position:relative;z-index:1;overflow:hidden;border:1px solid color-mix(in srgb,var(--border) 75%,var(--primary));border-radius:18px;background:var(--card);box-shadow:0 35px 90px -35px rgba(0,0,0,.3),0 5px 20px rgba(0,0,0,.06);transform:perspective(1400px) rotateY(-4deg) rotateX(1deg)}.workspace-top{height:43px;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--border);background:var(--surface)}.window-dots{display:flex;gap:5px}.window-dots i{width:7px;height:7px;border-radius:50%;background:var(--input)}.window-dots i:first-child{background:#e98273}.window-dots i:nth-child(2){background:#e6b75e}.window-dots i:nth-child(3){background:#73bd8a}.workspace-label{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600;color:var(--muted);margin:auto}.mini-brand{display:grid;place-items:center;background:var(--primary);color:white;border-radius:5px;width:17px;height:17px;font-weight:800}.live-pill{display:flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:999px;padding:4px 7px;font-size:8px;color:var(--muted);white-space:nowrap}.live-pill i{width:5px;height:5px;border-radius:50%;background:#39a66a}
.workspace-content{display:grid;grid-template-columns:48px minmax(0,1fr);min-height:415px}.workspace-rail{display:flex;align-items:center;flex-direction:column;gap:14px;padding:13px 0;background:var(--surface);border-right:1px solid var(--border)}.rail-logo{font-weight:800;color:var(--primary);font-size:22px;margin-bottom:5px}.rail-icon,.rail-bottom{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:var(--muted)}.rail-icon svg,.rail-bottom svg{width:15px;height:15px}.rail-icon.active{color:var(--primary);background:var(--primary-soft)}.rail-bottom{margin-top:auto}.workspace-main{padding:24px 22px 20px;min-width:0}.workspace-greeting{font-size:20px;font-weight:650;letter-spacing:-.04em}.workspace-subtitle{font-size:11px;color:var(--muted);margin-top:4px}.prompt-card{margin-top:18px;border:1px solid var(--border);border-radius:11px;padding:11px;display:flex;align-items:center;gap:9px;color:var(--muted);font-size:10px;box-shadow:0 3px 9px rgba(0,0,0,.025)}.prompt-spark{color:var(--primary)}.prompt-spark svg{width:16px;height:16px}.prompt-card>span:nth-child(2){flex:1}.prompt-send{display:grid;place-items:center;background:var(--primary);color:white;width:25px;height:25px;border-radius:7px}.prompt-send svg{width:13px;height:13px}
.workspace-options{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}.workspace-option{display:flex;align-items:center;gap:8px;min-width:0;border:1px solid var(--border);border-radius:10px;padding:10px 8px}.workspace-option>span:nth-child(2){display:grid;gap:3px;min-width:0;flex:1}.workspace-option b{font-size:9px}.workspace-option small{font-size:8px;line-height:1.45;color:var(--muted)}.workspace-option>svg{width:12px;height:12px;color:var(--muted)}.option-icon{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;flex:none}.option-icon svg{width:14px;height:14px}.option-icon.purple{background:#eee9ff;color:#7256c7}.option-icon.orange{background:var(--primary-soft);color:var(--primary)}
.mini-preview{margin-top:15px;border:1px solid var(--border);border-radius:11px;overflow:hidden}.mini-preview-top{height:27px;display:flex;justify-content:space-between;align-items:center;padding:0 10px;background:var(--surface);font-size:7px;letter-spacing:.12em;color:var(--muted);font-weight:700}.preview-dots{letter-spacing:2px}.mini-site{height:137px;position:relative;overflow:hidden;background:#f0eee8;color:#20231f;padding:12px 14px}.mini-site-nav{display:flex;justify-content:space-between;align-items:center;font-size:7px}.mini-site-nav b{font-size:11px;letter-spacing:-.04em}.mini-site-copy{position:relative;z-index:2;display:flex;align-items:flex-start;flex-direction:column;margin-top:15px}.mini-site-copy small{font-size:6px;letter-spacing:.13em;color:#6c776a}.mini-site-copy strong{font-size:23px;line-height:1.02;letter-spacing:-.055em;margin-top:5px}.mini-site-button{font-size:7px;background:#293c2d;color:#fff;padding:6px 8px;border-radius:5px;margin-top:9px}.mini-art{position:absolute;right:10%;top:17px;width:43%;height:115px}.art-ring{position:absolute;right:6px;top:-25px;width:140px;height:140px;border:1px solid #b2b8a8;border-radius:50%}.art-card{position:absolute;right:15px;top:15px;width:86px;height:94px;background:linear-gradient(145deg,#d9a78c,#e9d5b9 48%,#82977c);border-radius:48px 48px 8px 8px;transform:rotate(8deg);box-shadow:0 8px 20px #3332}.art-orb{position:absolute;right:0;bottom:2px;width:43px;height:43px;border-radius:50%;background:#b7bfa5;box-shadow:inset -8px -6px 15px #62705c66}
.float-note{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 13px;box-shadow:0 14px 35px rgba(0,0,0,.12)}.float-note>span:nth-child(2){display:grid;gap:2px}.float-note b{font-size:10px}.float-note small{font-size:9px;color:var(--muted)}.float-check,.float-code{display:grid;place-items:center;width:29px;height:29px;border-radius:9px}.float-check{background:var(--success-soft);color:var(--success)}.float-code{background:var(--primary-soft);color:var(--primary)}.float-note svg{width:14px;height:14px}.note-top{top:4px;right:-14px}.note-bottom{bottom:0;left:-25px}
.hero-trust-strip{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding:19px 20px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);font-size:9px;letter-spacing:.16em;font-weight:700;color:var(--muted)}.hero-trust-strip i{width:4px;height:4px;border-radius:50%;background:var(--primary);opacity:.7}
@media(max-width:980px){.landing-hero{grid-template-columns:1fr;gap:32px;padding:70px 28px 60px;max-width:760px}.hero-copy{text-align:center}.hero-description{margin:0 auto}.hero-actions,.hero-proof{justify-content:center}.hero-visual{width:100%;max-width:610px;margin:0 auto}.workspace-window{transform:none}.note-top{right:-4px}.note-bottom{left:-8px}.orbit-one{right:5%}.orbit-two{right:0}}
@media(max-width:600px){.landing-hero{padding:52px 17px 44px;gap:25px}.hero-kicker{font-size:8px;letter-spacing:.11em}.hero-title{font-size:clamp(41px,11vw,58px);margin:21px 0 15px}.hero-description{font-size:15px;line-height:1.7}.hero-actions{display:grid;grid-template-columns:1fr;width:100%;gap:9px;margin-top:23px}.hero-actions .btn{width:100%}.hero-proof{gap:9px 13px;font-size:10px}.hero-visual{padding:17px 0 21px}.workspace-window{border-radius:13px}.workspace-top{padding:0 8px;gap:6px}.workspace-label{font-size:8px}.live-pill{font-size:7px;padding:4px 5px}.workspace-content{grid-template-columns:34px minmax(0,1fr);min-height:0}.workspace-rail{gap:10px;padding:10px 0}.rail-icon,.rail-bottom{width:25px;height:25px}.workspace-main{padding:16px 11px 12px}.workspace-greeting{font-size:16px}.workspace-subtitle{font-size:9px}.prompt-card{padding:8px;font-size:8px;margin-top:13px}.workspace-options{gap:6px}.workspace-option{gap:5px;padding:7px 5px}.option-icon{width:22px;height:22px}.workspace-option b{font-size:8px}.workspace-option small{font-size:7px}.mini-site{height:120px;padding:10px}.mini-site-copy strong{font-size:19px}.mini-art{right:4%;transform:scale(.8);transform-origin:top right}.note-top{top:0;right:-4px}.note-bottom{bottom:0;left:-3px}.float-note{padding:7px 9px;gap:6px;border-radius:9px}.float-note b{font-size:8px}.float-note small{font-size:7px}.float-check,.float-code{width:23px;height:23px}.hero-trust-strip{gap:9px 12px;font-size:8px;padding:15px 10px}.hero-trust-strip i{width:3px;height:3px}}
@media(prefers-reduced-motion:no-preference){.hero-primary{transition:transform .18s,background .18s,box-shadow .18s}.workspace-window{animation:workspace-rise .7s cubic-bezier(.2,.75,.2,1) both}.note-top{animation:note-float 5s ease-in-out infinite}.note-bottom{animation:note-float 6s ease-in-out infinite reverse}@keyframes workspace-rise{from{opacity:0;transform:perspective(1400px) translateY(16px) rotateY(-4deg)}to{opacity:1;transform:perspective(1400px) rotateY(-4deg) rotateX(1deg)}}@keyframes note-float{0%,100%{translate:0 0}50%{translate:0 -5px}}}


/* Refined landing hero: calmer composition, stronger hierarchy, less visual clutter */
.landing-hero{max-width:1360px;min-height:600px;padding:76px max(30px,calc((100% - 1160px)/2)) 68px;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:64px}
.landing-hero:before{background:radial-gradient(ellipse at 77% 47%,color-mix(in srgb,var(--primary) 8%,transparent),transparent 48%),radial-gradient(ellipse at 8% 10%,color-mix(in srgb,#8b7cf6 5%,transparent),transparent 36%)}
.hero-copy{max-width:500px}
.hero-kicker{font-size:10px;letter-spacing:.12em;padding:8px 13px;background:var(--card)}
.hero-title{font-size:clamp(48px,5.25vw,72px);line-height:1.01;letter-spacing:-.067em;margin:24px 0 22px}
.hero-title span{background:linear-gradient(100deg,var(--primary),color-mix(in srgb,var(--primary) 58%,#a47af4));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-description{font-size:17px;line-height:1.78;max-width:440px}
.hero-actions{margin-top:29px;gap:10px}
.hero-primary{padding:0 22px;box-shadow:0 8px 22px color-mix(in srgb,var(--primary) 19%,transparent)}
.hero-secondary{background:transparent;border-color:var(--input)}
.hero-proof{gap:14px 18px;margin-top:25px;font-size:11px}
.hero-visual{padding:26px 6px 28px 0}
.workspace-window{border-radius:16px;box-shadow:0 32px 75px -38px rgba(0,0,0,.38),0 0 0 7px color-mix(in srgb,var(--card) 70%,transparent);transform:perspective(1600px) rotateY(-2deg) rotateX(.5deg)}
.workspace-content{min-height:430px;grid-template-columns:46px minmax(0,1fr)}
.workspace-main{padding:25px 23px 21px}
.workspace-greeting{font-size:21px;letter-spacing:-.045em}
.workspace-subtitle{font-size:12px;margin-top:6px}
.prompt-card{padding:12px;font-size:11px;border-radius:12px;margin-top:20px}
.workspace-options{gap:10px;margin-top:12px}
.workspace-option{padding:11px 9px;border-radius:11px}
.workspace-option b{font-size:10px}.workspace-option small{font-size:9px}
.mini-preview{margin-top:16px;border-radius:12px}
.mini-site{height:148px;padding:14px 16px}
.mini-site-copy{margin-top:17px}.mini-site-copy strong{font-size:25px}
.mini-art{right:12%;top:20px}
.note-top{top:0;right:-5px}.note-bottom{bottom:0;left:-18px}
.float-note{padding:10px 13px;border-radius:11px;box-shadow:0 12px 28px rgba(0,0,0,.1)}
.orbit-one{width:420px;height:420px;right:-10px;opacity:.65}.orbit-two{display:none}
.hero-trust-strip{background:transparent;border-top:0;max-width:1000px;margin:0 auto;padding:17px 20px 22px}
@media(max-width:980px){.landing-hero{min-height:0;padding:65px 28px 48px;gap:27px;max-width:760px}.hero-copy{max-width:none}.hero-title{font-size:clamp(48px,8vw,66px)}.hero-visual{max-width:620px;padding:20px 0 25px}.workspace-window{transform:none}.workspace-content{min-height:415px}.orbit-one{right:4%}.note-bottom{left:-8px}}
@media(max-width:600px){.landing-hero{padding:45px 17px 35px;gap:19px}.hero-kicker{font-size:8px;padding:7px 10px;letter-spacing:.09em}.hero-title{font-size:clamp(42px,10.7vw,56px);line-height:1.02;margin:20px 0 14px}.hero-description{font-size:14px;line-height:1.7}.hero-actions{margin-top:22px}.hero-proof{margin-top:18px;gap:9px 12px}.hero-visual{padding:15px 0 22px}.workspace-content{min-height:0}.workspace-main{padding:15px 10px 11px}.workspace-greeting{font-size:15px}.workspace-subtitle{font-size:9px}.prompt-card{margin-top:12px;padding:8px;font-size:8px}.workspace-options{gap:6px;margin-top:8px}.workspace-option{padding:7px 5px}.workspace-option b{font-size:8px}.workspace-option small{font-size:7px}.mini-site{height:116px}.mini-site-copy strong{font-size:18px}.mini-art{right:2%;transform:scale(.75);transform-origin:top right}.float-note{padding:6px 8px}.float-note b{font-size:7.5px}.float-note small{font-size:7px}.float-check,.float-code{width:21px;height:21px}.note-top{right:-3px}.note-bottom{left:-3px}.hero-trust-strip{padding:13px 10px 17px;gap:8px 10px}}
@media(prefers-reduced-motion:no-preference){.workspace-window{animation:workspace-refined-in .65s cubic-bezier(.2,.75,.2,1) both}@keyframes workspace-refined-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}}


/* Responsive hero v2: fluid sizing, clean alignment and safe overflow on every viewport */
.landing-hero{
  width:100%;box-sizing:border-box;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(28px,5vw,72px);
  padding:clamp(48px,6vw,82px) clamp(20px,calc((100vw - 1160px)/2),max(24px,calc((100vw - 1160px)/2))) clamp(38px,5vw,66px);
  min-height:unset;
}
.hero-copy,.hero-visual,.workspace-window,.workspace-main{min-width:0}
.hero-title{font-size:clamp(39px,5.1vw,70px);overflow-wrap:normal;word-break:normal}
.hero-description{max-width:44ch}
.hero-actions .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:normal;text-align:center}
.hero-visual{width:100%;max-width:700px;justify-self:end}
.workspace-window{width:100%;transform:none}
.workspace-content{min-height:0;grid-template-columns:clamp(34px,3.5vw,46px) minmax(0,1fr)}
.workspace-main{padding:clamp(12px,2vw,24px)}
.workspace-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.workspace-option{min-width:0}
.workspace-option small{overflow-wrap:anywhere}
.mini-site-nav span{white-space:nowrap}
.note-top{right:-8px}.note-bottom{left:-12px}
.hero-trust-strip{padding-inline:clamp(12px,4vw,30px);gap:clamp(9px,2vw,22px)}
.hero-trust-strip span{white-space:nowrap}
@media(min-width:1500px){
 .landing-hero{max-width:1440px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:76px}
 .hero-title{font-size:72px}
}
@media(max-width:1050px){
 .landing-hero{grid-template-columns:minmax(0,1fr);max-width:820px;gap:30px;padding:58px 28px 42px}
 .hero-copy{text-align:center;margin-inline:auto}
 .hero-description{margin-inline:auto;max-width:52ch}
 .hero-actions,.hero-proof{justify-content:center}
 .hero-visual{justify-self:center;max-width:680px;padding:14px 10px 25px}
 .workspace-window{box-shadow:0 25px 65px -38px rgba(0,0,0,.36),0 0 0 5px color-mix(in srgb,var(--card) 70%,transparent)}
 .note-top{right:0}.note-bottom{left:0}
 .orbit-one{right:8%}
}
@media(max-width:640px){
 .landing-hero{padding:42px 16px 28px;gap:18px}
 .hero-kicker{max-width:100%;white-space:normal;justify-content:center;font-size:8px;letter-spacing:.07em}
 .hero-title{font-size:clamp(38px,10.5vw,54px);line-height:1.04;letter-spacing:-.06em;margin:18px 0 13px}
 .hero-description{font-size:14px;line-height:1.68;max-width:39ch}
 .hero-actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:9px;margin-top:20px}
 .hero-actions .btn{width:100%;box-sizing:border-box;padding:12px 16px}
 .hero-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 10px;text-align:left;width:max-content;max-width:100%;margin:17px auto 0}
 .hero-proof>span{font-size:10px;white-space:normal;align-items:flex-start}
 .hero-visual{padding:10px 0 24px;max-width:100%}
 .workspace-top{height:37px;padding:0 8px;gap:6px}
 .window-dots{gap:3px}.window-dots i{width:6px;height:6px}
 .workspace-label{font-size:8px;gap:4px}
 .live-pill{font-size:7px;padding:3px 5px}
 .workspace-content{grid-template-columns:30px minmax(0,1fr)}
 .workspace-rail{gap:8px;padding:9px 0}
 .rail-logo{font-size:18px}.rail-icon,.rail-bottom{width:23px;height:23px}
 .workspace-main{padding:13px 9px 10px}
 .workspace-greeting{font-size:clamp(13px,3.6vw,16px);line-height:1.25}
 .workspace-subtitle{font-size:8px;line-height:1.4}
 .prompt-card{gap:6px;margin-top:11px;padding:7px;font-size:8px;line-height:1.35}
 .prompt-send{width:22px;height:22px;flex:none}
 .workspace-options{gap:6px;margin-top:7px}
 .workspace-option{padding:7px 5px;gap:5px;border-radius:8px;align-items:flex-start}
 .option-icon{width:21px;height:21px;border-radius:6px}
 .workspace-option b{font-size:8px;line-height:1.3}
 .workspace-option small{font-size:7px;line-height:1.35}
 .workspace-option>svg{display:none}
 .mini-preview{margin-top:9px}
 .mini-preview-top{height:23px;font-size:6px}
 .mini-site{height:clamp(100px,28vw,125px);padding:9px}
 .mini-site-nav{font-size:6px}.mini-site-nav b{font-size:9px}
 .mini-site-copy{margin-top:12px}.mini-site-copy small{font-size:5px}.mini-site-copy strong{font-size:clamp(16px,5vw,21px)}
 .mini-site-button{font-size:6px;padding:5px 6px;margin-top:6px}
 .mini-art{right:0;top:15px;transform:scale(.68);transform-origin:top right}
 .float-note{padding:6px 7px;gap:5px;border-radius:8px;max-width:calc(100% - 16px)}
 .float-note b{font-size:7px}.float-note small{font-size:6.5px}
 .float-check,.float-code{width:20px;height:20px;flex:none}
 .note-top{top:0;right:0}.note-bottom{bottom:0;left:0}
 .hero-trust-strip{display:flex;gap:8px 10px;padding:12px 12px 16px;font-size:7px;letter-spacing:.08em}
 .hero-trust-strip i{flex:none}
}
@media(max-width:370px){
 .landing-hero{padding-inline:12px}
 .hero-title{font-size:37px}
 .hero-proof{grid-template-columns:minmax(0,1fr);width:fit-content}
 .live-pill{max-width:76px;overflow:hidden;text-overflow:ellipsis}
 .workspace-label{font-size:7px}
 .workspace-options{grid-template-columns:minmax(0,1fr)}
 .workspace-option small{font-size:8px}
 .mini-art{opacity:.7;transform:scale(.56);right:-3px}
 .float-note{max-width:calc(100% - 8px)}
 .note-bottom{left:-2px}
 .hero-trust-strip span{white-space:normal;text-align:center}
}
@media(hover:none){
 .hero-primary:hover{transform:none}
}


/* Final viewport fit: keep the landing hero full-width and prevent the preview from collapsing */
#main{width:100%;max-width:none;margin-inline:auto}
#main>.landing-hero{
  width:100%;max-width:1240px;margin-inline:auto;
  padding:clamp(44px,6vw,80px) clamp(20px,4vw,56px) clamp(36px,5vw,64px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  align-items:center;gap:clamp(28px,4vw,64px);
}
#main>.landing-hero>.hero-copy{width:100%;max-width:540px;min-width:0}
#main>.landing-hero .hero-title{font-size:clamp(42px,5vw,72px);line-height:1.02;overflow-wrap:normal}
#main>.landing-hero>.hero-visual{width:100%;max-width:680px;min-width:0;justify-self:stretch}
#main>.landing-hero .workspace-window{width:100%;max-width:100%}
#main>.landing-hero .workspace-main{min-width:0}
#main>.landing-hero .workspace-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
#main>.landing-hero .workspace-option{min-width:0}
@media(max-width:900px){
  #main>.landing-hero{grid-template-columns:minmax(0,1fr);max-width:760px;gap:26px;padding:52px 24px 36px}
  #main>.landing-hero>.hero-copy{max-width:620px;margin-inline:auto;text-align:center}
  #main>.landing-hero .hero-description{margin-inline:auto}
  #main>.landing-hero .hero-actions,#main>.landing-hero .hero-proof{justify-content:center}
  #main>.landing-hero>.hero-visual{max-width:680px;justify-self:center}
}
@media(max-width:600px){
  #main>.landing-hero{padding:36px 16px 26px;gap:18px}
  #main>.landing-hero .hero-title{font-size:clamp(38px,10.5vw,56px);line-height:1.04}
  #main>.landing-hero .hero-actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  #main>.landing-hero .hero-actions .btn{width:100%}
  #main>.landing-hero .workspace-content{grid-template-columns:30px minmax(0,1fr)}
  #main>.landing-hero .workspace-main{padding:13px 9px 10px}
  #main>.landing-hero .workspace-options{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:360px){
  #main>.landing-hero{padding-inline:12px}
  #main>.landing-hero .hero-proof{grid-template-columns:minmax(0,1fr)}
}

/* Keep the model selector readable and clickable in FIZZ's shared composer on narrow screens. */
#chat-app .composer .model-btn { display: inline-flex; flex: 0 0 auto; min-width: max-content; visibility: visible; opacity: 1; pointer-events: auto; }

/* FIZZ integration logo and clarity polish */
.conn .app-mark,.conn-logo { width:28px;height:28px;flex:0 0 28px;object-fit:contain;border-radius:7px; }
.conn .app-mark { padding:3px;background:#fff;border:1px solid var(--border); }
.conn .conn-body small { line-height:1.55; }
.conn .conn-state { overflow-wrap:anywhere; }