/* The one stylesheet. Every published page links this file and adds nothing of
   its own -- if two pages look different, they differ in markup, not in CSS.
   Generated pages must never inline a rule; put it here.
     index.html   the three edges together
     orb.html     the Asia opening range
     pdfade.html  the gold previous-day fade
     nqfade.html  the NQ range fade
*/
:root{
  --bg:#faf8f4; --panel:#fff; --panel2:#f5f2ec; --ink:#17150f; --ink2:#413c33;
  --mut:#7d766c; --line:#e6e0d4; --acc:#8a6d3b; --acc2:#b08d4f;
  --pos:#12694a; --posbg:#e8f2ec; --neg:#a8352a; --negbg:#faeae7;
  --warn:#8a5a00; --warnbg:#fdf4e3;
  --r:14px; --sh:0 1px 2px rgba(23,21,15,.05),0 8px 24px -12px rgba(23,21,15,.14);
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#100f0d; --panel:#191713; --panel2:#211e19; --ink:#f3efe7; --ink2:#cdc6ba;
  --mut:#948c80; --line:#2b2722; --acc:#c9a86a; --acc2:#dcc08a;
  --pos:#4fbe8b; --posbg:#12251c; --neg:#e0806f; --negbg:#2a1714;
  --warn:#d9ab52; --warnbg:#241d10;
  --sh:0 1px 2px rgba(0,0,0,.4),0 8px 28px -14px rgba(0,0,0,.7);
}}
:root[data-theme=dark]{
  --bg:#100f0d; --panel:#191713; --panel2:#211e19; --ink:#f3efe7; --ink2:#cdc6ba;
  --mut:#948c80; --line:#2b2722; --acc:#c9a86a; --acc2:#dcc08a;
  --pos:#4fbe8b; --posbg:#12251c; --neg:#e0806f; --negbg:#2a1714;
  --warn:#d9ab52; --warnbg:#241d10;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.62 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px 110px}

/* ---------- hero ---------- */
header{padding:66px 0 30px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:650;
  letter-spacing:.15em;text-transform:uppercase;color:var(--acc);
  background:color-mix(in srgb,var(--acc) 11%,transparent);
  padding:7px 14px;border-radius:100px;margin-bottom:22px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--pos);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pos) 25%,transparent)}
h1{font-size:clamp(2.3rem,5.2vw,3.5rem);line-height:1.03;margin:0 0 16px;
  letter-spacing:-.032em;font-weight:680}
h1 em{font-style:normal;color:var(--acc);}
.lede{font-size:1.14rem;color:var(--ink2);max-width:60ch;margin:0}

/* ---------- kpi ---------- */
.kpi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px;margin:36px 0 8px}
/* ten cards divide evenly by 5 and by 2, so neither layout leaves a stranded
   tile on its own row; 3 across would. */
@media (max-width:1240px){.kpi{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px) {.kpi{grid-template-columns:1fr}}
.k{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 17px;box-shadow:var(--sh);min-width:0}
.k .l{font-size:10.5px;font-weight:640;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:9px}
.k .v{font-size:clamp(1.45rem,2.4vw,1.8rem);font-weight:670;letter-spacing:-.03em;line-height:1}
.k .n{font-size:12px;color:var(--mut);margin-top:7px;line-height:1.4}
.k.big{background:linear-gradient(150deg,color-mix(in srgb,var(--pos) 13%,var(--panel)),var(--panel))}

/* ---------- sections ---------- */
section{margin-top:72px;scroll-margin-top:20px}
h2{font-size:1.62rem;letter-spacing:-.022em;margin:0 0 8px;font-weight:670;display:flex;align-items:baseline;gap:13px}
h2 .num{font-size:.72em;color:var(--acc);font-variant-numeric:tabular-nums;font-weight:640}
.sub{color:var(--mut);margin:0 0 26px;max-width:66ch;font-size:1.02rem}
h3{font-size:1.06rem;margin:34px 0 10px;font-weight:650}
p{margin:0 0 15px;color:var(--ink2)}
p strong,li strong{color:var(--ink);font-weight:640}
a{color:var(--acc)}

/* ---------- toc ---------- */
/* The in-page section index. Scoped to .toc: an unscoped `nav` also matched
   the site bar below, which then inherited this panel background, border and
   shadow and rendered as a broken-looking slab. */
nav.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:8px;margin:34px 0 0;box-shadow:var(--sh);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:4px}
nav.toc a{display:block;padding:10px 13px;border-radius:9px;text-decoration:none;
  color:var(--ink2);font-size:13.5px;font-weight:520;transition:.14s}
nav.toc a:hover{background:var(--panel2);color:var(--ink)}
nav.toc a span{color:var(--acc);font-weight:640;margin-right:7px;font-variant-numeric:tabular-nums}

/* ---------- cards / callouts ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;box-shadow:var(--sh);margin:22px 0}
.note{border-left:3px solid var(--warn);background:var(--warnbg);border-radius:0 var(--r) var(--r) 0;
  padding:18px 22px;margin:22px 0}
.note .t{font-size:10.5px;font-weight:660;letter-spacing:.1em;text-transform:uppercase;color:var(--warn);margin-bottom:9px}
.note p:last-child,.card p:last-child{margin-bottom:0}
.good{border-left:3px solid var(--pos);background:var(--posbg);border-radius:0 var(--r) var(--r) 0;padding:18px 22px;margin:22px 0}
.good .t{font-size:10.5px;font-weight:660;letter-spacing:.1em;text-transform:uppercase;color:var(--pos);margin-bottom:9px}

/* ---------- rules list ---------- */
ol.steps{list-style:none;counter-reset:s;padding:0;margin:22px 0}
ol.steps li{counter-increment:s;position:relative;padding:15px 20px 15px 62px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:10px;box-shadow:var(--sh)}
ol.steps li::before{content:counter(s);position:absolute;left:18px;top:14px;
  width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--acc) 15%,transparent);
  color:var(--acc);font-weight:680;font-size:14px;display:grid;place-items:center}
ol.steps b{display:block;color:var(--ink);margin-bottom:2px}
ol.steps span{color:var(--mut);font-size:14.5px}
ul{margin:0 0 15px;padding-left:22px;color:var(--ink2)}
li{margin-bottom:8px}

/* ---------- tables ---------- */
.scroll{overflow-x:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);margin:20px 0}
table{border-collapse:collapse;width:100%;font-size:13.5px}
caption{caption-side:top;text-align:left;padding:17px 20px 3px;color:var(--mut);font-size:12.5px}
th{text-align:right;padding:13px 15px;font-size:10.5px;font-weight:660;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--line);white-space:nowrap;
  background:var(--panel2)}
th:first-child,td:first-child{text-align:left}
td{padding:11px 15px;border-bottom:1px solid var(--line);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink2)}
td b{color:var(--ink)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--panel2)}
tr.hi td{background:color-mix(in srgb,var(--acc) 10%,transparent)}
tr.q td{color:var(--mut);opacity:.62}
tr.neg td:first-child{box-shadow:inset 3px 0 0 var(--neg)}
tr.warn td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.pos{color:var(--pos);font-weight:600} .neg{color:var(--neg);font-weight:600}
.pill{display:inline-block;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:640;letter-spacing:.02em}
.pill.ok{background:var(--posbg);color:var(--pos)} .pill.no{background:var(--negbg);color:var(--neg)}

/* ---------- figures ---------- */
figure{margin:26px 0}
figcaption{color:var(--mut);font-size:13px;margin-top:12px;max-width:70ch}
.fig{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--sh);color:var(--ink)}

/* ---------- gallery filters ---------- */
.filters{display:flex;flex-direction:column;gap:11px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  box-shadow:var(--sh);margin:22px 0 0}
.fgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fgroup>b{font-size:10.5px;font-weight:660;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);min-width:62px}
.chip{appearance:none;border:1px solid var(--line);background:var(--panel2);color:var(--ink2);
  font:inherit;font-size:12.5px;font-weight:550;padding:6px 13px;border-radius:100px;
  cursor:pointer;transition:.13s;font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--acc);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:var(--bg);font-weight:640}
.chip.win[aria-pressed=true]{background:var(--pos);border-color:var(--pos)}
.chip.loss[aria-pressed=true]{background:var(--neg);border-color:var(--neg)}
.fcount{font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums;
  border-top:1px solid var(--line);padding-top:11px}
.fcount b{color:var(--ink)}
.gal .tc[hidden]{display:none}
.noresult{color:var(--mut);font-size:14px;padding:26px 2px}

/* ---------- lightbox ---------- */
#lb{position:fixed;inset:0;z-index:99;display:none;background:rgba(8,7,6,.93);
  backdrop-filter:blur(6px);padding:22px;align-items:center;justify-content:center}
#lb.on{display:flex}
#lb figure{margin:0;max-width:min(1300px,100%);max-height:100%;display:flex;
  flex-direction:column;gap:12px}
#lb img{max-width:100%;max-height:calc(100vh - 130px);object-fit:contain;
  background:#fff;border-radius:12px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
#lb figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;
  color:#f3efe7;font-size:14px;font-variant-numeric:tabular-nums;flex-wrap:wrap}
#lb figcaption b{color:#fff}
#lb .lbwin{color:#4fbe8b;font-weight:660} #lb .lbloss{color:#e0806f;font-weight:660}
#lb .lbn{color:#948c80;font-size:12.5px;letter-spacing:.04em}
.lbbtn{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;
  border-radius:50%;font-size:20px;line-height:1;cursor:pointer;display:grid;
  place-items:center;transition:.14s}
.lbbtn:hover{background:rgba(255,255,255,.2)}
#lbprev{left:14px} #lbnext{right:14px}
#lbclose{position:fixed;top:14px;right:14px;transform:none}
@media (max-width:620px){.lbbtn{top:auto;bottom:14px;transform:none}
  #lbprev{left:calc(50% - 58px)} #lbnext{left:calc(50% + 12px);right:auto}
  #lbclose{top:14px;right:14px;bottom:auto}}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin-top:22px}
.tc{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;box-shadow:var(--sh);transition:.16s}
.tc:hover{transform:translateY(-2px);border-color:var(--acc)}
.tc img{width:100%;display:block;background:#fff}
.tc .tm{display:block;padding:11px 14px;font-size:12.5px;color:var(--mut);
  border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.tc .tm b{color:var(--ink)}
.tc.win .tm i{color:var(--pos);font-style:normal;font-weight:660}
.tc.loss .tm i{color:var(--neg);font-style:normal;font-weight:660}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin:16px 0 0;font-size:13px;color:var(--mut)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.sw{width:11px;height:11px;border-radius:3px}

footer{margin-top:80px;padding-top:26px;border-top:1px solid var(--line);color:var(--mut);font-size:13px}
@media(max-width:640px){
  header{padding-top:44px}
  .k .v{font-size:1.55rem}
  section{margin-top:56px}
}
.seq{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82em;letter-spacing:.03em;white-space:nowrap}
.riskbar{display:grid;grid-template-columns:auto auto 1fr;gap:10px 14px;align-items:center;
  margin:0 0 18px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.riskbar label{font-size:13px;font-weight:640;letter-spacing:.01em}
.riskin{display:flex;align-items:center;gap:6px}
.riskin input{width:5.6rem;font:inherit;font-weight:700;font-size:19px;padding:6px 9px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);color:inherit;text-align:right}
.riskin input:focus{outline:2px solid var(--acc);outline-offset:1px}
.riskin span{font-size:15px;color:var(--mut);font-weight:640}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{font:inherit;font-size:12.5px;padding:5px 11px;border:1px solid var(--line);
  border-radius:999px;background:transparent;color:var(--mut);cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:640}
.risknote{grid-column:1/-1;margin:2px 0 0;font-size:12.5px;line-height:1.6;color:var(--mut)}
.riskwarn{margin:0 0 18px;padding:12px 16px;border-radius:12px;font-size:13.5px;line-height:1.6;
  border:1px solid var(--neg);background:color-mix(in srgb,var(--neg) 9%,transparent)}
.riskwarn b{color:var(--neg)}
.mclegend{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 10px;font-size:12.5px;color:var(--mut)}
.mclegend span{display:inline-flex;align-items:center;gap:7px}
.mclegend .sw{width:15px;height:2.5px;border-radius:2px;background:currentColor}
.mclegend .sw.pos{color:var(--pos)}
.mclegend .sw.neg{color:var(--neg)}
.kpi.mcstats{grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0 0}
@media (max-width:700px){.kpi.mcstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--mut)}
::-webkit-scrollbar-corner{background:transparent}
tr.sel td{background:color-mix(in srgb,var(--acc) 13%,transparent);font-weight:640}
@media (max-width:640px){.riskbar{grid-template-columns:1fr auto}.chips{grid-column:1/-1}}
.vtog{display:inline-flex;margin:18px 0 0;border:1px solid var(--line);border-radius:2px;
  overflow:hidden;font:500 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.vtog a,.vtog span{padding:9px 15px;text-decoration:none;display:block;letter-spacing:.02em}
.vtog span{background:var(--acc);color:#fff}
.vtog a{color:var(--ink);background:transparent}
.vtog a:hover{background:var(--line)}
.vtog .lbl{background:transparent;color:var(--mut);border-right:1px solid var(--line);
  font-weight:400;cursor:default}
.twofig{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin:16px 0 0}
.twofig figure{margin:0}

/* ---- shared by every published page ------------------------------------ */
/* Gallery images carry width and height so the browser can reserve each card's
   box before a lazy image arrives; height:auto keeps the attribute informing
   the ratio only, or every thumbnail stretches to its attribute height. */
.tc img{height:auto}

/* The three-edge comparison table marks the best figure on each line. */
table.cmp td.hi{font-weight:700}

/* The four published pages link to each other from here. Distinct from the
   in-page section nav, which is {{NAV}} in template.html. */
nav.site{display:flex;gap:4px;margin:26px 0 0;padding:5px;width:max-content;max-width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:100px;
  box-shadow:var(--sh);overflow-x:auto;scrollbar-width:none}
nav.site::-webkit-scrollbar{display:none}
nav.site a{flex:0 0 auto;padding:9px 18px;border-radius:100px;text-decoration:none;
  white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--mut);transition:.14s}
nav.site a:hover{background:var(--panel2);color:var(--ink)}
nav.site a[aria-current=page]{background:var(--acc);color:var(--bg)}
nav.site a[aria-current=page]:hover{background:var(--acc);color:var(--bg)}

/* ---------- trade sequence, as percentages ---------- */
/* One chip per trade in the order they happened, so a streak is visible as a
   block of colour. The number follows the risk selector like every other
   percentage on the page; only the colour is fixed, by the sign. */
.seqp{display:flex;flex-wrap:wrap;gap:3px;font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;min-width:240px}
.seqp b{font-size:11px;font-weight:660;padding:2px 5px;border-radius:5px;white-space:nowrap}
.seqp b.pos{color:var(--pos);background:var(--posbg)}
.seqp b.neg{color:var(--neg);background:var(--negbg)}
.seqp b.be{color:var(--mut);background:var(--panel2)}
.seqp b.nq{box-shadow:inset 0 -2px 0 color-mix(in srgb,currentColor 45%,transparent)}
.seqlegend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin:14px 0 0;
  font-size:12.5px;color:var(--mut)}
.seqlegend b{font-size:11px;font-weight:660;padding:2px 5px;border-radius:5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}