/* Existing Attribuly presentation styles. Values preserved from the approved HTML. */
@font-face {
  font-family:SourceHan;
  src:url(../fonts/source-han-sans-regular.otf) format("opentype");
  font-weight:400;
  font-display:block;
  }
@font-face {
  font-family:SourceHan;
  src:url(../fonts/source-han-sans-heavy.otf) format("opentype");
  font-weight:900;
  font-display:block;
  }
* {
  box-sizing:border-box}
html,body {
  margin:0;
  background:#000;
  font-family:SourceHan,sans-serif}
main {
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center}
#deck {
  width:min(100vw,calc(100dvh * 16 / 9));
  aspect-ratio:16/9;
  position:relative}
.slide {
  position:absolute;
  inset:0;
  display:none}
.slide.active {
  display:block}
.slide>svg {
  width:100%;
  height:100%;
  display:block}
p {
  margin:0}
#toolbar {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:#000d;
  color:white;
  padding:8px;
  font:13px SourceHan;
  opacity:0;
  transition:opacity .2s;
  z-index:10}
#toolbar:hover,#toolbar:focus-within,body.controls-visible #toolbar {
  opacity:1}
#toolbar .controls {
  display:flex;
  align-items:center;
  gap:8px}
button,input {
  font:inherit;
  border:1px solid #555;
  border-radius:5px;
  background:#111;
  color:#fff;
  min-height:40px;
  padding:0 14px}
button {
  cursor:pointer}
button:hover {
  border-color:#8bd94d;
  color:#8bd94d}
button:disabled {
  opacity:.3}
#page {
  width:52px;
  padding:9px 2px;
  text-align:center}
#progress {
  display:none}
dialog {
  width:min(1050px,94vw);
  max-height:88dvh;
  background:#151815;
  color:white;
  border:1px solid #536453;
  border-radius:10px;
  padding:20px}
dialog::backdrop {
  background:#000c}
dialog header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px}
dialog h2 {
  font-size:20px;
  margin:0}
#grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px}
#grid button {
  padding:12px;
  text-align:left;
  line-height:1.6;
  font-size:12px}
#grid b {
  display:block;
  color:#8bd94d;
  font-size:18px}
@media(max-width:650px) {
  #grid {
  grid-template-columns:repeat(2,1fr)}
.hint {
  display:none}
}
@media print {
  main {
  height:auto;
  display:block}
#deck {
  width:100%;
  aspect-ratio:auto}
.slide {
  display:block!important;
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  break-after:page}
#toolbar,dialog {
  display:none!important}
@page {
  size:landscape;
  margin:0}
}
foreignObject p {
  display:block}
foreignObject ul {
  display:block}
foreignObject li {
  display:list-item}
foreignObject p::marker,foreignObject li::marker {
  font-size:1.1em}

/* Download controls are outside the original slide artwork. */
#toolbar { flex-wrap:wrap; padding-bottom:max(8px,env(safe-area-inset-bottom)); }
#toolbar .controls, #toolbar .downloads { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
#toolbar button, #toolbar input, #toolbar a { min-height:44px; }
#toolbar a { display:inline-flex; align-items:center; padding:0 14px; border:1px solid #86d956; border-radius:5px; color:#86d956; text-decoration:none; font:inherit; }
#toolbar a:hover, #toolbar a:focus-visible { background:#86d956; color:#000; }
@media(max-width:650px) { #toolbar { gap:6px; } #toolbar button { padding:0 10px; } }
@media(prefers-reduced-motion:reduce) { #toolbar { transition:none; } }