/* ESL brand palette taken from the ESL logo: blue #4f9efb, amber #ffb30b, charcoal #2d2d2d.
   Text-weight blues/ambers are darkened so they meet WCAG AA contrast on white. */
:root{color-scheme:light;--bg:#f4eedc;--sheet:#fbf8ee;--ink:#1d1a16;--muted:#6b6353;--line:#b9ae90;
--blue:#12457a;--blue-text:#12457a;--amber:#9a5b10;--amber-text:#7a5200;--charcoal:#2d2d2d;--charcoal-2:#3a3a3a;
--on-dark:#1d1a16;--on-dark-muted:#c4c4c4}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Roboto,Arial,sans-serif;line-height:1.55}
a{color:var(--blue-text);text-underline-offset:4px}
button{font:inherit;min-height:44px;border:1px solid #cfd3d8;background:#fff;color:var(--ink);border-radius:6px;padding:9px 17px;cursor:pointer}
button:hover{border-color:var(--blue);color:var(--blue-text)}button:disabled{opacity:.4;cursor:default}
button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.topbar{padding:10px 4vw;display:flex;justify-content:space-between;gap:20px;align-items:center;background:#fff;border-bottom:1px solid var(--line)}
.brand-group{display:flex;align-items:center;gap:18px}.esl-logo img{height:38px;width:auto;display:block}
.topbar #brand{font-weight:600;color:var(--ink);text-decoration:none;font-size:14px;padding-left:18px;border-left:2px solid var(--line)}
.topbar .links{display:flex;gap:23px;flex-wrap:wrap}.topbar .links a{font-size:14px;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent}
.topbar .links a:hover{border-bottom-color:var(--amber)}
#deck{max-width:1240px;margin:28px auto 0;padding:34px 52px 130px;background:var(--sheet);border:1px solid var(--line);border-bottom:0}
.slide{padding:6px 0 25px;min-width:0}.ready .slide{display:none}
.ready .slide.active{display:block;animation:enter-right .25s ease}.ready .slide.active.backwards{animation-name:enter-left}
@keyframes enter-right{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
@keyframes enter-left{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
/* Two offset square frames echo the ESL logo mark. */
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;letter-spacing:.18em;font-weight:700}
.mark{position:relative;width:22px;height:20px;flex:none}
.mark::before,.mark::after{content:"";position:absolute;width:13px;height:13px;border:3px solid}
.mark::before{left:0;top:0;border-color:var(--blue)}.mark::after{left:7px;top:6px;border-color:var(--amber)}
h1{font-size:clamp(28px,3.6vw,46px);line-height:1.15;letter-spacing:-.02em;margin:14px 0 8px;color:var(--ink);font-weight:650}
p.subtitle{font-size:19px;color:var(--blue-text);margin:0 0 26px}
p,li{font-size:18px}p{margin:18px 0}li{margin:11px 0}ul{padding-left:24px}li::marker{color:var(--amber)}
.note{padding:14px 20px;border-left:4px solid var(--amber);background:#fff8e6;color:#4d3a10;font-size:15px;margin:20px 0}
figure{margin:20px 0}figure img{width:100%;height:auto;border-radius:6px;display:block}
figcaption{font-size:13px;color:var(--muted);margin:10px 0;line-height:1.5}
.code{background:var(--charcoal);border-radius:6px;overflow:hidden}
.code figcaption{padding:10px 19px;margin:0;background:var(--charcoal-2);color:var(--on-dark-muted);border-top:3px solid var(--amber)}
pre{font-family:Consolas,"Cascadia Mono",monospace;font-size:15px;line-height:1.65;margin:0;padding:19px;overflow:auto;tab-size:4;color:var(--on-dark)}
.code span.add{color:#f4eedc}.code span.remove{color:#f4eedc}
.table-scroll{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:6px}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{padding:13px 17px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--charcoal);color:#f4eedc;font-weight:600}td{overflow-wrap:anywhere}
tbody tr:nth-child(even){background:#f6f7f9}tr:last-child td{border-bottom:0}
.controls{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 18px;background:#fffffff5;border-top:1px solid var(--line);z-index:10;backdrop-filter:blur(8px)}
#next{background:var(--blue-text);border-color:rgba(29,26,22,0.55);color:#f4eedc}#next:hover{background:#1858aa}
#position{min-width:90px;text-align:center;font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}
.toc{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:25px 0}
.toc a{display:block;padding:11px 12px;font-size:13px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--line);border-radius:4px;text-decoration:none;color:var(--ink)}
.toc a:hover{border-left-color:var(--amber);color:var(--blue-text)}
.replay{border-radius:6px;padding:22px;background:var(--charcoal);color:#f4eedc}
.replay-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:15px;color:#f4eedc}
.board{display:flex;justify-content:center;gap:120px;margin:28px 0}.board>div{display:grid;justify-items:center;gap:12px}
.led{display:block;width:86px;height:86px;border-radius:50%;background:#fbf8ee;border:6px solid #555}
.led.lit{background:var(--amber);box-shadow:0 0 30px #ffb30b70;border-color:rgba(29,26,22,0.55)}
.button-state{font-size:14px;color:var(--on-dark-muted)}.button-state.held{color:#b8322a}
.replay-actions{display:flex;gap:10px;flex-wrap:wrap}
.replay button{background:var(--charcoal-2);border-color:rgba(29,26,22,0.55);color:#f4eedc}.replay button:hover{border-color:rgba(29,26,22,0.55);color:#f4eedc}
.replay pre{border-radius:4px;background:#fbf8ee;font-size:13px;margin-bottom:18px}
.sources{columns:2;column-gap:35px}.sources li{font-size:14px;break-inside:avoid}.nojs{padding:20px}
.esl-logo-large{display:inline-block}.esl-logo-large img{width:min(440px,100%);height:auto;display:block;margin:8px 0 22px}
.esl-columns{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
.esl-about{margin:0;padding-left:22px}.esl-about li{font-size:19px}
.person-card{display:flex;gap:20px;padding:20px;border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:6px;background:#fafbfc}
.person-card img{width:132px;height:132px;object-fit:cover;border-radius:4px;display:block}
.person-card strong{display:block;font-size:20px}.person-card span{display:block;color:var(--blue-text);font-weight:600}
.person-card p{font-size:16px;margin:10px 0}
.linkedin{display:inline-block;font-size:14px;font-weight:600;padding:6px 12px;border:1px solid var(--blue-text);border-radius:4px;text-decoration:none}
.linkedin:hover{background:var(--blue-text);color:#f4eedc}
.contact{text-align:center;padding:10px 0 20px}.contact .esl-logo-large img{margin:10px auto 26px}
.contact p{max-width:720px;margin:0 auto 30px}
.contact-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.contact-actions a{padding:12px 20px;border:1px solid #cfd3d8;border-radius:6px;text-decoration:none;color:#1d1a16;font-weight:600}
.contact-actions a:hover{border-color:rgba(29,26,22,0.55)}
.contact-actions a.primary{background:var(--blue-text);border-color:rgba(29,26,22,0.55);color:#f4eedc}
.contact-actions a.primary:hover{background:#1858aa}
@media(max-width:700px){.topbar{align-items:flex-start;flex-direction:column;padding:10px 18px;gap:10px}.esl-logo img{height:30px}
.topbar .links{gap:16px}.topbar .links a{font-size:12px}#deck{margin-top:0;padding:22px 18px 106px;border:0}
h1{font-size:30px}p.subtitle{font-size:16px;margin-bottom:22px}p,li{font-size:16px}th,td{padding:11px;font-size:13px;min-width:95px}
.note{font-size:13px;padding:12px 14px}pre{font-size:12px;padding:14px}.controls{gap:7px;padding:10px 8px}
button{padding:8px 11px;font-size:13px}#position{min-width:61px;font-size:12px}.toc{grid-template-columns:repeat(2,1fr)}
.board{gap:55px}.led{width:67px;height:67px}.replay{padding:14px}.replay-top{font-size:13px}.replay-actions{gap:7px}.sources{columns:1}
.esl-columns{grid-template-columns:1fr;gap:24px}.esl-about li{font-size:16px}.person-card{flex-direction:column}.person-card img{width:112px;height:112px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ready .slide.active{animation:none}}
@media print{body{background:white}.topbar,.controls,.toc,.replay-actions{display:none}#deck{padding:0;margin:0;max-width:none;border:0}
.ready .slide,.slide{display:block!important;break-after:page;animation:none!important}.slide:last-child{break-after:auto}
h1{font-size:27px}p,li{font-size:12px}pre{font-size:10px}td{font-size:11px}.table-scroll{overflow:visible}.sources{columns:1}
.code,.replay,th{-webkit-print-color-adjust:exact;print-color-adjust:exact}}