:root{
  --bg:#f7f8f9;--surface:#ffffff;--ink:#1c2024;--ink-2:#5b636b;--ink-3:#9aa3ab;
  --line:#e4e7ea;--line-2:#d3d8dc;--accent:#0e8a6a;--accent-ink:#0b6b53;
  --accent-soft:#e3f2ec;--accent-border:#bcdfd2;--on-accent:#ffffff;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --hole:#cbd2d8;--hole-c:#aeb8c0;
  --bgpin:#39414a;--bgpin-glow:none;
  --bgline:rgba(28,32,36,.10);--bgcenter:rgba(14,138,106,.35);
  --hero-glow:transparent;
  --cta-glow:0 14px 30px -14px rgba(14,138,106,.45);
  --cta-glow-hover:0 20px 36px -14px rgba(14,138,106,.5);
  --panel-shadow:0 24px 48px -32px rgba(28,32,36,.14);
}
[data-theme="dark"]{
  --bg:#101214;--surface:#17191d;--ink:#e7eaec;--ink-2:#9ba3ab;--ink-3:#5f6770;
  --line:#24272c;--line-2:#32373d;--accent:#34a883;--accent-ink:#62c7a4;
  --accent-soft:#16241f;--accent-border:#2a4a3d;--on-accent:#0a1712;
  --hole:#2a2f37;--hole-c:#39414a;
  --bgpin:#3db48d;
  --bgpin-glow:0 0 10px rgba(61,180,141,.6),0 0 26px rgba(61,180,141,.28);
  --bgline:rgba(231,234,236,.07);--bgcenter:rgba(61,180,141,.4);
  --hero-glow:radial-gradient(ellipse 70% 55% at 18% 22%,rgba(52,168,131,.12),transparent 68%);
  --cta-glow:0 0 26px -2px rgba(52,168,131,.3),0 14px 30px -14px rgba(0,0,0,.65);
  --cta-glow-hover:0 0 34px 0 rgba(52,168,131,.42),0 18px 34px -14px rgba(0,0,0,.7);
  --panel-shadow:0 24px 48px -32px rgba(0,0,0,.55);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root),
  ::view-transition-new(root){animation-duration:.22s;animation-timing-function:var(--ease);}
}
body{
  position:relative;min-height:100dvh;
  background:var(--bg);color:var(--ink);
  font-family:'Outfit',system-ui,sans-serif;line-height:1.58;font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-ink);text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;
}
::selection{background:var(--accent-soft);}

.pagebg{
  position:absolute;top:0;left:0;right:0;height:var(--pagebg-h,100%);
  min-height:100dvh;pointer-events:none;z-index:0;overflow:hidden;
  opacity:.96;
}
.pagebg::before{
  content:"";position:absolute;inset:0;
  background:var(--hero-glow);
  animation:bg-glow 7s var(--ease) infinite alternate;
}
.pagebg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--bg) 0 34%,color-mix(in srgb,var(--bg) 72%,transparent) 50%,transparent 76%),
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 88%,transparent),transparent 24%,transparent 70%,var(--bg));
}
.pagebg .herobg-inner{
  position:absolute;inset:-18% -18% -14% 34%;overflow:hidden;
  transform:translate3d(0,0,0) rotate(-2deg);
  animation:mechanism-drift 6.8s var(--ease) infinite alternate;
  -webkit-mask-image:radial-gradient(ellipse 74% 68% at 54% 36%,rgba(0,0,0,.15) 0 12%,rgba(0,0,0,.78) 36%,#000 66%,transparent 100%);
  mask-image:radial-gradient(ellipse 74% 68% at 54% 36%,rgba(0,0,0,.15) 0 12%,rgba(0,0,0,.78) 36%,#000 66%,transparent 100%);
}
.pagebg .herobg-inner::before{
  content:"";position:absolute;inset:-20% -10%;
  background:
    repeating-linear-gradient(90deg,transparent 0 82px,color-mix(in srgb,var(--bgline) 76%,transparent) 83px 84px,transparent 85px 166px),
    repeating-linear-gradient(180deg,transparent 0 64px,color-mix(in srgb,var(--bgline) 88%,transparent) 65px 66px,transparent 67px 128px);
  opacity:.62;transform:translate3d(-44px,-22px,0);
  animation:rail-sheet 12s linear infinite;
  will-change:transform;
}
.pagebg .centerline{
  position:absolute;top:2%;bottom:2%;left:52vw;width:1px;
  background:linear-gradient(180deg,transparent,var(--bgcenter) 14%,var(--bgcenter) 86%,transparent);
  box-shadow:0 0 20px color-mix(in srgb,var(--accent) 28%,transparent);
  animation:center-scan 4.2s var(--ease) infinite alternate;
  will-change:transform,opacity;
}
.pagebg .centerline::before,
.pagebg .centerline::after{
  content:"";position:absolute;left:50%;width:12px;height:12px;border-radius:50%;
  background:var(--accent);box-shadow:var(--bgpin-glow);
  transform:translate3d(-50%,-50%,0);
  opacity:.74;
}
.pagebg .centerline::before{top:27%;animation:center-node-a 3.4s var(--ease) infinite alternate;}
.pagebg .centerline::after{top:68%;animation:center-node-b 4.1s var(--ease) infinite alternate;}
.pagebg .bgtrack{
  position:absolute;left:-10vw;right:-10vw;height:1px;background:var(--bgline);
  transform:translate3d(0,0,0);
  animation:track-drift var(--tdur,5s) var(--ease) infinite alternate;
  animation-delay:var(--tdel,0s);
  will-change:transform,opacity;
}
.pagebg .bgtrack::before{
  content:"";position:absolute;top:-1px;left:0;width:34vw;height:3px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 36%,transparent),transparent);
  transform:translate3d(-38vw,0,0);
  animation:track-sweep var(--sdur,4s) var(--ease) infinite;
  animation-delay:var(--sdel,0s);
  will-change:transform,opacity;
}
.pagebg .bgpin{
  position:absolute;top:50%;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--bgpin);box-shadow:var(--bgpin-glow);
  animation:pin-travel var(--dur) var(--ease) infinite;
  animation-delay:var(--del);will-change:transform;
}
@keyframes pin-travel{
  0%{transform:translate3d(var(--x0),-50%,0);opacity:0;}
  9%{opacity:var(--op);}
  36%{transform:translate3d(calc(var(--hit) - 22px),-50%,0);opacity:var(--op);}
  48%,62%{transform:translate3d(calc(var(--hit) - 50%),-50%,0) scale(1.28);opacity:1;}
  78%{transform:translate3d(calc(var(--hit) + 18px),-50%,0);opacity:var(--op);}
  100%{transform:translate3d(var(--x1),-50%,0);opacity:0;}
}
@keyframes mechanism-drift{
  from{transform:translate3d(-42px,-18px,0) rotate(-3.5deg) scale(1);}
  to{transform:translate3d(38px,20px,0) rotate(2.2deg) scale(1.035);}
}
@keyframes rail-sheet{
  from{transform:translate3d(-44px,-22px,0);}
  to{transform:translate3d(44px,22px,0);}
}
@keyframes track-drift{
  from{transform:translate3d(-26px,0,0);opacity:.58;}
  to{transform:translate3d(26px,0,0);opacity:1;}
}
@keyframes track-sweep{
  0%{transform:translate3d(-38vw,0,0);opacity:0;}
  12%,72%{opacity:1;}
  100%{transform:translate3d(120vw,0,0);opacity:0;}
}
@keyframes center-scan{
  from{transform:translate3d(-14px,0,0) scaleY(.92);opacity:.54;}
  to{transform:translate3d(18px,0,0) scaleY(1.08);opacity:.9;}
}
@keyframes center-node-a{
  from{transform:translate3d(-50%,-160%,0) scale(.72);opacity:.38;}
  to{transform:translate3d(-50%,110%,0) scale(1.08);opacity:.9;}
}
@keyframes center-node-b{
  from{transform:translate3d(-50%,130%,0) scale(.66);opacity:.32;}
  to{transform:translate3d(-50%,-130%,0) scale(1);opacity:.82;}
}
@keyframes bg-glow{
  from{opacity:.72;transform:translate3d(-18px,-10px,0);}
  to{opacity:1;transform:translate3d(18px,12px,0);}
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.55}}
@keyframes fadein{to{opacity:1;}}
@keyframes pinpulse{0%,100%{box-shadow:0 0 8px rgba(52,168,131,.45)}50%{box-shadow:0 0 14px rgba(52,168,131,.75)}}

.page{position:relative;z-index:1;}
.wrap{max-width:940px;margin:0 auto;padding:0 24px 72px;}
.top{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 0;position:relative;
}
.wordmark{
  font-weight:700;letter-spacing:-.02em;font-size:18px;
  display:inline-flex;align-items:center;gap:10px;color:var(--ink);
}
.wordmark .dot{
  width:10px;height:10px;border-radius:50%;background:var(--accent);
  box-shadow:var(--bgpin-glow);
  animation:breathe 2.6s var(--ease) infinite;
}
.nav{display:flex;align-items:center;gap:14px;}
.nav a{color:var(--ink-2);font-size:14.5px;transition:color .25s var(--ease);}
.nav a:hover{color:var(--ink);text-decoration:none;}
.themebtn{
  width:38px;height:38px;border-radius:11px;cursor:pointer;flex-shrink:0;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--ease),border-color .25s,color .25s;
}
.themebtn:hover{border-color:var(--ink-3);color:var(--ink);transform:translateY(-1px);}
.themebtn:active{transform:scale(.93);}
.themebtn svg{width:17px;height:17px;}
.themebtn .ic-sun{display:none;}
.themebtn .ic-moon{display:block;}
[data-theme="dark"] .themebtn .ic-sun{display:block;}
[data-theme="dark"] .themebtn .ic-moon{display:none;}

.crumb{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin:6px 0 28px;}
.crumb a{color:var(--ink-3);}.crumb span{margin:0 6px;}

.rise{opacity:0;animation:fadein .38s var(--ease) forwards;animation-delay:calc(var(--d,0)*34ms);}

h1{
  max-width:880px;
  font-size:clamp(30px,5vw,48px);font-weight:600;letter-spacing:-.035em;
  line-height:1.06;margin-bottom:16px;
}
.lead{color:var(--ink-2);font-size:18px;margin-bottom:26px;max-width:760px;}
h2{
  max-width:760px;
  font-size:20px;font-weight:600;letter-spacing:-.015em;
  margin:34px 0 10px;padding-top:22px;border-top:1px solid var(--line);
}
p{margin-bottom:10px;max-width:760px;}

.cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:var(--on-accent);font-weight:600;font-size:16px;
  padding:14px 24px;border-radius:12px;
  box-shadow:var(--cta-glow);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.cta:hover{
  transform:translateY(-2px);text-decoration:none;
  box-shadow:var(--cta-glow-hover);
}
.cta:active{transform:translateY(0) scale(.98);}

.params{
  display:flex;flex-wrap:wrap;gap:8px 13px;margin:8px 0 14px;max-width:760px;
  font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.03em;
}
.params span{
  display:inline-flex;align-items:center;color:var(--ink-3);
}
.params span + span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--ink-3);opacity:.8;margin-right:13px;}

.lc-pins{
  width:min(100%,360px);
  display:flex;flex-direction:column;gap:5px;margin:14px 0 6px;
  padding:0;overflow-x:auto;overscroll-behavior-x:contain;
}
.lc-row{
  display:flex;align-items:center;gap:4px;min-width:max-content;
}
.lc-row .n{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);width:11px;}
.lc-hole{width:13px;height:13px;border-radius:4.5px;background:var(--bg);border:1px solid var(--line);transition:background .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease);}
.lc-hole.c{border-style:dashed;background:var(--bg);}
.lc-hole.p{background:var(--ink);border-color:var(--ink);}
.lc-hole.pg{
  background:var(--accent);border-color:var(--accent);
  animation:pinpulse 2.6s var(--ease) infinite;
}
.lc-row:hover .lc-hole{transform:scale(1.06);}
.pinnote{font-size:13px;color:var(--ink-3);max-width:560px;}
.credit{font-size:14px;color:var(--ink-2);margin-top:4px;}

.faq{display:flex;flex-direction:column;gap:8px;margin-top:8px;max-width:760px;}
.faq details{
  background:var(--surface);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.faq details[open]{border-color:var(--accent-border);background:color-mix(in srgb,var(--accent-soft) 35%,var(--surface));}
.faq summary{
  cursor:pointer;font-weight:600;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 15px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";font-family:var(--mono);font-size:18px;line-height:1;
  color:var(--accent-ink);transition:transform .25s var(--ease);
  flex-shrink:0;
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq p{color:var(--ink-2);margin:0;padding:0 15px 14px;}
.faq code{
  font-family:var(--mono);font-size:.88em;
  background:var(--surface);border:1px solid var(--line-2);
  padding:2px 6px;border-radius:6px;
}

.footacts{
  margin-top:30px;font-size:15px;
  display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;
}
.footacts span{color:var(--ink-3);}
.footacts a:first-child{
  display:inline-flex;align-items:center;
  padding:8px 12px;border:1px solid var(--accent-border);border-radius:10px;
  background:var(--accent-soft);text-decoration:none;font-weight:600;
}
.foot{border-top:1px solid var(--line);margin-top:40px;padding-top:18px;color:var(--ink-3);font-size:13px;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rise{opacity:1;transform:none;animation:none;}
  .wordmark .dot,.pagebg::before,.pagebg .herobg-inner,.pagebg .herobg-inner::before,.pagebg .centerline,.pagebg .centerline::before,.pagebg .centerline::after,.pagebg .bgtrack,.pagebg .bgtrack::before,.pagebg .bgpin,.lc-hole.pg{animation:none;}
  .cta,.params span,.themebtn{transition:none;}
  .cta:hover,.params span:hover,.themebtn:hover{transform:none;}
}

@media(max-width:640px){
  .wrap{padding:0 18px 52px;}
  .top{align-items:flex-start;gap:14px;}
  .nav{gap:10px;flex-wrap:wrap;justify-content:flex-end;}
  .crumb{margin-bottom:22px;}
  h1{font-size:clamp(28px,9vw,38px);}
  .lead{font-size:16.5px;}
  .cta{width:100%;justify-content:center;padding-inline:18px;}
  .params{gap:7px 11px;}
  .params span + span::before{margin-right:11px;}
  .lc-pins{width:100%;}
  .footacts{align-items:stretch;}
  .footacts a:first-child{justify-content:center;width:100%;}
}