:root{
  --p:#ede6d3;--s:#ff7906;--c:#2c2c2c;
  --bg:#faf8f5;--bg-2:#f3efe9;--surface:#ffffff;
  --ink:#15110d;--ink-2:#3a342d;--muted:#8a8278;--muted-2:#b4ab9f;
  --border:#ebe6df;--border-2:#f0ebe4;
  --accent:#b85c38;--accent-d:#9b4a2b;--accent-l:rgba(184,92,56,.08);
  --green:#2a7a5a;--green-l:rgba(42,122,90,.10);
  --red:#c64545;--red-l:rgba(198,69,69,.10);--amber:#c6892b;--amber-l:rgba(198,137,43,.12);
  --serif:'Bricolage Grotesque',serif;--sans:'DM Sans',sans-serif;--mono:'DM Mono',monospace;
  --shadow-md:0 4px 6px -1px rgba(21,17,13,.10),0 2px 4px -2px rgba(21,17,13,.06);
  --shadow-xl:0 20px 25px -5px rgba(21,17,13,.12),0 8px 10px -6px rgba(21,17,13,.04);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg-2);font-family:var(--sans);color:var(--ink);padding:48px;display:flex;justify-content:center}
.figure{width:1240px;display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:start}
.frame-label{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.frame-heading{font:600 30px/1.08 var(--serif);letter-spacing:-.025em;margin-bottom:8px}
.frame-sub{font:400 15px/1.5 var(--sans);color:var(--muted);max-width:560px;margin-bottom:26px}
.scr-wrap{position:relative}
.screen{background:var(--bg);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-xl);overflow:hidden}
.screen-bar{height:42px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;padding:0 16px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--border)}
.crumb{margin-left:14px;font:400 12px/1 var(--mono);color:var(--muted)}
.screen-body{padding:26px 28px 30px}
.marker{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font:500 11px/24px var(--mono);text-align:center;box-shadow:var(--shadow-md);z-index:5}
.callouts{position:sticky;top:48px;display:flex;flex-direction:column;gap:18px;padding-top:8px}
.callout{display:flex;gap:13px;align-items:flex-start}
.cnum{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font:500 12px/26px var(--mono);text-align:center}
.ctext{font:400 13px/1.5 var(--sans);color:var(--ink-2)}
.ctext b{font-weight:600;color:var(--ink)}
.gutter-head{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:10px}
.panel-title{font:600 14px/1 var(--serif);letter-spacing:-.01em}
.panel-sub{font:400 11px/1 var(--mono);color:var(--muted)}
.legend{display:flex;gap:18px;margin-top:14px}
.leg{display:flex;align-items:center;gap:7px;font:400 11px/1 var(--sans);color:var(--muted)}
.leg i{width:14px;height:2px;border-radius:2px;display:inline-block}

/* PICKER */
.picker { position: fixed; bottom: 22px; right: 22px; z-index: 200; width: 56px; height: 56px; }
.picker-toggle {
  position: absolute; bottom: 0; right: 0; z-index: 3;
  width: 56px; height: 56px; border-radius: 50%; filter: drop-shadow(0 5px 14px rgba(0,0,0,.32));
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--s); display: flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), color .65s ease;
}
.picker-toggle:hover { transform: scale(1.08) rotate(10deg) }
.swatch {
  position: absolute; bottom: 15px; right: 15px;
  width: 26px; height: 26px; border-radius: 50%;
  cursor: pointer; border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  opacity: 0; z-index: 2; transform: scale(.2);
  transition: transform .5s ease, opacity .35s ease;
  transition-delay: calc(var(--si, 0) * .05s);
}
.picker.open .swatch {
  opacity: 1;
  transform: rotate(calc(180deg + (90deg / 3) * var(--si, 0))) translate(80px) rotate(calc(0deg - 180deg - (90deg / 3) * var(--si, 0)));
}
.swatch[data-theme="cream"]  { background: #ff7906 }
.swatch[data-theme="blue"]   { background: #0779ff }
.swatch[data-theme="green"]  { background: #37af5d }
.swatch[data-theme="purple"] { background: #db30f5 }
.swatch[data-theme="mono"]   { background: #7c7c82 }

/* THEME OVERRIDES — accent preserved under cream+mono; neutralized under blue/green/purple */
html[data-theme="blue"]{--bg:#0779ff;--bg-2:#0a6ad6;--surface:#0a6ad6;--ink:#eaf6ff;--ink-2:#c5e8ff;--muted:#8fc4f5;--muted-2:#6fa8e0;--border:rgba(255,255,255,.20);--border-2:rgba(255,255,255,.14);--accent:var(--ink);--accent-d:var(--ink);--accent-l:color-mix(in srgb,var(--ink) 12%,transparent);--accent-soft:color-mix(in srgb,var(--ink) 16%,transparent)}
html[data-theme="green"]{--bg:#37af5d;--bg-2:#2f9a51;--surface:#2f9a51;--ink:#f3fff7;--ink-2:#d6f5e0;--muted:#a9dcb9;--muted-2:#8bc79e;--border:rgba(255,255,255,.22);--border-2:rgba(255,255,255,.15);--accent:var(--ink);--accent-d:var(--ink);--accent-l:color-mix(in srgb,var(--ink) 12%,transparent);--accent-soft:color-mix(in srgb,var(--ink) 16%,transparent)}
html[data-theme="purple"]{--bg:#3c0350;--bg-2:#330246;--surface:#330246;--ink:#fce9ff;--ink-2:#f0d4fb;--muted:#c79bd6;--muted-2:#a87cb9;--border:rgba(255,255,255,.20);--border-2:rgba(255,255,255,.13);--accent:var(--ink);--accent-d:var(--ink);--accent-l:color-mix(in srgb,var(--ink) 12%,transparent);--accent-soft:color-mix(in srgb,var(--ink) 16%,transparent)}
html[data-theme="mono"]{--bg:#ffffff;--bg-2:#eeeeee;--surface:#ffffff;--ink:#1f1f22;--ink-2:#34343a;--muted:#6b6b72;--muted-2:#9a9aa2;--border:#e2e2e2;--border-2:#eeeeee}

/* accent-as-background spots: on-accent labels switch to page colour under dark themes */
html[data-theme="blue"] .logo .lk,html[data-theme="green"] .logo .lk,html[data-theme="purple"] .logo .lk,
html[data-theme="blue"] .cnum,html[data-theme="green"] .cnum,html[data-theme="purple"] .cnum,
html[data-theme="blue"] .send,html[data-theme="green"] .send,html[data-theme="purple"] .send,
html[data-theme="blue"] .path.sel .pcheck,html[data-theme="green"] .path.sel .pcheck,html[data-theme="purple"] .path.sel .pcheck{color:var(--bg)}

/* wireframe legibility: repaint hardcoded-white .pwf surfaces under dark themes */
html[data-theme="blue"] .pwf .canvas,html[data-theme="green"] .pwf .canvas,html[data-theme="purple"] .pwf .canvas,
html[data-theme="blue"] .pwf .board,html[data-theme="green"] .pwf .board,html[data-theme="purple"] .pwf .board,
html[data-theme="blue"] .pwf .swim,html[data-theme="green"] .pwf .swim,html[data-theme="purple"] .pwf .swim,
html[data-theme="blue"] .pwf .trade-table,html[data-theme="green"] .pwf .trade-table,html[data-theme="purple"] .pwf .trade-table,
html[data-theme="blue"] .pwf .sk-box,html[data-theme="green"] .pwf .sk-box,html[data-theme="purple"] .pwf .sk-box{background:var(--surface);color:var(--ink)}
html[data-theme="blue"] .marker,html[data-theme="green"] .marker,html[data-theme="purple"] .marker{color:var(--bg)}


/* ---- Responsive (tablet / mobile) ---- */
@media(max-width:860px){
  html,body{ overflow-x:hidden; }
  body{ padding:20px; }
  .figure{ width:100%; max-width:100%; grid-template-columns:1fr; gap:22px; }
  .callouts{ position:static; }
  .screen{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
@media(max-width:560px){ body{ padding:14px; } }