:root {
  --tech-cyan: #57e6ff;
  --tech-mint: #45ff9d;
  --tech-orange: #ff7a3d;
  --tech-card: rgba(7, 17, 26, .58);
  --tech-card-strong: rgba(8, 20, 32, .74);
  --tech-border: rgba(103, 229, 255, .24);
  --tech-border-hot: rgba(83, 255, 173, .42);
  --tech-text: rgba(235, 248, 255, .92);
  --tech-muted: rgba(176, 211, 226, .68);
  --main_text_color: rgba(235, 248, 255, .92) !important;
  --item_bg_color: var(--tech-card) !important;
  --text_bg_color: rgba(5, 16, 26, .62) !important;
  --left_tag_item: rgba(20, 47, 63, .66) !important;
  --fill: rgba(235, 248, 255, .92) !important;
  --card_filter: 14px !important;
  --back_filter_color: rgba(0, 0, 0, .14) !important;
}
html, body {
  color: var(--tech-text) !important;
}
body.threebody-bg-active .zyyo-main {
  max-width: 1220px;
  padding: 28px 22px 64px;
  gap: 26px;
}
body.threebody-bg-active .zyyo-left {
  width: 250px;
  padding: 0 10px;
  height: 100vh;
}
body.threebody-bg-active .zyyo-right {
  width: calc(100% - 250px);
  padding: 8px 0 60px;
}
body.threebody-bg-active .logo,
body.threebody-bg-active .index-logo,
body.threebody-bg-active #modal .logo-1 {
  border: 1px solid rgba(116, 232, 255, .40);
  box-shadow: 0 0 0 7px rgba(85, 220, 255, .045), 0 0 34px rgba(77, 224, 255, .16);
}
body.threebody-bg-active .logo {
  width: 188px;
  margin-top: 36px;
}
body.threebody-bg-active .left-div,
body.threebody-bg-active .projectItem,
body.threebody-bg-active .big #app-list,
body.threebody-bg-active .big .small form,
body.threebody-bg-active .dig_box .dig_contact,
body.threebody-bg-active .app-card,
body.threebody-bg-active .appListMore,
body.threebody-bg-active .slide-button,
body.threebody-bg-active #modal .container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(9, 22, 34, .78), rgba(12, 28, 38, .46)) !important;
  border: 1px solid var(--tech-border) !important;
  border-radius: 12px !important;
  color: var(--tech-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 44px rgba(0,0,0,.24), 0 0 24px rgba(43, 207, 255, .06) !important;
  backdrop-filter: blur(15px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(15px) saturate(1.2) !important;
}
body.threebody-bg-active .left-div::before,
body.threebody-bg-active .projectItem::before,
body.threebody-bg-active #modal .container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(91, 231, 255, .10), transparent);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
body.threebody-bg-active .left-div:hover::before,
body.threebody-bg-active .projectItem:hover::before,
body.threebody-bg-active #modal .container:hover::before {
  transform: translateX(120%);
}
body.threebody-bg-active .left-des-item,
body.threebody-bg-active .timeline-content,
body.threebody-bg-active .timeline-date,
body.threebody-bg-active #line li,
body.threebody-bg-active .projectItem p,
body.threebody-bg-active .app-description,
body.threebody-bg-active .big #app-list .app-container .app-info .app-description {
  color: var(--tech-muted) !important;
}
body.threebody-bg-active .left-tag,
body.threebody-bg-active .left-time,
body.threebody-bg-active .left-des {
  padding: 18px;
}
body.threebody-bg-active .left-tag-item,
body.threebody-bg-active .tag-item,
body.threebody-bg-active .preview-tag {
  min-width: auto !important;
  height: 30px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(116, 232, 255, .22) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(36, 82, 102, .72), rgba(12, 37, 53, .78)) !important;
  color: rgba(232, 248, 255, .92) !important;
  box-shadow: 0 0 14px rgba(75, 225, 255, .08);
}
body.threebody-bg-active #line li {
  border-left-color: rgba(104, 226, 255, .38);
}
body.threebody-bg-active .focus {
  background: var(--tech-mint);
  border-color: rgba(215,255,235,.95);
  box-shadow: 0 0 14px rgba(69,255,157,.78);
}
body.threebody-bg-active .welcome {
  margin: 14px 0 8px;
  font-size: clamp(48px, 5.5vw, 76px);
  line-height: 1.05;
  text-shadow: 0 0 28px rgba(73, 214, 255, .16);
}
body.threebody-bg-active .description {
  margin-top: 6px;
  color: var(--tech-muted);
}
body.threebody-bg-active .iconContainer {
  height: 62px;
  margin-top: 22px;
  gap: 10px;
}
body.threebody-bg-active .iconItem,
body.threebody-bg-active .switch {
  width: 48px;
  height: 44px;
  margin-left: 0;
  border-radius: 10px;
  background: rgba(10, 27, 39, .76) !important;
  border: 1px solid rgba(104, 226, 255, .22);
  box-shadow: 0 0 18px rgba(75, 225, 255, .08);
}
body.threebody-bg-active .iconItem:hover,
body.threebody-bg-active .switch:hover,
body.threebody-bg-active .projectItem:hover,
body.threebody-bg-active .appListMore:hover,
body.threebody-bg-active .slide-button:hover {
  transform: translateY(-2px);
  border-color: var(--tech-border-hot) !important;
  box-shadow: 0 0 30px rgba(72, 255, 171, .16), 0 12px 34px rgba(0,0,0,.28) !important;
}
body.threebody-bg-active .iconItem svg,
body.threebody-bg-active .iconItem path {
  fill: rgba(229, 247, 255, .92) !important;
}
body.threebody-bg-active .projectList,
body.threebody-bg-active .index-list {
  gap: 16px;
}
body.threebody-bg-active .projectItem {
  min-height: 94px;
  padding: 18px !important;
}
body.threebody-bg-active .projectItem h1,
body.threebody-bg-active .projectItem h2,
body.threebody-bg-active .projectItem .projectItemLeft h1 {
  color: rgba(244, 252, 255, .96) !important;
  text-shadow: 0 0 18px rgba(82, 222, 255, .18);
}
body.threebody-bg-active .projectItem::after {
  content: "ONLINE";
  position: absolute;
  right: 14px;
  top: 10px;
  font: 10px/1 Arial, sans-serif;
  color: rgba(69,255,157,.74);
  letter-spacing: 0;
}
body.threebody-bg-active .titll,
body.threebody-bg-active .titlk {
  color: rgba(238, 250, 255, .95) !important;
  text-shadow: 0 0 18px rgba(80, 220, 255, .22);
}
body.threebody-bg-active .titll::after,
body.threebody-bg-active .titlk::after {
  content: "";
  display: inline-block;
  width: 88px;
  height: 1px;
  margin-left: 12px;
  vertical-align: middle;
  background: linear-gradient(90deg, rgba(88,230,255,.68), transparent);
}
body.threebody-bg-active .gradient,
body.threebody-bg-active .gradient2,
body.threebody-bg-active .appListMore,
body.threebody-bg-active .slide-button {
  color: rgba(238, 250, 255, .95) !important;
  border: 1px solid rgba(106, 229, 255, .32) !important;
  background: linear-gradient(135deg, rgba(21, 61, 82, .78), rgba(14, 34, 50, .82)) !important;
  box-shadow: 0 0 20px rgba(65, 221, 255, .10) !important;
}
body.threebody-bg-active .gradient2 {
  min-width: 150px;
  height: 44px;
  border-radius: 999px !important;
}
body.threebody-bg-active .btns-bg2,
body.threebody-bg-active .Play {
  width: auto !important;
  height: auto !important;
  font-weight: 700;
  letter-spacing: 0;
}
body.threebody-bg-active #modal .container {
  max-width: 390px;
  min-width: 320px;
  padding: 28px 30px 22px;
}
body.threebody-bg-active #modal .container::after {
  content: "CIVILIZATION BOOT SEQUENCE";
  position: absolute;
  left: 22px;
  top: 18px;
  color: rgba(87, 230, 255, .54);
  font: 10px/1 Arial, sans-serif;
}
body.threebody-bg-active #modal .name {
  margin: 12px 0 6px;
  font-size: clamp(34px, 4vw, 46px);
}
body.threebody-bg-active #modal .description {
  font-size: 17px;
  margin: 8px 0 12px;
}
body.threebody-bg-active #modal p {
  color: rgba(170, 210, 225, .72);
  margin: 10px 0 0;
}
body.threebody-bg-active #threebody-clock {
  opacity: .68;
  transform: scale(.9);
  transform-origin: top right;
}
body.threebody-bg-active.popup-open #threebody-clock {
  opacity: .48;
}
body.threebody-bg-active.popup-open #modal {
  background: radial-gradient(circle at 50% 50%, rgba(5,18,29,.16), rgba(0,0,0,.26)) !important;
}
body.threebody-bg-active .app-card,
body.threebody-bg-active .big #app-list {
  color: var(--tech-text) !important;
}
body.threebody-bg-active .dig_box {
  background: rgba(0, 0, 0, .52) !important;
}
body.threebody-bg-active footer,
body.threebody-bg-active .footer,
body.threebody-bg-active .wxAi {
  color: var(--tech-muted) !important;
}
@media (max-width: 900px) {
  body.threebody-bg-active .zyyo-main {
    display: block;
    padding: 18px 14px 42px;
  }
  body.threebody-bg-active .zyyo-left {
    display: none !important;
  }
  body.threebody-bg-active .zyyo-right {
    width: 100%;
    padding: 0;
  }
  body.threebody-bg-active .index-logo {
    width: 118px;
    margin: 18px auto 8px;
  }
  body.threebody-bg-active .welcome {
    text-align: center;
    font-size: clamp(38px, 13vw, 54px);
    margin-top: 8px;
  }
  body.threebody-bg-active .description {
    text-align: center;
    font-size: 16px;
  }
  body.threebody-bg-active .iconContainer {
    justify-content: center;
    overflow: visible;
    flex-wrap: wrap;
    height: auto;
  }
  body.threebody-bg-active .projectList,
  body.threebody-bg-active .index-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  body.threebody-bg-active .projectItem {
    min-height: 86px;
  }
  body.threebody-bg-active #modal .container {
    width: calc(100vw - 42px);
    min-width: 0;
    padding: 26px 22px 20px;
  }
  body.threebody-bg-active #modal .logo-1 {
    width: 128px;
    height: 128px;
  }
}


body.threebody-bg-active .projectList,
body.threebody-bg-active .projectItem {
  position: relative;
  z-index: 20;
  pointer-events: auto !important;
}
body.threebody-bg-active .projectItem,
body.threebody-bg-active .projectItem * {
  cursor: pointer;
}
body.threebody-bg-active .dig_box {
  z-index: 1000000 !important;
}

body.threebody-bg-active .projectList {
  isolation: isolate;
}
body.threebody-bg-active .projectItem {
  display: flex !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(87, 230, 255, .18);
}

body.threebody-bg-active .project-modal-box {
  background: rgba(1, 10, 16, .68) !important;
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
}

body.threebody-bg-active .project-modal-box .dig_contact {
  max-width: min(720px, calc(100vw - 32px));
  max-height: min(78vh, 680px);
  overflow: auto;
  border: 1px solid rgba(87, 230, 255, .38) !important;
  background: linear-gradient(145deg, rgba(4, 18, 27, .96), rgba(7, 31, 43, .92)) !important;
  box-shadow: 0 0 32px rgba(87, 230, 255, .16), inset 0 0 28px rgba(87, 230, 255, .06) !important;
  color: #e9fbff;
}

body.threebody-bg-active .project-modal-box .close-button {
  color: #9ff7ff !important;
  text-shadow: 0 0 10px rgba(87, 230, 255, .7);
}

/* Mobile cockpit layout polish */
@media (max-width: 640px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body.threebody-bg-active .zyyo-main {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 18px 18px 88px !important;
    box-sizing: border-box;
  }

  body.threebody-bg-active .zyyo-right,
  body.threebody-bg-active header,
  body.threebody-bg-active .big {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body.threebody-bg-active #threebody-clock {
    position: fixed !important;
    top: 74px !important;
    right: 10px !important;
    width: 142px !important;
    min-height: 72px !important;
    padding: 8px 10px !important;
    transform: none !important;
    opacity: .28 !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  body.threebody-bg-active #threebody-clock .tb-status,
  body.threebody-bg-active #threebody-clock .tb-metrics,
  body.threebody-bg-active #threebody-clock .tb-log-wrap {
    display: none !important;
  }

  body.threebody-bg-active #threebody-clock .tb-time {
    font-size: 34px !important;
    line-height: .95 !important;
    text-align: right !important;
  }

  body.threebody-bg-active #threebody-clock .tb-date-row {
    justify-content: flex-end !important;
    gap: 8px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  body.threebody-bg-active .index-logo {
    width: 150px !important;
    height: 150px !important;
    margin: 72px auto 14px !important;
    position: relative;
    z-index: 3;
  }

  body.threebody-bg-active .welcome {
    width: 100% !important;
    margin: 0 auto 8px !important;
    text-align: center !important;
    font-size: clamp(40px, 16vw, 58px) !important;
    line-height: .9 !important;
    position: relative;
    z-index: 3;
  }

  body.threebody-bg-active .description {
    margin: 8px auto 18px !important;
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    position: relative;
    z-index: 3;
  }

  body.threebody-bg-active .iconContainer {
    width: 100% !important;
    gap: 10px !important;
    justify-content: center !important;
    margin: 0 auto 20px !important;
    padding: 0 !important;
  }

  body.threebody-bg-active .iconItem,
  body.threebody-bg-active .switch {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 12px !important;
  }

  body.threebody-bg-active .iconItem svg {
    width: 28px !important;
    height: 28px !important;
  }

  body.threebody-bg-active .skill,
  body.threebody-bg-active .skill-list,
  body.threebody-bg-active .skillContainer,
  body.threebody-bg-active .skill-box,
  body.threebody-bg-active .skillBox {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body.threebody-bg-active .projectList {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 14px !important;
  }

  body.threebody-bg-active .projectItem {
    width: 100% !important;
    min-height: 96px !important;
    padding: 18px 20px !important;
    box-sizing: border-box !important;
  }

  body.threebody-bg-active .projectItem h1,
  body.threebody-bg-active .projectItem .projectItemLeft h1 {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }

  body.threebody-bg-active .projectItem p {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  body.threebody-bg-active .title,
  body.threebody-bg-active .titll,
  body.threebody-bg-active .big-title {
    max-width: 100% !important;
  }

  body.threebody-bg-active .big > div,
  body.threebody-bg-active section,
  body.threebody-bg-active .line,
  body.threebody-bg-active .app-store,
  body.threebody-bg-active .appList,
  body.threebody-bg-active .project {
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  body.threebody-bg-active #threebody-clock {
    top: 64px !important;
    right: 8px !important;
    width: 116px !important;
    min-height: 56px !important;
    padding: 6px 8px !important;
    opacity: .18 !important;
    filter: saturate(.9);
  }

  body.threebody-bg-active #threebody-clock .tb-time {
    font-size: 28px !important;
  }

  body.threebody-bg-active #threebody-clock .tb-date-row {
    font-size: 10px !important;
    gap: 5px !important;
  }

  body.threebody-bg-active .index-logo,
  body.threebody-bg-active .welcome,
  body.threebody-bg-active .description,
  body.threebody-bg-active .iconContainer {
    position: relative;
    z-index: 4;
  }
}

/* Deep sci-fi atmosphere polish */
body.threebody-bg-active {
  color: #eafcff;
  background-color: #02070b !important;
}

body.threebody-bg-active::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(115deg, rgba(0, 255, 210, .045), transparent 22%, transparent 72%, rgba(255, 62, 180, .04)),
    repeating-linear-gradient(0deg, rgba(122, 235, 255, .045) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(122, 235, 255, .026) 0 1px, transparent 1px 92px);
  mix-blend-mode: screen;
  opacity: .44;
  animation: techScanDrift 11s linear infinite;
}

body.threebody-bg-active::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 32%, rgba(67, 220, 255, .10), transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, .68), transparent 18%, transparent 78%, rgba(0, 0, 0, .76)),
    linear-gradient(180deg, rgba(0, 0, 0, .22), transparent 42%, rgba(0, 0, 0, .58));
}

@keyframes techScanDrift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 0 60px, 92px 0; }
}

body.threebody-bg-active .zyyo-main {
  position: relative;
  z-index: 2;
}

body.threebody-bg-active .zyyo-left::before,
body.threebody-bg-active .big::before {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(94, 239, 255, .16);
  opacity: .74;
}

body.threebody-bg-active .zyyo-left::before {
  inset: 18px auto auto -18px;
  width: 86px;
  height: 180px;
  border-right: 0;
  border-bottom: 0;
  filter: drop-shadow(0 0 12px rgba(79, 222, 255, .25));
}

body.threebody-bg-active .big::before {
  right: -24px;
  top: 22px;
  width: 130px;
  height: 78px;
  border-left: 0;
  border-bottom: 0;
}

body.threebody-bg-active .welcome .gradientText2,
body.threebody-bg-active .welcome {
  text-shadow:
    0 0 10px rgba(81, 227, 255, .34),
    0 0 26px rgba(224, 54, 179, .24),
    0 0 46px rgba(81, 227, 255, .12);
  filter: saturate(1.18);
}

body.threebody-bg-active .description .gradientText,
body.threebody-bg-active .description {
  text-shadow: 0 0 14px rgba(255, 69, 172, .28), 0 0 24px rgba(75, 225, 255, .16);
}

body.threebody-bg-active .logo,
body.threebody-bg-active .index-logo {
  box-shadow:
    0 0 0 1px rgba(119, 243, 255, .55),
    0 0 24px rgba(87, 230, 255, .34),
    0 0 58px rgba(255, 70, 183, .16) !important;
}

body.threebody-bg-active .index-logo::after,
body.threebody-bg-active .logo::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: inherit;
  border: 1px solid rgba(93, 230, 255, .18);
  border-top-color: rgba(255, 71, 184, .35);
  animation: haloRotate 8s linear infinite;
  pointer-events: none;
}

@keyframes haloRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

body.threebody-bg-active .left-div,
body.threebody-bg-active .iconItem,
body.threebody-bg-active .switch,
body.threebody-bg-active .projectItem,
body.threebody-bg-active .app-card,
body.threebody-bg-active .big #app-list {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(3, 17, 27, .86), rgba(7, 31, 44, .72)) !important;
  border-color: rgba(87, 230, 255, .34) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .03),
    inset 0 0 34px rgba(65, 221, 255, .045),
    0 0 22px rgba(45, 208, 255, .08) !important;
}

body.threebody-bg-active .left-div::before,
body.threebody-bg-active .projectItem::before,
body.threebody-bg-active .app-card::before,
body.threebody-bg-active .big #app-list::before {
  background:
    linear-gradient(90deg, transparent, rgba(113, 241, 255, .18), transparent) !important;
  animation: panelSweep 5.8s ease-in-out infinite;
}

@keyframes panelSweep {
  0%, 48% { transform: translateX(-130%); opacity: 0; }
  56% { opacity: .95; }
  100% { transform: translateX(130%); opacity: 0; }
}

body.threebody-bg-active .iconItem::after,
body.threebody-bg-active .switch::after,
body.threebody-bg-active .projectItem::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 10px;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(101, 238, 255, .7));
  box-shadow: 0 6px 0 rgba(101, 238, 255, .12);
  opacity: .85;
}

body.threebody-bg-active .iconItem:hover,
body.threebody-bg-active .switch:hover,
body.threebody-bg-active .projectItem:hover,
body.threebody-bg-active .app-card:hover {
  border-color: rgba(127, 249, 255, .68) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .045),
    inset 0 0 42px rgba(65, 221, 255, .08),
    0 0 28px rgba(72, 227, 255, .18),
    0 0 52px rgba(255, 69, 181, .08) !important;
  transform: translateY(-2px);
}

body.threebody-bg-active .projectItem h1,
body.threebody-bg-active .projectItem .projectItemLeft h1,
body.threebody-bg-active .titll,
body.threebody-bg-active .title,
body.threebody-bg-active .big-title {
  text-shadow: 0 0 14px rgba(94, 236, 255, .28), 0 0 30px rgba(255, 64, 184, .14);
}

body.threebody-bg-active .projectItem p,
body.threebody-bg-active .left-div,
body.threebody-bg-active .app-card p {
  color: rgba(189, 224, 235, .82) !important;
}

body.threebody-bg-active .projectItem .titlk,
body.threebody-bg-active .projectItemRight,
body.threebody-bg-active .role {
  color: rgba(115, 240, 255, .9) !important;
}

body.threebody-bg-active #threebody-clock {
  border-color: rgba(86, 233, 255, .22) !important;
  box-shadow: inset 0 0 34px rgba(75, 227, 255, .055), 0 0 30px rgba(67, 220, 255, .09);
}

body.threebody-bg-active #threebody-clock .tb-time {
  text-shadow: 0 0 18px rgba(92, 229, 255, .22);
}

body.threebody-bg-active .line,
body.threebody-bg-active hr,
body.threebody-bg-active .style-one {
  border-color: rgba(87, 230, 255, .18) !important;
  box-shadow: 0 0 18px rgba(87, 230, 255, .08);
}

@media (max-width: 640px) {
  body.threebody-bg-active::before {
    opacity: .34;
  }

  body.threebody-bg-active::after {
    background:
      radial-gradient(ellipse at 50% 22%, rgba(67, 220, 255, .08), transparent 36%),
      linear-gradient(90deg, rgba(0, 0, 0, .52), transparent 30%, rgba(0, 0, 0, .48)),
      linear-gradient(180deg, rgba(0, 0, 0, .18), transparent 50%, rgba(0, 0, 0, .62));
  }

  body.threebody-bg-active .zyyo-left::before,
  body.threebody-bg-active .big::before {
    display: none;
  }

  body.threebody-bg-active .projectItem:hover,
  body.threebody-bg-active .iconItem:hover,
  body.threebody-bg-active .switch:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.threebody-bg-active::before,
  body.threebody-bg-active .index-logo::after,
  body.threebody-bg-active .logo::after,
  body.threebody-bg-active .left-div::before,
  body.threebody-bg-active .projectItem::before,
  body.threebody-bg-active .app-card::before,
  body.threebody-bg-active .big #app-list::before {
    animation: none !important;
  }
}

/* Mobile title and first-screen balance */
@media (max-width: 640px) {
  body.threebody-bg-active .zyyo-main {
    padding: 14px 20px 84px !important;
  }

  body.threebody-bg-active .index-logo {
    width: 132px !important;
    height: 132px !important;
    margin: 44px auto 12px !important;
  }

  body.threebody-bg-active .welcome {
    display: block !important;
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 auto 6px !important;
    font-size: clamp(31px, 11.2vw, 43px) !important;
    line-height: 1.02 !important;
    text-align: center !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    transform: none !important;
  }

  body.threebody-bg-active .welcome .gradientText2 {
    display: inline-block !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    letter-spacing: 0 !important;
    transform: scaleX(.92);
    transform-origin: center;
  }

  body.threebody-bg-active .description {
    margin: 8px auto 15px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  body.threebody-bg-active .iconContainer {
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  body.threebody-bg-active .iconItem,
  body.threebody-bg-active .switch {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 11px !important;
  }

  body.threebody-bg-active .iconItem svg {
    width: 24px !important;
    height: 24px !important;
  }

  body.threebody-bg-active .skill,
  body.threebody-bg-active .skill-list,
  body.threebody-bg-active .skillContainer,
  body.threebody-bg-active .skill-box,
  body.threebody-bg-active .skillBox,
  body.threebody-bg-active .skill-tags,
  body.threebody-bg-active .skill-item {
    max-width: calc(100vw - 40px) !important;
  }

  body.threebody-bg-active .skill svg,
  body.threebody-bg-active .skill-list svg,
  body.threebody-bg-active .skillContainer svg,
  body.threebody-bg-active .skill-box svg,
  body.threebody-bg-active .skillBox svg {
    max-width: 100% !important;
  }

  body.threebody-bg-active .projectList {
    margin-top: 10px !important;
  }

  body.threebody-bg-active .projectItem {
    min-height: 88px !important;
  }

  body.threebody-bg-active .titll,
  body.threebody-bg-active .title,
  body.threebody-bg-active .big-title,
  body.threebody-bg-active h2 {
    word-break: keep-all !important;
  }
}

@media (max-width: 380px) {
  body.threebody-bg-active .welcome {
    font-size: clamp(28px, 10.4vw, 38px) !important;
    max-width: 330px !important;
  }

  body.threebody-bg-active .welcome .gradientText2 {
    transform: scaleX(.88);
  }

  body.threebody-bg-active .iconItem,
  body.threebody-bg-active .switch {
    width: 43px !important;
    height: 43px !important;
    min-width: 43px !important;
  }
}