/* W3S brand tokens and shared demo chrome.
   Built on the key mark: plum #1E0B36 to violet #7A3FE0, Times New Roman for display, Helvetica for text. */
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');

:root {
  --plum: #1E0B36;        /* key gradient start: dark surfaces, headings */
  --plum-2: #2C1549;      /* raised surface on plum */
  --plum-3: #432463;      /* borders on plum */
  --magenta: #7A3FE0;     /* the one accent: violet (variable keeps its old name) */
  --magenta-soft: #ECE4FB;/* accent wash on paper */
  --rose: #C4A8FF;        /* accent readable on plum */
  --paper: #FFFFFF;
  --desk: #F3EFF6;        /* page ground, plum-tinted */
  --ink: #1B1424;
  --ink-2: #63586F;       /* secondary text on paper */
  --mist: #B9ABCB;        /* secondary text on plum */
  --rule: #E2DAEA;
  --key-gradient: linear-gradient(115deg, #1E0B36 0%, #7A3FE0 100%);

  --serif: 'Times New Roman', Times, serif;
  --sans: Helvetica, 'Helvetica Neue', Arial, sans-serif;
  --record: 'Courier Prime', 'Courier New', Courier, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

/* Top bar shared by every demo */
.w3s-bar {
  display: flex; align-items: center; gap: 20px;
  padding: 10px 22px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.w3s-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--plum); }
.w3s-brand img { width: 36px; height: 36px; }
.w3s-brand b { font: 700 25px/1 var(--serif); letter-spacing: .01em; }
.w3s-product { font: 600 14px/1.2 var(--sans); color: var(--plum); padding-left: 20px; border-left: 1px solid var(--rule); }
.w3s-spacer { flex: 1; }

/* Where the work happens: appears in every demo */
.w3s-custody {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2);
  padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px;
}
.w3s-custody i { width: 8px; height: 8px; border-radius: 50%; background: var(--key-gradient); }
.w3s-custody strong { color: var(--plum); font-weight: 600; }

/* Honest labelling: these are concept demonstrations */
.w3s-concept { font-size: 12.5px; color: var(--ink-2); }

/* Presenter controls, hidden with H for a clean recording */
.w3s-controls { display: flex; align-items: center; gap: 8px; }
.w3s-controls button {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
  padding: 5px 12px; font-size: 13px; color: var(--plum);
}
.w3s-controls button:hover { border-color: var(--magenta); }
.w3s-controls kbd { font: 11px var(--sans); color: var(--ink-2); margin-left: 6px; }
body.clean .w3s-controls { visibility: hidden; }

/* The same three-way switch in every demo: where the work runs is the firm's choice, feature by feature */
.w3s-level { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; font-size: 12.5px; }
.w3s-level span { color: var(--ink-2); padding: 0 8px 0 9px; }
.w3s-level button { border: 0; background: transparent; border-radius: 999px; padding: 5px 11px; font: 600 12.5px var(--sans); color: var(--ink-2); }
.w3s-level button:hover { color: var(--plum); }
.w3s-level button.on { background: var(--plum); color: #fff; }