/* غلاف css-styling-book — مستخرج آليًّا من styles.css الكاتب بـimport-standalone-book.php. لا يُحرَّر يدويًّا. */
@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/FiraCode-latin.woff2') format('woff2');unicode-range:U+0000-00FF}
.qtc-css-styling-book{--font-mono:'Fira Code', 'Courier New', monospace;--color-text-muted:#94a3b8;--color-primary:#ec4899;--font-sans:'Cairo', system-ui, sans-serif;font-family:var(--font-sans,'Cairo',system-ui,sans-serif);direction:rtl}
.qtc-css-styling-book .landing__cover{margin: 0 auto 1.75rem; display: flex; flex-direction: column; align-items: center; gap: .9rem;}
.qtc-css-styling-book .cover{--cover-w: 210px; --cover-h: 285px; position: relative; width: var(--cover-w); height: var(--cover-h); perspective: 1100px;}
.qtc-css-styling-book .cover__book{position: relative; width: 100%; height: 100%; transform: rotateY(16deg) rotateX(4deg); transform-style: preserve-3d; transition: transform .7s cubic-bezier(.22, 1, .36, 1);}
.qtc-css-styling-book .cover:hover .cover__book{transform: rotateY(0deg) rotateX(0deg) translateY(-6px);}
.qtc-css-styling-book .cover__spine{position: absolute; top: 0; right: -13px; width: 14px; height: 100%; border-radius: 0 5px 5px 0; background: linear-gradient(180deg, #9d1f5f, #6b1746 55%, #4a1030); box-shadow: inset 3px 0 6px rgba(0, 0, 0, .35);}
.qtc-css-styling-book .cover__face{position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12px 4px 4px 12px; background: radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(150deg, #ec4899 0%, #a855f7 55%, #6366f1 100%); box-shadow: 0 22px 45px -12px rgba(76, 5, 60, .45), 0 3px 10px rgba(15, 23, 42, .18), inset 0 0 0 1px rgba(255, 255, 255, .18); padding: 1.1rem 1rem; display: flex; flex-direction: column; color: #fff;}
.qtc-css-styling-book .cover__grid{position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(120% 80% at 20% 100%, #000, transparent 70%); -webkit-mask-image: radial-gradient(120% 80% at 20% 100%, #000, transparent 70%); pointer-events: none;}
.qtc-css-styling-book .cover__sheen{position: absolute; top: -60%; left: -70%; width: 55%; height: 220%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent); transform: rotate(18deg); animation: qtc-css-styling-book-cover-sheen 7s ease-in-out infinite; pointer-events: none;}
.qtc-css-styling-book .cover__swatches{display: flex; gap: .35rem; margin-bottom: auto;}
.qtc-css-styling-book .cover__swatches span{width: 15px; height: 15px; border-radius: 5px; background: rgba(255, 255, 255, .85); animation: qtc-css-styling-book-cover-pop 3.2s ease-in-out infinite;}
.qtc-css-styling-book .cover__swatches span:nth-child(2){animation-delay: .25s; opacity: .72;}
.qtc-css-styling-book .cover__swatches span:nth-child(3){animation-delay: .5s; opacity: .5;}
.qtc-css-styling-book .cover__title{font-size: 1.85rem; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 .35rem; text-shadow: 0 2px 12px rgba(60, 5, 45, .3);}
.qtc-css-styling-book .cover__tag{align-self: flex-start; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .18em; padding: .2rem .6rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .14); margin-bottom: .85rem;}
.qtc-css-styling-book .cover__rule{direction: ltr; text-align: left; font-family: var(--font-mono); font-size: .66rem; line-height: 1.7; padding: .5rem .6rem; border-radius: 8px; background: rgba(15, 23, 42, .3); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(2px);}
.qtc-css-styling-book .cover__rule .s{color: #ffe9a8;}
.qtc-css-styling-book .cover__rule .k{color: #b8f5d0;}
.qtc-css-styling-book .cover__decl{padding-inline-start: .8rem; display: flex; align-items: center; gap: .25rem;}
.qtc-css-styling-book .cover__chip{width: 11px; height: 11px; border-radius: 3px; display: inline-block; box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); animation: qtc-css-styling-book-cover-hue 8s steps(1, end) infinite;}
.qtc-css-styling-book .cover__shadow{position: absolute; bottom: -16px; left: 8%; width: 84%; height: 22px; border-radius: 50%; background: rgba(76, 5, 60, .3); filter: blur(13px); transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .7s;}
.qtc-css-styling-book .cover:hover .cover__shadow{transform: scale(.92); opacity: .75;}
.qtc-css-styling-book .cover__note{font-size: .78rem; color: var(--color-text-muted); display: flex; align-items: center; gap: .4rem;}
.qtc-css-styling-book .cover__note i{color: var(--color-primary);}
@media (prefers-reduced-motion: reduce){.qtc-css-styling-book .cover__sheen, .qtc-css-styling-book .cover__swatches span, .qtc-css-styling-book .cover__chip{animation: none;}.qtc-css-styling-book .cover__book{transition: none;}}
@keyframes qtc-css-styling-book-cover-sheen{0%, 62% { left: -70%; } 88%, 100% { left: 130%; }}
@keyframes qtc-css-styling-book-cover-pop{0%, 100% { transform: scale(1); } 50% { transform: scale(1.32); }}
@keyframes qtc-css-styling-book-cover-hue{0% { background: #fde047; } 25% { background: #4ade80; } 50% { background: #38bdf8; } 75% { background: #fb7185; }}