@font-face{font-family:Inside;src:url('inside.woff') format('woff');font-display:swap}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#172323;color:#ddd}body{display:flex;justify-content:center;align-items:center;min-height:100svh;padding:24px 18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath fill='%23233737' d='M0 0h1v1H0zM2 2h1v1H2z'/%3E%3C/svg%3E");font-family:Inside,monospace}button{font:inherit;cursor:pointer;touch-action:manipulation;border-radius:0}.window{width:min(100%,960px);padding:5px;border:1px solid #b0baba;outline:2px solid #050909;outline-offset:2px;background:#333e3e}.titlebar{height:32px;display:flex;border:1px solid #080c0c;background:#8c9999;color:#f5ffff}.system-box{width:34px;min-width:34px;height:30px;border:0;border-right:2px solid #080c0c;background:#a9b5b5;color:#080c0c;font-size:24px;line-height:1}.system-box:last-child{border-right:0;border-left:2px solid #080c0c;font-size:16px}.title-stripe{display:flex;justify-content:center;align-items:center;flex:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath fill='%23182424' d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3C/svg%3E")}.title-stripe span{font-size:16px;line-height:24px;padding:0 12px;background:#060b0b;border-left:2px solid #a9b5b5;border-right:2px solid #a9b5b5}.menubar{display:flex;justify-content:space-between;gap:8px;padding:8px 10px 6px;border:1px solid #080c0c;border-top:0;background:#284f50;color:#cff;font-size:16px;line-height:16px}.monitor{background:#000;border:2px solid #0b1010;padding:5px;line-height:0;margin-top:5px}canvas{display:block;width:100%;aspect-ratio:4/3;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;outline:none;background:#000}canvas:focus-visible{outline:1px solid #55ffff;outline-offset:1px}.keys{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;padding:8px 5px 5px;margin-top:5px;border:1px solid #111b1b;background:#485454}.keys button{appearance:none;border:1px solid #070c0c;border-bottom:3px solid #070c0c;background:#a8b3b3;color:#101818;padding:8px 1px 6px;min-height:50px;line-height:16px;font-size:12px}.keys button span{display:block;color:#071010;font-size:16px;line-height:16px;margin-bottom:6px}.keys .enter{background:#c8d6d6;outline:1px solid #bdcccc;outline-offset:1px}button:hover,button:focus-visible{background:#d2e2e2;color:#000;outline:2px solid #55ffff;outline-offset:0}.keys button:active,.system-box:active{background:#4a6666;color:#fff;border-bottom-width:1px}.keys button:disabled{background:#697676;color:#394747;cursor:default;border-bottom-width:1px}.keys button:disabled span{color:#394747}.readout{height:0;overflow:hidden;width:0;position:absolute}
@media(min-width:900px){.window{width:min(960px,calc((100svh - 190px)*1.3333))}}
@media(max-width:600px){body{padding:10px 6px;align-items:flex-start;padding-top:max(14px,env(safe-area-inset-top))}.window{padding:3px;outline-offset:1px}.titlebar{height:28px}.system-box{height:26px;width:28px;min-width:28px}.menubar{font-size:8px;line-height:10px;padding:7px 5px}.monitor{padding:2px;margin-top:4px}.keys{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:6px 3px 3px}.keys button{min-height:56px;font-size:10px;padding:8px 1px 6px}.keys button span{font-size:16px;margin-bottom:6px}}
@media(max-height:550px) and (min-width:600px){body{padding:8px}.window{width:min(700px,calc((100svh - 120px)*1.3333))}.titlebar{height:24px}.system-box{height:22px}.menubar{display:none}.keys{padding:4px;margin-top:3px}.keys button{padding:4px 1px;min-height:36px;font-size:8px}.keys button span{margin-bottom:2px;font-size:12px;line-height:12px}}

[hidden]{display:none!important}.dos-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border:1px solid #111b1b;background:#283b3b;padding:8px;margin-top:5px;color:#aff;font-size:16px}.dos-form input{min-width:0;flex:1;width:120px;font:16px Inside,monospace;color:#fff;background:#080d0d;border:1px solid #a9b5b5;padding:8px;text-transform:uppercase}.dos-form button{border:1px solid #080c0c;background:#a8b3b3;color:#071010;padding:10px;font-size:16px;min-height:44px}.practice-keys{display:flex;gap:5px;flex-wrap:wrap;width:100%}.practice-keys button{flex:1;font-size:12px}

@media(min-width:900px){body:has(.dos-form:not([hidden])) .window{width:min(960px,calc((100svh - 320px)*1.3333))}}

.classroom-keys{grid-template-columns:repeat(5,minmax(0,1fr));padding:4px 5px}.classroom-keys button{min-height:38px;font-size:12px;line-height:16px}.quiz-keys{grid-template-columns:repeat(3,minmax(0,1fr))}.quiz-keys button{font-size:16px;min-height:48px}
@media(min-width:900px){.window{width:min(960px,calc((100svh - 270px)*1.3333))}body:has(.dos-form:not([hidden])) .window{width:min(960px,calc((100svh - 400px)*1.3333))}body:has(.quiz-keys:not([hidden])) .window{width:min(960px,calc((100svh - 330px)*1.3333))}}
@media(max-width:600px){.classroom-keys{grid-template-columns:repeat(3,minmax(0,1fr))}.classroom-keys button{font-size:10px;min-height:46px;line-height:13px}.quiz-keys{grid-template-columns:repeat(3,minmax(0,1fr))}.quiz-keys button{font-size:12px;min-height:48px}}
@media(max-height:550px) and (min-width:600px){.window{width:min(700px,calc((100svh - 180px)*1.3333))}.classroom-keys button{min-height:30px;font-size:8px;line-height:10px}}
@media(max-height:550px) and (min-width:600px){.keys:not(.classroom-keys):not(.quiz-keys){grid-template-columns:repeat(4,minmax(0,1fr))}.keys button{font-size:8px;line-height:10px;min-height:32px;padding:3px 1px}.keys button span{font-size:12px;line-height:12px;margin-bottom:2px}.classroom-keys button{min-height:30px;overflow-wrap:anywhere}}

.fullscreen-controls{display:none}
html.program-view,html.program-view body{overflow:hidden;background:#000}
.window.program-fullscreen{position:fixed;inset:0;z-index:1000;width:100%!important;height:100vh;height:100dvh;margin:0;padding:0;border:0;outline:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.window.program-fullscreen>.titlebar,.window.program-fullscreen>.menubar,.window.program-fullscreen>.keys,.window.program-fullscreen>.dos-form{display:none!important}
.window.program-fullscreen .monitor{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;width:100%;margin:0;padding:0;border:0;background:#000;overflow:hidden}
.window.program-fullscreen canvas{width:min(100vw,calc((100vh - 56px)*4/3));width:min(100vw,calc((100dvh - 56px)*4/3));height:auto;max-width:100%;outline:0;touch-action:none}
.window.program-fullscreen .fullscreen-controls{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;gap:4px;padding:4px;width:min(100%,760px);height:56px;flex:none;background:#000;font-size:12px;line-height:14px}
.fullscreen-controls button{min-width:0;min-height:44px;padding:4px 1px;border:1px solid #555;background:#000;color:#5ff;overflow-wrap:anywhere}
.fullscreen-controls button:focus-visible{background:#00a;color:#fff;outline:1px solid #ff5}
@media(max-width:600px){.window.program-fullscreen .fullscreen-controls{grid-template-columns:repeat(4,minmax(0,1fr));height:104px;font-size:10px}.window.program-fullscreen canvas{width:min(100vw,calc((100vh - 104px)*4/3));width:min(100vw,calc((100dvh - 104px)*4/3))}}