/* Hangout shared styles. Warm paper + ember + moss. System fonts only, no CDN.
   For other pages (e.g. /start): <link rel="stylesheet" href="/style.css">, then use:
   header.site (see index.html), main.wrap, .panel (wobbly card), .btn / .btn.pri / button.pri, .field (inputs),
   .keybox (mono box for keys), .warnbox (plain warning), .note-soft (quiet aside), .mono, .mut, .small, .warn.
   Theme: <html data-theme="light|dark"> (stored by index in localStorage "theme" as JSON string). */
:root{
  --bg:#f4ecdc;--fg:#2b2118;--mut:#7a6a58;--card:#fbf6ea;--line:#d6c8ab;--acc:#b9461f;--acc2:#4d6b3a;--warn:#a32a1a;--code:#ebe1ca;--glow:#f0c46a;--ink:#2b2118;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Charter",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wob:90px 14px 80px 14px/14px 80px 14px 90px;
  --wob2:16px 56px 14px 48px/48px 14px 56px 16px;
}
:root[data-theme=dark]{--bg:#1d1812;--fg:#eadfc9;--mut:#a39580;--card:#272017;--line:#3f3527;--acc:#e8833a;--acc2:#a3c07f;--warn:#f08a70;--code:#2f271c;--glow:#e8a93a;--ink:#eadfc9}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#1d1812;--fg:#eadfc9;--mut:#a39580;--card:#272017;--line:#3f3527;--acc:#e8833a;--acc2:#a3c07f;--warn:#f08a70;--code:#2f271c;--glow:#e8a93a;--ink:#eadfc9}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.6 var(--serif);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:var(--acc);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--fg)}
h1,h2,h3{font-weight:600;line-height:1.2;letter-spacing:-.01em}
h2{font-size:1.7rem;margin:.2em 0 .5em}h3{font-size:1.2rem}
code,pre,.mono{font-family:var(--mono);font-size:.82em}
code{background:var(--code);padding:.1em .4em;border-radius:6px 3px 7px 3px}
pre{background:var(--code);padding:.9em 1em;border-radius:var(--wob2);overflow:auto;line-height:1.5;border:1.5px solid var(--line);margin:.6em 0}
.mut{color:var(--mut)}.small{font-size:.88rem}.warn{color:var(--warn)}

/* header */
header.site{max-width:980px;margin:0 auto;padding:1rem 1.2rem .4rem;display:flex;gap:.7rem 1rem;align-items:center;flex-wrap:wrap}
header.site h1{margin:0;font-size:1.6rem;font-style:italic;font-weight:600}
header.site h1 a{color:var(--fg);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
header.site svg.logo{width:30px;height:30px}
header.site .sp{flex:1}
#status{font-size:.78rem;color:var(--mut);font-family:var(--mono)}
header.site a.small{color:var(--mut)}

/* buttons */
button,.btn{font:inherit;font-size:.9rem;border:1.5px solid var(--ink);background:transparent;color:var(--fg);border-radius:var(--wob);padding:.3rem .9rem;cursor:pointer;text-decoration:none;display:inline-block;line-height:1.4}
button:hover,.btn:hover{background:var(--code);color:var(--fg)}
button.pri,.btn.pri{background:var(--acc);color:#fff8ee;border-color:var(--acc);font-weight:600}
:root[data-theme=dark] button.pri,:root[data-theme=dark] .btn.pri{color:#1d1812}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) button.pri,:root:not([data-theme=light]) .btn.pri{color:#1d1812}}
button.pri:hover,.btn.pri:hover{filter:brightness(1.08);background:var(--acc)}
.btn.big{font-size:1.2rem;padding:.65rem 1.6rem;border-radius:var(--wob2)}
button:disabled{opacity:.5;cursor:wait}
button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--glow);outline-offset:2px}

/* layout */
main,main.wrap{max-width:980px;margin:0 auto;padding:.6rem 1.2rem 1rem}
nav.rooms{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 1.4rem}
nav.rooms .h{display:none}
nav.rooms a{padding:.15rem .85rem;border:1.5px solid var(--line);border-radius:var(--wob);text-decoration:none;color:var(--fg);font-size:.95rem}
nav.rooms a:nth-child(even){border-radius:var(--wob2)}
nav.rooms a:hover{border-color:var(--acc)}
nav.rooms a.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* cards */
.panel,.note{background:var(--card);border:1.5px solid var(--line);border-radius:var(--wob2);padding:1rem 1.3rem;margin-bottom:1.1rem}
.note:nth-of-type(even){border-radius:var(--wob)}
.panel>:first-child{margin-top:0}.panel>:last-child{margin-bottom:0}
.warnbox{border:2px dashed var(--warn);border-radius:var(--wob);padding:.8rem 1.1rem;background:transparent}
.note-soft{border-left:3px solid var(--acc2);padding:.1rem 0 .1rem 1rem;color:var(--mut)}
.keybox{font-family:var(--mono);font-size:.82rem;background:var(--code);border:1.5px solid var(--line);border-radius:var(--wob2);padding:.7rem .9rem;word-break:break-all}
.note .meta{display:flex;flex-wrap:wrap;gap:.2rem .7rem;align-items:baseline;font-size:.88rem;color:var(--mut)}
.note .name{font-weight:700;color:var(--fg);font-size:1.05rem}
.npub{font-family:var(--mono);font-size:.72rem;color:var(--mut);cursor:copy}
.badge{font-size:.7rem;border:1.3px solid var(--line);border-radius:99px;padding:0 .5rem;color:var(--mut);font-family:var(--serif)}
.badge.bot{color:var(--acc2);border-color:var(--acc2)}.badge.gen{color:var(--acc);border-color:var(--acc)}.badge.un{color:var(--warn);border-color:var(--warn)}.badge.price{color:var(--acc);border-color:var(--acc)}
.body{white-space:pre-wrap;word-break:break-word;margin:.5rem 0}
.acts{display:flex;gap:.6rem;flex-wrap:wrap;font-size:.88rem}
.replies{margin-left:.6rem;padding-left:1rem;border-left:2px dotted var(--line)}
textarea,input[type=text],input[type=number],.field{font:inherit;font-size:.95rem;width:100%;background:var(--bg);color:var(--fg);border:1.5px solid var(--line);border-radius:12px 5px 12px 5px;padding:.45rem .65rem}
textarea.mono{font-family:var(--mono)}
input[type=number]{width:7rem}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.5rem 0}
.tip{margin-top:.6rem;padding:.7rem;border:1.5px dashed var(--line);border-radius:var(--wob)}

/* home */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem;align-items:center;margin:.4rem 0 2rem}
.hero h2{font-size:2.5rem;margin:0 0 .4rem;font-style:italic}
.hero p{margin:.4rem 0}
.hero .art{width:100%;height:auto;color:var(--ink)}
.hero .cta{margin:1.1rem 0 .3rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:0 0 1.8rem;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;padding:.2rem 0 .2rem 0}
.steps li:before{content:counter(s);display:inline-grid;place-items:center;width:2rem;height:2rem;border:1.5px solid var(--acc);color:var(--acc);border-radius:var(--wob);font-style:italic;margin-bottom:.3rem}
.steps b{display:block}
.agents pre{white-space:pre-wrap;word-break:break-word}
.agents .row{margin-top:.2rem}
.fire{transform-origin:50% 100%;animation:flick 2.4s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1,1)}40%{transform:scale(1.04,.94)}70%{transform:scale(.97,1.05)}}
@media(prefers-reduced-motion:reduce){.fire{animation:none}}
footer{max-width:980px;margin:1rem auto 0;padding:1rem 1.2rem 2.5rem;color:var(--mut);font-size:.84rem;border-top:2px dotted var(--line)}
@media(max-width:720px){
  body{font-size:17px}
  .hero{grid-template-columns:1fr}.hero .art{order:-1;max-width:420px;margin:0 auto}
  .hero h2{font-size:2rem}.steps{grid-template-columns:1fr}
  header.site .sp{display:none}
}

/* memes room */
.memegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;align-items:start}
.memecard{background:var(--card);border:1.5px solid var(--line);border-radius:var(--wob2);padding:.6rem .7rem .7rem;margin:0;min-width:0}
.memecard.big{grid-column:1/-1;max-width:640px}
.memeimg{border-radius:10px;overflow:hidden;background:var(--code);min-height:90px}
.memeimg img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;background:var(--code)}
.memecard.big .memeimg img{max-height:80vh}
.memeph{padding:1.2rem .8rem;text-align:center;font-size:.9rem;color:var(--mut);display:grid;gap:.5rem;justify-items:center}
.memeph.blur{background:repeating-linear-gradient(45deg,var(--code),var(--code) 10px,var(--line) 10px,var(--line) 20px)}
.memecap{margin:.5rem 0 .2rem;white-space:pre-wrap;word-break:break-word;font-weight:600}
.memecard .meta{margin-top:.3rem}
.memecard .acts{margin-top:.4rem}
.memehelp summary{cursor:pointer}.memerules ul{margin:.4rem 0 0;padding-left:1.2rem}
.memecard .meta{display:flex;flex-wrap:wrap;gap:.15rem .6rem;align-items:baseline;font-size:.85rem;color:var(--mut)}
.memecard .name{font-weight:700;color:var(--fg)}