:root{--colour-ectoplasm-100: rgba(224,247,217,1);--colour-ectoplasm-200: rgba(200,242,192,1);--colour-ectoplasm-300: rgba(179,241,165,1);--colour-ectoplasm-400: rgba(141,219,125,1);--colour-ectoplasm-500: rgba(112,202,98,1);--colour-ectoplasm-600: rgba(84,180,71,1);--colour-ectoplasm-700: rgba(60,126,54,1);--colour-ectoplasm-800: rgba(43,92,47,1);--colour-ectoplasm-900: rgba(32,74,32,1);--colour-ectoplasm-950: rgba(21,53,21,1);--colour-ectoplasm-50: rgba(246,253,244,1);--colour-aubergine-100: rgba(238,229,250,1);--colour-aubergine-200: rgba(224,207,246,1);--colour-aubergine-300: rgba(196,158,244,1);--colour-aubergine-400: rgba(157,97,232,1);--colour-aubergine-500: rgba(127,48,225,1);--colour-aubergine-600: rgba(110,42,197,1);--colour-aubergine-700: rgba(85,30,154,1);--colour-aubergine-800: rgba(62,22,113,1);--colour-aubergine-900: rgba(48,13,93,1);--colour-aubergine-950: rgba(28,4,56,1);--colour-aubergine-50: rgba(248,244,253,1);--colour-weezer-100: rgba(216,237,245,1);--colour-weezer-200: rgba(192,226,240,1);--colour-weezer-300: rgba(153,206,227,1);--colour-weezer-400: rgba(107,186,221,1);--colour-weezer-500: rgba(75,164,212,1);--colour-weezer-600: rgba(65,146,191,1);--colour-weezer-700: rgba(51,117,160,1);--colour-weezer-800: rgba(36,84,119,1);--colour-weezer-900: rgba(25,62,86,1);--colour-weezer-950: rgba(13,39,54,1);--colour-weezer-50: rgba(244,250,253,1);--colour-yellow-100: rgba(251,244,200,1);--colour-yellow-200: rgba(247,234,156,1);--colour-yellow-300: rgba(244,227,126,1);--colour-yellow-400: rgba(241,218,91,1);--colour-yellow-500: rgba(239,202,54,1);--colour-yellow-600: rgba(225,175,15,1);--colour-yellow-700: rgba(192,139,16,1);--colour-yellow-800: rgba(128,90,34,1);--colour-yellow-900: rgba(86,63,24,1);--colour-yellow-950: rgba(58,39,9,1);--colour-yellow-50: rgba(254,252,240,1);--colour-orange-100: rgba(248,225,214,1);--colour-orange-200: rgba(245,207,192,1);--colour-orange-300: rgba(238,175,152,1);--colour-orange-400: rgba(233,144,112,1);--colour-orange-500: rgba(233,124,87,1);--colour-orange-600: rgba(225,87,46,1);--colour-orange-700: rgba(198,69,30,1);--colour-orange-800: rgba(127,49,25,1);--colour-orange-900: rgba(97,36,17,1);--colour-orange-950: rgba(55,20,7,1);--colour-orange-50: rgba(252,244,239,1);--colour-red-100: rgba(244,217,220,1);--colour-red-200: rgba(240,187,196,1);--colour-red-300: rgba(237,163,171,1);--colour-red-400: rgba(231,136,145,1);--colour-red-500: rgba(218,85,96,1);--colour-red-600: rgba(217,57,64,1);--colour-red-700: rgba(189,43,46,1);--colour-red-800: rgba(159,36,39,1);--colour-red-900: rgba(123,26,29,1);--colour-red-950: rgba(62,10,14,1);--colour-red-50: rgba(251,240,241,1);--colour-bubblegum-100: rgba(254,229,243,1);--colour-bubblegum-200: rgba(250,206,231,1);--colour-bubblegum-300: rgba(241,170,211,1);--colour-bubblegum-400: rgba(229,131,188,1);--colour-bubblegum-500: rgba(228,108,175,1);--colour-bubblegum-600: rgba(223,72,153,1);--colour-bubblegum-700: rgba(176,46,113,1);--colour-bubblegum-800: rgba(131,35,87,1);--colour-bubblegum-900: rgba(93,20,58,1);--colour-bubblegum-950: rgba(56,9,35,1);--colour-bubblegum-50: rgba(255,245,251,1);--colour-grey-100: rgba(238,238,238,1);--colour-grey-200: rgba(218,218,218,1);--colour-grey-300: rgba(199,198,200,1);--colour-grey-400: rgba(153,148,154,1);--colour-grey-500: rgba(128,124,128,1);--colour-grey-600: rgba(105,101,106,1);--colour-grey-700: rgba(70,67,71,1);--colour-grey-800: rgba(49,46,50,1);--colour-grey-900: rgba(31,29,32,1);--colour-grey-950: rgba(23,21,23,1);--colour-grey-50: rgba(248,248,248,1);--colour-brown-50: rgba(253,248,238,1);--colour-brown-100: rgba(247,238,222,1);--colour-brown-200: rgba(239,210,173,1);--colour-brown-300: rgba(218,169,124,1);--colour-brown-400: rgba(199,142,92,1);--colour-brown-500: rgba(177,111,61,1);--colour-brown-600: rgba(144,86,43,1);--colour-brown-700: rgba(116,69,34,1);--colour-brown-800: rgba(84,47,20,1);--colour-brown-900: rgba(64,36,12,1);--colour-brown-950: rgba(42,24,5,1);--colour-olive-50: rgba(248,253,231,1);--colour-olive-100: rgba(238,249,201,1);--colour-olive-200: rgba(223,238,158,1);--colour-olive-300: rgba(221,234,122,1);--colour-olive-400: rgba(202,212,89,1);--colour-olive-500: rgba(175,185,69,1);--colour-olive-600: rgba(153,157,54,1);--colour-olive-700: rgba(114,118,27,1);--colour-olive-800: rgba(91,95,22,1);--colour-olive-900: rgba(57,60,12,1);--colour-olive-950: rgba(35,37,9,1);--colour-denim-50: rgba(239,240,255,1);--colour-denim-100: rgba(227,229,252,1);--colour-denim-200: rgba(205,209,255,1);--colour-denim-300: rgba(156,164,253,1);--colour-denim-400: rgba(96,108,243,1);--colour-denim-500: rgba(65,80,249,1);--colour-denim-600: rgba(49,64,238,1);--colour-denim-700: rgba(27,42,205,1);--colour-denim-800: rgba(25,35,157,1);--colour-denim-900: rgba(15,23,112,1);--colour-denim-950: rgba(7,11,56,1);--easing-subtle-out: cubic-bezier(.165, .84, .44, 1);--font: "Roboto Serif Variable", "Roboto Serif";font-family:var(--font),serif}::selection{background-color:var(--colour-accent-700);color:#fff}*,*:after,*:before{box-sizing:border-box}input{accent-color:var(--colour-accent-700)}body,html{padding:0;margin:0;height:100vh}main.app{--sidebar-border: 1px solid var(--colour-grey-200);display:grid;grid-template-columns:max-content 1fr;grid-template-rows:1fr min-content;height:100vh}main.app>:not(aside):not(footer){height:100vh;overflow:auto;grid-column:2;grid-row:1 / -1}article.yeah{max-width:56rem;width:100%;padding:0 1rem;margin:auto;h1.title{margin-top:4rem}}.error-message{display:flex;gap:.25rem;align-items:first baseline;color:var(--colour-red-700);font-size:.9rem;margin:0;line-height:1.5;svg{width:12px;height:12px}}.spinner{overflow:visible;--active: white;--inactive: black;.sect{scale:var(--scale);transform-origin:center;fill:var(--fill)}}.body-small{font-size:.8rem;line-height:1.5}.title-1,h1.title{font-size:clamp(4rem,10vw,12rem);font-weight:100;font-style:italic;letter-spacing:-.025em;margin:0;line-height:1;user-select:none}.heading-2,h2.heading{display:block;font:inherit;margin:.25em 0;font-size:.9rem;font-weight:450;color:var(--colour-grey-950);font-variation-settings:"GRAD" 100;hgroup>&{margin-bottom:0;+p{font-size:.85rem;margin-top:.5em;color:var(--colour-grey-700)}}}@font-face{font-family:"Roboto Serif Variable";font-style:italic;font-display:swap;font-weight:100 900;font-stretch:50% 150%;src:url(./roboto-serif-cyrillic-ext-full-italic-DewQ6zjU.woff2) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:"Roboto Serif Variable";font-style:italic;font-display:swap;font-weight:100 900;font-stretch:50% 150%;src:url(./roboto-serif-cyrillic-full-italic-C1ZZqvR7.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:"Roboto Serif Variable";font-style:italic;font-display:swap;font-weight:100 900;font-stretch:50% 150%;src:url(./roboto-serif-vietnamese-full-italic-B5Cc2wrc.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:"Roboto Serif Variable";font-style:italic;font-display:swap;font-weight:100 900;font-stretch:50% 150%;src:url(./roboto-serif-latin-ext-full-italic-CYBQbyda.woff2) format("woff2-variations");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:"Roboto Serif Variable";font-style:italic;font-display:swap;font-weight:100 900;font-stretch:50% 150%;src:url(./roboto-serif-latin-full-italic-BlDM4fCr.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Roboto Serif Variable";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:50% 150%;src:url(./roboto-serif-cyrillic-ext-full-normal-CigrVB6j.woff2) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:"Roboto Serif Variable";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:50% 150%;src:url(./roboto-serif-cyrillic-full-normal-Bja2UEZq.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:"Roboto Serif Variable";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:50% 150%;src:url(./roboto-serif-vietnamese-full-normal-CI4pYbjb.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:"Roboto Serif Variable";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:50% 150%;src:url(./roboto-serif-latin-ext-full-normal-CCTxybKk.woff2) format("woff2-variations");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:"Roboto Serif Variable";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:50% 150%;src:url(./roboto-serif-latin-full-normal-rc_0-6xo.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}article.no-buffer{display:grid;justify-items:center;align-content:center;grid-auto-rows:min-content;gap:.75rem;h2{font-size:1rem;font-weight:500;font-variation-settings:"GRAD" 100;color:var(--colour-grey-800);margin:0}span{font-size:.9rem;color:var(--colour-grey-700);font-style:italic;margin:0}}aside.main-sidebar{border-right:var(--sidebar-border);width:16rem;height:100%;overflow:auto;padding-bottom:1rem;--inner-padding: .75rem}aside.main-sidebar>dialog.expanded{position:fixed;top:0;left:0;min-height:100vh;height:100vh;overflow:auto;width:50vw;margin:0;border:none;padding:0;z-index:10;border-right:1px solid var(--colour-grey-200)}header.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:.6rem var(--inner-padding);background:linear-gradient(to bottom,var(--colour-accent-50),transparent);h1{margin:0;user-select:none;color:var(--colour-grey-600);font-size:.6rem;font-weight:500;font-variation-settings:"GRAD" 100}+section.sidebar-section{margin-top:0rem}button{color:var(--colour-grey-800);margin-right:-.15rem}}section.sidebar-section{margin-top:.75rem;width:100%;overflow:hidden;.title{all:unset;cursor:pointer;margin:0 auto 0 0;font:inherit;font-size:.825rem;font-weight:450;color:var(--colour-grey-950);font-variation-settings:"GRAD" 100;display:flex;align-items:baseline;gap:0 .25rem;&.errored{color:var(--colour-red-800);font-weight:550}&.disconnected{color:var(--colour-grey-700);font-weight:400;font-variation-settings:"GRAD" 0}&:has(~.reconnecting){color:var(--colour-grey-700);font-weight:400}&:hover{text-decoration:underline}&:focus-visible{outline:2px solid var(--colour-accent-500);outline-offset:2px}}.title svg{width:10px;height:10px}&:has(+.sidebar-section){padding-bottom:.5rem;border-bottom:1px solid var(--colour-grey-100)}>.sidebar-section-header{display:grid;align-items:center;gap:.25rem;margin:0 var(--inner-padding);margin-bottom:.25rem;margin-right:.5rem;grid-template-columns:auto 1fr;grid-auto-columns:max-content;grid-auto-flow:column;.title{grid-column:1 / span 2;display:grid;grid-template-columns:subgrid;width:100%;overflow:hidden;text-overflow:ellipsis}h2{all:inherit;display:grid;grid-template-columns:subgrid;grid-column:1 / span 2;svg+&{grid-column:2}}.reconnecting{grid-column:2;grid-row:2;margin:0;font-size:.7rem;font-weight:500;font-variation-settings:"GRAD" 100;color:var(--colour-orange-700)}>.icon-button{color:transparent;transition:color 75ms var(--easing-subtle-out);grid-row:1;&:last-of-type{color:var(--colour-grey-400)}}}&:hover>header>.icon-button,&:has(:focus-visible)>header>.icon-button{color:var(--colour-grey-800)}}ul.sidebar-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.15rem;h3{font-size:.7rem;font-weight:500;margin:.5rem .75rem .1rem;font-variation-settings:"GRAD" 100;color:var(--colour-grey-600);&:first-of-type{margin-top:.25rem}}}li.sidebar-item{display:flex;flex:1;&:not(:has(>button,a)),>button,>a{display:flex;flex:1;gap:.25rem;align-items:center;justify-content:space-between;height:1.65rem;padding:0 .5rem;margin:0 .25rem;background-color:transparent;border:none;font:inherit;text-decoration:none;cursor:pointer;border-radius:5px;font-size:.825rem;color:var(--colour-grey-900);line-height:1;&:hover{background-color:var(--colour-grey-100)}}&.selected:not(:has(>button,a)),&.selected>button,&.selected>a{background-color:var(--colour-accent-100);color:var(--colour-grey-950);font-variation-settings:"GRAD" 100}}.unread-marker{height:1rem;min-width:1rem;padding:.15rem;border-radius:2px;display:flex;align-items:center;justify-content:center;font-variation-settings:"GRAD" 100;font-weight:500;background-color:var(--colour-grey-100);li.sidebar-item:hover &{background-color:var(--colour-grey-200)}.selected &{background-color:var(--colour-accent-600);color:#fff}}.connection-error{background-color:var(--colour-red-100);border-left:4px solid var(--colour-red-700);padding:.65rem;margin-bottom:.25rem;h3{margin:.25rem 0;font-size:.85rem;font-weight:400;font-variation-settings:"GRAD" 100}p{margin:0;color:var(--colour-grey-800)}.buttons{display:flex;justify-content:space-between;color:var(--colour-red-900);font-size:.8rem;margin:.5rem -.25rem 0;--hover-colour: var(--colour-red-200);--pressed-colour: var(--colour-red-300)}}.connection-error blockquote,.error-quote{position:relative;z-index:1;margin:.5rem 0;text-align:right;&:before{position:absolute;top:0;left:-.25rem;font-size:8rem;line-height:.75;z-index:-1;content:"“";color:var(--colour-red-200)}p{color:var(--colour-grey-950);text-wrap:balance}footer{color:var(--colour-grey-600)}}footer.sidebar-footer{border-right:var(--sidebar-border);border-top:1px solid var(--colour-grey-100);margin-top:auto;grid-row:2;grid-column:1;height:3rem;display:flex;align-items:center;justify-content:space-between;padding:0 .5rem;a{font-size:.8rem;font-weight:400;padding:.25rem;color:var(--colour-grey-700);text-decoration:none;border-radius:4px;font-variation-settings:"GRAD" 100;display:flex;gap:.25rem;&:hover{background-color:var(--colour-grey-100)}}}fieldset.view-switcher{border:1px solid var(--colour-grey-200);background-color:var(--colour-grey-100);border-radius:6px;padding:.1rem;display:flex;align-items:center;gap:1px;label{display:flex;align-items:center;padding:.15rem;border:1px solid transparent;border-radius:4px;cursor:pointer;color:var(--colour-grey-700);&:has(:checked){border-color:var(--colour-grey-200);background-color:#fff;color:var(--colour-grey-950)}&:not(:has(:checked)):hover{background-color:var(--colour-grey-200)}input{position:absolute;clip:rect(0,0,0,0)}svg{width:17px;height:17px}}&:has(:focus-visible) label:has(:checked){outline:2px solid var(--colour-accent-400)}}@keyframes addbutton-rainbow{to{background-position:-200% 0}}button.add-network{font-size:.75rem;font-weight:400;margin:1rem auto;color:var(--colour-grey-600);font-variation-settings:"GRAD" 0;transition:.1s var(--easing-subtle-out);transition-property:color,font-variation-settings;padding:.4rem .5rem;@media screen and not (prefers-reduced-motion){&:hover{animation:addbutton-rainbow 2s linear infinite}}&:hover{background:linear-gradient(to right,var(--colour-red-200),var(--colour-orange-200),var(--colour-yellow-200),var(--colour-ectoplasm-200),var(--colour-weezer-200),var(--colour-aubergine-200),var(--colour-bubblegum-200),var(--colour-red-200)) 0 0/200% 100%;font-variation-settings:"GRAD" 100;color:#000}}div.adapter-selector{font-size:.8rem;padding:.25rem .5rem;border-radius:4px;background-color:var(--colour-grey-50);color:var(--colour-grey-900);border:1px solid var(--colour-grey-100);label{display:flex;align-items:baseline;gap:.25rem}select{background-color:transparent;border:0;font:inherit;font-weight:500;padding:.1rem .25rem;border-radius:4px;width:min-content;border:1px solid var(--colour-grey-200);color:var(--colour-grey-900);background-color:#fff;&:hover{background-color:var(--colour-grey-100)}}}.icon-button{background-color:transparent;border:none;padding:.15rem;width:min-content;border-radius:4px;color:inherit;cursor:pointer;display:flex;gap:.25rem;align-items:center;&:hover{background-color:var(--colour-grey-100)}&.active{background-color:var(--colour-accent-200)}}.text-button{--hover: var(--hover-colour, var(--colour-grey-100));--pressed: var(--pressed-colour, var(--colour-grey-200));background-color:transparent;border:none;padding:.15rem .25rem;font-family:inherit;font-size:inherit;font-variation-settings:"GRAD" 100;font-weight:500;border-radius:4px;display:flex;align-items:center;gap:.25rem;color:inherit;cursor:pointer;transition:background-color 40ms var(--easing-subtle-out);&:hover{background-color:var(--hover)}&:active{background-color:var(--pressed)}}.primary-button,.secondary-button{height:2rem;padding:0 .75rem;background-color:var(--colour-accent-200);border:0;border-radius:10000px;color:var(--colour-grey-900);font-family:inherit;font-size:.85rem;font-weight:450;cursor:pointer;&.primary-button{background-color:var(--colour-accent-100);&:hover{background-color:var(--colour-accent-200)}}&.secondary-button{background-color:var(--colour-grey-100);&:hover{background-color:var(--colour-grey-200)}}&:disabled{background-color:var(--colour-grey-100);color:var(--colour-grey-500);cursor:not-allowed;&:hover{background-color:var(--colour-grey-100)}}}.button-row{display:flex;justify-content:space-between;gap:.5rem}dialog.fancy-dialog{position:fixed;z-index:10;border:none;background-color:transparent;width:100%;height:100%;padding:1rem;&::backdrop{display:none}}dialog.fancy-dialog>.innards{position:fixed;inset:0;width:max-content;height:max-content;margin:auto;z-index:10;border-radius:6px;box-shadow:0 4px 8px #0000001a;background-color:#fff}.dialog-scrim{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000040;z-index:5}label.form-field{display:flex;flex-direction:column;gap:.25rem;--text-margin: .5rem;margin:.5rem 0;+label.form-field{margin-top:1rem}>span{font-weight:450;font-size:.85rem;font-variation-settings:"GRAD" 100;margin:0 var(--text-margin);margin-bottom:.1rem;line-height:1.5}&:has([required])>span:after{content:" *";color:var(--colour-red-600)}p{font-size:.8rem;margin:0 var(--text-margin);color:var(--colour-grey-700);line-height:1.5}input{padding:.5rem;font-family:inherit;font-size:.9rem;background-color:var(--colour-grey-50);border:1px solid var(--colour-grey-200);border-radius:6px;&:focus-visible{border-color:var(--colour-accent-300);outline:3px solid var(--colour-accent-200)}&:disabled{background-color:var(--colour-grey-100);border-color:var(--colour-grey-300);color:var(--colour-grey-950);cursor:not-allowed;background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E")}}&:has(>input[type=checkbox]){display:grid;grid-template-columns:auto 1fr;align-items:center;>input{grid-column:1}>.label{grid-column:2;grid-row:1;margin:0}>.flavour{grid-column:2;grid-row:2;margin:0}}}.popover-menu{--backdrop: 0;position:fixed;top:0;left:0;transform:translate(var(--x)) translateY(var(--y));&.anchor-right{transform:translate(calc(var(--x) - 100%)) translateY(var(--y))}margin:0;padding:0;border:0;background-color:transparent;overflow:visible;perspective:75rem;>div.innards{position:relative;z-index:1;background-color:#fff;border:1px solid var(--colour-grey-200);border-radius:6px;box-shadow:0 2px 8px var(--colour-grey-200);transform-origin:top left;.anchor-right &{transform-origin:top right}}>div.innards ul{list-style:none;margin:0;width:max-content;padding:.25rem;display:grid}&::backdrop{opacity:0}div.scrim{position:fixed;top:calc(var(--y) * -1);left:calc(var(--x) * -1);z-index:0;background-color:#00000040;width:100vw;height:100vh}}.menu-item>button{padding:.375rem 1rem .375rem .375rem;border-radius:4px;width:100%;background-color:transparent;border:none;display:flex;align-items:center;gap:.375rem;font:inherit;font-size:.85rem;font-variation-settings:"GRAD" 100;font-weight:400;color:var(--colour-grey-800);cursor:pointer;svg{width:16px;height:16px}&.destructive{color:var(--colour-red-700);&:hover{color:var(--colour-red-800)}}&:hover{background-color:var(--colour-grey-50);color:var(--colour-grey-950)}&:active{background-color:var(--colour-grey-100)}}.message-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));grid-template-rows:auto 1fr auto;justify-content:center;max-height:100vh;height:100vh;gap:0 .5rem;container-type:inline-size;>ul.messages{grid-column:1 / -1;padding:.5rem 0;margin:0;list-style:none;display:grid;grid-template-columns:subgrid;grid-template-rows:1fr;grid-auto-rows:max-content;font-size:.9rem;overflow-y:auto;overflow-x:hidden;row-gap:.25rem;>li{display:grid;grid-template-columns:subgrid;align-items:baseline;grid-column:1 / -1;padding:.125rem .75rem;@container (width < 42rem){display:flex;flex-direction:column;padding:.25rem .75rem;span{line-height:1.2}}::selection{background-color:var(--selection);color:#fff}div.left-bit{display:inline-flex;gap:.25rem;align-items:baseline;grid-column:1}span.name{display:inline;align-items:baseline;gap:.25rem;justify-self:end;font-weight:500;font-variation-settings:"GRAD" 100;color:var(--colour);width:max-content;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;&.squish{font-stretch:ultra-condensed;&:hover{position:relative;z-index:1;width:1000%;overflow:visible;padding-right:.25rem;background-color:#fff;outline:1px solid var(--colour-grey-100);font-stretch:normal}}}span.action{display:block;overflow:visible;line-height:0;height:0;margin-top:.6rem;align-self:center;font-size:2rem;font-weight:300;font-variation-settings:"GRAD" -50;color:var(--colour-grey-700);user-select:none}span.name.gone{font-variation-settings:"GRAD" 0;font-weight:400;color:color-mix(in srgb,var(--colour) 40%,var(--colour-grey-700));>svg{align-self:center;color:var(--colour-grey-700)}li:hover &{color:var(--colour)}}time{font-size:.7rem;font-variation-settings:"GRAD" 100;font-variant-numeric:tabular-nums;color:var(--colour-grey-500);margin-right:auto}>p{grid-column:2 / -2;margin:0;line-height:1.6;color:var(--colour-grey-950)}&:hover{background-color:color-mix(in srgb,var(--hover),transparent 50%)}}}&.comfy{ul.messages>li{grid-column:2 / -2;padding:0 1rem;margin:0 -1rem;border-radius:4px;display:flex;flex-direction:column;.left-bit{flex-direction:row-reverse;gap:.5rem}}}}.message-input{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;gap:0;height:3.75rem;margin-top:0;padding:.5rem 0 .75rem;color:var(--colour-grey-900);border-top:1px solid transparent;--radius: 8px;--bg: var(--colour-grey-50);--border: 1px solid var(--colour-grey-200);@container (width < 52rem){display:flex;margin:0 .75rem;.input{flex:1}}&.scrolled{border-color:var(--colour-grey-100)}.input{position:relative;grid-column:2 / -2;background-color:var(--bg);border:var(--border);border-left:none;border-right:none}.command-ghost{position:absolute;top:0;bottom:0;height:max-content;margin:auto;display:flex;align-items:center;font-size:.85rem;padding:.25rem .2rem;background-color:var(--colour-accent-200);border-radius:4px;z-index:0;color:transparent;user-select:none;pointer-events:none}input{position:relative;z-index:1;height:100%;width:100%;font:inherit;font-size:.85rem;background-color:transparent;border:none;padding-left:.25rem;&:focus-visible{outline:none}}.input,.prefix,.suffix{position:relative}button{font:inherit;&:hover{background-color:var(--colour-grey-100);cursor:pointer}}&:has(:focus-visible){--width: 4px;--border2: var(--width) solid var(--colour-accent-200);--radius2: calc(var(--radius) + var(--width) - 1px);--border: 1px solid var(--colour-accent-300);.input:before,.prefix:before,.suffix:before{content:"";position:absolute;top:calc(var(--width) * -1);left:calc(var(--width) * -1);right:calc(var(--width) * -1);bottom:calc(var(--width) * -1);border:var(--border2);pointer-events:none;z-index:-1}.input:before{border-right:none;border-left:none;border-radius:0}.prefix:before{border-right:none;border-radius:var(--radius2) 0 0 var(--radius2)}.suffix:before{border-left:none;border-radius:0 var(--radius2) var(--radius2)0}}.prefix,.suffix{color:var(--colour-grey-800)}.prefix{justify-self:end;height:100%;padding-left:.25rem;border-radius:var(--radius) 0 0 var(--radius);background-color:var(--bg);border:var(--border);border-right:none;display:flex;width:auto;aspect-ratio:1 / 1;svg{margin:auto}}.suffix{justify-self:start;height:100%;padding-left:.25rem;border-radius:0 var(--radius) var(--radius) 0;background-color:var(--bg);border:var(--border);border-left:none;display:flex;width:auto;aspect-ratio:1 / 1;svg{margin:auto}}}.input-error{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;margin:0;align-items:center;background-color:var(--colour-red-100);font-variation-settings:"GRAD" 100;font-size:.8rem;font-weight:500;color:var(--colour-red-900);span{grid-column:2 / -3;padding:.25rem 0}svg{width:10px;height:10px;justify-self:end}button{background-color:transparent;border:none;font:inherit;font-weight:400;color:inherit;cursor:pointer;margin:0 -1rem;padding:0 1rem;height:100%;width:max-content;justify-self:end;display:flex;gap:.25rem;align-items:center;svg{width:12px;height:12px}&:hover{background-color:var(--colour-red-200)}}}.channel-header{grid-column:1 / -1;border-bottom:1px solid var(--colour-grey-100);display:flex;gap:.5rem;padding:.725rem 1rem;align-items:center;.text{display:flex;align-items:baseline;gap:.5rem}h1{font-size:.95rem;margin:0;font-weight:450;font-variation-settings:"GRAD" 100;color:var(--colour-grey-950)}p{margin:0;font-size:.825rem;color:var(--colour-grey-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-button{svg{width:16px;height:16px}&:first-of-type{margin-left:auto}}}.message-list-start{display:grid;grid-template-columns:subgrid;grid-auto-rows:max-content;place-content:end start;grid-column:1 / -1;height:100%;padding-bottom:1rem;padding-top:8rem;>*{grid-column:2 / -2}b{font-size:1rem;font-weight:500;font-variation-settings:"GRAD" 100;color:var(--colour-grey-800)}.subtitle{font-size:.85rem;margin-top:.5rem;color:var(--colour-grey-700)}.chathistory-warning{color:var(--colour-weezer-800);font-weight:400;font-variation-settings:"GRAD" 100;font-size:.8rem;display:flex;align-items:center;gap:.25rem;margin:0;svg{width:8px;height:8px}}}.messages.skeleton{li{span,p{display:inline;width:max-content;max-width:100%;background-color:var(--colour-grey-100);color:transparent!important}}}.date-sep{margin:0 1rem 0 .5rem;grid-column:1 / -1;display:flex;align-items:center;gap:.5rem;white-space:nowrap;font-size:.75rem;font-variation-settings:"GRAD" 100;color:var(--colour-grey-600);&:before{display:block;content:"";height:1px;width:100%;background-color:var(--colour-grey-200)}}.unread-sep{margin:0 1rem 0 .5rem;grid-column:1 / -1;display:flex;align-items:center;user-select:none;span{background-color:var(--colour-accent-700);padding:.1rem .25rem;margin:-.25rem 0;border-radius:1px;color:var(--colour-accent-50);font-variation-settings:"GRAD" 150;font-weight:400;font-size:.75rem;white-space:nowrap}&:before{display:block;content:"";height:1px;width:100%;background-color:var(--colour-accent-600)}}.unread-banner{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;background-color:var(--colour-accent-100);padding:.25rem;font-size:.8rem;font-weight:500;color:var(--colour-grey-700);.number{justify-self:end;display:flex;align-items:center;place-content:center;height:100%;min-width:1rem;padding:0 .15rem;font-variation-settings:"GRAD" 100;border-radius:2px;background-color:var(--colour-accent-600);color:#fff}}.members-panel{display:flex}article.settings{padding-bottom:2rem;container-type:inline-size;display:grid;grid-template-columns:0 minmax(1fr,56rem) 0;gap:0 .5rem;h1{text-align:center;margin-top:.4em;margin-bottom:.5em;color:var(--colour-grey-900);grid-column:1 / span 3}hgroup{grid-column:1 / span 3;display:flex;flex-direction:column;align-items:center;margin:6vw auto 8vw;width:max-content;h1{font-size:12vw;font-weight:100;font-style:italic;margin:0;text-align:center;line-height:.7;user-select:none}b{z-index:1;font-weight:900;font-variation-settings:"GRAD" 100}}h2{font-size:6vw;font-weight:200;font-style:italic;width:max-content;color:var(--colour-grey-200);margin:1rem;margin-bottom:-.4em;user-select:none;z-index:-1;letter-spacing:-.025em;grid-column:1 / span 3}div.sep{display:flex;white-space:nowrap;align-items:center;gap:1rem;letter-spacing:.5rem;user-select:none;&:before,&:after{content:"";width:100%;height:1px;background-color:var(--colour-grey-200)}grid-column:1 / span 3}div.panel{grid-column:2;position:relative;z-index:1;max-width:56rem;width:100%;background-color:#fff;border-radius:6px;padding:.5rem;border:1px solid var(--colour-grey-200);display:grid;grid-template-columns:1fr 1fr;gap:1rem;@container (max-width: 48rem){grid-template-columns:1fr}p.intro{grid-row:1;grid-column:1 / -1;margin:0;color:var(--colour-grey-700)}}section{grid-column:1 / span 3;display:grid;grid-template-columns:subgrid}table{grid-column:2;margin:auto;position:relative;z-index:1;text-align:left;border-radius:4px;border:1px solid var(--colour-grey-200);border-spacing:0;font-size:.9rem;th,td{padding:.5rem}th{font-weight:500;font-variation-settings:"GRAD" 100}thead{background-color:var(--colour-grey-100);border-bottom:1px solid var(--colour-grey-200);font-style:italic}}fieldset{legend{font-weight:450;padding:0;margin-bottom:.5rem;font-size:.95rem;font-variation-settings:"GRAD" 100}}}fieldset.colour-select{border:none;padding:0;margin:0;width:max-content;display:flex;gap:2px;flex-wrap:wrap;label{position:relative;background-color:var(--colour);overflow:hidden;height:2.5rem;aspect-ratio:1 / 1;color:transparent;user-select:none;cursor:pointer;input{position:absolute;clip:rect(0,0,0,0)}&:has(:focus-visible){outline:4px solid var(--colour-accent-400)}&:not(:has(:checked)):hover{background-color:var(--hover)}&:has(:checked){z-index:1;border-radius:100%}&:has(:checked):after{position:absolute;inset:0;height:1rem;aspect-ratio:1 / 1;border-radius:100%;content:"";margin:auto;background-color:#fff}&:first-of-type:not(:has(:checked)){border-radius:6px 0 0 6px}&:last-of-type:not(:has(:checked)){border-radius:0 6px 6px 0}}}fieldset.comfy-compact-dichotomy{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;margin-right:1rem;gap:1rem;label{cursor:pointer;&:hover:not(:has(:checked)) .preview{border-color:var(--colour-grey-300)}}input{position:absolute;clip:rect(0,0,0,0);margin:0}figure{margin:0}figcaption{font-size:.85rem;font-weight:500;margin:.25rem 0;text-align:center;color:var(--colour-grey-700);font-style:italic}.preview{display:flex;gap:.25rem;width:100%;height:4rem;padding:.75rem;border-radius:4px;border:4px solid var(--colour-grey-200);font-size:.85rem;user-select:none;.name{font-variation-settings:"GRAD" 100;font-weight:500;color:var(--colour-accent-700)}&.compact{align-items:center;justify-content:center}&.comfy{flex-direction:column;justify-content:center}p{margin:0}}:has(:checked){figcaption{font-variation-settings:"GRAD" 100;color:var(--colour-grey-900)}.preview{border-color:var(--colour-accent-400)}}:has(:focus-visible) .preview{outline:4px solid var(--colour-accent-200)}}.join-channel{display:grid;grid-auto-rows:max-content;section{--max-width: 36rem;padding:2rem calc((100% - var(--max-width)) / 2)}section:first-of-type{border-bottom:1px solid var(--colour-grey-100)}h2{font-size:1.25rem;font-weight:400;margin-top:1.5rem;margin-bottom:0}p,form{margin-top:.5rem}form{display:flex;flex-direction:column;margin:0 auto;margin-top:2rem}}.network-info{--width: 56rem;display:grid;grid-auto-rows:max-content;grid-template-columns:2fr 1fr;width:100%;padding:0 1rem 4rem;gap:1.5rem;margin:auto;padding:0 max(1rem,calc((100% - var(--width)) / 2));@media screen and (max-width: 56rem){grid-template-columns:1fr;*{grid-column:1!important}.right{grid-row:2}.left{margin-top:4rem;grid-row:3}}.left{grid-column:1}.right{grid-column:2}hgroup{grid-column:1 / -1;display:flex;flex-direction:column;gap:.5rem;height:12rem;align-items:center;justify-content:center;position:relative;h1{font-weight:100;font-size:clamp(2rem,6vw,4rem);font-stretch:ultra-expanded;font-variation-settings:"GRAD" 50;text-align:center;color:var(--colour-grey-700);grid-column:1 / -1;margin:0}.status{text-align:center;margin:0;font-size:1rem;font-weight:500;color:var(--colour-grey-500);font-size:clamp(.75rem,1.75vw,1rem);&.connected{color:var(--colour-ectoplasm-700)}}}.motd{grid-column:1 / span 2;grid-row:2;position:relative;margin-top:-1.1rem;pre{background-color:var(--colour-grey-50);margin-top:.75rem;border-radius:8px;padding:.75rem;white-space:pre-line}button{position:absolute;left:0;right:0;bottom:-2.5rem;margin:auto;width:max-content}&:not(.expanded){button{bottom:1rem}pre{max-height:12rem;overflow:hidden;mask-image:linear-gradient(to bottom,black,transparent 90%)}}&.expanded pre{margin-bottom:4rem}}}