html,body{margin:0;height:100%}
body{display:flex;flex-direction:column;font-family:Georgia,serif;background:#0b0b1e;color:#f3f0ff;text-align:center}
header{padding:1.2rem 1rem .9rem}
h1{font-size:clamp(1.8rem,5.5vw,3.2rem);margin:0;letter-spacing:.02em;font-weight:normal}
h1 a{color:inherit;text-decoration:none}
header p{margin:.35em auto 0;max-width:34rem;font-size:1rem;opacity:.8}
.scene{flex:1;min-height:60vh;background:url('/images/home-bg.jpg') center/cover no-repeat;display:flex;align-items:center;justify-content:center;padding:1.5rem 1rem;box-sizing:border-box}
.cta{display:inline-block;margin-top:.8rem;padding:.6rem 1.4rem;border-radius:999px;background:#f3f0ff;color:#0b0b1e;text-decoration:none;font-size:1rem}
.ctas{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;align-items:center}
.cta.ghost{background:transparent;color:#f3f0ff;border:1px solid rgba(243,240,255,.6);font:inherit;font-size:1rem;cursor:pointer}
.ctas .hello{width:100%;margin:.6rem 0 0}
.card .alt{text-align:center;margin-top:1rem;font-size:.95rem}
.card{background:rgba(11,11,30,.86);border:1px solid rgba(243,240,255,.18);border-radius:14px;padding:1.6rem;max-width:26rem;width:100%;text-align:left;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.card h2{margin:0 0 1rem;font-weight:normal;text-align:center}
.card label{display:block;margin:.9rem 0 .3rem}
.card .opt{opacity:.6;font-size:.9em}
.card input[type=text],.card input[type=email],.card input[type=password]{width:100%;box-sizing:border-box;padding:.6rem;border-radius:8px;border:1px solid #555a7a;background:#15152e;color:#f3f0ff;font-size:1rem}
.card small{display:block;margin-top:.3rem;opacity:.7;font-size:.85rem;line-height:1.35}
.card .consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;line-height:1.45;margin-top:1.2rem}
.card .consent input{margin-top:.2rem;width:1.1rem;height:1.1rem;flex:none}
.card button{margin-top:1.2rem;width:100%;padding:.75rem;border:0;border-radius:999px;background:#f3f0ff;color:#0b0b1e;font-size:1rem;cursor:pointer}
.card button:disabled{opacity:.4;cursor:not-allowed}
.card a{color:#c9b8ff}
#msg{min-height:1.2em;margin:.8rem 0 0;text-align:center}
#msg.err{color:#ff9a9a}
#msg.ok{color:#b9f5c8}
.card .forgot{margin:.45rem 0 0;text-align:right;font-size:.9rem}
.card .lead{margin:0 0 .4rem;line-height:1.45;opacity:.85;font-size:.95rem}
.card .notice{margin:0 0 .6rem;padding:.6rem .8rem;border-radius:8px;background:rgba(120,220,150,.14);border:1px solid rgba(120,220,150,.4);color:#d9ffe3;font-size:.92rem;line-height:1.4}
.card .notice[hidden]{display:none}

/* Swipe navigation */
body.app{overflow:hidden;height:100vh;height:100dvh}
.viewport{position:relative;flex:1;overflow:hidden;background:#0b0b1e;touch-action:none;user-select:none}
.panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;box-sizing:border-box;transition:transform .45s cubic-bezier(.2,.8,.2,1);pointer-events:none;background:#0b0b1e center/cover no-repeat}
.panel.active{pointer-events:auto}
/* One painting, three screens: each panel carries its own slice so swiping pans across it. */
.panel[data-screen=market]{background-image:url('/images/bg-market.jpg');background-position:92% 40%}
.panel[data-screen=home]{background-image:url('/images/home-bg.jpg');background-position:50% 35%}
.panel[data-screen=globe]{background-image:url('/images/bg-globe.jpg');background-position:50% 40%}
.panel[data-screen=echo]{background-image:linear-gradient(rgba(11,11,30,.55),rgba(11,11,30,.8)),url('/images/home-bg.jpg');background-position:center,50% 0}
.panel[data-screen=catalog]{background-image:linear-gradient(rgba(11,11,30,.7),rgba(11,11,30,.55)),url('/images/home-bg.jpg');background-position:center,50% 100%}
.panel .card{text-align:center}
.panel .card p{line-height:1.5;opacity:.85}
.panel .tag{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;opacity:.55}
.nav{position:absolute;z-index:5;background:rgba(11,11,30,.7);color:#f3f0ff;border:1px solid rgba(243,240,255,.3);border-radius:999px;padding:.45rem .9rem;font:inherit;font-size:.85rem;cursor:pointer}
.nav:hover{background:rgba(11,11,30,.9)}
.nav.left{left:.8rem;top:50%;transform:translateY(-50%)}
.nav.right{right:.8rem;top:50%;transform:translateY(-50%)}
.nav.up{top:.8rem;left:50%;transform:translateX(-50%)}
.nav.down{bottom:.8rem;left:50%;transform:translateX(-50%)}
.nav[hidden]{display:none}
.hint{font-size:.8rem;opacity:.6;margin-top:.8rem}
/* Home: account bubbles at top right, Record button in the open sky */
.home-header{position:relative}
.account{position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);display:flex;gap:.5rem;align-items:center}
.pill{display:inline-block;padding:.55rem 1.3rem;border-radius:999px;background:#f3f0ff;color:#0b0b1e;text-decoration:none;font:inherit;font-size:1rem;white-space:nowrap;border:1px solid #f3f0ff;cursor:pointer;line-height:1.2}
.pill.ghost{background:transparent;color:#f3f0ff;border-color:rgba(243,240,255,.6)}
.pill:hover{filter:brightness(.92)}
.pill.ghost:hover{background:rgba(243,240,255,.1)}
.account .hello{font-size:.9rem;opacity:.8;white-space:nowrap;max-width:14rem;overflow:hidden;text-overflow:ellipsis}
.panel[data-screen=home]{flex-direction:column;justify-content:flex-start;padding-top:max(4rem,11vh)}
.panel[data-screen=home] .hint{position:absolute;left:50%;transform:translateX(-50%);bottom:3.4rem;margin:0;padding:.2rem .8rem;border-radius:999px;background:rgba(11,11,30,.5);white-space:nowrap;opacity:.85}
.card a.cta{color:#0b0b1e}
.card a.cta.ghost,.card button.cta.ghost{color:#f3f0ff;background:transparent;border:1px solid rgba(243,240,255,.6);width:auto;padding:.6rem 1.4rem;margin-top:.8rem}
@media (max-width:960px){
  .home-header{padding-top:.6rem}
  .account{position:static;transform:none;justify-content:flex-end;margin:0 0 .5rem;order:-1}
  .home-header{display:flex;flex-direction:column}
  .pill{padding:.45rem 1.05rem;font-size:.95rem}
}
@media (max-width:640px){
  .panel[data-screen=home] .hint{display:none}
  .panel .card{max-width:22rem;padding:1.2rem}
  .nav.left{top:auto;bottom:4rem;transform:none}
  .nav.right{top:auto;bottom:4rem;transform:none}
}

/* ---------- 2D: forms, steps, account, login options ---------- */
.card input[type=date],.card input[type=tel],.card input[type=number],.card input[type=search],.card select,.card textarea{width:100%;box-sizing:border-box;padding:.6rem;border-radius:8px;border:1px solid #555a7a;background:#15152e;color:#f3f0ff;font:inherit;font-size:1rem}
.card textarea{min-height:6rem;resize:vertical}
.card input[type=date]{color-scheme:dark}
.card.wide{max-width:34rem}
.steps{display:flex;gap:.4rem;justify-content:center;margin:0 0 1rem;padding:0;list-style:none}
.steps li{flex:1;text-align:center;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.5;padding-top:.45rem;border-top:3px solid rgba(243,240,255,.25)}
.steps li.on{opacity:1;border-top-color:#c9b8ff}
.steps li.done{opacity:.8;border-top-color:#8fd3a6}
.step[hidden]{display:none}
.step h3{margin:.2rem 0 .3rem;font-weight:normal;font-size:1.15rem}
.privacy{display:flex;gap:.5rem;align-items:flex-start;margin:.2rem 0 .4rem;padding:.55rem .75rem;border-radius:8px;background:rgba(201,184,255,.1);border:1px solid rgba(201,184,255,.3);font-size:.86rem;line-height:1.4}
.privacy b{font-weight:normal;color:#e4dbff}
.who{font-size:.8rem;opacity:.75;margin-top:.25rem}
.who .tagpill{display:inline-block;margin-right:.3rem;padding:.05rem .45rem;border-radius:999px;border:1px solid rgba(243,240,255,.35);font-size:.72rem;letter-spacing:.04em}
.warn{margin:.6rem 0 0;padding:.65rem .8rem;border-radius:8px;background:rgba(255,190,90,.13);border:1px solid rgba(255,190,90,.55);color:#ffe7bf;font-size:.9rem;line-height:1.4}
.warn.soft{background:rgba(160,180,255,.1);border-color:rgba(160,180,255,.4);color:#dfe6ff}
.warn[hidden]{display:none}
.warn .consent{margin-top:.6rem;color:#fff}
.field-ok{color:#b9f5c8;font-size:.82rem;margin-top:.25rem;min-height:1em}
.field-err{color:#ff9a9a;font-size:.82rem;margin-top:.25rem;min-height:1em}
.row2{display:flex;gap:.6rem}.row2>*{flex:1}
.btnrow{display:flex;gap:.6rem;margin-top:1.2rem}.btnrow button{margin-top:0}
.card button.ghost,.card .button.ghost{background:transparent;color:#f3f0ff;border:1px solid rgba(243,240,255,.6)}
.card .button{display:block;text-align:center;box-sizing:border-box;margin-top:1rem;width:100%;padding:.75rem;border-radius:999px;background:#f3f0ff;color:#0b0b1e;text-decoration:none;font-size:1rem}
.card .readonly{padding:.6rem;border-radius:8px;border:1px dashed #555a7a;background:rgba(21,21,46,.6);min-height:1.2em}
.card .section{margin-top:1.4rem;padding-top:1rem;border-top:1px solid rgba(243,240,255,.14)}
.card .section:first-of-type{margin-top:.6rem}
.card .section h3{margin:0 0 .3rem;font-weight:normal;font-size:1.1rem}
.status{display:inline-block;padding:.1rem .6rem;border-radius:999px;font-size:.82rem;border:1px solid}
.status.verified{color:#b9f5c8;border-color:rgba(120,220,150,.6)}
.status.unverified,.status.pending{color:#ffe7bf;border-color:rgba(255,190,90,.6)}
.liveness{margin:.5rem 0;padding-left:1.2rem;line-height:1.6;font-size:.92rem}
/* Login options: big, clear buttons */
.bigopts{display:flex;flex-direction:column;gap:.7rem;margin-top:.4rem}
.card .big{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:0;width:100%;padding:.95rem 1rem;border-radius:14px;font-size:1.08rem;border:1px solid rgba(243,240,255,.5);background:rgba(243,240,255,.07);color:#f3f0ff;cursor:pointer;text-decoration:none;box-sizing:border-box}
.card .big:hover{background:rgba(243,240,255,.14)}
.card .big.apple{background:#f3f0ff;color:#0b0b1e;border-color:#f3f0ff}
.card .big[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.card .big small{display:inline;margin:0 0 0 .3rem;font-size:.78rem;opacity:.8}
.card .big svg{width:1.2em;height:1.2em;flex:none}
.back{background:none!important;border:0!important;color:#c9b8ff!important;width:auto!important;padding:0!important;margin:0 0 .6rem!important;font-size:.92rem!important;cursor:pointer}
.code-input{letter-spacing:.5em;text-align:center;font-size:1.4rem!important}
.seg{display:flex;border:1px solid rgba(243,240,255,.45);border-radius:999px;overflow:hidden;margin-top:.4rem}
.card .seg button{margin:0;border-radius:0;background:transparent;color:#f3f0ff;padding:.6rem;font-size:.95rem;flex:1}
.card .seg button[aria-pressed=true]{background:#f3f0ff;color:#0b0b1e}
.account .pill.small{padding:.35rem .9rem;font-size:.85rem}
/* Tall pages (account, signup steps, market pages): let the page grow and scroll instead of centering the card
   out of reach above the top of the screen. The swipe app (body.app) keeps its fixed full-screen layout. */
body:not(.app){height:auto;min-height:100%}
body:not(.app) .scene{flex:1 0 auto}