:root { --bg:#f7fff7; --text:#14221d; --muted:#697871; --green:#0f9970; --line:rgba(15,153,112,.16); --surface:#fff; --shadow:0 25px 70px rgba(26,48,39,.18); }
html[data-theme="dark"] { --bg:#101513; --text:#f2f7f4; --muted:#b7c2bc; --green:#32c897; --line:rgba(255,255,255,.14); --surface:#18211d; --shadow:0 25px 70px rgba(0,0,0,.34); }
* { box-sizing:border-box; } body { min-width:320px; margin:0; color:var(--text); background:radial-gradient(circle at 20% 10%,#d8f9e8,transparent 35%),var(--bg); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
.discover-header { width:min(1120px,calc(100% - 40px)); height:84px; margin:auto; display:flex; align-items:center; justify-content:space-between; }.brand { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-size:1.3rem; font-weight:850; }.brand img { width:40px; height:40px; border-radius:50%; object-fit:cover; }.back { color:var(--muted); font-weight:700; text-decoration:none; }
main { width:min(1040px,calc(100% - 32px)); margin:3rem auto 5rem; display:grid; grid-template-columns:minmax(260px,.85fr) minmax(320px,1.15fr); gap:clamp(2rem,8vw,8rem); align-items:center; }.eyebrow { margin:0 0 .8rem; color:var(--green); font-size:.76rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }.intro h1 { margin:0 0 1rem; max-width:500px; font-size:clamp(2.6rem,5.5vw,5.2rem); line-height:.94; letter-spacing:-.075em; }.intro>p:not(.eyebrow) { max-width:410px; color:var(--muted); line-height:1.65; }
.swipe-area { width:min(100%,410px); justify-self:center; }.card-stack { position:relative; height:550px; }.post-card { position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(20,34,29,.08); border-radius:28px; background:var(--surface); box-shadow:var(--shadow); touch-action:none; user-select:none; cursor:grab; transform-origin:50% 110%; }.post-card:active { cursor:grabbing; }.post-image { position:relative; height:48%; background:linear-gradient(140deg,#0b8763,#52d6ab); }.post-image img { width:100%; height:100%; object-fit:cover; }.post-image .type { position:absolute; top:16px; left:16px; padding:.45rem .7rem; border-radius:99px; color:#fff; background:rgba(15,28,22,.64); font-size:.74rem; font-weight:800; backdrop-filter:blur(10px); }.post-content { padding:1.35rem 1.5rem 1.5rem; }.person { display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem; }.avatar { width:36px; height:36px; display:grid; place-items:center; overflow:hidden; border-radius:50%; color:#fff; background:var(--green); font-weight:850; }.avatar img { width:100%; height:100%; object-fit:cover; }.person strong { display:block; font-size:.88rem; }.person small { color:var(--muted); }.post-content h2 { margin:0 0 .75rem; font-size:1.65rem; line-height:1.08; letter-spacing:-.045em; }.post-content p { margin:0; display:-webkit-box; overflow:hidden; color:var(--muted); line-height:1.52; -webkit-line-clamp:3; -webkit-box-orient:vertical; }.loading,.empty { width:100%; padding:2rem; text-align:center; color:var(--muted); }.controls { display:flex; justify-content:center; gap:1.2rem; margin-top:1.6rem; }.controls button { width:62px; height:62px; border:1px solid var(--line); border-radius:50%; background:#fff; box-shadow:0 10px 25px rgba(22,55,42,.1); cursor:pointer; font-size:2.2rem; }.controls .skip { color:#8b9691; }.controls .heart { color:#ef4978; font-size:1.9rem; }.hint { color:var(--muted); text-align:center; font-size:.82rem; }
@media (max-width:760px) { .discover-header { width:calc(100% - 32px); }.discover-header .back { font-size:.9rem; } main { margin-top:1.4rem; grid-template-columns:1fr; gap:2rem; }.intro { text-align:center; }.intro>p:not(.eyebrow) { margin-left:auto; margin-right:auto; }.card-stack { height:510px; } }

.card-stack { isolation:isolate; }
.card-stack::before,.card-stack::after { content:""; position:absolute; inset:14px 8px -10px; z-index:-1; border:1px solid var(--line); border-radius:28px; background:rgba(255,255,255,.72); transform:rotate(3deg); box-shadow:0 12px 34px rgba(26,48,39,.08); }
.card-stack::after { inset:7px 4px -5px; z-index:-2; transform:rotate(-2deg); opacity:.74; }
.chat-ready { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; margin-top:1.2rem; padding:.68rem .85rem; border:0; border-radius:12px; background:#0f9970; color:#fff; font-size:.78rem; font-weight:850; cursor:pointer; box-shadow:0 8px 18px rgba(15,153,112,.22); }
.hint { display:flex; align-items:center; justify-content:center; gap:.7rem; margin:1rem 0 0; color:var(--text); font-size:.94rem; }
.hint strong { font-weight:850; }
.swipe-motion { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#0f9970; background:rgba(15,153,112,.12); font-size:1.1rem; animation:swipe-left 1.4s ease-in-out infinite; }
.swipe-motion-right { animation-name:swipe-right; }
@keyframes swipe-left { 0%,100% { transform:translateX(0); opacity:.45; } 50% { transform:translateX(-7px); opacity:1; } }
@keyframes swipe-right { 0%,100% { transform:translateX(0); opacity:.45; } 50% { transform:translateX(7px); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .swipe-motion { animation:none; opacity:1; } }
.card-actions { position:absolute; inset:auto 14px 14px auto; display:flex; gap:.55rem; }
.card-actions button { width:46px; height:46px; border:0; border-radius:50%; background:rgba(255,255,255,.94); box-shadow:0 8px 20px rgba(0,0,0,.18); cursor:pointer; font-size:1.7rem; }
.card-actions .skip { color:#66736d; }
.card-actions .heart { color:#e64071; font-size:1.35rem; }
body.is-embedded { min-width:0; background:transparent; }
body.is-embedded .discover-header, body.is-embedded .intro { display:none; }
body.is-embedded main { display:block; width:100%; margin:0; }
body.is-embedded .swipe-area { width:100%; max-width:none; }
body.is-embedded .card-stack { height:500px; }
body.is-embedded .hint { margin:.7rem 0 0; }
@media (max-width:760px) { body.is-embedded .card-stack { height:470px; } }