*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Vazirmatn,system-ui,Tahoma,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--bg:#070b18;--surface:rgba(20,27,51,.66);--surface-2:rgba(28,37,66,.55);--border:rgba(124,156,255,.14);--text:#e7ecff;--muted:#9aa6cc}*{box-sizing:border-box}body.page{margin:0;min-height:100vh;font-family:Vazirmatn,system-ui,Tahoma,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text);background:radial-gradient(1200px 600px at 80% -10%,#1b2550 0,transparent 60%),radial-gradient(900px 500px at 0 10%,#15224a 0,transparent 55%),var(--bg)}a{color:inherit;text-decoration-line:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.container{margin-left:auto;margin-right:auto;width:100%;max-width:64rem;padding-left:1rem;padding-right:1rem}.main{min-height:60vh;padding-top:2rem;padding-bottom:2rem}@media (min-width:640px){.main{padding-top:3rem;padding-bottom:3rem}}.aurora{pointer-events:none;position:fixed;inset:0;z-index:-10;opacity:.7;background:radial-gradient(40rem 40rem at 70% -10%,rgba(91,124,250,.2),transparent 70%),radial-gradient(30rem 30rem at -10% 30%,rgba(34,211,238,.14),transparent 70%);filter:blur(8px)}.card{border-radius:1.25rem;padding:1.25rem;--tw-shadow:0 12px 40px rgba(8,12,28,.35),inset 0 1px 0 hsla(0,0%,100%,.06);--tw-shadow-colored:0 12px 40px var(--tw-shadow-color),inset 0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);background:linear-gradient(180deg,var(--surface) 0,var(--surface-2) 100%);border:1px solid var(--border);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}.site-header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,rgba(7,11,24,.85),rgba(7,11,24,.55));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.header-inner{justify-content:space-between;gap:1rem;padding-top:.75rem;padding-bottom:.75rem}.brand,.header-inner{display:flex;align-items:center}.brand{gap:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:700}.brand-mark{display:grid;height:2.25rem;width:2.25rem;place-items:center;border-radius:.75rem;font-weight:800;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));--tw-shadow:0 0 0 1px rgba(124,156,255,.25),0 10px 40px rgba(91,124,250,.35);--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color),0 10px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);background:linear-gradient(145deg,var(--tw-gradient-from,#5b7cfa),#4861e6);background-image:linear-gradient(145deg,#7c9cff,#4861e6)}.brand-mark--lg{height:3.5rem;width:3.5rem;border-radius:1.25rem;font-size:1.5rem;line-height:2rem}.nav{display:none;align-items:center;gap:.25rem}@media (min-width:640px){.nav{display:flex}}.nav-link{border-radius:.5rem;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;color:var(--muted)}.nav-link.is-active,.nav-link:hover{background-color:hsla(0,0%,100%,.05);color:var(--text)}.header-actions{display:flex;align-items:center;gap:.5rem}.inline-form{display:inline}.avatar-chip{display:flex;align-items:center;gap:.5rem;border-radius:9999px;background-color:hsla(0,0%,100%,.05);padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem}.logo-switcher{position:relative;display:flex;align-items:center;justify-content:center;height:60px;width:150px;text-decoration:none}.logo-main,.logo-scrolled{position:absolute;transition:opacity .4s ease-in-out,transform .4s ease-in-out;will-change:opacity,transform}.logo-main{opacity:1;transform:scale(1)}.logo-scrolled,body.scrolled .logo-main{opacity:0;transform:scale(.8)}body.scrolled .logo-scrolled{opacity:1;transform:scale(1)}.logo-switcher img{background:transparent!important;mix-blend-mode:normal!important}.\!btn,.btn{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;border-width:0;padding:.625rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:600;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\!btn{transform:translateY(0)!important}.btn{transform:translateY(0)}.\!btn:active{transform:translateY(1px)!important}.btn:active{transform:translateY(1px)}.btn-block{width:100%}.btn-primary{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));--tw-shadow:0 0 0 1px rgba(124,156,255,.25),0 10px 40px rgba(91,124,250,.35);--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color),0 10px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);background-image:linear-gradient(145deg,#6d8bff,#4861e6)}.btn-primary:hover{filter:brightness(1.07);box-shadow:0 0 0 1px rgba(124,156,255,.4),0 14px 48px rgba(91,124,250,.5)}.btn-ghost{background-color:hsla(0,0%,100%,.05);color:var(--text)}.btn-ghost:hover{background-color:hsla(0,0%,100%,.1)}.hero{position:relative;margin-bottom:1.5rem;padding-top:2.5rem;padding-bottom:2.5rem;text-align:center}@media (min-width:640px){.hero{padding-top:4rem;padding-bottom:4rem}}.hero-glow{position:absolute;left:50%;top:0;z-index:-10;height:18rem;width:18rem;--tw-translate-x:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.hero-glow{animation:floaty 6s ease-in-out infinite;border-radius:9999px;background:radial-gradient(circle,rgba(91,124,250,.45),transparent 65%);filter:blur(30px)}.hero-title{margin-bottom:.75rem;font-size:1.875rem;line-height:2.25rem;font-weight:800;letter-spacing:-.025em}@media (min-width:640px){.hero-title{font-size:3rem;line-height:1}}.hero-sub{font-size:1rem;line-height:1.5rem}@media (min-width:640px){.hero-sub{font-size:1.125rem;line-height:1.75rem}}.hero-sub{color:var(--muted)}.card-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr))}.article-card{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.article-card:hover{transform:translateY(-4px);box-shadow:0 22px 60px rgba(8,12,28,.5)}.article-card__title{margin-top:.5rem;margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:700;line-height:1.375}.article-card__title a:hover{color:var(--brand-400,#7c9cff)}.article-card__excerpt{margin-bottom:.75rem;font-size:.875rem;line-height:1.75rem;color:var(--muted)}.article-card__meta{display:flex;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;color:var(--muted)}.dot{opacity:.5}.badge{display:inline-block;border-radius:9999px;padding:.25rem .625rem;font-size:.75rem;line-height:1rem;font-weight:500;background:rgba(34,211,238,.12);color:#67e8f9}.pagination{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem}.page-pill{display:grid;height:2.25rem;min-width:2.25rem;place-items:center;border-radius:.5rem;background-color:hsla(0,0%,100%,.05);padding-left:.75rem;padding-right:.75rem;font-size:.875rem;line-height:1.25rem}.page-pill.is-active{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));background-image:linear-gradient(145deg,#6d8bff,#4861e6)}.auth-wrap{display:grid;min-height:70vh;place-items:center}.auth-card{width:100%;max-width:28rem}.auth-card__head{margin-bottom:1.5rem;text-align:center}.auth-card__head h1{margin-top:.75rem;margin-bottom:.25rem;font-size:1.5rem;line-height:2rem;font-weight:700}.auth-card__head p{color:var(--muted)}.auth-card__foot{margin-top:1rem;text-align:center;font-size:.875rem;line-height:1.25rem}.auth-card__foot a{color:var(--brand-400,#7c9cff)}.form{gap:1rem}.field,.form{display:flex;flex-direction:column}.field{gap:.375rem}.field__label{font-size:.875rem;line-height:1.25rem;color:var(--muted)}.field__input{width:100%;border-radius:.75rem;padding:.75rem .875rem;color:var(--text);outline:2px solid transparent;outline-offset:2px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background:rgba(8,12,28,.5);border:1px solid var(--border)}.field__input:focus{border-color:rgba(124,156,255,.6);box-shadow:0 0 0 4px rgba(91,124,250,.18)}.alert{margin-bottom:1rem;border-radius:.75rem;padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem}.alert-error{background:rgba(244,63,94,.12);color:#fda4af;border:1px solid rgba(244,63,94,.25)}.site-footer{margin-top:4rem;padding-top:2rem;padding-bottom:2rem;border-top:1px solid var(--border)}.empty-state{text-align:center;color:var(--muted)}.error-page{display:grid;min-height:60vh;place-items:center}.error-card{max-width:28rem;text-align:center}.error-code{margin-bottom:.5rem;font-size:3.75rem;line-height:1;font-weight:800;background-image:linear-gradient(145deg,#7c9cff,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}.error-text{color:var(--muted);margin-bottom:1.25rem}.error-trace{margin-top:1rem;margin-bottom:1rem;max-height:16rem;overflow:auto;border-radius:.5rem;background-color:rgba(0,0,0,.4);padding:.75rem;text-align:left;font-size:.75rem;line-height:1rem;direction:ltr}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.-inset-\[50\%\]{inset:-50%}.inset-0{inset:0}.inset-x-0{left:0;right:0}.bottom-0{bottom:0}.bottom-1\/3{bottom:33.333333%}.bottom-12{bottom:3rem}.bottom-\[-20\%\]{bottom:-20%}.left-0{left:0}.left-1\/3{left:33.333333%}.left-16{left:4rem}.left-\[-20\%\]{left:-20%}.right-0{right:0}.right-1\/4{right:25%}.right-2{right:.5rem}.right-24{right:6rem}.right-\[-20\%\]{right:-20%}.top-0{top:0}.top-1\/4{top:25%}.top-12{top:3rem}.top-16{top:4rem}.top-2{top:.5rem}.top-\[-20\%\]{top:-20%}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.my-8{margin-top:2rem;margin-bottom:2rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mt-12{margin-top:3rem}.mt-32{margin-top:8rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-video{aspect-ratio:16/9}.h-1{height:.25rem}.h-10{height:2.5rem}.h-2\/3{height:66.666667%}.h-4{height:1rem}.h-40{height:10rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-\[1920px\]{height:1920px}.h-\[800px\]{height:800px}.h-\[900px\]{height:900px}.h-full{height:100%}.w-10{width:2.5rem}.w-20{width:5rem}.w-32{width:8rem}.w-4{width:1rem}.w-40{width:10rem}.w-48{width:12rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-\[1080px\]{width:1080px}.w-\[800px\]{width:800px}.w-\[900px\]{width:900px}.w-full{width:100%}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.translate-y-2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-2{--tw-translate-y:0.5rem}.-rotate-1{--tw-rotate:-1deg}.-rotate-1,.rotate-12{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-12{--tw-rotate:12deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.animate-\[shimmer_3s_infinite\]{animation:shimmer 3s infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.snap-center{scroll-snap-align:center}.flex-col{flex-direction:column}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.scroll-smooth{scroll-behavior:smooth}.rounded{border-radius:.25rem}.rounded-\[3rem\]{border-radius:3rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-\[3px\]{border-width:3px}.border-\[5px\]{border-width:5px}.border-y-4{border-top-width:4px;border-bottom-width:4px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.border-purple-500\/50{border-color:rgba(168,85,247,.5)}.border-red-600{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity,1))}.border-red-900{--tw-border-opacity:1;border-color:rgb(127 29 29/var(--tw-border-opacity,1))}.bg-amber-300{--tw-bg-opacity:1;background-color:rgb(252 211 77/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-gray-800\/80{background-color:rgba(31,41,55,.8)}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-gray-900\/50{background-color:rgba(17,24,39,.5)}.bg-purple-300{--tw-bg-opacity:1;background-color:rgb(216 180 254/var(--tw-bg-opacity,1))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8/var(--tw-bg-opacity,1))}.bg-\[radial-gradient\(ellipse_at_top\2c _var\(--tw-gradient-stops\)\)\]{background-image:radial-gradient(ellipse at top,var(--tw-gradient-stops))}.bg-\[url\(\'https\:\/\/www\.transparenttextures\.com\/patterns\/stardust\.png\'\)\]{background-image:none}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-amber-300{--tw-gradient-from:#fcd34d var(--tw-gradient-from-position);--tw-gradient-to:rgba(252,211,77,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-black{--tw-gradient-from:#000 var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-700{--tw-gradient-from:#7e22ce var(--tw-gradient-from-position);--tw-gradient-to:rgba(126,34,206,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-900\/20{--tw-gradient-from:rgba(127,29,29,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(127,29,29,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-amber-500{--tw-gradient-to:rgba(245,158,11,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#f59e0b var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-black{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#000 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-black\/70{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.7) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-purple-900{--tw-gradient-to:rgba(88,28,135,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#581c87 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-white\/30{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsla(0,0%,100%,.3) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-amber-700{--tw-gradient-to:#b45309 var(--tw-gradient-to-position)}.to-black{--tw-gradient-to:#000 var(--tw-gradient-to-position)}.to-blue-900\/20{--tw-gradient-to:rgba(30,58,138,.2) var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-cover{-o-object-fit:cover;object-fit:cover}.p-24{padding:6rem}.p-3{padding:.75rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-6{padding-bottom:1.5rem}.pt-12{padding-top:3rem}.text-center{text-align:center}.text-right{text-align:right}.font-\[Lalezar\]{font-family:Lalezar}.font-\[Vazir\]{font-family:Vazir}.font-serif{font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif}.text-\[1\.8rem\]{font-size:1.8rem}.text-\[10px\]{font-size:10px}.text-\[14rem\]{font-size:14rem}.text-\[2rem\]{font-size:2rem}.text-\[3rem\]{font-size:3rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-none{line-height:1}.leading-snug{line-height:1.375}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-100{--tw-text-opacity:1;color:rgb(254 243 199/var(--tw-text-opacity,1))}.text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}.text-amber-50{--tw-text-opacity:1;color:rgb(255 251 235/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-10{opacity:.1}.opacity-20{opacity:.2}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.mix-blend-screen{mix-blend-mode:screen}.mix-blend-overlay{mix-blend-mode:overlay}.shadow-\[0_0_25px_rgba\(168\2c 85\2c 247\2c 0\.6\)\]{--tw-shadow:0 0 25px rgba(168,85,247,.6);--tw-shadow-colored:0 0 25px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_25px_rgba\(234\2c 179\2c 8\2c 0\.5\)\]{--tw-shadow:0 0 25px rgba(234,179,8,.5);--tw-shadow-colored:0 0 25px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_30px_rgba\(168\2c 85\2c 247\2c 0\.5\)\]{--tw-shadow:0 0 30px rgba(168,85,247,.5);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_50px_rgba\(0\2c 0\2c 0\2c 0\.9\)\]{--tw-shadow:0 0 50px rgba(0,0,0,.9);--tw-shadow-colored:0 0 50px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_80px_rgba\(0\2c 0\2c 0\2c 0\.8\)\2c inset_0_0_40px_rgba\(168\2c 85\2c 247\2c 0\.1\)\]{--tw-shadow:0 0 80px rgba(0,0,0,.8),inset 0 0 40px rgba(168,85,247,.1);--tw-shadow-colored:0 0 80px var(--tw-shadow-color),inset 0 0 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px)}.blur,.blur-3xl{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-3xl{--tw-blur:blur(64px)}.blur-\[180px\]{--tw-blur:blur(180px)}.blur-\[180px\],.blur-\[200px\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[200px\]{--tw-blur:blur(200px)}.blur-\[3px\]{--tw-blur:blur(3px)}.blur-\[3px\],.blur-\[5px\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[5px\]{--tw-blur:blur(5px)}.brightness-200{--tw-brightness:brightness(2)}.brightness-200,.contrast-125{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.contrast-125{--tw-contrast:contrast(1.25)}.drop-shadow-\[0_0_10px_rgba\(255\2c 255\2c 255\2c 0\.3\)\]{--tw-drop-shadow:drop-shadow(0 0 10px hsla(0,0%,100%,.3))}.drop-shadow-\[0_0_10px_rgba\(255\2c 255\2c 255\2c 0\.3\)\],.drop-shadow-\[0_2px_3px_rgba\(0\2c 0\2c 0\2c 0\.8\)\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-\[0_2px_3px_rgba\(0\2c 0\2c 0\2c 0\.8\)\]{--tw-drop-shadow:drop-shadow(0 2px 3px rgba(0,0,0,.8))}.drop-shadow-\[0_2px_4px_rgba\(0\2c 0\2c 0\2c 0\.8\)\]{--tw-drop-shadow:drop-shadow(0 2px 4px rgba(0,0,0,.8))}.drop-shadow-\[0_2px_4px_rgba\(0\2c 0\2c 0\2c 0\.8\)\],.drop-shadow-\[0_5px_5px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-\[0_5px_5px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{--tw-drop-shadow:drop-shadow(0 5px 5px rgba(0,0,0,.5))}.grayscale{--tw-grayscale:grayscale(100%)}.grayscale,.grayscale-\[30\%\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale-\[30\%\]{--tw-grayscale:grayscale(30%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-md,.backdrop-blur-sm{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.backdrop-blur-xl,.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.delay-100{transition-delay:.1s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.stories{margin:0 0 1.5rem}.stories-rail{display:flex;gap:1rem;overflow-x:auto;padding:.5rem .25rem .75rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}.stories-rail::-webkit-scrollbar{height:6px}.stories-rail::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}.story-ring{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.4rem;width:80px;background:none;border:0;padding:0;cursor:pointer;scroll-snap-align:start;color:var(--text);font:inherit}.story-ring__halo{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:999px;background:conic-gradient(from 210deg,#5b7cfa,#22d3ee,#a855f7,#5b7cfa);box-shadow:0 6px 18px rgba(91,124,250,.35),inset 0 0 0 1px hsla(0,0%,100%,.08);transition:transform .25s ease,box-shadow .25s ease}.story-ring__frame{display:grid;place-items:center;width:64px;height:64px;border-radius:999px;background:var(--bg);padding:3px;box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}.story-ring__halo{position:absolute}.story-ring{position:relative}.story-ring__frame{position:relative;z-index:1;margin:4px}.story-ring__img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:999px;display:block}.story-ring__label{font-size:.72rem;color:var(--muted);max-width:78px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.story-ring:hover .story-ring__halo{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 26px rgba(91,124,250,.5)}.story-ring:focus-visible .story-ring__halo{outline:2px solid #22d3ee;outline-offset:3px}.story-viewer{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center}.story-viewer.is-open{display:flex}.story-viewer__backdrop{position:absolute;inset:0;background:rgba(3,6,18,.86);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%)}.story-viewer__stage{position:relative;width:min(420px,94vw);height:min(86vh,760px);border-radius:22px;overflow:hidden;background:#05060f;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 1px hsla(0,0%,100%,.06);transform:translateZ(0);animation:storyPop .32s cubic-bezier(.2,.8,.2,1)}@keyframes storyPop{0%{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:none}}.story-viewer__bars{position:absolute;top:10px;left:12px;right:12px;display:flex;gap:5px;z-index:3}.story-bar{flex:1;height:3px;border-radius:999px;background:hsla(0,0%,100%,.25);overflow:hidden}.story-bar__fill{display:block;height:100%;width:0;background:#fff;border-radius:999px}.story-viewer__head{position:absolute;top:22px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;z-index:3;color:#fff}.story-viewer__title{font-size:.9rem;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.7)}.story-viewer__close{background:none;border:0;color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;opacity:.85}.story-viewer__close:hover{opacity:1}.story-viewer__img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:1}.story-viewer__cta{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;padding:.7rem 1.6rem;border-radius:999px;background:linear-gradient(180deg,#5b7cfa,#4458e0);color:#fff;font-weight:700;box-shadow:0 10px 24px rgba(68,88,224,.5)}.story-viewer__nav{position:absolute;top:0;bottom:0;width:40%;z-index:2;background:none;border:0;cursor:pointer}.story-viewer__nav--prev{right:0}.story-viewer__nav--next{left:0}@media (prefers-reduced-motion:reduce){.story-ring__halo,.story-viewer__stage{animation:none;transition:none}}.article{display:flex;flex-direction:column;gap:1.25rem;max-width:48rem;margin:0 auto}.article__back{align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--muted);padding:.45rem .85rem;border-radius:999px;background:hsla(0,0%,100%,.05);border:1px solid var(--border);transition:color .15s ease,background .15s ease,transform .15s ease}.article__back:hover{color:var(--text);background:hsla(0,0%,100%,.1);transform:translateY(-1px)}.article__head{position:relative;overflow:hidden}.article__head:before{content:"";position:absolute;inset:-45% 25% auto -10%;height:16rem;background:radial-gradient(circle,rgba(91,124,250,.28),transparent 65%);filter:blur(30px);pointer-events:none;z-index:0}.article__head>*{position:relative;z-index:1}.article__title{font-size:1.9rem;line-height:1.25;font-weight:800;letter-spacing:-.01em;margin:.8rem 0 .6rem}.article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.8rem;color:var(--muted)}.article__author{color:var(--text);font-weight:600}.article__excerpt{margin-top:1.1rem;font-size:1.03rem;line-height:1.95;color:var(--text);opacity:.92}.article__body{font-size:1.02rem;line-height:2.05;color:var(--text)}.article__body>:first-child{margin-top:0}.article__body>:last-child{margin-bottom:0}.article__body :where(p){margin:0 0 1.15rem;opacity:.94}.article__body :where(h2,h3,h4){font-weight:700;line-height:1.4;margin:1.7rem 0 .85rem}.article__body :where(h2){font-size:1.42rem}.article__body :where(h3){font-size:1.2rem}.article__body :where(h4){font-size:1.05rem}.article__body :where(a){color:#7c9cff;text-decoration:underline;text-underline-offset:3px}.article__body :where(a):hover{color:#9db6ff}.article__body :where(img){max-width:100%;height:auto;border-radius:14px;margin:1.1rem 0;box-shadow:0 18px 50px rgba(8,12,28,.5)}.article__body :where(ul,ol){margin:0 0 1.15rem;padding-inline-start:1.5rem}.article__body :where(li){margin:.35rem 0}.article__body :where(blockquote){margin:1.3rem 0;padding:.7rem 1.1rem;border-inline-start:3px solid rgba(124,156,255,.5);background:rgba(124,156,255,.06);border-radius:10px;color:var(--muted)}.article__body :where(pre){background:rgba(3,6,18,.7);border:1px solid var(--border);border-radius:12px;padding:1rem;overflow:auto;direction:ltr;font-size:.86rem;line-height:1.7}.article__body :where(code){background:hsla(0,0%,100%,.06);padding:.12rem .42rem;border-radius:6px;font-size:.88em}.article__body :where(pre) code{background:none;padding:0}.article__body :where(hr){border:0;height:1px;background:var(--border);margin:1.8rem 0}.article__empty{color:var(--muted);text-align:center;margin:0}@media (min-width:640px){.article__title{font-size:2.4rem}}@media (prefers-reduced-motion:reduce){.article__back{transition:none}}.listing{gap:1.5rem}.listing,.listing__head{display:flex;flex-direction:column}.listing__head{gap:.5rem}.listing__eyebrow{font-size:.8rem;letter-spacing:.04em;color:#67e8f9}.listing__title{font-size:1.8rem;font-weight:800;letter-spacing:-.01em;margin:0}.listing__summary{color:var(--muted);font-size:.92rem;margin:-.5rem 0 0}.search-form{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}.search-form__input{flex:1 1 16rem}.search-form .btn{flex:0 0 auto}@media (min-width:640px){.listing__title{font-size:2.2rem}}.admin-body,.admin-shell{min-height:100vh}.admin-shell{display:grid;grid-template-columns:1fr}.admin-sidebar{display:flex;flex-direction:column;gap:1rem;padding:1rem;background:linear-gradient(180deg,rgba(20,27,51,.72),rgba(13,18,38,.6));border-bottom:1px solid var(--border);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}.admin-sidebar__brand{display:flex;align-items:center;gap:.6rem}.admin-sidebar__brandtext{display:flex;flex-direction:column;line-height:1.2}.admin-sidebar__brandname{font-weight:800}.admin-sidebar__brandsub{font-size:.72rem;color:var(--muted)}.admin-nav{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:thin}.admin-nav__link{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem .8rem;border-radius:12px;color:var(--muted);white-space:nowrap;transition:background .15s ease,color .15s ease}.admin-nav__link:hover{background:hsla(0,0%,100%,.06);color:var(--text)}.admin-nav__link.is-active{color:#fff;background-image:linear-gradient(145deg,#6d8bff,#4861e6);box-shadow:0 10px 30px rgba(91,124,250,.35)}.admin-nav__dot{width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.6;flex:0 0 auto}.admin-sidebar__back{color:var(--muted)}.admin-main{display:flex;flex-direction:column;min-width:0}.admin-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(7,11,24,.78),rgba(7,11,24,.4));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}.admin-topbar__title{font-size:1.1rem;font-weight:700;margin:0}.admin-topbar__actions{display:flex;align-items:center;gap:.5rem}.admin-content{padding:1.1rem}.admin-section__title{font-size:1.15rem;font-weight:700;margin:0 0 1rem}.admin-statgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));margin-bottom:1.75rem}.stat-card{display:flex;flex-direction:column;gap:.25rem}.stat-card__value{font-size:2rem;font-weight:800;line-height:1.1}.stat-card__label{color:var(--muted);font-size:.85rem}.admin-cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}.admin-card{display:flex;flex-direction:column;gap:.4rem;transition:transform .2s ease,box-shadow .2s ease}.admin-card:hover{transform:translateY(-4px);box-shadow:0 22px 60px rgba(8,12,28,.5)}.admin-card__title{font-weight:700;font-size:1.05rem}.admin-card__desc{color:var(--muted);font-size:.85rem}@media (min-width:860px){.admin-shell{grid-template-columns:264px 1fr}.admin-sidebar{position:sticky;top:0;height:100vh;border-bottom:0;border-inline-end:1px solid var(--border);overflow-y:auto}.admin-nav{flex-direction:column;overflow:visible}.admin-content{padding:1.75rem}}@media (prefers-reduced-motion:reduce){.admin-card{transition:none}}.admin-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.admin-toolbar__count{color:var(--muted);font-size:.85rem;margin:0}.btn-sm{padding:.4rem .7rem;font-size:.8rem;border-radius:10px}.btn-danger{background-image:linear-gradient(145deg,#f43f5e,#be123c);color:#fff}.btn-danger:hover{filter:brightness(1.07)}.alert-success{background:rgba(34,197,94,.12);color:#86efac;border:1px solid rgba(34,197,94,.28)}.field__error{color:#fda4af;font-size:.78rem}.field__hint{color:var(--muted);font-size:.75rem}.admin-tablewrap{padding:0;overflow-x:auto}.admin-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:640px}.admin-table thead th{text-align:right;font-weight:600;color:var(--muted);padding:.9rem 1rem;border-bottom:1px solid var(--border);white-space:nowrap}.admin-table tbody td{padding:.8rem 1rem;border-bottom:1px solid rgba(124,156,255,.08);vertical-align:middle}.admin-table tbody tr:last-child td{border-bottom:0}.admin-table tbody tr:hover{background:hsla(0,0%,100%,.03)}.admin-table__title{font-weight:600;max-width:22rem}.admin-table__title a{color:var(--text)}.admin-table__title a:hover{color:#7c9cff}.admin-table__actions-h{text-align:left}.admin-actions{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end}.admin-actions form{display:inline;margin:0}.tag{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.74rem;font-weight:600}.tag--published{background:rgba(34,197,94,.14);color:#86efac}.tag--pending{background:rgba(234,179,8,.14);color:#fde047}.tag--approved{background:rgba(34,211,238,.14);color:#67e8f9}.tag--rejected{background:rgba(244,63,94,.14);color:#fda4af}.admin-formwrap{max-width:52rem}.admin-form{gap:1.1rem}.admin-form__row{display:grid;gap:1.1rem;grid-template-columns:1fr}.admin-form__content{min-height:16rem;font-family:inherit;line-height:1.9;resize:vertical}.admin-form__actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.3rem}textarea.field__input{font-family:inherit}select.field__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}@media (min-width:720px){.admin-form__row{grid-template-columns:1fr 1fr}}.rbac-notice{display:flex;flex-direction:column;gap:.6rem}.rbac-notice__title{font-size:1.05rem;font-weight:700;margin:0}.rbac-notice__body{color:var(--muted);font-size:.9rem;line-height:2;margin:0}.perm-check__slug,.rbac-notice code,.rbac-slug,.rbac-username{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;direction:ltr;unicode-bidi:isolate}.rbac-slug{font-size:.8rem;color:#7c9cff}.rbac-username{color:var(--muted);font-size:.78rem;margin-inline-start:.4rem}.rbac-rawrole{color:var(--muted);font-size:.75rem}.role-rank{display:inline-grid;place-items:center;min-width:2.2rem;padding:.15rem .5rem;border-radius:999px;background:rgba(124,156,255,.12);font-weight:700;font-size:.8rem}.admin-formwrap--wide{max-width:60rem}.rbac-assign{display:flex;align-items:center;gap:.5rem;margin:0}.rbac-select{min-width:9rem;padding:.45rem .7rem;font-size:.85rem}.perm-group{border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem 1.1rem;margin:0;background:rgba(8,12,28,.35)}.perm-group__title{padding:0 .5rem;font-weight:700;font-size:.92rem;color:#cdd7ff}.perm-grid{display:grid;gap:.7rem;grid-template-columns:1fr}.perm-check{display:flex;align-items:flex-start;gap:.6rem;padding:.55rem .7rem;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease}.perm-check:hover{background:hsla(0,0%,100%,.04);border-color:var(--border)}.perm-check input{margin-top:.25rem;width:1.05rem;height:1.05rem;accent-color:#5b7cfa;flex:0 0 auto;cursor:pointer}.perm-check__text{display:flex;flex-direction:column;gap:.15rem;min-width:0}.perm-check__name{font-size:.9rem}.perm-check__slug{font-size:.72rem;color:var(--muted)}.override-list{display:flex;flex-direction:column;gap:.5rem}.override-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.55rem .7rem;border-radius:12px;border:1px solid transparent}.override-row:hover{background:hsla(0,0%,100%,.03);border-color:var(--border)}.seg{display:inline-flex;background:rgba(8,12,28,.55);border:1px solid var(--border);border-radius:999px;padding:3px;flex:0 0 auto}.seg__radio{position:absolute;opacity:0;pointer-events:none}.seg__label{padding:.35rem .85rem;border-radius:999px;font-size:.78rem;color:var(--muted);cursor:pointer;transition:background .15s ease,color .15s ease;white-space:nowrap}.seg__radio:focus-visible+.seg__label{box-shadow:0 0 0 3px rgba(91,124,250,.35)}.seg__radio--inherit:checked+.seg__label{background:hsla(0,0%,100%,.12);color:var(--text)}.seg__radio--allow:checked+.seg__label{background-image:linear-gradient(145deg,#22c55e,#15803d);color:#fff}.seg__radio--deny:checked+.seg__label{background-image:linear-gradient(145deg,#f43f5e,#be123c);color:#fff}.rbac-hint{color:var(--muted);font-size:.82rem;line-height:2;padding:.9rem 1.1rem}@media (min-width:720px){.perm-grid{grid-template-columns:1fr 1fr}}@media (prefers-reduced-motion:reduce){.perm-check,.seg__label{transition:none}}.user-search{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.user-search__input{min-width:14rem;padding:.5rem .8rem;font-size:.85rem}.user-email{font-size:.85rem}.user-date,.user-email{color:var(--muted);unicode-bidi:isolate}.user-date{font-size:.82rem}.tag--banned{background:rgba(244,63,94,.14);color:#fda4af}.tag--active{background:rgba(34,197,94,.14);color:#86efac}.user-identity{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.1rem}.user-identity__row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;font-size:.9rem}.user-identity__label{color:var(--muted);min-width:7rem}.user-identity__link{color:#7c9cff;font-size:.82rem;margin-inline-start:.5rem}.user-identity__link:hover{text-decoration:underline}@media (min-width:720px){.user-search__input{min-width:20rem}}.comment-filters{display:flex;flex-wrap:wrap;gap:.4rem}.comment-filters__tab{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);font-size:.85rem;text-decoration:none;transition:color .15s ease,border-color .15s ease,background .15s ease}.comment-filters__tab:hover{color:var(--text);border-color:rgba(124,156,255,.4)}.comment-filters__tab.is-active{color:#fff;border-color:rgba(124,156,255,.6);background:rgba(124,156,255,.18)}.comment-filters__badge{min-width:1.3rem;padding:0 .35rem;border-radius:999px;background:rgba(245,158,11,.22);color:#fbbf24;font-size:.72rem;line-height:1.3rem;text-align:center}.comment-cell{max-width:32rem;white-space:normal;word-break:break-word;line-height:1.7;color:var(--text)}.story-thumb{width:3rem;height:3rem;border-radius:.6rem;-o-object-fit:cover;object-fit:cover;border:1px solid var(--border);background:var(--surface-2)}.story-link{max-width:18rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.story-link a{color:#7c9cff}.story-link a:hover{text-decoration:underline}.listing__profile-link{display:inline-block;margin-top:.5rem;color:#7c9cff;font-size:.9rem}.listing__profile-link:hover{text-decoration:underline}.profile__head{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;padding:1.4rem}.profile__avatar{flex:0 0 auto}.profile__avatar-img,.profile__avatar-mark{width:5rem;height:5rem;border-radius:50%;-o-object-fit:cover;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--border);font-size:2rem;font-weight:700;color:var(--text)}.profile__meta{min-width:0}.profile__name{margin:0 0 .2rem;font-size:1.5rem}.profile__username{color:var(--muted);font-size:.9rem;margin:0 0 .4rem}.profile__title{color:#7c9cff;margin:0 0 .3rem}.profile__joined{color:var(--muted);font-size:.82rem;margin:0 0 .4rem}.profile__archive{color:#7c9cff;font-size:.85rem}.profile__archive:hover{text-decoration:underline}.profile__bio{padding:1.2rem;margin:1rem 0;line-height:1.9;color:var(--text)}.profile__section-title{margin:1.4rem 0 1rem;font-size:1.2rem}.wiki-grid{margin-top:1rem}.wiki-card{padding:1.2rem;display:flex;flex-direction:column;gap:.5rem}.wiki-card__term{margin:0;font-size:1.15rem}.wiki-card__term a{color:var(--text)}.wiki-card__term a:hover{color:#7c9cff}.wiki-card__brief{color:var(--muted);line-height:1.8;margin:0}.wiki-card__more{margin-top:auto;color:#7c9cff;font-size:.85rem}.wiki-entry{max-width:52rem;margin:0 auto}.wiki-entry__back{margin-bottom:1rem}.wiki-entry__back a{color:var(--muted)}.wiki-entry__back a:hover{color:#7c9cff}.wiki-entry__card{padding:1.6rem}.wiki-entry__term{margin:0 0 .6rem;font-size:1.8rem}.wiki-entry__brief{color:var(--muted);font-style:italic;border-inline-start:3px solid rgba(124,156,255,.5);padding-inline-start:.8rem;margin:0 0 1.2rem}.wiki-entry__body{line-height:2;color:var(--text)}.wiki-entry__foot{margin-top:1.4rem;padding-top:.8rem;border-top:1px solid var(--border);color:var(--muted);font-size:.8rem}html[data-theme=light]{--bg:#eef2ff;--surface:hsla(0,0%,100%,.72);--surface-2:rgba(244,247,255,.85);--border:rgba(72,97,230,.16);--text:#15224a;--muted:#5b678f}html[data-theme=light] body.page{background:radial-gradient(1200px 600px at 80% -10%,#dbe4ff 0,transparent 60%),radial-gradient(900px 500px at 0 10%,#e7ecff 0,transparent 55%),var(--bg)}html[data-theme=light] .aurora{opacity:.35}html[data-theme=light] .starfield{opacity:.25}.starfield{position:fixed;inset:0;z-index:-11;pointer-events:none;opacity:.7;background-color:transparent;background-image:radial-gradient(1.5px 1.5px at 12% 18%,hsla(0,0%,100%,.9),transparent 60%),radial-gradient(1.5px 1.5px at 28% 72%,hsla(0,0%,100%,.7),transparent 60%),radial-gradient(2px 2px at 47% 35%,rgba(199,214,255,.95),transparent 60%),radial-gradient(1.5px 1.5px at 63% 12%,hsla(0,0%,100%,.8),transparent 60%),radial-gradient(1.5px 1.5px at 78% 58%,hsla(0,0%,100%,.7),transparent 60%),radial-gradient(2px 2px at 88% 28%,rgba(180,200,255,.9),transparent 60%),radial-gradient(1.5px 1.5px at 35% 88%,hsla(0,0%,100%,.75),transparent 60%),radial-gradient(1.5px 1.5px at 70% 82%,hsla(0,0%,100%,.7),transparent 60%),radial-gradient(1px 1px at 18% 50%,hsla(0,0%,100%,.6),transparent 60%),radial-gradient(1px 1px at 55% 64%,hsla(0,0%,100%,.6),transparent 60%);background-repeat:no-repeat;animation:twinkle 7s ease-in-out infinite}@keyframes twinkle{0%,to{opacity:.55}50%{opacity:.9}}.slider{position:relative;margin:0 0 1.5rem}.slider-track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:.5rem .25rem 1rem;scrollbar-width:none}.slider-track::-webkit-scrollbar{display:none}.slide{position:relative;flex:0 0 88%;max-width:88%;scroll-snap-align:center;min-height:220px;border-radius:1.25rem;padding:1.5rem;overflow:hidden;background:linear-gradient(135deg,var(--surface),var(--surface-2));border:1px solid var(--border);box-shadow:0 12px 40px rgba(8,12,28,.35),inset 0 1px 0 hsla(0,0%,100%,.06);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);transform:perspective(1200px) rotateY(2deg);transition:transform .4s ease,box-shadow .4s ease}.slide:hover{transform:perspective(1200px) rotateY(0deg) translateY(-4px);box-shadow:0 20px 60px rgba(8,12,28,.45)}.slide__glow{position:absolute;inset:-40% 40% auto -10%;height:70%;background:radial-gradient(closest-side,rgba(91,124,250,.5),transparent 70%);filter:blur(30px);pointer-events:none}.slide__body{position:relative;display:flex;flex-direction:column;gap:.7rem;height:100%}.slide__badge{align-self:flex-start}.slide__title{margin:0;font-size:1.4rem;line-height:1.5}.slide__title a{color:var(--text)}.slide__excerpt{margin:0;color:var(--muted);line-height:1.9}.slide__meta{display:flex;gap:.5rem;align-items:center;color:var(--muted);font-size:.85rem;margin-top:auto}.slider-dots{display:flex;gap:.4rem;justify-content:center}.slider-dot{width:8px;height:8px;border-radius:999px;background:var(--border);transition:transform .2s,background .2s}.slider-dot:hover{transform:scale(1.4);background:#5b7cfa}@media (min-width:640px){.slide{flex-basis:60%;max-width:60%}}@media (min-width:768px){.slide{flex-basis:42%;max-width:42%}}.bottom-tab-nav{position:fixed;inset-inline:0;bottom:0;z-index:50;display:flex;justify-content:space-around;align-items:stretch;gap:.25rem;padding:.4rem .6rem calc(.4rem + env(safe-area-inset-bottom));margin:0 auto;max-width:40rem;background:var(--surface);border:1px solid var(--border);border-bottom:0;border-radius:1.25rem 1.25rem 0 0;backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:0 -10px 40px rgba(8,12,28,.45),inset 0 1px 0 hsla(0,0%,100%,.06)}.tab-link{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.45rem 0;color:var(--muted);border-radius:.9rem;transition:color .2s,transform .2s,background .2s}.tab-link:hover{color:var(--text)}.tab-link.is-active{color:#7c9cff;transform:translateY(-3px)}.tab-link.is-active .tab-icon{filter:drop-shadow(0 6px 14px rgba(91,124,250,.55))}.tab-icon{width:24px;height:24px}.tab-text{font-size:.7rem}@media (min-width:768px){.bottom-tab-nav{display:none}}@media (max-width:767px){.main{padding-bottom:5.5rem}.back-to-top{bottom:5rem}}.theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;cursor:pointer;color:var(--text);background:var(--surface);border:1px solid var(--border);box-shadow:0 1px 2px rgba(8,12,28,.2),0 8px 24px rgba(8,12,28,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .2s,box-shadow .2s}.theme-toggle:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(8,12,28,.28)}.theme-toggle svg{width:20px;height:20px}.theme-toggle__sun{display:none}.theme-toggle__moon,html[data-theme=light] .theme-toggle__sun{display:block}html[data-theme=light] .theme-toggle__moon{display:none}.depth-card{transform-style:preserve-3d}@media (prefers-reduced-motion:reduce){.starfield{animation:none}.slide,.slide:hover,.tab-link.is-active{transform:none}}.reading-time{white-space:nowrap;opacity:.9}.interaction-bar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-top:1.2rem;padding:1rem 1.2rem}.reactions{display:flex;flex-wrap:wrap;gap:.6rem}.reaction-btn{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;padding:.5rem .8rem;border-radius:999px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);box-shadow:0 1px 2px rgba(8,12,28,.2),0 6px 18px rgba(8,12,28,.16);transition:transform .15s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}.reaction-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(8,12,28,.3)}.reaction-btn:active{transform:translateY(0) scale(.97)}.reaction-btn[disabled]{opacity:.6;cursor:progress}.reaction-btn__emoji{font-size:1.15rem;line-height:1}.reaction-btn__count{font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--muted)}.reaction-btn.is-active{background:linear-gradient(135deg,rgba(91,124,250,.3),rgba(34,211,238,.2));border-color:rgba(124,156,255,.55);box-shadow:0 0 0 1px rgba(124,156,255,.35),0 10px 30px rgba(91,124,250,.35)}.bookmark-btn,.reaction-btn.is-active .reaction-btn__count{color:var(--text)}.bookmark-btn{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;padding:.55rem 1rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);box-shadow:0 1px 2px rgba(8,12,28,.2),0 8px 22px rgba(8,12,28,.18);transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease}.bookmark-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(8,12,28,.3)}.bookmark-btn[disabled]{opacity:.6;cursor:progress}.bookmark-btn__icon{width:20px;height:20px;transition:fill .2s ease}.bookmark-btn.is-active{color:#fff;background:linear-gradient(135deg,#4861e6,#22d3ee);border-color:transparent;box-shadow:0 0 0 1px rgba(124,156,255,.35),0 12px 32px rgba(91,124,250,.45)}.bookmark-btn.is-active .bookmark-btn__icon{fill:currentColor}.btn-bookmarks{display:inline-flex;align-items:center;gap:.4rem}@media (max-width:520px){.btn-bookmarks span{display:none}}.page-head{margin:.5rem 0 1.2rem}.page-head__title{margin:0 0 .3rem;font-size:1.6rem}.page-head__sub{margin:0;color:var(--muted)}.empty-state{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;padding:1.6rem}@media (prefers-reduced-motion:reduce){.bookmark-btn,.bookmark-btn:hover,.reaction-btn,.reaction-btn:hover{transform:none}}.article-comments-section{position:relative;z-index:10;margin-top:2rem;border-radius:1.25rem;padding:1.5rem;--tw-shadow:0 12px 40px rgba(8,12,28,.35),inset 0 1px 0 hsla(0,0%,100%,.06);--tw-shadow-colored:0 12px 40px var(--tw-shadow-color),inset 0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);background:linear-gradient(180deg,var(--surface) 0,var(--surface-2) 100%);border:1px solid var(--border);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}.comment-container{margin-bottom:1rem;border-bottom-width:1px;border-color:hsla(0,0%,100%,.05);padding-bottom:1rem}.comment-container:last-child{border-width:0;padding-bottom:0}.comment-item{display:flex;flex-direction:column;gap:.5rem}.comment-author-info{margin-bottom:.25rem;display:flex;align-items:center;gap:.75rem}.comment-avatar{height:2.5rem;width:2.5rem;border-radius:9999px;border-width:2px;border-color:hsla(0,0%,100%,.1);-o-object-fit:cover;object-fit:cover}.comment-author{font-size:.875rem;line-height:1.25rem;font-weight:700;--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.comment-time{margin-right:auto;font-size:.75rem;line-height:1rem;--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.comment-content{margin-right:3rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.comment-actions{margin-top:.5rem;margin-right:3rem;display:flex;gap:.5rem}.comment-replies{margin-top:1rem;margin-right:.5rem;border-right-width:2px;border-color:rgba(99,102,241,.3);padding-right:3rem}.floating-comments-btn{position:fixed;bottom:30px;left:30px;width:65px;height:65px;background:linear-gradient(135deg,#4a00e0,#8e2de2);border-radius:50%;box-shadow:0 10px 25px rgba(142,45,226,.5);display:flex;justify-content:center;align-items:center;color:#fff;cursor:pointer;z-index:9990;transition:transform .4s cubic-bezier(.175,.885,.32,1.275);border:2px solid hsla(0,0%,100%,.1)}.floating-comments-btn:hover{transform:scale(1.15) rotate(10deg);box-shadow:0 0 30px rgba(142,45,226,.8)}.floating-count{position:absolute;top:-2px;right:-2px;background:#f05;color:#fff;font-size:12px;min-width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #1a1a2e;font-weight:700;padding:2px}.comments-drawer{position:fixed;top:0;left:-100%;width:400px;max-width:85vw;height:100%;background:#15151e;box-shadow:5px 0 50px rgba(0,0,0,.7);z-index:10000;transition:left .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;border-right:1px solid hsla(0,0%,100%,.05)}.comments-drawer.is-open{left:0}.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9995;opacity:0;transition:opacity .3s ease}.drawer-backdrop.is-active{opacity:1}.drawer-header{padding:20px 25px;border-bottom:1px solid hsla(0,0%,100%,.05);display:flex;justify-content:space-between;align-items:center;background:hsla(0,0%,100%,.02)}.drawer-header h3{margin:0;color:#f0f0f0;font-size:1.2rem}.close-drawer{background:none;border:none;color:#aaa;font-size:2rem;cursor:pointer;line-height:1;padding:0 10px;transition:color .3s}.close-drawer:hover{color:#f05}.drawer-body{flex:1;overflow-y:auto;padding:20px;scrollbar-width:thin;scrollbar-color:#444 #15151e}.drawer-body::-webkit-scrollbar{width:6px}.drawer-body::-webkit-scrollbar-thumb{background-color:#444;border-radius:10px}.drawer-form-box{background:hsla(0,0%,100%,.03);padding:20px;border-radius:16px;margin-bottom:30px;border:1px solid hsla(0,0%,100%,.05)}.drawer-form-box h4{margin-top:0;color:#00d2ff;font-size:.95rem;margin-bottom:15px;display:flex;align-items:center;gap:8px}.drawer-form-box h4:before{content:""}.drawer-textarea{min-height:100px;resize:vertical}.drawer-submit-btn{background:linear-gradient(90deg,#4a00e0,#8e2de2);color:#fff;border:none;font-weight:700;transition:opacity .3s}.drawer-submit-btn:hover{opacity:.9;box-shadow:0 5px 15px rgba(142,45,226,.3)}.drawer-comment-item{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid hsla(0,0%,100%,.05)}.dc-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}.dc-avatar{width:40px;height:40px;border-radius:50%;-o-object-fit:cover;object-fit:cover;border:2px solid #333}.dc-info{display:flex;flex-direction:column}.dc-name{font-weight:600;color:#e0e0e0;font-size:.9rem}.dc-date{font-size:.75rem;color:#666}.dc-content{color:#ccc;font-size:.9rem;line-height:1.6;padding-right:52px}.dc-replies{margin-right:15px;border-right:2px solid #444;padding-right:10px;margin-top:15px}@media (max-width:480px){.comments-drawer{width:100%}.floating-comments-btn{width:55px;height:55px;bottom:20px;left:20px}}.about-us-section{position:relative;background:linear-gradient(135deg,#3a005f,#0d011c);border-radius:12px;padding:3rem;margin:4rem 1rem;overflow:hidden;color:#e0e0e0;box-shadow:0 10px 30px rgba(0,0,0,.5)}.about-us-section:before{content:"";position:absolute;top:0;right:0;width:0;height:0;border-color:#5d008f transparent transparent;border-style:solid;border-width:60px 60px 0 0;box-shadow:-2px 2px 2px rgba(0,0,0,.2);transform:rotate(90deg);transform-origin:top right;z-index:1}.about-us-section:after{content:"";position:absolute;top:0;right:0;width:60px;height:60px;background:#5d008f;transform:translateY(-50%) rotate(-45deg);z-index:2;box-shadow:-5px 5px 10px rgba(0,0,0,.3)}.about-content{position:relative;z-index:3;max-width:1000px;margin:0 auto;text-align:right}.about-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem;justify-content:flex-start}.about-logo{height:80px;width:auto;flex-shrink:0;mix-blend-mode:normal;filter:drop-shadow(0 0 8px rgba(255,255,255,.3))}.about-title{font-family:Lalezar,cursive;font-size:3rem;color:#fc0;margin-bottom:0;padding-bottom:0;border-bottom:none;line-height:1.2;text-shadow:0 0 15px rgba(255,204,0,.4)}.about-text p{color:#e0e0e0;font-size:1.15rem;line-height:1.9;margin-bottom:1.2rem;text-align:justify}.about-text p:last-child{margin-bottom:0}@media (max-width:768px){.about-us-section{padding:2rem 1rem;margin:3rem .5rem}.about-us-section:after,.about-us-section:before{border-width:40px 40px 0 0;width:40px;height:40px}.about-header{flex-direction:column;align-items:flex-end;gap:.5rem;margin-bottom:1.5rem}}.site-footer{background:rgba(10,5,20,.95);border-top:1px solid rgba(168,85,247,.3);padding:1.5rem 1rem;text-align:center;direction:rtl;position:relative;z-index:100}.site-footer .social-links{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1rem}.site-footer .social-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(168,85,247,.15);color:#c77dff;font-size:1.5rem;transition:all .3s ease}.site-footer .social-icon:hover{background:rgba(168,85,247,.3);transform:translateY(-3px);color:#ffd7e0;box-shadow:0 5px 15px rgba(199,125,255,.3)}.site-footer .copyright{color:#a78bfa;font-size:.9rem}.back-to-top{position:fixed;bottom:20px;right:20px;width:40px;height:40px;background-color:rgba(168,85,247,.3);border-radius:50%;display:flex;justify-content:center;align-items:center;color:#ffd7e0;cursor:pointer;z-index:1000;transition:all .3s ease;opacity:0;visibility:hidden;border:1px solid rgba(168,85,247,.5)}.back-to-top.visible{opacity:1;visibility:visible}.back-to-top:hover{background-color:rgba(168,85,247,.5);transform:translateY(-5px)}@media (max-width:768px){.site-footer{padding:1.2rem .8rem}.site-footer .social-icon{width:36px;height:36px;font-size:1.3rem}.site-footer .copyright{font-size:.8rem}.back-to-top{bottom:15px;right:15px}}.chat-page-container{padding:2rem;max-width:1200px;margin:0 auto}.chat-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;color:var(--gold-glow)}.chat-back-btn{color:#fff;background:rgba(168,85,247,.2);padding:.5rem;border-radius:50%;transition:all .3s}.chat-back-btn:hover{background:rgba(168,85,247,.5)}.chat-container{height:70vh;background:rgba(0,0,0,.2);border-radius:12px;border:1px solid rgba(168,85,247,.2)}.chat-container,.chat-messages{display:flex;flex-direction:column}.chat-messages{flex-grow:1;overflow-y:auto;padding:1.5rem;gap:1.5rem}.chat-message{display:flex;gap:1rem;max-width:80%}.chat-message .message-avatar{width:45px;height:45px;border-radius:50%;-o-object-fit:cover;object-fit:cover;border:2px solid var(--gold-glow)}.chat-message .message-content{display:flex;flex-direction:column}.chat-message .message-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.chat-message .message-display-name{font-weight:700;color:#fff}.chat-message .message-time{font-size:.75rem;color:#aaa}.chat-message .message-bubble{background:rgba(168,85,247,.1);padding:.75rem 1.25rem;border-radius:20px 20px 20px 5px;border:1px solid rgba(168,85,247,.2)}.chat-message .message-text{color:#e0e0e0;line-height:1.6;white-space:pre-wrap;margin:0}.chat-message.current-user{align-self:flex-end;flex-direction:row-reverse}.chat-message.current-user .message-bubble{background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.3);border-radius:20px 20px 5px 20px}.chat-message.current-user .message-display-name{color:var(--gold-glow)}.chat-form{display:flex;padding:1rem;gap:1rem;border-top:1px solid rgba(168,85,247,.2);background:rgba(10,5,20,.5);border-radius:0 0 12px 12px}.chat-form #message-input{flex-grow:1;background:rgba(0,0,0,.5);border:1px solid rgba(168,85,247,.3);border-radius:20px;padding:.75rem 1rem;color:#fff;font-family:inherit;resize:none;height:50px}.chat-form #message-input:disabled{opacity:.5;cursor:not-allowed}.chat-form .send-btn{background:var(--gold-glow);border:none;color:#000;width:50px;height:50px;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .3s}.chat-form .send-btn:disabled{background:#555;cursor:not-allowed}.chat-form .send-btn:not(:disabled):hover{transform:scale(1.1);box-shadow:0 0 15px var(--gold-glow)}.authors-directory-page{padding:2rem;max-width:1200px;margin:0 auto}.authors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2rem}.author-card{background:rgba(10,5,20,.6);border:1px solid rgba(168,85,247,.2);border-radius:12px;padding:2rem 1.5rem;text-align:center;transition:all .3s ease;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:1rem}.author-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(168,85,247,.2);border-color:rgba(168,85,247,.5)}.author-avatar-wrapper{position:relative;width:100px;height:100px;border-radius:50%;margin:0 auto}.author-avatar-wrapper img{width:100%;height:100%;border-radius:50%;-o-object-fit:cover;object-fit:cover;border:2px solid var(--purple-glow);z-index:2;position:relative}.author-avatar-wrapper[class*=rank-]:before{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,var(--gold-glow),transparent 70%);animation:pulse 2.5s infinite;opacity:.6;z-index:1}.author-info{display:flex;flex-direction:column;align-items:center;gap:.5rem}.author-name{color:#fff;font-size:1.25rem;margin:0;font-weight:700}.author-rank{background:rgba(255,215,0,.1);color:var(--gold-glow);border:1px solid rgba(255,215,0,.3);padding:.25rem .75rem;border-radius:20px;font-size:.85rem;font-weight:700}.author-title{color:#aaa;font-size:.9rem;margin:0;line-height:1.4}.hover\:-translate-y-2:hover{--tw-translate-y:-0.5rem}.hover\:-translate-y-2:hover,.hover\:rotate-0:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:rotate-0:hover{--tw-rotate:0deg}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-red-500:hover{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.hover\:bg-red-900\/10:hover{background-color:rgba(127,29,29,.1)}.hover\:shadow-\[0_10px_20px_rgba\(220\2c 38\2c 38\2c 0\.3\)\]:hover{--tw-shadow:0 10px 20px rgba(220,38,38,.3);--tw-shadow-colored:0 10px 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.group:hover .group-hover\:w-full{width:100%}.group:hover .group-hover\:translate-y-0{--tw-translate-y:0px}.group:hover .group-hover\:scale-110,.group:hover .group-hover\:translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1}.group:hover .group-hover\:bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:grayscale-0{--tw-grayscale:grayscale(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@media (min-width:768px){.md\:right-4{right:1rem}.md\:top-4{top:1rem}.md\:my-16{margin-top:4rem;margin-bottom:4rem}.md\:mb-12{margin-bottom:3rem}.md\:h-14{height:3.5rem}.md\:h-80{height:20rem}.md\:w-14{width:3.5rem}.md\:w-40{width:10rem}.md\:w-72{width:18rem}.md\:gap-8{gap:2rem}.md\:p-5{padding:1.25rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:py-12{padding-top:3rem;padding-bottom:3rem}.md\:py-3{padding-top:.75rem;padding-bottom:.75rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:text-xs{font-size:.75rem;line-height:1rem}}
/* === Faragoman fix: article card cover image === */
.article-card{overflow:hidden}
.article-card__media{display:block;margin:-1.25rem -1.25rem 1rem;aspect-ratio:16/9;overflow:hidden;border-radius:.75rem .75rem 0 0;background:var(--surface-2,rgba(28,37,66,.55))}
.article-card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.article-card:hover .article-card__img{transform:scale(1.05)}
/* === Faragoman fix: center the story ring halo behind the image === */
.story-ring__halo{left:50%;top:0;transform:translateX(-50%)}
.story-ring:hover .story-ring__halo{transform:translateX(-50%) translateY(-2px) scale(1.04)}
/* FG-CARDS v2 BEGIN (hardened: !important + min-height insurance, pure ASCII) */
/* ============================================================================
Faragoman - Article Cards System
Bento Grid + Material 3 (Expressive) on the existing cosmic glass theme.
Architecture: CSS Cascade Layers + 3-tier Design Tokens.
Plain CSS (no @apply) so it works via direct upload, no build step.
Loaded AFTER app.min.css. Uses NEW class names (fg-*, bento*, pick-*)
to avoid any specificity war with existing/Tailwind rules.
============================================================================ */
/* ------------------------------------------------------------- TOKENS ----- */
:root {
/* Tier 1 - Reference palette (cosmic blue/purple) */
--fg-ref-primary: #7c9cff;
--fg-ref-primary-2: #5b7cfa;
--fg-ref-accent: #a78bfa;
--fg-ref-cyan: #22d3ee;
--fg-ref-gold: #fcd34d;
--fg-ref-gold-2: #f59e0b;
--fg-ref-ink: #040712;
/* Tier 2 - System / semantic (M3-style), mapped onto your tokens */
--fg-sys-primary: var(--fg-ref-primary);
--fg-sys-on-surface: var(--text, #e7ecff);
--fg-sys-on-surface-var: var(--muted, #9aa6cc);
--fg-sys-surface: var(--surface, rgba(20,27,51,.66));
--fg-sys-surface-2: var(--surface-2, rgba(28,37,66,.55));
--fg-sys-outline: var(--border, rgba(124,156,255,.14));
--fg-sys-corner-s: .75rem;
--fg-sys-corner-m: 1rem;
--fg-sys-corner-l: 1.5rem;
--fg-sys-corner-xl: 2rem;
--fg-sys-elev-1: 0 4px 14px rgba(8,12,28,.30);
--fg-sys-elev-2: 0 12px 34px rgba(8,12,28,.42);
--fg-sys-elev-3: 0 22px 60px rgba(8,12,28,.55);
--fg-sys-motion-fast: 160ms;
--fg-sys-motion-med: 280ms;
--fg-sys-motion-slow: 520ms;
--fg-sys-ease-spring: cubic-bezier(.2,.8,.2,1.2);
--fg-sys-ease-emph: cubic-bezier(.2,0,0,1);
--fg-sys-state-hover: .08;
/* Tier 3 - Component (cards) */
--fg-card-bg: linear-gradient(135deg, var(--fg-sys-surface), var(--fg-sys-surface-2));
--fg-card-radius: var(--fg-sys-corner-l);
--fg-card-pad: 1.1rem;
--fg-card-elev: var(--fg-sys-elev-1);
--fg-card-elev-hover: var(--fg-sys-elev-3);
--fg-card-border: 1px solid var(--fg-sys-outline);
--fg-scrim: linear-gradient(to top, rgba(4,7,18,.93) 0%, rgba(4,7,18,.55) 38%, rgba(4,7,18,.04) 72%);
--fg-bento-gap: 1rem;
}
/* ------------------------------------------------------------- LAYOUT ----- */
.fg-feed { margin-block: 1rem 0; }
.bento {
display: grid;
gap: var(--fg-bento-gap);
grid-template-columns: 1fr;
grid-auto-rows: 9.5rem;
grid-auto-flow: dense;
}
.bento-card { grid-row: span 2; }
.bento-card--hero { grid-row: span 2; }
@media (min-width: 560px) {
.bento { grid-template-columns: repeat(2, 1fr); }
.bento-card--hero { grid-column: span 2; grid-row: span 2; }
.bento-card:nth-child(6n+4) { grid-column: span 2; grid-row: span 1; }
}
@media (min-width: 960px) {
.bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 7.25rem; }
.bento-card { grid-column: span 1; grid-row: span 3; }
.bento-card--hero { grid-column: span 2; grid-row: span 4; }
.bento-card:nth-child(6n+4) { grid-column: span 2; grid-row: span 2; }
.bento-card:nth-child(6n+6) { grid-row: span 2; }
}
/* Single article: hero shouldn't leave a hole */
.bento-card--hero:only-child { grid-column: 1 / -1; }
/* ---------------------------------------------------------- COMPONENTS ---- */
/* Shared badge */
.fg-badge {
align-self: flex-start;
display: inline-flex; align-items: center; gap: .3rem;
font-size: .72rem; font-weight: 700; line-height: 1;
padding: .32rem .62rem; border-radius: 999px;
color: #cdd9ff; background: rgba(124,156,255,.18);
border: 1px solid rgba(124,156,255,.30);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* ---- Bento card (image-forward, scrim, text at bottom) ---- */
.bento-card {
position: relative; overflow: hidden; isolation: isolate;
display: block !important;
min-height: 13rem !important; /* collapse insurance: wins over stale cards.css */
border-radius: var(--fg-card-radius);
border: var(--fg-card-border);
background: var(--fg-card-bg);
box-shadow: var(--fg-card-elev);
transition: transform var(--fg-sys-motion-med) var(--fg-sys-ease-spring),
box-shadow var(--fg-sys-motion-med) var(--fg-sys-ease-emph);
}
.bento-card__media { position: absolute; inset: 0; z-index: 0; display: block; }
.bento-card__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform var(--fg-sys-motion-slow) var(--fg-sys-ease-emph);
}
.bento-card__fallback {
position: absolute; inset: 0; display: grid; place-items: center;
font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800;
color: rgba(231,236,255,.32);
background: radial-gradient(120% 120% at 80% 0, rgba(124,156,255,.22), transparent 60%), var(--fg-card-bg);
}
.bento-card::after { /* scrim */
content: ""; position: absolute; inset: 0; z-index: 1;
background: var(--fg-scrim); pointer-events: none;
}
.bento-card::before { /* M3 state layer */
content: ""; position: absolute; inset: 0; z-index: 1;
background: var(--fg-sys-primary); opacity: 0; pointer-events: none;
mix-blend-mode: soft-light;
transition: opacity var(--fg-sys-motion-fast) linear;
}
.bento-card__body {
position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2;
display: flex; flex-direction: column; gap: .5rem;
width: 100%; padding: var(--fg-card-pad);
}
.bento-card--hero { min-height: 20rem; }
.bento-card__title { margin: 0; font-size: 1.02rem; line-height: 1.5; font-weight: 800; }
.bento-card--hero .bento-card__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.bento-card__title a {
color: #fff; display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
}
.bento-card__excerpt {
margin: 0; color: rgba(231,236,255,.80); font-size: .88rem; line-height: 1.8;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* keep small cards clean: excerpt only on hero */
.bento-card:not(.bento-card--hero) .bento-card__excerpt { display: none; }
.bento-card__meta {
display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
font-size: .72rem; color: rgba(231,236,255,.66);
}
.bento-card__meta a { color: rgba(231,236,255,.86); }
.bento-card__meta .dot { opacity: .5; }
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--fg-card-elev-hover); }
.bento-card:hover::before { opacity: var(--fg-sys-state-hover); }
.bento-card:hover .bento-card__img { transform: scale(1.06); }
/* ---- Slider (auto-advancing, image cover, progress bar) ---- */
.fg-slider { position: relative; margin: 0 0 1.75rem; }
.fg-slider__track {
display: flex !important; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; padding: .5rem .25rem 1rem;
scrollbar-width: none; scroll-behavior: smooth;
}
.fg-slider__track::-webkit-scrollbar { display: none; }
.fg-slide {
position: relative; flex: 0 0 92% !important; max-width: 92% !important; scroll-snap-align: center;
aspect-ratio: 16 / 9 !important; min-height: 240px !important; overflow: hidden !important; isolation: isolate;
border-radius: var(--fg-sys-corner-xl); border: 1px solid var(--fg-sys-outline);
box-shadow: var(--fg-sys-elev-2); background: var(--fg-card-bg);
}
.fg-slide__img {
position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important;
transform: scale(1.05); transition: transform 1.2s var(--fg-sys-ease-emph);
}
.fg-slide__fallback {
position: absolute; inset: 0; display: grid; place-items: center;
font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 800; color: rgba(231,236,255,.15);
background: radial-gradient(120% 120% at 80% 0, rgba(124,156,255,.25), transparent 60%), var(--fg-card-bg);
}
.fg-slide::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to top, rgba(4,7,18,.94), rgba(4,7,18,.40) 45%, transparent 75%);
}
.fg-slide__body {
position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2;
padding: clamp(1rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .6rem;
}
.fg-slide__title { margin: 0; font-size: clamp(1.3rem, 3.2vw, 2.1rem); line-height: 1.45; font-weight: 800; }
.fg-slide__title a { color: #fff; }
.fg-slide__excerpt {
margin: 0; color: rgba(231,236,255,.82); line-height: 1.85; font-size: clamp(.85rem, 1.6vw, 1rem);
max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fg-slide__meta { display: flex; gap: .5rem; align-items: center; color: rgba(231,236,255,.72); font-size: .82rem; }
.fg-slide.is-active .fg-slide__img { transform: scale(1); }
.fg-slider__bar { position: relative; height: 4px; border-radius: 999px; background: rgba(124,156,255,.16); overflow: hidden; margin: 0 .25rem; }
.fg-slider__bar-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: linear-gradient(90deg, var(--fg-ref-primary), var(--fg-ref-accent)); border-radius: 999px; }
.fg-slider.is-playing .fg-slider__bar-fill { animation: fg-progress var(--fg-slider-interval, 5s) linear forwards; }
@keyframes fg-progress { from { width: 0; } to { width: 100%; } }
.fg-slider__dots { display: flex; gap: .45rem; justify-content: center; margin-top: .75rem; }
.fg-slider__dot {
width: 8px; height: 8px; border: 0; padding: 0; border-radius: 999px; cursor: pointer;
background: var(--fg-sys-outline);
transition: width var(--fg-sys-motion-med) var(--fg-sys-ease-spring), transform .2s, background .2s;
}
.fg-slider__dot.is-active { width: 22px; background: linear-gradient(90deg, var(--fg-ref-primary), var(--fg-ref-accent)); }
.fg-slider__dot:hover { transform: scale(1.25); }
@media (min-width: 640px) { .fg-slide { flex-basis: 64%; max-width: 64%; } }
@media (min-width: 1024px) { .fg-slide { flex-basis: 52%; max-width: 52%; } }
/* ----------------------------------------------------------- VARIANTS ----- */
/* Editor's picks - gold, image-cover variant */
.fg-picks__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 2px solid rgba(252,211,77,.5); padding-bottom: .6rem; margin-bottom: 1.5rem; }
.fg-picks__title { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--fg-ref-gold); font-family: 'Lalezar', cursive; }
.fg-picks { display: grid; gap: var(--fg-bento-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.pick-card {
position: relative; overflow: hidden; isolation: isolate;
border-radius: var(--fg-sys-corner-l); background: var(--fg-card-bg);
border: 1px solid rgba(252,211,77,.30);
box-shadow: 0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(252,211,77,.15);
transition: transform var(--fg-sys-motion-med) var(--fg-sys-ease-spring), box-shadow var(--fg-sys-motion-med) var(--fg-sys-ease-emph);
}
.pick-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(252,211,77,.18), 0 8px 26px rgba(0,0,0,.4); }
.pick-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.pick-card__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); transition: transform var(--fg-sys-motion-slow) var(--fg-sys-ease-emph); }
.pick-card:hover .pick-card__img { transform: scale(1.06); }
.pick-card__fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; font-weight: 800; color: rgba(252,211,77,.25); background: radial-gradient(120% 120% at 50% 0, rgba(252,211,77,.16), transparent 60%), var(--fg-card-bg); }
.pick-card__ribbon { position: absolute; inset-block-start: .7rem; inset-inline-end: .7rem; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 800; color: #1a1304; padding: .3rem .6rem; border-radius: 999px; background: linear-gradient(135deg, #fde68a, var(--fg-ref-gold-2)); box-shadow: 0 4px 12px rgba(245,158,11,.45); }
.pick-card__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .55rem; }
.pick-card__title { margin: 0; font-size: 1.12rem; line-height: 1.55; font-weight: 800; }
.pick-card__title a { color: var(--fg-sys-on-surface); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick-card__title a:hover { color: var(--fg-ref-gold); }
.pick-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .76rem; color: var(--fg-sys-on-surface-var); }
.pick-card__author { color: var(--fg-ref-gold); font-weight: 700; }
.pick-card__meta .dot { opacity: .5; }
/* ------------------------------------------------- A11Y / FALLBACKS ------- */
.bento-card a:focus-visible, .pick-card a:focus-visible,
.fg-slide a:focus-visible, .fg-slider__dot:focus-visible {
outline: 2px solid var(--fg-ref-cyan); outline-offset: 3px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
.bento-card, .bento-card__img, .pick-card, .pick-card__img,
.fg-slide__img, .fg-slider__track, .fg-slider__dot {
transition: none !important; scroll-behavior: auto !important;
}
.fg-slider.is-playing .fg-slider__bar-fill { animation: none; width: 100%; }
.fg-slide__img { transform: none; }
}
/* aspect-ratio fallback for old browsers */
@supports not (aspect-ratio: 1) {
.pick-card__media { height: 0; padding-bottom: 62.5%; }
.fg-slide { height: clamp(240px, 42vw, 460px); }
}
/* FG-CARDS v2 END */
/* ============================================================================
Faragoman — Article Cards System
Bento Grid + Material 3 (Expressive) on the existing cosmic glass theme.
Architecture: CSS Cascade Layers + 3-tier Design Tokens.
Plain CSS (no @apply) so it works via direct upload, no build step.
Loaded AFTER app.min.css. Uses NEW class names (fg-*, bento*, pick-*)
to avoid any specificity war with existing/Tailwind rules.
============================================================================ */
@layer fg.tokens, fg.base, fg.layout, fg.components, fg.variants, fg.a11y, fg.overrides;
/* ------------------------------------------------------------- TOKENS ----- */
@layer fg.tokens {
:root {
/* Tier 1 — Reference palette (cosmic blue/purple) */
--fg-ref-primary: #7c9cff;
--fg-ref-primary-2: #5b7cfa;
--fg-ref-accent: #a78bfa;
--fg-ref-cyan: #22d3ee;
--fg-ref-gold: #fcd34d;
--fg-ref-gold-2: #f59e0b;
--fg-ref-ink: #040712;
/* Tier 2 — System / semantic (M3-style), mapped onto your tokens */
--fg-sys-primary: var(--fg-ref-primary);
--fg-sys-on-surface: var(--text, #e7ecff);
--fg-sys-on-surface-var: var(--muted, #9aa6cc);
--fg-sys-surface: var(--surface, rgba(20,27,51,.66));
--fg-sys-surface-2: var(--surface-2, rgba(28,37,66,.55));
--fg-sys-outline: var(--border, rgba(124,156,255,.14));
--fg-sys-corner-s: .75rem;
--fg-sys-corner-m: 1rem;
--fg-sys-corner-l: 1.5rem;
--fg-sys-corner-xl: 2rem;
--fg-sys-elev-1: 0 4px 14px rgba(8,12,28,.30);
--fg-sys-elev-2: 0 12px 34px rgba(8,12,28,.42);
--fg-sys-elev-3: 0 22px 60px rgba(8,12,28,.55);
--fg-sys-motion-fast: 160ms;
--fg-sys-motion-med: 280ms;
--fg-sys-motion-slow: 520ms;
--fg-sys-ease-spring: cubic-bezier(.2,.8,.2,1.2);
--fg-sys-ease-emph: cubic-bezier(.2,0,0,1);
--fg-sys-state-hover: .08;
/* Tier 3 — Component (cards) */
--fg-card-bg: linear-gradient(135deg, var(--fg-sys-surface), var(--fg-sys-surface-2));
--fg-card-radius: var(--fg-sys-corner-l);
--fg-card-pad: 1.1rem;
--fg-card-elev: var(--fg-sys-elev-1);
--fg-card-elev-hover: var(--fg-sys-elev-3);
--fg-card-border: 1px solid var(--fg-sys-outline);
--fg-scrim: linear-gradient(to top, rgba(4,7,18,.93) 0%, rgba(4,7,18,.55) 38%, rgba(4,7,18,.04) 72%);
--fg-bento-gap: 1rem;
}
}
/* ------------------------------------------------------------- LAYOUT ----- */
@layer fg.layout {
.fg-feed { margin-block: 1rem 0; }
.bento {
display: grid;
gap: var(--fg-bento-gap);
grid-template-columns: 1fr;
grid-auto-rows: 9.5rem;
grid-auto-flow: dense;
}
.bento-card { grid-row: span 2; }
.bento-card--hero { grid-row: span 2; }
@media (min-width: 560px) {
.bento { grid-template-columns: repeat(2, 1fr); }
.bento-card--hero { grid-column: span 2; grid-row: span 2; }
.bento-card:nth-child(6n+4) { grid-column: span 2; grid-row: span 1; }
}
@media (min-width: 960px) {
.bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 7.25rem; }
.bento-card { grid-column: span 1; grid-row: span 3; }
.bento-card--hero { grid-column: span 2; grid-row: span 4; }
.bento-card:nth-child(6n+4) { grid-column: span 2; grid-row: span 2; }
.bento-card:nth-child(6n+6) { grid-row: span 2; }
}
/* Single article: hero shouldn't leave a hole */
.bento-card--hero:only-child { grid-column: 1 / -1; }
}
/* ---------------------------------------------------------- COMPONENTS ---- */
@layer fg.components {
/* Shared badge */
.fg-badge {
align-self: flex-start;
display: inline-flex; align-items: center; gap: .3rem;
font-size: .72rem; font-weight: 700; line-height: 1;
padding: .32rem .62rem; border-radius: 999px;
color: #cdd9ff; background: rgba(124,156,255,.18);
border: 1px solid rgba(124,156,255,.30);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* ---- Bento card (image-forward, scrim, text at bottom) ---- */
.bento-card {
position: relative; overflow: hidden; isolation: isolate;
display: flex; min-height: 0;
border-radius: var(--fg-card-radius);
border: var(--fg-card-border);
background: var(--fg-card-bg);
box-shadow: var(--fg-card-elev);
transition: transform var(--fg-sys-motion-med) var(--fg-sys-ease-spring),
box-shadow var(--fg-sys-motion-med) var(--fg-sys-ease-emph);
}
.bento-card__media { position: absolute; inset: 0; z-index: 0; display: block; }
.bento-card__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform var(--fg-sys-motion-slow) var(--fg-sys-ease-emph);
}
.bento-card__fallback {
position: absolute; inset: 0; display: grid; place-items: center;
font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800;
color: rgba(231,236,255,.16);
background: radial-gradient(120% 120% at 80% 0, rgba(124,156,255,.22), transparent 60%), var(--fg-card-bg);
}
.bento-card::after { /* scrim */
content: ""; position: absolute; inset: 0; z-index: 1;
background: var(--fg-scrim); pointer-events: none;
}
.bento-card::before { /* M3 state layer */
content: ""; position: absolute; inset: 0; z-index: 1;
background: var(--fg-sys-primary); opacity: 0; pointer-events: none;
mix-blend-mode: soft-light;
transition: opacity var(--fg-sys-motion-fast) linear;
}
.bento-card__body {
position: relative; z-index: 2; margin-top: auto;
display: flex; flex-direction: column; gap: .5rem;
width: 100%; padding: var(--fg-card-pad);
}
.bento-card__title { margin: 0; font-size: 1.02rem; line-height: 1.5; font-weight: 800; }
.bento-card--hero .bento-card__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.bento-card__title a {
color: #fff; display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
}
.bento-card__excerpt {
margin: 0; color: rgba(231,236,255,.80); font-size: .88rem; line-height: 1.8;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* keep small cards clean: excerpt only on hero */
.bento-card:not(.bento-card--hero) .bento-card__excerpt { display: none; }
.bento-card__meta {
display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
font-size: .72rem; color: rgba(231,236,255,.66);
}
.bento-card__meta a { color: rgba(231,236,255,.86); }
.bento-card__meta .dot { opacity: .5; }
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--fg-card-elev-hover); }
.bento-card:hover::before { opacity: var(--fg-sys-state-hover); }
.bento-card:hover .bento-card__img { transform: scale(1.06); }
/* ---- Slider (auto-advancing, image cover, progress bar) ---- */
.fg-slider { position: relative; margin: 0 0 1.75rem; }
.fg-slider__track {
display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; padding: .5rem .25rem 1rem;
scrollbar-width: none; scroll-behavior: smooth;
}
.fg-slider__track::-webkit-scrollbar { display: none; }
.fg-slide {
position: relative; flex: 0 0 92%; max-width: 92%; scroll-snap-align: center;
aspect-ratio: 16 / 9; min-height: 240px; overflow: hidden; isolation: isolate;
border-radius: var(--fg-sys-corner-xl); border: 1px solid var(--fg-sys-outline);
box-shadow: var(--fg-sys-elev-2); background: var(--fg-card-bg);
}
.fg-slide__img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transform: scale(1.05); transition: transform 1.2s var(--fg-sys-ease-emph);
}
.fg-slide__fallback {
position: absolute; inset: 0; display: grid; place-items: center;
font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 800; color: rgba(231,236,255,.15);
background: radial-gradient(120% 120% at 80% 0, rgba(124,156,255,.25), transparent 60%), var(--fg-card-bg);
}
.fg-slide::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to top, rgba(4,7,18,.94), rgba(4,7,18,.40) 45%, transparent 75%);
}
.fg-slide__body {
position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2;
padding: clamp(1rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .6rem;
}
.fg-slide__title { margin: 0; font-size: clamp(1.3rem, 3.2vw, 2.1rem); line-height: 1.45; font-weight: 800; }
.fg-slide__title a { color: #fff; }
.fg-slide__excerpt {
margin: 0; color: rgba(231,236,255,.82); line-height: 1.85; font-size: clamp(.85rem, 1.6vw, 1rem);
max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fg-slide__meta { display: flex; gap: .5rem; align-items: center; color: rgba(231,236,255,.72); font-size: .82rem; }
.fg-slide.is-active .fg-slide__img { transform: scale(1); }
.fg-slider__bar { position: relative; height: 4px; border-radius: 999px; background: rgba(124,156,255,.16); overflow: hidden; margin: 0 .25rem; }
.fg-slider__bar-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: linear-gradient(90deg, var(--fg-ref-primary), var(--fg-ref-accent)); border-radius: 999px; }
.fg-slider.is-playing .fg-slider__bar-fill { animation: fg-progress var(--fg-slider-interval, 5s) linear forwards; }
@keyframes fg-progress { from { width: 0; } to { width: 100%; } }
.fg-slider__dots { display: flex; gap: .45rem; justify-content: center; margin-top: .75rem; }
.fg-slider__dot {
width: 8px; height: 8px; border: 0; padding: 0; border-radius: 999px; cursor: pointer;
background: var(--fg-sys-outline);
transition: width var(--fg-sys-motion-med) var(--fg-sys-ease-spring), transform .2s, background .2s;
}
.fg-slider__dot.is-active { width: 22px; background: linear-gradient(90deg, var(--fg-ref-primary), var(--fg-ref-accent)); }
.fg-slider__dot:hover { transform: scale(1.25); }
@media (min-width: 640px) { .fg-slide { flex-basis: 64%; max-width: 64%; } }
@media (min-width: 1024px) { .fg-slide { flex-basis: 52%; max-width: 52%; } }
}
/* ----------------------------------------------------------- VARIANTS ----- */
@layer fg.variants {
/* Editor's picks — gold, image-cover variant */
.fg-picks__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 2px solid rgba(252,211,77,.5); padding-bottom: .6rem; margin-bottom: 1.5rem; }
.fg-picks__title { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--fg-ref-gold); font-family: 'Lalezar', cursive; }
.fg-picks { display: grid; gap: var(--fg-bento-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.pick-card {
position: relative; overflow: hidden; isolation: isolate;
border-radius: var(--fg-sys-corner-l); background: var(--fg-card-bg);
border: 1px solid rgba(252,211,77,.30);
box-shadow: 0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(252,211,77,.15);
transition: transform var(--fg-sys-motion-med) var(--fg-sys-ease-spring), box-shadow var(--fg-sys-motion-med) var(--fg-sys-ease-emph);
}
.pick-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(252,211,77,.18), 0 8px 26px rgba(0,0,0,.4); }
.pick-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.pick-card__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); transition: transform var(--fg-sys-motion-slow) var(--fg-sys-ease-emph); }
.pick-card:hover .pick-card__img { transform: scale(1.06); }
.pick-card__fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; font-weight: 800; color: rgba(252,211,77,.25); background: radial-gradient(120% 120% at 50% 0, rgba(252,211,77,.16), transparent 60%), var(--fg-card-bg); }
.pick-card__ribbon { position: absolute; inset-block-start: .7rem; inset-inline-end: .7rem; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 800; color: #1a1304; padding: .3rem .6rem; border-radius: 999px; background: linear-gradient(135deg, #fde68a, var(--fg-ref-gold-2)); box-shadow: 0 4px 12px rgba(245,158,11,.45); }
.pick-card__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .55rem; }
.pick-card__title { margin: 0; font-size: 1.12rem; line-height: 1.55; font-weight: 800; }
.pick-card__title a { color: var(--fg-sys-on-surface); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick-card__title a:hover { color: var(--fg-ref-gold); }
.pick-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .76rem; color: var(--fg-sys-on-surface-var); }
.pick-card__author { color: var(--fg-ref-gold); font-weight: 700; }
.pick-card__meta .dot { opacity: .5; }
}
/* ------------------------------------------------- A11Y / FALLBACKS ------- */
@layer fg.a11y {
.bento-card a:focus-visible, .pick-card a:focus-visible,
.fg-slide a:focus-visible, .fg-slider__dot:focus-visible {
outline: 2px solid var(--fg-ref-cyan); outline-offset: 3px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
.bento-card, .bento-card__img, .pick-card, .pick-card__img,
.fg-slide__img, .fg-slider__track, .fg-slider__dot {
transition: none !important; scroll-behavior: auto !important;
}
.fg-slider.is-playing .fg-slider__bar-fill { animation: none; width: 100%; }
.fg-slide__img { transform: none; }
}
/* aspect-ratio fallback for old browsers */
@supports not (aspect-ratio: 1) {
.pick-card__media { height: 0; padding-bottom: 62.5%; }
.fg-slide { height: clamp(240px, 42vw, 460px); }
}
}
/* ==========================================================================
Category navigation rail (Phase 2)
Site-wide, horizontally scrollable category chips shown under the header.
Dependency-free, theme-aware, RTL-native. Everything is scoped under
.category-nav so it cannot leak into the rest of the design system.
========================================================================== */
.category-nav {
background: rgba(11, 16, 32, 0.55);
background: color-mix(in srgb, var(--surface, #0b1020) 60%, transparent);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border-block: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .category-nav {
background: rgba(255, 255, 255, 0.7);
border-block-color: rgba(15, 23, 42, 0.08);
}
.category-nav__inner {
display: flex;
align-items: center;
gap: 0.75rem;
padding-block: 0.55rem;
}
.category-nav__label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex: 0 0 auto;
font-size: 0.82rem;
font-weight: 700;
opacity: 0.72;
white-space: nowrap;
}
.category-nav__label svg {
flex: 0 0 auto;
}
.category-nav__list {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
padding: 0 0 0.15rem;
list-style: none;
overflow-x: auto;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
.category-nav__list::-webkit-scrollbar {
height: 4px;
}
.category-nav__list::-webkit-scrollbar-thumb {
background: rgba(127, 127, 127, 0.4);
border-radius: 4px;
}
.category-nav__item {
flex: 0 0 auto;
scroll-snap-align: start;
}
.category-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.34rem 0.8rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: inherit;
font-size: 0.85rem;
line-height: 1.6;
text-decoration: none;
white-space: nowrap;
transition: background-color .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}
[data-theme="light"] .category-chip {
border-color: rgba(15, 23, 42, 0.12);
background: rgba(15, 23, 42, 0.04);
}
.category-chip:hover,
.category-chip:focus-visible {
transform: translateY(-1px);
border-color: rgba(124, 92, 255, 0.55);
background: rgba(124, 92, 255, 0.14);
}
.category-chip.is-active {
border-color: transparent;
background: linear-gradient(135deg, #7c5cff, #4f46e5);
color: #fff;
font-weight: 700;
}
.category-chip__count {
font-size: 0.72rem;
opacity: 0.7;
font-variant-numeric: tabular-nums;
}
.category-chip.is-active .category-chip__count {
opacity: 0.85;
}
@media (max-width: 640px) {
.category-nav__label-text {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.category-chip {
transition: none;
}
.category-chip:hover,
.category-chip:focus-visible {
transform: none;
}
}
/* =====================================================================
faragoman — enhance.css (modular enhancement layer, no build step)
Loaded LAST after app.min.css / cards.css / category-nav.css on public
pages and after app.min.css on the admin shell. Purely additive: it is
safe to remove by simply unlinking it. Repairs legacy design tokens and
adds the modern UI layer requested (announcements, stories, editor-picks
rail, character-analysis, admin mobile drawer, panel entry) + 5 extras.
===================================================================== */
/* ---- 0. Legacy design tokens used but never defined ------------------ */
:root{
--gold-glow:#fbbf24;
--gold-glow-soft:rgba(251,191,36,.16);
--purple-glow:#8b5cf6;
--purple-glow-soft:rgba(139,92,246,.18);
--fg-radius:16px;
--fg-shadow:0 18px 45px -20px rgba(8,12,30,.9);
}
html[data-theme="light"]{
--gold-glow:#d97706;
--purple-glow:#7c3aed;
}
/* ---- accessibility / global polish ---------------------------------- */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}
:focus-visible{outline:2px solid var(--purple-glow);outline-offset:2px;border-radius:6px;}
/* === 1. Global announcements (welcome banner) — was invisible ======== */
.fg-anns{
background:linear-gradient(100deg,var(--purple-glow),#6366f1 55%,var(--gold-glow));
color:#0b1020;padding:.55rem 1rem;box-shadow:0 6px 24px -10px rgba(139,92,246,.7);
}
.fg-anns__inner{max-width:1200px;margin:0 auto;display:flex;align-items:flex-start;gap:.6rem;}
.fg-anns__icon{font-size:1.1rem;line-height:1.6;flex:0 0 auto;}
.fg-anns__list{display:flex;flex-direction:column;gap:.4rem;flex:1 1 auto;}
.fg-anns__item{
display:flex;justify-content:space-between;align-items:center;gap:.75rem;
background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.35);
padding:.4rem .7rem;border-radius:10px;backdrop-filter:blur(4px);
}
.fg-anns__text{font-weight:600;font-size:.92rem;color:#0b1020;}
.fg-anns__text strong{color:#0b1020;}
.fg-anns__close{background:transparent;border:0;font-size:1.25rem;line-height:1;cursor:pointer;color:#0b1020;opacity:.7;flex:0 0 auto;}
.fg-anns__close:hover{opacity:1;transform:scale(1.1);}
/* === 2. Stories — any aspect ratio fits cleanly (blurred backdrop) === */
.story-viewer__stage{position:relative;overflow:hidden;}
.story-viewer__stage::before{
content:"";position:absolute;inset:0;z-index:0;
background-image:var(--story-bg,none);background-size:cover;background-position:center;
filter:blur(34px) brightness(.42) saturate(1.25);
transform:scale(1.25);pointer-events:none;border-radius:inherit;
}
.story-viewer__img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain!important;background:transparent;}
.story-viewer__bars{position:relative;z-index:4;}
.story-viewer__head{position:relative;z-index:4;}
.story-viewer__cta{z-index:4;}
.story-viewer__nav{z-index:4;}
/* === 3. Editor picks & generic horizontal rails (snap + arrows) ===== */
.fg-picks__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap;}
.fg-rail__nav{display:flex;gap:.5rem;}
.fg-rail__btn{
inline-size:40px;block-size:40px;border-radius:50%;border:1px solid var(--border);
background:var(--surface);color:var(--text);font-size:1.5rem;line-height:1;cursor:pointer;
display:grid;place-items:center;transition:transform .2s,background .2s,color .2s;
}
.fg-rail__btn:hover{background:var(--purple-glow);color:#fff;transform:translateY(-2px);}
.fg-picks--rail,.ca-rail{
display:flex;gap:1.25rem;overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
padding:.25rem .25rem 1rem;-webkit-overflow-scrolling:touch;
scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.fg-picks--rail::-webkit-scrollbar,.ca-rail::-webkit-scrollbar{height:8px;}
.fg-picks--rail::-webkit-scrollbar-thumb,.ca-rail::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;}
.fg-picks--rail .pick-card{flex:0 0 clamp(240px,72vw,300px);scroll-snap-align:start;}
/* === 4. Character analysis (نقد شخصیت) ============================ */
.ca-section{margin:4rem auto;max-width:1200px;padding:0 1.5rem;}
.ca-section__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap;}
.ca-section__title,.fg-picks__title{font-size:clamp(1.25rem,3vw,1.6rem);font-weight:800;margin:0;}
.ca-section__tools{display:flex;align-items:center;gap:.75rem;}
.ca-section__all{color:var(--purple-glow);font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap;}
.ca-section__all:hover{text-decoration:underline;}
.ca-page{max-width:1100px;margin:2rem auto;padding:0 1.5rem;}
.ca-page__head{text-align:center;margin-bottom:2.5rem;}
.ca-page__title{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:900;background:linear-gradient(120deg,var(--purple-glow),var(--gold-glow));-webkit-background-clip:text;background-clip:text;color:transparent;}
.ca-page__sub{color:var(--muted);max-width:640px;margin:.75rem auto 0;line-height:1.9;}
.ca-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;}
.ca-card{flex:0 0 clamp(240px,72vw,290px);scroll-snap-align:start;}
.ca-card--grid{flex:none;}
.ca-card__link{display:block;height:100%;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--fg-radius);padding:1.4rem 1.25rem;position:relative;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s;}
.ca-card__link::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 80% at 100% 0,var(--purple-glow-soft),transparent 60%);opacity:0;transition:opacity .25s;}
.ca-card__link:hover{transform:translateY(-4px);border-color:var(--purple-glow);box-shadow:var(--fg-shadow);}
.ca-card__link:hover::after{opacity:1;}
.ca-card__mark{display:grid;place-items:center;inline-size:52px;block-size:52px;border-radius:14px;font-size:1.5rem;font-weight:900;color:#fff;margin-bottom:.9rem;background:linear-gradient(135deg,var(--purple-glow),var(--gold-glow));box-shadow:0 8px 20px -8px var(--purple-glow);}
.ca-card__name{font-size:1.15rem;font-weight:800;margin:0 0 .5rem;}
.ca-card__excerpt{color:var(--muted);font-size:.9rem;line-height:1.8;margin:0 0 .75rem;}
.ca-card__ref{display:inline-block;font-size:.78rem;color:var(--purple-glow);background:var(--purple-glow-soft);padding:.2rem .6rem;border-radius:99px;}
.ca-single{max-width:820px;margin:2rem auto;padding:0 1.25rem;}
.ca-single__head{padding:1.75rem;margin-bottom:1.25rem;text-align:center;}
.ca-single__badge{display:inline-block;font-size:.8rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--purple-glow),var(--gold-glow));padding:.25rem .8rem;border-radius:99px;margin-bottom:.75rem;}
.ca-single__title{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:900;margin:.25rem 0;}
.ca-single__meta{color:var(--muted);font-size:.9rem;display:flex;gap:.5rem;justify-content:center;align-items:center;flex-wrap:wrap;}
.ca-single__meta a{color:var(--purple-glow);text-decoration:none;}
.ca-single__body{padding:1.75rem;line-height:2.1;font-size:1.02rem;}
.ca-single__body.ca-prose :is(h1,h2,h3){margin:1.2rem 0 .6rem;font-weight:800;}
.ca-single__body.ca-prose p{margin:0 0 1rem;}
.ca-single__body.ca-prose img{max-width:100%;height:auto;border-radius:12px;}
/* === 5. Article card polish (bento + picks) ========================= */
.bento-card,.pick-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.bento-card:hover,.pick-card:hover{transform:translateY(-4px);box-shadow:var(--fg-shadow);}
.bento-card__media,.pick-card__media{position:relative;overflow:hidden;background-image:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%);background-size:200% 100%;animation:fg-shimmer 1.6s linear infinite;}
.bento-card__media::after,.pick-card__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(7,11,24,.55),transparent 45%);}
.bento-card__img,.pick-card__img{transition:transform .5s ease;position:relative;z-index:1;}
.bento-card:hover .bento-card__img,.pick-card:hover .pick-card__img{transform:scale(1.06);}
@keyframes fg-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
/* === 6. Admin panel entry button =================================== */
.btn-panel{display:inline-flex;align-items:center;gap:.4rem;}
.btn-panel svg{flex:0 0 auto;}
/* === 7. Admin shell — mobile off-canvas drawer + hamburger ========= */
.admin-burger{display:none;align-items:center;justify-content:center;inline-size:42px;block-size:42px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;flex:0 0 auto;}
.admin-drawer-backdrop{position:fixed;inset:0;z-index:55;background:rgba(4,7,18,.6);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;backdrop-filter:blur(2px);}
@media (max-width:859px){
.admin-burger{display:inline-flex;}
.admin-topbar{display:flex;align-items:center;gap:.75rem;}
.admin-sidebar{position:fixed;inset-block:0;inset-inline-end:0;z-index:60;inline-size:min(84vw,300px);max-inline-size:300px;overflow-y:auto;transform:translateX(110%);transition:transform .32s cubic-bezier(.4,0,.2,1);box-shadow:-20px 0 50px -20px rgba(0,0,0,.7);}
[dir="rtl"] .admin-sidebar{transform:translateX(-110%);}
body.admin-drawer-open .admin-sidebar{transform:none;}
body.admin-drawer-open .admin-drawer-backdrop{opacity:1;visibility:visible;}
.admin-sidebar .admin-nav{flex-direction:column;overflow:visible;}
}
@media (min-width:860px){.admin-drawer-backdrop{display:none;}}
/* === 8. Admin helper classes missing in CSS ======================== */
.admin-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.admin-title{font-size:1.4rem;font-weight:800;margin:0;}
.form-group{margin-bottom:1.1rem;display:flex;flex-direction:column;gap:.4rem;}
.form-group label{font-weight:600;font-size:.92rem;color:var(--text);}
.form-control{width:100%;padding:.65rem .8rem;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font:inherit;}
.form-control:focus{outline:none;border-color:var(--purple-glow);box-shadow:0 0 0 3px var(--purple-glow-soft);}
textarea.form-control{min-height:180px;resize:vertical;line-height:1.9;}
.btn-secondary{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none;}
.btn-secondary:hover{border-color:var(--purple-glow);}
.btn-icon{display:inline-grid;place-items:center;inline-size:36px;block-size:36px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none;}
.btn-icon:hover{border-color:var(--purple-glow);}
.text-danger{color:#f87171;}
.text-muted{color:var(--muted);}
.text-center{text-align:center;}
/* === 9. Extras — #1 reading progress, #5 share button ============== */
.fg-readbar{position:fixed;inset-block-start:0;inset-inline:0;block-size:3px;z-index:120;background:linear-gradient(90deg,var(--purple-glow),var(--gold-glow));transform:scaleX(0);transform-origin:right center;transition:transform .1s linear;}
.fg-share{position:fixed;inset-block-end:5.5rem;inset-inline-start:1.1rem;z-index:90;inline-size:48px;block-size:48px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;display:grid;place-items:center;box-shadow:var(--fg-shadow);transition:transform .2s,background .2s,color .2s;}
.fg-share:hover{transform:translateY(-3px);background:var(--purple-glow);color:#fff;}
.fg-share__toast{position:fixed;inset-block-end:7.5rem;inset-inline-start:1.1rem;z-index:91;background:var(--purple-glow);color:#fff;padding:.5rem .9rem;border-radius:10px;font-size:.85rem;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;pointer-events:none;}
.fg-share__toast.is-on{opacity:1;transform:none;}
@media (min-width:768px){.fg-share{inset-block-end:1.5rem;}.fg-share__toast{inset-block-end:3.5rem;}}
/* Extra #2 — scroll reveal (degrades gracefully) */
html.fg-js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-in{opacity:1;transform:none;}
/* Extra #3 — seen stories dimming */
.story-ring.is-seen .story-ring__halo{opacity:.35;filter:grayscale(.4);}
.story-ring.is-seen .story-ring__label{opacity:.6;}
/* ==========================================================================
Faragoman — Stories image fit fix (اصلاح نشستن عکس استوری)
The viewer stage is a fixed portrait frame. `object-fit:cover` cropped any
non-portrait image badly. Fix: show the full image with `contain` on top of a
blurred, same-image backdrop (Instagram-style) so every aspect ratio sits
correctly with no ugly empty bars. Loaded globally.
========================================================================== */
/* blurred backdrop layer — fed the current story image via --story-bg (JS) */
.story-viewer__stage::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: var(--story-bg, none);
background-size: cover;
background-position: center;
filter: blur(34px) brightness(.55) saturate(1.1);
transform: scale(1.25);
pointer-events: none;
}
.story-viewer__stage::after {
/* subtle top/bottom vignette so title & CTA stay legible */
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(3, 6, 18, .45), transparent 22% 70%, rgba(3, 6, 18, .55));
pointer-events: none;
}
/* the actual image now fits fully, centred, above the backdrop */
.story-viewer__img {
object-fit: contain !important;
-o-object-fit: contain !important;
z-index: 2;
background: transparent;
}
/* ---------------------------------------------------------------------------
Ring thumbnails: the circular frame was missing `overflow:hidden`, so the
image spilled outside the circle and looked broken. Clip the frame to a
perfect circle and let the image fill it (cover) so it always sits cleanly.
--------------------------------------------------------------------------- */
.story-ring__frame {
overflow: hidden;
aspect-ratio: 1 / 1;
border-radius: 999px;
}
.story-ring__img {
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
border-radius: 999px;
display: block;
}
@media (prefers-reduced-motion: reduce) {
.story-viewer__stage::before { transform: scale(1.25); }
}
/* ===========================================================================
Faragoman — Mobile responsiveness & overflow fixes
Additive layer loaded after app.min.css / stories-fix.css. Safe to upload
directly (no build step). Nothing here is required for desktop rendering.
=========================================================================== */
/* 1) Remove the slight horizontal overflow that made every page “zoom out” a
touch on phones. `clip` prevents sideways scrolling WITHOUT turning the
element into a scroll container, so the sticky header keeps working.
`hidden` is kept first as a fallback for older browsers. */
html,
body {
max-width: 100%;
overflow-x: hidden;
overflow-x: clip;
}
/* Media / tables can never push the layout wider than the viewport. */
img,
video,
iframe,
table {
max-width: 100%;
}
/* ---------------------------------------------------------------------------
2) Article page — make the legacy rich-HTML body behave on small screens.
Old articles contain hard-coded ![]()
, wide tables and