/* SD WEAR Flipbook — styles. No external dependencies. */
:root{
  --bg:#0e0e0e; --panel:#151515; --line:#2a2a2a; --hover:#232323;
  --ink:#f2f1ee; --mute:#a7a49e; --accent:#ff5a1f; --accent-hi:#ff7a47; --accent-ink:#111;
  --font: "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif;
  --pw:300px; --ph:388px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;width:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent)} a:hover{color:var(--accent-hi)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;overflow:hidden}

/* Top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 8px 18px;border-bottom:1px solid var(--line);background:var(--bg);flex:none}
.brand{display:flex;align-items:center;gap:12px;min-width:0;white-space:nowrap;text-transform:uppercase}
.brand-name{font-weight:800;font-size:14px;letter-spacing:.14em}
.brand-sep{width:18px;height:2px;background:var(--accent);flex:none}
.brand-series{font-size:11px;letter-spacing:.3em;color:var(--mute);overflow:hidden;text-overflow:ellipsis}
.shop{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;border-radius:2px;flex:none;transition:background .15s}
.shop:hover{background:var(--accent-hi);color:var(--accent-ink)}

/* Stage */
.stage-wrap{position:relative;flex:1 1 auto;min-height:0;display:flex}
.stage-wrap > .stage{flex:1 1 auto}
.edge-arrow{position:absolute;top:50%;left:8px;z-index:8;width:48px;height:48px;margin-top:-24px;display:grid;place-items:center;padding:0;background:rgba(14,14,14,.72);border:1px solid var(--line);color:var(--ink);border-radius:50%;cursor:pointer;transition:background .15s,color .15s,border-color .15s,opacity .15s}
.edge-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.edge-arrow:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.edge-arrow:disabled{opacity:0;pointer-events:none}
.edge-arrow[hidden]{display:none}
.stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;touch-action:pan-y pinch-zoom;background:radial-gradient(120% 90% at 50% 45%,#1a1a1a 0%,#0e0e0e 70%)}
.stage.zoomed{overflow:auto;touch-action:auto;cursor:grab;overscroll-behavior:contain}
.stage.dragging{cursor:grabbing;user-select:none}
.stage:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.canvas{position:relative;overflow:hidden}
.book{position:absolute;height:var(--ph);perspective:calc(var(--pw) * 4.5);perspective-origin:50% 50%}
.book.spread{width:calc(var(--pw) * 2)}
.book.single{width:var(--pw)}
.stage:not(.zoomed) .book.clickable .slot:not(.empty){cursor:pointer}

.slot{position:absolute;top:0;width:var(--pw);height:var(--ph)}
.slot.l{left:0}
.slot.r{left:var(--pw)}
.book.single .slot.r{left:0}
.slot:not(.empty){box-shadow:0 18px 50px rgba(0,0,0,.55)}

.leaf{position:absolute;top:0;width:var(--pw);height:var(--ph);transform-style:preserve-3d;z-index:5;will-change:transform}
.leaf.fwd{left:var(--pw);transform-origin:0 50%}
.leaf.back{left:0;transform-origin:100% 50%}
.book.single .leaf{left:0;transform-origin:0 50%}
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
.face.has-page{box-shadow:0 10px 40px rgba(0,0,0,.5)}
.face.b{transform:rotateY(180deg)}
.shade{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3}
.face.f .shade{background:linear-gradient(to left,rgba(0,0,0,.85),rgba(0,0,0,.35))}
.leaf.back .face.f .shade{background:linear-gradient(to right,rgba(0,0,0,.85),rgba(0,0,0,.35))}
.face.b .shade{background:linear-gradient(to right,rgba(0,0,0,.85),rgba(0,0,0,.35))}
.leaf.back .face.b .shade{background:linear-gradient(to left,rgba(0,0,0,.85),rgba(0,0,0,.35))}

/* Buy this item */
.buy{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);z-index:6;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 20px 0 16px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.01em;white-space:nowrap;border-radius:3px;box-shadow:0 6px 18px rgba(255,90,31,.28);transition:background .15s,transform .15s}
.buy svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.buy::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--accent);pointer-events:none;animation:buypulse 1.8s ease-out infinite}
.buy:hover{background:#e84a10;color:#fff}
.buy:active{transform:translateX(-50%) scale(.97)}
.buy:focus-visible{outline:2px solid #fff;outline-offset:3px}
@keyframes buypulse{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.18,1.45);opacity:0}100%{opacity:0}}
@media (max-width:640px){.buy{font-size:14px;padding:0 16px 0 13px}}

/* Page */
.page{position:absolute;inset:0;background:#0a0a0a;overflow:hidden}
.page img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;opacity:0;transition:opacity .25s;-webkit-user-drag:none;user-select:none;pointer-events:none}
.page.loaded img{opacity:1}
.page.side-l::after,.page.side-r::after{content:"";position:absolute;top:0;bottom:0;width:7%;pointer-events:none;z-index:2}
.page.side-l::after{right:0;background:linear-gradient(to left,rgba(0,0,0,.45),rgba(0,0,0,0))}
.page.side-r::after{left:0;background:linear-gradient(to right,rgba(0,0,0,.45),rgba(0,0,0,0))}
.loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);opacity:0;animation:fadein .2s .25s forwards}
.page.loaded .loader,.page.error .loader{display:none}
.page-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;font-size:13px;line-height:1.5;color:var(--ink);background:#111;z-index:4}
.page-error strong{color:var(--accent);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.page-error button{min-height:44px;padding:0 18px;background:transparent;color:var(--ink);border:1px solid var(--accent);font:inherit;font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border-radius:2px}
.page-error button:hover{background:var(--accent);color:var(--accent-ink)}
.spin{width:22px;height:22px;border:2px solid #333;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
.boot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);background:var(--bg);z-index:10}
.boot[hidden]{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadein{to{opacity:1}}

/* Thumbnails */
.thumbs{flex:none;border-top:1px solid var(--line);background:var(--panel)}
.thumbs[hidden]{display:none}
.thumbs-list{position:relative;display:flex;gap:8px;margin:0;padding:10px 14px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#444 transparent}
.thumbs-list li{flex:none}
.thumb{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px;background:none;border:0;color:var(--mute);cursor:pointer;font:inherit;font-size:11px;letter-spacing:.14em;border-radius:2px}
.thumb img{display:block;height:92px;width:auto;aspect-ratio:var(--ar);background:#0a0a0a;border:2px solid transparent;transition:border-color .15s}
.thumb:hover img{border-color:#555}
.thumb:hover{color:var(--ink)}
.thumb[aria-current="true"] img{border-color:var(--accent)}
.thumb[aria-current="true"]{color:var(--ink)}

/* Toolbar */
.toolbar{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 22px;padding:6px 10px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--panel)}
.group{display:flex;align-items:center;gap:2px}
.btn{width:44px;height:44px;display:grid;place-items:center;padding:0;background:transparent;border:0;color:var(--ink);cursor:pointer;border-radius:2px;transition:background .15s,color .15s}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square}
.btn:hover:not(:disabled){background:var(--hover);color:var(--accent)}
.btn:disabled{opacity:.28;cursor:default}
.btn[hidden]{display:none}
.btn[aria-expanded="true"],.btn[aria-pressed="true"]{color:var(--accent)}
.counter{display:flex;align-items:center;gap:8px;padding:0 6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.counter input{width:4.6em;height:36px;padding:0 4px;background:var(--bg);border:1px solid var(--line);color:var(--ink);text-align:center;font:inherit;font-size:13px;letter-spacing:.06em;border-radius:2px}
.counter input:focus-visible{outline:none;border-color:var(--accent)}
#pageTotal{color:var(--ink)}
.zoom-level{min-width:44px;text-align:center;font-size:11px;letter-spacing:.1em;color:var(--mute);font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .edge-arrow{width:44px;height:44px;margin-top:-22px}
  .topbar{padding:6px 8px 6px 12px}
  .brand-series{display:none}
  .shop{padding:0 12px;font-size:11px;letter-spacing:.12em}
  .toolbar{gap:0 10px}
  .counter .lbl{display:none}
  .thumb img{height:76px}
}
@media (max-width:360px){ .zoom-level{display:none} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation-duration:.01ms!important}
  .spin{animation:none!important}
  .buy::before{display:none}
}

/* No-JS fallback */
.fallback{max-width:720px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}
.fallback img{width:100%;height:auto;display:block}