:root{
  --ink:#050504; --ink-2:#0a0908; --plate:#0e0c0b; --plate-2:#151211;
  --rule:#241f1c; --rule-hi:#3a3230;
  --bone:#ece7de; --ash:#8b8276; --ash-dim:#5c554c;
  --oxide:#c11a13; --oxide-hot:#ea251b; --cyan:#00e8d6;
  --f-d:Anton,"Arial Narrow",Impact,sans-serif;
  --f-m:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-jp:"Noto Sans JP","Hiragino Sans",sans-serif;
  --rail:34px; --inset:16px; --step:clamp(1.2rem,4vw,2.4rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden; background:var(--ink)}
body{margin:0; background:var(--ink); color:var(--bone); font-family:var(--f-m);
  font-size:14px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--oxide); outline-offset:3px}
h1,h2,h3{text-wrap:balance}

/* ------------------------------------------------------------ corridor */
#scene{position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--ink);
  perspective:1700px; perspective-origin:50% 44%; contain:strict}
#rig{position:absolute; inset:0; transform-style:preserve-3d}
.hang{position:absolute; left:50%; top:50%; width:320px; height:320px;
  margin:-160px 0 0 -160px; transform-style:preserve-3d; will-change:transform,opacity;
  background:var(--plate); padding:8px; border:1px solid var(--rule-hi);
  box-shadow:0 0 0 1px #000, 0 34px 80px rgba(0,0,0,.85)}
.hang img{width:100%; height:100%; object-fit:cover;
  filter:brightness(.76) saturate(.9) contrast(1.14)}
.hang .cap{position:absolute; left:8px; right:8px; bottom:-27px; height:20px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.16em; color:var(--ash-dim); white-space:nowrap; overflow:hidden}
.hang .cap b{font-weight:500; color:var(--ash)}
.hang .cut{position:absolute; left:8px; right:8px; top:50%; height:4px; background:var(--oxide);
  transform:scaleX(0); transform-origin:0 50%; opacity:.95;
  transition:transform .55s cubic-bezier(.65,0,.2,1)}
.hang.struck .cut{transform:scaleX(1) rotate(-.6deg)}
.hang.own{border-color:var(--oxide)}
body[data-corridor="lite"] .hang img{filter:brightness(.42) saturate(.72) contrast(1.1)}
body[data-corridor="lite"] .hang{box-shadow:0 0 0 1px #000,0 20px 50px rgba(0,0,0,.8)}
body[data-corridor="lite"] .hang .cut{opacity:.7}
.railline{position:absolute; left:50%; top:50%; height:1px; transform-style:preserve-3d;
  background:linear-gradient(90deg,transparent,rgba(139,130,118,.26) 18%,rgba(139,130,118,.26) 82%,transparent)}

/* ------------------------------------------------------------ overlays */
.vig,.tone,.grain,.frame{position:fixed; inset:0; pointer-events:none}
.vig{z-index:2; background:
  radial-gradient(138% 106% at 50% 44%, transparent 26%, rgba(5,5,4,.60) 68%, rgba(5,5,4,.97) 100%)}
.tone{z-index:3; opacity:.46;
  background-image:radial-gradient(rgba(236,231,222,.09) .8px, transparent .9px); background-size:4px 4px}
.grain{z-index:4; opacity:.09; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  animation:gr .7s steps(4) infinite}
@keyframes gr{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
.slice{position:fixed; left:0; right:0; height:2px; z-index:5; pointer-events:none; opacity:0;
  background:linear-gradient(90deg,transparent,rgba(0,232,214,.5),rgba(193,26,19,.7),transparent);
  animation:sl 11s linear infinite}
@keyframes sl{0%,84%{opacity:0; top:12%} 85%{opacity:.9; top:26%} 86%{opacity:0}
  91%{opacity:.75; top:62%} 92%{opacity:0} 100%{opacity:0; top:62%}}
.frame{z-index:6}
.frame i{position:absolute; background:rgba(139,130,118,.38)}
.frame .h{left:var(--inset); right:var(--inset); height:1px}
.frame .v{top:var(--inset); bottom:var(--inset); width:1px}
.frame .t{top:var(--rail)} .frame .b{bottom:var(--rail)}
.frame .l{left:var(--inset)} .frame .r{right:var(--inset)}
.frame u{position:absolute; width:11px; height:11px; border:1px solid var(--oxide); opacity:.85}
.frame u.tl{left:calc(var(--inset) - 5px); top:calc(var(--rail) - 5px)}
.frame u.tr{right:calc(var(--inset) - 5px); top:calc(var(--rail) - 5px)}
.frame u.bl{left:calc(var(--inset) - 5px); bottom:calc(var(--rail) - 5px)}
.frame u.br{right:calc(var(--inset) - 5px); bottom:calc(var(--rail) - 5px)}

/* ------------------------------------------------------------ rails */
.rail{position:fixed; left:var(--inset); right:var(--inset); z-index:8; height:var(--rail);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-size:10.5px; letter-spacing:.2em; color:var(--ash)}
.rail.top{top:0} .rail.bot{bottom:0}
.rail::before{content:""; position:absolute; left:calc(var(--inset) * -1);
  right:calc(var(--inset) * -1); z-index:-1; pointer-events:none}
.rail.top::before{top:0; height:calc(var(--rail) + 20px);
  background:linear-gradient(180deg,rgba(5,5,4,.97) 0%,rgba(5,5,4,.9) 58%,rgba(5,5,4,0) 100%)}
.rail.bot::before{bottom:0; height:calc(var(--rail) + 20px);
  background:linear-gradient(0deg,rgba(5,5,4,.97) 0%,rgba(5,5,4,.9) 58%,rgba(5,5,4,0) 100%)}
.rail .jp{font-family:var(--f-jp); font-weight:700; color:var(--oxide); letter-spacing:.12em; font-size:12px}
.rail nav{display:flex; gap:1.45rem}
.rail nav a{white-space:nowrap}
.rail .brand{color:var(--ash); transition:color .18s ease; white-space:nowrap}
.rail .brand:hover,.rail .brand:focus-visible{color:var(--bone)}
.rail .social{display:flex; align-items:center; gap:.8rem}
.ico{display:grid; place-items:center; width:26px; height:26px; color:var(--ash);
  border:1px solid transparent; transition:color .18s ease, border-color .18s ease}
.ico:hover,.ico:focus-visible{color:var(--oxide); border-color:var(--rule-hi)}
.rail .no{font-variant-numeric:tabular-nums}
.rail .here{color:var(--bone)}
.rail .here::after{transform:scaleX(1)}

/* ------------------------------------------------------------ strike hover */
.st{position:relative; display:inline-block; color:var(--ash); cursor:pointer; background:none;
  border:0; padding:0; font:inherit; letter-spacing:inherit;
  transition:color .18s ease, text-shadow .18s ease}
.st::after{content:""; position:absolute; left:-5px; right:-5px; top:54%; height:1.5px;
  background:var(--oxide); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .17s cubic-bezier(.7,0,.25,1)}
.st:hover,.st:focus-visible{color:var(--bone); text-shadow:.9px 0 rgba(0,232,214,.5),-.9px 0 rgba(193,26,19,.65)}
.st:hover::after,.st:focus-visible::after{transform:scaleX(1)}

/* ------------------------------------------------------------ page shell */
main{position:relative; z-index:7}
.wrap{max-width:1000px; margin:0 auto; padding:0 var(--step)}
.sheet{background:linear-gradient(180deg,rgba(5,5,4,.86),rgba(5,5,4,.975) 10%,rgba(5,5,4,.975) 90%,rgba(5,5,4,.86));
  backdrop-filter:blur(10px); border-top:1px solid var(--rule)}
.sheet.solid{background:rgba(5,5,4,.985)}
.sec{padding:clamp(3.4rem,9vh,5.6rem) 0}
.head{display:flex; align-items:center; gap:1.1rem; margin:0 0 1.9rem;
  font-size:10.5px; letter-spacing:.28em; color:var(--ash); text-transform:uppercase}
.head i{flex:1; height:1px; background:var(--rule)}
.head b{color:var(--oxide); font-weight:500; font-variant-numeric:tabular-nums}
h2{font-family:var(--f-d); font-weight:400; margin:0 0 1.1rem; color:var(--bone);
  font-size:clamp(1.9rem,5vw,3rem); line-height:1; letter-spacing:.015em}
.body{max-width:62ch; color:var(--ash); font-size:13.5px; line-height:1.85}
.body b{color:var(--bone); font-weight:500}
.body p{margin:0 0 1rem}
.body a.link{color:var(--bone); border-bottom:1px solid var(--rule-hi)}
.body a.link:hover{border-color:var(--oxide)}

/* page title block on inner pages */
.ptop{position:relative; padding:calc(var(--rail) + clamp(3.4rem,10vh,6rem)) 0 0}
.ptop::before{content:""; position:absolute; inset:-6% -16% -26% -16%; z-index:-1;
  pointer-events:none; background:radial-gradient(ellipse at 34% 54%, rgba(5,5,4,.97) 0%,
  rgba(5,5,4,.88) 42%, rgba(5,5,4,.3) 70%, rgba(5,5,4,0) 88%)}
.ptop h1{font-family:var(--f-d); font-weight:400; margin:0; color:var(--bone);
  font-size:clamp(2.6rem,9vw,5.4rem); line-height:.9; letter-spacing:.015em; position:relative;
  display:inline-block}
.ptop .kick{font-size:10.5px; letter-spacing:.3em; color:var(--oxide); text-transform:uppercase;
  margin:0 0 1rem; font-family:var(--f-jp); font-weight:700}
.ptop .sub{max-width:56ch; color:var(--ash); margin:1.4rem 0 0; font-size:13.5px}

/* ------------------------------------------------------------ hero */
.screen{min-height:100svh; display:grid; place-items:center;
  padding:calc(var(--rail) + 1.2rem) var(--step) calc(var(--rail) + 1.2rem)}
body.home{overflow:hidden}
body.home .screen{height:100svh}
@media (max-height:600px){
  body.home{overflow:auto}
  body.home .screen{height:auto; min-height:100svh}
}
.hero{display:grid; place-items:center; text-align:center; gap:clamp(1.8rem,5vh,3.2rem)}
.mark{position:relative; display:inline-block}
.mark h1{position:relative; font-family:var(--f-d); font-weight:400; margin:0; color:var(--bone);
  filter:drop-shadow(0 8px 34px rgba(5,5,4,.97));
  font-size:clamp(3.2rem,14.5vw,10rem); line-height:.82; letter-spacing:.012em;
  text-shadow:1.5px 0 rgba(0,232,214,.18),-1.5px 0 rgba(193,26,19,.26);
  animation:bleed 6.5s ease-in-out infinite}
/* the ink never sits still: the plates breathe, and now and then one slips */
@keyframes bleed{
  0%,100%{text-shadow:1.4px 0 rgba(0,232,214,.16),-1.4px 0 rgba(193,26,19,.24)}
  50%    {text-shadow:2.7px 0 rgba(0,232,214,.28),-2.7px 0 rgba(193,26,19,.36)}
}
.mark h1::before,.mark h1::after{content:attr(data-text); position:absolute; left:0; top:0;
  width:100%; pointer-events:none; text-shadow:none; will-change:transform}
.mark h1::before{color:var(--cyan); opacity:0; clip-path:inset(16% 0 60% 0);
  animation:slipA 8.5s steps(1,end) infinite}
.mark h1::after{color:var(--oxide); opacity:0; clip-path:inset(56% 0 20% 0);
  animation:slipB 8.5s steps(1,end) infinite}
@keyframes slipA{
  0%,88.6%{opacity:0; transform:translate3d(0,0,0)}
  89.2%{opacity:.5; transform:translate3d(-9px,0,0)}
  90%{opacity:.4; transform:translate3d(5px,0,0)}
  90.6%,100%{opacity:0; transform:translate3d(0,0,0)}
}
@keyframes slipB{
  0%,89.4%{opacity:0; transform:translate3d(0,0,0)}
  90%{opacity:.5; transform:translate3d(7px,0,0)}
  91%{opacity:.38; transform:translate3d(-4px,0,0)}
  91.6%,100%{opacity:0; transform:translate3d(0,0,0)}
}
.mark s1,.mark s2{position:absolute; left:-2.5%; width:105%; height:clamp(4px,.88vw,10px);
  background:var(--oxide); display:block; transform-origin:0 50%;
  animation:draw .95s cubic-bezier(.6,0,.2,1) both}
.mark s1{top:43%; transform:rotate(-.6deg)} .mark s2{top:58%; animation-delay:.13s}
.mark s1{animation:draw .95s cubic-bezier(.6,0,.2,1) both, ink 5.5s ease-in-out 1.1s infinite}
.mark s2{animation:draw .95s cubic-bezier(.6,0,.2,1) .13s both, ink 5.5s ease-in-out 1.5s infinite}
@keyframes draw{from{transform:scaleX(0) rotate(-.6deg)}to{transform:scaleX(1) rotate(-.6deg)}}
@keyframes ink{0%,100%{opacity:1}50%{opacity:.78}}
.gate{position:relative; display:grid; justify-items:center; gap:1rem}
.gate.flush{justify-items:start}
.plate.locked{visibility:hidden; cursor:not-allowed; border-color:var(--rule);
  background:rgba(10,9,8,.82)}
.gate.on .plate.locked{visibility:visible}
.plate.locked .in{border-color:#1d1917;
  background-image:repeating-linear-gradient(135deg,transparent 0 9px,rgba(139,130,118,.05) 9px 10px)}
.plate.locked .lb{color:var(--ash)}
.plate.locked .lb::after{display:none}
.plate.locked .sb{color:var(--ash-dim)}
.plate.locked:hover,.plate.locked:focus-visible{border-color:var(--rule); background:rgba(10,9,8,.82)}
.plate.locked:hover::before,.plate.locked:hover::after{opacity:0}
.plate .seal.lock{border-width:1px; border-color:var(--ash-dim); color:var(--ash-dim);
  transform:rotate(6deg) scale(1); opacity:1}
.gate::before{content:""; position:absolute; inset:-60px -170px -46px -170px; z-index:-1;
  pointer-events:none; background:radial-gradient(ellipse at 50% 50%, rgba(5,5,4,.97) 0%,
  rgba(5,5,4,.92) 40%, rgba(5,5,4,.5) 68%, rgba(5,5,4,0) 88%)}
.hint{font-size:10.5px; letter-spacing:.18em; color:var(--ash-dim); text-transform:uppercase;
  text-shadow:0 1px 10px rgba(5,5,4,.98); margin:0}
.scrollcue{justify-self:center; font-size:10px; letter-spacing:.26em; color:var(--ash-dim);
  display:grid; justify-items:center; gap:.5rem; padding-top:1.4rem}
.scrollcue i{width:1px; height:34px; background:linear-gradient(180deg,var(--rule-hi),transparent);
  animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}

/* ------------------------------------------------------------ connect plate */
.plate{position:relative; width:min(430px,88vw); background:rgba(14,12,11,.9);
  border:1px solid var(--rule-hi); padding:5px; cursor:pointer; text-align:left;
  font:inherit; color:inherit; transition:border-color .22s ease, background .22s ease;
  backdrop-filter:blur(4px)}
.plate::before,.plate::after{content:""; position:absolute; width:9px; height:9px;
  border:1px solid var(--oxide); opacity:0; transition:opacity .22s ease}
.plate::before{left:-5px; top:-5px} .plate::after{right:-5px; bottom:-5px}
.plate:hover,.plate:focus-visible{border-color:var(--oxide); background:rgba(21,18,17,.96)}
.plate:hover::before,.plate:hover::after,.plate:focus-visible::before,.plate:focus-visible::after{opacity:1}
.plate .in{display:block; border:1px solid var(--rule); padding:22px 62px 20px;
  position:relative; overflow:hidden; min-height:92px; text-align:center}
.plate .lb{display:inline-block; font-family:var(--f-d); font-size:clamp(1.5rem,5.4vw,2.05rem);
  line-height:1; letter-spacing:.02em; color:var(--bone); position:relative;
  transition:text-shadow .2s ease}
.plate .lb::after{content:""; position:absolute; left:-6px; right:-6px; top:52%; height:2.5px;
  background:var(--oxide); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .26s cubic-bezier(.65,0,.2,1)}
.plate:hover .lb::after,.plate:focus-visible .lb::after{transform:scaleX(1) rotate(-.5deg)}
.plate:hover .lb,.plate:focus-visible .lb{text-shadow:1.2px 0 rgba(0,232,214,.5),-1.2px 0 rgba(193,26,19,.6)}
.plate .sb{display:block; margin-top:10px; font-size:10.5px; letter-spacing:.17em;
  color:var(--ash); min-height:1.5em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.plate .bar{position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--oxide);
  transform:scaleX(0); transform-origin:0 50%; opacity:.85}
.plate.busy .bar{animation:fill 1.4s cubic-bezier(.25,.6,.3,1) forwards}
@keyframes fill{to{transform:scaleX(.92)}}
.plate.done{border-color:var(--oxide)}
.plate.done::before,.plate.done::after{opacity:1}
.plate.err{border-color:#7a1a16}
.seal{position:absolute; right:16px; top:50%; margin-top:-23px; width:46px; height:46px;
  border:2px solid var(--oxide); display:grid; place-items:center; font-family:var(--f-jp);
  font-weight:700; font-size:15px; line-height:.95; color:var(--oxide);
  transform:rotate(6deg) scale(.5); opacity:0;
  transition:transform .4s cubic-bezier(.34,1.4,.5,1), opacity .3s}
.plate.done .seal{transform:rotate(6deg) scale(1); opacity:1}

/* ------------------------------------------------------------ live counts */
.counts{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule)}
.counts div{background:var(--plate); padding:16px 18px}
.counts dt{font-size:10px; letter-spacing:.2em; color:var(--ash-dim); text-transform:uppercase}
.counts dd{margin:7px 0 0; font-family:var(--f-d); font-size:1.7rem; letter-spacing:.02em;
  color:var(--bone); font-variant-numeric:tabular-nums; line-height:1}
.counts dd.sm{font-family:var(--f-m); font-size:11.5px; letter-spacing:.04em; word-break:break-all;
  line-height:1.55; padding-top:6px; color:var(--ash)}
.counts dd em{font-style:normal; font-size:.8rem; color:var(--ash-dim); margin-left:.4rem}

/* ------------------------------------------------------------ featured entries */
.entries{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.4rem}
.card{position:relative; display:block; background:var(--plate); border:1px solid var(--rule);
  padding:8px; transition:border-color .22s ease, transform .3s cubic-bezier(.3,0,.2,1)}
.card img{width:100%; aspect-ratio:1; object-fit:cover;
  filter:brightness(.94) contrast(1.06)}
.card .cut{position:absolute; left:8px; right:8px; top:46%; height:4px; background:var(--oxide);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .32s cubic-bezier(.65,0,.2,1)}
.card:hover,.card:focus-visible{border-color:var(--oxide); transform:translateY(-3px)}
.card:hover .cut,.card:focus-visible .cut{transform:scaleX(1) rotate(-.6deg)}
.card .meta{display:flex; justify-content:space-between; gap:1rem; padding:11px 3px 3px;
  font-size:10.5px; letter-spacing:.14em; color:var(--ash-dim)}
.card .meta b{color:var(--bone); font-weight:500}
.card.own .meta b{color:var(--oxide)}

/* ------------------------------------------------------------ index of pages */
.index{border-top:1px solid var(--rule)}
.irow{display:grid; grid-template-columns:44px 1fr auto; gap:1.4rem; align-items:center;
  padding:20px 4px; border-bottom:1px solid var(--rule); position:relative;
  transition:background .22s ease}
.irow .n{font-family:var(--f-d); font-size:1.05rem; color:var(--ash-dim); font-variant-numeric:tabular-nums}
.irow .t{font-family:var(--f-d); font-size:clamp(1.3rem,3.6vw,1.9rem); line-height:1;
  color:var(--bone); position:relative; display:inline-block}
.irow .t::after{content:""; position:absolute; left:-6px; right:-6px; top:52%; height:2.5px;
  background:var(--oxide); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .24s cubic-bezier(.7,0,.25,1)}
.irow .d{display:block; font-family:var(--f-m); font-size:11.5px; letter-spacing:.06em;
  color:var(--ash); margin-top:9px; max-width:52ch}
.irow .go{font-size:10.5px; letter-spacing:.22em; color:var(--ash-dim); white-space:nowrap}
.irow:hover{background:rgba(14,12,11,.7)}
.irow:hover .t::after,.irow:focus-visible .t::after{transform:scaleX(1) rotate(-.5deg)}
.irow:hover .n,.irow:hover .go{color:var(--oxide)}

/* ------------------------------------------------------------ tiers */
.tiers{display:grid; gap:10px}
.tier{display:grid; grid-template-columns:minmax(112px,158px) 1fr 56px; gap:14px; align-items:center;
  font-size:11px; letter-spacing:.14em}
.tier .nm{color:var(--ash); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tier.own .nm{color:var(--oxide)}
.tier .tr{height:10px; background:#0b0a09; border:1px solid var(--rule); position:relative}
.tier .tr b{position:absolute; left:0; top:0; bottom:0; display:block; transform-origin:0 50%;
  transform:scaleX(0); transition:transform .8s cubic-bezier(.35,0,.2,1)}
.tier.on .tr b{transform:scaleX(1)}
.tier .n{text-align:right; color:var(--ash); font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ steps / traits */
.steps{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
.step{background:var(--plate); padding:20px 22px; display:grid;
  grid-template-columns:auto 1fr; gap:0 18px; align-items:baseline}
.step .k{font-family:var(--f-d); font-size:1.45rem; color:var(--oxide); line-height:1;
  font-variant-numeric:tabular-nums}
.step h3{margin:0; font-size:11px; letter-spacing:.22em; color:var(--bone);
  text-transform:uppercase; font-weight:600}
.step p{margin:9px 0 0; grid-column:2; color:var(--ash); font-size:13px; line-height:1.75; max-width:58ch}
.step code{color:var(--bone); font-size:12px}
.warn{margin:1.6rem 0 0; padding:15px 17px; border-left:2px solid var(--oxide);
  background:var(--plate); font-size:12.5px; color:var(--ash); max-width:64ch}
.warn b{color:var(--bone); font-weight:500}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:1.6rem 0 0}
.chips span{border:1px solid var(--rule); background:var(--plate); padding:7px 11px;
  font-size:10.5px; letter-spacing:.16em; color:var(--ash); text-transform:uppercase}
.chips span:hover{border-color:var(--rule-hi); color:var(--bone)}

/* ------------------------------------------------------------ buttons */
.btn{display:inline-block; position:relative; border:1px solid var(--rule-hi);
  background:var(--plate); color:var(--bone); font:inherit; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; padding:13px 20px; cursor:pointer; transition:border-color .2s ease}
.btn span{position:relative; display:inline-block}
.btn span::after{content:""; position:absolute; left:-5px; right:-5px; top:53%; height:2px;
  background:var(--oxide); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .22s cubic-bezier(.7,0,.25,1)}
.btn:hover,.btn:focus-visible{border-color:var(--oxide)}
.btn:hover span::after,.btn:focus-visible span::after{transform:scaleX(1)}
.btnrow{display:flex; flex-wrap:wrap; gap:12px; margin:2rem 0 0}

/* ------------------------------------------------------------ footer */
.foot{position:relative; z-index:7; background:rgba(5,5,4,.985); border-top:1px solid var(--rule);
  padding:3rem var(--step) calc(var(--rail) + 2.4rem)}
.foot .in{max-width:1000px; margin:0 auto; display:flex; flex-wrap:wrap; gap:1.6rem 2.6rem;
  align-items:center; justify-content:space-between}
.foot .jp{font-family:var(--f-jp); color:var(--oxide); font-size:13px; letter-spacing:.12em}
.foot nav{display:flex; flex-wrap:wrap; gap:1.4rem; font-size:10.5px; letter-spacing:.2em}
.foot .cred{width:100%; font-size:10px; letter-spacing:.2em; color:var(--ash-dim);
  border-top:1px solid var(--rule); padding-top:1.4rem}

/* ------------------------------------------------------------ wallet picker */
.pick{position:fixed; inset:0; z-index:24; display:none; place-items:center;
  background:rgba(4,4,3,.9); backdrop-filter:blur(10px); padding:var(--step)}
.pick.open{display:grid}
.pick .box{width:min(400px,92vw); background:var(--plate); border:1px solid var(--rule-hi); padding:5px}
.pick .bin{border:1px solid var(--rule); padding:20px}
.pick h3{margin:0 0 4px; font-family:var(--f-d); font-weight:400; font-size:1.4rem; color:var(--bone)}
.pick p{margin:0 0 16px; font-size:11px; letter-spacing:.14em; color:var(--ash-dim); text-transform:uppercase}
.pick ul{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rule)}
.pick li button{width:100%; display:flex; align-items:center; gap:12px; background:var(--plate-2);
  border:0; padding:13px 14px; cursor:pointer; font:inherit; font-size:12px; color:var(--bone);
  letter-spacing:.08em; text-align:left}
.pick li button:hover{background:#1c1817; color:var(--bone)}
.pick li img{width:20px; height:20px; border-radius:3px}
.pick .x{margin-top:16px; font-size:10.5px; letter-spacing:.2em}

@media (max-width:900px){.lgrid{column-count:2}}
@media (max-width:760px){
  :root{--inset:10px}
  .hang{width:232px; height:232px; margin:-116px 0 0 -116px}
  .gate::before{inset:-34px -26px -26px -26px}
  .ptop::before{inset:-6% -30% -22% -30%}
  .mark h1{font-size:clamp(3.4rem,17vw,10rem)}
  .rail.top .brand{display:none}
  .rail nav.mainnav{display:flex; gap:1rem; flex:1; min-width:0; overflow-x:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-right:.3rem}
  .rail nav.mainnav::-webkit-scrollbar{display:none}
  .rail .social .jp{display:none}
  .rail{font-size:9px; letter-spacing:.09em}
  .rail>span{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .rail .jp{font-size:10.5px}
  .rail.bot .no{display:none}
  .plate .in{padding:20px 52px 18px; min-height:84px}
  .plate .sb{font-size:9.5px; letter-spacing:.13em}
  .seal{right:10px; width:38px; height:38px; margin-top:-19px; font-size:12.5px}
  .irow{grid-template-columns:32px 1fr; gap:.9rem}
  .irow .go{display:none}
  .step{grid-template-columns:auto 1fr; padding:17px 16px}
  .foot{padding:2.4rem var(--step) calc(var(--rail) + 2rem)}
}
@media (max-width:520px){.lgrid{column-count:1}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}