: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:0.5s ease-out;
 display:block;
}
bc{
 position:relative;
 margin-bottom:0px;
 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:0.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:0.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:0px;
 background:#900;
 color:#FFF;
 font-size:1.5em;
 vertical-align:top;
 overflow:hidden;
 z-index:49;
 display:block;
 transition:0.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:0px;
 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:0.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:0.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;}
/* X=HF.rX= qx&&!qy?-(1-2*sx*sx)*y:y,
   Y=HF.rY= qy&&!qx? (1-2*sy*sy)*x:x,
   Z=HF.rZ=(qx&&!qy?(2*sx*cx)*y:qy&&!qx?-(2*sy*cy)*x:0)
   *(this.cio.e.shiftKey?0:this.cio.e.ctrlKey?-1:1)*/