.toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 6px;
  background: linear-gradient(180deg, #eceae4, #c8c4bb);
  border-bottom: 1px solid #9a958b;
  color: #1c1914;
}

.toolbar button, .dialog button {
  height: 22px;
  padding: 0 8px;
  border: 1px solid #6e6a62;
  border-radius: 2px;
  background: linear-gradient(180deg, #f7f4ee, #d4d0c7);
  color: #1c1914;
  cursor: pointer;
}

.toolbar button[aria-pressed="true"] {
  background: linear-gradient(180deg, #d9d3c4, #b7b1a4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.toolbar .path, .status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #3a3832;
}

.notepad, .files, .browser, .viewer, .term, .travamp {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.notepad textarea {
  flex: 1;
  width: 100%;
  border: 0;
  resize: none;
  margin: 0;
  padding: 10px 12px;
  background: #f6f3ea;
  color: #1c1914;
  font: 14px/1.45 var(--ui);
  color-scheme: light;
}

.notepad { position: relative; }

.dialog {
  position: absolute;
  z-index: 4;
  left: 12px;
  right: 12px;
  top: 40px;
  max-height: calc(100% - 56px);
  overflow: auto;
  background: #f6f3ea;
  color: #1c1914;
  border: 1px solid #6e6a62;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  padding: 8px;
}

.dialog h2 { margin: 0 0 6px; font-size: 13px; }
.dialog button.file {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 0 2px;
  background: transparent;
  border: 0;
  height: auto;
  padding: 3px 4px;
}
.dialog button.file:hover, .dialog button.file:focus { background: #d5e4ea; }
.save-row { display: flex; gap: 6px; padding: 6px; align-items: center; background: #efeae0; }
.save-row input { flex: 1; color-scheme: light; color: #1c1914; background: #fff; border: 1px solid #8a867c; padding: 2px 4px; }
.note-error { color: #8c2f24; padding: 0 6px 4px; }

.files { background: #efeae0; color: #1c1914; color-scheme: light; }
.listing { flex: 1; overflow: auto; padding: 6px; }
.listing.icons { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; }
.listing button.row, .listing button.tile {
  font: 12px/1.3 var(--ui);
  color: #1c1914;
  cursor: pointer;
}
.listing button.row {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: center;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 3px 6px;
}
.listing button.row:nth-child(odd) { background: rgba(0, 0, 0, 0.03); }
.listing button.row.selected, .listing button.tile.selected,
.listing button.row:hover, .listing button.tile:hover { background: #cfe3ea; }
.listing button.tile {
  width: 92px;
  background: transparent;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
}
.listing button.tile img, .listing .thumb {
  width: 64px;
  height: 48px;
  object-fit: contain;
  background: #1b2128;
}
.kind {
  width: 28px;
  text-align: center;
  color: #5c564c;
  flex: none;
}
.status { height: 22px; padding: 2px 8px; border-top: 1px solid #b7b1a4; background: #e4e0d6; }

.browser { background: #d7d4cc; color: #1c1914; }
.urlbar { display: flex; gap: 6px; align-items: center; }
.urlbar input {
  flex: 1;
  height: 22px;
  border: 1px solid #6e6a62;
  background: #fff;
  color: #1c1914;
  padding: 0 6px;
  color-scheme: light;
}
.page {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #f4f0e6;
  color: #1b1914;
  color-scheme: light;
}
.page .sheet { max-width: 640px; margin: 0 auto; padding: 18px 20px 28px; }
.page h1 { font-size: 22px; margin: 0 0 8px; letter-spacing: 0; }
.page h2 { font-size: 15px; margin: 16px 0 6px; }
.page p, .page li { font-size: 14px; line-height: 1.45; }
.page a { color: #0d4f6b; }
.mast {
  background: #1a2430;
  color: #f4f1ea;
  padding: 14px 20px;
}
.mast h1 { margin: 0; font-size: 18px; }
.mast p { margin: 4px 0 0; color: #d5d0c6; }
.link-list { list-style: none; padding: 0; }
.link-list a { font-size: 15px; }
.chart-svg { width: 100%; height: auto; background: #07110c; display: block; }
.offline { padding: 24px 20px; }
.offline h1 { font-size: 18px; }

.matrix-page { position: relative; background: #000; overflow: hidden; color: #d8ffe4; }
.matrix-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.matrix-card {
  position: absolute;
  left: 0;
  right: 0;
  top: 18%;
  text-align: center;
  text-shadow: 0 0 12px rgba(40, 255, 100, 0.45);
  pointer-events: none;
}
.matrix-card h1 {
  margin: 0;
  font-family: var(--mono);
  font-size: 28px;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.matrix-card p { margin: 8px 0 0; font-size: 14px; color: #b7f0c4; }

.viewer { background: #121416; color: #f4f1ea; }
.viewer .toolbar { background: linear-gradient(180deg, #3a4048, #2a3036); border-bottom-color: #111; color: #f4f1ea; }
.viewer .toolbar button { background: linear-gradient(180deg, #5c656e, #3a424a); color: #f4f1ea; border-color: #111; }
.viewer .name { color: #d9d4ca; }
.stage {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  background: #0c0e12;
}
.stage img { max-width: 100%; max-height: 100%; }
.stage img.actual { max-width: none; max-height: none; }

.term {
  background: #101410;
  color: #d7f5df;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
}
.term-out { flex: 1; overflow: auto; padding: 8px 10px; white-space: pre-wrap; }
.term-out .cmd { color: #f0e2b0; }
.term-out .dir { color: #8fd4ff; }
.term-out .err { color: #ffb0a4; }
.term-line { display: flex; gap: 6px; padding: 4px 10px 8px; align-items: center; }
.term-line .prompt { color: #9dff6a; flex: none; }
.term-line input {
  flex: 1;
  background: transparent;
  border: 0;
  color: #f4fff6;
  font: inherit;
  padding: 0;
  min-width: 0;
}
.term-line input:focus { outline: none; }

.travamp {
  background: linear-gradient(180deg, #6a6e74 0%, #3a3e44 16%, #2a2d32 100%);
  color: #e6e6e2;
  padding: 8px;
  gap: 6px;
}
.travamp .lcd {
  background: radial-gradient(120% 90% at 8% 0%, #16301c, #050805 58%);
  border: 2px solid #111;
  box-shadow: inset 0 0 0 1px #6a7268, inset 0 8px 16px rgba(0, 0, 0, 0.45);
  padding: 6px 8px 4px;
  color: #6dff6a;
  font-family: var(--mono);
}
.lcd-top { display: flex; justify-content: space-between; font-size: 20px; letter-spacing: 0.04em; text-shadow: 0 0 6px rgba(80, 255, 70, 0.45); }
.lcd-title { font-size: 12px; min-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcd canvas { display: block; width: 100%; height: 36px; margin-top: 2px; }
.transport { display: flex; gap: 4px; }
.transport button {
  flex: 1;
  height: 22px;
  font: 11px/1 var(--ui);
  background: linear-gradient(180deg, #5c6168, #2e3238);
  color: #eee;
  border: 1px solid #111;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
}
.transport button[aria-pressed="true"] { background: linear-gradient(180deg, #3e6a40, #1d3a22); color: #d8ffd0; }
.transport button:active { transform: translateY(1px); }
.seek, .tvol { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.08em; color: #c8c8c4; }
.seek input, .tvol input { flex: 1; accent-color: #6dff6a; }
.tvol { width: 55%; }
.pl-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #0c0c0c;
  border: 2px solid #111;
  min-height: 0;
}
.pl-head {
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 3px 6px;
  background: linear-gradient(180deg, #3a3a3a, #222);
  color: #d0d0c8;
}
.pl { flex: 1; min-height: 220px; overflow: auto; }
.pl button {
  display: block;
  width: 100%;
  text-align: left;
  height: 22px;
  padding: 0 6px;
  background: transparent;
  color: #d8d6ce;
  border: 0;
  font: 11px/22px var(--ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.pl button:nth-child(odd) { background: #141414; }
.pl button.is-on { color: #b6ff9a; background: #182010; }
.pl button:hover, .pl button:focus { background: #2a3140; outline: none; }
.credit-line { flex: none; margin: 0; padding-top: 2px; font-size: 10px; color: #b7b3aa; line-height: 1.3; text-align: center; }

.travamp.matrix {
  background: linear-gradient(180deg, #0c1a10, #050a07);
  color: #c8ffc4;
}
.travamp.matrix .lcd {
  background: #020804;
  color: #7dff78;
  box-shadow: inset 0 0 12px rgba(40, 255, 100, 0.18), inset 0 0 0 1px #1d7a32;
}
.travamp.matrix .transport button {
  background: linear-gradient(180deg, #143222, #0a1a10);
  color: #d8ffd0;
  border-color: #1d7a32;
}
.travamp.matrix .pl-wrap { border-color: #1d7a32; }
.travamp.matrix .pl-head { background: #0c2416; color: #b7f0c4; }
.travamp.matrix .pl button { color: #c8f5c8; }
.travamp.matrix .pl button:nth-child(odd) { background: #07140c; }
.travamp.matrix .pl button.is-on { background: #12381c; color: #e8ffe8; }
.travamp.matrix .credit-line { color: #8fbf96; }
.viewer .toolbar { flex-wrap:wrap; height:auto; min-height:30px; padding-block:4px; }
.slide-caption { flex:none; margin:0; padding:7px 10px; font-size:11px; color:#d9d4ca; background:#1b232c; }
.viewer .stage img:not(.actual) { width:100%; height:100%; object-fit:contain; }
.video-player { height:100%; display:flex; flex-direction:column; background:#0c1016; color:#d9e4ee; }
.video-player .toolbar { background:#303a46; color:#fff; flex-wrap:wrap; height:auto; min-height:30px; padding-block:4px; }
.video-player video { display:block; width:100%; flex:1; min-height:0; object-fit:contain; background:#000; }
.video-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:60px; }
.video-status { margin:0; flex:none; padding:6px 10px; font-size:11px; }
.ink-app { height:100%; display:flex; flex-direction:column; }
.ink-app .toolbar { flex:none; }
.ink-app iframe { flex:1; min-height:0; width:100%; border:0; background:#fff; }
.dock-icon img { width:100%; height:100%; object-fit:contain; }
.menu img,.titlebar img { width:16px; height:16px; object-fit:contain; }
.compiz-welcome { padding:22px; height:100%; overflow:auto; line-height:1.6; } .compiz-welcome h1 { font-size:23px; margin:0 0 14px; } .compiz-welcome a { color:#124d73; font-weight:bold; }
.desk-emulators { top:120px; }
.emulator-directory { height:100%; overflow:auto; padding:22px; line-height:1.5; background:#101923; color:#e9f0f6; }
.emulator-directory h1 { font-size:23px; margin:0 0 10px; }
.emulator-directory h2 { font-size:18px; color:#efbd77; margin:0 0 6px; }
.emulator-directory section { padding:16px 0; border-top:1px solid #ffffff22; }
.emulator-directory section p { margin:0 0 10px; }
.emulator-directory section div { display:flex; flex-wrap:wrap; gap:8px 14px; }
.emulator-directory a { color:#9bd9ff; }
.emulator-note { font-size:12px; color:#afbfcc; }
.game-frame { display:block; width:100%; height:100%; border:0; background:#07101b; }