body{
  margin:0;
  padding:48px 16px;
  background:#000;
  color:#b8b8b8;
  font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
}
.console{
  max-width:520px;
  margin:0 auto;
  border:1px solid #333;
  background:#0c0c0c;
}
.bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 12px;
  border-bottom:1px solid #333;
  background:#1a1a1a;
  color:#808080;
  font-size:11px;
}
.bar-title{margin:0; font:inherit}
.bar{cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none}
.bar.dragging{cursor:grabbing}
.bar > :first-child{margin-right:auto}
.bar a{cursor:pointer}
.bar img{display:block; width:84px; height:auto; filter:invert(1)}
.screen{padding:16px 18px 20px}
.line{display:block; min-height:1.7em; white-space:pre-wrap}
.cmd{color:#fff}
.cmd::before{content:"$ "; color:#33ff66}
/* Breathing room between sections: a gap before each command that follows output */
.line:not(.cmd) + .cmd{margin-top:14px}
.hint{margin-top:14px}
/* Services with a short explanation next to each, stacked on narrow screens */
.services{display:grid; grid-template-columns:max-content 1fr; column-gap:2ch; white-space:normal}
@media (max-width:480px){
  .services{grid-template-columns:1fr}
  .services .dim{display:none}
  /* Less text on phones: drops the longer phrasing and details that are also found elsewhere */
  .wide-only{display:none}
}
.closed{color:#ffcc00}
.dim{color:#666}
.skip-hint{margin-top:10px; color:#555; font-size:11px}
.hello{display:flex; align-items:center; gap:14px; margin-bottom:12px; color:#fff}
.hello img{flex:none; width:64px; height:64px; border:1px solid #333}
.hello-side{flex:none; align-self:flex-start; margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.hello-link{color:#666; line-height:0}
.lang{font-size:11px; line-height:1; color:#444; white-space:nowrap}
.lang a{color:#666; text-decoration:none}
.lang a[aria-current]{color:#fff}
.lang a:hover{color:#ffcc00}
.hello-link:hover{color:#0a66c2}
a{color:#6699ff}
a:hover{color:#ffcc00}
.cursor{display:inline-block; width:.6em; height:1.1em; vertical-align:text-bottom; background:#33ff66; animation:blink 1s steps(1) infinite}
.prompt{white-space:normal}
.field{display:flex; gap:1ch}
.ps{flex:none; color:#33ff66}
.field input{
  flex:1;
  min-width:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font:inherit;
  line-height:inherit;
  caret-color:#33ff66;
}
.field input::placeholder{color:#444}
.trap{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
button{
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:#6699ff;
  font:inherit;
  cursor:pointer;
}
button:hover,button:focus-visible{color:#ffcc00; outline:0}
button[disabled]{color:#444; cursor:default}
.status:empty{display:none}
.status.ok{color:#33ff66}
.status.err{color:#ff6666}
.hidden{display:none}
.error{margin:0; font:inherit; color:#ff6666}

/* Latest log entries, listed inside the console */
.entries{margin:0; padding:0; list-style:none}
.entries li{display:flex; gap:2ch}
.entries time{flex:none; color:#666}

/* Log posts: a wider window with readable body text */
.console.wide{max-width:680px}
.post h1{margin:0 0 4px; font:inherit; font-weight:bold; color:#fff}
.post .meta{margin:0 0 20px; color:#666}
.post-body{color:#c8c8c8}
.post-body > :first-child{margin-top:0}
.post-body p,.post-body ul,.post-body ol,.post-body pre,.post-body blockquote{margin:0 0 1em}
.post-body h2,.post-body h3{margin:1.6em 0 .6em; font:inherit; font-weight:bold; color:#fff}
.post-body h2::before{content:"## "; color:#33ff66}
.post-body h3::before{content:"### "; color:#33ff66}
.post-body ul,.post-body ol{padding-left:3ch}
.post-body code{color:#ffcc00}
.post-body pre{overflow-x:auto; padding:10px 12px; border:1px solid #333; background:#000}
.post-body pre code{color:#b8b8b8}
.post-body blockquote{padding-left:2ch; border-left:1px solid #333; color:#808080}
.post-body img{max-width:100%; height:auto}
.post-nav{margin-top:24px; padding-top:12px; border-top:1px solid #222}
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Retro desktop, shown when the console is closed with the X */
.close,.desktop button{
  font:11px/1 Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif;
  color:#000;
}
.close,.start,.task,.start-menu,.tray,.window,.face,.cell{
  background:#c0c0c0;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.close{flex:none; width:18px; height:16px; padding:0 0 2px; font-weight:bold; font-size:12px; color:#000}
.close:hover,.close:focus-visible{color:#000; outline:1px dotted #fff; outline-offset:1px}
.close:active,.start.pressed,.task{box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080}
.desktop{display:none}
.os{background:#008080; padding-bottom:76px}
.os .desktop{display:block}
.os .console{position:relative; z-index:2; box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.console{position:relative; z-index:1}
/* Hints at the desktop before the console is closed: the top edge of the taskbar peeks up from the bottom of the screen,
   and dragging the console erases a black mask (.mask, drawn by site.js) to uncover the desktop underneath */
body:not(.os):has(.mask)::after{content:""; position:fixed; right:0; bottom:0; left:0; height:2px; background:#c0c0c0; border-top:1px solid #fff}
.mask{display:none}
.peek{background:#008080}
.peek .desktop{display:block; pointer-events:none}
/* Icons the console has wiped clear (no longer inert) can be clicked through the transparent part of the mask */
.peek .icon:not([inert]){pointer-events:auto}
.peek .mask{display:block; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1001; pointer-events:none}
.peek .console{z-index:1002; box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.icons{position:fixed; top:16px; left:12px; z-index:1; display:flex; flex-direction:column; gap:14px}
.icon{display:flex; flex-direction:column; align-items:center; gap:4px; width:76px; padding:0; color:#fff !important; cursor:default}
.icon svg{width:32px; height:32px; shape-rendering:crispEdges}
.icon span{padding:1px 3px; color:#fff; line-height:1.3}
.icon:focus-visible{outline:0}
.icon.selected span,.icon:focus-visible span{background:#000080; outline:1px dotted #fff}
.icon.selected svg{filter:sepia(1) hue-rotate(190deg) saturate(4) brightness(.7)}
.taskbar{
  position:fixed; right:0; bottom:0; left:0; z-index:1000;
  display:flex; align-items:center; gap:4px;
  height:28px; padding:2px; box-sizing:border-box;
  background:#c0c0c0; border-top:1px solid #fff;
}
.start,.task{display:flex; align-items:center; gap:4px; height:22px; padding:0 8px; cursor:default}
.start b{font-size:12px}
.task{padding:0 10px 0 6px; max-width:160px; font-weight:bold; background:#dfdfdf}
.task svg,.start-items svg{width:16px; height:16px; shape-rendering:crispEdges}
.tray{margin-left:auto; padding:4px 10px; color:#000; font:11px Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #808080}
.start-menu{position:fixed; bottom:27px; left:2px; z-index:1001; display:flex; padding:3px}
.start-side{
  writing-mode:vertical-rl; transform:rotate(180deg);
  padding:8px 3px; background:linear-gradient(#1084d0,#000080);
  color:#c0c0c0; font:bold 18px Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif; letter-spacing:1px;
}
.start-side b{color:#fff}
.start-items{display:flex; flex-direction:column; min-width:150px}
.start-items button{display:flex; align-items:center; gap:10px; padding:6px 20px 6px 8px; text-align:left; cursor:default}
.start-items button:hover,.start-items button:focus-visible{background:#000080; color:#fff; outline:0}
.start-items hr{margin:2px 2px; border:0; border-top:1px solid #808080; border-bottom:1px solid #fff}
.shutdown{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background:#000; color:#ff8c00; text-align:center;
  font:bold 28px/1.4 Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif;
  cursor:default;
}

/* Mines window */
.window{position:absolute; z-index:2; padding:3px; box-sizing:border-box; font:11px Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif; color:#000}
.title{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:6px; padding:2px 2px 2px 4px;
  background:linear-gradient(90deg,#000080,#1084d0); color:#fff; font-weight:bold;
  cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none;
}
.title.dragging{cursor:grabbing}
.mines-panel{
  display:flex; align-items:center; justify-content:space-between;
  margin:0 3px 6px; padding:4px 5px;
  box-shadow:inset 1px 1px #808080, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #fff;
}
.led{padding:0 2px; background:#000; color:#ff0000; font:bold 20px/1.1 "Courier New",monospace; letter-spacing:1px}
.desktop .face{width:28px; height:28px; padding:0; font:bold 12px/1 "Courier New",monospace; cursor:default}
.face:active{box-shadow:inset 1px 1px #808080}
.mines-board{
  display:grid; grid-template-columns:repeat(9, 22px); margin:0 3px 3px; border:3px solid; border-color:#808080 #fff #fff #808080;
  -webkit-touch-callout:none; touch-action:manipulation;
}
.desktop .cell{width:22px; height:22px; padding:0; font:bold 13px/1 Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif; cursor:default}
.desktop .cell.open{box-shadow:none; border-top:1px solid #808080; border-left:1px solid #808080}
.cell.flag{color:#ff0000}
.cell.wrong{background:#ffb3b3}
.cell.mine{color:#000}
.cell.boom{background:#ff0000}
.cell.n1{color:#0000ff}
.cell.n2{color:#008000}
.cell.n3{color:#ff0000}
.cell.n4{color:#000080}
.cell.n5{color:#800000}
.cell.n6{color:#008080}
.cell.n7{color:#000}
.cell.n8{color:#808080}

/* Mail window */
.mail{width:min(520px, calc(100vw - 16px))}
.mail-form{display:flex; flex-direction:column; gap:4px; margin:0}
.mail-toolbar{display:flex; padding:0 2px 4px; border-bottom:1px solid #808080; box-shadow:0 1px #fff}
.desktop .mail-send{display:flex; flex-direction:column; align-items:center; gap:2px; padding:3px 10px; cursor:default}
.mail-send svg{width:22px; height:22px; shape-rendering:crispEdges}
.mail-send:hover,.mail-send:focus-visible{box-shadow:inset -1px -1px #808080, inset 1px 1px #fff; outline:0}
.mail-send:active{box-shadow:inset 1px 1px #808080, inset -1px -1px #fff}
.mail-send[disabled] svg{opacity:.4}
.mail-fields{display:flex; flex-direction:column; gap:3px; padding:4px 2px}
.mail-fields label{display:flex; align-items:center; gap:6px}
.mail-fields span{flex:none; width:52px; text-align:right}
.mail-fields input,.mail textarea{
  flex:1; min-width:0; margin:0; padding:3px 4px; border:0; outline:0;
  background:#fff; color:#000; font:11px Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif;
  box-shadow:inset 1px 1px #808080, inset -1px -1px #fff, inset 2px 2px #0a0a0a, inset -2px -2px #dfdfdf;
}
.mail-fields input[readonly]{background:#c0c0c0}
.mail textarea{height:min(320px, 50vh); min-height:160px; resize:vertical; font:12px/1.4 "Courier New",monospace}
.mail-status{padding:2px 6px; box-shadow:inset 1px 1px #808080, inset -1px -1px #fff}
.mail-status.ok{color:#008000}
.mail-status.err{color:#c00000}
/* Paint window */
.task span{overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.paint{width:min(620px, calc(100vw - 16px)); outline:0}
.paint-menus{display:flex; margin:-4px 0 3px}
.paint-menu{position:relative}
.desktop .paint-menu > button{padding:3px 7px; cursor:default}
.desktop .paint-menu > button.open{box-shadow:inset 1px 1px #808080, inset -1px -1px #fff}
.paint-list{
  position:absolute; top:100%; left:0; z-index:5;
  display:flex; flex-direction:column; min-width:180px; padding:3px;
  background:#c0c0c0; box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
}
.desktop .paint-list button{display:flex; justify-content:space-between; gap:24px; padding:4px 10px 4px 18px; text-align:left; cursor:default}
.desktop .paint-list button:hover,.desktop .paint-list button:focus-visible{background:#000080; color:#fff; outline:0}
.paint-list kbd{font:inherit}
.paint-list hr{margin:2px; border:0; border-top:1px solid #808080; border-bottom:1px solid #fff}
.paint-body{display:flex; gap:3px}
.paint-side{flex:none; display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 2px}
.paint-tools{display:grid; grid-template-columns:repeat(2, 25px)}
.desktop .paint-tool{
  display:flex; align-items:center; justify-content:center; width:25px; height:25px; padding:0; cursor:default;
  background:#c0c0c0; box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.paint-tool svg{width:16px; height:16px; shape-rendering:crispEdges}
.desktop .paint-tool.active{
  background:repeating-conic-gradient(#fff 0 25%, #c0c0c0 0 50%) 0 0/2px 2px;
  box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
}
.desktop .paint-tool:focus-visible{outline:1px dotted #000; outline-offset:-4px}
.paint-options{
  display:flex; flex-direction:column; align-items:center; justify-content:space-evenly;
  width:46px; min-height:70px; padding:3px 0; box-sizing:border-box;
  box-shadow:inset 1px 1px #808080, inset -1px -1px #fff;
}
.desktop .paint-opt{display:flex; align-items:center; justify-content:center; width:38px; min-height:14px; padding:1px 0; cursor:default}
.paint-opt i{display:block; background:#000}
.desktop .paint-opt.active{background:#000080}
.paint-opt.active i{background:#fff}
.paint-opt[data-mode] i{width:26px; height:9px; box-sizing:border-box; background:none}
.paint-opt.mode-outline i,.paint-opt.mode-both i{border:1px solid #000}
.paint-opt.mode-both i,.paint-opt.mode-fill i{background:#808080}
.paint-opt.active.mode-outline i,.paint-opt.active.mode-both i{border-color:#fff}
.paint-area{
  flex:1; min-width:0; max-height:min(340px, 55vh); overflow:auto; padding:3px;
  background:#808080; box-shadow:inset 1px 1px #0a0a0a, inset -1px -1px #fff;
}
.paint-canvas{display:block; max-width:100%; height:auto; background:#fff; image-rendering:pixelated; touch-action:none; cursor:crosshair}
.paint-palette{display:flex; align-items:center; gap:4px; margin:4px 2px 3px}
.paint-current{
  position:relative; flex:none; width:32px; height:32px;
  background:repeating-conic-gradient(#fff 0 25%, #c0c0c0 0 50%) 0 0/2px 2px;
  box-shadow:inset 1px 1px #808080, inset -1px -1px #fff;
}
.paint-current i{position:absolute; width:13px; height:13px; box-shadow:inset 1px 1px #fff, inset -1px -1px #808080, 0 0 0 1px #000}
.paint-current .fg{top:5px; left:5px; z-index:1}
.paint-current .bg{top:14px; left:14px}
.paint-colors{display:grid; grid-template-columns:repeat(14, 16px); grid-auto-rows:16px}
.desktop .paint-color{width:16px; height:16px; padding:0; cursor:default; box-shadow:inset 1px 1px #808080, inset -1px -1px #fff, inset 2px 2px #0a0a0a, inset -2px -2px #dfdfdf}
.desktop .paint-color:focus-visible{outline:1px dotted #000}
.paint-status{display:flex; gap:3px}
.paint-status span{padding:2px 6px; box-shadow:inset 1px 1px #808080, inset -1px -1px #fff}
.paint-hint{flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.paint-pos{flex:none; width:64px}
/* Internet window: a retro web browser */
.www{width:min(680px, calc(100vw - 16px))}
.www-toolbar{display:flex; align-items:stretch; gap:2px; margin:-3px 0 3px; padding:2px; border-bottom:1px solid #808080; box-shadow:0 1px #fff}
.desktop .www-btn{display:flex; flex-direction:column; align-items:center; gap:1px; min-width:52px; padding:3px 6px; cursor:default}
.www-btn b{font:bold 15px/1 Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif; color:#000080}
.www-btn:hover,.www-btn:focus-visible{box-shadow:inset -1px -1px #808080, inset 1px 1px #fff; outline:0}
.www-btn:active{box-shadow:inset 1px 1px #808080, inset -1px -1px #fff}
.desktop .www-btn[disabled]{color:#808080; text-shadow:1px 1px #fff; box-shadow:none}
.www-btn[disabled] b{color:#808080}
.www-throbber{
  display:flex; align-items:center; justify-content:center; width:36px; margin-left:auto;
  background:#000080; color:#fff; font:bold 22px Georgia,"Times New Roman",serif;
  box-shadow:inset 1px 1px #808080, inset -1px -1px #fff;
}
.loading .www-throbber{background:linear-gradient(#000080,#1084d0); animation:www-pulse .5s steps(2) infinite}
.www-address{display:flex; align-items:center; gap:6px; margin:0 2px 4px}
.www-address input{
  flex:1; min-width:0; margin:0; padding:3px 4px; border:0; outline:0;
  background:#fff; color:#000; font:11px Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif;
  box-shadow:inset 1px 1px #808080, inset -1px -1px #fff, inset 2px 2px #0a0a0a, inset -2px -2px #dfdfdf;
}
.desktop .www-go{flex-direction:row; min-width:0; padding:3px 10px; background:#c0c0c0;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf}
.www-view{
  height:min(400px, 58vh); overflow:auto; padding:14px 18px; outline:0;
  background:#fffbe6 repeating-linear-gradient(45deg, transparent 0 10px, rgba(0,0,128,.035) 10px 20px);
  color:#000; font:15px/1.45 "Times New Roman",Times,serif;
  box-shadow:inset 1px 1px #808080, inset -1px -1px #fff, inset 2px 2px #0a0a0a, inset -2px -2px #dfdfdf;
}
.www-view a{color:#0000ee; text-decoration:underline}
.www-view a:visited{color:#551a8b}
.www-view a:hover{color:#ff0000}
.www-view h1{margin:0 0 6px; font:bold 30px/1.2 Georgia,"Times New Roman",serif; color:#800000; text-shadow:2px 2px #ffcc00}
.www-view h2{margin:18px 0 6px; font:bold 20px/1.2 Georgia,"Times New Roman",serif; color:#000080}
.www-view p{margin:0 0 10px}
.www-center{text-align:center}
.www-logo{display:block; width:234px; max-width:100%; height:auto; margin:4px auto 0}
.www-tag{font:italic bold 18px "Comic Sans MS","Comic Sans",cursive; color:#008080}
.www-marquee{overflow:hidden; margin:0 -18px 10px; padding:3px 0; background:#000080; color:#ffff00; font:bold 13px "Courier New",monospace; white-space:nowrap}
.www-marquee span{display:inline-block; padding-left:100%; animation:www-marquee 18s linear infinite}
.www-nav{text-align:center; font-weight:bold}
.www-box{padding:8px 10px; border:3px double #800000; background:#ffffcc}
.www-new{padding:0 3px; background:#ff0000; color:#fff; font:bold 11px Arial,sans-serif; animation:www-blink 1s steps(1) infinite}
.www-grid,.www-table{width:100%; margin:0 0 12px; border-collapse:separate; border-spacing:3px; border:2px outset #c0c0c0; background:#c0c0c0}
.www-grid td,.www-table td,.www-table th{padding:6px 8px; border:2px inset #c0c0c0; background:#fff; vertical-align:top}
.www-grid td{width:33%; text-align:center}
.www-table th{background:#000080; color:#fff; text-align:left}
.www-table td:first-child{white-space:nowrap; font-weight:bold}
.www-view .entries li{gap:1.5ch}
.www-view .entries time{color:#808080; font-family:"Courier New",monospace}
.www-counter{display:inline-block; padding:1px 4px; background:#000; color:#33ff66; font:bold 15px "Courier New",monospace; letter-spacing:3px}
.www-rule{height:6px; margin:18px 0 10px; border:0; background:linear-gradient(90deg,#f00,#f80,#ff0,#0c0,#08f,#80f)}
.www-small{text-align:center; font-size:12px; color:#555}
.desktop .www-sign{padding:6px 14px; background:#c0c0c0; font-size:13px; font-weight:bold; cursor:pointer;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf}
.desktop .www-sign:active{box-shadow:inset 1px 1px #0a0a0a, inset -1px -1px #fff}
.www-error{min-height:100%; margin:-14px -18px; padding:14px 18px; background:#fff}
.www-error h1{color:#000; text-shadow:none}
.www-status{display:flex; gap:3px; margin-top:3px}
.www-status > span{padding:2px 6px; box-shadow:inset 1px 1px #808080, inset -1px -1px #fff}
.www-text{flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.www-bar{flex:none; width:110px}
.www-bar i{display:block; width:0; height:11px; background:#000080}
.www-status.busy .www-bar i{animation:www-load .8s steps(10) forwards}
@keyframes www-marquee{to{transform:translateX(-100%)}}
@keyframes www-blink{50%{visibility:hidden}}
@keyframes www-pulse{50%{color:#ffcc00}}
@keyframes www-load{to{width:100%}}
.desktop .hidden,.console.hidden{display:none}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor,.www-marquee span,.www-new,.loading .www-throbber{animation:none}.www-marquee span{padding-left:0}}