*{box-sizing:border-box} :root{font-family:'Courier New',monospace;color:#111;background:#c0c0c0;font-size:16px;font-synthesis:none}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border-radius:0}#splash{position:fixed;inset:0;z-index:9999;background:#000;display:grid;place-items:center}#splash img{width:100%;height:100%;object-fit:contain}#splash[hidden]{display:none}#desktop{height:100dvh;display:flex;flex-direction:column;padding:4px;border:2px solid;border-color:#fff #404040 #404040 #fff;background:#c0c0c0}.desktop-title{height:33px;flex-shrink:0;background:#000080;color:#fff;display:flex;align-items:center;gap:8px;border:1px solid #000}.desktop-title h1{margin:0;font-size:18px;line-height:1;font-weight:bold;flex:1;text-align:center;letter-spacing:.5px}.system-mark{color:#000;background:#c0c0c0;border:2px outset #eee;padding:0 5px;height:100%;display:grid;place-items:center}.year{padding:0 9px;font-size:14px}#workspace{position:relative;flex:1;min-height:0;margin-top:4px;overflow:hidden;border:1px solid;border-color:#808080 #fff #fff #808080}#icons{position:absolute;top:25px;left:22px;display:grid;grid-template-columns:repeat(4,105px);gap:23px}.desktop-icon{background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:8px 4px;cursor:default;text-decoration:none;color:#111;min-width:0}.pixel-icon{width:48px;height:48px;image-rendering:pixelated;shape-rendering:crispEdges;flex-shrink:0}.desktop-icon .label{padding:3px 5px;font-size:16px}.desktop-icon.selected .label{background:#000080;color:#fff;outline:1px dotted white;outline-offset:-2px}.desktop-icon:focus-visible{outline:1px dotted #111}.window{position:absolute;background:#c0c0c0;border:3px solid;border-color:#fff #404040 #404040 #fff;box-shadow:1px 1px #000;padding:3px;display:flex;flex-direction:column;min-width:0}.titlebar{display:flex;align-items:center;gap:3px;height:32px;flex-shrink:0;background:#808080;color:#fff;touch-action:none;user-select:none}.window.active .titlebar{background:#000080}.titlebar h2{margin:0;font-size:16px;text-align:center;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.control{width:30px;height:28px;flex-shrink:0;background:#c0c0c0;border:2px solid;border-color:#fff #404040 #404040 #fff;display:grid;place-items:center;font-size:18px;line-height:1;cursor:default;color:#000;padding:0}.control:active{border-color:#404040 #fff #fff #404040}.control:focus-visible{outline:2px dotted #000;outline-offset:-5px}.window-body{margin-top:5px;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:16px}.window-body p{margin:0;line-height:1.6;max-width:28ch}.window-body .pixel-icon{width:64px;height:64px}.window-status{font-size:14px;padding:5px 6px 1px;color:#444}footer{display:flex;align-items:center;gap:12px;min-height:36px;padding:5px 7px 0;font-size:13px}#minimized{display:flex;gap:5px;flex:1;min-width:0}.restore-button{background:#c0c0c0;border:2px outset #eee;padding:4px 10px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.footer-brand{color:#555;font-size:12px;letter-spacing:1px}@media(pointer:coarse){.control{width:40px;height:38px}.titlebar{height:42px}}@media(max-width:600px){#icons{top:18px;left:12px;grid-template-columns:repeat(2,100px);gap:19px 12px}.footer-brand{display:none}footer{flex-wrap:wrap;gap:5px;min-height:40px}#hint{font-size:12px}#minimized:not(:empty){flex-basis:100%}.restore-button{flex:1;padding:5px}.window-body{padding:16px}.desktop-title h1{font-size:16px}}@media(max-height:400px){#icons{top:5px;grid-template-columns:repeat(4,85px);gap:5px}.desktop-icon{gap:2px}.desktop-icon .label{font-size:14px}.window-body{padding:8px;gap:5px}.window-body .pixel-icon{width:32px;height:32px}}

.window[hidden]{display:none}

/* Program Manager and overlapping program groups. */
:root{font-family:Tahoma,'MS Sans Serif',Arial,sans-serif}
.desktop-title{background:#808080;height:28px}
.desktop-title h1{font-size:17px;letter-spacing:0}
.menu-bar{display:flex;gap:4px;min-height:29px;align-items:center;background:#fff;border-bottom:1px solid #000;padding:0 5px}
.menu-bar button{border:0;background:transparent;padding:3px 10px;font-size:16px}
.menu-bar button:hover,.menu-bar button:focus-visible{background:#000080;color:white;outline:0}
#workspace{margin-top:0;background:#808080;border-color:#000 #fff #fff #000}
.titlebar{height:28px;background:#fff;color:#000;border:1px solid #808080;gap:0}
.window.active .titlebar{color:#fff}
.titlebar h2{font-size:17px;font-weight:bold}
.control{height:26px;width:28px;font-family:Arial,sans-serif}
.window{padding:1px;border-width:4px}
.window-body{margin-top:2px;border:1px solid #000;background:#fff}
.window-status{font-size:13px}
.boatfest-window .window-body{justify-content:flex-start;align-items:stretch;padding:25px 18px}
#icons{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%}
#icons .pixel-icon{width:48px;height:48px}
.desktop-icon{align-self:start;gap:8px}
.desktop-icon .label{font-size:16px;padding:2px 4px}
footer{background:#808080;color:#fff;min-height:35px;padding:3px 7px;font-family:Tahoma,Arial,sans-serif}
.footer-brand{display:none}
@media(max-width:600px){#icons{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 8px}.boatfest-window .window-body{padding:16px 8px}.titlebar h2{font-size:16px}#hint{max-width:100%;font-size:12px}.menu-bar button{padding:5px 10px}}
@media(pointer:coarse){.control{width:40px;height:38px}.titlebar{height:40px}}
@media(max-height:440px){#icons{grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}.boatfest-window .window-body{padding:8px 2px}.desktop-icon .label{font-size:14px}}

/* Windows 3.1 VGA reference: original bitmap glyphs and classic palette. */
@font-face{font-family:'Boatfest System';src:url('assets/boatfest-system.woff2') format('woff2');font-weight:100 900;font-display:block}
@font-face{font-family:'Boatfest Sans';src:url('assets/boatfest-sans.woff2') format('woff2');font-weight:100 900;font-display:block}
:root{--face:#c0c0c0;--shadow:#808080;--active:#000080;font-family:'Boatfest System',sans-serif;color:#000;background:var(--face);font-synthesis:none;-webkit-font-smoothing:none;text-rendering:geometricPrecision}
body{display:flex;align-items:center;justify-content:center;background:var(--face)}
#desktop{width:84vw;height:82dvh;max-width:1400px;padding:3px;border:1px solid #000;box-shadow:inset 1px 1px #fff,inset -1px -1px var(--shadow);background:var(--face)}
.desktop-title{height:22px;background:var(--active);border:1px solid #000;gap:0}
.desktop-title h1,.titlebar h2{font-family:'Boatfest System',sans-serif;font-size:16px;font-weight:400;line-height:16px;letter-spacing:0}
.system-mark{width:20px;padding:0;border:1px solid;border-color:#fff var(--shadow) var(--shadow) #fff;font-size:0;position:relative}
.system-mark:after,.close:after{content:'';width:9px;height:3px;border:1px solid #000;background:#fff;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.year{color:#000;background:var(--face);border:1px outset #fff;font-size:14px;padding:0 4px;height:20px}
.menu-bar{min-height:20px;padding:0 2px;gap:0;font-family:'Boatfest System',sans-serif}
.menu-bar button{font-size:16px;padding:2px 8px;line-height:16px}
#workspace{background:#fff;border:1px solid #000}
.window{border:1px solid #000;padding:3px;background:var(--face);box-shadow:inset 1px 1px #fff,inset -1px -1px var(--shadow)}
.titlebar{height:22px;border:1px solid #000;color:#fff;background:var(--active)}
.window.active .titlebar{background:#fff;color:#000}
.control{width:21px;height:20px;border-width:1px;border-color:#fff var(--shadow) var(--shadow) #fff;position:relative;background:var(--face)}
.close{font-size:0}
.window-body{border:1px solid #000;margin-top:0;background:#fff}
.window-status{display:none}
.boatfest-window .window-body{padding:17px 12px}
#icons{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#icons .pixel-icon{width:32px;height:32px}
.desktop-icon{gap:4px;padding:4px 2px}
.desktop-icon .label{font-family:'Boatfest Sans',sans-serif;font-size:13px;line-height:13px;color:#000}
.desktop-icon.selected .label{background:var(--active);color:#fff}
.window-body p{font-family:'Boatfest Sans',sans-serif;font-size:13px;line-height:20px}
footer{background:#fff;color:#000;min-height:28px;padding:2px 4px;font-family:'Boatfest Sans',sans-serif;font-size:13px}
#hint{display:none}#hint.show{display:block}
.restore-button{font-family:'Boatfest Sans',sans-serif;font-size:13px;color:#000;background:var(--face);border:1px outset #fff}
@media(max-width:600px){#desktop{width:100%;height:100dvh}#icons{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 8px}.desktop-title h1,.titlebar h2{font-size:16px}.desktop-icon .label{font-size:13px}.menu-bar button{padding:5px 8px}}
@media(pointer:coarse){.control{width:36px;height:34px}.titlebar{height:36px}}
@media(max-height:440px){#desktop{height:100dvh;width:100%}#icons{grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}.boatfest-window .window-body{padding:6px 2px}}