/* slaphax shared styles */
:root{
  --stone:#1b1b1b;   /* page */
  --panel:#252525;   /* demo window */
  --line:#3a3a3a;    /* dividers */
  --paper:#f1f1f1;   /* text, sticker border */
  --muted:#a3a3a3;   /* secondary text */
  --violet:#9d8cff;  /* the one accent */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--stone);color:var(--paper);
  font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
a{color:inherit}
b{font-weight:600}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
::selection{background:var(--violet);color:#111}
.wrap{width:min(1040px,100% - 40px);margin:0 auto}

/* top bar */
.top{padding:22px 0}
.top .wrap{display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.02em;text-decoration:none}
.brand img{width:30px;height:30px;border-radius:4px;display:block}
.top nav{display:flex;gap:22px;margin-left:auto;font-size:15px;color:var(--muted)}
.top nav a{text-decoration:none;white-space:nowrap}
.top nav a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:4px}

/* buttons */
.btn{
  display:inline-block;background:var(--paper);color:#151515;border:2px solid var(--paper);
  font:inherit;font-weight:600;font-size:17px;line-height:1.2;padding:13px 24px;border-radius:4px;
  text-decoration:none;cursor:pointer;
}
.btn:hover{background:transparent;color:var(--paper)}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--paper)}
.cta{display:flex;gap:12px;flex-wrap:wrap}

/* home: hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:48px 0 88px}
.hero h1{font-size:clamp(64px,12vw,148px);font-weight:800;letter-spacing:-.055em;line-height:.88;margin-bottom:28px}
.lead{font-size:clamp(19px,2.2vw,24px);line-height:1.35;max-width:26ch;margin-bottom:30px}
.facts{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;color:var(--muted);font-size:15px}
.facts a{color:var(--violet);text-underline-offset:4px}
.sticker{
  justify-self:center;width:min(100%,360px);background:#f4f4f4;padding:10px;border-radius:6px;
  transform:rotate(3deg);box-shadow:6px 8px 0 #000;
  transition:transform .3s cubic-bezier(.3,1.6,.5,1);
  animation:slap .55s cubic-bezier(.2,1.5,.4,1) backwards;
}
.sticker:hover{transform:rotate(0deg)}
.sticker img{display:block;width:100%;height:auto;border-radius:2px}
@keyframes slap{
  from{transform:rotate(10deg) scale(1.3);opacity:0}
  to{transform:rotate(3deg) scale(1);opacity:1}
}

/* home: sections */
.block{display:grid;grid-template-columns:1fr 2fr;gap:48px;padding:72px 0;border-top:1px solid var(--line)}
.block h2{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.block .note{color:var(--muted);font-size:15px;margin-top:10px;max-width:28ch}
.what p{max-width:54ch;margin-bottom:20px;font-size:19px}
.what p:last-child{margin-bottom:0}

/* ui demo: modeled on the client's ClickGui (black panels, grey rows, white text when on) */
.block.ui{grid-template-columns:1fr;gap:26px}
.ui-head .note{max-width:52ch}
.gui{background:#0c0c0c;border:1px solid var(--line);border-radius:6px;padding:16px 16px 14px}
.panels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;align-items:start}
.panels [hidden]{display:none}
.panel{background:rgba(0,0,0,.62);border-radius:3px;overflow:hidden}
.phead{background:rgba(0,0,0,.94);padding:7px 10px;font-size:14px;font-weight:600;color:#e6e6e6;border-bottom:1px solid #1d1d1d}
.row{display:flex;background:rgba(85,85,85,.14)}
.row:hover{background:rgba(85,85,85,.45)}
.rname{flex:1;min-width:0;font:inherit;font-size:13px;line-height:1.2;text-align:left;color:#aaa;background:none;border:0;padding:7px 10px;cursor:pointer}
.rname[aria-pressed="true"]{color:#e6e6e6}
.row:has(.rname[aria-pressed="true"]){background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.94))}
.rmore{width:26px;font:inherit;font-size:15px;color:#777;background:none;border:0;cursor:pointer}
.rmore:hover{color:#e6e6e6}
.rmore[aria-expanded="true"]{transform:none;color:#e6e6e6}
.item.open .rmore{transform:rotate(90deg)}
.sets{background:rgba(0,0,0,.45)}
.srow{display:flex;justify-content:space-between;width:100%;font:inherit;font-size:12px;color:#8a8a8a;background:none;border:0;padding:5px 10px 5px 16px;text-align:left}
button.srow{cursor:pointer}
button.srow:hover{background:rgba(85,85,85,.3);color:#cfcfcf}
.sval{color:#aaa}
.gbar{display:flex;gap:10px;margin-top:14px}
.gsearch{display:flex;align-items:center;justify-content:space-between;gap:10px;width:min(100%,260px);background:rgba(0,0,0,.7);border:1px solid #1d1d1d;border-radius:3px;padding:0 10px}
.gsearch input{flex:1;min-width:0;font:inherit;font-size:13px;color:#e6e6e6;background:none;border:0;padding:7px 0;outline:0}
.gsearch:focus-within{border-color:#555}
.gsearch input::placeholder{color:#7a7a7a}
#gcount{font-size:12px;color:#8a8a8a;white-space:nowrap}
.gbinds{font-size:13px;color:#aaa;background:rgba(0,0,0,.7);border:1px solid #1d1d1d;border-radius:3px;padding:7px 14px}

/* chat-style testimonial */
.msg{display:flex;gap:14px;max-width:56ch}
.msg img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.msg b{display:block;line-height:1.3;margin-bottom:2px}
.msg p{color:#d8d8d8}
.slides{display:flex;max-width:56ch;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slides .msg{flex:0 0 100%;max-width:none;scroll-snap-align:start}
.dots{display:flex;gap:8px;margin-top:20px}
.dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer}
.dots button[aria-current="true"]{background:var(--violet)}
/* big download line */
.grab{padding:84px 0 96px;border-top:1px solid var(--line)}
.grab h2{font-size:clamp(48px,10vw,112px);font-weight:800;letter-spacing:-.055em;line-height:.9;margin-bottom:24px}
.grab p{color:var(--muted);max-width:40ch;margin-bottom:28px}
.grab p a{color:var(--paper);text-underline-offset:4px}

/* footer */
.foot{border-top:1px solid var(--line);padding:28px 0 56px;color:var(--muted);font-size:14px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:10px 28px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-left:auto}
.foot a{text-decoration:none}
.foot a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:4px}
.foot small{display:block;width:100%;max-width:72ch;margin-top:6px;font-size:13px;line-height:1.5}

/* inner pages (privacy, contact, terms, changelog) */
.doc{max-width:680px;padding:40px 0 64px}
.doc h1{font-size:clamp(44px,9vw,84px);font-weight:800;letter-spacing:-.05em;line-height:.92;margin-bottom:20px}
.doc .intro{color:var(--muted);font-size:19px;max-width:48ch}
.doc .intro b{color:var(--paper)}
.doc .date{color:var(--muted);font-size:14px;margin-top:14px}
.doc h2{font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:42px 0 8px}
.doc p,.doc li{max-width:62ch}
.doc p + p{margin-top:12px}
.doc ul,.doc ol{padding-left:22px;margin-top:10px}
.doc li{margin-bottom:6px}
.doc a.inline{color:var(--violet);text-underline-offset:3px}
.doc .rule{margin-top:34px}
.doc .none{max-width:16ch;margin-top:40px;font-size:clamp(34px,7vw,60px);font-weight:800;letter-spacing:-.04em;line-height:1}

.doc .toggle{margin:36px 0 10px;font:inherit;font-size:15px;color:var(--muted);background:none;border:0;border-bottom:1px solid var(--line);padding:0 0 2px;cursor:pointer}
.doc .toggle:hover{color:var(--paper)}
.doc details{border-top:1px solid var(--line)}
.doc details:last-of-type{border-bottom:1px solid var(--line)}
.doc summary{display:flex;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;padding:18px 0;font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.doc summary::-webkit-details-marker{display:none}
.doc summary::after{content:"+";color:var(--violet);font-size:26px;line-height:1;font-weight:400}
.doc details[open] summary::after{content:"\2212"}
.doc details .body{padding:0 0 22px;color:#d0d0d0}

.doc .handle{margin:26px 0 0}
.doc .entry{padding:26px 0;border-top:1px solid var(--line)}
.doc .entry h2{margin:0 0 8px;font-size:30px;letter-spacing:-.03em}
.doc .entry .wip{color:var(--violet)}

@media (max-width:780px){
  .hero{grid-template-columns:1fr;gap:40px;padding:28px 0 64px}
  .sticker{width:min(78%,320px)}
  .block{grid-template-columns:1fr;gap:22px;padding:52px 0}
  .top .hide-sm{display:none}
  .top .wrap{gap:14px}
  .top nav{gap:14px;font-size:14px}
  .brand{font-size:19px}
  .foot nav{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sticker{animation:none;transition:none}
}