:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 97.5%;
  --muted-foreground: 240 3.8% 46.1%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --card: 0 0% 100%;
  --sidebar: 0 0% 100%;
  --chat-user-avatar-text: currentColor;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 18px 55px rgba(0, 0, 0, 0.1);
  --glass-bg: hsl(var(--card) / 0.62);
  --glass-border: hsl(var(--border) / 0.52);
  --glass-highlight: hsl(var(--foreground) / 0.08);
  --glass-shadow: 0 18px 60px hsl(var(--foreground) / 0.08), inset 0 1px 0 hsl(0 0% 100% / 0.42);
  --transition-fast: 95ms cubic-bezier(.2,.8,.2,1);
  --transition-smooth: 220ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.7rem;
  --radius-md: 1rem;
  --radius-lg: 1.75rem;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --card: 240 10% 3.9%;
  --sidebar: 240 10% 2%;
  --glass-bg: hsl(var(--card) / 0.54);
  --glass-border: hsl(0 0% 100% / 0.12);
  --glass-highlight: hsl(0 0% 100% / 0.1);
  --glass-shadow: 0 18px 60px hsl(0 0% 0% / 0.32), inset 0 1px 0 hsl(0 0% 100% / 0.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: hsl(var(--background)); }
html.dark { background: hsl(var(--background)); }
html.accessibility-tiny-text { font-size: 13px; }
html.accessibility-small-text { font-size: 14.5px; }
html.accessibility-large-text { font-size: 17px; }
html.accessibility-extra-large-text { font-size: 18.5px; }
html.accessibility-invert-colors { filter: invert(1) hue-rotate(180deg); }
html.accessibility-invert-colors img,
html.accessibility-invert-colors video,
html.accessibility-invert-colors canvas,
html.accessibility-invert-colors iframe,
html.accessibility-invert-colors svg,
html.accessibility-invert-colors [style*="background-image"] { filter: invert(1) hue-rotate(180deg); }
html.accessibility-high-contrast {
  --muted-foreground: 240 6% 24%;
  --border: 240 8% 34%;
  --glass-border: hsl(var(--foreground) / 0.38);
}
html.dark.accessibility-high-contrast {
  --muted-foreground: 0 0% 88%;
  --border: 0 0% 72%;
  --glass-border: hsl(0 0% 100% / 0.42);
}
html.accessibility-reduce-motion,
html.accessibility-reduce-motion * {
  scroll-behavior: auto !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
body {
  margin: 0;
  min-height: 100vh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.theme-gradient-background body {
  background:
    radial-gradient(circle at 12% 8%, hsl(var(--primary) / 0.18), transparent 32rem),
    radial-gradient(circle at 88% 10%, hsl(var(--secondary) / 0.18), transparent 30rem),
    hsl(var(--background));
}

#root { min-height: 100vh; background: transparent; }

button, input, textarea, select { font: inherit; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast); }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
header.sticky a, header.sticky button, aside button, aside a, .tools-tabs button, [role="tab"], [role="menuitem"], [role="option"] { font-weight: 700; }
header.sticky .truncate, aside h2, aside h3, section h2, section h3, label, .panel-enter h2, .panel-enter h3 { font-weight: 800; }
svg.lucide { stroke-width: 2.55px; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 hsl(var(--foreground) / 0.04)); }
button svg.lucide, a svg.lucide { transition: transform var(--transition-fast), filter var(--transition-fast), stroke-width var(--transition-fast); }
button:hover:not(:disabled) svg.lucide, a:hover svg.lucide { transform: scale(1.06); stroke-width: 2.8px; }
.rounded-md { border-radius: var(--radius-sm) !important; }
.rounded-lg { border-radius: var(--radius-md) !important; }
.rounded-xl { border-radius: 1.15rem !important; }
.rounded-2xl { border-radius: 1.45rem !important; }
.rounded-3xl { border-radius: 1.85rem !important; }
.icon-tile { box-shadow: 0 12px 28px hsl(var(--primary) / 0.24), inset 0 1px 0 hsl(0 0% 100% / 0.24); }
.brand-icon-tile { background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))) !important; color: hsl(var(--primary-foreground)) !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; }
.focus-ring:focus-visible { outline: 2px solid hsl(var(--primary) / 0.4); outline-offset: 2px; }
.interactive-lift:hover:not(:disabled) { transform: translateY(-1px); }
.interactive-lift:active:not(:disabled), button:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.page-enter { animation: fade-slide-up 0.24s var(--transition-smooth) both; }
.panel-enter { animation: fade-slide-up 0.2s var(--transition-smooth) both; }
.message-enter { animation: message-pop 0.18s cubic-bezier(.2,.8,.2,1) both; }
.drawer-enter { animation: slide-right 0.22s var(--transition-smooth) both; }
.backdrop-enter { animation: fade-in 0.14s ease both; }
.dropdown-pop { transform-origin: top center; animation: dropdown-pop 0.16s cubic-bezier(.2,.9,.2,1) both; }
@keyframes fade-slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dropdown-pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes message-pop { from { opacity: 0; transform: scale(0.985) translateY(5px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ai-word-reveal { from { clip-path: inset(0 100% 0 0); opacity: 0.55; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes slide-right { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.float-gentle { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.typing-dot { animation: typing 1.1s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.5); opacity: 1; } }
.chat-scroll { scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.message-enter > div:nth-child(2) { display: flex; flex-direction: column; justify-content: center; padding-top: 0 !important; padding-bottom: 0 !important; }
.message-enter > div:nth-child(2) > .markdown-content { padding-top: 0.42rem; padding-bottom: 0.42rem; }
.message-enter.flex-row-reverse > div:first-child { background-image: var(--chat-user-avatar); background-size: cover; background-position: center; color: var(--chat-user-avatar-text); }
.message-enter.flex-row-reverse > div:nth-child(2) .markdown-content { text-align: start; }
.message-enter:not(.flex-row-reverse) > div:nth-child(2) .markdown-content.ai-new-message { animation: ai-word-reveal 1.05s steps(34, end) both; will-change: clip-path, opacity; }
.message-enter.items-center > div:last-child:has(.typing-dot) { flex-direction: row !important; gap: 0.25rem !important; }
@media (prefers-reduced-motion: reduce) { .message-enter:not(.flex-row-reverse) > div:nth-child(2) .markdown-content.ai-new-message, .dropdown-pop { animation: none; } }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.glass, section[class*="bg-[hsl(var(--card))]"], div[class*="bg-[hsl(var(--card))]"], header.sticky, aside[class*="bg-[hsl(var(--sidebar))]"] { background: var(--glass-bg) !important; border-color: var(--glass-border) !important; -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); box-shadow: var(--glass-shadow); }
.glass, section.rounded-3xl, div.rounded-3xl, div.rounded-2xl, header.sticky, aside { position: relative; }
.glass::before, section.rounded-3xl::before, div.rounded-3xl::before, div.rounded-2xl::before, header.sticky::before, aside::before { content: ''; pointer-events: none; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, hsl(0 0% 100% / 0.22), transparent 42%, hsl(var(--primary) / 0.045)); opacity: 0.65; z-index: 0; }
.glass > *, section.rounded-3xl > *, div.rounded-3xl > *, div.rounded-2xl > *, header.sticky > *, aside > * { position: relative; z-index: 1; }
.message-enter > div:nth-child(2), .sticky.bottom-0 > div > div.relative, [role="menu"], [role="listbox"] { background: hsl(var(--card) / 0.68) !important; border-color: var(--glass-border) !important; -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%); box-shadow: 0 10px 34px hsl(var(--foreground) / 0.08), inset 0 1px 0 hsl(0 0% 100% / 0.24); }
[data-floating-menu="true"] { position: fixed !important; z-index: 2147483647 !important; max-width: calc(100vw - 1.5rem) !important; margin: 0 !important; transform: none !important; translate: none !important; }
[data-floating-menu="true"]::before, [data-floating-menu="true"]::after { display: none !important; }
[data-floating-menu="true"] button::before { display: none !important; }
[data-tts-dropdown="true"] { animation: none !important; transform-origin: initial !important; background: hsl(var(--card)) !important; border: 1px solid hsl(var(--border)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 18px 55px hsl(var(--foreground) / 0.22) !important; }
[data-tts-dropdown="true"] *, [data-tts-dropdown="true"] button { transform: none !important; transition-property: background-color, color, opacity !important; }
[role="listbox"], .tools-fit-menu, .sticky.top-0 .relative > .absolute.left-0.top-12 { animation: dropdown-pop 0.16s cubic-bezier(.2,.9,.2,1) both; transform-origin: top center; margin-top: 0 !important; z-index: 2147483647 !important; }
[role="listbox"] button::before, .tools-fit-menu button::before, .sticky.top-0 .relative > .absolute.left-0.top-12 button::before { content: '✨'; flex: 0 0 auto; margin-right: 0.35rem; opacity: 0.72; }
.message-enter.flex-row-reverse > div:nth-child(2) { background: hsl(var(--muted) / 0.66) !important; }
header.sticky { position: sticky !important; top: 0 !important; z-index: 100 !important; }
.app-shell-header { transition: min-height var(--transition-smooth), opacity var(--transition-smooth), box-shadow var(--transition-smooth), background-color var(--transition-smooth), border-color var(--transition-smooth); }
section.min-w-0 > .page-enter > .sticky.top-0 { top: 3.5rem; z-index: 90 !important; overflow: visible; }
.chat-scroll .message-enter > div:nth-child(2) { background: hsl(var(--card)) !important; border-color: hsl(var(--border)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: var(--shadow-sm) !important; }
.chat-scroll .message-enter.flex-row-reverse > div:nth-child(2) { background: hsl(var(--muted)) !important; }
.chat-scroll .message-enter div.rounded-2xl::before { display: none !important; }
button:hover:not(:disabled), a:hover { filter: saturate(1.08); }
.relative.overflow-hidden:has([role="menu"]) { overflow: visible; z-index: 2147483647; }
[role="menu"] { z-index: 2147483647 !important; width: min(16rem, calc(100vw - 1.5rem)) !important; border-radius: 1.25rem !important; padding: 0.375rem !important; }
[role="menu"] [role="menuitem"] { padding: 0.5rem !important; gap: 0.5rem !important; }
[role="menu"] .max-h-56 { max-height: 10rem !important; }
.tools-page, .tools-page * { min-width: 0; }
.tools-page img, .tools-page svg { max-width: 100%; }
.tools-viewer { width: 100%; contain: layout paint; }
.tools-viewer img { max-height: 100%; }
.tools-fit-menu { width: min(100%, calc(100vw - 1.5rem)); }
.markdown-content > *:first-child { margin-top: 0; }
.markdown-content > *:last-child { margin-bottom: 0; }
.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4 { margin: 0.65em 0 0.25em; font-weight: 800; line-height: 1.2; }
.markdown-content h1 { font-size: 1.25rem; }
.markdown-content h2 { font-size: 1.1rem; }
.markdown-content h3, .markdown-content h4 { font-size: 1rem; }
.markdown-content p, .markdown-content ul, .markdown-content ol, .markdown-content pre, .markdown-content blockquote, .markdown-content table { margin: 0.45em 0; }
.markdown-content ul, .markdown-content ol { padding-left: 1.2rem; }
.markdown-content li + li { margin-top: 0.16rem; }
.markdown-content a { color: hsl(var(--primary)); text-decoration: underline; word-break: break-word; }
.markdown-content strong { font-weight: 800; }
.markdown-content code { border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.75); border-radius: 0.45rem; padding: 0.1rem 0.32rem; font-size: 0.92em; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.markdown-content pre { overflow-x: auto; border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.8); border-radius: 1.1rem; padding: 0.75rem 0.85rem; }
.markdown-content pre code { border: 0; background: transparent; border-radius: 0; padding: 0; display: block; line-height: 1.45; }
.markdown-content blockquote { border-left: 3px solid hsl(var(--primary) / 0.35); margin-left: 0; padding-left: 0.75rem; color: hsl(var(--muted-foreground)); }
.markdown-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.markdown-content th, .markdown-content td { border: 1px solid hsl(var(--border)); padding: 0.45rem 0.6rem; text-align: left; }
.markdown-content th { background: hsl(var(--muted) / 0.6); font-weight: 700; }
[aria-label*="Remix"], [title*="Remix"], a[href*="remix"], button[data-remix], [data-remix], .genmb-remix, #genmb-remix, .remix-in-genmb { display: none !important; visibility: hidden !important; pointer-events: none !important; }
.sticky:has([role="listbox"]), .sticky:has(.absolute.left-0.top-12), .sticky:has([aria-expanded="true"]) { z-index: 2147483646 !important; overflow: visible !important; }
.relative:has(> .tools-fit-menu), .relative:has(> [role="listbox"]), .relative:has(> .absolute.left-0.top-12) { z-index: 2147483646 !important; overflow: visible !important; isolation: isolate; }
section:has(.tools-fit-menu), div.rounded-3xl:has(.tools-fit-menu), div.rounded-2xl:has(.tools-fit-menu), main:has([data-floating-menu="true"]), .tools-page:has(.tools-fit-menu) { overflow: visible !important; z-index: 2147483645 !important; }
.tools-fit-menu, [role="listbox"], [role="menu"], .sticky.top-0 .relative > .absolute.left-0.top-12 { pointer-events: auto !important; isolation: isolate; }
.sticky.top-0 .relative > .absolute.left-0.top-12,
.tools-fit-menu,
[role="listbox"]:not([data-floating-menu="true"]) {
  top: calc(100% + 0.5rem) !important;
  bottom: auto !important;
  left: 0 !important;
  transform: none !important;
  translate: none !important;
  z-index: 2147483647 !important;
  background: linear-gradient(135deg, hsl(var(--card) / 0.98), hsl(var(--muted) / 0.94)) !important;
  border: 1px solid hsl(var(--primary) / 0.25) !important;
  box-shadow: 0 28px 90px hsl(0 0% 0% / 0.38), 0 0 0 1px hsl(0 0% 100% / 0.12) inset !important;
  -webkit-backdrop-filter: blur(26px) saturate(190%) !important;
  backdrop-filter: blur(26px) saturate(190%) !important;
}
.sticky.top-0 .relative > .absolute.left-0.top-12 { top: calc(100% + 0.5rem) !important; }
.tools-fit-menu { right: auto !important; min-width: min(22rem, calc(100vw - 1.5rem)) !important; }
.sticky.top-0 .relative > .absolute.left-0.top-12::before,
.sticky.top-0 .relative > .absolute.left-0.top-12::after,
.tools-fit-menu::before,
.tools-fit-menu::after,
[role="listbox"]::before,
[role="listbox"]::after { display: none !important; content: none !important; }
.sticky.top-0 .relative > .absolute.left-0.top-12 > *,
.tools-fit-menu > *,
[role="listbox"] > * { position: relative !important; z-index: 2147483647 !important; }
.sticky.top-0:has(.absolute.left-0.top-12),
section:has(.tools-fit-menu),
div:has(> .tools-fit-menu),
div:has(> .absolute.left-0.top-12) { overflow: visible !important; }
@media (max-width: 640px) {
  .interactive-lift:hover:not(:disabled) { transform: none; }
  body { overflow-x: hidden; }
  header.sticky { box-shadow: 0 1px 0 hsl(var(--border) / 0.7); }
  section.min-w-0 > .page-enter > .sticky.top-0 { top: 6.55rem; }
  header.sticky > div:first-child { height: 3.25rem; padding-left: 0.5rem; padding-right: 0.5rem; }
  header.sticky nav.grid { gap: 0.25rem; padding: 0.35rem; }
  header.sticky nav.grid a { min-height: 2.55rem; padding: 0.35rem 0.25rem; font-size: 0.68rem; line-height: 1; }
  header.sticky nav.grid svg { width: 0.9rem; height: 0.9rem; }
  .page-enter { animation-duration: 0.18s; }
  .chat-scroll { padding-left: 0.65rem !important; padding-right: 0.65rem !important; }
  .message-enter { gap: 0.5rem !important; }
  .message-enter > div:first-child { width: 1.75rem !important; height: 1.75rem !important; font-size: 0.68rem !important; }
  .message-enter > div:nth-child(2) { max-width: calc(100vw - 4.25rem) !important; border-radius: 1.2rem !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0.65rem !important; padding-right: 0.65rem !important; }
  .message-enter > div:nth-child(2) > .markdown-content { padding-top: 0.42rem; padding-bottom: 0.42rem; }
  .markdown-content { font-size: 0.92rem !important; overflow-wrap: anywhere; }
  .markdown-content pre { max-width: calc(100vw - 5.5rem); padding: 0.65rem; }
  .markdown-content table { max-width: calc(100vw - 5.5rem); }
  textarea { font-size: 16px !important; }
  .sticky.bottom-0 { padding: 0.65rem 0.65rem calc(0.65rem + env(safe-area-inset-bottom)) !important; }
  .sticky.bottom-0 .rounded-3xl { border-radius: 1.4rem !important; }
  .sticky.bottom-0 textarea { max-height: 8.5rem; padding: 0.75rem 0.9rem !important; }
  .sticky.bottom-0 [role="menu"] { left: 0 !important; bottom: 2.9rem !important; max-width: calc(100vw - 1.8rem) !important; }
  .page-enter.p-4, .page-enter.md\:p-8, .page-enter.sm\:p-8 { padding: 0.85rem !important; }
  h1.text-3xl { font-size: 1.55rem !important; line-height: 1.15 !important; }
  .rounded-3xl { border-radius: 1.45rem !important; }
  section.rounded-3xl, .panel-enter.rounded-3xl { padding: 1rem !important; }
  .grid.gap-8, .space-y-8 > :not([hidden]) ~ :not([hidden]) { gap: 1rem !important; }
  .tools-page { padding-left: clamp(0.5rem, 3vw, 0.85rem) !important; padding-right: clamp(0.5rem, 3vw, 0.85rem) !important; }
  .tools-page header > div:first-child { padding: 0.75rem !important; border-radius: 1.2rem !important; }
  .tools-tabs { gap: 0.5rem !important; }
  .tools-tabs button { border-radius: 1.1rem !important; padding: 0.7rem 0.45rem !important; font-size: 0.76rem !important; }
  .tools-tabs svg { width: 0.9rem; height: 0.9rem; }
  .tools-viewer { max-height: min(58vh, 28rem) !important; }
  .tools-history-grid { gap: 0.5rem !important; }
  .tools-fit-menu { max-height: min(18rem, 48vh) !important; }
  .drawer-enter { width: min(94vw, 22rem) !important; }
}
@media (max-width: 380px) {
  .tools-tabs { grid-template-columns: 1fr !important; }
  .tools-tabs button { justify-content: flex-start !important; padding-left: 0.8rem !important; padding-right: 0.8rem; }
  .tools-viewer { min-height: 10rem !important; }
}