:root{ color-scheme:light; }
html{ scroll-behavior:smooth; }
body{ font-family:'Cairo',sans-serif; background:#f4f2f8; color:#1a1030; -webkit-font-smoothing:antialiased; }
.num{ font-family:'IBM Plex Mono',monospace; font-feature-settings:"tnum" 1; }
.app{ max-width:480px; margin:0 auto; background:#f4f2f8; min-height:100vh; position:relative; box-shadow:0 0 80px rgba(60,21,80,.12); }
@media(min-width:900px){ .app{ max-width:1160px; } }
.grape-mesh{ background:
    radial-gradient(120% 90% at 100% 0%, #ab55d3 0%, transparent 55%),
    radial-gradient(120% 90% at 0% 100%, #ef8407 0%, transparent 45%),
    linear-gradient(135deg,#5f2280,#3a1550); }
.dots{ background-image:radial-gradient(rgba(255,255,255,.5) 1.4px, transparent 1.4px); background-size:16px 16px; }
.hide-sb{ scrollbar-width:none; } .hide-sb::-webkit-scrollbar{ display:none; }
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
.lang-en{ display:none; }
html[data-lang="en"] .lang-ar{ display:none; }
html[data-lang="en"] .lang-en{ display:inline; }
.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;} }
#toast{ transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s; }