/* h1z (palhoo) v2: warm and hand-drawn. Paper, ink, one slap of coral. Animations only touch transform/opacity. */
@font-face{font-family:"DM Sans";src:url(/fonts/dm-sans-v1.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque-v1.woff2) format("woff2");font-weight:600 800;font-style:normal;font-display:swap}
/* metric-matched fallbacks so the swap doesn't shift the layout */
@font-face{font-family:"DM Sans Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica"),local("Roboto");size-adjust:104%;ascent-override:94%;descent-override:29%;line-gap-override:0%}
@font-face{font-family:"Bricolage Fallback";src:local("Arial Bold"),local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:103%;ascent-override:90%;descent-override:26%;line-gap-override:0%}
:root{
  --paper:#FFF8EF;--paper2:#F2E8DD;--card:#FFFDF9;--ink:#21172C;--mut:#6A5C70;--line:#E8DDD1;--line2:#CDBFB3;
  --coral:#E64B50;--coral-t:#B8323A;--coral-b:#C2363C;--butter:#FFD76A;--pool:#82D8D0;--lav:#B9A4F5;
  --ho:#21172C;--hf:#FFF8EF;--hi:#E64B50;--hio:0;--if:none;
  --body:"DM Sans","DM Sans Fallback",system-ui,sans-serif;--disp:"Bricolage Grotesque","Bricolage Fallback","DM Sans",system-ui,sans-serif;
  --r:10px;color-scheme:light}
html.ui-dark{--paper:#1A1222;--paper2:#2A1F33;--card:#221830;--ink:#FFF8EF;--mut:#C9BBCF;--line:#33263F;--line2:#4A3B57;--coral-t:#FF8A8D;--coral-b:#FF8A8D;--ho:#FFF8EF;--hf:#2A1F33;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;font:16px/1.55 var(--body);letter-spacing:.005em;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,.h2,.disp{font-family:var(--disp);font-weight:800;letter-spacing:-.005em;line-height:1.1}
h1{font-size:clamp(28px,4vw,38px);margin:.2em 0 .5em}
h2,.h2{font-size:24px;margin:.3em 0 .5em}
.h2{display:flex;align-items:center;gap:8px}.h2 .ic{width:22px;height:22px}
.h3{font:700 15px/1.3 var(--body);margin:0 0 12px;display:flex;align-items:center;gap:8px;letter-spacing:.01em}
a{color:var(--coral-t);text-decoration-thickness:1.5px;text-underline-offset:2px}
img{max-width:100%}
p{margin:.5em 0 .8em}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:var(--card);padding:8px 12px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--mut)}.small{font-size:13.5px}.center{text-align:center}.grow{flex:1;min-width:0}.trunc{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row.end{justify-content:flex-end}.row.center{justify-content:center}.stack{display:grid;gap:8px}.pad{padding:14px}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--coral-t);outline-offset:2px;border-radius:6px}
/* icons + hand */
.ic{width:1.25em;height:1.25em;flex:none;vertical-align:-.25em;overflow:visible}
.ic-s{width:1em;height:1em;vertical-align:-.15em}
.hand{flex:none;overflow:visible}
/* buttons + inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid var(--ink);border-radius:12px;background:var(--ink);color:var(--paper)!important;font-family:var(--body);font-weight:600;font-size:15px;line-height:1;padding:10px 16px;cursor:pointer;text-decoration:none;white-space:nowrap;min-height:42px}
.btn:hover{background:#3A2B47}.btn .ic{width:18px;height:18px}
html.ui-dark .btn{background:var(--butter);border-color:var(--butter);color:#21172C!important}html.ui-dark .btn:hover{background:#FFE08A}
.btn.sm{font-size:14px;padding:7px 12px;min-height:36px;border-radius:10px}.btn.lg{font-size:17px;padding:14px 22px;min-height:52px;border-radius:14px}.btn.block{width:100%}
.btn.ghost{background:transparent;color:var(--ink)!important;border-color:var(--line2)}.btn.ghost:hover{border-color:var(--ink);background:var(--paper2)}
html.ui-dark .btn.ghost{background:transparent;color:var(--ink)!important;border-color:var(--line2)}
.btn.danger{background:#B42318;border-color:#B42318;color:#fff!important}html.ui-dark .btn.danger{background:#FF8A8D;border-color:#FF8A8D;color:#21172C!important}
.pop-shadow{box-shadow:4px 4px 0 var(--coral)}.pop-shadow:hover{box-shadow:6px 6px 0 var(--coral);transform:translate(-1px,-1px)}
.link{background:none;border:0;color:var(--coral-t);cursor:pointer;font:inherit;padding:0;text-decoration:underline;text-underline-offset:2px}.link.small{font-size:12.5px}
input,textarea,select{font:inherit;color:inherit;background:var(--card);border:1.5px solid var(--line2);border-radius:10px;padding:10px 12px;width:100%}
textarea{resize:vertical}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,215,106,.6)}
label{font-weight:600;font-size:14px}.check{display:flex;gap:10px;align-items:center;font-weight:500}.check input{width:auto;margin:0}
.prefix{display:flex;align-items:center;border:1.5px solid var(--line2);border-radius:10px;background:var(--card)}.prefix span{padding-left:12px;color:var(--mut);font-size:14px}.prefix input{border:0;box-shadow:none;background:transparent}
.prefix:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,215,106,.6)}
.hp{position:absolute;left:-9999px}
.err{background:#FDE2E1;color:#8A1C1C;padding:10px 12px;border-radius:10px;border:1.5px solid #E9A5A2}.ok{color:#1E6B3A;font-weight:600}html.ui-dark .ok{color:#8FE3A8}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;background:var(--paper2);font-size:13px;font-weight:600;border:1.5px solid var(--line2)}
.chip.ok{background:#CFF0EC;color:#21172C;border-color:#21172C}html.ui-dark .chip.ok{background:#1E3B3A;color:#BFEFEA;border-color:#3D6A67}.chip .ic{width:15px;height:15px}
.inline{display:inline}
/* nav: solid paper, one ink line */
.nav{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1.5px solid var(--ink)}
html.ui-dark .nav{border-bottom-color:var(--line2)}
.nav-in{max-width:1100px;margin:auto;display:flex;align-items:center;gap:14px;padding:8px 16px;min-height:60px}
.brand{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink)}
.brand-t{font:800 24px/1 var(--disp);letter-spacing:-.01em}
.logo{width:40px;height:40px;--ho:#21172C;--hf:var(--butter);--hio:1;transition:transform .35s var(--spring)}.brand:hover .logo{transform:rotate(-12deg) scale(1.06)}
.search{flex:1;max-width:300px;position:relative}.search .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--mut)}
.search input{border-radius:999px;padding:8px 14px 8px 36px;background:var(--card)}
.icons{margin-left:auto;display:flex;align-items:center;gap:2px}
.icons>a{position:relative;display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14.5px}
.icons>a.txt{padding:8px 12px}.icons>a.btn{color:var(--paper)!important;margin-left:6px;padding:8px 14px}
.icons>a:hover{background:var(--paper2)}.icons>a[aria-current]{--if:var(--butter)}.icons>a[aria-current] .lbl{text-decoration:underline;text-decoration-thickness:2.5px;text-underline-offset:5px;text-decoration-color:var(--coral)}
html.ui-dark .icons>a[aria-current]{--if:#5B4A2A}
.icons .ic{width:23px;height:23px}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--coral-b);color:#fff;font:700 11.5px/1 var(--body);border:2px solid var(--paper)}
html.ui-dark .badge{color:#21172C}
.icons .badge{position:absolute;top:0;left:22px;animation:pop .45s var(--spring)}
.bell.ring .ic{animation:ring .8s var(--ease);transform-origin:50% 10%}
@keyframes ring{20%{transform:rotate(16deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-3deg)}}
/* menus */
.menu{position:relative}.menu>summary{list-style:none;cursor:pointer;padding:5px 7px;border-radius:10px;color:var(--mut);display:grid;place-items:center}.menu>summary::-webkit-details-marker{display:none}
.menu>summary .ic{width:20px;height:20px}.menu[open]>summary{background:var(--paper2)}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--card);border:1.5px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 rgba(33,23,44,.12);padding:6px;z-index:40;animation:menuIn .16s var(--ease);transform-origin:top right}
html.ui-dark .menu-pop{border-color:var(--line2);box-shadow:none}
@keyframes menuIn{from{opacity:0;transform:scale(.94) translateY(-4px)}}
.menu-pop a,.menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border-radius:8px;color:var(--ink);text-decoration:none;background:none;border:0;font:inherit;font-size:14.5px;cursor:pointer}
.menu-pop .ic{width:19px;height:19px}
.menu-pop a:hover,.menu-item:hover{background:var(--paper2)}.menu-item.danger{color:#B42318}html.ui-dark .menu-item.danger{color:#FF8A8D}.menu-pop form{margin:0}
.me-menu>summary{padding:2px;border-radius:50%}
.theme-toggle{background:none;border:0;cursor:pointer;width:38px;height:38px;border-radius:10px;display:inline-grid;place-items:center;color:var(--ink)}
.theme-toggle .ic{width:21px;height:21px}.theme-toggle.menu-item{width:100%;height:auto;display:flex}
.tt-sun{display:none}html.ui-dark .tt-sun{display:inline}html.ui-dark .tt-moon{display:none}
/* layout */
main{max-width:1100px;margin:0 auto;padding:26px 16px 70px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.col-main{min-width:0;max-width:640px}
.col-side{position:sticky;top:84px}
.side{padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid var(--line)}.side:last-child{border-bottom:0}
.block:not(.btn){padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid var(--line)}
.sheet{background:var(--card);border:1.5px solid var(--ink);border-radius:14px;padding:26px;position:relative}
html.ui-dark .sheet{border-color:var(--line2)}
.narrow{max-width:440px;margin:30px auto}.narrow-w{max-width:680px;margin:0 auto}
/* avatars */
.av{border-radius:50%;object-fit:cover;flex:none;display:inline-block;vertical-align:middle;background:var(--paper2);border:1.5px solid var(--ink)}
html.ui-dark .av{border-color:var(--line2)}
.av.doodle{border:0;background:none}
.av-i{display:inline-grid;place-items:center;color:#21172C;font-family:var(--disp);font-weight:800;background:var(--avbg)}
.av.big{border-width:2.5px;box-shadow:0 0 0 5px var(--paper)}
.sup{margin-left:4px;display:inline-block}.ic-sup{width:15px;height:15px;--if:var(--butter);color:var(--ink);vertical-align:-.15em}
.name{font-weight:700;color:var(--ink);text-decoration:none}.name:hover{text-decoration:underline}
.online{position:absolute;right:6%;bottom:6%;width:16px;height:16px;border-radius:50%;background:#2FB45A;border:2.5px solid var(--paper)}
.online-dot{width:10px;height:10px;border-radius:50%;background:#2FB45A;display:inline-block}
.pav,.pav-s{position:relative;display:inline-block}.pav-s .online{width:13px;height:13px;right:0;bottom:0}
/* status chip */
.status{display:inline-flex;align-items:baseline;gap:6px;margin:6px 0;padding:4px 12px 5px;background:var(--butter);color:#21172C;border:1.5px solid #21172C;border-radius:999px;font-size:14px;font-weight:500;transform:rotate(-1deg);max-width:100%}
.st-l{font:700 11.5px/1 var(--body);letter-spacing:.04em;color:#7A3A12}
/* ---------- posts: on paper, hairlines, varied rhythm ---------- */
.post{padding:20px 0 16px;border-bottom:1px solid var(--line);animation:postIn .4s var(--ease) both}
@keyframes postIn{from{opacity:0;transform:translateY(10px)}}
.post.removing{transition:opacity .3s,transform .3s;opacity:0;transform:scale(.97)}
.ph{display:flex;gap:11px;align-items:center}.ph-t{flex:1;line-height:1.3;min-width:0}
.post .body{margin:10px 0 12px;font-size:16.5px;overflow-wrap:anywhere}
.post.p-short .body{font:600 clamp(21px,2.6vw,25px)/1.28 var(--disp);letter-spacing:0;margin:12px 0 14px;max-width:30ch}
.photo{margin:12px 0 10px}
.photo img{display:block;width:100%;height:auto;max-height:640px;object-fit:cover;background:var(--paper2);border:7px solid #fff;outline:1.5px solid var(--line2);border-radius:3px}
html.ui-dark .photo img{border-color:#FFF8EF;outline-color:transparent}
.photo.tilt-a{transform:rotate(-.7deg)}.photo.tilt-b{transform:rotate(.6deg)}
.acts{display:flex;gap:6px;align-items:center;margin-top:6px}
.five,.cbtn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line2);background:var(--card);border-radius:12px;padding:5px 12px 5px 8px;font-family:var(--body);font-weight:600;font-size:14.5px;line-height:1;color:var(--ink);cursor:pointer;text-decoration:none;position:relative;min-height:42px;transition:background-color .15s,border-color .15s}
.cbtn{border-color:transparent;background:transparent;padding:5px 10px}.cbtn .ic{width:21px;height:21px}
.five:hover{border-color:var(--ink)}.cbtn:hover{background:var(--paper2)}
.five .h5{width:30px;height:30px;transform-origin:60% 85%;transition:transform .2s var(--spring)}
.five:hover .h5{transform:rotate(-8deg)}
.five .n,.cbtn b{font:800 19px/1 var(--disp);min-width:1ch}
.five.on{background:var(--butter);border-color:#21172C;color:#21172C;--hf:#FFD76A;--ho:#21172C;--hio:1}
.n.bump{animation:bump .4s var(--spring)}@keyframes bump{40%{transform:translateY(-5px) scale(1.25)}}
/* the slap overlay (see app.js highFive) */
.slap-hand{position:fixed;z-index:70;width:58px;height:58px;pointer-events:none;--ho:#21172C;--hf:#FFD76A;--hio:0;will-change:transform,opacity}
.impact{position:fixed;z-index:71;width:120px;height:120px;margin:-60px 0 0 -60px;pointer-events:none;overflow:visible}
.impact line{stroke:#21172C;stroke-width:4;stroke-linecap:round}.impact line.c{stroke:#E64B50}
.impact .ring{fill:none;stroke:url(#slapgrad);stroke-width:5}
.slap-word{position:fixed;z-index:72;font:800 22px/1 var(--disp);color:#21172C;background:var(--butter);border:2px solid #21172C;border-radius:8px;padding:4px 8px;pointer-events:none;white-space:nowrap}
/* comments */
.comments{margin-top:4px}.clist{display:grid;gap:8px;margin:8px 0}
.cmt{display:flex;gap:8px;align-items:flex-start;animation:postIn .3s var(--ease) both}.cb{min-width:0}
.bubble-c{background:var(--paper2);border-radius:14px 14px 14px 4px;padding:7px 12px;overflow-wrap:anywhere;font-size:15px}.bubble-c .name{margin-right:4px}
.cmt small{padding-left:10px}.cmt form{display:inline}
.cform{display:flex;gap:8px;align-items:center;margin-top:8px}.cform input{border-radius:999px;padding:8px 14px;background:var(--card)}
.more-c{font-size:13.5px;margin:4px 0}
/* composer */
.composer{padding:0 0 14px;border-bottom:1.5px solid var(--ink);margin-bottom:4px}
html.ui-dark .composer{border-bottom-color:var(--line2)}
.composer textarea{border:0;background:transparent;padding:10px 4px;font-size:18px;resize:none;box-shadow:none}
.composer textarea:focus{box-shadow:none}
.comp-row{display:flex;gap:10px;align-items:flex-start}
.comp-bar{display:flex;gap:10px;align-items:center;padding-top:4px}
.file-btn{cursor:pointer}
.drop{position:relative;border-radius:10px}.drop-hint{display:none}
.drop.over,.composer.over .drop{outline:2.5px dashed var(--ink);outline-offset:4px;background:var(--paper2)}.drop.over .drop-hint,.composer.over .drop-hint{display:flex;gap:8px;align-items:center;justify-content:center;height:90px;font-weight:700}
.preview{position:relative;margin:8px 0;animation:pop .4s var(--spring)}.preview img{display:block;max-height:320px;width:auto;max-width:100%;border:6px solid #fff;outline:1.5px solid var(--line2);transform:rotate(-1deg)}
.preview .x{position:absolute;top:8px;left:8px;width:34px;height:34px;border-radius:50%;border:1.5px solid #21172C;background:#FFF8EF;color:#21172C;cursor:pointer;display:grid;place-items:center;padding:0}.preview .x .ic{width:18px;height:18px}
.progress{height:6px;border-radius:9px;background:var(--line);overflow:hidden;margin-top:10px}.progress span{display:block;height:100%;width:100%;background:var(--coral);transform-origin:left;transform:scaleX(0);transition:transform .2s}
.newpill{position:sticky;top:72px;z-index:20;display:flex;gap:6px;align-items:center;margin:12px auto;border:1.5px solid #21172C;border-radius:999px;background:var(--butter);color:#21172C;font-weight:700;padding:9px 16px;cursor:pointer;animation:pillIn .45s var(--spring)}
.newpill .ic{width:18px;height:18px}
@keyframes pillIn{from{transform:translateY(-16px) scale(.85);opacity:0}}
.skel-post{display:grid;gap:10px;min-height:120px}.sk{border-radius:8px;background:linear-gradient(90deg,var(--line) 25%,var(--paper2) 37%,var(--line) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;height:14px}
.sk-av{width:44px;height:44px;border-radius:50%}.sk-l.short{width:60%}
.sentinel{min-height:40px}.end-msg{padding:26px 0;text-align:center;font:700 17px/1.3 var(--disp);color:var(--mut)}.end-msg .ic{color:var(--coral);--if:var(--butter)}
.empty{padding:34px 10px;text-align:center}.empty h2{max-width:20ch;margin:10px auto}.empty p{max-width:42ch;margin-left:auto;margin-right:auto}
.big-hand{width:96px;height:96px;--ho:var(--ink);--hf:var(--butter);--hio:1;transform:rotate(-6deg)}
.big-ic{width:56px;height:56px;color:var(--mut)}
.small-empty{padding:18px 0}
/* sidebar */
.people{list-style:none;margin:0;padding:0;display:grid;gap:12px}.person{display:flex;align-items:center;gap:10px}.person .fb{display:flex;gap:6px;flex-wrap:wrap}.person .fb form{display:inline}
.me-link{display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none;position:relative}
.me-link small{text-decoration:underline;text-underline-offset:2px}
.me-sw{position:absolute;left:-6px;top:-6px;width:64px;height:64px;border-radius:50%;z-index:-1}
.me-side{position:relative;isolation:isolate}
.support-mini{display:flex;gap:10px;align-items:flex-start}.support-mini p{margin:0;font-size:14px}.sm-heart{width:26px;height:26px;--if:var(--butter);flex:none;margin-top:2px}
.ad-slot{text-align:center;overflow:hidden;padding:10px 0}.ad-slot small{display:block;margin-bottom:6px}
.welcome-note{position:relative;background:var(--butter);color:#21172C;border:1.5px solid #21172C;border-radius:6px;padding:20px 22px;margin:0 0 22px;transform:rotate(-.6deg)}
.welcome-note h1{margin:0 0 6px;font-size:28px}.welcome-note a.btn.ghost{color:#21172C!important;border-color:#21172C}
html.ui-dark .welcome-note .btn{background:#21172C;border-color:#21172C;color:#FFF8EF!important}html.ui-dark .welcome-note .btn.ghost{background:transparent;color:#21172C!important}
.wn-star{position:absolute;right:-14px;top:-18px;width:54px;height:54px;transform:rotate(14deg)}
/* ---------- theme patterns (hand-drawn tiles, flat colors) ---------- */
.pat{background-color:var(--tbg,#E9E2D9);background-image:var(--tpat);background-size:120px 120px;position:relative;overflow:hidden}
.cover .pat{position:absolute;inset:0;border-radius:10px;border:1.5px solid #21172C;background-image:none}
.cover .pat::after{content:"";position:absolute;inset:-120px 0 0 -120px;background-image:var(--tpat);background-size:120px 120px;animation:drift 40s linear infinite;will-change:transform}
@keyframes drift{to{transform:translate3d(120px,120px,0)}}
/* ---------- profile: a personal corner ---------- */
.profile-page main{padding-top:18px}
.cover{position:relative;height:clamp(170px,24vw,240px);margin-bottom:-72px}
.stickers{position:absolute;inset:0;z-index:2;pointer-events:none}
.stk.placed{position:absolute;width:clamp(46px,6vw,66px);height:clamp(46px,6vw,66px);transform:translate(-50%,-50%) rotate(var(--r,0deg));filter:drop-shadow(1px 2px 0 rgba(33,23,44,.18));pointer-events:auto}
.stickers.editable.editing .stk.placed{cursor:grab;touch-action:none;outline:2px dashed rgba(33,23,44,.5);outline-offset:4px;border-radius:8px}
.stickers.editing .stk.placed:focus-visible{outline:3px solid var(--coral-t)}
.stk.placed.dragging{cursor:grabbing;filter:drop-shadow(3px 6px 0 rgba(33,23,44,.25))}
.kit-bar{position:relative;z-index:3;margin:84px 0 10px;padding:12px 14px;border:1.5px dashed var(--ink);border-radius:10px;background:var(--card)}
.kit-bar p{margin:0 0 8px}.kit-tray{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.kit-btn{width:54px;height:54px;padding:5px;border:1.5px solid var(--line2);border-radius:10px;background:var(--paper);cursor:pointer}.kit-btn .stk{width:100%;height:100%}
.kit-btn[aria-pressed=true]{border-color:var(--ink);background:var(--butter)}
.phead{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:end;padding:0 8px 22px;margin-bottom:22px;border-bottom:1.5px solid var(--ink)}
html.ui-dark .phead{border-bottom-color:var(--line2)}
.kit-bar:not([hidden])+.phead{margin-top:0}
.pinfo{padding-top:80px;min-width:0}.pinfo h1{margin:0;font-size:clamp(32px,4.4vw,46px)}.pinfo p{margin:4px 0}.bio{max-width:52ch;overflow-wrap:anywhere}
.meta .ic{color:var(--coral-t)}
.pstats{display:flex;gap:26px;margin-top:12px!important}.pstats span{display:inline-flex;flex-direction:column;font-size:13.5px;color:var(--mut);font-weight:600}
.big-n{font:800 clamp(30px,3.6vw,40px)/1 var(--disp);color:var(--ink);letter-spacing:-.01em}
.pacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}.pacts form{display:inline}.fb{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.pfive .h5{width:24px;height:24px;--hf:var(--paper);--ho:#21172C;--hio:0}html.ui-dark .pfive .h5{--ho:#21172C}
.pfive.on{background:var(--butter);border-color:#21172C;color:#21172C!important}.pfive.on .h5{--hf:#FFD76A;--hio:1}
.profile .cols{grid-template-columns:290px minmax(0,1fr)}
.profile .col-side{top:84px}
.pinned{position:relative;margin:4px 10px 34px;padding:10px 10px 12px;background:#fff;border:1.5px solid var(--line2);transform:rotate(-2.4deg);box-shadow:2px 3px 0 rgba(33,23,44,.08)}
.pinned img{display:block;width:100%;height:auto;max-height:300px;object-fit:cover;border:1px solid #E8DDD1}
.pinned figcaption{font:600 15px/1.3 var(--disp);color:#21172C;margin-top:8px;padding:0 2px}
.pin-tape{position:absolute;width:96px;height:48px;left:50%;top:-22px;transform:translateX(-50%) rotate(-5deg)}
.pin-ann{position:absolute;right:-12px;bottom:-28px;font:800 16px/1 var(--disp);color:var(--coral-t);display:flex;align-items:flex-end;gap:2px;transform:rotate(-6deg)}
.pin-ann .ann{width:46px;height:30px;color:var(--coral);transform:scaleX(-1) rotate(-20deg)}
.pin-empty{display:flex;gap:6px;align-items:center;border:1.5px dashed var(--line2);border-radius:8px;padding:10px 12px}
.fgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px}.fgrid.big{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.fgrid a{display:grid;justify-items:center;gap:5px;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:600;text-align:center;min-width:0;position:relative}.fgrid a span.trunc{max-width:100%}
.fgrid a .av{transition:transform .25s var(--spring)}.fgrid a:hover .av{transform:rotate(-4deg) scale(1.05)}
.tf-n{position:absolute;left:4px;top:-2px;z-index:1;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--butter);color:#21172C;border:1.5px solid #21172C;font:800 13px/1 var(--disp)}
/* guestbook */
.guestbook{margin:0 0 26px}.gb-empty{margin:4px 0 0}
.note-form{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;margin:0 0 16px}.note-form textarea{min-height:54px}
.gnotes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px 16px}
.gnote{position:relative;padding:14px 14px 10px;border:1.5px solid #21172C;border-radius:4px;color:#21172C;box-shadow:2px 3px 0 rgba(33,23,44,.1);animation:postIn .35s var(--ease) both}
.gnote:nth-child(odd){transform:rotate(-1.3deg)}.gnote:nth-child(even){transform:rotate(1deg)}.gnote:nth-child(3n){transform:rotate(-.4deg)}
.gnote p{margin:0 0 10px;font-size:15.5px;overflow-wrap:anywhere}.gnote small{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12.5px}.gnote .name{color:#21172C}.gnote .av{border-color:#21172C}
.gnote .nx,.gnote .nrep{position:absolute;top:4px;right:6px}.gnote .nx .link,.gnote .nrep{color:#5A4B60;padding:2px}.gnote .nx .ic,.gnote .nrep .ic{width:16px;height:16px}
.n-butter{background:#FFE49A}.n-pool{background:#C6ECE7}.n-lav{background:#DDD3FB}.n-paper{background:#F2E8DD}
.posts-h{margin-top:8px}
/* friends + search */
.search-big{display:flex;gap:8px;position:relative;margin-bottom:24px}.search-big>.ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--mut)}.search-big input{padding-left:40px}
/* chat: fills the viewport, header never covers messages */
body.chat-page{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.chat-page main{flex:1;min-height:0;width:100%;display:flex;padding:16px}
.chat{flex:1;min-height:0;display:flex;flex-direction:column;max-width:760px;width:100%;margin:0 auto;border:1.5px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--card)}
html.ui-dark .chat{border-color:var(--line2)}
.chat-h{position:relative;isolation:isolate;flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--tbg);color:var(--tfg);border-bottom:1.5px solid #21172C}
.chat-h>.pat{position:absolute;inset:0;z-index:-1;opacity:.45;background-color:transparent}
.chat-h a{color:inherit;text-decoration:none}.chat-who{display:flex;gap:10px;align-items:center;min-width:0}.chat-who small{font-weight:600;opacity:.9}
.chat-h .av{border-color:#21172C}.chat-h .online{border-color:var(--tbg)}
.back{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(255,248,239,.6);color:#21172C!important}.back .ic{width:20px;height:20px}
.thread{flex:1;min-height:0;overflow-y:auto;padding:18px 14px 10px;display:flex;flex-direction:column;gap:6px;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16px);mask-image:linear-gradient(to bottom,transparent 0,#000 16px)}
.thread>:first-child{margin-top:auto}
.msg{max-width:78%;padding:8px 13px;border-radius:16px;animation:msgIn .28s var(--spring) both;overflow-wrap:anywhere;color:#21172C}
.msg p{margin:0}.msg small{display:block;font-size:11px;color:#5A4B60;margin-top:2px}
.msg.me{align-self:flex-end;background:var(--butter);border:1.5px solid #21172C;border-bottom-right-radius:4px;transform-origin:bottom right}
.msg.me a{color:#21172C}
.msg.them{align-self:flex-start;background:var(--paper2);border-bottom-left-radius:4px;transform-origin:bottom left;color:var(--ink)}.msg.them small{color:var(--mut)}
@keyframes msgIn{from{opacity:0;transform:scale(.8) translateY(8px)}}
.typing{flex:none;padding:0 16px 8px;font-size:13.5px;color:var(--mut);display:flex;gap:8px;align-items:center}
.dots{display:inline-flex;gap:3px;background:var(--paper2);padding:8px 10px;border-radius:14px}.dots i{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:dot 1.2s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.chat-form{flex:none;display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--card)}.chat-form textarea{border-radius:14px;resize:none;max-height:140px}
.chat-form .btn .ic{width:19px;height:19px}
.hello{margin:auto}.hello .big-hand{width:72px;height:72px}
.convos{list-style:none;margin:0;padding:0}.convo{display:flex;gap:12px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}.convo:hover{background:var(--paper2)}.convo.unread b{color:var(--coral-t)}
/* notifications: slap notes */
.notifs{list-style:none;margin:14px 0 0;padding:0}.notifs a{display:flex;gap:12px;align-items:center;padding:12px 8px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}.notifs a:hover{background:var(--paper2)}
.notifs li.new a{background:linear-gradient(90deg,rgba(255,215,106,.35),transparent 70%)}
.ni{display:grid;place-items:center;width:34px;flex:none}.ni-hand{width:34px;height:34px;--ho:#21172C;--hf:var(--butter);--hio:1}html.ui-dark .ni-hand{--ho:#21172C}.ni-ic{width:24px;height:24px;color:var(--ink);--if:var(--pool)}
/* settings */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px}.themes{border:0;padding:0;margin:8px 0}.themes legend{font-weight:600;font-size:14px;margin-bottom:8px}
.theme-opt{position:relative;display:grid;gap:5px;justify-items:center;cursor:pointer;font-weight:500;font-size:14px}.theme-opt input{position:absolute;opacity:0;width:1px;height:1px;top:8px;left:8px;margin:0}
.swatch{display:block;width:100%;height:58px;border-radius:8px;border:1.5px solid #21172C;overflow:hidden;transition:transform .2s var(--spring)}.swatch .pat{display:block;width:100%;height:100%}
.theme-opt input:checked+.swatch{box-shadow:0 0 0 3px var(--paper),0 0 0 5.5px var(--ink);transform:rotate(-2deg)}
.theme-opt input:focus-visible+.swatch{outline:3px solid var(--coral-t);outline-offset:4px}
.kit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin:8px 0 12px}
.kit-opt{position:relative;display:grid;justify-items:center;gap:4px;padding:8px 4px;border:1.5px solid var(--line2);border-radius:10px;cursor:pointer;font-size:13px;font-weight:500}
.kit-opt input{position:absolute;top:6px;left:6px;width:16px;height:16px;margin:0}.kit-opt .stk{width:44px;height:44px}
.kit-opt:has(input:checked){border-color:var(--ink);background:var(--paper2)}
.pick{list-style:none;margin:8px 0 12px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.avatar-form.over{outline:2.5px dashed var(--ink);outline-offset:6px;border-radius:12px}
.danger-zone h2{color:#B42318}html.ui-dark .danger-zone h2{color:#FF8A8D}
/* supporter */
.sup-big{width:84px;height:84px;transform:rotate(-8deg)}.perks{list-style:none;padding:0;text-align:left;display:grid;gap:10px;max-width:360px;margin:16px auto}.perks li{display:flex;gap:10px;align-items:center}.perks .ic{color:var(--coral-t)}
/* admin */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:22px}.stat{text-align:center;border:1.5px solid var(--line2);border-radius:10px;padding:12px}.stat b{display:block;font:800 30px/1.1 var(--disp)}
.reports{list-style:none;margin:0;padding:0;display:grid;gap:14px}.reports li{border-bottom:1px solid var(--line);padding-bottom:12px}.reports blockquote{margin:8px 0;padding:8px 12px;background:var(--paper2);border-radius:8px;overflow-wrap:anywhere}.rep-img{max-height:160px;border-radius:6px;margin-top:6px}
/* dialog */
dialog{border:1.5px solid var(--ink);border-radius:14px;padding:22px;width:min(420px,92vw);background:var(--card);color:var(--ink);box-shadow:5px 5px 0 rgba(33,23,44,.15)}
dialog[open]{animation:pop .3s var(--spring)}dialog::backdrop{background:rgba(26,18,34,.45)}.rep-form{display:grid;gap:8px}.rep-form h2{margin:0}
/* auth */
.auth{text-align:left;margin-top:40px}.auth h1{text-align:center;margin:6px 0 0}.auth .center.muted{margin-top:4px}
.auth-hand{display:block;width:72px;height:72px;margin:0 auto;--ho:var(--ink);--hf:var(--butter);--hio:1;animation:wave 2.6s ease-in-out infinite;transform-origin:60% 85%}html.ui-dark .auth-hand{--ho:#21172C}
.auth-tape{position:absolute;width:110px;height:54px;right:-26px;top:-24px;transform:rotate(18deg)}
@keyframes wave{0%,60%,100%{transform:rotate(-6deg)}15%,35%{transform:rotate(10deg)}25%,45%{transform:rotate(-12deg)}}
.pop-in{animation:pop .45s var(--spring)}
/* ---------- landing ---------- */
.landing main{max-width:1140px;padding-top:10px}
.kicker{font:700 14px/1.2 var(--body);color:var(--coral-t);letter-spacing:.02em;margin:0 0 10px}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:46px 0 56px}
.hero h1{font-size:clamp(40px,6.2vw,70px);line-height:1.02;margin:0 0 18px;letter-spacing:-.012em}
.mark-u{position:relative;display:inline-block;white-space:nowrap}.u-scribble{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.32em;color:var(--coral);pointer-events:none}
.lead{font-size:19px;color:var(--mut);max-width:32em}.cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 8px}
.scene{position:relative;min-height:560px}
.ex-tag{position:absolute;top:8px;right:8px;z-index:2;font:700 11.5px/1 var(--body);letter-spacing:.03em;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:4px 8px}
.ex-corner{position:absolute;right:2%;top:0;width:300px;background:var(--card);border:1.5px solid var(--ink);border-radius:10px;overflow:hidden;transform:rotate(2.2deg)}
.ex-cover{height:84px;border-bottom:1.5px solid #21172C}
.ex-s1,.ex-s2{position:absolute;width:42px;height:42px}.ex-s1{left:16px;top:12px;transform:rotate(-12deg)}.ex-s2{right:70px;top:30px;transform:rotate(10deg)}
.ex-who{display:flex;gap:12px;align-items:flex-end;padding:0 16px 16px;margin-top:-30px;position:relative}.ex-who .doodle{border:2px solid #21172C;border-radius:50%;background:var(--paper)}
.ex-who b{font-size:22px}.ex-who .status{font-size:13px}
.ex-post{position:absolute;left:0;top:150px;width:350px;background:var(--card);border:1.5px solid var(--ink);border-radius:10px;padding:14px 16px;transform:rotate(-1.6deg);z-index:1}
.ex-post .body{margin:8px 0}.ex-photo{margin:8px 0 10px}.ex-photo .illus{display:block;width:100%;height:auto;border:7px solid #fff;outline:1.5px solid var(--line2);transform:rotate(1.2deg)}
.ex-post .cmt{margin-top:8px}.ex-post .bubble-c b{margin-right:4px}
.hint{position:absolute;right:-118px;bottom:58px;display:flex;align-items:flex-end;gap:2px;font:800 17px/1 var(--disp);color:var(--coral-t);transform:rotate(-4deg);margin:0}
.hint .ann{width:72px;height:48px;color:var(--coral);transform:scaleX(-1)}
.scene-cap{position:absolute;bottom:0;right:4%;font-size:13.5px;color:var(--mut);margin:0}
.story{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:64px 0;border-top:1.5px solid var(--ink)}
html.ui-dark .story{border-top-color:var(--line2)}
.story h2{font-size:clamp(30px,4.2vw,46px);margin:0 0 14px}.story-txt p{font-size:17.5px;max-width:34em}
.tf-demo{position:relative}
.tf-list{list-style:none;margin:0;padding:0;display:flex;gap:20px;flex-wrap:wrap}.tf-list li{position:relative;display:grid;justify-items:center;gap:6px;font-weight:700}
.tf-list li:nth-child(odd){transform:rotate(-3deg)}.tf-list li:nth-child(even){transform:rotate(2deg) translateY(8px)}
.tf-list .tf-n{left:-4px;top:-4px}.tf-list .doodle{border:2px solid #21172C;border-radius:50%}
.ann-note{position:relative;margin:26px 0 0 30px;font:700 16px/1.3 var(--disp);color:var(--coral-t);display:flex;align-items:center;gap:8px}.ann-note .ex-tag{position:static}
.an-tf{position:absolute;left:-36px;top:-34px;width:30px;height:40px;color:var(--coral);transform:rotate(160deg)}
.signature .sig-demo{text-align:center}
.five.giant{font-size:22px;padding:16px 28px 16px 20px;border:2px solid #21172C;border-radius:18px;gap:12px;box-shadow:5px 5px 0 #21172C}
html.ui-dark .five.giant{box-shadow:5px 5px 0 #000}
.five.giant .h5{width:72px;height:72px}.five.giant .n{font-size:48px}
.everyday{grid-template-columns:1fr;gap:20px}
.vignettes{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:26px;align-items:start}
.vg{position:relative;margin:0;padding:20px 18px 14px;background:var(--card);border:1.5px solid var(--ink);border-radius:8px}
.vg figcaption{font-size:14px;color:var(--mut);margin-top:12px}
.vg-chat{grid-row:span 2;transform:rotate(-1deg)}.vg-chat .msg{margin:6px 0;max-width:86%}.vg-chat .msg.me{margin-left:auto}.vg-chat{display:flex;flex-direction:column}
.typing-demo{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--mut);margin-top:6px}
.vg-notes{transform:rotate(.8deg) translateY(10px)}.vg-notes ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}.vg-notes li{display:flex;gap:10px;align-items:center;font-size:15px}
.vg-note{background:none;border:0;padding:0}.vg-note .ex-tag{top:-6px;right:0}.vg-note .gnote{transform:rotate(-3deg);padding:20px 18px 14px}.vg-note .gnote p{font:600 19px/1.3 var(--disp)}.vg-note .gnote small{font-weight:700}
.vg-kit{grid-column:span 2;transform:rotate(.5deg)}.kit-row{display:flex;gap:10px;flex-wrap:wrap}.kit-row .stk{width:60px;height:60px}.kit-row .stk:nth-child(odd){transform:rotate(-8deg)}.kit-row .stk:nth-child(even){transform:rotate(7deg)}
.invite{text-align:center;padding:76px 0 60px;border-top:1.5px solid var(--ink)}
html.ui-dark .invite{border-top-color:var(--line2)}
.invite h2{font-size:clamp(44px,7.5vw,84px);margin:10px 0}.invite p{font-size:18px}.invite p.small{font-size:14px;max-width:52ch;margin:16px auto 0}
.invite-hand{width:120px;height:120px;--ho:var(--ink);--hf:var(--butter);--hio:1;transform:rotate(-8deg)}html.ui-dark .invite-hand,html.ui-dark .big-hand{--ho:#21172C}
.faq{max-width:720px;margin:10px auto 30px}.faq h2{font-size:24px}.faq details{border-bottom:1px solid var(--line);padding:4px 0}.faq summary{cursor:pointer;font-weight:700;font-size:16.5px;padding:12px 0}.faq details p{margin:0 0 14px;color:var(--mut)}
.foot{text-align:center;color:var(--mut);font-size:14px;padding:22px 14px 40px;border-top:1px solid var(--line)}.foot p{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap}
.foot-hand{width:22px;height:22px;--ho:var(--ink);--hf:var(--butter)}html.ui-dark .foot-hand{--ho:#21172C}
.search-big .btn{flex:none}
/* ---------- responsive ---------- */
@media (max-width:980px){.hint{display:none}}
@media (max-width:900px){
  .cols,.profile .cols{grid-template-columns:1fr;gap:10px}.col-main{max-width:none}.col-side{position:static}.profile .col-side{order:2}
  .hero{grid-template-columns:1fr;padding:26px 0 40px;gap:26px}.scene{min-height:0;display:grid;gap:22px}.ex-corner,.ex-post{position:relative;inset:auto;width:auto;max-width:420px}.ex-corner{justify-self:end;width:86%}.scene-cap{position:static}
  .story{grid-template-columns:1fr;gap:26px;padding:46px 0}.signature .sig-demo{order:2}.vignettes{grid-template-columns:1fr}.vg-chat,.vg-kit{grid-row:auto;grid-column:auto}.vg-notes{transform:rotate(.8deg)}
}
@media (max-width:640px){
  .hide-sm,.lbl{display:none}body[data-me] .brand-t{display:none}.icons>a{padding:8px}.icons .badge{left:20px}.nav-in{gap:8px;padding:6px 10px}
  main{padding:14px 14px 60px}.post .body{font-size:16px}
  .phead{grid-template-columns:1fr;justify-items:start;gap:8px;padding:0 0 18px}.pinfo{padding-top:0}.pacts{justify-content:flex-start}.pav{margin-top:0}
  .cover{margin-bottom:-56px}.pav .av.big{width:104px!important;height:104px!important}
  .gnotes{grid-template-columns:1fr 1fr;gap:14px 10px}.gnote{padding:12px 10px 8px}.gnote p{font-size:14.5px}
  .note-form{grid-template-columns:1fr}
  body.chat-page main{padding:0}.chat{border:0;border-radius:0}
  .toast{bottom:24px}.five.giant .h5{width:58px;height:58px}.five.giant .n{font-size:40px}
  .tf-list{gap:14px}.tf-list .doodle{width:60px;height:60px}
}
@media (prefers-reduced-motion:reduce){.cover .pat::after,.auth-hand,.stk.placed{animation:none!important}.photo.tilt-a,.photo.tilt-b{transform:none}}
/* generated by scripts/patterns.js: hand-drawn theme pattern tiles */
.theme-sunset{--tbg:#FFB08A;--tfg:#21172C;--tpat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23E64B50' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='28' cy='30' r='7' fill='%23FFD76A' stroke='%2321172C' stroke-width='2.4'/%3E%3Cpath d='M28 15v-5M28 50v-5M13 30H8M48 30h-5M17.4 19.4l-3.4-3.4M42 44l-3.4-3.4M17.4 40.6 14 44M42 16l-3.4 3.4' stroke='%2321172C' stroke-width='2.4'/%3E%3Cpath d='M66 82q8-8 16 0t16 0t16 0M4 96q8-8 16 0t16 0'/%3E%3C/g%3E%3C/svg%3E")}
.theme-ocean{--tbg:#82D8D0;--tfg:#21172C;--tpat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%231F6F73' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M-2 24q10-10 20 0t20 0t20 0M58 64q10-10 20 0t20 0t20 0M-2 104q10-10 20 0t20 0t20 0'/%3E%3Cpath d='M84 22c6-6 14-4 16 2-4 6-12 6-16-2zm-2 0l-6-5v10z' stroke='%2321172C' stroke-width='2.2' fill='%23FFD76A'/%3E%3C/g%3E%3C/svg%3E")}
.theme-aurora{--tbg:#B9A4F5;--tfg:#21172C;--tpat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%234A2E9A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M10 44c8-22 30-22 30 0s-22 22-12 32M70 20c10 8 26 2 30-8M76 92c4-12 20-14 26-4'/%3E%3Ccircle cx='54' cy='60' r='2.6' fill='%234A2E9A'/%3E%3Ccircle cx='100' cy='54' r='2' fill='%234A2E9A'/%3E%3Ccircle cx='26' cy='104' r='2' fill='%234A2E9A'/%3E%3C/g%3E%3C/svg%3E")}
.theme-candy{--tbg:#FFC3D8;--tfg:#21172C;--tpat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M14 16l10 6' stroke='%23D9467A'/%3E%3Cpath d='M52 30l-4 10' stroke='%23FFD76A'/%3E%3Cpath d='M90 14l10-2' stroke='%2382D8D0'/%3E%3Cpath d='M30 62l-8 8' stroke='%2382D8D0'/%3E%3Cpath d='M70 70l10 4' stroke='%23D9467A'/%3E%3Cpath d='M104 56l2 10' stroke='%23B9A4F5'/%3E%3Cpath d='M16 100l10-4' stroke='%23FFD76A'/%3E%3Cpath d='M60 104l6 8' stroke='%23B9A4F5'/%3E%3Cpath d='M96 98l-10 6' stroke='%23D9467A'/%3E%3C/g%3E%3C/svg%3E")}
.theme-galaxy{--tbg:#2A1E52;--tfg:#FFF8EF;--tpat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23FFD76A' stroke='none'%3E%3Cpath d='M22 14q2 8 10 10-8 2-10 10-2-8-10-10 8-2 10-10z'/%3E%3Cpath d='M88 70q1.6 6 8 8-6.4 2-8 8-2-6-8-8 6-2 8-8z'/%3E%3Ccircle cx='70' cy='18' r='2'/%3E%3Ccircle cx='12' cy='70' r='1.6'/%3E%3Ccircle cx='104' cy='34' r='1.6'/%3E%3Ccircle cx='44' cy='96' r='2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23B9A4F5' stroke-width='2.6'%3E%3Ccircle cx='46' cy='54' r='9' fill='%23E64B50' stroke='%23FFF8EF'/%3E%3Cpath d='M30 58q16-12 32-8' stroke='%23FFF8EF' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")}
.theme-forest{--tbg:#9ED39B;--tfg:#21172C;--tpat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2324603A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 40q4-20 22-26-2 20-22 26zM16 38l16-18'/%3E%3Cpath d='M74 92q4-20 22-26-2 20-22 26zM76 90l16-18'/%3E%3Cpath d='M60 30l6-8 6 8 6-8 6 8M8 96l6-8 6 8 6-8'/%3E%3C/g%3E%3C/svg%3E")}
.theme-mono{--tbg:#E9E2D9;--tfg:#21172C;--tpat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2321172C' stroke-opacity='.18' stroke-width='1.4'%3E%3Cpath d='M0 30H120M0 60H120M0 90H120M30 0V120M60 0V120M90 0V120'/%3E%3C/g%3E%3Cg fill='none' stroke='%2321172C' stroke-opacity='.55' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 14q6 8 14 0M74 72l12 12M86 72L74 84M40 100c4-6 10-6 12 0s8 6 12 0'/%3E%3C/g%3E%3C/svg%3E")}
/* v2 polish */
.cmt small .link{color:var(--mut);text-decoration:none}.cmt small .link:hover,.cmt small .link:focus-visible{color:var(--coral-t);text-decoration:underline}
.phead>.pav{align-self:start}.phead>.pacts{align-self:end}
.invite .cta{display:flex;justify-content:center}
.scene-cap{top:calc(100% + 66px);bottom:auto;left:16%;right:auto;margin:0;z-index:2}
@media (min-width:981px){.hero{padding-bottom:110px}}
.chat-h>.pat{-webkit-mask-image:linear-gradient(90deg,transparent 0 50%,#000 85%);mask-image:linear-gradient(90deg,transparent 0 50%,#000 85%);opacity:.6}
@media (max-width:640px){.phead>.pav{align-self:auto}}
@media (max-width:640px){.auth-tape{right:-6px;width:92px}}
/* ---------- mobile pass: touch targets, tab bar, safe areas, keyboard ---------- */
html{scroll-padding-top:76px}
.show-sm,.me-l{display:none}
.nav{padding-top:env(safe-area-inset-top)}
.nav-in{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
main{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.cols>*,.people,.person,.person .grow{min-width:0}.people{grid-template-columns:minmax(0,1fr)}
.person{flex-wrap:wrap}.person .fb{margin-left:auto}
dialog{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.chat-form{padding-bottom:max(10px,env(safe-area-inset-bottom))}
@media (hover:none),(pointer:coarse){.fine-only{display:none}}
@media (max-width:1180px){.hint{display:none}}
/* comfortable hit areas on touch screens and narrow windows (visual size mostly unchanged) */
@media (max-width:900px),(pointer:coarse){
  .btn,.btn.sm,.five,.cbtn,.chip{min-height:44px}.btn.sm{padding:9px 14px}
  .menu>summary{min-width:44px;min-height:44px}.theme-toggle{width:44px;height:44px;flex:none}.brand{min-width:44px}
  .icons>a{min-height:44px;min-width:44px;justify-content:center}.brand{min-height:44px}
  input:not([type=checkbox]):not([type=radio]),select,.cform input{min-height:44px}
  .name{display:inline-block;padding:12px 0;margin:-12px 0}.bubble-c .name{display:inline;padding:0;margin:0 4px 0 0}.clist{gap:16px}.cmt small{display:inline-block;line-height:20px}
  .link.small,.cmt small .link{display:inline-block;padding:13px 6px;margin:-13px -2px}
  .gnote .nx .link,.gnote .nrep{display:grid;place-items:center;width:44px;height:44px;margin:-10px -10px 0 0;padding:0}
  .foot a{display:inline-block;padding:12px 6px;min-width:44px;text-align:center}
  a.link,.row>a.link{display:inline-flex;align-items:center;min-height:44px}
  .chat-h .back{display:grid;place-items:center;min-width:44px;min-height:44px}
  .kit-btn{width:52px;height:52px}
  .pacts,.acts,.comp-bar,.fb{gap:10px}
  .menu-pop a,.menu-pop .menu-item{min-height:44px;display:flex;align-items:center}
}
@media (max-width:360px){.brand-t{display:none}.icons>a.txt{padding:8px}}
/* phones: bottom tab bar within thumb reach */
@media (max-width:640px){
  body[data-me]{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  body[data-me] .brand-t{display:inline}
  .show-sm{display:grid}.nav-find{place-items:center;width:44px;height:44px;margin-left:auto;border-radius:10px;color:var(--ink)}.nav-find .ic{width:22px;height:22px}
  body[data-me] .nav .icons{position:fixed;left:0;right:0;bottom:0;z-index:35;margin:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;background:var(--paper);border-top:1.5px solid var(--ink);
    padding:4px max(4px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))}
  html.ui-dark body[data-me] .nav .icons{border-top-color:var(--line2)}
  body[data-me] .icons>a,body[data-me] .icons .me-menu>summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;padding:4px 0;border-radius:12px;font-size:11.5px;font-weight:600;color:var(--ink)}
  body[data-me] .icons .lbl,body[data-me] .me-l{display:block;line-height:1.1}
  body[data-me] .icons>a[aria-current] .lbl{text-underline-offset:3px}
  body[data-me] .icons .badge{top:2px;left:calc(50% + 2px)}
  body[data-me] .icons .me-menu>summary .av{width:26px!important;height:26px!important}
  body[data-me] .me-menu .menu-pop{position:fixed;top:auto;right:max(8px,env(safe-area-inset-right));bottom:calc(70px + env(safe-area-inset-bottom));left:auto;max-height:calc(100dvh - 120px);overflow:auto;transform-origin:bottom right}
  body[data-me] .toast{bottom:calc(80px + env(safe-area-inset-bottom))}
  .newpill{top:64px}
  html{scroll-padding-bottom:80px}
  /* conversations take the whole screen; the chat header has its own back button */
  body.chat-page[data-me]{padding-bottom:0}
  body.chat-page .nav{display:none}
  main{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  body.chat-page main{padding:0}
  .chat-h{padding-top:max(10px,env(safe-area-inset-top))}
}
/* keyboard open: app.js keeps --vvh equal to the visual viewport height */
body.chat-page{height:var(--vvh,100dvh)}
/* short landscape phones: give the conversation the room */
@media (max-height:500px) and (orientation:landscape){
  body.chat-page .nav{display:none}body.chat-page main{padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
  .chat{border-radius:0;border-top:0;border-bottom:0}.chat-h{padding-top:6px;padding-bottom:6px}.chat-h .av{width:32px!important;height:32px!important}
  .nav{position:relative}
}
/* ---------- Meet people ---------- */
.meet{max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:10px;height:calc(100dvh - 57px - env(safe-area-inset-top) - 40px);min-height:540px;max-height:880px}
.meet-h h1{margin:0;font-size:clamp(26px,6vw,34px)}.meet-h p{margin:2px 0 0}
.meet-warn{margin:0;padding:8px 12px;border:1.5px dashed var(--ink);border-radius:10px;display:flex;gap:8px;align-items:center}.meet-warn .ic{width:18px;height:18px;flex:none}
.deck{position:relative;flex:1;min-height:0;margin-bottom:24px;touch-action:pan-y}
.mcard{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--card);border:2px solid #21172C;border-radius:18px;box-shadow:4px 5px 0 #21172C;overflow:hidden;
  transform-origin:50% 100%;transition:transform .32s var(--spring),opacity .25s;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mcard:nth-child(1){z-index:3;touch-action:none;cursor:grab}
.mcard:nth-child(2){z-index:2;transform:translateY(14px) scale(.95);pointer-events:none}
.mcard:nth-child(3){z-index:1;transform:translateY(26px) scale(.9);opacity:.85;pointer-events:none}
.mcard:nth-child(n+4){visibility:hidden}
.mcard.dragging{transition:none;cursor:grabbing}
.mcard.gone{pointer-events:none}
.mphoto{position:relative;flex:1;min-height:0;background:var(--tbg,#FFB08A) var(--tpat);background-size:120px}
.mphoto img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.msuper{position:absolute;top:12px;left:12px;display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border:2px solid #21172C;border-radius:999px;background:#B9A4F5;color:#21172C;font-weight:800;font-size:13.5px;transform:rotate(-3deg)}
.msuper .ic{width:17px;height:17px;--if:#FFD76A}
.mstatus{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);margin:0;transform:rotate(-1.5deg)}
.mstk{position:absolute;top:8px;right:8px;display:flex;gap:2px}.mstk .stk{width:40px;height:40px}.mstk .ms0{transform:rotate(-10deg)}.mstk .ms1{transform:rotate(8deg)}.mstk .ms2{transform:rotate(-4deg)}
.stamp{position:absolute;width:min(62%,240px);height:auto;opacity:0;pointer-events:none;transition:opacity .12s}
.st-yes{top:26px;left:16px;transform:rotate(-14deg) scale(calc(.85 + var(--p,0)*.2))}.st-pass{top:26px;right:16px;transform:rotate(14deg) scale(calc(.85 + var(--p,0)*.2))}
.st-super{left:50%;bottom:22%;transform:translateX(-50%) rotate(-6deg) scale(calc(.85 + var(--p,0)*.2))}
.mcard.dragging .stamp{transition:none}
.mstrip{flex:none;padding:10px 14px 8px;border-top:2px solid #21172C;display:grid;gap:4px;background:var(--card)}
.mtop{display:flex;align-items:baseline;gap:8px}.mname{margin:0;font-size:26px;line-height:1.1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mage{font-weight:600}
.mmut{margin-left:auto;display:inline-flex;align-items:center;gap:4px;color:var(--coral-t);font:800 18px/1 var(--disp)}.mmut .ic{width:24px;height:24px;--if:#FFD76A}
.mloc{margin:0;color:var(--mut);font-size:14.5px;display:flex;gap:4px;align-items:center}
.comm{display:flex;align-items:center;gap:8px;position:relative;font-size:14px}.meter{width:44px;height:26px;flex:none}
.comm-t{min-width:0;flex:1}.tip{position:relative}.tip>summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;margin:-10px -10px -10px 0;cursor:pointer;color:var(--mut)}.tip>summary::-webkit-details-marker{display:none}.tip .ic{width:19px;height:19px}
.tip-pop{position:absolute;right:0;bottom:calc(100% + 4px);width:min(290px,78vw);padding:10px 12px;background:var(--card);border:1.5px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 rgba(33,23,44,.15);font-size:13.5px;line-height:1.45;z-index:5}
.mints{list-style:none;margin:2px 0 0;padding:0;display:flex;gap:6px;flex-wrap:wrap;max-height:30px;overflow:hidden}.mints li{padding:3px 10px;border-radius:999px;background:var(--paper2);font-size:13px;font-weight:600}
.mints li.shared{background:var(--butter);color:#21172C;outline:1.5px solid #21172C}
.mbio{margin:0;font-size:14.5px;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mfoot{margin:0;font-size:12.5px}
@media (max-height:760px){.mbio{display:none}}
@media (max-height:640px){.mints{display:none}.meet-h p{display:none}}
.mempty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;border:2px dashed var(--line2);border-radius:18px;padding:20px}.mempty h2{margin:10px 0 0}
.mbtns{display:flex;justify-content:center;align-items:center;gap:22px;padding:14px 0 4px}
.mb{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:2px solid #21172C;box-shadow:3px 4px 0 #21172C;cursor:pointer;transition:transform .18s var(--spring),box-shadow .18s;position:relative;-webkit-tap-highlight-color:transparent}
.mb:active{transform:translateY(2px) scale(.94);box-shadow:1px 1px 0 #21172C}.mb:disabled{opacity:.45;cursor:not-allowed}
.mb.pass{background:var(--paper);color:#C2363C}.mb.pass .ic{width:34px;height:34px}
html.ui-dark .mb.pass{background:#2A1F33;color:#FF8A8D}
.mb.yes{background:#FFD76A}.mb.yes .mb-hand{width:44px;height:44px;--ho:#21172C;--hf:#FFF8EF;--hio:1}
.mb.sup{width:54px;height:54px;background:#B9A4F5;color:#21172C}.mb.sup .ic{width:26px;height:26px;--if:#FFD76A}
.mb-n{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;display:grid;place-items:center;border-radius:999px;background:var(--paper);border:1.5px solid #21172C;font:800 12px/1 var(--body);color:#21172C}
.mb.hit{animation:pop .4s var(--spring)}
.meet-keys{text-align:center;margin:0}
@media (max-width:640px){
  .meet-page main{padding-top:8px;padding-bottom:6px}.meet-page .foot{display:none}
  .meet{gap:6px;height:calc(100dvh - 57px - env(safe-area-inset-top) - 68px - env(safe-area-inset-bottom) - 20px);min-height:400px}
  .meet-h h1{font-size:24px}.meet-h p{display:none}.deck{margin-bottom:20px}
  .mbtns{padding:0;gap:20px}.mb{width:66px;height:66px}.mb.sup{width:52px;height:52px}
}
@media (max-height:500px) and (orientation:landscape){
  .meet-page .foot{display:none}.meet{height:auto;min-height:0;max-height:none;max-width:820px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"h h" "deck btns";align-items:center}.meet-h{grid-area:h}.deck{grid-area:deck;height:calc(100dvh - 120px);min-height:220px;margin-bottom:16px}
  .mbtns{grid-area:btns;flex-direction:column;gap:12px;padding:0 0 0 8px}.mcard{flex-direction:row}.mphoto{flex:1.1}.mstrip{flex:1;border-top:0;border-left:2px solid #21172C;overflow:auto}.meet-keys{display:none}
}
/* match celebration */
.match-ov{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(26,18,34,.55);animation:fadeIn .2s ease}
.match-card{width:min(420px,100%);max-height:100%;overflow:auto;background:var(--paper);color:var(--ink);border:2px solid #21172C;border-radius:20px;box-shadow:6px 6px 0 #21172C;padding:26px 20px 20px;text-align:center;position:relative;animation:pop .45s var(--spring)}
.match-card h2{margin:6px 0 2px;font-size:clamp(30px,8vw,40px)}
.match-pair{display:flex;justify-content:center;align-items:center;gap:6px;margin:14px 0 8px;position:relative;height:112px}
.match-pair img,.match-pair .av{width:96px;height:96px;border-radius:50%;border:3px solid #21172C;object-fit:cover;background:var(--butter)}
.match-pair .l{animation:slideL .5s var(--spring) both}.match-pair .r{animation:slideR .5s var(--spring) both}
.match-pair .mid{width:58px;height:58px;--ho:#21172C;--hf:#FFD76A;--hio:1;animation:pop .5s .25s var(--spring) both}
@keyframes slideL{from{transform:translateX(-60px) rotate(-12deg);opacity:0}}@keyframes slideR{from{transform:translateX(60px) rotate(12deg);opacity:0}}@keyframes fadeIn{from{opacity:0}}
.match-acts{display:grid;gap:10px;margin-top:14px}
.match-push{margin-top:14px;padding:12px;border:1.5px dashed var(--ink);border-radius:12px;font-size:14.5px}
@media (prefers-reduced-motion:reduce){.mcard,.match-card,.match-pair *{animation:none!important;transition:none!important}}
/* chat: system line when you match */
.msg.sys{align-self:center;max-width:90%;display:flex;gap:8px;align-items:center;background:var(--butter);color:#21172C;border:1.5px solid #21172C;border-radius:999px;padding:6px 14px;font-weight:600;font-size:14px}
.msg.sys p{margin:0}.msg.sys small{opacity:.7}.sys-hand{width:22px;height:22px;flex:none;--ho:#21172C;--hf:#FFF8EF}
/* settings: notifications */
.push-box{display:grid;gap:6px}.ios-hint{display:flex;gap:6px;align-items:flex-start;padding:8px 10px;background:var(--paper2);border-radius:10px;margin:0}.ios-hint .ic{width:18px;height:18px;flex:none}
.quiet-row select{width:auto;min-width:110px}
.toast .t-act{margin-left:8px;padding:6px 12px;border-radius:999px;background:var(--butter);color:#21172C;font-weight:700;text-decoration:none;pointer-events:auto;min-height:36px;display:inline-flex;align-items:center}
fieldset.pick{border:0;margin:6px 0 4px;padding:0;min-inline-size:0;gap:2px 12px}fieldset.pick legend{font-weight:700;padding:0;margin-bottom:4px;font-size:15px}
fieldset.pick .check{margin:0}
/* ---------- high-five taps: floating hands (pooled, transform/opacity only), combo counter, feed sort ---------- */
.five,.pfive,[data-demo-five]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tap-layer{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden;contain:strict}
.tap-h{position:absolute;left:0;top:0;width:30px;height:30px;opacity:0;will-change:transform,opacity;--ho:#21172C;--hio:0;overflow:visible}
.tap-h .dk{--hf:#21172C;--ho:#21172C;opacity:0}
.tap-combo{position:absolute;left:0;top:0;opacity:0;font:800 22px/1 var(--disp);color:#21172C;background:var(--butter);border:2px solid #21172C;border-radius:9px;padding:3px 8px 4px;box-shadow:2px 2px 0 #21172C;white-space:nowrap;will-change:transform,opacity;transform:rotate(-6deg)}
.big-n.bump{display:inline-block;animation:bump .4s var(--spring)}
@media (prefers-reduced-motion:reduce){.n.bump,.big-n.bump{animation:bumpc .6s ease-out!important}@keyframes bumpc{20%{color:var(--coral-t);text-decoration:underline 3px var(--butter)}}}
.feed-sort{display:flex;gap:6px;margin:14px 0 4px;padding:4px;background:var(--paper2);border-radius:14px;width:max-content;max-width:100%}
.feed-sort a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 16px;border-radius:10px;font-weight:700;color:var(--mut);text-decoration:none}
.feed-sort a .ic{width:18px;height:18px}
.feed-sort a[aria-current]{background:var(--card);color:var(--ink);box-shadow:0 0 0 1.5px var(--ink);--if:var(--butter)}
@media (pointer:coarse){.feed-sort a{min-height:44px}}

/* sample (demo) accounts */
.smp{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font:600 .68rem/1.5 system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase;vertical-align:.15em;background:#B9A4F5;color:#21172C;border:1px solid #21172C;white-space:nowrap}
.mname .smp{font-size:.62rem;vertical-align:.4em}
.brand-t .bt-n{color:var(--coral,#E64B50);display:inline-block;transform:translateY(-.06em) rotate(-6deg);margin:0 .02em}
.match-pair .av{display:grid;place-items:center;font:800 42px/1 var(--disp);color:#21172C}
.match-acts .btn{display:flex;align-items:center;justify-content:center;text-align:center}
.sexpick{border:0;padding:0;margin:0;min-width:0;display:grid;gap:8px}.sexpick legend{font-weight:600;padding:0;margin-bottom:6px}.sexpick .row{gap:22px;flex-wrap:wrap}.sexpick .radio input{width:20px;height:20px;accent-color:var(--ink)}
/* human check (signup; login after failed tries) */
.botcheck{border:2px solid var(--ink,#21172C);border-radius:16px;padding:12px 12px 10px;background:var(--card,#fff);display:grid;gap:8px;margin:6px 0 4px}
.bc-l{font-weight:700;margin:0}
.bc-track,.bc-alt,.bc-status{display:none}.botcheck.js .bc-track,.botcheck.js .bc-status{display:block}.botcheck.js .bc-alt{display:inline}
.bc-track{position:relative;height:64px;border-radius:999px;background:repeating-linear-gradient(-45deg,#FFF3D6 0 10px,#FFE9B8 10px 20px);border:2px dashed #21172C55;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.bc-hint{position:absolute;inset:0;display:grid;place-items:center;font:600 13px/1 var(--txt,inherit);color:#6A5C70;letter-spacing:.02em;pointer-events:none}
.bc-thumb{position:absolute;left:4px;top:4px;width:52px;height:52px;border-radius:50%;background:var(--coral,#E64B50);border:2px solid #21172C;display:grid;place-items:center;cursor:grab;touch-action:none;transition:transform .25s cubic-bezier(.3,1.4,.5,1);z-index:2;box-shadow:2px 3px 0 #21172C}
.botcheck.dragging .bc-thumb{transition:none;cursor:grabbing}
.bc-thumb .hand{width:34px;height:34px;transform:scaleX(-1) rotate(10deg)}
.bc-target{position:absolute;right:4px;top:2px;width:58px;height:58px;display:grid;place-items:center;pointer-events:none}
.bc-target .hand{width:50px;height:50px;transform:rotate(-12deg);transition:transform .2s}
.botcheck.slap .bc-target .hand{animation:bc-slap .45s ease}.botcheck.done .bc-hint{opacity:0}
.botcheck.done .bc-track{border-style:solid;border-color:#2E8B57;background:#E5F6EC}
@keyframes bc-slap{0%{transform:rotate(-12deg) scale(1)}35%{transform:rotate(-28deg) scale(1.25)}100%{transform:rotate(-12deg) scale(1)}}
.bc-status{margin:0}.bc-status.ok{color:#1F7A47;font-weight:600}.bc-status.err{color:#B3261E;font-weight:600}
.bc-alt{background:none;border:0;padding:0;font:inherit;font-size:14px;text-decoration:underline;color:inherit;cursor:pointer;justify-self:start;min-height:24px}
.bc-q{display:grid;gap:6px}.bc-note{margin:0;font-size:12px}.bc-ok{margin:0;color:#1F7A47;font-weight:600;display:flex;gap:6px;align-items:center}
@media (prefers-reduced-motion:reduce){.bc-thumb{transition:none}.botcheck.slap .bc-target .hand{animation:none}}