*,:before,:after{box-sizing:border-box}html{touch-action:manipulation;container-type:inline-size}body{grid-template-columns:min(100%,80rem);justify-content:center;min-block-size:100dvh;margin:0;padding:.5rem;font-family:sans-serif;font-size:1rem;display:grid;&>main{flex-direction:column;gap:.5rem;min-block-size:0;display:flex}}.top-bar{grid-template-columns:1fr minmax(0,42rem) 1fr;align-items:center;gap:.5rem .75rem;display:grid}.app-title{font-size:inherit;font-weight:inherit;grid-column:1;justify-self:start;margin:0}.app-link{white-space:nowrap}:where(select,button,input,textarea){font:inherit;&:focus-visible{outline:none;box-shadow:0 0 0 2px #8886}}button,select{border-radius:.35rem;min-block-size:1rem;padding-inline:.5rem}button{color:light-dark(#171717,#fafafa);background:light-dark(#f5f5f5,#262626);border:1px solid #8888;padding-block:.25rem}select{color:light-dark(#262626,#d4d4d4);background:light-dark(#fff,#151515);border:1px solid #8888;inline-size:max-content;max-inline-size:100%;padding-block:.25rem}.language-bar{flex-wrap:wrap;grid-column:2;justify-content:center;justify-self:center;align-items:center;gap:.5rem;inline-size:min(100%,42rem);min-inline-size:0;display:flex;&>select{flex:14rem;min-inline-size:0}}@media (width<=56rem){.top-bar{grid-template-columns:minmax(0,1fr);justify-items:center}.app-title,.language-bar{grid-column:1}.app-title{justify-self:center}}.copy-button{grid-template-areas:"stack";place-items:center;display:inline-grid;&>span{transition:visibility 0s 1.5s}&>span:first-child{visibility:visible;grid-area:stack}&>span:nth-child(2){visibility:hidden;grid-area:stack}&:active>span{transition-delay:0s}&:active>span:first-child{visibility:hidden}&:active>span:nth-child(2){visibility:visible}}.translation-grid{flex-flow:wrap;flex-grow:1;gap:.5rem;display:flex;&>.panel{flex-direction:column;flex:300px;gap:.25rem;display:flex;&>.panel-bar{justify-content:space-between;align-items:baseline;display:flex}&>.textarea-shell{background:light-dark(#fff,#151515);border:1px solid #8888;border-radius:.35rem;flex-grow:1;min-block-size:0;overflow:hidden;&:focus-within{box-shadow:0 0 0 2px #8886}&>textarea{color:light-dark(#262626,#d4d4d4);resize:none;background:0 0;border:0;flex-grow:1;block-size:100%;inline-size:100%;padding:.5rem}}}}