@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { color-scheme: dark; --forest: #173F38; --gold: #EFC03D; --cream: #F9FCF8; --mint: #D7EEE3; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--forest); }
body { color: var(--cream); font-family: 'Manrope', sans-serif; }
button { font: inherit; }
.presentation, .screen { position: relative; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; background: var(--forest); }
#slide-frame { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; border: 0; background: var(--forest); transform-origin: center center; box-shadow: 0 8px 32px rgba(0,0,0,.20); opacity: 1; transition: opacity 180ms ease; }
#slide-frame.is-changing { opacity: 0; }
.progress-track { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 4px; background: rgba(249,252,248,.28); pointer-events: none; }
#progress-bar { display: block; width: 4.545%; height: 100%; background: var(--gold); transition: width 220ms ease; }
.top-bar { position: absolute; z-index: 22; top: 4px; right: 0; display: flex; align-items: center; gap: 9px; padding: 9px 16px; pointer-events: auto; }
.slide-counter { min-width: 76px; padding: 7px 11px; border: 1px solid rgba(239,192,61,.72); border-radius: 999px; background: rgba(23,63,56,.9); color: var(--cream); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-align: center; backdrop-filter: blur(6px); pointer-events: none; }
.fullscreen { width: 42px; height: 42px; border: 1px solid rgba(239,192,61,.70); border-radius: 50%; background: rgba(23,63,56,.9); color: var(--gold); font-size: 25px; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); }
.fullscreen:hover, .fullscreen:focus-visible { background: var(--gold); color: var(--forest); outline: 2px solid var(--cream); outline-offset: 2px; }
.menu-toggle { min-height: 42px; padding: 0 14px; border: 1px solid rgba(239,192,61,.72); border-radius: 999px; background: rgba(23,63,56,.92); color: var(--cream); font-size: 13px; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); transition: background 160ms ease, color 160ms ease; }
.menu-toggle:hover, .menu-toggle:focus-visible, .menu-toggle[aria-expanded="true"] { background: var(--gold); color: var(--forest); outline: 2px solid var(--cream); outline-offset: 2px; }
.slide-menu { position: absolute; z-index: 30; top: 62px; right: 16px; width: min(360px, calc(100vw - 24px)); max-height: min(70vh, 640px); padding: 12px; display: flex; flex-direction: column; border: 2px solid var(--gold); border-radius: 16px; background: var(--cream); color: var(--forest); box-shadow: 6px 6px 0 rgba(23,63,56,.35); }
.slide-menu[hidden] { display: none; }
.slide-menu-heading { padding: 4px 8px 10px; font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; }
.slide-menu-list { margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.slide-menu-list li + li { margin-top: 3px; }
.slide-menu-item { width: 100%; padding: 10px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--forest); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.slide-menu-item:hover, .slide-menu-item:focus-visible { background: var(--mint); outline: 2px solid var(--gold); outline-offset: 1px; }
.slide-menu-item[aria-current="page"] { background: var(--forest); color: var(--cream); }
.edge-control { position: absolute; z-index: 18; top: 50%; width: 54px; height: 92px; margin-top: -46px; display: grid; place-items: center; border: 1px solid rgba(239,192,61,.4); background: rgba(23,63,56,.28); color: var(--gold); cursor: pointer; opacity: .22; transition: opacity 160ms ease, background 160ms ease; }
.edge-control span { font-family: 'Space Grotesk', sans-serif; font-size: 54px; line-height: 1; transform: translateY(-3px); }
.edge-control:hover, .edge-control:focus-visible { opacity: .94; background: rgba(23,63,56,.9); outline: 2px solid var(--gold); outline-offset: 2px; }
.edge-previous { left: 0; border-left: 0; border-radius: 0 14px 14px 0; }
.edge-next { right: 0; border-right: 0; border-radius: 14px 0 0 14px; }
.keyboard-hint { position: absolute; z-index: 21; left: 50%; bottom: max(17px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; padding: 8px 13px; border-radius: 999px; background: rgba(23,63,56,.82); color: rgba(249,252,248,.82); font-size: 12px; letter-spacing: .02em; pointer-events: none; transition: opacity 1s ease; }
.keyboard-hint.is-hidden { opacity: 0; }
@media (max-width: 760px) {
  #slide-frame { left: 0; top: 48px; width: 100vw; height: calc(100vh - 48px); height: calc(100dvh - 48px); transform: none !important; box-shadow: none; }
  .top-bar { left: 0; right: 0; top: 4px; height: 44px; justify-content: flex-end; padding: 2px 12px; gap: 9px; background: rgba(23,63,56,.98); border-bottom: 1px solid rgba(239,192,61,.2); }
  .slide-counter { min-width: 68px; padding: 6px 9px; font-size: 11px; }
  .fullscreen { width: 36px; height: 36px; font-size: 22px; }
  .menu-toggle { min-height: 36px; padding: 0 11px; font-size: 12px; }
  .slide-menu { top: 52px; right: 8px; width: min(340px, calc(100vw - 16px)); max-height: 70dvh; padding: 10px; }
  .slide-menu-item { padding: 11px; font-size: 13px; }
  .edge-control { width: 32px; height: 60px; margin-top: -20px; opacity: .34; background: rgba(23,63,56,.32); }
  .edge-control span { font-size: 40px; }
  .keyboard-hint { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }