:root {--view-pos: 1rem;--view-col: #fff;--view-bgr: rgb(255,255,255,.9);--view-err: rgb(0,0,0,.8);--view-320: rgb(244,67,54,.9);--view-480: rgb(33,150,243,.9);--view-768: rgb(0,188,212,.9);--view-1280:rgb(76,175,80,.9);--view-1920:rgb(255,152,0,.9);--view-2560:rgb(96,125,139,.9);--view-3072:rgb(158,158,158,.9);}.viewportsize {position:fixed;display:block;top:var(--view-pos);left:var(--view-pos);width:172px;padding:2px 4px;line-height:1.4;border:1px solid rgb(34,49,63,.75);box-shadow:4px 4px 2px 0px rgb(0,0,0,0.15);font-size:1rem;font-family:'arial',sans-serif;z-index:99999;}.viewscreen {color:var(--view-col);}.viewratio {color:var(--view-col);}.screenmode:before {content:'light';}@media (prefers-color-scheme: dark) {.screenmode:before {content:'dark';}}@media (min-width: 256px) {.viewportsize {background:var(--view-err);color:red;}}@media (min-width: 320px) {.viewportsize {background:var(--view-320);color:var(--view-col);}}@media (min-width: 480px) {.viewportsize {background:var(--view-480);color:var(--view-col);}}@media (min-width: 768px) {.viewportsize {background:var(--view-768);color:var(--view-col);}}@media (min-width: 1280px) {.viewportsize {background:var(--view-1280);color:var(--view-col);}}@media (min-width: 1920px) {.viewportsize {background:var(--view-1920);color:var(--view-col);}}@media (min-width: 2560px) {.viewportsize {background:var(--view-2560);color:var(--view-col);}}@media (min-width: 3072px) {.viewportsize {background:var(--view-3072);color:var(--view-col);}}