:root{--g:#c0c0c0;--w:#fff;--btn:#3a3a3a;--btn-hover:#555;--btn-text:#e6e6e6}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000;color:var(--g);font-family:"Perfect DOS VGA 437","Px437 IBM VGA 8x16","Courier New",monospace;font-size:18px}
body{padding:24px}
body.home{min-height:100vh;display:flex}
.menu{width:100%;max-width:900px;margin:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* DOS-palet */
:root{--cyan:#55ffff;--yellow:#ffff55;--blue:#0000aa;--mag:#ff55ff}
.banner{margin:0;color:var(--cyan);font-family:Consolas,"Lucida Console","DejaVu Sans Mono","Courier New",monospace;font-size:clamp(7px,1.9vw,17px);line-height:1;white-space:pre;text-shadow:0 0 8px rgba(85,255,255,.35)}
.museum{color:var(--yellow);letter-spacing:.35em;margin:6px 0 26px;font-size:1.1em}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.colhead{font-size:.95em;letter-spacing:.12em;margin-bottom:-8px}
.colhead span{letter-spacing:0;opacity:.7}
.colhead.dos{color:var(--cyan)}.colhead.nt{color:var(--yellow)}
a.block{display:flex;align-items:baseline;background:var(--btn);color:var(--btn-text);padding:22px 18px;text-decoration:none;outline:none;cursor:pointer;white-space:pre;border-left:4px solid transparent}
a.block.dos{border-left-color:var(--cyan)}
a.block.nt{border-left-color:var(--yellow)}
a.block .arrow{visibility:hidden}
a.block .year{margin-left:auto;padding-left:1em;opacity:.75}
a.block.sel,a.block:hover{background:var(--blue);color:var(--w)}
a.block.sel .year{opacity:1;color:var(--yellow)}
a.block.sel .arrow{visibility:visible}
a.block.off{background:#202020;color:#6c6c6c;border-left-color:#3a3a3a;cursor:not-allowed}
a.block.off .year{opacity:.6;color:inherit}
a.block.off.sel,a.block.off:hover{background:#2a2a2a;color:#a0a0a0}
a.block.off.sel .year{color:#a0a0a0}
.infobox{margin-top:26px;border:3px double var(--g);padding:12px 16px;height:10.2em;overflow:hidden}
.infotitle{color:var(--yellow);margin-bottom:4px}
.infotext{color:var(--w)}
.infotip{color:var(--cyan);margin-top:6px;min-height:1.4em}
.infotip.warn{color:#d9822b}
.fkeys{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding:8px 0;background:#000}
.fkeys button{font-size:.9em;padding:4px 10px}
.fkeys b{color:var(--yellow);font-weight:normal;margin-right:.4em}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal[hidden]{display:none}
.dialog{background:var(--blue);color:var(--w);border:3px double var(--w);max-width:560px;padding:18px 22px;box-shadow:10px 10px 0 #000}
.dtitle{color:var(--yellow);text-align:center;margin-bottom:10px}
.dialog p{margin:0 0 12px}
.dkey{color:var(--cyan)}
/* VM page */
body.vm{min-height:100vh;display:flex;flex-direction:column;align-items:center}
body.vm.fit{overflow:hidden}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-bottom:12px}
.bar .title{color:var(--w);flex:0 0 100%;text-align:center}
button,label.btn{background:var(--btn);color:var(--btn-text);border:0;padding:6px 14px;font:inherit;cursor:pointer}
button:hover,label.btn:hover{background:var(--btn-hover);color:var(--w)}
input[type=file]{display:none}
/* Volume-schuif: technische look, oranje balk */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:20px;margin:0;cursor:pointer;--v:100%;--acc:#d9822b}
input[type=range]:focus{outline:none}
input[type=range]::-webkit-slider-runnable-track{height:6px;border:1px solid #6a6a6a;background:linear-gradient(to right,var(--acc) 0,var(--acc) var(--v),#161616 var(--v),#161616 100%)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:8px;height:16px;margin-top:-6px;border-radius:0;background:#e6e6e6;border:1px solid var(--acc)}
input[type=range]:hover::-webkit-slider-thumb{background:#fff}
input[type=range]::-moz-range-track{height:6px;border:1px solid #6a6a6a;background:#161616}
input[type=range]::-moz-range-progress{height:6px;background:var(--acc)}
input[type=range]::-moz-range-thumb{width:8px;height:16px;border-radius:0;background:#e6e6e6;border:1px solid var(--acc);box-sizing:border-box}
input[type=range]:hover::-moz-range-thumb{background:#fff}
.dd{position:relative}
.menu-pop{position:absolute;top:100%;left:0;margin-top:4px;z-index:10;display:flex;flex-direction:column;gap:2px;background:#222;padding:4px;min-width:100%;white-space:nowrap;box-shadow:0 4px 12px #000}
.menu-pop[hidden]{display:none}
.menu-pop button{text-align:left}
.stage{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;padding:12px 0}
#screen_container{background:#000;display:inline-block;max-width:100%;cursor:none}
#screen_container div{white-space:pre;font:14px monospace;line-height:16px;cursor:none}
#screen_container canvas{max-width:100%;height:auto;cursor:none}
.info{text-align:center}
#diag{color:#808080;font-size:14px;margin-top:4px}
#status{color:#808080;margin-top:6px;min-height:1.4em}
.err{color:#ff5555!important}
@media(max-width:600px){.grid{grid-template-columns:1fr}.colhead.nt{margin-top:10px}.infobox{height:auto;min-height:13em}}