:root {
  --bg:#0a0a0f;
  --panel:#12121acc;
  --panel-solid:#12121a;
  --panel2:#1a1a26;
  --text:#eef1f6;
  --muted:#9aa1ad;
  --gold:#d4af37;
  --gold2:#f6d365;
  --amber:#fda085;
  --line:rgba(255,255,255,.09);
  --green:#35d07f;
  --danger:#ff6b6b;
  --radius:24px;
  --max:1320px;
  --ease:cubic-bezier(.16,1,.3,1)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:102px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  overflow-x:hidden
}

button,input,textarea,select {
  font:inherit
}

button {
  cursor:pointer
}

a {
  color:inherit;
  text-decoration:none
}

img,video {
  display:block;
  max-width:100%
}

::selection {
  background:var(--gold);
  color:#111
}

::-webkit-scrollbar {
  width:8px
}

::-webkit-scrollbar-track {
  background:#08080d
}

::-webkit-scrollbar-thumb {
  background:#2b2b38;
  border-radius:99px
}

::-webkit-scrollbar-thumb:hover {
  background:var(--gold)
}

.no-scroll {
  overflow:hidden
}

.container {
  width:min(100% - 40px,var(--max));
  margin-inline:auto
}

.glass {
  background:rgba(18,18,26,.68);
  border:1px solid var(--line);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 28px 80px rgba(0,0,0,.28)
}

.eyebrow {
  font:700 12px/1.25 'Space Mono',monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold2)
}

.muted {
  color:var(--muted)
}


.site-intro {
  position:fixed;
  inset:0;
  z-index:10000;
  background:#07080c;
  color:white;
  display:grid;
  grid-template-rows:1fr auto;
  padding:clamp(24px,4vw,64px);
  overflow:hidden;
  transition:opacity .65s var(--ease),visibility .65s
}

.site-intro::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to right,black,transparent 92%)
}

.site-intro.intro-hidden {
  opacity:0;
  visibility:hidden;
  pointer-events:none
}

.intro-main {
  position:relative;
  display:flex;
  align-items:center
}

.intro-copy {
  font-family:Arial,Helvetica,sans-serif;
  font-weight:900;
  font-size:clamp(62px,10vw,160px);
  line-height:.78;
  letter-spacing:-.045em;
  text-transform:uppercase
}

.intro-copy span {
  display:block
}

.intro-copy .indent {
  margin-left:10vw
}

.intro-copy .outline {
  -webkit-text-stroke:1.4px rgba(255,255,255,.76);
  color:transparent
}

.intro-star {
  position:absolute;
  right:5vw;
  top:48%;
  width:74px;
  height:74px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  display:grid;
  place-items:center;
  animation:spin 5s linear infinite
}

.intro-star::after {
  content:'✦';
  font-size:16px
}

.intro-bottom {
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:end;
  font:700 10px 'Space Mono',monospace;
  letter-spacing:.12em
}

.intro-progress {
  grid-column:1/-1;
  height:1px;
  background:rgba(255,255,255,.18);
  position:relative
}

.intro-progress>i {
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background:white;
  transition:width .12s linear
}

.intro-pct {
  font-size:12px
}

.intro-skip {
  display:none
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}


.bg-canvas {
  position:fixed;
  inset:0;
  z-index:-2;
  width:100vw;
  height:100vh;
  pointer-events:none
}

.ambient {
  position:fixed;
  inset:0;
  z-index:-3;
  background:radial-gradient(circle at 18% 25%,rgba(212,175,55,.07),transparent 32%),radial-gradient(circle at 82% 70%,rgba(253,160,133,.045),transparent 35%),#0a0a0f
}


.cursor-dot,.cursor-ring {
  position:fixed;
  left:0;
  top:0;
  pointer-events:none;
  z-index:9998;
  border-radius:50%;
  transform:translate(-50%,-50%)
}

.cursor-dot {
  width:7px;
  height:7px;
  background:var(--gold)
}

.cursor-ring {
  width:36px;
  height:36px;
  border:1px solid rgba(212,175,55,.48);
  transition:width .2s,height .2s,border-color .2s
}


.site-header {
  position:fixed;
  left:0;
  right:0;
  top:0;
  z-index:1000;
  padding:18px 20px;
  pointer-events:none
}

.nav-shell {
  width:min(100%,var(--max));
  margin:auto;
  display:flex;
  align-items:center;
  gap:22px;
  padding:12px 16px;
  border-radius:20px;
  pointer-events:auto
}

.brand {
  border:0;
  background:none;
  color:white;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0
}

.brand-mark {
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(212,175,55,.4);
  display:grid;
  place-items:center;
  color:var(--gold2);
  background:linear-gradient(145deg,rgba(212,175,55,.18),rgba(253,160,133,.06));
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-weight:800
}

.brand-copy strong {
  display:block;
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:14px;
  letter-spacing:.06em
}

.brand-copy small {
  display:block;
  color:var(--muted);
  font:10px 'Space Mono';
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-top:2px
}

.site-nav {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:4px
}

.nav-btn {
  border:0;
  background:transparent;
  color:#d6d9df;
  padding:10px 12px;
  border-radius:10px;
  font-size:13px;
  font-weight:600
}

.nav-btn:hover,.nav-btn.active {
  color:var(--gold2);
  background:rgba(255,255,255,.045)
}

.nav-right {
  display:flex;
  align-items:center;
  gap:10px
}

.darwin-chip {
  display:flex;
  align-items:center;
  gap:8px;
  color:#cfd3da;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  font:11px 'Space Mono';
  white-space:nowrap
}

.live-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 5px rgba(53,208,127,.08)
}

.darwin-button {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 16px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--gold),var(--amber));
  color:#111;
  font:800 11px 'Space Mono';
  text-transform:uppercase;
  letter-spacing:.08em;
  box-shadow:0 12px 32px rgba(212,175,55,.16);
  transition:transform .25s var(--ease)
}

.darwin-button:hover {
  transform:translateY(-2px) scale(1.01)
}

.menu-toggle {
  display:none;
  margin-left:auto;
  background:none;
  border:0;
  color:white;
  font-size:20px
}

.mobile-menu {
  display:none;
  pointer-events:auto;
  user-select:none;
  -webkit-user-select:none
}


.hero {
  min-height:100vh;
  padding:150px 0 86px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:78px;
  align-items:center
}

.hero-left {
  min-width:0
}

.status-pill {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 13px;
  border:1px solid rgba(212,175,55,.28);
  border-radius:999px;
  background:rgba(212,175,55,.06);
  color:var(--gold2);
  font:700 11px 'Space Mono';
  letter-spacing:.07em;
  text-transform:uppercase
}

.hero-title {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:clamp(62px,6.8vw,112px);
  font-weight:800;
  line-height:.86;
  letter-spacing:-.045em;
  text-transform:uppercase;
  margin:34px 0 32px;
  max-width:820px
}

.wave-line {
  display:block;
  white-space:nowrap
}

.wave-line:nth-child(2) {
  padding-left:.7em
}

.wave-line:nth-child(3) {
  padding-left:1.3em
}

.wave-letter {
  display:inline-block;
  animation:wave 1.5s ease-in-out infinite;
  will-change:transform
}

.wave-line:nth-child(2) {
  color:rgba(255,255,255,.06);
  -webkit-text-stroke:1.6px var(--gold2);
  text-shadow:0 0 24px rgba(212,175,55,.08)
}

.wave-line:nth-child(3) {
  background:none;
  color:#fff
}

.wave-line:nth-child(3) .wave-letter {
  background:linear-gradient(135deg,#fff 8%,#f6d365 56%,var(--gold2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent
}

@keyframes wave {
  0%,100% {
    transform:translateY(0)
  }
  25% {
    transform:translateY(-4px)
  }
  50% {
    transform:translateY(2px)
  }
  75% {
    transform:translateY(-1px)
  }
}

.hero-sub {
  max-width:700px;
  color:#c7ccd4;
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.72
}

.cta-row {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px
}

.btn {
  border:0;
  border-radius:13px;
  padding:14px 19px;
  font-weight:700;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  transition:transform .25s var(--ease),background .25s,border-color .25s
}

.btn:hover {
  transform:translateY(-2px)
}

.btn-gold {
  background:linear-gradient(135deg,var(--gold),var(--amber));
  color:#101014;
  box-shadow:0 14px 36px rgba(212,175,55,.17)
}

.btn-glass {
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  color:white
}

.hero-mini {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:38px;
  max-width:760px
}

.mini-card {
  min-height:105px;
  border-radius:18px;
  padding:16px;
  border:1px solid var(--line);
  background:rgba(18,18,26,.58);
  box-shadow:0 18px 45px rgba(0,0,0,.26);
  transition:transform .3s var(--ease),border .3s
}

.mini-card:hover {
  transform:translateY(-5px);
  border-color:rgba(212,175,55,.36)
}

.mini-card strong {
  display:block;
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:16px;
  margin-top:18px
}

.mini-card span {
  font:10px 'Space Mono';
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase
}

.hero-right {
  position:relative;
  min-height:650px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:8px
}

.portrait-glow {
  position:absolute;
  width:90%;
  height:85%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.16),transparent 68%);
  filter:blur(22px)
}

.portrait-card {
  position:relative;
  width:min(29vw,405px);
  height:min(69vh,625px);
  min-height:500px;
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 45px 120px rgba(0,0,0,.55),0 0 0 1px rgba(212,175,55,.09);
  transform:rotate(.8deg)
}

.portrait-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top
}

.portrait-overlay {
  position:absolute;
  inset:auto 0 0;
  padding:26px;
  background:linear-gradient(transparent,rgba(8,8,12,.92) 34%)
}

.portrait-overlay h2 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:25px;
  margin:42px 0 4px
}

.portrait-overlay p {
  color:var(--gold2);
  font:11px 'Space Mono';
  letter-spacing:.08em;
  margin:0
}

.portrait-badge {
  position:absolute;
  right:-18px;
  top:12%;
  padding:12px 14px;
  border-radius:15px;
  background:rgba(12,12,18,.82);
  border:1px solid rgba(212,175,55,.26);
  backdrop-filter:blur(14px);
  font:11px 'Space Mono';
  color:var(--gold2);
  box-shadow:0 18px 45px rgba(0,0,0,.32)
}


.section {
  padding:110px 0;
  border-top:1px solid var(--line)
}

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:28px;
  margin-bottom:48px
}

.section-head h2 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:clamp(44px,5.5vw,82px);
  line-height:.95;
  margin:8px 0 0;
  letter-spacing:-.035em
}

.section-head p {
  max-width:520px;
  color:var(--muted);
  line-height:1.7
}

.section-index {
  font:700 12px 'Space Mono';
  color:var(--gold2);
  letter-spacing:.12em;
  text-transform:uppercase
}

.works-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px
}

.work-card {
  padding:30px;
  border-radius:28px;
  min-height:390px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s
}

.work-card:hover {
  transform:translateY(-7px);
  border-color:rgba(212,175,55,.28)
}

.work-card::before {
  content:'';
  position:absolute;
  width:250px;
  height:250px;
  border-radius:50%;
  right:-70px;
  top:-80px;
  background:radial-gradient(circle,rgba(212,175,55,.12),transparent 70%)
}

.work-num {
  font:700 11px 'Space Mono';
  color:var(--gold2)
}

.work-card h3 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:clamp(34px,4vw,58px);
  line-height:.9;
  margin:40px 0 14px
}

.work-card p {
  color:var(--muted);
  line-height:1.7;
  max-width:620px
}

.tag-row {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:22px
}

.tag {
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 9px;
  font:700 9px 'Space Mono';
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#cfd3da
}

.work-link {
  align-self:flex-start;
  margin-top:34px
}


.tools-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}

.tool-card {
  padding:28px;
  border-radius:28px
}

.tool-card h3 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:24px;
  margin:0
}

.tool-card .tool-sub {
  font:11px 'Space Mono';
  color:var(--muted);
  margin-top:5px
}

.tool-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
  margin-bottom:22px
}

.tool-icon {
  width:46px;
  height:46px;
  border-radius:15px;
  display:grid;
  place-items:center;
  color:var(--gold2);
  background:rgba(212,175,55,.09);
  border:1px solid rgba(212,175,55,.18)
}

.tool-title-wrap {
  display:flex;
  align-items:center;
  gap:13px
}

.neo-calc {
  padding:22px;
  border-radius:24px;
  background:#14141d;
  box-shadow:inset 7px 7px 14px #0b0b11,inset -7px -7px 14px #1d1d29
}

.calc-screen {
  border-radius:18px;
  background:#101017;
  box-shadow:inset 6px 6px 13px #09090d,inset -6px -6px 13px #171720;
  padding:20px;
  text-align:right;
  margin-bottom:18px
}

.calc-history {
  min-height:20px;
  color:#646b77;
  font:11px 'Space Mono';
  overflow:hidden
}

.calc-display {
  font:700 clamp(28px,3vw,42px) 'Space Mono';
  white-space:nowrap;
  overflow-x:auto
}

.calc-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px
}

.calc-key {
  min-height:58px;
  border:0;
  border-radius:15px;
  background:#15151f;
  color:white;
  box-shadow:6px 6px 12px #0b0b10,-5px -5px 11px #1f1f2d;
  transition:transform .1s,box-shadow .1s;
  color:#e7e9ed
}

.calc-key:active {
  transform:translateY(1px);
  box-shadow:inset 4px 4px 9px #0b0b10,inset -4px -4px 9px #1f1f2d
}

.calc-key.op {
  color:var(--gold2)
}

.calc-key.eq {
  background:linear-gradient(135deg,var(--gold),var(--amber));
  color:#101014
}

.calc-key.danger {
  color:#ff8585
}

.span2 {
  grid-column:span 2
}

.timer-presets {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

.preset {
  border:1px solid var(--line);
  background:#15151e;
  color:#cfd3da;
  border-radius:10px;
  padding:8px 11px;
  font:700 10px 'Space Mono'
}

.preset.active,.preset:hover {
  background:var(--gold);
  color:#101014;
  border-color:var(--gold)
}

.custom-time {
  display:flex;
  gap:8px;
  margin-top:12px
}

.custom-time input {
  width:120px;
  background:#0f0f16;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  color:white
}

.timer-ring {
  width:min(56vw,245px);
  aspect-ratio:1;
  margin:28px auto;
  position:relative;
  display:grid;
  place-items:center
}

.timer-ring svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg)
}

.timer-track {
  stroke:#252535
}

.timer-progress {
  stroke:var(--gold2);
  transition:stroke-dashoffset .5s linear
}

.timer-inner {
  text-align:center
}

.timer-display {
  font:700 39px 'Space Mono'
}

.timer-status {
  font:11px 'Space Mono';
  color:var(--muted);
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-top:5px
}

.timer-actions {
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap
}

.notify-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  margin-top:18px;
  font-size:12px;
  color:#c8ccd3
}

.notify-row input {
  accent-color:var(--gold)
}

.one-minute {
  animation:warningPulse 1s ease infinite
}

@keyframes warningPulse {
  50% {
    filter:drop-shadow(0 0 14px rgba(246,211,101,.6))
  }
}

.more-tools {
  margin-top:24px;
  padding:24px;
  border-radius:22px;
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:center
}

.more-tools ul {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  list-style:none
}

.more-tools li {
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#b8bec8;
  font:10px 'Space Mono'
}


.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:54px;
  align-items:start
}

.about-grid h2 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:clamp(46px,5vw,76px);
  line-height:.95;
  margin:7px 0 0
}

.about-copy {
  color:#b9bec8;
  line-height:1.8;
  font-size:16px
}

.skill-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:24px
}

.skill-card {
  padding:17px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.025)
}

.skill-card strong {
  display:block;
  font-size:14px
}

.skill-card span {
  font:11px 'Space Mono';
  color:var(--muted)
}

.marquee {
  margin-top:40px;
  overflow:hidden;
  border-block:1px solid var(--line);
  padding:18px 0
}

.marquee-track {
  display:flex;
  width:max-content;
  gap:46px;
  animation:marquee 26s linear infinite;
  font:700 13px 'Space Mono';
  color:#cfd3da
}

.marquee-track span::before {
  content:'✦';
  color:var(--gold);
  margin-right:16px
}

@keyframes marquee {
  to {
    transform:translateX(-50%)
  }
}


.contact-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:32px
}

.contact-copy h2 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:clamp(46px,5.5vw,84px);
  line-height:.92;
  margin:8px 0 24px
}

.contact-copy>p {
  color:var(--muted);
  line-height:1.75;
  max-width:600px
}

.identity-card {
  margin-top:28px;
  padding:19px;
  border-radius:18px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center
}

.identity-card strong {
  display:block;
  font-size:17px
}

.identity-card span {
  display:block;
  font:11px 'Space Mono';
  color:var(--muted);
  margin-top:5px
}

.email-value {
  color:var(--gold2)!important
}

.copy-btn {
  border:0;
  border-radius:11px;
  padding:10px 13px;
  background:var(--gold);
  color:#111;
  font:700 10px 'Space Mono'
}

.contact-form {
  padding:30px;
  border-radius:28px
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}

.field {
  display:grid;
  gap:7px
}

.field.full {
  grid-column:1/-1
}

.field label {
  font:700 11px 'Space Mono';
  color:#bec4cd;
  letter-spacing:.06em;
  text-transform:uppercase
}

.field input,.field textarea {
  width:100%;
  border:1px solid var(--line);
  background:#0e0e15;
  color:white;
  border-radius:13px;
  padding:14px;
  outline:0;
  transition:border .2s
}

.field input:focus,.field textarea:focus {
  border-color:rgba(212,175,55,.66)
}

.field textarea {
  min-height:145px;
  resize:vertical
}

.send-btn {
  width:100%;
  justify-content:center;
  margin-top:16px
}


.footer {
  border-top:1px solid var(--line);
  padding:26px 0 48px
}

.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font:10px 'Space Mono'
}

.back-top {
  border:0;
  background:transparent;
  color:var(--gold2);
  font:700 11px 'Space Mono';
  text-transform:uppercase
}

.toast {
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:5000;
  padding:14px 17px;
  border-radius:13px;
  background:#15151f;
  border:1px solid rgba(212,175,55,.32);
  box-shadow:0 18px 46px rgba(0,0,0,.4);
  font-size:12px;
  transform:translateY(30px);
  opacity:0;
  pointer-events:none;
  transition:.3s
}

.toast.show {
  transform:translateY(0);
  opacity:1
}


.subpage {
  padding-top:104px
}

.subnav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 0
}

.back-home {
  font:700 11px 'Space Mono';
  color:var(--gold2)
}

.project-hero {
  position:relative;
  min-height:76vh;
  border-radius:30px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:40px;
  align-items:end;
  padding:clamp(28px,5vw,70px);
  isolation:isolate;
  border:1px solid var(--line)
}

.project-hero video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-3
}

.project-hero::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,rgba(9,9,14,.94),rgba(9,9,14,.77) 58%,rgba(9,9,14,.6))
}

.project-hero.brew::after {
  background:radial-gradient(circle at 80% 20%,rgba(212,175,55,.12),transparent 30%),linear-gradient(120deg,#0b0b11,#17131a)
}

.project-hero h1 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:clamp(68px,10vw,160px);
  line-height:.76;
  letter-spacing:-.045em;
  margin:18px 0 0;
  text-transform:uppercase
}

.project-hero-copy {
  align-self:center
}

.project-hero-copy p {
  font-size:clamp(17px,1.5vw,22px);
  line-height:1.65;
  color:#d1d5dc
}

.facts {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:24px
}

.facts span {
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  font:700 9px 'Space Mono';
  color:#d5d8de
}

.project-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:24px
}

.gallery-section {
  padding:90px 0
}

.gallery-header {
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:end;
  margin-bottom:28px
}

.gallery-header h2 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:clamp(46px,6.5vw,96px);
  line-height:.9;
  margin:5px 0 0
}

.gallery-header p {
  color:var(--muted);
  max-width:530px;
  line-height:1.65
}

.showcase {
  position:relative;
  min-height:720px;
  border:1px solid var(--line);
  border-radius:30px;
  overflow:hidden;
  background:#0d0d13
}

.showcase-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.16;
  filter:saturate(.85);
  z-index:0
}

.showcase-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(8,8,12,.72),rgba(8,8,12,.92));
  z-index:1
}

.gallery3d {
  position:relative;
  z-index:2;
  padding:28px 24px
}

.gallery-help {
  font:11px 'Space Mono';
  color:#aeb3bd;
  text-align:center;
  margin:4px 0 10px
}

.gallery-stage {
  height:455px;
  position:relative;
  perspective:1500px;
  touch-action:pan-y;
  cursor:grab
}

.gallery-stage:active {
  cursor:grabbing
}

.gallery-card3d {
  position:absolute;
  left:50%;
  top:50%;
  width:min(72vw,930px);
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:#09090d;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 28px 70px rgba(0,0,0,.54);
  transform-style:preserve-3d;
  transition:transform .75s var(--ease),opacity .55s,box-shadow .55s
}

.gallery-card3d.is-active {
  box-shadow:0 42px 110px rgba(0,0,0,.72),0 0 0 1px rgba(212,175,55,.17)
}

.gallery-card3d img {
  width:100%;
  height:100%;
  object-fit:contain;
  background:#09090d;
  image-rendering:auto;
  filter:none!important
}

.gallery-controls {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:16px;
  align-items:center;
  margin-top:4px
}

.gallery-arrow {
  width:46px;
  height:46px;
  border-radius:13px;
  border:1px solid var(--line);
  background:#15151e;
  color:white;
  font-size:19px
}

.gallery-dots {
  display:flex;
  gap:6px;
  justify-content:center;
  flex-wrap:wrap
}

.gallery-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  border:0;
  background:#555b66;
  padding:0
}

.gallery-dot.active {
  background:var(--gold2);
  transform:scale(1.3)
}

.slide-detail {
  margin:22px 24px 0;
  padding:22px;
  border-radius:20px;
  background:rgba(11,11,16,.72);
  border:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  align-items:start
}

.slide-detail h3 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:34px;
  margin:4px 0 8px
}

.slide-detail p {
  margin:0;
  color:#b9bec8;
  line-height:1.7;
  max-width:920px
}

.slide-count {
  font:700 12px 'Space Mono';
  color:var(--gold2)
}

.gallery-modal {
  border:0;
  background:#0a0a0f;
  color:white;
  width:min(96vw,1500px);
  max-height:94vh;
  border-radius:22px;
  padding:0;
  box-shadow:0 40px 120px black
}

.gallery-modal::backdrop {
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(8px)
}

.modal-close {
  position:absolute;
  right:14px;
  top:14px;
  z-index:2;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#16161f;
  color:white
}

.modal-media {
  padding:60px 14px 14px
}

.modal-media img {
  max-height:74vh;
  margin:auto;
  object-fit:contain
}

.modal-copy {
  padding:18px 24px 26px;
  border-top:1px solid var(--line)
}

.modal-copy h3 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:26px;
  margin:0 0 6px
}

.modal-copy p {
  color:var(--muted);
  margin:0;
  line-height:1.6
}

.story {
  padding:90px 0;
  display:grid;
  grid-template-columns:.65fr 1.35fr;
  gap:60px
}

.story h2 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:clamp(44px,5vw,78px);
  line-height:.9;
  margin:0
}

.story-list {
  border-top:1px solid var(--line)
}

.story-item {
  padding:24px 0;
  border-bottom:1px solid var(--line)
}

.story-item h3 {
  margin:0 0 8px;
  font-size:20px
}

.story-item p {
  margin:0;
  color:var(--muted);
  line-height:1.7
}


.darwin-hero {
  padding:80px 0 44px
}

.darwin-hero h1 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:clamp(72px,11vw,170px);
  line-height:.78;
  letter-spacing:-.045em;
  margin:14px 0 24px
}

.darwin-hero p {
  max-width:850px;
  color:#bbc1ca;
  font-size:18px;
  line-height:1.75
}

.darwin-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:34px
}

.darwin-stat {
  padding:20px;
  border-radius:18px
}

.darwin-stat strong {
  display:block;
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:25px;
  color:var(--gold2)
}

.darwin-stat span {
  font:11px 'Space Mono';
  color:var(--muted)
}

.travel-banner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  padding:24px;
  border-radius:22px;
  margin:40px 0
}

.travel-banner h2 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:32px;
  margin:0
}

.travel-banner p {
  margin:0;
  color:var(--muted);
  line-height:1.7
}

.place-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px
}

.place-card {
  border-radius:25px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#111118
}

.place-card img {
  width:100%;
  height:330px;
  object-fit:cover;
  background:#1a1a20
}

.place-card-body {
  padding:23px
}

.place-card h3 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:28px;
  margin:0 0 8px
}

.place-card p {
  color:var(--muted);
  line-height:1.65;
  margin:0
}

.place-meta {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:18px 0
}

.place-meta div {
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px
}

.place-meta b {
  display:block;
  font:700 9px 'Space Mono';
  color:var(--gold2);
  text-transform:uppercase
}

.place-meta span {
  font-size:11px;
  color:#c7ccd4
}

.source-link {
  display:inline-block;
  margin-top:15px;
  color:var(--gold2);
  font:700 9px 'Space Mono'
}

.itinerary {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}

.day-card {
  padding:24px;
  border-radius:22px
}

.day-card h3 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:28px;
  margin:0 0 12px
}

.day-card ol {
  margin:0;
  padding-left:20px;
  color:#c5cad3;
  line-height:1.8
}

.practical-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}

.practical-card {
  padding:20px;
  border-radius:18px
}

.practical-card h3 {
  font-size:16px;
  margin:0 0 9px
}

.practical-card p {
  color:var(--muted);
  line-height:1.65;
  font-size:13px;
  margin:0
}

.remote-note {
  font:10px 'Space Mono';
  color:#767e89;
  margin-top:14px
}

@media(max-width:1100px) {
  .site-nav {
    display:none
  }
  .nav-right .darwin-chip {
    display:none
  }
  .menu-toggle {
    display:block;
    pointer-events:auto;
    cursor:pointer;
    touch-action:manipulation
  }
  .mobile-menu {
    position:fixed;
    left:20px;
    right:20px;
    top:82px;
    padding:14px;
    border-radius:15px;
    z-index:1001;
    display:none;
    pointer-events:auto;
    user-select:none;
    -webkit-user-select:none
  }
  .mobile-menu.open {
    display:grid;
    gap:3px
  }
  .mobile-menu .nav-btn,
  .mobile-menu a {
    width:100%;
    text-align:left;
    padding:13px;
    pointer-events:auto;
    cursor:pointer;
    touch-action:manipulation;
    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent
  }
  .hero {
    grid-template-columns:1fr;
    gap:36px;
    padding-top:135px
  }
  .hero-right {
    min-height:590px
  }
  .portrait-card {
    width:min(68vw,420px)
  }
  .works-grid,.tools-grid,.about-grid,.contact-grid,.project-hero,.story {
    grid-template-columns:1fr
  }
  .project-hero {
    min-height:auto
  }
  .contact-grid {
    gap:26px
  }
  .place-grid {
    grid-template-columns:1fr 1fr
  }
}

@media(max-width:760px) {
  .container {
    width:min(100% - 28px,var(--max))
  }
  .site-header {
    padding:10px
  }
  .nav-shell {
    border-radius:15px;
    padding:9px 10px
  }
  .brand-copy {
    display:none
  }
  .nav-right {
    display:none
  }
  .mobile-menu {
    left:10px;
    right:10px;
    top:72px
  }
  .hero {
    padding-top:110px;
    padding-bottom:72px
  }
  .hero-title {
    font-size:clamp(50px,15.5vw,78px);
    margin-top:26px;
    line-height:.9;
    letter-spacing:-.035em
  }
  .wave-line:nth-child(2) {
    padding-left:.35em
  }
  .wave-line:nth-child(3) {
    padding-left:.7em
  }
  .hero-mini {
    grid-template-columns:1fr 1fr
  }
  .mini-card:last-child {
    grid-column:1/-1
  }
  .hero-right {
    min-height:520px
  }
  .portrait-card {
    width:82vw;
    height:570px;
    min-height:0
  }
  .portrait-badge {
    right:0
  }
  .section {
    padding:78px 0
  }
  .section-head {
    display:block
  }
  .section-head p {
    margin-top:18px
  }
  .works-grid,.tools-grid,.skill-grid,.form-grid,.place-grid,.itinerary,.practical-grid,.darwin-stats {
    grid-template-columns:1fr
  }
  .tool-card,.contact-form {
    padding:20px
  }
  .more-tools {
    align-items:flex-start;
    flex-direction:column
  }
  .contact-grid {
    grid-template-columns:1fr
  }
  .footer-inner {
    flex-direction:column;
    align-items:flex-start
  }
  .project-hero {
    padding:26px;
    border-radius:22px
  }
  .project-hero h1 {
    font-size:clamp(60px,20vw,96px)
  }
  .gallery-section {
    padding:64px 0
  }
  .gallery-header {
    display:block
  }
  .gallery-header p {
    margin-top:16px
  }
  .showcase {
    min-height:610px;
    border-radius:22px
  }
  .gallery3d {
    padding:18px 10px
  }
  .gallery-stage {
    height:300px
  }
  .gallery-card3d {
    width:84vw;
    border-radius:13px
  }
  .slide-detail {
    margin:16px 10px 0;
    padding:18px;
    grid-template-columns:1fr
  }
  .slide-detail h3 {
    font-size:27px
  }
  .story {
    padding:64px 0;
    gap:28px
  }
  .darwin-hero {
    padding-top:45px
  }
  .darwin-hero h1 {
    font-size:clamp(62px,19vw,105px)
  }
  .travel-banner {
    grid-template-columns:1fr
  }
  .place-card img {
    height:260px
  }
  .place-meta {
    grid-template-columns:1fr
  }
  .intro-copy {
    font-size:clamp(58px,18vw,105px)
  }
  .intro-copy .indent {
    margin-left:6vw
  }
  .intro-star {
    display:none
  }
  .cursor-dot,.cursor-ring {
    display:none
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important
  }
}


.darwin-commitment {
  margin-top:30px;
  padding:26px 28px;
  border-radius:22px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:start;
  border-color:rgba(212,175,55,.24);
  background:linear-gradient(135deg,rgba(212,175,55,.09),rgba(18,18,26,.66));
  box-shadow:0 24px 70px rgba(0,0,0,.28)
}

.darwin-love-mark {
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(212,175,55,.12);
  border:1px solid rgba(212,175,55,.32);
  color:var(--gold2);
  font-size:19px;
  box-shadow:0 0 30px rgba(212,175,55,.08)
}

.darwin-commitment .eyebrow {
  font:700 10px 'Plus Jakarta Sans',Arial,sans-serif;
  letter-spacing:.11em;
  color:var(--gold2);
  text-transform:uppercase
}

.darwin-commitment h3 {
  margin:7px 0 9px;
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:clamp(24px,2.4vw,35px);
  line-height:1;
  font-weight:800;
  letter-spacing:-.03em;
  color:#fff
}

.darwin-commitment p {
  margin:0;
  color:#c7ccd4;
  line-height:1.75;
  font-size:15px
}

.darwin-love-link {
  display:inline-flex;
  margin-top:14px;
  color:var(--gold2);
  font-weight:750;
  font-size:13px;
  border-bottom:1px solid rgba(212,175,55,.35);
  padding-bottom:3px;
  transition:color .2s,border-color .2s,transform .2s
}

.darwin-love-link:hover {
  color:#fff;
  border-color:#fff;
  transform:translateX(2px)
}

.portrait-badge strong {
  display:inline-block;
  margin:4px 0;
  color:#fff;
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:10px;
  letter-spacing:.08em
}

.darwin-personal-note {
  margin-top:34px;
  padding:30px 32px;
  border-radius:24px;
  border-color:rgba(212,175,55,.28);
  background:linear-gradient(135deg,rgba(212,175,55,.10),rgba(18,18,26,.72));
  box-shadow:0 28px 80px rgba(0,0,0,.28)
}

.darwin-personal-note .note-kicker {
  display:block;
  color:var(--gold2);
  font:700 10px 'Plus Jakarta Sans',Arial,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:8px
}

.darwin-personal-note h2 {
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-size:clamp(30px,4vw,52px);
  letter-spacing:-.04em;
  line-height:1.03;
  margin:0 0 12px;
  color:#fff
}

.darwin-personal-note p {
  max-width:900px;
  margin:0;
  color:#c7ccd4;
  font-size:16px;
  line-height:1.78
}

@media(max-width:760px) {
  .darwin-commitment {
    grid-template-columns:1fr;
    padding:22px
  }
  .darwin-love-mark {
    width:42px;
    height:42px
  }
  .darwin-personal-note {
    padding:23px
  }
}


body {
  position: relative;
  isolation: isolate;
  background: #030305;
}

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 24%, rgba(112, 48, 31, .08), transparent 35%),
    radial-gradient(circle at 78% 68%, rgba(87, 30, 24, .06), transparent 34%),
    #030305;
}

.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none !important;
  touch-action: none;
  opacity: 1;
  filter: saturate(1.10) contrast(1.10) brightness(1.08);
  transform: translateZ(0);
}

.cosmic-veil {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;


  background:
    linear-gradient(
      90deg,
      rgba(3, 3, 5, .26) 0%,
      rgba(3, 3, 5, .14) 32%,
      rgba(3, 3, 5, .04) 58%,
      rgba(3, 3, 5, .10) 100%
    ),
    radial-gradient(
      ellipse at 55% 48%,
      transparent 0 56%,
      rgba(3, 3, 5, .04) 78%,
      rgba(3, 3, 5, .16) 100%
    );
}

main,
.footer {
  position: relative;
  z-index: 3;
}

.site-header,
.toast,
.cursor-dot,
.cursor-ring,
.site-intro {
  isolation: isolate;
}

.glass,
.mini-card,
.portrait-badge {
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .02);
}


.cosmic-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.cosmic-role {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(246, 211, 101, .18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(18, 16, 18, .76), rgba(13, 13, 17, .56));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 10px 32px rgba(0, 0, 0, .14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #e7e0d9;
  font: 700 10px/1.2 'Space Mono', monospace;
  letter-spacing: .05em;
}

.cosmic-role-label {
  color: #918a83;
  font-size: 9px;
  letter-spacing: .12em;
}

.cosmic-role strong {
  color: #fff7e8;
  font-weight: 700;
}

.type-caret {
  color: #f6d365;
  animation: typeCaretBlink .82s steps(1, end) infinite;
}

@keyframes typeCaretBlink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: .12; }
}

.scroll-cosmos-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  color: #877f79;
  font: 600 9px/1.4 'Space Mono', monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.scroll-cosmos-line {
  width: 42px;
  height: 1px;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .09);
}

.scroll-cosmos-line::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 55%;
  background: linear-gradient(90deg, transparent, #f6d365);
  animation: cosmicLine 2.1s ease-in-out infinite;
}

@keyframes cosmicLine {
  from { transform: translateX(-110%); }
  to { transform: translateX(210%); }
}

.cosmic-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: -18px;
  margin-bottom: 26px;
  position: relative;
  z-index: 2;
}

.cosmic-fact {
  min-height: 126px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.cosmic-fact::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  right: -40px;
  bottom: -50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 116, 62, .13), transparent 70%);
  pointer-events: none;
}

.cosmic-fact-darwin::after {
  background: radial-gradient(circle, rgba(246, 211, 101, .14), transparent 70%);
}

.cosmic-fact > span {
  color: #938982;
  font: 700 9px/1.3 'Space Mono', monospace;
  letter-spacing: .1em;
}

.cosmic-fact strong {
  color: #f8f5ef;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.15;
}

.cosmic-fact small {
  color: #a29a94;
  font: 500 10px/1.45 'Space Mono', monospace;
}

.hero-left,
.hero-right,
.cosmic-facts,
.section,
.footer {
  isolation: isolate;
}


.hero-right {
  min-height: 720px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
}

.portrait-fireworks {
  position: relative;
  z-index: 4;
  width: min(29vw, 405px);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border: 1px solid rgba(246, 211, 101, .34);
  border-radius: 15px;
  color: #f8e4a9;
  background:
    linear-gradient(135deg, rgba(246, 211, 101, .12), rgba(255, 110, 56, .08)),
    rgba(12, 12, 16, .78);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font: 700 10px/1 'Space Mono', monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.portrait-fireworks:hover,
.portrait-fireworks:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(246, 211, 101, .68);
  background:
    linear-gradient(135deg, rgba(246, 211, 101, .19), rgba(255, 110, 56, .12)),
    rgba(12, 12, 16, .86);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34), 0 0 26px rgba(246, 211, 101, .08);
}

.portrait-fireworks-icon {
  display: inline-block;
  color: #f6d365;
  font-size: 16px;
  line-height: 1;
}

.portrait-fireworks.is-launching .portrait-fireworks-icon {
  animation: fireworkButtonBurst .9s ease;
}

@keyframes fireworkButtonBurst {
  0% { transform: scale(.75) rotate(0deg); opacity: .65; }
  38% {
    transform: scale(1.65) rotate(90deg);
    opacity: 1;
    text-shadow: 0 0 10px #f6d365, 9px 0 10px #9bdcff, -7px 5px 10px #ff846d;
  }
  100% { transform: scale(1) rotate(180deg); opacity: 1; text-shadow: none; }
}


.showcase {
  min-height: 790px;
  background: rgba(8, 8, 10, .82);
}

.showcase-video {
  opacity: .14;
  filter: saturate(.82) contrast(1.02);
}

.showcase-overlay {
  background: linear-gradient(rgba(5, 5, 7, .68), rgba(5, 5, 7, .92));
}

.gallery3d {
  padding: 30px 24px;
}

.gallery-stage {
  height: 535px;
  perspective: 1800px;
  perspective-origin: 50% 48%;
  transform-style: preserve-3d;
}

.gallery-card3d {
  width: min(76vw, 1080px);
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  transition:
    transform .72s var(--ease),
    opacity .48s ease,
    box-shadow .48s ease,
    border-color .48s ease;
}

.gallery-card3d.is-active {
  border-color: rgba(246, 211, 101, .27);
  box-shadow:
    0 48px 120px rgba(0, 0, 0, .76),
    0 0 0 1px rgba(246, 211, 101, .10);
}

.gallery-card3d img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #070709;
  image-rendering: auto;
  filter: none !important;
  opacity: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(1px);
}

.gallery-card3d.is-active img {
  transform: translateZ(22px);
}

.gallery-modal {
  width: min(98vw, 1700px);
  max-height: 96vh;
  background: #050507;
}

.gallery-modal::backdrop {
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(8px);
}

.modal-media {
  min-height: 0;
  padding: 58px 12px 12px;
  display: grid;
  place-items: center;
  overflow: auto;
}

.modal-media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  image-rendering: auto;
  filter: none !important;
}


@media (max-width: 1100px) {
  .cosmic-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4px;
  }

  .hero-right {
    min-height: 690px;
    align-items: center;
  }

  .portrait-fireworks {
    width: min(68vw, 420px);
  }

  .gallery-stage {
    height: 470px;
  }

  .gallery-card3d {
    width: min(82vw, 930px);
  }
}

@media (max-width: 760px) {
  .bg-canvas {
    opacity: .88;
    filter: saturate(1.04) contrast(1.06) brightness(.89);
  }

  .cosmic-veil {
    background:
      linear-gradient(180deg, rgba(3, 3, 5, .28), rgba(3, 3, 5, .46)),
      radial-gradient(circle at 50% 42%, transparent 0 35%, rgba(3, 3, 5, .18) 74%);
  }

  .cosmic-status-row {
    align-items: stretch;
  }

  .cosmic-role {
    width: 100%;
    justify-content: center;
  }

  .cosmic-role-label {
    display: none;
  }

  .scroll-cosmos-hint {
    margin-top: 14px;
  }

  .cosmic-facts {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 0;
  }

  .cosmic-fact {
    min-height: 104px;
  }

  .hero-right {
    min-height: 660px;
  }

  .portrait-fireworks {
    width: 82vw;
    min-height: 50px;
  }

  .showcase {
    min-height: 650px;
  }

  .gallery3d {
    padding: 18px 10px;
  }

  .gallery-stage {
    height: 330px;
    perspective: 1250px;
  }

  .gallery-card3d {
    width: 88vw;
    border-radius: 13px;
  }

  .gallery-card3d.is-active img {
    transform: translateZ(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .type-caret,
  .scroll-cosmos-line::after,
  .portrait-fireworks.is-launching .portrait-fireworks-icon {
    animation: none !important;
  }

  .gallery-card3d {
    transition-duration: .15s;
  }
}


.gallery-stage {
  overflow: visible;
}

.gallery-controls {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: block;
  margin: 0;
  pointer-events: none;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(246, 211, 101, .52);
  background: rgba(8, 8, 12, .88);
  color: #fff;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 0 26px rgba(230, 181, 54, .10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(-50%);
  transition:
    transform .22s ease,
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}

.gallery-arrow span {
  display: block;
  font-size: 28px;
  line-height: 1;
  transform: translateY(-1px);
}

.gallery-arrow-prev {
  left: clamp(8px, 1.8vw, 24px);
}

.gallery-arrow-next {
  right: clamp(8px, 1.8vw, 24px);
}

.gallery-arrow:hover,
.gallery-arrow:focus-visible {
  background: linear-gradient(135deg, var(--gold), #ff9d78);
  color: #09090c;
  border-color: rgba(255, 224, 126, .92);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .58),
    0 0 32px rgba(230, 181, 54, .22);
  transform: translateY(-50%) scale(1.07);
  outline: none;
}

.gallery-arrow:active {
  transform: translateY(-50%) scale(.96);
}

.gallery-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 7px;
  max-width: min(80%, 720px);
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  background: rgba(7, 7, 10, .66);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateX(-50%);
  pointer-events: auto;
}

.gallery-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, .42);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .26);
}

.gallery-dot.active {
  background: var(--gold2);
  box-shadow: 0 0 14px rgba(246, 211, 101, .65);
}

@media (max-width: 760px) {
  .gallery-arrow {
    width: 46px;
    height: 46px;
    background: rgba(8, 8, 12, .92);
  }

  .gallery-arrow span {
    font-size: 22px;
  }

  .gallery-arrow-prev {
    left: 4px;
  }

  .gallery-arrow-next {
    right: 4px;
  }

  .gallery-dots {
    bottom: 8px;
    gap: 5px;
    max-width: 74%;
    padding: 7px 9px;
  }

  .gallery-dot {
    width: 7px;
    height: 7px;
  }
}


.theme-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(18,18,26,.72);
  color:var(--text);
  font:700 10px/1 'Space Mono',monospace;
  letter-spacing:.045em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
  transition:transform .24s var(--ease),background .24s,border-color .24s,color .24s,box-shadow .24s;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform:translateY(-2px);
  border-color:rgba(212,175,55,.52);
  outline:none;
}

.theme-toggle-icon {
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  color:var(--gold2);
  background:rgba(212,175,55,.10);
  font:700 15px/1 Arial,sans-serif;
}

.theme-toggle-mobile {
  display:none;
}

.subnav-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

html[data-theme="light"] {
  color-scheme:light;
  --bg:#f5f2ea;
  --panel:rgba(255,255,255,.78);
  --panel-solid:#ffffff;
  --panel2:#ebe6dd;
  --text:#17161b;
  --muted:#68636d;
  --line:rgba(28,24,20,.13);
  --green:#188f58;
}

html[data-theme="dark"] {
  color-scheme:dark;
}

body,
.glass,
.mini-card,
.theme-toggle,
.darwin-chip,
.field input,
.field textarea,
.showcase,
.slide-detail,
.place-card,
.toast,
.footer,
.nav-btn {
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}

html[data-theme="light"] body {
  background:var(--bg);
  color:var(--text);
}

html[data-theme="light"] .ambient {
  background:
    radial-gradient(circle at 18% 24%,rgba(231,175,62,.15),transparent 34%),
    radial-gradient(circle at 76% 70%,rgba(218,111,72,.11),transparent 37%),
    #f5f2ea;
}

html[data-theme="light"] .bg-canvas {
  opacity:.68;
  filter:saturate(1.12) contrast(1.22) brightness(.92);
}

html[data-theme="light"] .cosmic-veil {
  background:
    linear-gradient(90deg,rgba(245,242,234,.34),rgba(245,242,234,.18) 40%,rgba(245,242,234,.08) 64%,rgba(245,242,234,.24)),
    radial-gradient(ellipse at 55% 48%,transparent 0 60%,rgba(245,242,234,.06) 80%,rgba(245,242,234,.24) 100%);
}

html[data-theme="light"] .glass {
  background:rgba(255,255,255,.76);
  border-color:rgba(28,24,20,.12);
  box-shadow:0 24px 70px rgba(77,58,35,.10);
}

html[data-theme="light"] .nav-shell,
html[data-theme="light"] .mobile-menu {
  background:rgba(250,248,243,.88);
  box-shadow:0 18px 55px rgba(77,58,35,.12);
}

html[data-theme="light"] .brand-copy strong,
html[data-theme="light"] .nav-btn,
html[data-theme="light"] .darwin-chip,
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .project-copy,
html[data-theme="light"] .about-copy,
html[data-theme="light"] .gallery-header p,
html[data-theme="light"] .gallery-help,
html[data-theme="light"] .slide-detail p,
html[data-theme="light"] .contact-copy,
html[data-theme="light"] .footer-inner {
  color:#55515b;
}

html[data-theme="light"] .brand-copy small,
html[data-theme="light"] .muted {
  color:#77727d;
}

html[data-theme="light"] .nav-btn:hover,
html[data-theme="light"] .nav-btn.active {
  color:#8c6b05;
  background:rgba(212,175,55,.12);
}

html[data-theme="light"] .menu-toggle {
  color:#1a181d;
}

html[data-theme="light"] .theme-toggle {
  background:rgba(255,255,255,.84);
  color:#242126;
  border-color:rgba(28,24,20,.14);
  box-shadow:0 10px 28px rgba(77,58,35,.08);
}

html[data-theme="light"] .theme-toggle-icon {
  color:#6d5200;
  background:rgba(212,175,55,.16);
}

html[data-theme="light"] .status-pill,
html[data-theme="light"] .cosmic-role,
html[data-theme="light"] .mini-card,
html[data-theme="light"] .cosmic-fact {
  background:rgba(255,255,255,.66);
  border-color:rgba(28,24,20,.12);
  box-shadow:0 18px 50px rgba(77,58,35,.09);
}

html[data-theme="light"] .hero-title .wave-line:first-child,
html[data-theme="light"] .section-head h2,
html[data-theme="light"] .gallery-header h2,
html[data-theme="light"] .darwin-hero h1,
html[data-theme="light"] .darwin-personal-note h2,
html[data-theme="light"] .contact-heading,
html[data-theme="light"] .about-title {
  color:#17161b;
}

html[data-theme="light"] .hero-sub {
  color:#4f4b55;
}

html[data-theme="light"] .mini-card {
  color:#17161b;
}

html[data-theme="light"] .portrait-card {
  border-color:rgba(28,24,20,.16);
  box-shadow:0 36px 90px rgba(77,58,35,.18),0 0 0 1px rgba(212,175,55,.12);
}

html[data-theme="light"] .portrait-badge {
  background:rgba(35,29,24,.90);
  color:#fff;
}

html[data-theme="light"] .tool-card,
html[data-theme="light"] .contact-form,
html[data-theme="light"] .darwin-personal-note,
html[data-theme="light"] .travel-banner,
html[data-theme="light"] .darwin-stat {
  color:#17161b;
}

html[data-theme="light"] .field label {
  color:#5d5862;
}

html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .custom-time input {
  background:rgba(255,255,255,.90);
  color:#17161b;
  border-color:rgba(28,24,20,.15);
}

html[data-theme="light"] .field input::placeholder,
html[data-theme="light"] .field textarea::placeholder,
html[data-theme="light"] .custom-time input::placeholder {
  color:#8b858f;
}

html[data-theme="light"] .toast {
  background:#fffdf8;
  color:#242126;
  border-color:rgba(172,132,16,.34);
  box-shadow:0 18px 46px rgba(77,58,35,.18);
}

html[data-theme="light"] ::-webkit-scrollbar-track {
  background:#eee9df;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background:#c9c1b5;
}


html[data-theme="light"] .project-hero {
  color:#f5f6f8;
  border-color:rgba(28,24,20,.15);
  box-shadow:0 26px 70px rgba(77,58,35,.13);
}

html[data-theme="light"] .project-hero-copy p,
html[data-theme="light"] .project-hero .facts span {
  color:#e2e4e8;
}

html[data-theme="light"] .project-hero.brew::after {
  background:radial-gradient(circle at 80% 20%,rgba(212,175,55,.20),transparent 30%),linear-gradient(120deg,#242128,#403238);
}

html[data-theme="light"] .showcase {
  background:rgba(247,244,237,.86);
  box-shadow:0 26px 70px rgba(77,58,35,.10);
}

html[data-theme="light"] .showcase-overlay {
  background:linear-gradient(rgba(247,244,237,.72),rgba(247,244,237,.92));
}

html[data-theme="light"] .gallery-card3d {
  background:#fff;
  border-color:rgba(28,24,20,.16);
  box-shadow:0 26px 65px rgba(77,58,35,.20);
}

html[data-theme="light"] .gallery-card3d.is-active {
  box-shadow:0 38px 92px rgba(77,58,35,.24),0 0 0 1px rgba(172,132,16,.20);
}

html[data-theme="light"] .slide-detail {
  background:rgba(255,255,255,.82);
  color:#17161b;
}

html[data-theme="light"] .gallery-help,
html[data-theme="light"] .slide-detail p {
  color:#625d67;
}

html[data-theme="light"] .gallery-arrow {
  background:rgba(255,255,255,.92);
  color:#6f5400;
  border-color:rgba(172,132,16,.42);
  box-shadow:0 12px 30px rgba(77,58,35,.16);
}

html[data-theme="light"] .gallery-dot {
  background:rgba(45,40,34,.23);
}

html[data-theme="light"] .gallery-dot.active {
  background:var(--gold);
}

html[data-theme="light"] .gallery-modal {
  background:rgba(248,245,238,.98);
  color:#17161b;
  border-color:rgba(28,24,20,.14);
}

html[data-theme="light"] .place-card {
  background:rgba(255,255,255,.82);
  color:#17161b;
  box-shadow:0 22px 58px rgba(77,58,35,.10);
}

html[data-theme="light"] .place-card p,
html[data-theme="light"] .place-meta span,
html[data-theme="light"] .darwin-hero > p,
html[data-theme="light"] .darwin-personal-note p,
html[data-theme="light"] .travel-banner p {
  color:#5f5a64;
}

html[data-theme="light"] .travel-banner strong[style] {
  color:#201e22 !important;
}

html[data-theme="light"] .footer {
  border-color:rgba(28,24,20,.12);
}

@media (max-width:1100px) {
  .theme-toggle-compact {
    display:none;
  }

  .theme-toggle-mobile {
    display:flex;
    width:100%;
  }
}

@media (max-width:760px) {
  .subnav {
    gap:14px;
    align-items:flex-start;
  }

  .subnav-actions {
    gap:8px;
  }

  .subnav-actions .theme-toggle {
    min-height:36px;
    padding:7px 10px;
  }

  html[data-theme="light"] .bg-canvas {
    opacity:.26;
  }

  html[data-theme="light"] .cosmic-veil {
    background:
      linear-gradient(180deg,rgba(245,242,234,.72),rgba(245,242,234,.58)),
      radial-gradient(circle at 50% 42%,transparent 0 32%,rgba(245,242,234,.32) 74%);
  }
}


html[data-theme="light"] {
  --bg:#f4f0e7;
  --panel:rgba(255,255,255,.86);
  --panel-solid:#fffdf9;
  --panel2:#eee7da;
  --text:#17161b;
  --muted:#69636c;
  --gold:#b8860b;
  --gold2:#a97800;
  --amber:#f49573;
  --line:rgba(50,42,32,.14);
}

html[data-theme="light"] body {
  background:#f4f0e7;
  color:#17161b;
}

html[data-theme="light"] .ambient {
  background:
    radial-gradient(circle at 18% 24%,rgba(201,151,31,.12),transparent 34%),
    radial-gradient(circle at 76% 70%,rgba(224,126,89,.08),transparent 38%),
    #f4f0e7;
}

html[data-theme="light"] .bg-canvas {
  opacity:.20;
  filter:saturate(1.20) contrast(1.18) brightness(.96);
}

html[data-theme="light"] .cosmic-veil {
  background:
    linear-gradient(90deg,rgba(244,240,231,.78),rgba(244,240,231,.58) 40%,rgba(244,240,231,.43) 64%,rgba(244,240,231,.70)),
    radial-gradient(ellipse at 55% 48%,transparent 0 50%,rgba(244,240,231,.18) 74%,rgba(244,240,231,.64) 100%);
}

html[data-theme="light"] .glass,
html[data-theme="light"] .status-pill,
html[data-theme="light"] .cosmic-role,
html[data-theme="light"] .mini-card,
html[data-theme="light"] .cosmic-fact,
html[data-theme="light"] .skill-card,
html[data-theme="light"] .identity-card,
html[data-theme="light"] .more-tools {
  background:rgba(255,255,255,.84);
  border-color:rgba(50,42,32,.13);
  box-shadow:0 18px 50px rgba(66,50,25,.08);
}

html[data-theme="light"] .nav-shell,
html[data-theme="light"] .mobile-menu {
  background:rgba(255,253,249,.91);
  border-color:rgba(50,42,32,.13);
  box-shadow:0 18px 55px rgba(66,50,25,.10);
}

html[data-theme="light"] .brand-copy strong,
html[data-theme="light"] .nav-btn,
html[data-theme="light"] .darwin-chip,
html[data-theme="light"] .mini-card strong,
html[data-theme="light"] .cosmic-role strong,
html[data-theme="light"] .cosmic-fact strong,
html[data-theme="light"] .skill-card strong,
html[data-theme="light"] .identity-card strong,
html[data-theme="light"] .tool-card h3 {
  color:#1c1a1f;
}

html[data-theme="light"] .brand-copy small,
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .project-copy,
html[data-theme="light"] .about-copy,
html[data-theme="light"] .contact-copy,
html[data-theme="light"] .gallery-header p,
html[data-theme="light"] .gallery-help,
html[data-theme="light"] .slide-detail p,
html[data-theme="light"] .footer-inner,
html[data-theme="light"] .mini-card span,
html[data-theme="light"] .cosmic-fact small,
html[data-theme="light"] .skill-card span,
html[data-theme="light"] .identity-card span,
html[data-theme="light"] .more-tools li,
html[data-theme="light"] .tool-card .tool-sub {
  color:#625c65;
}

html[data-theme="light"] .eyebrow,
html[data-theme="light"] .section-kicker,
html[data-theme="light"] .status-pill,
html[data-theme="light"] .cosmic-role-label,
html[data-theme="light"] .cosmic-fact > span,
html[data-theme="light"] .slide-count,
html[data-theme="light"] .back-home,
html[data-theme="light"] .back-top,
html[data-theme="light"] .darwin-commitment .eyebrow,
html[data-theme="light"] .darwin-personal-note .note-kicker,
html[data-theme="light"] .darwin-love-link,
html[data-theme="light"] .email-value {
  color:#9f7200 !important;
}

html[data-theme="light"] .hero-title .wave-line:first-child,
html[data-theme="light"] .section-head h2,
html[data-theme="light"] .gallery-header h2,
html[data-theme="light"] .darwin-hero h1,
html[data-theme="light"] .darwin-personal-note h2,
html[data-theme="light"] .contact-heading,
html[data-theme="light"] .about-title,
html[data-theme="light"] .about-grid h2,
html[data-theme="light"] .contact-copy h2 {
  color:#17161b;
}

html[data-theme="light"] .wave-line:nth-child(2) {
  color:rgba(23,22,27,.015);
  -webkit-text-stroke:1.8px #a97800;
  text-shadow:none;
}

html[data-theme="light"] .wave-line:nth-child(3) .wave-letter {
  background:linear-gradient(135deg,#9f7200 5%,#c89412 52%,#e1ae35 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:none;
}

html[data-theme="light"] .btn-glass {
  background:rgba(255,255,255,.72);
  color:#242126;
  border-color:rgba(50,42,32,.15);
  box-shadow:0 10px 26px rgba(66,50,25,.06);
}

html[data-theme="light"] .btn-glass:hover,
html[data-theme="light"] .btn-glass:focus-visible {
  background:#fffdf9;
  border-color:rgba(159,114,0,.34);
}

html[data-theme="light"] .btn-gold,
html[data-theme="light"] .send-btn,
html[data-theme="light"] .copy-btn {
  color:#17130d;
  box-shadow:0 14px 34px rgba(184,134,11,.16);
}

html[data-theme="light"] .portrait-glow {
  opacity:.38;
}

html[data-theme="light"] .portrait-fireworks {
  background:rgba(49,42,36,.90);
  color:#f8e7a6;
  border-color:rgba(159,114,0,.35);
}

html[data-theme="light"] .skill-card {
  background:rgba(255,253,249,.76);
}

html[data-theme="light"] .marquee {
  border-color:rgba(50,42,32,.14);
}

html[data-theme="light"] .marquee-track {
  color:#5f5962;
}

html[data-theme="light"] .marquee-track span::before {
  color:#a97800;
}

html[data-theme="light"] .darwin-commitment {
  background:linear-gradient(135deg,rgba(255,250,237,.96),rgba(247,238,218,.94));
  border-color:rgba(159,114,0,.25);
  box-shadow:0 24px 64px rgba(66,50,25,.10);
}

html[data-theme="light"] .darwin-commitment h3 {
  color:#17161b;
}

html[data-theme="light"] .darwin-commitment p {
  color:#5b555d;
}

html[data-theme="light"] .darwin-love-mark {
  background:rgba(184,134,11,.10);
  border-color:rgba(159,114,0,.28);
  color:#9f7200;
  box-shadow:none;
}

html[data-theme="light"] .darwin-love-link:hover {
  color:#6f4f00;
  border-color:#6f4f00;
}

html[data-theme="light"] .darwin-personal-note {
  background:linear-gradient(135deg,rgba(255,250,237,.97),rgba(247,238,218,.95));
  border-color:rgba(159,114,0,.25);
  box-shadow:0 24px 64px rgba(66,50,25,.10);
}

html[data-theme="light"] .darwin-personal-note h2 {
  color:#17161b;
}

html[data-theme="light"] .darwin-personal-note p {
  color:#5b555d;
}

html[data-theme="light"] .tool-card,
html[data-theme="light"] .contact-form,
html[data-theme="light"] .travel-banner,
html[data-theme="light"] .darwin-stat,
html[data-theme="light"] .place-card,
html[data-theme="light"] .slide-detail {
  background:rgba(255,253,249,.88);
  border-color:rgba(50,42,32,.13);
  box-shadow:0 20px 55px rgba(66,50,25,.08);
}

html[data-theme="light"] .field label {
  color:#5c565f;
}

html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .custom-time input {
  background:#fffdf9;
  color:#17161b;
  border-color:rgba(50,42,32,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field textarea:focus,
html[data-theme="light"] .custom-time input:focus {
  border-color:rgba(159,114,0,.55);
  box-shadow:0 0 0 3px rgba(184,134,11,.08);
}

html[data-theme="light"] .field input::placeholder,
html[data-theme="light"] .field textarea::placeholder,
html[data-theme="light"] .custom-time input::placeholder {
  color:#88818a;
}

html[data-theme="light"] .project-card,
html[data-theme="light"] .work-card {
  background:rgba(255,253,249,.88);
  border-color:rgba(50,42,32,.13);
}

html[data-theme="light"] .project-card h3,
html[data-theme="light"] .work-card h3 {
  color:#17161b;
}

html[data-theme="light"] .project-card p,
html[data-theme="light"] .work-card p {
  color:#625c65;
}

html[data-theme="light"] .place-card p,
html[data-theme="light"] .place-meta span,
html[data-theme="light"] .darwin-hero > p,
html[data-theme="light"] .travel-banner p {
  color:#5f5962;
}

html[data-theme="light"] .toast {
  background:#fffdf9;
  color:#242126;
  border-color:rgba(159,114,0,.32);
  box-shadow:0 18px 46px rgba(66,50,25,.15);
}

html[data-theme="light"] ::selection {
  background:#c99a24;
  color:#17130d;
}

@media (max-width:760px) {
  html[data-theme="light"] .bg-canvas {
    opacity:.15;
  }

  html[data-theme="light"] .cosmic-veil {
    background:
      linear-gradient(180deg,rgba(244,240,231,.82),rgba(244,240,231,.68)),
      radial-gradient(circle at 50% 42%,transparent 0 30%,rgba(244,240,231,.42) 74%);
  }
}

@media print {
  .wave-letter,
  .marquee-track,
  .type-caret,
  .scroll-cosmos-line::after {
    animation:none !important;
    transform:none !important;
  }
}


.ambient::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 42%,black 0 48%,transparent 88%);
  -webkit-mask-image:radial-gradient(circle at 50% 42%,black 0 48%,transparent 88%);
}

.cosmic-veil {
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 46%,transparent 0 32%,rgba(5,7,12,.08) 56%,rgba(5,7,12,.54) 100%),
    linear-gradient(90deg,rgba(5,7,12,.34),rgba(5,7,12,.02) 44%,rgba(5,7,12,.18));
}

.glass,
.nav-shell,
.work-card,
.tool-card,
.contact-form,
.more-tools,
.skill-card,
.identity-card,
.cosmic-fact,
.slide-detail {
  backdrop-filter:blur(22px) saturate(1.08);
  -webkit-backdrop-filter:blur(22px) saturate(1.08);
}

.nav-shell {
  box-shadow:0 20px 56px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.025);
}

.status-pill,
.cosmic-role {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 14px 34px rgba(0,0,0,.12);
}


.intro-copy {
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:900!important;
  font-synthesis:none;
  text-rendering:geometricPrecision;
}

.intro-copy span {
  animation:introWordSettle .72s cubic-bezier(.16,1,.3,1) both;
}
.intro-copy span:nth-child(2){animation-delay:.08s}
.intro-copy span:nth-child(3){animation-delay:.16s}
@keyframes introWordSettle {
  from { opacity:0; transform:translateY(18px); filter:blur(7px); }
  to { opacity:1; transform:none; filter:none; }
}


.neo-calc,
.calc-screen,
.calc-grid {
  color:#f7f8fb;
}
.calc-display,
.calc-history,
.calc-key {
  color:#f7f8fb!important;
  opacity:1!important;
  -webkit-text-fill-color:currentColor;
}
.calc-history { color:#8d93a2!important; }
.calc-key.op { color:#f2c84b!important; }
.calc-key.danger { color:#ff8d94!important; }
.calc-key.eq { color:#111015!important; }
html[data-theme="light"] .neo-calc,
html[data-theme="light"] .calc-screen,
html[data-theme="light"] .calc-grid,
html[data-theme="light"] .calc-display,
html[data-theme="light"] .calc-history,
html[data-theme="light"] .calc-key {
  color:#f7f8fb;
}
html[data-theme="light"] .calc-display { color:#ffffff!important; }
html[data-theme="light"] .calc-history { color:#959baa!important; }
html[data-theme="light"] .calc-key { color:#eef0f5!important; }
html[data-theme="light"] .calc-key.op { color:#e2b928!important; }
html[data-theme="light"] .calc-key.danger { color:#ff8d94!important; }
html[data-theme="light"] .calc-key.eq { color:#111015!important; }


.showcase { min-height:clamp(760px,88vh,980px); }
.gallery-stage {
  height:clamp(520px,70vh,760px);
  perspective:1900px;
  perspective-origin:50% 47%;
}
.gallery-card3d {
  width:auto;
  height:auto;
  max-width:94vw;
  max-height:72vh;
  aspect-ratio:var(--media-ratio,16/10);
  contain:layout paint;
}
.gallery-card3d img {
  transform:none!important;
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto;
  filter:none!important;
}
.gallery-card3d.is-active,
.gallery-card3d.is-active img {
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
}
.gallery-modal { width:min(99vw,1900px); }
.modal-media { padding:58px 8px 10px; }
.modal-media img {
  width:auto;
  height:auto;
  max-width:calc(100vw - 32px);
  max-height:82vh;
  object-fit:contain;
  image-rendering:auto;
  transform:none!important;
  filter:none!important;
}


html[data-theme="light"] .ambient::before {
  background-image:
    linear-gradient(rgba(90,70,35,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,70,35,.035) 1px,transparent 1px);
}
html[data-theme="light"] .cosmic-veil {
  background:
    radial-gradient(circle at 50% 46%,transparent 0 35%,rgba(244,240,231,.18) 64%,rgba(244,240,231,.72) 100%),
    linear-gradient(90deg,rgba(244,240,231,.62),rgba(244,240,231,.18) 44%,rgba(244,240,231,.52));
}
html[data-theme="light"] .bg-canvas {
  opacity:.24;
  filter:saturate(1.22) contrast(1.14) brightness(.93);
}
html[data-theme="light"] .neo-calc {
  background:#111119;
  border-color:rgba(20,20,30,.18);
  box-shadow:0 24px 55px rgba(53,45,35,.18);
}
html[data-theme="light"] .calc-screen,
html[data-theme="light"] .calc-key {
  background:#15151f;
}
html[data-theme="light"] .preset {
  background:#171720;
  color:#eef0f4;
  border-color:rgba(20,20,30,.12);
}
html[data-theme="light"] .preset.active,
html[data-theme="light"] .preset:hover {
  background:#b8860b;
  color:#111015;
}
html[data-theme="light"] .timer-ring strong,
html[data-theme="light"] #timer-display { color:#17161b; }
html[data-theme="light"] .timer-ring small,
html[data-theme="light"] #timer-status { color:#756f78; }

@media (max-width:760px) {
  .gallery-stage { height:clamp(390px,60vh,620px); }
  .gallery-card3d { max-width:92vw; max-height:58vh; }
  .ambient::before { background-size:42px 42px; }
}

@media (prefers-reduced-motion:reduce) {
  .intro-copy span { animation:none!important; }
}


:root {
  --font-display:'Space Grotesk','Plus Jakarta Sans',Arial,sans-serif;
  --font-body:'Plus Jakarta Sans',Arial,sans-serif;
  --font-mono:'Space Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}

body {
  font-family:var(--font-body);
}

h1,h2,h3,h4,
.brand strong,
.site-nav,
.nav-btn,
.btn,
.darwin-button,
.theme-toggle,
.hero-title,
.section-head h2,
.project-hero h1,
.darwin-hero h1,
.work-card h3,
.tool-title h3,
.identity-card h3,
.slide-detail h2,
.gallery-card3d figcaption {
  font-family:var(--font-display);
  font-synthesis:none;
}


.intro-copy {
  font-family:var(--font-display)!important;
  font-weight:700!important;
  letter-spacing:-.055em;
  opacity:0;
  transition:opacity .18s ease;
}
html.fonts-ready .intro-copy {
  opacity:1;
}
.intro-copy .outline {
  -webkit-text-stroke:1.3px rgba(255,255,255,.78);
}


.wave-story {
  position:relative;
  z-index:2;
  height:430vh;
  margin:0;
}

.wave-story-sticky {
  position:sticky;
  top:0;
  height:100vh;
  min-height:620px;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:clamp(110px,12vh,150px) clamp(24px,6vw,96px) clamp(52px,8vh,88px);
  isolation:isolate;
}

.wave-story-sticky::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(246,211,101,.055),transparent 32%),
    linear-gradient(180deg,rgba(7,8,12,.22),rgba(7,8,12,.04) 46%,rgba(7,8,12,.34));
}

.wave-story-sticky::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(circle at 50% 50%,black 0 42%,transparent 88%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,black 0 42%,transparent 88%);
}

.wave-story-topline,
.wave-story-bottom {
  position:absolute;
  left:clamp(24px,6vw,96px);
  right:clamp(24px,6vw,96px);
  display:flex;
  align-items:center;
  z-index:4;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(238,241,246,.62);
}

.wave-story-topline {
  top:clamp(110px,13vh,158px);
  justify-content:space-between;
}

.wave-story-index {
  color:var(--gold2);
  font-size:12px;
}

.wave-story-name {
  color:rgba(238,241,246,.48);
}

.wave-story-copy {
  position:relative;
  width:min(1180px,92vw);
  height:min(62vh,650px);
  display:grid;
  place-items:center;
  text-align:center;
  pointer-events:none;
  perspective:1200px;
}

.wave-story-frame {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  will-change:transform,opacity,filter;
  transform-origin:center center;
  transition:opacity .12s linear;
}

.wave-story-kicker {
  margin:0;
  font:700 10px var(--font-mono);
  letter-spacing:.18em;
  color:var(--gold2);
  text-transform:uppercase;
  opacity:.92;
}

.wave-story-frame h2 {
  margin:0;
  max-width:1160px;
  font-family:var(--font-display);
  font-size:clamp(42px,6.6vw,108px);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:.96;
  text-wrap:balance;
  color:#f5f3ef;
  text-shadow:0 20px 70px rgba(0,0,0,.45);
}

.story-word-clip {
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding:.055em 0 .09em;
  margin:-.055em 0 -.09em;
  perspective:800px;
}

.story-word {
  display:inline-block;
  opacity:0;
  transform:translateY(112%) rotateX(-58deg) scale(.94);
  filter:blur(10px);
  transform-origin:center top;
  transition:
    transform .82s cubic-bezier(.16,1,.3,1) var(--word-delay,0ms),
    opacity .58s ease var(--word-delay,0ms),
    filter .72s ease var(--word-delay,0ms);
  backface-visibility:hidden;
}

.wave-story-frame.is-current .story-word {
  opacity:1;
  transform:translateY(0) rotateX(0) scale(1);
  filter:blur(0);
}

.wave-story-bottom {
  bottom:clamp(28px,5vh,54px);
  gap:18px;
}

.wave-story-scroll,
.wave-story-total {
  flex:0 0 auto;
}

.wave-story-track {
  position:relative;
  flex:1;
  height:1px;
  overflow:hidden;
  background:rgba(255,255,255,.13);
}

.wave-story-track i {
  position:absolute;
  inset:0;
  display:block;
  transform:scaleX(.02);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--gold),var(--amber));
  box-shadow:0 0 18px rgba(246,211,101,.45);
  will-change:transform;
}

.hero-after-story {
  position:relative;
  z-index:3;
}

body.wave-story-active .bg-canvas {
  opacity:1;
  filter:saturate(1.12) contrast(1.06);
}

body.wave-story-active .cosmic-veil {
  background:
    radial-gradient(circle at 50% 50%,transparent 0 28%,rgba(5,7,12,.05) 54%,rgba(5,7,12,.48) 100%),
    linear-gradient(180deg,rgba(5,7,12,.06),rgba(5,7,12,.20));
}


.scroll-reveal {
  opacity:0;
  transform:translate3d(0,34px,0) scale(.985);
  filter:blur(8px);
  transition:
    opacity .82s ease,
    transform .95s cubic-bezier(.16,1,.3,1),
    filter .82s ease;
  will-change:transform,opacity,filter;
}
.scroll-reveal.in-view {
  opacity:1;
  transform:none;
  filter:none;
}


html[data-theme="light"] .wave-story-sticky::before {
  background:
    radial-gradient(circle at 50% 50%,rgba(184,134,11,.10),transparent 35%),
    linear-gradient(180deg,rgba(244,240,231,.18),rgba(244,240,231,.04) 46%,rgba(244,240,231,.30));
}
html[data-theme="light"] .wave-story-sticky::after {
  background-image:
    linear-gradient(rgba(40,31,20,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,31,20,.04) 1px,transparent 1px);
}
html[data-theme="light"] .wave-story-frame h2 {
  color:#17161b;
  text-shadow:0 20px 65px rgba(93,70,32,.08);
}
html[data-theme="light"] .wave-story-topline,
html[data-theme="light"] .wave-story-bottom,
html[data-theme="light"] .wave-story-name {
  color:rgba(31,27,29,.58);
}
html[data-theme="light"] .wave-story-track {
  background:rgba(31,27,29,.14);
}
html[data-theme="light"] body.wave-story-active .bg-canvas {
  opacity:.42;
  filter:saturate(1.18) contrast(1.16);
}
html[data-theme="light"] body.wave-story-active .cosmic-veil {
  background:
    radial-gradient(circle at 50% 50%,transparent 0 30%,rgba(244,240,231,.04) 56%,rgba(244,240,231,.30) 100%),
    linear-gradient(180deg,rgba(244,240,231,.02),rgba(244,240,231,.12));
}

@media (max-width:900px) {
  .wave-story { height:400vh; }
  .wave-story-sticky {
    min-height:560px;
    padding:96px 22px 54px;
  }
  .wave-story-topline {
    top:92px;
  }
  .wave-story-frame h2 {
    font-size:clamp(38px,10vw,70px);
    letter-spacing:-.05em;
  }
  .wave-story-copy {
    height:64vh;
    width:min(94vw,760px);
  }
}

@media (max-width:560px) {
  .wave-story { height:380vh; }
  .wave-story-sticky {
    padding-inline:16px;
  }
  .wave-story-topline,
  .wave-story-bottom {
    left:18px;
    right:18px;
  }
  .wave-story-topline {
    top:82px;
  }
  .wave-story-name {
    display:none;
  }
  .wave-story-frame {
    gap:14px;
  }
  .wave-story-frame h2 {
    font-size:clamp(35px,11vw,56px);
    line-height:.98;
  }
  .wave-story-kicker {
    font-size:9px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .story-word,
  .scroll-reveal {
    transition:none!important;
    filter:none!important;
  }
  .wave-story-frame.is-current .story-word,
  .scroll-reveal.in-view {
    opacity:1!important;
    transform:none!important;
  }
}


:root {
  --font-display:'Playfair Display','Instrument Serif',Georgia,serif;
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --font-mono:'Space Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}

body {
  font-family:var(--font-body);
  font-weight:400;
}

h1,h2,
.hero-title,
.section-head h2,
.project-hero h1,
.darwin-hero h1,
.wave-story-frame h2,
.intro-copy {
  font-family:var(--font-display)!important;
  font-synthesis:none;
}

h3,h4,
.brand strong,
.site-nav,
.nav-btn,
.btn,
.darwin-button,
.theme-toggle,
.work-card h3,
.tool-title h3,
.identity-card h3,
.slide-detail h2,
.gallery-card3d figcaption {
  font-family:var(--font-body);
  font-synthesis:none;
}

.intro-copy {
  font-weight:500!important;
  letter-spacing:-.035em;
}


.wave-story {
  height:460dvh;
  min-height:3000px;
}

.wave-story-sticky {
  height:100dvh;
  min-height:100svh;
  padding:0;
  display:block;
  overflow:hidden;
}

.wave-story-sticky::before {
  background:
    radial-gradient(circle at 68% 62%,rgba(246,211,101,.045),transparent 34%),
    linear-gradient(180deg,rgba(4,5,8,.08),rgba(4,5,8,.20));
}

.wave-story-sticky::after {
  background-size:54px 54px;
  opacity:.72;
  mask-image:none;
  -webkit-mask-image:none;
}

.wave-story-topline {
  top:clamp(104px,13dvh,154px);
  left:clamp(26px,5vw,78px);
  right:clamp(26px,5vw,78px);
  justify-content:flex-start;
}

.wave-story-name { display:none; }

.wave-story-index {
  font-size:11px;
  letter-spacing:.12em;
}

.wave-story-copy {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  text-align:left;
  pointer-events:none;
  perspective:1200px;
}

.wave-story-frame {
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:14px;
  padding:
    clamp(168px,23dvh,250px)
    clamp(28px,7vw,108px)
    clamp(120px,15dvh,180px);
}

.wave-story-kicker {
  font-size:9px;
  letter-spacing:.18em;
  color:var(--gold2);
}

.wave-story-frame h2 {
  max-width:min(760px,46vw);
  margin:0;
  font-size:clamp(48px,5.4vw,90px);
  font-weight:400;
  letter-spacing:-.045em;
  line-height:.98;
  text-wrap:balance;
  color:#f5f3ef;
  text-shadow:0 14px 50px rgba(0,0,0,.34);
}

.story-word-clip {
  padding:.015em 0 .08em;
  margin:-.015em 0 -.08em;
}

.story-word {
  transform:translateY(115%) rotate(2deg);
  filter:none;
  transition:
    transform .86s cubic-bezier(.16,1,.3,1) var(--word-delay,0ms),
    opacity .7s ease var(--word-delay,0ms);
  transform-origin:left top;
}

.wave-story-frame.is-current .story-word {
  transform:translateY(0) rotate(0deg);
}

.wave-story-bottom {
  left:clamp(26px,5vw,78px);
  right:auto;
  bottom:clamp(28px,5dvh,52px);
  width:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

.wave-story-scroll {
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:9px;
  letter-spacing:.17em;
}

.wave-story-track {
  width:1px;
  height:68px;
  flex:none;
  background:rgba(255,255,255,.14);
}

.wave-story-track i {
  transform:scaleY(.02);
  transform-origin:center top;
  background:linear-gradient(180deg,var(--gold),var(--amber));
}

.wave-story-total { display:none; }


html[data-theme="light"] .wave-story-sticky {
  background:rgba(249,251,249,.74);
}
html[data-theme="light"] .wave-story-sticky::before {
  background:
    radial-gradient(circle at 68% 64%,rgba(134,231,209,.09),transparent 34%),
    linear-gradient(180deg,rgba(249,251,249,.02),rgba(249,251,249,.08));
}
html[data-theme="light"] .wave-story-sticky::after {
  background-image:
    linear-gradient(rgba(17,19,21,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,19,21,.025) 1px,transparent 1px);
}
html[data-theme="light"] .wave-story-frame h2 {
  color:#111315;
  text-shadow:none;
}
html[data-theme="light"] .wave-story-kicker,
html[data-theme="light"] .wave-story-index {
  color:#111315;
}
html[data-theme="light"] .wave-story-topline,
html[data-theme="light"] .wave-story-bottom {
  color:rgba(17,19,21,.64);
}
html[data-theme="light"] .wave-story-track {
  background:rgba(17,19,21,.14);
}


@media (max-width:900px) {
  .wave-story {
    height:430dvh;
    min-height:2600px;
  }

  .wave-story-sticky {
    height:100dvh;
    min-height:100svh;
  }

  .wave-story-topline {
    top:max(112px,15dvh);
    left:22px;
    right:22px;
  }

  .wave-story-frame {
    padding:
      max(168px,22dvh)
      24px
      max(120px,16dvh);
  }

  .wave-story-frame h2 {
    max-width:min(560px,78vw);
    font-size:clamp(39px,8.2vw,66px);
    line-height:1.01;
    letter-spacing:-.035em;
  }

  .wave-story-bottom {
    left:22px;
    bottom:max(28px,4dvh);
  }
}

@media (max-width:560px) {
  .wave-story {
    height:420dvh;
    min-height:2450px;
  }

  .wave-story-topline {
    top:max(106px,14dvh);
    left:20px;
  }

  .wave-story-frame {
    gap:11px;
    padding:
      max(154px,20dvh)
      20px
      max(116px,15dvh);
  }

  .wave-story-frame h2 {
    width:min(88vw,430px);
    max-width:88vw;
    font-size:clamp(34px,9.3vw,48px);
    line-height:1.02;
    letter-spacing:-.035em;
    text-wrap:pretty;
  }

  .wave-story-kicker {
    font-size:8px;
  }

  .wave-story-bottom {
    left:18px;
    bottom:max(24px,3.2dvh);
  }

  .wave-story-track { height:54px; }


  .site-header {
    padding-top:max(10px,env(safe-area-inset-top));
  }
  .nav-shell {
    min-height:72px;
  }
}


@supports (height:100dvh) {
  .wave-story-sticky { height:100dvh; }
}

@media (prefers-reduced-motion:reduce) {
  .story-word { filter:none!important; }
}


:root {
  --bg:#f6f4ee;
  --panel:rgba(252,250,245,.76);
  --panel-solid:#fbf9f4;
  --panel2:#efede6;
  --text:#161718;
  --muted:#6d6c68;
  --gold:#86d8c2;
  --gold2:#6fcab1;
  --amber:#96dfcc;
  --line:rgba(22,23,24,.115);
  --green:#4ccfaf;
  --radius:22px;
  --max:1380px;
  --font-display:'Playfair Display','Instrument Serif',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Space Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}
html[data-theme="dark"] {
  --bg:#07080b;
  --panel:rgba(11,12,16,.70);
  --panel-solid:#101116;
  --panel2:#15171d;
  --text:#f4f2eb;
  --muted:#aaa69d;
  --gold:#e0bb57;
  --gold2:#f1cf78;
  --amber:#e79658;
  --line:rgba(255,255,255,.095);
  --green:#76d9bd;
}
html { background:var(--bg); }
body {
  background:var(--bg)!important;
  color:var(--text);
  font-family:var(--font-body)!important;
  font-weight:400;
  transition:background .45s ease,color .45s ease;
}
h1,h2,h3,.hero-title,.section-head h2,.project-hero h1,.darwin-hero h1,
.contact-copy h2,.gallery-header h2,.darwin-personal-note h2 {
  font-family:var(--font-display)!important;
  font-weight:400!important;
  letter-spacing:-.045em!important;
}
.eyebrow,.section-index,.status-pill,.wave-story-kicker,.wave-story-index,
.brand-copy small,.facts,.gallery-help,.place-meta,.timer-status,.marquee-track {
  font-family:var(--font-mono)!important;
  letter-spacing:.12em;
}
::selection { background:var(--gold); color:#101214; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--text) 18%,transparent); }


.ambient {
  background:var(--bg)!important;
  opacity:1!important;
}
.ambient::before {
  inset:0!important;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px)!important;
  background-size:72px 72px!important;
  opacity:.24;
  mask-image:radial-gradient(circle at 50% 43%,#000 0 56%,transparent 94%)!important;
  -webkit-mask-image:radial-gradient(circle at 50% 43%,#000 0 56%,transparent 94%)!important;
}
.cosmic-veil {
  background:radial-gradient(circle at 50% 48%,transparent 0 45%,color-mix(in srgb,var(--bg) 26%,transparent) 72%,var(--bg) 112%)!important;
}
.bg-canvas { opacity:1!important; filter:none!important; }


.glass,.nav-shell,.work-card,.tool-card,.contact-form,.more-tools,.skill-card,
.identity-card,.cosmic-fact,.slide-detail,.darwin-stat,.travel-banner,.darwin-personal-note {
  background:var(--panel)!important;
  color:var(--text);
  border:1px solid var(--line)!important;
  backdrop-filter:blur(18px) saturate(1.02)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.02)!important;
  box-shadow:0 18px 60px rgba(24,24,22,.065)!important;
}
html[data-theme="dark"] .glass,
html[data-theme="dark"] .nav-shell,
html[data-theme="dark"] .work-card,
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .contact-form,
html[data-theme="dark"] .more-tools,
html[data-theme="dark"] .skill-card,
html[data-theme="dark"] .identity-card,
html[data-theme="dark"] .cosmic-fact,
html[data-theme="dark"] .slide-detail,
html[data-theme="dark"] .darwin-stat,
html[data-theme="dark"] .travel-banner,
html[data-theme="dark"] .darwin-personal-note {
  box-shadow:0 22px 70px rgba(0,0,0,.24)!important;
}


.site-header { padding-top:18px!important; }
.nav-shell {
  min-height:68px!important;
  border-radius:18px!important;
  padding:10px 14px!important;
  box-shadow:0 12px 36px rgba(24,24,22,.055)!important;
}
.brand-mark {
  background:transparent!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  font-family:var(--font-display)!important;
  font-weight:500!important;
}
.brand-copy strong { font-family:var(--font-display)!important; font-weight:500!important; font-size:18px!important; letter-spacing:-.02em!important; }
.brand-copy small { color:var(--muted)!important; font-size:8px!important; }
.site-nav { gap:6px!important; }
.nav-btn {
  color:var(--muted)!important;
  border-radius:999px!important;
  background:transparent!important;
  font:500 13px/1 var(--font-body)!important;
}
.nav-btn:hover,.nav-btn.active { color:var(--text)!important; background:color-mix(in srgb,var(--text) 6%,transparent)!important; }
.theme-toggle,.darwin-chip,.darwin-button {
  border-color:var(--line)!important;
  background:color-mix(in srgb,var(--panel-solid) 82%,transparent)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
.darwin-button { background:var(--text)!important; color:var(--bg)!important; }
.live-dot { background:var(--gold)!important; box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 14%,transparent)!important; }


.site-intro { background:#07080b!important; }
.intro-copy {
  font-family:var(--font-display)!important;
  font-weight:400!important;
  letter-spacing:-.055em!important;
  line-height:.82!important;
}
.intro-copy .outline { -webkit-text-stroke:1px rgba(255,255,255,.72)!important; }


.wave-story { height:480vh!important; background:transparent!important; }
.wave-story-sticky {
  height:100vh!important;
  height:100dvh!important;
  min-height:100svh!important;
  background:transparent!important;
}
.wave-story-sticky::before {
  background:radial-gradient(circle at 63% 58%,color-mix(in srgb,var(--gold) 8%,transparent),transparent 38%)!important;
  opacity:.72!important;
}
.wave-story-sticky::after { opacity:.18!important; }
.wave-story-topline { top:112px!important; left:clamp(24px,5vw,76px)!important; right:clamp(24px,5vw,76px)!important; }
.wave-story-index { color:var(--text)!important; font:700 11px/1 var(--font-mono)!important; }
.wave-story-name { color:var(--muted)!important; }
.wave-story-frame {
  left:clamp(24px,6vw,94px)!important;
  top:50%!important;
  width:min(43vw,690px)!important;
  transform:translateY(-50%)!important;
}
.wave-story-kicker { color:var(--gold2)!important; font-size:9px!important; }
.wave-story-frame h2 {
  color:var(--text)!important;
  font-family:var(--font-display)!important;
  font-weight:400!important;
  font-size:clamp(46px,5.2vw,88px)!important;
  line-height:.98!important;
  letter-spacing:-.05em!important;
  max-width:10.8ch!important;
  text-shadow:none!important;
}
.story-word { font-family:inherit!important; }
.wave-story-bottom { left:clamp(24px,5vw,76px)!important; right:clamp(24px,5vw,76px)!important; bottom:32px!important; }
.wave-story-scroll,.wave-story-total { color:var(--muted)!important; font:700 9px/1 var(--font-mono)!important; letter-spacing:.18em!important; }
.wave-story-track { background:var(--line)!important; }
.wave-story-track i { background:var(--text)!important; }
body.wave-story-active .cosmic-veil { opacity:.30!important; }


.hero-after-story { padding-top:14vh!important; }
.hero { gap:clamp(38px,5vw,88px)!important; }
.status-pill,.cosmic-role {
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding-left:0!important;
  color:var(--muted)!important;
}
.hero-title {
  color:var(--text)!important;
  font-size:clamp(70px,8.5vw,142px)!important;
  font-weight:400!important;
  line-height:.74!important;
  letter-spacing:-.065em!important;
}
.wave-line:nth-child(2) .wave-letter {
  -webkit-text-stroke:1.1px var(--text)!important;
  color:transparent!important;
}
.wave-line:nth-child(3) .wave-letter {
  background:none!important;
  -webkit-text-fill-color:var(--text)!important;
  color:var(--text)!important;
  text-shadow:none!important;
}
.hero-sub { color:var(--muted)!important; max-width:56ch!important; font-size:16px!important; line-height:1.75!important; }
.btn {
  border-radius:999px!important;
  font:600 12px/1 var(--font-body)!important;
  letter-spacing:0!important;
  box-shadow:none!important;
}
.btn-gold { background:var(--text)!important; color:var(--bg)!important; border:1px solid var(--text)!important; }
.btn-glass { background:transparent!important; color:var(--text)!important; border:1px solid var(--line)!important; }
.btn:hover { transform:translateY(-2px)!important; }
.hero-mini { gap:0!important; border-top:1px solid var(--line); }
.mini-card {
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:20px 4px!important;
}
.mini-card span { color:var(--muted)!important; }
.mini-card strong { font-family:var(--font-display)!important; font-weight:400!important; font-size:22px!important; }
.portrait-card { border-radius:2px!important; border:1px solid var(--line)!important; box-shadow:none!important; }
.portrait-fireworks { border-radius:999px!important; background:var(--text)!important; color:var(--bg)!important; border:0!important; box-shadow:none!important; }
.portrait-glow { background:radial-gradient(circle,var(--gold),transparent 68%)!important; opacity:.15!important; }

.section { padding-top:14vh!important; padding-bottom:14vh!important; border-top:1px solid var(--line); }
.section-index,.eyebrow { color:var(--gold2)!important; font-size:9px!important; }
.section-head h2,.contact-copy h2,.gallery-header h2 {
  font-size:clamp(52px,7vw,108px)!important;
  line-height:.89!important;
  color:var(--text)!important;
}
.section-head > p,.contact-copy > p,.gallery-header > p { color:var(--muted)!important; line-height:1.75!important; }
.work-grid { gap:18px!important; }
.work-card {
  border-radius:4px!important;
  box-shadow:none!important;
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .3s ease!important;
}
.work-card:hover { transform:translateY(-5px)!important; border-color:color-mix(in srgb,var(--gold) 56%,var(--line))!important; }
.work-card h3 { font-family:var(--font-display)!important; font-weight:400!important; letter-spacing:-.035em!important; }
.work-card p { color:var(--muted)!important; }


.tool-card,.more-tools { border-radius:8px!important; }
.tool-title h3 { font-family:var(--font-display)!important; font-weight:400!important; font-size:30px!important; }
.tool-title p,.more-tools p { color:var(--muted)!important; }
.neo-calc { background:#0f1118!important; border:1px solid rgba(16,18,24,.16)!important; }
.calc-screen,.calc-key { background:#141620!important; color:#f7f8fb!important; }
.calc-display { color:#fff!important; opacity:1!important; }
.calc-key.op { color:#9be7d2!important; }
.calc-key.eq { background:linear-gradient(135deg,#8bdcc5,#b9ead8)!important; color:#101214!important; }
.timer-ring { border-color:var(--gold)!important; }
.timer-ring strong,#timer-display { color:var(--text)!important; }
.preset.active,.preset:hover { background:var(--text)!important; color:var(--bg)!important; }


.darwin-commitment,.identity-card { border-radius:6px!important; }
.darwin-commitment h3,.identity-card strong { color:var(--text)!important; }
.darwin-commitment p,.skill-card span,.identity-card span { color:var(--muted)!important; }
.skill-card { border-radius:4px!important; box-shadow:none!important; }
.marquee { border-color:var(--line)!important; }
.marquee-track { color:var(--muted)!important; }
.contact-form { border-radius:8px!important; }
.field label { color:var(--muted)!important; }
.field input,.field textarea,.custom-time input {
  background:color-mix(in srgb,var(--panel-solid) 90%,transparent)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
}
.send-btn { background:var(--text)!important; color:var(--bg)!important; }
.footer { border-color:var(--line)!important; color:var(--muted)!important; }
.back-top { color:var(--text)!important; }


.subpage { color:var(--text)!important; }
.subnav { border-bottom:1px solid var(--line)!important; }
.back-home { color:var(--muted)!important; }
.project-hero,.darwin-hero { border-bottom:1px solid var(--line)!important; }
.project-hero h1,.darwin-hero h1 { color:var(--text)!important; font-size:clamp(68px,10vw,150px)!important; line-height:.82!important; }
.project-hero-copy p,.darwin-hero > p { color:var(--muted)!important; }
.facts span { border-color:var(--line)!important; color:var(--muted)!important; background:transparent!important; }
.project-hero video { border:1px solid var(--line)!important; border-radius:4px!important; }
.gallery-section { border-top:1px solid var(--line)!important; }
.showcase { background:transparent!important; border-color:var(--line)!important; border-radius:4px!important; }
.gallery-card3d { background:#fff!important; border-color:var(--line)!important; box-shadow:0 22px 70px rgba(0,0,0,.12)!important; }
.gallery-card3d.is-active { box-shadow:0 26px 85px rgba(0,0,0,.16)!important; }
.gallery-nav button { background:var(--panel)!important; border-color:var(--line)!important; color:var(--text)!important; }
.gallery-dot { background:color-mix(in srgb,var(--text) 20%,transparent)!important; }
.gallery-dot.active { background:var(--gold)!important; }
.slide-detail { border-radius:4px!important; }
.slide-detail h2 { color:var(--text)!important; }
.slide-detail p { color:var(--muted)!important; }

.darwin-personal-note,.travel-banner,.darwin-stat { border-radius:6px!important; }
.travel-banner strong { color:var(--text)!important; }
.place-card { background:var(--panel)!important; border:1px solid var(--line)!important; border-radius:4px!important; box-shadow:none!important; }
.place-card-body p,.place-meta { color:var(--muted)!important; }


.toast { background:var(--panel-solid)!important; color:var(--text)!important; border:1px solid var(--line)!important; }

@media (max-width:1100px) {
  .nav-shell { border-radius:16px!important; }
  .mobile-menu { background:var(--panel-solid)!important; color:var(--text)!important; border-color:var(--line)!important; }
  .mobile-menu .nav-btn { color:var(--text)!important; }
}

@media (max-width:760px) {
  .ambient::before { background-size:46px 46px!important; opacity:.18; }
  .site-header { padding:14px 16px 0!important; }
  .nav-shell { min-height:64px!important; }
  .brand-copy { display:none!important; }
  .brand-mark { width:48px!important; height:48px!important; font-size:19px!important; }
  .menu-toggle { color:var(--text)!important; font-size:28px!important; }

  .wave-story { height:430vh!important; }
  .wave-story-topline { top:96px!important; left:22px!important; right:22px!important; }
  .wave-story-frame {
    left:22px!important;
    right:22px!important;
    top:18vh!important;
    width:calc(100vw - 44px)!important;
    transform:none!important;
  }
  .wave-story-frame h2 {
    font-size:clamp(35px,10.6vw,50px)!important;
    line-height:1.00!important;
    max-width:10.5ch!important;
  }
  .wave-story-kicker { margin-bottom:12px!important; }
  .wave-story-bottom { left:22px!important; right:22px!important; bottom:max(24px,env(safe-area-inset-bottom))!important; }
  .wave-story-track { width:34vw!important; }
  body.wave-story-active .cosmic-veil { opacity:.16!important; }

  .hero-after-story { padding-top:12vh!important; }
  .hero-title { font-size:clamp(62px,19vw,94px)!important; line-height:.73!important; }
  .hero-sub { font-size:15px!important; }
  .hero-mini { margin-top:36px!important; }
  .mini-card { padding:17px 2px!important; }
  .portrait-card { border-radius:2px!important; }

  .section { padding-top:11vh!important; padding-bottom:11vh!important; }
  .section-head h2,.contact-copy h2,.gallery-header h2 { font-size:clamp(46px,14vw,72px)!important; }
  .work-grid,.sample-grid { grid-template-columns:1fr!important; }
  .project-hero h1,.darwin-hero h1 { font-size:clamp(68px,20vw,106px)!important; }
  .project-hero,.darwin-hero { padding-top:22px!important; }
  .showcase { min-height:620px!important; }
  .gallery-stage { height:440px!important; }
  .gallery-card3d { max-width:94vw!important; max-height:54vh!important; }
}

@media (prefers-reduced-motion:reduce) {
  .work-card,.btn,.nav-btn { transition:none!important; }
}


.ambient::before,.site-intro::before{content:none!important;display:none!important;background-image:none!important}
.theme-dock-global{position:fixed;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));z-index:990}

.darwin-strong-light{color:#fff}.darwin-strong-muted{color:#d7dbe2}
html[data-theme="light"] .darwin-strong-light,html[data-theme="light"] .darwin-strong-muted{color:inherit}
.site-header {
  padding: 24px clamp(20px, 4.5vw, 78px) 0 !important;
}
.nav-shell {
  width: min(100%, 1360px) !important;
  min-height: 72px !important;
  padding: 10px 12px 10px 14px !important;
  gap: 22px !important;
  border-radius: 18px !important;
}
.brand {
  flex: 0 0 auto;
  color: var(--text) !important;
  cursor: pointer;
  text-decoration: none;
}
.brand-mark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 11px !important;
  font-family: "Playfair Display", serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  background: transparent !important;
}
.brand-copy strong {
  color: var(--text) !important;
  font-family: "Playfair Display", serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: -.02em !important;
}
.brand-copy small {
  font-size: 8px !important;
  letter-spacing: .13em !important;
}
.site-nav {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  gap: 6px !important;
}
.nav-btn,
.nav-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px !important;
  border-radius: 12px !important;
  color: var(--muted) !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.nav-btn:hover,
.nav-btn.active,
.nav-link:hover,
.nav-link.active {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--text) 7%, transparent) !important;
}
.nav-actions {
  margin-left: auto;
  gap: 9px !important;
}
.nav-theme-toggle {
  min-height: 44px !important;
  padding: 0 13px !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}
.nav-contact {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 0;
  border-radius: 13px;
  background: var(--text);
  color: var(--bg);
  font: 600 13px/1 Inter, Arial, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s var(--ease), opacity .25s ease, background-color .3s ease, color .3s ease;
}
.nav-contact:hover,
.nav-contact:focus-visible {
  transform: translateY(-2px);
  opacity: .9;
  outline: none;
}
html[data-theme="light"] .nav-contact {
  background: #6f4df4;
  color: #fff;
}
html[data-theme="light"] .nav-contact:hover,
html[data-theme="light"] .nav-contact:focus-visible {
  background: #6242df;
}
.subpage {
  padding-top: 118px !important;
}
.subpage .subnav {
  padding-top: 18px !important;
}
.mobile-menu .theme-toggle-mobile {
  display: flex !important;
  width: 100% !important;
  min-height: 52px !important;
  justify-content: flex-start !important;
  margin-top: 8px;
  padding: 0 16px !important;
  border-radius: 13px !important;
}
.mobile-menu .mobile-contact {
  width: 100%;
  min-height: 52px;
  margin-top: 7px;
  border-radius: 13px;
}
@media (max-width: 1260px) {
  .site-nav {
    position: static !important;
    transform: none !important;
    margin-left: auto !important;
  }
  .brand-copy small {
    display: none;
  }
}
@media (max-width: 1100px) {
  .site-header {
    padding: 16px 16px 0 !important;
  }
  .nav-shell {
    min-height: 66px !important;
    padding: 9px 10px 9px 12px !important;
  }
  .site-nav,
  .nav-actions {
    display: none !important;
  }
  .menu-toggle {
    display: grid !important;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-left: auto;
    border-radius: 12px;
  }
  .mobile-menu {
    padding: 14px !important;
  }
  .mobile-menu .nav-btn,
  .mobile-menu .nav-link {
    min-height: 52px !important;
    justify-content: flex-start !important;
    padding: 0 16px !important;
    font-size: 16px !important;
    border-radius: 13px !important;
  }
}
@media (max-width: 760px) {
  .brand-copy {
    display: block !important;
  }
  .brand-copy strong {
    font-size: 15px !important;
  }
  .brand-copy small {
    display: none !important;
  }
  .brand-mark {
    width: 44px !important;
    height: 44px !important;
  }
  .subpage {
    padding-top: 94px !important;
  }
}
@media (max-width: 430px) {
  .site-header {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .nav-shell {
    gap: 10px !important;
  }
  .brand-copy strong {
    font-size: 13px !important;
  }
}
.theme-dock-global {
  display: none !important;
}
.nav-shell {
  position: relative !important;
}

@media (max-width:1100px) {
  .site-header {
    padding: max(10px, env(safe-area-inset-top)) 12px 0 !important;
    z-index: 1200 !important;
  }

  .nav-shell {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 9px 8px 10px !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 58px) !important;
    overflow: hidden !important;
  }

  .brand-copy {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .brand-copy strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .site-nav,
  .nav-actions,
  .nav-right {
    display: none !important;
  }

  .menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1303 !important;
    border: 1px solid var(--line) !important;
    border-radius: 13px !important;
    background: color-mix(in srgb, var(--panel-solid) 84%, transparent) !important;
    color: var(--text) !important;
    font-family: Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  .menu-toggle:focus-visible {
    outline: 2px solid var(--gold) !important;
    outline-offset: 2px !important;
  }

  .mobile-menu {
    display: grid !important;
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(max(10px, env(safe-area-inset-top)) + 72px) !important;
    max-height: calc(100dvh - max(10px, env(safe-area-inset-top)) - 88px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
    gap: 4px !important;
    z-index: 1302 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-10px) scale(.985) !important;
    transform-origin: top center !important;
    transition: opacity .22s ease, transform .28s var(--ease), visibility 0s linear .28s !important;
  }

  .mobile-menu.open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    transition: opacity .22s ease, transform .28s var(--ease), visibility 0s linear 0s !important;
  }

  .mobile-menu-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1299 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(0,0,0,.28) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .22s ease, visibility 0s linear .22s !important;
  }

  body.menu-open .mobile-menu-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity .22s ease, visibility 0s linear 0s !important;
  }

  html[data-theme="light"] .menu-toggle {
    background: rgba(255,255,255,.9) !important;
    color: #18171b !important;
    border-color: rgba(28,24,20,.14) !important;
  }
}

@media (max-width:600px) {
  .brand-copy {
    display: none !important;
  }

  .brand {
    max-width: calc(100% - 58px) !important;
  }

  .brand-mark {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
  }

  .mobile-menu {
    left: 10px !important;
    right: 10px !important;
  }
}

@media (max-width:360px) {
  .site-header {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .nav-shell {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}