/* ==========================================================================
   Windows 95 look & feel
   ========================================================================== */
@font-face{font-family:"MS Sans Serif";src:url(../fonts/ms_sans_serif.woff2) format("woff2");font-weight:400;font-style:normal}
@font-face{font-family:"MS Sans Serif";src:url(../fonts/ms_sans_serif_bold.woff2) format("woff2");font-weight:700;font-style:normal}

:root{
  --face:#c0c0c0; --hilight:#ffffff; --light:#dfdfdf; --shadow:#808080; --dkshadow:#000000;
  --title-active:#000080; --title-active2:#1084d0; --title-inactive:#808080; --title-inactive2:#b5b5b5; --title-text:#ffffff; --title-text-inactive:#c0c0c0;
  --desktop:#008080; --sel:#000080; --sel-text:#ffffff; --window:#ffffff; --window-text:#000000;
  --menu:#c0c0c0; --menu-text:#000000; --gray-text:#808080; --info:#ffffe1; --info-text:#000000;
  --font:11px "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  --mono:12px "Fixedsys", "Lucida Console", "Courier New", monospace;
  --taskbar-h:28px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;overflow:hidden;touch-action:manipulation}
body{font:var(--font);background:#000;color:var(--window-text);user-select:none;-webkit-user-select:none;cursor:url(../img/cursors/arrow.png) 0 0,default;line-height:1.2}
*{cursor:inherit}
input[type=text],input[type=password],textarea,[contenteditable=true],.dos-screen{cursor:url(../img/cursors/ibeam.png) 15 16,text}
img{image-rendering:pixelated;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor;pointer-events:none}
button,input,select,textarea{font:inherit;color:inherit}
u{text-decoration:underline}
.hidden{display:none !important}
.nowrap{white-space:nowrap}

/* ---- Bevels --------------------------------------------------------------- */
.raised{box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--face),inset -2px -2px var(--shadow),inset 2px 2px var(--hilight)}
.raised-thin{box-shadow:inset -1px -1px var(--shadow),inset 1px 1px var(--hilight)}
.sunken{box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow)}
.sunken-thin{box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow)}
.etched{box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--shadow),inset 2px 2px var(--hilight)}
.field{background:var(--window);color:var(--window-text);box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow);padding:3px 4px}

/* ---- Buttons -------------------------------------------------------------- */
.btn{display:inline-block;min-width:75px;height:23px;padding:0 8px;background:var(--face);border:0;outline:0;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilight),inset -2px -2px var(--shadow),inset 2px 2px var(--light);
  text-align:center;vertical-align:middle;line-height:21px;white-space:nowrap;position:relative}
.btn:active:not(:disabled),.btn.pressed{box-shadow:inset 1px 1px var(--dkshadow),inset -1px -1px var(--hilight),inset 2px 2px var(--shadow),inset -2px -2px var(--light);padding:1px 7px 0 9px}
.btn:focus,.btn.default{box-shadow:0 0 0 1px var(--dkshadow),inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilight),inset -2px -2px var(--shadow),inset 2px 2px var(--light)}
.btn:focus:active:not(:disabled){box-shadow:0 0 0 1px var(--dkshadow),inset 1px 1px var(--dkshadow),inset -1px -1px var(--hilight),inset 2px 2px var(--shadow),inset -2px -2px var(--light)}
.btn:focus>span{display:inline-block;padding:0 2px}
.btn:disabled,.btn.disabled{color:var(--shadow);text-shadow:1px 1px var(--hilight)}
.btn.sq{min-width:0;padding:0}
.tbtn{display:inline-flex;align-items:center;justify-content:center;background:var(--face);border:0;padding:0;box-shadow:none}
.tbtn:hover:not(.disabled){box-shadow:inset -1px -1px var(--shadow),inset 1px 1px var(--hilight)}
.tbtn:active:not(.disabled),.tbtn.checked{box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilight)}
.tbtn.disabled img{filter:grayscale(1) contrast(0.3) brightness(1.4)}

/* ---- Controls ------------------------------------------------------------- */
.tb{background:var(--window);color:var(--window-text);border:0;outline:0;padding:2px 3px;
  box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow);height:21px;user-select:text;-webkit-user-select:text}
.tb:disabled{background:var(--face);color:var(--shadow)}
textarea.tb{height:auto;resize:none;line-height:1.25}
.chk,.rad{display:inline-flex;align-items:center;gap:5px;height:16px;position:relative}
.chk input,.rad input{appearance:none;-webkit-appearance:none;width:13px;height:13px;margin:0;background:var(--window);
  box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow);flex:none;position:relative}
.chk input:disabled,.rad input:disabled{background:var(--face)}
.chk input:checked::after{content:"";position:absolute;left:3px;top:3px;width:7px;height:7px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'><path d='M6 0h1v3h-1zM5 1h1v3h-1zM4 2h1v3h-1zM3 3h1v3h-1zM2 2h1v3h-1zM1 1h1v3h-1zM0 0h1v3h-1z' fill='%23000'/></svg>") no-repeat}
.chk input:checked::after{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'><path fill='%23000' d='M6 0h1v2H6zM5 1h1v2H5zM4 2h1v2H4zM3 3h1v2H3zM2 2h1v2H2zM1 1h1v2H1zM0 0h1v2H0z' transform='translate(0 0)'/><path fill='%23000' d='M3 4h1v3H3zM2 3h1v3H2zM1 2h1v3H1zM0 1h1v3H0zM4 3h1v3H4zM5 2h1v3H5zM6 1h1v3H6z' opacity='0'/></svg>") no-repeat}
.chk input:checked::after{background:none;width:7px;height:7px;left:3px;top:2px;
  box-shadow:0 2px 0 0 #000,1px 3px 0 0 #000,2px 4px 0 0 #000,3px 3px 0 0 #000,4px 2px 0 0 #000,5px 1px 0 0 #000,6px 0 0 0 #000,
             0 3px 0 0 #000,1px 4px 0 0 #000,2px 5px 0 0 #000,3px 4px 0 0 #000,4px 3px 0 0 #000,5px 2px 0 0 #000,6px 1px 0 0 #000;width:1px;height:1px;background:transparent}
.rad input{border-radius:50%;box-shadow:none;background:transparent}
.rad input::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--window);
  border:1px solid var(--shadow);border-right-color:var(--hilight);border-bottom-color:var(--hilight);
  box-shadow:inset 1px 1px var(--dkshadow),inset -1px -1px var(--face)}
.rad input:disabled::before{background:var(--face)}
.rad input:checked::after{content:"";position:absolute;left:4px;top:4px;width:5px;height:5px;border-radius:50%;background:#000}
.chk span,.rad span{position:relative}
.chk input:focus+span,.rad input:focus+span{outline:1px dotted #000}
.dis{color:var(--shadow);text-shadow:1px 1px var(--hilight)}

/* Combo box / select */
.combo{display:inline-flex;height:21px;background:var(--window);
  box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow);position:relative;min-width:120px}
.combo .val{flex:1;padding:1px 3px;white-space:nowrap;overflow:hidden;text-overflow:clip;margin:2px;line-height:13px}
.combo .val.focus{background:var(--sel);color:var(--sel-text);outline:1px dotted #ff0;outline-offset:-1px}
.combo .arrow{width:16px;height:17px;margin:2px 2px 2px 0;background:var(--face);
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilight),inset -2px -2px var(--shadow),inset 2px 2px var(--light);position:relative}
.combo .arrow::after{content:"";position:absolute;left:4px;top:6px;border:4px solid transparent;border-top:4px solid #000;border-bottom:0}
.combo.disabled .arrow::after{border-top-color:var(--shadow);filter:drop-shadow(1px 1px 0 #fff)}
.combo.disabled{background:var(--face)}
.combo.disabled .val{color:var(--shadow);text-shadow:1px 1px #fff}
.combo:active .arrow{box-shadow:inset 1px 1px var(--dkshadow),inset -1px -1px var(--hilight),inset 2px 2px var(--shadow)}
.dropdown{position:absolute;background:var(--window);border:1px solid #000;z-index:100000;max-height:200px;overflow-y:auto;overflow-x:hidden}
.dropdown .it{padding:1px 3px;height:15px;line-height:13px;white-space:nowrap;display:flex;align-items:center;gap:4px}
.dropdown .it.sel,.dropdown .it:hover{background:var(--sel);color:var(--sel-text)}

/* List box */
.listbox{background:var(--window);box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow);padding:2px;overflow:auto}
.listbox .it{padding:0 2px;height:14px;line-height:13px;white-space:nowrap;display:flex;align-items:center;gap:4px}
.listbox .it.sel{background:var(--sel);color:var(--sel-text);outline:1px dotted #ff0;outline-offset:-1px}
.listbox.nofocus .it.sel{outline:none}

/* Group box */
.group{position:relative;border:0;margin:0;padding:12px 8px 8px;
  box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--shadow),inset 2px 2px var(--hilight)}
.group>legend{position:absolute;top:-7px;left:8px;background:var(--face);padding:0 2px;line-height:13px}

/* Tabs */
.tabs{display:flex;align-items:flex-end;padding-left:2px;position:relative;z-index:1;height:21px}
.tab{height:18px;padding:2px 8px 0;margin-right:-1px;background:var(--face);line-height:14px;position:relative;
  box-shadow:inset -1px 0 var(--dkshadow),inset 1px 1px var(--hilight),inset -2px 0 var(--shadow),inset 2px 2px var(--light);
  border-top-left-radius:2px;border-top-right-radius:2px}
.tab.active{height:21px;padding-top:3px;margin-top:-2px;margin-left:-2px;padding-left:10px;padding-right:10px;z-index:2;
  box-shadow:inset -1px 0 var(--dkshadow),inset 1px 1px var(--hilight),inset -2px 0 var(--shadow),inset 2px 2px var(--light)}
.tab.active::after{content:"";position:absolute;left:1px;right:1px;bottom:-1px;height:2px;background:var(--face)}
.tab.active>span{outline:1px dotted #000;outline-offset:1px}
.tabpage{background:var(--face);padding:12px 10px;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilight),inset -2px -2px var(--shadow),inset 2px 2px var(--light);position:relative}

/* Progress */
.progress{height:20px;background:var(--face);box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow);padding:3px;display:flex;gap:2px;overflow:hidden}
.progress i{display:block;width:8px;height:100%;background:var(--sel);flex:none}

/* Slider */
.slider{position:relative;height:28px;width:100%}
.slider .track{position:absolute;left:0;right:0;top:9px;height:4px;background:var(--face);
  box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow)}
.slider .thumb{position:absolute;top:2px;width:11px;height:21px;background:var(--face);
  clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilight),inset -2px -2px var(--shadow)}
.slider .thumb::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:6px;background:var(--face)}
.slider .ticks{position:absolute;left:5px;right:5px;top:25px;height:3px;display:flex;justify-content:space-between}
.slider .ticks i{width:1px;height:3px;background:#000}

/* Spinner */
.spin{display:inline-flex;flex-direction:column;width:16px;height:21px}
.spin .tbtn{height:10px;flex:1;box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilight),inset -2px -2px var(--shadow)}
.spin .tbtn::after{content:"";border:3px solid transparent;border-bottom:3px solid #000;border-top:0}
.spin .tbtn.dn::after{border:3px solid transparent;border-top:3px solid #000;border-bottom:0}

/* Scrollbars (WebKit) */
.scroll{overflow:auto}
@supports not selector(::-webkit-scrollbar){.scroll{scrollbar-width:auto;scrollbar-color:var(--face) var(--hilight)}}
.scroll::-webkit-scrollbar{width:16px;height:16px}
.scroll::-webkit-scrollbar-track{background-color:var(--face);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'><rect width='1' height='1' fill='white'/><rect x='1' y='1' width='1' height='1' fill='white'/></svg>");
  background-size:2px 2px}
.scroll::-webkit-scrollbar-thumb{background:var(--face);
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilight),inset -2px -2px var(--shadow),inset 2px 2px var(--light)}
.scroll::-webkit-scrollbar-corner{background:var(--face)}
.scroll::-webkit-scrollbar-button{display:block;width:16px;height:16px;background-color:var(--face);background-repeat:no-repeat;background-position:center;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilight),inset -2px -2px var(--shadow),inset 2px 2px var(--light)}
.scroll::-webkit-scrollbar-button:active{box-shadow:inset 1px 1px var(--dkshadow),inset -1px -1px var(--hilight),inset 2px 2px var(--shadow)}
.scroll::-webkit-scrollbar-button:vertical:decrement{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'><path d='M3 0h1v1H3zM2 1h3v1H2zM1 2h5v1H1zM0 3h7v1H0z' fill='black'/></svg>")}
.scroll::-webkit-scrollbar-button:vertical:increment{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'><path d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z' fill='black'/></svg>")}
.scroll::-webkit-scrollbar-button:horizontal:decrement{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'><path d='M3 0h1v7H3zM2 1h1v5H2zM1 2h1v3H1zM0 3h1v1H0z' fill='black'/></svg>")}
.scroll::-webkit-scrollbar-button:horizontal:increment{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'><path d='M0 0h1v7H0zM1 1h1v5H1zM2 2h1v3H2zM3 3h1v1H3z' fill='black'/></svg>")}
.scroll::-webkit-scrollbar-button:vertical:start:increment,.scroll::-webkit-scrollbar-button:vertical:end:decrement,
.scroll::-webkit-scrollbar-button:horizontal:start:increment,.scroll::-webkit-scrollbar-button:horizontal:end:decrement{display:none}

/* ---- Desktop -------------------------------------------------------------- */
#desktop{position:absolute;left:0;top:0;right:0;bottom:var(--taskbar-h);z-index:0;background-color:var(--desktop);overflow:hidden}
#desktop.wall-center{background-repeat:no-repeat;background-position:center}
#desktop.wall-tile{background-repeat:repeat}
#desktop.wall-stretch{background-repeat:no-repeat;background-size:100% 100%}
#icons{position:absolute;inset:0}
.dicon{position:absolute;width:75px;height:75px;display:flex;flex-direction:column;align-items:center;padding-top:2px}
.dicon .img{width:32px;height:32px;position:relative;flex:none}
.dicon .img img{display:block;width:32px;height:32px}
.dicon .img .tint{display:none;position:absolute;inset:0;background:var(--sel);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'><rect width='1' height='1' fill='%23000080'/><rect x='1' y='1' width='1' height='1' fill='%23000080'/></svg>");background-color:transparent;background-size:2px 2px}
.dicon.sel .img .tint{display:block}
.dicon .lbl{margin-top:3px;max-width:74px;padding:1px 2px 2px;color:#fff;text-align:center;line-height:12px;word-wrap:break-word;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;background:var(--desktop-label,transparent)}
#desktop.has-wall .dicon .lbl{background:var(--desktop)}
.dicon.sel .lbl{background:var(--sel);color:var(--sel-text);outline:1px dotted #ffff00;outline-offset:-1px;-webkit-line-clamp:unset;overflow:visible;position:relative;z-index:2}
.dicon.sel.inactive .lbl{outline:none}
.dicon .lbl input{width:100%;font:inherit;text-align:center;border:1px solid #000;padding:0 1px;background:#fff;color:#000;outline:0;user-select:text;-webkit-user-select:text}
#rubber{position:absolute;border:1px dotted #fff;mix-blend-mode:difference;pointer-events:none;display:none}

/* ---- Windows -------------------------------------------------------------- */
.win{position:absolute;display:flex;flex-direction:column;background:var(--face);padding:3px;min-width:112px;min-height:27px;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--face),inset -2px -2px var(--shadow),inset 2px 2px var(--hilight)}
.win.maximized{box-shadow:none;padding:0;}
.win.noframe{box-shadow:none;padding:0}
.win.dlg{min-height:0}
.win .titlebar{height:18px;flex:none;display:flex;align-items:center;background:linear-gradient(90deg,var(--title-inactive),var(--title-inactive2));color:var(--title-text-inactive);padding:1px 2px 1px 2px;gap:3px;font-weight:700;overflow:hidden;touch-action:none}
.win.active .titlebar{background:linear-gradient(90deg,var(--title-active),var(--title-active2));color:var(--title-text)}
.win .titlebar .ticon{width:16px;height:16px;flex:none;display:flex;align-items:center;justify-content:center}
.win .titlebar .ticon img{width:16px;height:16px}
.win .titlebar .ttext{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0;padding-left:1px;line-height:16px}
.win .titlebar .tbtns{display:flex;gap:0;flex:none;align-items:center}
.cbtn{width:16px;height:14px;background:var(--face);position:relative;flex:none;margin-left:0;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilight),inset -2px -2px var(--shadow),inset 2px 2px var(--light);background-repeat:no-repeat;background-position:center}
.cbtn.close{margin-left:2px}
.cbtn.help{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='9' shape-rendering='crispEdges'><path d='M1 0h4v1H1zM0 1h2v2H0zM4 1h2v3H4zM3 4h2v1H3zM2 5h2v2H2zM2 8h2v1H2z' fill='black'/></svg>");background-position:5px 2px}
.cbtn.help b{display:none}
.cbtn:active{box-shadow:inset 1px 1px var(--dkshadow),inset -1px -1px var(--hilight),inset 2px 2px var(--shadow);background-position:calc(50% + 1px) calc(50% + 1px)}
.cbtn.disabled{pointer-events:none}
.cbtn.min{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='2' shape-rendering='crispEdges'><rect width='6' height='2' fill='black'/></svg>");background-position:4px 9px}
.cbtn.min:active{background-position:5px 10px}
.cbtn.max{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'><path d='M0 0h9v9H0zM1 2v6h7V2z' fill='black' fill-rule='evenodd'/></svg>")}
.cbtn.restore{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='9' shape-rendering='crispEdges'><path d='M2 0h6v6H6V2H2zM0 3h6v6H0zM1 5v3h4V5z' fill='black' fill-rule='evenodd'/></svg>")}
.cbtn.close{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'><path d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0z' fill='black'/></svg>")}
.cbtn.disabled.max{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'><path d='M1 1h9v9H1zM2 3v6h7V3z' fill='white' fill-rule='evenodd'/><path d='M0 0h9v9H0zM1 2v6h7V2z' fill='%23808080' fill-rule='evenodd'/></svg>")}
.cbtn.disabled.min{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='3' shape-rendering='crispEdges'><rect x='1' y='1' width='6' height='2' fill='white'/><rect width='6' height='2' fill='%23808080'/></svg>")}
.win .menubar{flex:none;display:flex;height:19px;padding:1px 0 0;align-items:center}
.win .menubar .mi{padding:2px 6px 3px;height:17px;line-height:12px;white-space:nowrap}
.win .menubar .mi.open,.win .menubar .mi.hot{background:var(--sel);color:var(--sel-text)}
.win .menubar .mi.disabled{color:var(--shadow);text-shadow:1px 1px var(--hilight)}
.win .toolbar{flex:none;display:flex;align-items:center;gap:0;padding:1px 2px;border-top:1px solid var(--shadow);box-shadow:inset 0 1px var(--hilight);min-height:28px}
.win .toolbar .tbtn{width:23px;height:22px}
.win .toolbar .tbtn.wide{width:auto;padding:0 4px;gap:3px}
.win .toolbar .sep{width:1px;height:22px;background:var(--shadow);box-shadow:1px 0 var(--hilight);margin:0 3px}
.win .client{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.win .client.white{background:var(--window);color:var(--window-text);box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow)}
.win .statusbar{flex:none;display:flex;gap:2px;height:20px;padding-top:2px}
.win .statusbar .pane{flex:1;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow);padding:2px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:13px}
.win .statusbar .pane.fixed{flex:none}
.win .statusbar .grip{width:14px;flex:none;position:relative}
.win:not(.maximized) .statusbar .grip{cursor:url(../img/cursors/sizenwse.png) 16 16,se-resize}
.win:not(.maximized) .statusbar .grip::after{content:"";position:absolute;right:1px;bottom:1px;width:12px;height:12px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'><path d='M11 1h1v1h-1zM10 2h1v1h-1zM9 3h1v1H9zM8 4h1v1H8zM7 5h1v1H7zM6 6h1v1H6zM5 7h1v1H5zM4 8h1v1H4zM3 9h1v1H3zM2 10h1v1H2zM1 11h1v1H1zM11 5h1v1h-1zM10 6h1v1h-1zM9 7h1v1H9zM8 8h1v1H8zM7 9h1v1H7zM6 10h1v1H6zM5 11h1v1H5zM11 9h1v1h-1zM10 10h1v1h-1zM9 11h1v1H9z' fill='white'/><path d='M10 1h1v1h-1zM9 2h1v1H9zM8 3h1v1H8zM7 4h1v1H7zM6 5h1v1H6zM5 6h1v1H5zM4 7h1v1H4zM3 8h1v1H3zM2 9h1v1H2zM1 10h1v1H1zM10 5h1v1h-1zM9 6h1v1H9zM8 7h1v1H8zM7 8h1v1H7zM6 9h1v1H6zM5 10h1v1H5zM10 9h1v1h-1zM9 10h1v1H9zM9 1h1v1H9zM8 2h1v1H8zM7 3h1v1H7zM6 4h1v1H6zM5 5h1v1H5zM4 6h1v1H4zM3 7h1v1H3zM2 8h1v1H2zM1 9h1v1H1zM9 5h1v1H9zM8 6h1v1H8zM7 7h1v1H7zM6 8h1v1H6zM5 9h1v1H5zM9 9h1v1H9z' fill='%23808080'/></svg>")}
.win .edge{position:absolute;z-index:5;touch-action:none}
.win .edge.n{left:0;right:0;top:0;height:3px;cursor:url(../img/cursors/sizens.png) 15 16,n-resize}.win .edge.s{left:0;right:0;bottom:0;height:3px;cursor:url(../img/cursors/sizens.png) 15 16,s-resize}
.win .edge.w{top:0;bottom:0;left:0;width:3px;cursor:url(../img/cursors/sizewe.png) 16 16,w-resize}.win .edge.e{top:0;bottom:0;right:0;width:3px;cursor:url(../img/cursors/sizewe.png) 16 16,e-resize}
.win .edge.nw{left:0;top:0;width:14px;height:14px;cursor:url(../img/cursors/sizenwse.png) 16 16,nw-resize}.win .edge.ne{right:0;top:0;width:14px;height:14px;cursor:url(../img/cursors/sizenesw.png) 16 16,ne-resize}
.win .edge.sw{left:0;bottom:0;width:14px;height:14px;cursor:url(../img/cursors/sizenesw.png) 16 16,sw-resize}.win .edge.se{right:0;bottom:0;width:14px;height:14px;cursor:url(../img/cursors/sizenwse.png) 16 16,se-resize}
.win.maximized .edge,.win.fixed .edge{display:none}
.win .body{flex:1;position:relative;min-height:0;display:flex;flex-direction:column}
.win .dlgbody{padding:10px 12px}
.win .dlgbtns{display:flex;justify-content:flex-end;gap:6px;padding:0 12px 12px}
.win .dlgbtns.center{justify-content:center}
#dragframe{position:absolute;pointer-events:none;z-index:999999;display:none;box-sizing:border-box;padding:4px;mix-blend-mode:difference;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'><rect width='1' height='1' fill='white'/><rect x='1' y='1' width='1' height='1' fill='white'/></svg>") 0 0/2px 2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
#dragframe.thin{padding:3px}
.modal-shield{position:absolute;inset:0;z-index:5;background:transparent}

/* ---- Menus ---------------------------------------------------------------- */
.menu{position:absolute;z-index:200000;background:var(--menu);color:var(--menu-text);padding:2px;min-width:100px;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--face),inset -2px -2px var(--shadow),inset 2px 2px var(--hilight)}
.menu .item{position:relative;display:flex;align-items:center;height:17px;padding:0 18px 0 0;white-space:nowrap;line-height:13px}
.menu .item .ic{width:22px;height:17px;flex:none;display:flex;align-items:center;justify-content:center;position:relative}
.menu .item .ic img{width:16px;height:16px}
.menu .item .ic.check::after{content:"";position:absolute;left:8px;top:4px;width:7px;height:7px;background:transparent;
  box-shadow:0 2px 0 0 currentColor,1px 3px 0 0 currentColor,2px 4px 0 0 currentColor,3px 3px 0 0 currentColor,4px 2px 0 0 currentColor,5px 1px 0 0 currentColor,6px 0 0 0 currentColor,0 3px 0 0 currentColor,1px 4px 0 0 currentColor,2px 5px 0 0 currentColor,3px 4px 0 0 currentColor,4px 3px 0 0 currentColor,5px 2px 0 0 currentColor,6px 1px 0 0 currentColor;width:1px;height:1px}
.menu .item .ic.radio::after{content:"";position:absolute;left:8px;top:6px;width:6px;height:6px;border-radius:50%;background:currentColor}
.menu .item .tx{flex:1;padding-right:8px}
.menu .item .sc{margin-left:16px}
.menu .item .arr{position:absolute;right:6px;top:5px;border:4px solid transparent;border-left:4px solid currentColor;border-right:0}
.menu .item.hot{background:var(--sel);color:var(--sel-text)}
.menu .item.disabled{color:var(--shadow);text-shadow:1px 1px var(--hilight)}
.menu .item.disabled.hot{text-shadow:none}
.menu .item.disabled img{filter:grayscale(1) contrast(0.4) brightness(1.3)}
.menu .sep{height:1px;background:var(--shadow);box-shadow:0 1px var(--hilight);margin:3px 1px 4px}
.menu.big .item{height:32px}
.menu.big .item .ic{width:40px;height:32px}
.menu.big .item .ic img{width:32px;height:32px}
.menu.big .item.sm{height:20px}
.menu.big .item.sm .ic{height:20px}
.menu.big .item.sm .ic img{width:16px;height:16px}
.menu.icons .item{height:22px}
.menu.icons .item .ic{height:22px}

/* ---- Taskbar -------------------------------------------------------------- */
#taskbar{position:absolute;left:0;right:0;bottom:0;height:var(--taskbar-h);background:var(--face);display:flex;align-items:center;padding:2px 2px 2px 2px;gap:0;
  box-shadow:inset 0 1px var(--hilight);border-top:1px solid var(--face);z-index:100000}
#taskbar.autohide{transition:bottom .15s}
#startbtn{position:relative;height:22px;min-width:54px;padding:0 4px;display:flex;align-items:center;gap:3px;font-weight:700;flex:none;background:var(--face);
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilight),inset -2px -2px var(--shadow),inset 2px 2px var(--light)}
#startbtn img{width:16px;height:16px;flex:none}
#startbtn span{position:relative;top:1px}
#startbtn.pressed,#startbtn:active{box-shadow:inset 1px 1px var(--dkshadow),inset -1px -1px var(--hilight),inset 2px 2px var(--shadow),inset -2px -2px var(--light);padding:1px 3px 0 5px}
#startbtn.pressed::after{content:'';position:absolute;inset:3px;padding:1px;pointer-events:none;box-sizing:border-box;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'><rect x='1' width='1' height='1'/><rect y='1' width='1' height='1'/></svg>") 0 0/2px 2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.tsep{width:1px;height:22px;flex:none;background:var(--shadow);box-shadow:1px 0 var(--hilight);margin:0 3px 0 4px}
#tasks{flex:1;display:flex;gap:3px;height:22px;overflow:hidden;min-width:0;margin-left:4px}
.task{flex:1 1 160px;max-width:160px;min-width:30px;height:22px;display:flex;align-items:center;gap:4px;padding:0 4px 0 3px;background:var(--face);
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilight),inset -2px -2px var(--shadow),inset 2px 2px var(--light);white-space:nowrap;overflow:hidden}
.task img{width:16px;height:16px;flex:none}
.task span{overflow:hidden;text-overflow:ellipsis;flex:1}
.task.active{font-weight:700;padding:1px 3px 0 4px;box-shadow:inset 1px 1px var(--dkshadow),inset -1px -1px var(--hilight),inset 2px 2px var(--shadow),inset -2px -2px var(--light);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'><rect width='1' height='1' fill='white'/><rect x='1' y='1' width='1' height='1' fill='white'/></svg>");background-size:2px 2px}
.task.min-pressed{box-shadow:inset 1px 1px var(--dkshadow),inset -1px -1px var(--hilight),inset 2px 2px var(--shadow)}
#tray{flex:none;height:22px;display:flex;align-items:center;gap:4px;padding:0 8px 0 4px;margin-left:3px;
  box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow)}
#tray img{width:16px;height:16px}
#clock{padding:0 2px;min-width:50px;text-align:center;line-height:20px;white-space:pre}
.tooltip{position:absolute;z-index:300000;background:var(--info);color:var(--info-text);border:1px solid #000;padding:2px 4px 3px;white-space:nowrap;pointer-events:none}

/* ---- Start menu ----------------------------------------------------------- */
.menu.startmenu{display:flex;padding:3px}
.menu.startmenu .banner{width:21px;background:#000080 url(../img/98/startbanner.png) left bottom no-repeat;position:relative;flex:none;margin-right:1px;align-self:stretch}
.menu.startmenu .banner span{position:absolute;left:0;bottom:4px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font:700 17px Arial,Helvetica,sans-serif;color:#c0c0c0;letter-spacing:0;line-height:21px;width:21px;text-align:left}
.menu.startmenu .banner span b{color:#fff}
.menu.startmenu .items{display:flex;flex-direction:column;min-width:140px}
.menu.startmenu .items .item{height:32px;padding-right:24px}
.menu.startmenu .items .item .ic{width:42px;height:32px}
.menu.startmenu .items .item .ic img{width:32px;height:32px}
.menu.startmenu .items .item .arr{right:8px;top:12px}
.menu.startmenu .items .sep{margin:3px 0 4px}
.menu.startmenu.small .banner{display:none}
.menu.startmenu.small .items .item{height:20px}
.menu.startmenu.small .items .item .ic{width:26px;height:20px}
.menu.startmenu.small .items .item .ic img{width:16px;height:16px}
.menu.startmenu.small .items .item .arr{top:6px}
.menu.startmenu .items .item.sm{height:20px}
.menu.startmenu .items .item.sm .ic{height:20px}
.menu.startmenu .items .item.sm .ic img{width:16px;height:16px}
.menu.icons .item{height:22px}
.menu.icons .item .ic{height:22px}

/* ---- Explorer views ------------------------------------------------------- */
.explorer{display:flex;flex:1;min-height:0}
.explorer .tree{width:180px;flex:none;background:var(--window);overflow:auto;padding:1px;
  box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow)}
.explorer .splitter{width:3px;flex:none;cursor:url(../img/cursors/sizewe.png) 16 16,e-resize}
.explorer .contents{flex:1;min-width:0;display:flex;flex-direction:column}
.explorer .pane-head{height:16px;flex:none;padding:1px 4px;box-shadow:inset -1px -1px var(--shadow),inset 1px 1px var(--hilight);margin-bottom:1px;white-space:nowrap;overflow:hidden}
.tnode{display:flex;align-items:center;height:16px;white-space:nowrap}
.tnode .tg{width:9px;height:9px;flex:none;border:1px solid var(--shadow);background:var(--window);position:relative;margin:0 4px 0 0}
.tnode .tg.none{border:0;background:transparent}
.tnode .tg::before{content:"";position:absolute;left:1px;top:3px;width:5px;height:1px;background:#000}
.tnode .tg.closed::after{content:"";position:absolute;left:3px;top:1px;width:1px;height:5px;background:#000}
.tnode .tg.none::before,.tnode .tg.none::after{display:none}
.tnode img{width:16px;height:16px;margin-right:3px;flex:none}
.tnode .nm{padding:0 2px;line-height:13px}
.tnode.sel .nm{background:var(--sel);color:var(--sel-text);outline:1px dotted #ff0;outline-offset:-1px}
.tree.nofocus .tnode.sel .nm{background:var(--face);color:#000;outline:none}
.tkids{padding-left:19px;position:relative}
.tkids::before{content:"";position:absolute;left:8px;top:0;bottom:8px;border-left:1px dotted var(--shadow)}
.tnode .ln{width:9px;flex:none;height:16px;position:relative;margin-right:4px}
.tnode .ln::before{content:"";position:absolute;left:-11px;top:8px;width:11px;border-top:1px dotted var(--shadow)}
.fileview{flex:1;background:var(--window);position:relative;overflow:auto;
  box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow)}
.fileview.large{display:flex;flex-wrap:wrap;align-content:flex-start;padding:4px}
.fileview.large .fi{width:75px;height:72px;display:flex;flex-direction:column;align-items:center;padding-top:3px;margin:0 0 2px}
.fileview.large .fi .img{width:32px;height:32px;position:relative}
.fileview.large .fi .img img{width:32px;height:32px}
.fileview.large .fi .lbl{margin-top:3px;max-width:74px;text-align:center;line-height:12px;padding:1px 2px 2px;word-wrap:break-word;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fileview.small,.fileview.list{display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;padding:2px}
.fileview.small .fi,.fileview.list .fi{display:flex;align-items:center;height:17px;padding:0 2px;width:140px;white-space:nowrap}
.fileview.small .fi img,.fileview.list .fi img{width:16px;height:16px;margin-right:3px}
.fileview.details{display:block;padding:0}
.fileview.details table{border-collapse:collapse;width:100%}
.fileview.details th{text-align:left;font-weight:400;height:18px;padding:0 4px;background:var(--face);position:sticky;top:0;white-space:nowrap;
  box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilight),inset -2px -2px var(--shadow);}
.fileview.details td{height:17px;padding:0 4px;white-space:nowrap;line-height:13px}
.fileview.details td.r{text-align:right}
.fileview.details td img{width:16px;height:16px;margin-right:3px;vertical-align:middle}
.fi .lbl,.fi .nm{position:relative}
.fi .img .tint{display:none;position:absolute;inset:0;background-color:transparent;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'><rect width='1' height='1' fill='%23000080'/><rect x='1' y='1' width='1' height='1' fill='%23000080'/></svg>");background-size:2px 2px;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.fi.sel .img .tint{display:block}
.fi.sel .lbl,.fi.sel .nm,tr.fi.sel td .nm{background:var(--sel);color:var(--sel-text);outline:1px dotted #ff0;outline-offset:-1px;-webkit-line-clamp:unset !important;overflow:visible !important}
.fileview.nofocus .fi.sel .lbl,.fileview.nofocus .fi.sel .nm{outline:none}
.fi .nm{padding:0 2px;line-height:13px}
.fi .lbl input,.fi .nm input{font:inherit;border:1px solid #000;padding:0 1px;outline:0;background:#fff;color:#000;user-select:text;-webkit-user-select:text}
.fileview.large .fi .lbl input{width:100%;text-align:center}

/* ---- Message box ---------------------------------------------------------- */
.msgbox{display:flex;gap:12px;padding:12px 14px 10px 12px;align-items:flex-start}
.msgbox img{width:32px;height:32px;flex:none}
.msgbox .text{padding-top:4px;max-width:360px;line-height:13px;white-space:pre-wrap}

/* ---- Property sheet / dialog layouts ------------------------------------- */
.props{display:flex;flex-direction:column;padding:6px 6px 0;flex:1;min-height:0}
.props .tabpage{flex:1;min-height:0;overflow:hidden}
.row{display:flex;align-items:center;gap:6px}
.col{display:flex;flex-direction:column;gap:6px}
.spacer{flex:1}
label.lab{display:inline-block}
hr.sep{border:0;height:2px;border-top:1px solid var(--shadow);border-bottom:1px solid var(--hilight);margin:8px 0}

/* ---- Boot / shutdown screens --------------------------------------------- */
#boot{position:absolute;inset:0;background:#000;z-index:999990;display:flex;align-items:center;justify-content:center;color:#c0c0c0;font:var(--mono)}
#boot .dos{position:absolute;left:0;top:0;padding:4px 8px;white-space:pre;font:16px "Courier New",monospace;color:#c0c0c0;line-height:19px}
#boot .logo{position:absolute;inset:0;display:none;background:#000;overflow:hidden}
#boot .logo .bootcv{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:100%;aspect-ratio:4/3;max-width:100%;image-rendering:pixelated}
#boot .logo .sky{position:absolute;inset:0;background:linear-gradient(#5aa0e6 0%,#7fbcf2 35%,#a9d4f7 60%,#d6ebfb 100%)}
#boot .logo .cloud{position:absolute;background:#fff;border-radius:50%;filter:blur(1px);opacity:.95}
#boot .logo .center{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:30px;white-space:nowrap}
#boot .logo .wordmark{color:#000;font:700 22px "Franklin Gothic Medium","Arial Black",Arial,sans-serif;line-height:1.1;text-align:left}
#boot .logo .wordmark small{display:block;font:700 15px Arial,sans-serif;letter-spacing:1px}
#boot .logo .wordmark big{display:block;font:900 64px "Arial Black",Arial,sans-serif;letter-spacing:-1px;margin-top:-6px}
#boot .logo .bar{position:absolute;left:0;right:0;bottom:0;height:5%;background:#5590d8;overflow:hidden}
#boot .logo .bar i{position:absolute;top:3px;height:10px;width:100%;
  background:linear-gradient(90deg,#5590d8 0%,#5590d8 55%,#a0c8f0 62%,#e8f4ff 70%,#a0c8f0 78%,#5590d8 85%);
  background-size:400px 100%;background-repeat:repeat-x;top:20%;height:60%;animation:bootbar 1.4s linear infinite}
@keyframes bootbar{from{background-position:0 0}to{background-position:400px 0}}
#shutdown{position:absolute;inset:0;background:#000;z-index:999995;display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center}
#shutdown .msg{font:400 36px Arial,Helvetica,sans-serif;color:#f07828;letter-spacing:0px;line-height:1.15}
#shutdown .msg.wait{position:absolute;left:0;right:0;top:36%;text-align:center}
#shutdown .msg.safe{color:#f07828;font-size:36px}
#shutdown .sub{color:#c0c0c0;font:16px Arial,sans-serif;margin-top:30px}
#screensaver{position:absolute;inset:0;background:#000;z-index:999980;display:none}
#screensaver canvas{position:absolute;inset:0;width:100%;height:100%}

/* ---- Notepad -------------------------------------------------------------- */
.notepad-text{flex:1;min-height:0;height:0;width:100%;border:0;outline:0;resize:none;box-sizing:border-box;padding:1px 2px;background:var(--window);color:var(--window-text);font:700 12px/14px "Fixedsys","Lucida Console","Courier New",monospace;white-space:pre;overflow:scroll;user-select:text;-webkit-user-select:text;margin:0}
.notepad-text.wrap{white-space:pre-wrap;overflow:auto}

/* ---- MS-DOS prompt -------------------------------------------------------- */
.dos-screen{flex:1;background:#000;color:#c0c0c0;font:16px "Courier New","Lucida Console",monospace;line-height:16px;padding:2px 4px;overflow:auto;white-space:pre-wrap;word-break:break-all;user-select:text;-webkit-user-select:text}
.dos-screen .cur{display:inline-block;width:9px;height:3px;background:#c0c0c0;vertical-align:-3px;animation:blink 1s steps(1) infinite}
.dos-screen textarea{position:absolute;opacity:0;left:0;top:0;width:1px;height:1px}
@keyframes blink{50%{opacity:0}}

/* ---- Calculator ----------------------------------------------------------- */
.calc{padding:6px 7px 7px}
.calc .display{height:24px;background:#fff;text-align:right;padding:4px 4px;margin-bottom:8px;font:13px "MS Sans Serif",Arial,sans-serif;
  box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow);user-select:text}
.calc .row1{display:flex;gap:4px;margin-bottom:6px;align-items:center}
.calc .memo{width:27px;height:25px;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow);text-align:center;line-height:25px;margin-right:6px}
.calc .grid{display:grid;grid-template-columns:36px 6px repeat(5,36px);grid-auto-rows:29px;gap:2px 4px;align-items:center}
.calc .btn{min-width:0;height:27px;padding:0;font-weight:400}
.calc .btn.red{color:#ff0000}.calc .btn.blue{color:#0000ff}.calc .btn.navy{color:#000080}
.calc .btn.wide{width:60px}

/* ---- Minesweeper ---------------------------------------------------------- */
.mine{padding:6px;background:var(--face);width:max-content}
.mine .frame{box-shadow:inset -3px -3px var(--hilight),inset 3px 3px var(--shadow);padding:6px}
.mine .top{display:flex;justify-content:space-between;align-items:center;padding:4px 5px;box-shadow:inset -2px -2px var(--hilight),inset 2px 2px var(--shadow);margin-bottom:6px}
.mine .lcd{display:flex;width:41px;height:25px;padding:1px;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow);background:#000}
.mine .lcd i{display:block;width:13px;height:23px;background:url(../img/mine/digits.png) 0 0 no-repeat}
.mine .face{width:24px;height:24px;background:url(../img/mine/faces.png) 0 0 no-repeat}
.mine .face.oh{background-position:0 -72px}.mine .face.cool{background-position:0 -24px}.mine .face.dead{background-position:0 -48px}.mine .face:active{background-position:0 -96px}
.mine .grid{display:grid;box-shadow:inset -3px -3px var(--hilight),inset 3px 3px var(--shadow);padding:3px;background:var(--face)}
.mine .c{width:16px;height:16px;background:url(../img/mine/tiles.png) 0 0 no-repeat}

/* ---- Solitaire ------------------------------------------------------------ */
.sol{flex:1;background:#008000;position:relative;overflow:hidden}
.card{position:absolute;width:71px;height:96px;overflow:hidden}
.card img{display:block;width:71px;height:96px;image-rendering:pixelated}
.card.slot{background:transparent;border:1px solid #004000;border-radius:5px;box-shadow:inset 1px 1px #005000}
.card.slot.k::after{content:"K";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#006000;font-size:40px}
.card.slot.o{border:0;box-shadow:none;background:url(../img/cards/68.png)}

/* ---- Paint ---------------------------------------------------------------- */
.paint{display:flex;flex:1;min-height:0}
.paint .tools{width:56px;flex:none;padding:3px 2px;display:flex;flex-direction:column;align-items:center}
.paint .tools .tgrid{display:grid;grid-template-columns:25px 25px;gap:0}
.paint .tools .tgrid .tbtn{width:25px;height:25px;background:var(--face)}
.paint .tools .tgrid .tbtn.checked{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'><rect width='1' height='1' fill='white'/><rect x='1' y='1' width='1' height='1' fill='white'/></svg>");background-size:2px 2px}
.paint .tools .opts{margin-top:4px;width:42px;height:66px;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow);display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:4px}
.paint .tools .opts i{display:block;background:#000;border-radius:50%}
.paint .tools .opts i.sel{outline:1px solid #000;outline-offset:4px;background:#fff;box-shadow:0 0 0 2px var(--sel)}
.paint .canvaswrap{flex:1;background:var(--shadow);overflow:auto;position:relative;padding:4px;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow)}
.paint canvas{display:block;background:#fff;image-rendering:pixelated}
.paint .colors{height:46px;flex:none;display:flex;align-items:center;padding:3px 4px;gap:6px}
.paint .colors .cur{width:31px;height:31px;position:relative;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow)}
.paint .colors .cur .fg{position:absolute;left:4px;top:4px;width:15px;height:15px;border:1px solid #000;z-index:2;background:#000}
.paint .colors .cur .bg{position:absolute;left:12px;top:12px;width:15px;height:15px;border:1px solid #000;background:#fff}
.paint .colors .pal{display:grid;grid-template-columns:repeat(14,16px);grid-template-rows:16px 16px;gap:0;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow)}
.paint .colors .pal i{display:block;width:16px;height:16px;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow)}
.paint .colors .pal i>b{display:block;width:12px;height:12px;margin:2px}

/* ---- Help ----------------------------------------------------------------- */
.help-body{flex:1;background:var(--window);padding:8px 12px;overflow:auto;user-select:text;-webkit-user-select:text;font:12px Arial,sans-serif;line-height:1.35}
.help-body h1{font:700 15px Arial,sans-serif;color:#000;margin:0 0 8px}
.help-body h2{font:700 12px Arial,sans-serif;margin:12px 0 4px}
.help-body a{color:#008000;text-decoration:underline}
.help-body p{margin:0 0 8px}
.help-topics{flex:1;background:var(--window);overflow:auto;padding:4px}
.help-topics .bk{display:flex;align-items:center;height:18px;gap:4px;white-space:nowrap}
.help-topics .bk img{width:16px;height:16px}
.help-topics .bk.sel span{background:var(--sel);color:var(--sel-text)}
.help-topics .kids{padding-left:18px}

/* ---- Welcome -------------------------------------------------------------- */
.welcome{display:flex;gap:10px;padding:8px 10px 10px}
.welcome .left{flex:1;display:flex;flex-direction:column}
.welcome .title{font:700 24px "Times New Roman",serif;color:#000080;margin:4px 0 8px;letter-spacing:0}
.welcome .tip{flex:1;background:var(--window);padding:12px;display:flex;gap:10px;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow)}
.welcome .tip img{width:32px;height:32px;flex:none}
.welcome .tip .t{font:700 11px "MS Sans Serif",Arial;margin-bottom:6px}
.welcome .right{display:flex;flex-direction:column;gap:6px;width:150px}
.welcome .right .btn{width:150px}

/* ---- Run / Find / Date-Time --------------------------------------------- */
.clockface{width:120px;height:120px;position:relative;margin:0 auto;border-radius:50%;background:var(--face);box-shadow:inset -2px -2px var(--hilight),inset 2px 2px var(--shadow)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);background:var(--window);box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow);padding:3px}
.cal div{text-align:center;height:16px;line-height:16px}
.cal div.h{font-weight:400;border-bottom:1px solid #808080;margin-bottom:2px;color:#808080}
.cal div.sel{background:var(--sel);color:var(--sel-text)}
.cal div.x{color:var(--shadow)}
.monitor{width:186px;height:171px;margin:0 auto 6px;position:relative;background:url(../img/cpl/monitor.png) no-repeat}
.monitor .screen{position:absolute;left:16px;top:17px;width:152px;height:110px;overflow:hidden;background:var(--desktop)}
.monitor .screen .tb{position:absolute;left:0;right:0;bottom:0;height:7px;background:#c0c0c0;box-shadow:inset 0 1px #fff;padding:0}
.monitor .screen .tb i{position:absolute;left:1px;top:1px;width:12px;height:5px;background:#c0c0c0;box-shadow:inset -1px -1px #000,inset 1px 1px #fff}
.apprev{width:100%;height:160px;position:relative;background:var(--desktop);overflow:hidden;margin-bottom:8px}
.apprev .w{position:absolute;background:var(--face);padding:2px;box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--face),inset -2px -2px var(--shadow),inset 2px 2px var(--hilight)}
.apprev .w .t{height:14px;background:linear-gradient(90deg,var(--title-inactive),var(--title-inactive2));color:var(--title-text-inactive);font-weight:700;padding:0 3px;line-height:14px;font-size:11px}
.apprev .w.a .t{background:linear-gradient(90deg,var(--title-active),var(--title-active2));color:var(--title-text)}
.apprev .w .b{background:var(--window);color:var(--window-text);padding:3px;height:40px;font-size:11px}
.apprev .w .m{height:14px;background:var(--face);padding:0 3px;line-height:14px}
.apprev .w .m span{background:var(--sel);color:var(--sel-text);padding:0 2px}
.apprev .w .m span.n{background:none;color:#000}
.apprev .mb{position:absolute;background:var(--face);padding:2px;box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--face),inset -2px -2px var(--shadow),inset 2px 2px var(--hilight)}
.apprev .mb .t{height:14px;background:linear-gradient(90deg,var(--title-active),var(--title-active2));color:var(--title-text);font-weight:700;padding:0 3px;line-height:14px}
.apprev .mb .bt{display:inline-block;min-width:50px;height:18px;margin:6px 10px 4px;line-height:16px;text-align:center;background:var(--face);box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilight),inset -2px -2px var(--shadow)}
.sysinfo{display:flex;gap:16px;align-items:flex-start}
.sysinfo img{width:48px;height:48px}

/* Blue screen */
#bsod{position:absolute;inset:0;background:#0000a8;color:#c0c0c0;z-index:999999;display:none;font:16px "Courier New",monospace;align-items:center;justify-content:center;text-align:center;white-space:pre-wrap;line-height:19px;padding:40px}
#bsod b{background:#c0c0c0;color:#0000a8;font-weight:400;padding:0 6px}

/* cursor */
.wait,.wait *{cursor:url(../img/cursors/appstarting.png) 0 0,wait !important}
.hourglass,.hourglass *{cursor:url(../img/cursors/wait.png) 16 16,wait !important}
.cursor-no,.cursor-no *{cursor:url(../img/cursors/no.png) 15 15,not-allowed !important}
#windows>.win{pointer-events:auto}
body.autohide #desktop{bottom:0}
#taskbar.autohide{bottom:-26px}
#taskbar.autohide.shown{bottom:0}
.drop-hot .lbl,.drop-hot .nm,.drop-hot>.nm{background:var(--sel);color:var(--sel-text)}
.fi.drop-hot .img .tint,.dicon.drop-hot .img .tint{display:block}

.lnk{position:relative;display:inline-block;vertical-align:middle;flex:none}
.lnk img{position:absolute;left:0;top:0}
.lnk img.ovl{z-index:1}
.fileview.small .fi .lnk,.fileview.list .fi .lnk,.tnode .lnk,.fileview.details td .lnk{margin-right:3px}
.fileview.details td .lnk{vertical-align:middle}

/* ---- Internet Explorer 4.0 ---------------------------------------------- */
.win.ie .toolbar{display:block;padding:0;min-height:0;border-top:0;box-shadow:none}
.ie-band{display:flex;align-items:center;border-top:1px solid var(--shadow);box-shadow:inset 0 1px var(--hilight);padding:1px 2px 1px 0;min-height:24px}
.ie-grip{width:3px;align-self:stretch;margin:2px 4px 2px 2px;box-shadow:inset 1px 1px var(--hilight),inset -1px -1px var(--shadow);flex:none}
.ie-std{display:flex;align-items:stretch;flex:1;min-width:0;overflow:hidden;height:40px}
.ie-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:46px;padding:0 4px;gap:3px;flex:none}
.ie-btn .ic{width:20px;height:20px;background:url(../img/tb/ie5_265.png) no-repeat;image-rendering:pixelated;flex:none}
.ie-btn:hover:not(.disabled) .ic,.ie-btn.checked .ic{background-image:url(../img/tb/ie5_266.png)}
.ie-btn:hover:not(.disabled){box-shadow:inset -1px -1px var(--shadow),inset 1px 1px var(--hilight)}
.ie-btn:active:not(.disabled),.ie-btn.checked{box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilight)}
.ie-btn.disabled .ic{filter:grayscale(1) contrast(0.35) brightness(1.45)}
.ie-btn.disabled span{color:var(--shadow);text-shadow:1px 1px var(--hilight)}
.ie-std.nolabels{height:28px}.ie-std.nolabels .ie-btn span{display:none}.ie-std.nolabels .ie-btn{min-width:30px}
.ie-sep{width:1px;background:var(--shadow);box-shadow:1px 0 var(--hilight);margin:4px 4px;flex:none}
.ie-logo{width:38px;height:38px;background:url(../img/98/throbber.png) 0 0 no-repeat;flex:none;margin:0 2px 0 4px;image-rendering:pixelated}
.ie-label{padding:0 4px 0 2px;flex:none}
.ie-addr{flex:1;min-width:60px;height:22px;align-items:center}
.ie-addr input.tb{flex:1;min-width:0;box-shadow:none;height:18px;padding:1px 2px;margin:0}
.ie-pageicon{width:18px;height:16px;flex:none;display:flex;align-items:center;justify-content:center;margin-left:2px}
.ie-linkslabel{padding:0 6px;flex:none;cursor:inherit}
.ie-link{display:flex;align-items:center;gap:4px;padding:2px 6px;height:20px;flex:none}
.ie-link:hover{box-shadow:inset -1px -1px var(--shadow),inset 1px 1px var(--hilight)}
.ie-link:active{box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilight)}
.ie-client{display:flex;flex-direction:column;min-height:0}
.ie-main{flex:1;display:flex;min-height:0}
.ie-side{width:200px;flex:none;display:flex;flex-direction:column;border-right:1px solid var(--shadow);box-shadow:1px 0 var(--hilight);margin-right:3px}
.ie-sidetitle{display:flex;align-items:center;justify-content:space-between;padding:3px 4px;font-weight:700;border-bottom:1px solid var(--shadow);box-shadow:0 1px var(--hilight)}
.ie-sideclose{width:16px;height:14px;display:flex;align-items:center;justify-content:center;font:700 12px Arial,sans-serif;line-height:1}
.ie-sideclose:hover{box-shadow:inset -1px -1px var(--shadow),inset 1px 1px var(--hilight)}
.ie-sidebody{flex:1;overflow:auto;background:var(--face);padding:2px 0}
.ie-sideitem{display:flex;align-items:center;gap:4px;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ie-sideitem:hover{color:#000080;text-decoration:underline}
.ie-content{flex:1;min-width:0;position:relative;background:#fff;padding:2px;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--light),inset 2px 2px var(--dkshadow)}
.ie-content{display:flex;flex-direction:column}
.ie-frame{display:block;width:100%;flex:1;min-height:0;border:0;background:#fff}
.ie-doc{flex:1;min-height:0;overflow:auto;background:#fff;color:#000;user-select:text;-webkit-user-select:text;cursor:url(../img/cursors/arrow.png) 0 0,default;--ie-link:#0000ff;
  font:16px "Times New Roman",Times,serif;line-height:normal;padding:8px;word-wrap:break-word;overflow-wrap:anywhere}
.ie-doc .ie-a{color:var(--ie-link);text-decoration:underline;cursor:url(../img/cursors/hand.png) 6 2,pointer}
.ie-doc .ie-a.plain{color:inherit;text-decoration:none;cursor:inherit}
.ie-doc img{image-rendering:auto;max-width:100%}
.ie-doc h1{font-size:2em;margin:.67em 0}.ie-doc h2{font-size:1.5em;margin:.75em 0}.ie-doc h3{font-size:1.17em;margin:.83em 0}.ie-doc h4{margin:1.12em 0}.ie-doc h5{font-size:.83em;margin:1.5em 0}.ie-doc h6{font-size:.75em;margin:1.67em 0}
.ie-doc p,.ie-doc blockquote,.ie-doc ul,.ie-doc ol,.ie-doc dl{margin:1em 0}.ie-doc ul,.ie-doc ol{padding-left:40px}.ie-doc li{display:list-item}
.ie-doc pre,.ie-doc code,.ie-doc tt,.ie-doc kbd,.ie-doc .ie-pre{font:13px "Courier New",Courier,monospace;white-space:pre-wrap}
.ie-doc table{border-spacing:2px}.ie-doc td,.ie-doc th{font:inherit;vertical-align:top;padding:1px}
.ie-doc table[border]:not([border="0"]){border:1px outset #c0c0c0}.ie-doc table[border]:not([border="0"]) td,.ie-doc table[border]:not([border="0"]) th{border:1px inset #c0c0c0}
.ie-doc hr{border:0;border-top:1px solid #808080;border-bottom:1px solid #fff;height:0;margin:.5em 0}
.ie-doc input.tb{display:inline-block;height:21px;padding:2px 3px;margin:1px;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow);font:var(--font);width:auto;cursor:url(../img/cursors/ibeam.png) 15 16,text}
.ie-doc textarea.tb{font:var(--font);box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow)}
.ie-doc .btn{display:inline-block;margin:1px;vertical-align:middle}
.ie-doc select{font:var(--font);background:var(--window);border:1px solid var(--shadow)}
.ie-doc input[type=checkbox],.ie-doc input[type=radio]{margin:3px}
.ie-doc nav,.ie-doc header,.ie-doc footer,.ie-doc section,.ie-doc article,.ie-doc aside,.ie-doc main,.ie-doc figure{display:block}
.ie-doc [hidden]{display:none}
body.dragging iframe{pointer-events:none}
.ie-about{display:flex;flex-direction:column;padding:4px 4px 0}
.ie-about img{display:block;image-rendering:pixelated}
.ie-abouttext{padding:6px 6px 0;line-height:13px}
.ie-progpane{padding:2px 3px;display:flex;align-items:center}
.ie-prog{flex:1;height:9px;overflow:hidden}
.ie-prog .bar{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--sel) 0 6px,transparent 6px 8px)}

/* ---- Easy CD Creator -------------------------------------------------------- */
.ecdc-body{flex:1;display:flex;flex-direction:column;min-height:0}
.ecdc-pane{flex:1;display:flex;flex-direction:column;min-height:60px}
.ecdc-head{height:16px;flex:none;padding:1px 4px;box-shadow:inset -1px -1px var(--shadow),inset 1px 1px var(--hilight);margin-bottom:1px;white-space:nowrap;overflow:hidden;display:flex;gap:8px}
.ecdc-head .ecdc-path{color:var(--shadow)}
.ecdc-split{flex:1;display:flex;min-height:0}
.ecdc-tree{width:170px;flex:none;background:var(--window);overflow:auto;padding:1px;margin-right:3px;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow)}
.ecdc-split.audio .ecdc-tree{display:none}
.ecdc-hsplit{height:4px;flex:none;cursor:url(../img/cursors/sizens.png) 15 16,ns-resize}
.ecdc-tabs{display:flex;align-items:flex-start;height:19px;flex:none;padding-left:2px;margin-top:1px}
.ecdc-tab{padding:2px 8px 3px;height:17px;background:var(--face);box-shadow:inset 1px 0 var(--hilight),inset -1px 0 var(--dkshadow),inset 0 -1px var(--dkshadow),inset -2px 0 var(--shadow),inset 0 -2px var(--shadow);margin-right:-1px}
.ecdc-tab.sel{height:19px;background:var(--face);box-shadow:inset 1px 0 var(--hilight),inset -1px 0 var(--dkshadow),inset 0 -1px var(--dkshadow),inset -2px 0 var(--shadow),inset 0 -2px var(--shadow);position:relative;z-index:1}
.ecdc-gauge{flex:none;height:34px;display:flex;align-items:center;gap:8px;padding:2px 6px 0}
.ecdc-gauge .gtext{width:230px;flex:none;white-space:nowrap}
.ecdc-gauge .gbar{flex:1;height:14px;position:relative;background:var(--window);box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow);margin-bottom:12px}
.ecdc-gauge .fill{position:absolute;left:2px;top:2px;bottom:2px;width:0;background:var(--sel);max-width:calc(100% - 4px)}
.ecdc-gauge .fill.over{background:#ff0000}
.ecdc-gauge .ticks{position:absolute;left:2px;right:2px;top:100%;height:12px}
.ecdc-gauge .ticks i{position:absolute;top:0;width:1px;height:3px;background:#000}
.ecdc-gauge .ticks span{position:absolute;top:4px;transform:translateX(-50%);font-size:9px;line-height:9px}
.ecdc-process{display:flex;gap:12px;padding:10px 10px 0}
.ecdc-process .left{width:170px;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.ecdc-process .right{flex:1;display:flex;flex-direction:column;gap:3px}
.ecdc-disc{width:48px;height:48px;background:url(../img/ecdc/disc.png) no-repeat;flex:none}
.ecdc-disc.spin{animation:ecdc-spin 1.2s linear infinite}
@keyframes ecdc-spin{to{transform:rotate(360deg)}}
.ecdc-phases{align-self:stretch;background:var(--window);padding:3px;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow);min-height:120px}
.ecdc-phases .ph{display:flex;align-items:center;gap:4px;height:14px;color:var(--shadow)}
.ecdc-phases .ph.cur{color:#000}.ecdc-phases .ph.done{color:#000}
.ecdc-phases .mark{width:12px;height:12px;flex:none;text-align:center;line-height:12px;font-weight:700}
.ecdc-phases .ph.done .mark::before{content:"\2713";color:#008000}
.ecdc-phases .ph.cur .mark::before{content:"\25BA";font-size:8px}
.ecdc-info{margin-top:8px;color:#000;line-height:14px}
.ecdc-wizpic{width:120px;height:226px;flex:none;background:#008080 url(../img/ecdc/wizard.png) no-repeat}

/* ---- Dial-Up Networking ----------------------------------------------------- */
.dun-tray{width:16px;height:16px;background:url(../img/dun/tray.png) 0 0 no-repeat;margin:0 2px;pointer-events:auto;flex:none}

/* ---- Disk Defragmenter ------------------------------------------------------ */
.defrag-anim{width:64px;height:64px;flex:none;background:url(../img/defrag/anim.png) 0 0 no-repeat;image-rendering:pixelated}
.defrag-big{display:flex;flex-direction:column;padding:6px 8px 0;flex:1;min-height:0}
.defrag-map{display:block;background:var(--face);box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow);padding:2px;max-width:100%;image-rendering:pixelated}
.defrag-tile{width:7px;height:9px;background:url(../img/defrag/tiles.png) no-repeat;flex:none;image-rendering:pixelated}

/* ---- Paint (additions) ------------------------------------------------------ */
.paint .stage{position:relative;display:inline-block;vertical-align:top}
.paint .stage .ov,.paint .stage .grid{position:absolute;left:0;top:0;pointer-events:none;background:transparent}
.paint .stage .textbox{position:absolute;border:1px dotted #000;padding:1px;margin:0;outline:0;resize:none;overflow:hidden;line-height:1.2;user-select:text;-webkit-user-select:text;z-index:3;box-sizing:border-box}
.paint .stage .handle{position:absolute;width:3px;height:3px;background:#000;z-index:4}
.paint .stage .handle.e{cursor:url(../img/cursors/sizewe.png) 16 16,e-resize}.paint .stage .handle.s{cursor:url(../img/cursors/sizens.png) 15 16,s-resize}.paint .stage .handle.se{cursor:url(../img/cursors/sizenwse.png) 16 16,se-resize}
.paint .stage .sizebox{position:absolute;left:0;top:0;border:1px dotted #000;pointer-events:none;z-index:5;box-sizing:border-box}
.paint .canvaswrap{padding:4px 0 0 4px}
.paint .tools .opts{width:42px;height:66px;display:grid;grid-template-columns:1fr;align-content:center;justify-items:center;gap:1px;padding:2px}
.paint .tools .opts.two{grid-template-columns:1fr}
.paint .tools .opts.three{grid-template-columns:repeat(3,12px);justify-content:center}
.paint .tools .opts.air{grid-template-columns:repeat(2,18px);justify-content:center}
.paint .tools .opts .opt{display:flex;align-items:center;justify-content:center;width:36px;height:11px}
.paint .tools .opts .opt.line{height:8px}
.paint .tools .opts .opt.small{width:12px;height:12px}
.paint .tools .opts .opt.wide{width:36px;height:18px}
.paint .tools .opts .opt.pic{width:38px;height:25px}
.paint .tools .opts .opt.pic.sel{outline:1px solid var(--sel)}
.paint .tools .opts.air .opt{width:18px;height:20px}.paint .tools .opts.air .opt.wide{grid-column:1/3;width:36px}
.paint .tools .opts .opt.sel{background:var(--sel)}
.paint .tools .opts .opt.sel .ln,.paint .tools .opts .opt.sel .sq{background:#fff}
.paint .tools .opts .opt .ln{width:30px;background:#000}
.paint .tools .opts .opt .sq{background:#000}
.paint .tools .opts.zoomlist{grid-template-columns:1fr;align-content:center}
.paint .tools .opts .opt.zoomopt{font-size:11px;height:13px;justify-content:flex-start;padding-left:6px}
.paint .tools .opts .opt.sel.zoomopt{color:var(--sel-text)}
.paint .tools .opts .opt.sel canvas{filter:invert(1)}
.paint .fontsbar{display:flex;align-items:center;gap:3px;padding:2px 3px;flex:none;border-bottom:1px solid var(--shadow);box-shadow:0 1px var(--hilight);margin-bottom:2px}
.paint-viewbmp{position:absolute;inset:0;background:#000;z-index:400000;display:flex;align-items:flex-start;justify-content:flex-start}
.paint-viewbmp canvas{image-rendering:pixelated}
.paint-preview{flex:1;background:var(--shadow);overflow:auto;display:flex;justify-content:center;padding:16px}
.paint-preview canvas{background:#fff;padding:40px;box-shadow:2px 2px 0 #000;height:auto}
/* colour dialog */
.cdlg-grid{display:grid;grid-template-columns:repeat(8,24px);gap:4px}
.cdlg-cell{width:16px;height:13px;margin:2px;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow)}
.cdlg-cell.sel{outline:1px dotted #000;outline-offset:1px}
.cdlg-field{box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow);cursor:url(../img/cursors/cross.png) 15 16,crosshair}
.cdlg-lum{box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow)}
.cdlg-prev{width:60px;height:34px;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow)}
.cdlg-nums{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}

/* ---- Windows 98: Folder Options ---- */
.fo-pic{height:112px;margin:4px 0 8px;background:#c0c0c0 url(../img/98/fo-web.png) center no-repeat;box-shadow:inset -1px -1px #fff,inset 1px 1px #808080}
.fo-pic.classic{background-image:url(../img/98/fo-classic.png)}.fo-pic.custom{background-image:url(../img/98/fo-custom.png)}
.fo-opt{margin:4px 0}.fo-desc{margin-left:20px;color:#000}
.fo-tree{height:150px;overflow:auto;background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px #808080,inset -2px -2px #c0c0c0,inset 2px 2px #000;padding:2px}
.fo-g{display:flex;align-items:center;gap:4px;padding:1px 2px;font-weight:400}.fo-i{display:flex;align-items:center;gap:4px;padding:1px 2px 1px 22px}.fo-i .chk{margin:0}
.fo-radio{width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff;flex:none}.fo-radio.on{background:radial-gradient(circle,#000 0 2px,#fff 3px)}
.fo-monitor{width:52px;height:46px;background:url(../img/cpl/monitor.png) center/contain no-repeat;flex:none}

/* ---- Windows 98: rebar ("coolbar") with Standard Buttons / Address / Links bands ---- */
.coolbar{flex:none;background:var(--face);box-shadow:inset 0 -1px var(--shadow),inset 0 -2px var(--hilight);padding-bottom:2px}
.coolbar .band{display:flex;align-items:center;min-height:24px;box-shadow:inset 0 1px var(--hilight),inset 0 2px var(--shadow)}
.coolbar .band:first-child{box-shadow:none}
.coolbar .gripper{width:3px;height:calc(100% - 6px);margin:3px 4px 3px 2px;flex:none;box-shadow:inset 1px 1px var(--hilight),inset -1px -1px var(--shadow);cursor:default}
.coolbar .band.std{height:40px;overflow:hidden;position:relative}
.coolbar .chevron{position:absolute;top:0;bottom:0;width:14px;display:flex;align-items:flex-start;justify-content:center;padding-top:3px;font:700 11px Arial,sans-serif;cursor:default}.coolbar .chevron:hover{box-shadow:inset 1px 1px var(--hilight),inset -1px -1px var(--shadow)}
.coolbar .band .label{margin:0 4px 0 2px;white-space:nowrap}
.coolbar .tb98{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:45px;height:38px;padding:0 8px;border:1px solid transparent;font-size:11px;white-space:nowrap;cursor:default;user-select:none;position:relative}
.coolbar .tb98 .ic{width:20px;height:20px;margin-top:1px;background-repeat:no-repeat}
.coolbar .tb98 .ic.gray{filter:grayscale(1) opacity(.5)}
.coolbar .tb98.drop{padding-right:24px;min-width:60px}
.coolbar .tb98.drop::after{content:"";position:absolute;right:7px;top:17px;border:3px solid transparent;border-top:3px solid #000;border-bottom:0}
.coolbar .tb98:hover:not(.disabled){box-shadow:inset 1px 1px var(--hilight),inset -1px -1px var(--shadow)}
.coolbar .tb98:active:not(.disabled),.coolbar .tb98.checked{box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow);background:repeating-conic-gradient(var(--hilight) 0 25%,var(--face) 0 50%) 0 0/2px 2px}
.coolbar .tb98.disabled{color:var(--shadow);text-shadow:1px 1px var(--hilight)}
.coolbar .tbsep{width:1px;height:26px;margin:0 3px;box-shadow:inset 1px 0 var(--shadow),inset -1px 0 var(--hilight);flex:none}
.coolbar .band.addr .combo{flex:1;margin:1px 4px 1px 0}
.coolbar .throbber{width:38px;height:38px;flex:none;margin-left:auto;margin-right:2px;background:url(../img/98/throbber.png) 0 0 no-repeat}
.coolbar .throbber.busy{animation:throb 2.4s steps(41) infinite}
@keyframes throb{to{background-position:0 -1558px}}
.coolbar .links{margin-left:auto;padding:0 6px;white-space:nowrap;font-size:11px;display:flex;align-items:center;gap:2px;box-shadow:inset 1px 0 var(--hilight)}
.coolbar .links .gripper{height:16px;margin:0 3px 0 0}

/* ---- Windows 98 taskbar: Quick Launch and rebar grippers ---- */
#quicklaunch{display:flex;align-items:center;height:22px;flex:none;margin-left:3px;padding-right:2px}
#taskbar .gripper{width:3px;height:16px;margin:0 3px 0 1px;flex:none;box-shadow:inset 1px 1px var(--hilight),inset -1px -1px var(--shadow)}
#taskbar .gripper.tasksgrip{margin-left:3px;margin-right:-1px}
#quicklaunch .qlbtn{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:1px solid transparent}
#quicklaunch .qlbtn:hover{box-shadow:inset 1px 1px var(--hilight),inset -1px -1px var(--shadow)}
#quicklaunch .qlbtn:active{box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow)}
#quicklaunch img{width:16px;height:16px}
.menu.startmenu{animation:startslide .08s linear}
@keyframes startslide{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
/* ---- Welcome to Windows 98 ---- */
.w98w{position:relative;width:476px;height:322px;background:#fff;overflow:hidden;font-family:Arial,sans-serif;color:#000}
.w98w .cloud{position:absolute;left:0;top:0;width:476px;height:288px;background:url(../img/98/welcome-cloud.png) no-repeat}
.w98w .line{position:absolute;left:0;top:45px;width:476px;height:1px;background:url(../img/98/welcome-line.png) no-repeat}
.w98w .title{position:absolute;left:33px;top:22px;width:162px;height:44px;background:url(../img/98/welcome-title.png) no-repeat}
.w98w .items{position:absolute;left:0;top:82px;width:178px}
.w98w .hdr{height:15px;line-height:15px;background:#000;color:#fff;font:700 11px Arial,sans-serif;padding-left:14px;white-space:pre}
.w98w .item{position:relative;height:26px;padding-left:14px;font:700 14px/26px Arial,sans-serif;cursor:pointer;white-space:nowrap}
.w98w .item::after{content:"";position:absolute;left:12px;right:0;bottom:0;height:1px;background:#c0c0c0}
.w98w .item i{position:absolute;left:0;top:0;bottom:1px;width:4px}
.w98w .item:hover span{color:#0000ff}
.w98w .desc{position:absolute;left:195px;top:98px;width:276px;font:13px/16px Arial,sans-serif}
.w98w .desc .hd{font:700 18px/22px Arial,sans-serif;margin-bottom:10px}
.w98w .desc p{margin:0 0 16px}
.w98w .foot{position:absolute;left:12px;right:8px;bottom:12px;display:flex;align-items:center}
.w98w .foot .chk{flex:1}
.w98w .foot .btn{min-width:75px;height:23px}

/* ---- Explorer 98: web view ---- */
.coolhost{display:block;padding:0;min-height:0;border:0;box-shadow:none}
.coolbar.nolabels .tb98 span{display:none}.coolbar.nolabels .tb98{height:24px;min-width:28px}.coolbar.nolabels .band.std{height:26px}.coolbar.nolabels .throbber{width:26px;height:26px;background-size:26px auto}
.explorer .contents{background:var(--window)}
/* Windows 98 web view (webvw.dll: webview.css, wvleft.bmp, wvline.gif) */
.wvmini{display:none;height:32px;flex:none;background:var(--window);font:700 21px/26px Verdana,Arial,sans-serif;color:#000;padding:4px 15px 0;white-space:nowrap;overflow:hidden}
.wvrow{display:flex;flex:1;min-height:0}
.wvpanel{display:none;width:30%;flex:none;background:#fff url(../img/98/wvleft.png) no-repeat 0 0;overflow:auto;font:11px/13px Verdana,Arial,sans-serif;color:#000}
.wvpanel p{margin:15px 15px 11px 15px}
.wvpanel p.wvicon{height:32px;line-height:0}.wvpanel p.wvicon img{width:32px;height:32px}
.wvpanel p.wvtitle{font:700 21px/25px Verdana,Arial,sans-serif;margin-top:5px;word-wrap:break-word}
.wvpanel p.wvline{margin:-5px 0 20px 0;height:1px;background:url(../img/98/wvline.png) 0 0/100% 1px no-repeat}
.wvpanel a.command{font-weight:700;color:#0000ff}.wvpanel b{font-weight:700}
.wvpanel .wvpie{display:block;margin:10px 0 0 15px}.wvpanel .wvk{display:inline-block;width:12px;height:12px;margin-right:2px;vertical-align:middle;border:1px solid #000;box-sizing:border-box}
.wvlist{flex:1;min-width:0;display:flex;flex-direction:column}
.contents.web .wvpanel{display:block}
.contents.web.narrow .wvpanel{display:none}.contents.web.narrow .wvmini{display:block}
.contents.web .wvlist .fileview{box-shadow:none;background:transparent}
.contents.web .wvrow{background:var(--window)}
.explorer .contents.web{padding:2px;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow)}
/* the menu bar as the first rebar band: gripper, menus, brand logo at the right (browseui micro brand, 22 px) */
.win .menubar.band98{height:22px;padding:0;align-items:center}
.win .menubar.band98::before{content:"";width:3px;height:16px;margin:0 4px 0 2px;flex:none;box-shadow:inset 1px 1px var(--hilight),inset -1px -1px var(--shadow)}
.win .menubar.band98::after{content:"";margin-left:auto;width:44px;height:22px;flex:none;background:#000 url(../img/98/throbber22.png) center 0 no-repeat}
.win .menubar.band98.busy::after{animation:throb22 2.4s steps(41) infinite}
@keyframes throb22{to{background-position:center -902px}}
.menubar.band98+.coolhost .coolbar .band:first-child{box-shadow:inset 0 1px var(--hilight),inset 0 2px var(--shadow)}
.win .statusbar .pane img{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.xbar-head{display:flex;align-items:center;justify-content:space-between;padding:1px 4px}.xbar-close{font:700 13px Arial,sans-serif;cursor:default;padding:0 3px}.xbar-close:hover{box-shadow:inset 1px 1px var(--hilight),inset -1px -1px var(--shadow)}

.ie-go{display:flex;align-items:center;gap:3px;padding:0 6px;height:22px;flex:none}.ie-go .goic{width:18px;height:16px;background:url(../img/tb/go.png) no-repeat}.ie-go:hover{box-shadow:inset -1px -1px var(--shadow),inset 1px 1px var(--hilight)}

/* ---- Outlook Express 5 ---- */
.oe-tb{flex:none;display:flex;align-items:center;height:48px;padding:1px 4px;border-top:1px solid var(--shadow);box-shadow:inset 0 1px var(--hilight)}
.oe-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:50px;height:44px;padding:0 4px;gap:3px;font-size:11px;position:relative;white-space:nowrap}
.oe-btn.drop{padding-right:12px}.oe-btn.drop::after{content:"";position:absolute;right:3px;top:14px;border:3px solid transparent;border-top:3px solid #000;border-bottom:0}
.oe-btn:hover{box-shadow:inset 1px 1px var(--hilight),inset -1px -1px var(--shadow)}.oe-btn:active{box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow)}
.oe-ic{width:20px;height:20px;background:url(../img/oe/tb.png) no-repeat;image-rendering:pixelated}
.oe-sep{width:1px;height:30px;margin:0 3px;box-shadow:inset 1px 0 var(--shadow),inset -1px 0 var(--hilight);flex:none}
.oe-header{flex:none;display:flex;align-items:center;gap:6px;height:24px;padding:0 8px;background:var(--face);box-shadow:inset 0 -1px var(--shadow),inset 0 -2px var(--hilight);font-size:14px}
.oe-body{flex:1;display:flex;min-height:0}
.oe-left{width:170px;flex:none;display:flex;flex-direction:column;border-right:3px solid var(--face);min-height:0}
.oe-paneh{flex:none;display:flex;justify-content:space-between;align-items:center;height:18px;padding:0 4px;box-shadow:inset -1px -1px var(--shadow),inset 1px 1px var(--hilight);background:var(--face)}
.oe-tree{flex:1;background:var(--window);overflow:auto;min-height:0;padding:2px 0}
.oe-tnode{display:flex;align-items:center;gap:3px;height:17px;white-space:nowrap}.oe-tnode .nm{padding:0 2px}.oe-tnode.sel .nm{background:var(--sel);color:#fff}
.oe-tg{width:10px;font-size:9px;color:#808080;text-align:center}
.oe-tic{width:16px;height:16px;background:url(../img/oe/tree.png) no-repeat;flex:none}
.oe-contacts{flex:1;background:var(--window);min-height:0;overflow:auto}.oe-nocontacts{padding:6px;color:#000;font-size:11px}
.oe-right{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.oe-start{flex:1;display:flex;background:#fff;overflow:auto;font-family:Verdana,Arial,sans-serif}
.oe-startart{width:170px;flex:none;background:url(../img/oe/start.png) no-repeat left top}
.oe-startcol{flex:1;padding:8px 14px}
.oe-title{font:700 20px Verdana,Arial,sans-serif;color:#000}.oe-for{font-size:10px;color:#808080;margin-bottom:10px}
.oe-sec{margin-bottom:12px}.oe-sech{display:flex;align-items:center;gap:6px;font:700 12px Verdana,Arial,sans-serif;color:#000080;border-bottom:1px solid #000080;padding-bottom:2px;margin-bottom:4px}
.oe-big{width:32px;height:32px;background:url(../img/oe/big.png) no-repeat;flex:none}
.oe-secl{font-size:11px;margin:3px 0 3px 38px}.oe-secl a{color:#0000ff}
.oe-tip{margin:0 0 12px 38px;font-size:11px;background:#ffffe8;border:1px solid #c0c0a0;padding:6px}.oe-tiph{font-weight:700;margin-bottom:4px}
.oe-startfoot{font-size:11px}
.oe-list{flex:1;min-height:0;overflow:auto;background:var(--window)}
.oe-split{height:3px;background:var(--face);flex:none}
.oe-preview{height:150px;flex:none;display:flex;flex-direction:column;background:var(--window);overflow:auto}
.oe-prevh{background:var(--face);padding:3px 6px;line-height:14px;flex:none;box-shadow:inset 0 -1px var(--shadow)}
.oe-prevb{padding:6px 8px;font:12px Arial,sans-serif}.oe-prevb pre{font:12px Arial,sans-serif;white-space:pre-wrap;margin:0}
.oe-noprev{padding:40px;text-align:center;color:#808080}
.oe-ctb{flex:none;height:30px;display:flex;align-items:center;padding:0 4px;gap:4px;border-top:1px solid var(--shadow);box-shadow:inset 0 1px var(--hilight)}
.oe-crow{display:flex;align-items:center;height:22px;flex:none;border-bottom:1px solid var(--face)}.oe-cl{width:80px;display:flex;align-items:center;gap:4px;padding-left:6px;flex:none}.oe-crow input{flex:1;box-shadow:none;margin:0}
/* ---- Windows Media Player 6.4 ---- */
/* Windows Media Player 6.4 (msdxm.ocx): navigation bar, video window, seek bar, control bar bitmaps 5208/5209/5212, Go To bar, black display panel */
.wmp-nav{display:flex;align-items:center;height:22px;padding:0 2px;gap:2px;flex:none;box-shadow:inset 0 -1px var(--shadow),inset 0 -2px var(--hilight)}
.wmp-navbtn{display:flex;align-items:center;gap:3px;height:20px;padding:0 3px;border:1px solid transparent;font-size:11px;white-space:nowrap;cursor:default}.wmp-navbtn:hover:not(.disabled){box-shadow:inset 1px 1px var(--hilight),inset -1px -1px var(--shadow)}
.wmp-navic{width:20px;height:20px;background-repeat:no-repeat;image-rendering:pixelated}
.wmp-navbtn.back .wmp-navic{background-image:url(../img/wmp/b116.png);background-position:-1px -23px;width:20px}.wmp-navbtn.fwd .wmp-navic{background-image:url(../img/wmp/b116.png);background-position:-23px -23px}
.wmp-navbtn.radio .wmp-navic{background-image:url(../img/wmp/b61.png);background-position:-20px 0}.wmp-navbtn.radio:hover .wmp-navic{background-image:url(../img/wmp/b60.png)}
.wmp-navbtn.music .wmp-navic{background-image:url(../img/wmp/b61.png);background-position:-60px 0}.wmp-navbtn.music:hover .wmp-navic{background-image:url(../img/wmp/b60.png)}
.wmp-navbtn.events .wmp-navic,.wmp-navbtn.guide .wmp-navic{background-image:url(../img/wmp/b116.png);background-position:-45px -1px}
.wmp-video{width:288px;height:180px;background:#000;flex:none;position:relative;overflow:hidden;margin:2px auto 0;box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilight)}
.wmp-anim{position:absolute;left:50%;top:50%;width:160px;height:120px;margin:-60px 0 0 -80px;background:url(../img/wmp/logo-anim.png) 0 0 no-repeat}
.wmp-video.hasvideo .wmp-anim{display:none}.wmp-vid{width:100%;height:100%;object-fit:contain;display:block}
.wmp-seek{height:10px;margin:4px 5px 2px;position:relative;box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilight),inset 2px 2px var(--dkshadow),inset -2px -2px var(--face);background:var(--face)}
.wmp-seek::before{content:"";position:absolute;left:3px;right:3px;top:4px;height:2px;background:var(--shadow);box-shadow:0 1px var(--hilight)}
.wmp-seekthumb{position:absolute;top:-2px;left:0;width:10px;height:14px;background:var(--face);box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilight),inset -2px -2px var(--shadow)}
.wmp-ctl{display:flex;align-items:center;height:26px;padding:0 4px;gap:1px;flex:none}
.wmp-btn{width:24px;height:22px;display:flex;align-items:center;justify-content:center;border:1px solid transparent}.wmp-btn:hover:not(.disabled){box-shadow:inset 1px 1px var(--hilight),inset -1px -1px var(--shadow)}.wmp-btn:active:not(.disabled),.wmp-btn.checked{box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow)}.wmp-btn.checked{background:repeating-conic-gradient(var(--hilight) 0 25%,var(--face) 0 50%) 0 0/2px 2px}
.wmp-ic{width:20px;height:20px;background:url(../img/wmp/b5208.png) no-repeat;image-rendering:pixelated}
.wmp-mute{width:20px;height:20px;background:url(../img/wmp/b5212.png) 0 0 no-repeat}
.wmp-sep{width:1px;height:18px;margin:0 3px;box-shadow:inset 1px 0 var(--shadow),inset -1px 0 var(--hilight);flex:none}
.wmp-vol{width:40px;height:20px;position:relative;margin:0 4px;background:url(../img/wmp/b5212.png) -60px 0 no-repeat;flex:none}
.wmp-volthumb{position:absolute;left:0;top:2px;width:8px;height:16px;background:var(--face);box-shadow:inset -1px -1px var(--dkshadow),inset 1px 1px var(--hilight),inset -2px -2px var(--shadow)}
.wmp-goto{padding:2px 6px 4px;flex:none}.wmp-goto .combo{width:100%}
.wmp-disp{background:#000;color:#fff;font-size:11px;line-height:14px;flex:none;margin:0 4px 4px;box-shadow:inset 1px 1px var(--shadow),inset -1px -1px var(--hilight)}
.wmp-dsec{padding:5px 6px;border-bottom:1px solid #808080}.wmp-dsec:last-child{border-bottom:0}
.wmp-drow{display:flex;gap:8px;white-space:nowrap}.wmp-drow .l{width:70px;flex:none;text-align:right;color:#c0c0c0}.wmp-drow .v{flex:1;overflow:hidden;text-overflow:ellipsis}
.wmp-statline{display:flex;align-items:center;min-height:16px;gap:8px}.wmp-status{flex:1}.wmp-right{display:flex;align-items:center;gap:4px}
.wmp-disp.statusonly .wmp-dsec:not(.wmp-statline){display:none}
.wmp-rx{width:16px;height:16px;background:url(../img/wmp/b73.png) -96px -2px no-repeat;flex:none}
.wmp-time{display:inline-block;min-width:76px;text-align:center}
.wmp-au{width:16px;height:16px;background:url(../img/wmp/b63.png) -22px -2px no-repeat;flex:none}
.win.wmp-minimal .wmp-video{margin:0}
.cm-list{height:110px;padding:2px}.cm-item{display:flex;align-items:center;gap:4px;height:17px;padding:0 2px}.cm-item .chk{margin:0}.cm-item .nm{flex:1}.cm-item.sel{background:var(--sel);color:#fff}.cm-desc{height:52px;overflow:hidden;line-height:13px}
.fileview:focus,.tree:focus,.scroll:focus{outline:none}
/* Sounds Properties (mmsys.cpl): events tree, preview frame */
.sndtree{padding:1px;overflow:auto}.sndtree .it{display:flex;align-items:center;gap:3px;height:16px;padding:0 2px;background:none;color:inherit;outline:none}.sndtree .it:not(.root){padding-left:18px}.sndtree .it .noic{width:16px;height:16px;flex:none}.sndtree .it img{flex:none}
.sndtree .it span.lbl{padding:0 2px;outline-offset:-1px}.sndtree .it.sel span.lbl{background:var(--sel);color:var(--sel-text);outline:1px dotted #ff0}
.sndprev{display:flex;align-items:center;justify-content:center;box-shadow:inset -1px -1px var(--hilight),inset 1px 1px var(--shadow),inset -2px -2px var(--face),inset 2px 2px var(--dkshadow)}
hr.sep{border:0;height:1px;background:var(--shadow);box-shadow:0 1px var(--hilight);margin:4px 0 5px;width:100%}