:root{
  --accent: #B8925A;
  --accent-soft: color-mix(in srgb, var(--accent) 35%, transparent);
}

html[data-theme="dark"]{
  --bg-a:#241E1B;
  --bg-b:#120D0B;
  --table-a:#1c1512;
  --table-b:#0c0806;
  --text:#EDE3D0;
  --text-dim:#B9AD98;
  --panel-bg:rgba(28,22,19,0.92);
  --panel-border:rgba(184,146,90,0.22);
  --shadow-strength:0.55;
  --grain-opacity:0.05;
}
html[data-theme="light"]{
  --bg-a:#EFE6D3;
  --bg-b:#D8C9A6;
  --table-a:#cbb98d;
  --table-b:#a68f5e;
  --text:#2B2015;
  --text-dim:#5A4A30;
  --panel-bg:rgba(255,251,242,0.92);
  --panel-border:rgba(120,90,40,0.22);
  --shadow-strength:0.28;
  --grain-opacity:0.035;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Inter',sans-serif;
  background:radial-gradient(ellipse at 50% 0%, var(--bg-a) 0%, var(--bg-b) 100%);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow-x:hidden;
  position:relative;
  transition:background 0.5s ease, color 0.5s ease;
}

/* ---------------- Animated ambient background ---------------- */
.bg-layer{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:0.35;
  background:radial-gradient(circle, var(--accent) 0%, transparent 70%);
  will-change:transform;
}
.blob-a{width:46vw; height:46vw; top:-14vw; left:-10vw; animation:drift1 26s ease-in-out infinite;}
.blob-b{width:38vw; height:38vw; top:20vh; right:-12vw; animation:drift2 32s ease-in-out infinite;}
.blob-c{width:34vw; height:34vw; bottom:-14vw; left:20vw; animation:drift3 30s ease-in-out infinite;}

@keyframes drift1{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(4vw,6vh) scale(1.12);}
}
@keyframes drift2{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-5vw,4vh) scale(0.9);}
}
@keyframes drift3{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(3vw,-5vh) scale(1.08);}
}

.grain{
  position:absolute; inset:0;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

@media (prefers-reduced-motion: reduce){
  .blob{animation:none;}
}

/* ---------------- Header ---------------- */
.site-header{
  position:relative; z-index:2;
  text-align:center;
  padding:clamp(20px,4vh,40px) 20px 6px;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--accent);
  opacity:0.9;
  margin-bottom:8px;
}
.title{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(22px,3.6vw,36px);
  margin:0;
  line-height:1.2;
}
.title .sd{
  display:block;
  direction:rtl;
  font-size:clamp(18px,2.6vw,24px);
  font-weight:300;
  color:var(--accent);
  margin-top:6px;
}

/* ---------------- Scene ---------------- */
.scene{
  position:relative; z-index:1;
  width:100%;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:10px 16px 20px;
}
.table-plane{
  position:absolute;
  left:0; right:0; bottom:0;
  height:52%;
  background:
    linear-gradient(180deg, transparent 0%, var(--table-a) 22%, var(--table-b) 100%);
  z-index:-1;
  transition:background 0.5s ease;
}
.table-plane::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0px, transparent 2px 90px);
  opacity:0.5;
}

.book-wrap{
  position:relative;
  width:min(86vw, 400px);
  margin-top:clamp(10px,2vh,26px);
  perspective:2200px;
}
.book-shadow{
  position:absolute;
  left:6%; right:6%;
  bottom:-22px;
  height:34px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,var(--shadow-strength)) 0%, transparent 72%);
  filter:blur(6px);
  transition:opacity 0.3s ease, transform 0.3s ease;
  z-index:0;
}

.book-stage{
  position:relative;
  width:100%;
  aspect-ratio: var(--book-ratio, 664/1085);
  transform-style:preserve-3d;
  box-shadow:
    0 22px 46px -18px rgba(0,0,0,calc(var(--shadow-strength) + 0.15)),
    0 2px 0 1px rgba(0,0,0,0.15);
  border-radius:2px;
  background:#0e0b09;
}

.page-layer{position:absolute; inset:0; border-radius:2px; overflow:hidden;}
.page-layer img{width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none;}

.under-layer{z-index:1;}
.flip-layer{
  z-index:2;
  transform-style:preserve-3d;
  transform-origin:right center;
  transition:transform 0.55s cubic-bezier(.4,.2,.2,1);
  will-change:transform;
}
.flip-layer.origin-left{transform-origin:left center;}
.flip-layer.dragging{transition:none;}
.face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  border-radius:2px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06);
}
.front-face::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0.28) 0%, transparent 14%);
  opacity:var(--curl-opacity, 0);
  pointer-events:none;
  transition:opacity 0.2s ease;
}
.flip-layer.origin-left .front-face::after{
  background:linear-gradient(270deg, rgba(0,0,0,0.28) 0%, transparent 14%);
}

.nav-zone{
  position:absolute; top:0; bottom:0; width:30%;
  z-index:5; cursor:pointer;
  background:transparent;
}
.nav-zone.left{left:0;}
.nav-zone.right{right:0;}

.hint-arrow{
  position:absolute; top:50%; z-index:6;
  transform:translateY(-50%);
  font-family:'Fraunces', serif;
  font-size:26px;
  color:rgba(237,227,208,0.85);
  text-shadow:0 2px 6px rgba(0,0,0,0.5);
  opacity:0; transition:opacity 0.25s ease;
  pointer-events:none;
}
.hint-left{left:10px;}
.hint-right{right:10px;}
.book-stage:hover .hint-arrow{opacity:0.55;}

/* ---------------- Control bar ---------------- */
.control-bar{
  position:relative; z-index:2;
  margin-top:clamp(16px,3vh,30px);
  display:flex; align-items:center; gap:14px;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  padding:10px 14px;
  border-radius:999px;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -14px rgba(0,0,0,0.4);
}
.icon-btn{
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--panel-border);
  background:transparent;
  color:var(--text);
  font-size:16px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:all 0.2s ease;
}
.icon-btn:hover{background:var(--accent-soft); transform:scale(1.05);}
.icon-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.folio-block{width:150px; text-align:center;}
.folio{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.05em;
  color:var(--text-dim);
  margin-bottom:6px;
  white-space:nowrap;
}
.progress-rail{
  width:100%; height:3px; border-radius:3px;
  background:rgba(128,128,128,0.25);
  position:relative;
}
.progress-fill{
  position:absolute; left:0; top:0; bottom:0;
  background:var(--accent);
  border-radius:3px;
  width:0%;
  transition:width 0.35s ease;
}

/* ---------------- Drawers ---------------- */
.drawer-overlay{
  position:fixed; inset:0; z-index:20;
  background:rgba(0,0,0,0.5);
  opacity:0; pointer-events:none;
  transition:opacity 0.3s ease;
  display:flex; justify-content:flex-end;
}
.drawer-overlay.open{opacity:1; pointer-events:auto;}
.drawer{
  width:min(86vw, 360px);
  height:100%;
  background:var(--panel-bg);
  border-left:1px solid var(--panel-border);
  transform:translateX(100%);
  transition:transform 0.35s cubic-bezier(.4,.1,.2,1);
  display:flex; flex-direction:column;
  backdrop-filter:blur(14px);
}
.drawer-overlay.open .drawer{transform:translateX(0);}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 18px 14px;
  font-family:'Fraunces', serif;
  font-size:18px;
  border-bottom:1px solid var(--panel-border);
}
.drawer-grid{
  padding:16px; overflow-y:auto;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
}
.thumb-item{
  cursor:pointer;
  border-radius:3px;
  overflow:hidden;
  border:2px solid transparent;
  transition:border 0.2s ease, transform 0.15s ease;
  background:#000;
  aspect-ratio:40/50;
}
.thumb-item img{width:100%; height:100%; object-fit:cover; display:block; opacity:0.92; pointer-events:none;}
.thumb-item:hover{transform:scale(1.04);}
.thumb-item.active{border-color:var(--accent);}

.settings-body{padding:18px;}
.settings-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  border-bottom:1px solid var(--panel-border);
}
.settings-row.help{
  font-size:12px; line-height:1.6; color:var(--text-dim);
  display:block; border-bottom:none; padding-top:18px;
}
.settings-label{font-size:13.5px; color:var(--text-dim);}
.theme-toggle{display:flex; border:1px solid var(--panel-border); border-radius:999px; overflow:hidden;}
.theme-opt{
  border:none; background:transparent; color:var(--text-dim);
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.05em;
  padding:7px 14px; cursor:pointer;
}
.theme-opt.active{background:var(--accent); color:#1a1310;}
#accentPicker{
  width:38px; height:28px; border:none; border-radius:6px;
  background:none; cursor:pointer;
}

/* ---------------- Footer ---------------- */
.site-footer{
  position:relative; z-index:1;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-dim); opacity:0.7;
  padding:16px 0 28px;
}

/* ---------------- Responsive ---------------- */
@media (min-width:720px){
  .book-wrap{width:min(46vw, 420px); margin-top:18px;}
  .drawer-grid{grid-template-columns:repeat(5,1fr);}
}
@media (min-width:1100px){
  .book-wrap{width:380px;}
}
@media (max-width:420px){
  .control-bar{gap:8px; padding:8px 10px;}
  .folio-block{width:110px;}
}