:root{--small-gap: .5rem;--regular-gap: 1rem;--regular-text-color: #213547;--trivial-text-color: #6B7E8D;--light-text-color: #979ca0;--hover-bg-color: #f0f0f0;--active-bg-color: #e9e9e9;--danger-color: rgb(195, 58, 58);--comiru-accent-color: #16bfb7;--comiru-accent-color-hover: #00a194;--header-height: 3.5rem;--item-height: 4.5rem;--item-height-sm: 3rem;--z-index-loading: 700;--z-index-toasts: 600;--z-index-dialog: 500;--z-index-drawer: 400;--z-index-floating-button: 300;box-sizing:border-box;margin:0;padding:0;overscroll-behavior:none;font-family:system-ui,Avenir Next,Helvetica Neue,Arial,sans-serif;font-size:16px;font-synthesis:none;line-height:1.5;text-rendering:optimizeLegibility;color:var(--regular-text-color)}@media (max-width: 48rem){:root body{font-size:.875rem}}:where(:not(:root),*:before,*:after){box-sizing:inherit}body{margin:0;min-width:320px;height:100svh;overflow:hidden;overscroll-behavior:none}:where(a){font-weight:500;color:#006fff;text-decoration:inherit}:where(a).is-current{color:var(--regular-text-color);cursor:default}:where(button){display:inline-flex;padding:0;font-family:inherit;font-size:inherit;font-weight:inherit;background-color:transparent;border:0;cursor:pointer;transition:border-color .25s;outline:0}:where(input,textarea){font-family:inherit;font-size:inherit;font-weight:300;background-color:#fff;border:0;outline:0}:where(h1){font-size:2rem;line-height:1.125}:where(h2){margin:1.5rem var(--regular-gap) 1rem;font-size:inherit}:where(h2) :where(~p){margin-block:.5em;margin-inline:var(--regular-gap);font-size:.875rem;color:var(--trivial-text-color)}:where(ul,ol,dl,dt,dd){margin:0;padding:0;list-style:none}.Avatar{aspect-ratio:1;display:inline-flex;width:3rem;overflow:hidden;background-color:#d9d9d9;border-radius:50%}.Avatar.group{background-color:gold}.Avatar.small{width:2rem}.Avatar.large{width:4rem}.Button{cursor:pointer}.Button.link{color:#006fff}.Button.text{color:inherit}.Button.disabled,.Button:disabled{cursor:not-allowed;opacity:.5}.Ellipsis{display:inline-block;vertical-align:bottom;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}Header{grid-area:header;display:grid;grid-template-columns:1fr 2fr 1fr;grid-template-areas:"back title next";justify-content:space-between;align-items:center;width:100%;height:var(--header-height);background-color:#fff;border-block-end:1px solid #ecebeb}Header>.Button{display:flex;align-items:center;height:100%;padding-inline:var(--regular-gap)}Header>.Button:first-child{grid-area:back;margin-inline-end:auto}Header h1{grid-area:title;font-size:inherit;font-weight:500;text-align:center}Header>.Button:last-of-type:not(:first-child){grid-area:next;margin-inline-start:auto}.Loading{position:fixed;z-index:var(--z-index-loading);top:50%;right:50%;bottom:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px}.Drawer{position:fixed;z-index:var(--z-index-drawer);width:100%;height:100%;overflow:hidden;pointer-events:none}.Drawer .DrawerContent{position:absolute;transform:translate(100%);width:calc(1px + 100%);height:100%;pointer-events:all;transition:.3s all ease-out;background-color:#fff;border-inline-start:1px solid #ececec}.Drawer .DrawerContent.is-open{transform:translate(0);inset-inline-start:0}@media (max-width: 40rem){.Drawer .DrawerContent.is-open{transform:translate(-1px)}}body.swiping .DrawerContent{transition-duration:0s!important}.Dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-index-dialog);display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;overflow:hidden;background-color:#00000060;border:0;transition:.125s all ease-out}.Dialog:not([open]){opacity:0;pointer-events:none}.Dialog .DialogContent{position:absolute;inset:50% auto auto 50%;max-width:100vw;max-height:100vh;width:fit-content;height:fit-content;transform:translate(-50%,-50%);background-color:#fff;transition:.125s transform linear;transition-delay:.125s}.MessageFile{--min-size: 5rem;--size: 7rem;position:relative;display:flex;justify-content:center;min-width:calc(var(--min-size) + 2px);min-height:calc(var(--min-size) + 2px);line-height:0;border:1px solid #ddd;border-radius:.5rem;overflow:hidden}.MessageFile .previewing{position:absolute;width:100%;height:100%;background-color:#f5f5f5}.MessageFile .error{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#e53935;font-size:.75rem}.MessageFile img.preview{position:absolute;display:block;min-width:var(--min-size);min-height:var(--min-size);object-fit:cover;border-radius:.5rem;cursor:pointer}.MessageFile:has(img.portrait){max-height:calc(var(--size) + 2px)}.MessageFile:has(img.landscape){max-width:calc(var(--size) + 2px)}.MessageFile img.landscape{max-width:var(--size)}.MessageFile img.portrait{max-height:var(--size)}.MessageFile .Dialog .DialogContent{background-color:transparent}.MessageFile .Dialog svg{width:3rem}.MessageFile .Dialog img{display:block;max-width:100svw;max-height:100svh;object-fit:contain}.MessageFile .Dialog img.landscape{max-width:90svw;max-height:100svh}.MessageFile .Dialog img.portrait{max-width:100svw;max-height:90svh}.SelectMembers label{display:flex;padding-inline:var(--regular-gap);width:100%;height:var(--item-height);align-items:center;font-weight:500;cursor:pointer}.SelectMembers label:hover{background-color:var(--hover-bg-color)}.SelectMembers label>.Button:only-child{display:inherit;align-items:inherit;width:100%;height:100%;font-weight:inherit}.SelectMembers label>.Button:only-child:hover{text-decoration:none}.SelectMembers label .Avatar{margin-inline-end:.5rem}.SelectMembers label .Ellipsis{max-width:12em}@media (max-width: 40rem){.SelectMembers label .Ellipsis{max-width:18em}}.SelectMembers label svg{width:1.5rem;margin-inline-start:auto}.SelectMembers label input{flex:1;padding-inline:.5rem;height:2rem;border:1px solid #D9D9D9;border-radius:2px;outline:0}.SelectMembers label input::placeholder{color:#bfbfbf}.SelectMembers ul{margin:0;padding:0;list-style:none}.SelectMembers ul label:hover{background-color:var(--hover-bg-color)}.SelectMembers ul label svg{width:1.5rem;margin-inline-start:auto}.SelectMembers h2.selected{position:sticky;inset-block-start:0;margin-block:1rem .5rem;padding-block-start:.5rem;background-color:#fff}.SelectMembers ul.selected{position:sticky;inset-block-start:2rem;display:flex;padding:.5rem var(--regular-gap) 1rem;width:100%;overflow-x:auto;background-color:#fff}@media (max-width: 40rem){.SelectMembers ul.selected{width:100vw}}.SelectMembers .selected li{position:relative;display:flex;align-items:center;margin-inline:.5rem;padding-block-start:.25rem;cursor:pointer}.SelectMembers .selected li:first-child{margin-inline-start:0}.SelectMembers .selected li.is-me{cursor:default}.SelectMembers .selected .Avatar{display:flex;width:2.5rem;height:2.5rem}.SelectMembers .selected svg{position:absolute;top:0;right:0;bottom:100%;left:100%;margin-inline-start:-.5rem;width:.875rem}.SelectMembers .selected+h2{margin-block-start:.5rem}.SelectMembers .placeholder{display:flex;justify-content:center;align-items:center;margin-block:5rem}.SelectMembers .placeholder p{font-size:.875rem;color:var(--trivial-text-color)}.Button.UpdateRoom .Avatar{width:2.5rem}.Drawer:is(.UpdateRoom,.Members){inset:0 0 auto auto;width:20rem}@media (max-width: 40rem){.Drawer:is(.UpdateRoom,.Members){width:100%}}.Drawer:is(.UpdateRoom,.Members) .DrawerContent{display:grid;grid-template-rows:var(--header-height) 1fr;grid-template-areas:"header" "form";height:100svh}.Drawer:is(.UpdateRoom,.Members) .DrawerContent Header{grid-area:header}.Drawer:is(.UpdateRoom,.Members) .DrawerContent form{grid-area:form;overflow-y:auto;max-height:100%}.Drawer:is(.UpdateRoom,.Members) .DrawerContent label{display:flex;padding-inline:var(--regular-gap);width:100%;height:var(--item-height);align-items:center;font-weight:500;cursor:pointer}.Drawer:is(.UpdateRoom,.Members) .DrawerContent label:hover{background-color:var(--hover-bg-color)}.Drawer:is(.UpdateRoom,.Members) .DrawerContent label>.Button:only-child{display:inherit;align-items:inherit;width:100%;height:100%;font-weight:inherit}.Drawer:is(.UpdateRoom,.Members) .DrawerContent label>.Button:only-child:hover{text-decoration:none}.Drawer:is(.UpdateRoom,.Members) .DrawerContent label .Avatar{margin-inline-end:.5rem}.Drawer:is(.UpdateRoom,.Members) .DrawerContent label .Ellipsis{max-width:12em}@media (max-width: 40rem){.Drawer:is(.UpdateRoom,.Members) .DrawerContent label .Ellipsis{max-width:18em}}.Drawer:is(.UpdateRoom,.Members) .DrawerContent label svg{width:1.5rem;margin-inline-start:auto}.Drawer:is(.UpdateRoom,.Members) .DrawerContent label input{flex:1;padding-inline:.5rem;height:2rem;border:1px solid #D9D9D9;border-radius:2px;outline:0}.Drawer:is(.UpdateRoom,.Members) .DrawerContent label input::placeholder{color:#bfbfbf}.ToggleMembers{justify-content:center}.Talkroom>.DrawerContent>Header{grid-area:header;justify-content:center}@media not (max-width: 40rem){.Talkroom>.DrawerContent>Header>.Button:first-child{display:none}}.Talkroom>.DrawerContent>Header .Button:first-child>svg{width:.5rem}.Talkroom>.DrawerContent>Header h1{margin:0;font-size:1rem}.Talkroom>.DrawerContent>Header h1 .Ellipsis{width:auto;max-width:14em}@media (max-width: 40rem){.Talkroom>.DrawerContent>Header h1 .Ellipsis{max-width:12em}}.Talkroom>.DrawerContent .vl-overlay{top:var(--header-height);height:calc(100% - var(--header-height))}.Messages{position:relative;padding:.5rem .75rem 0 var(--regular-gap);overflow-y:auto;font-size:.875rem;--bubble-min-height: 2rem}.Messages>time.date{position:sticky;inset-block-start:0;z-index:10;display:block;margin:2rem auto .5rem;padding:.25rem .5rem;width:fit-content;font-size:.75rem;text-align:center;background-color:#cdcdcd;border-radius:1rem;color:#ffffffe6}.Messages>time.date:first-child{margin-block-start:0}.Messages>time.date.scrolled-past{position:static}.Messages>dl{position:relative;display:flex;gap:.5rem;margin:0 0 1rem;width:100%}.Messages>dl:last-child{margin-block-end:.5rem}.Messages>dl.is-me{justify-self:flex-end}.Messages>dl.is-me dl{justify-content:flex-end}.Messages>dl.is-me dt:has(time){order:1}.Messages>dl.is-me>dd{justify-self:flex-end;margin-inline-start:auto}.Messages>dl.is-me>dd dd{order:2;background-color:#ecebeb;border-color:transparent}.Messages>dl dl{display:flex;gap:.5rem}.Messages>dl dl:not(:last-child){margin-block-end:.5rem}.Messages>dl dt:has(time){order:2;display:flex;align-items:center;align-self:flex-end;height:var(--bubble-min-height);font-size:.75rem;color:var(--light-text-color)}.Messages>dl>dd dd{order:1;margin:0;padding-block:5px;padding-inline:1rem;max-width:32rem;min-width:3rem;min-height:var(--bubble-min-height);line-height:20px;word-break:break-word;white-space:pre-wrap;border:1px solid #ecebeb;border-radius:1rem}.Messages .Ellipsis.author{position:absolute;inset:auto 0 100% 2.5rem;margin-inline-start:.25rem;max-width:12em;font-size:.75rem;line-height:2;color:var(--light-text-color)}.Messages .Avatar{display:flex;width:var(--bubble-min-height)}.Messages .load-more{position:absolute;inset:var(--regular-gap) auto auto 50%;z-index:20;transform:translate(-50%);padding:.5rem var(--regular-gap);font-size:.75rem;background-color:#ffffff80;border:#ecebeb;border-radius:1rem;color:var(--trivial-text-color);box-shadow:0 1px #ecebeb,0 5px 10px #dcded166}.Messages dd p{margin:0}.Messages dd:has(ul:only-child){padding:1px;border-radius:.5rem}.Messages dd ul{display:flex;flex-wrap:wrap;gap:.5rem}.Messages dd ul:not(:only-child){margin-block-start:.5rem}form.Input{position:relative;grid-area:input;display:flex;gap:var(--small-gap);align-items:flex-end;padding:.5rem var(--regular-gap);max-height:calc((100svh - var(--header-height)) * .5);min-height:var(--header-height);line-height:1;border-block-start:1px solid #ecebeb}form.Input .Draft{flex:1;display:flex;padding:0;max-height:calc((100svh - var(--header-height)) * .5 - 1rem);border:1px solid #ecebeb;border-radius:1.25rem;outline:0}form.Input .Draft textarea{resize:none;padding:.5rem 1rem;width:100%;height:calc(2.25rem - 2px);max-height:calc((100svh - var(--header-height)) * .5 - 1rem);font-family:inherit;font-size:.875rem;line-height:1.125rem;background-color:transparent;border:0;outline:0}form.Input .Draft textarea::placeholder{color:var(--light-text-color)}form.Input .Draft textarea:has(+ul){max-height:calc((100svh - var(--header-height)) * .5 - 1rem - 5rem);margin-block-end:5rem}form.Input .Draft ul{position:absolute;inset:auto auto var(--small-gap) 4rem;display:flex;gap:var(--small-gap);padding:var(--small-gap);height:5rem}form.Input .Draft ul li{position:relative;width:4rem;height:4rem;border:1px solid #ecebeb;border-radius:.5rem}form.Input .Draft ul img{width:100%;height:100%;object-fit:cover;border-radius:.5rem}form.Input .Draft ul Button.delete{position:absolute;inset:-.5rem -.5rem auto auto;display:flex;align-items:center;justify-content:center;padding:.5rem;width:1rem;height:1rem;background-color:#fff;border:2px solid #fff;border-radius:50%}form.Input .Draft ul Button.delete:hover svg.delete{opacity:1}form.Input .Draft ul Button.delete:has(svg.loading){background-color:#fff;border-radius:50%;opacity:1}form.Input .Draft ul Button.delete:has(svg.loading) svg.delete{opacity:0}form.Input .Draft ul Button.delete:has(svg.loading):hover svg.delete{opacity:1}form.Input .Draft ul Button.delete:has(svg.loading):hover svg.loading{opacity:0}form.Input .Draft ul svg{position:absolute;z-index:10;top:0;right:0;bottom:0;left:0;width:1rem}form.Input .Draft ul svg.delete{opacity:.8}form.Input .Draft ul svg.loading{z-index:20}form.Input .Button:not(.delete):not(.loading){justify-content:center;align-items:center;display:flex;width:2rem;height:2.25rem;aspect-ratio:1}form.Input svg{width:1.5rem}.Talkroom.Drawer>.DrawerContent{display:grid;grid-template-areas:"header" "messages" "input";grid-template-rows:var(--header-height) 1fr auto;height:100%;max-height:100svh;background-color:#fcfcfc}.Talkroom.Drawer>.DrawerContent Header{grid-area:header}.Talkroom.Drawer>.DrawerContent .Messages{grid-area:messages}.Talkroom.Drawer>.DrawerContent .Input{grid-area:input}.Button.CreateRoom{position:fixed;z-index:var(--z-index-floating-button);inset-inline-start:20rem;inset-block-end:0;transform:translate(-100%);display:flex;padding-inline:1rem;height:var(--item-height)}@media (max-width: 40rem){.Button.CreateRoom{inset-inline-start:100%;padding-block:1rem}}.Button.CreateRoom svg{width:2.5rem;aspect-ratio:1}.Drawer.CreateRoom{width:20rem}@media (max-width: 40rem){.Drawer.CreateRoom{width:100%}}.Drawer.CreateRoom .DrawerContent{display:grid;grid-template-rows:var(--header-height) 1fr;grid-template-areas:"header" "form";height:100svh}.Drawer.CreateRoom .DrawerContent Header{grid-area:header}.Drawer.CreateRoom .DrawerContent Header .Button:first-child svg{width:.5rem}.Drawer.CreateRoom .DrawerContent form{grid-area:form;overflow-y:auto;max-height:100%}.Drawer.CreateRoom .DrawerContent .contacts-placeholder{padding-inline:var(--regular-gap);font-size:.875rem;text-align:center;color:var(--light-text-color)}.Drawer.CreateRoom .DrawerContent label{display:flex;padding-inline:var(--regular-gap);width:100%;height:var(--item-height);align-items:center;font-weight:500;cursor:pointer}.Drawer.CreateRoom .DrawerContent label:has(.Button:only-child){height:var(--item-height-sm)}.Drawer.CreateRoom .DrawerContent label:hover{background-color:var(--hover-bg-color)}.Drawer.CreateRoom .DrawerContent label>.Button:only-child{display:inherit;align-items:inherit;width:100%;height:100%;font-weight:inherit}.Drawer.CreateRoom .DrawerContent label>.Button:only-child:hover{text-decoration:none}.Drawer.CreateRoom .DrawerContent label .Avatar{margin-inline-end:.5rem}.Drawer.CreateRoom .DrawerContent label .Ellipsis{max-width:12em}@media (max-width: 40rem){.Drawer.CreateRoom .DrawerContent label .Ellipsis{max-width:18em}}.Drawer.CreateRoom .DrawerContent label svg{width:1.5rem;margin-inline-start:auto}.Drawer.CreateRoom .DrawerContent label input{flex:1;padding-inline:.5rem;height:2rem;border:1px solid #D9D9D9;border-radius:2px;outline:0}.Drawer.CreateRoom .DrawerContent label input::placeholder{color:#bfbfbf}.Drawer.CreateRoom .DrawerContent form.add-contact label{position:relative}.Drawer.CreateRoom .DrawerContent form.add-contact input{padding-inline-end:2rem}.Drawer.CreateRoom .DrawerContent form.add-contact Button.add-contact{position:absolute;inset-inline-end:1.5rem;width:1.125rem;color:#888}#app>main{display:grid;grid-template-rows:var(--header-height) 1fr;max-height:100svh}@media not (max-width: 40rem){#app>main{grid-template-columns:20rem 1fr;grid-template-areas:"header    talkroom" "talkrooms talkroom"}}@media (max-width: 40rem){#app>main{grid-template-areas:"header" "talkrooms";grid-template-columns:100vw 0}}#app>main>header{grid-area:header}#app>main>header h1{grid-area:title}#app>main .Talkrooms{grid-area:talkrooms}#app>main .Talkroom{grid-area:talkroom}@media not (max-width: 40rem){#app>main .Talkroom{background-color:#fcfcfc}}.Talkrooms{position:relative}.Talkrooms ul{margin:0;padding:0;list-style:none;overflow-y:auto;max-height:calc(100svh - var(--header-height))}.Talkrooms li>.Button{display:grid;grid-template-columns:3rem 1fr 2.5rem;grid-template-areas:"avatar name    time" "avatar preview unread";align-content:center;padding-inline:var(--regular-gap);height:var(--item-height)}.Talkrooms li>.Button:hover{background-color:var(--hover-bg-color)}.Talkrooms li>.Button.is-open{background-color:var(--active-bg-color)}.Talkrooms li>.Button .Avatar{grid-area:avatar;margin-inline-end:var(--regular-gap)}.Talkrooms li>.Button b.room-name{grid-area:name;display:flex;margin-inline-start:var(--regular-gap);font-weight:500}@media (max-width: 40rem){.Talkrooms li>.Button b.room-name .Ellipsis:last-child{max-width:calc(100vw - 10rem)}.Talkrooms li>.Button b.room-name .Ellipsis:not(:last-child){max-width:calc(100vw - 11rem)}}@media not (max-width: 40rem){.Talkrooms li>.Button b.room-name .Ellipsis:last-child{max-width:10rem}.Talkrooms li>.Button b.room-name .Ellipsis:not(:last-child){max-width:8rem}}.Talkrooms li>.Button time{grid-area:time;align-self:flex-start;width:max-content;margin-inline-start:auto;font-size:.625rem;font-weight:300;line-height:2;color:var(--light-text-color)}.Talkrooms li>.Button .preview{grid-area:preview;margin-inline-start:var(--regular-gap);font-size:.75rem;line-height:2;color:var(--trivial-text-color)}.Talkrooms li>.Button .file{font-weight:600}.Talkrooms li>.Button .unread{grid-area:unread;margin-inline-start:auto;display:flex;justify-content:center;align-items:center;padding:0 .5rem;min-width:1.5rem;height:1.5rem;font-size:.75rem;background-color:var(--comiru-accent-color);border-radius:1rem;color:#fff}.Talkroom.Drawer{border-inline-start:1px solid #ececec}@media not (max-width: 40rem){.Talkroom.Drawer{position:static!important;pointer-events:all;width:calc(100vw - 20rem)}.Talkroom.Drawer>.DrawerContent{transition:none}.Talkroom.Drawer>.DrawerContent.is-open{position:relative;transform:none;border-inline-start:0}}@media (max-width: 40rem){.Talkroom.Drawer{width:calc(100vw + 1px);margin-inline-start:-1px}}#app>main:has(.Login){display:flex;justify-content:center;align-items:center}.Login{top:0;right:0;bottom:0;left:0;display:flex;width:100vw;height:100vh;margin-block-start:-3rem;padding:var(--regular-gap);justify-content:center;align-items:center}@media (max-width: 40rem){.Login{flex-direction:column}}.Login input,.Login button{padding:0 var(--regular-gap);display:flex;justify-content:center;align-items:center;margin-block-end:var(--regular-gap);height:3rem;border:1px solid #e2dede;border-radius:.5rem;font-family:inherit;font-size:1.5rem;font-weight:200;outline:0;transition:.125s all ease-out}.Login input{padding-inline:1rem;max-width:20rem;width:80vw}.Login input:hover{border-color:#c9c7c7}.Login input:focus{border-color:var(--comiru-accent-color)}.Login button{margin-inline-start:.5rem;background-color:var(--comiru-accent-color);border-color:transparent;color:#fff}@media (max-width: 40rem){.Login button{margin-inline-start:0;max-width:20rem;width:80vw}}.Login button:hover{background-color:var(--comiru-accent-color-hover)}#app>main:has(h1.Error){display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;color:var(--trivial-text-color)}#app>main:has(h1.Error) h1{margin-block-end:.5rem;font-weight:2rem;font-weight:100}#app>main:has(h1.Error) p{font-size:.875rem;font-weight:200;color:var(--regular-text-color)}.Toasts{position:fixed;inset:0 0 auto auto;z-index:var(--z-index-toasts);margin:0;margin-block-start:var(--header-height);padding:1rem;max-width:24rem;width:90vw;font-size:.875rem;pointer-events:none;list-style:none;transition:.25s all ease-in-out}main:has(.DrawerContent:empty)~.Toasts{margin-block-start:0}@media (max-width: 40rem){main:has(.DrawerContent:empty)~.Toasts{margin-block-start:var(--header-height)}}.Toasts:hover li{background-color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}.Toasts li{position:relative;display:flex;justify-content:space-between;align-items:center;margin-block-end:.5rem;padding:.5rem 1em;width:100%;min-height:3.5rem;overflow:hidden;animation:slide-in .25s ease-in-out,slide-out .25s ease-in-out forwards,shrink .125s ease-in-out forwards;animation-delay:0s,var(--toast-duration),calc(var(--toast-duration) + .25s);pointer-events:all;background-color:#ffffff80;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(100,100,100,.125);border-radius:.25rem;box-shadow:0 0 1rem #0000001a;transition:all .125s ease-in-out}.Toasts li.duration-infinite{animation:slide-in .25s ease-in-out}.Toasts li.error{background-color:#c33a3a;border-color:transparent;color:#fff}.Toasts Button{opacity:.7}.Toasts Button:hover{opacity:1}.Toasts Button svg{width:1.25rem}.Toasts Button.confirm{margin-inline:auto .5rem;color:var(--comiru-accent-color)}.Toasts Button.cancel{color:var(--danger-color)}.Toasts li.error Button.close svg{width:1rem}.Toasts li.error Button.close svg circle{fill:#fff}.Toasts li.error Button.close svg path{stroke:#c33a3a}@keyframes slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slide-out{0%{transform:translate(0)}to{transform:translate(calc(100% + 3rem))}}@keyframes shrink{to{margin:0;height:0;min-height:0}}:where(#app){display:grid;grid-template-rows:0 1fr 0;grid-template-areas:"header" "main" "footer";min-height:100svh}:where(#app) :where(>header){grid-area:header}:where(#app) :where(>main){grid-area:main}:where(#app) :where(>footer){grid-area:footer}