/* Zipcoin Strategy: Windows 98 chrome around a strategy.com-style treasury dashboard. */
:root {
  --gray: #c0c0c0;
  --dark: #808080;
  --navy: #000080;
  --orange: #fa660f;
  --orange-deep: #b84300;
  --ink: #0a0a0a;
  --line: #262626;
  --mute: #8d8d8d;
  --ui: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 12px/1.35 var(--ui);
  color: #000;
  background: #101010;
  overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ── Desktop ─────────────────────────────────────────────────────────────── */
#desktop {
  position: absolute;
  inset: 0 0 34px 0;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 78% 12%, rgba(250, 102, 15, .28), transparent 60%),
    linear-gradient(rgba(250, 102, 15, .07) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(250, 102, 15, .07) 1px, transparent 1px) 0 0 / 32px 100%,
    #0b0b0b;
}
#icons {
  position: absolute;
  top: 10px;
  left: 8px;
  display: grid;
  grid-auto-flow: row;
  gap: 10px;
  width: 84px;
}
.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  background: none;
  border: 1px dotted transparent;
  color: #fff;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.icon:hover span, .icon:focus-visible span { background: var(--orange); color: #000; }
.icon:focus-visible { outline: none; border-color: #fff; }
.icon img, .icon .ico { width: 32px; height: 32px; image-rendering: pixelated; }
.icon span { padding: 1px 3px; text-shadow: 1px 1px #000; }
.icon:hover span { text-shadow: none; }

/* pixel icons drawn with gradients */
.ico { display: inline-block; width: 32px; height: 32px; position: relative; flex: none; }
.ico.sm { width: 16px; height: 16px; }
.ico::before, .ico::after { content: ""; position: absolute; }
.ico-trade::before { inset: 12% 6%; background: #fff; border: 2px solid #000; box-shadow: inset -2px -2px var(--dark); }
.ico-trade::after { left: 18%; right: 18%; top: 30%; bottom: 26%; background: linear-gradient(135deg, transparent 46%, var(--orange) 46% 56%, transparent 56%), linear-gradient(#000, #000) left bottom / 100% 2px no-repeat; }
.ico-drop::before { inset: 28% 10% 8%; background: var(--orange); border: 2px solid #000; box-shadow: inset 2px 2px #ffb37a, inset -2px -2px var(--orange-deep); }
.ico-drop::after { left: 44%; width: 12%; top: 28%; bottom: 8%; background: #000; opacity: .75; }
.ico-note::before { inset: 6% 16%; background: #fff; border: 2px solid #000; }
.ico-note::after { left: 28%; right: 28%; top: 26%; height: 44%; background: repeating-linear-gradient(#000080 0 2px, transparent 2px 6px); }
.ico-globe::before { inset: 8%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6fd0ff, #0a4fa8 70%); border: 2px solid #000; }
.ico-globe::after { inset: 8%; border-radius: 50%; background: linear-gradient(90deg, transparent 47%, rgba(255,255,255,.7) 47% 53%, transparent 53%), linear-gradient(transparent 47%, rgba(255,255,255,.7) 47% 53%, transparent 53%); }
.ico-chart::before { inset: 10%; background: #000; border: 2px solid var(--gray); }
.ico-chart::after { left: 22%; right: 22%; bottom: 22%; height: 50%; background: linear-gradient(90deg, #35d07f 0 22%, transparent 22% 39%, #35d07f 39% 61%, transparent 61% 78%, #35d07f 78%); clip-path: polygon(0 60%, 22% 60%, 22% 30%, 61% 30%, 61% 0, 100% 0, 100% 100%, 0 100%); }
.ico-x::before { inset: 8%; background: #000; border: 2px solid var(--gray); }
.ico-x::after { inset: 26%; background: linear-gradient(45deg, transparent 43%, #fff 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, #fff 43% 57%, transparent 57%); }
.ico-folder::before { inset: 22% 6% 12%; background: #ffd24d; border: 2px solid #000; box-shadow: inset 2px 2px #fff3c4; }
.ico-folder::after { left: 6%; top: 12%; width: 40%; height: 14%; background: #ffd24d; border: 2px solid #000; border-bottom: 0; }
.ico-doc::before { inset: 8% 22%; background: var(--orange); border: 2px solid #000; }
.ico-doc::after { left: 44%; width: 12%; top: 8%; bottom: 8%; background: repeating-linear-gradient(#000 0 2px, #fff 2px 4px); }

/* ── Windows ─────────────────────────────────────────────────────────────── */
.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--gray);
  padding: 3px;
  border: 1px solid;
  border-color: #dfdfdf #000 #000 #dfdfdf;
  box-shadow: inset 1px 1px #fff, inset -1px -1px var(--dark), 6px 8px 0 rgba(0, 0, 0, .45);
  min-width: 0;
}
.win.closed { display: none; }
#w-main { left: 108px; top: 14px; width: min(980px, calc(100vw - 470px)); height: calc(100% - 30px); }
#w-market { right: 16px; top: 14px; width: 318px; }
#w-drop { right: 16px; bottom: 14px; width: 318px; }
#w-readme { left: 190px; top: 70px; width: 380px; height: 470px; }
.titlebar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 3px 0 4px;
  background: linear-gradient(90deg, #7b7b7b, #b5b5b5);
  color: #dcdcdc;
  font-weight: 700;
  cursor: default;
  user-select: none;
  touch-action: none;
  flex: none;
}
.win.active .titlebar { background: linear-gradient(90deg, var(--orange-deep), var(--orange) 55%, #ffb057); color: #fff; }
.titlebar img { width: 16px; height: 16px; image-rendering: pixelated; }
.titlebar > span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-btns { display: flex; gap: 2px; }
.tb {
  width: 18px;
  height: 16px;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  font-size: 12px;
  color: #000;
  background: var(--gray);
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset -1px -1px var(--dark);
  cursor: pointer;
}
.tb:active { border-color: #000 #fff #fff #000; box-shadow: none; }
.menubar { display: flex; gap: 12px; padding: 3px 6px; flex: none; }
.addressbar { display: flex; align-items: center; gap: 6px; padding: 2px 4px 4px; flex: none; }
.addressbar label { color: #222; }
.field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 4px;
  background: #fff;
  border: 2px solid;
  border-color: var(--dark) #fff #fff var(--dark);
  box-shadow: inset 1px 1px #000;
  overflow: hidden;
  white-space: nowrap;
}
.field img { width: 14px; height: 14px; }
.winbody { padding: 10px; overflow: auto; min-height: 0; flex: 1; }
.statusbar { display: flex; gap: 3px; margin-top: 3px; flex: none; }
.statusbar span { flex: 1; padding: 2px 5px; border: 1px solid; border-color: var(--dark) #fff #fff var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statusbar span + span { flex: 0 0 auto; }
.statusbar a { color: var(--navy); }

/* ── Controls ────────────────────────────────────────────────────────────── */
.btn {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: var(--gray);
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px var(--dark);
  font-weight: 700;
  cursor: pointer;
}
.btn.primary { outline: 1px solid #000; }
.btn:active:not(:disabled) { border-color: #000 #fff #fff #000; box-shadow: inset 1px 1px var(--dark); padding: 9px 11px 7px 13px; }
.btn:disabled { color: var(--dark); text-shadow: 1px 1px #fff; cursor: default; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.group { border: 1px solid var(--dark); box-shadow: 1px 1px #fff, inset 1px 1px #fff; padding: 6px 10px 8px; margin: 0; }
.group legend { padding: 0 4px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.kv span { color: #333; }
.kv b { font-family: var(--mono); font-size: 11px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
hr { border: 0; border-top: 1px solid var(--dark); border-bottom: 1px solid #fff; margin: 8px 0; }

/* Market monitor */
.lcd { background: #000; color: var(--orange); border: 2px solid; border-color: var(--dark) #fff #fff var(--dark); padding: 8px 10px; margin-bottom: 10px; font-family: var(--mono); }
.lcd span { display: block; font-size: 10px; color: #b35a1f; letter-spacing: .08em; }
.lcd strong { display: block; font-size: 24px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group + .group { margin-top: 8px; }
.btnrow { display: flex; gap: 6px; margin-top: 10px; }
.btnrow .btn { text-align: center; text-decoration: none; color: #000; padding: 6px 8px; }
.xlink { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #333; border-radius: 50%; flex: none; }
.xlink svg { width: 13px; height: 13px; fill: #fff; }
.xlink:hover { border-color: var(--orange); }
.xlink:hover svg { fill: var(--orange); }
.trayx { display: grid; place-items: center; width: 18px; height: 18px; background: #000; }
.trayx svg { width: 11px; height: 11px; fill: #fff; }

/* Airdrop "file copy" dialog */
.copy-anim { display: flex; align-items: center; justify-content: space-between; height: 40px; margin: 0 6px 8px; }
.copy-anim .fly { flex: 1; position: relative; height: 32px; overflow: hidden; }
.copy-anim .fly .ico { position: absolute; left: 0; top: 4px; width: 22px; height: 22px; animation: fly 2.2s linear infinite; }
@keyframes fly {
  0% { left: 0; top: 10px; opacity: 0; }
  12% { opacity: 1; }
  50% { top: -2px; }
  88% { opacity: 1; }
  100% { left: calc(100% - 22px); top: 10px; opacity: 0; }
}
.progress {
  display: flex;
  gap: 2px;
  height: 20px;
  padding: 3px;
  margin: 8px 0;
  background: var(--gray);
  border: 1px solid;
  border-color: var(--dark) #fff #fff var(--dark);
}
.progress i { flex: 1; background: transparent; }
.progress i.on { background: var(--orange); }

/* Notepad */
.notepad { background: #fff; padding: 0; border: 2px solid; border-color: var(--dark) #fff #fff var(--dark); box-shadow: inset 1px 1px #000; }
.notepad pre { margin: 0; padding: 8px 10px; font: 12px/1.45 "Fixedsys", "Lucida Console", var(--mono); white-space: pre-wrap; word-break: break-word; }
.notepad a { color: var(--navy); }

/* ── Strategy-style dashboard (inside the browser window) ────────────────── */
.strat {
  padding: 0;
  background: var(--ink);
  color: #f5f5f5;
  font: 14px/1.5 var(--sans);
  border: 2px solid;
  border-color: var(--dark) #fff #fff var(--dark);
  box-shadow: inset 1px 1px #000;
  scrollbar-color: var(--gray) #2a2a2a;
}
.strat-top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(10, 10, 10, .94);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }
.brand img { width: 24px; height: 24px; image-rendering: pixelated; }
.brand em { font-style: normal; color: var(--orange); font-weight: 700; font-size: 13px; }
.ticker { display: flex; align-items: center; gap: 18px; font: 12px var(--mono); color: var(--mute); white-space: nowrap; overflow: hidden; }
.ticker b { color: #fff; font-weight: 600; margin-left: 4px; }
.hero { padding: 40px 24px 34px; border-bottom: 1px solid var(--line); display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; }
.hero-copy { flex: 1 1 0; min-width: 0; }
.ascii { margin: 0; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-weight: 700; color: #fff; white-space: pre; user-select: none; }
.ascii.coin { flex: none; font-size: 7.2px; line-height: 1.12; letter-spacing: 0; }
.ascii.bar { margin-top: 24px; font-size: 12px; line-height: 1.4; color: var(--orange); overflow: hidden; }
.ascii.wordmark { padding: 34px 24px 6px; font-size: min(7px, 0.92vw); line-height: 1.15; overflow: hidden; }
.eyebrow { margin: 0 0 14px; color: var(--orange); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { margin: 0 0 16px; font-size: clamp(26px, 2.9vw, 40px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.sub { margin: 0; max-width: 56ch; color: #b9b9b9; font-size: 15px; }
.ca { display: flex; align-items: center; gap: 10px; margin-top: 22px; font: 12px var(--mono); flex-wrap: wrap; }
.ca span { color: var(--orange); font-weight: 700; }
.ca code { color: #fff; word-break: break-all; }
.linkbtn { background: none; border: 1px solid #444; color: #fff; padding: 3px 10px; cursor: pointer; font: 12px var(--sans); }
.linkbtn:hover { border-color: var(--orange); color: var(--orange); }
.banner { margin-top: 22px; padding: 10px 14px; border: 1px solid var(--orange); color: var(--orange); font-size: 13px; display: inline-block; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.kpi { padding: 22px 24px; border-right: 1px solid var(--line); border-top: 1px solid var(--line); min-width: 0; }
.kpi.big { grid-column: span 2; border-top: 0; }
.kpi:nth-child(2), .kpi:nth-child(6) { border-right: 0; }
.kpi label { display: block; color: var(--mute); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.kpi strong { display: block; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.big strong { font-size: clamp(34px, 4.4vw, 54px); color: var(--orange); }
.kpi small { display: block; color: var(--mute); font-size: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.panel { padding: 26px 24px; border-bottom: 1px solid var(--line); }
.panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel h2 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.muted { color: var(--mute); font-size: 12px; }
.chart { height: 200px; position: relative; }
.chart svg { width: 100%; height: 100%; display: block; }
.chart .empty { height: 100%; display: grid; place-items: center; color: var(--mute); border: 1px dashed var(--line); font-size: 13px; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 11px 10px 11px 0; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; font-size: 13px; }
th { color: var(--mute); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
th.r, td.r { text-align: right; padding-right: 0; padding-left: 10px; }
td.zc { color: var(--orange); font-weight: 700; }
.fine { margin: 0; padding: 20px 24px 28px; color: #6f6f6f; font-size: 11px; max-width: 80ch; }

/* ── Taskbar ─────────────────────────────────────────────────────────────── */
#taskbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 3px 2px;
  background: var(--gray);
  border-top: 1px solid #fff;
  box-shadow: 0 -1px #dfdfdf;
  z-index: 9000;
}
#start, .task, .traybtn {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  background: var(--gray);
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset -1px -1px var(--dark);
  cursor: pointer;
  white-space: nowrap;
}
#start img { width: 18px; height: 18px; image-rendering: pixelated; }
#start.on, .task.on { border-color: #000 #fff #fff #000; box-shadow: inset 1px 1px var(--dark); background: repeating-conic-gradient(#fff 0 25%, var(--gray) 0 50%) 0 0 / 2px 2px; font-weight: 700; }
#tasks { flex: 1; display: flex; gap: 3px; min-width: 0; overflow: hidden; }
.task { flex: 0 1 150px; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; text-align: left; line-height: 22px; }
#tray { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 4px; border: 1px solid; border-color: var(--dark) #fff #fff var(--dark); }
.traybtn { height: 20px; font-weight: 700; }
#startmenu {
  position: absolute;
  left: 3px;
  bottom: 34px;
  z-index: 9500;
  display: flex;
  background: var(--gray);
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset -1px -1px var(--dark), 4px 4px 0 rgba(0,0,0,.4);
  padding: 2px;
}
.sm-side { width: 26px; background: linear-gradient(0deg, var(--orange-deep), var(--orange)); display: flex; align-items: flex-end; }
.sm-side span { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-weight: 700; font-size: 16px; padding: 6px 4px; letter-spacing: .03em; }
.sm-side b { color: #000; margin-top: 3px; }
.sm-items { display: flex; flex-direction: column; min-width: 180px; padding: 2px 0; }
.sm-items button, .sm-items a { display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px; background: none; border: 0; text-align: left; cursor: pointer; color: #000; text-decoration: none; }
.sm-items button:hover, .sm-items a:hover, .sm-items button:focus-visible, .sm-items a:focus-visible { background: var(--orange); color: #fff; outline: none; }
.sm-items img { width: 16px; height: 16px; image-rendering: pixelated; }

/* ── Small screens: windows stack like a page ────────────────────────────── */
@media (max-width: 1080px) {
  body { overflow: auto; }
  #desktop { position: static; padding: 10px 10px 48px; min-height: 100%; overflow: visible; display: flex; flex-direction: column; gap: 12px; }
  #icons { position: static; width: auto; grid-auto-flow: column; justify-content: start; gap: 4px; overflow-x: auto; }
  .icon { width: 76px; }
  .win, #w-main, #w-market, #w-drop, #w-readme { position: static; width: auto; height: auto; box-shadow: inset 1px 1px #fff, inset -1px -1px var(--dark); }
  #w-main { order: 1; } #w-market { order: 2; } #w-drop { order: 3; } #w-readme { order: 4; }
  #icons { order: 0; }
  .strat { overflow: visible; }
  .strat-top { position: static; padding: 12px 16px; }
  .hero { padding: 24px 16px 26px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .ascii.coin { align-self: center; font-size: min(7.2px, 1.9vw); }
  .ascii.wordmark { padding: 26px 16px 4px; font-size: min(7px, 1.25vw); }
  .ascii.bar { font-size: min(12px, 2.9vw); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi { padding: 18px 16px; }
  .kpi:nth-child(even) { border-right: 0; }
  .kpi.big { border-top: 1px solid var(--line); }
  .kpi.big:first-child { border-top: 0; }
  .panel { padding: 22px 16px; }
  .fine { padding: 18px 16px 24px; }
  .ticker span:nth-child(3) { display: none; }
  #taskbar { position: fixed; }
  #startmenu { position: fixed; }
  .titlebar { touch-action: auto; }
}
@media (max-width: 560px) {
  .kpi.big { grid-column: span 2; border-right: 0; }
  .kpi.big:nth-child(2) { border-top: 1px solid var(--line); }
  .ticker span:nth-child(2) { display: none; }
  .task { display: none; }
  #tasks { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .copy-anim .fly .ico { animation: none; left: calc(50% - 11px); opacity: 1; }
}