:root{--desktop-bg:teal;--icon-label:#fff;--icon-selected-bg:navy;--surface:silver;--surface-text:#000;--bevel-hilight:#fff;--bevel-light:#dfdfdf;--bevel-shadow:gray;--bevel-dk-shadow:#000;--taskbar-height:28px}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--desktop-bg);color:var(--icon-label);font-family:Tahoma,MS Sans Serif,sans-serif;font-size:11px;overflow:hidden}.desktop{flex-direction:column;height:100%;display:flex;position:relative}.desktop__icon-grid{flex:1;grid-template-rows:repeat(auto-fill,74px);grid-auto-flow:column;place-content:start;gap:4px;min-height:0;padding:4px;display:grid}.desktop__windows{inset:0 0 var(--taskbar-height) 0;z-index:0;pointer-events:none;position:absolute}.desktop-icon{width:75px;color:inherit;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;flex-direction:column;align-items:center;gap:4px;padding:4px 2px;text-decoration:none;display:flex}.desktop-icon__glyph{font-size:32px;line-height:1}.desktop-icon__label{text-align:center;overflow-wrap:anywhere;padding:1px 3px}.desktop-icon:focus{outline:none}.desktop-icon.is-selected .desktop-icon__label,.desktop-icon:focus-visible .desktop-icon__label{background:var(--icon-selected-bg);outline:1px dotted var(--icon-label)}@media (width<=640px){:root{--taskbar-height:0px}}.taskbar{z-index:1;height:var(--taskbar-height);background:var(--surface);border-top:1px solid var(--bevel-hilight);color:var(--surface-text);align-items:center;gap:2px;padding:2px;display:flex;position:relative}.taskbar__start{background:var(--surface);border:1px solid;border-color:var(--bevel-hilight) var(--bevel-dk-shadow) var(--bevel-dk-shadow) var(--bevel-hilight);height:22px;box-shadow:inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-shadow);color:inherit;font:inherit;align-items:center;gap:3px;padding:0 4px;font-size:13px;font-weight:700;display:flex}.taskbar__start:active{border-color:var(--bevel-dk-shadow) var(--bevel-hilight) var(--bevel-hilight) var(--bevel-dk-shadow);box-shadow:inset 1px 1px 0 var(--bevel-shadow), inset -1px -1px 0 var(--bevel-light);padding:0 3px 0 5px}.taskbar__start-logo{shape-rendering:crispedges;display:block}.taskbar__divider{border-left:1px solid var(--bevel-shadow);border-right:1px solid var(--bevel-hilight);width:0;height:20px;margin:0 2px}.taskbar__windows{flex:1;gap:3px;min-width:0;height:22px;display:flex}.taskbar__window{background:var(--surface);border:1px solid;border-color:var(--bevel-hilight) var(--bevel-dk-shadow) var(--bevel-dk-shadow) var(--bevel-hilight);min-width:0;height:22px;box-shadow:inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-shadow);color:inherit;font:inherit;flex:0 160px;align-items:center;gap:3px;padding:0 4px;display:flex}.taskbar__window.is-active{background:repeating-conic-gradient(var(--bevel-hilight) 0 25%, var(--surface) 0 50%) 0 0 / 2px 2px;border-color:var(--bevel-dk-shadow) var(--bevel-hilight) var(--bevel-hilight) var(--bevel-dk-shadow);box-shadow:inset 1px 1px 0 var(--bevel-shadow), inset -1px -1px 0 var(--bevel-light);font-weight:700}.taskbar__window-icon{font-size:13px;line-height:1}.taskbar__window-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.taskbar__tray{border:1px solid;border-color:var(--bevel-shadow) var(--bevel-hilight) var(--bevel-hilight) var(--bevel-shadow);height:22px;box-shadow:inset 1px 1px 0 var(--bevel-dk-shadow), inset -1px -1px 0 var(--bevel-light);align-items:center;padding:0 6px;display:flex}@media (width<=640px){.taskbar{display:none}}.window{left:var(--x);top:var(--y);width:var(--w);height:var(--h);background:var(--surface);border:1px solid;border-color:var(--bevel-light) var(--bevel-dk-shadow) var(--bevel-dk-shadow) var(--bevel-light);box-shadow:inset 1px 1px 0 var(--bevel-hilight), inset -1px -1px 0 var(--bevel-shadow);color:var(--surface-text);pointer-events:auto;flex-direction:column;padding:2px;display:flex;position:absolute}.window[data-resizable=true]{padding:3px}.window.is-minimized{display:none}.window.is-maximized{width:100%;height:100%;top:0;left:0}.window__titlebar{color:silver;user-select:none;touch-action:none;background:linear-gradient(90deg,gray,silver);align-items:center;gap:3px;height:18px;padding:0 2px 0 3px;font-weight:700;display:flex}.window.is-active .window__titlebar{color:#fff;background:linear-gradient(90deg,navy,#1084d0)}.window__icon{font-size:13px;line-height:1}.window__title{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.window__controls{display:flex}.window__button{background:var(--surface);border:1px solid;border-color:var(--bevel-hilight) var(--bevel-dk-shadow) var(--bevel-dk-shadow) var(--bevel-hilight);width:16px;height:14px;box-shadow:inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-shadow);fill:var(--surface-text);place-items:center;padding:0;display:grid}.window__button:active:not(:disabled){border-color:var(--bevel-dk-shadow) var(--bevel-hilight) var(--bevel-hilight) var(--bevel-dk-shadow);box-shadow:inset 1px 1px 0 var(--bevel-shadow), inset -1px -1px 0 var(--bevel-light)}.window__button:active:not(:disabled) svg{transform:translate(1px,1px)}.window__button:disabled{fill:var(--bevel-shadow)}.window__button:disabled svg{filter:drop-shadow(1px 1px 0 var(--bevel-hilight))}.window__button--close{margin-left:2px}.window__button svg{shape-rendering:crispedges;display:block}.window__button .window__restore-glyph,.window.is-maximized .window__maximize-glyph{display:none}.window.is-maximized .window__restore-glyph{display:block}.window__resize{touch-action:none;position:absolute}.window.is-maximized .window__resize{display:none}.window__resize[data-resize=n],.window__resize[data-resize=s]{cursor:ns-resize;height:4px;left:8px;right:8px}.window__resize[data-resize=e],.window__resize[data-resize=w]{cursor:ew-resize;width:4px;top:8px;bottom:8px}.window__resize[data-resize=n]{top:-1px}.window__resize[data-resize=s]{bottom:-1px}.window__resize[data-resize=e]{right:-1px}.window__resize[data-resize=w]{left:-1px}.window__resize[data-resize=ne],.window__resize[data-resize=se],.window__resize[data-resize=sw],.window__resize[data-resize=nw]{width:8px;height:8px}.window__resize[data-resize=ne]{cursor:nesw-resize;top:-1px;right:-1px}.window__resize[data-resize=se]{cursor:nwse-resize;bottom:-1px;right:-1px}.window__resize[data-resize=sw]{cursor:nesw-resize;bottom:-1px;left:-1px}.window__resize[data-resize=nw]{cursor:nwse-resize;top:-1px;left:-1px}.window__client{flex:1;min-height:0;margin-top:2px;overflow:auto}@media (width<=640px){.window{width:100%;height:100%;top:0;left:0}.window:not(.is-active),.window__button[data-action=minimize],.window__button[data-action=maximize],.window__resize{display:none}}