/* One shared 16:9 width aligns the header, slides and overlay arrows. */
.site-shell{
  --header-size:64px;
  --side-gap:16px;
  --canvas-width:min(calc(100vw - var(--side-gap)*2),calc((100svh - var(--header-size) - 22px)*16/9));
  width:var(--canvas-width);
  max-width:none;
  height:100vh;
  height:100svh;
  min-height:0;
  margin:0 auto;
  padding:6px 0 8px;
  display:grid;
  grid-template-rows:var(--header-size) minmax(0,1fr);
  gap:8px;
  container-type:inline-size;
}
.site-header{
  width:100%;
  height:var(--header-size);
  min-width:0;
  margin:0;
  padding:0;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:20px;
}
.brand{height:calc(var(--header-size) - 2px)}
.brand img{width:136px;height:calc(var(--header-size) - 2px)}
.header-meta{justify-self:start}
.header-right{justify-self:end}
#presentation{
  display:block;
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  min-width:0;
}
#presentation .stage{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  place-items:center;
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  min-width:0;
  border:0;
  background:transparent;
  overflow:hidden;
  container-type:normal;
}
#presentation .stage:after{content:none}
#presentation .slide{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  place-items:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:transparent;
}
#presentation .slide-canvas{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  margin:0;
  outline:1px solid var(--line);
  outline-offset:-1px;
}
#presentation .presentation-toolbar,.site-footer,.slide-steps{display:none!important}
#presentation .slide-navigation{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:100%;
  min-width:0;
  margin:0;
  padding:0 12px;
  gap:0;
  background:transparent;
  box-shadow:none;
  pointer-events:none;
  z-index:6;
}
#presentation .arrow-button{
  display:grid;
  place-items:center;
  flex:none;
  width:44px;
  height:64px;
  min-height:44px;
  padding:0;
  margin:0;
  gap:0;
  border:1px solid #c69aaa77;
  background:#130e17aa;
  color:var(--pink);
  backdrop-filter:blur(6px);
  pointer-events:auto;
  transition:background .2s,border-color .2s,opacity .2s;
}
#presentation .arrow-button span:not([aria-hidden]){display:none}
#presentation .arrow-button span[aria-hidden]{font-size:25px}
#presentation .arrow-button:disabled{opacity:.22}
#presentation .arrow-button:hover:enabled{background:#392334dc;border-color:var(--pink)}
#presentation .arrow-button:focus-visible{outline-offset:-4px}
@container(max-width:600px){
  .site-header{gap:8px}
  .brand img{width:120px}
  .header-meta{display:flex;font-size:8px;gap:5px;letter-spacing:0;flex-wrap:wrap;line-height:1.4;max-width:105px}
  .header-meta .meta-divider{display:none}
  .header-right{display:flex;gap:8px;font-size:9px}
  .discord-link{gap:5px}
  .discord-link span{font-size:16px}
  .age-mark{display:inline-block;font-size:9px;padding:2px 4px}
}
@container(max-width:380px){
  .header-meta{max-width:80px}
  .brand img{width:110px}
  .header-right{gap:5px}
  .age-mark{padding:1px 3px;font-size:8px}
}
@media(max-width:600px){
  .site-shell{--side-gap:10px}
  .site-header{gap:8px}
  .brand img{width:120px}
  .header-meta{display:flex;font-size:8px;gap:5px;letter-spacing:0;flex-wrap:wrap;line-height:1.4;max-width:100px}
  .header-meta .meta-divider{display:none}
  .header-right{display:flex;gap:8px;font-size:9px}
  .discord-link{gap:5px}
  .discord-link span{font-size:16px}
  .age-mark{display:inline-block;font-size:9px;padding:2px 4px}
  #presentation .stage{overflow:visible}
  #presentation .slide-navigation{padding:0}
  #presentation .arrow-button{width:26px;height:44px;min-height:44px}
  #presentation #previous-slide{transform:translateX(-8px)}
  #presentation #next-slide{transform:translateX(8px)}
  #presentation .arrow-button span[aria-hidden]{font-size:20px}
}
@media(max-width:380px){
  .header-meta{max-width:74px}
  .header-right{gap:5px}
  .brand img{width:110px}
  .age-mark{padding:1px 3px;font-size:8px}
}
@media(max-height:460px){
  .site-shell{--header-size:48px}
  .brand img{width:106px}
  #presentation .arrow-button{height:52px}
}

/* Mouse movement reveals only the arrow on that half of the viewport. */
#presentation .arrow-button,
#presentation .arrow-button:hover:enabled{
  border:0;
  background:none;
  backdrop-filter:none;
  box-shadow:none;
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
#presentation .arrow-button span[aria-hidden]{color:#fff;text-shadow:0 1px 7px #000b}
#presentation .slide-navigation[data-arrow=previous] #previous-slide:not(:disabled),
#presentation .slide-navigation[data-arrow=next] #next-slide:not(:disabled),
#presentation .slide-navigation:not([data-input=mouse]) .arrow-button:focus-visible:not(:disabled){opacity:1;pointer-events:auto}
#presentation .arrow-button:focus-visible{outline:1px solid #fff8;outline-offset:-4px}
#presentation .arrow-button:disabled{opacity:0;pointer-events:none}
@media(hover:none),(pointer:coarse){
  #presentation .slide-navigation:not([data-input=mouse]) .arrow-button:not(:disabled){opacity:1;pointer-events:auto}
}
body:has(dialog[open]) #presentation .arrow-button{opacity:0;pointer-events:none}

#presentation .slide-navigation[data-input=mouse][data-arrow=previous] #next-slide,
#presentation .slide-navigation[data-input=mouse][data-arrow=next] #previous-slide{opacity:0;pointer-events:none;transition:none}