/* WALLSEER — one screen: the oracle on the right, the conversation on the left, formulas in the sky. */
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('/assets/fonts/caveat.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/figtree.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }
:root {
  --bg: #e2e2e2; --bg2: #c9c9cb; --fg: #000; --fg20: rgba(0,0,0,.2); --pill: #fff; --ok: #06c167; --bad: #c8321f; --warn: #b77a0c;
  --display: "Outfit", "Helvetica Neue", Arial, sans-serif; --ui: "Figtree", "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs: 15px; --margin: 2.6666667rem; --gutter: 20px; --cols: 12; --header: 4rem; --dialog: 2.5333333rem; --unit: 2.6666667rem;
  color-scheme: light;
}
@media (max-width: 1024px) { :root { --margin: 1.3333333rem; --cols: 8; --dialog: 1.75rem; } }
@media (max-width: 699px) { :root { --cols: 4; --gutter: 10px; } }
@media (min-width: 1600px) { :root { --fs: 17px } } @media (min-width: 2000px) { :root { --fs: 19px } }
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs); }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1rem/1.3 var(--ui); -webkit-font-smoothing: antialiased; overflow: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
::selection { background: var(--fg); color: var(--bg); }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* the stage: background, 3D, formulas, the cards and their line */
.stage { position: fixed; inset: 0; background: radial-gradient(120% 90% at 50% 35%, var(--bg) 0%, var(--bg2) 100%); }
.stage__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.stage .still { position: absolute; inset: 0; z-index: 1; transition: opacity .8s; pointer-events: none; }
.stage .still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage.has3d .still { opacity: 0; }
.math { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.math > span { position: absolute; font: 500 var(--ms, 1.7rem)/1.15 "Caveat", "Segoe Print", "Bradley Hand", cursive; letter-spacing: .01em; color: var(--fg); opacity: .36; white-space: nowrap; transform-origin: 0 50%; will-change: translate, rotate; animation: write 1.6s cubic-bezier(.4,.1,.2,1) both; animation-delay: var(--mw, 0s); text-shadow: 0 0 1px color-mix(in srgb, var(--fg) 40%, transparent); }
.math > span.re { animation: write 1.5s cubic-bezier(.4,.1,.2,1) both; animation-delay: 0s; }
.math > span.out { animation: erase .75s cubic-bezier(.55,0,.8,.4) both; animation-delay: 0s; }
.math > span.big { font-size: calc(var(--ms, 1.7rem) * 1.8); font-weight: 700; opacity: .34; }
.math i { font-style: italic; } .math sup, .math sub { font-size: .62em; } .math .frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; line-height: 1; margin: 0 .12em; } .math .frac b { font-weight: inherit; border-bottom: 2px solid currentColor; padding: 0 .1em .06em; } .math .frac u { text-decoration: none; padding-top: .06em; }
@keyframes erase { from { clip-path: inset(-20% -5% -20% 0); filter: blur(0) } to { clip-path: inset(-20% -5% -20% 100%); filter: blur(1.5px) } }
@keyframes write { from { clip-path: inset(-20% 100% -20% 0) } to { clip-path: inset(-20% -5% -20% 0) } }
@media (max-width: 1024px) { .math { inset: 0 0 calc(50% + 8px) 0; --ms: 1rem } .math > span.big { font-size: 1.45rem } }
@media (prefers-reduced-motion: reduce) { .math > span { animation: none } }
.lockup { position: fixed; left: calc(max(var(--margin), env(safe-area-inset-left, 0px)) + var(--unit) + 1rem); bottom: calc(var(--margin) + var(--unit) / 2 - .55rem + env(safe-area-inset-bottom, 0px)); z-index: 2; display: flex; align-items: center; gap: .6em; font: 400 1.15rem/1 var(--display); letter-spacing: .14em; opacity: .55; pointer-events: none; }
.lockup .x { opacity: .6; font-size: .9em; } .lockup .r { display: inline-flex; align-items: center; gap: .3em; letter-spacing: .02em; }
.lockup svg { width: 1.1em; height: 1.1em; fill: var(--ok); }
@media (max-width: 1024px) { .lockup { display: none } }
.car { position: fixed; left: 27vw; bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); width: 24vw; max-width: 420px; margin: 0; z-index: 2; pointer-events: none; display: grid; gap: .4rem; justify-items: center; }
.car__box { width: 100%; aspect-ratio: 2; }
.car, .lockup, .math { transition: opacity .45s cubic-bezier(.215,.61,.355,1); }
.reading .car, .reading .lockup { opacity: 0; }
.reading .math { opacity: .5; }
.car figcaption { font: 400 clamp(.95rem, 1.15vw, 1.25rem)/1.25 var(--display); text-align: center; letter-spacing: .01em; opacity: .9; }
@media (max-width: 1024px) { .car { display: none } }
@media (max-width: 1400px) { .car { left: 30vw; width: 22vw } }

/* header */
.hd { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; width: 100%; height: var(--header); z-index: 800; display: grid; align-items: center; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gutter); padding: 0 max(var(--margin), env(safe-area-inset-right, 0px)) 0 max(var(--margin), env(safe-area-inset-left, 0px)); font: 400 1.2rem/1.2 var(--display); }
.wordmark { grid-column: 1 / 3; color: inherit; text-decoration: none; white-space: nowrap; }
.wordmark sup { font-size: .55em; vertical-align: super; margin-left: .05em; }
.cta { grid-column: 7 / 13; justify-self: end; display: flex; align-items: center; gap: 1.1rem; white-space: nowrap; }
.cta .buy { color: inherit; text-decoration: none; }
.cta .buy:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .1em; }
.xbtn { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; color: inherit; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); transition: background .2s, border-color .2s, transform .2s; }
.xbtn + .xbtn { margin-left: -.5rem; }
.xbtn svg { width: 1rem; height: 1rem; fill: currentColor; }
.xbtn:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 10%, transparent); transform: translateY(-1px); }
.walletpill { display: inline-flex; align-items: center; gap: .5rem; height: 2.3rem; padding: 0 .35rem 0 .8rem; border-radius: 999px; background: var(--pill); border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); font: 400 .85rem var(--mono); cursor: default; }
.walletpill img { border-radius: 4px; }
.walletpill__out { font: 400 .8rem var(--display); padding: .35rem .7rem; border-radius: 999px; background: var(--fg); color: var(--bg); cursor: pointer; }
@media (max-width: 1024px) { .wordmark { grid-column: 1 / 4 } .cta { grid-column: 4 / 9; gap: .8rem } .xbtn { width: 2.2rem; height: 2.2rem } }
@media (max-width: 699px) { .wordmark { grid-column: 1 / 2 } .cta { grid-column: 2 / 5; gap: .6rem } .walletpill #wpAddr { display: none } .walletpill { padding-left: .35rem } }

/* the conversation column */
.main { position: absolute; inset: 0; overflow: auto; padding: 0 max(var(--margin), env(safe-area-inset-right, 0px)) 0 max(var(--margin), env(safe-area-inset-left, 0px)); z-index: 2; width: 100%;
  padding-right: calc((100vw - var(--gutter) * (var(--cols) - 1) - var(--margin) * 2) * 4 / var(--cols) + var(--gutter) * 4 + var(--margin)); scrollbar-width: none; }
.main::-webkit-scrollbar { display: none; }
.step { position: relative; min-height: fit-content; padding: 50vh var(--gutter) 0 0; }
@media (max-width: 1024px) {
  .main { inset: calc(50% - 8px) 0 0 0; padding-right: max(var(--margin), env(safe-area-inset-right, 0px)); background: var(--bg); border-radius: 8px 8px 0 0; }
  .step { padding: 1.3333333rem 1.3333333rem 1.3333333rem 0; }
}
.prev { position: absolute; display: block; font: 300 var(--dialog)/1.1 var(--display); transform: translate3d(0, calc(-100% - var(--unit)), 0) scale(.8); transform-origin: top left; filter: blur(4px); cursor: pointer; user-select: none; max-width: 24ch; }
.prev:empty { display: none; }
.dialog { display: block; margin: 0; font: 300 var(--dialog)/1.1 var(--display); transform-origin: top left; transition: transform .3s cubic-bezier(.215,.61,.355,1), filter .3s cubic-bezier(.215,.61,.355,1); max-width: 24ch; }
.dialog.long { max-width: 30ch; }
.step.expanded .dialog { transform: translate3d(0, 0, 0) scale(.9); }
.step.leaving .dialog { transform: translate3d(0, calc(-100% - var(--unit)), 0) scale(.8); filter: blur(4px); }
.dialog .w { display: inline-block; white-space: nowrap; }
.dialog .l { display: inline-block; opacity: 0; transform: translate3d(0, 40%, 0); transition: opacity .3s cubic-bezier(.215,.61,.355,1), transform .45s cubic-bezier(.215,.61,.355,1); }
.dialog .l.in { opacity: 1; transform: translate3d(0, 0, 0); }
.dialog.cursor::after { content: ""; display: inline-block; height: .5em; width: .4em; margin-left: .25em; transform: scaleY(1.75) translateY(5%); transform-origin: bottom center; background: var(--fg); animation: cursor linear 1s infinite; }
@keyframes cursor { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.content { margin-top: 1.3333333rem; width: 100%; opacity: 0; pointer-events: none; transform: translate3d(0, 1.3333333rem, 0); transition: opacity .3s cubic-bezier(.215,.61,.355,1), transform .3s cubic-bezier(.215,.61,.355,1); padding-bottom: 10.666667rem; display: grid; gap: 1rem; justify-items: start; }
@media (max-width: 1024px) { .content { padding-bottom: 5.3333333rem } }
.content.in { opacity: 1; pointer-events: all; transform: translate3d(0, 0, 0); transition-delay: .1s; }
.content > .panel { position: relative; width: min(30rem, 100%); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 1.3333333rem; padding: 1rem 1.1rem; }
.choices { display: flex; flex-wrap: wrap; padding: .2rem 0; max-width: calc((100vw - var(--gutter) * (var(--cols) - 1) - var(--margin) * 2) * 3 / var(--cols) + var(--gutter) * 3 + 8rem); }
.pill { position: relative; display: inline-flex; align-items: center; gap: .8em; font: 400 1rem/1.2 var(--display); letter-spacing: .01em; border-radius: 999px; background: var(--pill); color: var(--fg); padding: .8em 1.5em; margin: 0 .45em .55em 0; border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), 0 10px 24px -14px rgba(0,0,0,.6); cursor: pointer; text-decoration: none; overflow: hidden; transition: transform .25s cubic-bezier(.215,.61,.355,1), border-color .25s, box-shadow .25s; }
.pill:hover, .pill:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--fg) 40%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), 0 14px 28px -14px rgba(0,0,0,.7); }
.pill:active { transform: translateY(0); }
.pill.ghost { background: transparent; border-color: color-mix(in srgb, var(--fg) 22%, transparent); box-shadow: none; opacity: .85; }
.pill.dark { background: var(--fg); color: var(--bg); }
.pill span:last-child:not(:first-child) { opacity: .6; font-size: .9em; }
.pill span { pointer-events: none; }
.pill:focus-visible, .back:focus-visible, .sound:focus-visible, input:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.ca { display: inline-flex; align-items: center; gap: .8rem; font: 400 .9rem/1 var(--ui); color: var(--fg); background: transparent; border: 1px dashed color-mix(in srgb, var(--fg) 30%, transparent); border-radius: 999px; padding: .65em 1.1em; cursor: pointer; margin-top: .2rem; }
.ca:disabled { cursor: default; opacity: .7; } .ca .k { font-weight: 500; letter-spacing: .12em; opacity: .55; } .ca .v { font-family: var(--mono); font-size: .85rem; } .ca .c { opacity: .55; text-decoration: underline; text-underline-offset: .15em; }
.ca:not(:disabled):hover { border-style: solid; }
.ca--top { margin: 0 0 1rem; max-width: 100%; white-space: nowrap; }
.ca .v { white-space: nowrap; }
@media (max-width: 699px) { .ca { gap: .5rem; padding: .6em .85em; } .ca .v { font-size: clamp(8.6px, calc((100vw - 150px) / 25.2), 13px); } }
@media (min-width: 1025px) and (max-height: 1099px) { .lockup { display: none } }

/* inside the panels */
.field { width: min(28rem, 100%); display: grid; gap: .6rem; }
.floating { position: relative; }
.floating input { width: 100%; font: 400 1.2rem/1.3 var(--ui); color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--fg); padding: 1.1em 0 .4em; border-radius: 0; outline: none; }
.floating input::placeholder { color: transparent; }
.floating label { position: absolute; left: 0; top: 1.1em; font: 400 1.2rem/1.3 var(--ui); opacity: .5; transform-origin: top left; transition: transform .2s cubic-bezier(.215,.61,.355,1), opacity .2s; pointer-events: none; }
.floating input:focus ~ label, .floating input:not(:placeholder-shown) ~ label { transform: scale(.75) translateY(-1.5em); opacity: .7; }
.hint { font: 400 .8rem/1.4 var(--ui); opacity: .6; max-width: 46ch; margin: 0; }
.hint.bad { color: var(--bad); opacity: 1; }
.head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font: 400 .7rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; opacity: .55; margin-bottom: .6rem; }
.head em { font-style: normal; letter-spacing: .04em; text-transform: none; }
.rows { display: grid; font: 400 .85rem/1.4 var(--ui); }
.row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .5rem 0; border-top: 1px solid var(--fg20); min-width: 0; font-variant-numeric: tabular-nums; }
.row:first-child { border-top: 0; }
.row > span:first-child { opacity: .6; flex: none; }
.row > span.nm { opacity: 1; }
.row b { font-weight: 500; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .m { font-family: var(--mono); font-size: .8rem; }
.row .sub { display: block; font-size: .72rem; opacity: .6; font-weight: 400; }
.up { color: var(--ok); } .down { color: var(--bad); } .flat { opacity: .6; }
.tag { display: inline-block; font: 500 .62rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; padding: .3em .55em; border-radius: 999px; margin-left: .4em; vertical-align: middle; border: 1px solid var(--fg20); }
.tag--bad { border-color: var(--bad); color: var(--bad); } .tag--ok { border-color: var(--ok); color: var(--ok); } .tag--warn { border-color: var(--warn); color: var(--warn); }
.amount { font: 300 clamp(2.4rem, 5vw, 4rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.amount small { font: 400 .95rem/1.3 var(--ui); opacity: .6; margin-left: .5em; }
.meter { display: flex; gap: 3px; height: 6px; margin: .7rem 0 .6rem; }
.meter i { flex: 1; border-radius: 2px; background: var(--fg20); }
.meter i.on { background: var(--fg); }
.checks { display: grid; gap: .6rem; }
.chk { display: grid; grid-template-columns: 1.2rem 1fr; gap: .7rem; align-items: center; font: 400 .9rem/1.3 var(--ui); }
.chk i { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid var(--fg20); border-top-color: var(--fg); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }
.revoke { font: 500 .72rem var(--ui); padding: .35em .8em; border-radius: 999px; border: 1px solid var(--bad); color: var(--bad); background: none; cursor: pointer; margin-left: .4em; }
.steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; font: 400 .85rem/1.45 var(--ui); }

/* chrome */
.progress { position: fixed; bottom: 0; left: 0; width: 100%; border-top: 4px solid var(--fg); transform: scaleX(var(--p, 0)); transform-origin: bottom left; transition: transform .3s cubic-bezier(.215,.61,.355,1); z-index: 900; }
.back { position: fixed; left: max(var(--margin), env(safe-area-inset-left, 0px)); bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px)); width: var(--unit); height: var(--unit); display: flex; align-items: center; justify-content: center; background: var(--fg); color: var(--bg); border: 0; border-radius: 50%; cursor: pointer; z-index: 900; transition: opacity .3s cubic-bezier(.215,.61,.355,1), transform .3s cubic-bezier(.215,.61,.355,1); }
.back[hidden] { display: flex !important; opacity: 0; transform: scale(.8); pointer-events: none; }
.back svg { width: 45%; height: 45%; fill: currentColor; }
.sound { position: fixed; right: max(var(--margin), env(safe-area-inset-right, 0px)); bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px)); background: var(--fg); display: flex; flex-direction: column; border-radius: var(--unit); border: 0; padding: 0; cursor: pointer; z-index: 900; }
.sound::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: var(--unit); height: var(--unit); background: var(--bg); border-radius: 50%; border: 3px solid var(--fg); transform: translate3d(0, 0, 0); transition: transform .3s cubic-bezier(.215,.61,.355,1); }
.sound.muted::before { transform: translate3d(0, 100%, 0); }
.sound i { position: relative; z-index: 1; width: var(--unit); height: var(--unit); display: flex; align-items: center; justify-content: center; }
.sound i svg { width: 100%; height: 25%; transition: fill .3s; }
.sound .on svg { fill: var(--fg) } .sound.muted .on svg { fill: var(--bg) }
.sound .off svg { fill: var(--bg) } .sound.muted .off svg { fill: var(--fg) }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 1024px) { .sound { bottom: calc(50% + 8px + .6rem); right: .9rem; --unit: 2.2rem } .back { left: .9rem; bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)) } .choices { max-width: 100%; gap: .1rem } .pill { font-size: 1.02rem; padding: .7em 1.35em; margin: 0 .25em .5em 0 } .step { padding-top: 1.6rem } .content { margin-top: 1.6rem; gap: 1.2rem } .hint { font-size: .9rem } .floating input, .floating label { font-size: 1.3rem } }
@media (prefers-reduced-motion: reduce) { .dialog .l, .content, .prev, .dialog, .progress { transition: none } .dialog.cursor::after { animation: none } }

/* dialogs */
.dlg { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(200,200,200,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 20px; }
.dlg.is-open { display: flex; }
.dlg__box { width: 100%; max-width: 400px; background: #f2f2f2; border-radius: 1.3333333rem; padding: 1.4rem; box-shadow: 0 30px 70px -30px rgba(0,0,0,.45); }
.dlg__box h3 { margin: 0 0 .4rem; font: 400 1.4rem var(--display); }
.dlg__box p { margin: 0 0 1.1rem; font: 400 .9rem/1.45 var(--ui); opacity: .65; }
.wsel__head { display: flex; justify-content: space-between; align-items: center; }
.wsel__x { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--fg20); background: none; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.wsel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wsel__list button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 0; text-align: left; cursor: pointer; font: 400 .95rem var(--ui); }
.wsel__list button:hover { background: #fafafa; }
.wsel__list img { width: 30px; height: 30px; border-radius: 8px; }
.wsel__list b { flex: 1; font-weight: 500; }
.wsel__list small { font: 500 .62rem var(--ui); letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.wsel__list small.det { color: var(--ok); opacity: 1; }
.wsel__foot { font-size: .8rem; margin: 14px 0 0 !important; }
.wsel__err { color: var(--bad); font-size: .8rem; margin: 6px 0 0; }
.toast { position: fixed; left: 50%; top: calc(var(--header) + .5rem); z-index: 1100; transform: translate(-50%, -8px); opacity: 0; pointer-events: none; padding: .6rem 1rem; border-radius: 999px; background: var(--fg); color: var(--bg); font: 400 .9rem var(--ui); transition: opacity .25s, transform .25s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }