*{box-sizing:border-box;border:none;margin:0;padding:0}body{color:#333;background:#000;font:.8rem monospace}select,input{background:#fff;width:100%;padding:.5rem;font-size:.9rem}canvas{display:block}.hidden{display:none}.Canvas,.MouseTrack,.CursorCanvas{position:absolute;inset:0}.MouseTrack{cursor:pointer;z-index:12}.CursorCanvas{z-index:11}.Canvas{z-index:10}.Field{flex:1;grid-template-columns:auto 1fr;justify-content:start;gap:.5rem;display:grid}.Field .FieldLabel{overflow-wrap:break-word;text-align:right;text-overflow:ellipsis;align-items:center;font-weight:700;display:grid}.Field .FieldValue:hover{opacity:.9}.Field output.FieldValue{color:#aaa;background-color:#222;align-items:center;padding:.5rem;display:flex}.Field.color .FieldValue{position:relative}.Field.color .FieldValue input{padding-left:35px}.Field.color .FieldValue .ColorView{z-index:1;background-color:red;outline:1px solid #ccc;width:22px;height:22px;position:absolute;top:.4rem;left:.4rem}.Field.point .FieldValue,.Field.point .FieldValue .coordinate,.Field.point .FieldValue input{display:flex}.Field.point .FieldValue .coordinate span{color:#666;background-color:#ccc;align-items:center;padding:0 .5rem;font-weight:700;display:flex}.Field.point .FieldValue .coordinate:last-child{margin-left:.5rem}.Field.rect{flex-grow:0;flex-shrink:1}.Field.rect .FieldValue,.Field.rect .FieldValue span,.Field.rect .FieldValue input{display:flex}.Field.rect .FieldValue{min-width:9rem;max-width:10rem}.Field.rect .FieldValue .separator{color:#666;background:#ddd;align-items:center;padding:0 .3rem;font-weight:700}.Field.boolean .FieldValue button{color:#fff;cursor:pointer;text-align:center;justify-content:center;width:100%;padding:.5rem 1rem;display:block}.Field.boolean .FieldValue input{display:none}.Field.boolean.true .FieldValue button{background-color:#065e06}.Field.boolean.false .FieldValue button{background-color:#640f0f}.Button{color:#fff;cursor:pointer;text-transform:uppercase;background:#0095ff;padding:.5rem 1rem;font-weight:700}.Button:active{background:#859c8d}.App{color:#333;grid-template-rows:min-content auto;height:100vh;display:grid}.AppHeader{background:#111;grid-template-columns:min-content auto;padding:.5rem;display:grid}.AppTitle{color:#fff;text-align:center;font-size:1.8rem;font-weight:700}.AppHeaderMenu{color:#fff;grid-template-columns:auto;grid-auto-flow:column;justify-content:end;gap:1rem;display:grid}.UITileMap{grid-template-rows:min-content auto;grid-template-columns:auto 25%;display:grid}.UITileMap .UITileMapForm{background:#bbb;grid-column:span 2;grid-auto-flow:column;padding:.5rem;display:grid}.UITileMap .UITileMapForm .Form{align-items:stretch;gap:1rem;display:flex}.UITileMap .UITileMapScene{grid-template-rows:40px auto;display:grid;overflow:hidden}.UITileMap .UITileMapScene .UITileMapSceneDashboard{color:#fff;background-color:#333;align-items:center;padding:0 .5rem;display:flex}.UITileMap .UITileMapScene .UITileMapSceneView{position:relative}.UITileMap .UITileMapScene .UITileMapSceneContent{background-color:#fff;background-image:linear-gradient(45deg,#e8e8e8 25%,#0000 25%),linear-gradient(-45deg,#e8e8e8 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e8e8e8 75%),linear-gradient(-45deg,#0000 75%,#e8e8e8 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;position:absolute;inset:0}.UITileMap .UITileMapScene .MouseTrack{box-shadow:inset 0 0 .5rem #000}.UITileMap .UITileMapSidebar{color:#fff;background:#111;flex-direction:column;gap:1rem;padding:.5rem;display:flex}.UITileMap .UITileMapSidebar .Form{border-top:1px solid #444;gap:1rem;padding-top:1rem;display:grid}.UITileMap .UITileMapSidebar .Form:first-child{border:none;padding:0}.UITileMap .UITileMapSidebar input{color:#fff;background-color:#555}.UITileMap .UITileMapSidebar .Field.point .coordinate span{color:#aaa;background-color:#373737}.UIAudioSynth{background-color:#aaa;grid-template-rows:min-content auto;gap:1rem;padding:1rem;display:grid}.UIAudioSynth .keyboard{flex-direction:row;gap:2px;display:flex}.UIAudioSynth .white-key{z-index:1;cursor:pointer;background:#fff;border:1px solid #000;border-bottom-width:5px;justify-content:center;align-items:flex-end;width:40px;height:160px;padding-bottom:5px;font-size:10px;display:flex;position:relative}.UIAudioSynth .white-key:active{background:#ddd;border-bottom:1px solid #888}.UIAudioSynth .black-key{color:#fff;z-index:2;text-align:center;cursor:pointer;background:#444;border-bottom:3px solid #000;justify-content:center;align-items:flex-end;width:28px;height:100px;margin-left:-14px;padding-bottom:3px;font-size:9px;line-height:1.2;display:flex;position:absolute}.UIAudioSynth .black-key:active{background:#444;border-bottom:1px solid #222}.UIAudioSynth .octave{display:flex;position:relative}.UIAudioSynth .white-container{display:flex}.UIAudioSynth .channels{flex-direction:column;gap:1rem;display:flex}.UIAudioSynth .channels .channel{border:1px inset #444;width:80%;height:100px}