*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Cairo",Arial,sans-serif;background:#111;color:#222;padding-bottom:74px}.loader{position:fixed;inset:0;background:#111;color:#fff;z-index:999;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;transition:.4s}.loader.hide{opacity:0;visibility:hidden}.logo-ring{width:82px;height:82px;border:5px solid #c71820;border-radius:50%;display:grid;place-items:center;font-size:46px;color:#f28a25}.topbar{height:66px;background:linear-gradient(135deg,#9e0c13,#d61e28);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 14px;position:sticky;top:0;z-index:30;box-shadow:0 4px 16px #0005}.brand{text-align:center;line-height:1.15}.brand b{display:block}.brand small{font-size:11px}.icon-btn{width:42px;height:42px;border:0;border-radius:12px;background:#ffffff22;color:#fff;font-size:23px}.screen{display:none;min-height:calc(100vh - 140px)}.screen.active{display:block}.cover{position:relative;text-align:center;background:#111}.cover img{width:100%;max-width:1100px;display:block;margin:auto;min-height:calc(100vh - 140px);object-fit:contain;background:#111}.start-btn{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);border:0;border-radius:999px;background:#c81921;color:#fff;padding:14px 34px;font:800 18px "Cairo";box-shadow:0 8px 28px #0008}.categories{background:#f7f1e7;padding:26px 14px}.heading{text-align:center;margin-bottom:20px}.heading h1{margin:0;color:#b30e16}.heading p{margin:5px 0;color:#666}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;max-width:820px;margin:auto}.grid button{min-height:128px;border:0;border-radius:20px;background:#fff;box-shadow:0 9px 28px #6712;color:#a40d14;font-family:inherit;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:12px}.grid span{font-size:39px}.grid b{font-size:15px}.viewer{background:#1a1a1a;padding:10px}.toolbar{max-width:1100px;margin:0 auto 10px;background:#fff;border-radius:15px;padding:9px;display:grid;grid-template-columns:76px 1fr 76px;gap:8px;align-items:center}.toolbar div{text-align:center}.toolbar small{display:block;color:#777}.toolbar button{border:0;border-radius:10px;background:#b90f18;color:#fff;padding:9px 3px;font-family:inherit;font-weight:700}.stage{max-width:1100px;margin:auto;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 12px 32px #0008;touch-action:pan-y}.stage img{width:100%;display:block;cursor:zoom-in}.dots{display:flex;justify-content:center;gap:7px;padding:12px}.dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#777}.dots button.active{background:#d71920;transform:scale(1.4)}.hint{text-align:center;color:#bbb;font-size:12px;margin:0 0 10px}.bottom-nav{height:70px;position:fixed;bottom:0;left:0;right:0;background:#fff;z-index:40;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 -4px 18px #0004}.bottom-nav a,.bottom-nav button{border:0;background:transparent;text-decoration:none;color:#333;font-family:inherit;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center}.bottom-nav span{font-size:21px;color:#c81921}.drawer{position:fixed;top:0;bottom:0;right:-330px;width:min(85vw,330px);background:#fff;z-index:60;padding:18px;transition:.3s;box-shadow:-12px 0 32px #0006}.drawer.open{right:0}.drawer-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;padding-bottom:12px}.drawer-head button{border:0;border-radius:50%;width:36px;height:36px;font-size:24px}.drawer nav{display:grid;gap:7px;margin-top:14px}.drawer nav button{border:0;border-radius:12px;background:#f5eee5;padding:12px;text-align:right;font-family:inherit;font-weight:700;color:#9f0c13}.backdrop{position:fixed;inset:0;background:#0008;z-index:50;opacity:0;visibility:hidden;transition:.3s}.backdrop.show{opacity:1;visibility:visible}.lightbox{position:fixed;inset:0;background:#000f;z-index:100;overflow:auto;padding:52px 0 18px;display:flex;justify-content:center;align-items:flex-start;opacity:0;visibility:hidden;transition:.25s}.lightbox.open{opacity:1;visibility:visible}.lightbox img{width:min(100%,1500px);height:auto}.lightbox button{position:fixed;top:9px;left:12px;width:40px;height:40px;border:0;border-radius:50%;font-size:26px;z-index:101}@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}.viewer{padding:18px}}