in a slide
holds what the slide states without deriving. Open, it covers the right of
the slide and the slide shrinks to the left; a part of the slide wrapped in
class dk1..dk3 (\htmlClass{dk1}{...} in math) is outlined in its colour, and
the drawer's text in the same class takes that colour. */
:root { --dw: 560px; --dk1: var(--teal); --dk2: var(--brown); --dk3: var(--rose); }
.drawer, .tdrawer { position: absolute; top: 77px; right: 0; bottom: 0; width: var(--dw); box-sizing: border-box;
padding: 16px 20px 16px 22px; background: #fff; border-left: 1px solid #d8d4e2;
box-shadow: -8px 0 22px rgba(40, 30, 80, .10); font-size: 17px; line-height: 1.3; overflow: auto;
z-index: 20; transform: translateX(102%); visibility: hidden;
transition: transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s .45s; }
.drawer-open .drawer, .trans-open .tdrawer { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.drawer .dh, .tdrawer .dh { color: var(--struct); font-weight: bold; font-size: 20px; margin-bottom: 10px; }
.drawer p { margin: 0 0 10px; }
.drawer .katex-display { margin: 6px 0 12px; }
.drawer .dk1 { color: var(--dk1); } .drawer .dk2 { color: var(--dk2); } .drawer .dk3 { color: var(--dk3); }
.drawer p.dk1, .drawer p.dk2, .drawer p.dk3 { border-left: 4px solid currentColor; padding-left: 12px; }
section.frame .fbody { transition: transform .45s cubic-bezier(.2, .7, .2, 1); transform-origin: 0 50%; }
.drawer-open .fbody, .trans-open .fbody { transform: translateX(-24px) scale(.57); } /* 16 + 1200 × .57 < 1280 − --dw */
.drawer-instant .fbody, .drawer-instant .tdrawer { transition: none !important; }
.fbody .enclosing.dk1, .fbody .enclosing.dk2, .fbody .enclosing.dk3 { display: inline-block; padding: 0 3px; margin: 0 -3px; border-radius: 6px; }
.fbody .dk1, .fbody .dk2, .fbody .dk3 { transition: box-shadow .3s, background-color .3s; }
.drawer-open .fbody .dk1 { box-shadow: 0 0 0 6px var(--dk1); background: color-mix(in srgb, var(--dk1) 12%, transparent); }
.drawer-open .fbody .dk2 { box-shadow: 0 0 0 6px var(--dk2); background: color-mix(in srgb, var(--dk2) 12%, transparent); }
.drawer-open .fbody .dk3 { box-shadow: 0 0 0 6px var(--dk3); background: color-mix(in srgb, var(--dk3) 12%, transparent); }
.reveal aside.narration { display: none; }
/* Transcript drawer (deck.js wireToolbar): the slide's narration, in the derivation drawer's place */
.tdrawer { line-height: 1.45; color: #555; padding-bottom: 72px; }
.tdrawer p { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid transparent; border-radius: 4px; cursor: pointer; }
.tdrawer p:hover { background: #f6f4fa; }
.tdrawer p.cur { color: var(--ink); background: #efebf7; border-left-color: var(--struct); }
/* toolbar: navigation, narration, transcript and derivation, at the bottom of the screen */
.deck-toolbar { position: fixed; left: 50%; bottom: 12px; transform: translate(-50%, 8px) scale(var(--tbs, 1)); transform-origin: 50% 100%; z-index: 50; display: flex;
align-items: center; gap: 6px; padding: 6px 8px; border-radius: 12px; background: rgba(255,255,255,.95); white-space: nowrap;
box-shadow: 0 2px 12px rgba(0,0,0,.22); font: 15px/1 "Helvetica Neue", Arial, sans-serif; color: var(--struct);
opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.deck-toolbar.shown { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(var(--tbs, 1)); }
.deck-toolbar .tb-group { display: flex; align-items: center; gap: 6px; padding: 0 6px; }
.deck-toolbar .tb-group + .tb-group { border-left: 1px solid #e0dce8; }
.deck-toolbar button, .deck-toolbar a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0;
background: var(--blockbody); color: var(--struct); border-radius: 7px; height: 32px; min-width: 34px; padding: 0 10px;
font: inherit; cursor: pointer; text-decoration: none; }
.deck-toolbar .tb-prev, .deck-toolbar .tb-next, .deck-toolbar .tb-play { padding: 0; width: 34px; }
.deck-toolbar svg { flex: none; }
.deck-toolbar button:hover:not(:disabled), .deck-toolbar a:hover { background: #d9d4e6; }
.deck-toolbar button.active { background: var(--struct); color: #fff; }
.deck-toolbar button.tb-play.waiting { background: var(--struct); color: #fff; animation: tb-wait 1.6s ease-in-out infinite; }
@keyframes tb-wait { 50% { box-shadow: 0 0 0 6px rgba(70, 60, 125, .25); } }
.deck-toolbar button:disabled { opacity: .4; cursor: default; }
.deck-toolbar .tb-seek { width: 200px; accent-color: var(--struct); }
.deck-toolbar .tb-time { min-width: 80px; font-variant-numeric: tabular-nums; color: #444; font-size: 14px; }
.deck-toolbar select { font: inherit; color: inherit; border: 1px solid #ccc8d8; border-radius: 6px; padding: 3px 4px; background: #fff; }
.deck-toolbar .tb-narr.off .tb-seek, .deck-toolbar .tb-narr.off .tb-time, .deck-toolbar .tb-narr.off select { opacity: .4; }
/* narration pointer (deck.js,
): a ring around what the voice refers to */
.nar-ring { position: absolute; z-index: 30; pointer-events: none; box-sizing: border-box;
border: 3px solid #E39B17; border-radius: 12px; background: rgba(227,155,23,.07);
box-shadow: 0 0 0 5px rgba(227,155,23,.15), 0 0 22px rgba(227,155,23,.35);
opacity: 0; transform: scale(1.06);
transition: opacity .3s ease, transform .3s ease, left .4s ease, top .4s ease, width .4s ease, height .4s ease; }
.nar-ring.on { opacity: 1; transform: none; }