@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600&display=swap');

:root { color-scheme: light; --ink:#26372d; --muted:#6f786f; --line:#c9cec1; --paper:#f8f5eb; --green:#365746; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 50% 0,#fffdf5 0,var(--paper) 58%); }
button { font:inherit; }
.slides-heading { padding:30px 0 34px; border-bottom:1px solid var(--line); }
.slides-heading > p { margin:0 0 8px; font:600 .72rem/1.4 "Be Vietnam Pro",sans-serif; letter-spacing:.18em; }
.slides-heading h1 { margin:0; font-size:clamp(2.8rem,6vw,5rem); font-weight:500; letter-spacing:-.035em; }
.slides-heading > div { display:flex; justify-content:space-between; gap:20px; margin-top:18px; color:var(--muted); font-size:1.05rem; }
.slide-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px; padding:42px 0 70px; }
.deck-card { display:block; width:100%; padding:0; text-align:left; color:inherit; border:1px solid var(--line); border-radius:13px; background:#fffdf7; overflow:hidden; cursor:pointer; box-shadow:0 14px 38px rgba(41,57,47,.08); transition:transform .2s,box-shadow .2s,border-color .2s; }
.deck-card:hover,.deck-card:focus-visible { transform:translateY(-4px); border-color:#78907e; box-shadow:0 20px 48px rgba(41,57,47,.14); outline:none; }
.deck-cover { position:relative; aspect-ratio:16/9; background:#ded9cc; overflow:hidden; }
.deck-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.deck-card:hover .deck-cover img { transform:scale(1.015); }
.deck-play { position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg,transparent 50%,rgba(10,22,16,.35)); }
.deck-play span { display:grid; place-items:center; width:64px; height:64px; padding-left:5px; border-radius:50%; color:white; background:rgba(34,62,48,.88); border:1px solid rgba(255,255,255,.7); font:600 1.35rem/1 "Be Vietnam Pro",sans-serif; box-shadow:0 10px 30px rgba(0,0,0,.22); }
.deck-copy { padding:22px 24px 24px; }
.deck-copy h2 { margin:0 0 8px; font-size:clamp(1.55rem,3vw,2.05rem); line-height:1.12; }
.deck-copy p { margin:0; color:var(--muted); font-size:1rem; line-height:1.5; }
.deck-meta { display:flex; justify-content:space-between; margin-top:18px; color:var(--green); font:600 .78rem/1.4 "Be Vietnam Pro",sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.empty { grid-column:1/-1; padding:60px 20px; text-align:center; color:var(--muted); }

.slide-player { width:100vw; max-width:none; height:100vh; max-height:none; margin:0; padding:0; border:0; background:#070907; color:white; overflow:hidden; }
.slide-player[open] { display:grid; grid-template-rows:minmax(0,1fr) auto; }
.slide-player:not([open]) { display:none; }
.slide-player::backdrop { background:#070907; }
.player-stage { position:relative; min-width:0; min-height:0; display:grid; place-items:center; background:#070907; touch-action:pan-y; overflow:hidden; }
.player-stage img { width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; }
.stage-zone { position:absolute; top:0; bottom:0; width:34%; border:0; background:transparent; cursor:pointer; }
.stage-prev { left:0; } .stage-next { right:0; }
.player-bar { position:relative; min-height:70px; display:flex; align-items:center; gap:10px; padding:10px 18px; background:#111812; border-top:1px solid #ffffff24; font-family:"Be Vietnam Pro",sans-serif; }
.player-bar button { min-width:42px; height:42px; padding:0 13px; color:white; border:1px solid #ffffff35; border-radius:8px; background:#ffffff0d; cursor:pointer; }
.player-bar button:hover { background:#ffffff1c; }
.player-title { min-width:0; flex:1; display:flex; align-items:baseline; gap:14px; }
.player-title strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-title span { color:#aeb8b0; font-size:.83rem; white-space:nowrap; }

@media (max-width:760px) {
  .slides-heading { padding-top:20px; }
  .slides-heading > div { display:block; font-size:.96rem; }
  .slides-heading > div span { display:block; margin-top:4px; }
  .slide-gallery { grid-template-columns:1fr; gap:24px; padding-top:28px; }
  .deck-copy { padding:18px; }
  .player-bar { min-height:62px; padding:8px; gap:6px; }
  .player-title strong { display:none; }
  .player-title { flex:0 1 auto; margin-right:auto; }
  #fullScreen { display:none; }
}