:root{--face:#c0c0c0;--hi:#fff;--lt:#dfdfdf;--sh:#808080;--dk:#000;--navy:#000080;--desk:#008080}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--desk);color:#000;font:12px/1.4 "MS Sans Serif","Microsoft Sans Serif","Pixelated MS Sans Serif",Tahoma,Geneva,sans-serif;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;font-smooth:never;padding:16px 16px 48px}
a{color:#00e}
b,strong{font-weight:bold}
img,svg{image-rendering:pixelated}
main{max-width:760px;margin:0 auto}
@media (min-width:1100px){main{margin-left:max(120px,calc(50% - 380px))}}

/* bevels */
.raised,.win,button,.btn,.taskbar .start>summary,.menu{box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--lt),inset -2px -2px var(--sh),inset 2px 2px var(--hi)}
.sunken,.inset{background:#fff;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--sh),inset -2px -2px var(--lt),inset 2px 2px var(--dk)}

/* window */
.win{background:var(--face);padding:3px;margin:0 0 16px}
.tb{background:var(--navy);color:#fff;font-weight:bold;height:20px;padding:0 2px 0 3px;display:flex;align-items:center;gap:4px;user-select:none}
.win.inactive .tb{background:var(--sh);color:var(--face)}
.tb svg{flex:none}
.tb .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctl{display:flex;gap:0}
.ctl>*{width:16px;height:14px;background:var(--face);color:#000;text-decoration:none;display:grid;place-items:center;font:bold 10px/1 monospace;box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--sh),inset 2px 2px var(--lt)}
.ctl>:last-child{margin-left:2px}
.menubar{display:flex;gap:2px;padding:2px 0 3px}
.menubar span{padding:1px 6px}
.menubar span::first-letter{text-decoration:underline}
.wb{padding:10px 10px 12px}
.status{display:flex;gap:2px;margin-top:2px}
.status>*{flex:1;padding:2px 4px;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--sh);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* controls */
button,.btn{font:inherit;color:#000;background:var(--face);border:0;border-radius:0;min-width:75px;min-height:23px;padding:3px 12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;text-decoration:none}
button:active,.btn:active,button.on{box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--dk),inset -2px -2px var(--lt),inset 2px 2px var(--sh);padding:4px 11px 2px 13px}
button.on{background:repeating-conic-gradient(var(--face) 0 25%,#fff 0 50%) 0 0/2px 2px;font-weight:bold}
button.default{outline:1px solid #000;outline-offset:0}
button:focus-visible,.btn:focus-visible{outline:1px dotted #000;outline-offset:-5px}
button:disabled{color:var(--sh);text-shadow:1px 1px var(--hi);cursor:default}
.row{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;margin-top:10px}
fieldset{border:1px solid var(--sh);box-shadow:1px 1px var(--hi),inset 1px 1px var(--hi);padding:10px 10px 12px;margin:14px 0 0}
legend{padding:0 3px}
input[type=radio]{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin:0;flex:none;border-radius:50%;background:#fff;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--sh),inset -2px -2px var(--lt),inset 2px 2px var(--dk);cursor:pointer}
input[type=radio]:checked{background:radial-gradient(#000 0 2px,#fff 2.5px)}
input[type=radio]:focus-visible+*{outline:1px dotted #000}
hr{border:0;border-top:1px solid var(--sh);border-bottom:1px solid var(--hi);margin:12px 0}
.muted{color:var(--sh);text-shadow:1px 1px var(--hi)}
.big{font-size:14px}

/* dialog */
.dialog{max-width:420px;margin:8vh auto 16px}
.msg{display:flex;gap:14px;align-items:flex-start}
.msg svg{flex:none}
.msg p{margin:4px 0 8px}

/* people / avatars */
.pfp{display:block;object-fit:cover;background:var(--sh);padding:2px;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--sh),inset -2px -2px var(--lt),inset 2px 2px var(--dk)}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.person{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:10px 6px}
.person.is-cand{background:repeating-conic-gradient(var(--face) 0 25%,#d8d8d8 0 50%) 0 0/2px 2px}
.person .nm{font-weight:bold}
.person .by{min-height:2.8em;font-size:11px}
.person.mine .nm{background:var(--navy);color:#fff;padding:0 3px}
.list{padding:2px;max-height:none}
.list label,.list .item{display:flex;align-items:center;gap:8px;padding:4px 6px;cursor:pointer}
.list label:has(input:checked){background:var(--navy);color:#fff}
.list .item{cursor:default}

/* progress / results */
.bar{height:18px;padding:3px;flex:1;min-width:60px}
.bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--navy) 0 9px,transparent 9px 11px)}
.res{display:grid;grid-template-columns:auto auto 1fr auto;gap:6px 10px;align-items:center}
.res .rank{font-weight:bold;text-align:right;min-width:2ch}
.res .n{white-space:nowrap;text-align:right}
.winner{display:flex;gap:14px;align-items:center;padding:12px;margin-bottom:12px;background:#fff}
.winner .name{font-size:18px;font-weight:bold}
.loading i{animation:fill 6s steps(30) infinite}
@keyframes fill{from{width:0}to{width:100%}}

table{border-collapse:collapse;width:100%;background:#fff}
th,td{text-align:left;padding:3px 6px;border-bottom:1px solid var(--lt)}
th{background:var(--face);font-weight:normal;box-shadow:inset -1px -1px var(--sh),inset 1px 1px var(--hi)}
td form{display:inline}
td button{min-width:0;min-height:18px;padding:0 6px}
.note{background:#ffffe1;border:1px solid #000;padding:6px 8px;margin:0 0 10px}

/* desktop icons */
.icons{display:none}
@media (min-width:1100px){
  .icons{display:flex;flex-direction:column;gap:18px;position:fixed;left:12px;top:14px;width:84px}
  .icons a{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;text-decoration:none;text-align:center}
  .icons a span{padding:0 2px}
  .icons a:focus span,.icons a:hover span{background:var(--navy);outline:1px dotted #fff}
}

/* taskbar */
.taskbar{position:fixed;left:0;right:0;bottom:0;height:28px;background:var(--face);box-shadow:inset 0 1px var(--lt),inset 0 2px var(--hi);display:flex;align-items:center;gap:4px;padding:2px 2px 0;z-index:10}
.taskbar .start{position:relative}
.taskbar .start>summary{list-style:none;height:22px;padding:0 5px 0 3px;display:flex;align-items:center;gap:3px;font-weight:bold;cursor:pointer;background:var(--face)}
.taskbar .start>summary::-webkit-details-marker{display:none}
.taskbar .start[open]>summary{box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--dk),inset -2px -2px var(--lt),inset 2px 2px var(--sh)}
.menu{position:absolute;bottom:25px;left:0;background:var(--face);padding:3px;display:flex;min-width:190px}
.menu .stripe{background:linear-gradient(var(--navy),#1084d0);color:var(--face);writing-mode:vertical-rl;transform:rotate(180deg);padding:6px 3px;font-size:18px;letter-spacing:1px}
.menu .stripe b{color:#fff}
.menu .items{flex:1;display:flex;flex-direction:column}
.menu .items>*{display:flex;align-items:center;gap:10px;padding:6px 18px 6px 8px;color:#000;text-decoration:none;background:none;box-shadow:none;font:inherit;justify-content:flex-start;min-height:0;width:100%;cursor:pointer}
.menu .items>*:hover,.menu .items>*:focus{background:var(--navy);color:#fff}
.menu form{display:contents}
.menu hr{margin:3px 2px}
.task{height:22px;flex:0 1 180px;min-width:0;padding:0 6px;display:flex;align-items:center;gap:4px;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--dk),inset -2px -2px var(--lt),inset 2px 2px var(--sh);background:repeating-conic-gradient(var(--face) 0 25%,#fff 0 50%) 0 0/2px 2px}
.tray{margin-left:auto;height:22px;padding:0 10px;display:flex;align-items:center;gap:6px;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--sh)}

/* blue screen */
body.bsod{background:#0000aa;color:#fff;font:16px/1.5 "Lucida Console","Courier New",monospace;display:grid;place-items:center;padding:24px}
.bsod .b{max-width:640px}
.bsod .h{background:#aaa;color:#0000aa;padding:0 6px;display:table;margin:0 auto 20px}
.bsod a{color:#fff}

@media (max-width:520px){
  body{padding:8px 8px 40px}
  .people{grid-template-columns:repeat(2,1fr)}
  .dialog{margin-top:4vh}
}