/* ==========================================================================
   endy.im — Windows 98 desktop
   Palette + bevel language. No border-radius. No soft shadows. Ever.
   ========================================================================== */
:root{
  --face:#c0c0c0;
  --lt:#dfdfdf;
  --hl:#ffffff;
  --sh:#808080;
  --dk:#000000;
  --teal:#008080;
  --navy:#000080;
  --navy2:#1084d0;
  --gray1:#808080;
  --gray2:#b5b5b5;
  --txt:#000000;
  --dis:#808080;
  --font:"MS Sans Serif","Pixelated MS Sans Serif",Tahoma,Verdana,Geneva,sans-serif;

  --raise: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--lt),
           inset -2px -2px 0 var(--sh), inset 2px 2px 0 var(--hl);
  --sink:  inset -1px -1px 0 var(--hl), inset 1px 1px 0 var(--sh),
           inset -2px -2px 0 var(--lt), inset 2px 2px 0 var(--dk);
  --sink1: inset -1px -1px 0 var(--lt), inset 1px 1px 0 var(--sh);
  --raise1:inset -1px -1px 0 var(--sh), inset 1px 1px 0 var(--lt);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:11px;
  line-height:1.35;
  color:var(--txt);
  background:var(--teal);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:9999;background:var(--face);padding:4px 8px;box-shadow:var(--raise)}
.skip:focus{left:4px;top:4px}

::selection{background:var(--navy);color:#fff}

h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
kbd{font:inherit;padding:0 3px;background:var(--face);box-shadow:var(--raise1)}

/* ---------- focus: 1px dotted rectangle, the way it was ---------- */
:focus{outline:none}
:focus-visible{outline:1px dotted #000;outline-offset:-4px}
.title-bar :focus-visible,.sm-row:focus-visible,.menu-pop button:focus-visible,
.menu-pop a:focus-visible{outline:1px dotted #fff;outline-offset:-3px}

/* ==========================  DESKTOP  ========================== */
#desktop{
  position:fixed;inset:0 0 30px 0;
  overflow:hidden;
}

#icon-field{
  position:absolute;left:8px;top:8px;bottom:8px;
  display:flex;flex-direction:column;flex-wrap:wrap;
  align-content:flex-start;gap:2px;
  z-index:1;
}
.dicon{
  width:84px;padding:4px 2px 6px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:0;font:inherit;color:#fff;cursor:default;
}
.dicon-img{width:32px;height:32px;display:block;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.45))}
.dicon-img svg{width:32px;height:32px;display:block;shape-rendering:crispEdges}
.dicon-lbl{
  text-align:center;line-height:1.2;padding:1px 2px;
  text-shadow:1px 1px 0 #000, 1px 0 0 #000, 0 1px 0 #000;
}
.dicon.sel .dicon-lbl{background:var(--navy);text-shadow:none;outline:1px dotted #fff;outline-offset:0}
.dicon.sel .dicon-img{filter:none;opacity:.75}
.dicon:focus-visible .dicon-lbl{outline:1px dotted #fff;outline-offset:0}

/* ==========================  WINDOW CHROME  ========================== */
.window{
  position:absolute;
  background:var(--face);
  box-shadow:var(--raise);
  padding:3px;
  min-width:200px;
  display:flex;flex-direction:column;
  z-index:10;
}
.window.max{left:0 !important;top:0 !important;width:100% !important;height:100%}
.window.opening{animation:winpop .12s steps(3) both}
@keyframes winpop{from{transform:scale(.94);opacity:.4}to{transform:scale(1);opacity:1}}

.title-bar{
  display:flex;align-items:center;gap:4px;
  height:20px;padding:0 2px 0 3px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy2) 100%);
  cursor:default;user-select:none;touch-action:none;
}
.window.inactive .title-bar{background:linear-gradient(90deg,var(--gray1) 0%,var(--gray2) 100%)}
.title-bar-icon{width:16px;height:16px;flex:0 0 16px;shape-rendering:crispEdges}
.title-bar-text{
  flex:1 1 auto;font-size:11px;font-weight:bold;color:#fff;
  letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:none;
}
.window.inactive .title-bar-text{color:#dfdfdf}
.title-bar-controls{display:flex;gap:2px;flex:0 0 auto}
.title-bar-controls .tb-btn+.tb-close{margin-left:2px}

.tb-btn{
  width:16px;height:14px;padding:0;border:0;
  background:var(--face);box-shadow:var(--raise);
  background-repeat:no-repeat;background-position:center;
  cursor:default;position:relative;
}
.tb-btn:active{box-shadow:var(--sink);background-position:calc(50% + 1px) calc(50% + 1px)}
.tb-min{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect x='0' y='5' width='6' height='2' fill='%23000'/%3E%3C/svg%3E")}
.tb-max{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='9'%3E%3Crect x='0.5' y='0.5' width='8' height='7' fill='none' stroke='%23000'/%3E%3Crect x='0' y='0' width='9' height='2' fill='%23000'/%3E%3C/svg%3E")}
.tb-close{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7'%3E%3Cpath d='M0 0h2l2 2 2-2h2l-3 3 3 3h-2l-2-2-2 2h-2l3-3z' fill='%23000'/%3E%3C/svg%3E")}

/* ---------- menu bar ---------- */
.menu-bar{display:flex;gap:0;padding:1px 0 2px;flex:0 0 auto}
.menu-bar button{
  font:inherit;background:none;border:0;padding:1px 6px;color:#000;cursor:default;
}
.menu-bar button:hover,.menu-bar button:focus-visible{background:var(--navy);color:#fff}
.menu-bar button:hover u,.menu-bar button:focus-visible u{color:#fff}
.menu-bar u{text-underline-offset:1px}

/* ---------- window body / panes ---------- */
.window-body{flex:1 1 auto;padding:6px;min-height:0}
.window-body.flat{padding:6px;flex:0 0 auto}
.pane{background:#fff;padding:2px}
.sunken{box-shadow:var(--sink);background:#fff}
.sunken-out{box-shadow:var(--sink1)}
.scroll-y{overflow:auto}

/* ---------- status bar ---------- */
.status-bar{display:flex;gap:2px;margin-top:4px;flex:0 0 auto}
.status-field{
  flex:1 1 auto;padding:2px 4px;box-shadow:var(--sink1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.status-field:first-child{flex:0 0 auto;min-width:90px}

/* ---------- buttons ---------- */
.btn{
  font:inherit;color:#000;background:var(--face);border:0;
  min-width:75px;min-height:23px;padding:3px 12px;
  box-shadow:var(--raise);cursor:default;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  text-decoration:none;
}
.btn svg{width:16px;height:16px;shape-rendering:crispEdges}
.btn:active{box-shadow:var(--sink);padding:4px 11px 2px 13px}
.btn:focus-visible{outline:1px dotted #000;outline-offset:-5px}
.btn-default{box-shadow:0 0 0 1px #000, var(--raise);margin:1px}

/* ---------- form controls ---------- */
input[type=text],input[type=email],textarea{
  font:inherit;background:#fff;border:0;padding:3px 4px;width:100%;
  box-shadow:var(--sink);color:#000;
}
textarea{resize:vertical;line-height:1.4}
.field{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.field>label{flex:0 0 62px;padding-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- native-ish scrollbars ---------- */
.scroll-y{
  scrollbar-color:var(--face) #dfdfdf;
}
.scroll-y::-webkit-scrollbar{width:16px;height:16px}
.scroll-y::-webkit-scrollbar-track{
  background-color:#dfdfdf;
  background-image:linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%),
                   linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%);
  background-size:2px 2px;background-position:0 0,1px 1px;
}
.scroll-y::-webkit-scrollbar-thumb{background:var(--face);box-shadow:var(--raise)}
.scroll-y::-webkit-scrollbar-button:single-button{
  background:var(--face);box-shadow:var(--raise);height:16px;width:16px;
  background-repeat:no-repeat;background-position:center;
}
.scroll-y::-webkit-scrollbar-button:single-button:vertical:decrement{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M3 0h1l3 4H0z' fill='%23000'/%3E%3C/svg%3E")}
.scroll-y::-webkit-scrollbar-button:single-button:vertical:increment{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7l-3 4H3z' fill='%23000'/%3E%3C/svg%3E")}
.scroll-y::-webkit-scrollbar-corner{background:var(--face)}

/* ==========================  README / NOTEPAD  ========================== */
.notepad{
  background:#fff;box-shadow:var(--sink);padding:12px 14px;height:100%;overflow:auto;
}
.np-name{font-size:22px;font-weight:bold;letter-spacing:-.4px;line-height:1.1}
.np-role{font-size:13px;margin-top:2px}
.caret{display:inline-block;width:7px;height:12px;background:#000;margin-left:3px;vertical-align:-2px;animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.np-rule{border:0;height:2px;box-shadow:var(--sink1);margin:10px 0}
.np-body{font-size:12px;line-height:1.55;max-width:52ch}
.np-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 16px;margin-top:10px}
.np-meta div{display:flex;gap:6px;align-items:baseline}
.np-meta dt{color:var(--sh);min-width:64px}
.np-meta dd{font-weight:bold}
.led{display:inline-block;width:7px;height:7px;background:#00c000;box-shadow:inset -1px -1px 0 #006000,inset 1px 1px 0 #80ff80;margin-right:5px}
.np-hint{margin-top:10px;color:#404040}
.np-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}

/* ==========================  METERS (RESULTS)  ========================== */
.meters{display:flex;flex-direction:column;gap:10px}
.meter{padding:8px 10px 10px;box-shadow:var(--raise1);background:var(--face)}
.meter-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.meter-name{font-weight:bold;font-size:12px}
.meter-val{font-size:19px;font-weight:bold;letter-spacing:-.5px}
.meter-sub{color:var(--sh);margin-bottom:6px}
.gauge{display:grid;grid-template-columns:26px 1fr 62px;gap:3px 6px;align-items:center}
.gauge-lbl{color:var(--sh)}
.gauge-num{text-align:right;font-weight:bold}
.bar{display:block;height:16px;padding:2px;background:var(--face)}
.fill{
  display:block;height:100%;width:0;
  background:repeating-linear-gradient(90deg,var(--navy) 0 8px,var(--face) 8px 10px);
  transition:width .9s steps(14,end);
}
.fill.f-good{background:repeating-linear-gradient(90deg,#008000 0 8px,var(--face) 8px 10px)}

/* ==========================  CONTROL PANEL  ========================== */
.cpanel{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.cpanel li{padding:8px;box-shadow:var(--raise1)}
.cp-item{
  display:flex;align-items:center;gap:8px;background:none;border:0;font:inherit;
  padding:2px;width:100%;text-align:left;cursor:default;
}
.cp-ico svg{width:32px;height:32px;display:block;shape-rendering:crispEdges}
.cp-name{font-weight:bold;font-size:12px}
.cp-item:hover .cp-name,.cp-item:focus-visible .cp-name{background:var(--navy);color:#fff}
.cp-desc{margin-top:6px;color:#202020;line-height:1.5}

/* ==========================  WIZARD (PROCESS)  ========================== */
.wizard{display:flex;gap:10px;background:#fff;box-shadow:var(--sink);padding:10px}
.wizard-side{
  flex:0 0 84px;background:linear-gradient(160deg,#000080,#1084d0 60%,#7fb8e8);
  display:flex;align-items:center;justify-content:center;
}
.wz-art{width:48px;height:48px;shape-rendering:crispEdges}
.wizard-main{flex:1 1 auto;padding:2px 4px}
.wz-title{font-size:15px;font-weight:bold;margin-bottom:10px;letter-spacing:-.2px}
.steps{display:flex;flex-direction:column;gap:9px}
.steps li{display:grid;grid-template-columns:26px 1fr;gap:2px 8px}
.step-no{grid-row:span 2;font-weight:bold;color:#fff;background:var(--navy);width:22px;height:22px;
  display:flex;align-items:center;justify-content:center}
.steps b{font-size:12px}
.steps span:not(.step-no){color:#303030}
.wizard-foot{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}

/* ==========================  EXPLORER / DETAILS  ========================== */
.addr-bar{display:flex;align-items:center;gap:6px;padding:2px 2px 4px}
.addr-bar label{color:#000}
.combo{
  flex:1 1 auto;display:flex;align-items:center;gap:5px;padding:2px 4px;background:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.combo svg{width:16px;height:16px;flex:0 0 16px;shape-rendering:crispEdges}
.combo-arrow{
  width:17px;height:19px;background:var(--face);box-shadow:var(--raise);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7l-3 4H3z' fill='%23000'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.details{width:100%;border-collapse:collapse;background:#fff;font-size:11px}
.details th{
  position:sticky;top:0;z-index:1;
  background:var(--face);box-shadow:var(--raise1);
  text-align:left;font-weight:normal;padding:3px 6px;white-space:nowrap;
}
.details td{padding:2px 6px;vertical-align:top}
.details .row td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.details .row td:first-child{font-weight:bold}
.rowico{width:16px;height:16px;vertical-align:-3px;margin-right:5px;shape-rendering:crispEdges}
.details .row:hover td,.details .row:focus-visible td{background:#e8e8e8}
.details .row.sel td{background:var(--navy);color:#fff}
.details .row.sel+.row-desc td{background:#e6e6ff}
.row-desc td{color:#303030;padding:0 6px 7px 27px;white-space:normal}
.details .num{font-variant-numeric:tabular-nums}
.note-box{
  display:flex;gap:8px;align-items:flex-start;margin:8px 4px 4px;padding:7px 8px;
  background:#ffffe1;box-shadow:0 0 0 1px #000;color:#000;line-height:1.5;
}
.note-ico{width:16px;height:16px;flex:0 0 16px;shape-rendering:crispEdges}

/* ==========================  NETWORK NEIGHBORHOOD  ========================== */
.netgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:4px;padding:6px}
.net-node{display:flex;align-items:center;gap:6px;padding:3px 4px;cursor:default}
.net-node svg{width:24px;height:24px;flex:0 0 24px;shape-rendering:crispEdges}
.netgrid li:hover .net-node,.netgrid li.sel .net-node{background:var(--navy);color:#fff}

/* ==========================  OUTLOOK / CONTACT  ========================== */
.outlook{display:flex;gap:8px;align-items:stretch}
.ol-pane{flex:0 0 190px;background:#fff;box-shadow:var(--sink);padding:6px}
.ol-head{font-weight:bold;padding:2px 4px 6px;border-bottom:1px solid var(--face)}
.ol-pane li a{
  display:flex;align-items:center;gap:6px;padding:5px 4px;color:#000;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ol-pane li a svg{width:16px;height:16px;flex:0 0 16px;shape-rendering:crispEdges}
.ol-pane li a:hover,.ol-pane li a:focus-visible{background:var(--navy);color:#fff}
.ol-main{flex:1 1 auto;min-width:0}
.ol-intro{margin-bottom:9px;font-size:12px;line-height:1.5;max-width:46ch}
.form-foot{display:flex;align-items:center;gap:8px;margin-top:2px;flex-wrap:wrap}
.form-status{color:#000080;font-weight:bold}
.form-status.err{color:#a00000}

/* ==========================  FILE LIST (PROJECTS)  ========================== */
.filelist{padding:4px}
.filelist li a,.filelist li .dead{
  display:flex;align-items:center;gap:7px;padding:3px 5px;color:#000;text-decoration:none;
}
.filelist li a svg,.filelist li .dead svg{width:16px;height:16px;shape-rendering:crispEdges}
.filelist li a:hover,.filelist li a:focus-visible{background:var(--navy);color:#fff}
.filelist .dead{color:var(--sh)}
.filelist .dead svg{opacity:.5}
.filelist em{font-style:normal;color:var(--sh)}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ==========================  DISPLAY PROPERTIES  ========================== */
.tabs{display:flex;gap:0;position:relative;z-index:2;margin-bottom:-2px;padding-left:3px}
.tab{
  font:inherit;background:var(--face);border:0;padding:3px 12px 6px;cursor:default;
  margin-right:-1px;position:relative;top:2px;
  box-shadow:inset 1px 1px 0 var(--hl),inset 2px 0 0 var(--lt),
             inset -1px 0 0 var(--dk),inset -2px 0 0 var(--sh);
}
.tab[aria-selected=true]{padding:6px 15px 6px;top:0;z-index:3}
.tabpanel{padding:14px 12px 12px;background:var(--face);box-shadow:var(--raise)}
.themes{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.theme{display:flex;flex-direction:column;gap:6px;align-items:center;padding:6px;cursor:default}
.theme input{position:absolute;opacity:0;width:0;height:0}
.theme-name{text-align:center;padding:1px 4px}
.theme-name em{font-style:normal;color:var(--sh);display:block}
.theme.is-sel .theme-name{background:var(--navy);color:#fff;outline:1px dotted #fff;outline-offset:-2px}
.theme.is-sel .theme-name em{color:#c0c0ff}
.theme:focus-within .thumb{outline:1px dotted #000;outline-offset:2px}
.thumb{
  width:100%;aspect-ratio:4/3;box-shadow:var(--sink);display:block;position:relative;overflow:hidden;
}
.th-98{background:var(--teal)}
.th-98 .th-win{position:absolute;left:14%;top:14%;width:62%;height:48%;background:var(--face);box-shadow:var(--raise1)}
.th-98 .th-bar{position:absolute;inset:2px 2px auto 2px;height:5px;background:linear-gradient(90deg,var(--navy),var(--navy2))}
.th-98 .th-task{position:absolute;left:0;right:0;bottom:0;height:14%;background:var(--face);box-shadow:inset 0 1px 0 var(--hl)}
.th-term{background:#0b0b0b;padding:14% 10%}
.th-term .th-line{display:block;height:4px;width:80%;background:#33ff66;margin-bottom:5px}
.th-term .th-line.s{width:45%}
.th-term .th-line.m{width:62%;background:#1f8f3d}
.th-term .th-cur{display:block;width:6px;height:8px;background:#33ff66}
.th-smoke{background:radial-gradient(120% 90% at 30% 20%,#5a5a5f 0%,#2a2a2e 45%,#0f0f11 100%)}
.th-smoke .th-blob{position:absolute;left:22%;top:26%;width:56%;height:48%;
  background:linear-gradient(135deg,#f2f2f5,#8f8f99 40%,#3a3a40 70%,#dedee4);
  clip-path:polygon(20% 0,80% 12%,100% 55%,68% 100%,18% 88%,0 40%);}
.prop-note{margin-top:12px;color:#303030}
.sysprops{display:grid;gap:6px}
.sysprops div{display:flex;gap:8px}
.sysprops dt{flex:0 0 110px;color:var(--sh)}
.sysprops dd{font-weight:bold}
.dialog-foot{display:flex;justify-content:flex-end;gap:6px;margin-top:12px;flex-wrap:wrap}

/* ==========================  MINESWEEPER  ========================== */
.win-mines{min-width:0}
.win-mines .window-body{padding:5px}
.mines-body{background:var(--face)}
.mines-hud{
  display:flex;align-items:center;justify-content:space-between;
  width:150px;margin:0 auto 5px;padding:3px;box-shadow:var(--sink1);
}
.lcd{
  background:#000;color:#ff2b2b;font-family:"Courier New",monospace;font-weight:bold;
  font-size:17px;letter-spacing:1px;padding:1px 3px;box-shadow:var(--sink1);
}
.smiley{
  width:26px;height:26px;font:inherit;font-size:13px;background:var(--face);border:0;
  box-shadow:var(--raise);cursor:default;padding:0;
}
.smiley:active{box-shadow:var(--sink)}
.mines-grid{display:grid;grid-template-columns:repeat(9,16px);gap:0;padding:3px;background:var(--face);width:max-content;margin:0 auto}
.cell{
  width:16px;height:16px;padding:0;border:0;background:var(--face);box-shadow:var(--raise1);
  font:inherit;font-weight:bold;font-size:11px;line-height:16px;cursor:default;text-align:center;
}
.cell.open{box-shadow:inset 1px 1px 0 var(--sh);background:var(--face)}
.cell.boom{background:#ff0000}
.cell[data-n="1"]{color:#0000ff}.cell[data-n="2"]{color:#008000}.cell[data-n="3"]{color:#ff0000}
.cell[data-n="4"]{color:#000080}.cell[data-n="5"]{color:#800000}.cell[data-n="6"]{color:#008080}
.cell[data-n="7"]{color:#000000}.cell[data-n="8"]{color:#808080}
.empty-note{padding:10px;color:var(--sh)}

/* ==========================  MENUS (POPUPS)  ========================== */
.menu-pop{
  position:absolute;z-index:600;min-width:170px;padding:2px;
  background:var(--face);box-shadow:var(--raise);
}
.menu-pop button,.menu-pop a{
  display:flex;align-items:center;gap:8px;width:100%;
  font:inherit;background:none;border:0;padding:4px 22px 4px 6px;color:#000;
  text-align:left;text-decoration:none;cursor:default;white-space:nowrap;
}
.menu-pop svg{width:16px;height:16px;flex:0 0 16px;shape-rendering:crispEdges}
.menu-pop button:hover,.menu-pop a:hover,
.menu-pop button:focus-visible,.menu-pop a:focus-visible{background:var(--navy);color:#fff}
.menu-pop hr{border:0;height:2px;box-shadow:var(--sink1);margin:3px 1px}
.ctx-menu{z-index:700}

/* ==========================  TASKBAR  ========================== */
#taskbar{
  position:fixed;left:0;right:0;bottom:0;height:30px;z-index:500;
  display:flex;align-items:center;gap:3px;padding:2px;
  background:var(--face);box-shadow:inset 0 1px 0 var(--hl),inset 0 2px 0 var(--lt);
}
#start-btn{
  display:flex;align-items:center;gap:4px;height:22px;padding:0 6px 0 3px;
  font:inherit;font-weight:bold;background:var(--face);border:0;box-shadow:var(--raise);
  cursor:default;flex:0 0 auto;
}
#start-btn[aria-expanded=true]{box-shadow:var(--sink)}
#start-btn[aria-expanded=true] .flag{transform:translate(1px,1px)}
.flag{width:18px;height:18px;display:block}
.flag svg{width:18px;height:18px;display:block;shape-rendering:crispEdges}
.tb-sep{width:2px;height:22px;box-shadow:var(--sink1);flex:0 0 2px;margin:0 2px}
#task-list{display:flex;gap:3px;flex:1 1 auto;min-width:0;overflow:hidden}
.task-btn{
  display:flex;align-items:center;gap:5px;height:22px;min-width:0;flex:0 1 160px;
  padding:0 7px;font:inherit;background:var(--face);border:0;box-shadow:var(--raise);
  cursor:default;text-align:left;
}
.task-btn svg{width:16px;height:16px;flex:0 0 16px;shape-rendering:crispEdges}
.task-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-btn.active{
  box-shadow:var(--sink);font-weight:bold;
  background-image:linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%),
                   linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%);
  background-size:2px 2px;background-position:0 0,1px 1px;
}
.task-btn.active span{padding-left:1px}
#tray{
  display:flex;align-items:center;gap:5px;flex:0 0 auto;height:22px;padding:0 4px 0 6px;
  box-shadow:var(--sink1);
}
.tray-btn{background:none;border:0;padding:0;width:16px;height:16px;cursor:default}
.tray-btn svg{width:16px;height:16px;display:block;shape-rendering:crispEdges}
#clock{background:none;border:0;font:inherit;padding:0 2px 0 4px;cursor:default;min-width:56px;text-align:right}

/* ==========================  START MENU  ========================== */
#start-menu{
  position:fixed;left:2px;bottom:30px;z-index:650;
  display:flex;background:var(--face);box-shadow:var(--raise);padding:3px;
  min-width:250px;
}
.sm-side{
  flex:0 0 22px;background:linear-gradient(to top,#000080,#1084d0);
  display:flex;align-items:flex-end;justify-content:center;padding:8px 0;
}
.sm-side span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  color:#c0c0c0;font-weight:bold;font-size:15px;letter-spacing:.5px;
}
.sm-side b{color:#fff}
.sm-items{flex:1 1 auto;display:flex;flex-direction:column;padding:2px 0 0 2px}
.sm-row{
  display:flex;align-items:center;gap:8px;width:100%;
  font:inherit;background:none;border:0;padding:6px 22px 6px 5px;color:#000;
  text-align:left;text-decoration:none;cursor:default;position:relative;white-space:nowrap;
}
.sm-row svg{width:24px;height:24px;flex:0 0 24px;shape-rendering:crispEdges}
.sm-row:hover,.sm-row:focus-visible,.sm-row[aria-expanded=true]{background:var(--navy);color:#fff}
.sm-hero{font-weight:bold}
.sm-items hr{border:0;height:2px;box-shadow:var(--sink1);margin:3px 2px}
.arr{
  position:absolute;right:5px;top:50%;margin-top:-4px;width:5px;height:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8'%3E%3Cpath d='M0 0l5 4-5 4z' fill='%23000'/%3E%3C/svg%3E") no-repeat center;
}
.sm-row:hover .arr,.sm-row[aria-expanded=true] .arr{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8'%3E%3Cpath d='M0 0l5 4-5 4z' fill='%23fff'/%3E%3C/svg%3E")}
.menu-pop.sub{position:fixed;z-index:660}

/* ==========================  DIALOGS  ========================== */
.modal-layer{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:16px}
.dialog{position:relative;width:min(400px,100%);max-width:400px}
.dialog .title-bar{background:linear-gradient(90deg,var(--navy) 0%,var(--navy2) 100%)}
.dlg-body{padding:14px 14px 10px}
.dlg-row{display:flex;gap:14px;align-items:flex-start}
.dlg-ico{width:32px;height:32px;flex:0 0 32px;shape-rendering:crispEdges}
.dlg-body p{line-height:1.5;font-size:12px}
.sd-opts{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.sd-opts legend{padding:0 0 8px;font-size:12px}
.sd-opts label{display:flex;align-items:center;gap:7px}

/* ==========================  SHUTDOWN / BSOD  ========================== */
#off-screen{
  position:fixed;inset:0;z-index:1000;background:#000;color:#ffb000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  font-family:"Courier New",monospace;text-align:center;padding:24px;
}
.off-text{font-size:clamp(16px,4vw,26px);letter-spacing:1px}
.off-sub{font-family:var(--font);color:#c0c0c0}
#bsod{
  position:fixed;inset:0;z-index:1000;background:#0000aa;color:#fff;
  font-family:"Courier New",monospace;font-size:clamp(12px,2.4vw,15px);line-height:1.7;
  display:flex;align-items:center;justify-content:center;padding:24px;cursor:pointer;
}
.bsod-inner{max-width:640px;display:flex;flex-direction:column;gap:16px}
.bsod-head{background:#c0c0c0;color:#0000aa;align-self:center;padding:0 10px;font-weight:bold}
#bsod ul{display:flex;flex-direction:column;gap:8px}
.bsod-foot{text-align:center}

/* ==========================  RESPONSIVE  ========================== */
@media (max-width:760px){
  body{overflow:auto}
  #desktop{position:static;inset:auto;overflow:visible;padding:8px 8px 44px;min-height:100vh}
  #icon-field{
    position:static;display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
    gap:2px;margin-bottom:12px;height:auto;
  }
  .dicon{width:100%}
  .window{
    position:static !important;width:auto !important;max-width:100% !important;
    height:auto !important;margin:0 0 12px 0;transform:none !important;
  }
  .window.max{height:auto}
  .window-body.scroll-y,.pane.scroll-y{max-height:none !important;overflow:visible}
  .outlook{flex-direction:column}
  .ol-pane{flex:1 1 auto}
  .wizard{flex-direction:column}
  .wizard-side{flex:0 0 54px;height:54px}
  .themes{grid-template-columns:1fr;gap:6px}
  .theme{flex-direction:row;align-items:center;gap:10px}
  .thumb{width:88px;flex:0 0 88px}
  .cpanel{grid-template-columns:1fr}
  .netgrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .details .row td{max-width:none;white-space:normal}
  .details th:nth-child(3),.details td:nth-child(3){display:none}
  #start-menu{left:0;right:0;bottom:30px;max-height:calc(100vh - 34px);overflow:auto}
  .sm-items{min-width:0}
  .menu-pop.sub{left:0 !important;right:0;width:auto;bottom:30px;top:auto !important}
  #task-list{display:none}
  #tray{margin-left:auto}
  .np-meta{grid-template-columns:1fr}
  .status-field:first-child{min-width:0}
}
@media (max-width:400px){
  #tray{padding-left:3px}
  .dicon-lbl{font-size:10px}
}

/* ==========================  MOTION  ========================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .caret{opacity:1}
  .fill{transition:none !important}
}


/* ==========================  CONTENTS LIST (readme)  ========================== */
/* the readme used to end on a dead instruction to double-click; these are the doors */
.np-toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 10px;margin:4px 0 8px}
.np-toc .toc{
  display:flex;align-items:center;gap:6px;width:100%;
  font:inherit;color:#000080;background:none;border:0;padding:2px 3px;
  text-align:left;cursor:default;text-decoration:underline;
}
.np-toc .toc svg{width:16px;height:16px;flex:0 0 16px;shape-rendering:crispEdges}
.np-toc .toc:hover,.np-toc .toc:focus-visible{background:#000080;color:#fff}
.np-toc .toc:focus-visible{outline:1px dotted #fff;outline-offset:-2px}

/* the taskbar window list is hidden on phones, so a minimised window had no way back;
   in the stacked mobile layout these two controls have nothing to do anyway */
@media (max-width:760px){
  .np-toc{grid-template-columns:1fr}
  .tb-min,.tb-max{display:none}
}