html {
  color-scheme: dark;
}

:root {
  --bg: #07090d;
  --bg-soft: #0d1118;
  --panel: rgba(16, 20, 28, 0.72);
  --text: rgba(246, 247, 250, 0.96);
  --muted: rgba(214, 220, 230, 0.68);
  --line: rgba(232, 238, 248, 0.11);
  --accent: #f2a43a;
  --accent-soft: rgba(242, 164, 58, 0.16);
  --surface: rgba(16, 20, 28, 0.58);
  --surface-strong: rgba(22, 27, 36, 0.86);
}

body {
  color: var(--text);
  background:
    radial-gradient(circle at 50% -12%, rgba(118, 136, 168, 0.2), transparent 30%),
    radial-gradient(circle at 52% 30%, rgba(56, 70, 94, 0.3), transparent 42%),
    radial-gradient(circle at 50% 74%, rgba(242, 164, 58, 0.055), transparent 38%),
    linear-gradient(180deg, #05070b 0%, #0a0d13 46%, #10131a 100%) !important;
}

body::before {
  background:
    radial-gradient(circle at 50% 38%, rgba(205, 219, 244, 0.08), transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(119, 134, 160, 0.055), transparent 60%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 26%, transparent 74%, rgba(255, 255, 255, 0.035)) !important;
  mix-blend-mode: screen !important;
  opacity: 0.8;
}

body::after {
  background:
    radial-gradient(ellipse at 50% 34%, rgba(255, 255, 255, 0.055), transparent 28%),
    radial-gradient(ellipse at center, transparent 36%, rgba(0, 0, 0, 0.18) 72%, rgba(0, 0, 0, 0.36) 100%) !important;
}

.frame {
  border-color: rgba(230, 236, 248, 0.1) !important;
}

.site-signature,
.nav__links,
.music-control,
.archive-link,
.ghost-btn,
.modal-close,
.avatar-close,
.slider-btn,
.filter-btn,
.work-filter,
.work-card__hint {
  border-color: rgba(232, 238, 248, 0.11) !important;
  background: rgba(18, 23, 32, 0.68) !important;
  color: rgba(238, 241, 247, 0.78) !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.site-signature::before {
  box-shadow: 0 0 18px rgba(242, 164, 58, 0.48) !important;
}

.nav__links a,
.nav__links span,
.music-control__toggle,
.music-control__value {
  color: rgba(238, 241, 247, 0.68) !important;
}

.nav__links .is-active,
.nav__links a:hover,
.filter-btn.is-active,
.filter-btn:hover,
.music-control:hover {
  background: rgba(238, 241, 247, 0.12) !important;
  color: rgba(250, 251, 255, 0.96) !important;
}

h1,
h2,
h3,
.pressure-title,
.material-title,
.identity,
.hero-copy h1,
.hero__title h1,
.contact-title,
.work-section__header h2,
.works-hero h1,
.hero-kicker,
.section-copy strong {
  color: rgba(246, 247, 250, 0.96) !important;
  -webkit-text-fill-color: currentColor;
  text-shadow: none !important;
}

.material-title::after {
  background:
    radial-gradient(circle at var(--title-x) var(--title-y),
      rgba(255, 255, 255, 0.58) 0%,
      rgba(164, 184, 220, 0.28) 14%,
      transparent 42%) !important;
}

p,
.muted,
.intro p,
.section-copy > .muted,
.section-heading > .muted,
.works__header .muted,
.contact .muted,
.hero-copy p,
.intro__body p,
.contact-note,
.work-card__desc,
.project-brief p,
.project-section p,
.contact-screen p {
  color: rgba(214, 220, 230, 0.7) !important;
  text-shadow: none !important;
}

.label,
.side-label,
.scroll-hint,
.modal__eyebrow,
.project-brief__label,
.contact-link span,
.work-card__meta,
.card__meta,
.page-loader__meta {
  color: rgba(214, 220, 230, 0.46) !important;
}

.hero-hud,
.hero-hud__title,
.hero-hud__value,
.hero-hud__row span:first-child,
.hero-hud__percent,
.hero-hud__caption {
  color: rgba(225, 232, 244, 0.48) !important;
}

.hero-hud__bracket,
.hero-hud__status {
  border-color: rgba(225, 232, 244, 0.18) !important;
}

.hero-hud__bracket::before,
.hero-hud__bracket::after,
.hero-hud__cross::before,
.hero-hud__cross::after,
.hero-hud__track::before {
  background: rgba(225, 232, 244, 0.28) !important;
}

.hero-hud__track {
  background: rgba(225, 232, 244, 0.12) !important;
}

.hero-hud__cell {
  border-color: rgba(225, 232, 244, 0.16) !important;
  background: rgba(225, 232, 244, 0.055) !important;
}

.hero-hud__cell:nth-child(3n + 1),
.hero-hud__cell.is-active {
  background: rgba(225, 232, 244, 0.16) !important;
}

.hero-kicker,
.mini-mark,
.tag,
.chip,
.project-pill,
.project-step,
.project-section__inner,
.project-brief__content,
.timeline-card,
.incubation-card,
.contact-card,
.intro__aside,
.intro-visual,
.ability__face,
.work-card,
.rough-card,
.work-modal__panel,
.avatar-panel,
.modal__content,
.modal__aside,
.project-brief,
.project-section,
.qr-card {
  border-color: rgba(232, 238, 248, 0.1) !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(164, 184, 220, 0.08), transparent 36%),
    rgba(16, 20, 28, 0.66) !important;
  color: var(--text) !important;
  box-shadow:
    0 28px 78px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.ability__face--front {
  background:
    radial-gradient(circle at 20% 18%, rgba(164, 184, 220, 0.09), transparent 36%),
    rgba(16, 20, 28, 0.62) !important;
}

.ability__face--back {
  background:
    radial-gradient(circle at 78% 18%, rgba(242, 164, 58, 0.09), transparent 36%),
    rgba(20, 24, 32, 0.8) !important;
}

.ability__skill,
.incubation-card p,
.timeline-card p,
.project-step p {
  color: rgba(214, 220, 230, 0.66) !important;
}

.ability__skill {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.page--about .timeline-item,
body.page--about .incubation-card {
  border-color: rgba(232, 238, 248, 0.12) !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(164, 184, 220, 0.1), transparent 34%),
    linear-gradient(145deg, rgba(24, 29, 39, 0.9), rgba(12, 16, 24, 0.78)) !important;
  color: rgba(246, 247, 250, 0.94) !important;
  box-shadow:
    0 28px 76px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

body.page--about .timeline-item::before {
  box-shadow: 0 0 18px rgba(242, 164, 58, 0.28) !important;
}

body.page--about .timeline-item h3,
body.page--about .incubation-card h4 {
  color: rgba(250, 251, 255, 0.98) !important;
  text-shadow: none !important;
}

body.page--about .timeline-item .year,
body.page--about .incubation-card .year {
  color: rgba(232, 238, 248, 0.58) !important;
}

body.page--about .timeline-item strong,
body.page--about .incubation-card strong {
  color: rgba(244, 247, 252, 0.9) !important;
}

body.page--about .timeline-item p,
body.page--about .incubation-card p,
body.page--about .growth-line {
  color: rgba(220, 226, 236, 0.76) !important;
  text-shadow: none !important;
}

body.page--about .timeline-item .role span,
body.page--about .timeline-item .role strong,
body.page--about .incubation-card strong {
  color: rgba(244, 247, 252, 0.92) !important;
}

body.page--about .timeline-item .year,
body.page--about .incubation-card .year,
body.page--about .incubation__heading {
  letter-spacing: 0.08em !important;
}

body.page--about .timeline-item .keyword,
body.page--about .incubation-card .keyword {
  border-color: rgba(232, 238, 248, 0.1) !important;
  background: rgba(232, 238, 248, 0.08) !important;
  color: rgba(232, 238, 248, 0.7) !important;
}

body.page--about .incubation__heading {
  border-color: rgba(232, 238, 248, 0.12) !important;
  background: rgba(232, 238, 248, 0.06) !important;
  color: rgba(214, 220, 230, 0.72) !important;
}

.works-slider,
.work-archive,
.contact-list {
  color: var(--text);
}

.card {
  background: #0e1118 !important;
  border-color: rgba(232, 238, 248, 0.12) !important;
  box-shadow:
    0 32px 82px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.card::before {
  background:
    linear-gradient(90deg, rgba(5, 7, 11, 0.9) 0%, rgba(5, 7, 11, 0.6) 38%, rgba(5, 7, 11, 0.08) 72%),
    linear-gradient(0deg, rgba(5, 7, 11, 0.66), transparent 48%),
    radial-gradient(circle at 18% 24%, rgba(242, 164, 58, 0.12), transparent 32%) !important;
}

.card__index,
.card__arrow,
.slider-dot,
.project-brief__number {
  background: rgba(232, 238, 248, 0.1) !important;
  color: rgba(246, 247, 250, 0.74) !important;
}

.card small,
.card__meta,
.card__body em {
  color: rgba(246, 247, 250, 0.68) !important;
}

.contact-link {
  color: rgba(246, 247, 250, 0.9) !important;
  border-color: rgba(232, 238, 248, 0.12) !important;
}

.contact-link:hover {
  color: #fff !important;
  border-color: rgba(242, 164, 58, 0.28) !important;
}

.work-card {
  background-color: rgba(16, 20, 28, 0.7) !important;
}

.work-card::after,
.modal-card-clone::after {
  background:
    linear-gradient(180deg, rgba(5, 7, 11, 0.04) 0%, transparent 42%, rgba(5, 7, 11, 0.66) 100%),
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.12), transparent 26%) !important;
}

.work-card__title,
.project-section h3,
.project-section__title,
.project-brief__title,
.project-brief strong,
.contact-link strong {
  color: rgba(246, 247, 250, 0.94) !important;
}

.work-modal,
.avatar-modal {
  background: rgba(5, 7, 11, 0.72) !important;
}

.work-modal__panel,
.avatar-panel {
  background: rgba(12, 15, 21, 0.96) !important;
}

.modal__visual,
.project-visual {
  background: #05070b !important;
}

.modal__copy,
.modal__info {
  background: rgba(12, 15, 21, 0.94) !important;
  color: var(--text) !important;
}

.modal__desc,
.project-brief__text,
.project-section__body,
.project-detail li {
  color: rgba(214, 220, 230, 0.72) !important;
}

.project-detail li,
.project-brief__wide,
.project-section__inner {
  background: rgba(232, 238, 248, 0.07) !important;
}

.modal .close-btn,
.work-modal .modal-close {
  position: sticky !important;
  top: max(18px, env(safe-area-inset-top, 0px) + 14px) !important;
  z-index: 18 !important;
  background: rgba(18, 23, 32, 0.88) !important;
  color: rgba(246, 247, 250, 0.94) !important;
  border-color: rgba(232, 238, 248, 0.16) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.modal .close-btn:hover,
.work-modal .modal-close:hover {
  background: rgba(28, 34, 45, 0.94) !important;
  border-color: rgba(242, 164, 58, 0.32) !important;
}

.modal__panel {
  color: rgba(238, 243, 252, 0.92) !important;
}

.modal__info {
  background:
    radial-gradient(circle at 50% 0%, rgba(164, 184, 220, 0.08), transparent 32%),
    rgba(11, 14, 20, 0.96) !important;
}

.modal__title {
  color: rgba(250, 251, 255, 0.98) !important;
}

.modal__desc {
  color: rgba(226, 232, 242, 0.82) !important;
  font-size: clamp(16px, 1.25vw, 18px) !important;
  line-height: 1.8 !important;
}

.modal__tags span {
  background: rgba(232, 238, 248, 0.08) !important;
  border-color: rgba(232, 238, 248, 0.13) !important;
  color: rgba(226, 232, 242, 0.74) !important;
}

.project-overview .project-brief__label,
.project-section__heading {
  background: rgba(232, 238, 248, 0.12) !important;
  border-color: rgba(232, 238, 248, 0.18) !important;
  color: rgba(250, 251, 255, 0.96) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.project-brief__item,
.project-brief__wide,
.project-brief__lead,
.project-brief__output li {
  background:
    radial-gradient(circle at 16% 10%, rgba(164, 184, 220, 0.06), transparent 30%),
    rgba(232, 238, 248, 0.09) !important;
  border-color: rgba(232, 238, 248, 0.14) !important;
  color: rgba(238, 243, 252, 0.9) !important;
}

.project-overview .project-brief__lead {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.project-brief__label,
.project-brief__lead h3 {
  color: rgba(226, 232, 242, 0.72) !important;
  font-size: 13px !important;
}

.project-brief__item p,
.project-brief__wide p,
.project-brief__lead p,
.project-section__body,
.project-brief__output li {
  color: rgba(232, 238, 248, 0.84) !important;
  font-size: clamp(15px, 1.12vw, 17px) !important;
  line-height: 1.85 !important;
  letter-spacing: 0.01em !important;
}

.modal__info .modal__copy,
.modal__info .project-brief,
.modal__info .project-overview,
.modal__info .project-section,
.modal__info .project-section__body {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.modal__info .modal__copy {
  max-width: 940px;
}

.modal__info .project-brief {
  gap: clamp(42px, 5.8vw, 76px) !important;
}

.modal__info .project-overview {
  gap: clamp(26px, 3.5vw, 46px) !important;
}

.modal__info .project-section {
  gap: clamp(18px, 2.4vw, 30px) !important;
  padding-top: clamp(20px, 3vw, 34px) !important;
  border-top: 1px solid rgba(232, 238, 248, 0.1) !important;
}

.modal__info .project-brief__item,
.modal__info .project-brief__wide,
.modal__info .project-brief__lead,
.modal__info .project-brief__output li {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.modal__info .project-brief__item,
.modal__info .project-brief__wide,
.modal__info .project-brief__lead {
  padding: 0 !important;
}

.modal__info .project-brief__grid {
  gap: clamp(22px, 3vw, 38px) clamp(28px, 4.5vw, 56px) !important;
}

.modal__info .project-overview .project-brief__label,
.modal__info .project-section__heading {
  justify-self: start !important;
  min-width: 0 !important;
  padding: 0 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(250, 251, 255, 0.94) !important;
  text-align: left !important;
}

.modal__info .project-overview .project-brief__label {
  font-size: clamp(18px, 1.75vw, 24px) !important;
}

.modal__info .project-section__heading {
  font-size: clamp(20px, 2vw, 28px) !important;
}

.modal__info .project-brief__label {
  color: rgba(226, 232, 242, 0.58) !important;
}

.modal__info .project-brief__output {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.modal__info .project-brief__output li {
  position: relative;
  padding: 0 0 0 16px !important;
  border-radius: 0 !important;
}

.modal__info .project-brief__output li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 1px;
  background: rgba(232, 238, 248, 0.58);
}

.geo-grid {
  opacity: 0.42 !important;
  mix-blend-mode: screen !important;
}

.geo-grid::before {
  background:
    radial-gradient(circle at 50% 48%, rgba(164, 184, 220, 0.13), transparent 34%),
    radial-gradient(circle at 50% 52%, rgba(232, 238, 248, 0.055), transparent 56%) !important;
}

.geo-grid .geo-line {
  stroke: rgba(198, 210, 232, 0.22) !important;
}

.geo-grid .geo-line--soft {
  stroke: rgba(198, 210, 232, 0.12) !important;
}

.geo-grid .geo-line--axis {
  stroke: rgba(242, 164, 58, 0.14) !important;
}

.particle-canvas,
#particleCanvas {
  opacity: 0.92;
  mix-blend-mode: screen;
}

.page-loader {
  background:
    radial-gradient(circle at 50% 38%, rgba(118, 136, 168, 0.18), transparent 34%),
    linear-gradient(180deg, #05070b 0%, #0b0f16 100%) !important;
  color: rgba(246, 247, 250, 0.9) !important;
}

.page-loader__word::before,
.page-loader__word::after {
  border-color: rgba(232, 238, 248, 0.14) !important;
}

.page-loader__word span {
  color: rgba(246, 247, 250, 0.86) !important;
}

.music-control__range {
  accent-color: var(--accent);
}

.avatar-modal img,
.modal__visual img,
.modal__visual video,
.work-card img,
.card__visual img,
.project-gallery video,
.qr-card img {
  filter: saturate(0.94) contrast(1.04);
}

.qr-card span {
  position: relative;
  z-index: 2;
  color: rgba(246, 247, 250, 0.9) !important;
  font-weight: 650;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.48);
}

@media (max-width: 900px) {
  .hero-hud {
    opacity: calc(0.32 + (0.22 * var(--hud-mobile-fade))) !important;
  }
}