/* eHudHud home screen: a daytime storybook look (sticky header, hero, saffron shelf, how it works, about, footer).
   Only the library screen (#lib) is styled here; the reader keeps app/styles.css. Loaded after styles.css. */
.lib{--cream:#f9f4e7;--saffron:#f5a524;--coral:#e8432d;--coral-dk:#b8301e;--cocoa:#44231d;--brown:#5b3a2c;--brown-dim:#8a6a58;--sky:#4fb3e8;
  --f-round:'Baloo Bhaijaan 2','Readex Pro',sans-serif;
  display:block;max-width:none;margin:0;padding:0;gap:0;min-height:100vh;background:var(--cream);color:var(--brown);color-scheme:light;position:relative;overflow-x:clip}
.lib a{color:inherit;text-decoration:none}
.lib :is(button,a):focus-visible{outline-color:var(--coral)}
.lib .wrap{max-width:1180px;margin-inline:auto;padding-inline:16px}

/* header */
.lib .nav{position:sticky;top:0;z-index:20;background:rgb(249 244 231 / .94);backdrop-filter:blur(6px);border-block-end:1px solid #eadfc4;border-block-start:3px solid var(--coral)}
.lib .nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.lib .logo{display:flex;align-items:baseline;gap:8px}
.lib .logo-ar{font-family:var(--f-round);font-weight:800;font-size:1.7rem;line-height:1;color:var(--coral)}
.lib .logo-en{font-family:var(--f-round);font-weight:700;font-size:.9rem;color:var(--sky)}
.lib .nav nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:end}
.lib .nav nav a{font-weight:600;font-size:.95rem;padding:8px 14px;border-radius:999px}
.lib .nav nav a:hover{background:#f6e2cf}
.lib .nav nav a.on{background:#f8dccd;color:var(--coral)}
.lib .nav nav a.cta{background:var(--coral);color:#fff;box-shadow:0 3px 0 var(--coral-dk)}
.lib .nav .acct{margin:0;background:#fff;color:var(--brown);border:1px solid #e3d3b2;min-height:38px}
@media (max-width:640px){.lib .nav nav a:not(.cta){display:none}}

/* hero */
.lib .hero{position:relative;text-align:center;padding-block:64px 40px}
.lib .blob{position:absolute;inset-inline-start:-80px;top:-60px;width:300px;aspect-ratio:1;border-radius:50%;background:#f6e7c4}
.lib .sp{position:absolute;color:var(--saffron);opacity:.55;font-size:1.6rem;animation:hh-twinkle 4s ease-in-out infinite alternate}
@keyframes hh-twinkle{from{transform:scale(.85) rotate(0)}to{transform:scale(1.1) rotate(12deg)}}
.lib .hero>.wrap{position:relative;z-index:1}
.lib .pill{display:inline-flex;align-items:center;gap:8px;background:#f8e6b9;border:1px dashed #e8c374;color:var(--cocoa);font-weight:600;font-size:.9rem;border-radius:999px;padding:6px 16px}
.lib .hero h1{font-family:var(--f-round);font-weight:800;color:var(--cocoa);font-size:clamp(2.4rem,8vw,4.8rem);line-height:1.2;margin:22px 0 12px;text-wrap:balance}
.lib .hero h1 em{font-style:normal;color:var(--coral)}
.lib .lead{max-width:36rem;margin:0 auto;font-size:clamp(1rem,2.4vw,1.2rem);line-height:1.9;color:var(--brown-dim)}
.lib .btn{display:inline-block;font-family:var(--f-round);font-weight:800;font-size:1.25rem;background:var(--coral);color:#fff;border-radius:999px;padding:12px 38px;margin-block-start:28px;box-shadow:0 5px 0 var(--coral-dk);transition:transform .15s ease}
.lib .btn:hover{transform:translateY(-2px)}
.lib .hero-covers{display:flex;justify-content:center;align-items:end;gap:clamp(12px,4vw,48px);margin-block-start:48px;padding-inline:8px}
.lib .hero-covers button{all:unset;cursor:pointer;width:min(44%,440px);aspect-ratio:5/3;border-radius:18px;overflow:hidden;border:5px solid #fff;box-shadow:0 18px 34px -14px rgb(68 35 29 / .45);transition:transform .25s ease}
.lib .hero-covers button:nth-child(1){transform:rotate(3deg)}
.lib .hero-covers button:nth-child(2){transform:rotate(-3deg) translateY(16px)}
.lib .hero-covers button:hover{transform:rotate(0) translateY(-6px)}
.lib .hero-covers img{display:block;width:100%;height:100%;object-fit:cover}

/* sections */
.lib .wave{display:block;width:100%;height:56px}
.lib .sec-h{font-family:var(--f-round);font-weight:800;font-size:clamp(2rem,5.5vw,3.2rem);text-align:center;margin:0;line-height:1.3}
.lib .shelfsec{background:var(--saffron);padding-block:40px 64px}
.lib .shelfsec .sec-h{color:#fff8e6}
.lib .squig{display:block;width:180px;height:14px;margin:6px auto 0}
.lib #shelfCount{text-align:center;margin:10px 0 36px;color:var(--cocoa);font-weight:600}

/* the shelf: tilted storybook cards */
.lib .shelf{gap:32px 20px}
@media (min-width:760px){.lib .shelf{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lib .bk{gap:12px;text-align:center}
.lib .cv{margin-inline:0;border-radius:16px;border:4px solid #fff8e6;box-shadow:0 14px 24px -12px rgb(68 35 29 / .5)}
.lib .cv::after{display:none}
.lib .shelf>.bk:nth-child(odd) .cv{transform:rotate(-2deg)}
.lib .shelf>.bk:nth-child(even) .cv{transform:rotate(2deg)}
.lib button.bk:hover .cv,.lib button.bk:focus-visible .cv{transform:rotate(0) translateY(-6px)}
.lib .go{bottom:6cqw;background:var(--coral);color:#fff;font-weight:700;border-radius:999px;padding:.35em 1.1em;box-shadow:0 3px 0 var(--coral-dk)}
.lib .bk.locked .cv img{filter:saturate(.75) brightness(.85)}
.lib .bk.locked .go{background:var(--cocoa);color:#fff4dc;border:0;box-shadow:0 3px 0 #2a140f}
.lib .tagx{background:#fff8e6;color:var(--cocoa);font-weight:700;border-radius:999px}
.lib .tagx.mine{background:var(--sky);color:#fff}
.lib .plank{display:none}
.lib .lb{padding:0;justify-items:center}
.lib .bt{font-family:var(--f-round);font-weight:700;font-size:1.2rem;line-height:1.4;color:var(--cocoa)}
.lib .bm{font-size:.8rem;color:#6b4a1a}
.lib .pr{width:70%;height:6px;border-radius:3px;background:rgb(255 248 230 / .6)}
.lib .pr i{background:var(--coral)}
.lib .soon .cv{border-style:dashed}
.lib .t1 .cv{background:#7cc4ec}.lib .t2 .cv{background:#f19a7f}.lib .t3 .cv{background:#a8d58f}.lib .t4 .cv{background:#d7b2e6}
.lib .cn{font-family:var(--f-round);font-weight:800;color:#fff;opacity:.85}
.lib .lib-note{margin:40px 0 0;text-align:center;font-size:.95rem;color:var(--cocoa)}

/* how it works */
.lib .how{padding-block:56px 72px}
.lib .how .sec-h{color:var(--brown)}
.lib .steps{list-style:none;padding:0;margin:44px auto 0;max-width:900px;display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.lib .steps li{text-align:center;display:grid;justify-items:center;gap:10px}
.lib .steps b{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:2px dashed var(--saffron);background:#fdf0cf;color:var(--coral);font-family:var(--f-round);font-weight:800;font-size:1.5rem}
.lib .steps h3{font-family:var(--f-round);font-weight:700;font-size:1.3rem;margin:0;color:var(--brown)}
.lib .steps p{margin:0;color:var(--brown-dim);line-height:1.8;font-size:.95rem;max-width:17rem}

/* about */
.lib .about{background:var(--cocoa);color:#f7ead2;padding-block:48px 72px;text-align:center}
.lib .about .sec-h{color:#fff4dc}
.lib .about .txt{max-width:46rem;margin:24px auto 0;display:grid;gap:14px;line-height:2;font-size:1.02rem;color:#eedbbf}
.lib .about .txt p{margin:0}

/* footer */
.lib .foot{border:0;padding-block:44px 28px;text-align:center;color:var(--brown-dim);font-size:.9rem}
.lib .foot .logo{justify-content:center}
.lib .foot .tagline{margin:10px 0 18px}
.lib .foot nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 20px;font-weight:600;color:var(--brown)}
.lib .foot nav a{color:var(--brown)}
.lib .foot .stars{color:var(--saffron);letter-spacing:.6em;margin:18px 0 8px}
.lib .foot small{font-size:.8rem}
@media (prefers-reduced-motion:reduce){.lib .sp{animation:none}.lib .hero-covers button{transition:none}}