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}

/* 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}
}