:root{
  --bg:#0f1115;
  --text:#f1f3f6;
  --muted:#98a1ae;
  --line:rgba(255,255,255,.1);
  --line-strong:rgba(255,255,255,.24);
  --header:rgba(15,17,21,.78);
  --ink:#0d1210;
  --ink-soft:rgba(13,18,16,.76);
  --ink-line:rgba(13,18,16,.3);
  --display:"Unbounded","Hanken Grotesk",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --maxw:1160px;
  --gutter:clamp(18px,4vw,40px);
  --ixpad:clamp(10px,2vw,20px);
  --round:40px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f3f5f8;
  --text:#10141a;
  --muted:#566070;
  --line:rgba(16,20,26,.1);
  --line-strong:rgba(16,20,26,.26);
  --header:rgba(243,245,248,.8);
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:56px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:6px}
.theming *{transition:background-color .45s,border-color .45s,color .45s!important}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

.site-head{
  position:sticky;
  top:0;
  z-index:30;
  background:var(--header);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s;
  animation:down .8s var(--ease) both;
}
.site-head.scrolled{border-bottom-color:var(--line)}
@keyframes down{from{opacity:0;transform:translateY(-14px)}}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;line-height:1}
.dots{display:grid;grid-template-columns:repeat(3,8px);gap:3px}
.dots i{height:8px;border-radius:2px;animation:pop .6s cubic-bezier(.3,1.6,.5,1) backwards}
.dots i:nth-child(1){background:#ffbf3c;animation-delay:.2s}
.dots i:nth-child(2){background:#5eead4;animation-delay:.32s}
.dots i:nth-child(3){background:#6ee7a0;animation-delay:.44s}
.brand:hover .dots i{transform:translateY(-3px)}
.brand .dots i{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .dots i:nth-child(2){transition-delay:.05s}
.brand:hover .dots i:nth-child(3){transition-delay:.1s}
@keyframes pop{from{opacity:0;transform:scale(.2)}}
.head-actions{display:flex;align-items:center;gap:6px}
.icon-btn{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:1.2rem;
  transition:color .2s,border-color .2s,transform .3s var(--ease);
}
.icon-btn:hover{color:var(--text);border-color:var(--line-strong);transform:translateY(-2px)}
#themeIcon{display:block}

.hero{padding-block:clamp(44px,8vw,96px) clamp(88px,11vw,128px)}
h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.9rem,4.7vw,3.8rem);
  line-height:1.12;
  letter-spacing:-.03em;
  max-width:20ch;
  text-wrap:balance;
}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.w>span{display:inline-block;animation:word .95s var(--ease) both;animation-delay:calc(var(--i) * 75ms + 150ms)}
@keyframes word{from{transform:translateY(110%)}}
.lede{margin-top:22px;max-width:52ch;font-size:clamp(1.05rem,.9vw + .85rem,1.25rem);line-height:1.55;color:var(--muted);animation:up .9s var(--ease) .65s both}
@keyframes up{from{opacity:0;transform:translateY(18px)}}

.index{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--line-strong)}
.index li{animation:up .9s var(--ease) both}
.index li:nth-child(1){animation-delay:.8s}
.index li:nth-child(2){animation-delay:.92s}
.index li:nth-child(3){animation-delay:1.04s}
.index a{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,24px);
  padding:clamp(16px,2.4vw,26px) var(--ixpad);
  margin-inline:calc(var(--ixpad) * -1);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
}
.index a::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--c);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .55s var(--ease);
}
.index a:hover::before,.index a:focus-visible::before{transform:scaleY(1)}
.index a:focus-visible{outline-offset:-3px}
.ix-dot{width:14px;height:14px;border-radius:4px;background:var(--c);flex-shrink:0;transition:background-color .3s,transform .5s var(--ease)}
.ix-name{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,5.2vw,3.8rem);letter-spacing:-.03em;line-height:1.1;transition:color .3s,transform .55s var(--ease)}
.ix-desc{margin-left:auto;color:var(--muted);font-weight:500;text-align:end;transition:color .3s}
.ix-icon{font-size:1.6rem;color:var(--muted);transition:color .3s,transform .55s var(--ease)}
.index a:hover .ix-name,.index a:focus-visible .ix-name{color:var(--ink);transform:translateX(10px)}
.index a:hover .ix-desc,.index a:focus-visible .ix-desc,.index a:hover .ix-icon,.index a:focus-visible .ix-icon{color:var(--ink)}
.index a:hover .ix-dot,.index a:focus-visible .ix-dot{background:var(--ink);transform:scale(1.25)}
.index a:hover .ix-icon,.index a:focus-visible .ix-icon{transform:translateY(4px)}
.index-note{margin-top:18px;color:var(--muted);font-size:.95rem;animation:up .9s var(--ease) 1.15s both}

.js .reveal{opacity:0}
.js .reveal.in{opacity:1;animation:reveal .95s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes reveal{from{opacity:0;transform:translateY(30px) scale(.985)}}

.band{
  position:relative;
  margin-top:calc(var(--round) * -1);
  padding-block:clamp(56px,8vw,104px) calc(clamp(56px,8vw,104px) + var(--round));
  background:var(--c);
  color:var(--ink);
  border-radius:var(--round) var(--round) 0 0;
}
.band-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center}
.flip .band-copy{order:2}
.band-copy{min-width:0}
.band h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.6vw,3.6rem);letter-spacing:-.035em;line-height:1.05;overflow-wrap:anywhere}
.band-desc{margin-top:16px;max-width:42ch;font-size:1.08rem;color:var(--ink-soft)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 28px}
.tags li{padding:4px 13px;border-radius:999px;border:1.5px solid rgba(13,18,16,.45);font-size:.85rem;font-weight:600}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 24px;
  border-radius:12px;
  font-weight:700;
  font-size:.98rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.band-actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{gap:10px;cursor:pointer}
.btn iconify-icon{font-size:1.25rem}
.btn span{transition:opacity .2s}
.btn.dark{background:var(--ink);color:var(--c)}
.btn.line{border:1.5px solid rgba(13,18,16,.55);color:var(--ink);transition:transform .3s var(--ease),background-color .3s}
.btn.line:hover{transform:translateY(-2px);background:rgba(13,18,16,.09)}
.btn.line:active{transform:none}
.btn.dark.loading{pointer-events:none}
.btn.dark.loading iconify-icon{animation:spin .9s linear infinite}
.btn.dark.done{background:#14532d;color:#d1fae5}
.btn.dark.fail{background:#9f1d12;color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.dark:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(13,18,16,.6)}
.btn.dark:active{transform:none}

.points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(40px,6vw,72px)}
.points li{padding-top:18px;border-top:1.5px solid var(--ink-line)}
.points h4{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.points p{margin-top:8px;font-size:.96rem;line-height:1.55;color:var(--ink-soft)}

.demo{
  container-type:inline-size;
  min-width:0;
  background:#12151a;
  color:#eef1f5;
  border-radius:24px;
  padding:clamp(16px,2.4vw,26px);
  box-shadow:0 40px 70px -30px rgba(13,18,16,.55);
}

.mc-title{font-weight:600;font-size:.95rem;color:#c8ced8;margin-bottom:12px}
.mc-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}
.mc-slot{
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.055);
  border:2px solid rgba(255,255,255,.04);
  font-size:clamp(.8rem,5cqi,1.4rem);
  transition:background-color .25s,border-color .25s,box-shadow .35s var(--ease);
}
button.mc-slot:hover,button.mc-slot:focus-visible,button.mc-slot.sel{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.7)}
button.mc-slot.sel{box-shadow:0 0 0 4px color-mix(in srgb,var(--ic) 30%,transparent)}
.mc-slot iconify-icon{color:var(--ic);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
button.mc-slot:hover iconify-icon,button.mc-slot:focus-visible iconify-icon,button.mc-slot.sel iconify-icon{transform:translateY(-3px) scale(1.18)}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:68px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.chain-idle{color:#8b95a5;font-size:.92rem}
.chain-head{width:100%;font-weight:700;font-size:.95rem;animation:swap .35s var(--ease) both}
.chip{padding:4px 12px;border-radius:999px;background:var(--c);color:var(--ink);font-size:.82rem;font-weight:700;animation:chip .45s cubic-bezier(.3,1.6,.5,1) both}
@keyframes chip{from{opacity:0;transform:translateY(8px) scale(.8)}}
@keyframes swap{from{opacity:0;transform:translateY(6px)}}

.scene{
  position:relative;
  height:clamp(230px,34vw,290px);
  overflow:hidden;
  border-radius:16px;
  background:linear-gradient(180deg,#0a0d12,#141b24);
}
.scene::before{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  bottom:0;
  height:46%;
  background:
    repeating-linear-gradient(90deg,rgba(94,234,212,.08) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(0deg,rgba(94,234,212,.08) 0 1px,transparent 1px 30px);
  transform:perspective(220px) rotateX(58deg);
  transform-origin:bottom;
  mask-image:linear-gradient(0deg,#000,transparent);
  -webkit-mask-image:linear-gradient(0deg,#000,transparent);
}
.pad{
  position:absolute;
  left:50%;
  bottom:18px;
  width:46%;
  height:26px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(94,234,212,.7),rgba(94,234,212,.08) 65%,transparent 72%);
  animation:glow 4s ease-in-out infinite;
}
@keyframes glow{50%{opacity:.55;transform:translateX(-50%) scale(.9)}}
.beam{
  position:absolute;
  left:50%;
  bottom:30px;
  width:34%;
  height:62%;
  transform:translateX(-50%);
  background:linear-gradient(0deg,rgba(94,234,212,.2),transparent);
  clip-path:polygon(18% 100%,82% 100%,100% 0,0 0);
}
.holo-live{
  position:absolute;
  left:50%;
  top:18%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:100%;
  text-align:center;
  animation:float 5s ease-in-out infinite;
}
@keyframes float{50%{transform:translate(-50%,-8px)}}
.holo-live>span{display:block}
.hl-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.05rem,6.2cqi,1.6rem);
  letter-spacing:-.02em;
  background:linear-gradient(90deg,#ffbf3c,#5eead4,#6ee7a0,#ffbf3c);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:flow 6s linear infinite;
}
@keyframes flow{to{background-position:300% 0}}
.hl-who,.hl-bal{font-size:clamp(.88rem,3.6cqi,1.05rem);color:#c8ced8}
.hl-who b{color:#fff}
.hl-bal b{color:#ffd24a}
.holo-live.swap .hl-who,.holo-live.swap .hl-bal{animation:swap .45s var(--ease) both}
.viewer{display:flex;align-items:center;gap:8px;margin-top:16px}
.viewer span{color:#8b95a5;font-size:.92rem;margin-right:4px}
.viewer button{padding:6px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.18);font-weight:600;font-size:.9rem;transition:background-color .25s,color .25s,border-color .25s}
.viewer button:hover{border-color:rgba(255,255,255,.5)}
.viewer button.on{background:#5eead4;border-color:#5eead4;color:var(--ink)}

.radar{
  position:relative;
  aspect-ratio:5/4;
  overflow:hidden;
  border-radius:16px;
  background:
    radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1.5px) 0 0/26px 26px,
    #0b0f0d;
  cursor:crosshair;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.ring{position:absolute;left:50%;top:50%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(110,231,160,.16)}
.r1{width:34%}
.r2{width:68%}
.player{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);border-radius:4px;background:#f2c79b;box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.arrow-rot{position:absolute;left:50%;top:50%;width:0;height:0;transition:transform .6s var(--ease)}
.arrow{
  position:absolute;
  left:-15px;
  top:-58px;
  width:30px;
  height:30px;
  fill:#6ee7a0;
  filter:drop-shadow(0 0 10px rgba(110,231,160,.7));
  animation:nudge 1.8s ease-in-out infinite;
}
@keyframes nudge{50%{transform:translateY(-5px)}}
.target{
  position:absolute;
  width:16px;
  height:16px;
  transform:translate(-50%,-50%) rotate(45deg);
  border:2px solid #6ee7a0;
  border-radius:3px;
  transition:left .5s var(--ease),top .5s var(--ease);
}
.target::after{content:"";position:absolute;inset:-9px;border-radius:6px;border:1px solid rgba(110,231,160,.6);animation:ping 2s ease-out infinite}
@keyframes ping{from{transform:scale(.5);opacity:1}to{transform:scale(1.5);opacity:0}}
.xp{height:8px;margin-top:16px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.xp span{display:block;height:100%;transform-origin:left;transform:scaleX(.5);background:linear-gradient(90deg,#4ade80,#d9f99d);transition:transform .6s var(--ease)}
.actionbar{margin-top:12px;text-align:center;font-weight:600;color:#a7f3c4}

.site-foot{
  position:relative;
  margin-top:calc(var(--round) * -1);
  padding-block:clamp(44px,6vw,72px) 28px;
  background:var(--bg);
  border-radius:var(--round) var(--round) 0 0;
}
.foot-mark{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.2rem,9.6vw,8.2rem);
  letter-spacing:-.04em;
  line-height:1.05;
  background:linear-gradient(90deg,#ffbf3c,#5eead4,#6ee7a0,#ffbf3c);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:flow 14s linear infinite;
}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;margin-top:clamp(28px,4vw,48px);padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.93rem}
.foot-links{display:flex;gap:22px}
.foot-links a{transition:color .2s}
.foot-links a:hover{color:var(--text)}


.foot-links button{font:inherit;color:inherit;transition:color .2s}
.foot-links button:hover{color:var(--text)}

.modal-open{overflow:hidden}
.modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:20px;
  visibility:hidden;
  opacity:0;
  transition:opacity .3s var(--ease),visibility 0s linear .3s;
}
.modal.open{visibility:visible;opacity:1;transition:opacity .3s var(--ease)}
.modal-backdrop{position:absolute;inset:0;background:rgba(8,10,14,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal-card{
  position:relative;
  width:min(400px,100%);
  padding:34px 28px 28px;
  text-align:center;
  background:#12151a;
  color:#eef1f5;
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
  transform:translateY(24px) scale(.95);
  transition:transform .45s cubic-bezier(.3,1.3,.5,1);
}
.modal.open .modal-card{transform:none}
.modal-x{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#8b95a5;
  transition:color .2s,background-color .2s;
}
.modal-x:hover{color:#fff;background:rgba(255,255,255,.08)}
.modal-icon{
  width:64px;
  height:64px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:#5865f2;
  color:#fff;
  font-size:1.9rem;
  box-shadow:0 14px 30px -10px rgba(88,101,242,.8);
}
.modal.open .modal-icon{animation:pop .6s cubic-bezier(.3,1.6,.5,1) .12s backwards}
.modal-card h3{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;line-height:1.2}
.modal-text{margin-top:8px;color:#98a1ae;font-size:.95rem}
.copy-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:22px;
  padding:8px 8px 8px 20px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}
.copy-btn iconify-icon{font-size:1.15rem}
.modal-x iconify-icon{font-size:1.25rem}
.copy-name{font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.01em;user-select:all;-webkit-user-select:all}
.copy-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 18px;
  border-radius:10px;
  background:#5865f2;
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  transition:transform .3s var(--ease),background-color .3s,color .3s;
}
.copy-btn:hover{transform:translateY(-1px);background:#6a76f5}
.copy-btn:active{transform:none}
.copy-btn.done{background:#4ade80;color:var(--ink)}
.copy-btn.fail{background:#f87171;color:var(--ink)}
.modal-card :focus-visible{outline-color:#fff}

@media (max-width:900px){
  .band-top{grid-template-columns:minmax(0,1fr)}
  .flip .band-copy{order:0}
  .points{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  :root{--round:28px}
  .ix-desc{display:none}
  .ix-icon{margin-left:auto}
  .points{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}