:root {
  --face: #c0c0c0;
  --light: #dfdfdf;
  --hi: #ffffff;
  --lo: #808080;
  --dk: #000000;
  --desk: #0d6c70;
  --sel: #3a1d78;
  --sel-text: #ffffff;
  --title: linear-gradient(90deg, #2a0a5e 0%, #7b1fa2 42%, #e0457b 78%, #ffb347 100%);
  --title-off: linear-gradient(90deg, #6f6f6f, #b8b8b8);
  --tip: #ffffe1;
  --good: #1e8f3a;
  --warn: #b58100;
  --noise: #6d6d6d;
  --font: Tahoma, Verdana, "Segoe UI", "DejaVu Sans", sans-serif;
  --mono: "Lucida Console", "Courier New", "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--desk);
  font: 12px/1.35 var(--font);
  color: var(--dk);
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: none;
}
[hidden] { display: none !important; }
a { color: #1a0dab; }
input, select, textarea, button { font: inherit; color: inherit; }

/* ---------- bevels ---------- */
.raised {
  background: var(--face);
  border: 1px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow: inset -1px -1px var(--lo), inset 1px 1px var(--light);
}
.sunken {
  border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow: inset 1px 1px var(--dk), inset -1px -1px var(--light);
}
.field { background: #fff; padding: 3px 4px; }
.btn {
  background: var(--face); min-width: 75px; min-height: 23px; padding: 3px 10px; cursor: default;
  border: 1px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow: inset -1px -1px var(--lo), inset 1px 1px var(--light);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.btn:active, .btn.pressed {
  border-color: var(--dk) var(--hi) var(--hi) var(--dk);
  box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--light);
  padding: 4px 9px 2px 11px;
}
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn:disabled { color: var(--lo); text-shadow: 1px 1px var(--hi); }
.btn.primary { outline: 1px solid #000; }
select.field, input.field { border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow: inset 1px 1px var(--dk), inset -1px -1px var(--light); height: 22px; padding: 1px 3px; }
textarea.field { border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow: inset 1px 1px var(--dk), inset -1px -1px var(--light); resize: none; }
fieldset { border: 1px solid var(--lo); box-shadow: 1px 1px 0 var(--hi), inset 1px 1px 0 var(--hi); padding: 8px 10px 10px; margin: 0 0 10px; }
/* Solid background so the fieldset's inset highlight line doesn't run through the title; browsers already centre it on the border. */
legend { padding: 0 4px; background: var(--face); }

/* ---------- desktop ---------- */
#desktop { position: fixed; inset: 0 0 30px 0; overflow: hidden;
  background: radial-gradient(ellipse at 20% 10%, #13858a 0%, var(--desk) 55%, #0a4f57 100%); }
#wallpaper { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#wallpaper .wp { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); will-change: transform; }
/* Seed tile: 90px period, so translating by exactly one tile loops seamlessly. */
#wallpaper .wp-seeds { inset: -180px; width: auto; height: auto; background-size: 90px 90px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%23fff4d6'%3E%3Cellipse cx='14' cy='18' rx='5' ry='2.6' opacity='.22' transform='rotate(18 14 18)'/%3E%3Cellipse cx='58' cy='44' rx='5' ry='2.6' opacity='.18' transform='rotate(58 58 44)'/%3E%3Cellipse cx='32' cy='72' rx='5' ry='2.6' opacity='.2' transform='rotate(-12 32 72)'/%3E%3C/g%3E%3C/svg%3E");
  animation: seeds 40s linear infinite; }
/* Cookie Clicker rule: simple, continuous, fast enough to read as motion (a few px/s, not sub-pixel creep),
   translate/opacity only so the compositor never re-rasterizes the layers. */
@keyframes seeds { to { transform: translate3d(90px, 90px, 0); } }
#wallpaper .wp { animation-timing-function: cubic-bezier(.37, 0, .63, 1); animation-iteration-count: infinite; animation-direction: alternate; }
#wallpaper .wp-seeds { animation-timing-function: linear; animation-direction: normal; }
#wallpaper .wp-swoosh { animation-name: swoosh; animation-duration: 9s; }
@keyframes swoosh { from { transform: translate3d(0, -14px, 0); } to { transform: translate3d(0, 14px, 0); } }
#wallpaper .wp-gleam { animation-name: gleam; animation-duration: 11s; }
@keyframes gleam { from { transform: translate3d(-12px, 10px, 0); opacity: .7; } to { transform: translate3d(12px, -10px, 0); opacity: 1; } }
#wallpaper .wp-zig { animation-name: zig; animation-duration: 13s; }
@keyframes zig { from { transform: translate3d(-22px, 0, 0); } to { transform: translate3d(22px, 0, 0); } }
#wallpaper .wp-orbit { animation-name: orbit; animation-duration: 15s; }
@keyframes orbit { from { transform: translate3d(14px, -14px, 0); } to { transform: translate3d(-14px, 14px, 0); } }
#wallpaper .wp-wave { animation-name: wave; animation-duration: 10s; }
@keyframes wave { from { transform: translate3d(-30px, 0, 0); } to { transform: translate3d(30px, 0, 0); } }
#wallpaper .wp-motto { animation-name: motto; animation-duration: 6s; }
@keyframes motto { from { opacity: .65; } to { opacity: 1; } }
body.still #wallpaper .wp { animation: none; }
@media (prefers-reduced-motion: reduce) { #wallpaper .wp, .window.opening { animation: none !important; } }
#icons { position: absolute; inset: 0; }
.dicon { position: absolute; width: 76px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  touch-action: none; transition: left .12s ease-out, top .12s ease-out;
  color: #fff; text-align: center; cursor: default; border: 1px solid transparent; }
.dicon .ico { width: 32px; height: 32px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.35)); }
.dicon span.lbl { padding: 0 2px; text-shadow: 1px 1px 1px rgba(0,0,0,.6); }
.dicon.sel span.lbl { background: var(--sel); text-shadow: none; outline: 1px dotted #ffd166; }
.dicon.sel .ico { filter: drop-shadow(1px 1px 0 rgba(0,0,0,.35)) sepia(.6) hue-rotate(220deg) saturate(3); }
.ico { display: inline-block; width: 16px; height: 16px; flex: none; }
.ico.big { width: 32px; height: 32px; }
.ico svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }

/* ---------- windows ---------- */
.window { position: absolute; display: flex; flex-direction: column; padding: 3px; min-width: 220px; min-height: 120px; }
.window.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
.titlebar { height: 20px; display: flex; align-items: center; gap: 4px; padding: 0 2px 0 3px;
  background: var(--title-off); color: #d8d8d8; font-weight: bold; flex: none; touch-action: none; }
.window.active .titlebar { background: var(--title); color: #fff; }
.titlebar .ttext { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 1px 1px 0 rgba(0,0,0,.25); }
.tbtns { display: flex; gap: 2px; }
.tbtns button { width: 17px; height: 15px; padding: 0; min-width: 0; min-height: 0; display: grid; place-items: center;
  background: var(--face); border: 1px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow: inset -1px -1px var(--lo), inset 1px 1px var(--light); }
.tbtns button:active { border-color: var(--dk) var(--hi) var(--hi) var(--dk); box-shadow: inset 1px 1px var(--lo); }
.tbtns button.close { margin-left: 2px; }
.tbtns svg { width: 9px; height: 9px; display: block; shape-rendering: crispEdges; }
.menubar { display: flex; gap: 0; padding: 1px 0; flex: none; }
.menubar span { padding: 2px 7px; }
.menubar span:hover { box-shadow: inset -1px -1px var(--lo), inset 1px 1px var(--hi); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 3px; flex: none;
  border-bottom: 1px solid var(--lo); box-shadow: 0 1px 0 var(--hi); margin-bottom: 4px; }
.wbody { flex: 1; overflow: auto; min-height: 0; display: flex; flex-direction: column; padding: 2px; }
.statusbar { display: flex; gap: 2px; flex: none; margin-top: 3px; }
.statusbar > div { padding: 1px 4px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statusbar > div:last-child { flex: 0 0 auto; min-width: 120px; }
.grip { position: absolute; right: 2px; bottom: 2px; width: 13px; height: 13px; cursor: nwse-resize; touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 40%, var(--hi) 40% 47%, var(--lo) 47% 55%, transparent 55% 62%,
      var(--hi) 62% 69%, var(--lo) 69% 77%, transparent 77% 84%, var(--hi) 84% 91%, var(--lo) 91%); }
.window.max .grip { display: none; }
.pane { background: #fff; overflow: auto; flex: 1; min-height: 0; padding: 8px 10px; user-select: text; }
.pad { padding: 10px; }

/* ---------- taskbar ---------- */
#taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: center; gap: 4px;
  padding: 2px 2px 2px 2px; z-index: 9000; border-left: 0; border-right: 0; border-bottom: 0; }
#startbtn { min-width: 0; height: 24px; padding: 2px 6px 2px 4px; gap: 4px; }
#startbtn .ico { width: 18px; height: 18px; }
#startbtn b { font-size: 12px; letter-spacing: .2px; }
.tb-divider { width: 2px; height: 22px; border-left: 1px solid var(--lo); border-right: 1px solid var(--hi); margin: 0 2px; }
#tasks { flex: 1; display: flex; gap: 3px; min-width: 0; overflow: hidden; }
.task { max-width: 160px; flex: 1 1 160px; min-width: 40px; height: 24px; justify-content: flex-start; padding: 2px 6px;
  overflow: hidden; white-space: nowrap; }
.task span:last-child { overflow: hidden; text-overflow: ellipsis; }
.task.pressed { font-weight: bold; background:
  repeating-conic-gradient(var(--hi) 0 25%, var(--face) 0 50%) 0 0 / 2px 2px; }
#tray { height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 6px; white-space: nowrap; }
#tray-ollama { width: 10px; height: 10px; border-radius: 50%; background: #999; box-shadow: inset -1px -1px rgba(0,0,0,.4); }
#tray-ollama.up { background: #34d058; }
#tray-ollama.down { background: #e5383b; }
#tray-job { width: 16px; height: 16px; cursor: pointer; animation: spin 1.4s steps(8) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- start menu ---------- */
#startmenu { position: fixed; left: 2px; bottom: 30px; display: flex; z-index: 9500; padding: 2px; min-width: 210px; }
#startmenu .banner { width: 24px; background: linear-gradient(0deg, #2a0a5e, #7b1fa2 50%, #e0457b);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
#startmenu .banner span { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-size: 17px;
  letter-spacing: 1px; font-family: Georgia, "Times New Roman", serif; }
#startmenu .banner b { font-family: var(--font); }
#startmenu .banner span i, #startmenu .banner span { font-style: normal; }
#startitems { list-style: none; margin: 0; padding: 0; flex: 1; }
#startitems li { display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 6px; height: 34px; cursor: default; }
#startitems li .ico { width: 24px; height: 24px; }
#startitems li:hover, #startitems li:focus-visible { background: var(--sel); color: var(--sel-text); outline: none; }
#startitems li.sep { height: 0; padding: 0; margin: 3px 2px; border-top: 1px solid var(--lo); border-bottom: 1px solid var(--hi); }
#startitems li u { text-decoration: underline; }

/* ---------- common content ---------- */
h1, h2, h3 { margin: 0; }
.hero { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: #fff; background: var(--title); flex: none; }
.hero h1 { font: italic bold 22px/1 Georgia, "Times New Roman", serif; letter-spacing: .3px; }
.hero .sub { opacity: .9; font-size: 11px; margin-top: 3px; }
.hero .ico { width: 40px; height: 40px; }
.section-title { font-weight: bold; margin: 12px 0 6px; padding-bottom: 3px; border-bottom: 1px solid #ccc;
  display: flex; align-items: center; gap: 6px; }
.quote { font: 14px/1.5 Georgia, "Times New Roman", serif; padding: 8px 12px; margin: 0;
  border-left: 4px solid #7b1fa2; background: #faf6ff; }
.muted { color: #555; }
.small { font-size: 11px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-weight: bold; color: #fff;
  border: 1px solid; border-color: rgba(255,255,255,.6) rgba(0,0,0,.5) rgba(0,0,0,.5) rgba(255,255,255,.6);
  white-space: nowrap; font-size: 11px; }
.chip.worth_a_look { background: var(--good); }
.chip.watch { background: var(--warn); }
.chip.probably_noise { background: var(--noise); }
.chip.none { background: #fff; color: #555; border-color: #aaa; font-weight: normal; }
.chip.newmkt { background: #7b1fa2; }
.pick { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 7px 4px; border-bottom: 1px dotted #bbb; }
.pick:hover { background: #f2ecff; }
.pick .h { font-weight: bold; cursor: pointer; color: #1a0dab; text-decoration: underline; }
.pick .meta { grid-column: 2; color: #555; font-size: 11px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 10px; align-items: start; }
.kv > div:nth-child(odd) { color: #444; }
.kv > div:nth-child(even) { user-select: text; }
.tk { font-family: var(--mono); font-size: 11px; background: #eef; padding: 0 3px; border: 1px solid #ccd; white-space: nowrap; }
.tk.bad { background: #ffe9e9; border-color: #e3b0b0; }
.tk.foreign { background: #eaf7f2; border-color: #a7d6c5; }
.meter { height: 14px; display: flex; gap: 2px; padding: 2px; background: #fff; }
.meter i { width: 9px; background: #e7e7e7; }
.meter i.on { background: linear-gradient(#a34fd6, #5b1b9c); }
.callout { padding: 8px 10px; background: var(--tip); border: 1px solid #000; margin: 6px 0; }

/* ---------- table (explorer) ---------- */
.tablewrap { flex: 1; min-height: 0; overflow: auto; background: #fff; }
table.list { border-collapse: collapse; width: 100%; table-layout: fixed; }
table.list th { position: sticky; top: 0; z-index: 1; text-align: left; font-weight: normal; padding: 2px 6px;
  background: var(--face); border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
table.list th:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
table.list th .arrow { font-size: 9px; margin-left: 4px; }
table.list td { padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.list tr.sel td { background: var(--sel); color: #fff; }
table.list tr.sel .chip.none { color: #555; }
table.list td.num { text-align: right; font-family: var(--mono); font-size: 11px; }

.tbtns button.off { display: none; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 0; padding: 4px 4px 0; position: relative; z-index: 1; flex: none; flex-wrap: wrap; }
.tab { padding: 3px 10px 2px; background: var(--face); border: 1px solid; border-bottom: 0; margin-right: -1px;
  border-color: var(--hi) var(--dk) transparent var(--hi); box-shadow: inset -1px 0 var(--lo); margin-top: 2px; }
.tab.on { margin-top: 0; padding-bottom: 5px; margin-bottom: -2px; position: relative; z-index: 2; }
.tabpage { flex: 1; min-height: 0; overflow: auto; margin: 0 4px 4px; padding: 12px;
  border: 1px solid; border-color: var(--hi) var(--dk) var(--dk) var(--hi); box-shadow: inset -1px -1px var(--lo);
  user-select: text; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 6px; padding: 6px 4px 4px; flex: none; }

/* ---------- calendar ---------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: var(--lo); padding: 2px; }
.cal div { background: #fff; min-height: 34px; padding: 2px 3px; font-size: 11px; position: relative; cursor: default; }
.cal .dow { min-height: 0; background: var(--face); text-align: center; font-weight: bold; }
.cal .out { background: #eee; color: #999; }
.cal .today { outline: 2px solid #e0457b; outline-offset: -2px; }
.cal .has { background: linear-gradient(135deg, #fff 0 55%, #f1e3ff); cursor: pointer; }
.cal .dots { position: absolute; right: 3px; bottom: 3px; display: flex; gap: 2px; }
.cal .dots i { width: 7px; height: 7px; border-radius: 50%; background: #7b1fa2; }
.cal .dots i.worth_a_look { background: var(--good); }
.cal .dots i.watch { background: var(--warn); }
.cal .dots i.probably_noise { background: var(--noise); }
.cal .sel { outline: 2px dotted #000; outline-offset: -3px; }
.agenda .ev { display: grid; grid-template-columns: 86px 1fr; gap: 2px 10px; padding: 6px 4px; border-bottom: 1px dotted #bbb; }
.agenda .ev .d { font-family: var(--mono); font-weight: bold; }
.agenda .ev .t { cursor: pointer; color: #1a0dab; text-decoration: underline; }

/* ---------- run dialog / progress ---------- */
.radio-list label { display: flex; align-items: flex-start; gap: 6px; padding: 3px 0; }
.radio-list small { display: block; color: #555; }
.progress { height: 20px; padding: 2px; background: #fff; display: flex; gap: 2px; overflow: hidden; }
.progress i { width: 10px; flex: none; background: var(--sel); }
.progress.busy i { animation: march 1.6s steps(1) infinite; opacity: 0; }
@keyframes march { 0%, 100% { opacity: 0; } 10%, 60% { opacity: 1; } }

/* ---------- MS-DOS ---------- */
.dos { flex: 1; min-height: 0; overflow: auto; background: #000; color: #c0c0c0; font: 13px/1.3 var(--mono);
  padding: 6px 8px; white-space: pre-wrap; word-break: break-word; user-select: text; }
.dos .hl { color: #fff; }
.dos .ok { color: #55ff55; }
.dos .err { color: #ff5555; }
.dos .cursor { display: inline-block; width: 8px; height: 13px; background: #c0c0c0; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- notepad ---------- */
.notepad { flex: 1; width: 100%; min-height: 0; font: 13px/1.4 var(--mono); padding: 4px 6px; white-space: pre-wrap; user-select: text; }

/* ---------- message box ---------- */
.msg { display: flex; gap: 14px; padding: 16px 14px 8px; align-items: flex-start; }
.msg .ico { width: 32px; height: 32px; }
.msg p { margin: 0 0 6px; }

/* ---------- assistant ---------- */
#assistant { position: absolute; right: 14px; bottom: 12px; z-index: 8000; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#assistant .bubble { position: relative; max-width: 260px; min-width: 170px; background: var(--tip); border: 1px solid #000;
  border-radius: 10px; padding: 9px 11px 8px; box-shadow: 2px 2px 0 rgba(0,0,0,.35); font-size: 12px; }
#assistant .bubble::after { content: ""; position: absolute; right: 38px; bottom: -11px; width: 14px; height: 14px;
  background: var(--tip); border-right: 1px solid #000; border-bottom: 1px solid #000; transform: skewX(-35deg) rotate(20deg); }
#assistant .say { min-height: 32px; font: italic 13px/1.4 Georgia, "Times New Roman", serif; }
#assistant .actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
#assistant .actions .btn { min-width: 0; min-height: 20px; padding: 1px 8px; font-size: 11px; }
#assistant .bun { width: 74px; height: 74px; cursor: pointer; animation: bob 3.2s ease-in-out infinite; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.3)); }
#assistant .bun svg { width: 100%; height: 100%; display: block; }
#assistant.thinking .bun { animation: bob .5s ease-in-out infinite; }
/* an always-running animation makes Firefox recomposite the whole page every frame: below Smooth, Sesame only bobs while he talks */
body.lowfps #assistant:not(.thinking):not(:has(.bubble:not([hidden]))) .bun { animation: none; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }

/* ---------- boot / shutdown ---------- */
#boot { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
  background: radial-gradient(ellipse at 50% 40%, #3b1385 0%, #13063a 60%, #000 100%); color: #fff; cursor: pointer; }
.boot-logo { display: flex; align-items: center; gap: 22px; }
.boot-flag { width: 74px; height: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; transform: skewY(-8deg) perspective(200px) rotateY(-12deg); }
.boot-flag span:nth-child(1) { background: #e0457b; } .boot-flag span:nth-child(2) { background: #28c2b8; }
.boot-flag span:nth-child(3) { background: #ffb347; } .boot-flag span:nth-child(4) { background: #7b2fbe; }
.boot-title { font: bold 54px/1 var(--font); letter-spacing: -1px; }
.boot-title i { font: italic 54px/1 Georgia, serif; color: #ffb347; margin-left: 6px; }
.boot-sub { font: italic 15px Georgia, serif; opacity: .8; margin-top: 8px; }
.boot-bar { width: 260px; height: 14px; border: 1px solid #777; padding: 2px; overflow: hidden; }
.boot-bar div { height: 100%; width: 40%; background: repeating-linear-gradient(90deg, #28c2b8 0 10px, transparent 10px 13px);
  animation: boot 1.1s linear infinite; }
@keyframes boot { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
#safe { position: fixed; inset: 0; z-index: 10001; background: #000; color: #ff8a00; display: flex; flex-direction: column;
  align-items: center; justify-content: center; cursor: pointer; }
#safe p { font: bold 30px/1.4 var(--font); text-align: center; margin: 0 0 30px; }
#safe small { color: #555; }

/* ---------- small screens ---------- */
@media (max-width: 700px) {
  .window { left: 0 !important; top: 0 !important; width: 100% !important; height: calc(100% - var(--under, 0px)) !important; }   /* stop above a see-through taskbar */
  .grip { display: none; }
  .kv { grid-template-columns: 1fr; }
  .kv > div:nth-child(odd) { font-weight: bold; margin-top: 4px; }
  .task { flex-basis: 90px; }
  #assistant .bubble { max-width: 200px; }
  .boot-title, .boot-title i { font-size: 36px; }
  /* windows fill the phone screen, so Sesame would sit on top of their content: he waits on the bare desktop */
  body:has(#windows .window:not([hidden])) #assistant { display: none; }
}

/* ---------- log on ---------- */
#logon { position: fixed; inset: 0; z-index: 9800; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 20% 10%, #13858a 0%, var(--desk) 55%, #0a4f57 100%); }
#logon .window { position: relative; width: min(420px, 100%); height: auto; min-height: 0; }
#logon .window.active .titlebar { background: var(--title); color: #fff; }
#logon .logon-body { display: flex; gap: 14px; padding: 16px 14px 6px; align-items: flex-start; }
#logon .logon-body .ico { width: 40px; height: 40px; }
#logon .form { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; margin-top: 10px; }
#logon .form .field { width: 100%; }
#logon .err { color: #b00020; min-height: 16px; margin-top: 8px; }
body.guest .admin-only { display: none !important; }

/* ---------- categories & predictions ---------- */
.chip.cat-government { background: #2a3f9e; }
.chip.cat-weather { background: #138a8a; }
.chip.cat-hazard { background: #c0392b; }
.chip.cat-market { background: #b8860b; }
.chip.cat-news { background: #6d3fa0; }
.chip.cat-corporate { background: #34495e; }
.chip.cat-odds { background: #8e44ad; }
.chip.cat-attention { background: #d35400; }
.chip.cat-cyber { background: #111; }
.chip.cat-economy { background: #16a085; }
.chip.cat-health { background: #c2185b; }
.chip.st-open { background: #4a6fa5; }
.chip.st-hit { background: var(--good); }
.chip.st-miss { background: #b00020; }
.chip.st-void { background: #888; }
.dir-up { color: var(--good); font-weight: bold; }
.dir-down { color: #b00020; font-weight: bold; }
.pred { padding: 8px 4px; border-bottom: 1px dotted #bbb; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.pred:hover { background: #f2ecff; }
.pred .h { font-weight: bold; cursor: pointer; color: #1a0dab; text-decoration: underline; }
.pred .meta { grid-column: 2; color: #555; font-size: 11px; }
.bigcall { font: bold 20px/1.2 Georgia, serif; margin: 2px 0 8px; }
.scoreboard { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.scoreboard > div { padding: 6px 10px; background: #fff; min-width: 90px; }
.scoreboard b { display: block; font: bold 20px/1.1 Georgia, serif; }

/* ---------- bottom line ---------- */
.bottomline { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 10px 12px; margin: 0 0 12px;
  border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0,0,0,.25); background: #fff; flex: none; }
.bottomline .badge { grid-row: span 3; align-self: start; padding: 6px 8px; color: #fff; font-weight: bold;
  text-align: center; min-width: 92px; border: 1px solid; border-color: rgba(255,255,255,.6) rgba(0,0,0,.5) rgba(0,0,0,.5) rgba(255,255,255,.6); }
.bottomline .badge small { display: block; font-weight: normal; font-size: 10px; opacity: .9; margin-top: 2px; }
.bottomline.actionable { background: #effaf1; } .bottomline.actionable .badge { background: var(--good); }
.bottomline.watch { background: #fff8e6; } .bottomline.watch .badge { background: var(--warn); }
.bottomline.nothing { background: #f4f4f4; } .bottomline.nothing .badge { background: var(--noise); }
.bottomline .bl-head { font: bold 15px/1.3 Georgia, "Times New Roman", serif; }
.bottomline .bl-why { color: #333; }
.bottomline .bl-note { color: #666; font-size: 11px; font-style: italic; }
.wbody > .bottomline { margin: 6px 6px 8px; }

/* ---------- Gregory Capital ---------- */
.letterhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 4px 0 10px; border-bottom: 3px double #7b1fa2; margin-bottom: 10px; }
.letterhead .firm { font: italic bold 24px/1 Georgia, "Times New Roman", serif; color: #2a0a5e; }
.letterhead .firm-sub { font-size: 11px; color: #555; margin-top: 4px; }
.letterhead .edge { text-align: right; }
.letterhead .edge b { display: block; font: bold 30px/1 Georgia, serif; }
.letterhead .edge.pos b { color: var(--good); }
.letterhead .edge.neg b { color: #b00020; }
.letterhead .edge span { font-size: 11px; color: #555; }
.chartbox { position: relative; background: #fff; padding: 6px 4px 2px; margin: 4px 0 12px; }
.chartbox svg { display: block; width: 100%; height: 220px; }
.chartbox .tip { position: absolute; pointer-events: none; background: var(--tip); border: 1px solid #000; padding: 4px 7px;
  font-size: 11px; white-space: nowrap; box-shadow: 2px 2px 0 rgba(0,0,0,.25); }
.chartbox .legend { display: flex; gap: 14px; font-size: 11px; padding: 2px 6px 4px; }
.chartbox .legend i { display: inline-block; width: 22px; height: 0; border-top: 2px solid #7b1fa2; vertical-align: middle; margin-right: 5px; }
.chartbox .legend i.dash { border-top: 2px dashed #c25a00; }
.empty-chart { height: 120px; display: grid; place-items: center; color: #555; text-align: center; padding: 10px; }
td.pos { color: var(--good); } td.neg { color: #b00020; }
.modeled { font-size: 10px; background: #fff3c4; border: 1px solid #c9a227; padding: 0 3px; margin-left: 4px; }

/* ---------- desktop interaction ---------- */
.dicon.dragging { transition: none; opacity: .75; z-index: 5; }
.dicon:focus-visible span.lbl { outline: 1px dotted #fff; }
.rubber { position: absolute; border: 1px dotted #fff; background: rgba(255, 255, 255, .1); outline: 1px dotted rgba(0,0,0,.5);
  outline-offset: -2px; pointer-events: none; z-index: 4; }
.window.opening { animation: winopen .14s ease-out; }
@keyframes winopen { from { transform: scale(.94); opacity: .3; } }

/* ---------- menus (context + menubar) ---------- */
.ctxmenu { position: fixed; z-index: 9900; min-width: 170px; padding: 2px; user-select: none; }
.ctxmenu .mi { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 2px; padding: 3px 10px 3px 2px;
  white-space: nowrap; cursor: default; }
.ctxmenu .mi.hot { background: var(--sel); color: #fff; }
.ctxmenu .mi.b .mlbl { font-weight: bold; }
.ctxmenu .mi.dis { color: var(--lo); text-shadow: 1px 1px 0 var(--hi); }
.ctxmenu .mi.dis.hot { background: transparent; color: var(--lo); }
.ctxmenu .mchk { text-align: center; font-size: 11px; }
.ctxmenu .mkey { padding-left: 22px; font-size: 11px; }
.ctxmenu .msep { height: 0; margin: 3px 1px; border-top: 1px solid var(--lo); border-bottom: 1px solid var(--hi); }
.menubar span { cursor: default; border: 1px solid transparent; }
.menubar span.open { box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--hi); background: transparent; }
.menubar span:hover:not(.open) { box-shadow: inset -1px -1px var(--lo), inset 1px 1px var(--hi); }
.titlebar > .ico { cursor: default; }
.statusbar.off { display: none; }
tr.sel td { background: var(--sel); color: #fff; }
tr.sel td.pos, tr.sel td.neg { color: #fff; }
.help h2 { font: bold 16px Georgia, serif; margin: 0 0 8px; }
.help h3 { font-size: 12px; margin: 12px 0 4px; }
.help p, .help li { line-height: 1.5; max-width: 68ch; }
.kv .pos { color: var(--good); } .kv .neg { color: #b00020; }
.dosline { display: flex; white-space: pre; }
.dosin { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 0; margin: 0; color: #c0c0c0;
  font: inherit; caret-color: #c0c0c0; box-shadow: none; }
/* Canvas wallpaper (Wallpaper in app.js) replaces the CSS-animated layers once it has drawn. */
#wallpaper .wp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#wallpaper.canvas .wp { display: none; }
/* ---- Celery Man: a "Cinco" media player, styled after the clip itself: cheap grey Cinco-OS windows ("Close ▾ ▴"),
   the yellow-orange Identity Generator splash with a wireframe head, Paul's banded blue studio glow and striped floor,
   Celery Man's magenta backdrop, Tayne's gold paisley. Only this window opts out of Win98 (WM.open opts.skin). ---- */
.window.skin { padding: 0; background: transparent; border: 0; box-shadow: none; min-width: 0; min-height: 0; }
.window.skin .wbody { padding: 0; overflow: visible; }
/* skinned windows draw their own chrome: no theme may paint (or pad) their body */
body .window.skin > .wbody, body[data-family] .window.skin > .wbody { background: transparent; margin: 0; border: 0; box-shadow: none; }
.window.skin .titlebar { position: absolute; z-index: 6; top: 0; left: 50%; transform: translateX(-50%); width: 56%; height: 22px;
  padding: 0 4px 0 8px; border: 1px solid #6f6f6f; border-radius: 3px; color: #111; cursor: grab;
  background: linear-gradient(#fbfbfb, #dedede); box-shadow: inset 1px 1px 0 #fff, 2px 3px 0 rgba(0,0,0,.3); }
.window.skin .titlebar .ttext { font: bold 11px/1 Verdana, Arial, sans-serif; color: #111; }
.window.skin .tbtns button { width: 16px; height: 14px; border-radius: 2px; border: 1px solid #8a8a8a; background: #f4f4f4; box-shadow: inset 1px 1px #fff; }
.window.skin .tbtns svg { width: 7px; height: 7px; }
.cm-shell { position: relative; flex: 1; margin-top: 11px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 50px 40px; border-radius: 46% 54% 42% 58% / 26% 30% 70% 74%; color: #111; user-select: none; isolation: isolate;
  background:
    radial-gradient(ellipse 55% 34% at 50% 30%, rgba(235,250,255,.9), rgba(235,250,255,0) 70%),
    repeating-radial-gradient(ellipse 120% 90% at 50% 34%, #3c95f4 0 22px, #2f86f0 22px 40px, #2470e6 40px 58px),
    #1f62df;
  box-shadow: 0 0 0 3px #12b5c9, 0 0 0 6px #0b6f80, 0 0 34px 6px rgba(41,227,240,.55), 0 14px 26px rgba(0,0,0,.5); }
/* Paul's striped studio floor, under the controls */
.cm-floor { position: absolute; z-index: -1; left: 8%; right: 8%; bottom: 3%; height: 30%; border-radius: 50%;
  background: repeating-linear-gradient(100deg, #eaf8ff 0 16px, #a9d8ff 16px 20px); box-shadow: 0 0 24px 8px rgba(234,248,255,.7); opacity: .9; }
.cinco { background: #efefef; border: 1px solid #6f6f6f; box-shadow: inset 1px 1px 0 #fff, 3px 3px 0 rgba(0,0,0,.28); }
.cinco-bar { height: 15px; display: flex; align-items: center; gap: 3px; padding: 0 2px; border-bottom: 1px solid #9a9a9a;
  background: linear-gradient(#fbfbfb, #dcdcdc); font: 9px/1 Verdana, Arial, sans-serif; color: #222; }
.cinco-bar > span:nth-of-type(1) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.cinco-grab { width: 9px; height: 3px; border: 1px solid #8a8a8a; border-width: 1px 0; flex: none; }
.cinco-close { flex: none; padding: 0 4px; border: 1px solid #9a9a9a; background: #f7f7f7; line-height: 10px; }
.cinco-bar b { flex: none; width: 9px; height: 10px; display: grid; place-items: center; border: 1px solid #9a9a9a; background: #f7f7f7; font-size: 6px; }
.cinco-body { padding: 3px; }
.cm-banner { width: 74%; }
.cm-splash { display: flex; align-items: center; gap: 10px; padding: 3px 10px; height: 44px;
  background: radial-gradient(circle at 7% 18%, #ff9100 0 15px, transparent 16px), linear-gradient(90deg, #ffe100, #ffc400 45%, #ff9a00); }
.cm-head { width: 40px; height: 40px; flex: none; }
.cm-head svg { width: 100%; height: 100%; display: block; }
.cm-title { font: bold 16px/1.1 Arial, Helvetica, sans-serif; color: #111; letter-spacing: -.2px; }
.cm-sub { font: 10px/1.2 Verdana, Arial, sans-serif; color: #3a2a00; }
.cm-lcd { width: 74%; }
.cm-lcd .cinco-body { padding: 2px; }
.cm-lcd-screen { height: 16px; overflow: hidden; white-space: nowrap; background: #000;
  color: #c9f7ff; font: bold 11px/16px "Lucida Console", "Courier New", monospace; text-shadow: 0 0 5px #29e3f0; }
.cm-lcd-screen span { display: inline-block; padding-left: 100%; animation: cm-marquee 24s linear infinite; }
@keyframes cm-marquee { to { transform: translateX(-100%); } }
.cm-mid { display: flex; align-items: stretch; justify-content: center; gap: 8px; width: 100%; }
.cm-screen { flex: 1; max-width: 380px; }
.cm-screen .cinco-body { position: relative; padding: 6px; background: #ee4fd3; }
.cm-screen iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; background: #000; }
.cm-pod { width: 58px; flex: none; display: flex; flex-direction: column; }
.cm-pod .cinco-body { flex: 1; display: grid; place-items: center; }
.cm-vol { writing-mode: vertical-lr; direction: rtl; width: 16px; height: 120px; margin: 0; accent-color: #12b5c9; }
.cm-paisley { background:
    radial-gradient(circle at 25% 25%, #ffd34d 0 20%, transparent 22%), radial-gradient(circle at 72% 68%, #ffd34d 0 17%, transparent 19%),
    radial-gradient(circle at 70% 22%, #2a1200 0 11%, transparent 13%), radial-gradient(circle at 22% 74%, #2a1200 0 12%, transparent 14%), #b8731b;
  background-size: 15px 15px; }
.cm-pod-tayne .cinco-body { padding: 0; }
.cm-pod-tayne .cm-paisley { width: 100%; height: 100%; display: grid; place-items: end center; padding-bottom: 6px; }
.cm-viz { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.cm-viz i { width: 6px; height: 100%; transform-origin: bottom; transform: scaleY(.1); border: 1px solid #000;
  background: linear-gradient(#ee4fd3, #29e3f0 50%, #fff); }
.cm-shell.playing .cm-viz i { animation: cm-bar .55s ease-in-out infinite alternate; }
.cm-viz i:nth-child(2) { animation-duration: .41s !important; } .cm-viz i:nth-child(3) { animation-duration: .67s !important; }
.cm-viz i:nth-child(4) { animation-duration: .38s !important; } .cm-viz i:nth-child(5) { animation-duration: .5s !important; }
@keyframes cm-bar { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
.cm-progress { position: relative; width: 66%; height: 16px; flex: none; overflow: hidden; border: 1px solid #6f6f6f; background: #fff;
  box-shadow: inset 1px 1px 0 #bbb; }
.cm-progress-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); transition: transform .6s linear;
  background: repeating-linear-gradient(90deg, #1f62df 0 9px, #5aa8f7 9px 11px); }
.cm-progress-label { position: relative; font: 10px/14px Verdana, Arial, sans-serif; text-align: center; color: #111; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.cm-controls { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; }
.window.skin .cm-btn { width: 34px; height: 34px; min-width: 0; min-height: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 2px solid #064b57; color: #063440; font: 900 12px/1 "Arial Black", Verdana, sans-serif;
  background: radial-gradient(circle at 35% 28%, #fff 0 10%, #b9f6ff 24%, #19c6dc 62%, #0a7f94 100%);
  box-shadow: 0 3px 5px rgba(0,0,0,.45), inset 0 -3px 6px rgba(0,0,0,.25); }
.window.skin .cm-btn.big { width: 48px; height: 48px; font-size: 19px; color: #fff; border-color: #5a0b4c; text-shadow: 0 1px 0 #600046;
  background: radial-gradient(circle at 35% 28%, #fff 0 10%, #ffc2f1 24%, #ee4fd3 62%, #9a0f83 100%); }
.window.skin .cm-btn.pill { width: auto; height: 26px; padding: 0 11px; border-radius: 13px; font-size: 10px; letter-spacing: .3px; }
.window.skin .cm-btn.hot { color: #fff; border-color: #5a0b4c; text-shadow: 0 1px 0 #600046;
  background: radial-gradient(circle at 35% 28%, #fff 0 10%, #ffc2f1 24%, #ee4fd3 62%, #9a0f83 100%); }
.window.skin .cm-btn.gold { color: #1a0d00; border-color: #2a1200; text-shadow: 0 1px 0 #ffe9a8;
  background: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.05) 55%, rgba(0,0,0,.1)),
    radial-gradient(circle at 25% 25%, #ffd34d 0 20%, transparent 22%), radial-gradient(circle at 72% 68%, #ffd34d 0 17%, transparent 19%),
    radial-gradient(circle at 70% 22%, #2a1200 0 11%, transparent 13%), #b8731b;
  background-size: auto, 13px 13px, 13px 13px, 13px 13px, auto; }
.window.skin .cm-btn.grey { border-radius: 2px; border: 1px solid #6f6f6f; color: #111; font: 10px/1 Verdana, Arial, sans-serif;
  background: #efefef; box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 rgba(0,0,0,.3); }
.window.skin .cm-btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 3px 6px rgba(0,0,0,.35); }
/* HAT WOBBLE: the player wobbles and a cascade of Tayne windows pops out, like the clip */
.cm-shell.wobble { animation: cm-wobble 1.5s ease-in-out; }
@keyframes cm-wobble { 0%, 100% { transform: none; } 15% { transform: rotate(-5deg) skewX(4deg); } 35% { transform: rotate(4deg) skewX(-3deg); }
  55% { transform: rotate(-3deg) scaleY(1.03); } 75% { transform: rotate(2deg); } }
.cm-tayne-stack { position: absolute; z-index: 5; top: 70px; right: 6px; width: 170px; height: 180px; pointer-events: none; }
.cm-tayne-pop { position: absolute; width: 92px; animation: cm-pop .22s ease-out both; }
.cm-tayne-pop .cinco-body { padding: 0; }
.cm-tayne-pop .cm-paisley { height: 96px; display: grid; place-items: center; }
.cm-hat { position: relative; width: 50px; height: 9px; border-radius: 50%; background: #111; margin-top: 18px; }
.cm-hat::before { content: ""; position: absolute; left: 12px; bottom: 5px; width: 26px; height: 17px; background: #111;
  border-radius: 9px 9px 2px 2px; box-shadow: inset 0 -4px 0 #6b4a12; }
@keyframes cm-pop { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.cm-shell.d4 { animation: cm-4d 3s linear; }
@keyframes cm-4d { from { filter: hue-rotate(0) saturate(1.6); } to { filter: hue-rotate(720deg) saturate(1.6); } }
/* NUDE TAYNE: "This is not suitable for work." */
.cm-shell.nsfw .cm-screen iframe { filter: blur(16px) saturate(1.5); }
.cm-shell.nsfw .cm-screen .cinco-body::after { content: "NOT SUITABLE FOR WORK. ARE YOU SURE?"; position: absolute; inset: 0; display: grid; place-items: center;
  padding: 20px; text-align: center; font: bold 15px/1.3 Arial, Helvetica, sans-serif; color: #fff; text-shadow: 0 2px 0 #000, 0 0 8px #000; }
.window.skin.narrow .cm-pod { display: none; }
.window.skin.narrow .cm-shell { padding: 26px 18px 34px; border-radius: 30px; }
.window.skin.narrow .cm-banner, .window.skin.narrow .cm-lcd { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .cm-shell.wobble, .cm-shell.d4, .cm-lcd-screen span, .cm-shell.playing .cm-viz i, .cm-tayne-pop { animation: none !important; } }
.cm-pod .cinco-close, .cm-pod .cinco-bar b { display: none; }
.window.skin .cm-btn.pill.hot { background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0) 52%), linear-gradient(#f56ae0, #c4199f);
  text-shadow: 0 1px 0 #5a0040, 0 0 4px #5a0040; }
/* Celery Man cue windows: pop open/closed around the desktop in sync with the clip (celeryDirector). Decoration only. */
.cm-pops { position: absolute; inset: 0; z-index: 8000; pointer-events: none; overflow: hidden; }
.cm-pop { position: absolute; animation: cm-pop .12s ease-out both; }
.cm-pop .cinco-body { padding: 2px; }
.cm-pop img { display: block; width: 100%; height: auto; }
.cm-term { background: #000; color: #f2f2f2; font: 15px/1.35 "Lucida Console", "Courier New", monospace; padding: 6px 8px; min-height: 26px; }
.cm-term-big { font-size: 17px; min-height: 120px; white-space: pre-wrap; padding: 12px 14px; }
.cm-term-line { white-space: pre-wrap; }
.cm-caret { display: inline-block; width: 8px; height: 15px; vertical-align: -2px; background: #f2f2f2; animation: blink 1s steps(1) infinite; }
.cm-term-status { display: flex; gap: 6px; margin: 6px -8px -6px; padding: 2px 4px; background: #efefef; color: #333; font: 9px Verdana, sans-serif; border-top: 1px solid #9a9a9a; }
.cm-term-status span:last-child { flex: 1; border: 1px solid #9a9a9a; background: #fff; height: 11px; }
.cm-loader { padding: 10px 14px 8px; background: #f4f4f4; text-align: center; font: 10px/1.4 Verdana, Arial, sans-serif; color: #222; }
.cm-loader-bar { height: 14px; border: 1px solid #6f6f6f; background: #fff; margin-bottom: 6px; overflow: hidden; }
.cm-loader-fill { height: 100%; transform-origin: left; background: #1f3fd0; animation: cm-load linear both; }
@keyframes cm-load { from { transform: scaleX(.04); } to { transform: scaleX(1); } }
.cm-pop-splash { position: absolute; background: #efefef; border: 1px solid #6f6f6f; box-shadow: 3px 3px 0 rgba(0,0,0,.28); animation: cm-pop .12s ease-out both; }
.cm-pop-splash-art { height: 120px; display: grid; place-items: center;
  background: radial-gradient(circle at 8% 22%, #ff9100 0 30px, transparent 31px), linear-gradient(90deg, #ffe100, #ffc400 45%, #ff9a00); }
.cm-pop-splash-art .cm-head { width: 110px; height: 110px; }
.cm-pop-splash-name { padding: 6px 0 0; text-align: center; font: bold 16px Arial, Helvetica, sans-serif; color: #111; }
.cm-warning { position: absolute; font: 900 120px/1 "Courier New", monospace; letter-spacing: 6px; color: #e01414;
  text-shadow: 4px 4px 0 #6a0000; animation: cm-blink .25s steps(1) infinite; }
@keyframes cm-blink { 50% { opacity: .2; } }
.cm-nsfw { padding: 18px; text-align: center; font: bold 44px/1 Arial, Helvetica, sans-serif; color: #111; background: #f4f4f4; }
.cm-error { padding: 22px 14px; text-align: center; font: 15px/1.4 Arial, Helvetica, sans-serif; color: #111; background: #f4f4f4; }
.cm-blank { height: 150px; background: #f8f8f8; }
.cm-ring { animation: cm-pop .12s ease-out both, cm-ring .14s linear infinite; }
@keyframes cm-ring { 0%, 100% { translate: 0 0; } 25% { translate: 0 -2px; } 50% { translate: 1px 0; } 75% { translate: 0 2px; } }
@media (prefers-reduced-motion: reduce) { .cm-pop, .cm-pop-splash, .cm-warning, .cm-ring, .cm-loader-fill { animation: none !important; } }
.cm-pops.under { z-index: 0; }
.cm-progress { cursor: pointer; }
/* Animation cycles from the clip: a strip of frames stepped through with a transform (see cmAnim). */
.cm-anim { position: relative; overflow: hidden; width: 100%; background: #f4f4f4; }
.cm-pop .cm-anim img, .cm-anim img { position: absolute; left: 0; top: 0; width: auto; height: 100%; max-width: none;
  animation-name: cm-strip; animation-iteration-count: infinite; will-change: transform; }
@keyframes cm-strip { to { transform: translateX(-100%); } }
@keyframes cm-strip-once { to { transform: translateX(var(--end)); } }
.cm-anim.flip { transform: scaleX(-1); }
.cm-pops.paused .cm-anim img { animation-play-state: paused; }
.cm-dancer { position: absolute; pointer-events: none; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .25)); }
.cm-dancer .cm-anim { background: none; }
/* the clip's blue-filled title bars, and the sepia Tayne behind the phone call */
.cm-bluebar .cinco-bar > span:first-of-type { background: linear-gradient(#2a3fc4, #18268a); color: #fff; padding-left: 4px; }
.cm-sepia .cinco-body, .cm-sepia .cinco-bar { filter: sepia(1) saturate(1.8) hue-rotate(-12deg) brightness(1.04); }
@media (prefers-reduced-motion: reduce) { .cm-anim img { animation: none !important; } }
/* Pop in / pop out, system-wide: windows grow from 60% with a little overshoot and shrink away on close. */
.window.opening { animation: winopen .22s cubic-bezier(.2, 1.45, .45, 1) both; }
@keyframes winopen { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.window.closing, .cm-popin.closing { animation: winclose .16s ease-in forwards !important; pointer-events: none !important; }
@keyframes winclose { to { transform: scale(.65); opacity: 0; } }
.cm-popin { animation: winopen .2s cubic-bezier(.2, 1.45, .45, 1) both; }
.cm-warning.cm-popin { animation: winopen .2s cubic-bezier(.2, 1.45, .45, 1) both, cm-blink .25s steps(1) .2s infinite; }
.cm-ring.cm-popin { animation: winopen .2s cubic-bezier(.2, 1.45, .45, 1) both, cm-ring .5s steps(1) .2s infinite; }
.cm-pop { pointer-events: auto; }
.cm-pop .cinco-close { cursor: pointer; }
.cm-pop .cinco-close:hover { background: #fff; }
/* The last frame: CONGRATULATIONS! (flashing), FREE MASSAGE, over everything until closed. */
.cm-congrats-win { border: 3px solid #2a5bd7; box-shadow: 0 0 0 1px #0b2a7a, 6px 8px 0 rgba(0,0,0,.35); }
.cm-congrats-win .cinco-bar { font-family: "Courier New", monospace; }
.cm-congrats { background: #e9e9e9; }
.cm-congrats-head { background: #ffef3a; text-align: center; padding: 6px 8px 7px; border-bottom: 2px solid #1d1d1d; }
.cm-congrats-title { font: 900 52px/1 Impact, "Arial Black", "Haettenschweiler", sans-serif; letter-spacing: 1px; color: #e3130f;
  -webkit-text-stroke: 1.5px #7a0000; text-shadow: 2px 2px 0 #ffd000; animation: cm-flash .34s steps(1) infinite; }
@keyframes cm-flash { 50% { visibility: hidden; } }
.cm-congrats-sub { font: 900 15px/1.2 Impact, "Arial Black", sans-serif; color: #111; letter-spacing: .3px; }
.cm-congrats-sub b { color: #e3130f; }
.cm-congrats-link { cursor: pointer; }
.cm-congrats-photo { padding: 10px; background: repeating-linear-gradient(45deg, #b32a2a 0 6px, #e8d7c7 6px 12px); }
.cm-congrats-photo img { display: block; width: 100%; border: 3px solid #2f8a3a; }
@media (prefers-reduced-motion: reduce) { .cm-popin, .cm-congrats-title { animation: none !important; } }
/* Final chaos: every outfit stacked in each window; the visible one flips per animation frame (no image loading). */
.cm-outfits { position: relative; aspect-ratio: 1.6; background: #e8e8e8; overflow: hidden; }
.cm-outfits img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.cm-outfits[data-o="beanie"] .o-beanie, .cm-outfits[data-o="tayne"] .o-tayne, .cm-outfits[data-o="grey"] .o-grey,
.cm-outfits[data-o="turn"] .o-turn, .cm-outfits[data-o="tank"] .o-tank, .cm-outfits[data-o="tee"] .o-tee,
.cm-outfits[data-o="face"] .o-face, .cm-outfits[data-o="suit"] .o-suit { visibility: visible; }
.cm-pop.cm-top { z-index: 2; }
/* CONGRATULATIONS! zooms in from almost nothing in ~4 frames, like the clip; its red text flashes ~0.2 s on / 0.2 s off */
.cm-congrats-win.cm-popin { animation: cm-zoom .14s ease-out both; }
@keyframes cm-zoom { from { transform: scale(.04); } to { transform: none; } }
.cm-congrats-title { animation-duration: .4s; }
.chip.cat-geopolitics { background: #7a1f3d; }
.chip.cat-startups { background: #2e7d32; }
/* Chain-of-effects ladder (prediction detail). One hue, light -> dark with distance from the observed event. */
.ladder { list-style: none; margin: 4px 0 10px; padding: 0; }
.rung-if { margin: 0 0 4px 18px; padding-left: 10px; border-left: 2px solid #b9a6d6; color: #555; font-size: 11px; font-style: italic; }
.rung-card { position: relative; margin: 0 0 6px; padding: 6px 8px 6px 10px; background: #fff; border: 1px solid #cfc6dc; border-left-width: 4px; }
.rung.o1 .rung-card { border-left-color: #c9b5e8; }
.rung.o2 .rung-card { border-left-color: #8a5cc7; }
.rung.o3 .rung-card { border-left-color: #4b1f86; }
.rung-badge { float: right; margin: 0 0 2px 8px; padding: 0 5px; font: bold 10px/15px Verdana, sans-serif; color: #fff; border-radius: 2px; }
.rung.o1 .rung-badge { background: #6d4a9e; } .rung.o2 .rung-badge { background: #5a3290; } .rung.o3 .rung-badge { background: #3b1670; }
.rung-effect { font-weight: bold; margin-bottom: 3px; }
.rung-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: #333; }
.rung-meta .tk { margin-right: 3px; }
/* ---- Euclid (Pi, 1998): grainy high-contrast black and white; no screen, only a dot-matrix printer. ---- */
.window.skin-euclid .titlebar { width: 46%; height: 20px; border-radius: 0; border: 0; color: #111; transform: translateX(-50%) rotate(-1.5deg);
  background: #e9e4d6; box-shadow: 1px 2px 0 rgba(0,0,0,.6); }
.window.skin-euclid .titlebar .ttext { font: bold 12px/1 "Courier New", monospace; letter-spacing: 3px; color: #111; text-shadow: none; }
.window.skin-euclid .tbtns button { border-radius: 0; background: #f2f2f2; border: 1px solid #333; box-shadow: none; }
.eu-box { position: relative; flex: 1; margin-top: 10px; display: flex; flex-direction: column; background: #0b0b0b;
  border: 3px solid #000; box-shadow: 0 10px 30px rgba(0,0,0,.7); overflow: hidden; filter: grayscale(1) contrast(1.35); }
.eu-printer { position: relative; height: 210px; margin: 10px 60px 0; background: linear-gradient(#cfcfcf, #8b8b8b);
  border: 2px solid #000; border-radius: 6px 6px 2px 2px; box-shadow: inset 0 -12px 0 #5a5a5a; }
.eu-slot { position: absolute; left: 22px; right: 22px; bottom: 26px; height: 6px; background: #000; }
.eu-roll { position: absolute; left: 40px; right: 40px; top: -6px; bottom: 30px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); }
.eu-paper { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 4px 22px 0;
  background: #f3f1ea; color: #111; font: 11px/1.25 "Courier New", monospace; letter-spacing: .5px;
  /* tractor-feed holes down both edges */
  background-image: radial-gradient(circle at 8px 8px, #0b0b0b 0 3.5px, transparent 4px), radial-gradient(circle at calc(100% - 8px) 8px, #0b0b0b 0 3.5px, transparent 4px),
    repeating-linear-gradient(#f3f1ea 0 15px, #e7e4da 15px 16px);
  background-size: 100% 16px, 100% 16px, auto; }
.eu-line { white-space: pre; min-height: 13px; text-shadow: .4px 0 0 #111; }
.eu-label { position: absolute; right: 10px; bottom: 6px; font: bold 10px "Courier New", monospace; letter-spacing: 4px; color: #222; }
.eu-rig { flex: 1; min-height: 0; }
.eu-rig svg { display: block; width: 100%; height: 100%; }
.eu-fan { animation: eu-spin .35s linear infinite; }
@keyframes eu-spin { to { transform: rotate(360deg); } }
.eu-leds circle { animation: eu-blink .9s steps(1) infinite; }
@keyframes eu-blink { 50% { opacity: .15; } }
.eu-ant { opacity: 0; transform: translate(70px, 330px); }
.eu-foot { display: flex; align-items: center; gap: 12px; padding: 6px 12px 8px; background: #161616; border-top: 2px solid #000; }
.window.skin-euclid .eu-switch { min-width: 0; min-height: 0; width: 64px; height: 26px; padding: 0; border-radius: 3px; border: 2px solid #000;
  background: linear-gradient(#efefef, #9a9a9a); font: bold 9px "Courier New", monospace; color: #000; cursor: pointer; transition: transform .1s; }
.window.skin-euclid .eu-switch.off { transform: scaleY(-1); }
.eu-tape { padding: 2px 10px; background: #e9e4d6; color: #222; font: bold 10px "Courier New", monospace; letter-spacing: 1px; transform: rotate(1deg); }
/* film grain over everything */
.eu-grain { position: absolute; inset: -50%; pointer-events: none; opacity: .32; mix-blend-mode: overlay; animation: eu-grain .5s steps(5) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes eu-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -6%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(8%, 2%); } 100% { transform: translate(0, 0); } }
/* the crash: shudder, lights and fans die, the ant walks onto the chip */
.eu-box.crashed { animation: eu-shudder .5s linear 1; }
@keyframes eu-shudder { 10%, 50%, 90% { transform: translate(-3px, 2px); } 30%, 70% { transform: translate(3px, -2px); } }
.eu-box.crashed .eu-fan { animation: eu-spin 2.5s cubic-bezier(.1, .7, .3, 1) 1 forwards; }
.eu-box.crashed .eu-leds circle { animation: none; opacity: .08; }
.eu-box.crashed .eu-rig { filter: brightness(.7); }
.eu-box.crashed .eu-ant { animation: eu-ant 6s ease-in-out 1.2s forwards; }
@keyframes eu-ant { 0% { opacity: 1; transform: translate(70px, 330px) rotate(-60deg) scale(3); } 30% { transform: translate(96px, 262px) rotate(-30deg) scale(3); }
  55% { transform: translate(112px, 236px) rotate(-75deg) scale(3); } 80% { transform: translate(136px, 200px) rotate(-40deg) scale(3); }
  100% { opacity: 1; transform: translate(150px, 188px) rotate(-90deg) scale(3); } }
/* Euclid's printout is 38 columns wide; tighten the printer so it fits a phone */
@media (max-width: 700px) {
  .eu-printer { margin: 10px 10px 0; }
  .eu-roll { left: 14px; right: 14px; }
  .eu-paper { padding: 4px 16px 0; font-size: 9px; letter-spacing: .2px; }
}
@media (prefers-reduced-motion: reduce) { .eu-fan, .eu-leds circle, .eu-grain, .eu-box.crashed { animation: none !important; }
  .eu-box.crashed .eu-ant { animation: none; opacity: 1; transform: translate(150px, 188px) scale(3); } }
/* Why the Market Moved */
.wrap-brief { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; padding: 8px 10px; background: #f3f7fd; border: 1px solid #9fbbe6; }
.wrap-brief .col { display: flex; flex-direction: column; gap: 4px; }
.wrap-head { font: bold 16px/1.3 Georgia, serif; margin: 6px 0 2px; }
.moves { display: grid; gap: 2px; margin: 4px 0 10px; }
.moves-group { margin-top: 6px; font: bold 10px Verdana, sans-serif; color: #555; text-transform: uppercase; letter-spacing: .5px; }
.move { display: grid; grid-template-columns: minmax(150px, 1.2fr) 2fr 64px; align-items: center; gap: 8px; }
.move-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.move-track { position: relative; height: 12px; background: linear-gradient(90deg, transparent calc(50% - .5px), #f0efec calc(50% - .5px), #f0efec calc(50% + .5px), transparent calc(50% + .5px)); }
.move-track i { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; }
.move-track i.up { background: #2a78d6; } .move-track i.down { background: #e34948; }
.move-val { text-align: right; font: 11px var(--mono); color: #1a1a1a; }
svg.intraday { display: block; width: 100%; height: 120px; }
.cause { margin: 6px 0 8px; } .cause .small a { margin-right: 8px; }
table.list.compact td, table.list.compact th { padding: 3px 6px; font-size: 11px; white-space: normal; }
.pred-effect { margin: 4px 0; }
.eff { display: inline-block; min-width: 64px; font: bold 11px Verdana, sans-serif; }
.eff { color: #1a1a1a; } .eff.neutral { color: #555; }
.cal .dots i.macro { background: #16a085; }
/* Talk to Gregory */
.talk-log { flex: 1; min-height: 0; overflow: auto; background: #fff; padding: 10px; display: flex; flex-direction: column; gap: 10px; user-select: text; }
.talk-msg { display: flex; gap: 8px; align-items: flex-start; max-width: 92%; }
.talk-msg.user { align-self: flex-end; }
.talk-msg .ico { width: 32px; height: 32px; flex: none; }
.talk-text { padding: 7px 10px; white-space: pre-wrap; line-height: 1.45; }
.talk-msg.assistant .talk-text { background: #f6f1fb; border: 1px solid #cdbbe3; font: 14px/1.5 Georgia, "Times New Roman", serif; color: #1a1a1a; }
.talk-msg.user .talk-text { background: #eef3fb; border: 1px solid #b8c9e6; }
.talk-text.thinking { color: #777; font-style: italic; }
.talk-bar { display: flex; gap: 6px; padding: 6px 4px 2px; }
.talk-in { flex: 1; resize: none; font: 13px/1.35 Verdana, Arial, sans-serif; }
.talk-bar .col { display: flex; flex-direction: column; gap: 4px; }
.talk-opts { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 2px 6px 6px; font-size: 11px; }
.stonks svg { display: block; width: 100%; height: auto; }
.talk-msg.assistant.laurie .talk-text { background: #f2f3f5; border-color: #b9bec8; font: 13px/1.5 Verdana, Arial, sans-serif; color: #1a1a1a; }
.talk-msg.assistant.monica .talk-text { background: #eef8f8; border-color: #9fcfd2; font: 13.5px/1.5 Tahoma, Verdana, sans-serif; color: #10282b; }
.talk-msg.assistant.gavin .talk-text { background: #f7f8fa; border-color: #c4cad4; font: 13.5px/1.55 "Helvetica Neue", Arial, sans-serif; color: #111; }
.talk-msg.assistant.erlich .talk-text { background: #fff4e8; border-color: #f0b070; font: 14px/1.45 "Trebuchet MS", Verdana, sans-serif; color: #2a1608; }
.dialog-buttons .btn .ico { margin-right: 4px; vertical-align: -3px; }
/* The advisors' debate */
.debate-log { flex: 1; min-height: 0; overflow: auto; background: #fff; padding: 10px; display: flex; flex-direction: column; gap: 8px; user-select: text; }
.debate-round { align-self: center; padding: 1px 10px; margin-top: 4px; font: bold 10px Verdana, sans-serif; color: #555; text-transform: uppercase; letter-spacing: 1px; border-top: 1px solid #ddd; }
.debate-name { font: bold 11px Verdana, sans-serif; margin: 0 0 2px 2px; color: #333; }
.talk-msg.debate-right { align-self: flex-end; flex-direction: row-reverse; }
.talk-msg.debate-right .debate-name { text-align: right; margin-right: 2px; }
.debate-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 3px 8px 5px; font-size: 11px; }
.debate-pick { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.debate-pick .ico { width: 16px; height: 16px; }
.debate-mod { margin-top: 8px; padding: 8px 12px; background: #fffbe6; border: 1px solid #c9b458; }
.debate-mod-text { white-space: pre-wrap; line-height: 1.45; }
.debate-verdict { margin: 8px 0; padding: 4px 8px; background: #fff; border-left: 4px solid #2a0a5e; font-weight: bold; }

/* ---------- Games: Minesweeper, Solitaire, FreeCell (games.js) ---------- */
.wbody.game-body { padding: 0; overflow: auto; background: #c0c0c0; }
.wbody.game-body:has(> .felt) { overflow: hidden; }
.wbody.game-body > .ms { align-self: center; }
/* Minesweeper hugs its field: no theme padding, never scroll bars (the window is re-fitted instead) */
body .window.fit-content .wbody.game-body { padding: 0; margin: 0; overflow: hidden; }
.window.fit-content { min-width: 0; min-height: 0; }
.felt { position: relative; width: 100%; height: 100%; overflow: hidden; background: #008000; user-select: none; touch-action: none; }
.felt.freecell { background: #007b00; }
.felt .pile { position: absolute; width: 71px; height: 96px; border-radius: 4px; }
.felt .pile.found, .felt .pile.cell { border: 1px solid #003f00; box-shadow: inset 1px 1px 0 #00b000; }
.felt.freecell .pile.cell, .felt.freecell .pile.found { border-color: #000; background: rgba(0,0,0,.08); }
.felt .pile.stock { border: 2px solid #00b000; border-radius: 6px; }
.felt .pile.stock::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; border: 6px solid #00b000; }
.fc-king { position: absolute; left: 318px; top: 30px; width: 36px; font: 34px/1 serif; color: #ffe066; text-align: center; text-shadow: 1px 1px 0 #000; }
.card { position: absolute; width: 71px; height: 96px; border-radius: 4px; background: #fff; border: 1px solid #000; box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif; cursor: default; will-change: auto; }
.card.lift { box-shadow: 3px 4px 6px rgba(0,0,0,.35); will-change: transform; }
.card.red { color: #d40000; }
.card.black { color: #000; }
.cd-corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; width: 14px; }
.cd-corner b { font-size: 12px; letter-spacing: -1px; }
.cd-corner i { font-style: normal; font-size: 11px; }
.cd-corner.tl { left: 2px; top: 3px; }
.cd-corner.br { right: 2px; bottom: 3px; transform: rotate(180deg); }
.cd-pips { position: absolute; inset: 9px 12px; }
.cd-pips i { position: absolute; font-style: normal; font-size: 15px; line-height: 1; transform: translate(-50%, -50%); }
.cd-pips i.flip { transform: translate(-50%, -50%) rotate(180deg); }
.cd-ace { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; }
.cd-court { position: absolute; inset: 14px 13px; border: 1px solid currentColor; border-radius: 2px; display: grid; place-items: center; grid-template-rows: 1fr auto 1fr;
  background: repeating-linear-gradient(45deg, rgba(240,200,60,.25) 0 3px, transparent 3px 6px); }
.cd-court b { font: bold 26px/1 Georgia, serif; }
.cd-court i { font-style: normal; font-size: 16px; }
.cd-crown { color: #c9a227; font-size: 14px; align-self: start; }
/* the back: Gregory 98's teal with falling sesame seeds, a thin white frame */
.card.back { background: #fff; }
.card.back > * { display: none; }
.card.back::before { content: ""; position: absolute; inset: 2px; border-radius: 2px;
  background: radial-gradient(ellipse 2px 3.5px at 50% 50%, #f3e2b0 92%, transparent) 0 0 / 10px 10px,
    radial-gradient(ellipse 2px 3.5px at 50% 50%, #f3e2b0 92%, transparent) 5px 5px / 10px 10px, linear-gradient(135deg, #0e6f74, #13858a 50%, #0a4f57);
  box-shadow: inset 0 0 0 1px #0a4f57; }
.cd-celebrate { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5000; }
/* Minesweeper */
.ms { display: inline-flex; flex-direction: column; gap: 6px; padding: 6px; background: #c0c0c0; border: 3px solid; border-color: #fff #808080 #808080 #fff; margin: 0; }
.ms-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 5px; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.ms-led { display: flex; background: #000; padding: 1px; gap: 1px; border: 1px solid; border-color: #808080 #fff #fff #808080; }
.ms-led svg { width: 13px; height: 23px; }
.ms-led path { fill: #3a0000; }
.ms-led path.on { fill: #ff0000; }
.window .ms-face { width: 26px; height: 26px; min-width: 0; min-height: 0; padding: 1px; background: #c0c0c0; border: 2px solid; border-color: #fff #808080 #808080 #fff; }
.ms-face:active { border-color: #808080 #fff #fff #808080; padding: 2px 0 0 2px; }
.ms-face svg { width: 100%; height: 100%; display: block; }
.ms-grid { display: grid; border: 3px solid; border-color: #808080 #fff #fff #808080; touch-action: none; user-select: none; }
.ms-c { width: 16px; height: 16px; box-sizing: border-box; background: #c0c0c0; border: 2px solid; border-color: #fff #808080 #808080 #fff;
  font: bold 12px/12px Tahoma, Verdana, sans-serif; text-align: center; }
.ms-c.down, .ms-c.open { border: 0; border-left: 1px solid #808080; border-top: 1px solid #808080; line-height: 15px; }
.ms-c.flag::before { content: "⚑"; color: #e00000; font-size: 11px; line-height: 12px; }
.ms-c.q::before { content: "?"; }
.ms-c.mine::before, .ms-c.wrong::before { content: "✸"; color: #000; font-size: 12px; }
.ms-c.boom { background: #ff0000; }
.ms-c.wrong { background: linear-gradient(45deg, transparent 45%, #e00000 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #e00000 45% 55%, transparent 55%), #c0c0c0; }
.ms-c.n1 { color: #0000ff; } .ms-c.n2 { color: #008000; } .ms-c.n3 { color: #ff0000; } .ms-c.n4 { color: #000080; }
.ms-c.n5 { color: #800000; } .ms-c.n6 { color: #008080; } .ms-c.n7 { color: #000; } .ms-c.n8 { color: #808080; }
/* the Games folder */
.folder-view { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 18px; padding: 14px; background: #fff; height: 100%; box-sizing: border-box; align-items: flex-start; }
.folder-item { width: 76px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 11px; padding: 3px; cursor: default; }
.folder-item.sel span, .folder-item:focus span { background: #000080; color: #fff; outline: 1px dotted #fff; }
/* 3D Pinball: Silicon Valley (pinball.js) */
.pb { display: flex; height: 100%; background: #000; }
/* the table tilts away from the player in true perspective, hinged at its near edge, like the 3D tables of the 90s */
.pb-stage { flex: 1; min-width: 0; position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
  perspective: 1150px; perspective-origin: 50% 0%; background: radial-gradient(ellipse at 50% 100%, #1b1430, #050308 70%); }
.pb-table { display: block; outline: none; touch-action: none; transform-origin: 50% 100%; transform: rotateX(32deg);
  margin-bottom: 6px; box-shadow: 0 30px 60px rgba(0,0,0,.8); }
.pb-panel { width: 200px; flex: none; display: flex; flex-direction: column; gap: 3px; padding: 10px 10px 8px; background: linear-gradient(#0b0b2a, #000);
  color: #8fd3ff; font: 12px Verdana, sans-serif; border-left: 2px solid #333; }
.pb-logo { text-align: center; padding: 6px 0 12px; border-bottom: 1px solid #23305a; margin-bottom: 6px; }
.pb-logo-3d { font: italic 900 24px/1 Impact, "Arial Black", sans-serif; color: #ffd84a; text-shadow: 2px 2px 0 #b8400b, 0 0 10px rgba(255,216,74,.5); }
.pb-logo-sv { font: bold 12px Verdana; letter-spacing: 3px; color: #7CFFB2; margin-top: 4px; }
.pb-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #5d7bb8; margin-top: 6px; }
.pb-score { font: bold 26px/1.1 "Courier New", monospace; color: #ff3b3b; text-shadow: 0 0 6px rgba(255,59,59,.6); background: #0a0000; padding: 3px 6px; text-align: right; border: 1px solid #400; }
.pb-ball, .pb-rank { font: bold 15px Verdana; color: #fff; }
.pb-rank { color: #7CFFB2; }
.pb-mission { font-size: 11px; color: #c8d6e5; line-height: 1.35; }
.pb-msg { margin-top: 8px; min-height: 64px; padding: 6px; background: #000814; border: 1px solid #23305a; color: #ffd84a; font: bold 12px/1.35 Verdana; }
.pb-keys { margin-top: auto; font-size: 10px; color: #5d7bb8; line-height: 1.4; }
/* Ragdoll Founders (ragdoll.js) */
.rd { display: flex; flex-direction: column; height: 100%; background: #07050c; color: #fff; font: 12px Verdana, sans-serif; }
.rd-hud { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; padding: 6px 10px 5px; background: linear-gradient(#1b0f33, #07050c); border-bottom: 2px solid #3a2466; }
.rd-hud.dim { opacity: .35; }
.rd-side .rd-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.rd-side.p2 .rd-row { flex-direction: row-reverse; }
.rd-name { font: italic 900 14px/1 Impact, "Arial Black", sans-serif; letter-spacing: 1px; color: #ffd84a; text-shadow: 2px 2px 0 #7a1fa2; }
.rd-pips { display: flex; gap: 4px; }
.rd-pips i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #ffd84a; }
.rd-pips i.on { background: #ffd84a; box-shadow: 0 0 6px #ffd84a; }
.rd-bar { position: relative; height: 15px; background: #2a0d12; border: 2px solid #e8e0ff; box-shadow: 0 0 0 1px #000; overflow: hidden; }
.rd-hp, .rd-ghost { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; }
.rd-side.p2 .rd-hp, .rd-side.p2 .rd-ghost { left: auto; right: 0; }
.rd-ghost { background: #ff4f4f; transition: width .5s ease-out; }
.rd-hp { background: linear-gradient(#fff27a, #f2b705 55%, #d98a00); transition: width .08s; }
.rd-hp.low { background: linear-gradient(#ff9b6b, #e5484d 55%, #a51d22); }
.rd-clock { font: bold 26px/1 "Courier New", monospace; color: #7CFFB2; text-shadow: 0 0 8px rgba(124,255,178,.6); min-width: 44px; text-align: center; padding-bottom: 1px; }
.rd-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.rd-view { position: relative; outline: none; }
.rd-view > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rd-ann { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0;
  font: italic 900 calc(64px * var(--rdk, 1))/1 Impact, "Arial Black", sans-serif; letter-spacing: 3px; color: #ffd84a;
  -webkit-text-stroke: 2px #2a0d40; text-shadow: 4px 4px 0 #b8400b, 0 0 24px rgba(255,216,74,.6); }
.rd-ann.show { animation: rd-pop var(--rd-t, 1s) ease-out forwards; }
.rd-ann.fight { color: #fff; text-shadow: 4px 4px 0 #e5484d, 0 0 30px #e5484d; }
.rd-ann.ko { color: #ff4f4f; font-size: calc(110px * var(--rdk, 1)); text-shadow: 5px 5px 0 #2a0d40, 0 0 40px #ff4f4f; }
.rd-ann.small { font-size: calc(30px * var(--rdk, 1)); place-items: start center; padding-top: 8%; }
@keyframes rd-pop { 0% { opacity: 0; transform: scale(2.2); } 12% { opacity: 1; transform: scale(.95); } 20% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.rd-over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(7,5,12,.55); }
.rd-over[hidden] { display: none; }
.rd-menu, .rd-result { background: linear-gradient(160deg, rgba(42,20,80,.94), rgba(10,6,24,.96)); border: 2px solid #c9a6ff; box-shadow: 0 0 0 1px #000, 0 10px 40px rgba(0,0,0,.7);
  padding: 12px 16px; max-width: calc(100% - 24px); max-height: calc(100% - 16px); overflow: auto; box-sizing: border-box; text-align: center; }
.rd-logo { font: italic 900 38px/1 Impact, "Arial Black", sans-serif; letter-spacing: 2px; }
.rd-logo span { color: #fff; -webkit-text-stroke: 1px #2a0d40; text-shadow: 3px 3px 0 #e5484d; }
.rd-logo b { color: #ffd84a; margin-left: 10px; text-shadow: 3px 3px 0 #b8400b; }
.rd-tag { color: #c9a6ff; font-size: 11px; letter-spacing: 1px; margin: 3px 0 8px; }
.rd-modes, .rd-opts, .rd-res-btns { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; align-items: center; }
.rd-btn { font: bold 12px Verdana, sans-serif; color: #e8e0ff; background: linear-gradient(#3a2466, #1d1236); border: 1px solid #c9a6ff; padding: 5px 12px; cursor: pointer; }
.rd-btn:hover { background: linear-gradient(#5a3a96, #2a1a50); }
.rd-btn.on { background: linear-gradient(#ffd84a, #d98a00); color: #2a0d40; border-color: #fff; }
.rd-btn.hot { background: linear-gradient(#ff6b5a, #b8202a); color: #fff; border-color: #ffd0c8; }
.rd-btn.big { font: italic 900 20px/1 Impact, "Arial Black", sans-serif; letter-spacing: 2px; padding: 7px 26px; }
.rd-cards { display: grid; grid-template-columns: repeat(5, 96px); gap: 6px; justify-content: center; margin: 10px 0 6px; }
.rd-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 3px 2px 4px; background: rgba(255,255,255,.05); border: 2px solid #3a2466; color: #fff; cursor: pointer; font: 11px Verdana, sans-serif; }
.rd-card:hover { border-color: #c9a6ff; }
.rd-card.p1 { border-color: #4aa3ff; box-shadow: 0 0 10px #4aa3ff; }
.rd-card.p2 { border-color: #ff4f4f; box-shadow: 0 0 10px #ff4f4f; }
.rd-card.p1.p2 { border-color: #c9a6ff; }
.rd-card b { font-size: 11px; } .rd-card small { font-size: 9px; color: #c9a6ff; line-height: 1.15; min-height: 2.3em; }
.rd-face { width: 80px; height: 88px; }
.rd-card .tag { position: absolute; top: 2px; font: bold italic 10px Verdana; padding: 0 3px; color: #fff; }
.rd-card .t1 { left: 2px; background: #2a78d6; } .rd-card .t2 { right: 2px; background: #e34948; }
.rd-hint { color: #ffd84a; font-size: 11px; min-height: 15px; margin-bottom: 8px; }
.rd-opts label { color: #c9a6ff; font-size: 11px; }
.rd-sel { font: 11px Verdana; background: #1d1236; color: #fff; border: 1px solid #c9a6ff; padding: 2px; }
.rd-res-head { font: italic 900 40px/1 Impact, "Arial Black", sans-serif; color: #ffd84a; text-shadow: 3px 3px 0 #b8400b; letter-spacing: 2px; }
.rd-res-sub { color: #c9a6ff; margin: 4px 0 10px; }
.rd-result blockquote { margin: 0 auto 6px; max-width: 420px; font: italic 15px Georgia, serif; color: #fff; }
.rd-result cite { display: block; font: 11px Verdana; color: #c9a6ff; margin-top: 4px; }
.rd-res-lose { color: #9a8fb8; font-size: 11px; margin: 0 0 12px; }
.rd-unlock { color: #7CFFB2; font-weight: bold; }
.rd-keys { padding: 3px 8px; font-size: 10px; color: #8f7fb8; background: #0d0818; border-top: 1px solid #2a1a50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-touch { display: none; }
@media (pointer: coarse) {
  .rd-keys { display: none; }
  .rd-touch { display: flex; gap: 4px; padding: 4px; justify-content: center; background: #0d0818; }
  .rd-tb { flex: 1; max-width: 64px; height: 44px; font: bold 16px Verdana; color: #fff; background: linear-gradient(#3a2466, #1d1236); border: 1px solid #c9a6ff; touch-action: none; }
  .rd-cards { grid-template-columns: repeat(auto-fill, 84px); }
}
/* Pied Piper 0.0.3: a 2014 startup's idea of software */
.pp { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: #f6f8f5; color: #1d2b20; font: 13px "Helvetica Neue", Arial, sans-serif; box-sizing: border-box; }
.pp-splash { flex: 1; display: grid; place-content: center; text-align: center; gap: 10px; background: radial-gradient(circle at 50% 40%, #e9f7ea, #cfe8d1); }
.pp-splash.pivot { background: radial-gradient(circle at 50% 40%, #fff, #d7efe0); }
.pp-logo { font: 300 46px/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: -1px; color: #2e7d32; }
.pp-logo.small { font-size: 22px; }
.pp-note { display: inline-block; margin-right: 6px; color: #66bb6a; transform: translateY(-2px); }
.pp-tag { font-size: 16px; color: #33553a; }
.pp-fine { font-size: 11px; color: #6b7d6e; max-width: 460px; }
.pp-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid #cfe0d1; padding-bottom: 6px; }
.pp-build { font-size: 11px; color: #7a8a7c; }
.pp-row { display: flex; align-items: center; gap: 8px; }
.pp-kb { display: flex; gap: 2px; }
.window .pp-key { width: 34px; height: 64px; min-width: 0; padding: 0 0 4px; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(#fff, #eef2ee);
  border: 1px solid #8a9a8c; border-radius: 0 0 5px 5px; font: bold 10px Arial; color: #7a8a7c; }
.window .pp-key:active { background: #c8e6c9; transform: translateY(1px); }
.pp-src { font-size: 12px; color: #33553a; min-height: 16px; }
.pp-spec { width: 100%; height: 150px; display: block; background: #06150d; border: 1px solid #1d3b26; image-rendering: pixelated; }
.pp-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 230px; gap: 8px; }
.pp-log { overflow: auto; background: #0e1a12; color: #a5d6a7; font: 11px/1.45 "Courier New", monospace; padding: 6px 8px; border: 1px solid #1d3b26; }
.pp-log .warn { color: #ffd54f; }
.pp-result { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #fff; border: 1px solid #cfe0d1; overflow: auto; }
.pp-verdict { font: bold 14px Arial; }
.pp-verdict.ok { color: #2e7d32; }
.pp-verdict.match { color: #c62828; }
.pp-small { font-size: 11px; color: #5a6b5d; }
.pp-weissman { margin-top: 4px; padding: 6px; text-align: center; background: #e8f5e9; border: 1px solid #a5d6a7; }
.pp-weissman b { display: block; font: 300 32px/1.1 "Helvetica Neue", Arial; color: #1b5e20; }
.pb-marquee { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 4px 16px 5px; text-align: center; white-space: nowrap;
  background: linear-gradient(#2a0f6b, #120630); border: 2px solid #ffd84a; border-radius: 6px; box-shadow: 0 0 16px rgba(255,216,74,.45), inset 0 0 12px rgba(255,120,40,.35); }
.pb-marquee b { display: block; font: italic 900 20px/1 Impact, "Arial Black", sans-serif; letter-spacing: 2px; color: #ffd84a;
  text-shadow: 0 0 8px #ff8a00, 2px 2px 0 #b8400b; }
.pb-marquee span { font: bold 8px Verdana; letter-spacing: 1px; color: #7CFFB2; }
/* What's New and the Change Log (changelog.js) */
.wn { flex: 1; min-height: 0; display: flex; background: #fff; }
.wn-side { width: 130px; flex: none; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 12px; color: #fff;
  background: linear-gradient(170deg, #2a0a5e, #7b1fa2 45%, #e0457b 80%, #ffb347); }
.wn-logo { font: 26px/1 Georgia, serif; } .wn-logo b { display: block; font-family: var(--font); font-size: 20px; } .wn-logo i { font-style: italic; color: #ffd166; }
.wn-ver { font-size: 11px; opacity: .85; }
.wn-main { flex: 1; min-width: 0; overflow: auto; padding: 14px 18px; user-select: text; }
.wn-main h1 { font: bold 18px Georgia, serif; margin: 0 0 4px; }
.wn-lead { color: #555; margin: 0 0 10px; }
.wn-rel { margin-bottom: 14px; }
.wn-rel-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid #ddd; padding-bottom: 3px; margin-bottom: 4px; }
.wn-rel-head span { font-weight: bold; }
.wn-rel-head small { color: #777; margin-left: auto; }
.wn-rel ul { margin: 4px 0 0; padding-left: 18px; }
.wn-rel li { margin-bottom: 5px; line-height: 1.4; }
.wn-buttons { align-items: center; }
.wn-buttons label.check { margin: 0 auto 0 0; }
.cl { flex: 1; min-height: 0; display: flex; gap: 6px; padding: 4px; }
.cl-left { width: 230px; flex: none; display: flex; flex-direction: column; gap: 6px; }
.cl-list { flex: 1; overflow: auto; list-style: none; margin: 0; padding: 1px; background: #fff; }
.cl-list li { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 6px; padding: 4px 6px; cursor: default; }
.cl-list li b { grid-row: 1 / 3; align-self: center; }
.cl-list li small { color: #777; }
.cl-list li.sel { background: var(--sel); color: #fff; } .cl-list li.sel small { color: #ddd; }
.cl-left .btn { align-self: flex-start; }
.cl-detail { flex: 1; }
@media (max-width: 700px) { .cl { flex-direction: column; } .cl-left { width: auto; max-height: 40%; } .wn-side { display: none; } }
/* Gregory BBS: the theme's shell (terminal.js) */
.wbody.term-body { padding: 0; }
.term { flex: 1; min-height: 0; overflow: auto; padding: 6px 8px; position: relative; user-select: text; cursor: text;
  font: 13px/1.3 "Lucida Console", "DejaVu Sans Mono", Consolas, monospace; background: #000; color: #c0c0c0; }
.term .tl { white-space: pre-wrap; word-break: break-word; min-height: 1.3em; }
.term .tl b { font-weight: bold; }
.term-line { display: flex; white-space: pre; }
.term-prompt { flex: none; }
.term-in { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; caret-color: currentColor; }
.term-measure { position: absolute; visibility: hidden; white-space: pre; pointer-events: none; }
.term .ok { color: #55ff55; } .term .err { color: #ff6b6b; } .term .hl { color: #ffffff; } .term .dim { color: #8a8a8a; }
.term .gregory b { color: #ffd166; } .term .laurie b { color: #e9a8ff; } .term .moderator b { color: #7ae6dc; }
.term .monica b { color: #7fd8e0; } .term .gavin b { color: #d6dde8; } .term .erlich b { color: #ffa94d; }
.term.t-dos { font: 15px/1.25 "Perfect DOS VGA 437", "Px437 IBM VGA8", "Lucida Console", "DejaVu Sans Mono", monospace; }
.term.t-cmd { font: 13px/1.3 Consolas, "Lucida Console", "DejaVu Sans Mono", monospace; }
.term.t-mac, .term.t-telnet { background: #fff; color: #000; font: 12px/1.35 Monaco, Menlo, "DejaVu Sans Mono", monospace; }
.term.t-mac .ok, .term.t-telnet .ok { color: #1a7a1a; } .term.t-mac .err, .term.t-telnet .err { color: #c0161c; }
.term.t-mac .hl, .term.t-telnet .hl { color: #000; font-weight: bold; } .term.t-mac .dim, .term.t-telnet .dim { color: #777; }
.term.t-mac .gregory b, .term.t-telnet .gregory b { color: #a06000; } .term.t-mac .laurie b, .term.t-telnet .laurie b { color: #8030a0; } .term.t-mac .moderator b, .term.t-telnet .moderator b { color: #00707a; }
.term.t-mac .monica b, .term.t-telnet .monica b { color: #0f6f78; } .term.t-mac .gavin b, .term.t-telnet .gavin b { color: #3a4250; } .term.t-mac .erlich b, .term.t-telnet .erlich b { color: #b35a00; }
.term.t-telnet { font-size: 11px; }
.term.t-gnome { background: #2e3436; color: #eeeeec; font: 13px/1.3 "DejaVu Sans Mono", monospace; }
.term.t-gnome .ok { color: #8ae234; } .term.t-gnome .err { color: #ef2929; } .term.t-gnome .dim { color: #888a85; } .term.t-gnome .hl { color: #fce94f; }
/* DOS: full-screen text mode */
.window.term-full { position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; z-index: 99990 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; }
.window.term-full > :not(.wbody) { display: none !important; }
.window.term-full .wbody { margin: 0 !important; border: 0 !important; padding: 0 !important; }
.window.term-full .term { padding: 2vh 3vw; font-size: clamp(14px, 1.15vw, 22px); }
body.term-full-on #taskbar, body.term-full-on #macbar, body.term-full-on #gnomebar, body.term-full-on #dock { display: none; }
/* DOS mode: full screen always looks like a PC in text mode, whichever shell you dropped in from */
.term.t-dosmode { background: #000 !important; color: #c0c0c0 !important; font-family: "Perfect DOS VGA 437", "Px437 IBM VGA8", "Lucida Console", "DejaVu Sans Mono", monospace !important; }
.term.t-dosmode .ok { color: #55ff55; } .term.t-dosmode .err { color: #ff5555; } .term.t-dosmode .hl { color: #fff; } .term.t-dosmode .dim { color: #808080; }
.wn-rel li.wn-sub { list-style: none; margin: 12px 0 4px -18px; font: bold 13px Georgia, serif; color: #4b1d6e; }
.wn-rel li.wn-sub:first-child { margin-top: 2px; }

/* ---------- Start menu: flyouts, All Programs (app.js renderStartMenu) ---------- */
.ctxmenu .mchk .ico { width: 16px; height: 16px; display: block; margin: 0 auto; }
.ctxmenu .mi:has(.mchk .ico) { grid-template-columns: 22px 1fr auto; padding-top: 2px; padding-bottom: 2px; }
#startitems li.sm-fly .sm-flylbl { flex: 1; }
#startitems li .sm-arrow { font-size: 9px; margin-left: auto; }
#startitems li.sm-fly.open { background: var(--sel); color: var(--sel-text); }
#startitems li.sm-head2 { height: auto; padding: 4px 8px 2px; font-weight: bold; color: #1e395b; cursor: default; }
#startitems li.sm-head2:hover { background: none; color: #1e395b; }
#startitems li.sm-none { height: auto; padding: 8px; color: #666; font-style: italic; }
#startitems li.sm-none:hover { background: none; color: #666; }
/* XP: All Programs at the foot of the left column, with its green arrow */
body[data-family="xp"] #startitems li.sm-all { justify-content: center; font-weight: bold; gap: 8px; }
body[data-family="xp"] #startitems li.sm-all .ico { display: none; }
body[data-family="xp"] #startitems li.sm-all .sm-flylbl { flex: none; }
body[data-family="xp"] #startitems li.sm-all .sm-arrow { margin-left: 0; width: 18px; height: 18px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(#5fd35a, #2c9a24); border: 1px solid #1d6e17; font-size: 10px; }
body[data-family="xp"] #startitems li.sep.sm-allsep { margin-top: auto; }
body[data-family="xp"] #startitems { display: flex; flex-direction: column; }
/* Vista/7: All Programs and Back, folders open in place */
body.aero #startitems { display: flex; flex-direction: column; min-height: 380px; }
body.aero #startitems li.sep.sm-allsep { margin-top: auto; }
body.aero #startitems li.sm-all { height: 26px; gap: 10px; font-weight: normal; }
body.aero #startitems li.sm-all .sm-arrow { margin-left: 0; order: -1; color: #1e395b; }
body.aero #startitems li.sm-folder, body.aero #startitems li.sm-sub { height: 24px; padding: 1px 8px; gap: 6px; }
body.aero #startitems li.sm-folder .ico, body.aero #startitems li.sm-sub .ico { width: 16px; height: 16px; }
body.aero #startitems li.sm-sub { padding-left: 26px; }

/* Network (administrator) */
.net { display: flex; flex-direction: column; gap: 4px; padding: 4px; min-height: 0; flex: 1; }
.net-summary { display: flex; align-items: center; gap: 4px; padding: 2px 2px 4px; }
.net-page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.net-table { flex: 1 1 140px; min-height: 100px; overflow: auto; background: #fff; }
.net-table.tall { max-height: none; flex: 1; }
.net-table table.list { table-layout: auto; }
.net-table td.num { text-align: right; }
.net-table .mono, .net-detail .mono { font-family: "Lucida Console", Consolas, monospace; font-size: 11px; }
.net-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #aaa; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.net-dot.on { background: #2fbf4a; box-shadow: 0 0 4px #4fe36a, inset 0 0 0 1px rgba(0,0,0,.3); }
.net-table tr.net-blocked td { color: #a00; text-decoration: line-through; }
.net-table tr.net-err td { color: #a33; }
.net-warn { color: #b00020; font-weight: bold; }
.net-detail .kv { grid-template-columns: 90px 1fr; }
.net-inflight { padding: 3px 6px; background: #fffbe0; border: 1px solid #e0d080; }
.net-hint { margin: 4px 2px; }
.net-say { min-height: 14px; }

/* log-on: links, notes, the sign-up form's bot trap */
.logon-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.linkbtn { border: 0; background: none; padding: 0; color: #0000ee; text-decoration: underline; cursor: pointer; font: inherit; }
.linkbtn:hover { color: #551a8b; }
.logon-note:empty { display: none; }
.logon-note { margin: 8px 0 0; padding: 5px 7px; border: 1px solid #b0b0b0; background: #fffbe0; }
.logon-note.bad { background: #ffe8e8; border-color: #d89a9a; }
.logon-hint { margin: 8px 0 0; font-size: 11px; color: #444; }
.field.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.btn.mini { min-width: 0; padding: 0 6px; height: 18px; }

/* Terms and Privacy, Privacy Settings */
.policy-scroll { overflow: auto; background: #fff; padding: 4px 14px 10px; flex: 1; min-height: 0; }
.policy { font: 13px/1.5 Georgia, serif; color: #111; max-width: 640px; }
.policy h2 { font-size: 18px; margin: 10px 0 2px; } .policy h3 { font-size: 14px; margin: 14px 0 4px; font-family: var(--font); }
.policy p { margin: 0 0 8px; } .policy-ver, .policy-end { color: #666; }
.logon-policy { max-height: 300px; }
.logon-policy.small-policy { max-height: 150px; }
.logon-policy .policy { font-size: 12px; } .logon-policy .policy h2 { font-size: 15px; }
.pv-accept { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 12px; }
.pv-accept.dim { color: #777; }
.pv-row { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; }
.pv-row input { margin-top: 3px; flex: none; }
.pv-held { margin: 4px 0; }

.cm-consent { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 12px; text-align: center; background: rgba(20,0,40,.88); color: #fff; font: 12px var(--font); z-index: 2; }
.cm-consent p { margin: 0 0 4px; }
.cm-screen .cinco-body { position: relative; }

/* Sign in with Google (Google's button guidelines: white, the G, Roboto-ish) */
.gsi-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gsi { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px 0 10px; border: 1px solid #747775; border-radius: 4px;
  background: #fff; color: #1f1f1f; font: 500 14px Roboto, "Segoe UI", Arial, sans-serif; text-decoration: none; cursor: pointer; }
.gsi:hover { background: #f7f8f8; box-shadow: 0 1px 2px rgba(60,64,67,.3); }
.gsi-g { display: inline-flex; }

/* ---------- The Leaderboard and the advisors' funds (funds.js) ---------- */
.lb { display: flex; flex-direction: column; gap: 8px; }
.lb-head h2, .fund-head h2 { margin: 0 0 2px; font-family: Georgia, serif; }
.lb-head p { margin: 0; }
.lb-chart svg { width: 100%; height: 240px; display: block; }
.lb table.list.lb-table, .fund table.list { table-layout: auto; min-width: 620px; }
.lb table.list.compact td, .lb table.list.compact th, .fund table.list.compact td, .fund table.list.compact th { white-space: nowrap; }
.fund table.list.compact tr.fund-note td { white-space: normal; }
.lb .tablewrap, .fund .tablewrap { overflow-x: auto; }
.fund-tag { margin-left: 6px; font-weight: normal; font-size: 10px; color: #666; }
tr.sel .fund-tag { color: #ddd; }
.lb-table td .ico { width: 16px; height: 16px; vertical-align: -3px; }
.lb-row { cursor: pointer; }
.lb-swatch { display: inline-block; width: 4px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.lb-link { display: flex; justify-content: flex-end; margin: 4px 0; }
.lb-link .btn .ico { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.fund { display: flex; flex-direction: column; gap: 8px; }
.fund-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fund-head > div:nth-child(2) { flex: 1; min-width: 200px; }
.fund-figs { display: flex; gap: 16px; flex-wrap: wrap; }
.fund-figs div { display: flex; flex-direction: column; align-items: flex-end; }
.fund-figs small { color: #555; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.fund-figs b { font: bold 15px Georgia, serif; }
.fund-figs b.pos, .fund-head .pos { color: var(--good); } .fund-figs b.neg { color: #b00020; }
.fund-rules { margin: 2px 0; padding-left: 18px; line-height: 1.45; }
.fund-note td { background: #fafafa; white-space: normal; }
.fund-note .talk-msg { margin: 4px 0; max-width: none; }
.fund table tr:not(.fund-note) { cursor: pointer; }

/* Report a Bug (bugreport.js) */
.bug .bug-text { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }
.bug .kv .field { width: 100%; box-sizing: border-box; }
.bug-shot { min-height: 70px; padding: 6px; display: flex; align-items: flex-start; gap: 8px; background: #fff; }
.bug-shot img { max-width: 70%; max-height: 180px; border: 1px solid #888; }
.bug-peek { max-height: 180px; overflow: auto; font: 11px/1.35 monospace; padding: 6px; background: #fff; white-space: pre-wrap; word-break: break-all; }
.bug-say { min-height: 16px; margin-top: 6px; }
.fb-kinds { gap: 18px; margin: 2px 0 8px; }
.fb { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; gap: 6px; }
.fb-bar { align-items: center; gap: 6px; }
.fb-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px; }
.fb-list { overflow: auto; background: #fff; }
.fb-list tr.fb-new td { font-weight: bold; }
.fb-detail { overflow: auto; padding-right: 2px; }
.fb-head { margin: 2px 0 6px; font-size: 1.1em; }
.fb-words { background: #fff; padding: 6px 8px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; margin-bottom: 6px; }
.fb-untrusted { margin-top: 6px; }
.fb-shot { display: block; max-width: 100%; max-height: 260px; border: 1px solid #888; margin: 4px 0 8px; }
.fb-diag { margin: 6px 0; }
.fb-diag summary { cursor: pointer; }
.chip.fb-bug { background: #fde2e1; color: #8a1c1c; }
.chip.fb-idea { background: #fff4c2; color: #6b5300; }
@media (max-width: 700px) { .fb-split { grid-template-columns: 1fr; grid-template-rows: 40% 1fr; } }

/* "A new Gregory is ready" (Updates in changelog.js): top right, clear of Sesame (bottom right) and the taskbar;
   on the Macs below the menu bar and left of the right-aligned icon column; under GNOME's top panel on Ubuntu */
.update-toast { position: fixed; right: 12px; top: 12px; z-index: 99990; width: 290px; padding: 8px 10px 10px; background: #fffbe6;
  font-size: 12px; box-shadow: 2px 3px 10px rgba(0,0,0,.35); animation: update-in .35s ease-out; }
.update-head { display: flex; align-items: center; gap: 6px; }
.update-head .ico { width: 20px; height: 20px; }
.update-head b { flex: 1; font: bold 13px Georgia, serif; }
.update-x { border: 0; background: none; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; color: #555; }
.update-toast p { margin: 6px 0 8px; }
.update-btns { display: flex; gap: 6px; justify-content: flex-end; }
body[data-family="aqua"] .update-toast, body[data-family="os9"] .update-toast { top: 32px; right: 104px; border-radius: 6px; }
body[data-family="win7"] .update-toast, body[data-family="vista"] .update-toast { border-radius: 4px; }
body[data-family="ubuntu"] .update-toast { top: 34px; }
body[data-family="vista"] .update-toast { right: 182px; }   /* left of the Sidebar gadgets */
@keyframes update-in { from { transform: translateY(-12px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .update-toast { animation: none; } }
@media (max-width: 480px) { .update-toast { left: 8px; right: 8px; width: auto; } }

/* My Funds (myfunds.js) */
.pitch-who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 10px; }
.pitch-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: transparent; border: 1px solid transparent; cursor: pointer; font: inherit; border-radius: 3px; }
.pitch-pick small { font-size: 10px; color: #555; text-align: center; }
.pitch-pick:hover { border-color: #aaa; }
.pitch-pick.on { border-color: var(--sel, #000080); background: rgba(0, 0, 128, .08); }
.fund-tag.idea { background: #ffd34d; color: #3a2a00; border: 1px solid #8a6400; padding: 0 4px; border-radius: 2px; }
.pitch-link { white-space: nowrap; }
.lb-link { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 520px) { .pitch-who { grid-template-columns: repeat(2, 1fr); } }
/* the tray's "update available" icon (changelog.js Updates): stays until you refresh */
.tray-update { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 4px; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe27a, #f0a020); color: #5a3000; font: bold 13px/1 Arial, sans-serif; cursor: pointer; animation: tray-update 1.6s ease-in-out infinite; }
.tray-update:hover { filter: brightness(1.1); }
@keyframes tray-update { 50% { box-shadow: 0 0 0 4px rgba(240,160,32,.35); } }
@media (prefers-reduced-motion: reduce) { .tray-update { animation: none; } }

/* By the Numbers (engine.js) */
.eng .chip.eng-live { background: #1e7b34; color: #fff; }
.eng .chip.eng-fragile { background: #b36b00; color: #fff; }
.eng .chip.eng-noise { background: #8a8a8a; color: #fff; }
.eng .chip.eng-insufficient { background: #d8d8d8; color: #333; }
.eng .tabpage { padding: 8px 0; }
.eng .eng-rates tr[title], .eng .eng-rates tr { cursor: pointer; }
.eng .pos { color: #1e6b2f; } .eng .neg { color: #b3261e; }
.eng .eng-third { display: inline-block; margin: 0 8px 2px 0; white-space: nowrap; }
.eng .eng-real table th { text-align: left; white-space: nowrap; vertical-align: top; }
.eng .eng-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 720px) { .eng .eng-cols { grid-template-columns: 1fr; } }
.eng .eng-relbox svg { width: 100%; height: auto; display: block; }
.eng .eng-coefs { display: grid; gap: 2px; margin-top: 4px; font-size: 11px; }
.eng .eng-coef { display: grid; grid-template-columns: 9em 1fr 4em; gap: 6px; align-items: center; }
.eng .eng-bar { height: 8px; background: #f0f0f0; position: relative; }
.eng .eng-bar i { position: absolute; left: 0; top: 0; bottom: 0; }
.eng .eng-bar i.up { background: #2a78d6; } .eng .eng-bar i.down { background: #e34948; }
.eng .eng-ledger { max-height: 360px; overflow: auto; }
.eng .eng-p { display: inline-block; width: 60px; height: 8px; background: #eee; vertical-align: middle; position: relative; }
.eng .eng-p i { position: absolute; left: 0; top: 0; bottom: 0; background: #7b2fbe; }
.eng .eng-voices td.num { white-space: nowrap; }
.eng .eng-voices td, .eng .eng-rates td:first-child, .eng .eng-real td { white-space: normal; overflow: visible; text-overflow: clip; }

/* two-step verification (security.js) */
.sec-key { font: 600 15px/1.4 "Courier New", monospace; word-spacing: 2px; padding: 8px 10px; background: #fff; user-select: all; word-break: normal; }
.sec-code { font: 16px "Courier New", monospace; letter-spacing: 3px; width: 9em; }
.sec-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; padding: 10px 14px; background: #fff; user-select: all; }
.sec-codes code { font: 15px "Courier New", monospace; }
.sec-kv { align-items: center; }
.sec-row { gap: 8px; align-items: center; flex-wrap: nowrap; }
.wn-badge { font: bold 10px var(--font); font-style: normal; color: #fff; background: #c0392b; border-radius: 3px; padding: 1px 5px; }
.wn-rel.wn-new .wn-rel-head { border-bottom-color: #c0392b; }
.sec-scan { display: flex; gap: 14px; align-items: flex-start; }
.sec-scan > div { flex: 1; min-width: 0; }
.sec-qr { flex: none; image-rendering: pixelated; border: 1px solid #999; }
.sec-scan .sec-key { font-size: 13px; }
@media (max-width: 520px) { .sec-scan { flex-direction: column; align-items: center; } }

/* Control Panel (controlpanel.js): a Win98 web-view side panel + grouped large icons */
.cp { flex: 1; min-height: 0; display: flex; background: #fff; }
.cp-side { width: 170px; flex: none; padding: 14px 12px; color: #fff; background: linear-gradient(180deg, #2a0a5e, #7b1fa2 70%, #e0457b); overflow: auto; }
.cp-side h2 { font: bold 17px Georgia, serif; margin: 6px 0 10px; }
.cp-tip { font-size: 12px; line-height: 1.4; }
.cp-tip b { display: block; margin-bottom: 3px; }
.cp-tip p { margin: 0; opacity: .92; }
.cp-main { flex: 1; min-width: 0; overflow: auto; padding: 8px 14px 14px; }
.cp-main h3 { font: bold 13px Georgia, serif; color: #4b1d6e; border-bottom: 1px solid #ddd; margin: 10px 0 6px; padding-bottom: 3px; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
.cp-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: none; border: 1px solid transparent; font: inherit; color: inherit; cursor: pointer; text-align: center; }
.cp-item:hover, .cp-item:focus-visible { border: 1px dotted #555; background: #eef3ff; }
.cp-item span { font-size: 12px; line-height: 1.2; }
.cp-check { display: block; margin: 4px 0; }
@media (max-width: 560px) { .cp-side { display: none; } }
.wire-how p { margin: 4px 0 6px; }
.wire-cmd { font: 13px "Courier New", monospace; padding: 5px 8px; background: #fff; user-select: all; word-break: break-all; flex: 1; }
.wire-row { gap: 6px; align-items: center; flex-wrap: nowrap; margin-bottom: 4px; }
.wire-warn { color: #8a4b00; }