@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Inter:wght@300;400;500;600;700&family=Inter+Tight:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root,
html[data-theme="dark"]{
  --bg:#0a0b09;
  --bg-warm:#13130d;
  --bg-elevated:#16170f;
  --paper:#f4ede0;
  --paper-1:rgba(244,237,224,1);
  --paper-2:rgba(244,237,224,0.62);
  --paper-3:rgba(244,237,224,0.38);
  --paper-4:rgba(244,237,224,0.16);
  --line:rgba(244,237,224,0.06);
  --line-2:rgba(244,237,224,0.12);
  --line-3:rgba(244,237,224,0.18);
  --lime:#d4ff3a;
  --lime-deep:#a8d420;
  --lime-soft:rgba(212,255,58,0.14);
  --lime-glow:rgba(212,255,58,0.08);
  --highlight:rgba(212,255,58,0.88);
  --pencil:#0a0b09;
  --bubble:#16170f;
  --bubble-text:rgba(244,237,224,0.72);
  color-scheme:dark;
}

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

html{
  max-width:100%;
  overflow-x:hidden;
  scroll-behavior:smooth;
  background:var(--bg);
  overscroll-behavior-y:none;
  scrollbar-width:thin;
  scrollbar-color:var(--paper-4) transparent;
}

html::-webkit-scrollbar{width:10px;height:10px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{
  border:3px solid transparent;
  border-radius:999px;
  background:linear-gradient(180deg,var(--paper-4),color-mix(in srgb,var(--lime) 42%,transparent));
  background-clip:content-box;
}

body{
  background:var(--bg) !important;
  color:var(--paper) !important;
  font-family:'Inter Tight','Inter',sans-serif !important;
  font-size:16px;
  line-height:1.55;
  letter-spacing:-0.015em;
  overflow-x:clip;
  position:relative;
  min-height:100svh;
  transition:background-color .25s ease,color .25s ease;
  font-feature-settings:"ss01","cv11","cv02";
}

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

body::before{
  content:'' !important;
  position:fixed !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:0 !important;
  transform:translate3d(0,0,0) !important;
  backface-visibility:hidden !important;
  will-change:transform !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 20%,rgba(244,237,224,0.022) 0,transparent 60%),
    radial-gradient(ellipse 70% 40% at 80% 80%,rgba(212,255,58,0.05) 0,transparent 60%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  opacity:.55 !important;
}

body::after{
  content:none !important;
}

html[data-theme="dark"] body::before,
html[data-theme="soft"] body::before,
html[data-theme="light"] body::before{opacity:.55 !important}

.bg-deco-layer{
  position:fixed !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:1 !important;
  overflow:hidden !important;
  will-change:transform !important;
  transform:translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 6px), 0) !important;
  transition:transform .6s cubic-bezier(.16,1,.3,1) !important;
}

.bg-grid{
  position:absolute !important;
  inset:0 !important;
  background-image:radial-gradient(circle, rgba(244,237,224,.06) 1px, transparent 1.5px) !important;
  background-size:42px 42px !important;
  background-position:0 0 !important;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, black 0%, rgba(0,0,0,.6) 40%, transparent 80%) !important;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, black 0%, rgba(0,0,0,.6) 40%, transparent 80%) !important;
  opacity:.35 !important;
}

.bg-deco-layer .deco{
  position:absolute !important;
  color:var(--paper) !important;
  overflow:visible !important;
}

.bg-deco-layer .deco-witness{
  top:8% !important;
  left:-2% !important;
  width:180px !important;
  height:180px !important;
  opacity:.5 !important;
  transform:rotate(-10deg) !important;
  animation:bgDrift1 22s cubic-bezier(.45,0,.55,1) infinite !important;
}

.bg-deco-layer .deco-stickfig{
  bottom:10% !important;
  right:-1% !important;
  width:180px !important;
  height:180px !important;
  opacity:.5 !important;
  transform:rotate(8deg) !important;
  animation:bgDrift2 26s cubic-bezier(.45,0,.55,1) infinite 3s !important;
}

@keyframes bgDrift1{
  0%,100%{transform:rotate(-10deg) translateY(0) translateX(0)}
  50%{transform:rotate(-10deg) translateY(-14px) translateX(6px)}
}

@keyframes bgDrift2{
  0%,100%{transform:rotate(8deg) translateY(0) translateX(0)}
  50%{transform:rotate(8deg) translateY(12px) translateX(-8px)}
}

html[data-theme="light"] .sketch-block .sb-frame path[fill^="rgba(22,20,15"],
html[data-theme="light"] .sketch-block .sb-frame path[fill*="22,20,15"]{
  fill:rgba(255,253,245,0.72) !important;
}

html[data-theme="light"] .sketch-block .sb-frame path[stroke*="232,228,217"],
html[data-theme="light"] .sketch-block .sb-frame path[stroke*="e8e4d9"]{
  stroke:rgba(26,25,18,0.32) !important;
}

html[data-theme="light"] .sketch-block{
  filter:drop-shadow(0 18px 34px rgba(55,45,24,0.13));
}

html[data-theme="light"] .tape{
  background:linear-gradient(180deg,rgba(180,170,140,0.38),rgba(180,170,140,0.26)) !important;
  border-left-color:rgba(140,130,100,0.28) !important;
  border-right-color:rgba(140,130,100,0.28) !important;
}

html[data-theme="light"] .form-input,
html[data-theme="light"] input,
html[data-theme="light"] textarea{
  background:rgba(255,253,245,0.78) !important;
  color:var(--paper) !important;
}

body,
button,
input,
textarea,
select{
  font-family:'Inter Tight','Inter',sans-serif !important;
}

.logo,
.hand-script,
.breadcrumb,
.footer-tag,
.finale-stamp,
.step-marker,
.section-tag,
.sketch-text,
.sketch-text-lime,
.sketch-text-paper{
  font-family:'Caveat',cursive !important;
}

.logo{
  display:flex !important;
  align-items:center !important;
  font-size:26px !important;
  font-weight:600 !important;
  letter-spacing:-0.01em !important;
  color:var(--paper) !important;
  text-decoration:none !important;
  gap:11px !important;
  position:relative !important;
  transition:transform .4s cubic-bezier(0.16,1,0.3,1) !important;
}

.logo:hover{
  transform:translateY(-1px) !important;
}

.logo-text{
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}

.logo-status{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  margin-left:6px !important;
  padding:3px 9px 3px 7px !important;
  background:rgba(212,255,58,0.08) !important;
  border:1px solid rgba(212,255,58,0.22) !important;
  border-radius:100px !important;
  font-family:'Inter Tight','Inter',sans-serif !important;
  font-size:10.5px !important;
  font-weight:500 !important;
  color:rgba(212,255,58,0.85) !important;
  letter-spacing:0.04em !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  transition:opacity .3s ease !important;
}

@keyframes statusPulse{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:1;transform:scale(1.3)}
}

.status-dot{
  width:6px !important;
  height:6px !important;
  flex:0 0 6px !important;
  border-radius:50% !important;
  background:#d4ff3a !important;
  box-shadow:0 0 6px rgba(212,255,58,0.7) !important;
  animation:statusPulse 1.8s ease-in-out infinite !important;
}

.logo-mark{
  width:30px !important;
  height:30px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  filter:drop-shadow(0 10px 18px color-mix(in srgb,var(--lime) 16%,transparent)) !important;
}

.logo-mark svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}

@keyframes logoShield{0%,100%{stroke-dashoffset:0;opacity:.5}50%{stroke-dashoffset:30;opacity:.9}}
@keyframes logoMPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.72;transform:scale(.92)}}

.logo-mark .logo-shield{
  stroke-dasharray:6 4;
  animation:logoShield 3s ease-in-out infinite;
}

.logo-mark .logo-m{
  transform-box:fill-box;
  transform-origin:center;
  animation:logoMPulse 2.5s ease-in-out infinite;
}

html[data-theme="light"] .logo-mark circle[fill*="bg-warm"]{
  fill:rgba(255,253,245,.64) !important;
}

.logo-peak-dark{fill:var(--paper)}
.logo-peak-lime{fill:var(--lime)}

header.site{
  position:fixed !important;
  top:18px !important;
  left:50% !important;
  right:auto !important;
  z-index:80 !important;
  width:calc(100% - 36px) !important;
  max-width:980px !important;
  padding:0 !important;
  pointer-events:auto;
  background:transparent !important;
  border:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:translateX(-50%) !important;
  transition:transform .55s cubic-bezier(0.16,1,0.3,1),opacity .4s ease,top .55s cubic-bezier(0.16,1,0.3,1) !important;
}

header.site.hidden,
header.site.is-hidden{
  transform:translate(-50%,-200%) !important;
  opacity:0 !important;
  pointer-events:none !important;
}

header.site .header-inner{
  max-width:980px !important;
  margin:0 auto !important;
  padding:10px 14px 10px 22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  border:1px solid rgba(244,237,224,0.07) !important;
  border-radius:100px !important;
  background:rgba(13,14,11,0.58) !important;
  box-shadow:inset 0 1px 0 rgba(244,237,224,0.04),0 0 0 1px rgba(0,0,0,0.35),0 20px 50px -10px rgba(0,0,0,0.45) !important;
  backdrop-filter:blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(180%) !important;
  pointer-events:auto;
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease !important;
}

header.site.scrolled .header-inner,
header.site.is-scrolled .header-inner{
  background:rgba(10,11,9,0.78) !important;
  border-color:rgba(244,237,224,0.1) !important;
  box-shadow:inset 0 1px 0 rgba(244,237,224,0.06),0 0 0 1px rgba(0,0,0,0.4),0 24px 60px -12px rgba(0,0,0,0.6) !important;
}

.nav-links{
  display:flex !important;
  gap:6px !important;
  align-items:center !important;
  padding:2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}

.nav-links a{
  color:var(--paper-2) !important;
  text-decoration:none !important;
  font-size:13.5px !important;
  font-weight:450 !important;
  letter-spacing:-0.006em !important;
  padding:8px 14px !important;
  border-radius:100px !important;
  border:0 !important;
  position:relative !important;
  transition:color .35s cubic-bezier(0.16,1,0.3,1) !important;
  isolation:isolate !important;
}

.nav-links a span{
  position:relative !important;
  z-index:2 !important;
}

.nav-links a::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:rgba(244,237,224,0.06) !important;
  border-radius:100px !important;
  opacity:0 !important;
  transform:scale(.9) !important;
  transition:opacity .35s cubic-bezier(0.16,1,0.3,1),transform .35s cubic-bezier(0.16,1,0.3,1) !important;
  z-index:-1 !important;
}

.nav-links a:hover,
.nav-links a.active{
  color:var(--paper) !important;
  background:transparent !important;
}

.nav-links a:hover::before,
.nav-links a.active::before{
  opacity:1 !important;
  transform:scale(1) !important;
}

.nav-links a.active{
  color:var(--lime) !important;
}

.nav-links a.active::before{
  background:rgba(212,255,58,0.1) !important;
  box-shadow:inset 0 0 0 1px rgba(212,255,58,0.25) !important;
}

.header-right{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

.header-cta{
  padding:9px 18px !important;
  font-size:13px !important;
  border-radius:100px !important;
  position:relative !important;
  overflow:hidden !important;
  background:var(--paper) !important;
  color:var(--pencil) !important;
  box-shadow:0 10px 30px rgba(244,237,224,0.12) !important;
}

.header-cta::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(110deg,transparent 30%,rgba(212,255,58,0.4) 50%,transparent 70%) !important;
  transform:translateX(-100%) !important;
  transition:transform .8s cubic-bezier(0.16,1,0.3,1) !important;
  pointer-events:none !important;
}

.header-cta:hover::before{
  transform:translateX(100%) !important;
}

.header-cta span{
  position:relative !important;
  z-index:1 !important;
}

.theme-switch{
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--paper) 4%,transparent);
  color:var(--paper);
  display:none !important;
  place-items:center;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}

html[data-theme="light"] .theme-switch{
  background:rgba(22,23,19,0.035) !important;
}

html[data-theme="dark"] .theme-switch,
html[data-theme="soft"] .theme-switch{
  background:rgba(248,246,238,0.05) !important;
}

.theme-switch:hover{
  transform:translateY(-1px);
  border-color:var(--line-3);
}

.theme-switch svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.btn{
  font-family:'Inter Tight','Inter',sans-serif !important;
  border-radius:100px !important;
  font-weight:500 !important;
  padding:12px 22px !important;
  font-size:14px !important;
}

.btn:hover{
  color:var(--pencil) !important;
}

.highlight{
  color:var(--pencil) !important;
}

.page-head{
  padding-top:148px !important;
}

@media (min-width:881px){
  body{
    font-size:15px !important;
  }

  .container{
    max-width:935px !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .container-narrow{
    max-width:663px !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }

  header.site{
    top:15px !important;
    width:calc(100% - 30px) !important;
    max-width:833px !important;
  }

  header.site .header-inner{
    max-width:833px !important;
    padding:8px 12px 8px 19px !important;
    gap:15px !important;
  }

  .logo{
    font-size:22px !important;
    gap:9px !important;
  }

  .logo-mark{
    width:26px !important;
    height:26px !important;
  }

  .logo-status{
    margin-left:5px !important;
    padding:3px 8px 3px 6px !important;
    font-size:9px !important;
  }

  .nav-links a{
    font-size:12px !important;
    padding:7px 12px !important;
  }

  .header-cta{
    padding:8px 15px !important;
    font-size:12px !important;
  }

  .btn{
    padding:10px 19px !important;
    font-size:12px !important;
  }

  .btn-lg{
    padding:14px 27px !important;
    font-size:13px !important;
  }

  .page-head{
    padding-top:126px !important;
    padding-bottom:51px !important;
  }

  h1{
    font-size:clamp(37px,5.95vw,71px) !important;
  }

  h2{
    font-size:clamp(27px,3.8vw,48px) !important;
  }

  .page-desc{
    font-size:clamp(15px,1.65vw,18px) !important;
  }
}

svg path[fill="#16140f"],
svg rect[fill="#16140f"],
svg circle[fill="#16140f"],
svg ellipse[fill="#16140f"],
svg polygon[fill="#16140f"],
svg path[fill="#0e0f0d"],
svg rect[fill="#0e0f0d"],
svg circle[fill="#0e0f0d"],
svg ellipse[fill="#0e0f0d"],
svg polygon[fill="#0e0f0d"]{
  fill:var(--bubble) !important;
}

svg [fill="#d4ff3a"],
svg [fill="#a3d62e"]{
  fill:var(--lime) !important;
}

svg text[fill*="232,228,217"],
svg text[fill="#e8e4d9"]{
  fill:var(--bubble-text) !important;
}

svg [stroke="#d4ff3a"],
svg [stroke="#a3d62e"]{
  stroke:var(--lime) !important;
}

.sketch-text{fill:var(--paper-2) !important}
.sketch-text-lime{fill:var(--lime) !important}
.sketch-text-paper{fill:var(--paper) !important}

footer{
  color:var(--paper) !important;
}

@media (max-width:760px){
  body::before{
    position:absolute !important;
    inset:0 !important;
    min-height:100% !important;
    transform:none !important;
    will-change:auto !important;
  }
  .bg-deco-layer{
    position:absolute !important;
    min-height:100% !important;
    transform:none !important;
    will-change:auto !important;
  }
  .bg-deco-layer .deco-witness{
    width:130px !important;
    height:130px !important;
    opacity:.35 !important;
    top:5% !important;
    left:-4% !important;
  }
  .bg-deco-layer .deco-stickfig{
    width:130px !important;
    height:130px !important;
    opacity:.35 !important;
    bottom:auto !important;
    top:78% !important;
    right:-3% !important;
  }
  .bg-grid{
    background-size:32px 32px !important;
    opacity:.2 !important;
  }
  header.site{top:12px !important;width:calc(100% - 24px) !important}
  header.site .header-inner{
    max-width:980px !important;
    padding:8px 8px 8px 16px !important;
    gap:8px !important;
  }
  .nav-links{display:none !important}
  .logo{font-size:22px !important;gap:8px !important}
  .logo-mark{width:26px !important;height:26px !important}
  .logo-status{display:none !important}
  .header-right .btn{padding:10px 16px !important;font-size:13px !important}
  .theme-switch{display:none !important}
  .page-head{padding-top:108px !important}
}