const TOTAL_BOXES = 600;const container = document.getElementById('boxesContainer');if (localStorage.getItem('theme')) setTheme(localStorage.getItem('theme'));function setTheme(t) {    document.body.className = t || 'rgb';    localStorage.setItem('theme', t || 'rgb');}for (let i = 1; i <= TOTAL_BOXES; i++) {    const box = document.createElement('div');    box.className = 'script-box';    box.style.animationDelay = `${(i % 40) * 0.06}s`;    box.innerHTML = `        <div class="box-header">            <span>Portal #${i}</span>            <span class="char-count">0 caracteres</span>            <button class="copy-btn" onclick="copyText('script-${i}', this)">📋 Copiar</button>        </div>        <textarea id="script-${i}" placeholder="Flua com a eternidade..."></textarea>    `;    const ta = box.querySelector('textarea');    const cnt = box.querySelector('.char-count');    const saved = localStorage.getItem(`script-${i}`);    if (saved) { ta.value = saved; cnt.textContent = saved.length + ' caracteres'; }    ta.addEventListener('input', () => {        localStorage.setItem(`script-${i}`, ta.value);        cnt.textContent = ta.value.length + ' caracteres';    });    container.appendChild(box);}function copyText(id, btn) {    const ta = document.getElementById(id);    if (ta && ta.value) {        navigator.clipboard.writeText(ta.value).then(() => {            // Feedback visual: Muda o texto e cor do botão temporariamente            const originalText = btn.innerText;            btn.innerText = '✅ Copiado!';            btn.style.backgroundColor = '#00ff00';            btn.style.color = '#000';            // Adiciona classe para animação            btn.classList.add('copied-anim');            setTimeout(() => {                btn.innerText = originalText;                btn.style.backgroundColor = '';                btn.style.color = '';                btn.classList.remove('copied-anim');            }, 2000);        }).catch(err => {            alert('Erro ao copiar: ' + err);        });    } else {        alert('Nada para copiar!');    }}function clearAll() {    if (confirm('Deseja dissolver todos os 600 portais com suavidade?')) {        document.querySelectorAll('textarea').forEach(ta => {            ta.style.transition = 'all 2s ease-out';            ta.value = '';            setTimeout(() => localStorage.removeItem(ta.id), 1000);        });        document.querySelectorAll('.char-count').forEach(c => c.textContent = '0 caracteres');        setTimeout(() => alert('Dissolvido com perfeição.'), 1500);    }}

* { margin:0; padding:0; box-sizing:border-box; }html { scroll-behavior: smooth; }body {    min-height: 100vh;    background: url('https://images.unsplash.com/photo-1495467033336-2c4e4318fabb?ixlib=rb-4.0.3&auto=format&fit=crop&q=90') center/cover fixed;    color: #fff;    font-family: 'Playfair Display', serif;    overflow-x: hidden;    position: relative;    /* Transições globais ultra suaves */    transition: background 3s cubic-bezier(0.16, 1, 0.3, 1),                filter 2s ease-out;}/* Fundo com suavidade extrema */body::before {    content:''; position:fixed; inset:-20%; background:inherit;    filter: blur(35px) brightness(0.7);    animation: breathe 30s infinite alternate;    z-index:-3;    transition: filter 4s cubic-bezier(0.22, 1, 0.36, 1);}body::after {    content:''; position:fixed; inset:0;    background: linear-gradient(135deg, rgba(10,10,40,0.88), rgba(0,20,60,0.75));    backdrop-filter: blur(40px) saturate(200%);    z-index:-2;    transition: background 4s cubic-bezier(0.16, 1, 0.3, 1),                backdrop-filter 3s ease-out;}@keyframes breathe {    0%   { filter: blur(35px) brightness(0.7); }    100% { filter: blur(45px) brightness(1.0); }}/* Ondas de luz ainda mais suaves */.wave {    position: fixed; width: 400px; height: 400px;    background: radial-gradient(circle, rgba(0,255,255,0.12) 0%, transparent 70%);    border-radius: 50%; pointer-events: none; z-index: -1;    animation: float 28s infinite linear;    opacity: 0.6;    transition: opacity 3s ease;}@keyframes float {    0%   { transform: translate(0,0) rotate(0deg); }    100% { transform: translate(100vw, -100vh) rotate(360deg); }}header {    text-align:center; padding:70px 20px; position:sticky; top:0; z-index:100;    backdrop-filter: blur(50px); background:rgba(0,0,0,0.35);    border-bottom:1px solid rgba(255,255,255,0.08);    transition: all 2s cubic-bezier(0.16, 1, 0.3, 1);}h1 {    font-family: 'Cinzel', serif; font-size:5.8em; letter-spacing:10px;    background: linear-gradient(90deg, #00ffff, #ff00ff, #ffff66, #00ffaa);    -webkit-background-clip: text; background-clip:text; color:transparent;    text-shadow: 0 0 80px rgba(0,255,255,0.9);    animation: titleGlow 8s infinite alternate;    transition: text-shadow 4s cubic-bezier(0.16, 1, 0.3, 1);}@keyframes titleGlow {    0%   { text-shadow:0 0 80px rgba(0,255,255,0.9); }    100% { text-shadow:0 0 140px rgba(255,0,255,1), 0 0 180px rgba(0,255,255,0.8); }}.theme-panel {    position:fixed; left:30px; top:150px; width:340px;    background: rgba(15,15,35,0.45);    backdrop-filter: blur(60px);    border: 2px solid rgba(255,255,255,0.12);    border-radius: 36px;    padding:38px; box-shadow: 0 30px 100px rgba(0,0,0,0.7);    animation: panelRise 2.5s cubic-bezier(0.16, 1, 0.3, 1);    transition: all 2s cubic-bezier(0.16, 1, 0.3, 1);}@keyframes panelRise {    0%   { transform:translateY(120px); opacity:0; }    100% { transform:none; opacity:1; }}.theme-btn {    padding:22px 12px; border:none; border-radius:26px;    font-weight:600; color:#fff; cursor:pointer;    backdrop-filter: blur(20px);    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);    box-shadow: inset 0 0 30px rgba(255,255,255,0.15);}.theme-btn:hover {    transform: translateY(-10px) scale(1.1);    box-shadow: 0 30px 60px rgba(0,0,0,0.7), 0 0 60px var(--glow-color);}.container {    max-width:1900px; margin:60px auto; padding:40px; padding-left:420px;    display:grid; grid-template-columns:repeat(auto-fill,minmax(460px,1fr)); gap:38px;    transition: all 2s ease-out;}.script-box {    background: rgba(20,20,50,0.4);    backdrop-filter: blur(60px);    border: 2px solid rgba(255,255,255,0.15);    border-radius: 38px;    overflow:hidden;    box-shadow: 0 25px 80px rgba(0,0,0,0.6);    /* Transições ultra suaves */    transition: all 1.4s cubic-bezier(0.16, 1, 0.3, 1);    animation: boxFadeIn 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;    opacity:0; transform:translateY(60px) scale(0.95);}.script-box:hover {    transform: translateY(-25px) scale(1.06);    border-color: #00ffff;    box-shadow: 0 50px 120px rgba(0,0,0,0.8), 0 0 80px rgba(0,255,255,0.7);}.box-header {    background: linear-gradient(90deg, rgba(0,255,255,0.45), rgba(255,0,255,0.45));    padding:22px 30px; font-size:1.4em;    display:flex; justify-content:space-between;    backdrop-filter: blur(25px);    transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);}textarea {    width:100%; height:280px; padding:30px;    background:transparent; color:#fff; border:none; outline:none;    font-family:'Roboto Mono', monospace; font-size:17px;    resize:vertical; caret-color:#00ffff;    transition: all 1s ease-out;}textarea:focus {    text-shadow: 0 0 15px rgba(0,255,255,0.8);}.fab {    position:fixed; bottom:50px; right:50px; width:100px; height:100px;    background: rgba(0,255,255,0.4); backdrop-filter: blur(40px);    border:4px solid rgba(0,255,255,0.7); border-radius:50%;    color:#fff; font-size:4em; cursor:pointer;    box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 70px rgba(0,255,255,0.8);    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);    z-index:999;}.fab:hover {    transform: scale(1.25) rotate(90deg);    box-shadow: 0 40px 100px rgba(0,0,0,0.9), 0 0 100px rgba(0,255,255,1);}

<!DOCTYPE html><html lang="pt-BR"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Scripts Celestiais</title>    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Roboto+Mono:wght@300;500&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">    <style>        * { margin:0; padding:0; box-sizing:border-box; }        html { scroll-behavior: smooth; }        body {            min-height: 100vh;            background: #000 url('https://images.unsplash.com/photo-1495467033336-2c4e4318fabb?ixlib=rb-4.0.3&auto=format&fit=crop&q=90') center/cover fixed;            color: #fff;            font-family: 'Playfair Display', serif;            overflow-x: hidden;            position: relative;        }        body::before {            content:''; position:fixed; inset:-20%; background:inherit;            filter: blur(35px) brightness(0.7);            animation: breathe 30s infinite alternate;            z-index:-3;        }        body::after {            content:''; position:fixed; inset:0;            background: linear-gradient(135deg, rgba(10,10,40,0.88), rgba(0,20,60,0.75));            backdrop-filter: blur(40px) saturate(200%);            z-index:-2;        }        @keyframes breathe { 0%{filter:blur(35px) brightness(0.7);} 100%{filter:blur(45px) brightness(1.0);} }        header {            text-align:center; padding:70px 20px; position:sticky; top:0; z-index:100;            backdrop-filter: blur(50px); background:rgba(0,0,0,0.35);            border-bottom:1px solid rgba(255,255,255,0.08);        }        h1 {            font-family: 'Cinzel', serif; font-size:5em; letter-spacing:8px;            background: linear-gradient(90deg, #00ffff, #ff00ff, #ffff66, #00ffaa);            -webkit-background-clip: text; background-clip:text; color:transparent;            text-shadow: 0 0 80px rgba(0,255,255,0.9);            animation: titleGlow 8s infinite alternate;        }        @keyframes titleGlow {            0%   { text-shadow:0 0 80px rgba(0,255,255,0.9); }            100% { text-shadow:0 0 140px rgba(255,0,255,1), 0 0 180px rgba(0,255,255,0.8); }        }        .theme-panel {            position:fixed; left:20px; top:120px; width:320px;            background: rgba(15,15,35,0.5);            backdrop-filter: blur(60px);            border: 2px solid rgba(255,255,255,0.12);            border-radius: 36px;            padding:30px; box-shadow: 0 30px 100px rgba(0,0,0,0.7);            z-index:99;        }        .theme-btn {            width:100%; margin:10px 0; padding:18px;            border:none; border-radius:26px; color:#fff;            font-weight:600; cursor:pointer;            transition: all 0.6s ease;        }        .theme-btn:hover { transform: translateY(-5px) scale(1.05); }        .container {            max-width:1900px; margin:60px auto; padding:20px; padding-left:360px;            display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:30px;        }        .script-box {            background: rgba(20,20,50,0.5);            backdrop-filter: blur(60px);            border: 2px solid rgba(0,255,255,0.3);            border-radius: 32px;            overflow:hidden;            box-shadow: 0 25px 80px rgba(0,0,0,0.6);            transition: all 0.8s ease;        }        .script-box:hover {            transform: translateY(-15px) scale(1.03);            border-color: #00ffff;            box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 60px rgba(0,255,255,0.6);        }        .box-header {            background: linear-gradient(90deg, #00ffff, #ff00ff);            padding:18px 24px; font-size:1.3em; color:#fff;            display:flex; justify-content:space-between; align-items:center;        }        .copy-btn {            background: rgba(255,255,255,0.2);            border: none; padding: 8px 16px; border-radius: 20px;            cursor: pointer; font-size: 1.1em;            transition: all 0.4s ease;        }        .copy-btn:hover { background: #00ff00; color: #000; transform: scale(1.1); }        textarea {            width:100%; height:220px; padding:24px;            background:transparent; color:#fff; border:none; outline:none;            font-family:'Roboto Mono', monospace; font-size:16px;            resize:vertical;        }        .fab {            position:fixed; bottom:30px; right:30px; width:70px; height:70px;            background: rgba(0,255,255,0.4); backdrop-filter: blur(30px);            border:3px solid #00ffff; border-radius:50%;            color:#fff; font-size:2.5em; cursor:pointer;            box-shadow: 0 20px 50px rgba(0,0,0,0.7);            z-index:999;        }    </style></head><body>    <header>        <h1>SCRIPTS CELESTIAIS</h1>        <p>600 caixas mágicas • Design supremo • Salva tudo no cosmos do seu navegador</p>    </header>    <div class="theme-panel">        <h3 style="text-align:center; margin-bottom:20px; color:#00ffff">Temas Celestiais</h3>        <button class="theme-btn" style="background:linear-gradient(45deg,#120038,#6e00ff)" onclick="setTheme('dark')">Dark Nebula</button>        <button class="theme-btn" style="background:linear-gradient(45deg,#001a00,#00ff41)" onclick="setTheme('matrix')">Matrix Emerald</button>        <button class="theme-btn" style="background:linear-gradient(45deg,#ff006e,#8330e9)" onclick="setTheme('cyberpunk')">Cyber Glow</button>        <button class="theme-btn" style="background:linear-gradient(45deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)" onclick="setTheme('rgb')">RGB Cosmos</button>        <button class="theme-btn" style="background:linear-gradient(45deg,#ff9a9e,#fad0c4)" onclick="setTheme('candy')">Candy Dream</button>        <button class="theme-btn" style="background:linear-gradient(45deg,#ff512f,#f09819)" onclick="setTheme('sunset')">Sunset Horizon</button>        <button style="margin-top:25px; width:100%; padding:18px; background:#ff0844; border:none; border-radius:26px; color:white; font-weight:bold" onclick="clearAll()">            Apagar o Universo        </button>    </div>    <div class="container" id="boxesContainer"></div>    <button class="fab" onclick="window.scrollTo({top:0,behavior:'smooth'})">Up</button>    <script>        const TOTAL_BOXES = 600;        const container = document.getElementById('boxesContainer');        // Carrega tema salvo        if (localStorage.getItem('theme')) {            document.body.className = localStorage.getItem('theme');        }        function setTheme(t) {            document.body.className = t;            localStorage.setItem('theme', t);        }        // Gera as 600 caixas        for (let i = 1; i <= TOTAL_BOXES; i++) {            const box = document.createElement('div');            box.className = 'script-box';            box.innerHTML = `                <div class="box-header">                    <span>Script Estelar #${i}</span>                    <span class="char-count">0 caracteres</span>                    <button class="copy-btn" onclick="copyText('script-${i}', this)">Copiar</button>                </div>                <textarea id="script-${i}" placeholder="Escreva sua magia cósmica aqui..."></textarea>            `;            const textarea = box.querySelector('textarea');            const counter = box.querySelector('.char-count');            // Carrega conteúdo salvo            const saved = localStorage.getItem(`script-${i}`);            if (saved) {                textarea.value = saved;                counter.textContent = saved.length + ' caracteres';            }            // Salva automaticamente            textarea.addEventListener('input', () => {                localStorage.setItem(`script-${i}`, textarea.value);                counter.textContent = textarea.value.length + ' caracteres';            });            container.appendChild(box);        }        // Função de copiar com feedback visual        function copyText(id, btn) {            const textarea = document.getElementById(id);            if (textarea && textarea.value) {                navigator.clipboard.writeText(textarea.value).then(() => {                    const original = btn.innerText;                    btn.innerHTML = 'Copiado!';                    btn.style.background = '#00ff00';                    btn.style.color = '#000';                    setTimeout(() => {                        btn.innerHTML = original;                        btn.style.background = '';                        btn.style.color = '';                    }, 1500);                });            }        }        function clearAll() {            if (confirm('Tem certeza? Isso apagará TODOS os 600 scripts!')) {                for (let i = 1; i <= TOTAL_BOXES; i++) {                    const ta = document.getElementById(`script-${i}`);                    if (ta) {                        ta.value = '';                        localStorage.removeItem(`script-${i}`);                        ta.parentElement.querySelector('.char-count').textContent = '0 caracteres';                    }                }                alert('Universo purificado!');            }        }        // Mensagem de boas-vindas        setTimeout(() => {            alert('Bem-vindo aos Scripts Celestiais!\nTudo que você digitar será salvo automaticamente.\nUse o botão "Copiar" em cada caixa!');        }, 1000);    </script></body></html>