:root{--background-color:#121212;--primary-text-color:#e0e0e0;--secondary-text-color:#b0b0b0;--accent-color-1:#00ff9b;--accent-color-2:#00c6ff;--surface-color:rgba(30, 30, 30, 0.7);--border-color:rgba(51, 51, 51, 0.35);--font-primary:'Lekton', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;--font-mono:'Lekton', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;--font-fa:'Ravi', Tahoma, Arial, sans-serif;--font-display:'Bungee Outline', 'Lekton', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}html .page-section-container{scroll-snap-type:y mandatory}body{background-color:var(--background-color);color:var(--primary-text-color);font-family:var(--font-primary);line-height:1.6;font-size:1rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:auto}body.dragging{user-select:none;-webkit-user-select:none}a, button{cursor:pointer}body.custom-cursor-enabled,
        body.custom-cursor-enabled a,
        body.custom-cursor-enabled button,
        body.custom-cursor-enabled [role="button"],
        body.custom-cursor-enabled input,
        body.custom-cursor-enabled textarea,
        body.custom-cursor-enabled select,
        body.custom-cursor-enabled .feature-item,
        body.custom-cursor-enabled .project-card,
        body.custom-cursor-enabled .tutorial-card{cursor:none!important}#preloader{position:fixed;inset:0;background:radial-gradient(circle at 50% 42%, rgba(0, 255, 155, 0.07), transparent 34%),
                var(--background-color);display:flex;justify-content:center;align-items:center;z-index:10000;transition:opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;visibility:visible;opacity:1}#preloader.preloader--hidden{opacity:0;visibility:hidden;pointer-events:none}.preloader-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:300px}.logo-code{font-family:var(--font-mono);font-size:1.5rem;color:var(--accent-color-1);border-right:3px solid var(--accent-color-1);white-space:nowrap;overflow:hidden;animation:blink-preloader-caret .75s step-end infinite}.preloader-progress-bar{width:100%;height:4px;background-color:rgba(255, 255, 255, 0.1);border-radius:2px}.preloader-progress{width:0;height:100%;background:linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2));border-radius:2px;transition:width 0.72s cubic-bezier(0.65, 0, 0.35, 1)}.preloader-status{font-family:var(--font-mono);font-size:0.8rem;color:var(--secondary-text-color);transition:opacity 0.3s ease}@keyframes blink-preloader-caret{from, to{border-color:transparent}50%{border-color:var(--accent-color-1)}}#root{opacity:0;transition:opacity 0.5s ease-in-out}body.loaded #root{opacity:1}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--background-color)}::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--accent-color-1), var(--accent-color-2));border-radius:4px}.cursor-dot,
        .cursor-outline{pointer-events:none;position:fixed;top:0;left:0;z-index:12000;opacity:0;will-change:transform, opacity}.cursor-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-color-1);box-shadow:0 0 8px rgba(0, 255, 155, 0.95),
                0 0 18px rgba(0, 198, 255, 0.38);transition:width 0.18s ease, height 0.18s ease, opacity 0.16s ease, background-color 0.18s ease}.cursor-outline{width:34px;height:34px;border:1px solid rgba(0, 255, 155, 0.82);border-radius:50%;background:radial-gradient(circle, rgba(0, 255, 155, 0.055), transparent 64%);box-shadow:0 0 0 1px rgba(0, 198, 255, 0.08),
                0 0 18px rgba(0, 255, 155, 0.13);transition:width 0.2s ease,
                height 0.2s ease,
                border-color 0.2s ease,
                background-color 0.2s ease,
                box-shadow 0.2s ease,
                opacity 0.16s ease}.cursor-outline::before,
        .cursor-outline::after{content:'';position:absolute;top:50%;left:50%;background:var(--accent-color-2);opacity:0.78;transform:translate(-50%, -50%);transition:opacity 0.2s ease, transform 0.2s ease}.cursor-outline::before{width:10px;height:1px}.cursor-outline::after{width:1px;height:10px}body.custom-cursor-enabled.custom-cursor-visible .cursor-dot,
        body.custom-cursor-enabled.custom-cursor-visible .cursor-outline{opacity:1}body.custom-cursor-enabled.cursor-outside .cursor-dot,
        body.custom-cursor-enabled.cursor-outside .cursor-outline{opacity:0}.cursor-outline.cursor--hover{width:46px;height:46px;border-color:rgba(0, 198, 255, 0.9);background:radial-gradient(circle, rgba(0, 198, 255, 0.13), rgba(0, 255, 155, 0.045) 52%, transparent 70%);box-shadow:0 0 20px rgba(0, 198, 255, 0.18),
                inset 0 0 16px rgba(0, 255, 155, 0.055)}.cursor-outline.cursor--hover::before,
        .cursor-outline.cursor--hover::after{opacity:0.2;transform:translate(-50%, -50%) scale(0.7)}.cursor-outline.cursor--text{width:10px;height:30px;border-radius:7px;border-color:rgba(0, 198, 255, 0.9);background:rgba(0, 198, 255, 0.08)}.cursor-outline.cursor--text::before,
        .cursor-outline.cursor--text::after{opacity:0}.cursor-outline.cursor--pressed{width:26px;height:26px}.app-header{position:fixed;top:0;left:0;width:100%;padding:1rem 5%;background-color:rgba(18, 18, 18, 0.8);backdrop-filter:blur(10px);display:flex;justify-content:space-between;align-items:center;z-index:1000;border-bottom:1px solid var(--border-color)}.logo{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:var(--primary-text-color);text-decoration:none;position:relative;transition:text-shadow 0.3s ease}.logo:hover{text-shadow:0 0 8px rgba(0, 255, 155, 0.7)}.logo span{color:var(--accent-color-1)}.nav-controls{display:flex;align-items:center;gap:1.5rem}.nav-links{display:flex;align-items:center}.nav-links a{display:inline-flex;align-items:center;gap:0.5rem;color:var(--primary-text-color);text-decoration:none;margin-left:2rem;font-family:var(--font-mono);transition:color 0.3s ease}.nav-links a:hover,
        .nav-links a.active{color:var(--accent-color-1)}.nav-links a.lang-switcher{border:1px solid var(--border-color);padding:0.35rem 0.8rem;border-radius:4px;font-family:var(--font-fa);font-size:0.9rem;transition:all 0.3s ease;line-height:1}[lang="fa"], .rtl, .font-fa{font-family:var(--font-fa)!important}.nav-icon{flex-shrink:0;transition:transform 0.2s ease, stroke-width 0.2s ease}.nav-links a:hover .nav-icon{transform:translateY(-1px)}.nav-links a.lang-switcher:hover{border-color:var(--accent-color-1);background-color:rgba(0, 255, 155, 0.08);color:var(--accent-color-1)}.mobile-header-lang-switcher{display:none}.mobile-nav-contact{display:none}.page-section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:6rem 2rem 2rem;position:relative;scroll-snap-align:start;scroll-snap-stop:always;opacity:0;transform:translateY(50px);transition:opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)}.page-section.active{opacity:1;transform:translateY(0)}.page-section .content-container{opacity:0;transform:translateY(40px);transition:opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s}.page-section.active .content-container{opacity:1;transform:translateY(0)}.content-container{width:100%;max-width:900px;padding:0 2rem;margin:0 auto}.code-background-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.hero-content{position:relative;z-index:1;padding:2rem;background-color:rgba(18, 18, 18, 0.6);border-radius:10px;backdrop-filter:blur(4px);text-align:center}.hero-title-container{min-height:6rem;display:flex;justify-content:center;align-items:center}.hero-title{font-family:var(--font-mono);font-size:2.2rem;color:var(--primary-text-color);text-shadow:0 0 15px rgba(0, 255, 155, 0.5);position:relative;border-right:3px solid var(--accent-color-1);animation:blink-caret .75s step-end infinite;white-space:pre}@keyframes blink-caret{from, to{border-color:transparent}50%{border-color:var(--accent-color-1)}}.hero-subtitle{font-size:1.2rem;color:var(--secondary-text-color);margin-top:1rem;margin-bottom:2rem}.cta-button{background:linear-gradient(45deg, var(--accent-color-1), var(--accent-color-2));color:#121212;border:none;padding:0.8rem 1.5rem;font-size:1rem;font-family:var(--font-mono);font-weight:700;border-radius:5px;cursor:pointer;text-decoration:none;transition:transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;display:inline-flex;justify-content:center;align-items:center;min-height:45px;min-width:150px}.cta-button:disabled{opacity:0.7;cursor:not-allowed;transform:none;box-shadow:none}.cta-button:not(:disabled):hover{transform:translateY(-3px);box-shadow:0 5px 15px rgba(0, 255, 155, 0.4)}.section-title{font-family:var(--font-display);font-size:3.5rem;font-weight:400;text-align:center;margin-bottom:4rem;color:transparent;-webkit-text-stroke:0.5px var(--primary-text-color);text-stroke:0.5px var(--primary-text-color);position:relative;letter-spacing:1px}.section-title::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;z-index:-1;color:var(--accent-color-2);opacity:0.1;text-shadow:0 0 15px var(--accent-color-2)}.section-title span{font-family:inherit;-webkit-text-stroke:0.5px var(--accent-color-1);text-stroke:0.5px var(--accent-color-1)}.about-content{display:flex;flex-direction:column;gap:3rem;align-items:center}@keyframes blink{50%{opacity:0}}.loading-placeholder{min-height:100px;background-color:var(--surface-color);border-radius:5px}.code-editor-window{background-color:#1e1e1e;border:1px solid var(--border-color);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.3);width:100%;overflow:hidden}.editor-header{background-color:#333333;padding:0.5rem 1rem;display:flex;align-items:center;gap:1rem;border-bottom:1px solid var(--border-color)}.editor-controls{display:flex;gap:0.5rem}.editor-controls .dot{width:12px;height:12px;border-radius:50%}.editor-controls .red{background-color:#ff5f56}.editor-controls .yellow{background-color:#ffbd2e}.editor-controls .green{background-color:#27c93f}.editor-title{color:var(--secondary-text-color);font-family:var(--font-mono);font-size:0.85rem}.editor-body{padding:1rem 1.5rem;min-height:250px;font-family:var(--font-mono);line-height:1.7;direction:ltr;text-align:left}.editor-body pre{margin:0;white-space:pre-wrap;word-wrap:break-word}.editor-body code{color:var(--primary-text-color);font-family:inherit}.editor-body .typing-cursor{animation:blink 0.75s step-end infinite;margin-left:1px;color:var(--primary-text-color);font-weight:700}.about-features-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:1.35rem;width:100%}@media (min-width: 1200px){.about-features-grid{grid-template-columns:repeat(4, 1fr)}.content-container{max-width:1200px}}.feature-item{--service-accent:#00ff9b;--service-accent-rgb:0, 255, 155;--mouse-x:50%;--mouse-y:50%;position:relative;overflow:hidden;min-height:330px;background:rgba(30, 30, 30, 0.58);padding:1.55rem 1.35rem 1.35rem;border-radius:12px;border:1px solid rgba(255, 255, 255, 0.075);box-shadow:none;text-align:left;display:flex;flex-direction:column;align-items:flex-start;transition:transform 0.28s ease, box-shadow 0.32s ease, border-color 0.32s ease, background-color 0.32s ease;isolation:isolate}.feature-item--wordpress{--service-accent:#00ff9b;--service-accent-rgb:0, 255, 155}.feature-item--web{--service-accent:#00c6ff;--service-accent-rgb:0, 198, 255}.feature-item--enterprise{--service-accent:#8c7cff;--service-accent-rgb:140, 124, 255}.feature-item--seo{--service-accent:#ffc857;--service-accent-rgb:255, 200, 87}.feature-item::before{content:'';position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg, transparent, var(--service-accent), transparent);opacity:0;transform:scaleX(0.25);transform-origin:center;transition:opacity 0.28s ease, transform 0.38s ease;z-index:2}.feature-item::after{content:'';position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(
                260px circle at var(--mouse-x) var(--mouse-y),
                rgba(var(--service-accent-rgb), 0.17),
                rgba(var(--service-accent-rgb), 0.06) 32%,
                transparent 68%
            );opacity:0;pointer-events:none;z-index:-1;transition:opacity 0.26s ease}.feature-item:hover,
        .feature-item:focus-within{transform:translateY(-4px);background-color:rgba(30, 30, 30, 0.68);border-color:rgba(var(--service-accent-rgb), 0.62);box-shadow:0 14px 34px rgba(var(--service-accent-rgb), 0.13)}.feature-item:hover::before,
        .feature-item:focus-within::before{opacity:0.95;transform:scaleX(1)}.feature-item:hover::after,
        .feature-item:focus-within::after{opacity:1}.feature-icon{color:var(--service-accent);width:58px;height:58px;margin-bottom:1.15rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.11);border-radius:14px;background:rgba(255, 255, 255, 0.018);box-shadow:none;filter:none;transition:transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease}.feature-icon svg{width:40px;height:40px;display:block;overflow:hidden}.feature-icon svg *{vector-effect:non-scaling-stroke}.feature-item:hover .feature-icon,
        .feature-item:focus-within .feature-icon{transform:translateY(-2px);border-color:rgba(var(--service-accent-rgb), 0.6);background:rgba(var(--service-accent-rgb), 0.075);box-shadow:0 0 18px rgba(var(--service-accent-rgb), 0.09)}.feature-content{display:flex;flex:1 1 auto;flex-direction:column;width:100%}.feature-title{font-family:var(--font-mono);font-size:1.05rem;line-height:1.42;color:var(--primary-text-color);margin:0 0 0.7rem;transition:color 0.28s ease}.feature-item:hover .feature-title,
        .feature-item:focus-within .feature-title{color:var(--service-accent)}.feature-description{margin:0;font-size:0.88rem;color:var(--secondary-text-color);line-height:1.72}.feature-meta{display:flex;flex-wrap:wrap;gap:0.42rem;width:100%;margin-top:1.15rem;padding-top:1rem;border-top:1px solid rgba(255, 255, 255, 0.075);transition:border-color 0.28s ease}.feature-meta span{display:inline-flex;align-items:center;min-height:25px;padding:0.2rem 0.52rem;border:1px solid rgba(255, 255, 255, 0.09);border-radius:999px;background:rgba(255, 255, 255, 0.018);color:var(--secondary-text-color);font-family:var(--font-mono);font-size:0.68rem;line-height:1.25;white-space:nowrap;transition:color 0.28s ease, border-color 0.28s ease, background-color 0.28s ease}.feature-item:hover .feature-meta,
        .feature-item:focus-within .feature-meta{border-top-color:rgba(var(--service-accent-rgb), 0.28)}.feature-item:hover .feature-meta span,
        .feature-item:focus-within .feature-meta span{color:var(--primary-text-color);border-color:rgba(var(--service-accent-rgb), 0.35);background:rgba(var(--service-accent-rgb), 0.055)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem}.project-card{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;backdrop-filter:blur(5px)}.project-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0, 198, 255, 0.2);border-color:var(--accent-color-2)}.project-image{width:100%;height:200px;background-color:#000;overflow:hidden;position:relative;background-size:cover;background-position:center;filter:grayscale(100%);transition:filter 0.4s ease}.project-card:hover .project-image{filter:grayscale(0%)}.project-image::before,
        .project-image::after{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-image:inherit;background-position:center;background-size:cover;opacity:0;transition:opacity 0.5s ease, transform 0.3s ease}.project-card:hover .project-image::before{animation:glitch 0.4s cubic-bezier(.25, .46, .45, .94) both;mix-blend-mode:color-dodge;background-color:#0ff}.project-card:hover .project-image::after{animation:glitch 0.4s cubic-bezier(.25, .46, .45, .94) both reverse;mix-blend-mode:screen;background-color:#f0f}@keyframes glitch{0%{transform:translate(0);opacity:0}10%{transform:translate(-3px, -2px);opacity:0.8}20%{transform:translate(3px, 2px);opacity:0.2}30%{transform:translate(0);opacity:0.8}40%{clip-path:polygon(0 40%, 100% 40%, 100% 45%, 0 45%);transform:translate(-5px, 0);opacity:0.6}50%{clip-path:polygon(0 60%, 100% 60%, 100% 70%, 0 70%);transform:translate(5px, 0);opacity:0.4}60%{clip-path:initial;transform:translate(3px, 2px);opacity:0.8}70%{transform:translate(-3px, -2px);opacity:0.2}80%{transform:translate(0);opacity:0.8}90%{opacity:0}100%{transform:translate(0);opacity:0}}.project-info{padding:1.5rem;flex-grow:1;display:flex;flex-direction:column}.project-title{font-family:var(--font-mono);font-size:1.25rem;margin-bottom:0.5rem;color:var(--primary-text-color)}.project-tech-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem}.tech-tag{background-color:rgba(0, 255, 155, 0.1);color:var(--accent-color-1);padding:0.25rem 0.6rem;border-radius:15px;font-size:0.75rem;font-family:var(--font-mono)}.project-description{color:var(--secondary-text-color);margin-bottom:1rem;flex-grow:1}.project-links a{color:var(--accent-color-1);text-decoration:none;font-family:var(--font-mono);margin-right:1.5rem;transition:color 0.3s ease;display:inline-flex;align-items:center;gap:0.5rem}.project-links a:hover{text-decoration:underline}.tutorials-wrapper{position:relative;width:100%}.tutorials-search-container{position:relative;margin-bottom:2.5rem}.tutorials-search-container svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--secondary-text-color);pointer-events:none}.tutorials-search-input{-webkit-appearance:none;appearance:none;width:100%;padding:0.85rem 1rem 0.85rem 3rem;background-color:var(--surface-color);border:1px solid var(--border-color);color:var(--primary-text-color);border-radius:50px;font-family:var(--font-primary);font-size:1rem;transition:border-color 0.3s ease, box-shadow 0.3s ease}.tutorials-search-input::placeholder{color:var(--secondary-text-color);opacity:0.7}.tutorials-search-input:focus{outline:none;border-color:var(--accent-color-1);box-shadow:0 0 0 3px rgba(0, 255, 155, 0.2)}.no-tutorials-message{text-align:center;color:var(--secondary-text-color);padding:3rem 0;font-size:1.1rem;font-style:italic}.tutorials-wrapper .projects-grid{grid-template-columns:repeat(auto-fit, minmax(320px, 1fr))}@media (min-width: 840px){.tutorials-wrapper .projects-grid{grid-template-columns:repeat(2, 1fr)}}.tutorial-card-date{font-family:var(--font-mono);font-size:0.8rem;color:var(--secondary-text-color);margin-bottom:0.75rem}.read-more-button{background:none;border:none;color:var(--accent-color-1);font-family:var(--font-mono);font-size:0.9rem;font-weight:700;margin-top:1rem;padding:0.5rem 0;display:inline-flex;align-items:center;gap:0.5rem;align-self:flex-start;transition:color 0.3s ease, transform 0.3s ease}.read-more-button:hover{color:var(--accent-color-2)}.read-more-button:hover svg{transform:translateX(4px)}.read-more-button svg{transition:transform 0.3s ease}.show-more-container{text-align:center;margin-top:2rem}.show-more-button{background:transparent;border:1.5px solid var(--accent-color-1);color:var(--accent-color-1);padding:0.75rem 1.75rem;font-size:1rem;font-family:var(--font-mono);font-weight:700;border-radius:50px;cursor:pointer;text-decoration:none;transition:color 0.4s ease-in-out, border-color 0.4s ease-in-out;display:inline-flex;justify-content:center;align-items:center;gap:0.5rem;position:relative;overflow:hidden;z-index:1;min-height:50px;min-width:180px}.show-more-button::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg, var(--accent-color-1), var(--accent-color-2));transform:scaleX(0);transform-origin:0% 50%;transition:transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);z-index:-1}.show-more-button:not(:disabled):hover{color:#121212;border-color:transparent}.show-more-button:not(:disabled):hover::before{transform:scaleX(1)}.show-more-button svg{transition:transform 0.3s cubic-bezier(0.77, 0, 0.175, 1)}.show-more-button:not(:disabled):hover svg{transform:translateY(4px)}.show-more-button:disabled{opacity:0.7;cursor:not-allowed}.show-more-button .loading-spinner{width:28px;height:28px}.show-more-button .loading-spinner .path{stroke:var(--accent-color-1);stroke-linecap:round}.show-more-button:not(:disabled):hover .loading-spinner .path{stroke:var(--background-color)}.code-block-wrapper{position:relative;margin-top:1.5rem}.code-block{background-color:#0d0d0d;border:1px solid var(--border-color);border-radius:6px;padding:1.5rem 1rem 1rem;font-family:var(--font-mono);font-size:0.85rem;color:#d1d5db;white-space:pre-wrap;word-wrap:break-word;overflow-x:auto;max-height:300px;text-align:left;direction:ltr}.copy-button{position:absolute;top:0.5rem;right:0.5rem;background-color:rgba(255, 255, 255, 0.1);color:var(--primary-text-color);border:1px solid var(--border-color);border-radius:5px;padding:0.25rem 0.6rem;font-family:var(--font-mono);font-size:0.8rem;display:flex;align-items:center;gap:0.4rem;transition:background-color 0.2s ease, color 0.2s ease}.copy-button:hover{background-color:var(--accent-color-1);color:#121212}.copy-button svg{width:14px;height:14px;fill:currentColor}.tutorial-page{justify-content:flex-start;padding-top:8rem;padding-bottom:4rem;height:auto;min-height:100vh;scroll-snap-align:none}.tutorial-page .content-container{max-width:900px}.tutorial-back-button{display:inline-flex;align-items:center;gap:0.5rem;background:none;border:none;color:var(--accent-color-1);font-family:var(--font-mono);font-size:1rem;margin-bottom:2rem;transition:color 0.3s ease, transform 0.3s ease}.tutorial-back-button:hover{color:var(--accent-color-2);transform:translateX(-4px)}.tutorial-content{width:100%}.tutorial-page-title{font-family:var(--font-mono);font-size:2rem;color:var(--primary-text-color);margin-bottom:0.5rem;line-height:1.2}.tutorial-page-date{font-family:var(--font-mono);font-size:0.9rem;color:var(--secondary-text-color);margin-bottom:2rem}.tutorial-page-description{color:var(--secondary-text-color);line-height:1.8;margin-bottom:2rem;font-size:1.1rem}.tutorial-actions{display:flex;align-items:center;gap:1rem;padding:1.5rem 0;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);margin-top:2.5rem}.like-button{background:none;border:1px solid var(--secondary-text-color);color:var(--secondary-text-color);padding:0.5rem 1rem;border-radius:20px;display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-mono);font-size:0.9rem;transition:all 0.3s ease}.like-button svg{width:18px;height:18px;transition:all 0.3s ease}.like-button:not(:disabled):hover{color:#ff6b81;border-color:#ff6b81;transform:translateY(-2px)}.like-button.liked{color:#ff6b81;border-color:#ff6b81}.like-button:disabled{cursor:not-allowed}.comments-section{margin-top:2.5rem}.comments-title{font-family:var(--font-mono);font-size:1.5rem;color:var(--primary-text-color);margin-bottom:1.5rem;display:flex;align-items:center;gap:0.75rem}.comments-title svg{width:22px;height:22px;color:var(--accent-color-1)}.comments-list{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:2rem;max-height:400px;overflow-y:auto;padding-right:1rem}.comment-item{background-color:rgba(255, 255, 255, 0.03);padding:1rem;border-radius:6px;border-left:2px solid var(--accent-color-2)}.comment-author{font-family:var(--font-mono);color:var(--primary-text-color);font-size:0.95rem}.comment-text{color:var(--secondary-text-color);font-size:0.9rem;margin-top:0.5rem}.no-comments{color:var(--secondary-text-color);font-style:italic}.comment-form{display:flex;flex-direction:column;gap:0.75rem}.comment-input{background-color:#0d0d0d;border:1px solid var(--border-color);color:var(--primary-text-color);border-radius:6px;padding:0.75rem;font-family:var(--font-primary);font-size:1rem;resize:vertical;min-height:80px}.comment-input:focus{outline:none;border-color:var(--accent-color-1);box-shadow:0 0 0 2px rgba(0, 255, 155, 0.2)}.comment-submit-button{background:linear-gradient(45deg, var(--accent-color-1), var(--accent-color-2));color:#121212;border:none;padding:0.75rem 1.25rem;font-size:0.9rem;font-family:var(--font-mono);font-weight:700;border-radius:5px;align-self:flex-end;transition:transform 0.3s ease, box-shadow 0.3s ease}.comment-submit-button:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0, 255, 155, 0.3)}.loading-spinner{animation:rotate 1.4s linear infinite;width:24px;height:24px}.loading-spinner .path{stroke:var(--background-color);stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}.contact-content{text-align:center;color:var(--secondary-text-color);background:var(--surface-color);padding:2rem;border-radius:8px;border:1px solid var(--border-color);backdrop-filter:blur(5px)}.contact-email{color:var(--accent-color-1);margin:1rem 0;display:inline-block;font-size:1.2rem;text-decoration:none}.contact-email:hover{text-decoration:underline}.social-links{margin-top:1.5rem;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.85rem}.social-link{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--secondary-text-color);background:rgba(255, 255, 255, 0.025);border:1px solid var(--border-color);border-radius:50%;text-decoration:none;transition:color 0.3s ease, transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease}.social-link svg{width:22px;height:22px;display:block;flex:0 0 auto}.social-link:hover,
        .social-link:focus-visible{color:var(--accent-color-2);border-color:currentColor;background-color:rgba(0, 198, 255, 0.07);box-shadow:0 0 18px rgba(0, 198, 255, 0.14);transform:translateY(-3px);outline:none}.social-link:active{transform:translateY(-1px) scale(0.96)}.social-link.is-unconfigured{cursor:default;color:var(--secondary-text-color);opacity:0.72}.social-link.is-unconfigured:hover,
        .social-link.is-unconfigured:focus-visible{color:var(--secondary-text-color);border-color:var(--border-color);background:rgba(255, 255, 255, 0.025);box-shadow:none;transform:none}.footer-text{margin-top:3rem;font-size:0.9rem;color:var(--secondary-text-color)}.nav-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);z-index:999;opacity:0;pointer-events:none;transition:opacity 0.3s ease}.nav-overlay.open{opacity:1;pointer-events:auto}.nav-toggle{display:none;background:transparent;border:none;cursor:pointer;z-index:1001;padding:0}.nav-toggle span{display:block;width:25px;height:3px;background-color:var(--primary-text-color);margin:5px 0;transition:all 0.3s ease-in-out}.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px, 5px)}.nav-toggle.open span:nth-child(2){opacity:0}.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(7px, -6px)}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.side-nav{position:fixed;top:50%;right:2rem;transform:translateY(-50%);z-index:998;opacity:0;animation:side-nav-fade-in 0.5s ease 1s forwards}@keyframes side-nav-fade-in{to{opacity:1}}.side-nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1.25rem}.side-nav li button{background:none;border:none;padding:0;display:flex;align-items:center;position:relative}.side-nav li .dot{width:8px;height:8px;background-color:var(--secondary-text-color);border-radius:50%;transition:all 0.3s ease;opacity:0.5}.side-nav li:hover .dot,
        .side-nav li.active .dot{background-color:var(--accent-color-1);transform:scale(1.5);opacity:1;box-shadow:0 0 10px var(--accent-color-1)}.side-nav li .tooltip{position:absolute;right:25px;top:50%;transform:translateY(-50%);background-color:var(--surface-color);backdrop-filter:blur(5px);color:var(--primary-text-color);padding:0.4rem 0.8rem;border-radius:5px;font-family:var(--font-mono);font-size:0.85rem;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease}.side-nav li button:hover .tooltip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(-10px)}.scroll-to-top-button{position:fixed;bottom:1.5rem;left:1.5rem;width:38px;height:38px;background:var(--accent-color-1);color:var(--background-color);border:none;border-radius:50%;display:flex;justify-content:center;align-items:center;z-index:999;box-shadow:0 4px 12px rgba(0, 255, 155, 0.4);opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease}.scroll-to-top-button.visible{opacity:1;visibility:visible;transform:translateY(0)}.scroll-to-top-button:hover{transform:scale(1.1) translateY(0);box-shadow:0 6px 16px rgba(0, 255, 155, 0.5)}.scroll-to-top-button svg{width:22px;height:22px}.mobile-floating-menu-button{display:none}@media (max-width: 768px){html, body{scroll-snap-type:none!important;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,
          body::-webkit-scrollbar,
          .page-section-container::-webkit-scrollbar,
          *::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}html .page-section-container{scroll-snap-type:none!important}.side-nav{display:none}.scroll-to-top-button{bottom:calc(1rem + env(safe-area-inset-bottom));left:1rem;width:38px;height:38px;z-index:1002}.mobile-floating-menu-button{position:fixed;bottom:calc(1rem + env(safe-area-inset-bottom));left:1rem;width:38px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--accent-color-1);background:rgba(18, 18, 18, 0.88);border:1px solid rgba(0, 255, 155, 0.42);border-radius:50%;box-shadow:0 5px 18px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(0, 255, 155, 0.04) inset;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:1003;transform:translateZ(0);transition:left 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease}.mobile-floating-menu-button.with-scroll-top{left:calc(1rem + 46px)}.mobile-floating-menu-button:hover,
          .mobile-floating-menu-button:focus-visible,
          .mobile-floating-menu-button.open{color:var(--background-color);background:var(--accent-color-1);border-color:var(--accent-color-1);box-shadow:0 6px 20px rgba(0, 255, 155, 0.28)}.mobile-floating-menu-button:active{transform:scale(0.94)}.mobile-floating-menu-icon{width:17px;height:14px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.mobile-floating-menu-icon > span{display:block;width:17px;height:1.5px;border-radius:99px;background:currentColor;transform-origin:center;transition:transform 0.25s ease, opacity 0.18s ease, width 0.25s ease}.mobile-floating-menu-icon > span:nth-child(2){width:12px;align-self:flex-end}.mobile-floating-menu-button.open .mobile-floating-menu-icon > span:nth-child(1){transform:translateY(6.25px) rotate(45deg)}.mobile-floating-menu-button.open .mobile-floating-menu-icon > span:nth-child(2){opacity:0;transform:scaleX(0)}.mobile-floating-menu-button.open .mobile-floating-menu-icon > span:nth-child(3){transform:translateY(-6.25px) rotate(-45deg)}body.mobile-nav-open .scroll-to-top-button{opacity:0!important;visibility:hidden!important;pointer-events:none}body.mobile-nav-open .mobile-floating-menu-button{left:1rem}.hero-title{font-size:1.6rem!important;white-space:normal!important;word-break:break-word!important;border-right:none!important;animation:none!important;width:100%!important;text-align:center!important;line-height:1.4!important}.hero-title-container{min-height:6rem!important}.hero-content{padding:1.5rem 1rem!important;width:95%!important}.hero-subtitle{font-size:1rem!important;line-height:1.5!important;margin-bottom:1.5rem!important}.section-title{font-size:2rem!important;margin-bottom:2rem!important;-webkit-text-stroke:0.3px var(--primary-text-color)!important;text-stroke:0.3px var(--primary-text-color)!important}.section-title::after{font-size:2rem!important}.section-title span{-webkit-text-stroke:0.3px var(--accent-color-1)!important;text-stroke:0.3px var(--accent-color-1)!important}.page-section{scroll-snap-align:none!important;scroll-snap-stop:normal!important;height:auto!important;min-height:auto!important;padding:4.5rem 1rem 2rem!important;opacity:0;transform:translate3d(0, 26px, 0);transition:opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1)}.page-section.active{opacity:1;transform:translate3d(0, 0, 0)}.page-section .content-container{opacity:1;transform:none;transition:none}.page-section:first-of-type{min-height:100svh!important;display:flex!important;justify-content:center!important;align-items:center!important;padding-top:2rem!important}.content-container{padding:0 0.5rem!important;width:100%!important}.editor-body{padding:0.75rem 1rem!important;font-size:0.8rem!important;min-height:auto!important}.editor-body pre{white-space:pre-wrap!important;word-break:break-all!important}.about-features-grid{grid-template-columns:1fr!important;gap:1.25rem!important;margin-top:1.5rem!important}.feature-item{padding:1.5rem 1rem!important}.feature-title{font-size:1.1rem!important}.feature-description{font-size:0.86rem!important}.feature-item{min-height:0!important;align-items:flex-start!important;text-align:left!important}.feature-icon{width:54px!important;height:54px!important;margin-bottom:0.95rem!important}.feature-icon svg{width:40px!important;height:40px!important}.feature-meta{margin-top:0.95rem!important;padding-top:0.85rem!important}.feature-meta span{font-size:0.65rem!important}.projects-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1.25rem;padding:0.25rem 1rem 1.5rem 1rem;margin:0 -1rem}.projects-grid{scrollbar-width:none;-ms-overflow-style:none}.projects-grid::-webkit-scrollbar{display:none;width:0;height:0}.projects-grid .project-card{flex:0 0 85%!important;max-width:290px!important;scroll-snap-align:start}.project-info{padding:1.25rem 1rem!important}.project-title{font-size:1.1rem!important}.project-description{font-size:0.85rem!important;line-height:1.5!important}.nav-controls{gap:0.42rem}.mobile-header-lang-switcher{position:relative;z-index:1002;min-width:44px;height:34px;padding:0 0.62rem;display:inline-flex;align-items:center;justify-content:center;gap:0.36rem;color:var(--primary-text-color);background:rgba(255, 255, 255, 0.035);border:1px solid rgba(0, 255, 155, 0.22);border-radius:999px;text-decoration:none;font-family:var(--font-fa);font-size:0.72rem;font-weight:700;line-height:1;letter-spacing:0.02em;box-shadow:0 4px 14px rgba(0, 0, 0, 0.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease}.mobile-header-lang-switcher svg{width:14px;height:14px;flex:0 0 14px;color:var(--accent-color-1);transition:color 0.22s ease, transform 0.22s ease}.mobile-header-lang-switcher:hover,
          .mobile-header-lang-switcher:focus-visible{color:var(--background-color);background:var(--accent-color-1);border-color:var(--accent-color-1);box-shadow:0 5px 18px rgba(0, 255, 155, 0.22);transform:translateY(-1px)}.mobile-header-lang-switcher:hover svg,
          .mobile-header-lang-switcher:focus-visible svg{color:var(--background-color);transform:rotate(12deg)}.mobile-header-lang-switcher:active{transform:scale(0.96)}.nav-toggle{display:block}.nav-links{position:fixed;top:0;right:0;width:min(86vw, 340px);height:100dvh;background:rgba(18, 18, 18, 0.97);backdrop-filter:blur(14px);flex-direction:column;justify-content:flex-start;align-items:stretch;transform:translateX(105%);transition:transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);margin-left:0;gap:0.35rem;padding:calc(5.25rem + env(safe-area-inset-top)) 1.35rem calc(1.25rem + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;z-index:1000;border-left:1px solid rgba(0, 255, 155, 0.12);box-shadow:-18px 0 45px rgba(0, 0, 0, 0.35)}.nav-links::-webkit-scrollbar{display:none}.nav-links.open{transform:translateX(0)}.nav-links > a{width:100%;margin:0;padding:0.72rem 0.8rem;border-radius:7px;font-size:1.02rem;opacity:0;transform:translateY(12px);transition:opacity 0.35s ease, transform 0.35s ease, background-color 0.25s ease;display:flex;align-items:center;gap:0.8rem}.nav-links > a::before{content:none!important;display:none!important}.nav-links > a:hover,
          .nav-links > a.active{background:rgba(0, 255, 155, 0.07)}.nav-links > a .nav-icon{width:18px;height:18px;color:var(--accent-color-1)}.nav-links.open > a{opacity:1;transform:translateY(0)}.nav-links.open > a:nth-child(1){transition-delay:0.2s}.nav-links.open > a:nth-child(2){transition-delay:0.3s}.nav-links.open > a:nth-child(3){transition-delay:0.4s}.nav-links.open > a:nth-child(4){transition-delay:0.5s}.nav-links.open > a:nth-child(5){transition-delay:0.6s}.nav-links > a.lang-switcher{display:none}.mobile-nav-contact{display:block;width:100%;margin-top:auto;padding-top:1.25rem;border-top:1px solid rgba(255, 255, 255, 0.08);opacity:0;transform:translateY(12px);transition:opacity 0.35s ease 0.45s, transform 0.35s ease 0.45s}.nav-links.open .mobile-nav-contact{opacity:1;transform:translateY(0)}.mobile-nav-contact-title{margin:0 0 0.75rem;color:var(--secondary-text-color);font-size:0.76rem;letter-spacing:0.08em;text-transform:uppercase}.mobile-nav-contact-list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0.55rem}.mobile-nav-contact-item{min-width:0;margin:0!important;padding:0.65rem!important;gap:0.55rem!important;border:1px solid rgba(255, 255, 255, 0.07);border-radius:7px;background:rgba(255, 255, 255, 0.025);opacity:1!important;transform:none!important;text-decoration:none}.mobile-nav-contact-item:hover{border-color:rgba(0, 255, 155, 0.35);background:rgba(0, 255, 155, 0.06)}.mobile-nav-contact-item svg{width:18px;height:18px;flex:0 0 auto;color:var(--accent-color-1)}.mobile-nav-contact-item span{min-width:0;display:flex;flex-direction:column;line-height:1.25}.mobile-nav-contact-item strong{color:var(--primary-text-color);font-size:0.78rem;font-weight:700}.mobile-nav-contact-item small{margin-top:0.18rem;overflow:hidden;color:var(--secondary-text-color);font-size:0.65rem;text-overflow:ellipsis;white-space:nowrap}body.mobile-nav-open{overflow:hidden}.tutorial-page{padding-top:5rem!important;padding-bottom:2rem!important}.tutorial-page-title{font-size:1.4rem!important;line-height:1.3!important}.tutorial-page-description{font-size:0.9rem!important;line-height:1.5!important}.code-block-wrapper pre{font-size:0.75rem!important;padding:0.75rem!important}.contact-content{padding:1.5rem 1rem!important}.contact-email{font-size:1.1rem!important;word-break:break-all!important}.social-links{gap:0.7rem}.social-link{width:42px;height:42px}.social-link svg{width:21px;height:21px}}.side-nav{top:50%!important;transform:translateY(-50%)!important}.page-section{opacity:0;transform:translateY(50px);transition:opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)}.page-section.active{opacity:1;transform:translateY(0)}.page-section .content-container{opacity:0;transform:translateY(40px);transition:opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s}.page-section.active .content-container{opacity:1;transform:translateY(0)}#hero-section{position:relative;overflow:hidden;background-color:var(--background-color)}.code-background-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0.78;will-change:opacity}.hero-content{position:relative;z-index:2}input:focus, textarea:focus{outline:none;border-color:var(--accent-color-1)!important;box-shadow:0 0 10px rgba(0, 255, 155, 0.2)}.read-more-button{background-color:transparent;color:var(--accent-color-1);border:1px solid rgba(0, 255, 155, 0.3);padding:0.5rem 1rem;border-radius:4px;font-family:var(--font-mono);font-size:0.85rem;display:inline-flex;align-items:center;gap:0.5rem;transition:all 0.3s ease;margin-top:1rem}.read-more-button:hover{background-color:rgba(0, 255, 155, 0.05);border-color:var(--accent-color-1);transform:translateX(4px)}.loading-spinner{width:24px;height:24px;animation:rotate 1.5s linear infinite}.loading-spinner .path{stroke:var(--accent-color-1);stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}.typing-cursor{display:inline-block;font-weight:bold;color:var(--accent-color-1);animation:blink-cursor 0.75s step-end infinite;margin-left:2px}@keyframes blink-cursor{from, to{color:transparent}50%{color:var(--accent-color-1)}}.page-section-container{height:100vh;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth}@media (max-width: 768px){.page-section-container{height:auto;overflow:visible;scroll-snap-type:none;scroll-behavior:auto}}html{margin-top:0!important}body.admin-bar .app-header{top:32px}body.admin-bar .page-section-container{height:calc(100vh - 32px)}.screen-reader-text{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0, 0, 0, .6);clip:auto!important;clip-path:none;color:#21759b;display:block;font-size:14px;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}.project-image.is-placeholder{background-position:center;background-repeat:no-repeat;background-size:cover}.site-page-shell{min-height:100vh;padding:8rem 5% 4rem;background:var(--background-color)}.site-page-shell .content-container{max-width:900px}.site-page-shell article{background:var(--surface-color);border:1px solid var(--border-color);border-radius:8px;padding:2rem}.site-page-shell h1,
.site-page-shell h2,
.site-page-shell h3{font-family:var(--font-mono);margin-bottom:1rem}.site-page-shell p,
.site-page-shell li{color:var(--secondary-text-color);margin-bottom:1rem}.site-page-shell a{color:var(--accent-color-1)}.site-page-shell ul,
.site-page-shell ol{padding-left:1.5rem}.wp-caption, img{max-width:100%;height:auto}@media (max-width: 900px) and (hover: none),
       (max-width: 900px) and (pointer: coarse){.cursor-dot,
    .cursor-outline{display:none!important;opacity:0!important;visibility:hidden!important}body,
    body.custom-cursor-enabled,
    body.custom-cursor-enabled a,
    body.custom-cursor-enabled button,
    body.custom-cursor-enabled [role="button"],
    body.custom-cursor-enabled input,
    body.custom-cursor-enabled textarea,
    body.custom-cursor-enabled select,
    body.custom-cursor-enabled .feature-item,
    body.custom-cursor-enabled .project-card,
    body.custom-cursor-enabled .tutorial-card{cursor:auto!important}a,
    button,
    [role="button"]{cursor:pointer!important}}@media screen and (max-width: 782px){body.admin-bar .app-header{top:46px}body.admin-bar .page-section-container{height:auto}}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*, *::before, *::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}.code-background-canvas{display:none!important}.cursor-dot, .cursor-outline{transition:none!important}}.tutorial-interaction-status{min-height:1.5rem;margin:0.75rem 0 0;color:var(--secondary-text-color);font-size:0.9rem}.tutorial-interaction-status:empty{min-height:0;margin-top:0}.tutorial-interaction-status.is-success{color:var(--accent-color-1)}.tutorial-interaction-status.is-error{color:#ff7b8c}.tutorial-interaction-status.is-info{color:var(--accent-color-2)}.like-button.is-loading{opacity:0.65}.like-button:disabled{cursor:wait}.like-button:disabled:not(.is-loading){cursor:not-allowed;opacity:0.55}.comment-meta{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}.comment-date{color:var(--secondary-text-color);font-size:0.75rem;white-space:nowrap;opacity:0.75}.comment-author-fields{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0.9rem}.comment-author-fields[hidden],
.comment-user-note[hidden]{display:none!important}.comment-field-group{display:flex;flex-direction:column;gap:0.4rem}.comment-form label{color:var(--secondary-text-color);font-size:0.82rem}.comment-field,
.comment-input{width:100%;background-color:#0d0d0d;border:1px solid var(--border-color);color:var(--primary-text-color);border-radius:6px;padding:0.75rem;font-family:var(--font-primary);font-size:1rem;transition:border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease}.comment-field::placeholder,
.comment-input::placeholder{color:var(--secondary-text-color);opacity:0.65}.comment-field:focus,
.comment-input:focus{outline:none;border-color:var(--accent-color-1);box-shadow:0 0 0 2px rgba(0, 255, 155, 0.18)}.comment-user-note{margin:0;color:var(--secondary-text-color);font-size:0.9rem}.comment-honeypot{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(1px, 1px, 1px, 1px)!important;clip-path:inset(50%)!important;white-space:nowrap!important}.comment-form-footer{display:flex;justify-content:flex-end;align-items:center;gap:1rem}.comment-submit-button:disabled{cursor:not-allowed;opacity:0.6;transform:none;box-shadow:none}.comment-form.is-disabled .comment-field,
.comment-form.is-disabled .comment-input{opacity:0.55}@media (max-width: 600px){.comment-author-fields{grid-template-columns:1fr}.comment-meta{align-items:flex-start;flex-direction:column;gap:0.2rem}.comment-submit-button{width:100%;align-self:stretch}.comment-form-footer{display:block}}html[lang="fa"] body{direction:rtl;text-align:right;font-family:var(--font-fa)}html[lang="fa"] .logo,
html[lang="fa"] .logo-code,
html[lang="fa"] .preloader-status,
html[lang="fa"] .nav-links a,
html[lang="fa"] .hero-title,
html[lang="fa"] .cta-button,
html[lang="fa"] .editor-title,
html[lang="fa"] .editor-body,
html[lang="fa"] .feature-title,
html[lang="fa"] .project-title,
html[lang="fa"] .tech-tag,
html[lang="fa"] .project-links a,
html[lang="fa"] .tutorial-card-date,
html[lang="fa"] .read-more-button,
html[lang="fa"] .show-more-button,
html[lang="fa"] .tutorial-back-button,
html[lang="fa"] .tutorial-page-title,
html[lang="fa"] .tutorial-page-date,
html[lang="fa"] .like-button,
html[lang="fa"] .comments-title,
html[lang="fa"] .comment-author,
html[lang="fa"] .comment-submit-button,
html[lang="fa"] .side-nav .tooltip,
html[lang="fa"] .mobile-nav-contact,
html[lang="fa"] .site-page-shell h1,
html[lang="fa"] .site-page-shell h2,
html[lang="fa"] .site-page-shell h3{font-family:var(--font-fa)}html[lang="fa"] .section-title,
html[lang="fa"] .section-title::after,
html[lang="fa"] .section-title span{font-family:var(--font-fa);letter-spacing:0}html[lang="fa"] .hero-title{white-space:normal;border-right:0;border-left:3px solid var(--accent-color-1);line-height:1.55}html[lang="fa"] .editor-body{direction:rtl;text-align:right}html[lang="fa"] .editor-body pre{direction:rtl;text-align:right}html[lang="fa"] .code-block,
html[lang="fa"] .code-block code{direction:ltr;text-align:left;font-family:var(--font-mono)}html[lang="fa"] .tutorials-search-container svg{left:auto;right:1rem}html[lang="fa"] .tutorials-search-input{padding:0.85rem 3rem 0.85rem 1rem;text-align:right;font-family:var(--font-fa)}html[lang="fa"] .project-links a{margin-right:0;margin-left:1.5rem}html[lang="fa"] .tutorial-back-button svg,
html[lang="fa"] .read-more-button svg{transform:scaleX(-1)}html[lang="fa"] .read-more-button:hover svg{transform:scaleX(-1) translateX(4px)}html[lang="fa"] .side-nav{right:auto;left:2rem}html[lang="fa"] .side-nav li .tooltip{right:auto;left:25px}html[lang="fa"] .side-nav li button:hover .tooltip{transform:translateY(-50%) translateX(10px)}html[lang="fa"] .comment-form-footer{justify-content:flex-start}html[lang="fa"] .comment-submit-button{align-self:flex-start}html[lang="fa"] .comment-field,
html[lang="fa"] .comment-input{font-family:var(--font-fa);text-align:right}html[lang="fa"] .comment-meta{direction:rtl}@media (max-width: 768px){html[lang="fa"] .side-nav{display:none}html[lang="fa"] .nav-links,
    html[lang="fa"] .mobile-nav-contact-item,
    html[lang="fa"] .mobile-nav-contact-item span{text-align:right}html[lang="fa"] .hero-title{border-left:0!important}}@media (max-width: 370px){.app-header{padding-inline:0.75rem}.logo{font-size:1.25rem}.mobile-header-lang-switcher{min-width:38px;padding-inline:0.5rem;gap:0.28rem}.mobile-header-lang-switcher svg{width:13px;height:13px;flex-basis:13px}}.page-section,
.page-section .content-container{opacity:1;transform:none}.js .aa-portfolio-front-page .page-section{opacity:0;transform:translateY(40px)}.js .aa-portfolio-front-page .page-section.active{opacity:1;transform:translateY(0)}.js .aa-portfolio-front-page .page-section .content-container{opacity:0;transform:translateY(30px)}.js .aa-portfolio-front-page .page-section.active .content-container{opacity:1;transform:translateY(0)}.project-image{display:block;text-decoration:none;background-image:var(--project-image, none);background-position:center;background-size:cover;isolation:isolate}.project-image img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease}.project-image::before,
.project-image::after{display:block;z-index:2;pointer-events:none;background-image:var(--project-image, none)}.project-card:hover .project-image img,
.project-card:focus-within .project-image img{transform:scale(1.015)}.project-card:focus-within .project-image{filter:grayscale(0%)}.project-card:focus-within .project-image::before{animation:glitch 0.4s cubic-bezier(.25, .46, .45, .94) both;mix-blend-mode:color-dodge;background-color:#0ff}.project-card:focus-within .project-image::after{animation:glitch 0.4s cubic-bezier(.25, .46, .45, .94) both reverse;mix-blend-mode:screen;background-color:#f0f}.project-title a{color:inherit;text-decoration:none}.project-title a:hover,
.project-title a:focus-visible{color:var(--accent-color-1)}.section-archive-link{margin-top:2rem;text-align:center}.section-archive-link a{display:inline-flex;align-items:center;color:var(--accent-color-1);font-family:var(--font-mono);text-decoration:none;border-bottom:1px dashed currentColor}.breadcrumbs{margin:0 0 2rem;font-size:0.85rem;color:var(--secondary-text-color)}.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:0.45rem;list-style:none;padding:0;margin:0}.breadcrumbs li{display:inline-flex;align-items:center;margin:0}.breadcrumbs li:not(:last-child)::after{content:'/';margin-inline-start:0.45rem;opacity:0.55}.breadcrumbs a{color:var(--secondary-text-color);text-decoration:none}.breadcrumbs a:hover,
.breadcrumbs a:focus-visible{color:var(--accent-color-1)}.archive-header,
.single-entry-header{margin-bottom:2rem}.archive-header p{max-width:720px}.archive-page-shell .content-container{max-width:1200px}.archive-projects-grid,
.archive-tutorials-grid{margin-bottom:2rem}.single-entry{background:var(--surface-color);border:1px solid var(--border-color);border-radius:10px;padding:clamp(1.25rem, 3vw, 2.5rem)}.single-featured-image{margin:0 0 2rem;overflow:hidden;border-radius:8px}.single-featured-image img{display:block;width:100%;height:auto}.single-entry-content{line-height:1.85}.single-project-actions,
.single-tutorial-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:2rem}.comments-area{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border-color)}.comment-list{list-style:none;padding:0!important;margin:0 0 2rem}.comment-list .comment-body{margin-bottom:1rem;padding:1rem;border:1px solid var(--border-color);border-radius:8px;background:rgba(255,255,255,0.025)}.comment-list .comment-meta{margin-bottom:0.75rem}.comment-form input,
.comment-form textarea{width:100%;background:#0d0d0d;color:var(--primary-text-color);border:1px solid var(--border-color);border-radius:6px;padding:0.75rem;font:inherit}.comment-form .submit{width:auto;border:0;background:linear-gradient(45deg, var(--accent-color-1), var(--accent-color-2));color:var(--background-color);font-weight:700;padding:0.75rem 1.25rem}.navigation.pagination{margin-top:2rem}.nav-links.page-numbers{display:flex;flex-wrap:wrap;gap:0.5rem}.page-numbers{display:inline-flex;min-width:36px;min-height:36px;align-items:center;justify-content:center;border:1px solid var(--border-color);border-radius:5px;text-decoration:none}.page-numbers.current{border-color:var(--accent-color-1);color:var(--accent-color-1)}:focus-visible{outline:2px solid var(--accent-color-2);outline-offset:3px}@media (max-width: 768px){.js .aa-portfolio-front-page .page-section,
    .js .aa-portfolio-front-page .page-section .content-container{transform:translateY(20px)}.single-entry{padding:1rem}.breadcrumbs{margin-bottom:1.25rem;font-size:0.78rem}}@media (prefers-reduced-motion: reduce){.js .aa-portfolio-front-page .page-section,
    .js .aa-portfolio-front-page .page-section .content-container{opacity:1;transform:none}}.navigation.pagination .nav-links{position:static;width:auto;height:auto;padding:0;margin:0;background:transparent;backdrop-filter:none;transform:none;opacity:1;display:flex;flex-direction:row;align-items:center;gap:0.5rem}@media (max-width: 768px) and (prefers-reduced-motion: no-preference){.code-background-canvas{display:block!important;opacity:0.48}.preloader-content{width:min(78vw, 280px);gap:1.15rem}.logo-code{font-size:1.15rem}.preloader-status{font-size:0.72rem}}.hero-content{width:min(920px, calc(100% - 2rem))}.hero-eyebrow{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;margin:0 0 1rem;padding:0.38rem 0.8rem;border:1px solid rgba(0, 255, 155, 0.28);border-radius:999px;background:rgba(0, 255, 155, 0.06);color:var(--accent-color-1);font-family:var(--font-mono);font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase}.hero-title-container{min-height:0}.hero-title{max-width:860px;margin:0 auto;border:0;animation:none;white-space:normal;text-wrap:balance;font-size:clamp(1.85rem, 4.2vw, 3.4rem);line-height:1.22}.hero-rotating-container{min-height:2.2rem;display:flex;align-items:center;justify-content:center;margin-top:1.15rem}.hero-rotating-title{margin:0;padding-inline-end:0.3rem;border-right:2px solid var(--accent-color-1);color:var(--accent-color-1);font-family:var(--font-mono);font-size:clamp(0.92rem, 1.7vw, 1.12rem);font-weight:700;line-height:1.65;animation:blink-caret .75s step-end infinite}.hero-subtitle{max-width:760px;margin-inline:auto;line-height:1.8}.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:0.85rem}.cta-button--secondary{color:var(--primary-text-color);border:1px solid rgba(0, 255, 155, 0.48);background:rgba(18, 18, 18, 0.55);box-shadow:none}.cta-button--secondary:not(:disabled):hover{color:var(--accent-color-1);border-color:var(--accent-color-1);background:rgba(0, 255, 155, 0.08);box-shadow:0 5px 15px rgba(0, 255, 155, 0.16)}html[lang="fa"] .hero-eyebrow,
html[lang="fa"] .hero-title,
html[lang="fa"] .hero-rotating-title,
html[lang="fa"] .hero-subtitle,
html[lang="fa"] .hero-actions .cta-button{font-family:var(--font-fa)}html[lang="fa"] .hero-eyebrow{letter-spacing:0;text-transform:none}html[lang="fa"] .hero-title{border:0;line-height:1.55}html[lang="fa"] .hero-rotating-title{padding-inline-start:0.3rem;padding-inline-end:0;border-right:0;border-left:2px solid var(--accent-color-1)}@media (max-width: 768px){.hero-content{width:95%}.hero-eyebrow{margin-bottom:0.8rem;font-size:0.7rem}.hero-title{font-size:clamp(1.45rem, 7vw, 1.9rem)!important;line-height:1.45!important}.hero-rotating-container{min-height:3.35rem;margin-top:0.75rem}.hero-rotating-title{max-width:100%;border:0;animation:none;white-space:normal;text-align:center;font-size:0.82rem;line-height:1.65}html[lang="fa"] .hero-rotating-title{border:0;padding:0}.hero-subtitle{margin-top:0.7rem;font-size:0.9rem!important;line-height:1.75!important}.hero-actions{width:100%;gap:0.65rem}.hero-actions .cta-button{flex:1 1 140px;min-width:0;padding-inline:0.8rem;font-size:0.84rem}}.hero-title{max-width:900px;font-size:37px;line-height:1.24}.hero-title-line{display:block}.hero-subtitle{max-width:720px;margin-top:0.85rem;margin-bottom:1.3rem;font-size:1rem;line-height:1.75}.hero-actions{gap:0.65rem}.hero-actions .cta-button{min-width:128px;min-height:40px;padding:0.58rem 1.05rem;font-size:0.88rem;border-radius:4px}@media (max-width: 768px){.hero-title{font-size:clamp(1.55rem, 7.4vw, 1.9rem)!important;line-height:1.4!important}.hero-title-line{display:inline}.hero-subtitle{max-width:34rem;margin-top:0.6rem;margin-bottom:1.05rem;font-size:0.84rem!important;line-height:1.7!important}.hero-actions{gap:0.5rem}.hero-actions .cta-button{flex:0 1 auto;min-width:116px;min-height:38px;padding:0.5rem 0.8rem;font-size:0.78rem}}@media (max-width: 390px){.hero-actions .cta-button{min-width:108px;padding-inline:0.65rem;font-size:0.74rem}}.logo,
.logo-code{font-family:'Lekton', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace}.single-portfolio_project .single-content-shell > .content-container{max-width:1180px}.single-project-entry{padding:clamp(1.1rem, 2.8vw, 2.35rem)}.project-entry-header{display:grid;gap:0.65rem;margin-bottom:1.5rem}.project-entry-header h1{max-width:880px;margin:0;font-family:var(--font-mono);font-size:clamp(1.75rem, 4vw, 2.8rem);line-height:1.25}.project-kicker,
.project-section-heading > span,
.project-header-date > span{color:var(--accent-color-1);font-family:var(--font-mono);font-size:0.74rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase}.project-header-date{display:inline-flex;width:fit-content;align-items:center;gap:0.7rem;color:var(--secondary-text-color);font-size:0.86rem}.project-header-date time{color:var(--primary-text-color)}.project-featured-image{border:1px solid var(--border-color);background:rgba(0, 0, 0, 0.32)}.project-introduction{max-width:880px;margin:0 auto;color:var(--secondary-text-color);font-size:1rem}.project-case-study,
.project-technologies,
.project-screenshots{margin-top:clamp(2.5rem, 6vw, 4.75rem)}.project-section-heading{display:grid;gap:0.35rem;margin-bottom:1.4rem}.project-section-heading h2{margin:0;font-family:var(--font-mono);font-size:clamp(1.35rem, 3vw, 2rem);line-height:1.35}.project-section-heading--compact{margin-bottom:1rem}.project-case-study-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:1rem}.project-detail-card{position:relative;min-height:100%;padding:1.35rem;border:1px solid var(--border-color);border-radius:8px;background:rgba(255, 255, 255, 0.025);overflow:hidden}.project-detail-card::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg, var(--accent-color-1), var(--accent-color-2));opacity:0.8}.project-detail-index{display:block;margin-bottom:1.1rem;color:var(--accent-color-2);font-family:var(--font-mono);font-size:0.7rem;opacity:0.78}.project-detail-card h3{margin:0 0 0.75rem;font-family:var(--font-mono);font-size:1.02rem;line-height:1.45}.project-detail-card p{margin:0;color:var(--secondary-text-color);font-size:0.9rem;line-height:1.8}.project-detail-card p + p{margin-top:0.8rem}.project-technology-list{display:flex;flex-wrap:wrap;gap:0.55rem}.project-technology-chip{display:inline-flex;min-height:30px;align-items:center;padding:0.3rem 0.75rem;border:1px solid rgba(0, 255, 155, 0.24);border-radius:999px;background:rgba(0, 255, 155, 0.075);color:var(--accent-color-1);font-family:var(--font-mono);font-size:0.76rem}.project-screenshots-grid{display:grid;gap:1rem;align-items:start}.project-screenshots-grid.has-both-screens{grid-template-columns:minmax(0, 1fr) minmax(220px, 0.32fr)}.project-screenshots-grid.has-single-screen{grid-template-columns:minmax(0, 1fr)}.project-screenshot{margin:0;padding:0.75rem;border:1px solid var(--border-color);border-radius:9px;background:rgba(0, 0, 0, 0.3);overflow:hidden}.project-screenshot figcaption{margin-bottom:0.65rem;color:var(--secondary-text-color);font-family:var(--font-mono);font-size:0.74rem}.project-screenshot img{display:block;width:100%;height:auto;border-radius:5px;background:#0a0a0a}.project-screenshot--mobile{justify-self:center;width:100%;max-width:330px}.project-action-row{gap:0.55rem;padding-top:1.4rem;border-top:1px solid var(--border-color)}.project-action-button{display:inline-flex;min-width:118px;min-height:38px;align-items:center;justify-content:center;gap:0.45rem;padding:0.52rem 0.85rem;border:1px solid transparent;border-radius:5px;font-family:var(--font-mono);font-size:0.8rem;font-weight:700;line-height:1;text-decoration:none;transition:transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease}.project-action-button svg{flex:0 0 auto;transition:transform 0.22s ease}.project-action-button:hover,
.project-action-button:focus-visible{transform:translateY(-2px)}.project-action-button:hover svg,
.project-action-button:focus-visible svg{transform:translate(2px, -2px)}.project-action-button--primary{background:linear-gradient(45deg, var(--accent-color-1), var(--accent-color-2));color:var(--background-color);box-shadow:0 4px 14px rgba(0, 255, 155, 0.16)}.project-action-button--secondary{border-color:rgba(0, 255, 155, 0.32);background:rgba(0, 255, 155, 0.045);color:var(--accent-color-1)}.project-action-button--secondary:hover,
.project-action-button--secondary:focus-visible{border-color:var(--accent-color-1);background:rgba(0, 255, 155, 0.09)}@media (max-width: 900px){.project-case-study-grid{grid-template-columns:1fr}.project-detail-card{min-height:auto}}@media (max-width: 768px){.single-project-entry{padding:1rem}.project-entry-header h1{font-size:1.55rem}.project-header-date{align-items:flex-start;flex-direction:column;gap:0.2rem}.project-case-study,
    .project-technologies,
    .project-screenshots{margin-top:2.4rem}.project-section-heading h2{font-size:1.25rem}.project-detail-card{padding:1.05rem}.project-screenshots-grid.has-both-screens,
    .project-screenshots-grid.has-single-screen{grid-template-columns:1fr}.project-screenshot--mobile{max-width:290px}.project-action-row{margin-top:1.5rem}.project-action-button{min-width:110px;min-height:36px;padding:0.48rem 0.72rem;font-size:0.76rem}}.project-entry-header{gap:0.5rem;margin-bottom:1.25rem}.project-entry-header h1{width:100%;max-width:100%;margin:0;overflow:hidden;font-size:clamp(1.35rem, 2.45vw, 2rem);line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.project-kicker,
.project-section-heading > span,
.project-header-date > span{font-size:0.68rem}.project-section-heading{gap:0.25rem;margin-bottom:1.05rem}.project-section-heading h2{font-size:clamp(1.05rem, 2vw, 1.45rem);line-height:1.4}.project-detail-card h3{margin-bottom:0.6rem;font-size:0.9rem}.project-screenshot figcaption{font-size:0.68rem}.project-technologies{position:relative;isolation:isolate;padding:clamp(1rem, 2.5vw, 1.35rem);border:1px solid rgba(0, 255, 155, 0.25);border-radius:12px;background:radial-gradient(circle at top right, rgba(0, 255, 155, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(0, 255, 155, 0.055), rgba(33, 150, 243, 0.045) 55%, rgba(255, 255, 255, 0.018));box-shadow:0 14px 36px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);overflow:hidden}.project-technologies::before{content:'</>';position:absolute;z-index:-1;inset-block-start:0.7rem;inset-inline-end:1rem;color:var(--accent-color-1);font-family:var(--font-mono);font-size:clamp(2.4rem, 6vw, 4.5rem);font-weight:700;line-height:1;opacity:0.075;pointer-events:none}.project-technologies::after{content:'';position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2), transparent 82%);opacity:0.9}.project-technologies .project-section-heading{position:relative;z-index:1;margin-bottom:0.85rem;padding-inline-end:4.25rem}.project-technologies .project-section-heading h2{font-size:clamp(1rem, 1.8vw, 1.25rem)}.project-technologies .project-technology-list{position:relative;z-index:1;gap:0.48rem}.project-technologies .project-technology-chip{min-height:29px;padding:0.3rem 0.72rem;border-color:rgba(0, 255, 155, 0.3);background:rgba(5, 13, 18, 0.72);box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.018);font-size:0.73rem;backdrop-filter:blur(4px)}.project-technologies .project-technology-chip:hover{border-color:rgba(0, 255, 155, 0.58);background:rgba(0, 255, 155, 0.1)}@media (max-width: 768px){.project-entry-header h1{font-size:clamp(1.08rem, 5vw, 1.32rem)}.project-section-heading h2{font-size:1.08rem}.project-detail-card h3{font-size:0.86rem}.project-technologies{padding:0.95rem}.project-technologies .project-section-heading{padding-inline-end:3.2rem}.project-technologies::before{font-size:3rem}}.logo,
.logo-code,
html[lang="fa"] .logo,
html[lang="fa"] .logo-code{font-family:'Lekton Logo', 'Lekton', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace!important;font-style:normal;font-weight:700;font-synthesis:none;direction:ltr;unicode-bidi:isolate;letter-spacing:0}.hero-badge,
.hero-role-badge,
.hero-badge-container,
.hero-role-tag{display:none!important}.tutorial-downloads{margin-top:2rem;padding:clamp(1rem, 2.2vw, 1.5rem);border:1px solid rgba(255,255,255,0.09);border-radius:10px;background:rgba(8, 12, 14, 0.58)}.tutorial-downloads-heading{margin-bottom:1rem}.tutorial-downloads-heading > span{display:block;margin-bottom:0.3rem;color:var(--accent-color-1);font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.08em;text-transform:uppercase}.tutorial-downloads-heading h2{margin:0;color:var(--primary-text-color);font-family:var(--font-mono);font-size:clamp(1.05rem, 2vw, 1.3rem);line-height:1.4}.tutorial-downloads-heading p{margin:0.45rem 0 0;color:var(--secondary-text-color);font-size:0.9rem}.tutorial-download-list{display:grid;gap:0.7rem}.tutorial-download-item{display:grid;grid-template-columns:44px minmax(0, 1fr) auto;align-items:center;gap:0.85rem;min-width:0;padding:0.8rem;border:1px solid rgba(255,255,255,0.08);border-radius:8px;background:rgba(255,255,255,0.025);color:var(--primary-text-color);text-decoration:none;transition:transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease}.tutorial-download-item:hover,
.tutorial-download-item:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb, var(--accent-color-1) 58%, transparent);background:color-mix(in srgb, var(--accent-color-1) 5%, rgba(255,255,255,0.025));box-shadow:0 10px 24px rgba(0,255,155,0.08);outline:none}.tutorial-download-icon{width:44px;height:44px;display:grid;place-items:center;border:1px solid color-mix(in srgb, var(--accent-color-1) 35%, transparent);border-radius:8px;color:var(--accent-color-1);background:color-mix(in srgb, var(--accent-color-1) 6%, transparent)}.tutorial-download-icon svg{width:23px;height:23px}.tutorial-download-copy{min-width:0;display:grid;gap:0.22rem}.tutorial-download-copy strong,
.tutorial-download-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tutorial-download-copy strong{font-size:0.92rem;font-weight:700}.tutorial-download-copy small{color:var(--secondary-text-color);font-family:var(--font-mono);font-size:0.72rem}.tutorial-download-action{display:inline-flex;align-items:center;gap:0.4rem;min-height:34px;padding:0.4rem 0.7rem;border:1px solid rgba(255,255,255,0.12);border-radius:6px;color:var(--accent-color-1);font-family:var(--font-mono);font-size:0.78rem;white-space:nowrap}.tutorial-download-action svg{width:15px;height:15px}.tutorial-download-item:hover .tutorial-download-action,
.tutorial-download-item:focus-visible .tutorial-download-action{border-color:var(--accent-color-1);background:var(--accent-color-1);color:var(--background-color)}@media (max-width: 600px){.tutorial-download-item{grid-template-columns:40px minmax(0, 1fr)}.tutorial-download-icon{width:40px;height:40px}.tutorial-download-action{grid-column:2;justify-self:start;min-height:30px;padding:0.3rem 0.6rem}}.logo{isolation:isolate}.logo::after{content:'';position:absolute;inset-inline:0;inset-block-end:-0.28rem;height:1px;background:linear-gradient(90deg, transparent, var(--accent-color-1), var(--accent-color-2), transparent);opacity:0;transform:scaleX(0.28);transform-origin:center;transition:opacity 0.22s ease, transform 0.32s ease;pointer-events:none}.logo:hover::after,
.logo:focus-visible::after,
.logo.logo--scrambling::after,
.logo.logo--pulse::after{opacity:0.85;transform:scaleX(1)}.logo.logo--scrambling,
.logo.logo--pulse{text-shadow:0 0 8px rgba(0, 255, 155, 0.45), 0 0 18px rgba(0, 198, 255, 0.2)}@media (max-width: 768px){.project-title,
    .project-title a,
    .project-entry-header h1{display:block;width:100%;max-width:100%;overflow:visible!important;text-overflow:clip!important;white-space:normal!important;overflow-wrap:anywhere;word-break:normal;hyphens:auto}.project-title{font-size:1.05rem!important;line-height:1.55!important}.project-entry-header h1{font-size:clamp(1.35rem, 6vw, 1.7rem);line-height:1.5}}#projects-section{justify-content:flex-start}#projects-section .content-container{padding-top:1rem;padding-bottom:2rem}.tech-tag{padding:0.18rem 0.48rem;font-size:0.66rem;line-height:1.3}.feature-meta span{padding:0.18rem 0.48rem;font-size:0.62rem}.project-technology-chip{min-height:26px;padding:0.22rem 0.58rem;font-size:0.68rem}html[lang="fa"] .project-card .project-description,
html[lang="fa"] .tutorial-card .project-description,
html[lang="fa"] .feature-item .feature-description,
html[lang="fa"] .project-detail-card p,
html[lang="fa"] .project-introduction,
html[lang="fa"] .archive-card .project-description{text-align:justify;text-justify:inter-word}html:not([lang="fa"]) .project-card .project-description,
html:not([lang="fa"]) .tutorial-card .project-description,
html:not([lang="fa"]) .feature-item .feature-description,
html:not([lang="fa"]) .project-detail-card p,
html:not([lang="fa"]) .project-introduction,
html:not([lang="fa"]) .archive-card .project-description{text-align:start;text-justify:auto}.project-links{display:flex;flex-wrap:wrap;gap:0.55rem 1rem}.project-links a{margin-right:0;color:#f1f5f4}.project-links a:hover,
.project-links a:focus-visible{color:var(--accent-color-1)}.project-links .project-link--live{color:#ffffff}@media (max-width: 768px){#projects-section{justify-content:flex-start}.projects-grid .project-card{min-width:min(85vw, 290px)}}.single-portfolio_project .project-action-button--primary,
.single-portfolio_project .project-action-button--primary:visited,
.single-portfolio_project .project-action-button--primary:hover,
.single-portfolio_project .project-action-button--primary:focus-visible,
.single-portfolio_project .project-action-button--primary span,
.single-portfolio_project .project-action-button--primary svg{color:#07110d!important;stroke:currentColor}.project-device{position:relative;margin-inline:auto}.project-device__screen{position:relative;overflow:hidden;background:#050807}.project-device__screen img{display:block;width:100%;height:auto;border-radius:0}.project-device--laptop{width:min(100%, 980px);padding:clamp(0.55rem, 1.2vw, 0.85rem);padding-bottom:clamp(0.7rem, 1.4vw, 1rem);border:1px solid rgba(255,255,255,.18);border-radius:clamp(12px, 1.6vw, 20px) clamp(12px, 1.6vw, 20px) 8px 8px;background:linear-gradient(145deg, #313735, #101413 58%, #050706);box-shadow:0 24px 54px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.18)}.project-device--laptop .project-device__screen{border:1px solid rgba(0,255,155,.2);border-radius:clamp(7px, 1vw, 12px)}.project-device__camera{position:absolute;z-index:2;top:.24rem;left:50%;width:5px;height:5px;border-radius:50%;background:#090c0b;box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 6px rgba(0,255,155,.22);transform:translateX(-50%)}.project-device__base{position:absolute;z-index:-1;left:50%;bottom:clamp(-13px, -1.4vw, -9px);width:108%;height:clamp(12px, 1.5vw, 18px);border-radius:2px 2px 14px 14px;background:linear-gradient(180deg, #59605e, #171b1a 60%, #050706);box-shadow:0 12px 20px rgba(0,0,0,.35);transform:translateX(-50%)}.project-device__base::after{content:'';position:absolute;top:0;left:50%;width:15%;height:42%;border-radius:0 0 7px 7px;background:rgba(0,0,0,.42);transform:translateX(-50%)}.project-device--phone{width:min(100%, 285px);padding:.7rem .48rem .8rem;border:1px solid rgba(255,255,255,.22);border-radius:30px;background:linear-gradient(145deg, #343b39, #0e1211 62%, #030504);box-shadow:0 22px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2)}.project-device--phone .project-device__screen{border:1px solid rgba(0,255,155,.18);border-radius:22px}.project-device__speaker{position:absolute;z-index:2;top:.25rem;left:50%;width:28%;height:5px;border-radius:999px;background:#050706;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transform:translateX(-50%)}@media (max-width: 768px){.project-device--laptop{padding:.42rem;padding-bottom:.58rem;border-radius:11px 11px 5px 5px}.project-device__base{bottom:-8px;height:10px}.project-device--phone{max-width:250px}}.project-card,
.tutorial-card,
.feature-item,
.project-detail-card{margin-block:0}.project-card .project-info,
.tutorial-card .project-info{padding-block:1.5rem;padding-inline:1.5rem}.project-card .project-title,
.tutorial-card .project-title{margin-block:0 0.5rem;margin-inline:0}.project-card .project-tech-tags,
.tutorial-card .project-tech-tags{margin-block:0 1rem;margin-inline:0}.project-card .project-description,
.tutorial-card .project-description{margin-block:0 1rem;margin-inline:0}.project-card .project-links,
.tutorial-card .project-links{margin:0;padding:0}.feature-item{padding-block:1.55rem 1.35rem;padding-inline:1.35rem}.feature-item .feature-icon{margin-block:0 1.15rem;margin-inline:0}.feature-item .feature-title{margin-block:0 0.7rem;margin-inline:0}.feature-item .feature-description{margin:0}.feature-item .feature-meta{margin-block:1.15rem 0;margin-inline:0;padding-block:1rem 0;padding-inline:0}@media (max-width: 768px){.project-card .project-info,
    .tutorial-card .project-info{padding-block:1.25rem;padding-inline:1rem}.feature-item{padding-block:1.5rem!important;padding-inline:1rem!important}}.single-entry.post-type-code_tutorial .single-entry-content pre,
.single-entry-content .wp-block-code,
.single-entry-content .tutorial-inline-code .code-block{direction:ltr;text-align:left;unicode-bidi:plaintext;white-space:pre;overflow-x:auto;max-width:100%;margin:1.5rem 0;padding:1.15rem 1.25rem;border:1px solid rgba(132, 255, 219, 0.18);border-radius:14px;background:rgba(4, 10, 18, 0.94);color:#e8fff8;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;font-size:0.88rem;line-height:1.8;tab-size:4;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 44px rgba(0, 0, 0, 0.18)}.single-entry-content .tutorial-inline-code{position:relative;margin:1.5rem 0}.single-entry-content .tutorial-inline-code .code-block{margin:0}.single-entry-content .tutorial-inline-code[data-language]::before{content:attr(data-language);position:absolute;z-index:1;inset-block-start:0.65rem;inset-inline-end:0.75rem;padding:0.2rem 0.5rem;border-radius:999px;background:rgba(132, 255, 219, 0.1);color:rgba(210, 255, 241, 0.72);font:600 0.64rem/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;letter-spacing:0.08em}.single-entry-content pre code,
.single-entry-content .wp-block-code code{display:block;padding:0;border:0;background:transparent;color:inherit;font:inherit;direction:ltr;text-align:left}.single-entry-content :not(pre) > code{direction:ltr;unicode-bidi:isolate;display:inline-block;padding:0.12em 0.42em;border:1px solid rgba(132, 255, 219, 0.14);border-radius:5px;background:rgba(132, 255, 219, 0.07);color:#bfffea;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;font-size:0.88em}@media (max-width: 680px){.single-entry.post-type-code_tutorial .single-entry-content pre,
    .single-entry-content .wp-block-code,
    .single-entry-content .tutorial-inline-code .code-block{padding:1rem;border-radius:11px;font-size:0.78rem;line-height:1.75}}.archive-projects-grid,
.archive-tutorials-grid{gap:1rem}.archive-projects-grid .project-card .project-info,
.archive-tutorials-grid .tutorial-card .project-info{padding-block:1.05rem;padding-inline:1.1rem}.archive-projects-grid .project-card .project-title,
.archive-tutorials-grid .tutorial-card .project-title{margin-block-end:0.4rem}.archive-projects-grid .project-card .project-description,
.archive-tutorials-grid .tutorial-card .project-description{margin-block-end:0.7rem}.archive-tutorials-grid .tutorial-card-date{margin-block-end:0.45rem}@media (max-width: 768px){.archive-projects-grid,
    .archive-tutorials-grid{gap:0.85rem}.archive-projects-grid .project-card .project-info,
    .archive-tutorials-grid .tutorial-card .project-info{padding-block:0.9rem;padding-inline:0.9rem}}