:root{
  --bg1:#0e1723;
  --bg2:#192738;
  --ink:#e7edf4;
  --muted:#a1afbf;
  --card:rgba(22,34,49,.78);
  --card2:rgba(22,34,49,.68);
  --stroke:rgba(167,201,224,.2);
  --shadow: 0 18px 45px rgba(0,0,0,.32);
  --shadow2: 0 10px 25px rgba(0,0,0,.26);
  --accent:#d8ad62;
  --accent2:#79adc2;
  --accent3:#bdd7c7;
  --radius:22px;
  --radius2:14px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif;
  color:var(--ink);
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

.container{
  width:min(1040px, calc(100% - 40px));
  margin:0 auto;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:12px;
  background:#fff;
  padding:10px 12px;
  border-radius:12px;
  box-shadow: var(--shadow2);
  z-index:1000;
}
.skip-link:focus{
  left:12px;
}

.page-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
}
.bg-sky-wash{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 60% -10%, rgba(201,225,238,.16), transparent 56%),
    linear-gradient(180deg, rgba(150,184,203,.10), transparent 35%);
}
.bg-blob{
  position:absolute;
  border-radius:999px;
  filter: blur(10px);
  opacity:.65;
  animation: floaty 10s ease-in-out infinite;
}
.bg-mountain{
  position:absolute;
  bottom:26%;
  background: linear-gradient(180deg, rgba(150,173,188,.46), rgba(70,91,112,.25));
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  filter: blur(1px);
  opacity:.75;
}
.bg-mountain.m1{ width:46vw; height:38vh; left:-6vw; }
.bg-mountain.m2{ width:40vw; height:34vh; left:24vw; opacity:.64; }
.bg-mountain.m3{ width:45vw; height:32vh; right:-8vw; opacity:.58; }

.bg-lake{
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:0;
  height:34%;
  background:
    linear-gradient(180deg, rgba(114,152,173,.32), rgba(51,75,95,.44) 54%, rgba(30,47,65,.58)),
    repeating-linear-gradient(94deg, transparent 0 24px, rgba(181,212,227,.08) 24px 26px);
}

.bg-pavilion{
  position:absolute;
  right:14%;
  bottom:24%;
  width:150px;
  height:110px;
  background:
    linear-gradient(180deg, rgba(68,39,28,.84), rgba(49,30,24,.9));
  clip-path: polygon(10% 58%, 90% 58%, 92% 100%, 8% 100%, 0 60%, 100% 60%, 75% 28%, 50% 8%, 25% 28%);
  opacity:.72;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.22));
}

.bg-willow{
  position:absolute;
  bottom:30%;
  width:170px;
  height:210px;
  opacity:.55;
}
.bg-willow::before,
.bg-willow::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(172deg, rgba(124,164,139,.7) 0 2px, transparent 2px 12px);
  clip-path: polygon(45% 0, 56% 0, 80% 100%, 20% 100%);
}
.bg-willow::after{
  transform: translateX(28px) scaleX(.7);
  opacity:.65;
}
.bg-willow.w1{ left:8%; }
.bg-willow.w2{ left:18%; transform: scale(.8); opacity:.45; }
.b1{
  width:220px; height:220px;
  left:-60px; top:80px;
  background: radial-gradient(circle at 30% 30%, #ffd1e8, #bde7ff);
  animation-duration: 12s;
}
.b2{
  width:260px; height:260px;
  right:-90px; top:30px;
  background: radial-gradient(circle at 30% 30%, #c2ffe9, #bde7ff);
  animation-duration: 14s;
}
.b3{
  width:180px; height:180px;
  left:20%; bottom:-70px;
  background: radial-gradient(circle at 30% 30%, #ffeaa7, #ffd1e8);
  animation-duration: 11s;
}

.bg-dots{
  position:absolute;
  inset:-20%;
  background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.2px);
  background-size: 18px 18px;
  opacity:.35;
  transform: rotate(-6deg);
}

.bg-hearts{ display:none; }

@keyframes floaty{
  0%,100%{ transform: translateY(0) translateX(0) scale(1); }
  50%{ transform: translateY(-18px) translateX(12px) scale(1.03); }
}
@keyframes shimmer{
  0%,100%{ filter: hue-rotate(0deg); }
  50%{ filter: hue-rotate(18deg); }
}

@media (prefers-reduced-motion: reduce){
  .bg-blob,.bg-hearts{ animation:none; }
}

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  backdrop-filter: blur(10px);
}
.site-header::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
}

.brand{
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border-radius:16px;
  transition: transform .15s ease, background .15s ease;
}
.brand:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.40);
}
.brand-badge{
  width:38px; height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background: rgba(255,255,255,.70);
  border:1px solid var(--stroke);
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  font-size:18px;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-weight:900; letter-spacing:.2px; }
.brand-subtitle{ font-size:12px; color:var(--muted); margin-top:4px; }

.nav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  font-size:14px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.35);
  border:1px solid rgba(0,0,0,.05);
  transition: transform .15s ease, background .15s ease;
}
.nav a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.55);
}

main{
  padding-bottom:40px;
}

.hero{
  padding-top:26px;
  padding-bottom:16px;
}
.hero-card{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:22px;
  align-items:center;
  padding:22px;
  border-radius: var(--radius);
  background: var(--card);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  position:relative;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  background: radial-gradient(circle at 20% 0%, rgba(216,173,98,.2), transparent 60%),
              radial-gradient(circle at 90% 20%, rgba(121,173,194,.2), transparent 55%);
  pointer-events:none;
}

.character{
  position:relative;
  height:340px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.character::before{
  content:"";
  position:absolute;
  width:min(360px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(236,250,239,.62));
  box-shadow: 0 14px 30px rgba(88,149,104,.16);
}
.character-svg{
  width:min(340px, 100%);
  height:auto;
  animation: bob 4.8s ease-in-out infinite;
  filter: drop-shadow(0 20px 25px rgba(0,0,0,.08));
}
.character-photo{
  position:relative;
  z-index:1;
  width:min(340px, 100%);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 26px;
  animation: bob 4.8s ease-in-out infinite;
  border:3px solid rgba(255,255,255,.95);
  outline: 1px solid rgba(201,229,207,.9);
  filter: saturate(.72) hue-rotate(-18deg) brightness(1.08) contrast(.94);
  box-shadow:
    0 0 0 8px rgba(255,255,255,.6),
    0 16px 30px rgba(67,131,85,.18);
}
@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
.character-bubble{
  position:absolute;
  bottom:18px;
  left:16px;
  right:16px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(22,34,49,.84);
  border:1px solid var(--stroke);
  box-shadow: 0 12px 24px rgba(0,0,0,.24);
  font-weight:800;
}
.bubble-dot{
  width:12px; height:12px;
  border-radius:50%;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 6px rgba(216,173,98,.12);
}

.hero-text{
  position:relative;
  padding:8px 10px;
}
.hero-text h1{
  margin:0 0 10px;
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: .2px;
}
.accent{
  color: var(--accent);
}
.hero-text p{
  margin:0 0 16px;
  color: rgba(0,0,0,.72);
  font-size: 15.5px;
  line-height:1.7;
}

.hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 999px;
  padding: 12px 16px;
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(0,0,0,.07);
  background: rgba(255,255,255,.72);
  color: var(--ink);
  box-shadow: 0 10px 18px rgba(0,0,0,.07);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
}
.btn.primary{
  background: linear-gradient(180deg, rgba(255,111,180,.95), rgba(61,184,255,.90));
  border-color: rgba(255,255,255,.40);
  color:#fff;
}
.btn.small{
  padding:10px 14px;
  font-size:14px;
}
.btn.ghost{
  background: rgba(255,255,255,.45);
  box-shadow:none;
}

.btn-disabled{
  cursor: default;
  pointer-events: none;
  opacity: .65;
}

.social-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.chip{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius: 999px;
  border:1px dashed rgba(0,0,0,.14);
  background: rgba(255,255,255,.40);
  font-weight:800;
  color: var(--ink);
  font-size:13px;
}

.chip-disabled{
  cursor: default;
  opacity: .65;
}

.section{
  padding: 24px 0;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.section-head h2{
  margin:0;
  font-size: 22px;
  letter-spacing: .2px;
}
.muted{
  color: var(--muted);
}

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

.card{
  border-radius: var(--radius);
  background: var(--card2);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow2);
  padding:18px;
}
.card h3{ margin:0 0 10px; }

.card-accent{
  background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.44));
  position:relative;
  overflow:hidden;
}
.card-accent::after{
  content:"";
  position:absolute;
  inset:-40px -60px auto auto;
  width:180px;
  height:180px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,111,180,.35), transparent 60%);
  transform: rotate(14deg);
}

.stats{
  display:flex;
  gap:12px;
  margin-top:14px;
  flex-wrap:wrap;
}
.stat{
  background: rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding:12px 14px;
  min-width: 120px;
}
.stat-num{
  font-size: 22px;
  font-weight: 950;
  letter-spacing:.3px;
}
.stat-label{
  color: var(--muted);
  margin-top:6px;
  font-weight:700;
  font-size:13px;
}

.pill-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:8px;
}
.pill{
  padding:10px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06);
}

.cards-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.mini-card{
  border-radius: var(--radius);
  padding:16px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 22px rgba(0,0,0,.06);
  transition: transform .15s ease;
}
.mini-card:hover{
  transform: translateY(-3px);
}
.mini-icon{
  width:40px; height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.70);
  border-radius: 16px;
  border:1px solid rgba(0,0,0,.06);
  font-size:18px;
}
.mini-title{
  font-weight:950;
  margin-top:12px;
  margin-bottom:8px;
}
.mini-desc{
  color: var(--muted);
  font-weight:700;
  line-height:1.6;
  font-size:13.5px;
}

.project{
  border-radius: var(--radius);
  background: rgba(255,255,255,.56);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 22px rgba(0,0,0,.06);
  padding:16px;
  overflow:hidden;
  position:relative;
}
.project::before{
  content:"";
  position:absolute;
  inset:-40px auto auto -50px;
  width:140px; height:140px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(61,184,255,.28), transparent 60%);
}
.project-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  position:relative;
}
.project-tag{
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.06);
  font-weight:950;
  font-size:12px;
}
.project-status{
  font-weight:950;
  font-size:12px;
  color: var(--muted);
}
.project-status.done{
  color: #1f8f62;
}
.project h3{
  margin:12px 0 8px;
  position:relative;
}
.project p{
  position:relative;
}
.project-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
  position:relative;
}

.contact-wrap{
  display:grid;
  grid-template-columns: 1.4fr .9fr;
  gap:16px;
  align-items:start;
}

.puzzle-wrap{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:16px;
  align-items:stretch;
}

.puzzle-intro p{
  line-height:1.7;
}

.puzzle-game{
  background: rgba(255,255,255,.60);
}

.puzzle-ui{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.puzzle-ui .field{
  flex: 1 1 220px;
  margin-bottom:0;
}

.puzzle-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.puzzle-status{
  margin-top:14px;
  padding:12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  font-weight:800;
}

.puzzle-status.success-flash{
  animation: puzzleGlow .34s ease-out;
}

@keyframes puzzleGlow{
  0%{
    box-shadow: 0 0 0 0 rgba(76,201,240,.08);
    border-color: var(--stroke);
  }
  35%{
    box-shadow: 0 0 0 7px rgba(76,201,240,.22), 0 0 18px rgba(126,232,250,.35);
    border-color: rgba(126,232,250,.55);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(76,201,240,0);
    border-color: var(--stroke);
  }
}
.contact-form .field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px;
}
.field-label{
  font-weight:950;
  font-size:13.5px;
}
input, textarea{
  width:100%;
  border-radius: 16px;
  border:1px solid rgba(0,0,0,.08);
  padding:12px 12px;
  background: rgba(255,255,255,.75);
  outline:none;
  font:inherit;
}
input:focus, textarea:focus{
  border-color: rgba(255,111,180,.55);
  box-shadow: 0 0 0 4px rgba(255,111,180,.18);
}
.form-hint{
  margin:10px 0 0;
  color: var(--muted);
  font-weight:700;
  font-size:12.5px;
  line-height:1.5;
}

.contact-aside .aside-card{
  border-radius: var(--radius);
  padding:16px;
  background: rgba(255,255,255,.56);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow2);
}
.aside-title{
  font-weight: 950;
  margin-bottom: 12px;
}
.aside-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 0 30px;
  color: rgba(0,0,0,.70);
}
.footer-left{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  font-weight:850;
}
.dot{ opacity:.55; }
.to-top{
  text-decoration:none;
  font-weight:950;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.42);
  border:1px solid rgba(0,0,0,.06);
  color: var(--ink);
}

@media (max-width: 980px){
  .hero-card{ grid-template-columns: 1fr; }
  .character{ height: 300px; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .cards-row{ grid-template-columns: 1fr 1fr; }
  .puzzle-wrap{ grid-template-columns: 1fr; }
  .contact-wrap{ grid-template-columns: 1fr; }
  .section-head{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 520px){
  .cards-row{ grid-template-columns: 1fr; }
  .nav{ gap:6px; }
}

/* Cute page entrance animation */
.reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1);
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* Cold 2D theme override */
:root{
  --bg1:#0B1220;
  --bg2:#111B2E;
  --ink:#E6F1FF;
  --muted:#9FB3C8;
  --card:rgba(22,38,63,.78);
  --card2:rgba(22,38,63,.72);
  --stroke:rgba(126,232,250,.18);
  --shadow: 0 18px 45px rgba(0,0,0,.35);
  --shadow2: 0 10px 25px rgba(0,0,0,.28);
  --accent:#4CC9F0;
  --accent2:#8B5CF6;
  --accent3:#7EE8FA;
}

body{
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
}

.bg-dots{
  background-image: radial-gradient(rgba(126,232,250,.18) 1px, transparent 1.2px);
  opacity:.45;
}

.b1{
  background: radial-gradient(circle at 30% 30%, rgba(76,201,240,.42), rgba(139,92,246,.22));
}
.b2{
  background: radial-gradient(circle at 30% 30%, rgba(126,232,250,.36), rgba(76,201,240,.20));
}
.b3{
  background: radial-gradient(circle at 30% 30%, rgba(139,92,246,.35), rgba(76,201,240,.20));
}

.bg-hearts{
  opacity:.08;
  background:
    radial-gradient(circle at 12% 18%, #4CC9F0 0 10px, transparent 11px),
    radial-gradient(circle at 28% 62%, #8B5CF6 0 9px, transparent 10px),
    radial-gradient(circle at 66% 22%, #7EE8FA 0 9px, transparent 10px),
    radial-gradient(circle at 78% 58%, #4CC9F0 0 10px, transparent 11px),
    radial-gradient(circle at 44% 84%, #8B5CF6 0 8px, transparent 9px);
}

.site-header::after{
  background: linear-gradient(180deg, rgba(11,18,32,.88), rgba(11,18,32,0));
}

.brand:hover{
  background: rgba(17,27,46,.65);
}

.brand-badge{
  background: rgba(22,38,63,.88);
  border:1px solid var(--stroke);
  color: var(--accent);
}

.nav a{
  color:var(--ink);
  background: rgba(17,27,46,.72);
  border:1px solid var(--stroke);
}
.nav a:hover{
  background: rgba(22,38,63,.96);
}

.hero-card::before{
  background:
    radial-gradient(circle at 20% 0%, rgba(76,201,240,.20), transparent 60%),
    radial-gradient(circle at 90% 20%, rgba(139,92,246,.20), transparent 55%);
}

.character-bubble{
  background: rgba(17,27,46,.88);
  border:1px solid var(--stroke);
}

.hero-text p{
  color: rgba(230,241,255,.85);
}

.btn{
  border:1px solid var(--stroke);
  background: rgba(17,27,46,.86);
  color: var(--ink);
  box-shadow: 0 10px 18px rgba(0,0,0,.28);
}
.btn:hover{
  background: rgba(22,38,63,.95);
  box-shadow: 0 16px 26px rgba(0,0,0,.34);
}
.btn.primary{
  background: linear-gradient(180deg, rgba(76,201,240,.95), rgba(139,92,246,.92));
  color:#fff;
  border-color: rgba(126,232,250,.35);
}
.btn.ghost{
  background: rgba(17,27,46,.65);
}

.chip{
  border:1px solid var(--stroke);
  background: rgba(17,27,46,.65);
  color: var(--ink);
}

.card-accent{
  background: linear-gradient(180deg, rgba(22,38,63,.82), rgba(22,38,63,.65));
}
.card-accent::after{
  background: radial-gradient(circle at 30% 30%, rgba(139,92,246,.32), transparent 60%);
}

.stat, .mini-card, .project, .contact-aside .aside-card, .puzzle-status{
  background: rgba(17,27,46,.70);
  border:1px solid var(--stroke);
}

.mini-icon, .project-tag{
  background: rgba(22,38,63,.86);
  border:1px solid var(--stroke);
  color: var(--accent3);
}

.project::before{
  background: radial-gradient(circle at 30% 30%, rgba(76,201,240,.25), transparent 60%);
}

.project-status.done{
  color: #7EE8FA;
}

input, textarea{
  background: rgba(17,27,46,.88);
  border:1px solid var(--stroke);
  color: var(--ink);
}
input::placeholder, textarea::placeholder{
  color: rgba(159,179,200,.72);
}
input:focus, textarea:focus{
  border-color: rgba(76,201,240,.60);
  box-shadow: 0 0 0 4px rgba(76,201,240,.20);
}

.to-top{
  background: rgba(17,27,46,.76);
  border:1px solid var(--stroke);
  color: var(--ink);
}

.footer{
  color: rgba(230,241,255,.78);
}

/* Rusty narrative theme sync */
:root{
  --bg1:#0B0F17;
  --bg2:#121826;
  --ink:#E8EEF7;
  --muted:#8E97A8;
  --card:rgba(26,34,51,.82);
  --card2:rgba(26,34,51,.75);
  --stroke:rgba(104,215,240,.18);
  --shadow: 0 18px 45px rgba(0,0,0,.55);
  --shadow2: 0 10px 25px rgba(0,0,0,.45);
  --accent:#68D7F0;
  --accent2:#B89A63;
  --accent3:#A9CCE5;
}

body{
  letter-spacing:.1px;
}

.bg-blob{
  filter: blur(18px);
  opacity:.38;
}

.bg-fog{
  position:absolute;
  inset:-8%;
  pointer-events:none;
  opacity:.22;
  mix-blend-mode:screen;
}
.bg-fog.f1{
  background:
    radial-gradient(ellipse at 20% 25%, rgba(104,215,240,.22), transparent 55%),
    radial-gradient(ellipse at 72% 75%, rgba(184,154,99,.14), transparent 60%);
  animation: fogDrift 17s ease-in-out infinite;
}
.bg-fog.f2{
  background:
    radial-gradient(ellipse at 80% 18%, rgba(104,215,240,.13), transparent 52%),
    radial-gradient(ellipse at 30% 80%, rgba(169,204,229,.12), transparent 58%);
  animation: fogDrift 23s ease-in-out infinite reverse;
}

@keyframes fogDrift{
  0%,100%{ transform: translateX(0) translateY(0) scale(1); }
  50%{ transform: translateX(12px) translateY(-8px) scale(1.03); }
}

.site-header{
  border-bottom:1px solid rgba(104,215,240,.12);
}
.brand-subtitle{
  color: rgba(169,204,229,.86);
}
.brand-name{
  text-transform: uppercase;
  letter-spacing:.8px;
}

.nav a{
  border-radius:14px;
}

.hero-text h1,
.section-head h2{
  font-family: "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  text-shadow: 0 1px 0 rgba(255,255,255,.04);
}

.hero-card,
.card,
.project,
.mini-card,
.contact-aside .aside-card,
.puzzle-status,
.stat{
  backdrop-filter: blur(5px);
}

.project,
.card,
.mini-card{
  overflow:hidden;
}

.project::after,
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 36%);
}

.project-tag{
  color:#d9c294;
  border-color: rgba(184,154,99,.24);
  background: rgba(184,154,99,.08);
}

.project-status{
  color:#A9CCE5;
}

.btn{
  border-radius:12px;
}
.btn.primary{
  background: linear-gradient(180deg, rgba(104,215,240,.95), rgba(74,143,176,.92));
}

.chip{
  border-style: solid;
  border-radius:12px;
}

.bubble-dot{
  background: linear-gradient(180deg, #68D7F0, #B89A63);
  box-shadow: 0 0 0 6px rgba(104,215,240,.12);
}

.puzzle-game{
  background: rgba(19,30,47,.74);
}

.to-top{
  border-radius:12px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid rgba(104,215,240,.8);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .bg-fog{
    animation:none !important;
  }
}

/* Ink-wash elegant theme */
:root{
  --bg1:#111a24;
  --bg2:#1e2d3d;
  --ink:#dfe6ee;
  --muted:#9baabc;
  --card:rgba(24,35,48,.74);
  --card2:rgba(24,35,48,.64);
  --stroke:rgba(170,187,204,.20);
  --shadow: 0 14px 34px rgba(0,0,0,.28);
  --shadow2: 0 8px 20px rgba(0,0,0,.22);
  --accent:#bda47a;
  --accent2:#8ea9bc;
  --accent3:#bfd1c5;
}

body{
  background: linear-gradient(160deg, var(--bg1), var(--bg2));
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)),
    url("file:///C:/Users/heyut/.cursor/projects/e-heyut/assets/c__Users_heyut_AppData_Roaming_Cursor_User_workspaceStorage_b078209f067abc7e7ba00e2293df5d02_images_1777100448864-b57a01a7-dd49-40aa-9f47-d295ebe4a9be.png") center / cover no-repeat;
  filter: saturate(.92) brightness(1.03);
}

.bg-sky-wash{
  background:
    radial-gradient(ellipse at 65% -8%, rgba(214,226,234,.12), transparent 58%),
    linear-gradient(180deg, rgba(160,179,194,.06), transparent 40%);
}

.bg-mountain{
  background: linear-gradient(180deg, rgba(145,163,178,.34), rgba(74,92,110,.18));
  filter: blur(2px);
  opacity:.58;
}
.bg-mountain.m2{ opacity:.5; }
.bg-mountain.m3{ opacity:.45; }

.bg-lake{
  background:
    linear-gradient(180deg, rgba(108,134,154,.24), rgba(58,79,98,.34) 54%, rgba(36,52,67,.46)),
    repeating-linear-gradient(94deg, transparent 0 28px, rgba(184,205,219,.05) 28px 30px);
}

.bg-pavilion{
  background: linear-gradient(180deg, rgba(72,50,38,.68), rgba(55,40,34,.76));
  opacity:.56;
}

.bg-willow{
  opacity:.4;
}
.bg-willow::before,
.bg-willow::after{
  background: repeating-linear-gradient(172deg, rgba(128,156,136,.48) 0 2px, transparent 2px 13px);
}

.bg-fog{
  opacity:.3;
  mix-blend-mode:normal;
}
.bg-fog.f1{
  background:
    radial-gradient(ellipse at 22% 26%, rgba(190,206,216,.20), transparent 58%),
    radial-gradient(ellipse at 74% 76%, rgba(181,167,144,.11), transparent 62%);
}
.bg-fog.f2{
  background:
    radial-gradient(ellipse at 80% 18%, rgba(178,199,214,.12), transparent 54%),
    radial-gradient(ellipse at 32% 82%, rgba(173,194,206,.10), transparent 60%);
}

.hero-card::before{
  background:
    radial-gradient(circle at 20% 0%, rgba(189,164,122,.14), transparent 62%),
    radial-gradient(circle at 90% 20%, rgba(142,169,188,.14), transparent 58%);
}

.btn.primary{
  background: linear-gradient(180deg, rgba(181,158,118,.88), rgba(123,145,163,.86));
  border-color: rgba(190,202,214,.28);
}

.bubble-dot{
  box-shadow: 0 0 0 6px rgba(189,164,122,.10);
}

/* Bright lotus theme */
:root{
  --bg1:#f8fff8;
  --bg2:#eef9ef;
  --ink:#1f3b2c;
  --muted:#5f7d69;
  --card:rgba(255,255,255,.92);
  --card2:rgba(247,255,247,.86);
  --stroke:rgba(108,166,126,.22);
  --shadow: 0 14px 34px rgba(54,120,77,.14);
  --shadow2: 0 8px 20px rgba(54,120,77,.12);
  --accent:#4fa46b;
  --accent2:#79bf8f;
  --accent3:#b8e2c2;
}

body{
  background: linear-gradient(160deg, var(--bg1), var(--bg2));
}

.site-header::after{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));
}

.brand-badge,
.nav a,
.btn,
.chip{
  background: rgba(255,255,255,.88);
}

.bg-sky-wash{
  background:
    radial-gradient(ellipse at 68% -8%, rgba(202,235,211,.36), transparent 58%),
    linear-gradient(180deg, rgba(220,243,226,.45), transparent 40%);
}

.bg-mountain{
  background: linear-gradient(180deg, rgba(173,210,181,.5), rgba(124,174,139,.26));
  opacity:.48;
}

.bg-lake{
  background:
    linear-gradient(180deg, rgba(190,232,202,.5), rgba(147,205,167,.54) 52%, rgba(119,176,138,.45)),
    repeating-linear-gradient(94deg, transparent 0 28px, rgba(255,255,255,.16) 28px 30px);
}

.bg-lotus-leaf{
  position:absolute;
  bottom:16%;
  width:132px;
  height:92px;
  border-radius: 60% 40% 60% 40%;
  background: radial-gradient(circle at 35% 35%, rgba(207,242,214,.95), rgba(108,177,124,.92));
  box-shadow: inset -12px -8px 0 rgba(65,135,83,.20);
  opacity:.82;
}
.bg-lotus-leaf::after{
  content:"";
  position:absolute;
  left:50%;
  top:16%;
  width:2px;
  height:68%;
  background: rgba(69,130,84,.35);
  transform: rotate(26deg);
}
.bg-lotus-leaf.leaf1{ left:9%; transform: rotate(-8deg); }
.bg-lotus-leaf.leaf2{ right:18%; bottom:13%; transform: rotate(12deg) scale(.9); }

.bg-lotus{
  position:absolute;
  bottom:18%;
  width:54px;
  height:54px;
  border-radius:50%;
  opacity:.82;
  background:
    radial-gradient(circle at 50% 52%, #ffeef5 0 11px, transparent 11px),
    conic-gradient(
      from 0deg,
      #ffd5e5 0deg 28deg,
      #ffedf4 28deg 56deg,
      #ffd5e5 56deg 84deg,
      #ffedf4 84deg 112deg,
      #ffd5e5 112deg 140deg,
      #ffedf4 140deg 168deg,
      #ffd5e5 168deg 196deg,
      #ffedf4 196deg 224deg,
      #ffd5e5 224deg 252deg,
      #ffedf4 252deg 280deg,
      #ffd5e5 280deg 308deg,
      #ffedf4 308deg 336deg,
      #ffd5e5 336deg 360deg
    );
  box-shadow: 0 6px 14px rgba(120,160,128,.18);
}
.bg-lotus.flower1{ left:18%; }
.bg-lotus.flower2{ right:12%; bottom:20%; transform: scale(.8); }

.bg-willow{
  opacity:.36;
}

.bg-pavilion{
  background: linear-gradient(180deg, rgba(124,85,64,.52), rgba(98,72,60,.58));
  opacity:.4;
}

.bg-fog{
  opacity:.18;
}

.hero-card::before{
  background:
    radial-gradient(circle at 20% 0%, rgba(121,191,143,.15), transparent 62%),
    radial-gradient(circle at 90% 20%, rgba(184,226,194,.2), transparent 58%);
}

.character-bubble{
  background: rgba(255,255,255,.92);
  color: var(--ink);
}

.btn.primary{
  background: linear-gradient(180deg, rgba(79,164,107,.94), rgba(121,191,143,.92));
  border-color: rgba(140,208,160,.52);
  color:#fff;
}

.project-tag{
  color:#3f8a57;
  border-color: rgba(79,164,107,.26);
  background: rgba(121,191,143,.14);
}

/* Lotus watercolor reference tuning */
.page-bg::before{
  content:"";
  position:absolute;
  inset:-4%;
  background:
    radial-gradient(circle at 18% 12%, rgba(245,230,173,.30), transparent 24%),
    radial-gradient(circle at 68% 10%, rgba(246,223,154,.24), transparent 22%),
    radial-gradient(circle at 36% 78%, rgba(190,233,205,.28), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 36%);
  opacity:.72;
}

.page-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 12% 52%, rgba(255,255,255,.62), transparent 38%),
    radial-gradient(ellipse at 84% 58%, rgba(255,255,255,.54), transparent 36%),
    linear-gradient(180deg, transparent 0 58%, rgba(255,255,255,.34) 76%, transparent 100%);
  opacity:.6;
}

.bg-sky-wash{
  background:
    radial-gradient(ellipse at 65% -10%, rgba(208,236,218,.42), transparent 58%),
    radial-gradient(ellipse at 22% 2%, rgba(243,226,171,.32), transparent 34%),
    linear-gradient(180deg, rgba(224,244,229,.52), transparent 42%);
}

.bg-mountain{
  bottom:30%;
  background: linear-gradient(180deg, rgba(165,206,176,.40), rgba(112,171,137,.22));
  filter: blur(3px);
  opacity:.36;
}
.bg-mountain.m1{ width:52vw; height:34vh; }
.bg-mountain.m2{ width:46vw; height:30vh; left:26vw; opacity:.3; }
.bg-mountain.m3{ width:50vw; height:28vh; opacity:.28; }

.bg-lake{
  height:38%;
  background:
    linear-gradient(180deg, rgba(202,236,214,.52), rgba(157,214,180,.48) 48%, rgba(132,189,154,.38)),
    repeating-linear-gradient(92deg, transparent 0 30px, rgba(255,255,255,.22) 30px 31px);
}

.bg-lotus-leaf{
  border-radius: 58% 42% 56% 44%;
  background: radial-gradient(circle at 36% 34%, rgba(215,245,221,.95), rgba(95,169,118,.92));
  opacity:.72;
}
.bg-lotus-leaf.leaf1{
  left:10%;
  bottom:14%;
  transform: rotate(-12deg) scale(1.06);
}
.bg-lotus-leaf.leaf2{
  right:13%;
  bottom:11%;
  transform: rotate(8deg) scale(1.08);
}

.bg-lotus{
  opacity:.9;
  filter: saturate(.88);
}
.bg-lotus.flower1{
  left:24%;
  bottom:18%;
  transform: scale(.9);
}
.bg-lotus.flower2{
  right:10%;
  bottom:18%;
  transform: scale(1.12);
}

.bg-willow{
  bottom:34%;
  opacity:.28;
}

.bg-pavilion{
  right:18%;
  bottom:30%;
  opacity:.32;
  filter: blur(.2px) drop-shadow(0 6px 10px rgba(110,95,70,.16));
}

.bg-fog{
  opacity:.24;
}
.bg-fog.f1{
  background:
    radial-gradient(ellipse at 20% 24%, rgba(255,255,255,.34), transparent 58%),
    radial-gradient(ellipse at 76% 72%, rgba(232,241,235,.22), transparent 62%);
}
.bg-fog.f2{
  background:
    radial-gradient(ellipse at 78% 16%, rgba(241,247,243,.22), transparent 54%),
    radial-gradient(ellipse at 30% 84%, rgba(255,255,255,.2), transparent 60%);
}