:root {
  --desktop: #008080;
  --face: #c0c0c0;
  --face-light: #dfdfdf;
  --face-lighter: #ffffff;
  --face-shadow: #808080;
  --face-shadow-dark: #404040;
  --titlebar-start: #000080;
  --titlebar-end: #1084d0;
  --text: #000000;
  --text-dim: #444444;
  --field: #ffffff;
  --selected: #000080;
  --selected-text: #ffffff;
  --folder-yellow: #ffd25f;
  --folder-yellow-dark: #e0a940;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 100ms;
  --dur: 160ms;
}

/* Motion is limited to transform/opacity/border-color swaps throughout this
   file, which is cheap to composite even on old integrated GPUs. This block
   turns it off entirely for anyone who asks, or whose hardware the browser
   itself has decided to be conservative about. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: Tahoma, "MS Sans Serif", Arial, sans-serif;
  font-size: 13px;
  background: var(--desktop);
}

a { color: inherit; }

/* --- Reusable beveled "3D" panel look, the core of the look --- */

.bevel-out {
  background: var(--face);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-shadow);
}

.bevel-in {
  background: var(--field);
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
  box-shadow: inset 1px 1px 0 var(--face-shadow), inset -1px -1px 0 var(--face-light);
}

@keyframes pop-in {
  0% { opacity: 0; transform: translateY(6px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.brand-letter {
  display: inline-block;
  animation: pop-in 260ms var(--ease) both;
}

header.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--face);
  border-bottom: 1px solid var(--face-shadow-dark);
  box-shadow: inset 0 -1px 0 var(--face-shadow), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--text);
}

.brand::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: none;
  background: linear-gradient(135deg, var(--titlebar-end), var(--titlebar-start));
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
}

nav.site-nav {
  display: flex;
  gap: 4px;
}

nav.site-nav a {
  text-decoration: none;
  color: var(--text);
  padding: 4px 12px;
  font-size: 0.85rem;
  background: var(--face);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
}

nav.site-nav a:active {
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
  padding: 5px 11px 3px 13px;
}

nav.site-nav a.active {
  background: var(--selected);
  color: var(--selected-text);
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
}

main {
  max-width: 1200px;
  margin: 16px auto;
  padding: 16px 16px 40px;
  background: var(--face);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-shadow), 4px 4px 10px rgba(0, 0, 0, 0.3);
  animation: pop-in var(--dur) var(--ease) both;
}

main h1 {
  margin-top: 0;
  font-size: 1.15rem;
}

/* --- Games grid --- */

.toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

#game-search {
  width: 100%;
  padding: 6px 8px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--field);
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
}

#game-search:focus {
  outline: 1px dotted var(--text);
  outline-offset: -3px;
}

#category-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 6px 10px;
  background: var(--field);
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  color: var(--text);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: inherit;
  background: var(--face);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
  transition: transform var(--dur-fast) linear;
}

.chip svg { flex: none; }

.chip:active {
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
  transform: translate(1px, 1px);
}

.chip.active {
  background: var(--selected);
  color: var(--selected-text);
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
}

#result-count {
  color: var(--text-dim);
  font-size: 0.8rem;
}

#game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 18px;
}

.game-card {
  display: flex;
  flex-direction: column;
  background: var(--face);
  cursor: pointer;
  padding: 0;
  color: var(--text);
  text-align: left;
  font: inherit;
  border-top: 3px solid var(--titlebar-start);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-shadow);
  transition: transform var(--dur-fast) linear;
}

.game-card:hover {
  outline: 1px dotted var(--text);
  outline-offset: -3px;
}

.game-card:active {
  transform: translate(1px, 1px);
}

.game-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  background: var(--face-lighter);
  border: 2px solid;
  border-top-color: var(--face-shadow-dark);
  border-left-color: var(--face-shadow-dark);
  border-right-color: var(--face-lighter);
  border-bottom-color: var(--face-lighter);
  margin: 4px;
  width: calc(100% - 8px);
}

.game-title {
  padding: 2px 8px 0;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-tag {
  padding: 0 8px 8px;
  font-size: 0.72rem;
  color: var(--text-dim);
}

#scroll-sentinel {
  height: 1px;
}

dialog#player-modal {
  width: min(960px, 94vw);
  padding: 0;
  color: var(--text);
  background: var(--face);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  animation: pop-in var(--dur) var(--ease) both;
}

dialog#player-modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 4px 4px 8px;
  background: linear-gradient(90deg, var(--titlebar-start), var(--titlebar-end));
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
}

#player-close {
  width: 20px;
  height: 19px;
  line-height: 1;
  background: var(--face);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
}

#player-close:active {
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
}

#player-body {
  aspect-ratio: 16 / 9;
  padding: 4px;
}

#player-body iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.player-placeholder {
  padding: 40px 24px;
  color: var(--text-dim);
  text-align: center;
}

/* --- Music page --- */

.music-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.service-card {
  background: var(--face);
  padding: 0;
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-shadow);
}

.service-card h3 {
  margin: 0;
  padding: 4px 10px;
  background: linear-gradient(90deg, var(--titlebar-start), var(--titlebar-end));
  color: white;
  font-size: 0.85rem;
}

.service-card p,
.service-card button,
.service-card .status-line {
  margin-left: 12px;
  margin-right: 12px;
}

.service-card p:first-of-type { margin-top: 10px; }

.service-card button {
  padding: 5px 16px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--face);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
}

.service-card button:active {
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
}

.status-line {
  color: var(--text-dim);
  font-size: 0.8rem;
  padding-bottom: 12px;
  display: block;
}

/* --- AI page --- */

.ai-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
}

@media (max-width: 720px) {
  .ai-layout { grid-template-columns: 1fr; }
}

.ai-settings {
  background: var(--face);
  padding: 10px;
  height: fit-content;
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-shadow);
}

.ai-settings label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 8px 0 3px;
}

.ai-settings select,
.ai-settings input {
  width: 100%;
  padding: 5px 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  background: var(--field);
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
}

.ai-settings button {
  margin-top: 10px;
  width: 100%;
  padding: 6px;
  color: var(--text);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  background: var(--face);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
}

.ai-settings button:active {
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
}

.ai-chat {
  display: flex;
  flex-direction: column;
  background: var(--field);
  min-height: 480px;
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
}

#chat-log {
  flex: 1;
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg {
  max-width: 80%;
  padding: 6px 10px;
  line-height: 1.4;
  font-size: 0.88rem;
  white-space: pre-wrap;
  animation: pop-in 140ms var(--ease) both;
}

.msg.user {
  align-self: flex-end;
  background: var(--selected);
  color: var(--selected-text);
}

.msg.assistant {
  align-self: flex-start;
  background: var(--folder-yellow);
  color: var(--text);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
}

.msg.system-note {
  align-self: center;
  color: var(--text-dim);
  font-size: 0.78rem;
}

.chat-input-row {
  display: flex;
  gap: 6px;
  padding: 10px;
  background: var(--face);
  border-top: 1px solid var(--face-shadow-dark);
}

#chat-input {
  flex: 1;
  padding: 6px 8px;
  color: var(--text);
  resize: none;
  font: inherit;
  background: var(--field);
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
}

.chat-input-row button {
  padding: 0 18px;
  color: var(--text);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  background: var(--face);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
}

.chat-input-row button:active {
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
}

/* --- Privacy page --- */

.policy {
  line-height: 1.6;
  color: var(--text);
}

.policy h2 {
  color: var(--text);
  margin-top: 24px;
  font-size: 1rem;
  background: var(--face-light);
  padding: 3px 8px;
  border-left: 4px solid var(--selected);
}

.policy code {
  background: var(--face-light);
  border: 1px solid var(--face-shadow);
  padding: 1px 4px;
}

footer.site-footer {
  text-align: center;
  color: var(--face-light);
  font-size: 0.78rem;
  padding: 10px;
  background: var(--face);
  border-top: 1px solid var(--face-shadow-dark);
}

footer.site-footer a {
  text-decoration: none;
  color: var(--titlebar-end);
}

footer.site-footer a:hover {
  text-decoration: underline;
}

/* --- Desktop home screen --- */

body.is-desktop {
  height: 100vh;
  overflow: hidden;
  background: var(--desktop);
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 4px);
}

.desktop {
  position: relative;
  height: calc(100vh - 30px);
  padding: 14px;
}

.desktop-icons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 4px;
  height: 100%;
  align-content: flex-start;
}

.desktop-icon {
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  text-decoration: none;
  color: white;
  text-align: center;
  border: 1px dotted transparent;
}

.desktop-icon .icon-label {
  font-size: 0.75rem;
  line-height: 1.25;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

.desktop-icon.selected {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 128, 0.35);
}

.desktop-icon.selected .icon-label {
  background: var(--selected);
  text-shadow: none;
}

.icon-glyph {
  width: 36px;
  height: 32px;
  display: block;
  position: relative;
}

/* Folder glyph (Games) */
.desktop-icon[data-icon="folder"] .icon-glyph::before {
  content: "";
  position: absolute;
  inset: 6px 0 0 0;
  height: 6px;
  width: 18px;
  background: var(--folder-yellow-dark);
}
.desktop-icon[data-icon="folder"] .icon-glyph::after {
  content: "";
  position: absolute;
  inset: 10px 0 0 0;
  height: 20px;
  background: var(--folder-yellow);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}

/* Music glyph */
.desktop-icon[data-icon="music"] .icon-glyph::before {
  content: "";
  position: absolute;
  inset: 2px 4px 4px 4px;
  background: var(--face-lighter);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
}
.desktop-icon[data-icon="music"] .icon-glyph::after {
  content: "\266B";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--selected);
  font-size: 1.1rem;
}

/* AI glyph */
.desktop-icon[data-icon="ai"] .icon-glyph::before {
  content: "";
  position: absolute;
  inset: 2px 2px 8px 2px;
  background: var(--face-lighter);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
}
.desktop-icon[data-icon="ai"] .icon-glyph::after {
  content: "\2726";
  position: absolute;
  inset: 0 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b8860b;
  font-size: 1rem;
}

/* Document glyph (Privacy) */
.desktop-icon[data-icon="doc"] .icon-glyph::before {
  content: "";
  position: absolute;
  inset: 1px 8px 1px 8px;
  background: var(--face-lighter);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
}
.desktop-icon[data-icon="doc"] .icon-glyph::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--face-shadow);
  box-shadow: 0 5px 0 var(--face-shadow), 0 10px 0 var(--face-shadow), 0 15px 0 var(--face-shadow);
}

/* Instagram glyph — simple generic camera pictogram, not the brand logo */
.desktop-icon[data-icon="instagram"] .icon-glyph::before {
  content: "";
  position: absolute;
  inset: 4px 2px 6px 2px;
  background: linear-gradient(135deg, #feda75, #d62976, #4f5bd5);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
}
.desktop-icon[data-icon="instagram"] .icon-glyph::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 12px;
  height: 12px;
  border: 2px solid white;
  border-radius: 50%;
}

/* TikTok glyph — simple generic music-note pictogram, not the brand logo */
.desktop-icon[data-icon="tiktok"] .icon-glyph::before {
  content: "";
  position: absolute;
  inset: 4px 2px 6px 2px;
  background: #111;
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
}
.desktop-icon[data-icon="tiktok"] .icon-glyph::after {
  content: "\266A";
  position: absolute;
  inset: 0 0 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #25f4ee;
  font-size: 1.1rem;
}

.web-search {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 240px;
  background: var(--face);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-shadow);
}

.web-search-title {
  padding: 4px 8px;
  background: linear-gradient(90deg, var(--titlebar-start), var(--titlebar-end));
  color: white;
  font-weight: 700;
  font-size: 0.8rem;
}

.web-search-row {
  display: flex;
  gap: 4px;
  padding: 8px;
}

.web-search-row input {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  font: inherit;
  font-size: 0.8rem;
  background: var(--field);
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
}

.web-search-row button {
  padding: 4px 12px;
  font-weight: 700;
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  background: var(--face);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
}

.web-search-row button:active {
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
}

.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  background: var(--face);
  border-top: 1px solid var(--face-lighter);
  box-shadow: inset 0 1px 0 var(--face-light);
  z-index: 30;
}

.start-button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 10px;
  font-weight: 800;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  background: var(--face);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
}

.start-button.active {
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
}

.start-glyph {
  width: 14px;
  height: 14px;
  background: conic-gradient(
    var(--happy-1, #ff6b6b) 0turn 0.25turn,
    var(--happy-3, #4ecdc4) 0.25turn 0.5turn,
    var(--happy-5, #4d96ff) 0.5turn 0.75turn,
    var(--folder-yellow) 0.75turn 1turn
  );
}

.start-menu {
  position: fixed;
  left: 3px;
  bottom: 32px;
  display: none;
  flex-direction: column;
  min-width: 180px;
  padding: 3px;
  background: var(--face);
  border-top: 1px solid var(--face-lighter);
  border-left: 1px solid var(--face-lighter);
  border-right: 1px solid var(--face-shadow-dark);
  border-bottom: 1px solid var(--face-shadow-dark);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 31;
}

.start-menu.open {
  display: flex;
}

.start-menu a {
  padding: 6px 12px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.85rem;
}

.start-menu a:hover {
  background: var(--selected);
  color: var(--selected-text);
}

.taskbar-spacer {
  flex: 1;
}

.taskbar-clock {
  padding: 2px 10px;
  font-size: 0.8rem;
  background: var(--field);
  border-top: 1px solid var(--face-shadow-dark);
  border-left: 1px solid var(--face-shadow-dark);
  border-right: 1px solid var(--face-lighter);
  border-bottom: 1px solid var(--face-lighter);
}