:root{--text:#37474f;--muted:#78909c;--background:#d2dde7;--surface:#fff;--accent:#26a69a;--accent-hover:#2bbbad;--male:#03a9f4;--male-light:#47c4fd;--female:#ff4081;--female-light:#ff8db3;--radius:12px;--shadow:0 1px 3px #0000001f;color:var(--text);background:var(--background);scrollbar-color:#b0bec5 transparent;font-family:Roboto,system-ui,sans-serif;font-size:15px}*{box-sizing:border-box}body{margin:0}#root{flex-direction:column;min-height:100dvh;display:flex}#root:has(.chat){height:100dvh}main{flex:1;overflow-y:auto}a{color:var(--accent)}button{font:inherit;cursor:pointer;background:var(--surface);box-shadow:var(--shadow);border:none;border-radius:8px;padding:10px 16px}button:disabled{cursor:default;opacity:.4}button.primary{color:#fff;background:var(--accent);letter-spacing:.5px;text-transform:uppercase;font-weight:500}button.primary:not(:disabled):hover{background:var(--accent-hover)}input{font:inherit;color:inherit;border:1px solid #cfd8dc;border-radius:8px;padding:10px 12px;font-size:16px}.site-header{justify-content:center;padding:12px;display:flex}.logo{width:min(300px,70vw);display:block}.site-header:has(+.home){padding-top:24px}.site-header:has(+.home) .logo{width:min(508px,90vw)}.home{flex-direction:column;align-items:center;gap:40px;padding:16px;display:flex}.picker{flex-direction:column;gap:20px;width:min(360px,100%);display:flex}.picker .primary{padding:14px}.gender-choice{border:none;gap:8px;margin:0;padding:0;display:flex}.gender-choice legend{text-align:center;width:100%;color:var(--muted);margin-bottom:8px}.gender-choice .option{text-align:center;cursor:pointer;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);border-bottom:4px solid #0000;flex:1;padding:14px}.gender-choice input{opacity:0;position:absolute}.gender-choice .option:has(input:focus-visible){outline:2px solid var(--accent)}.gender-choice .option.m:has(input:checked){border-color:var(--male)}.gender-choice .option.f:has(input:checked){border-color:var(--female)}.features{text-align:center;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;width:min(1000px,100%);display:grid}.features h2{font-weight:500}.site-footer{background:var(--surface);flex-wrap:wrap;align-items:center;gap:8px 24px;padding:12px 24px;display:flex}.site-footer h1{margin:0 0 0 auto;font-size:1em;font-weight:400}@media (width<=600px){.features h2{margin-bottom:0}.site-footer{flex-direction:column}.site-footer h1{margin:0}}.page{width:min(800px,100%);margin:0 auto;padding:0 16px 24px}.admin form{gap:8px;margin:16px 0;display:flex}.stats{grid-template-columns:max-content max-content;gap:8px 24px;display:grid}.stats dd{margin:0;font-weight:700}.chat{flex-direction:column;width:min(1100px,100%);margin:0 auto;display:flex;overflow:hidden}.messages{overflow-anchor:none;scrollbar-width:thin;flex-direction:column-reverse;flex:1;padding:8px 12px;display:flex;overflow-y:auto}.message-list{flex-direction:column;flex-grow:1;gap:8px;display:flex}@media (pointer:coarse){.bubble.status{margin-bottom:auto}}.bubble{overflow-wrap:anywhere;border-radius:var(--radius);background:var(--surface);max-width:min(75%,600px);box-shadow:var(--shadow);border-bottom:4px solid #0000;padding:10px 14px}.bubble.server{text-align:center;max-width:100%;color:var(--muted)}.bubble.status{color:var(--text);font-weight:500}.bubble.me{align-self:flex-end}.bubble.partner{align-self:flex-start}.bubble.me[data-gender=m]{border-color:var(--male)}.bubble.me[data-gender=f]{border-color:var(--female)}.bubble.partner[data-gender=m]{border-color:var(--male-light)}.bubble.partner[data-gender=f]{border-color:var(--female-light)}.emoticon{vertical-align:middle;height:30px}.shared-image{cursor:zoom-in;border-radius:8px;max-width:100%;max-height:200px;display:block}.viewer{cursor:zoom-out;background:0 0;border:none;outline:none;max-width:none;max-height:none;padding:0}.viewer::backdrop{background:#000c}.viewer img{object-fit:contain;width:95vw;height:95dvh;display:block}.composer{gap:8px;padding:8px 12px 12px;display:flex}.composer input{min-width:0;box-shadow:var(--shadow);border:none;outline:none;flex:1}.composer button img{display:block}@media (pointer:coarse){.composer button[type=submit]{display:none}}