/* KADABRA — the vanishing act. Black velvet, BNB gold, one spotlight. */
:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body,#root{min-width:320px;height:100%;margin:0}
:root{
  --bg:#070604;--velvet:#0d0b07;--plum:#14110a;
  --surface:#100e09;--surface-raised:#17140c;--glass:#14110acc;
  --line:#2c2513;--line-bright:#5a4a1c;
  --text:#f5efdc;--text-soft:#f5efdcd1;--muted:#d8c89a8c;
  --amethyst:#f0b90b;--amethyst-deep:#b8860b;--amethyst-glow:#f0b90b33;
  --gold:#f0b90b;--gold-hi:#ffd766;
  --mono:"Xanh Mono",ui-monospace,monospace;--display:"Melodrama",Georgia,serif;
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--mono);overflow:hidden}
button,input{font:inherit}button{color:inherit}
*{scrollbar-width:thin;scrollbar-color:#f0b90b33 transparent}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}
::-webkit-scrollbar-thumb{background:#f0b90b2e}::-webkit-scrollbar-thumb:hover{background:#f0b90b52}
::selection{background:var(--amethyst);color:var(--bg)}

.app{position:relative;min-height:100dvh;height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
/* velvet: vertical folds + vignette */
.app:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(90deg,#ffffff03 0 1px,#0000 1px 96px),
    radial-gradient(120% 80% at 50% 120%,#2a1f08 0,#070604 60%),
    linear-gradient(#070604,#070604)}
.spotlight{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(38% 55% at var(--sx,68%) var(--sy,52%),#f0b90b2e 0,#f0b90b12 35%,#0000 70%);
  transition:background-position .4s}
.grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:.9}
canvas.ascii{position:fixed;top:64px;pointer-events:none;z-index:1;-webkit-mask-image:linear-gradient(#000 0,#000 86%,#0000);mask-image:linear-gradient(#000 0,#000 86%,#0000)}
canvas.ascii[data-side=left]{left:0}canvas.ascii[data-side=right]{right:0}

/* ---------- marquee ---------- */
.marquee{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,4vw,56px) 0}
.eye-row{grid-column:1/-1;display:grid;place-items:center;padding:4px 0 0}
.eye{width:480px;height:150px;max-width:100%;filter:drop-shadow(0 0 22px #f0b90b45)}
@media (width<=760px){.eye{width:300px;height:94px}}
.wordmark{font:600 22px/1 var(--display);letter-spacing:.3em;color:var(--text);text-decoration:none}
.wordmark span{color:var(--gold)}
.wordmark{text-shadow:0 0 24px #f0b90b33}
.marquee-right{display:flex;gap:10px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--line);color:var(--text-soft);font:400 10px/1 var(--mono);letter-spacing:.14em;text-decoration:none;background:#07060480}
.chip-link:hover{border-color:var(--line-bright);color:var(--text)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}

/* ---------- stage ---------- */
.stage{position:relative;z-index:2;width:min(100% - 40px,1000px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 470px;grid-template-rows:auto 1fr;gap:6px clamp(28px,5vw,80px);align-items:center;align-content:center;padding:0 0 24px;min-height:0}
.eyebrow{color:var(--amethyst);letter-spacing:.2em;font:400 10px/1.4 var(--mono)}
.playbill h1{margin:14px 0 22px;font:500 clamp(64px,8vw,124px)/.88 var(--display);letter-spacing:-.01em;color:var(--text)}
.playbill h1 i{font-style:italic;font-weight:400;color:var(--amethyst)}
.lede{max-width:44ch;color:var(--text-soft);margin:0;font:400 17px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.showbill{display:grid;grid-template-columns:repeat(3,auto);gap:0 28px;margin:0 0 20px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);width:fit-content}
.showbill dt{color:var(--muted);letter-spacing:.16em;font:400 9px/1 var(--mono);margin-bottom:8px}
.showbill dd{margin:0;font:400 26px/1 var(--mono);color:var(--text)}
.fineprint{color:var(--muted);font:400 10.5px/1.6 var(--mono);letter-spacing:.06em;margin:0}

/* ---------- the trick (glass card) ---------- */
.trick{position:relative;background:linear-gradient(180deg,#141108f2,#0b0906f2);border:1px solid #f0b90b40;box-shadow:inset 0 0 0 1px #00000080,inset 0 1px 0 #ffffff10,0 40px 90px #000000b0,0 0 60px #f0b90b0d;backdrop-filter:blur(8px)}
.trick:before{content:"";position:absolute;inset:6px;pointer-events:none;border:1px solid #f0b90b1f}
.trick:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 50% at 50% 0%,#f0b90b12,#0000 70%)}
.corner{position:absolute;width:18px;height:18px;pointer-events:none;z-index:2}
.corner:before,.corner:after{content:"";position:absolute;background:var(--gold);top:0;left:0}
.corner:before{width:18px;height:1px}.corner:after{width:1px;height:18px}
.corner.tl{left:-1px;top:-1px}.corner.tr{right:-1px;top:-1px;transform:scaleX(-1)}.corner.bl{left:-1px;bottom:-1px;transform:scaleY(-1)}.corner.br{right:-1px;bottom:-1px;transform:scale(-1)}
.card-heading{justify-content:space-between;align-items:center;min-height:70px;padding:0 26px;display:flex;border-bottom:1px solid #f0b90b26;position:relative;z-index:1}
.card-heading h2{margin:6px 0 0;font:500 27px/1 var(--display);letter-spacing:.01em}
.privacy-badge{color:var(--gold);letter-spacing:.16em;align-items:center;gap:7px;padding:7px 11px;font:400 10px/1 var(--mono);display:flex;border:1px solid #f0b90b55;border-radius:999px;background:#f0b90b10;box-shadow:0 0 14px #f0b90b1a}
.privacy-badge svg,.primary-action svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px}

.route-stack{padding:6px 12px 0;position:relative;z-index:1}
.route-panel{padding:16px 14px 14px}
.route-panel+.route-panel{border-top:1px solid #f0b90b1f}
.route-meta{color:var(--muted);letter-spacing:.14em;justify-content:space-between;align-items:center;font:400 10px/1 var(--mono);display:flex}
.route-meta>span:first-child,.recipient-control>span:first-child{color:var(--text-soft)}
.route-meta b{font:500 14px/1 var(--display);color:var(--gold);margin-right:8px;letter-spacing:.04em}
.recipient-control{align-items:center;gap:11px;min-width:0;display:flex;width:100%}
.recipient-control>span{flex:none}
.route-main{justify-content:space-between;align-items:flex-end;gap:14px;margin-top:10px;display:flex}
.amount-wrap{flex:1;min-width:0}
.amount-input{width:100%;color:var(--text);letter-spacing:-.01em;background:0 0;border:0;outline:0;padding:0;font:400 clamp(34px,4.6vw,48px)/1 var(--mono);display:block;text-shadow:0 0 30px #f0b90b1a}
.amount-input::placeholder{color:#f5efdc55}
.amount-wrap>span{color:var(--muted);margin-top:6px;font:400 10px/1 var(--mono);letter-spacing:.06em;display:block}
.recipient-input-wrap{flex:1;min-width:0;color:var(--muted);align-items:center;gap:7px;display:flex}
.recipient-input-wrap svg{stroke-width:1.5px;flex:none;width:12px;height:12px}
.recipient-input{width:100%;color:var(--text-soft);letter-spacing:.04em;text-overflow:ellipsis;background:0 0;border:0;outline:0;padding:7px 0;font:400 10px/1.2 var(--mono);overflow:hidden}
.recipient-input:focus{color:#fff}.recipient-input::placeholder{color:var(--muted);opacity:1}

.asset-select{text-align:left;cursor:pointer;min-width:176px;background:#f0b90b08;border:1px solid #f0b90b2a;border-radius:999px;grid-template-columns:auto 1fr 18px;align-items:center;gap:10px;padding:6px 12px 6px 6px;display:grid;transition:border-color .18s,background .18s,box-shadow .18s}
.asset-select:hover{background:#f0b90b14;border-color:#f0b90b66;box-shadow:0 0 18px #f0b90b1f}
.asset-select>span:nth-child(2){flex-direction:column;gap:4px;display:flex}
.asset-select strong{font:600 13px/1 var(--mono)}
.asset-select small{color:var(--muted);font:400 10px/1 var(--mono)}
.asset-select>svg{fill:none;width:18px;stroke:var(--muted);stroke-width:1.5px}
.asset-logo{border:1px solid #f0b90b55;color:var(--text-soft);background:#221c0e;border-radius:50%;flex:none;place-items:center;font:400 9px/1 var(--mono);display:grid;position:relative;overflow:hidden;box-shadow:0 0 0 3px #f0b90b10}
.asset-logo-image{object-fit:cover;z-index:1;width:100%;height:100%;position:absolute;inset:0}
.asset-logo-fallback{z-index:0;position:relative}
.chain-logo-badge{z-index:2;color:#0a0b0d;background:var(--gold);border-radius:50%;place-items:center;font:400 8px/1 var(--mono);display:grid;position:absolute;bottom:1px;right:1px;overflow:hidden;box-shadow:0 0 0 2px #100e09}

.flip-button{z-index:2;color:#1a1204;cursor:pointer;width:32px;height:32px;background:linear-gradient(180deg,#ffd766,#c9950a);border:0;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;top:50%;right:22px;transform:translateY(-50%);transition:transform .25s,box-shadow .25s;box-shadow:0 0 0 4px #0b0906,0 0 0 5px #f0b90b55,0 6px 18px #f0b90b40}
.flip-button:hover{transform:translateY(-50%) rotate(180deg);box-shadow:0 0 18px var(--amethyst-glow)}
.flip-button svg{width:16px;height:16px}

.route-details{justify-content:center;align-items:center;gap:14px;margin:4px 14px 12px;padding:10px 0;display:flex;border-top:1px solid #f0b90b1f;position:relative;z-index:1}
.route-details>span{color:var(--muted);letter-spacing:.14em;font:400 10px/1.3 var(--mono);text-transform:uppercase}
.route-details>i{color:var(--gold);font-style:normal;font-size:9px}

.xmr-toggle{width:fit-content;color:var(--muted);cursor:pointer;letter-spacing:.12em;align-items:center;gap:8px;margin:0 auto 12px;position:relative;z-index:1;font:400 9px/1 var(--mono);display:flex}
.xmr-toggle input{accent-color:var(--amethyst);width:12px;height:12px;margin:0}

.primary-action{position:relative;z-index:1;width:calc(100% - 44px);min-height:52px;color:#1a1204;cursor:pointer;letter-spacing:.26em;background:linear-gradient(180deg,#ffd766,var(--gold) 60%,#c9950a);border:0;justify-content:center;align-items:center;gap:10px;margin:0 22px;font:400 13px/1 var(--mono);display:flex;box-shadow:0 0 0 1px #ffe59a80 inset,0 0 0 3px #0b0906,0 0 0 4px #f0b90b66,0 14px 40px #f0b90b40;transition:transform .15s,box-shadow .2s,filter .2s}
.primary-action:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 0 0 1px #ffe59a66 inset,0 16px 40px #f0b90b6b}
.primary-action:disabled{cursor:not-allowed;opacity:.28;filter:grayscale(.4);transform:none;box-shadow:none}
.primary-action.ready{animation:shimmer 2.4s linear infinite;background-size:200% 100%;background-image:linear-gradient(110deg,#c9950a 0,#ffd766 30%,#fff1b8 50%,#ffd766 70%,#c9950a 100%)}
@keyframes shimmer{to{background-position:-200% 0}}
.card-footnote{color:var(--muted);letter-spacing:.18em;justify-content:center;align-items:center;gap:12px;padding:16px 16px 18px;font:400 9px/1 var(--mono);display:flex;position:relative;z-index:1}
.card-footnote i{color:var(--gold);font-style:normal;font-size:8px;opacity:.8}

/* ---------- vanish ---------- */
.vanish-glyph{position:fixed;z-index:9;pointer-events:none;color:var(--amethyst);font:400 40px/1 var(--display);text-shadow:0 0 14px var(--amethyst-glow)}

/* ---------- picker ---------- */
.picker-backdrop{z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#050402d9;place-items:center;padding:36px;display:grid;position:fixed;inset:0}
.picker-backdrop[hidden]{display:none}
.picker{border:1px solid var(--line-bright);background:#0e0c07;grid-template-rows:auto 1fr auto;width:min(100%,970px);height:min(690px,100dvh - 72px);display:grid;box-shadow:0 40px 120px #000,0 0 0 1px #f0b90b14}
.picker-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;min-height:78px;padding:0 22px;display:flex}
.picker-header h2{margin:5px 0 0;font:400 26px/1 var(--display)}
.icon-button{cursor:pointer;background:0 0;border:0;width:40px;height:40px;color:var(--text-soft);font:300 29px/1 sans-serif}
.icon-button:hover{color:var(--text);background:var(--surface-raised)}
.picker-body{grid-template-columns:36% 64%;min-height:0;display:grid}
.chain-column,.token-column{flex-direction:column;min-height:0;padding:18px;display:flex;overflow:hidden}
.chain-column{border-right:1px solid var(--line)}
.search-field{border:1px solid var(--line);background:var(--surface);flex:none;align-items:center;gap:11px;height:48px;padding:0 14px;display:flex}
.search-field:focus-within{border-color:var(--amethyst-deep)}
.search-field svg{fill:none;width:18px;height:18px;stroke:var(--muted);stroke-width:1.5px}
.search-field input{width:100%;color:var(--text);background:0 0;border:0;outline:0;font:400 12px/1 var(--mono)}
.search-field input::placeholder{color:#f5efdc55}
.column-label{color:var(--amethyst);letter-spacing:.16em;margin:22px 7px 9px;font:400 10px/1 var(--mono)}
.asset-list{min-height:0;overflow-y:auto}
.asset-row{text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;align-items:center;gap:12px;width:100%;min-height:62px;padding:9px 10px;display:flex}
.asset-row:hover{background:var(--surface);border-color:var(--line)}
.asset-row.selected{background:var(--surface-raised);border-color:var(--amethyst-deep)}
.asset-copy{flex-direction:column;flex:1;gap:5px;min-width:0;display:flex}
.asset-copy strong{color:var(--text-soft);text-overflow:ellipsis;white-space:nowrap;font:600 12px/1 var(--mono);overflow:hidden}
.asset-copy strong em{color:var(--muted);margin-left:5px;font-style:normal;font-weight:400}
.asset-copy small{color:var(--muted);font:400 10px/1 var(--mono)}
.check{background:var(--amethyst);width:20px;height:20px;color:#1a1204;border-radius:50%;place-items:center;font:700 11px/1 sans-serif;display:grid}
.row-arrow{color:var(--muted);font-size:14px}
.empty-state{color:var(--muted);padding:26px 10px;font:400 11px/1.5 var(--mono)}
.picker-footer{border-top:1px solid var(--line);color:var(--muted);letter-spacing:.12em;justify-content:flex-end;align-items:center;min-height:50px;padding:0 22px;font:400 9px/1 var(--mono);display:flex}
kbd{border:1px solid var(--line);background:var(--surface);color:var(--text-soft);font:inherit;margin-right:5px;padding:4px 6px}

/* ---------- the act (progress) ---------- */
.progress-card{min-height:420px;flex-direction:column;display:flex;padding:0 26px 18px}
.progress-card>*{position:relative;z-index:1}
.progress-card[hidden],.bridge-card[hidden]{display:none}
.progress-header{justify-content:space-between;align-items:center;min-height:70px;display:flex;border-bottom:1px solid #f0b90b26;margin:0 -26px;padding:0 26px}
.progress-header h2{margin:5px 0 0;font:400 25px/1 var(--display)}
.step-counter{color:var(--amethyst);letter-spacing:.14em;font:400 10px/1 var(--mono)}
.step-track{grid-template-columns:repeat(3,1fr);gap:6px;display:grid;margin-top:14px}
.step-track-item{color:#f5efdc40;align-items:center;gap:8px;padding-top:12px;font-family:var(--mono);display:flex;position:relative;transition:color .3s}
.step-track-item:before{content:"";background:#f0b90b1f;height:2px;position:absolute;inset:0 0 auto;transition:background-color .36s,box-shadow .36s}
.step-track-item.active{color:var(--text)}.step-track-item.active:before{background:var(--amethyst);box-shadow:0 0 10px var(--amethyst-glow)}
.step-track-item>span{font:500 13px/1 var(--display);width:18px}
.step-track-item small{letter-spacing:.14em;font-size:8px}
.progress-content{flex-direction:column;flex:1;justify-content:center;padding:28px 0 8px;display:flex;text-align:center}
.progress-kicker{color:var(--amethyst);letter-spacing:.16em;margin:0 0 12px;font:400 9px/1 var(--mono)}
.progress-content h3{margin:0 0 12px;font:500 40px/1 var(--display);letter-spacing:-.01em}
.progress-content>p:not(.progress-kicker){max-width:52ch;color:var(--text-soft);margin:0 auto;font:400 11px/1.75 var(--mono)}
.progress-content strong,.progress-content code{color:#fff;font-weight:500;font-family:inherit}
.deposit-address{background:linear-gradient(105deg,#f0b90b24,#ffffff08 58%,#f0b90b14);border:1px solid var(--line-bright);align-items:center;gap:12px;width:min(100%,440px);min-height:52px;margin:22px auto 0;padding:0 14px;display:flex;box-shadow:0 16px 38px #00000060}
.deposit-address code{color:#fff;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font:400 12px/1 var(--mono);overflow:hidden;text-align:left}
.deposit-address button{width:34px;height:34px;color:#1a1204;cursor:pointer;background:var(--amethyst);border:0;place-items:center;padding:0;transition:filter .18s,transform .18s;display:grid}
.deposit-address button:hover{filter:brightness(1.1);transform:scale(1.04)}
.deposit-address button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.waiting-line{color:var(--text-soft);letter-spacing:.12em;justify-content:center;align-items:center;gap:9px;margin-top:22px;font:400 9px/1 var(--mono);display:flex;flex-wrap:wrap}
.waiting-line small{color:var(--muted);font:inherit;margin-left:12px}
.pulse-dot{background:var(--amethyst);border-radius:50%;width:6px;height:6px;box-shadow:0 0 10px var(--amethyst);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
.shielding-panel{width:min(100%,440px);min-height:52px;color:var(--text-soft);letter-spacing:.1em;background:#f0b90b0a;border:1px solid var(--line);align-items:center;gap:14px;margin:22px auto 0;padding:0 14px;font:400 9px/1 var(--mono);display:flex}
.shielding-panel>span{white-space:nowrap}.shielding-panel>small{color:#fff;font:inherit}
.shielding-meter{background:#f0b90b1f;flex:1;min-width:80px;height:2px;overflow:hidden}
.shielding-meter span{background:var(--amethyst);box-shadow:0 0 10px var(--amethyst);width:0;height:100%;display:block;transition:width .6s}
.complete-icon{width:48px;height:48px;color:#1a1204;background:var(--amethyst);border-radius:50%;place-items:center;margin:0 auto 18px;display:grid;box-shadow:0 0 40px var(--amethyst-glow)}
.complete-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.explorer-link{color:#fff;letter-spacing:.1em;background:#f0b90b0a;border:1px solid var(--line);align-items:center;gap:10px;width:min(100%,440px);min-height:44px;margin:22px auto 0;padding:0 13px;font:400 9px/1 var(--mono);text-decoration:none;display:flex}
.explorer-link span{min-width:0;color:var(--muted);text-align:left;text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}
.reset-button{color:var(--text-soft);cursor:pointer;letter-spacing:.12em;background:0 0;border:0;align-items:center;gap:7px;margin:14px auto 0;padding:8px 10px;font:400 9px/1 var(--mono);transition:color .18s,transform .18s;display:flex}
.reset-button:hover{color:var(--amethyst);transform:translateY(-1px)}
.demo-tag{color:var(--gold);letter-spacing:.14em;font:400 9px/1.5 var(--mono);margin-top:12px}

/* ---------- responsive ---------- */
@media (width<=980px){
  html,body{height:auto;overflow:auto}
  #root.app{height:auto;min-height:100dvh;overflow:visible}
  .stage{grid-template-columns:1fr;grid-template-rows:auto;width:min(100% - 32px,560px);gap:18px;padding:8px 0 40px}
  .playbill h1{font-size:clamp(46px,12vw,72px)}
}
@media (width<=760px){
  .marquee{padding:16px 16px 0}
  .stage{width:min(100% - 24px,560px)}
  .card-heading{padding:0 18px}.route-panel{padding:12px 8px}.primary-action{width:calc(100% - 28px);margin:0 14px}
  .route-main{gap:8px}.amount-input{font-size:30px}
  .asset-select{width:46%;min-width:138px;padding:7px}
  .asset-select .asset-logo{width:34px!important;height:34px!important}
  .route-details{gap:12px;margin-inline:10px}
  .card-footnote{flex-wrap:wrap;gap:12px}
  .picker-backdrop{padding:0}.picker{border:0;height:100dvh}
  .picker-body{grid-template-columns:1fr;overflow-y:auto}
  .chain-column{border-right:0;border-bottom:1px solid var(--line);min-height:290px}
  .token-column{min-height:420px}.picker-footer{display:none}
  .progress-content h3{font-size:32px}.deposit-address code{font-size:10px}
}
@media (height<=720px) and (width>980px){
  .marquee{padding-top:14px}.stage{padding-block:6px 14px}
  .playbill h1{font-size:clamp(44px,5.4vw,72px);margin:10px 0 14px}.eye{width:360px;height:112px}
  .card-heading{min-height:54px}.route-panel{padding-block:9px}.route-main{margin-top:6px}
  .amount-input{font-size:32px}.route-details{padding-block:7px}
  .primary-action{min-height:42px}.card-footnote{padding-block:8px 9px}
}
@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---------- intro: the word forms, then vanishes ---------- */
.intro{position:fixed;inset:0;z-index:50;background:var(--bg);display:grid;place-items:center;transition:opacity .7s ease}
.intro.out{opacity:0;pointer-events:none}
.intro[hidden]{display:none}
.intro canvas{position:absolute;inset:0;width:100%;height:100%}
.intro-skip{position:absolute;right:22px;bottom:20px;background:0 0;border:1px solid var(--line);color:var(--muted);letter-spacing:.16em;font:400 10px/1 var(--mono);padding:8px 11px;cursor:pointer}
.intro-skip:hover{color:var(--gold);border-color:var(--line-bright)}