:root {
  --gap: 5vh;
  --bg: #0c141b;
  --fg: #ffffff;
  --fg2: rgba(255, 255, 255, 0.75);
  --muted: rgba(18, 18, 18, 0.4);
  --tab: rgba(5, 24, 100, 0.08);
  --tab-hover: rgba(28, 101, 134, 0.55);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  --panel-py: 3rem;
  --panel-px: 25%;
  --p: 0;
}

:root.is-resizing .home .title-inner { transition: none; }

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--fg);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  text-align: center;
  user-select: none;
  background-color: #05060f;
  background-image:
    linear-gradient(rgba(28, 101, 134, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 101, 134, 0.25) 1px, transparent 1px);
  background-size: 40px 40px;
  background-attachment: fixed;
}

/* LINK CSS */
a { color: #3da9fc; text-decoration: none; }
a:hover { color: #90e0ff; }
a:visited { color: #1b4d9e; }

/* SCROLL BAR CSS */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(18, 52, 79, 0.15); }
::-webkit-scrollbar-thumb { background: rgba(28, 101, 134, 0.65); }
::-webkit-scrollbar-thumb:hover { background: rgba(28, 101, 134, 0.85); }

* { scrollbar-width: thin; scrollbar-color: rgba(28, 101, 134, 0.65) rgba(18, 52, 79, 0.15); }

/* TYPE CSS */
h1 { margin: 0; line-height: 1.1; font-size: clamp(48px, 12vw, 160px); }
h2 { margin-top: 0; font-size: 2rem; }

/* NAVIGATION CSS */
#topnav {
  background: var(--tab);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h, 64px);
  padding: 0 clamp(1rem, 3vw, 2rem);
  z-index: 1000;
  opacity: 0;
  transform: translateY(0);
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease, opacity .2s ease;
}

#topnav.ready { opacity: 1; }
#topnav.hide { transform: translateY(-100%); }

#topnav .brand {
  position: absolute; top: 50%; left: clamp(1rem, 3vw, 2rem);
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--fg);
  font-size: 1.2rem; font-weight: 700;
  opacity: 1; transition: opacity .2s ease, visibility .2s ease;
}
#topnav .brand img { width: 32px; height: 32px; object-fit: cover; }
#topnav.overlay .brand { opacity: 0; visibility: hidden; pointer-events: none; }

#topnav .links {
  position: absolute; top: 50%; left: 50%;
  transform: translate(calc(-50% + var(--links-shift, 0px)),-50%);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  display: inline-flex; gap: clamp(.75rem, 2.25vw, 2rem);
  white-space: nowrap; overflow-x: auto; overflow-y: visible;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; max-width: calc(100% - clamp(2rem, 6vw, 4rem));
  will-change: transform;
}
#topnav .links::-webkit-scrollbar { display: none; }
#topnav .links a { color: var(--fg); font-weight: 600; line-height: 1.25; padding: .15em 0 .2em; display: inline-block; }

#topnav.overlay {
  background: linear-gradient(to bottom, var(--tab) 0%, rgba(5,24,100,0) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
#topnav:not(.overlay) {
  --links-shift: var(--links-shift-solid, 0px);
  background: var(--tab);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 720px) {
  #topnav { height: var(--nav-h-sm, 56px); padding: 0 1rem; }
  #topnav .links a { font-size: .95rem; }
}
@media (max-width: 480px) {
  #topnav .links a { font-size: .875rem; }
}

/* VIDEO CSS */
.video-container {
  position: fixed;
  top: -2px;
  left: 0;
  right: 0;
  height: calc(50vh + 4px);
  width: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translateY(calc(-5vh * var(--p)));
  opacity: calc(1 - var(--p) * 2);

  -webkit-mask: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 14%,
      rgba(0,0,0,1) 86%,
      rgba(0,0,0,0) 100%
    ) 0 0 / 100% 100% no-repeat;
  mask: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 14%,
      rgba(0,0,0,1) 86%,
      rgba(0,0,0,0) 100%
    ) 0 0 / 100% 100% no-repeat;
}

.video-container video {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0.85;
  filter: blur(2px);
}

.video-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      #05060f 0%,
      #05060f calc(40% * var(--p) + 15%),
      rgba(5,6,15,0) 80%
    );
  pointer-events: none;
  filter: blur(1.5px);
}

/* TITLE CSS */
body.home .title {
  position: relative; top: 0;
  min-height: calc(100svh - (60vh * var(--p)));
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 0 5vw; z-index: 0;
}
body.home .title-inner {
  will-change: transform, opacity;
  transform: translateY(calc(30vh * var(--p))) scale(calc(1 - 0.2 * var(--p)));
  opacity: calc(1 - var(--p) * var(--p) * 2);
}
body.page .title {
  position: relative; top: 0;
  min-height: calc(40vh - (60vh * var(--p)));
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  text-align: left; padding: 0 5vw; z-index: 0;
}
body.page .title-inner {
  will-change: transform, opacity;
  transform: translate(0, calc(40vh * var(--p))) scale(calc(1 - 0.05 * var(--p)));
  opacity: calc(1 - var(--p) * var(--p) * 10);
}
@keyframes page-shift { from { transform: translateX(0) translateY(0) scale(1); } to { transform: translateX(-5vh) translateY(20vh) scale(0.95); } }
@keyframes page-fade { from { opacity: 1; } to { opacity: 0; } }
body.page .title h1 { font-size: clamp(32px, 7vw, 80px); margin-bottom: .5rem; }
.title p { margin-top: 1rem; font-size: clamp(16px, 3vw, 24px); max-width: 90ch; margin-inline: auto; }
body.page .title p { font-size: clamp(12px, 1.5vw, 18px); max-width: 60ch; margin: 0; }

h2,
.title h1,
.title h2 {
  font-family: "Geo", system-ui, sans-serif;
  letter-spacing: .065em;
  line-height: .92;
  transform-origin: center;
  background: linear-gradient(180deg, var(--a1, #5aeef8), var(--a2, #3ab3ff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 calc(10px*var(--glow,1)) rgb(65, 201, 255)) drop-shadow(0 0 calc(18px*var(--glow,1)) rgba(30, 30, 255, 0.45));
  user-select: none;
}

.title { perspective: 1000px; perspective-origin: center; }
.title h1, .title h2 { font-size: clamp(4.5rem, 14vw, 15rem); display: inline-block; transform-style: preserve-3d; transition: transform 0.15s ease; }

/* PANEL CSS */
.panel {
  margin: var(--gap) auto;
  padding: var(--panel-py) var(--panel-px);
  max-width: 100%;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1;
}
.panel p { margin-top: 1rem; font-size: 1.125rem; max-width: 95%; margin-inline: auto; text-align: center; }

footer {
  margin-top: 2rem;
  padding: 1rem;
  font-size: .9rem;
  color: var(--fg2);
  text-align: center;
  box-shadow: var(--shadow);
  z-index: 1;
}

/* TABS CSS */
.tabs {
  display: flex; justify-content: center; align-items: stretch;
  flex-wrap: nowrap; gap: 1rem; padding: 0 1rem;
  overflow-x: auto; scrollbar-width: none; overflow: visible;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 1 1 0;
  text-align: center;
  cursor: pointer;
  transition: background .3s;
  color: inherit;
  display: flex; flex-direction: column; justify-content: flex-start;
  box-shadow: var(--shadow);
  padding: 1rem;
  min-width: 180px; max-width: 280px;
  min-height: 100px; height: auto;
  word-break: break-word;
  text-decoration: none;
}
.tabs a.tab,
.tabs a.tab:link,
.tabs a.tab:visited,
.tabs a.tab:hover,
.tabs a.tab:active { color: inherit; text-decoration: none; }

.tab:hover { background: var(--tab-hover); }
.tab strong { display: block; margin-bottom: .5rem; font-size: 1.1rem; }

@media(max-width: 720px) {
  .tab { min-width: 90px; max-width: 130px; min-height: 80px; font-size: .9rem; }
}

/* TABS2 CSS */
.tabs2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; margin-top: 1.5rem; }
@media(max-width: 720px) { .tabs2 { grid-template-columns: 1fr; } }

.tabs2 .tab2 {
  display: flex; align-items: center;
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
  transition: background .3s;
  min-height: 120px;
  color: inherit;
}
.tabs2 .tab2:hover { background: var(--tab-hover); }
.tabs2 .tab2 img { flex: 0 0 100px; height: 100px; object-fit: cover; }
.tabs2 .tab2 .text { flex: 1; text-align: left; margin-left: 1rem; }
.tabs2 .tab2 .text strong { display: block; margin-bottom: .25rem; font-size: 1.15rem; font-weight: 700; }
.tabs2 .tab2 .text span { display: block; font-size: .8rem; color: var(--fg2); }

.tabs2 > a.tab2 { position: relative; width: 100%; cursor: pointer; color: inherit; text-decoration: none; }
.tabs2 > a.tab2 * { pointer-events: none; }

/* TABS3 CSS */
.tabs3 { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }

.tabs3 .tab3 {
  display: flex; align-items: center;
  padding: .6rem .9rem;
  box-shadow: var(--shadow);
  transition: background .3s;
  min-height: 70px;
  color: inherit;
}
.tabs3 .tab3:hover { background: var(--tab-hover); }
.tabs3 .tab3 img { width: 50px; height: 50px; object-fit: contain; flex-shrink: 0; }
.tabs3 .tab3 .text { flex: 1; text-align: left; margin-left: .75rem; font-size: .95rem; }
.tabs3 .tab3 .text strong { font-weight: 700; margin-right: .35rem; }

.tabs3 > a.tab3 { position: relative; width: 100%; cursor: pointer; color: inherit; text-decoration: none; }
.tabs3 > a.tab3 * { pointer-events: none; }

/* TABS4 CSS */
.tabs4 { margin-top: 1.5rem; }
.tabs4 .tab-buttons { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs4 .tab-buttons button {
  background: rgba(18, 52, 79, 0.35);
  border: none; padding: .5rem 1rem;
  font-family: inherit; font-size: .95rem; font-weight: 600;
  color: var(--fg); cursor: pointer; transition: background .25s;
}
.tabs4 .tab-buttons button:hover { background: var(--tab-hover); }
.tabs4 .tab-buttons button.active { background: rgba(28, 101, 134, 0.75); }
.tabs4 .tab-contents { display: flex; justify-content: center; align-items: center; }
.tabs4 .tab-content {
  width: 400px; height: 400px;
  background: rgba(18,52,79,0.35);
  padding: 1rem; display: none; overflow: hidden;
}
.tabs4 .tab-content.active:not(.chatbox) { display: block; }
.tabs4 .tab-content.chatbox { display: none; flex-direction: column; padding: 0; }
.tabs4 .tab-content.chatbox.active { display: flex; }

/* CHAT UI CSS */
.tabs4 .chat-system { padding: .5rem; background: rgba(18,52,79,.35); border-bottom: 1px solid rgba(255,255,255,.06); }
.tabs4 .chat-system input { width: 100%; background: rgba(5,24,100,.08); border: none; color: var(--fg); padding: .55rem .75rem; outline: none; font-family: inherit; }
.tabs4 .chat-system input::placeholder { color: var(--fg2); font-family: inherit; }
.tabs4 .chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .5rem; }
.tabs4 .message { max-width: 78%; padding: .55rem .8rem; background: rgba(18,52,79,.55); color: var(--fg); box-shadow: var(--shadow); word-break: break-word; }
.tabs4 .message.user { align-self: flex-end; background: rgba(28,101,134,.75); text-align: right; }
.tabs4 .message.bot { align-self: flex-start; background: rgba(18,52,79,.45); text-align: left; }
.tabs4 .chat-input { display: flex; gap: .5rem; padding: .5rem; background: rgba(18,52,79,.35); border-top: 1px solid rgba(255,255,255,.06); }
.tabs4 .chat-input input { flex: 1; background: rgba(5,24,100,.08); border: none; color: var(--fg); padding: .6rem .75rem; outline: none; font-family: inherit; }
.tabs4 .chat-input input::placeholder { color: var(--fg2); font-family: inherit; }
.tabs4 .chat-input button { background: rgba(28,101,134,.75); border: none; padding: .6rem .9rem; color: var(--fg); font-weight: 600; cursor: pointer; transition: background .25s; }
.tabs4 .chat-input button:hover { background: var(--tab-hover); }
.tabs4 .chat-input button:disabled { background: rgba(28,101,134,.35); cursor: not-allowed; }

/* IMAGE UI CSS */
.tabs4 .diffbox { display: flex; flex-direction: column; gap: .5rem; height: 100%; }
.tabs4 .diff-canvas {
  position: relative; flex: 1;
  background: rgba(5,24,100,.08);
  box-shadow: var(--shadow); overflow: hidden; aspect-ratio: 1 / 1;
  display: flex; justify-content: center; align-items: center;
}
.tabs4 .diff-canvas img { max-width: 100%; max-height: 100%; object-fit: contain; display: none; background: transparent; }
.tabs4 .diff-canvas img[src] { display: block; }
.tabs4 .diff-input { display: flex; gap: .5rem; }
.tabs4 .diff-input input { flex: 1; background: rgba(5,24,100,.08); border: none; color: var(--fg); padding: .6rem .75rem; outline: none; font-family: inherit; }
.tabs4 .diff-input input::placeholder { color: var(--fg2); font-family: inherit; }
.tabs4 .diff-input button { background: rgba(28,101,134,.75); border: none; padding: .6rem .9rem; color: var(--fg); font-weight: 600; cursor: pointer; transition: background .25s; }
.tabs4 .diff-input button:hover { background: var(--tab-hover); }
.tabs4 .diff-input button:disabled { background: rgba(28,101,134,.35); cursor: not-allowed; }
.tabs4 .diff-canvas.loading::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.9) 100%);
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite;
  pointer-events: none; z-index: 2;
}
.tabs4 .diff-skeleton { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.tabs4 .diff-canvas.loading .diff-skeleton { opacity: 1; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media(max-width: 720px) {
  .tabs, .tabs2, .tabs3 { justify-content: center; align-items: center; text-align: center; }
  .tabs2 { grid-template-columns: 1fr; }
  .tabs3 { grid-template-columns: 1fr; }
}

/* CODE BLOCK CSS */
pre, code { font-family: "Fira Code", monospace; user-select: text; }
pre {
  background: rgba(18, 52, 79, 0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--fg);
  padding: 0 .65rem; margin: 0 auto;
  font-size: .95rem; line-height: 1.4;
  box-shadow: 0 2px 4px rgba(0,0,0,.35); display: block;
  width: fit-content; max-width: 90%; text-align: left;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
}
pre::-webkit-scrollbar { display: none; }
pre code { display: inline-block; padding: .35rem 0; background: transparent; color: var(--fg2); }
pre[class*="language-"], code[class*="language-"] {
  background: rgba(18, 52, 79, 0.35) !important;
  backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
  color: var(--fg) !important; box-shadow: 0 2px 4px rgba(0,0,0,.35) !important;
  text-align: left !important; font-family: "Fira Code", monospace !important;
}
pre[class*="language-"] { padding: .15rem 1rem .15rem 1rem !important; margin: .5rem auto !important; width: fit-content; max-width: 90%; line-height: 1.3; }
code[class*="language-"] { background: transparent !important; color: var(--fg2) !important; white-space: pre !important; display: block; padding-left: .25rem; }

/* BLUR CSS */
.tab,
.tab2,
.tab3,
.panel,
footer {
  background: var(--tab);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}