* {
user-select: none;
}



:root {
--n: linear-gradient(0deg,
#EEE, #CCC, #FFF, #BBB);

}

.supreme {

position: fixed; top: 30px; left: 50%;
flex-direction: row;
width: calc(100% - 10px); transform: translateX(-50%); 
box-sizing: border-box;
background: linear-gradient(0deg, #F00, #500, #900); 
border: 1px solid #F00; color: #fff;
padding: 14px 20px; text-align: center;
font-family: Roboto; font-size: 15px;
font-weight: bold; z-index: 99999;
box-shadow: 0 0 20px 2px #000; overflow: visible; 
isolation: isolate; }

.supreme::before {
content: ""; position: absolute;
top: 0; left: -100%; width: 100%; height: 100%; 
background: linear-gradient(145deg,
transparent 0%, rgba(255, 255, 255, 0.1) 10%,
rgba(255, 0, 0, 0.5) 50%,
rgba(255, 255, 255, 0.1) 70%, transparent 100% ); 
animation: L 5s infinite;
pointer-events: none; z-index: -1; }

.supreme::after {
content: "Essa página contém uma versão obsoleta de código."; 
display: block; position: relative; z-index: 1; }

 
.buck {
display: flex; position: absolute; gap: 5px;
flex-direction: row; left:0; top: 100%; 
}


p {
text-align: justify; 
font-size: 1.2rem;
margin: 10px 0;
font-weight: 500; }





.logo {
position: fixed; top: 50px; left: 50%;
transform: translateX(-50%) scale(1);
transform-origin: center top; width: 250px;
z-index: 1; will-change: transform;
pointer-events: none;
filter: drop-shadow(-10px 2px 20px #000);

}

.logo img {
width: 100%; height: auto; display: block; }

.container {
position: relative; z-index: 2;               
width: calc(100% - 50px);
margin: 300px auto 100px;
max-width: 900px;
min-height: 200vh; background: #fff;
border: 1px solid #000;
padding: 30px 30px;
color: #000;
box-shadow: 0 0 5px 1px #888; }

.container::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
box-shadow: 0 -10px 30px 5px #000; pointer-events: none; }

@media (max-width: 600px) {
.container h1 {
font-size: 1.3rem;
}
}

.container h1 {
justify-content: center; align-content: center;
align-items: center; text-align: center;
width: 100%; height: auto;
border-bottom: 3px solid #090;
border-radius: 30px; padding-bottom: -50%;
margin-bottom: 20px; 
}


#sDebug {
position: absolute; left: 0; top: 0;
transform: scale(0.7) translateY(-160%);
opacity: 0.1;
}

#sDebug .i { transform: scale(1.3); }

#sDebug:hover { opacity: 1; }


.destak-img {
display: none; width: 100%;
max-height: 200px; object-fit: contain;
margin: 10px 0; 
aspect-ratio: 4 / 3; }


.pt-destak {
background: #EEE; padding: 2px;
z-index: 99999;
text-decoration: underline solid #00F 2px;
text-underline-offset: 1px; color: #000;
cursor: pointer; position: relative;
font-weight: 800; transition: all .3s ease; }

.focus-overlay {
position:fixed; top:0; left:0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
z-index: 998;
opacity: 0; visibility: hidden;
transition: all 0.3s ease; z-index: 100; }

.focus-overlay.active {
opacity:1; visibility:visible; }

.foco {
position:fixed; border:1px solid #f00;
box-shadow:0 0 100px 80px #000; 
pointer-events: none; opacity: 0;
transition: all 0.3s ease; z-index: 101; }

.foco.active { opacity: 1; }

.popup {
position:fixed;
background: #000;
padding:5px; 

width: calc(100% - 30px); 
height: auto;

margin-top: 50px;

max-width: 500px;
max-height: calc(100vh - 50%);

overflow: hidden;
border: 1px solid #fff;
box-shadow: 0 0 20px 2px #000;

opacity:0; visibility:hidden;

box-sizing: border-box; 
transition: all 0.3s ease; z-index:102; }


.popup .to {
color:#fff; 
position: absolute; top:3px; right:3px;
}

.popup.active {
opacity: 1;
visibility: visible; }

.pt {
font-size: 1.5rem; font-weight:700;
color:#fff; margin-bottom:12px;
padding-bottom:8px;
text-align: center;
border-bottom: 1px solid #9999; }

.pc {

overflow-y: auto; height: 100%; width: 100%;
overflow-wrap: anywhere;
word-break: break-word;

background: linear-gradient(0deg,
#000, #222, #111, #333, #000);


padding: 10px;

font-size: 1.2rem; 
color:#fff; line-height:1.6; }




.popup.u::before {
bottom: auto; top: -10px; border-top: none;
border-bottom: 10px solid white; }

.hFo { z-index: 500; }
.whitenin { color:#fff !important; }


.clean { text-decoration:none; }







.plate {
background: #000; display: flex;
width: 100%; height: 80px;
justify-content: space-between;
padding: 5px 10px; gap:5px;
margin: 10px 0;
}

.plate img { 
width: auto; max-height: 100%; }

.plate p {
color: #FFF; font-size: 0.8rem; }

.navbar {
position: fixed; display: flex;
transform: translateX(-50%); 
left: 50%; bottom: 30px; z-index: 100;
height: auto; width: calc(100% - 20px);
justify-content: center; align-items: center;
background: var(--n);
max-width: 1000px;
border: 1px solid #000; gap: 5px;
box-shadow: 0 0 30px 1px #000;
padding: 5px; flex-direction: column; 
align-items: stretch; border-radius: 0 0 30px 30px; }




.super-heading {
background: linear-gradient(0deg, #700, #F00);
position: absolute; left: 0; bottom: 100%;
padding: 5px; box-shadow: 0 0 30px 1px #000;
border: 2px solid #000; width: 100%;
box-sizing: border-box; text-align: center;
color: #FFF; overflow: hidden; isolation: isolate; }

.super-heading::before {
content: ""; position: absolute;
top: 0; left: -150%; width: 60%; height: 100%;
background: linear-gradient(45deg,
transparent, #F00, transparent);
animation: L 5s infinite; pointer-events: none;}

@keyframes L { 0% { left: -150%; } 100% { left: 200%; }}

.super-heading.active { height: 400px; }

.super-heading.active::before {
animation: none; display: none; }

.btns {
display: flex; width: 100%; justify-content: center; 
align-items: center; gap: 5px; box-sizing: border-box; } 

.navbar button {
font-weight: 700; color: #fff;
background: linear-gradient(0deg, #050, #090 );
width: 100px; height: 40px; display: flex; } 

.btns button:first-child {
border-radius: 0 0 0 30px; }

.btns button:last-child {
border-radius: 0 0 30px 0; }

.widgets {
position: fixed; display: flex;
transform: translateX(-50%); 
border-radius: 0 0 30px 30px;
top: 0; z-index: 9999; left: 50%; 
height: 50px; width: 100%;
justify-content: center; 
background: var(--n);
max-width: 1000px; border: 1px solid #000; gap: 5px;
box-shadow: 0 0 30px 1px #444; padding: 6px 10px;
flex-direction: row; align-items: stretch; }

.clock-widget {
display: flex; align-items: center;
justify-content: center; min-width: 0;
color: #222; line-height: 1;
white-space: nowrap; overflow: visible;
flex-direction: column;
font-variant-numeric: tabular-nums; }

.clock-time {
font-size: 1.2rem; font-weight: 900;
letter-spacing: .05em; padding:0; margin:0; }

.clock-date {
white-space: nowrap;
overflow: hidden; font-size: .8rem; font-weight: 600;
text-overflow: ellipsis; text-transform: capitalize; }

.clock-colon {
animation: blink-colon 2s steps(2, start) infinite; } 

@keyframes blink-colon { to { visibility: hidden; } }


#home {
padding-bottom: 50px; 
position: relative; width: 100%; min-height: 100vh;
display: flex; top: 0; left: 0; 
background: repeating-linear-gradient(0deg, 
rgba(0,0,0,0) 0, rgba(0,0,0, 0.05) 9px,
transparent 10px),
linear-gradient(0deg, #BBB, #FFF, #EEE); }


/* Default Button */
button {
display: inline-block; position: relative;
overflow: hidden; padding: 10px 15px;
border: 1px solid #080808; border-radius: 10px;
outline: none; color: #fff;
font-weight: 700; line-height: 1.4;
text-shadow: 0 -1px 1px #000; margin: 5px 0 5px 0;
align-items: center; justify-content: center;
gap: 8px; box-sizing: border-box;
background: linear-gradient(to bottom,
#888 0%, #555 18%,
#333 48%,
#171717 52%, #292929 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset,
0 -1px 0 rgba(0, 0, 0, 0.8) inset,
0 3px 6px rgba(0, 0, 0, 0.45);
transition: transform 0.2s ease, box-shadow 0.2s ease; }

button::before {
content: ""; position: absolute; inset: 1px 2px 50%;
border-radius: 8px 8px 50% 50%;
background: linear-gradient(to bottom,
rgba(255, 255, 255, 0.65),
rgba(255, 255, 255, 0.12) 70%,
transparent);
pointer-events: none; }

button:active {
transform: translateY(2px);
background: linear-gradient(to bottom,
#000, #222, #111);
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.7) inset,
0 1px 0 rgba(255, 255, 255, 0.2); }

button.R, .url.R {
background: linear-gradient(to bottom,
#f99 0%, #e44 18%, #b22 48%,
#f00 52%, #a33 100%); }

button.G, .url.G {
background: linear-gradient(to bottom,
#9D9 0%, #4A4 18%, #090 48%,
#070 52%, #2F2 100%); }

button.B, .url.B {
background: linear-gradient(to bottom,
#99f 0%, #44e 18%, #22b 48%,
#00f 52%, #339 100%); }

button.Y, .url.Y {
background: linear-gradient(to bottom,
#fff7a3 0%, #ffee33 18%, #ffdf00 48%,
#ffd000 52%, #ffea66 100%); }

button.i, .url.i {
pointer-events: none;
filter: brightness(.4); }

.url {
display: inline-flex; position: relative;
overflow: hidden; padding: 10px 15px;
border: 1px solid #080808; border-radius: 10px;
outline: none; color: #fff; font: inherit;
font-weight: 700; line-height: 1.4;
text-shadow: 0 -1px 1px #000; text-decoration: none;
margin: 5px 0; align-items: center;
justify-content: center; gap: 5px;
box-sizing: border-box;
background: linear-gradient(to bottom,
#888 0%, #555 18%, #333 48%,
#171717 52%, #292929 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.55) inset,
0 -1px 0 rgba(0, 0, 0, 0.8) inset,
0 3px 6px rgba(0, 0, 0, 0.45);
transition: transform 0.2s ease,
box-shadow 0.2s ease; }

.url::before {
content: ""; position: absolute; inset: 1px 2px 50%;
border-radius: 8px 8px 50% 50%;
background: linear-gradient(to bottom,
rgba(255, 255, 255, 0.65),
rgba(255, 255, 255, 0.12) 70%, transparent);
pointer-events: none; }

.url:active {
transform: translateY(2px);
background: linear-gradient(to bottom,
#222, #111);
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.7) inset,
0 1px 0 rgba(255, 255, 255, 0.2); }

.url:focus-visible {
outline: 2px solid #7ab7ff; outline-offset: 3px; }

.url::after {
content: ""; width: 30px; height: 30px; flex: 0 0 auto;
position: absolute; box-sizing: border-box;
border: 5px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff; border-radius: 50%;
opacity: 0; animation: url-spin 0.7s linear infinite;
transition: opacity 0.15s ease, transform 0.15s ease;
pointer-events: none; }

.url:active::after, .url:focus::after {
opacity: 1; animation: url-spin .5s linear infinite; }

.url:active::before, .url:focus::before {
position: absolute; width: 100%; height: 100%;
left:0; top:0; 
background: linear-gradient(0deg,
#555 0%, #222 18%, #111 48%,
#000 52%, #333 100%); }

@keyframes url-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); } }

.pgProgr {
position: absolute;
left: 50%; bottom: 0; width: 80%; height: 7px;
transform: translate(-50%, 200%);
background: rgba(0, 0, 0, .3);

overflow: hidden; pointer-events: none; z-index: 1; }

.pgScrF {
height: 100%; width: 0%;
background: linear-gradient(0deg,
#E00, #C00, #F00);
box-shadow: 0 0 10px 1px #000;
will-change: width; transform-origin: left top; }

.pgScrF.blink {
animation: blink .2s infinite; }

@keyframes blink {
0%, 100% { background: linear-gradient(0deg,
#000, #999); }
50% { background: linear-gradient(0deg,
#F00, #900); } }

.dropdown {
position: absolute; bottom: calc(100% + 10px);
left: 0; min-width: 220px; max-width: 90vw;
padding: 5px; background: #fff;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 0 30px 1px #000;
z-index: 1000; opacity: 0;
transform: translate(-50%, -5px) scale(.1);
transform-origin: bottom center;
pointer-events: none; transition: transform .1s ease; }






.LBi {
left: 0; top: 0;
color: #fff; font-size: 1rem; font-weight: 700;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
background: linear-gradient(180deg,
#F00 0%, #700 45%, #900 100% );
border: 1px solid rgba(135, 0, 0, 0.65);
padding: 5px 10px;
box-shadow:
inset 0 2px 2px rgba(255, 255, 255, 0.72),
inset 0 -3px 5px rgba(105, 0, 0, 0.35),
0 3px 6px rgba(0, 0, 0, 0.35); }


.dropdown.open {
opacity: 1; pointer-events: auto;
transform: translate(-50%, 0) scale(1); }

.menu-item {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 10px 12px; border: 0;
border-radius: 10px; background: transparent;
font: inherit; color: inherit; text-align: left;
cursor: pointer; text-decoration: none;
transition: background .1s ease; }

.menu-item.active { background: rgba(0,0,0,.09); }

.btns button.active {
position: relative; isolation: isolate;
background: linear-gradient(0deg, #0F0, #040);
overflow: hidden; transform: translateY(-30%);
box-shadow: 5px 10px 30px 1px #000; }


body.openStt { overflow: hidden; }

.modalOverlay {
position: fixed; inset: 0;
background: rgba(0 0 0 / 0.8); z-index: 9995;
display: flex; align-items: center;
justify-content: center; padding: 15px; }

.sttModal {
box-sizing: border-box; position: relative;         
width: min(700px, calc(100% - 30px));  
max-height: 85vh; display: flex;
flex-direction: column; background: #ffffff;
color: #1f2937; border: 1px solid #e5e7eb;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
overflow: visible; z-index: 9999; }

.sttModal .settH {
flex: 0 0 auto; padding: 20px 24px;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb; }

.sttModal #tip {
position: absolute; display: flex;
top: 0; right: ; opacity: 0.2;
width: 100%; height: 20px; font-weight: 700;
font-size: 20px; color: #FFF;
transform: translateY(-150%); }

.sttModal #popupTitle {
margin: 0; font-size: 22px; font-weight: 600;
color: #111827; }

.sttModal #popupBody {
flex: 1 1 auto; min-height: 0;              
display: flex; flex-direction: column;     
padding: 0; overflow: hidden;
background: linear-gradient(0deg,
#000 1%, transparent 5%,
transparent 95%, #000 100%); }

.sttModal .scroll {
flex: 1 1 auto; min-height: 0;
width: 100%; padding: 24px;              
box-sizing: border-box; text-align: justify;
overflow-y: auto; overflow-x: hidden; }

.sttModal .settF {
flex: 0 0 auto; padding: 16px 24px;
background: #f9fafb; border-top: 1px solid #e5e7eb;
font-size: 14px; color: #6b7280; }

@media (max-width: 480px) {
.sttModal .settH { padding: 16px; }
.sttModal #popupTitle { font-size: 19px; }
.sttModal #popupBody { padding: 0; }
.sttModal .scroll { padding: 16px; }
.sttModal .settF { padding: 12px 16px; } }

marquee {
border-right: 5px solid #000;
border-left: 5px solid #000;
background: linear-gradient(90deg,
#999 0%, transparent 5%,
transparent 95%, #999 100%); }

.card {
position: relative; isolation: isolate;
overflow: visible; width: 100%; height: 200px;
margin-bottom: 30px;
border: 3px solid #26343b;
box-shadow: inset 0 -5px 10px #000; }

.card img {
width: 100%; height: 100%;
 }

.bar {
position: absolute; z-index: 1; left: 16px; right: 16px;
bottom: -10%; min-height: 50px; height: auto;
display: grid; place-items: center;
color: #fff; font-size: 2rem; font-weight: 700;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
background: linear-gradient(180deg,
#F00 0%, #700 45%, #900 100% );
border: 1px solid rgba(135, 0, 0, 0.65);
border-radius: 8px;
box-shadow:
inset 0 2px 2px rgba(255, 255, 255, 0.72),
inset 0 -3px 5px rgba(105, 0, 0, 0.35),
0 3px 6px rgba(0, 0, 0, 0.35); }

@media (max-width: 600px) {
.bar {
font-size: 1.3rem;
}
}


.at {
position: absolute; line-height: 1;
font-family: "Times New Roman", sans-serif;
z-index: 1; color: #fff; font-size: 50px;
-webkit-text-stroke: 1px #000;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.8),
1px 2px 2px rgba(0, 0, 0, 0.35); }

.at.left { left: 0; top: -25%; }

.at.right { right: 0; bottom: -70%; }


#wR {
position: fixed; background: rgba(0, 0, 0, 0.9);
inset: 0; display: none; z-index: 99999;
align-items: center; justify-content: center; }

#CtC {
background: linear-gradient(0deg,
#000, #111);
border: 5px inset #999; color: #FFF;
width: 90%; max-width: 600px; max-height: 80vh;
overflow-y: auto; padding: 20px; }

#CtC h2 {
margin-top: 0; color: #990000; text-align: center; }

.eE {
background: #222; padding: 10px; margin: 10px 0;
border-left: 5px solid #F00; overflow-wrap: anywhere;
white-space: pre-wrap; }