
:root {
    --0: rgb(0 0 0 / 0);
    --a: rgb(58 143 234);
    --aa: rgb(0 66 189);
    --a: rgb(57, 83, 120);
    --aa: rgb(169, 181, 203);
    --aat: rgb(57 83 120 / 34%);
    --aaa: linear-gradient(0deg, rgb(0, 0, 0) -83%, rgb(102, 102, 102) 100%);
    --b: rgb(235,236,238);
    --bt: rgb(255, 255, 255);
    --b-t: rgb(255 255 255 / 77%);
    --tb: linear-gradient(180deg, rgb(230 230 230), transparent, transparent);
    --c: rgb(54, 59, 69);
    --cb: #1e314f;
    --c0: #04152563;
    --c1: rgb(112, 117, 129);
    --bc: rgb(200, 200, 200);
    --bg: rgb(244 244 244 / 44%);
    --hover: linear-gradient(90deg, rgb(0 0 0 / 1%), rgb(0 0 0 / 4%), rgb(0 0 0 / 4%), rgb(0 0 0 / 4%), rgb(0 0 0 / 1%));
    --b-t22: rgb(255 255 255 / 22%);
    --b-t44: rgb(255 255 255 / 44%);
    --b-t77: rgb(255 255 255 / 77%);
    --b-t88: rgb(255 255 255 / 88%);
    --b-t95: rgb(255 255 255 / 95%);
    --bor: rgb(63 63 63 / 30%);
    --btn: linear-gradient(333deg, var(--a), var(--aa));
    --btn1: linear-gradient(333deg, var(--a), var(--aa));
    --btn2: linear-gradient(333deg, var(--a), var(--aa));
    --btn3: linear-gradient(333deg, var(--a), var(--aa));
    --btn4: linear-gradient(333deg, var(--a), var(--aa));
    --bt-bx: 0 0px 5px 0px rgb(0 0 0 / 6%);
    --bt-b: rgba(103, 109, 124, 0.12) 0px 1px 1px 0px, rgba(103, 109, 124, 0.1) 0px 2px 4px 0px, rgba(103, 109, 124, 0.08) 0px 4px 12px 0px;
    --bs: 0px 0px 1px 0px rgb(0 0 0 / 22%);
    --bss: 0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%), inset 0 -2px 6px 0 rgb(10 37 64 / 35%);
    --bs-b: inset 0 -7px 11px 0px rgb(0 0 0 / 2%), inset 0 4px 7px 0px rgb(0 0 0 / 2%), 0 2px 3px rgb(0 0 0 / 4%), 0 -1px 2px rgb(0 0 0 / 4%), 1px 0 2px rgb(0 0 0 / 4%), -1px 0 2px rgb(0 0 0 / 4%);
    --bs-pp: .14em .14em .2em rgba(164, 164, 186, .2);
    --bs-bb: inset 0 -15px 22px 0px rgb(0 0 0 / 7%), inset 0 1px 4px 0px rgb(0 0 0 / 7%), 0 1px 2px rgb(0 0 0 / 11%);
    --bs-bs: inset 0 -7px 11px 0px rgb(0 0 0 / 4%), inset 0 1px 4px 0px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 4%);
    --bs-bs: inset 0 -7px 11px 0px rgb(0 0 0 / 2%), inset 0 1px 4px 0px rgb(0 0 0 / 2%), 0 1px 2px rgb(0 0 0 / 2%);
    --bs-bs: inset 0 -7px 11px 0px rgb(0 0 0 / 1%), inset 0 1px 4px 0px rgb(0 0 0 / 1%), 0 1px 2px rgb(0 0 0 / 1%);
    --bs-bt: inset 0 0px 4px 0px rgb(0 0 0 / 11%), 0 7px 11px rgb(0 0 0 / 11%);
    --bs-bl: inset 0 -4px 7px 0px rgb(0 0 0 / 11%), inset 0 1px 7px 0px rgb(0 0 0 / 11%), 0 7px 11px rgb(0 0 0 / 11%);
    --bs-br: 0px 4px 7px 0px rgb(215 215 215), inset 0px 0px 56px 0px rgb(222 228 240);
    --lg: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
    --lg1: linear-gradient(90deg, rgba(0, 255, 255, 0.05), rgba(0, 255, 255, 0.10), rgba(0, 255, 255, 0.05));
    --lg-bl: linear-gradient(123deg, rgb(103 58 183 / 22%), rgb(3 169 244 / 22%), rgb(0 222 111 / 22%), rgb(3 169 244 / 22%));
    --lg-b: linear-gradient(90deg, #002bdc88, #32ded488);
    --lg-b1: linear-gradient(128.84deg, #0f6cbd 20.46%, #3c45ab 72.3%);
}

* { text-decoration: none; }
:root { --swiper-theme-color: #007aff; }

html { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
html { position: fixed; height: 100%; width: 100%; overflow: hidden; color: var(--c); font-family: system-ui; }
::-webkit-scrollbar { display: none; }
body { margin: 0; overflow: hidden; background: var(--b); color: var(--c); }
html, body, adult, system { display: block; height: 100%; width: 100%; overflow: hidden; }
a.above { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 9; }
a { color: var(--c); text-decoration: unset; font-weight: bold; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

@media only screen and (max-width: 999px) { 
	html, body { overflow: scroll !important; } 
}


/*  Layout : Nav */
nav { display: flex ; flex-direction: column; justify-content: center; align-items: center; position: absolute; left: 0; right: 0; top: 33px; height: 55px; z-index: 10000; transition: 1s; }

@media only screen and (max-width: 810px) { 
	nav { width: 100vw; height: 66px; box-shadow: unset; overflow: hidden; position: sticky; top: 0; } 
	nav { display: none; }
}


/* COmponent : Nav */
cnvo { display: grid ; grid-template-columns: max-content auto; align-items: center; padding: 11px 22px; background: var(--bt); border-radius: 55px; }
cnvo>links { display: flex ; align-items: center; }
cnvo links>a { display: block; padding: 7px 11px; font-size: 1.11em; margin: 0 4px; color: var(--c1); }
cnvo>logo { display: block; padding: 7px 15px; position: relative; line-height: 1; }
cnvo logo>h4>b { font-size: 1.44em; margin-right: 4px; }
cnvo links>a.this { color: var(--c); text-decoration: line-through; text-decoration-thickness: 3px; }


/*  Template : portal */
portal:last-child { display: block; opacity: 1; z-index: 333; transition: 333ms; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; overflow-y: scroll; height: auto; width: auto; }
portal { display: block; transition: 333ms; position: absolute; opacity: 0; padding-bottom: 123px; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; overflow-y: scroll; z-index: 22; height: 0; padding: 0; position: unset; width: 0; }
content { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }

bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
bg1 { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
svg { fill: var(--c1); }

i { position: relative; display: flex ; height: 55%; width: 100%; border-radius: 7px; justify-content: center; align-items: center; }
img { max-width: 100%; max-height: 100%; }
.hd { font-size: 2.33em; color: var(--c1); margin-bottom: 7px; }
label { font-weight: 500; opacity: .77; }
p { font-size: 0.88em; margin: 4px 0; }

.dn { display: none !important; }


@media only screen and (min-width: 999px) { 
	content { position: absolute; left: 0px; right: 0; top: 0px; bottom: 0; } 
}

/*  Componeny : Welcome  */
cwlo { display: block; padding: 77px 33px 33px 33px; position: relative; margin: 11px auto; max-width: 820px; }
cwlo>hd logo { display: block; height: 77px; width: 77px; border: 2px solid var(--bc); background-color: rgb(0, 0, 0); border-radius: 25px; overflow: hidden; margin: 22px 22px 22px 0; }
cwlo>hd, cwlo>bd, cwlo>ft { display: block; max-width: 820px; margin: 0 auto; }
cwlo logo>i { background: linear-gradient(rgb(81, 81, 81) 0%, rgb(28, 25, 24) 51.4763%, rgb(81, 81, 81) 100%); will-change: auto; height: 88%; border-radius: 22px; }
cwlo logo>i>img { height: 333px; width: 100%; pointer-events: none; }
cwlo>bd h1 { font-size: 2.22em; word-break: break-all; }
cwlo>bd h1>op { color: var(--c1); }
cwlo>bd h2 { display: flex ; align-items: center; padding-left: 100px; margin: 11px 0; font-size: 1.88em; font-weight: bold; position: relative; z-index: 999; }
cwlo>bd h2>i { display: block; border: 2.77px solid var(--bt); width: 50px; height: 35px; overflow: hidden; transition: 333ms; position: absolute; left: 0; box-shadow: rgba(0, 0, 0, 0.25) 0px 7.76225px 23.9336px 0px; }
cwlo h2>i>img { height: 100%; width: 100%; object-fit: cover; }
cwlo h2>i:nth-child(1) { transform: rotate(-10deg); transform-origin: 50% 50% 0px; z-index: 9; }
cwlo h2>i:nth-child(2) { left: 40px; transform: rotate(13deg); transform-origin: 50% 50% 0px; top: -1px; }
cwlo>bd t { display: block; font-size: 1.44em; font-weight: 700; line-height: 2.33em; color: var(--c1); }
cwlo>ft btns { display: flex ; align-items: center; margin-top: 11px; padding-top: 11px; }
cwlo btns>btn { display: block; padding: 10px 25px; border-radius: 7px; margin-left: 7px; background: linear-gradient(189.15961188523508deg, rgb(28, 25, 24), rgb(28, 25, 24) 0%, rgba(81, 81, 81, 1) 100%); color: var(--b); font-weight: 500; position: relative; overflow: hidden; transition: 333ms; }
cwlo btns>btn>bg1 { background: linear-gradient(189.15961188523508deg, var(--c), rgb(28, 25, 24)) 0%, rgba(81, 81, 81, 1) 100%; margin: 3.77px; border-radius: 5px; }
cwlo btns>btn:nth-child(2) { background: transparent; border: 1px solid var(--bc); color: var(--c); font-weight: 700; }
cwlo btns>btn:nth-child(2):after { display: block; content: ""; position: absolute; inset: 0; background: url(/Aduld/Assets/Scene_wawy.webp); background-size: 100%; background-repeat: no-repeat; background-position: center; transition: 333ms; opacity: 0; }
cwlo btns>btn:nth-child(2):hover:after { opacity: 1; }
cwlo btns>btn:first-child { box-shadow: rgba(0, 0, 0, 0.25) 0px 11px 11.3px 0px; }
cwlo btns>btn:nth-child(2):hover { color: var(--b); }
cwlo btns>btn:first-child:hover { box-shadow: rgba(0, 0, 0, 0.25) 0px 22px 22.3px 0px; }
cwlo>ft>links { display: flex ; align-items: center; }
cwlo btns>btn>bg { background: var(--aaa); }
cwlo btns>btn>t { position: relative; z-index: 999; }
cwlo links>a { display: inline-flex ; padding: 7px 11px; margin: 11px; margin-left: 0; font-size: 1.22em; color: var(--c1); transition: 95ms; }
cwlo>elmnt { position: absolute; height: 66%; width: 50%; top: 9px; right: -36px; display: block; justify-items: end; -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent), linear-gradient(0deg, #000 85%, transparent); mask-image: linear-gradient(180deg, #000 85%, transparent), linear-gradient(0deg, #000 85%, transparent); -webkit-mask-composite: source-in, xor; mask-composite: intersect; transition: 333ms; }
cwlo>elmnt>i>img { display: block; transition: 333ms; margin-right: 231px; }
cwlo>elmnt:after { content: ""; position: absolute; bottom: 0; height: 33%; z-index: 999; background: linear-gradient(0deg, var(--bt), transparent); backdrop-filter: blur(52px); display: block; left: 0; right: 0; -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent), linear-gradient(0deg, #000 85%, transparent); mask-image: linear-gradient(180deg, #000 85%, transparent), linear-gradient(0deg, #000 85%, transparent); -webkit-mask-composite: source-in, xor; mask-composite: intersect; opacity: .1; }
cwlo>elmnt>i { position: absolute; inset: 0; height: 88%; width: 88%; right: 0; }
cwlo>elmnt:before { content: ""; position: absolute; bottom: 0; height: 33%; z-index: 999; background: linear-gradient(0deg, var(--bt), transparent); display: block; left: 0; right: 0; -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent), linear-gradient(0deg, #000 85%, transparent); mask-image: linear-gradient(180deg, #000 85%, transparent), linear-gradient(0deg, #000 85%, transparent); -webkit-mask-composite: source-in, xor; mask-composite: intersect; transform: rotate(-33deg); opacity: 0.2; }
cwlo links>a:hover { color: var(--c); }
cwlo>elmnt>i { width: 777px; transform: scaleX(-1); inset: unset; right: 0; height: 777px; overflow: visible; transition: 333ms; }
cwlo>elmnt:hover>i:nth-child(1)>img { transform: translate(-5px, -77px); }

@media (max-width : 700px) {
	cwlo>elmnt { display: block; z-index: 0; width: 100%; right: 0; }
	cwlo>elmnt>i { width: auto; height: auto; opacity: 0.4; }
	cwlo>bd h2 { display: block; padding: 0; justify-items: center; }
	cwlo>bd h2>i { position: unset; width: 77%; height: 77%; }
	cwlo btns>btn { font-size: 0.88em; }
	cwlo { padding: 44px 22px 22px 22px; }
	cwlo>ft>links { overflow-x: auto; }
}


/*  Layout : Layout/bg  */
layout>bc.bg { position: absolute; inset: 0; z-index: 9999; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(0.3125px); mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 105.5%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 55.5%); -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 105.5%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 55.5%); border-radius: 0px; pointer-events: none; height: 144px; }

/*  Layout : Menu  */
menubar { position: absolute; left: 0; right: 0; height: 66px; bottom: 0; z-index: 88888888888; box-shadow: unset; }
	
@media only screen and (min-width: 999px) {
	menubar { top: 0; left: 28%; right: 28%; height: 55px; display: none; }
	}


/* Component : My_CRAFT */
cmcs { display: block; padding: 22px; margin: 7px auto; max-width: 820px; position: relative; }
cmco { position: relative; display: block; margin: 11px; padding: 7px; border-radius: 11px; overflow: hidden; }
cmcs>bd { display: grid ; grid-template-columns: 50% 50%; }
cmco text>t { font-weight: 600; font-size: 1.11em; display: block; }
cmco>bd text { display: flex ; justify-content: space-between; margin: 4px 0; }


/* Component : Footer */
cfto { display: block; padding: 11px; max-width: 830px; margin: 11px auto; }
cfto>hd { display: flex ; border-radius: 15px; overflow: hidden; position: relative; max-height: 333px; max-width: 333px; min-height: 180px; border: 5px solid var(--bt); margin: 11px auto 11px 0; }
cfto>hd:after { content: ""; position: absolute; border: 5px solid var(--bt) display: block; transition: 333ms; z-index: 999999; border-radius: 11px; inset: 0; }
cfto>hd:hover:after { border: 5px solid var(--bt); inset: unset; top: 7px; left: 7px; right: 7px; bottom: 7px; }
cfto>bd a { display: block; font-size: 2.44em; margin: 7px 0; font-weight: 500; transition: 95ms; }
cfto>bd t { font-weight: 500; }
cfto>ft t { font-weight: 500; margin-top: 22px; display: block; }
cfto btns>btn { display: block; height: 15px; width: 15px; place-content: center; border-radius: 55%; padding: 9px; margin: 4px; position: relative; transition: 95ms; }
cfto btns>btn:first-child { margin-left: 0; }
cfto btns>btn:hover { background: var(--b-t77); box-shadow: 0 0 0 2px var(--bt); }
cfto btns>btn:hover svg { fill: var(--c); }
cfto btns>btn:active { transform: scale(0.97); }
cfto>ft btns { display: flex ; align-items: center; }
cfto>bd a:hover { color: #1f1fff; text-decoration: underline; }

@media (max-width : 999px) {
	cfto>bd a { word-break: break-all; font-size: 1.444em; }
}








/* Hide default cursor */

/* Custom cursor */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background: radial-gradient( var(--b), var(--c));
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease, opacity 0.2s ease;
  z-index: 9999;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  mix-blend-mode: difference; /* Gives glowing invert vibe */
}

/* Click expand animation */
.cursor.expand {
  transform: translate(-50%, -50%) scale(2);
  opacity: 0.6;
}




