/* Lander page skeleton (nav, hero, cards, steps, FAQ, final call to action). It reads the palette variables
   set on body.lk further down in this file; the live demos come last. */

html:has(.lk){scroll-behavior:smooth}
.lk{
    --lk-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --lk-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
    margin:0;background:var(--lk-bg);color:var(--lk-ink);font:17px/1.6 var(--lk-sans);
    -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;
}
.lk *,.lk *::before,.lk *::after{box-sizing:border-box}
.lk a{color:inherit}
.lk-wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.lk-sr,.lk .sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lk :is(a,button,input,summary):focus-visible{outline:3px solid var(--lk-accent);outline-offset:3px}

/* nav */
.lk-nav{position:sticky;top:0;z-index:40;background:var(--lk-nav-bg);color:var(--lk-nav-ink);backdrop-filter:blur(10px);border-bottom:1px solid var(--lk-nav-line)}
.lk-nav .lk-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:66px}
.lk-logo{display:flex;align-items:center;gap:10px;font:900 21px/1 var(--lk-sans);letter-spacing:-.03em;text-decoration:none}
.lk-logo small{font:500 12px var(--lk-sans);letter-spacing:0;opacity:.65}
.lk-mark{width:32px;height:32px;border-radius:10px;background:var(--lk-deep);display:grid;place-items:center}
.lk-nav__links{display:flex;gap:6px;margin:0 auto}
.lk-nav__links a{text-decoration:none;font:700 14px var(--lk-sans);padding:8px 12px;border-radius:999px;opacity:.8}
.lk-nav__links a:hover{opacity:1;background:var(--lk-nav-hover)}

/* buttons */
.lk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;
    font:800 16px/1 var(--lk-sans);padding:16px 24px;border-radius:14px;background:var(--lk-accent-solid);color:#fff;
    box-shadow:0 12px 26px -12px var(--lk-accent-solid);transition:transform .12s,filter .2s}
.lk-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.lk-btn:active{transform:translateY(1px)}
.lk-btn--sm{padding:11px 16px;font-size:14px;border-radius:12px}

/* hero */
.lk-hero{position:relative;padding:56px 0 84px;overflow:hidden;overflow:clip;background:var(--lk-hero-bg);color:var(--lk-hero-ink)}
.lk-hero::before,.lk-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.lk-hero::before{width:640px;height:640px;right:-200px;top:-220px;background:radial-gradient(circle,var(--lk-glow-a),transparent 66%)}
.lk-hero::after{width:520px;height:520px;left:-240px;bottom:-300px;background:radial-gradient(circle,var(--lk-glow-b),transparent 66%)}
.lk-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:52px;align-items:center}
.lk-tag{display:inline-flex;gap:8px;align-items:center;font:800 13px var(--lk-sans);background:var(--lk-hero-chip);border:1px solid var(--lk-hero-line);padding:7px 14px;border-radius:999px}
.lk-tag i{width:9px;height:9px;border-radius:50%;background:var(--lk-accent);box-shadow:0 0 0 3px var(--lk-glow-a);animation:lk-pulse 1.6s infinite}
@keyframes lk-pulse{50%{opacity:.35}}
.lk-h1{font:900 clamp(40px,5.8vw,74px)/.98 var(--lk-sans);letter-spacing:-.045em;margin:20px 0}
.lk-h1 em{font-style:normal;color:var(--lk-hero-em,var(--lk-accent));display:block}
.lk-lede{font-size:clamp(18px,2vw,21px);color:var(--lk-hero-ink2);max-width:540px;margin:0 0 28px}
.lk-signup{display:flex;gap:10px;max-width:520px;flex-wrap:wrap}
.lk-signup input{flex:1 1 230px;min-width:0;background:var(--lk-card);border:2px solid var(--lk-line);color:var(--lk-ink);font:16px var(--lk-sans);padding:14px 16px;border-radius:14px}
.lk-signup input:focus{border-color:var(--lk-accent)}
.lk-micro{font-size:14px;color:var(--lk-hero-ink2);margin-top:14px;display:flex;gap:6px 18px;flex-wrap:wrap}
.lk-micro span::before{content:"\2713\00a0";color:var(--lk-accent);font-weight:900}

/* demo stage (tabs + panels) */
.lk-stage{min-width:0}
.lk-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;scroll-margin-top:84px}
.lk-tab{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--lk-hero-line);background:var(--lk-hero-chip);color:var(--lk-hero-ink);font:800 14px var(--lk-sans);padding:9px 16px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.lk-tab:hover{border-color:var(--tone,var(--lk-accent))}
.lk-tab[aria-selected="true"]{background:var(--tone,var(--lk-accent-solid));border-color:var(--tone,var(--lk-accent-solid));color:#fff}
.lk-panel[hidden]{display:none}
.lk-stage__note{margin:14px 0 0;font-size:13px;text-align:center;color:var(--lk-hero-ink2)}

/* sections */
.lk-sec{padding:92px 0}
.lk-sec--tint{background:var(--lk-bg2)}
.lk-sec--flush{padding-top:0}
.lk-kicker{font:800 12px var(--lk-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tone,var(--lk-accent-solid));margin-bottom:12px}
.lk-h2{font:900 clamp(32px,4.4vw,52px)/1.04 var(--lk-sans);letter-spacing:-.04em;margin:0 0 16px}
.lk-h2 em{font-style:normal;color:var(--tone,var(--lk-accent-solid))}
.lk-sub{color:var(--lk-ink2);font-size:19px;max-width:660px;margin:0}
.lk-center{text-align:center}
.lk-center .lk-sub{margin:0 auto}

/* cards */
.lk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:46px}
.lk-card{min-width:0;background:var(--lk-card);border:1px solid var(--lk-line);border-radius:22px;padding:26px;position:relative}
.lk-card h3{margin:0 0 8px;font:800 21px/1.2 var(--lk-sans);letter-spacing:-.02em}
.lk-card p{margin:0;color:var(--lk-ink2);font-size:16px}
.lk-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:22px;margin-bottom:16px;background:var(--tone,var(--lk-accent-solid));color:#fff}
.lk-card--tone{border-top:5px solid var(--tone,var(--lk-accent-solid))}
.lk-quote{display:block;background:var(--lk-bg);border:1px solid var(--lk-line);border-radius:999px;padding:8px 14px;font:600 14px var(--lk-sans);color:var(--lk-muted);margin-bottom:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:0;border:0;background:none;cursor:pointer;font:800 15px var(--lk-sans);color:var(--tone,var(--lk-accent-solid))}
.lk-link:hover{text-decoration:underline}

/* feature spotlight */
.lk-spot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.lk-spot--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.lk-spot--flip .lk-spot__copy{order:2}
.lk-feats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lk-feat{min-width:0;background:var(--lk-card);border:1px solid var(--lk-line);border-radius:18px;padding:20px}
.lk-feat i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;font-size:17px;font-style:normal;margin-bottom:12px;background:var(--lk-bg2);color:var(--tone,var(--lk-accent-solid))}
.lk-feat h3{margin:0 0 4px;font:800 18px/1.25 var(--lk-sans);letter-spacing:-.01em}
.lk-feat p{margin:0;color:var(--lk-ink2);font-size:15px}
.lk-sec--tint .lk-feat{border-color:transparent}

/* steps */
.lk-how{background:var(--lk-deep);color:#fff;position:relative;overflow:hidden;overflow:clip}
.lk-how .lk-kicker{color:var(--lk-accent)}
.lk-how .lk-sub{color:var(--lk-deep-ink2)}
.lk-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.lk-step{min-width:0;background:var(--lk-deep2);border-radius:22px;padding:28px;position:relative;overflow:hidden}
.lk-step b{position:absolute;right:-4px;top:-18px;font:900 120px/1 var(--lk-sans);color:rgba(255,255,255,.06);letter-spacing:-.06em}
.lk-step .lk-ic{background:var(--lk-accent);border-radius:50%}
.lk-step h3{margin:0 0 6px;font:800 22px/1.2 var(--lk-sans);letter-spacing:-.02em;position:relative}
.lk-step p{margin:0;color:var(--lk-deep-ink2);font-size:16px;position:relative}

/* promise */
.lk-promise{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.lk-promise div{min-width:0;background:var(--lk-card);border:1px solid var(--lk-line);border-radius:20px;padding:22px}
.lk-promise b{display:block;font:800 17px var(--lk-sans);margin-bottom:4px}
.lk-promise span{color:var(--lk-muted);font-size:15px}
.lk-promise i{display:block;width:12px;height:12px;border-radius:50%;margin-bottom:12px;background:var(--lk-accent);box-shadow:0 0 0 4px var(--lk-bg2)}

/* faq */
.lk-faq{max-width:780px;margin:44px auto 0}
.lk-faq details{border-bottom:1px solid var(--lk-line);padding:20px 0}
.lk-faq summary{cursor:pointer;list-style:none;font:700 19px var(--lk-sans);display:flex;justify-content:space-between;gap:16px}
.lk-faq summary::-webkit-details-marker{display:none}
.lk-faq summary::after{content:"+";font:800 24px/1 var(--lk-sans);color:var(--lk-accent-solid);transition:transform .2s;flex:none}
.lk-faq details[open] summary::after{transform:rotate(45deg)}
.lk-faq p{color:var(--lk-ink2);margin:12px 0 0}
.lk-faq a{color:var(--lk-accent-solid);text-decoration:underline}

/* heads-up note, "built for" chips, extra problem row, ticked/crossed lists, promise note, legal text */
.lk-heads{margin:18px 0 0;max-width:540px;font-size:14px;line-height:1.5;color:var(--lk-hero-ink2);background:var(--lk-hero-chip);border:1px solid var(--lk-hero-line);border-left:4px solid var(--lk-accent-solid);border-radius:12px;padding:12px 14px}
.lk-heads b{color:var(--lk-hero-ink)}
.lk-built{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.lk-built b{font:800 12px var(--lk-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--lk-muted);margin-right:4px}
.lk-chip{font:700 13px var(--lk-sans);background:var(--lk-card);border:1px solid var(--lk-line);color:var(--lk-ink2);padding:6px 12px;border-radius:999px}
.lk-center--next{margin-top:56px}
.lk-cards--next{margin-top:24px}
.lk-cards--four-up{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1100px){.lk-cards--four-up{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.lk-cards--four-up{grid-template-columns:1fr}}
.lk-card--wide{grid-column:1/-1}
.lk-card--wide .lk-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
@media(max-width:700px){.lk-card--wide .lk-list{grid-template-columns:1fr}}
.lk-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;color:var(--lk-ink2);font-size:15px}
.lk-list li{display:flex;gap:10px;align-items:flex-start}
.lk-list li::before{content:"\2713";font-weight:900;color:var(--lk-accent-solid);flex:none}
.lk-list--no li::before{content:"\2715";color:var(--lk-muted)}
.lk-card .lk-fix{margin-top:14px;font-weight:700;color:var(--lk-ink)}
.lk-tier{display:inline-block;font:800 11px var(--lk-sans);letter-spacing:.12em;background:var(--lk-bg2);color:var(--lk-accent-solid);border-radius:999px;padding:5px 10px;margin-top:14px}
.lk-pnote{max-width:780px;margin:28px auto 0;text-align:center;color:var(--lk-muted);font-size:15px}
.lk-pnote b{color:var(--lk-ink)}
.lk-disc{font-size:13px;line-height:1.55;color:var(--lk-muted)}
.lk-disc p{margin:0 0 12px;max-width:860px}
.lk-disc strong{color:var(--lk-ink2)}

/* closing call to action */
.lk-final{text-align:center;background:var(--lk-deep);color:#fff;border-radius:32px;margin:0 20px 40px;padding:96px 20px;position:relative;overflow:hidden}
.lk-final::before{content:"";position:absolute;left:50%;top:-30%;width:900px;height:900px;margin-left:-450px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,var(--lk-glow-a),transparent 62%)}
.lk-final>*{position:relative}
.lk-final .lk-kicker{color:var(--lk-accent)}
.lk-final .lk-h2{color:#fff;font-size:clamp(38px,5.8vw,70px)}
.lk-final .lk-sub{color:var(--lk-deep-ink2);margin:0 auto}
.lk-final .lf-signup{--lf-accent:var(--lk-accent-solid);--lf-accent-ink:#fff;--lf-accent-solid:var(--lk-accent-solid)}
.lk-final .lk-micro{justify-content:center;color:#fff}

/* footer + mobile bar */
.lk-foot{padding:24px 0 100px;color:var(--lk-muted);font-size:14px}
.lk-foot .lk-wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lk-foot a{text-decoration:none;margin-left:18px}
.lk-foot a:hover{color:var(--lk-ink)}
.lk-foot .lk-links a:first-child{margin-left:0}
.lk-mcta{position:fixed;left:12px;right:12px;bottom:12px;z-index:45;display:none;transform:translateY(140%);transition:transform .3s}
.lk-mcta.show{transform:none}
.lk-mcta .lk-btn{width:100%;padding:17px}

.lk-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.lk-reveal.on{opacity:1;transform:none}

@media (max-width:960px){
    .lk-nav__links{display:none}
    .lk-nav .lk-btn{display:none}
    .lk-hero__grid{grid-template-columns:minmax(0,1fr)}
    .lk-stage{max-width:600px;width:100%;margin:6px auto 0}
    .lk-spot{grid-template-columns:minmax(0,1fr);gap:32px}
    .lk-spot--flip .lk-spot__copy{order:0}
    .lk-steps{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
    .lk-promise{grid-template-columns:1fr 1fr}
    .lk-sec{padding:64px 0}
    .lk-mcta{display:block}
    .lk-final{margin:0 12px 30px;padding:70px 18px;border-radius:26px}
}
@media (max-width:560px){
    .lk-feats,.lk-promise{grid-template-columns:1fr}
    .lk-signup .lk-btn{width:100%}
    .lk-tab{padding:8px 13px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
    .lk *,.lk *::before,.lk *::after{animation:none!important;transition:none!important}
    .lk-reveal{opacity:1;transform:none}
    html:has(.lk){scroll-behavior:auto}
}

/* Swap n Shop lander: palette for the page skeleton above, the feature tones, and the two live demos
   (Swap or Sell .dm-trd, Wafflr .dm-waf), each scoped to its own wrapper so their class names and colours stay separate. */

.lk--shop{
    --lk-bg:#f3faf8; --lk-bg2:#e1f3ef; --lk-card:#ffffff; --lk-ink:#10241f; --lk-ink2:#3b514b; --lk-muted:#5f756f; --lk-line:#d5e8e2;
    --lk-accent:#2dd4bf; --lk-accent-solid:#0f766e;
    --lk-deep:#0b2e2a; --lk-deep2:#123f3a; --lk-deep-ink2:#bfe0da;
    --lk-nav-bg:rgba(243,250,248,.9); --lk-nav-ink:#10241f; --lk-nav-line:#d5e8e2; --lk-nav-hover:rgba(16,36,31,.06);
    --lk-hero-bg:linear-gradient(180deg,#e6f8f4,#f3faf8 72%); --lk-hero-ink:#10241f; --lk-hero-ink2:#3b514b; --lk-hero-line:#d5e8e2; --lk-hero-chip:#ffffff; --lk-hero-em:#0d9488;
    --lk-glow-a:rgba(20,184,166,.25); --lk-glow-b:rgba(251,146,60,.28);
}
.lk-tone-trade{--tone:#0f766e}
.lk-tone-waffle{--tone:#b45309}
.lk--shop .lk-cards--two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:860px;margin-left:auto;margin-right:auto}

.lk--shop .lk-mark{background:linear-gradient(135deg,#14b8a6 50%,#fb923c 50%)}

/* ---- demos ---- */
.dm-trd{--cream:#fff6e9; --cream2:#ffecd2; --card:#ffffff; --ink:#1f2330; --ink2:#434859; --muted:#6f6a64; --line:#f0dfc6;
    --orange:#ff7a1a; --orange2:#d95e05; --orangeT:#b84c00; --teal:#0f8f83; --teal2:#0a6d63; --tealL:#d6f2ee; --sun:#ffd23f;
    --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --round: ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font:17px/1.6 var(--sans);color:var(--ink);text-align:left}
.dm-trd .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font:800 16px/1 var(--round);padding:16px 24px;border-radius:14px;background:var(--orange);color:#fff;box-shadow:0 4px 0 var(--orange2);transition:transform .12s,box-shadow .12s}
.dm-trd .btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--orange2)}
.dm-trd .btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--orange2)}
.dm-trd .btn.t{background:var(--teal);color:#fff;box-shadow:0 4px 0 var(--teal2)}
.dm-trd .btn[disabled]{opacity:.6;cursor:wait}
.dm-trd .sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dm-trd :is(input,button):focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.dm-trd{background:var(--card);border-radius:26px;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);overflow:hidden}
.dm-trd .dh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 18px;background:var(--ink);color:#fff;font-size:13px}
.dm-trd .dh b{font:800 15px var(--round)}
.dm-trd .dh .lab{font:700 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.14);padding:5px 9px;border-radius:999px;white-space:nowrap}
.dm-trd .listing{display:grid;grid-template-columns:132px 1fr;gap:14px;padding:16px 16px 12px;border-bottom:2px solid var(--ink)}
.dm-trd .lph{position:relative;border-radius:16px;min-height:150px;display:grid;place-items:center;overflow:hidden;border:2px solid var(--ink)}
.dm-trd .lph .em{font-size:58px;line-height:1;filter:drop-shadow(0 6px 6px rgba(0,0,0,.18))}
.dm-trd .lph .rb{position:absolute;left:6px;top:6px;font:800 9px var(--sans);letter-spacing:.1em;background:rgba(31,35,48,.82);color:#fff;padding:3px 6px;border-radius:5px}
.dm-trd .lb{min-width:0}
.dm-trd .lb h3{margin:0;font:900 20px/1.15 var(--round);letter-spacing:-.01em}
.dm-trd .lb .ds{margin:3px 0 8px;font-size:14px;line-height:1.4;color:var(--ink2)}
.dm-trd .lb dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:13.5px;line-height:1.35}
.dm-trd .lb dt{font:800 11px/1.6 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.dm-trd .lb dd{margin:0;min-width:0;overflow-wrap:anywhere}
.dm-trd .lb dd.w{font-weight:700;color:var(--teal2)}
.dm-trd .lnav{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font:700 13px var(--sans);color:var(--muted)}
.dm-trd .lnav{gap:8px}
.dm-trd .lnav span{text-align:center}
.dm-trd .lnav button{white-space:nowrap;flex:none;font:800 13px var(--round);border:2px solid var(--line);background:var(--cream);color:var(--ink);border-radius:10px;padding:6px 10px;cursor:pointer}
.dm-trd .lnav button:hover{border-color:var(--orange)}
.dm-trd .builder{padding:14px 16px 14px;background:repeating-linear-gradient(135deg,#fffaf2 0 14px,#fff6e9 14px 28px)}
.dm-trd .say{font:800 17px var(--round);margin:0 0 10px;color:var(--ink)}
.dm-trd .slots{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.dm-trd .for{font:900 16px var(--round);color:var(--orangeT)}
.dm-trd .slot{background:var(--card);border:2px dashed #e6c9a2;border-radius:18px;padding:8px 8px 10px;text-align:center;position:relative;min-width:0}
.dm-trd .slot .who{font:700 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dm-trd .slot .em{font-size:38px;line-height:1.2;display:block;margin:2px 0 0;transition:transform .2s}
.dm-trd .slot .nm{font:800 14px/1.25 var(--round);min-height:36px;display:flex;align-items:center;justify-content:center}
.dm-trd .slot.bump .em{animation:trd-bump .3s}
@keyframes trd-bump{40%{transform:scale(1.18) rotate(-6deg)}}
.dm-trd .cyc{display:flex;justify-content:center;gap:8px;margin-top:6px}
.dm-trd .cyc button{width:40px;height:34px;border-radius:10px;border:2px solid var(--line);background:var(--cream);cursor:pointer;font:800 16px var(--sans);color:var(--ink)}
.dm-trd .cyc button:hover{border-color:var(--orange)}
.dm-trd .cash{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.dm-trd .cash button{font:800 13px var(--round);padding:7px 6px;border-radius:10px;border:2px solid var(--line);background:var(--cream);color:var(--ink);cursor:pointer}
.dm-trd .cash button[aria-pressed="true"]{background:var(--tealL);border-color:var(--teal);color:var(--teal2)}
.dm-trd .go{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:12px;flex-wrap:wrap}
.dm-trd .go .btn{flex:1 1 auto}
.dm-trd .thread{border-top:2px solid var(--ink);padding:14px 16px 16px;min-height:190px;background:#fff;display:flex;flex-direction:column;gap:10px}
.dm-trd .empty{margin:auto;text-align:center;color:var(--muted);font-size:14px}
.dm-trd .msg{max-width:88%;padding:10px 13px;border-radius:16px;font-size:15px;line-height:1.4;animation:trd-pop .45s ease-out}
.dm-trd .msg.me{align-self:flex-end;background:var(--tealL);border-bottom-right-radius:5px}
.dm-trd .msg.them{align-self:flex-start;background:var(--cream2);border-bottom-left-radius:5px}
.dm-trd .msg small{display:block;font:700 11px var(--sans);color:var(--muted);margin-bottom:3px}
.dm-trd .offer{align-self:flex-end;width:min(300px,92%);background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:12px 14px;position:relative;box-shadow:4px 4px 0 var(--orange);animation:trd-fly .6s cubic-bezier(.2,.9,.3,1.2)}
.dm-trd .offer .ot{font:800 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--orangeT)}
.dm-trd .offer .row{display:flex;align-items:center;gap:8px;margin-top:4px;font:800 15px/1.3 var(--round)}
.dm-trd .offer .row .sw{color:var(--teal);font-size:18px;width:22px;text-align:center}
.dm-trd .offer .row:not(.r2){padding-left:30px}
.dm-trd .offer .row .x{flex:1;min-width:0}
.dm-trd .typing{align-self:flex-start;background:var(--cream2);border-radius:16px;padding:12px 14px;display:flex;gap:4px}
.dm-trd .typing i{width:7px;height:7px;border-radius:50%;background:#b8a58a;animation:trd-dot 1s infinite}
.dm-trd .typing i:nth-child(2){animation-delay:.15s}
.dm-trd .typing i:nth-child(3){animation-delay:.3s}
@keyframes trd-dot{50%{transform:translateY(-4px);opacity:.5}}
@keyframes trd-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes trd-fly{from{opacity:0;transform:translate(-40px,-60px) rotate(-8deg) scale(.8)}to{opacity:1;transform:none}}
.dm-trd .deal{align-self:center;margin-top:2px;font:800 13px var(--round);color:var(--teal2);background:var(--tealL);padding:6px 12px;border-radius:999px;animation:trd-pop .4s}
.dm-trd .deal.ctr{color:var(--orangeT);background:#ffe6cf}
.dm-trd .note{font-size:12px;color:var(--muted);text-align:center;margin:0;padding:0 16px 14px;background:#fff}

@media (max-width:960px){.dm-trd{box-shadow:5px 5px 0 var(--ink)}}
@media (max-width:560px){.dm-trd .listing{grid-template-columns:96px 1fr;gap:12px;padding:14px 12px 10px}
.dm-trd .lph{min-height:118px}
.dm-trd .lph .em{font-size:44px}
.dm-trd .lb dl{grid-template-columns:1fr;gap:0}
.dm-trd .lb dt{margin-top:3px}
.dm-trd .builder{padding:14px 12px 12px}
.dm-trd .slots{gap:6px}
.dm-trd .slot .em{font-size:34px}}

.dm-waf{--cream:#fff7ea; --cream2:#fbead0; --card:#ffffff; --ink:#3a1d08; --ink2:#5f4230; --muted:#7a6353; --line:#f0dcbc;
    --waffle:#e8a23a; --waffle2:#c77f17; --waffleD:#b86f10; --syrup:#5a2d0c; --syrup2:#3a1d08; --berry:#d7263d; --berry2:#a8182c; --butter:#ffe18a; --mint:#2c9f7a;
    --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --round: ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    --mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font:17px/1.6 var(--sans);color:var(--ink);text-align:left}
.dm-waf .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font:800 16px/1 var(--round);padding:16px 24px;border-radius:14px;background:var(--berry);color:#fff;box-shadow:0 4px 0 var(--berry2);transition:transform .12s,box-shadow .12s}
.dm-waf .btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--berry2)}
.dm-waf .btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--berry2)}
.dm-waf .btn.alt{background:var(--card);color:var(--syrup);box-shadow:0 4px 0 var(--line);border:2px solid var(--line)}
.dm-waf .btn[disabled]{opacity:.55;cursor:default;transform:none}
.dm-waf .nm.empty{animation:none;background:none;color:var(--muted)}
.dm-waf .run .row3{margin-top:10px}
.dm-waf :is(input,select,button):focus-visible{outline:3px solid var(--syrup);outline-offset:2px}
.dm-waf{background:var(--card);border-radius:24px;border:2px solid var(--syrup);box-shadow:8px 8px 0 var(--waffle);overflow:hidden}
.dm-waf .dh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;background:var(--syrup);color:#fff;font-size:13px}
.dm-waf .dh b{font:800 15px var(--round)}
.dm-waf .dh .lab{font:700 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.16);padding:5px 9px;border-radius:999px;white-space:nowrap}
.dm-waf .tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:2px solid var(--line)}
.dm-waf .tabs button{font:800 14px var(--round);padding:11px 8px;border:0;background:var(--cream);color:var(--muted);cursor:pointer;border-bottom:3px solid transparent}
.dm-waf .tabs button[aria-selected="true"]{background:var(--card);color:var(--syrup);border-bottom-color:var(--berry)}
.dm-waf .dbody{padding:14px 16px 12px}
.dm-waf .lst{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:start}
.dm-waf .ph{height:104px;border-radius:14px;position:relative;display:grid;place-items:center;overflow:hidden;border:2px solid var(--waffle2);
    background-color:var(--waffle);background-image:linear-gradient(rgba(199,127,23,.55) 3px,transparent 3px),linear-gradient(90deg,rgba(199,127,23,.55) 3px,transparent 3px);background-size:16px 16px}
.dm-waf .ph .em{font-size:50px;line-height:1;filter:drop-shadow(0 4px 4px rgba(0,0,0,.2))}
.dm-waf .ph .rb{position:absolute;left:5px;top:5px;font:800 8.5px var(--sans);letter-spacing:.1em;background:rgba(58,29,8,.82);color:#fff;padding:3px 5px;border-radius:4px}
.dm-waf .lst h3{margin:0;font:900 19px/1.15 var(--round);overflow-wrap:anywhere}
.dm-waf .lst p{margin:3px 0 0;font-size:13.5px;line-height:1.4;color:var(--ink2)}
.dm-waf .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 10px}
.dm-waf .stat{background:var(--cream);border:1.5px solid var(--line);border-radius:12px;padding:7px 8px;text-align:center;min-width:0}
.dm-waf .stat small{display:block;font:800 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dm-waf .stat b{display:block;font:900 18px/1.2 var(--round);font-variant-numeric:tabular-nums;color:var(--syrup)}
.dm-waf .stat.dl b{color:var(--berry2)}
.dm-waf .bar{height:12px;border-radius:999px;background:var(--cream2);overflow:hidden;border:1px solid var(--line)}
.dm-waf .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--waffle),var(--berry));border-radius:999px;transition:width .3s}
.dm-waf .barl{display:flex;justify-content:space-between;gap:8px;font:700 13px var(--round);color:var(--ink2);margin-top:4px}
.dm-waf .names{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 10px;max-height:78px;overflow:auto;padding:2px}
.dm-waf .nm{display:inline-flex;align-items:center;gap:4px;font:700 12.5px var(--round);background:var(--cream2);border-radius:999px;padding:3px 9px;animation:waf-pop .35s}
.dm-waf .nm i{font-style:normal;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.dm-waf .nm.me{background:#dff3ea;color:#16654b}
.dm-waf .nm.win{background:var(--butter);box-shadow:0 0 0 2px var(--waffle)}
@keyframes waf-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.dm-waf .go{display:flex;gap:8px;flex-wrap:wrap}
.dm-waf .go .btn{flex:1 1 140px;padding:14px 12px}
.dm-waf .drum{margin:10px 0 8px;height:64px;border-radius:14px;position:relative;overflow:hidden;display:grid;place-items:center;text-align:center;
    background-color:var(--waffle);background-image:linear-gradient(rgba(199,127,23,.55) 3px,transparent 3px),linear-gradient(90deg,rgba(199,127,23,.55) 3px,transparent 3px);background-size:18px 18px;border:2px solid var(--waffle2)}
.dm-waf .drum .win-name{position:relative;z-index:1;background:var(--card);border-radius:12px;padding:6px 14px;font:900 18px/1.15 var(--round);color:var(--syrup);min-width:70%;max-width:92%;box-shadow:0 3px 0 var(--waffle2);overflow-wrap:anywhere}
.dm-waf .drum .win-name small{display:block;font:700 10.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dm-waf .drum.spin .win-name{animation:waf-jig .09s linear infinite}
@keyframes waf-jig{50%{transform:translateY(-3px) rotate(-1deg)}}
.dm-waf .drum.done .win-name{background:var(--butter);animation:waf-land .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes waf-land{from{transform:scale(.8)}to{transform:none}}
.dm-waf .conf{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;z-index:2;animation:waf-fall 1.3s ease-in forwards}
@keyframes waf-fall{to{transform:translate(var(--dx),110px) rotate(540deg);opacity:0}}
.dm-waf .rec{background:#fbf5ea;border:1px solid var(--line);border-radius:12px;padding:8px 10px;font:12.5px/1.45 var(--mono);color:var(--ink2);max-height:112px;overflow:auto}
.dm-waf .rec h4{margin:0 0 4px;font:800 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dm-waf .rec p{margin:0 0 6px;padding-bottom:6px;border-bottom:1px dashed var(--line);overflow-wrap:anywhere}
.dm-waf .rec p:last-child{border:0;margin:0;padding:0}
.dm-waf .rec .none{color:var(--muted);border:0}
.dm-waf .run label{display:block;font:800 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px}
.dm-waf .run label:first-child{margin-top:0}
.dm-waf .run input,.dm-waf .run select{width:100%;font:700 16px var(--round);padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--cream);color:var(--ink)}
.dm-waf .run .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dm-waf .run .row3>div{min-width:0}
.dm-waf .run .hint{font-size:12.5px;color:var(--muted);margin:8px 0 12px;line-height:1.4}
.dm-waf .run .btn{width:100%}
.dm-waf .note{font-size:12px;color:var(--muted);text-align:center;margin:0;padding:0 14px 12px}

@media (max-width:960px){.dm-waf{box-shadow:5px 5px 0 var(--waffle)}}
@media (max-width:560px){.dm-waf .dbody{padding:12px 12px 10px}
.dm-waf .lst{grid-template-columns:84px 1fr;gap:10px}
.dm-waf .ph{height:84px}
.dm-waf .ph .em{font-size:40px}
.dm-waf .stat b{font-size:16px}
.dm-waf .run .row3{grid-template-columns:1fr 1fr}
.dm-waf .run .row3>div:last-child{grid-column:1/-1}}