html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: #ddd;
  font-family: Arimo, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

#stage { position: relative; width: 100vw; height: 100vh; }
#desk {
  position: absolute;
  transform-origin: top left;
  background: #000;
  outline: 1px solid #222;
}
#flyc, #cursor { position: absolute; pointer-events: none; }
#cursor { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }

#menubar {
  position: absolute;
  top: 0; left: 0; right: 0; height: 25px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 12px; box-sizing: border-box;
  border-bottom: 1px solid #2a2a2a;
  font-size: 13px; color: #bbb;
  background: #050505;
}
.mb-left, .mb-right { display: flex; gap: 16px; align-items: center; }
.mb-left b { color: #fff; font-weight: 700; }

.win {
  position: absolute;
  background: #000;
  border: 1px solid #333;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,0.9);
  overflow: hidden;
}
.titlebar {
  height: 28px; flex: 0 0 28px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px;
  border-bottom: 1px solid #2a2a2a;
  background: #0a0a0a;
  font-size: 12px; color: #999;
}
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border: 1px solid #555; border-radius: 50%; }

.tabs {
  height: 26px; flex: 0 0 26px;
  display: flex; align-items: stretch;
  border-bottom: 1px solid #2a2a2a;
  background: #050505;
  font-size: 12px;
}
.tab {
  display: flex; align-items: center;
  padding: 0 14px;
  border-right: 1px solid #2a2a2a;
  color: #777;
}
.tab.active { color: #fff; background: #000; }

.urlbar {
  height: 24px; flex: 0 0 24px;
  margin: 8px 20px 0 80px;
  border: 1px solid #333;
  display: flex; align-items: center;
  padding: 0 10px;
  font-family: Cousine, "Courier New", monospace;
  font-size: 11px; color: #9a9a9a;
  background: #060606;
}

.page { flex: 1; overflow: hidden; padding: 18px 26px; }
.page h1 { font-size: 22px; margin: 0 0 10px; color: #fff; font-weight: 700; }
.page p { font-size: 12.5px; line-height: 1.5; color: #bbb; margin: 0 0 10px; }
.page a { color: #fff; }
.page .fine { color: #666; font-size: 10.5px; border-top: 1px solid #222; padding-top: 8px; }

#hud {
  flex: 0 0 auto;
  padding: 6px 10px;
  font-family: Cousine, "Courier New", monospace;
  font-size: 10px; line-height: 1.5;
  color: #eef3f7;
  white-space: pre;
  border-bottom: 1px solid #2a2a2a;
}
#raster { flex: 1; width: 100%; }

#term {
  flex: 1; overflow: hidden;
  padding: 8px 10px;
  font-family: Cousine, "Courier New", monospace;
  font-size: 10.5px; line-height: 1.55;
  color: #c5c5c5;
  white-space: pre-wrap; word-break: break-all;
}
#term .prompt { color: #777; }