Brunobkr/llama.cpp_AlgMor24_github

1@import 'tailwindcss';2@source '.';3@plugin '@tailwindcss/forms';4@plugin '@tailwindcss/typography';5@import 'tw-animate-css';6@custom-variant dark (&:is(.dark *));7 8/* =========================================================9   ΩFFFΣLLIa • llama.cpp • AlgMor2410   Tema Cyberpunk "Fogo Neon" — vermelho/laranja incandescente,11   dourado de chama e ciano dos olhos brilhantes. ᚠ  Ω Σ12   ========================================================= */13 14:root {15  --radius: 0.625rem;16 17  /* ===== Identidade da foto: nomes & símbolos ===== */18  --brand-omega: 'ΩFFFΣLLIa';19  --brand-llama: 'llama.cpp';20  --brand-algmor: 'AlgMor24';21  --rune-omega: 'Ω';22  --rune-sigma: 'Σ';23  --rune-fehu: 'ᚠ';   /* runa de fogo da foto */24  --rune-perthro: 'ᛈ'; /* runa dos cards flamejantes */25 26  /* Fire Neon Palette - Light Theme */27  --background: oklch(0.96 0.02 80);28  --foreground: oklch(0.2 0.06 25);29  --card: oklch(0.98 0.015 80);30  --card-foreground: oklch(0.2 0.06 25);31  --popover: oklch(0.98 0.015 80);32  --popover-foreground: oklch(0.2 0.06 25);33  /* Primary - Flame Orange Neon */34  --primary: oklch(0.62 0.22 45);35  --primary-foreground: oklch(0.98 0.02 80);36  /* Secondary - Ember Red */37  --secondary: oklch(0.55 0.24 25);38  --secondary-foreground: oklch(0.98 0.02 80);39  --muted: oklch(0.9 0.03 80);40  --muted-foreground: oklch(0.5 0.08 25);41  /* Accent - Molten Gold */42  --accent: oklch(0.6 0.2 80);43  --accent-foreground: oklch(0.98 0.02 80);44  --destructive: oklch(0.55 0.26 25);45  --border: oklch(0.82 0.06 45);46  --input: oklch(0.86 0.05 45);47  --ring: oklch(0.62 0.22 45);48  /* Símbolos de chama (cores da foto) */49  --flame: oklch(0.62 0.22 45);  /* laranja neon */50  --ember: oklch(0.55 0.24 25);  /* vermelho brasa */51  --gold: oklch(0.7 0.16 85);    /* dourado de chama */52  --eye: oklch(0.6 0.12 220);    /* ciano dos olhos */53  /* Chart Colors - Fire Spectrum */54  --chart-1: oklch(0.62 0.22 45);  /* Flame */55  --chart-2: oklch(0.55 0.24 25);  /* Ember */56  --chart-3: oklch(0.7 0.16 85);   /* Gold */57  --chart-4: oklch(0.6 0.12 220);  /* Eye Cyan */58  --chart-5: oklch(0.45 0.2 25);   /* Deep Red */59  --sidebar: oklch(0.97 0.015 80);60  --sidebar-foreground: oklch(0.2 0.06 25);61  --sidebar-primary: oklch(0.62 0.22 45);62  --sidebar-primary-foreground: oklch(0.98 0.02 80);63  --sidebar-accent: oklch(0.92 0.04 80);64  --sidebar-accent-foreground: oklch(0.2 0.06 25);65  --sidebar-border: oklch(0.85 0.05 45);66  --sidebar-ring: oklch(0.62 0.22 45);67  /* Code Block - carvão com texto flamejante */68  --code-background: oklch(0.14 0.03 25);69  --code-foreground: oklch(0.8 0.2 80);70  --font-mono:71    ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,72    'Liberation Mono', Menlo, monospace;73  --layer-popover: 1000000;74  --chat-form-area-height: 8rem;75  --chat-form-area-offset: 2rem;76  --chat-form-padding-top: 6rem;77  --max-message-height: max(24rem, min(80dvh, calc(100dvh - var(--chat-form-area-height) - 12rem)));78}79 80@media (min-width: 640px) {81  :root {82    --chat-form-area-height: 24rem;83    --chat-form-area-offset: 12rem;84    --chat-form-padding-top: 6rem;85  }86}87 88.dark {89  /* ===== Cyberpunk Fogo Neon - Dark Theme (Principal) ===== */90  --background: oklch(0.13 0.03 25);91  --foreground: oklch(0.96 0.02 80);92  --card: oklch(0.17 0.04 25);93  --card-foreground: oklch(0.96 0.02 80);94  --popover: oklch(0.17 0.04 25);95  --popover-foreground: oklch(0.96 0.02 80);96  /* Primary - Flame Orange Neon (#FF6A00 eq.) */97  --primary: oklch(0.72 0.28 45);98  --primary-foreground: oklch(0.12 0.03 25);99  /* Secondary - Ember Red (#FF2A00 eq.) */100  --secondary: oklch(0.62 0.28 25);101  --secondary-foreground: oklch(0.98 0.02 80);102  --muted: oklch(0.26 0.05 25);103  --muted-foreground: oklch(0.7 0.08 45);104  /* Accent - Molten Gold */105  --accent: oklch(0.8 0.22 85);106  --accent-foreground: oklch(0.15 0.04 80);107  --destructive: oklch(0.65 0.28 25);108  --border: oklch(0.38 0.1 25);109  --input: oklch(0.22 0.05 25);110  --ring: oklch(0.72 0.28 45);111  /* Símbolos de chama (cores da foto) */112  --flame: oklch(0.72 0.28 45);113  --ember: oklch(0.62 0.28 25);114  --gold: oklch(0.85 0.2 90);115  --eye: oklch(0.78 0.18 220); /* olhos ciano incandescentes */116  /* Chart Colors - Fire Spectrum + Eye Cyan */117  --chart-1: oklch(0.72 0.28 45);  /* Flame Neon */118  --chart-2: oklch(0.62 0.28 25);  /* Ember Red */119  --chart-3: oklch(0.85 0.2 90);   /* Molten Gold */120  --chart-4: oklch(0.78 0.18 220); /* Eye Cyan */121  --chart-5: oklch(0.5 0.25 25);   /* Deep Blood Red */122  --sidebar: oklch(0.11 0.03 25);123  --sidebar-foreground: oklch(0.96 0.02 80);124  --sidebar-primary: oklch(0.72 0.28 45);125  --sidebar-primary-foreground: oklch(0.12 0.03 25);126  --sidebar-accent: oklch(0.24 0.07 25);127  --sidebar-accent-foreground: oklch(0.96 0.02 80);128  --sidebar-border: oklch(0.3 0.08 25);129  --sidebar-ring: oklch(0.72 0.28 45);130  /* Code Block - carvão com brasas douradas */131  --code-background: oklch(0.11 0.03 25);132  --code-foreground: oklch(0.85 0.2 90);133}134 135@theme inline {136  --radius-sm: calc(var(--radius) - 4px);137  --radius-md: calc(var(--radius) - 2px);138  --radius-lg: var(--radius);139  --radius-xl: calc(var(--radius) + 4px);140  --color-background: var(--background);141  --color-foreground: var(--foreground);142  --color-card: var(--card);143  --color-card-foreground: var(--card-foreground);144  --color-popover: var(--popover);145  --color-popover-foreground: var(--popover-foreground);146  --color-primary: var(--primary);147  --color-primary-foreground: var(--primary-foreground);148  --color-secondary: var(--secondary);149  --color-secondary-foreground: var(--secondary-foreground);150  --color-muted: var(--muted);151  --color-muted-foreground: var(--muted-foreground);152  --color-accent: var(--accent);153  --color-accent-foreground: var(--accent-foreground);154  --color-destructive: var(--destructive);155  --color-border: var(--border);156  --color-input: var(--input);157  --color-ring: var(--ring);158  --color-chart-1: var(--chart-1);159  --color-chart-2: var(--chart-2);160  --color-chart-3: var(--chart-3);161  --color-chart-4: var(--chart-4);162  --color-chart-5: var(--chart-5);163  --color-sidebar: var(--sidebar);164  --color-sidebar-foreground: var(--sidebar-foreground);165  --color-sidebar-primary: var(--sidebar-primary);166  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);167  --color-sidebar-accent: var(--sidebar-accent);168  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);169  --color-sidebar-border: var(--sidebar-border);170  --color-sidebar-ring: var(--sidebar-ring);171  /* Cores-símbolo da foto como utilitários Tailwind (text-flame, bg-ember...) */172  --color-flame: var(--flame);173  --color-ember: var(--ember);174  --color-gold: var(--gold);175  --color-eye: var(--eye);176  /* Animações nativas do tema */177  --animate-flicker: flicker 3s linear infinite;178  --animate-ember-rise: ember-rise 7s linear infinite;179  --animate-pulse-fire: pulse-fire 2.2s ease-in-out infinite;180  --animate-gradient-x: gradient-x 6s ease infinite;181}182 183/* ================= KEYFRAMES DOS EFEITOS ================= */184 185@keyframes flicker {186  0%, 100% { opacity: 1; }187  6% { opacity: 0.85; }188  9% { opacity: 1; }189  38% { opacity: 1; }190  40% { opacity: 0.5; }191  42% { opacity: 1; }192  71% { opacity: 0.75; }193  73% { opacity: 1; }194}195 196@keyframes ember-rise {197  0% { transform: translateY(0) scale(1); opacity: 0; }198  8% { opacity: 1; }199  100% { transform: translateY(-90vh) scale(0.3); opacity: 0; }200}201 202@keyframes gradient-x {203  0%, 100% { background-position: 0% 50%; }204  50% { background-position: 100% 50%; }205}206 207@keyframes pulse-fire {208  0%, 100% {209    box-shadow: 0 0 6px var(--ember), 0 0 14px var(--flame), 0 0 28px var(--flame);210  }211  50% {212    box-shadow: 0 0 12px var(--gold), 0 0 26px var(--flame), 0 0 48px var(--ember);213  }214}215 216@keyframes scan {217  0% { transform: translateY(-100%); }218  100% { transform: translateY(100vh); }219}220 221@layer base {222  * {223    @apply border-border outline-ring/50;224  }225  body {226    @apply bg-background text-foreground;227    scrollbar-width: thin;228    scrollbar-gutter: stable;229    /* Fundo com brasas ambientes + grade sutil */230    background-image:231      radial-gradient(ellipse at 50% 115%, oklch(0.3 0.12 25 / 0.35), transparent 60%),232      radial-gradient(ellipse at 85% -10%, oklch(0.25 0.06 220 / 0.18), transparent 55%);233  }234  /* Scanlines CRT + vinheta (overlay global da foto) */235  body::before {236    content: '';237    position: fixed;238    inset: 0;239    pointer-events: none;240    z-index: 999990;241    background:242      repeating-linear-gradient(0deg, oklch(0 0 0 / 0.22) 0 1px, transparent 1px 3px),243      radial-gradient(ellipse at center, transparent 55%, oklch(0.08 0.03 25 / 0.55) 100%);244    opacity: 0.35;245  }246  /* Brilho de fogo inferior + reflexo ciano dos olhos */247  body::after {248    content: '';249    position: fixed;250    inset: 0;251    pointer-events: none;252    z-index: 999990;253    background:254      radial-gradient(circle at 50% 120%, var(--ember), transparent 70%),255      radial-gradient(circle at 12% 8%, oklch(0.78 0.18 220 / 0.12), transparent 40%);256    opacity: 0.22;257    mix-blend-mode: screen;258  }259  ::selection {260    background: var(--flame);261    color: var(--background);262    text-shadow: 0 0 8px var(--gold);263  }264  /* Scrollbar cor de fogo */265  * {266    scrollbar-width: thin;267    scrollbar-color: transparent transparent;268  }269  *:hover {270    scrollbar-color: var(--flame) transparent;271  }272  *::-webkit-scrollbar {273    width: 6px;274    height: 6px;275  }276  *::-webkit-scrollbar-track {277    background: transparent;278  }279  *::-webkit-scrollbar-thumb {280    background: transparent;281    border-radius: 3px;282    transition: background 0.2s ease;283  }284  *:hover::-webkit-scrollbar-thumb {285    background: var(--flame);286  }287  *::-webkit-scrollbar-thumb:hover {288    background: var(--gold);289  }290  :where(code, pre, kbd, samp) {291    font-family: var(--font-mono);292  }293}294 295@layer utilities {296  .scrollbar-hide {297    &::-webkit-scrollbar {298      display: none;299    }300    -ms-overflow-style: none;301    scrollbar-width: none;302  }303 304  /* ===== Neon Glow Effects (fogo da foto) ===== */305  .neon-flame {306    box-shadow: 0 0 5px var(--flame), 0 0 10px var(--flame), 0 0 20px var(--ember),307      0 0 40px var(--ember);308  }309  .neon-ember {310    box-shadow: 0 0 5px var(--ember), 0 0 10px var(--ember), 0 0 20px var(--ember);311  }312  .neon-gold {313    box-shadow: 0 0 5px var(--gold), 0 0 10px var(--gold), 0 0 20px var(--flame);314  }315  .neon-eye {316    box-shadow: 0 0 5px var(--eye), 0 0 10px var(--eye), 0 0 20px var(--eye);317  }318  /* Legado (remapeado p/ fogo) */319  .neon-cyan { box-shadow: 0 0 5px var(--flame), 0 0 10px var(--flame), 0 0 20px var(--flame); }320  .neon-magenta { box-shadow: 0 0 5px var(--ember), 0 0 10px var(--ember), 0 0 20px var(--ember); }321  .neon-purple { box-shadow: 0 0 5px var(--gold), 0 0 10px var(--gold), 0 0 20px var(--gold); }322 323  .text-glow-fire {324    text-shadow: 0 0 10px var(--flame), 0 0 20px var(--ember), 0 0 40px var(--ember);325  }326  .text-glow-gold {327    text-shadow: 0 0 10px var(--gold), 0 0 20px var(--flame);328  }329  .text-glow-eye {330    text-shadow: 0 0 10px var(--eye), 0 0 20px var(--eye);331  }332  .text-glow-cyan { text-shadow: 0 0 10px var(--flame), 0 0 20px var(--flame); }333  .text-glow-magenta { text-shadow: 0 0 10px var(--ember), 0 0 20px var(--ember); }334 335  /* Texto em chamas com gradiente animado */336  .fire-text {337    background-image: linear-gradient(90deg, var(--gold), var(--flame), var(--ember), var(--gold));338    background-size: 200% auto;339    background-clip: text;340    -webkit-background-clip: text;341    color: transparent;342    animation: gradient-x 4s linear infinite;343    filter: drop-shadow(0 0 8px var(--flame));344  }345 346  /* Grade ciberpunk vermelha */347  .cyber-grid {348    background-image:349      linear-gradient(oklch(0.62 0.28 25 / 0.12) 1px, transparent 1px),350      linear-gradient(90deg, oklch(0.62 0.28 25 / 0.12) 1px, transparent 1px);351    background-size: 32px 32px;352  }353 354  /* Card-runas flutuantes (como os cards ᚠ da foto) */355  .rune-card {356    border: 1px solid oklch(0.72 0.28 45 / 0.6);357    background: oklch(0.17 0.05 25 / 0.6);358    backdrop-filter: blur(8px);359    box-shadow: 0 0 12px oklch(0.62 0.28 25 / 0.5), inset 0 0 12px oklch(0.72 0.28 45 / 0.25);360    animation: flicker 4s linear infinite;361  }362 363  /* ===== Símbolos da foto (Ω Σ ᚠ ᛈ) ===== */364  .sym-omega::before,365  .sym-sigma::before,366  .sym-fehu::before,367  .sym-perthro::before {368    display: inline-block;369    margin-right: 0.4em;370    color: var(--flame);371    text-shadow: 0 0 8px var(--ember), 0 0 16px var(--flame);372    animation: flicker 3.5s linear infinite;373  }374  .sym-omega::before { content: var(--rune-omega); }375  .sym-sigma::before { content: var(--rune-sigma); }376  .sym-fehu::before { content: var(--rune-fehu); }377  .sym-perthro::before { content: var(--rune-perthro); }378 379  /* ===== Nomes da foto como marcas d'água/tags ===== */380  .brand-omega::before { content: var(--brand-omega); }381  .brand-llama::after { content: var(--brand-llama); }382  .brand-algmor::after { content: var(--brand-algmor); }383  .brand-omega::before,384  .brand-llama::after,385  .brand-algmor::after {386    font-family: var(--font-mono);387    letter-spacing: 0.15em;388    color: var(--gold);389    text-shadow: 0 0 6px var(--flame), 0 0 18px var(--ember);390  }391 392  /* Glitch ciberpunk (vermelho + ciano dos olhos) — usar com data-text */393  .glitch {394    position: relative;395  }396  .glitch::before,397  .glitch::after {398    content: attr(data-text);399    position: absolute;400    inset: 0;401    pointer-events: none;402  }403  .glitch::before {404    color: var(--ember);405    clip-path: inset(0 0 55% 0);406    transform: translate(-2px, -1px);407    opacity: 0.8;408    animation: flicker 2.7s linear infinite;409  }410  .glitch::after {411    color: var(--eye);412    clip-path: inset(45% 0 0 0);413    transform: translate(2px, 1px);414    opacity: 0.8;415    animation: flicker 3.3s linear infinite reverse;416  }417}418 419.mermaidTooltip {420  display: none !important;421}