:root{--nh-red:#c8202e;--nh-red-bright:#e02334;--nh-ink:#15161a;--nh-ink-2:#1f2024;--nh-ink-3:#2c2e34;--nh-line:#ffffff24;--nh-text:#f4f4f6;--nh-text-dim:#b7bbc4}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{color:var(--nh-text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;overscroll-behavior:none;background:#3a3b3f;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden}button{cursor:pointer;font-family:inherit}.app{background:radial-gradient(120% 90% at 50% 38%,#56575b 0%,#3b3c40 45%,#2b2c30 100%);flex-direction:column;height:100dvh;display:flex;position:fixed;inset:0}.logo{top:calc(18px + env(safe-area-inset-top));left:calc(22px + env(safe-area-inset-left));z-index:40;pointer-events:none;filter:drop-shadow(0 2px 6px #00000059);width:auto;height:34px;position:absolute}.top-actions{top:calc(14px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));z-index:40;gap:8px;display:flex;position:absolute}.gbtn{border:1px solid var(--nh-line);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#14151a6b;border-radius:9px;place-items:center;width:38px;height:38px;text-decoration:none;transition:background .15s,border-color .15s,transform 80ms;display:grid}.gbtn:hover{background:var(--nh-red);border-color:var(--nh-red)}.gbtn:active{transform:translateY(1px)}.gbtn svg{width:17px;height:17px}.stage{flex:auto;place-items:center;min-height:0;padding:8px;display:grid;position:relative}.book-wrap{filter:drop-shadow(0 26px 60px #0009);transition:opacity .45s}.page{background:#fff;position:relative;overflow:hidden}.page img{object-fit:cover;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.page-gutter{pointer-events:none;width:14%;position:absolute;top:0;bottom:0}.page--left .page-gutter{background:linear-gradient(90deg,#0000 0%,#0000000a 60%,#00000038 100%);right:0}.page--right .page-gutter{background:linear-gradient(270deg,#0000 0%,#0000000a 60%,#00000038 100%);left:0}.edge-arrow{color:#ffffff9e;z-index:25;background:0 0;border:none;place-items:center;width:60px;height:84px;transition:color .15s,transform .12s,opacity .15s;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.edge-arrow:hover{color:#fff}.edge-arrow.left:hover{transform:translateY(-50%)translate(-3px)}.edge-arrow.right:hover{transform:translateY(-50%)translate(3px)}.edge-arrow:disabled{opacity:0;pointer-events:none}.edge-arrow svg{filter:drop-shadow(0 2px 6px #00000080);width:46px;height:46px}.edge-arrow.left{left:10px}.edge-arrow.right{right:10px}.controls{margin:0 auto;margin-bottom:calc(18px + env(safe-area-inset-bottom));border:1px solid var(--nh-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:30;background:#14151a8c;border-radius:999px;flex:none;align-items:center;gap:4px;padding:6px 8px;display:flex}.cbtn{color:#fff;background:0 0;border:none;border-radius:50%;place-items:center;width:40px;height:40px;transition:background .15s,transform 80ms,opacity .15s;display:grid}.cbtn:hover{background:var(--nh-red)}.cbtn:active{transform:translateY(1px)}.cbtn:disabled{opacity:.28;pointer-events:none}.cbtn svg{width:19px;height:19px}.counter{font-variant-numeric:tabular-nums;text-align:center;color:#fff;min-width:72px;padding:0 6px;font-size:13px;font-weight:700}.counter small{color:var(--nh-text-dim);font-weight:600}.loader{z-index:10;place-items:center;display:grid;position:absolute;inset:0}.spinner{border:3px solid #ffffff2e;border-top-color:var(--nh-red);border-radius:50%;width:44px;height:44px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.hint{color:var(--nh-text-dim);border:1px solid var(--nh-line);pointer-events:none;z-index:15;white-space:nowrap;background:#14151a99;border-radius:20px;padding:6px 14px;font-size:12px;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.drawer-backdrop{z-index:50;opacity:0;pointer-events:none;background:#0000008c;transition:opacity .25s;position:fixed;inset:0}.drawer-backdrop.open{opacity:1;pointer-events:auto}.drawer{background:var(--nh-ink-2);border-left:1px solid var(--nh-line);z-index:60;flex-direction:column;width:min(400px,90vw);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%)}.drawer.open{transform:translate(0)}.drawer-head{border-bottom:1px solid var(--nh-line);justify-content:space-between;align-items:center;padding:16px 18px;display:flex}.drawer-head h3{letter-spacing:1.2px;text-transform:uppercase;color:var(--nh-text-dim);margin:0;font-size:13px}.sections{flex-wrap:wrap;gap:7px;padding:14px 16px 4px;display:flex}.chip{border:1px solid var(--nh-line);height:30px;color:var(--nh-text-dim);background:0 0;border-radius:16px;padding:0 13px;font-size:12.5px;font-weight:600;transition:all .15s}.chip:hover{color:#fff;border-color:#ffffff4d}.chip.active{background:var(--nh-red);border-color:var(--nh-red);color:#fff}.thumb-grid{flex:auto;grid-template-columns:repeat(2,1fr);gap:12px;padding:14px 16px 18px;display:grid;overflow-y:auto}.thumb{aspect-ratio:1;background:#fff;border:2px solid #0000;border-radius:8px;padding:0;transition:border-color .15s,transform .1s;position:relative;overflow:hidden}.thumb:hover{transform:translateY(-2px)}.thumb.active{border-color:var(--nh-red)}.thumb img{object-fit:cover;width:100%;height:100%;display:block}.thumb .badge{color:#fff;background:#15161ad9;border-radius:6px;padding:2px 7px;font-size:11px;font-weight:700;position:absolute;bottom:6px;left:6px}@media (max-width:800px){.logo{height:28px;top:calc(14px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left))}.edge-arrow{width:44px}.edge-arrow svg{width:34px;height:34px}.hint{text-align:center;white-space:normal;max-width:calc(100vw - 32px);font-size:11px}}@media (max-width:640px){.edge-arrow{display:none}.logo{height:26px}.controls{gap:2px;padding:5px 6px}.cbtn{width:44px;height:44px}.counter{min-width:64px;font-size:12.5px}.stage{padding:4px}}@media (max-height:480px) and (orientation:landscape){.logo{height:22px}.controls{margin-bottom:calc(8px + env(safe-area-inset-bottom))}}@media (hover:none){.thumb:hover{transform:none}}