:root{--growl-duration: .5s;--growl-height: 4.75em;--growl-padding: 0 1em}div#growls{--border: #f90;--dark: #222d;--long: #200d;--high: #400d;--edge: 1px;--side: calc(var(--edge) * -1);--width: 300px;position:absolute;top:0;right:var(--edge);width:var(--width);text-align:center;overflow:hidden}div#growls p{position:relative;display:flex;justify-content:center;align-items:center;margin:0;padding:var(--growl-padding);width:100%;height:var(--growl-height);background-color:var(--dark);box-sizing:border-box;border:var(--edge) outset var(--border);border-radius:var(--gap);overflow:auto;animation:appear var(--growl-duration) linear forwards}div#growls button{position:absolute;top:var(--side);left:var(--side);border-radius:var(--gap);border:var(--edge) outset var(--border);color:var(--light)}div#growls button:active{border-style:inset;color:#fff}div#growls p:has(button){background-color:var(--long)}div#growls p:has(button) button{background-color:var(--long)}div#growls p[data-delay="0"],div#growls p[data-delay="0"] button{background-color:var(--high)}@keyframes appear{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes vanish{0%{transform:translate(0)}80%{transform:translate(100%);height:var(--growl-height);padding:var(--growl-padding)}to{transform:translate(100%);height:0;padding:0}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--light: #ddd;--mid: #888;--r: 34;--g: 34;--b: 34;--a: .9;--dark: rgb(var(--r), var(--g), var(--b));--darkly: rgba(var(--r), var(--g), var(--b), var(--a));--primary: #060;--primary-border: #393;--primary-active: #030;--danger: #600;--danger-border: #900;--danger-active: #300;--gap: .5em;--slot: .25em;--width: 300px;--button: 200px;color-scheme:light dark}body{color:var(--light);background-color:var(--dark);margin:0;display:flex;justify-content:center;align-items:center;min-height:100vh}div.start-growl{--open: 40vh;--text: 11em;--height: calc(var(--open) - var(--text));height:calc(100vh - 40px);width:var(--width);display:flex;flex-direction:column;justify-content:space-around;align-items:center}div.start-growl form div{margin-top:1em}div.start-growl form div span{display:inline-block;width:5em}div.start-growl div.open{container-type:size;container-name:open;flex-grow:1;border:1px inset #888;background-color:#000;margin-top:1em;width:var(--width);height:var(--open)}div.start-growl div.open div.growls{width:var(--width);margin-top:1em;overflow:auto}div.start-growl div.open ul.info{overflow:auto}@container open (height < 32em){div.start-growl ul,div.start-growl div.growls{height:calc(50% - 2em)}}div.start-growl p{margin:.5em;text-align:center}div.start-growl button{display:block;margin:0 auto;border:1px outset var(--mid);border-radius:var(--gap);padding:var(--gap);width:var(--button);cursor:pointer}div.start-growl button:hover{color:#fff}div.start-growl button:hover:active{border-style:inset;background-color:#000}div.start-growl button.primary{margin:1em auto;background-color:var(--primary);border-color:var(--primary-border)}div.start-growl button.primary:active:hover{background-color:var(--primary-active)}div.start-growl button.danger{margin:1em auto;background-color:var(--danger);border-color:var(--danger-border)}div.start-growl button.danger:active:hover{background-color:var(--danger-active)}