@font-face{font-family:"Ubuntu Site";src:url("/f/ubuntu-regular.woff2?v=8c8eae7f") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Ubuntu Site";src:url("/f/ubuntu-bold.woff2?v=e545ac8f") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Symbols";src:url("/f/symbols.woff2?v=11c59f32") format("woff2");font-display:block}
:root,[data-theme=mocha]{color-scheme:dark;--yellow:#f9e2af;--red:#f38ba8;--green:#a6e3a1;--text:#cdd6f4;--subtext1:#bac2de;--subtext0:#a6adc8;--surface1:#45475a;--surface0:#313244;--base:#1e1e2e;--mantle:#181825;--crust:#11111b}
[data-theme=macchiato]{color-scheme:dark;--yellow:#eed49f;--red:#ed8796;--green:#a6da95;--text:#cad3f5;--subtext1:#b8c0e0;--subtext0:#a5adcb;--surface1:#494d64;--surface0:#363a4f;--base:#24273a;--mantle:#1e2030;--crust:#181926}
[data-theme=frappe]{color-scheme:dark;--yellow:#e5c890;--red:#e78284;--green:#a6d189;--text:#c6d0f5;--subtext1:#b5bfe2;--subtext0:#a5adce;--surface1:#51576d;--surface0:#414559;--base:#303446;--mantle:#292c3c;--crust:#232634}
[data-theme=latte]{color-scheme:light;--yellow:#df8e1d;--red:#d20f39;--green:#40a02b;--text:#4c4f69;--subtext1:#5c5f77;--subtext0:#6c6f85;--surface1:#bcc0cc;--surface0:#ccd0da;--base:#eff1f5;--mantle:#e6e9ef;--crust:#dce0e8}
:root{--sun:color-mix(in oklab,var(--yellow) 50%,#ffd000);--ink:var(--crust);--yellow-text:var(--yellow);--av-l:72%}
[data-theme=latte]{--sun:color-mix(in oklab,var(--yellow) 45%,#ffc800);--ink:#11111b;--yellow-text:color-mix(in oklab,var(--yellow) 58%,#000);--av-l:62%}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding:.55rem .6rem .8rem;background:var(--mantle);color:var(--text);font:400 1rem/1.55 "Ubuntu Site",Ubuntu,"Segoe UI",system-ui,sans-serif;overflow-wrap:anywhere}
body.frame{background:var(--base);font-size:.95rem;padding:.8rem .9rem 1rem}
body.admin{max-width:46rem;margin:0 auto;padding:1.5rem 1rem 4rem;background:var(--crust)}
a{color:var(--yellow-text);text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;border-radius:4px}
h1{font-size:1.6rem;margin:0 0 1rem}
.ico{font-family:"Symbols";font-style:normal;line-height:1}
svg.ico{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.2em;fill:currentColor;overflow:visible}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.msg{margin:0 0 .75rem;padding:.55rem .8rem;border-radius:10px;background:var(--surface0)}
.msg.err{background:color-mix(in oklab,var(--red) 20%,var(--base));color:var(--text);border:1px solid color-mix(in oklab,var(--red) 55%,transparent)}
.msg.ok{background:color-mix(in oklab,var(--green) 18%,var(--base));border:1px solid color-mix(in oklab,var(--green) 50%,transparent)}
.empty{margin:.6rem 0 0;color:var(--subtext0);text-align:center;font-size:.9rem}
.note{margin:.3rem .1rem 0;font-size:.76rem;color:var(--subtext0)}
.composer{position:relative;display:grid;gap:.5rem}
.who{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
input,textarea{width:100%;padding:.35rem .6rem;font:inherit;font-size:.9rem;color:var(--text);background:var(--mantle);border:1px solid var(--surface1);border-radius:9px}
textarea{display:block;resize:vertical;min-height:2.6rem}
input::placeholder,textarea::placeholder{color:var(--subtext0)}
.ta{position:relative}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.replying{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0;font-size:.9rem;color:var(--subtext1)}
.replying .ico{font-size:1.1rem}
.replying .cancel{margin-left:auto;color:var(--subtext0);font-size:.85rem}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.counter{font-size:.8rem;color:var(--subtext0);margin-right:auto}
.counter.over{color:var(--red);font-weight:700}
button{font:inherit;cursor:pointer}
.send{padding:.3rem .95rem;border:0;border-radius:999px;background:var(--sun);color:var(--ink);font-weight:700}
.send:hover{filter:brightness(1.06)}
.ep{order:-1}
.ep summary{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .65rem;border:1px solid var(--surface1);border-radius:999px;cursor:pointer;list-style:none;font-size:.9rem}
.ep summary::-webkit-details-marker{display:none}
.ep[open] summary{background:var(--surface0)}
.ep-panel{position:absolute;left:0;right:0;z-index:5;margin-top:.35rem;max-height:max(8rem,calc(100vh - 8.5rem));overflow:auto;padding:.5rem;background:var(--base);border:1px solid var(--surface1);border-radius:12px;box-shadow:0 14px 30px rgb(0 0 0/.35)}
.ep-h{margin:.35rem .2rem .25rem;font-size:.78rem;font-weight:700;color:var(--subtext0)}
.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.5rem,1fr));gap:.15rem}
.ep-grid button{display:grid;place-items:center;aspect-ratio:1;padding:.2rem;border:0;border-radius:8px;background:none}
.ep-grid button:hover,.ep-grid button:focus-visible{background:var(--surface0)}
.ep-grid img{width:32px;height:32px;object-fit:contain}
.ac{position:absolute;left:0;right:0;top:calc(100% + .25rem);z-index:6;max-height:9.5rem;overflow:auto;margin:0;padding:.3rem;list-style:none;background:var(--base);border:1px solid var(--surface1);border-radius:12px;box-shadow:0 14px 30px rgb(0 0 0/.35)}
.ac[hidden]{display:none}
.ac li{display:flex;align-items:center;gap:.55rem;padding:.3rem .5rem;border-radius:8px;cursor:pointer;font-size:.88rem}
.ac li[aria-selected=true],.ac li:hover{background:var(--surface0)}
.ac img{width:28px;height:28px;object-fit:contain;flex:none}
.ac .none{color:var(--subtext0);cursor:default}
/* Гілка: усі коментарі однією колонкою, у рамках одного рівня (як у Tumblr і WAFRN); відповіді під своїм
   коментарем за баблом зі стрілкою, кожна з @теґом того, кому відповідає */
.list{display:grid;gap:1rem;margin-top:1rem}
.thread{display:grid;gap:.6rem}
.c{display:grid;gap:.5rem;padding:.75rem .85rem .55rem;border:1px solid var(--surface1);border-radius:10px;background:var(--mantle)}
.c.own{background:color-mix(in oklab,var(--sun) 7%,var(--mantle))}  /* мій коментар: ледь жовте тло (рамка жовтіє лише в того, до кого перейшли за @теґом) */
.av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-weight:700;font-size:.9rem;color:#11111b;background:hsl(var(--h) 55% var(--av-l));object-fit:cover}
img.av{border-radius:50%}
.av-link{flex:none;display:block;border-radius:50%;line-height:0}  /* аватарка-посилання на профіль у сервісі входу */
.av-link:hover .av{box-shadow:0 0 0 2px var(--sun)}
.c-head{display:flex;align-items:center;gap:.65rem;min-width:0}
.c-who{display:grid;gap:.05rem;min-width:0;margin:0;line-height:1.3}
.c-name{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .45rem;min-width:0;font-size:.95rem}
.c-meta{color:var(--subtext0);font-size:.78rem}
.c-meta a{color:inherit}
.c-handle{overflow-wrap:anywhere}
.badge{padding:.05rem .45rem;border-radius:6px;background:var(--sun);color:var(--ink);font-size:.72rem;font-weight:700}
.badge.off{background:var(--surface1);color:var(--text)}
.c-body{margin:0;white-space:normal;line-height:1.6}
.emoji{height:1.6em;width:auto;vertical-align:-.45em}
/* @теґ: кому відповідь; веде до того коментаря (він підсвічується) */
.mention{padding:.05rem .4rem;border-radius:6px;background:color-mix(in oklab,var(--sun) 16%,transparent);color:var(--yellow-text);
  font-weight:700;text-decoration:none;white-space:nowrap}
.mention:hover{background:color-mix(in oklab,var(--sun) 28%,transparent)}
.c-reply{justify-self:start;display:inline-flex;align-items:center;gap:.35rem;margin-left:-.45rem;padding:.2rem .6rem .2rem .45rem;
  border-radius:999px;color:var(--subtext0);font-size:.84rem;text-decoration:none}
.c-reply:hover{background:var(--surface0);color:var(--text)}
.c-reply .ico{font-size:1.05rem}
.c:target,.adm:target{border-color:var(--sun);box-shadow:0 0 0 3px color-mix(in oklab,var(--sun) 30%,transparent)}
details>summary{cursor:pointer}
/* бабл «Показати N відповідей»: на всю ширину, текст і стрілка посередині; відкритий — «Сховати», стрілка вгору */
.replies>summary,.older>summary{display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.45rem 1rem;
  border:1px solid color-mix(in oklab,var(--subtext0) 50%,transparent);border-radius:999px;color:var(--subtext1);font-size:.9rem;list-style:none;
  transition:border-color .15s,color .15s}
.replies>summary:hover,.older>summary:hover{border-color:var(--sun);color:var(--text)}
.replies>summary::-webkit-details-marker,.older>summary::-webkit-details-marker{display:none}
.replies>summary .ico{font-size:1.15rem;transition:transform .2s}
.replies[open]>summary .ico{transform:rotate(180deg)}
.replies[open] .r-show,.replies:not([open]) .r-hide{display:none}
.r-list{display:grid;gap:.6rem;margin-top:.6rem}
.older>.thread{margin-top:1rem}
.adm-nav{margin:-.5rem 0 1rem;color:var(--subtext0)}
.adm{padding:.9rem;margin-bottom:.75rem;background:var(--base);border:1px solid var(--surface0);border-radius:12px}
.adm-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.4rem 0}
.adm-actions form{display:flex;gap:.4rem;align-items:center}
.adm-actions label{display:flex;gap:.25rem;align-items:center;font-size:.85rem;color:var(--subtext0)}
.adm-actions input[type=checkbox]{width:auto}
.adm-reply{display:flex;gap:.5rem;align-items:flex-end}
.adm-reply textarea{min-height:2.6rem}
.adm .send{padding:.35rem .9rem;white-space:nowrap}
.login{display:flex;gap:.5rem;max-width:24rem}
.adm-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;margin:0 0 .6rem;font-size:.9rem}
.adm-tools span{color:var(--subtext0);margin-left:.5rem}
.adm-tools span:first-child{margin-left:0}
.adm-tools a{padding:.15rem .6rem;border-radius:999px;background:var(--surface0);color:var(--text);text-decoration:none}
.adm-tools a[aria-current]{background:var(--sun);color:var(--ink);font-weight:700}
.bulk{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .75rem;padding:.5rem .7rem;background:var(--crust);border:1px solid var(--surface0);border-radius:12px;font-size:.9rem}
.bulk button,.adm-actions button{padding:.3rem .85rem;border:0;border-radius:999px;background:var(--surface0);color:var(--text)}
.danger{background:color-mix(in oklab,var(--red) 30%,var(--base))!important}
.publish{background:var(--sun)!important;color:var(--ink)!important;font-weight:700}
.folder{margin:0 0 .75rem}
.folder>summary{display:flex;align-items:center;gap:.5rem;padding:.45rem .2rem;font-weight:700;list-style:none}
.folder>summary::-webkit-details-marker{display:none}
.folder>summary .ico{color:var(--yellow-text);font-size:1.2rem;font-weight:400}
.muted{color:var(--subtext0);font-weight:400;font-size:.9rem}
.pick input{width:1.1rem;height:1.1rem;margin:0;accent-color:var(--yellow)}
.adm-tabs{display:flex;gap:.4rem;margin:0 0 1rem}
.adm-tabs a{padding:.35rem .9rem;border-radius:999px;background:var(--surface0);color:var(--text);text-decoration:none;font-weight:700}
.adm-tabs a[aria-current]{background:var(--sun);color:var(--ink)}
.adm-tabs{flex-wrap:wrap}
/* Безпека: QR-код для Aegis */
.tf-steps{display:grid;gap:1rem;padding-left:1.2rem;max-width:40rem}
.tf-qr{margin:.7rem 0;line-height:0}
.tf-qr svg{width:min(15rem,100%);height:auto;border-radius:10px}
.tf-secret{font-size:1.05rem;letter-spacing:.04em;user-select:all}
.tf-on{padding:.7rem .9rem;border-radius:10px;background:color-mix(in oklab,var(--green) 16%,transparent)}
.adm-h2{margin:2.2rem 0 .6rem;font-size:1.2rem}
.send.danger{background:var(--red);color:var(--crust)}
.ed-mini.danger{background:color-mix(in oklab,var(--red) 16%,transparent);color:var(--red)}
.ed-mini.danger:hover{background:color-mix(in oklab,var(--red) 28%,transparent)}
/* Редактор сайту */
.ed-status{padding:.6rem .85rem;border-radius:10px;background:var(--surface0)}
.ed-status.ok{background:color-mix(in oklab,var(--green) 16%,transparent)}
.ed-status.run{background:color-mix(in oklab,var(--sun) 18%,transparent)}
.ed-status.err{background:color-mix(in oklab,var(--red) 18%,transparent)}
.ed-cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.6rem;margin:1rem 0}
.ed-card{display:grid;gap:.2rem;padding:.8rem 1rem;border:2px solid var(--surface1);border-radius:14px;color:var(--text);text-decoration:none}
.ed-card:hover{border-color:var(--sun)}
.ed-card span{font-size:.8rem;color:var(--subtext0)}
.ed-items{padding-left:1.4rem;display:grid;gap:.4rem;max-width:52rem}
.ed-item{padding:.45rem .2rem;border-bottom:1px solid var(--surface0)}
.ed-item>div:first-child p{margin:.15rem 0 .35rem;color:var(--subtext0);font-size:.88rem}
.ed-acts{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.ed-acts form{margin:0}
.ed-mini{display:inline-block;padding:.2rem .7rem;border:0;border-radius:999px;background:var(--surface0);color:var(--text);font:inherit;font-size:.85rem;text-decoration:none;cursor:pointer}
.ed-mini:hover{background:var(--surface1)}
.ed-form{display:grid;gap:.9rem;max-width:44rem}
.ed-field{display:grid;gap:.3rem}
.ed-field label{font-weight:700}
.ed-field input:not([type=checkbox]),.ed-field textarea,.ed-field select{width:100%;padding:.45rem .6rem;border:1px solid var(--surface1);border-radius:8px;background:var(--mantle);color:var(--text);font:inherit}
.ed-check label{font-weight:400;display:flex;gap:.5rem;align-items:center;justify-self:start}
.ed-check input{width:1.1rem;height:1.1rem;margin:0;padding:0;accent-color:var(--yellow)}
.ed-help{color:var(--subtext0);font-size:.82rem}
.ed-list{display:grid;gap:.7rem;border:1px solid var(--surface1);border-radius:12px;padding:.6rem .9rem .8rem}
.ed-list legend{font-weight:700;padding:0 .3rem}
.ed-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.5rem .7rem;align-items:start;padding:.5rem 0;border-top:1px dashed var(--surface1);position:relative}
.ed-num{position:absolute;right:0;top:.3rem;color:var(--subtext0);font-size:.75rem}
.ed-save{display:flex;gap:1rem;align-items:center}
.adm-h{margin:1.4rem 0 .6rem;font-size:1.1rem}
.g-add{display:flex;flex-wrap:wrap;gap:.5rem}
.g-add input{flex:1 1 14rem}
.g-row{display:flex;gap:.9rem;align-items:flex-start}
.g-ban{flex:none;width:8rem;aspect-ratio:460 / 215;border-radius:7px;object-fit:cover;background:var(--surface0)}
.g-main{flex:1;min-width:0}
.g-main .muted{margin:.15rem 0 .5rem}
.g-actions{display:flex;flex-wrap:wrap;gap:.4rem}
.g-actions button{padding:.3rem .85rem;border:0;border-radius:999px;background:var(--surface0);color:var(--text)}
@media (max-width:30rem){.g-row{flex-direction:column}.g-ban{width:100%}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
img.av.round{border-radius:50%}
img.av.guest{border-radius:50%;background:var(--surface0);padding:2px;object-fit:contain}
.who-link{color:inherit;text-decoration:none}
.who-link:hover{text-decoration:underline}
.via{display:inline-flex;align-items:center;gap:.25rem;color:var(--subtext0);font-size:.8rem}
.via .ico{font-size:.95rem}
.login{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .7rem}
.login-h{margin-right:.15rem;font-size:.85rem;color:var(--subtext0)}
.lg{display:grid;place-items:center;width:2.15rem;height:2.15rem;border:1px solid var(--surface1);border-radius:8px;background:var(--mantle);color:var(--text);text-decoration:none}
.lg .ico{font-size:1.1rem}
.lg:hover,.lg:focus-visible{border-color:var(--sun);color:var(--yellow-text)}
.login-done{margin-left:auto;font-size:.8rem;color:var(--subtext0)}
.login-wait{margin:0 0 .4rem;font-size:.85rem;color:var(--subtext1)}
.login-code{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .5rem;font-size:.9rem}
.login-code input{width:5.5rem;letter-spacing:.25em;text-align:center}
.me{display:flex;align-items:center;gap:.75rem;padding:.55rem .7rem;border-radius:12px;background:var(--mantle);font-size:.92rem}
.me .av{width:36px;height:36px}
.me-text{display:grid;gap:.15rem;min-width:0;line-height:1.3}
.me-text .via{font-size:.8rem}
.link-btn{margin-left:auto;flex:none;padding:.3rem .85rem;border:1px solid var(--surface1);border-radius:999px;background:none;color:var(--text);font-size:.85rem}
.link-btn:hover{border-color:var(--sun);color:var(--yellow-text)}
/* віконце входу на сторінках сайту (/bar у <iframe> у вікні «Увійти»): тло прозоре, рамку й заголовок дає сам сайт,
   а кнопки такі, як на сайті: тло картки, рамка, жовта рамка під курсором */
body.barpage{margin:0;padding:2px;background:transparent;overflow:hidden;font-size:.9rem}
.lp{display:grid;gap:.75rem;align-content:start}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fill,4.8rem);gap:.55rem}  /* квадрати однакові на будь-якому екрані */
.sq{display:grid;justify-items:center;align-content:center;gap:.3rem;aspect-ratio:1;padding:.3rem;border:2px solid var(--surface1);border-radius:14px;
  background:var(--base);color:var(--text);text-decoration:none}
.lp .sq{width:auto;height:auto}  /* у кнопок і клас .lg (на нього чекає скрипт входу), але розмір свій */
.sq .ico{font-size:1.7rem}
.sq-name{font-size:.75rem;font-weight:700;line-height:1.1;text-align:center;white-space:nowrap}
.sq:hover,.sq:focus-visible{border-color:var(--sun)}
.lp-foot{margin:.2rem 0 0}
.lp-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .95rem .4rem .75rem;border:2px solid var(--surface1);border-radius:999px;
  background:var(--base);color:var(--text);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.lp-btn:hover{border-color:var(--sun)}
.lp-who{display:flex;align-items:center;gap:.8rem}
.lp-who .av{width:48px;height:48px}
.lp-name{display:grid;gap:.15rem;min-width:0;line-height:1.25;font-size:1rem}
.lp-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-name .via{font-size:.82rem}
.lp-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.lp .login-wait{margin:0;color:var(--subtext1);font-size:.85rem}
/* Сторінки входу (окрема вкладка): картка в стилі сайту — сирники згори, аватарка й назва сайту */
body.authpage{min-height:100vh;margin:0;padding:clamp(1rem,4vw,3rem) 1rem;background:var(--crust);display:grid;place-items:start center}
.auth{width:min(34rem,100%);overflow:hidden;border:1px solid var(--surface1);border-radius:20px;background:var(--base);box-shadow:0 24px 60px rgb(0 0 0 / .45)}
.auth-banner{height:6.5rem;background:var(--sun) repeat-x center / auto 100%}
.auth-in{display:grid;gap:1rem;padding:0 1.6rem 1.8rem}
.auth-site{display:flex;align-items:center;gap:.7rem;margin-top:-1.6rem;color:var(--text);text-decoration:none;width:max-content}
.auth-site img{width:56px;height:56px;border-radius:14px;box-shadow:0 0 0 4px var(--base)}
.auth-site span{display:grid;line-height:1.25;margin-top:2rem}
.auth-site small{color:var(--subtext0)}
.auth h1{margin:.2rem 0 0;font-size:1.55rem}
.auth-h{display:flex;align-items:center;gap:.5rem}
.auth-h .ico{color:var(--yellow-text)}
.auth-done{display:grid;justify-items:center;gap:.8rem;text-align:center}
.auth-who{position:relative;margin-top:.4rem}
.auth-av{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--sun)}
.auth-av-none{background:var(--surface0);color:var(--yellow-text);font-size:2.6rem}
.auth-badge{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--sun);color:var(--ink);font-size:1.15rem;box-shadow:0 0 0 3px var(--base)}
.auth-lead{margin:0;font-size:1.05rem}
.auth-handle,.auth-via{color:var(--subtext0)}
.auth-steps{display:grid;gap:.45rem;margin:.2rem 0 0;padding:.8rem 1rem .8rem 2rem;border-radius:12px;background:var(--mantle);text-align:left;width:100%}
.auth-code{width:100%;padding:.7rem 1rem;border:1px dashed var(--surface1);border-radius:12px}
.auth-code p{margin:0;color:var(--subtext1);font-size:.9rem}
.auth-digits{display:flex;justify-content:center;gap:.4rem;margin-top:.45rem!important}
.auth-digits span{display:grid;place-items:center;width:2.6rem;height:3.1rem;border-radius:10px;background:var(--surface0);color:var(--text);
  font-family:"Ubuntu Mono",ui-monospace,monospace;font-size:1.7rem;font-weight:700}
.auth .send{justify-self:center;padding:.55rem 1.4rem;text-decoration:none}
.auth-note{display:grid;justify-items:center;gap:.6rem;text-align:center}
.auth-note p{margin:0;color:var(--subtext1)}
.auth-ico{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--surface0);color:var(--yellow-text);font-size:1.8rem}
.auth-note.err .auth-ico{background:color-mix(in oklab,var(--red) 20%,var(--base));color:var(--red)}
.login-form{display:grid;gap:.5rem;max-width:24rem}
.login-form .send{justify-self:start;padding:.4rem 1.1rem}
.server-list{list-style:none;margin:.8rem 0;padding:0;display:grid;gap:.5rem;max-width:24rem}
.server-list .send{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;text-decoration:none}
@media (max-width:30rem){.who{grid-template-columns:1fr}body{padding:.6rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}