/* ---------- one feel for everything you can touch ----------
   hover: it lights slowly · press: it gives way and springs back (the "resistance") · each kind of action has its colour:
   buy and join are green, every burn is the fire's orange, everything else the courtyard's blue */
:root{--spring:cubic-bezier(.34,1.45,.5,1);--soft:cubic-bezier(.2,.8,.2,1)}

/* the press: everything clickable gives way under the finger */
a,button,.btn,.zm-do,.zm-read,.cab,.verb,[data-tab],[role=button],.seg button,.tabs button,.max,.nt,.toplace,.groups4 a,.dk-open,.zm-wallet,.zm-docs,.zm-buy,.zm-soc a,.zm-chips a{
  transition:transform .55s var(--spring),background-color .45s ease,border-color .45s ease,color .45s ease,box-shadow .5s ease,opacity .4s ease;-webkit-tap-highlight-color:transparent}
a:active,button:active,.btn:active,.zm-do:active,.cab:active,[role=button]:active,.seg button:active,.tabs button:active,.max:active,.nt:active,.toplace:active,.groups4 a:active,.dk-open:active,.zm-soc a:active,.zm-chips a:active{transform:scale(.955);transition-duration:.12s}
.zm-do:active,.cab:active,.groups4 a:active,.toplace:active,.zm-wallet:active,.zm-docs:active,.zm-buy:active{transform:scale(.982)}

/* the navigation: a line grows in under each word, slowly, on hover and where you are */
.links a:not(.btn){position:relative}
.links a:not(.btn)::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--pc,#9ef0ff);transform:scaleX(0);transform-origin:left;opacity:0;transition:transform .7s var(--soft),opacity .5s ease}
.links a:not(.btn):hover::after,.links a.here::after{transform:scaleX(1);opacity:1}
.links a.here::after{margin-top:0!important;display:block!important}
.links a:not(.btn):hover{color:#e8f4ff}

/* buttons: hover changes the colour of button and text together; press gives a third colour */
.btn{background-image:none}
.btn::after{display:none}
.btn:not(.solid):hover{background:#10275a;border-color:#9ef0ff;color:#fff;box-shadow:0 0 0 1px rgba(158,240,255,.25),0 0 26px rgba(127,188,255,.18)}
.btn:not(.solid):active{background:#163a7a}
.btn.solid{transition:background-color .45s ease,color .45s ease,box-shadow .5s ease,transform .55s var(--spring)}
.btn.solid:hover{background:#bff7dc;border-color:#bff7dc;color:#062a1c;box-shadow:0 0 0 4px rgba(95,227,161,.15),0 10px 34px rgba(95,227,161,.25)}
.btn.solid:active{background:#5fe3a1;border-color:#5fe3a1;color:#04140d}
.btn.solid .tk,.btn.solid:hover .tk{color:inherit}

/* the hand device's own buttons, by what they do */
.device .btns button,.circlebtns button,.dbtn{transition:background-color .45s ease,border-color .45s ease,color .45s ease,box-shadow .5s ease,transform .55s var(--spring)}
.device .btns button:hover,.dbtn:hover{background:#10275a;border-color:#9ef0ff;color:#fff}
.device .btns button:active,.dbtn:active{background:#163a7a}
.tone-buy:hover{background:#0e2a22!important;border-color:#5fe3a1!important;color:#d8fff0!important;box-shadow:0 0 22px rgba(95,227,161,.18)!important}
.tone-buy:active{background:#155c40!important;border-color:#5fe3a1!important;color:#fff!important}
.tone-burn:hover{background:#2a160c!important;border-color:#ffb27a!important;color:#ffe6d2!important;box-shadow:0 0 22px rgba(255,155,102,.2)!important}
.tone-burn:active{background:#7a3a18!important;border-color:#ff9b66!important;color:#fff!important}

/* every tab and every choice lights in softly */
.tabs button,.seg button{position:relative}
.tabs:not(.gtabs) button[data-t]::before,.tabs:not(.gtabs) .v9tabs button::before{content:none}
.seg button:hover{background:#10275a;color:#fff}
.tabs:not(.gtabs) button:hover{color:#e8f4ff}

/* the four verbs: only the colour of the box changes, softly */
.verb,.verb:hover{transform:none!important;box-shadow:none!important}
.verb{transition:background-color .9s ease!important}
.verb:hover{background:#0b1436}

/* the contract address */
.cab{transition:background-color .45s ease,border-color .45s ease,transform .55s var(--spring)}
.cab:hover{background:#10275a;border-color:#9ef0ff}
.cab:hover code{color:#e8f4ff}
.cab.done{background:#0e2a22}

/* a touch on nothing in particular still answers: a ring opens where you touched */
.zring{position:fixed;z-index:400;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1px solid rgba(158,240,255,.65);animation:zring .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes zring{from{transform:scale(.4);opacity:.9}to{transform:scale(5.5);opacity:0}}

/* ---------- the menu ---------- */
.zm-lab,.zm-part{font-family:Disp,'Inter Display',sans-serif!important;font-weight:500;font-size:11.5px!important;letter-spacing:.16em!important;text-transform:uppercase;color:#7fa6d8!important}
.zm-part{color:#4f78b8!important}
.zm-key{font-family:Disp,'Inter Display',sans-serif;letter-spacing:.04em!important;text-transform:none}
.zm-read{transition:color .45s ease,padding-left .6s var(--soft),background-color .45s ease!important}
.zm-read:hover{color:#fff;padding-left:10px;background:linear-gradient(90deg,rgba(158,240,255,.07),transparent)}
.zm-read:hover span{color:#9ef0ff}
.zm-do:hover .zi{stroke:#fff}
.zm-doh small{transition:color .45s ease}.zm-do:hover .zm-doh small{color:#9ec3ef}
/* Buy in the menu: the colour changes with the text, never hides it */
.zm-buy{transition:background-color .45s ease,border-color .45s ease,transform .55s var(--spring),box-shadow .5s ease!important}
.zm-buy:hover{background:#bff7dc!important;border-color:#bff7dc!important;box-shadow:0 0 0 4px rgba(95,227,161,.12)}
.zm-buy:hover b,.zm-buy:hover em{color:#062a1c!important}.zm-buy:hover small{color:#1d5a40!important}
.zm-buy:active{background:#5fe3a1!important;border-color:#5fe3a1!important}
/* the socials: the headline face, and a chooser for the chart */
.zm-soc a{font-family:Disp,'Inter Display',sans-serif!important;font-size:12px!important;letter-spacing:.06em!important;text-transform:none!important;border-radius:2px}
.zm-soc a:hover{background:#10275a;border-color:#9ef0ff;color:#fff}
/* the overview button carries the courtyard's mark */
.zm-docs i{background:none!important;box-shadow:none!important;width:30px!important;height:30px!important;border-radius:50%!important;opacity:1!important;display:grid;place-items:center}
.zm-docs i svg{width:30px;height:30px}
.zm-docs:hover i svg{filter:drop-shadow(0 0 6px rgba(127,188,255,.7))}
/* Connect in the menu: a plain square with a status light, same rules as every button */
.zm-wallet{border-radius:2px!important;background:rgba(61,112,195,.08)!important;border-color:rgba(158,240,255,.45)!important;transition:background-color .45s ease,border-color .45s ease,transform .55s var(--spring)!important}
.zm-wallet:hover{background:#0e2a22!important;border-color:#5fe3a1!important}
.zm-wallet:active{background:#155c40!important}
.zm-wallet b{font-family:Disp,'Inter Display',sans-serif;font-weight:500!important;letter-spacing:.02em!important}

/* ---------- the wallet: tap your address to let go of it ---------- */
.wpop{position:absolute;z-index:120;min-width:200px;padding:6px;background:#060a20;border:1px solid #1f3a6e;box-shadow:0 20px 60px rgba(0,0,0,.6);opacity:0;transform:translateY(-6px);transition:opacity .4s ease,transform .5s var(--soft);pointer-events:none}
.wpop.on{opacity:1;transform:none;pointer-events:auto}
.wpop small{display:block;padding:8px 10px 6px;font-size:10.5px;letter-spacing:.14em;color:#6f9fd8;text-transform:uppercase}
.wpop code{display:block;padding:0 10px 10px;font-size:12px;color:#cfe6ff;overflow-wrap:anywhere}
.wpop button,.wpop a{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;background:transparent;border:1px solid transparent;color:#cfe6ff;font:inherit;font-size:12px;letter-spacing:.08em;text-align:left;cursor:pointer;text-decoration:none}
.wpop button:hover,.wpop a:hover{background:#10275a;border-color:#2f5a9e}
.wpop .wdis{color:#ff9a8a}
.wpop .wdis:hover{background:#2a0f12;border-color:#ff6b5a;color:#ffd6d0}
.wpop .wdis:active{background:#5a1a1e}
.wpop img,.wpop svg{width:18px;height:18px;flex:none}

/* ---------- the overview opens slowly, part by part ---------- */
.dk-veil{transition:opacity .9s ease!important}
.dk{transition:opacity .9s ease,transform 1.2s var(--soft)!important;transform:translateY(34px) scale(.97)!important}
.docs.show .dk{transform:none!important}
.dk-head,.dk-nav,.dk-body section{opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform 1.1s var(--soft)}
.docs.show .dk-head{opacity:1;transform:none;transition-delay:.25s}
.docs.show .dk-nav{opacity:1;transform:none;transition-delay:.4s}
.docs.show .dk-body section{opacity:1;transform:none}
.docs.show .dk-body section:nth-child(1){transition-delay:.5s}.docs.show .dk-body section:nth-child(2){transition-delay:.62s}.docs.show .dk-body section:nth-child(n+3){transition-delay:.74s}
.dk-part a,.dk-tech a,.dk-steps a{transition:background-color .45s ease,padding-left .6s var(--soft),transform .55s var(--spring)!important}

/* the buy pane: Uniswap for those who would rather not connect here */
.bswap{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:11px 14px;border:1px solid #1f3a6e;color:#9ec3ef;font-size:11.5px;letter-spacing:.06em;text-decoration:none}
.bswap b{color:#cfe6ff;font-weight:500}
.bswap:hover{background:#10275a;border-color:#9ef0ff;color:#fff}

@media (hover:none){.links a:not(.btn):hover::after{transform:scaleX(0);opacity:0}.links a.here::after{transform:scaleX(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.zring{display:none}}

/* ---------- panes that share a place keep one size: the boxes stay, only what is inside changes ---------- */
.pstack{display:grid}
.pstack>.v9pane{grid-area:1/1;display:flex!important;flex-direction:column;min-width:0;opacity:0;visibility:hidden;transform:translateY(8px);filter:blur(4px);
  transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .7s ease,visibility 0s linear .7s;animation:none!important}
.pstack>.v9pane.on{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity .9s ease .15s,transform 1s cubic-bezier(.2,.8,.2,1) .15s,filter .9s ease .15s,visibility 0s}
.pstack>.v9pane>.twin{flex:1}
.pstack>.v9pane>.twin>.device,.pstack>.v9pane>.twin>.v9fig{height:100%}
/* where the sizes are meant to differ (Quadratic and Graph Funding), the frame fades out and the new one in */
.pfree>.v9pane,.pfree>.v9pane.on{animation:none!important}
@keyframes pfade{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.pstack>.v9pane>.plede{min-height:calc(4 * 1.85em);margin-bottom:22px}
@media (max-width:980px){.pstack>.v9pane>.plede{min-height:0}}

/* ---------- Part III, the machine ---------- */
.machine{background:radial-gradient(70% 80% at 50% 45%,rgba(27,52,120,.28),transparent 70%),linear-gradient(180deg,rgba(10,14,39,.85),rgba(5,5,16,.85))!important;position:relative;overflow:hidden}
.machine::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(127,188,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(127,188,255,.045) 1px,transparent 1px);background-size:40px 40px;animation:mgrid 30s linear infinite;-webkit-mask:radial-gradient(80% 80% at 50% 50%,#000 40%,transparent 90%);mask:radial-gradient(80% 80% at 50% 50%,#000 40%,transparent 90%)}
@keyframes mgrid{to{background-position:40px 40px}}
.machfig .mm{transition:stroke .8s ease,stroke-width .8s ease}
.machfig .mm.act{stroke:#7fbcff;stroke-width:2}
.machfig .mring{fill:none;stroke:#9ef0ff;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:mring 1.6s cubic-bezier(.2,.8,.2,1) forwards;pointer-events:none}
.machfig .mst.fire .mring{stroke:#ffcf9a}
@keyframes mring{from{transform:scale(1);opacity:.9}to{transform:scale(1.18,1.5);opacity:0}}
.machfig .mst rect{transition:fill 1s ease,stroke 1s ease,filter 1s ease!important}
.mstrip{display:none!important}

/* the four groups: the headline face, a slow light on hover */
.groups4 a{position:relative;overflow:hidden;transition:border-color .6s ease,background-color .6s ease,transform .55s var(--spring)!important;transform:none!important}
.groups4 a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gc);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--soft)}
.groups4 a:hover{border-color:var(--gc)!important;background:rgba(16,39,90,.55)}
.groups4 a:hover::after{transform:scaleX(1)}
.groups4 a:active{transform:scale(.97)!important}
.groups4 b{font-family:Disp,'Inter Display',sans-serif;font-weight:400!important;font-size:18px!important;letter-spacing:.01em}
.groups4 span{font-size:12.5px}

/* "everything on one page": a quiet panel, not a pill */
.dk-open{border-radius:2px!important;padding:18px 24px!important;margin-top:24px!important;width:100%;max-width:520px;justify-content:space-between;background:linear-gradient(90deg,rgba(16,39,90,.5),rgba(16,39,90,.15))!important;border-color:#2f5a9e!important;font-family:Disp,'Inter Display',sans-serif!important;font-size:17px!important;letter-spacing:.01em!important}
.dk-open span::before{content:'';display:inline-block;width:8px;height:8px;margin-right:14px;border:1px solid #9ef0ff;transform:rotate(45deg);vertical-align:1px;transition:background .5s}
.dk-open:hover{border-color:#9ef0ff!important;background:linear-gradient(90deg,rgba(22,58,122,.7),rgba(16,39,90,.25))!important}
.dk-open:hover span::before{background:#9ef0ff}

/* the draw: the first draw stands out */
#ordSeed{font-size:15px!important;line-height:1.6;color:#e8f4ff;border-left-color:#9ef0ff!important;padding:12px 16px!important;background:linear-gradient(90deg,rgba(158,240,255,.1),rgba(15,26,58,.3))!important}
#ordSeed b{color:#fff}
/* the links to your place: a line, not a box */
.toplace{border:0!important;border-top:1px solid #1f3a6e!important;border-radius:0!important;padding:14px 2px 2px!important;color:#9ec3ef!important;background:none!important;letter-spacing:.12em}
.toplace i{background:#5fe3a1!important}
.toplace::after{transition:transform .5s var(--soft)}
.toplace:hover{color:#fff!important}
.toplace:hover::after{transform:translateX(5px)}
/* the rubric: plain caps, bars that breathe */
.rl b{font-family:Disp,'Inter Display',sans-serif;font-weight:400!important;font-size:15px!important}
.rt{position:relative;overflow:hidden}
.rt i{position:relative;overflow:hidden}
.rt i::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:rbar 5s ease-in-out infinite}
.rb:nth-child(2) .rt i::after{animation-delay:1.2s}.rb:nth-child(3) .rt i::after{animation-delay:2.4s}.rb:nth-child(4) .rt i::after{animation-delay:3.6s}
@keyframes rbar{0%,60%{left:-40%}100%{left:110%}}
/* the bounty: the seat number row fades rather than jumps */
#bnNumRow{transition:opacity .6s ease}
#bnNumRow[hidden]{display:block!important;opacity:0;pointer-events:none}

/* ---------- still in the book: a book that opens, and pages that turn ---------- */
.notyet.book{border:0!important;padding:0!important;background:none!important;margin-top:36px;perspective:1600px}
.bk{display:grid;grid-template-columns:1fr 1.25fr;min-height:300px;border:1px solid #1f3a6e;background:linear-gradient(90deg,#070c24 0%,#0a1232 49.6%,#04081a 50%,#0b1434 100%);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 0 60px rgba(0,0,0,.35);position:relative}
.bk::after{content:'';position:absolute;top:0;bottom:0;left:calc(1 / 2.25 * 100%);width:24px;margin-left:-12px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.45),transparent);pointer-events:none}
.bkl{padding:34px 36px;display:flex;flex-direction:column;transform-origin:right center;transform:rotateY(70deg);opacity:0;transition:transform 1.4s cubic-bezier(.2,.8,.2,1),opacity 1s ease}
.book.open .bkl{transform:none;opacity:1}
.bkl small,.leaf small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#4f78b8}
.bkl h4{font-family:Disp,'Inter Display',sans-serif;font-weight:300;font-size:34px;line-height:1.1;color:#e8f4ff;margin:14px 0 14px}
.bkl p{font-size:13px;line-height:1.8;color:var(--txt);margin:0}
.bkn{margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:14px}
.bkn button{width:38px;height:38px;border:1px solid #2f5a9e;background:transparent;color:#cfe6ff;font-size:18px;cursor:pointer}
.bkn button:hover{background:#10275a;border-color:#9ef0ff}
.bkc{font-size:11px;letter-spacing:.2em;color:#6f9fd8}
.bkr{position:relative;padding:34px 40px;transform-style:preserve-3d}
.leaf{cursor:pointer;transform-origin:left center}
.leaf.out{transform:rotateY(-95deg);opacity:0}
.leaf.outb{transform:rotateY(60deg) translateX(30px);opacity:0}
.leaf.in{animation:leafin .7s cubic-bezier(.2,.8,.2,1)}
.leaf.inb{animation:leafinb .7s cubic-bezier(.2,.8,.2,1)}
@keyframes leafin{from{transform:rotateY(60deg) translateX(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes leafinb{from{transform:rotateY(-95deg);opacity:0}to{transform:none;opacity:1}}
.leaf h5{font-family:Disp,'Inter Display',sans-serif;font-weight:400;font-size:24px;line-height:1.25;color:#e8f4ff;margin:14px 0 16px}
.leaf p{font-family:Disp,'Inter Display',sans-serif;font-weight:300;font-size:17px;line-height:1.7;color:#b9cbe6;margin:0}
@media (max-width:820px){.bk{grid-template-columns:1fr;background:#0a1232}.bk::after{display:none}.bkl{border-bottom:1px solid #1f3a6e}.bkr{padding:26px}}

/* ---------- Part IV ---------- */
.recfig .vring0{fill:none;stroke:#16264f;stroke-dasharray:2 6}
.recfig .varc{fill:none;stroke:#24407a;stroke-width:5;stroke-linecap:round;transition:stroke .8s ease,filter .8s ease}
.recfig .varc.on{stroke:#9ef0ff;filter:drop-shadow(0 0 6px rgba(158,240,255,.5))}
.recfig .vdial{fill:#0b1430;stroke:#3d70c3;stroke-width:1.2;transition:stroke .6s ease,fill .6s ease}
.recfig .on .vdial{stroke:#9ef0ff;fill:#10275a}
.recfig .vhand{stroke:#cfe6ff;stroke-width:1.6;stroke-linecap:round}
.recfig .vdoor{fill:#0b1534;stroke:#7fbcff;stroke-width:1.2;transition:fill .9s ease,stroke .9s ease,opacity .9s ease}
.recfig .vdoor.lost{stroke:#3d5a8a;stroke-dasharray:4 4;opacity:.8}
.recfig .vdoor.open{fill:#10275a;stroke:#9ef0ff}
.recfig .vbolt{fill:#24407a}
#recN button,#recK button{transition:background-color .5s ease,border-color .5s ease,color .5s ease,transform .55s var(--spring)}
#recN button.on,#recK button.on{animation:numpop .6s var(--spring)}
@keyframes numpop{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.reclist input{transition:opacity .5s ease,transform .6s var(--soft)}
.reclist input{animation:inslide .6s var(--soft) both}
@keyframes inslide{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sweepfig .swin{fill:#0b1534;stroke:#7fbcff}
.sweepfig .sread{stroke:#9ef0ff;stroke-width:1.2}
.sweepfig .sreadg{fill:#9ef0ff}
.sweepfig .slane{stroke-width:1;stroke-dasharray:2 5}.sweepfig .slane.sell{stroke:#5fe3a1}.sweepfig .slane.dust{stroke:#ffcf9a}.sweepfig .slane.hid{stroke:#3d5a8a}
.sweepfig .spit{fill:#2a160c;stroke:#ffcf9a;stroke-opacity:.6}
.sweepfig .stok2{fill:#0b1430;stroke-width:1.1}.sweepfig .stok2.sell{stroke:#5fe3a1}.sweepfig .stok2.dust{stroke:#ffcf9a}.sweepfig .stok2.hid{stroke:#6b8ac0;stroke-dasharray:3 2}
.sweepfig .stag{font-size:10px;letter-spacing:.1em}.sweepfig .stag.sell{fill:#5fe3a1}.sweepfig .stag.dust{fill:#ffcf9a}.sweepfig .stag.hid{fill:#9ec3ef}
/* the sweep keeps its size: the device stays tall, its lists scroll */

#swDev.fx-burn{animation:fxburn 1.8s ease}#swDev.fx-sell{animation:fxsell 1.8s ease}
@keyframes fxburn{40%{box-shadow:0 0 0 6px #070a1c,0 0 50px rgba(255,155,102,.45);border-color:#ffb27a}}
@keyframes fxsell{40%{box-shadow:0 0 0 6px #070a1c,0 0 50px rgba(95,227,161,.4);border-color:#5fe3a1}}
.device:has(#lsText) .robe{margin:auto;width:200px;padding:0}
.robe{width:210px!important}
.robe .rcell{fill:#7fbcff;transition:fill .6s}.robe .rcell.g{fill:#5fe3a1}
.robe .robeline{fill:none;stroke:#cfe6ff;stroke-width:1.6;stroke-linejoin:round;stroke-width:1.4}
.robe .robeface{fill:#060a20;stroke:#7fbcff;stroke-width:1}
.robe .robeeye{stroke:#5fe3a1;stroke-width:2.6;filter:drop-shadow(0 0 6px #5fe3a1)}
.robe .robeenv2{fill:#060a20;stroke:#cfe6ff;stroke-width:1.2}.robe .robeflap{fill:none;stroke:#cfe6ff;stroke-width:1.2}
.robe .robecap{fill:#6fb89d;font-size:9px;letter-spacing:.14em;font-family:Mono,monospace;text-transform:uppercase}

/* ---------- interludes between the stations ---------- */
.ilude{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:220px;margin-top:110px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 50% 50%,#08102e 0%,#03040c 75%)}
.ilude canvas{position:absolute;inset:0;display:block}
.ilude::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#03040c 0%,transparent 18%,transparent 82%,#03040c 100%);pointer-events:none}
.ilude .ic{position:absolute;left:max(24px,calc(50vw - 640px + 48px));bottom:22px;z-index:2;max-width:560px}
.ilude .ic small{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#4f78b8;margin-bottom:6px}
.ilude .ic span{font-family:Disp,'Inter Display',sans-serif;font-weight:300;font-size:clamp(17px,1.8vw,22px);color:#cfe6ff}
.ilude[data-ilude=robes]{height:260px}

/* ---------- the end of the page ---------- */
.outro{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:140px;padding:120px 0 110px;overflow:hidden;border-top:1px solid var(--line);background:radial-gradient(60% 70% at 70% 50%,rgba(27,52,120,.35),transparent 70%),#03040c}
.outro .oring{position:absolute;right:max(-80px,calc(50vw - 640px - 40px));top:50%;width:min(520px,70vw);transform:translateY(-50%);color:#7fbcff;opacity:.16;animation:oring 9s ease-in-out infinite}
.outro .oring svg{width:100%;height:auto;display:block}
@keyframes oring{0%,100%{opacity:.12}50%{opacity:.2}}
.outro .oc{position:relative;z-index:2;margin-left:max(24px,calc(50vw - 640px + 48px));max-width:640px;padding-right:24px}
.outro small{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:#4f78b8}
.outro h2{font-family:Disp,'Inter Display',sans-serif;font-weight:500;font-size:clamp(40px,5.4vw,76px);line-height:1;color:#fff;margin:18px 0 18px;letter-spacing:-.02em}
.outro h2 span{display:block;font-weight:300;color:var(--ink)}
.outro p{font-size:14px;line-height:1.8;color:var(--txt);max-width:520px}
.outro .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
footer{margin-top:0!important}

/* ---------- each part has its own tone; the page moves between them slowly ---------- */
body{transition:background-color 1.6s ease}
html[data-part=words] body{background-color:#05071a}
html[data-part=order] body{background-color:#040b16}
html[data-part=yours] body{background-color:#08061a}

/* ---------- the overview, livelier inside ---------- */
.dk-head{position:relative;overflow:hidden}
.dk-head::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(127,188,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(127,188,255,.05) 1px,transparent 1px);background-size:28px 28px;animation:mgrid 24s linear infinite;pointer-events:none}
.dk-body .dkv{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform 1s var(--soft)}
.dk-body .dkv.in{opacity:1;transform:none}
.dk-tech a{transition:background-color .5s ease,border-color .5s ease,transform .55s var(--spring)!important}
.dk-tech a:hover{background:#10275a!important;border-color:#9ef0ff!important}

/* the bounty, a little more alive */
.bountyfig .bpot{fill:#0b1534;stroke:#7fbcff}
.bountyfig .bcoin{fill:#5fe3a1;filter:drop-shadow(0 0 5px #5fe3a1)}
.graphfig .gband{fill:none!important;stroke:rgba(127,188,255,.18)!important;stroke-linecap:butt}
.graphfig .gband.l1{stroke:rgba(127,188,255,.13)!important}
.robe{width:280px!important;margin:auto!important}
.robe .robecap{font-size:8px!important;fill:#7fc9a6!important}
.emtry{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px;transition:opacity .4s,transform .4s}
.emtry small{width:100%;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#4f7f6c}
.emtry button{font:inherit;font-size:12px;letter-spacing:0;text-transform:none;padding:7px 12px;border-radius:999px;background:transparent;border:1px solid #24563f;color:#a9e6c9;cursor:pointer;transition:border-color .25s,background .25s,color .25s,transform .2s}
.emtry button:hover{border-color:#5fe3a1;background:#0b1f1a;color:#e6fff3;transform:translateY(-1px)}
.emtry.gone{opacity:0;transform:translateY(4px)}
.device.emer{display:flex;flex-direction:column}.device.emer .emask{margin-top:auto;padding-top:10px}
/* Graph Funding, simple */
.gsimple .gl{fill:none;stroke:#7fbcff;stroke-opacity:.45;stroke-width:1.2}
.gsimple .gbox{fill:#0b1430;stroke:#9ef0ff;stroke-width:1}.gsimple .gbox.pot{fill:#10204a}
.gsimple .gname{font-family:Mono,monospace;font-size:13px;fill:#e8f4ff}
.gsimple .gpct{font-family:Mono,monospace;font-size:11px;fill:#9ef0ff}
.gsimple .gcom3{fill:#5fe3a1;opacity:.8}
.gsimple .gproj3{fill:#0b1430;stroke:#9ec3ef;stroke-width:1}.gsimple .gproj3.two{stroke:#5fe3a1;stroke-width:1.4}
.gsimple .gpn{font-family:Mono,monospace;font-size:10.5px;fill:#cfe6ff}
.gsimple .gcoin{fill:#ffd08a}
/* smooth switches */


@keyframes pfade2{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.rfade{animation:rfade .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes rfade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* menu: disconnect, only when a wallet is connected */
.zm-dis{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:-4px 0 14px;padding:0 14px;height:0;opacity:0;overflow:hidden;border:1px solid transparent;background:rgba(255,77,94,.08);color:#ff8a95;font:inherit;font-size:11px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;pointer-events:none;
  transition:height .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease,margin .55s cubic-bezier(.2,.8,.2,1),background-color .35s ease,border-color .35s ease,color .35s ease,transform .2s ease}
.zm-dis i{width:12px;height:12px;border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;position:relative;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.zm-dis i::after{content:'';position:absolute;left:50%;top:-4px;width:1.5px;height:7px;margin-left:-.75px;background:currentColor}
html.zconn .zm-dis{height:44px;opacity:1;margin:-4px 0 18px;border-color:rgba(255,77,94,.55);pointer-events:auto}
.zm-dis:hover{background:#ff4d5e;border-color:#ff4d5e;color:#fff}.zm-dis:hover i{transform:rotate(180deg)}
.zm-dis:active{transform:scale(.98)}
.zm-dis.going{animation:zdis .42s ease both}@keyframes zdis{50%{background:#ff4d5e;color:#fff}100%{opacity:0;transform:scale(.97)}}
html.zconn .zm-wallet{cursor:default}html.zconn .zm-wallet em{display:none}
/* close buttons turn red */
.zm-x{transition:background-color .3s ease,border-color .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)!important}
.zm-x span{transition:background-color .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)!important}
.zm-x:hover{background:#ff4d5e!important;border-color:#ff4d5e!important}.zm-x:hover span{background:#fff!important}
.zm-x:hover span:first-child{transform:rotate(135deg)!important}.zm-x:hover span+span{transform:rotate(45deg)!important}
.zm-x:active{transform:scale(.92)}
/* the three lines answer the pointer */
html:not(.zopen) .zpull:hover span:nth-child(1){left:11px;width:22px;transform:translateY(-1px)}
html:not(.zopen) .zpull:hover span:nth-child(2){left:11px;width:22px}
html:not(.zopen) .zpull:hover span:nth-child(3){left:11px;width:22px;transform:translateY(1px)}
html:not(.zopen) .zpull:hover{border-color:#9ef0ff;background:rgba(61,112,195,.2)}
/* 04 · the three views, clearly buttons */
.numtabs{align-items:center;flex-wrap:wrap;gap:12px!important}
.numtabs button{padding:13px 22px!important;font-size:12px!important;letter-spacing:.2em!important;border:1px solid rgba(158,240,255,.55)!important;background:rgba(61,112,195,.14)!important;color:#e8f4ff!important;position:relative;overflow:hidden;transition:background-color .35s ease,border-color .35s ease,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease!important}
.numtabs button:hover{transform:translateY(-2px);background:rgba(61,112,195,.3)!important;box-shadow:0 8px 24px rgba(127,188,255,.18)}
.numtabs button.on{background:#9ef0ff!important;color:#06102a!important;border-color:#9ef0ff!important;box-shadow:0 0 24px rgba(158,240,255,.35)}
.numtabs button.on i{background:#06102a!important;box-shadow:none!important}
.numtabs button.unseen::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:50%;background:linear-gradient(90deg,transparent,rgba(158,240,255,.35),transparent);transform:skewX(-20deg);opacity:0}
.numtabs button.unseen.nudge::after{animation:numsweep 1.3s cubic-bezier(.4,0,.2,1)}
.numtabs button.unseen.nudge{animation:numglow 1.3s ease}
@keyframes numsweep{0%{left:-60%;opacity:1}100%{left:120%;opacity:1}}
@keyframes numglow{40%{border-color:#9ef0ff;box-shadow:0 0 22px rgba(158,240,255,.45)}}
.numtabs button.unseen>i{background:#ffb27a!important;box-shadow:0 0 8px #ffb27a!important}
.numseen{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#ffb27a;margin-left:6px;transition:color .5s ease}
.numseen.done{color:#5fe3a1}
.links a.nroots{color:#9ef0ff}
/* interludes and the seam: each its own ground */
.ilude[data-ilude=rain]{background:linear-gradient(180deg,#071030 0%,#040818 100%)!important;border-color:rgba(95,227,161,.22)!important}
.ilude[data-ilude=rain]::before{content:'';position:absolute;inset:0;background:radial-gradient(40% 90% at 72% 50%,rgba(95,227,161,.08),transparent 70%),repeating-linear-gradient(90deg,rgba(127,188,255,.035) 0 1px,transparent 1px 48px);pointer-events:none}
.ilude[data-ilude=rain]::after{background:linear-gradient(90deg,#040818 0%,transparent 14%,transparent 86%,#040818 100%)!important}
.ilude[data-ilude=robes]{background:linear-gradient(180deg,#0a0f2c 0%,#141633 52%,#07091c 52.2%,#04060f 100%)!important;border-color:rgba(255,214,150,.18)!important}
.ilude[data-ilude=robes]::after{background:linear-gradient(90deg,#05070f 0%,transparent 12%,transparent 88%,#05070f 100%)!important}
.ilude[data-ilude=robes] .ic small{color:#c9a978}
.seam{background:linear-gradient(90deg,#0a1236 0%,#060a1c 45%,#04140f 100%);border-top:1px solid rgba(127,188,255,.16);border-bottom:1px solid rgba(95,227,161,.18);height:120px!important}
.seam::before{content:'';position:absolute;inset:0;background:radial-gradient(30% 140% at 6% 50%,rgba(158,200,255,.10),transparent 70%),radial-gradient(30% 140% at 94% 50%,rgba(95,227,161,.10),transparent 70%);pointer-events:none}
.seam .sb{color:#5fe3a1!important}
/* quotes and the Heralds stand on their own ground, not see-through */
.qband{background:linear-gradient(180deg,#081030,#060b24)!important;border:1px solid #1f3a6e!important;padding:40px 32px!important;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.heralds{background:linear-gradient(180deg,#081030,#060b24)!important;border-color:#1f3a6e!important}
/* the book: left page lighter, right page darker, one clean fold between */
.bk{background:none!important;grid-template-columns:1fr 1.25fr}
.bk::after{display:none!important}
.bkl{background:#0c1640!important}
.bkr{background:#060b24!important;border-left:1px solid #2a4a7a}
@media (max-width:820px){.bkr{border-left:0;border-top:1px solid #2a4a7a}}
/* dropdowns drawn by the page */
.zsel{position:relative}
.zsel select{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;padding:0!important;border:0!important}
.zsel-b{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;background:#060b24;border:1px solid #2a4a7a;color:#e8f4ff;font:inherit;font-size:13.5px;padding:12px 14px;border-radius:4px;cursor:pointer;transition:border-color .3s ease,background-color .3s ease}
.zsel-b:hover{border-color:#9ef0ff;background:#0a1234}
.zsel-b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zsel-b i{flex:none;width:8px;height:8px;border-right:1.5px solid #9ef0ff;border-bottom:1.5px solid #9ef0ff;transform:translateY(-2px) rotate(45deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.zsel.open .zsel-b{border-color:#9ef0ff}.zsel.open .zsel-b i{transform:translateY(2px) rotate(225deg)}
.zsel.one .zsel-b{cursor:default;color:#9fb3d6}.zsel.one .zsel-b i{opacity:.35}
.zsel.nudge .zsel-b{animation:zselno .45s ease}@keyframes zselno{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.zsel-l{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;max-height:260px;overflow:auto;background:#060b24;border:1px solid #9ef0ff;border-radius:4px;box-shadow:0 18px 44px rgba(0,0,0,.55);padding:4px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.zsel.open .zsel-l{opacity:1;transform:none;pointer-events:auto}
.zsel-o{padding:10px 12px;font-size:13px;color:#cfe6ff;border-radius:3px;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.zsel-o:hover{background:#10275a;color:#fff}.zsel-o.on{color:#9ef0ff}.zsel-o.on::before{content:'';display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:50%;background:#9ef0ff;vertical-align:1px}
.zsel-o.off{opacity:.4;cursor:default}
/* The Courts, simple */
.csimple .ccard{fill:#0b1430;stroke:#6f9fd8;stroke-width:1.1;transition:fill .4s ease,stroke .4s ease}
.csimple .ccard.mid{fill:#13305f;stroke:#9ef0ff;stroke-width:1.6}
.csimple .cjudge{font-family:Mono,monospace;font-size:11px;letter-spacing:.12em;fill:#6f9fd8}
.csimple .ctier{font-family:Mono,monospace;font-size:10px;letter-spacing:.2em;fill:#9ec3ef;text-transform:uppercase}
.csimple .cnum{font-family:Disp,'Inter Display',sans-serif;font-size:30px;font-weight:300;fill:#e8f4ff}
.csimple .croom{fill:none;stroke:#3d5a8a;stroke-width:1}.csimple .croomt{font-family:Mono,monospace;font-size:9.5px;letter-spacing:.2em;fill:#6f9fd8}
.csimple .cverdict{font-family:Disp,'Inter Display',sans-serif;font-size:21px;font-weight:300;fill:#9ef0ff}
.csimple .carrow{stroke:#9ef0ff;stroke-width:1;stroke-dasharray:2 4;fill:none}
@media (max-width:820px){.bk{grid-template-columns:1fr!important}}
/* Fig. 16 · the sweep, as a scene */
.swnew .swwal{fill:#081030;stroke:#2a4a7a}
.swnew .swlab{font-family:Mono,monospace;font-size:10px;letter-spacing:.2em;fill:#6f9fd8}
.swnew .swtok{fill:#0b1430;stroke:#3d5a8a;stroke-width:1;transition:stroke .3s ease,fill .3s ease}
.swnew .swtok.sell{stroke:#5fe3a1}.swnew .swtok.dust{stroke:#ffb27a}.swnew .swtok.hid{stroke:#8aa2cf;stroke-dasharray:3 2}
.swnew .swtn{font-family:Mono,monospace;font-size:10.5px;fill:#cfe6ff}
.swnew .swtag{font-family:Mono,monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.swnew .swtag.sell{fill:#5fe3a1}.swnew .swtag.dust{fill:#ffb27a}.swnew .swtag.hid{fill:#9ec3ef}
.swnew .swlock{fill:none;stroke:#9ec3ef;stroke-width:1.2}
.swnew .swbeam{fill:#9ef0ff}
.swnew .sweth{fill:#0e2a22;stroke:#5fe3a1;stroke-width:1.2}.swnew .sweth2{fill:none;stroke:#5fe3a1;stroke-width:1}
.swnew .swdrop{fill:#5fe3a1}
.swnew .swpit{fill:#1a0c06;stroke:#ffb27a;stroke-opacity:.6}.swnew .swpitg{fill:#ff8a3d}
.swnew .swemb{fill:#ffb27a}
.swnew .swvault{fill:#0a1230;stroke:#8aa2cf;stroke-dasharray:4 3}
.swnew .swdst{font-family:Mono,monospace;font-size:10px;letter-spacing:.16em}
.swnew .swdst.sell,.swnew .swnum.sell{fill:#5fe3a1}.swnew .swdst.dust,.swnew .swnum.dust{fill:#ffb27a}.swnew .swdst.hid,.swnew .swnum.hid{fill:#9ec3ef}
.swnew .swnum{font-family:Disp,'Inter Display',sans-serif;font-size:18px}
.swnew .swenv{fill:#10204a;stroke:#e8f4ff;stroke-width:1.2}.swnew .swenvf{fill:none;stroke:#e8f4ff;stroke-width:1.1}
.swnew .swenvt{font-family:Disp,'Inter Display',sans-serif;font-size:12px;font-style:italic;fill:#e8f4ff}

/* the sweep: the device shows everything it holds, never scrolls; its three views keep one size;
   the figure beside it is the same height, its scene centred between a header and its caption */
#swDev{height:auto!important;display:block}
#swOut{overflow:visible!important}
@media (min-width:981px){
  #sweep .twin{align-items:stretch!important}
  #sweep .swfig{height:auto!important;display:flex!important;flex-direction:column;padding:22px 24px 16px!important}
  #sweep .swfig .swstage{flex:1;display:flex;align-items:center;justify-content:center;padding:18px 0}
  #sweep .swfig .swstage svg{width:100%;height:auto;max-height:100%}
  #sweep .swfig figcaption{margin-top:auto}
}
.swtop{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--line2);letter-spacing:.12em;border-bottom:1px solid #1a3a6a;padding-bottom:10px;text-transform:uppercase}
#sweep .swfig{justify-content:space-between}
#sweep .swfig .swstage{flex:1 1 auto}
.swleg{display:grid;gap:10px;padding:16px 0 14px;border-top:1px solid #1a3a6a}
.swleg>div{display:grid;grid-template-columns:10px 74px 1fr;align-items:baseline;gap:10px;font-size:12px;line-height:1.55;color:#9fb3d6}
.swleg i{width:8px;height:8px;border-radius:50%;align-self:center}
.swleg b{font-weight:500;letter-spacing:.06em}
.swleg .sell i{background:#5fe3a1}.swleg .sell b{color:#5fe3a1}
.swleg .dust i{background:#ffb27a}.swleg .dust b{color:#ffb27a}
.swleg .hid i{border:1.5px dashed #9ec3ef}.swleg .hid b{color:#9ec3ef}
/* smooth scrolling: the bar no longer blurs what moves under it every frame; it is simply dark */
nav#nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(5,6,18,.94)!important}
.pstack>.v9pane:not(.on){filter:none!important}
/* the sweep keeps one size (the size of a wallet with five dust tokens); more than that scrolls inside the device */
@media (min-width:981px){
  #swDev{height:821px!important;display:flex!important;flex-direction:column}
  #swOut{flex:1;min-height:0;overflow:auto!important;scrollbar-width:thin;scrollbar-color:#1f3a6e transparent}
  #sweep .swfig{height:821px!important}
}
.bkr{transform-style:flat!important}.book{perspective:none!important}