/* SiKick v4, light mode: the same page on warm white. Loaded last (after v4.css) with /v4?mode=light.
   Lime is too light to read as text on white, so text accents use a deeper green; lime stays as a fill with dark text.
   The silver turns slate. The ASCII art gets its own dark-on-light shades (palette.js "limelight"). */
:root {
  --bg: #f5f5f0; --bg1: #ffffff; --glass: rgba(255, 255, 255, .72);
  --ink: #101317; --ink2: #4e545d; --ink3: #8b919a; --ln: rgba(16, 19, 23, .08); --ln2: rgba(16, 19, 23, .14);
  --warm: #4a8a00; --cold: #66707f; --ok: #3f9a2f; --lime: #c6ff3d;
  --card: #ffffff; --shadow: 0 1px 2px rgba(16, 19, 23, .04), 0 12px 32px -18px rgba(16, 19, 23, .18);
}
body { background: radial-gradient(1100px 700px at 92% -8%, rgba(102, 112, 127, .10), transparent 62%), radial-gradient(900px 640px at -12% 34%, rgba(198, 255, 61, .14), transparent 60%), var(--bg); color: var(--ink); }
::selection { background: var(--lime); color: #0b0d07; }

/* bar */
header { box-shadow: 0 10px 30px -18px rgba(16, 19, 23, .35); }
header nav a:hover { background: rgba(16, 19, 23, .06); }
.login { background: var(--ink); color: #fff; } .login:hover { background: #000; color: #fff; box-shadow: 0 0 0 4px rgba(16, 19, 23, .08); }

/* buttons: lime fill, dark text */
.btn { background: #fff; border-color: var(--ln2); }
.btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.w, .btn.w:hover { background: var(--lime); color: #0b0d07; border-color: #b4ef2a; box-shadow: 0 10px 30px -14px rgba(120, 170, 0, .55); }
.btn.w:hover { background: #d4ff66; }

/* headings and numbers */
.s-num { -webkit-text-stroke: 1px rgba(16, 19, 23, .22); }
.s-name b { text-shadow: none; }
.fig small { color: var(--ink3); }

/* panels become white cards with a soft shadow */
.duo, .sig, .cap, .steps3 > div, .con, #sig-feed .msg, .lane .card, .term { background: var(--card) !important; box-shadow: var(--shadow); }
.duo .hd { background: #fafaf7; }
.duo > div { border-color: var(--ln) !important; }
.sig-mid { background: radial-gradient(closest-side, rgba(102, 112, 127, .08), transparent); }
.con:hover { background: #fff !important; }
.con .lg { background: var(--ink); } .con.dim .lg { background: var(--ink3); }
#sig-feed .msg.skip.done { opacity: .5; }
#sig-feed .msg:not(.skip).done { border-color: rgba(74, 138, 0, .35); }
.card .acts i { background: var(--lime); color: #0b0d07; }
.card .acts i.ghost { background: transparent; color: var(--ink2); }
.steps3 b { background: var(--lime); color: #0b0d07; }
.sig-cap i, .s-name b { color: var(--warm); }
.sig-cap i { background: var(--warm); box-shadow: none; }
.term b { color: var(--ok); }
.caret { background: var(--ink); }
#prog { mix-blend-mode: normal; color: var(--ink3); }
footer a { border-bottom-color: var(--ln); }