:root {
  --ink: #3b1240;
  --ink-2: #6a3a73;
  --ink-soft: rgba(59, 18, 64, 0.55);
  --paper: #fff8fc;
  --paper-2: #fdeef7;
  --line: rgba(59, 18, 64, 0.14);
  --pink: #ff6fb1;
  --pink-deep: #d63d86;
  --pink-soft: #ffd3e8;
  --lilac: #c3a2ff;
  --sky: #8ccfff;
  --sky-deep: #4a96e8;
  --ice: #dff3ff;
  --mint: #7fe8b0;
  --amber: #ffe07a;
  --red: #ff5470;
  --term: #1c0b26;
  --term-2: #2a1236;
  --term-fg: #f7d9ea;
  --term-dim: #a281ad;
  --title: linear-gradient(90deg, #ff7ab8 0%, #d9a0ff 52%, #8fd3ff 100%);
  --wall: linear-gradient(165deg, #ff8cc6 0%, #ffb3da 24%, #ecc4ff 52%, #b9e0ff 80%, #e2f4ff 100%);
  --shadow: 5px 5px 0 rgba(59, 18, 64, 0.28);
  --r: 12px;
  --pixel: 'Silkscreen', 'Pixelify Sans', monospace;
  --display: 'Pixelify Sans', 'Silkscreen', monospace;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --taskbar: 46px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--wall);
  color: var(--ink);
  font: 13px/1.5 var(--mono);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--pink-deep); }
::selection { background: var(--pink); color: #fff; }

/* ------------------------------ wallpaper ------------------------------ */

#wall {
  position: fixed;
  inset: 0;
  background: var(--wall);
  z-index: 0;
}
#wall::after {
  /* 4x4 ordered dither so the gradient reads as pixels, not as a blur */
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='%23ffffff' fill-opacity='.32'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ffffff' fill-opacity='.2'/%3E%3C/svg%3E");
  background-size: 4px 4px;
  image-rendering: pixelated;
  mix-blend-mode: soft-light;
  opacity: 0.9;
}
#wall canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.wall-mark {
  position: absolute;
  right: 6vw;
  bottom: calc(var(--taskbar) + 7vh);
  width: min(30vw, 360px);
  image-rendering: pixelated;
  opacity: 0.9;
  filter: drop-shadow(8px 8px 0 rgba(59, 18, 64, 0.18));
  animation: bob 6s ease-in-out infinite;
}
.wall-word {
  position: absolute;
  right: calc(6vw + min(15vw, 180px));
  transform: translateX(50%);
  bottom: calc(var(--taskbar) + 7vh + min(30vw, 360px) * 0.82 + 18px);
  white-space: nowrap;
  text-align: center;
  font: 700 clamp(34px, 4.6vw, 68px) / 1 var(--display);
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink), 4px 5px 0 var(--ink);
}
.wall-word small {
  display: block;
  font: 400 11px/1.7 var(--pixel);
  letter-spacing: 0.04em;
  color: var(--ink);
  text-shadow: none;
  opacity: 0.8;
  margin-top: 12px;
}
@keyframes bob { 50% { transform: translateY(-10px); } }

/* ------------------------------ desktop -------------------------------- */

#desktop {
  position: fixed;
  inset: 0 0 var(--taskbar) 0;
  z-index: 1;
}
#icons {
  position: absolute;
  top: 14px;
  left: 10px;
  bottom: 10px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 92px);
  grid-auto-columns: 100px;
  gap: 2px 6px;
  align-content: start;
}
.dicon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: none;
  text-align: center;
}
.dicon img {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  filter: drop-shadow(3px 3px 0 rgba(59, 18, 64, 0.22));
  transition: transform 0.12s steps(3);
}
.dicon span {
  font: 400 9px/1.3 var(--pixel);
  white-space: nowrap;
  color: #fff;
  text-shadow: 1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px -1px 0 var(--ink);
  padding: 1px 4px;
  border-radius: 4px;
}
.dicon:hover img { transform: translateY(-3px); }
.dicon:focus-visible, .dicon.sel { outline: none; border-color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.28); }
.dicon.sel span { background: var(--pink-deep); text-shadow: none; }

/* ------------------------------ windows -------------------------------- */

#windows { position: absolute; inset: 0; pointer-events: none; }
.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  pointer-events: auto;
  min-width: 280px;
  min-height: 180px;
  user-select: text;
}
.win.focused { box-shadow: 7px 7px 0 rgba(59, 18, 64, 0.34); }
.win.opening { animation: pop 0.22s steps(4); }
.win.closing { animation: pop 0.14s steps(3) reverse forwards; }
@keyframes pop { from { transform: scale(0.92); opacity: 0; } }
.win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.win.dragging { opacity: 0.94; }

.titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 6px 0 10px;
  background: var(--title);
  border-bottom: 2px solid var(--ink);
  cursor: grab;
  user-select: none;
  flex: none;
  position: relative;
}
.titlebar::before {
  /* pixel stripes on the bar, like an old OS but softer */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 4px);
  pointer-events: none;
}
.win:not(.focused) .titlebar { filter: saturate(0.45) brightness(1.06); }
.tb-icon { width: 18px; height: 18px; image-rendering: pixelated; position: relative; }
.tb-title { font: 400 12px/1 var(--pixel); color: #fff; text-shadow: 1px 1px 0 var(--ink); flex: 1; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-btns { display: flex; gap: 5px; position: relative; }
.tb-btns button, .tb-back {
  width: 22px;
  height: 20px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: 2px 2px 0 rgba(59, 18, 64, 0.35);
}
.tb-btns button:active, .tb-back:active { transform: translate(1px, 1px); box-shadow: none; }
.tb-min i { width: 8px; height: 2px; background: var(--ink); margin-top: 6px; }
.tb-max i { width: 9px; height: 8px; border: 2px solid var(--ink); border-top-width: 3px; }
.tb-close { background: var(--pink) !important; }
.tb-close i { width: 10px; height: 10px; background:
  linear-gradient(45deg, transparent 42%, var(--ink) 42% 58%, transparent 58%),
  linear-gradient(-45deg, transparent 42%, var(--ink) 42% 58%, transparent 58%); }
.tb-back { display: none; font: 700 12px/1 var(--pixel); position: relative; }

.win-body { flex: 1; overflow: auto; position: relative; min-height: 0; }
.win-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 50%, var(--ink-soft) 50% 58%, transparent 58% 70%, var(--ink-soft) 70% 78%, transparent 78%);
}
.crash { color: var(--red); padding: 16px; white-space: pre-wrap; }

/* dark windows: the terminals */
.win.dark { background: var(--term); }
.win.dark .win-body { color: var(--term-fg); }
.win.dark .win-grip { filter: invert(1); }

/* ------------------------------ taskbar -------------------------------- */

#taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--taskbar);
  z-index: 50000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  background: rgba(255, 248, 252, 0.78);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-top: 2px solid var(--ink);
}
.start {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 6px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--title);
  font: 400 12px/1 var(--pixel);
  color: #fff;
  text-shadow: 1px 1px 0 var(--ink);
  box-shadow: 2px 2px 0 rgba(59, 18, 64, 0.35);
  flex: none;
}
.start img { width: 22px; height: 22px; image-rendering: pixelated; }
.start[aria-expanded='true'], .start:active { transform: translate(1px, 1px); box-shadow: none; }
#tasks { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#tasks::-webkit-scrollbar { display: none; }
.task {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  max-width: 170px;
  padding: 0 10px 0 6px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  font: 400 10px/1 var(--pixel);
  white-space: nowrap;
  overflow: hidden;
  flex: none;
}
.task img { width: 18px; height: 18px; image-rendering: pixelated; }
.task span { overflow: hidden; text-overflow: ellipsis; }
.task.on { background: var(--pink-soft); box-shadow: inset 2px 2px 0 rgba(59, 18, 64, 0.2); }
.tray { display: flex; align-items: center; gap: 6px; flex: none; }
.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--paper);
  font: 500 11px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chip img { width: 16px; height: 16px; image-rendering: pixelated; }
.chip.live { background: var(--ice); }
.chip.live::before { content: ''; width: 8px; height: 8px; background: var(--mint); border: 2px solid var(--ink); border-radius: 2px; animation: blink 1s steps(2) infinite; }
.chip.ca { font-family: var(--pixel); font-size: 10px; }
.clock { font: 400 11px/1 var(--pixel); padding: 0 6px; }
@keyframes blink { 50% { opacity: 0.25; } }

/* start menu */
#startmenu {
  position: fixed;
  left: 8px;
  bottom: calc(var(--taskbar) + 8px);
  width: 300px;
  z-index: 50001;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
}
#startmenu[hidden] { display: none; }
.sm-side {
  width: 34px;
  background: var(--title);
  border-right: 2px solid var(--ink);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 700 18px/34px var(--display);
  color: #fff;
  text-shadow: 2px 2px 0 var(--ink);
  padding: 12px 0;
}
.sm-list { flex: 1; padding: 6px; max-height: 70vh; overflow: auto; }
.sm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  font: 400 11px/1.2 var(--pixel);
}
.sm-item img { width: 24px; height: 24px; image-rendering: pixelated; }
.sm-item small { display: block; font: 400 10.5px/1.3 var(--mono); color: var(--ink-soft); margin-top: 2px; }
.sm-item:hover, .sm-item:focus-visible { background: var(--pink-soft); outline: none; }
.sm-sep { height: 2px; background: var(--line); margin: 6px 4px; }

/* -------------------------------- boot --------------------------------- */

#boot {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #12061a;
  color: var(--term-fg);
  font: 13px/1.55 var(--mono);
  padding: clamp(16px, 4vw, 48px);
  overflow: hidden;
  cursor: pointer;
}
#boot.done { animation: bootout 0.5s steps(6) forwards; }
@keyframes bootout { to { opacity: 0; visibility: hidden; } }
#boot pre { margin: 0; white-space: pre; }
.boot-logo {
  margin: 22px 0 14px !important;
  font-size: clamp(5px, 1.25vw, 13px);
  line-height: 1.12;
  background: linear-gradient(90deg, #ff6fb1, #d9a0ff 55%, #8fd3ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.boot-bar { display: flex; gap: 3px; margin-top: 10px; }
.boot-bar i { width: 12px; height: 14px; background: #3a1747; }
.boot-bar i.on { background: linear-gradient(#ff8fc4, #ff6fb1); }
.boot-skip { position: absolute; right: 20px; bottom: 16px; color: var(--term-dim); font: 400 10px var(--pixel); }
#boot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 111, 177, 0.05) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

/* ------------------------------ shared UI ------------------------------ */

.pad { padding: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--paper);
  font: 400 11px/1 var(--pixel);
  box-shadow: 2px 2px 0 rgba(59, 18, 64, 0.35);
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
}
.btn:active { transform: translate(1px, 1px); box-shadow: none; }
.btn.pink { background: var(--pink); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.btn.sky { background: var(--sky); }
.btn.mint { background: var(--mint); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn img { width: 16px; height: 16px; image-rendering: pixelated; }
.field {
  height: 32px;
  padding: 0 10px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: #fff;
  min-width: 0;
}
.field:focus { outline: 3px solid var(--pink-soft); }
.label { font: 400 10px/1.2 var(--pixel); color: var(--ink-soft); text-transform: lowercase; }
.big { font: 700 28px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-soft); }
.tag {
  display: inline-block;
  padding: 2px 7px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  font: 400 9.5px/1.3 var(--pixel);
  background: var(--ice);
}
.tag.pink { background: var(--pink-soft); }
.tag.mint { background: #c9f7de; }
.tag.amber { background: #fff0b8; }
.card {
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.stat { border: 2px solid var(--ink); border-radius: 10px; background: #fff; padding: 10px 12px; }
.stat b { display: block; font: 600 18px/1.2 var(--mono); font-variant-numeric: tabular-nums; margin-top: 4px; }
table.t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.t th { font: 400 10px/1 var(--pixel); text-align: left; color: var(--ink-soft); padding: 8px; border-bottom: 2px solid var(--ink); position: sticky; top: 0; background: var(--paper); }
.t td { padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.t tr:hover td { background: var(--paper-2); }
.t .num { text-align: right; }
.empty { padding: 28px 16px; text-align: center; color: var(--ink-soft); }
.tabs { display: flex; gap: 4px; padding: 10px 12px 0; border-bottom: 2px solid var(--ink); background: var(--paper-2); position: sticky; top: 0; z-index: 2; }
.tab { border: 2px solid var(--ink); border-bottom: 0; border-radius: 8px 8px 0 0; padding: 7px 12px; background: var(--paper-2); font: 400 10.5px/1 var(--pixel); margin-bottom: -2px; }
.tab.on { background: var(--paper); padding-bottom: 9px; }
.win.dark .tabs { background: var(--term-2); border-color: #000; }
.win.dark .tab { background: var(--term-2); border-color: #5a2d66; color: var(--term-dim); }
.win.dark .tab.on { background: var(--term); color: var(--term-fg); }

/* ------------------------------ terminals ------------------------------ */

.term {
  padding: 12px 14px;
  font: 12.5px/1.5 var(--mono);
  color: var(--term-fg);
  white-space: pre-wrap;
  word-break: break-word;
}
.term pre { margin: 0; font: inherit; white-space: pre; }
.term .p { color: var(--pink); }
.term .s { color: var(--sky); }
.term .m { color: var(--mint); }
.term .a { color: var(--amber); }
.term .l { color: var(--lilac); }
.term .d { color: var(--term-dim); }
.term .r { color: var(--red); }
.term .hl { color: #fff; }
.term-log { height: 100%; overflow: auto; }
.term-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 2px solid #000;
  background: var(--term-2);
}
.term-bar .btn { box-shadow: 2px 2px 0 #000; border-color: #000; }
.term-bar .field { background: var(--term); color: var(--term-fg); border-color: #5a2d66; }
.term-bar .label { color: var(--term-dim); }
.term-split { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.cursor::after { content: '█'; color: var(--pink); animation: blink 1s steps(2) infinite; }
.scan { position: relative; }
.scan::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 111, 177, 0.04) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
input[type='range'] { accent-color: var(--pink); }

/* ------------------------------- toasts -------------------------------- */

#toasts { position: fixed; right: 12px; bottom: calc(var(--taskbar) + 12px); z-index: 60000; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast {
  max-width: 340px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: var(--shadow);
  font: 12px/1.45 var(--mono);
  animation: pop 0.2s steps(4);
}
.toast.err { background: #ffe1e7; }
.toast.ok { background: #dcfbe9; }

/* ------------------------------- phone --------------------------------- */

@media (max-width: 760px) {
  :root { --taskbar: 54px; }
  #icons {
    top: 18px;
    left: 16px;
    right: 16px;
    bottom: auto;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: none;
    grid-auto-rows: 96px;
    grid-auto-columns: auto;
  }
  .wall-mark { width: 46vw; right: 50%; transform: translateX(50%); bottom: calc(var(--taskbar) + 4vh); animation: none; opacity: 0.85; }
  .wall-word { display: none; }
  .win { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; border-width: 0; box-shadow: none; }
  .win-grip, .tb-min, .tb-max { display: none !important; }
  .tb-back { display: grid; }
  #tasks { display: none; }
  .tray .chip.hide-phone, .clock { display: none; }
  .tray { margin-left: auto; }
  #startmenu { left: 8px; right: 8px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.noscan .scan::after { display: none; }
#t-hash img { display: none; }
@media (max-width: 760px) {
  .ds-grid { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; }
  .ds-grid > aside { max-height: 34vh; border-right: 0 !important; border-bottom: 2px solid var(--ink); }
}

.win.dark .tag { color: var(--ink); }
.win.dark .btn { color: var(--ink); }
.win.dark .btn.pink { color: #fff; }
.win.dark a.s { color: var(--sky); }
.chip[hidden] { display: none; }
@media (max-width: 760px) {
  .term pre { font-size: 9.6px; }
  .term-bar .field { max-width: 46vw; }
}