*{box-sizing:border-box}html{height:100%;margin:0}body{background-color:#f5f5f5;flex-direction:column;align-items:stretch;gap:1rem;height:calc(100% - 2rem);margin:1rem;display:flex}main{gap:1rem;width:100%;height:100%;display:flex}main>div{flex-direction:column;align-items:stretch;gap:1rem;width:100%;height:100%;display:flex}button{color:#fff;background-color:#204070;border-radius:.5rem;padding:.5rem}textarea{resize:none;background-color:#fff;border-radius:.5rem;flex-grow:1;padding:.5rem}dialog[open]{flex-direction:column;align-items:stretch;gap:1rem;width:80%;height:80%;display:flex}dialog::backdrop{background-color:#000000bf}.error{background-color:pink}@media (orientation:portrait){main{flex-direction:column}}