/* Recovery Mode · "Blue switch" theme mock-up (14 Oct 2026). Loaded after v7.css.
   Matches the blue cover: bright blue ground with a fine grid and a few darker squares, a navy switch,
   cream type, a yellow knob as the only warm accent. Navy is used for the dark "inside" moments (cards, the
   puzzle band, the sign-up) the way the cover uses it for the switch. */
:root{
  --B-blue:#2452C8; --B-blue-2:#2049B4; --B-navy:#14213D; --B-navy-2:#1A2A4E; --B-cream:#F4ECDC; --B-sun:#F5B83D;
  --navy:var(--B-blue); --navy-2:var(--B-blue-2); --bg:var(--B-blue); --surface:var(--B-blue-2); --surface-2:var(--B-blue-2);
  --cobalt:var(--B-navy); --cobalt-2:#0F1A33; --ink-2:#E3E9F8; --mute7:#C9D5F2; --muted:#C9D5F2;
  --line:rgba(244,236,220,.22); --line-2:rgba(244,236,220,.55);
  --navy-ink:var(--B-cream); --navy-muted:#C9D5F2; --hero-ink:var(--B-cream); --hero-muted:#D3DDF5;
  --depth-edge:#0B1730;
}
/* the cover's grid: 62 px cells, faint lines, a few darker squares (an SVG tile, so it costs nothing to draw) */
.h7,.chg,.lv,#inside,#hints.band,.fp,#faq,footer,.top,.buybar{
  background-color:var(--B-blue);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='496' height='496'><rect x='62' y='124' width='62' height='62' fill='%232049B4'/><rect x='310' y='0' width='62' height='62' fill='%232049B4'/><rect x='434' y='310' width='62' height='62' fill='%232049B4'/><rect x='186' y='372' width='62' height='62' fill='%232049B4'/><g stroke='%23F4ECDC' stroke-opacity='.09' stroke-width='2'><path d='M0 0V496M62 0V496M124 0V496M186 0V496M248 0V496M310 0V496M372 0V496M434 0V496M0 0H496M0 62H496M0 124H496M0 186H496M0 248H496M0 310H496M0 372H496M0 434H496'/></g></svg>");
  background-size:496px 496px}
.top,.buybar{background-image:none}
.top{border-bottom:1px solid rgba(244,236,220,.18)}
footer{background-image:none;background-color:var(--B-navy)}
/* the hero: the switch from the cover becomes the main call to action shape */
.b-sq{background:var(--B-sun)}
.b-half{background:var(--B-navy)}
.b-bars i{background:var(--B-cream)}
.b-bars i:first-child{background:var(--B-sun)}
.btn-sun{background:var(--B-sun);color:var(--B-navy)}
.h7-cta .btn-sun{box-shadow:0 0 0 6px var(--B-navy);border-radius:999px}
.kt .w-bor{color:var(--B-sun)}
/* dark moments in navy, like the switch on the cover */
.chg-bat{background:rgba(20,33,61,.35)}
.chg-bat .c3{background:var(--B-navy)}
.sel7{background:var(--B-navy);box-shadow:none}
.lvp-FULL{background:var(--B-navy)}
.lvp-shot{box-shadow:12px 12px 0 rgba(11,23,48,.85)}
.feat article{background:var(--B-navy)}
#try{background:var(--B-navy)}
#try .tally,#try .log .row,#try .win{background:var(--B-navy-2)}
.g7{background:var(--B-cream)}
#hints .phone{box-shadow:14px 14px 0 var(--B-navy)}
.close{background:var(--B-navy);background-image:none}
.signup{background:var(--B-blue);box-shadow:14px 14px 0 #0B1730}
.signup input[type=email]{background:rgba(11,23,48,.35)}
.mq{background:var(--B-sun)}
/* section rules in cream on blue, as before */
.fp-grid article{border-bottom-color:rgba(244,236,220,.22)}
.fp-grid article:nth-child(odd){border-right-color:rgba(244,236,220,.22)}
.sh-s{background:var(--B-navy)}
img[src$="cover-toggle.webp"]{outline:0}