/* ======================
   Wood table + stacked pages + STICKY NOTE
   ====================== */

/* ---------- Vars ---------- */
:root{
  --desk-base:#3a2516; --desk-deep:#2b1a10; --desk-warm:#5a3925; --link:#0b5fff;
  --page-w:min(8.5in, 90vw); --page-h:min(11in, 85vh); --page-pad:18mm;
  --paper:#fffdf7; --ink:#0b1220; --muted:#6b7280; --accent:#0f172a;
  --body-size:11pt; --lead-size:1.04rem; --measure:55ch;
  --shadow:0 24px 50px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.18);
  --shadow-soft:0 12px 28px rgba(0,0,0,.18), 0 2px 10px rgba(0,0,0,.12);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:"Merriweather", Georgia, "Times New Roman", serif;font-size:var(--body-size);line-height:1.55;overflow-x:hidden}

/* ---------- WOOD BACKGROUND ---------- */
.desk-bg{position:relative;background:linear-gradient(180deg,var(--desk-warm),var(--desk-base))}
.desk-bg::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><filter id='A'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.08' numOctaves='3' seed='7'/><feColorMatrix type='matrix' values='1 0 0 0 0,0 1 0 0 0,0 0 1 0 0,0 0 0 .22 0'/></filter><rect width='100%' height='100%' fill='%23fff' filter='url(%23A)'/></svg>"),
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><filter id='B'><feTurbulence type='fractalNoise' baseFrequency='0.015 0.4' numOctaves='2' seed='11'/><feColorMatrix type='matrix' values='1 0 0 0 0,0 1 0 0 0,0 0 1 0 0,0 0 0 .12 0'/></filter><rect width='100%' height='100%' fill='%23fff' filter='url(%23B)'/></svg>");
  background-size:1600px 1000px, 1400px 900px;background-repeat:repeat,repeat;mix-blend-mode:overlay;opacity:.9
}
.desk-bg::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 280px,rgba(0,0,0,.22) 281px,rgba(0,0,0,.26) 284px,rgba(0,0,0,0) 285px),
    linear-gradient(90deg, rgba(140,92,63,.12), rgba(0,0,0,0) 35%, rgba(140,92,63,.12) 70%, rgba(0,0,0,0)),
    radial-gradient(1200px 750px at 50% -10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 520px at 85% 115%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg,var(--desk-warm),var(--desk-base));
  background-blend-mode:multiply,soft-light,screen,screen,normal;opacity:.95
}
.grain{position:fixed;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.06'/></feComponentTransfer></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");opacity:.5;mix-blend-mode:overlay}

/* ---------- STICKY NOTE (desk item) ---------- */
.sticky-note{
  position:fixed;
  right:2.4vw; top:10vh;
  width: 240px; max-width: 34vw;
  background: #fff6a9;
  color:#3a2e00;
  box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.25);
  border:1px solid rgba(0,0,0,.15);
  border-radius:6px;
  padding:14px 14px 12px 14px;
  transform: rotate(-3deg);
  transform-origin: center top;
  z-index: 60;
  font: 600 14px/1.35 "Inter", system-ui, sans-serif;
}
.sticky-note::before{
  /* pushpin */
  content:"";
  position:absolute; width:14px; height:14px; border-radius:50%;
  background:#d22; top:-7px; left:18px;
  box-shadow: 0 3px 6px rgba(0,0,0,.35);
}
.sticky-title{
  font-weight:800; letter-spacing:.2px; margin:0 0 8px; color:#2a2300;
}
.sticky-note ol{
  list-style:none; padding-left:0; margin:0;
}
.sticky-note li + li{ margin-top:6px }
.sticky-note a{
  color:#1a1700; text-decoration:none; border-bottom:1px dotted rgba(26,23,0,.45);
}
.sticky-note a:hover{ text-decoration:underline }
@media (max-width:920px){
  .sticky-note{ right:8px; top:8px; transform:none; width:auto; max-width:65vw }
}

/* Hide sticky note in print */
@media print{ .sticky-note{ display:none !important } }

/* Screenshot reference boxes */
.screenshot-ref{
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 16px 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  text-align: center;
}
.screenshot-ref p{
  margin: 8px 0;
  color: #334155;
  font-weight: 500;
}
.screenshot-ref strong{
  color: #0f172a;
  font-weight: 700;
}
.screenshot-img{
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 10px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  border: 1px solid #e2e8f0;
}

/* YouTube and video link styling */
.youtube-btn, .video-link{
  display: inline-block;
  background: linear-gradient(135deg, #ff0000, #cc0000);
  color: white;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(255,0,0,0.3);
  transition: all 0.2s ease;
  font-family: "Inter", system-ui, sans-serif;
}

.youtube-btn:hover, .video-link:hover{
  background: linear-gradient(135deg, #e60000, #b30000);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255,0,0,0.4);
  color: white;
  text-decoration: none;
}

.youtube-btn:active, .video-link:active{
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(255,0,0,0.3);
}

/* Page indicator */
.page-indicator{
  position: fixed;
  top: 20px;
  left: 20px;
  background: rgba(255,255,255,0.9);
  padding: 8px 12px;
  border-radius: 20px;
  font: 600 12px/1 "Inter", system-ui, sans-serif;
  color: #334155;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 100;
}

/* Navigation buttons */
.nav-buttons{
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
}

.action-buttons{
  display: flex;
  gap: 8px;
}

.nav-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  font: 600 13px/1 "Inter", system-ui, sans-serif;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  white-space: nowrap;
}

.back-btn{
  background: rgba(255,255,255,0.95);
  color: #475569;
  border: 1px solid rgba(71,85,105,0.2);
}

.back-btn:hover{
  background: #f8fafc;
  color: #334155;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.buy-btn{
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border: 1px solid rgba(29,78,216,0.3);
}

.buy-btn:hover{
  background: linear-gradient(135deg, #2563eb, #1e40af);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59,130,246,0.4);
}

.download-btn{
  background: linear-gradient(135deg, #059669, #047857);
  color: white;
  border: 1px solid rgba(4,120,87,0.3);
}

.download-btn:hover{
  background: linear-gradient(135deg, #047857, #065f46);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(5,150,105,0.4);
}

@media (max-width: 768px){
  .nav-buttons{
    position: relative;
    top: 10px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .action-buttons{
    flex-direction: column;
    width: 100%;
    align-items: center;
  }
  
  .nav-btn{
    font-size: 12px;
    padding: 8px 12px;
    min-width: 120px;
    justify-content: center;
  }
}

/* ---------- Book (stack) ---------- */
.book{width:min(var(--page-w),92vw);margin:4rem auto 3rem;position:relative;perspective:1400px}
.page-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:50;border:none;background:rgba(255,255,255,.9);
  color:#111;width:42px;height:42px;border-radius:999px;box-shadow:var(--shadow-soft);cursor:pointer;display:grid;place-items:center;
  font:700 18px/1 "Inter", system-ui, sans-serif;transition:transform .15s ease, box-shadow .2s ease, background .2s ease
}
.page-btn:hover{transform:translateY(-50%) scale(1.05)} .page-btn:active{transform:translateY(-50%) scale(.98)}
.page-btn.prev{left:-22px} .page-btn.next{right:-22px}
@media(max-width:980px){.page-btn.prev{left:4px}.page-btn.next{right:4px}}

/* ---------- Pages: stacked absolute ---------- */
.page{
  position:absolute; inset:0; width:var(--page-w); height:var(--page-h); margin:0 auto;
  padding:var(--page-pad);
  background:
    radial-gradient(120% 120% at 50% 40%, rgba(0,0,0,.05) 0%, rgba(0,0,0,.02) 46%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.03), rgba(0,0,0,.03) 1px, transparent 1px, transparent 3px),
    var(--paper);
  border-radius:12px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06);
  transform-style:preserve-3d; transform-origin:left center; backface-visibility:hidden;
  transition:transform .7s cubic-bezier(.2,.6,.2,1), filter .35s ease, box-shadow .35s ease;
  will-change:transform, box-shadow, filter; isolation:isolate;
  overflow-y:auto; overflow-x:hidden;
}
/* Only the top page should accept pointer events */
.page{ pointer-events:none; opacity:0 }
.page.is-top{ pointer-events:auto; opacity:1 }
.page.is-active{ opacity:1 }
/* Hover tilt on top page only */
.page.is-top:hover{ transform:rotateX(.4deg) rotateY(.6deg) translateZ(0.1px) }
/* Turn animations */
.page.turn-left{ transform:rotateY(-180deg); opacity:0 }
.page.prepare-right{ transform:rotateY(-180deg); opacity:0 }
.page.turn-right-in{ transform:rotateY(0deg); opacity:1 }
.page.is-exiting{ filter:brightness(.96) saturate(.98) }
.page.is-entering{ filter:brightness(1.02) }

/* ---------- Typography & components ---------- */
h1,h2,h3,h4{font-family:"Inter",system-ui,sans-serif;color:var(--accent);margin:0 0 8px}
.title{font-weight:800;font-size:32px;letter-spacing:-0.5px}
.subtitle{font-weight:700;font-size:15px;color:#0b1220}
h2{font-size:20px;margin:0 0 12px}
h3{font-size:16px;margin:0 0 8px}
p,li{color:#111;margin:0 0 10px;max-width:var(--measure);font-size:var(--body-size);line-height:1.45}
code{font-family:"Courier New",ui-monospace,monospace;background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:10pt}
pre code{display:block;padding:10px;font-size:9pt;line-height:1.3}
.cover{display:flex;gap:28px;align-items:center;margin-bottom:18px}
.cover-left{flex:1}.cover-right{width:120px;display:flex;justify-content:center;align-items:center}
.meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}
.meta dt{font-weight:700;font-size:12px;color:var(--muted)} .meta dd{margin:0 0 0 .4rem;color:#0b1220;font-weight:600}
.exec{background:#fbfdff;padding:14px 16px;border-left:4px solid #e6f2ff;border-radius:6px}
.lead{font-size:var(--lead-size)}

/* Footer */
.doc-footer{
  position:relative; z-index:55; width:var(--page-w); margin:0 auto 2rem;
  display:flex;justify-content:space-between;align-items:center;
  color:#f2f4ff;font:600 12px/1 "Inter",system-ui,sans-serif;opacity:.9
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){ .page, .page-btn{transition:none !important} html{scroll-behavior:auto} }

/* Print */
@media print{
  body{background:white}
  .grain,.page-btn,.doc-footer,.sticky-note,.nav-buttons,.page-indicator{display:none !important}
  .book{perspective:none;margin:0}
  .page{position:static;box-shadow:none;border:none;border-radius:0;margin:0;padding:18mm;width:auto;height:auto;page-break-after:always;transform:none !important;background:white}
}

/* Small screens */
@media (max-width:980px){ :root{--page-w:94vw;--page-h:auto} .page{height:auto} }