html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
body { font-family: Arial, sans-serif; background: #aaa; }
#header { height: 40px; position: absolute; inset: 0 0 auto; background: #3d8af7; border-bottom: 2px solid #0c59cf; line-height: 40px; }
#header h1 { float: left; height: 40px; width: 165px; margin: 0; padding-left: 10px; background: #000; font-size: 26px; }
#header h1::after { content: ''; position: absolute; top: 0; left: 175px; height: 40px; width: 100px; background: linear-gradient(130deg, #000 0 20%, #e00000 20% 35%, #e0e000 35% 50%, #00c000 50% 65%, #00c0c0 65% 80%, transparent 80%); }
#header a { color: #fff; text-decoration: none; }
#header h1 a { color: #e0e0e0; }
#header nav { text-align: right; }
#header nav a { margin-right: 2em; font-size: 18px; }
#header nav a:hover { text-decoration: underline; }
#content { position: absolute; inset: 42px 0 38px; overflow: auto; }
#main_container { position: static; width: 100% !important; min-height: 800px; margin: 0; }
#left_field, #right_field, #center_field { float: none; width: auto; }
#display { position: absolute; top: 10px; left: max(10px, calc(50% - 288px)); margin: 0; padding: 3px 3px 20px; height: auto !important; background: #3d8af7; border: 0; border-radius: 5px 5px 20px 20px; box-shadow: 5px 5px 10px #0004; }
#display .performance { color: white; cursor: move; }
#vcontrol { position: absolute; top: 500px; left: max(10px, calc(50% - 435px)); padding: 3px 3px 3px 23px; background: #3d8af7; border-radius: 30px 50px 90px 30px; box-shadow: 5px 5px 10px #0004; white-space: nowrap; cursor: move; }
#vcontrol > .drag-zone { position: absolute; inset: 0 auto 0 0; width: 20px; cursor: move; }
#vkeyb, #vmouse { display: inline-block; margin: 0; vertical-align: top; }
.virtual-keyboard { cursor: default; }
.virtual-mouse .move-area { left: 50%; transform: translateX(-50%); }
.virtual-mouse .move-area canvas { top: 50%; left: 50%; transform: translate(-50%, -50%); }
#display:focus { outline: none; }
body.-input-captured, body.-input-captured * { cursor: none !important; }
#commands { display: flex; gap: 2px; margin: 0; }
#commands a { cursor: pointer; width: 32px; height: 32px; padding: 0; border: 1px solid #75a9f9; background: transparent; color: white; line-height: 32px; text-align: center; }
#commands a img { width: 26px; height: 26px; margin: 2px; }
#commands a .ui-button-text { padding: 0; }
#left_field { position: fixed; bottom: 0; left: 0; right: 0; height: 36px; display: flex; gap: 5px; align-items: center; background: #3d8af7; z-index: 10; overflow: visible; }
#drives, #tapes { display: flex; gap: 4px; }
.drive-box { width: 165px; margin: 0; border: 0; height: 32px; }
.drive-box .action-button { height: 30px; line-height: 30px; color: white; background-color: transparent; }
.drive-box .action-list { top: auto; bottom: 32px; }
.drive-box .title { max-width: 110px; }
.tape-recorder-box { margin: 0; width: 180px; }
.tape-recorder-box .action-list { top: auto; bottom: 32px; }
#errors { bottom: 38px; border-color: #3d8af7; border-radius: 20px 0 0 20px; }
#errors > .expander { background: #3d8af7; border-color: #3d8af7; color: #bfbfbf; }
#display.-fullscreen { top: 0; left: 0; width: 100% !important; height: 100% !important; padding: 0; background: black; }
@media (max-width: 1000px) { #left_field { overflow-x: auto; } #header nav a { font-size: 14px; margin-right: 12px; } }