/* CMAA presentation frame. The 1920 × 1080 application canvas stays untouched. */
.frame-header{display:none}
body.presenting{
  --frame-ink:#e8f8fa;
  --frame-muted:#a1bdcb;
  --frame-base:#040506;
  --frame-panel:var(--frame-base);
  --frame-line:transparent;
  margin:0;overflow:hidden;background:var(--frame-base);color:var(--frame-ink);
}
body.presenting>.site-header,
body.presenting #player>.player-heading,
body.presenting #player>.below-player{display:none}
body.presenting #player{
  position:fixed;inset:0;width:100%;height:100vh;height:100dvh;
  max-width:none;margin:0;padding:0;overflow:hidden;
}
body.presenting #presentation{
  position:relative;isolation:isolate;display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-columns:minmax(0,1fr);
  /* Reset the older fullscreen flex alignment so every grid row fills the frame. */
  align-items:stretch;justify-items:stretch;align-content:stretch;justify-content:stretch;
  width:100%;height:100%;min-width:0;min-height:0;
  background:var(--frame-base);border:0;border-radius:0;box-shadow:none;
}
body.presenting #presentation:fullscreen{width:100vw;height:100vh;height:100dvh}

/* The mark sits on the frame's edge, independent of the changing footage. */
body.presenting .frame-header{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  min-width:0;gap:26px;padding:14px clamp(18px,2.1vw,40px);
  padding-top:max(14px,env(safe-area-inset-top));
  background:var(--frame-panel);border-bottom:1px solid var(--frame-line);
}
body.presenting .frame-header::after{
  content:none;
}
body.presenting .frame-identity{display:flex;align-items:center;gap:22px;min-width:0}
body.presenting .frame-logo{
  display:block;flex:0 0 auto;width:76px;height:auto;max-width:none;
  aspect-ratio:1926/1052;object-fit:contain;user-select:none;
}
body.presenting .frame-identity-divider{
  width:1px;height:34px;flex:0 0 1px;background:#3c5867;
}
body.presenting .frame-heading{min-width:0}
body.presenting #module-label{
  margin:0 0 5px;font:500 11px/1.2 Archivo,Arial,sans-serif;
  letter-spacing:.015em;color:#a8c8d6;white-space:nowrap;
}
body.presenting #workflow-title{
  margin:0;font:650 clamp(18px,1.45vw,25px)/1.1 Archivo,Arial,sans-serif;
  letter-spacing:-.035em;color:#f2fbfd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.presenting .frame-options{display:flex;align-items:center;gap:9px;flex:0 0 auto}
body.presenting #player .frame-options button.control-button{
  --face:#0b1014;--edge:#2a3a43;
  min-height:42px;padding:10px 14px;gap:8px;font-size:12px;
}
body.presenting .frame-options .control-icon{width:17px;height:17px;color:#8dd8e1}
body.presenting #player .frame-options #frame-home{
  margin-right:11px;padding-left:0;padding-right:6px;color:#bed3dd;
}
body.presenting #frame-home::before,
body.presenting #frame-home::after{display:none}
body.presenting #player .frame-options #frame-home:hover{color:#fff}
body.presenting #player .frame-options button:hover:not(:disabled){--face:#194255;--edge:#83c6d4}
body.presenting #player .frame-options #steps-toggle[aria-expanded=true]{--face:#164351;--edge:#00c3d0;color:#9cf4f6}

/* Fit the full 16:9 canvas between the two rails, with only a four-pixel gutter. */
body.presenting #frame-body{
  display:flex;align-items:center;justify-content:center;position:relative;
  min-width:0;min-height:0;overflow:hidden;
  padding:4px;
  background:var(--frame-base);
}
body.presenting #stage-wrap{
  flex:0 0 auto;min-width:0;min-height:0;max-width:100%;max-height:100%;
  background:#000;outline:0;box-shadow:none;
}

/* The bottom deck inherits the straight-edged brand controls, with deliberate spacing. */
body.presenting #presentation .transport{
  position:relative;z-index:2;width:100%;max-width:none;min-width:0;
  padding:12px clamp(18px,2.1vw,40px) 14px;
  padding-bottom:max(14px,env(safe-area-inset-bottom));
  background:var(--frame-base);border-top:1px solid transparent;
}
body.presenting .timeline-row{min-height:14px;gap:18px}
body.presenting .timeline-row progress{height:3px;min-width:0;background:#3b5664}
body.presenting .timeline-row progress::-webkit-progress-bar{background:#3b5664}
body.presenting #time{min-width:90px;font-size:11px;color:#bed5de}
body.presenting .transport-row{margin-top:11px;gap:24px;flex-wrap:nowrap}
body.presenting .transport-buttons{width:auto;flex:0 0 auto;gap:8px}
body.presenting .transport-buttons #restart{--face:#102b3b;--edge:#355464;color:#bbd0da}
body.presenting .transport-right{min-width:0;width:auto;flex:1;gap:22px;flex-wrap:nowrap;align-items:center}
body.presenting #play-state{font-size:11px;min-width:0;max-width:160px;color:#b4ccd7;line-height:1.35}
body.presenting .music-widget{min-width:0;gap:5px}
body.presenting #music-track-name{color:#abc6d3}
body.presenting #player #theme-toggle.control-button{color:#bed3dd}

/* Steps are an in-frame drawer, including during native full screen. */
body.presenting #step-list{
  position:absolute;z-index:120;right:clamp(16px,2.1vw,40px);top:82px;bottom:118px;
  display:flex;flex-direction:column;gap:0;width:min(430px,calc(100% - 32px));
  min-height:0;max-height:calc(100% - 160px);margin:0;padding:0;
  border:1px solid #507283;background:#102b3b;color:#e8f8fa;
  box-shadow:0 18px 64px #0009,0 0 0 100vmax #02090d66;
  overflow:auto;overscroll-behavior:contain;scrollbar-color:#55798b #102b3b;scrollbar-width:thin;
}
body.presenting .step-drawer-head{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex:0 0 auto;padding:18px 20px 16px;border-bottom:1px solid #365668;background:#102b3b;
}
body.presenting .step-drawer-head :is(h2,h3,p){margin:0;font:650 19px/1.2 Archivo,Arial,sans-serif;letter-spacing:-.025em}
body.presenting #player #step-list #close-steps{
  flex:0 0 auto;min-width:36px;min-height:36px;width:36px;height:36px;
  padding:6px;justify-content:center;--face:#102b3b;--edge:#456476;font-size:21px;
}
body.presenting .step-drawer-list{
  display:flex;flex-direction:column;gap:6px;min-height:0;padding:12px;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#55798b #102b3b;scrollbar-width:thin;
}
body.presenting #player #step-list button[data-step]{
  --face:#123141;--edge:#315264;flex:0 0 auto;width:100%;min-height:54px;
  justify-content:flex-start;white-space:normal;gap:15px;padding:13px 15px;
  font-size:13px;line-height:1.4;text-align:left;color:#e4f1f5;
}
body.presenting #player #step-list button[data-step]>span{
  flex:0 0 22px;font:600 12px/1.4 Archivo,Arial,sans-serif;color:#8bd2dd;
}
body.presenting #player #step-list button[data-step]:hover{--face:#1c4253;--edge:#83bccd}
body.presenting #player #step-list button[data-step][aria-current=true]{--face:#134652;--edge:#00c3d0;color:#fff}
body.presenting .step-drawer-footer{
  flex:0 0 auto;margin-top:auto;padding:17px 20px;border-top:1px solid #365668;
  background:#102b3b;font:12px/1.4 Archivo,Arial,sans-serif;color:#b9d3df;
}
body.presenting .step-drawer-footer a:hover{color:#fff}
body.presenting #step-list :focus-visible{outline-offset:-3px}

@media(min-width:1700px){
  body.presenting .frame-header{padding-top:17px;padding-bottom:17px}
  body.presenting .frame-logo{width:84px}
  body.presenting #module-label{font-size:12px}
}
@media(max-width:1100px){
  body.presenting .frame-header{gap:16px;padding-left:22px;padding-right:22px}
  body.presenting .frame-identity{gap:16px}
  body.presenting .frame-logo{width:67px}
  body.presenting .frame-options{gap:7px}
  body.presenting #player .frame-options #frame-home{margin-right:3px}
  body.presenting #player .frame-options button.control-button{padding:10px 11px}
  body.presenting .transport-right{gap:15px}
  body.presenting #play-state{max-width:112px}
}
@media(max-width:900px){
  body.presenting #player .frame-options #frame-home{padding:10px;width:40px;margin:0}
  body.presenting #frame-home .control-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  body.presenting #player .transport-buttons #restart .control-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  body.presenting #player .transport-buttons #restart{width:44px;height:46px;margin-right:0;padding:10px}
  body.presenting .transport-row{gap:16px}
  body.presenting .transport-right{gap:14px}
  body.presenting .transport-right #play-state{max-width:96px;flex-basis:auto;order:0;text-align:right}
  body.presenting .music-widget{margin-left:0;max-width:none}
}
@media(max-width:800px){
  body.presenting .frame-header{padding:12px 16px;gap:12px}
  body.presenting .frame-identity{gap:13px}
  body.presenting .frame-logo{width:59px}
  body.presenting .frame-identity-divider{height:30px}
  body.presenting #module-label{font-size:10px;margin-bottom:4px}
  body.presenting #workflow-title{font-size:18px}
  body.presenting .frame-options{gap:5px}
  body.presenting #player .frame-options :is(#steps-toggle,#fullscreen){width:38px;min-height:38px;padding:9px}
  body.presenting .frame-options :is(#steps-toggle,#fullscreen) .control-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  body.presenting #player .frame-options #frame-home{width:32px;min-height:38px;padding:7px}
  body.presenting #frame-body{padding:4px}
  body.presenting #presentation .transport{padding:11px 16px 13px;padding-bottom:max(13px,env(safe-area-inset-bottom))}
  body.presenting .transport-row{flex-wrap:wrap;gap:14px;margin-top:12px}
  body.presenting .transport-buttons{width:100%;gap:8px}
  body.presenting #player .transport-buttons #restart{width:auto;padding:10px 13px}
  body.presenting #player .transport-buttons #restart .control-label{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  body.presenting .transport-buttons #previous{width:44px;min-width:44px}
  body.presenting .transport-buttons #next{flex:1;min-width:0;min-height:48px}
  body.presenting .transport-right{width:100%;flex-wrap:wrap;gap:8px 10px}
  body.presenting .transport-right #play-state{order:3;flex:0 0 100%;max-width:none;font-size:10px;line-height:1.2;text-align:right}
  body.presenting .music-widget{margin-left:auto;max-width:calc(100% - 77px);gap:4px}
  body.presenting #player .music-buttons button.control-button{width:36px;min-width:36px;min-height:40px}
  body.presenting #player .music-buttons #music-toggle{min-width:87px;padding:10px 8px;font-size:11px}
  body.presenting #player #theme-toggle.control-button{gap:6px;font-size:11px}
  body.presenting #music-track-name{max-width:195px;font-size:10px}
  body.presenting #step-list{top:75px;bottom:215px;right:16px;max-height:calc(100% - 90px)}
}
@media(max-width:440px){
  body.presenting .frame-header{padding:11px 12px;gap:9px}
  body.presenting .frame-header::after{width:112px}
  body.presenting .frame-identity{gap:11px}
  body.presenting .frame-logo{width:50px}
  body.presenting .frame-identity-divider{display:none}
  body.presenting #workflow-title{font-size:16px}
  body.presenting #module-label{font-size:9px;letter-spacing:0}
  body.presenting #player .frame-options :is(#steps-toggle,#fullscreen){width:34px;min-height:36px;padding:8px}
  body.presenting #player .frame-options #frame-home{width:28px;padding:5px}
  body.presenting .frame-options{gap:4px}
  body.presenting #frame-body{padding:4px}
  body.presenting #presentation .transport{padding-left:12px;padding-right:12px}
  body.presenting #step-list{right:12px;width:calc(100% - 24px);top:64px;bottom:213px}
}
/* A landscape phone keeps one compact deck row so the footage stays useful. */
@media(max-height:560px) and (min-width:600px){
  body.presenting .frame-header{padding:8px 16px;gap:16px}
  body.presenting .frame-header::after{width:115px;height:2px}
  body.presenting .frame-identity{gap:13px}
  body.presenting .frame-logo{width:52px}
  body.presenting .frame-identity-divider{height:27px}
  body.presenting #module-label{font-size:9px;margin-bottom:3px}
  body.presenting #workflow-title{font-size:17px}
  body.presenting #player .frame-options button.control-button{min-height:34px;padding:8px 11px;font-size:11px}
  body.presenting #player .frame-options #frame-home{width:32px;padding:7px}
  body.presenting #frame-body{padding:4px}
  body.presenting #presentation .transport{padding:7px 16px 9px}
  body.presenting .timeline-row{min-height:12px}
  body.presenting #time{font-size:10px}
  body.presenting .transport-row{flex-wrap:nowrap;gap:16px;margin-top:7px}
  body.presenting .transport-buttons{width:auto;gap:6px}
  body.presenting #player .transport-buttons #restart{width:37px;height:37px;min-height:37px;padding:8px}
  body.presenting #player .transport-buttons #restart .control-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  body.presenting #player .transport-buttons #previous{width:37px;min-width:37px;min-height:37px;padding:8px}
  body.presenting #player .transport-buttons #next{min-width:121px;min-height:40px;padding:10px 57px 10px 20px;font-size:14px}
  body.presenting #next .control-arrow{inset:5px 12px 5px auto;width:34px}
  body.presenting .transport-right{width:auto;flex-wrap:nowrap;gap:13px}
  body.presenting .transport-right #play-state{flex:1;order:0;max-width:110px;font-size:9px;line-height:1.3}
  body.presenting #player #theme-toggle.control-button{min-height:36px;font-size:11px;gap:7px}
  body.presenting .music-widget{margin:0;max-width:none;gap:3px}
  body.presenting #player .music-buttons button.control-button{width:33px;min-width:33px;min-height:34px;padding-top:7px;padding-bottom:7px}
  body.presenting #player .music-buttons #music-toggle{min-width:84px;font-size:11px;padding:7px 8px}
  body.presenting #music-track-name{max-width:183px;font-size:9px}
  body.presenting #step-list{top:57px;bottom:85px;max-height:calc(100% - 80px);right:16px}
  body.presenting .step-drawer-head{padding:11px 15px}
  body.presenting .step-drawer-head :is(h2,h3,p){font-size:16px}
  body.presenting .step-drawer-footer{padding:11px 15px}
}
@media(max-width:365px){
  body.presenting #module-label{font-size:8px}
  body.presenting #workflow-title{font-size:14px}
  body.presenting .frame-logo{width:43px}
  body.presenting .frame-identity{gap:8px}
  body.presenting .frame-header{gap:7px;padding-left:10px;padding-right:10px}
  body.presenting .frame-options{gap:3px}
  body.presenting #player .frame-options :is(#steps-toggle,#fullscreen){width:30px;padding:6px}
  body.presenting #player .music-buttons button.control-button{width:31px;min-width:31px}
  body.presenting #player .music-buttons #music-toggle{min-width:77px;padding-left:6px;padding-right:6px;gap:5px}
  body.presenting #music-track-name{max-width:172px}
}

/* Clean presentation mode keeps only the canvas and its thin progress rail. */
body.presenting #presentation{
  grid-template-rows:var(--presentation-header-size,82px) minmax(0,1fr) var(--presentation-transport-size,118px);
  transition:grid-template-rows 560ms cubic-bezier(.22,.7,.2,1);
}
body.presenting .frame-header{
  min-height:0;overflow:hidden;
  transition:opacity 400ms ease,visibility 0s linear;
}
body.presenting #frame-body{transition:padding 560ms cubic-bezier(.22,.7,.2,1)}
body.presenting #presentation .transport{
  min-height:0;overflow:hidden;
  transition:padding 560ms cubic-bezier(.22,.7,.2,1),border-width 560ms ease;
}
body.presenting :is(.transport-row,#time,#title-begin){transition:opacity 350ms ease,visibility 0s linear}
body.presenting .timeline-row{transition:min-height 560ms ease,gap 560ms ease}
html.presentation-mode body.presenting:not(.presentation-measuring) #presentation{grid-template-rows:0px minmax(0,1fr) 3px}
html.presentation-mode body.presenting:not(.presentation-measuring) .frame-header,
html.presentation-mode body.presenting:not(.presentation-measuring) :is(.transport-row,#time,#title-begin){
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 350ms ease,visibility 0s linear 350ms;
}
html.presentation-mode body.presenting:not(.presentation-measuring) #frame-body{padding:0}
html.presentation-mode body.presenting:not(.presentation-measuring) #presentation .transport{padding:0;border-width:0}
html.presentation-mode body.presenting:not(.presentation-measuring) .timeline-row{min-height:3px;height:3px;gap:0}
html.presentation-mode body.presenting:not(.presentation-measuring) #time{width:0;min-width:0;flex:0 0 0;overflow:hidden}
html.presentation-mode body.presenting:not(.presentation-measuring) #timeline{display:block;height:3px;margin:0;border-radius:0}
html.presentation-mode body.presenting #step-list{display:none!important}
body.presenting.presentation-measuring #presentation{grid-template-rows:auto minmax(0,1fr) auto!important;transition:none!important}
body.presenting.presentation-measuring :is(.frame-header,.transport,.timeline-row,#frame-body){transition:none!important}
@media(prefers-reduced-motion:reduce){
  body.presenting #presentation,body.presenting .frame-header,body.presenting #frame-body,
  body.presenting #presentation .transport,body.presenting .timeline-row,
  body.presenting :is(.transport-row,#time,#title-begin){transition-duration:1ms!important;transition-delay:0s!important}
}