:root{--impal-w:310px;--impal-h:310px;--impal-hb:linear-gradient(90deg,#090,#009);--impal-bgbd:#333;--impal-bgbc:#444}@container (height > 0px){
 alert{background:#0F0;}
 b{background:#0FF;}
}body{margin:0;padding:0;background:var(--impal-bgbd);font-family:arial;font-size:12px;user-select:none;display:block}content{margin-top:60px;transition:.5s ease-out;display:block}bc{position:relative;margin-bottom:0;background:var(--impal-bgbc);box-shadow:0 0 0 1px #111;padding:10px;overflow:hidden;vertical-align:top;display:block;&.shrink>ih>ihg{transform:rotate(90deg);}
 &.shrink>ih>ihg>svg>polygon{fill:#0A0;stroke:#0F0;}
 &.shrink>ic{transform:scale(0.2) translate(0%,0%);}
 transition:0.5s linear}ic{position:relative;margin:10px 7px 0 0;overflow:hidden;vertical-align:top;display:inline-grid;gap:2px;transform-origin:0 0;transform:scale(1) translate(0%,0%);transition:.5s linear}header{left:0;top:0;right:0;border:1px solid #000;margin:0;padding:5px;background:var(--impal-hb);font-size:1.4em;color:#fff;display:inline;height:40px;vertical-align:top;position:fixed;z-index:50}header>ibutton{border:1px solid #aaa;border-radius:3px;background:none;color:#eee;font-size:1.3em;height:36px}header>ibutton[title="Menü"]{position:absolute;right:5px;width:36px;color:#aaa;background:#CCC6;&:hover{filter:brightness(150%);}}header>ibutton[title="zurück"]{font-size:1.3em}header>hinfo{position:absolute;background:none;color:#efe;font-size:1em;top:5px;right:50px;height:36px;vertical-align:top;display:inline-block}header>span{padding-left:10px;font-size:2em;overflow:hidden;display:inline-block}header>temp{font-size:.7em;display:block}header>menu{right:0;top:50px}alert{position:fixed;border:1px solid #000;margin:0;padding:5px;left:0;top:50px;right:0;background:#900;color:#fff;font-size:1.5em;vertical-align:top;overflow:hidden;z-index:49;display:block;transition:.5s ease-out;transform:scale(0);&.alert{transform:scale(1);}
}topbar{position:absolute;border:1px solid #000;margin:0;padding:5px;left:0;top:50px;right:0;background:#ddd;color:#222;font-size:1.2em;vertical-align:top;overflow:hidden;z-index:40;display:block}iupload,iprogress{width:300px;&>:last-child{width:75px;float:right;}
 margin:15px;display:block}iprogress{height:1em;&>:first-child{width:223px;height:inherit;border:1px solid #FFF;float:left;}
 text-align:right}iprogress>span>img{width:0%;height:inherit;background:#0f0;border:none;padding:0}shield{position:fixed;inset:0;background:#0005;display:none;z-index:10}ih{width:100%;display:flex;gap:10px;transform-origin:0 0;transform:scale(1);transition:.5s linear}ihg{width:42px;height:42px;transform-origin:21px 21px;transform:rotate(180deg);&>svg>polygon{fill:#A70;stroke:#FB0;}
 transition:0.5s linear}iht{padding:2px;background:#bbb;width:calc(100% - 4px);min-height:36px;display:inline-block;font-size:16px;overflow:hidden}coordinates{font-size:1.5em;background:#eee}i,textarea{border:0;margin:0;padding:2px;background:#eee;width:calc(100% - 4px);outline:none;resize:vertical}textarea{font-size:16px}body>textarea{position:absolute;display:none}move{margin:0;padding:0;position:absolute;overflow:hidden;opacity:.5;cursor:none}move>menu,move>ic{margin:0;padding:0}move>bc{margin:0;padding:10px}ic>iframe{background:#ddd}body>iframe{display:none}menu{position:absolute;border:3px solid #000;border-radius:3px;box-shadow:0 0 0 1px #111;margin:0;padding:0;&.mousemove{padding:10px;}
 background:#222;color:#eee;font-size:1em;align-content:center;display:none;z-index:20}menu>div{background:#333;border:1px solid #0000;margin:1px;padding:10px;text-align:left;&.input{
  padding-top:30px;
  &.active{border:1px solid #00A;}
 }
}menu>div:hover{filter:brightness(150%)}input#files{display:none}.w{width:var(--impal-w)}.h{height:var(--impal-h)}.hide{display:none}.show{display:inline-block}:root{--impal-hb:linear-gradient(90deg,#090,#059);--impal-s:.5;--impal-s:1;--impal-r3x:0deg;--impal-r3y:0deg;--impal-r3z:0deg;--impal-r3a:0deg;--impal-r3s:calc(var(--impal-s)/var(--impal-P)*4);--impal-r3p:calc(1780px + var(--impal-r3s) * 1000px);--impal-l:0;--impal-t:0;--impal-w:310px;--impal-h:310px;--impal-W:calc(var(--impal-w) * var(--impal-S));--impal-H:calc(var(--impal-h) * var(--impal-S));--impal-m:min(var(--impal-W),var(--impal-H));--impal-A:calc(var(--impal-M)/2);--impal-L:calc(var(--impal-W)/2);--impal-T:calc(var(--impal-H)/2);--impal-cl:0;--impal-ct:0;--impal-bs:3px;--impal-bc:#fb0;--impal-br:0%;--impal-ts:1s;--impal-tz:0;--impal-t3s:var(--impal-M);--impal-t3z:calc((var(--impal-t3s)/2)/tan((360/var(--impal-P)/2)*pi/180) + var(--impal-tz));--impal-m:inline-block;--impal-q:6;--impal-p:calc(var(--impal-Q) - var(--impal-p));--impal-p:2;--impal-q:4;--impal-rx-1:0deg;--impal-ry-1:0deg;--impal-rx-2:0deg;--impal-ry-2:-90deg;--impal-rx-3:90deg;--impal-ry-3:0deg;--impal-rx-4:-90deg;--impal-ry-4:0deg;--impal-rx-5:0deg;--impal-ry-5:90deg;--impal-rx-6:0deg;--impal-ry-6:180deg;--impal-r3dxxx:rotate3d(var(--impal-r3x),var(--impal-r3y),var(--impal-r3z),var(--impal-r3a)) scale3d(var(--impal-r3s),var(--impal-r3s),var(--impal-r3s));--impal-r3d:rotateX(var(--impal-r3x)) rotateY(var(--impal-r3y)) rotateZ(var(--impal-r3z)) scale3d(var(--impal-r3s),var(--impal-r3s),var(--impal-r3s))}ic{position:relative;margin:5px;overflow:hidden;vertical-align:top;display:inline-grid;gap:2px}ifc{width:var(--impal-W);height:var(--impal-W);overflow:hidden;background:#eee;&:fullscreen>control{display:inline-block;}
}img,video,ifc{box-shadow:0 0 0 3px #eee;margin:3px;padding:0;display:inline-block}ifc>video{box-shadow:none;border:0}ifc>iframe{border:0;margin:0;padding:0}ifc>div{position:relative;top:-21px;padding:1px 0 0 3px;background:#eee;width:var(--impal-W);height:17px;&::before{content:"© ";}
 &::after{content:" | IMPAL V.51 (Test)";}
}i,ifch{padding:0 2px 0 4px;background:#eee;width:calc(100% - 4px)}ifch>*{float:left;margin:3px;font-weight:bold;font-size:2.5em}ifch>button{width:38px;height:38px;font-size:2em;&:focus{background:#0007;}
}.hide{display:none}.show{display:inline-block}ifc.i3c{position:relative;&:fullscreen{background:#8A8 url(/img/cms.millimeterpapier.png);
  position:absolute;
  left:0;
  top:0;
  transition:perspective var(--impal-ts) linear;
  &>i3c{
   position:absolute;
   left:var(--impal-L);
   top:var(--impal-T);
   width:var(--impal-W);
   height:var(--impal-H);
  }
 }
 transition:perspective var(--impal-ts) linear;perspective:var(--impal-r3p)}i3c{position:absolute;border:0;margin:0;padding:0;width:100%;height:100%;transform-style:preserve-3d;transform-origin:50% 50%;transform:var(--impal-r3d);transition:var(--impal-ts) linear;&>side{
  /*box-shadow:0 0 0 var(--impal-bs) var(--impal-bc);*/
  /*outline:var(--impal-bs) solid #00A;
  outline-offset:calc( - var(--impal-bs));*/
  /*border-image:linear-gradient(90deg,var(--impal-bc));
  border-image-outset:calc( - var(--impal-bs));*/
  border:var(--impal-bs) solid var(--impal-bc);
  margin:0;
  padding:0;
  box-sizing:border-box;/* !! (so keine border-korrektur nötig) */
  border-radius:var(--impal-br);
  &>*/*:not(img)*/{position:absolute;}
  /*&>img{border:none;margin:0;padding:0;}
  /*&:nth-child(1){transform:rotateX(var(--impal-rX-1)) rotateY(var(--impal-rY-1)) translateZ(var(--impal-t3z));}
  &:nth-child(2){transform:rotateX(var(--impal-rX-2)) rotateY(var(--impal-rY-2)) translateZ(var(--impal-t3z));}
  &:nth-child(3){transform:rotateX(var(--impal-rX-3)) rotateY(var(--impal-rY-3)) translateZ(var(--impal-t3z));}
  &:nth-child(4){transform:rotateX(var(--impal-rX-4)) rotateY(var(--impal-rY-4)) translateZ(var(--impal-t3z));}
  &:nth-child(5){transform:rotateX(var(--impal-rX-5)) rotateY(var(--impal-rY-5)) translateZ(var(--impal-t3z));}
  &:nth-child(6){transform:rotateX(var(--impal-rX-6)) rotateY(var(--impal-rY-6)) translateZ(var(--impal-t3z));}
  &:nth-child(7){transform:rotateX(var(--impal-rX-7)) rotateY(var(--impal-rY-7)) translateZ(var(--impal-t3z));}*/
 }
}side{position:absolute;display:flex;align-items:center;justify-content:center;width:var(--impal-t3s);height:var(--impal-t3s);backface-visibility:inherit;font-size:150px;background:#0a0;color:#0f0;&:not(.f){overflow:hidden;}
 &.f{overflow:visible;}
 &>img.w,video.w{
  height:var(--impal-t3s);
  width:calc(var(--impal-S)/height);
  min-height:var(--impal-H);
 }
 &>img.h,video.h{
  width:var(--impal-t3s);
  height:calc(var(--impal-S)/width);
  min-width:var(--impal-W);
 }
}.axes{position:absolute;width:100%;height:100%}.i3c>blende{position:absolute;width:100%;height:100%;background:#0303;display:var(--impal-m)}.i3c>control{position:absolute;left:var(--impal-cL);top:var(--impal-cT);width:360px;height:100%;border:1px solid #000;background:#0009;text-align:left;display:none;flex-flow:row wrap;color:#fff;&>div>input{border:0;width:44px;height:16px;margin:0;padding:0;font-size:1.1em;}
 &>div{
  position:relative;
  width:44px;
  height:35px;
  padding:3px;
  margin:-2px;
  font-size:1.2em;
  text-indent:3px;
  float:left;
  &.on{background:#F00;z-index:3;}
  &:hover:not(:nth-child(2),:last-child,.on){background:#FFF3;}
  &:nth-child(1){text-indent:0;width:44px;height:44px;z-index:2;}
  &>button{width:44px;height:44px;font-size:2em;}
  &:nth-child(2){
   width:calc(360px - 48px);
   height:14px;
   padding:0;
   margin:0;
   font-size:1em;
   color:#FFF;
   float:right;
   z-index:0;
   &::before{color:#5FF;content:var(--impal-Qa);}
   &::after{color:#CA0;content:var(--impal-Qb);}
  }
 }
}.i3c>control>div.matrix{&::before{width:90%;color:#5FF;content:"Transformations-Matrix";}
 display:flex;flex-flow:row wrap;position:absolute;bottom:0;width:234px;height:120px;margin:10px 0 0 0;padding:2px;background:#222;&>b{width:50px;margin:2px;padding:2px;background:#0909;text-align:right;}
}.i3c>control>div.trigotool{&::before{width:90%;color:#5FF;content:"Trigo-Tool2";}
 display:flex;flex-flow:row wrap;position:absolute;bottom:0;width:114px;height:120px;margin:10px 0 0 2px;padding:2px;background:#222;&>c{width:20px;margin:2px;padding:2px;background:#0099;text-align:center;font-size:16px;}
 &>d{width:20px;margin:2px;padding:2px;background:#0909;text-align:center;font-size:10px;}
}.i3c>control>div.xxxtrigotool{&::before{width:90%;color:#5FF;content:"Trigo-Tool";}
 display:flex;flex-flow:row wrap;bottom:0;width:114px;height:120px;margin:10px 0 0 2px;padding:2px;background:#222;&>d{width:20px;margin:2px;padding:2px;background:#0909;text-align:center;font-size:16px;}
}wwz{position:absolute;left:0;top:0;font-size:20px;width:var(--impal-t3z);background:#5ff}wws{position:absolute;left:0;top:25px;font-size:20px;width:var(--impal-t3s);background:#5ff}