/* ╔══════════════╗
   ║ © Global Net ║
   ╚══════════════╝ */
    body::before {opacity:33%}
    body
{margin: 0; padding: 0; width: 100%; height: 100%; user-select: none; background-color: black;
display: flex; flex-direction: column; align-items: center; justify-content: center;
font-size: small; font-family: Arial, sans-serif; overflow: hidden;}
    .container
{display: flex; justify-content: center; align-items: center; height: 100vh}
    footer
{color: #a7a7a7; font-family: monospace; font-size: x-small; margin-bottom: 1em}
    img.cu
{position: relative; width: 10px; margin-bottom: -1.5px; opacity: 75%;}
    #slogan
{display: block; color: ghostwhite; font-size: 5rem; position: absolute; bottom: 0px; left: 0px; width: max-content; z-index: 0;
filter: blur(2px) drop-shadow(3px -3px 3px gray) opacity(18%); translate: 100vw; pointer-events: none;
animation: ST 21s ease-in 2.1s 1 forwards}
    @keyframes ST {to {translate: -100%;}}
    img, .m-box, .m-line, .m-text, .loader, .pulse, #slogan
{-webkit-user-drag: none; user-select: none}
/* ╔════╗
   ║ OS ║
   ╚════╝ */
    @media only screen and (hover: none) and (pointer: coarse)
{.pulse {display: block!important;}
.loader, #slogan {display: none!important;}
#logo {height: 64%!important;}
button.close {transform: scale(1.75)!important;}
#main {min-height: 72vh!important; max-width: 98vw!important;}
#modal, #main, #tls {font-size: 100%}
html, body {overscroll-behavior: none!important; overflow: hidden!important; position: absolute;
top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%}}
    @media only screen and (hover: none) and (pointer: coarse) and (orientation: landscape)
{footer {margin-bottom: 1.5rem!important;}}
    @supports (-moz-appearance: none)
{#main {padding-top: 2rem!important;}
.htab > label {font-size: unset!important;}
.object {bottom: 12%!important; left: 31.5%!important;}}
/* ╔═════╗
   ║ PGP ║
   ╚═════╝ */
    .P
{position: fixed; bottom: 1rem; right: 1rem; z-index: 3}
    .P .hovertext {border-bottom: none}
    .P .tiptext
{bottom: 108%;
right: 0px;
width: 180px}
    .P img
{width: 42px;
opacity: 0.35;
transition: 0.3s ease}
    .P img:hover {opacity: 0.8}
/* ▄▄▄▄▄▄▄▄▄▄
   █ Dialog █
   ▀▀▀▀▀▀▀▀▀▀ */
    button.close
{width: 38px; height: 38px; border-radius: 5px; border: none; cursor: pointer; background: none; opacity: 0.8}
    button.close:hover
{filter: invert(1) contrast(0.5)!important;}
    #mt
{cursor: pointer; position: relative}
    #modal
{opacity: 0; pointer-events: none; touch-action: none; display: flex; flex-direction:column; transition: all 777ms}
	#modal[open]
{opacity:1; pointer-events: revert}
/* ╔════════╗
   ║ Scroll ║
   ╚════════╝ */
    dialog div::-webkit-scrollbar
{width: 10px;}
    dialog div::-webkit-scrollbar-track
{margin-top: 10px;margin-bottom: 10px}
    dialog#main > div::-webkit-scrollbar-track
{margin-top: 23px}
    dialog div::-webkit-scrollbar-thumb
{background: #5558; border-radius: 5px; border: 2px ridge dimgray}
    dialog div::-webkit-scrollbar-thumb:hover
{background: #7778}
    dialog div::-webkit-scrollbar-thumb:active
{background: #9998}
    div
{scrollbar-width: thin; scrollbar-color: #eee5 transparent}
    hr.d
{border-top: 5px dotted #80808030; border-bottom: none; width: 32%; border-left: none; border-right: none; filter: blur(1.5px)}
	#main
{opacity: 0;
z-index: 3;
display:flex;
flex-direction: column;
pointer-events: none;
touch-action: none;
min-height: 88vh;
max-height: 88vh;
width: 728px;
max-width: 90vw;
border: 2px ridge dimgray;
position: absolute;
border-radius: 12px;
box-shadow: -3px 3px 5px 0px #fff1;
background: #000000cc;
color: white;
transition:all 777ms}

  @media (min-width: 1200px)
{#main {width: 800px!important; max-width: 96vw}
div.content {max-width: 748px!important;}}
                     
	#main[open]
{opacity:1; pointer-events:revert}
    .glint
{font-size:25px; font-weight:1000; text-align: center; margin: 0; text-shadow: 0px 0px 7px #cff8ff9c;
background: linear-gradient(to right, #666363 0, white 10%, #666363 20%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
transition: text-shadow 0.15s ease-out; animation: animate 10s linear 10}
    .glint:has(span:hover)
{text-shadow: 0px 0px 7px #cff8ff9c, 0px 0px 5px #92c5dd9c, 0px 0px 9px #6046c79c}
	@keyframes animate
{0% {background-position: 0}
10% {background-position: 640px}
55% {background-position: 640px}
77% {background-position: 0}
100% {background-position: 0}}
    .glint > span
{cursor: pointer; box-shadow: inset 1px 1px 1px 1px #80808080; padding: 12px; border-radius: 15px; transition: box-shadow 0.15s ease-out}
    .glint:has(span:hover) > span
{box-shadow: inset 0px 0px 0px 0px transparent,
                   0px 0px 7px #cff8ff9c,
                   0px 0px 5px #92c5dd9c,
                   0px 0px 9px #6046c79c}
#tls
{opacity: 0;
z-index: 3;
display:flex;
flex-direction: column;
pointer-events: none;
touch-action: none;
width: 555px;
border: 2px ridge #938533;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
border-radius: 12px;
box-shadow: -3px 3px 5px 0px #fff1;
background: #000000ee;
color: white;
transition: opacity 777ms}
	#tls[open] {opacity: 1; pointer-events: revert}
    #tls a:focus {outline: none}
/* ╔═════════╗
   ║ Imagery ║
   ╚═════════╝ */
    img.d {filter: invert(0) drop-shadow(0px 0px 0px #0000); transition: filter 0.15s ease}
    img.d:hover {filter: invert(0.2) drop-shadow(1px 1px 3px #fff7)}
    .object
{visibility:hidden; opacity: 0; position: absolute; bottom: 18%; left: 31.8%;
clip-path: polygon(51.2% 8%, 3% 90%, 97% 90%); transition: 0.7s ease}
    .Pyramid:hover .object {visibility: visible; opacity: 1}
    img.m {width: auto; height: 65px; cursor: pointer; transition: 0.15s ease}
    img.m:hover {box-shadow: 0px 0px 5px 1px #fffa; transform:scale(1.5)}
/* ╔═════╗
   ║ Map ║
   ╚═════╝ */
  #map {text-align: center; display: flex; justify-content: center; align-items: flex-end; font-size: smaller; font-style: italic; color: silver}

/* ▄▄▄▄▄▄▄
   █ Tab █
   ▀▀▀▀▀▀▀ */
  details {max-width: 200px; overflow: hidden}
  summary:focus {outline: none}
  summary {display: block; position: relative}
  summary::-webkit-details-marker {display: none}
  div.content
{box-sizing: border-box; max-width: 700px; max-height: 0; overflow: hidden; padding: 0 10px;
margin-top: 1rem; transition: max-height 1.08s ease-in-out, border 0ms 1s linear;
overflow-y: scroll; height: 300px; box-shadow: 1px -1px 5px -3px inset #fff8; border-radius: 7px}
  details[open] + div.content
{max-height: 2300px; border-color: transparent; transition: max-height 2.8s ease, border 0ms linear}
  img#db {margin-bottom: -3px; height:16px}
/* ╔════════╗
   ║ Closed ║
   ╚════════╝ */
.xalign{margin-left: 2rem}
  summary::before
{position: absolute;
transform: rotate(0);
transform-origin: center;
transition: color ease-out 0.85s, 0.3s 0.6s transform ease-in-out}
  details[open] > summary:before
{transform: rotate(90deg);
transition: 0.45s transform ease}
/* ╔════════╗
   ║ Opened ║
   ╚════════╝ */
  details.btx summary::before
{content: "×";
font-size: 1.75rem;
margin-left: 0.5rem;
line-height: 18px;
transform: rotate(-45deg)}
  details[open].btx > summary:before
{transform: rotate(90deg);
color:#F00;
transition: color ease-in-out 1.8s, transform ease-in-out 0.9s}
  .btx:hover{cursor: pointer}
/* ╔═════════╗
   ║ Summary ║
   ╚═════════╝ */
  summary.c1 {color: beige}
  summary.c2 {color: #fbcfa2}
  details[open] summary,
  summary:hover {color: gold}
/* ╔════════════╗
   ║ Horizontal ║
   ╚════════════╝ */
  .htabbed [type="radio"]
{display: none}
  .htabs
{display: flex; align-items: stretch; list-style: none; padding: 0; justify-content: center; position: relative}
  .htab > label
{display: block; cursor: pointer;
padding: 0px 23px;
font-size: 21px; font-weight: 700;
color: transparent;
text-shadow: rgba(233,233,233,0.33) 0px 0px 2.3px;
transition: all 0.33s}
  .htab:hover label {color: transparent;
text-shadow: rgb(233 233 233) 0px 0px 3.3px}
  .htabc
{opacity: 0; height: 0; top: 0; position: relative; overflow: hidden; transition: all 1s ease}
  .htabbed [type="radio"]:nth-of-type(1):checked ~ .htabs .htab:nth-of-type(1) label,
  .htabbed [type="radio"]:nth-of-type(2):checked ~ .htabs .htab:nth-of-type(2) label,
  .htabbed [type="radio"]:nth-of-type(3):checked ~ .htabs .htab:nth-of-type(3) label,
  .htabbed [type="radio"]:nth-of-type(4):checked ~ .htabs .htab:nth-of-type(4) label,
  .htabbed [type="radio"]:nth-of-type(5):checked ~ .htabs .htab:nth-of-type(5) label
{color: white; opacity: 1; pointer-events: none}
  .htabbed [type="radio"]:nth-of-type(1):checked ~ .htabc:nth-of-type(1),
  .htabbed [type="radio"]:nth-of-type(2):checked ~ .htabc:nth-of-type(2),
  .htabbed [type="radio"]:nth-of-type(3):checked ~ .htabc:nth-of-type(3),
  .htabbed [type="radio"]:nth-of-type(4):checked ~ .htabc:nth-of-type(4)
{display: block; height: fit-content; opacity: 1}
/* ▄▄▄▄▄▄▄▄
   █ Cube █
   ▀▀▀▀▀▀▀▀ */
    .overlay
{transform: unset}
    .loader
{position: relative; display: flex;
align-items: center; justify-content: center}
    .simple-text
{position: absolute; top: -100px; color: white;
width: 200px; text-align: center}
    .cube
{position: absolute; width: 40px; transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(45deg); transition: 300ms ease;
cursor: pointer; animation: rotateCube 23s infinite cubic-bezier(0.22, 0.03, 0.81, 0.99)}
    @keyframes rotateCube
{0% {transform: rotateX(-30deg) rotateY(45deg)}
100% {transform: rotateX(-30deg) rotateY(405deg)}}
    .cube-front,
    .cube-back
{transform: translateX(40px) translateZ(-20px); animation: none}
    .cube-top,
    .cube-bottom
{transform: translateZ(20px); animation: none}
    .cube-left,
    .cube-right
{transform: translateX(40px) translateZ(-20px); animation: none}
    .face
{position: absolute; transform-style: preserve-3d;
width: 40px; height: 40px; background: rgb(21, 46, 75);
background: radial-gradient(circle, rgb(86 73 79 / 23%) 10%, rgb(3 1 26) 112%)}
/* ╔══════╗
   ║ Glow ║
   ╚══════╝ */
.cube-back:hover .face {background: #fff; background: var(--bc1); filter: var(--gc1)}
 .cube-front:hover .face {background: #fff; background: var(--bc2); filter: var(--gc2)}
  .cube-top:hover .face {background: #fff; background: var(--bc3); filter: var(--gc3)}
   .cube-bottom:hover .face {background: #fff; background: var(--bc4); filter: var(--gc4)}
    .cube-left:hover .face {background: #fff; background: var(--bc5); filter: var(--gc5)}
     .cube-right:hover .face {background: #fff; background: var(--bc6); filter: var(--gc6)}
      .cube:active {transform: translateX(0px) translateZ(-20px)}
       .cube-back:active .face {background: #fff; background: var(--bc1); filter: var(--gc1)}
        .cube-front:active .face {background: #fff; background: var(--bc2); filter: var(--gc2)}
         .cube-top:active .face {background: #fff; background: var(--bc3); filter: var(--gc3)}
          .cube-bottom:active .face {background: #fff; background: var(--bc4); filter: var(--gc4)}
           .cube-left:active .face {background: #fff; background: var(--bc5); filter: var(--gc5)}
            .cube-right:active .face {background: #fff; background: var(--bc6); filter: var(--gc6)}
            .top {transform:/*G*/rotateX(90deg) translateZ(20px)}
           .back {transform:/*L*/rotateY(180deg) translateZ(20px)}
          .left {transform:/*⎔*/rotateY(-90deg) translateZ(20px)}
         .right {transform:/*B*/rotateY(90deg) translateZ(20px)}
        .front {transform:/*A*/rotateY(0deg) translateZ(20px)}
       .bottom {transform:/*L*/rotateX(-90deg) translateZ(20px)}
      .middle {background:/*NET*/transparent}
     .faces:nth-child(1) {transform:/*G*/rotateX(90deg) translateZ(50px)}
    .faces:nth-child(2) {transform:/*L*/rotateX(-90deg) translateZ(50px)}
   .faces:nth-child(3) {transform:/*⎔ NET*/translateZ (50px)}
  .faces:nth-child(4) {transform:/*B*/rotateY(90deg) translateZ(50px)}
 .faces:nth-child(5) {transform:/*A*/rotateY(-90deg) translateZ(50px)}
.faces:nth-child(6) {transform:/*L*/rotateY(180deg) translateZ(50px)}
html
{--cp:33%;
  --s:84px;
   --cd:33deg;
    --c1: #ffffff;
     --c2: #fbf1f6;
      --c3: #f7efde;
       --cc1: #07516cde;
       --cc2: #350d80e8;
      --cc3: #7c3e0bdb;
     --gn-cube-i: inv 7.2s linear infinite;
    --gn-cube-p: pulse 14.4s ease infinite;
   --gn-conic-bg-sz: calc(var(--s) * 1.732) var(--s);
  --gn-cube-f-bg: linear-gradient(222deg, #050154fa, #2a5732f5);
 --gn-cube-bg: linear-gradient(var(--cd),var(--cc1),var(--cc2)var(--cp),var(--cc3));
--gc1: drop-shadow(0px 0px 5px #e7faff) drop-shadow(0px 0px 15px #4ba8ff) drop-shadow(0px 0px 30px #329cff);
  --bc1: radial-gradient(circle, #fff 60%, #9dd0ff 100%);
   --gc2: drop-shadow(0px 0px 5px #e7fff4) drop-shadow(0px 0px 15px #4bffa1) drop-shadow(0px 0px 30px #32ffa0);
    --bc2: radial-gradient(circle, #fff 60%, #9dffd3 100%);
     --gc3: drop-shadow(0px 0px 5px #f1ffe7) drop-shadow(0px 0px 15px #9bff4b) drop-shadow(0px 0px 30px #8aff32);
      --bc3: radial-gradient(circle, #fff 60%, #c6ff9d 100%);
       --gc4: drop-shadow(0px 0px 5px #feffe7) drop-shadow(0px 0px 15px #ffff4b) drop-shadow(0px 0px 30px #fcff32);
       --bc4: radial-gradient(circle, #fff 60%, #f7ff9d 100%);
      --gc5: drop-shadow(0px 0px 5px #fff6e7) drop-shadow(0px 0px 15px #ffbd4b) drop-shadow(0px 0px 30px #ffad32);
     --bc5: radial-gradient(circle, #fff 60%, #ffd99d 100%);
    --gc6: drop-shadow(0px 0px 5px #ffe7e7) drop-shadow(0px 0px 15px #ff4b4b) drop-shadow(0px 0px 30px #ff3232);
   --bc6: radial-gradient(circle, #fff 60%, #ff9d9d 100%);
  --gn-conic-bg: conic-gradient( from 0deg at calc(500% / 6) calc(100% / 3), var(--c3) var(--_g) ), conic-gradient( from -120deg at calc(100% / 6) calc(100% / 3), var(--c2) var(--_g) ), conic-gradient( from 120deg at calc(100% / 3) calc(500% / 6), var(--c1) var(--_g) ), conic-gradient( from 120deg at calc(200% / 3) calc(500% / 6), var(--c1) var(--_g) ), conic-gradient( from -180deg at calc(100% / 3) 50%, var(--c2) 60deg, var(--c1) var(--_g) ), conic-gradient( from 60deg at calc(200% / 3) 50%, var(--c1) 60deg, var(--c3) var(--_g) ), conic-gradient( from -60deg at 50% calc(100% / 3), var(--c1) 120deg, var(--c2) 0 240deg, var(--c3) 0 ); --_g: 0 120deg, #0000 0;
 --gn-9-t-s: 0px 1px 0px #999,0px 2px 0px #888,0px 3px 0px #777,0px 4px 0px #666,0px 5px 0px #555,0px 6px 0px #444,0px 7px 3px #333,0px 8px 7px #222,0px 0px 23px #fff;
--gn-tip-bg: repeating-linear-gradient(33deg, #05080abf, #3d3115b8 5px), repeating-linear-gradient(333deg, #01091a5e, #4f556ecc 5px)}
/* ╔══════╗
   ║ Font ║
   ╚══════╝ */
    .cursive {font-family:"Brush Script MT",cursive}
    .mn {font-family:'Courier New',monospace}
    .hl {background-color:#fff4}
    .emb {text-shadow:var(--gn-9-t-s)}
/* ╔═════╗
   ║ Tip ║
   ╚═════╝ */
    .tiptext
{visibility: hidden;
opacity: 0;
position: absolute;
z-index: 2;
color: #f3ffff;
font-size: 10.2px;
text-align: justify;
border-radius: 7px;
padding: 3px 7px 3px 7px;
background: var(--gn-tip-bg);
transition: all 0.35s ease-in-out}
    .hovertext:hover .tiptext {visibility: visible; opacity: 1}
    .hovertext {position: relative; display: inline-block; border-bottom: 1px dotted}
    .hovertext:hover {color: #748487}
    .tiptext {bottom: 100%; left: unset; width: 268px}
    .tiptext > a {color: white}
/* ▄▄▄▄▄▄▄▄
   █ Logo █
   ▀▀▀▀▀▀▀▀ */
    #logo
{height: 84%; z-index: 0; position: absolute; cursor: pointer; transition: all 1.2s ease-in;
filter: blur(5px) opacity(0.42) invert(1); object-fit: cover; clip-path: circle(48% at 50% 50%);
-webkit-clip-path: circle(48% at 50% 50%); pointer-events: auto; user-select: none}
    @keyframes pulsate
{0%, 100% {filter: blur(5px) opacity(0.3) invert(1)}
50% {filter: blur(10px) opacity(0.7) invert(1)}}
    #logo:hover
{filter: blur(7px) opacity(0.7) invert(0.8); transition: all 0.3s ease-in-out}
/* ▄▄▄▄▄▄▄▄▄
   █ Cubic █
   ▀▀▀▀▀▀▀▀▀ */
    div.inv
{transform: scale(0.72); transition: all 333ms ease}
    div.inv:hover
{transform: scale(0.64); animation: inv 777ms ease infinite}
	.load
{perspective: 600px; width: 100px; height: 100px}
	.cubic
{width: 100%; height: 100%; user-select: none; transform-style: preserve-3d; animation: rotate 7s linear infinite}
    @keyframes rotate
{0%{transform: rotateX(0deg) rotateY(0deg)}
100%{transform: rotateX(360deg) rotateY(360deg)}}
	.faces
{position: absolute; width: 100%; height: 100%; background: var(--gn-cube-bg); border: 1px solid #5000aa; border-radius: 10%}
	.pulse
{filter: opacity(100%) blur(0px); position: absolute; display: none; animation: var(--gn-cube-p)}
    @keyframes pulse
{50%{filter: opacity(33%) blur(5px)} }
	.inv
{filter: hue-rotate(0deg) drop-shadow(0px 0px 15px #fff8); animation: var(--gn-cube-i)}
    @keyframes inv
{50%{filter: hue-rotate(180deg)} }
/* ▄▄▄▄▄▄▄▄
   █ Moon █
   ▀▀▀▀▀▀▀▀ */
    .m-box
{position: fixed; top: 1rem; right: 1rem; text-align: right; z-index: 2; transition: z-index 0.42s ease}
    .m-1
{width: 72%; cursor: crosshair; clip-path: circle(23.5% at 75% 49.8%); opacity: 70%; filter: blur(1px);
position: relative; transition: all 0.42s ease}
    .m-1:hover
{width: 100%; filter: blur(0px); opacity: 100%; z-index: 5}
    .m-2
{position: absolute; right: 0; opacity: 0%; width: 72%; ; cursor: crosshair; pointer-events: none; z-index: 2;
transition: all 0.42s ease}
    .m-box:has(.m-1:hover)
{z-index: 5}
    .m-1:hover~.m-2
{width: 100%;  opacity: 100%; z-index: 5}
    .m-line
{position: fixed; pointer-events: none; border: 1px solid silver; z-index: 2; border-bottom: none; border-right: none;
width: 50px; height: 33px; top: 100px; right: 132px; opacity: 0%; transform: skewX(312deg); transition: 0.15s ease; animation: FO 21s ease forwards}
    .m-text
{position: fixed; pointer-events: none; width: max-content; z-index: 2; right: 168px; top: 133px; opacity: 0%;
font-size: 10px; color: whitesmoke; transition: 0.3s ease; animation: FO 21s ease forwards}
    @keyframes FO
{0% {opacity: 0%}
20% {opacity: 70%}
80% {opacity: 70%}
100% {opacity: 0%}}
    .m-1:hover~.m-line {width: 10px; right: 172px}
    .m-box > a {cursor: default}

/* ███ */