/* ==========================================================================
   Community: chat, wall and art. Uses the site's tokens (--bg, --fg, --line, --surface) and its flat colour blocks.
   ========================================================================== */
.cm{--r:18px;--cm0:#f5a9c4;--cm1:#ffb36b;--cm2:#ffe070;--cm3:#9fddb0;--cm4:#9dc8f5;--cm5:#c2b0f6;--cm6:#a8e3f0;--cm7:#ff9d8c;--cm8:#b9ecd0;--cm9:#e0c9ff;--cm10:#ffd2b8;--cm11:#d6ee8a;position:relative;color:var(--fg)}
.cm [hidden]{display:none!important}
.cm button{font-family:inherit}
.cm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* a shorter page header, so the app is on screen straight away */
.phero--compact{padding-top:clamp(5.5rem,9vw,7rem)}
.phero--compact .phero-grid{gap:1rem}
.phero--compact .phero-meta{padding-bottom:.6rem}
.phero--compact .phero-title{font-size:clamp(2.6rem,8vw,6.5rem);line-height:.9}
.phero--compact .phero-foot{padding-bottom:1.4rem}
.phero--compact .phero-img{display:none}
.phero--compact+.sec{padding-top:1.5rem!important}

/* page chrome: the site helper would sit on top of the send button, and Mochi takes its place here */
[data-page="community"] .chat-btn{display:none}
body.cm-full .quick-exit,body.cm-full .chat-btn{display:none}
body.cm-full .toast{z-index:220}

/* top tabs */
.cm-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.2rem}
.cm-tabs{display:flex;gap:.4rem;flex-wrap:wrap}
.cm-tab{border:1.5px solid var(--line);background:transparent;color:var(--fg);padding:.65rem 1.1rem;border-radius:999px;font-weight:650;font-size:.92rem;line-height:1;display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.cm-tab:hover{border-color:var(--fg)}
.cm-tab[aria-selected="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.cm-dot{width:.55rem;height:.55rem;border-radius:50%;background:#1f8f55;display:inline-block}
.cm-me{margin-left:auto;display:flex;align-items:center;gap:.5rem;position:relative}
.cm-meb{display:inline-flex;align-items:center;gap:.55rem;border:1.5px solid var(--line);background:transparent;color:var(--fg);padding:.3rem .9rem .3rem .3rem;border-radius:999px;font-weight:650;font-size:.92rem}
.cm-meb:hover{border-color:var(--fg)}
.cm-menu{position:absolute;right:0;top:calc(100% + .5rem);z-index:30;min-width:14rem;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.25);padding:.4rem;display:flex;flex-direction:column}
.cm-menu button,.cm-menu a{border:0;background:transparent;color:inherit;text-align:left;padding:.7rem .9rem;border-radius:10px;font-weight:600;font-size:.94rem;text-decoration:none;display:block}
.cm-menu button:hover,.cm-menu a:hover{background:var(--surface2)}
.cm-menu .danger{color:var(--alert)}

/* avatars */
.cm-av{--ac:var(--cm0);width:2.4rem;height:2.4rem;border-radius:50%;background:var(--ac);display:inline-grid;place-items:center;font-size:1.25rem;line-height:1;flex:none;color:#0e0e10;user-select:none}
.cm-av.sm{width:1.9rem;height:1.9rem;font-size:1rem}
.cm-av.lg{width:3.4rem;height:3.4rem;font-size:1.8rem}
.cm-meb .cm-av{width:2rem;height:2rem;font-size:1.05rem}

/* gate: join or log in */
.cm-gate{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.cm-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.2rem,3vw,2rem)}
.cm-card h2{font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1;margin-bottom:.6rem}
.cm-card h3{font-size:1.2rem;margin:1.2rem 0 .4rem;font-stretch:100%}
.cm-card p{max-width:60ch}
.cm-safe{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.55rem}
.cm-safe li{display:block;position:relative;padding-left:1.4rem;font-size:.95rem;line-height:1.45}
.cm-safe li::before{content:"";position:absolute;left:0;top:.42rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--c,var(--green))}
.cm-field{margin-bottom:1.1rem}
.cm-field>label,.cm-label{display:flex;justify-content:space-between;font-weight:650;font-size:.9rem;margin-bottom:.35rem}
.cm-in{width:100%;padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--fg);font-size:1rem;transition:border-color .2s}
.cm-in:focus{outline:none;border-color:var(--fg)}
textarea.cm-in{resize:vertical;min-height:7rem;line-height:1.45}
.cm-key{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em}
.cm-picks{display:flex;flex-wrap:wrap;gap:.35rem}
.cm-pick{width:2.6rem;height:2.6rem;border-radius:50%;border:2px solid transparent;background:var(--surface2);font-size:1.3rem;display:grid;place-items:center;padding:0}
.cm-pick[aria-pressed="true"]{border-color:var(--fg);transform:scale(1.08)}
.cm-sw{width:1.9rem;height:1.9rem;border-radius:50%;border:2px solid transparent;background:var(--ac);padding:0}
.cm-sw[aria-pressed="true"]{border-color:var(--fg);box-shadow:0 0 0 2px var(--bg) inset}
.cm-check{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;line-height:1.4;margin:.8rem 0}
.cm-check input{width:1.2rem;height:1.2rem;margin-top:.15rem;flex:none;accent-color:var(--fg)}
.cm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;background:var(--fg);color:var(--bg);padding:.85rem 1.4rem;border-radius:999px;font-weight:650;font-size:.96rem;line-height:1;text-decoration:none;transition:opacity .2s,transform .2s}
.cm-btn:hover{transform:translateY(-1px)}
.cm-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.cm-btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line)}
.cm-btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--fg)}
.cm-btn.sm{padding:.6rem 1rem;font-size:.86rem}
.cm-btn.danger{background:var(--alert);color:#fff}
.cm-err{color:var(--alert);font-weight:650;min-height:1.4em;margin:.6rem 0 0;font-size:.94rem}
.cm-ok{color:#1f8f55;font-weight:650}
.cm-keybox{background:var(--yellow);color:#0e0e10;border-radius:14px;padding:1.2rem;margin:1rem 0}
.cm-keybox .cm-key{font-size:clamp(1.15rem,4vw,1.6rem);font-weight:700;display:block;margin:.4rem 0 .8rem;word-break:break-all}
.cm-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.cm-closed{text-align:center;padding:clamp(2rem,6vw,4rem)}

/* chat shell */
.cm-chat{display:grid;grid-template-columns:15.5rem minmax(0,1fr) 13.5rem;height:min(80dvh,56rem);min-height:30rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.cm-rooms,.cm-who{background:var(--bg2);padding:.8rem;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:.35rem}
.cm-rooms h3,.cm-who h3{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--fg2);margin:.4rem .5rem .2rem;font-stretch:100%}
.cm-room{border:0;background:transparent;color:var(--fg);text-align:left;padding:.7rem .8rem;border-radius:12px;display:flex;flex-direction:column;gap:.1rem}
.cm-room:hover{background:var(--surface2)}
.cm-room[aria-current="true"]{background:var(--fg);color:var(--bg)}
.cm-room b{font-size:.98rem;display:flex;justify-content:space-between;align-items:center}
.cm-room span{font-size:.78rem;opacity:.75;line-height:1.3}
.cm-room .n{font-size:.75rem;font-weight:700;background:var(--surface2);color:var(--fg);padding:.1rem .5rem;border-radius:999px}
.cm-room[aria-current="true"] .n{background:var(--bg);color:var(--fg)}
.cm-rules{margin-top:auto;padding:.7rem .8rem 3.4rem;font-size:.8rem;color:var(--fg2);line-height:1.4}
.cm-rules a{font-weight:650}
.cm-main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.cm-head{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);min-height:3.6rem}
.cm-head h2{font-size:1.15rem;line-height:1.1;margin:0;font-stretch:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-head p{margin:0;font-size:.8rem;color:var(--fg2);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-head .sp{flex:1;min-width:0}
.cm-status::before{content:"";display:none;width:.6rem;height:.6rem;border-radius:50%;background:currentColor}
.cm-status{font-size:.75rem;font-weight:700;padding:.25rem .65rem;border-radius:999px;background:var(--surface2);color:var(--fg2);white-space:nowrap}
.cm-status.ok{background:#d6f0de;color:#14592f}
.cm-status.bad{background:#fbd5d5;color:#8a1c1c}
.cm-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1rem;display:flex;flex-direction:column;gap:.15rem;scroll-behavior:smooth}
.cm-more{align-self:center;margin:.3rem 0 .8rem}
.cm-empty{margin:auto;text-align:center;color:var(--fg2);max-width:26rem;padding:1rem}
.cm-new{position:absolute;left:50%;transform:translateX(-50%);bottom:6.2rem;z-index:5;border:0;background:var(--fg);color:var(--bg);padding:.55rem 1rem;border-radius:999px;font-weight:650;font-size:.85rem;box-shadow:0 6px 20px rgba(0,0,0,.3)}

/* messages */
.cm-m{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.6rem;padding:.35rem .4rem;border-radius:14px;position:relative;margin-top:.4rem}
.cm-m.cont{margin-top:0}
.cm-m.cont .cm-m-av,.cm-m.cont .cm-m-meta{visibility:hidden;height:0;overflow:hidden;margin:0}
.cm-m.cont .cm-m-av{height:auto}
.cm-m:hover,.cm-m:focus-within,.cm-m.open{background:color-mix(in srgb,var(--fg) 5%,transparent)}
.cm-m-meta{display:flex;align-items:baseline;gap:.5rem;font-size:.82rem;line-height:1.2;margin-bottom:.15rem}
.cm-nick{font-size:.92rem;cursor:pointer}
.cm-m time{color:var(--fg2);font-size:.74rem}
.cm-badge{font-size:.62rem;font-weight:800;letter-spacing:.08em;padding:.12rem .4rem;border-radius:6px;background:var(--violet);color:#0e0e10}
.cm-badge.team{background:var(--yellow)}
.cm-bub{display:block;max-width:min(40rem,100%);overflow-wrap:anywhere;line-height:1.45;font-size:1rem}
.cm-bub .me{background:var(--yellow);color:#0e0e10;border-radius:5px;padding:0 .2rem;font-weight:650}
.cm-m.mine .cm-nick{opacity:.8}
.cm-m.bot .cm-bub,.cm-m.team .cm-bub{background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--stripe) border-box;border:2px solid transparent;border-radius:14px;padding:.55rem .8rem;display:inline-block}
.cm-m.team .cm-bub{background:var(--yellow);color:#0e0e10;border-color:var(--yellow)}
.cm-gifimg{display:block;max-width:min(16rem,100%);height:auto;border-radius:12px;background:var(--surface2)}
.cm-quote{font-size:.8rem;color:var(--fg2);border-left:3px solid var(--line);padding:.1rem .6rem;margin:.1rem 0 .3rem;max-width:30rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-rx{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.25rem}
.cm-rx:empty{display:none}
.cm-rxb{border:1.5px solid var(--line);background:var(--bg);color:var(--fg);padding:.12rem .55rem;border-radius:999px;font-size:.82rem;display:inline-flex;gap:.3rem;align-items:center}
.cm-rxb.on{border-color:var(--fg);background:var(--surface2)}
.cm-acts{position:absolute;right:.4rem;top:-.9rem;display:none;gap:.1rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.15rem;box-shadow:0 4px 14px rgba(0,0,0,.18);z-index:4}
.cm-m:hover .cm-acts,.cm-m:focus-within .cm-acts,.cm-m.open .cm-acts{display:flex}
.cm-act{border:0;background:transparent;color:var(--fg);width:2rem;height:2rem;border-radius:50%;font-size:1rem;display:grid;place-items:center;padding:0}
.cm-act:hover{background:var(--surface2)}
.cm-pop{position:absolute;z-index:20;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.28);padding:.4rem}
.cm-pop.rxp{display:flex;gap:.1rem;right:2.4rem;top:1.4rem}
.cm-pop.rxp button{border:0;background:transparent;font-size:1.3rem;padding:.3rem .4rem;border-radius:10px}
.cm-pop.rxp button:hover{background:var(--surface2)}

/* games inside the chat */
.cm-game{border:1.5px solid var(--line);background:var(--bg);border-radius:16px;padding:.9rem 1rem;max-width:34rem}
.cm-game h4{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;margin:0 0 .35rem;color:var(--fg2)}
.cm-game .q{font-size:1.06rem;font-weight:650;line-height:1.3;margin:0 0 .7rem}
.cm-gopts{display:grid;gap:.45rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.cm-gopts.pick{grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr))}
.cm-gbtn{border:1.5px solid var(--line);background:var(--surface);color:var(--fg);padding:.7rem .8rem;border-radius:12px;text-align:left;font-weight:600;font-size:.94rem;line-height:1.25;position:relative;overflow:hidden;transition:border-color .2s,transform .15s}
.cm-gbtn:hover:not([disabled]){border-color:var(--fg);transform:translateY(-1px)}
.cm-gbtn small{display:block;font-weight:400;opacity:.7;margin-top:.15rem}
.cm-gbtn[disabled]{cursor:default}
.cm-gbtn.right{border-color:#1f8f55;background:#d6f0de;color:#10351f}
.cm-gbtn.wrong{opacity:.6}
.cm-gbtn .fill{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--fg) 10%,transparent);z-index:0}
.cm-gbtn span{position:relative;z-index:1}
.cm-gbtn.sel{border-color:var(--fg);background:var(--surface2)}
.cm-timer{height:.3rem;border-radius:99px;background:var(--surface2);overflow:hidden;margin:.7rem 0 0}
.cm-timer i{display:block;height:100%;width:100%;background:var(--fg);transform-origin:left;animation:cmtime linear forwards}
@keyframes cmtime{to{transform:scaleX(0)}}
.cm-gfoot{font-size:.8rem;color:var(--fg2);margin:.5rem 0 0}
.cm-hang{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:clamp(1.4rem,5vw,2rem);letter-spacing:.2em;font-weight:700;margin:.2rem 0 .3rem;word-break:break-all}
.cm-keys{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}
.cm-key1{width:2.1rem;height:2.1rem;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);color:var(--fg);font-weight:700;text-transform:uppercase;padding:0}
.cm-key1:hover:not([disabled]){border-color:var(--fg)}
.cm-key1[disabled]{opacity:.3;cursor:default}
.cm-story{margin:0;padding-left:1.1rem;line-height:1.45}

/* composer */
.cm-compose{border-top:1px solid var(--line);padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom));position:relative;background:var(--surface)}
.cm-note{font-size:.84rem;font-weight:650;margin:0 0 .5rem;padding:.55rem .8rem;border-radius:10px;background:#fbd5d5;color:#6e1414;display:flex;gap:.6rem;align-items:flex-start;justify-content:space-between}
.cm-note.info{background:var(--surface2);color:var(--fg)}
.cm-note button{border:0;background:transparent;color:inherit;font-size:1.1rem;line-height:1;padding:0 .2rem}
.cm-care{border:2px solid var(--green);background:var(--bg);border-radius:14px;padding:.8rem 1rem;margin:0 0 .6rem;font-size:.92rem}
.cm-care p{margin:0 0 .4rem}
.cm-care a{font-weight:700}
.cm-reply{display:flex;justify-content:space-between;gap:.5rem;font-size:.82rem;background:var(--surface2);padding:.4rem .7rem;border-radius:10px;margin-bottom:.5rem;align-items:center}
.cm-reply button{border:0;background:transparent;font-size:1.1rem;line-height:1;padding:0 .2rem;color:inherit}
.cm-typing{height:1.2rem;font-size:.78rem;color:var(--fg2);padding:0 .3rem;margin-bottom:.2rem}
.cm-bar{display:flex;gap:.4rem;align-items:flex-end}
.cm-tool{border:0;background:var(--surface2);color:var(--fg);width:2.7rem;height:2.7rem;border-radius:50%;font-size:1.2rem;display:grid;place-items:center;flex:none;padding:0;font-weight:800}
.cm-tool:hover{background:color-mix(in srgb,var(--fg) 16%,var(--surface2))}
.cm-tool.txt{font-size:.72rem;letter-spacing:.04em}
.cm-ta{flex:1;min-width:0;resize:none;max-height:8rem;min-height:2.7rem;padding:.7rem 1rem;border-radius:22px;border:1.5px solid var(--line);background:var(--bg);color:var(--fg);font-size:1rem;line-height:1.3}
.cm-ta:focus{outline:none;border-color:var(--fg)}
.cm-send{border:0;background:var(--fg);color:var(--bg);height:2.7rem;padding:0 1.2rem;border-radius:999px;font-weight:700;flex:none}
.cm-send[disabled]{opacity:.4}
.cm-count{font-size:.72rem;color:var(--fg2);text-align:right;margin:.25rem .4rem 0;min-height:1em}

/* pickers: emoji, GIF, games */
.cm-sheet{position:absolute;left:.6rem;right:.6rem;bottom:calc(100% + .4rem);z-index:25;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.28);max-height:min(24rem,50dvh);display:flex;flex-direction:column;overflow:hidden;max-width:26rem}
.cm-sheet header{display:flex;gap:.3rem;padding:.5rem;border-bottom:1px solid var(--line);overflow-x:auto}
.cm-sheet header button{border:0;background:transparent;color:var(--fg);font-size:1.2rem;padding:.35rem .55rem;border-radius:10px;flex:none}
.cm-sheet header button[aria-pressed="true"]{background:var(--surface2)}
.cm-eg{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.4rem,1fr));gap:.1rem;padding:.5rem;overflow-y:auto;overscroll-behavior:contain}
.cm-eg button{border:0;background:transparent;font-size:1.5rem;padding:.3rem;border-radius:10px;line-height:1}
.cm-eg button:hover{background:var(--surface2)}
.cm-gifs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:7.4rem;gap:.4rem;padding:.5rem;overflow-y:auto;overscroll-behavior:contain;align-content:start;flex:1 1 auto;min-height:0}
.cm-gifs button{border:0;padding:0;background:var(--surface2);border-radius:10px;overflow:hidden;height:100%;min-height:0;cursor:pointer}
.cm-gifs img{width:100%;height:100%;object-fit:cover;display:block}
.cm-sheet .s{padding:.5rem}
.cm-sheet .cm-in{padding:.6rem .9rem}
.cm-sheet .pw{font-size:.72rem;color:var(--fg2);padding:.3rem .8rem .6rem;margin:0}
.cm-cmds{padding:.3rem;overflow-y:auto}
.cm-cmds button{display:flex;justify-content:space-between;gap:1rem;width:100%;border:0;background:transparent;color:var(--fg);text-align:left;padding:.55rem .7rem;border-radius:10px;font-size:.92rem}
.cm-cmds button:hover{background:var(--surface2)}
.cm-cmds small{color:var(--fg2)}

/* people */
.cm-person{display:flex;align-items:center;gap:.55rem;padding:.35rem .5rem;border-radius:10px;font-size:.9rem;font-weight:600;border:0;background:transparent;color:var(--fg);text-align:left;width:100%}
.cm-person:hover{background:var(--surface2)}
.cm-person .b{font-size:.58rem;font-weight:800;letter-spacing:.08em;padding:.1rem .35rem;border-radius:5px;background:var(--violet);color:#0e0e10}
.cm-person small{display:block;font-weight:400;color:var(--fg2);font-size:.72rem}
.cm-peoplebtn{display:none}
.cm-peopleclose{display:none;margin:.4rem .5rem}
.cm-who.show .cm-peopleclose{display:inline-flex}

/* wall and art */
.cm-bar2{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:1.2rem}
.cm-wall{columns:18rem;column-gap:1rem}
.cm-post{break-inside:avoid;margin:0 0 1rem;background:var(--c,var(--pink));color:#0e0e10;border-radius:var(--r);padding:1.2rem 1.3rem;position:relative}
.cm-post .cat{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.cm-post p{margin:.5rem 0 .8rem;white-space:pre-wrap;overflow-wrap:anywhere;max-width:none;font-size:1.02rem;line-height:1.45}
.cm-post .by{font-size:.82rem;font-weight:650;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.cm-hrt{border:0;background:rgba(255,255,255,.55);color:#0e0e10;border-radius:999px;padding:.35rem .75rem;font-weight:700;font-size:.85rem;display:inline-flex;gap:.35rem;align-items:center}
.cm-hrt.on{background:#0e0e10;color:#fff}
.cm-flag{border:0;background:transparent;color:inherit;opacity:.55;font-size:.78rem;text-decoration:underline;padding:.2rem}
.cm-flag:hover{opacity:1}
.cm-art{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:1rem}
.cm-piece{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.cm-piece button.im{border:0;padding:0;background:var(--surface2);aspect-ratio:1;display:block;cursor:zoom-in}
.cm-piece img{width:100%;height:100%;object-fit:cover;display:block}
.cm-piece .t{padding:.8rem 1rem 1rem}
.cm-piece h3{font-size:1.05rem;line-height:1.2;margin:0 0 .2rem;font-stretch:100%}
.cm-piece .by{font-size:.8rem;color:var(--fg2);display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.cm-list{display:grid;gap:.7rem}
.cm-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;display:grid;gap:.4rem}
.cm-item p{margin:0;max-width:none;white-space:pre-wrap;overflow-wrap:anywhere}
.cm-stat{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .6rem;border-radius:999px;background:var(--surface2)}
.cm-stat.approved{background:#d6f0de;color:#14592f}.cm-stat.rejected{background:#fbd5d5;color:#6e1414}.cm-stat.pending{background:#fff0c2;color:#6b4a00}

/* dialogs */
dialog.cm-dlg{border:1px solid var(--line);border-radius:20px;padding:0;background:var(--surface);color:var(--fg);width:min(34rem,calc(100vw - 1.5rem));max-height:calc(100dvh - 1.5rem);overflow:auto;overscroll-behavior:contain;box-shadow:0 24px 80px rgba(0,0,0,.45)}
dialog.cm-dlg::backdrop{background:rgba(0,0,0,.55)}
dialog.cm-dlg.wide{width:min(52rem,calc(100vw - 1.5rem))}
.cm-dlg form,.cm-dlg .in{padding:1.4rem}
.cm-dlg h2{font-size:1.6rem;line-height:1;margin:0 0 .6rem}
.cm-dlg .x{position:absolute;right:.8rem;top:.8rem;border:0;background:var(--surface2);color:var(--fg);width:2.2rem;height:2.2rem;border-radius:50%;font-size:1.2rem;line-height:1}
.cm-radio{display:grid;gap:.4rem;margin:.6rem 0 1rem}
.cm-radio label{display:flex;gap:.6rem;align-items:center;padding:.6rem .8rem;border:1.5px solid var(--line);border-radius:12px;font-weight:600;font-size:.94rem}
.cm-radio input{accent-color:var(--fg)}
.cm-radio label:has(input:checked){border-color:var(--fg);background:var(--surface2)}
.cm-prev{max-width:100%;max-height:16rem;border-radius:12px;display:block;margin:.5rem 0}
.cm-big{display:block;width:100%;max-height:70dvh;object-fit:contain;background:#000}

/* full-screen chat on phones, so nothing sits on top of the message box */
@media (max-width:860px){
  .cm-chat{grid-template-columns:minmax(0,1fr);height:calc(100dvh - 11rem);min-height:26rem}
  .cm-rooms{flex-direction:row;overflow-x:auto;padding:.5rem;gap:.4rem;order:-1;border-bottom:1px solid var(--line)}
  .cm-rooms h3,.cm-rules{display:none}
  .cm-room{flex:none;padding:.55rem .85rem;border:1.5px solid var(--line);border-radius:999px;flex-direction:row;align-items:center;gap:.5rem}
  .cm-room span:not(.n){display:none}
  .cm-room b{gap:.5rem}
  .cm-who{display:none;position:absolute;right:0;top:0;bottom:0;width:min(16rem,80vw);z-index:15;box-shadow:-10px 0 30px rgba(0,0,0,.3);padding-top:max(.8rem,env(safe-area-inset-top))}
  .cm-who.show{display:flex}
  .cm-peoplebtn{display:inline-flex}
  .cm-m:hover{background:transparent}
  .cm-acts{top:-1.1rem}
}
body.cm-full .cm-chat{position:fixed;inset:0;z-index:170;height:auto;min-height:0;border:0;border-radius:0;background:var(--bg)}
body.cm-full .cm-rooms{padding-top:max(.5rem,env(safe-area-inset-top))}
.cm-exit{display:none}
@media (max-width:860px){body.cm-full .cm-exit{display:inline-flex}}
@media (max-width:520px){
  .cm-head p{display:none}
  .cm-head{gap:.45rem;padding:.6rem .7rem}
  .cm-status{font-size:0;padding:.45rem}
  .cm-status::before{display:inline-block}
  .cm-hide-sm{display:none}
  .cm-m{grid-template-columns:2rem minmax(0,1fr);gap:.5rem}
  .cm-av{width:2rem;height:2rem;font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){.cm-timer i{animation:none}.cm-log{scroll-behavior:auto}}

/* moderator page */
.mdw{max-width:70rem}
.md-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr))}
.md-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;display:grid;gap:.6rem;align-content:start}
.md-card p{margin:0;max-width:none;white-space:pre-wrap;overflow-wrap:anywhere}
.md-img{position:relative;border-radius:12px;overflow:hidden;background:var(--surface2);min-height:8rem}
.md-img img{display:block;width:100%;max-height:22rem;object-fit:contain;filter:blur(24px);transition:filter .2s;cursor:pointer}
.md-img.show img{filter:none}
.md-img span{position:absolute;inset:auto 0 .6rem;text-align:center;font-size:.8rem;font-weight:700;pointer-events:none}
.md-img.show span{display:none}
.md-msgs{display:grid;gap:.2rem}
.md-msg{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;padding:.4rem .6rem;border-radius:10px;border:1px solid transparent;font-size:.92rem}
.md-msg:hover{background:var(--surface2)}
.md-msg.hid{opacity:.55;text-decoration:line-through}
.md-msg time{color:var(--fg2);font-size:.75rem}
.md-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.7rem;margin-bottom:1rem}
.md-stats div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem}
.md-stats b{display:block;font-size:1.6rem;line-height:1}
.md-log{font-size:.85rem;color:var(--fg2);display:grid;gap:.2rem}

/* sign-up and log-in */
.cm-auth{display:grid;gap:1.2rem;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
.cm-intro{padding:clamp(.4rem,2vw,1.4rem) clamp(0rem,1vw,1rem)}
.cm-intro h2{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:.95;margin-bottom:1rem}
.cm-intro p{max-width:46ch}
.cm-authcard{padding:clamp(1rem,2.4vw,1.8rem)}
.cm-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;background:var(--surface2);border-radius:999px;padding:.25rem;margin-bottom:1.3rem}
.cm-seg button{border:0;background:transparent;color:var(--fg);padding:.65rem .4rem;border-radius:999px;font-weight:650;font-size:.88rem;line-height:1.1}
.cm-seg button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.cm-btn.wide{width:100%;padding:1rem 1.4rem}
.cm-link{border:0;background:transparent;color:var(--fg);text-decoration:underline;text-underline-offset:.2em;font-weight:600;font-size:.86rem;padding:0}
.cm-link[disabled]{opacity:.55;text-decoration:none;cursor:default}
.cm-pw{position:relative}
.cm-pw .cm-in{padding-right:4.6rem}
.cm-eye{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);border:0;background:var(--surface2);color:var(--fg);font-weight:650;font-size:.78rem;padding:.4rem .7rem;border-radius:999px}
.cm-meter{margin:.35rem 0 0;font-size:.84rem;font-weight:650;min-height:1.2em;color:var(--fg2)}
.cm-meter.weak{color:var(--alert)}.cm-meter.ok{color:#9a6a00}.cm-meter.strong{color:#1f8f55}
.cm-consent{border:1.5px solid var(--line);border-radius:14px;padding:.4rem 1rem .6rem;margin:0 0 1rem}
.cm-consent legend{font-weight:700;font-size:.86rem;padding:0 .4rem}
.cm-more{margin:0 0 1rem}
.cm-more summary,.cm-keylogin summary{cursor:pointer;font-weight:650;font-size:.92rem;padding:.3rem 0}
.cm-keylogin{margin-top:1.2rem;border-top:1px solid var(--line);padding-top:.8rem}
.cm-code{font-size:1.8rem;letter-spacing:.5em;text-align:center;font-weight:700;padding-block:.9rem}
.cm-badge.mod{background:var(--green)}
@media (max-width:900px){.cm-auth{grid-template-columns:minmax(0,1fr)}.cm-seg button{font-size:.8rem;padding:.6rem .2rem}}

.cm-intro .cm-safe{margin:1.2rem 0}

/* ==========================================================================
   The community as a full-screen app (ap-*). Soft, theme-aware panels float over a calm scene.
   ========================================================================== */
/* the community sits inside the site: its bar, account chip and footer stay. Quick exit lives in the community's own tab row. */
body.cm-page .quick-exit{display:none}
body.cm-page #main{padding:0}
.ap{--pbg:color-mix(in srgb,var(--bg) 82%,transparent);--pbd:color-mix(in srgb,var(--fg) 11%,transparent);--soft:color-mix(in srgb,var(--fg) 7%,transparent);--ap-accent:#8b7fd6;--acc:var(--ap-accent);--ring:color-mix(in srgb,var(--acc) 55%,transparent);position:relative;height:calc(100dvh / var(--ap-fs,1));min-height:36rem;padding-top:calc(4.5rem / var(--ap-fs,1));display:flex;flex-direction:column;overflow:hidden;background:var(--bg);color:var(--fg);zoom:var(--ap-fs,1);font-size:1rem;line-height:1.45}
.ap *,.ap *::before,.ap *::after{box-sizing:border-box}
.ap-bg,.ap-veil,.ap-parts{position:absolute;inset:0;pointer-events:none}
.ap-bg{z-index:0;opacity:.96;transition:opacity .6s}
.ap-bg .scene{width:100%;height:100%;display:block;object-fit:cover}
.ap-credit a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.ap-sc .th img{width:100%;height:100%;object-fit:cover;display:block}
.ap-veil{z-index:1;background:linear-gradient(color-mix(in srgb,var(--bg) 34%,transparent),color-mix(in srgb,var(--bg) 22%,transparent))}
.ap[data-scene="off"] .ap-veil{background:var(--bg)}
.ap-parts{z-index:2;overflow:hidden}
.ap>.ap-top,.ap>main,.ap>nav,.ap>.ap-credit{position:relative;z-index:3}
.ap>.ap-top{z-index:12}
.ap svg.ic{flex:none;display:block}
.ap button{cursor:pointer;font-family:inherit}
.ap :focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ap-panel{background:var(--pbg);border:1px solid var(--pbd);border-radius:20px;box-shadow:0 10px 36px rgba(20,16,40,.10);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1)}

/* scenery movement */
.drift{animation:apdrift linear infinite}
@keyframes apdrift{0%{transform:translateX(-14%)}50%{transform:translateX(14%)}100%{transform:translateX(-14%)}}
.tw{animation:aptw 5s ease-in-out infinite}
@keyframes aptw{50%{opacity:.15}}
.pulse{animation:appulse 9s ease-in-out infinite}
@keyframes appulse{50%{opacity:.55;transform:translateY(8px)}}
.shoot{animation:apshoot 14s linear infinite}
@keyframes apshoot{0%,90%{opacity:0;transform:translate(0,0)}92%{opacity:.9}100%{opacity:0;transform:translate(-170px,70px)}}
.pt{position:absolute;top:-6%;width:calc(10px*var(--z,1));height:calc(10px*var(--z,1));animation:apfall var(--d,18s) linear var(--w,0s) infinite;opacity:.8}
.pt.petal{background:var(--c,#ffc2d4);border-radius:80% 0 80% 0}
.pt.snow{background:#fff;border-radius:50%;width:calc(6px*var(--z,1));height:calc(6px*var(--z,1));opacity:.85}
.pt.firefly{top:auto;background:#f4f2a6;border-radius:50%;width:calc(5px*var(--z,1));height:calc(5px*var(--z,1));box-shadow:0 0 12px 4px rgba(244,242,166,.55);animation:apfly var(--d,18s) ease-in-out var(--w,0s) infinite}
@keyframes apfall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx,6vw),112vh) rotate(420deg)}}
@keyframes apfly{0%,100%{transform:translate(0,0);opacity:.15}25%{opacity:.95}50%{transform:translate(var(--dx,6vw),-6vh);opacity:.3}75%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.drift,.tw,.pulse,.shoot,.pt{animation:none!important}.pt{display:none}}

/* top bar */
.ap-top{display:flex;align-items:center;gap:.8rem;margin:.2rem .6rem 0;padding:.35rem .6rem .35rem .9rem;min-height:3.2rem;background:var(--pbg);border:1px solid var(--pbd);border-radius:20px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);flex:none}
.ap-tabs{display:flex;gap:.2rem;margin:0 auto}
.ap-tab{display:inline-flex;align-items:center;gap:.5rem;border:0;background:transparent;color:var(--fg2);padding:.55rem .95rem;border-radius:999px;font-weight:600;font-size:.94rem;text-decoration:none;transition:background .2s,color .2s}
.ap-tab:hover{background:var(--soft);color:var(--fg)}
.ap-tab[aria-selected="true"]{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--fg)}
.ap-tools{display:flex;align-items:center;gap:.35rem;margin-left:auto}
.ap-tabs+.ap-tools{margin-left:0}
.ap-ibtn{border:0;background:transparent;color:var(--fg);width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;padding:0;transition:background .2s}
.ap-ibtn:hover{background:var(--soft)}
.ap-quick{border:0;background:transparent;color:var(--fg2);padding:.5rem .8rem;border-radius:999px;font-weight:600;font-size:.85rem;box-shadow:inset 0 0 0 1px var(--pbd)}
.ap-quick:hover{color:var(--alert);box-shadow:inset 0 0 0 1px var(--alert)}
.ap-bio{margin:0 .6rem .4rem;padding:.55rem .8rem;border-radius:12px;background:var(--soft);font-size:.88rem;color:var(--fg2);max-width:none}

/* avatars (the base .av styles live in site.css) */
.av-btn{border:0;background:transparent;padding:0;border-radius:50%;display:block}
.av-btn:hover .av{box-shadow:0 0 0 2px var(--ring)}

/* body of the app */
.ap-main{flex:1;min-height:0;position:relative;padding:.6rem}
.ap-main>div{height:100%;min-height:0}
.ap-credit{flex:none;text-align:center;font-size:.72rem;line-height:1.2;color:var(--fg2);padding:.1rem 1rem .5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.ap-credit:hover{color:var(--fg)}
.ap-bottom{display:none}

/* chat */
.ap-chat{height:100%;display:grid;grid-template-columns:17.5rem minmax(0,1fr) 16rem;gap:.6rem;position:relative}
.ap-rooms,.ap-who{padding:.8rem;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:.25rem;min-height:0}
.ap-rooms h3,.ap-whohead h3{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--fg2);margin:.3rem .5rem .35rem;font-stretch:100%}
.ap-room{display:flex;align-items:center;gap:.75rem;border:0;background:transparent;color:var(--fg);text-align:left;padding:.65rem .7rem;border-radius:14px;transition:background .2s}
.ap-room:hover{background:var(--soft)}
.ap-room[aria-current="true"]{background:color-mix(in srgb,var(--acc) 22%,transparent)}
.ap-room .ri{width:2.3rem;height:2.3rem;border-radius:12px;background:var(--soft);display:grid;place-items:center;flex:none}
.ap-room[aria-current="true"] .ri{background:color-mix(in srgb,var(--acc) 35%,transparent)}
.ap-room .rt{display:flex;flex-direction:column;min-width:0;flex:1}
.ap-room b{font-size:.95rem;line-height:1.2}
.ap-room small{font-size:.76rem;color:var(--fg2);line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ap-room .n{font-size:.72rem;font-weight:700;background:color-mix(in srgb,var(--acc) 30%,transparent);padding:.1rem .5rem;border-radius:999px}
.ap .cm-rules{margin-top:auto;padding:.7rem .6rem .2rem;font-size:.78rem;color:var(--fg2);line-height:1.45}
.ap-conv{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;overflow:hidden}
.ap-head{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-bottom:1px solid var(--pbd);min-height:3.8rem}
.ap-head h2{font-size:1.1rem;line-height:1.15;margin:0;font-stretch:100%;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-head p{margin:0;font-size:.8rem;color:var(--fg2);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none}
.ap-head .sp{flex:1;min-width:0}
.ap-roomsbtn{display:none}
.ap .cm-status{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:650;padding:.25rem .65rem;border-radius:999px;background:var(--soft);color:var(--fg2);white-space:nowrap}
.ap .cm-status::before{content:"";display:block;width:.5rem;height:.5rem;border-radius:50%;background:currentColor;opacity:.7}
.ap .cm-status.ok{background:color-mix(in srgb,#4fae7a 22%,transparent);color:color-mix(in srgb,#2f8a5a 80%,var(--fg))}
.ap .cm-status.bad{background:color-mix(in srgb,#e08585 24%,transparent);color:color-mix(in srgb,#b24a4a 80%,var(--fg))}
.ap .cm-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.1rem;scroll-behavior:smooth}
.ap .cm-empty{margin:auto;text-align:center;color:var(--fg2);max-width:24rem;padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.ap .cm-empty p{margin:0}
.ap .cm-new{display:inline-flex;align-items:center;gap:.3rem;border:0;background:var(--fg);color:var(--bg);bottom:6.4rem;font-size:.82rem}
.ap .cm-new .ic{transform:none}

/* messages */
.ap .cm-m{grid-template-columns:2.6rem minmax(0,1fr);gap:.7rem;padding:.4rem .5rem;border-radius:16px;margin-top:.5rem}
.ap .cm-m.cont{margin-top:0}
.ap .cm-m:hover,.ap .cm-m:focus-within,.ap .cm-m.open{background:var(--soft)}
.ap .cm-nick{font-size:.92rem;font-weight:650}
.ap .cm-pn{font-size:.72rem;color:var(--fg2);background:var(--soft);padding:.05rem .45rem;border-radius:999px}
.ap .cm-badge{background:color-mix(in srgb,var(--acc) 40%,transparent);color:var(--fg);border-radius:999px;padding:.1rem .5rem}
.ap .cm-badge.mod{background:color-mix(in srgb,#4fae7a 38%,transparent)}
.ap .cm-badge.team{background:color-mix(in srgb,#e6b857 50%,transparent)}
.ap .cm-bub{font-size:.98rem;line-height:1.5;max-width:min(42rem,100%)}
.ap .cm-bub .me{background:color-mix(in srgb,var(--acc) 30%,transparent);color:var(--fg)}
.ap .cm-m.bot .cm-bub,.ap .cm-m.team .cm-bub{background:color-mix(in srgb,var(--acc) 15%,var(--bg));border:1px solid var(--pbd);color:var(--fg)}
.ap .cm-m.team .cm-bub{background:color-mix(in srgb,#e6b857 22%,var(--bg))}
.ap .cm-quote{display:flex;align-items:center;gap:.4rem;border-left:0;background:var(--soft);padding:.25rem .7rem;border-radius:10px;max-width:30rem}
.ap .cm-rxb{background:var(--soft);border:1px solid var(--pbd);color:var(--fg)}
.ap .cm-rxb.on{background:color-mix(in srgb,var(--acc) 26%,transparent);border-color:var(--ring)}
.ap .cm-acts{background:var(--bg);border-color:var(--pbd)}
.ap .cm-act{color:var(--fg)}
.ap .cm-pop,.ap .cm-menu{background:var(--bg);border-color:var(--pbd);color:var(--fg)}
.ap .cm-gifimg{border-radius:14px}
.ap .cm-game{background:var(--bg);border:1px solid var(--pbd);border-radius:18px}
.ap .cm-gbtn{background:var(--soft);border-color:transparent}
.ap .cm-gbtn:hover:not([disabled]){border-color:var(--ring)}
.ap .cm-gbtn.sel{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 20%,transparent)}
.ap .cm-gbtn.right{background:color-mix(in srgb,#4fae7a 28%,var(--bg));border-color:#4fae7a;color:var(--fg)}
.ap .cm-key1{background:var(--soft);border-color:transparent;border-radius:10px}
.ap .cm-timer i{background:var(--acc)}

/* composer */
.ap .cm-compose{background:transparent;border-top:1px solid var(--pbd);padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom))}
.ap .cm-bar{align-items:flex-end;gap:.35rem;background:var(--soft);border-radius:26px;padding:.35rem}
.ap .cm-tool{background:transparent;color:var(--fg2);width:2.5rem;height:2.5rem}
.ap .cm-tool:hover,.ap .cm-tool[aria-expanded="true"]{background:var(--soft);color:var(--fg)}
.ap .cm-ta{border:0;background:transparent;border-radius:0;padding:.65rem .4rem;min-height:2.5rem;font-size:1rem}
.ap .cm-ta:focus{outline:none}
.ap .cm-send{width:2.5rem;height:2.5rem;padding:0;display:grid;place-items:center;background:var(--acc);color:#fff;border-radius:50%}
.ap .cm-send:hover{filter:brightness(1.07)}
.ap .cm-sheet{background:var(--bg);border-color:var(--pbd);border-radius:18px}
.ap .cm-note{background:color-mix(in srgb,#e08585 22%,var(--bg));color:var(--fg);border-radius:14px}
.ap .cm-note.info{background:var(--soft)}
.ap .cm-note button,.ap .cm-reply button{display:grid;place-items:center;padding:.15rem}
.ap .cm-care{background:var(--bg);border:1px solid #4fae7a;border-radius:16px}
.ap .cm-reply{background:var(--soft);border-radius:12px;gap:.5rem;justify-content:flex-start}
.ap .cm-reply span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* people panel */
.ap-whohead{display:flex;align-items:center;justify-content:space-between}
.ap-whohead .ap-ibtn{display:none;width:2.2rem;height:2.2rem}
.ap-person{display:flex;align-items:center;gap:.65rem;border:0;background:transparent;color:var(--fg);text-align:left;padding:.45rem .5rem;border-radius:14px;width:100%}
.ap-person:hover{background:var(--soft)}
.ap-person>span{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.ap-person b{font-size:.9rem;font-weight:650;overflow:hidden;text-overflow:ellipsis}
.ap-person i{font-weight:400;font-style:normal;color:var(--fg2);font-size:.8rem}
.ap-person small{font-size:.74rem;color:var(--fg2)}
.ap-fun{margin-top:.8rem;padding:.9rem 1rem;border-radius:16px;background:color-mix(in srgb,var(--acc) 14%,transparent);border:1px solid var(--pbd)}
.ap-fun p{margin:.3rem 0 0;font-size:.9rem;line-height:1.5;max-width:none}
.ap-fun.side{margin-top:auto}
.ap-fun-k{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg2)}

/* pages: wall, art, fun, my posts */
.ap-page{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:clamp(.5rem,2vw,1.6rem) clamp(.6rem,3vw,2rem) 2rem;max-width:74rem;margin:0 auto}
.ap-pagehead{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;margin-bottom:1.4rem;padding:1rem 1.3rem;border-radius:20px;background:var(--pbg);border:1px solid var(--pbd);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.ap-pagehead h1{font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.05;margin:0 0 .3rem;font-stretch:100%;font-weight:650;letter-spacing:-.02em}
.ap-pagehead p{margin:0;color:var(--fg2);max-width:46ch;font-size:.96rem}
.ap-empty{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;padding:2.2rem 1rem;color:var(--fg2);background:var(--pbg);border:1px solid var(--pbd);border-radius:20px;column-span:all}
.ap-empty p{margin:0}
.ap .cm-wall{columns:17rem;column-gap:1rem}
.ap .cm-post{background:color-mix(in srgb,var(--c) 48%,var(--bg));color:var(--fg);border:1px solid var(--pbd);border-radius:20px;box-shadow:0 6px 22px rgba(20,16,40,.07)}
.ap .cm-post .cat{opacity:.7}
.ap .cm-hrt{background:var(--soft);color:var(--fg);border:1px solid var(--pbd)}
.ap .cm-hrt.on{background:color-mix(in srgb,#e58aa3 45%,transparent);color:var(--fg);border-color:#e58aa3}
.ap .cm-hrt.on .ic{fill:#e58aa3}
.ap .cm-flag{opacity:.6;text-decoration:none;display:inline-grid;place-items:center;padding:.3rem}
.ap .cm-piece{background:var(--pbg);border-color:var(--pbd);border-radius:20px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ap .cm-item{background:var(--pbg);border-color:var(--pbd);border-radius:18px}
.ap-funs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.ap-funcard{padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.7rem}
.ap-funcard .big{font-size:clamp(1.1rem,2.2vw,1.35rem);line-height:1.45;margin:0;font-weight:520;max-width:none}

/* sign-in */
.ap-auth{height:100%;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);gap:clamp(1rem,4vw,4rem);align-items:stretch;min-height:100%;max-width:72rem;margin:0 auto;padding:clamp(.4rem,2vw,1.4rem) clamp(.4rem,2vw,1.4rem) 2rem}
.ap-auth.single{grid-template-columns:minmax(0,34rem);justify-content:center}
.ap-intro{padding:clamp(1.1rem,2.6vw,2rem);margin-block:auto;background:var(--pbg);border:1px solid var(--pbd);border-radius:26px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.ap-auth>.ap-card{margin-block:auto}
.ap-intro h1{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.04;margin:.2rem 0 1rem;font-weight:600;letter-spacing:-.025em;font-stretch:100%}
.ap-intro h1 em{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-style:italic;color:color-mix(in srgb,var(--acc) 80%,var(--fg))}
.ap-eyebrow{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--fg2);margin:0}
.ap-lede{font-size:1.06rem;color:var(--fg);max-width:44ch;margin:0 0 1.4rem}
.ap-points{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.9rem;max-width:44ch}
.ap-points li{display:flex;gap:.85rem;align-items:flex-start}
.ap-points .ic{margin-top:.15rem;color:color-mix(in srgb,var(--acc) 85%,var(--fg))}
.ap-points div{display:flex;flex-direction:column;line-height:1.4}
.ap-points b{font-weight:650;font-size:.96rem}
.ap-points span{font-size:.9rem;color:var(--fg2)}
.ap-small{font-size:.86rem;color:var(--fg2);max-width:46ch}
.ap-small a{color:var(--fg);font-weight:600}
.ap-card{padding:clamp(1.1rem,2.4vw,1.8rem);background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:24px}
.ap-card h2{font-size:1.5rem;line-height:1.1;margin:.2rem 0 .6rem;font-weight:650;font-stretch:100%}
.ap-card p{max-width:none}
.ap-warn{display:flex;gap:.7rem;margin-top:1.3rem;padding:.85rem 1rem;border-radius:16px;background:color-mix(in srgb,#e6b857 18%,transparent);border:1px solid color-mix(in srgb,#d9a53f 35%,transparent);font-size:.82rem;line-height:1.5}
.ap-warn p{margin:0}
.ap-warn a{font-weight:650;color:var(--fg)}
.ap-keycard .cm-keybox{background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--fg);border:1px dashed var(--ring)}
.ap .cm-seg{background:var(--soft)}
.ap .cm-seg button{color:var(--fg2);white-space:nowrap;font-size:.84rem;padding-inline:.2rem}
.ap .cm-seg button[aria-selected="true"]{background:var(--bg);color:var(--fg);box-shadow:0 1px 6px rgba(20,16,40,.14)}
.ap .cm-in{background:var(--bg);border:1.5px solid var(--pbd);border-radius:14px}
.ap .cm-in:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--ring)}
.ap .cm-btn{background:var(--fg);color:var(--bg)}
.ap .cm-btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--pbd)}
.ap .cm-btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ring)}
.ap .cm-btn.danger{background:var(--alert);color:#fff}
.ap .cm-consent{border-color:var(--pbd);border-radius:16px}
.ap .cm-check input,.ap .cm-radio input{accent-color:var(--acc)}
.ap .cm-radio label:has(input:checked){border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.ap .cm-radio label{border-color:var(--pbd)}
.ap .cm-pick{background:transparent;padding:0;border:2px solid transparent;overflow:hidden}
.ap .cm-pick[aria-pressed="true"]{border-color:var(--acc);transform:none;box-shadow:0 0 0 3px var(--ring)}
.ap .cm-sw{background:none}
.ap .cm-picks{gap:.45rem}
.ap .cm-pick .av{display:block}
.ap-prev{display:flex;align-items:center;gap:1rem;margin:.6rem 0 1rem;padding:.8rem 1rem;border-radius:18px;background:var(--soft)}
.ap-prev div{display:flex;flex-direction:column;line-height:1.25}
.ap-prev small{color:var(--fg2)}
.ap-prof{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;padding:.4rem 0}
.ap-prof h2{margin:.4rem 0 0}
.ap-prof .ap-pn{margin:0;color:var(--fg2);font-size:.92rem}
.ap-prof .ap-bio{margin:.4rem 0;max-width:24rem}

/* appearance dialog */
.ap-seg{display:flex;gap:.3rem;background:var(--soft);padding:.25rem;border-radius:999px;flex-wrap:wrap}
.ap-seg button{flex:1;border:0;background:transparent;color:var(--fg2);padding:.5rem .6rem;border-radius:999px;font-weight:600;font-size:.86rem;white-space:nowrap}
.ap-seg button[aria-pressed="true"]{background:var(--bg);color:var(--fg);box-shadow:0 1px 6px rgba(20,16,40,.14)}
.ap-scenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.6rem}
.ap-sc{border:2px solid transparent;background:var(--soft);color:var(--fg);border-radius:14px;padding:.35rem;text-align:left;display:flex;flex-direction:column;gap:.3rem;font-size:.78rem}
.ap-sc[aria-pressed="true"]{border-color:var(--acc);box-shadow:0 0 0 3px var(--ring)}
.ap-sc .th{display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden}
.ap-sc .th svg{width:100%;height:100%;display:block}
.ap-sc.auto{justify-content:center;min-height:5.2rem;padding:.7rem}
.ap-sc small{font-size:.76rem;color:var(--fg2)}
.ap-sc.auto b{font-size:.88rem}
.ap dialog.cm-dlg,.ap-dlgfix{background:var(--bg)}
.ap dialog.cm-dlg{border-color:var(--pbd);border-radius:24px}
.ap dialog.cm-dlg .x{background:var(--soft)}

/* compact screens */
@media (max-width:1180px){
  .ap-chat{grid-template-columns:16rem minmax(0,1fr)}
  .ap-who{display:none;position:absolute;right:0;top:0;bottom:0;width:min(18rem,86%);z-index:15;background:var(--bg);border-radius:20px}
  .ap-who.show{display:flex}
  .ap-whohead .ap-ibtn{display:grid}
}
@media (min-width:1181px){.ap-chat>.ap-who{display:flex}#pplBtn{display:none}}
@media (max-width:860px){
  .ap-top{margin:.4rem .4rem 0;padding:.35rem .5rem .35rem .7rem;border-radius:18px;gap:.4rem}
  .ap-tabs{display:none}
  .ap-top{justify-content:flex-end;min-height:2.8rem;padding-block:.2rem;background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .ap-tools{margin-left:auto}
  .ap-main{padding:.4rem}
  .ap-chat{grid-template-columns:minmax(0,1fr)}
  .ap-rooms{display:none;position:absolute;left:0;top:0;bottom:0;width:min(19rem,88%);z-index:16;background:var(--bg);border-radius:20px}
  .ap-rooms.show{display:flex}
  .ap-roomsbtn{display:grid}
  .ap-bottom{display:flex;flex:none;margin:0 .4rem calc(.4rem + env(safe-area-inset-bottom));padding:.3rem;gap:.1rem;background:var(--pbg);border:1px solid var(--pbd);border-radius:22px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  .ap-btab{flex:1;border:0;background:transparent;color:var(--fg2);display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.45rem 0;border-radius:16px;font-size:.7rem;font-weight:600}
  .ap-btab[aria-selected="true"]{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--fg)}
  .ap-credit{padding-bottom:.25rem;font-size:.68rem}
  .ap-auth{grid-template-columns:minmax(0,1fr);padding-top:.4rem}
  .ap-auth>.ap-intro,.ap-auth>.ap-card{margin-block:0}
  .ap .cm-seg button{font-size:.78rem}
  .ap-intro{padding:1rem 1.1rem}
  .ap-intro h1{font-size:1.9rem}
  .ap-lede{display:none}
  .ap-intro .ap-eyebrow{display:none}
  .ap-intro{padding:.9rem 1.1rem}
  .ap-intro h1{margin:0;font-size:1.65rem}
  .ap-points{display:none}
  .ap-fun{display:none}
  .ap-small{display:none}
  .ap-quick{padding:.45rem .65rem}
  .ap .cm-compose{padding:.5rem .5rem .5rem}
  .ap .cm-m:hover{background:transparent}
  .ap .cm-acts{top:-1.1rem}
  .ap-pagehead{padding:.9rem 1rem}
}
@media (max-width:520px){
  .ap-head p{display:none}
  .ap .cm-status{font-size:0;padding:.4rem;gap:0}
  .ap .cm-m{grid-template-columns:2.2rem minmax(0,1fr);gap:.5rem}
  .ap .cm-new{bottom:5.4rem}
  .ap-quick{font-size:0;padding:.55rem}
  .ap-quick::before{content:"Exit";font-size:.8rem}
}

/* the profile page */
.ap-megrid{display:grid;grid-template-columns:19rem minmax(0,1fr);gap:1rem;align-items:start}
.ap-mecard{padding:1.6rem 1.3rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;position:sticky;top:0}
.ap-mecard h2{font-size:1.4rem;line-height:1.15;margin:.5rem 0 0;font-weight:650;font-stretch:100%}
.ap-mecard .ap-pn{margin:0;color:var(--fg2);font-size:.92rem}
.ap-mecard .ap-bio{margin:.5rem 0;max-width:none}
.ap-mecard p{max-width:none}
.ap-mebody{min-width:0;display:grid;gap:.8rem}
.ap-metabs{border-radius:20px;padding:.3rem;background:var(--pbg);border:1px solid var(--pbd);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.ap-metabs button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
.ap-mepanel{padding:clamp(1.1rem,2.6vw,1.8rem);background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;min-height:18rem}
.ap-mepanel h2{font-size:1.5rem;line-height:1.1;margin:0 0 .4rem;font-weight:650;font-stretch:100%}
.ap-mepanel>p{max-width:60ch}
.ap-mepanel form{max-width:46rem}
.ap-dl{display:grid;gap:.1rem;margin:1rem 0;max-width:34rem}
.ap-dl div{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--pbd);font-size:.94rem}
.ap-dl dt{color:var(--fg2)}
.ap-dl dd{margin:0;font-weight:600;text-align:right}
.ap-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0}
.ap-danger-h{font-size:1.1rem;margin:1.6rem 0 .3rem;font-stretch:100%}
@media (max-width:980px){.ap-megrid{grid-template-columns:minmax(0,1fr)}.ap-mecard{position:static;flex-direction:row;flex-wrap:wrap;text-align:left;justify-content:flex-start;gap:.3rem 1.1rem}.ap-mecard h2{margin:0}.ap-mecard>*:not(.av){flex-basis:calc(100% - 7rem)}.ap-mecard .cm-row{justify-content:flex-start!important}.ap-metabs span{display:none}.ap-metabs button{padding:.6rem}}
@media (max-width:520px){.ap-metabs span{display:inline}.ap-metabs button{padding:.5rem .3rem;font-size:.74rem;flex-direction:column;gap:.15rem}}

/* ---------- first paint and phones ---------- */
/* before the script runs the page already holds its final size, so nothing jumps when the app appears */
#cm.cm:not(.ap){height:100dvh;min-height:36rem;padding-top:4.5rem;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.ap-skel{display:grid;gap:.8rem;width:min(38rem,86vw)}
.ap-skel i{display:block;height:3.4rem;border-radius:20px;background:color-mix(in srgb,var(--fg) 7%,transparent);animation:apsk 1.4s ease-in-out infinite}
.ap-skel i:nth-child(2){width:78%;animation-delay:.15s}.ap-skel i:nth-child(3){width:56%;animation-delay:.3s}
@keyframes apsk{50%{opacity:.45}}
.ap-bg{animation:apin .8s ease both}
@keyframes apin{from{opacity:0}to{opacity:.96}}
.ap-bg,.ap-veil,.ap-parts{contain:strict}
.pt{will-change:transform}
.cm-m{content-visibility:auto;contain-intrinsic-size:auto 3.6rem}
.ap .cm-loading{display:grid;gap:.9rem;padding:1.2rem}
.ap .cm-loading i{display:block;height:3.2rem;border-radius:16px;background:color-mix(in srgb,var(--fg) 7%,transparent);animation:apsk 1.4s ease-in-out infinite}
.ap .cm-loading i:nth-child(2){width:70%}.ap .cm-loading i:nth-child(3){width:85%}
@media (max-width:860px),(pointer:coarse){
  /* blurring what is behind a panel and moving scenery both cost a lot on phones, so phones get calm solid panels */
  .ap{--pbg:color-mix(in srgb,var(--bg) 93%,transparent)}
  .ap-panel,.ap-top,.ap-bottom,.ap-pagehead,.ap-metabs,.ap-intro,.ap .cm-piece{-webkit-backdrop-filter:none;backdrop-filter:none}
  .drift,.tw,.pulse,.shoot{animation:none}
  .ap .cm-log{scroll-behavior:auto}
  .ap-panel{box-shadow:0 4px 16px rgba(20,16,40,.08)}
}

/* ==========================================================================
   The community as a page of the site: the same coloured header and footer as every other page, with the app framed inside.
   ========================================================================== */
.cm-hero{padding-top:clamp(5.2rem,8vw,6.6rem);padding-bottom:0}
.cm-hero .phero-grid{gap:.5rem}
.cm-hero .phero-meta{padding-bottom:.6rem}
.cm-hero .phero-title{font-size:clamp(2.1rem,5.2vw,4.4rem);line-height:.95;max-width:none;padding-bottom:1.1rem}
.cm-hero.phero.block::after{display:none}
.cm-wrap{padding:clamp(.7rem,1.6vw,1.2rem) var(--gx) clamp(1.2rem,3vw,2.4rem)}
.cm-wrap{--stage:max(34rem,calc(100dvh - 16.4rem))}
.cm-wrap .ap{height:calc(var(--stage) / var(--ap-fs,1));min-height:0;padding-top:0;border-radius:26px;border:1px solid var(--line);isolation:isolate}
#cm.cm:not(.ap){height:var(--stage);min-height:0;padding-top:0;border-radius:26px;border:1px solid var(--line);background:var(--bg2,var(--bg))}
.ap-top{margin:.55rem .6rem 0}
@media (max-width:860px){
  .cm-hero .phero-meta .label:last-child{display:none}
  .cm-hero .phero-title{font-size:clamp(1.9rem,9vw,2.6rem);padding-bottom:.8rem}
  .cm-hero{padding-top:5rem}
  .cm-wrap{padding:.5rem .5rem 1rem;--stage:max(31rem,calc(100dvh - 11.4rem))}
  .cm-wrap .ap,#cm.cm:not(.ap){border-radius:22px}
  .ap-tools .ap-ibtn,.ap-tools .ap-quick{background:var(--pbg);box-shadow:inset 0 0 0 1px var(--pbd);color:var(--fg)}
}

/* a pinned notice from the moderators */
.ap .cm-banner{display:flex;align-items:center;gap:.6rem;margin:.55rem .7rem 0;padding:.55rem .6rem .55rem .85rem;border-radius:14px;background:var(--yellow);color:#14110a;font-size:.9rem;line-height:1.35;flex:none}
.ap .cm-banner[hidden]{display:none}
.ap .cm-banner p{margin:0;flex:1;max-width:none}
.ap .cm-banner button{border:0;background:rgba(0,0,0,.08);color:inherit;width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;flex:none;padding:0}

/* Mochi explaining a blocked message, and a short break */
.ap .cm-mochi{display:flex;gap:.7rem;align-items:flex-start;padding:.75rem .7rem .75rem .85rem;border-radius:16px;background:color-mix(in srgb,#f4d98a 36%,var(--bg));border:1px solid color-mix(in srgb,#d9b24a 45%,transparent);margin-bottom:.4rem}
.ap .cm-mochi.warn{background:color-mix(in srgb,#f1a35f 26%,var(--bg));border-color:color-mix(in srgb,#e08a3a 50%,transparent)}
.ap .cm-mochi.break{background:color-mix(in srgb,#e08585 24%,var(--bg));border-color:color-mix(in srgb,#cc6666 45%,transparent)}
.ap .cm-mochi-av{flex:none}
.ap .cm-mochi-t{flex:1;min-width:0}
.ap .cm-mochi-t b{font-size:.8rem;letter-spacing:.04em}
.ap .cm-mochi-t p{margin:.2rem 0 0;font-size:.93rem;line-height:1.42;max-width:none}
.ap .cm-mochi>button{border:0;background:transparent;color:inherit;width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;padding:0;flex:none}
.ap .cm-mochi>button:hover{background:var(--soft)}
.ap .cm-pips{display:flex;align-items:center;gap:.35rem;margin-top:.55rem;font-size:.78rem;font-weight:700}
.ap .cm-pips i{width:.85rem;height:.85rem;border-radius:50%;background:color-mix(in srgb,var(--fg) 14%,transparent)}
.ap .cm-pips i.on{background:#e0782f}
.ap .cm-pips span{margin-left:.3rem}
.ap .cm-compose.is-break .cm-bar{opacity:.6}
.ap .cm-compose.is-break .cm-ta{cursor:not-allowed}
.ap .cm-edited{font-size:.72rem;color:var(--fg2);font-style:italic;font-weight:500}
.ap .cm-post .cm-edited,.ap .cm-piece .cm-edited{display:block;margin:.3rem 0 0}
.ap-staff{margin:.9rem 0 0;font-size:.82rem}
.ap-staff .cm-link{display:inline-flex;align-items:center;gap:.35rem;color:var(--fg2)}
.cm-menu hr{border:0;border-top:1px solid var(--pbd,var(--line));margin:.25rem .3rem}

/* the little now-playing chip in the top row */
.ap-now{display:flex;align-items:center;gap:.05rem;max-width:min(16rem,46vw);background:color-mix(in srgb,var(--acc) 20%,transparent);border-radius:999px;padding:.1rem .15rem .1rem .1rem;min-width:0}
.ap-now[hidden]{display:none}
.ap-now-go{display:inline-flex;align-items:center;gap:.4rem;border:0;background:transparent;color:var(--fg);padding:.4rem .5rem .4rem .65rem;font-size:.8rem;font-weight:650;min-width:0}
.ap-now-go span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}
.ap-now .ap-ibtn{width:2rem;height:2rem}
.ap-tab[data-n]:not([data-n=""])::after,.ap-btab[data-n]:not([data-n=""])::after{content:attr(data-n);min-width:1.2rem;height:1.2rem;padding:0 .3rem;border-radius:999px;background:var(--alert);color:#fff;font-size:.68rem;font-weight:800;display:inline-grid;place-items:center;line-height:1}
.ap-btab{position:relative}
.ap-btab[data-n]:not([data-n=""])::after{position:absolute;top:.15rem;right:22%}

/* music */
.ap .mu-dock{display:grid;grid-template-columns:minmax(0,27rem) 1fr;gap:1.1rem;padding:.8rem;margin-bottom:1rem;background:var(--bg);align-items:center}
.ap .mu-dock[hidden]{display:none}
.ap .mu-vid{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.ap .mu-vid iframe,.ap .mu-vid #mpFrame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ap .mu-info h3{font-size:1.35rem;margin:.1rem 0;font-stretch:100%;line-height:1.15}
.ap .mu-info p{margin:0;max-width:none}
.ap .mu-k{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg2)}
.ap .mu-ctl{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.ap .mu-err{color:var(--alert);min-height:1.2em;margin-top:.3rem!important;font-size:.88rem}
.ap .mu-tools{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:.4rem 0 .6rem}
.ap .mu-tools .chips{margin:0}
.ap .mu-search{display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:999px;background:var(--bg);border:1.5px solid var(--line);flex:1;min-width:10rem;max-width:18rem}
.ap .mu-search input{border:0;background:transparent;color:inherit;font:inherit;width:100%;outline:none;min-width:0}
.ap .mu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:.8rem}
.ap .mu-card{display:flex;flex-direction:column;text-align:left;border:1px solid var(--pbd);background:var(--bg);color:inherit;border-radius:16px;overflow:hidden;padding:0;transition:transform .2s,box-shadow .2s}
.ap .mu-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,16,40,.14)}
.ap .mu-card.on{box-shadow:0 0 0 2.5px var(--acc)}
.ap .mu-th{position:relative;display:block;aspect-ratio:16/9;background:var(--soft)}
.ap .mu-th img{width:100%;height:100%;object-fit:cover;display:block}
.ap .mu-pl{position:absolute;right:.6rem;bottom:.6rem;width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(14,14,16,.8);color:#fff;display:grid;place-items:center}
.ap .mu-t{display:flex;flex-direction:column;gap:.1rem;padding:.7rem .8rem .85rem}
.ap .mu-t b{font-size:.95rem;line-height:1.2}
.ap .mu-t small{color:var(--fg2);font-size:.78rem;line-height:1.3}
@media (max-width:760px){.ap .mu-dock{grid-template-columns:minmax(0,1fr)}.ap .mu-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr));gap:.6rem}.ap .mu-t b{font-size:.88rem}.ap .mu-search{max-width:none;flex-basis:100%}}

/* moderator tools inside the community */
.cm .md-host{padding:clamp(1rem,2.4vw,1.6rem);background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
.cm .md-top{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:1rem}
.cm .md-h{font-size:1.5rem;margin:0 0 .8rem;font-stretch:100%;line-height:1.1}
.cm .md-sel{width:auto;padding:.5rem .7rem}
.cm .md-tip{margin:0 0 .8rem;max-width:62ch}
.cm .md-edit{font:inherit;min-height:0}
.cm .md-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1rem}
.cm .md-wide{grid-column:1/-1}
.cm .md-avs{display:flex;flex-wrap:wrap;gap:.4rem}
.cm .md-av{border:2px solid transparent;border-radius:50%;padding:0;background:transparent;line-height:0}
.cm .md-av[aria-pressed="true"]{border-color:var(--fg)}
.cm .md-cur{background:var(--soft);padding:.5rem .8rem;border-radius:12px;font-size:.9rem;max-width:none}
.cm .md-msg .cm-row{justify-content:flex-end}
.cm .md-rw{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.cm .md-rw .cm-in{min-width:12rem}
.cm .md-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.7rem;margin-bottom:1.2rem}
.cm .md-stats div{background:var(--soft);border-radius:14px;padding:.8rem 1rem;font-size:.82rem;color:var(--fg2)}
.cm .md-stats b{display:block;font-size:1.6rem;color:var(--fg);line-height:1.1}
.cm .md-log{font-size:.85rem;color:var(--fg2);display:grid;gap:.25rem}

/* the options for one message: a floating menu on a computer, a bottom sheet on a phone, drawn above everything */
.cm-ms-bg{position:fixed;inset:0;z-index:399;background:rgba(14,12,24,.28)}
.cm-ms{position:fixed;z-index:400;width:min(19rem,calc(100vw - 16px));max-height:min(34rem,calc(100dvh - 16px));overflow:auto;overscroll-behavior:contain;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 56px rgba(14,12,24,.34);padding:.45rem;font-size:1rem;line-height:1.35;animation:msin .14s ease both}
@keyframes msin{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
.cm-ms *{box-sizing:border-box}
.cm-ms-grab{display:block;width:2.6rem;height:.28rem;border-radius:99px;background:var(--line);margin:.2rem auto .5rem}
.cm-ms-h{margin:.1rem .6rem .5rem;font-size:.82rem;color:var(--fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:none}
.cm-ms-h b{color:var(--fg)}
.cm-ms-rx{display:flex;justify-content:space-between;gap:.15rem;padding:.2rem .3rem .45rem;border-bottom:1px solid var(--line);margin-bottom:.3rem}
.cm-ms-rx button{border:0;background:transparent;font-size:1.45rem;line-height:1;width:2.6rem;height:2.6rem;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:transform .12s,background .12s}
.cm-ms-rx button:hover,.cm-ms-rx button:focus-visible{background:var(--surface2,rgba(0,0,0,.07));transform:scale(1.15)}
.cm-ms-sec{margin:.6rem .6rem .15rem;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--fg2);border-top:1px solid var(--line);padding-top:.7rem;max-width:none}
.cm-ms-i{display:flex;align-items:center;gap:.75rem;width:100%;border:0;background:transparent;color:inherit;padding:.72rem .7rem;border-radius:12px;font:inherit;font-weight:600;font-size:.95rem;text-align:left;cursor:pointer}
.cm-ms-i small{margin-left:auto;color:var(--fg2);font-weight:500;font-size:.74rem;white-space:nowrap}
.cm-ms-i:hover,.cm-ms-i:focus-visible{background:var(--surface2,rgba(0,0,0,.07));outline:none}
.cm-ms-i.danger{color:var(--alert)}
.cm-ms-i svg{flex:none}
@media (max-width:860px){
  .cm-ms{left:0;right:0;bottom:0;top:auto;width:auto;max-height:88dvh;border-radius:22px 22px 0 0;padding:.5rem .6rem calc(.8rem + env(safe-area-inset-bottom));animation:msup .22s ease both}
  @keyframes msup{from{transform:translateY(100%)}to{transform:none}}
  .cm-ms-i{padding:.72rem .8rem;font-size:1rem}
  .cm-ms-rx button{width:2.9rem;height:2.9rem;font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){.cm-ms{animation:none}}

/* ==========================================================================
   v3: the community wears the site's own clothes. Solid surfaces and hairlines instead of frosted glass over a painted scene,
   and a chat that works the way every chat app does: a patterned wallpaper, bubbles with tails, times and ticks inside them.
   Scenery is still there, but only for people who switch it on in Appearance.
   ========================================================================== */
.ap{--wa-bg:#efeae2;--wa-in:#ffffff;--wa-out:#d9fdd3;--wa-bar:var(--surface);--wa-ink:#111b21;--wa-sub:#667781;--wa-tick:#53bdeb;--wa-doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%23000' stroke-opacity='.075' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(20 22) rotate(-12)'%3E%3Cpath d='M12 21s-8-5.5-8-11a4.500 4.500 0 0 1 8-2.500A4.500 4.500 0 0 1 20 10c0 5.500-8 11-8 11z'/%3E%3C/g%3E%3Cg transform='translate(108 16) rotate(10)'%3E%3Cpath d='M12 3l2.600 5.600 6 .7-4.500 4.100 1.200 6L12 16.500 6.700 19.400l1.200-6L3.400 9.300l6-.7z'/%3E%3C/g%3E%3Cg transform='translate(188 30) rotate(8)'%3E%3Cpath d='M3 20a9 9 0 0 1 18 0M7 20a5 5 0 0 1 10 0'/%3E%3C/g%3E%3Cg transform='translate(38 98) rotate(-8)'%3E%3Cpath d='M9 18V6l10-2v12'/%3E%3Ccircle cx='6.500' cy='18' r='2.500'/%3E%3Ccircle cx='16.500' cy='16' r='2.500'/%3E%3C/g%3E%3Cg transform='translate(138 90) rotate(6)'%3E%3Cpath d='M4 5h16v11H11l-5 4v-4H4z'/%3E%3C/g%3E%3Cg transform='translate(208 112) rotate(-10)'%3E%3Crect x='2' y='7' width='20' height='11' rx='5.500'/%3E%3Cpath d='M7 10.500v4M5 12.500h4M16 11.500h.01M18.500 13.500h.01'/%3E%3C/g%3E%3Cg transform='translate(16 178) rotate(14)'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.500a3 3 0 0 1 0 6.500M12 15a3 3 0 0 1 0 6.500M2.500 12a3 3 0 0 1 6.500 0M15 12a3 3 0 0 1 6.500 0'/%3E%3C/g%3E%3Cg transform='translate(98 172) rotate(-6)'%3E%3Cpath d='M21 4L10 14M21 4l-6.500 17-3.500-7-7-3.500z'/%3E%3C/g%3E%3Cg transform='translate(176 186) rotate(12)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.500 14.500a4.500 4.500 0 0 0 7 0M9 9.500h.01M15 9.500h.01'/%3E%3C/g%3E%3Cg transform='translate(58 232) rotate(-14)'%3E%3Cpath d='M20 14.500A8 8 0 0 1 9.500 4a8.500 8.500 0 1 0 10.500 10.500z'/%3E%3C/g%3E%3Cg transform='translate(150 234) rotate(8)'%3E%3Cpath d='M5 8h11v6a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 9.500h1.500a2.500 2.500 0 0 1 0 5H16M8 3.500c0 1.500 1.500 1.500 1.500 3M12 3.500c0 1.500 1.500 1.500 1.500 3'/%3E%3C/g%3E%3Cg transform='translate(226 190) rotate(-8)'%3E%3Cpath d='M5 19c9 0 14-6 14-15C10 4 5 9 5 19zM5 19l7-7'/%3E%3C/g%3E%3C/svg%3E");--acc:#128c7e;--pbg:var(--surface);--pbd:var(--line);--soft:var(--surface2);--ring:color-mix(in srgb,var(--acc) 60%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ap{--wa-bg:#0b141a;--wa-in:#202c33;--wa-out:#005c4b;--wa-ink:#e9edef;--wa-sub:#8696a0;--wa-doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(20 22) rotate(-12)'%3E%3Cpath d='M12 21s-8-5.5-8-11a4.500 4.500 0 0 1 8-2.500A4.500 4.500 0 0 1 20 10c0 5.500-8 11-8 11z'/%3E%3C/g%3E%3Cg transform='translate(108 16) rotate(10)'%3E%3Cpath d='M12 3l2.600 5.600 6 .7-4.500 4.100 1.200 6L12 16.500 6.700 19.400l1.200-6L3.400 9.300l6-.7z'/%3E%3C/g%3E%3Cg transform='translate(188 30) rotate(8)'%3E%3Cpath d='M3 20a9 9 0 0 1 18 0M7 20a5 5 0 0 1 10 0'/%3E%3C/g%3E%3Cg transform='translate(38 98) rotate(-8)'%3E%3Cpath d='M9 18V6l10-2v12'/%3E%3Ccircle cx='6.500' cy='18' r='2.500'/%3E%3Ccircle cx='16.500' cy='16' r='2.500'/%3E%3C/g%3E%3Cg transform='translate(138 90) rotate(6)'%3E%3Cpath d='M4 5h16v11H11l-5 4v-4H4z'/%3E%3C/g%3E%3Cg transform='translate(208 112) rotate(-10)'%3E%3Crect x='2' y='7' width='20' height='11' rx='5.500'/%3E%3Cpath d='M7 10.500v4M5 12.500h4M16 11.500h.01M18.500 13.500h.01'/%3E%3C/g%3E%3Cg transform='translate(16 178) rotate(14)'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.500a3 3 0 0 1 0 6.500M12 15a3 3 0 0 1 0 6.500M2.500 12a3 3 0 0 1 6.500 0M15 12a3 3 0 0 1 6.500 0'/%3E%3C/g%3E%3Cg transform='translate(98 172) rotate(-6)'%3E%3Cpath d='M21 4L10 14M21 4l-6.500 17-3.500-7-7-3.500z'/%3E%3C/g%3E%3Cg transform='translate(176 186) rotate(12)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.500 14.500a4.500 4.500 0 0 0 7 0M9 9.500h.01M15 9.500h.01'/%3E%3C/g%3E%3Cg transform='translate(58 232) rotate(-14)'%3E%3Cpath d='M20 14.500A8 8 0 0 1 9.500 4a8.500 8.500 0 1 0 10.500 10.500z'/%3E%3C/g%3E%3Cg transform='translate(150 234) rotate(8)'%3E%3Cpath d='M5 8h11v6a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 9.500h1.500a2.500 2.500 0 0 1 0 5H16M8 3.500c0 1.500 1.500 1.500 1.500 3M12 3.500c0 1.500 1.500 1.500 1.500 3'/%3E%3C/g%3E%3Cg transform='translate(226 190) rotate(-8)'%3E%3Cpath d='M5 19c9 0 14-6 14-15C10 4 5 9 5 19zM5 19l7-7'/%3E%3C/g%3E%3C/svg%3E");--acc:#2fbf9f}}
:root[data-theme="dark"] .ap{--wa-bg:#0b141a;--wa-in:#202c33;--wa-out:#005c4b;--wa-ink:#e9edef;--wa-sub:#8696a0;--wa-doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(20 22) rotate(-12)'%3E%3Cpath d='M12 21s-8-5.5-8-11a4.500 4.500 0 0 1 8-2.500A4.500 4.500 0 0 1 20 10c0 5.500-8 11-8 11z'/%3E%3C/g%3E%3Cg transform='translate(108 16) rotate(10)'%3E%3Cpath d='M12 3l2.600 5.600 6 .7-4.500 4.100 1.200 6L12 16.500 6.700 19.400l1.200-6L3.400 9.300l6-.7z'/%3E%3C/g%3E%3Cg transform='translate(188 30) rotate(8)'%3E%3Cpath d='M3 20a9 9 0 0 1 18 0M7 20a5 5 0 0 1 10 0'/%3E%3C/g%3E%3Cg transform='translate(38 98) rotate(-8)'%3E%3Cpath d='M9 18V6l10-2v12'/%3E%3Ccircle cx='6.500' cy='18' r='2.500'/%3E%3Ccircle cx='16.500' cy='16' r='2.500'/%3E%3C/g%3E%3Cg transform='translate(138 90) rotate(6)'%3E%3Cpath d='M4 5h16v11H11l-5 4v-4H4z'/%3E%3C/g%3E%3Cg transform='translate(208 112) rotate(-10)'%3E%3Crect x='2' y='7' width='20' height='11' rx='5.500'/%3E%3Cpath d='M7 10.500v4M5 12.500h4M16 11.500h.01M18.500 13.500h.01'/%3E%3C/g%3E%3Cg transform='translate(16 178) rotate(14)'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.500a3 3 0 0 1 0 6.500M12 15a3 3 0 0 1 0 6.500M2.500 12a3 3 0 0 1 6.500 0M15 12a3 3 0 0 1 6.500 0'/%3E%3C/g%3E%3Cg transform='translate(98 172) rotate(-6)'%3E%3Cpath d='M21 4L10 14M21 4l-6.500 17-3.500-7-7-3.500z'/%3E%3C/g%3E%3Cg transform='translate(176 186) rotate(12)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.500 14.500a4.500 4.500 0 0 0 7 0M9 9.500h.01M15 9.500h.01'/%3E%3C/g%3E%3Cg transform='translate(58 232) rotate(-14)'%3E%3Cpath d='M20 14.500A8 8 0 0 1 9.500 4a8.500 8.500 0 1 0 10.500 10.500z'/%3E%3C/g%3E%3Cg transform='translate(150 234) rotate(8)'%3E%3Cpath d='M5 8h11v6a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5zM16 9.500h1.500a2.500 2.500 0 0 1 0 5H16M8 3.500c0 1.500 1.500 1.500 1.500 3M12 3.500c0 1.500 1.500 1.500 1.500 3'/%3E%3C/g%3E%3Cg transform='translate(226 190) rotate(-8)'%3E%3Cpath d='M5 19c9 0 14-6 14-15C10 4 5 9 5 19zM5 19l7-7'/%3E%3C/g%3E%3C/svg%3E");--acc:#2fbf9f}
.ap-panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.ap>.ap-top{margin:0 clamp(.6rem,2vw,1.4rem);padding:0 .2rem;min-height:3.4rem;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.ap-tabs{gap:.4rem}
.ap-tab{border-radius:0;padding:1rem .55rem;margin:0;background:transparent;border-bottom:2px solid transparent;font-size:.92rem}
.ap-tab:hover{background:transparent;color:var(--fg)}
.ap-tab[aria-selected="true"]{background:transparent;color:var(--fg);border-bottom-color:var(--fg)}
.ap-quick{box-shadow:inset 0 0 0 1px var(--line)}
.ap-main{padding:clamp(.5rem,1.4vw,1rem) clamp(.6rem,2vw,1.4rem)}
.ap-credit{display:none}
.ap[data-scene="off"] .ap-bg,.ap[data-scene="off"] .ap-parts{display:none}

/* the chat: a list of rooms, the conversation, and who is here */
.ap-chat{gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);grid-template-columns:19rem minmax(0,1fr) 15rem}
.ap-chat>.ap-panel{border:0;border-radius:0;background:var(--surface)}
.ap-rooms{border-right:1px solid var(--line);padding:0;gap:0}
.ap-rooms h3{margin:0;padding:1rem 1.1rem .7rem;font-size:.72rem;letter-spacing:.14em}
.ap-room{gap:.8rem;padding:.8rem 1.1rem;border-radius:0;border-top:1px solid var(--line)}
.ap-room:hover{background:var(--surface2)}
.ap-room[aria-current="true"]{background:var(--surface2)}
.ap-room .ri{width:2.9rem;height:2.9rem;border-radius:50%;background:color-mix(in srgb,var(--acc) 16%,var(--surface));color:var(--acc)}
.ap-room[aria-current="true"] .ri{background:var(--acc);color:#fff}
.ap-room b{font-size:.98rem;font-weight:620}
.ap-room small{-webkit-line-clamp:1}
.ap-room .n{background:var(--acc);color:#fff;min-width:1.35rem;height:1.35rem;padding:0 .4rem;display:inline-grid;place-items:center}
.ap .cm-rules{padding:1rem 1.1rem;border-top:1px solid var(--line)}
.ap-conv{background:var(--wa-bg);overflow:hidden}
.ap-head{background:var(--wa-bar);border-bottom:1px solid var(--line);padding:.55rem .9rem;gap:.75rem}
.ap-hav{width:2.6rem;height:2.6rem;flex:none;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 16%,var(--surface));color:var(--acc)}
.ap-head h2{font-size:1.02rem;font-weight:620}
.ap .cm-status{background:transparent;padding:0;font-size:.72rem;color:var(--wa-sub)}
.ap .cm-status::before{width:.45rem;height:.45rem;margin-right:.05rem}
.ap .cm-status.ok{background:transparent;color:var(--acc)}
.ap-who{border-left:1px solid var(--line)}
.ap .cm-banner{margin:0;border-radius:0}

/* the wallpaper and the bubbles */
.ap .cm-log{background-color:var(--wa-bg);background-image:var(--wa-doodle);background-size:260px 260px;padding:.9rem clamp(.7rem,4%,2.2rem) 1rem;gap:0;scroll-behavior:auto;color:var(--wa-ink)}
.ap .cm-m{display:flex;align-items:flex-start;gap:.5rem;padding:0;margin-top:.55rem;border-radius:0;background:none;position:relative;content-visibility:visible;contain-intrinsic-size:auto}
.ap .cm-m.cont{margin-top:.14rem}
.ap .cm-m:hover,.ap .cm-m:focus-within,.ap .cm-m.open{background:none}
.ap .cm-m-av{flex:none;width:2.1rem;margin-top:.05rem}
.ap .cm-m-av .av{width:2.1rem;height:2.1rem}
.ap .cm-m.cont .cm-m-av .av,.ap .cm-m.cont .cm-m-av .av-btn{visibility:hidden}
.ap .cm-m.cont .cm-m-av{height:0;overflow:visible}
.ap .cm-m-body{position:relative;min-width:5.2rem;max-width:min(34rem,82%);padding:.32rem .6rem .36rem;border-radius:8px;background:var(--wa-in);color:var(--wa-ink);box-shadow:0 1px .5px rgba(11,20,26,.14)}
.ap .cm-m:not(.cont):not(.mine) .cm-m-body{border-top-left-radius:0}
.ap .cm-m:not(.cont):not(.mine) .cm-m-body::before{content:"";position:absolute;top:0;left:-7px;width:8px;height:13px;background:var(--wa-in);clip-path:polygon(100% 0,0 0,100% 100%)}
.ap .cm-m.mine{justify-content:flex-end}
.ap .cm-m.mine .cm-m-av,.ap .cm-m.mine .cm-m-meta{display:none}
.ap .cm-m.mine .cm-m-body{background:var(--wa-out)}
.ap .cm-m.mine:not(.cont) .cm-m-body{border-top-right-radius:0}
.ap .cm-m.mine:not(.cont) .cm-m-body::before{content:"";position:absolute;top:0;right:-7px;width:8px;height:13px;background:var(--wa-out);clip-path:polygon(0 0,100% 0,0 100%)}
.ap .cm-m-meta{margin:0 0 .08rem;gap:.4rem;font-size:.8rem}
.ap .cm-nick{color:var(--nc,var(--acc));font-size:.82rem;font-weight:650}
:root[data-theme="dark"] .ap .cm-nick{filter:brightness(1.55) saturate(.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ap .cm-nick{filter:brightness(1.55) saturate(.9)}}
.ap .cm-pn{background:transparent;color:var(--wa-sub);padding:0}
.ap .cm-bub{font-size:.95rem;line-height:1.4;max-width:none;overflow-wrap:anywhere;color:var(--wa-ink)}
.ap .cm-bub::after{content:"";display:inline-block;width:5.4rem;height:1px}
.ap .cm-tm{position:absolute;right:.5rem;bottom:.2rem;display:inline-flex;align-items:center;gap:.22rem;font-size:.68rem;line-height:1;color:var(--wa-sub)}
.ap .cm-tm time{color:inherit;font-size:inherit}
.ap .cm-ticks{color:var(--wa-tick)}
.ap .cm-edited{font-size:.7rem;color:var(--wa-sub);font-style:normal}
.ap .cm-bub .me{background:color-mix(in srgb,var(--acc) 22%,transparent);border-radius:4px;padding:0 .15em}
.ap .cm-quote{background:color-mix(in srgb,var(--wa-ink) 7%,transparent);border-left:4px solid var(--acc);border-radius:6px;padding:.3rem .55rem;margin-bottom:.3rem;max-width:none;font-size:.85rem;color:var(--wa-sub)}
.ap .cm-m.bot .cm-m-body{background:var(--wa-in);border-left:3px solid var(--acc)}
.ap .cm-m.bot .cm-bub,.ap .cm-m.team .cm-bub{background:transparent;border:0;padding:0;color:var(--wa-ink)}
.ap .cm-m.team .cm-m-body{background:#fff3c4;color:#0e0e10;border-left:3px solid #e6b857}
.ap .cm-m.team .cm-bub,.ap .cm-m.team .cm-tm{color:#0e0e10}
.ap .cm-badge{font-size:.6rem;letter-spacing:.06em;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc);padding:.12rem .4rem}
.ap .cm-badge.mod{background:color-mix(in srgb,#2f8a5a 18%,transparent);color:#2f8a5a}
.ap .cm-badge.team{background:#e6b857;color:#0e0e10}
.ap .cm-gifimg{border-radius:6px;display:block;max-width:100%;height:auto}
.ap .cm-m-body:has(.cm-gifimg){padding:.22rem}
.ap .cm-m-body:has(.cm-gifimg) .cm-tm{background:rgba(0,0,0,.45);color:#fff;padding:.12rem .4rem;border-radius:99px;right:.5rem;bottom:.45rem}
.ap .cm-m-body:has(.cm-gifimg) .cm-ticks{color:#fff}
.ap .cm-rx{display:flex;flex-wrap:wrap;gap:.25rem}
.ap .cm-rx:not(:empty){margin-top:.35rem;padding-bottom:.9rem}
.ap .cm-rxb{background:color-mix(in srgb,var(--wa-ink) 7%,var(--wa-in));border:1px solid color-mix(in srgb,var(--wa-ink) 12%,transparent);color:var(--wa-ink);border-radius:99px;padding:.05rem .45rem;font-size:.78rem}
.ap .cm-acts{top:-1.1rem;right:.4rem;background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.14);border-radius:99px;z-index:4}
.ap .cm-m:not(.mine) .cm-acts{right:auto;left:3.4rem}
.ap .cm-m.newday{margin-top:2.6rem}
.ap .cm-m.newday[data-day]::after{content:attr(data-day);position:absolute;top:-2rem;left:50%;transform:translateX(-50%);padding:.2rem .7rem;border-radius:8px;background:var(--wa-in);color:var(--wa-sub);font-size:.72rem;font-weight:600;letter-spacing:.02em;box-shadow:0 1px .5px rgba(11,20,26,.14);white-space:nowrap}
.ap .cm-m:first-child.newday{margin-top:2.4rem}
.ap .cm-empty{background:var(--wa-in);border-radius:10px;box-shadow:0 1px .5px rgba(11,20,26,.14);color:var(--wa-sub)}
.ap .cm-game{background:transparent}

/* the writing bar */
.ap .cm-compose{background:var(--wa-bar);border-top:1px solid var(--line);padding:.55rem .7rem .6rem}
.ap .cm-bar{display:flex;align-items:flex-end;gap:.15rem;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:.2rem .3rem .2rem .45rem;box-shadow:none}
.ap .cm-bar:focus-within{border-color:var(--acc)}
.ap .cm-tool{color:var(--wa-sub);width:2.35rem;height:2.35rem;border-radius:50%;display:grid;place-items:center;border:0;background:transparent}
.ap .cm-tool:hover{background:var(--surface2);color:var(--fg)}
.ap .cm-ta{background:transparent;border:0;color:var(--fg);font-size:1rem;padding:.55rem .35rem;line-height:1.35;outline:none;box-shadow:none}
.ap .cm-send{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;border:0;flex:none;transition:transform .12s,filter .15s}
.ap .cm-send:hover{filter:brightness(1.08)}.ap .cm-send:active{transform:scale(.92)}
.ap .cm-new{background:var(--surface);color:var(--fg);box-shadow:0 2px 10px rgba(0,0,0,.2);border:1px solid var(--line)}
.ap .cm-typing{color:var(--wa-sub)}

/* signing in: the same grid, type and hairlines as the rest of the site */
.ap-auth{max-width:78rem;gap:clamp(1.5rem,6vw,6rem);padding:clamp(.6rem,3vw,2rem) clamp(.2rem,2vw,1.4rem);align-items:start}
.ap-auth>.ap-card,.ap-intro{margin-block:0}
.ap-intro{padding:0;margin-block:auto;background:transparent;border:0;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.ap-eyebrow{font-size:.74rem;letter-spacing:.13em;font-weight:650;color:var(--fg);display:flex;gap:1rem}
.ap-eyebrow::before{content:"(17)";font-variant-numeric:tabular-nums}
.ap-intro h1{font-size:clamp(2.6rem,5.2vw,5rem);line-height:.92;font-stretch:76%;font-weight:620;letter-spacing:-.024em;margin:.8rem 0 1.2rem;max-width:12ch}
.ap-intro h1 em{font-size:1.04em;letter-spacing:-.012em;color:var(--fg2)}
.ap-lede{font-size:1.08rem;max-width:40ch;color:var(--fg2)}
.ap-points{gap:0;max-width:34rem;margin-bottom:1.4rem;counter-reset:pt}
.ap-points li{counter-increment:pt;padding:.95rem 0;border-top:1px solid var(--line);align-items:baseline}
.ap-points li:last-child{border-bottom:1px solid var(--line)}
.ap-points .ic{display:none}
.ap-points li::before{content:"0" counter(pt);font-size:.74rem;font-weight:650;letter-spacing:.08em;color:var(--fg2);min-width:1.6rem;font-variant-numeric:tabular-nums}
.ap-points b{font-weight:620;font-size:1rem}
.ap-fun{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:.9rem 0 0;max-width:34rem}
.ap-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(1.2rem,2.6vw,2rem)}
.cm-seg{background:transparent;border:1px solid var(--line);padding:.2rem}
.cm-seg button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.cm-in,.cm-ta.cm-in{border-radius:12px}
.cm-btn{border-radius:999px}
.ap-warn{background:transparent;border:1px solid var(--line);border-radius:12px}
.ap-pick,.cm-pick{border-radius:50%}

@media (max-width:860px){
  .ap-chat{grid-template-columns:minmax(0,1fr);border-radius:12px}
  .ap-rooms,.ap-who{display:flex}
  .ap-rooms{position:absolute;inset:0 auto 0 0;width:min(20rem,86%);z-index:20;transform:translateX(-102%);transition:transform .22s;border-right:1px solid var(--line);box-shadow:8px 0 30px rgba(0,0,0,.2)}
  .ap-rooms.show{transform:none}
  .ap-who{position:absolute;inset:0 0 0 auto;width:min(18rem,86%);z-index:20;transform:translateX(102%);transition:transform .22s;box-shadow:-8px 0 30px rgba(0,0,0,.2)}
  .ap-who.show{transform:none}
  .ap-roomsbtn{display:grid}
  .ap-main{padding:.4rem}
  .ap .cm-m-body{max-width:86%}
  .ap-intro h1{font-size:clamp(2.4rem,12.5vw,3.6rem);margin:.5rem 0 .2rem}
  .ap-auth{display:flex;flex-direction:column;gap:1rem}
  .ap-intro{display:contents}
  .ap-intro>*{order:2}
  .ap-intro>.ap-eyebrow,.ap-intro>h1{order:0}
  .ap-auth>.ap-authcard{order:1}
}

/* ==========================================================================
   v4: the chat gets the whole screen. The page title is kept for screen readers only, the app fills the window under the site
   bar, the people list becomes a drawer, and the writing bar and bubbles have room to breathe. On a phone the chat is full
   screen with a slim header and a slim bottom bar, the way every chat app works.
   ========================================================================== */
body.cm-page .cm-hero{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}
body.cm-page .cm-hero *{max-width:none}
.ap{height:calc(100dvh / var(--ap-fs,1));min-height:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.ap>.ap-top{min-height:3rem;margin-inline:0;padding-inline:clamp(.8rem,2vw,1.6rem)}
.ap-tab{padding:.85rem .5rem}
.ap-main{padding:0}
.ap-main>div{height:100%}
/* the wall, art, music and fun pages keep some air around them */
#vWall,#vArt,#vSongs,#vFun,#vModerate,#vMe{padding:clamp(.8rem,2vw,1.6rem);overflow:auto}
.ap-chat{border:0;border-radius:0;border-top:1px solid var(--line);grid-template-columns:minmax(17rem,22rem) minmax(0,1fr)}
.ap-rooms,.ap-who{display:flex}
.ap-who{position:absolute;inset:0 0 0 auto;width:min(21rem,90%);z-index:18;transform:translateX(103%);transition:transform .24s cubic-bezier(.2,.8,.2,1);box-shadow:-10px 0 34px rgba(0,0,0,.16);border-left:1px solid var(--line)}
.ap-who.show{transform:none}
#pplBtn{display:grid!important}
.ap-whohead .ap-ibtn{display:grid}
.ap-conv{min-width:0}
.ap-head{min-height:4rem;padding:.6rem clamp(.8rem,2vw,1.4rem)}
.ap-hav{width:2.7rem;height:2.7rem}
.ap-head h2{font-size:1.08rem}
.ap-head p{font-size:.82rem}
.ap-exit{display:none}

/* room for the messages */
.ap .cm-log{padding:1.1rem clamp(.9rem,6%,7rem) 1.2rem}
.ap .cm-m{margin-top:.8rem;gap:.6rem}
.ap .cm-m.cont{margin-top:.18rem}
.ap .cm-m-av{width:2.4rem}
.ap .cm-m-av .av{width:2.4rem;height:2.4rem}
.ap .cm-m-body{max-width:min(40rem,74%);padding:.45rem .8rem .5rem;border-radius:10px}
.ap .cm-m:not(.cont):not(.mine) .cm-m-body{border-top-left-radius:0}
.ap .cm-m.mine:not(.cont) .cm-m-body{border-top-right-radius:0}
.ap .cm-nick{font-size:.86rem}
.ap .cm-bub{font-size:1.02rem;line-height:1.5;letter-spacing:.002em}
.ap .cm-tm{font-size:.7rem;right:.6rem;bottom:.28rem}
.ap .cm-bub::after{width:5.8rem}
.ap .cm-m{content-visibility:auto;contain-intrinsic-size:auto 3.4rem}
.ap .cm-m.fresh{animation:cmfresh .2s cubic-bezier(.2,.8,.2,1) both}
@keyframes cmfresh{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ap .cm-m.fresh,.ap-who{animation:none;transition:none}}

/* a quieter, roomier writing bar: nothing takes space unless it has something to say */
.ap .cm-compose{padding:.7rem clamp(.8rem,2vw,1.4rem) .8rem}
.ap .cm-typing:empty,.ap .cm-count:empty,.ap #notes:empty,.ap .cm-reply[hidden]{display:none}
.ap .cm-typing{height:auto;min-height:0;margin:0 0 .3rem .4rem}
.ap .cm-bar{padding:.3rem .4rem .3rem .6rem;border-radius:28px}
.ap .cm-ta{font-size:1.02rem;padding:.65rem .4rem}
.ap .cm-tool{width:2.5rem;height:2.5rem}
.ap .cm-send{width:2.7rem;height:2.7rem}
.ap .cm-new{bottom:5.6rem}

@media (max-width:860px){
  .ap{height:100dvh}
  .ap-chat{grid-template-columns:minmax(0,1fr);border-top:0}
  .ap-rooms{position:absolute;inset:0 auto 0 0;width:min(22rem,88%);z-index:20}
  .ap-roomsbtn{display:grid}
  .ap-exit{display:grid}
  /* chat is full screen: no top row, a slim header, a slim bottom bar */
  .ap[data-view="chat"]>.ap-top{display:none}
  .ap[data-view="chat"]{padding-top:calc(4.4rem / var(--ap-fs,1))}
  .ap-head{min-height:3.6rem;padding:.4rem .6rem;gap:.55rem}
  .ap-head .sp{min-width:0}
  .ap-hav{width:2.5rem;height:2.5rem}
  .ap .cm-log{padding:.8rem .6rem 1rem}
  .ap .cm-m-av{width:2rem}.ap .cm-m-av .av{width:2rem;height:2rem}
  .ap .cm-m-body{max-width:84%;padding:.4rem .7rem .46rem}
  .ap .cm-bub{font-size:1rem}
  .ap .cm-compose{padding:.45rem .5rem calc(.5rem + env(safe-area-inset-bottom))}
  .ap-bottom{margin:0;padding:.1rem .3rem calc(.1rem + env(safe-area-inset-bottom));gap:0;border:0;border-top:1px solid var(--line);border-radius:0;background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
  .ap-btab{padding:.4rem 0 .3rem;gap:.1rem;font-size:.66rem;border-radius:12px}
  .ap-btab[aria-selected="true"]{background:transparent;color:var(--acc)}
  .ap-btab[aria-selected="true"] svg{stroke:var(--acc)}
  .ap[data-view="chat"] .ap-bottom{display:flex}
  .ap .cm-new{bottom:4.8rem}
  #vWall,#vArt,#vSongs,#vFun,#vModerate,#vMe{padding:.7rem}
}

/* v4b: the old framed stage is gone. The app fills the window under the site bar. */
.cm-wrap{padding:0;--stage:100dvh}
.cm-wrap .ap{height:calc(100dvh / var(--ap-fs,1));min-height:0;padding-top:calc(4.5rem / var(--ap-fs,1));border:0;border-radius:0}
@media (max-width:860px){.cm-wrap{padding:0}.cm-wrap .ap,#cm.cm:not(.ap){border-radius:0}.cm-wrap .ap{padding-top:calc(4.4rem / var(--ap-fs,1))}}
@media (hover:none){.ap .cm-acts{display:none!important}}

/* visitors by country (owner) */
.md-vis-top{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;justify-content:space-between;margin-bottom:1rem}.md-vis-top .md-stats{flex:1 1 28rem;margin:0}
.md-vis-range{display:grid;gap:.25rem;font-size:.8rem;color:var(--muted)}
.md-vis-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1rem;align-items:start}@media(max-width:820px){.md-vis-grid{grid-template-columns:1fr}}
.md-vis-side{display:grid;gap:1rem}
.md-ctry,.md-pages{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.md-ctry li{display:grid;grid-template-columns:1.9rem minmax(6rem,11rem) 1fr 3.2rem 2.6rem;align-items:center;gap:.6rem;padding:.4rem .1rem;border-bottom:1px solid var(--line);font-size:.92rem}
.md-ctry li:last-child{border-bottom:0}
.md-flag{font-size:1.35rem;line-height:1;display:grid;place-items:center}.md-flagimg{width:24px;height:18px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.md-cn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-bar{height:.55rem;background:var(--surface-2,rgba(127,127,127,.15));border-radius:99px;overflow:hidden}.md-bar i{display:block;height:100%;background:linear-gradient(90deg,#ff8c00,#e40303);border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.md-ctry b{text-align:right;font-variant-numeric:tabular-nums}.md-ctry small{color:var(--muted);text-align:right}
@media(max-width:520px){.md-ctry li{grid-template-columns:1.9rem 1fr 3rem;}.md-ctry .md-bar,.md-ctry small{display:none}}
.md-days{display:flex;align-items:flex-end;gap:2px;height:7rem}.md-days i{flex:1;min-width:2px;background:#9dc8f5;border-radius:3px 3px 0 0}.md-days i:hover{background:#ff8c00}
.md-pages li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px solid var(--line);font-size:.9rem}.md-pages li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.md-pages b{font-variant-numeric:tabular-nums}
.md-vis-note{margin-top:1rem;max-width:60rem;line-height:1.5}