:root {
  --bg: #020806;
  --panel: rgba(6, 22, 17, .86);
  --panel-2: rgba(8, 34, 25, .74);
  --emerald: #26e5a5;
  --emerald-2: #0da875;
  --gold: #d7b46a;
  --text: #eefbf6;
  --muted: #91aaa0;
  --danger: #ff6b6b;
  --line: rgba(103, 229, 178, .22);
  --shadow: 0 22px 70px rgba(0,0,0,.55);
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { overflow: hidden; user-select: none; }
button { font: inherit; }
button:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }
img { -webkit-user-drag: none; }
.app-shell { min-height: 100dvh; position: relative; isolation: isolate; overflow: hidden; background:
  radial-gradient(circle at 50% 32%, rgba(20,130,91,.17), transparent 38%),
  radial-gradient(circle at 10% 90%, rgba(215,180,106,.08), transparent 30%),
  linear-gradient(145deg, #020806, #06130f 56%, #020806); }
.app-shell::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.18; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 44px 44px; }
.screen { position:absolute; inset:0; display:none; min-height:100dvh; }
.screen--active { display:flex; }
#screen-loading { align-items:center; justify-content:center; flex-direction:column; text-align:center; gap:12px; padding:24px; }
#screen-loading h1 { margin: 4px 0 0; font-size: clamp(1.35rem, 3vw, 2rem); }
#screen-loading p { margin:0; color:var(--muted); }
.loading-mark { width:78px; height:78px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-size:3rem; color:var(--emerald); box-shadow:0 0 45px rgba(38,229,165,.2); animation:pulse 1.6s ease-in-out infinite; }
.progress-track { width:min(360px, 80vw); height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.progress-track span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--emerald-2),var(--emerald)); transition:width .35s ease; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); backdrop-filter:blur(20px); }
.panel--center { width:min(520px,calc(100% - 32px)); margin:auto; padding:34px; text-align:center; }
.panel-icon { width:58px; height:58px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; background:rgba(255,107,107,.12); color:var(--danger); font-weight:900; font-size:1.6rem; }
.panel h1 { margin:0 0 10px; }
.panel p { margin:0 0 24px; color:var(--muted); line-height:1.55; }
.button { border:0; border-radius:14px; min-height:48px; padding:0 20px; font-weight:850; letter-spacing:.04em; cursor:pointer; transition:transform .18s ease, filter .18s ease, opacity .18s ease; }
.button:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.button:disabled { cursor:not-allowed; opacity:.48; }
.button--primary, .button--finish { color:#02110c; background:linear-gradient(135deg,var(--emerald),#69f3c3); box-shadow:0 10px 28px rgba(38,229,165,.18); }
.button--danger { color:#fff; background:rgba(255,107,107,.2); border:1px solid rgba(255,107,107,.5); }
.topbar { min-height:72px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px clamp(14px,3vw,34px); background:rgba(2,8,6,.78); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); z-index:10; }
.topbar--floating { position:absolute; top:0; left:0; background:linear-gradient(to bottom,rgba(2,8,6,.8),transparent); border-bottom:0; }
.topbar-title { text-align:center; display:grid; gap:3px; }
.eyebrow { color:var(--emerald); font-size:.68rem; letter-spacing:.18em; font-weight:800; }
.icon-button { width:44px; height:44px; border-radius:14px; border:1px solid var(--line); background:rgba(5,20,15,.72); color:var(--text); cursor:pointer; font-size:1.3rem; }
#screen-cover { align-items:stretch; }
.cover-stage { flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px; padding:88px 22px 28px; }
.book-cover-button { position:relative; border:0; background:transparent; padding:0; cursor:pointer; width:min(520px,84vw); height:min(66vh,650px); display:grid; place-items:center; }
.book-cover-button img { display:block; max-width:100%; max-height:100%; object-fit:contain; position:relative; z-index:2; filter:drop-shadow(0 30px 34px rgba(0,0,0,.68)); transition:transform .28s ease, opacity .2s ease; }
.book-cover-button:hover img { transform:translateY(-5px) scale(1.015); }
.book-cover-button.is-opening { pointer-events:none; }
.book-cover-button.is-opening img { transform:none; }
.book-aura { position:absolute; inset:18% 12%; border-radius:50%; background:radial-gradient(circle,rgba(38,229,165,.24),transparent 68%); filter:blur(18px); animation:aura 2.1s ease-in-out infinite; }
.cover-copy { text-align:center; }
.cover-copy h1 { margin:0 0 7px; font-size:clamp(1.25rem,3vw,1.8rem); }
.cover-copy p { margin:0; color:var(--muted); }
#screen-reader { flex-direction:column; }
.reader-main { min-height:0; flex:1; display:grid; grid-template-columns:64px minmax(0,1fr) 64px; align-items:center; gap:10px; padding:18px clamp(6px,2vw,22px); }
.book-spread { height:100%; min-height:0; display:flex; justify-content:center; align-items:center; gap:clamp(4px,1vw,13px); perspective:1600px; }
.page-card { position:relative; height:min(71vh,900px); max-width:46%; aspect-ratio: 0.707 / 1; border-radius:6px; overflow:hidden; background:#ece7db; box-shadow:0 18px 45px rgba(0,0,0,.48); cursor:zoom-in; transform-origin:center; animation:pageIn .28s ease both; }
.page-card:first-child { transform-origin:right center; }
.page-card:last-child { transform-origin:left center; }
.page-card img { width:100%; height:100%; object-fit:contain; background:#fff; display:block; }
.page-card__badge { position:absolute; right:8px; bottom:8px; min-width:28px; height:28px; padding:0 8px; display:grid; place-items:center; border-radius:99px; color:#fff; background:rgba(0,0,0,.64); font-size:.72rem; font-weight:800; }
.nav-arrow { width:52px; height:72px; justify-self:center; border-radius:16px; border:1px solid var(--line); background:rgba(5,22,16,.72); color:var(--text); font-size:2.5rem; cursor:pointer; }
.nav-arrow:disabled { opacity:.22; cursor:not-allowed; }
.reader-footer { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:18px; align-items:center; padding:12px clamp(14px,3vw,34px) max(12px,env(safe-area-inset-bottom)); background:rgba(2,8,6,.84); border-top:1px solid var(--line); backdrop-filter:blur(18px); }
.reader-progress { min-width:0; }
.reader-progress__labels { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:.84rem; margin-bottom:7px; }
.reader-progress__labels strong { color:var(--emerald); }
.progress-track--reader { width:100%; }
.zoom-layer { position:fixed; inset:0; display:none; z-index:100; background:rgba(0,0,0,.94); }
.zoom-layer.is-open { display:flex; flex-direction:column; }
.zoom-toolbar { min-height:70px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:10px; background:#07120f; border-bottom:1px solid var(--line); }
.zoom-button { min-height:42px; border-radius:11px; border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.05); padding:0 15px; cursor:pointer; font-weight:750; }
.zoom-viewport { flex:1; overflow:auto; display:grid; place-items:start center; padding:20px; touch-action:none; }
.zoom-viewport img { max-width:none; transform-origin:top center; transition:transform .15s ease; box-shadow:0 20px 70px rgba(0,0,0,.75); }
.toast { position:fixed; left:50%; bottom:24px; z-index:150; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:12px 18px; border-radius:12px; background:#0c231b; border:1px solid var(--line); box-shadow:var(--shadow); transition:.25s ease; }
.toast.is-visible { transform:translate(-50%,0); opacity:1; }
@keyframes pulse { 50% { transform:scale(1.06); box-shadow:0 0 65px rgba(38,229,165,.34); } }
@keyframes aura { 50% { transform:scale(1.14); opacity:.72; } }
@keyframes pageIn { from { opacity:.15; transform:rotateY(7deg) scale(.985); } to { opacity:1; transform:none; } }
@media (max-width: 760px) {
  .reader-main { grid-template-columns:46px minmax(0,1fr) 46px; gap:2px; padding:10px 2px; }
  .nav-arrow { width:42px; height:64px; }
  .book-spread { gap:0; }
  .page-card { max-width:100%; width:min(100%,520px); height:auto; max-height:calc(100dvh - 225px); }
  .reader-footer { grid-template-columns:1fr; gap:10px; }
  .button--finish { width:100%; }
  .topbar { min-height:64px; }
  .zoom-toolbar { justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; }
  .zoom-toolbar .button--danger { margin-left:auto; white-space:nowrap; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media print { body { display:none !important; } }