:root{
  --bg:#0c1415;--ink:#f0f3ec;--muted:#93a5a1;--line:#24393b;--surface:#132022;
  --tiffany:#68bfb6;--tiffany-2:#3f9e95;--orange:#ff6b35;--orange-2:#e2542a;--peach:#ff9b70;
  --deep:#0f4f4c;--night:#152a2b;--slate:#1d2d2f;--sand:#efe9df;--ink-dark:#10201f;
  --r:14px;--gap:8px;--ease:cubic-bezier(.2,.75,.2,1);
}
:root[data-theme=light]{--bg:#ffffff;--ink:#172322;--muted:#5d6b67;--line:#d6dbd2;--surface:#ffffff;--night:#163231;--slate:#2a3b3c}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:400 14px/1.35 'Segoe UI',-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',system-ui,sans-serif;height:100dvh;overflow:hidden;display:grid;grid-template-rows:56px minmax(0,1fr) 34px;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* Header */
header{display:flex;align-items:center;gap:16px;padding:0 20px}
header .logo{height:24px}
header .spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:500;font-size:13px;cursor:pointer}
.pill.primary{background:var(--orange);border-color:var(--orange);color:#fff}
.crumb{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--tiffany);background:var(--surface);font-weight:600;font-size:13.5px;cursor:pointer;animation:crumbIn .35s var(--ease)}
.crumb[hidden]{display:none}
.crumb:hover{background:var(--tiffany);color:var(--ink-dark)}
.crumb .sep{opacity:.4}.crumb b{color:var(--tiffany)}.crumb:hover b{color:inherit}
@keyframes crumbIn{from{opacity:0;transform:translateX(-6px)}}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Layout */
main{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:var(--gap);padding:0 20px 8px;min-height:0}
#hero{grid-column:1/3;grid-row:1/4}
#app{grid-column:1/3;grid-row:4}
#stage{grid-column:3/7;grid-row:1/5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:var(--gap);grid-auto-flow:dense;perspective:1800px;min-height:0}
.w2{grid-column:span 2}.h2{grid-row:span 2}

/* Tile */
.tile{position:relative;border:0;padding:0;background:none;text-align:left;border-radius:var(--r);cursor:pointer;min-height:0;min-width:0;perspective:1100px;transform-style:preserve-3d;outline:none;display:block}
.tile:focus-visible{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--tiffany)}
.flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .62s var(--ease)}
.face{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:16px;display:flex;flex-direction:column;justify-content:space-between}
.back{transform:rotateY(180deg)}
@media (hover:hover){.tile.flippable:hover .flip,.tile.flippable:focus-visible .flip{transform:rotateY(180deg)}}
.tile:not(.flippable):hover .face{filter:brightness(1.07)}
.tile:active{transform:scale(.985)}
.kicker{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.78}
.label{font-weight:600;font-size:15px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.label.big{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.desc{font-size:12.5px;opacity:.85;margin-top:4px;max-width:34ch}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.go{opacity:.7}
.tag{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:5px;background:#0003;margin-left:6px;vertical-align:middle}
/* Hover preview cards: a row of 3 on wide tiles, a stack of 3 on 1x1 tiles. */
.minis{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.mini{position:relative;border-radius:10px;overflow:hidden;background:#ffffff24;box-shadow:inset 0 0 0 1px #ffffff2e;display:flex;flex-direction:column;min-height:0;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--ease)}
.c-tiffany .mini,.c-sand .mini{background:#10201f14;box-shadow:inset 0 0 0 1px #10201f1f}
.thumb{flex:1;min-height:0;background-size:cover;background-position:center}
.mt{display:flex;align-items:center;gap:6px;padding:8px 9px;font-size:12.5px;font-weight:600;line-height:1.2}
.tile:not(.w2) .minis{grid-template-columns:1fr;grid-auto-rows:1fr;gap:5px;margin:8px 0 6px}
.tile:not(.w2) .thumb{display:none}
.tile:not(.w2) .mt{padding:0 9px;height:100%;font-size:12px}
.tile.w2:not(.h2) .thumb{position:absolute;inset:0}
.tile.w2:not(.h2) .mini::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0b1516eb 0%,#0b151680 45%,#0b151614 100%)}
.tile.w2:not(.h2) .mt{position:absolute;left:0;right:0;bottom:0;z-index:1;color:#fff}
@media (hover:hover){.tile.flippable:hover .mini,.tile.flippable:focus-visible .mini{opacity:1;transform:none;transition-delay:calc(.28s + var(--d) * .07s)}}
@media (prefers-reduced-motion:reduce){.mini{opacity:1;transform:none}}
.hint{font-size:11.5px;opacity:.75;display:flex;gap:6px;align-items:center}

/* Colors */
.c-orange{background:var(--orange);color:#fff}
.c-tiffany{background:var(--tiffany);color:var(--ink-dark)}
.c-deep{background:var(--deep);color:#eaf6f4}
.c-night{background:var(--night);color:#e6f1ee}
.c-slate{background:var(--slate);color:#e6f1ee}
.c-sand{background:var(--sand);color:var(--ink-dark)}
.c-card{background:#132022;color:#e6f1ee;box-shadow:inset 0 0 0 1px #24393b}
.c-card svg.i{color:var(--tiffany)}
:root[data-theme=light] .c-card{background:#f6f7f4;color:var(--ink-dark);box-shadow:inset 0 0 0 1px #e4e8e2}
:root[data-theme=light] .c-card svg.i{color:var(--tiffany-2)}
:root[data-theme=light] .c-card:hover{background:#eef6f4}
:root[data-theme=light] .c-sand,:root[data-theme=light] .c-peach{box-shadow:inset 0 0 0 1px #0000000d}
:root[data-theme=light] .tile{box-shadow:0 1px 2px #10201f0f}
.c-teal2{background:var(--tiffany-2);color:#fff}
.c-peach{background:var(--peach);color:var(--ink-dark)}
.img{background-size:cover;background-position:center;color:#fff}
.img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b1516a6 0%,#0b151600 26%,#0b151600 42%,#0b1516eb 100%)}
.chip{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:8px;background:#efe9df;color:#10201f;font-weight:700;font-size:13px;padding:7px 12px 7px 8px;border-radius:999px;box-shadow:0 8px 24px #0005}
.chip i{width:18px;height:18px;border-radius:50%;background:#1f9d6b;color:#fff;display:grid;place-items:center;font-style:normal;font-size:11px}
.photo-tile .face{transition:background-size .9s var(--ease)}
.img.zoom{background-size:cover}
.img.tint-t::before{background:linear-gradient(180deg,#0b151670 0%,#0b151600 24%),linear-gradient(0deg,#2c8a83f5 0%,#3f9e95d0 30%,#3f9e9500 72%)}
.img.tint-o::before{background:linear-gradient(180deg,#0b151670 0%,#0b151600 24%),linear-gradient(0deg,#e2542af5 0%,#ff6b35d0 30%,#ff6b3500 72%)}
.img.tint-k::before{background:linear-gradient(180deg,#0b151670 0%,#0b151600 24%),linear-gradient(0deg,#0b1112f7 0%,#10201fd6 32%,#10201f00 74%)}
.img.dim::before{background:linear-gradient(180deg,#0b1516e0,#0b1516cc 50%,#0b1516f0)}
.c-ink{background:#10201f;color:#eef3ef}
.c-ink svg.i{color:var(--tiffany)}
.img>*{position:relative;z-index:2}
.img::before{z-index:1}
.img>.chip{position:absolute;z-index:3}
.img>.fade{position:absolute;z-index:0}

/* Hero */
#hero{border-radius:var(--r);background:radial-gradient(120% 80% at 50% 38%,#1b3334 0%,var(--night) 55%,#0f1d1e 100%);color:#eef4f1;position:relative;overflow:hidden;display:flex;flex-direction:column;padding:22px}
:root[data-theme=light] #hero{background:#ffffff;color:var(--ink);box-shadow:0 1px 0 var(--line) inset,0 0 0 1px var(--line)}
#hero h1{font-size:clamp(24px,2.35vw,38px);line-height:1.04;letter-spacing:-.035em;font-weight:700}
#hero h1 span{color:var(--tiffany)}
#orb{flex:1 1 auto;min-height:0;width:100%;margin:8px 0}
.camila{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.camila .spark{width:30px;height:30px;border-radius:9px}
.camila b{font-size:14px}
.camila small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.camila small i{width:7px;height:7px;border-radius:50%;background:#1f9d6b}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer;transition:.2s}
@media (max-height:800px){.chips button:nth-child(n+6){display:none}}
.chips button:hover{border-color:var(--tiffany);background:#68bfb61f}
.chat{display:flex;align-items:center;gap:10px;border:1.5px solid var(--tiffany);border-radius:14px;padding:8px 8px 8px 12px;background:#0f1d1ecc}
:root[data-theme=light] .chat{background:#fff}
.chat input{flex:1;background:none;border:0;outline:none;font-size:15px;min-width:0}
.chat input::placeholder{color:var(--muted)}
.chat button{border:0;background:var(--orange);color:#fff;font-weight:600;border-radius:10px;height:38px;padding:0 14px;display:flex;align-items:center;gap:6px;cursor:pointer}
.spark{width:34px;height:34px;border-radius:10px;background:#68bfb622;color:var(--tiffany);display:grid;place-items:center}
.under{font-size:11.5px;color:var(--muted);text-align:center;margin-top:8px}
.bubble{position:absolute;left:22px;right:22px;bottom:118px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:12px 14px;font-size:13.5px;box-shadow:0 12px 40px #0006;opacity:0;transform:translateY(8px);transition:.35s var(--ease);pointer-events:none}
.bubble.on{opacity:1;transform:none}
.bubble b{color:var(--tiffany)}

/* Live tile bits */
.ticker{position:relative;height:56px;overflow:hidden}
.ticker>div{position:absolute;inset:0;transition:transform .55s var(--ease),opacity .55s}
.amt{font-size:26px;font-weight:800;letter-spacing:-.03em}
.ok{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.ok i{width:16px;height:16px;border-radius:50%;background:#1f9d6b;display:grid;place-items:center;color:#fff;font-style:normal;font-size:10px}
pre.code{font:12px/1.55 'Cascadia Code',Consolas,'SF Mono',Menlo,ui-monospace,monospace;color:#bfe9e3;white-space:pre;overflow:hidden;flex:1;margin:8px 0 6px}
pre.code .k{color:var(--peach)}pre.code .s{color:#ffd6a8}pre.code .c{color:#6f8f8a}
.caret{display:inline-block;width:7px;height:14px;background:var(--tiffany);vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
canvas.map{position:absolute;right:0;top:0;height:100%;width:62%}
.dot{width:8px;height:8px;border-radius:50%;background:#2fd27a;box-shadow:0 0 0 0 #2fd27a88;animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px #2fd27a00}100%{box-shadow:0 0 0 0 #2fd27a00}}
.fade{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s}
.fade.on{opacity:1}
.cards{display:flex;gap:8px;align-items:center}
.cards img{height:16px;background:#fff;border-radius:3px;padding:2px 4px}
svg.ill{position:absolute;inset:0;width:100%;height:100%}
.wave{animation:wave 1.8s var(--ease) infinite;transform-origin:center;transform-box:fill-box}
.wave:nth-child(2){animation-delay:.25s}.wave:nth-child(3){animation-delay:.5s}
@keyframes wave{0%{opacity:0;transform:scale(.7)}40%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
.bob{animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.badge-cycle{font-size:22px;font-weight:800;letter-spacing:-.02em}

/* Group header */
.back-btn{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;background:#fff;color:#10201f;border-radius:999px;padding:8px 14px 8px 10px;width:max-content;box-shadow:0 4px 14px #0003}

/* Footer */
footer{display:flex;align-items:center;gap:18px;padding:0 20px;font-size:12px;color:var(--muted)}
footer .links{display:flex;gap:16px;margin-left:auto}

/* Mobile */
@media (max-width:760px){
  body{grid-template-rows:52px minmax(0,1fr)}
  header{padding:0 14px;gap:8px}
  header .pill:not(.primary),footer,#app{display:none}
  header .pill.primary{height:32px;font-size:12px;padding:0 12px}
  body.in-group header .pill.primary{display:none}
  .crumb{height:32px;font-size:12.5px;padding:0 12px 0 8px}
  main{grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr);padding:0 12px calc(10px + env(safe-area-inset-bottom))}
  #hero{grid-column:1/3;grid-row:1;padding:14px;display:grid;grid-template-columns:92px 1fr;grid-template-rows:auto auto;gap:10px 12px;align-items:center}
  #hero .kicker{display:none}
  #orb{grid-row:1;grid-column:1;height:92px;width:92px}
  #hero h1{grid-row:1;grid-column:2;font-size:22px}
  #hero .chatwrap{grid-column:1/3}
  .under,.chips,.camila{display:none}
  .chat input{font-size:16px}
  .bubble{bottom:auto;top:12px}
  #stage{grid-column:1/3;grid-row:2;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,minmax(0,1fr))}
  #stage .h2{grid-row:span 1}
  #stage [data-mobile=hide]{display:none}
  .face{padding:12px}
  .label{font-size:14px}.label.big{font-size:18px}
  .desc{font-size:11.5px}
  .tile .desc.dsk{display:none}
  canvas.map{width:70%}
  #stage .w2:not([data-id=merchants]):not([data-back]){grid-column:span 1}
  #stage [data-id=devs] pre.code{display:none}
  .chat button .t{display:none}
  .chat button{width:42px;justify-content:center;padding:0}
  .chip{top:10px;right:10px;font-size:11.5px}
  #stage .tile:not([data-id]) .chip{display:none}
  #stage .tile:not([data-back]) .desc{display:none}
}
@media (prefers-reduced-motion:reduce){
  .flip{transition:none}.tile.flippable:hover .flip{transform:none}
  .wave,.bob,.dot,.caret{animation:none}
}