:root {
        --user-bg: #0f172a;
        --user-font: 'Inter', sans-serif;
      }
    
      :root { --bg-main: var(--user-bg, #0f172a); }
      body { background-color: var(--bg-main); color: #e2e8f0; font-family: var(--user-font, sans-serif); margin: 0; line-height: 1.5; }
      main { max-width: 896px; margin: 0 auto; padding: 3rem 1rem; display: flex; flex-direction: column; gap: 1.5rem; }
      .block-wrapper { opacity: 0; transform: translateY(10px); transition: opacity 0.5s 0.1s ease-out, transform 0.5s 0.1s ease-out; position: relative; }
      .block-wrapper.is-visible { opacity: 1; transform: none; }
      a { color: inherit; text-decoration: none; }
      
      .header-block { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; width: 100%; }
      .header-name { font-size: 2.25rem; font-weight: bold; margin: 0; line-height: 1.2; }
      .header-role { font-family: monospace; font-size: 1.125rem; margin: 0.5rem 0 0; color: var(--accent-color, #6366f1); }
      .header-contact { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-end; }
      .contact-link { display: flex; align-items: center; gap: 0.5rem; transition: opacity 0.2s; font-size: 0.875rem; }
      .contact-link:hover { opacity: 0.8; }
      
      .text-block p { font-size: 1.125rem; line-height: 1.75; margin: 0; }
      
      .terminal-block { border-radius: 0.5rem; overflow: hidden; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); font-family: monospace; width: 100%; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }
      .terminal-header { background: rgba(0,0,0,0.5); padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: #888; }
      .dots { display: flex; gap: 0.4rem; }
      .dot { width: 12px; height: 12px; border-radius: 99px; } .dot.red { background: #ff5f56; } .dot.yellow { background: #ffbd2e; } .dot.green { background: #27c93f; }
      .terminal-body { padding: 1.5rem; font-size: 0.875rem; }
      .terminal-body .line { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; margin-bottom: 0.5rem; }
      .terminal-body .prompt { display: flex; gap: 0.5rem; flex-shrink: 0; }
      .terminal-body .prompt-arrow { color: var(--secondary-color, #27c93f); }
      .terminal-body .prompt-path { color: var(--accent-color, #6366f1); }
      .terminal-body .prompt-value { white-space: pre-wrap; word-break: break-all; }
      .cursor { display: inline-block; width: 0.6em; height: 1.2em; background: var(--accent-color, #6366f1); animation: blink-cursor 1s step-end infinite; vertical-align: middle; margin-left: 0.25rem; }
      
      .stack-block { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; }
      .skill { display: flex; flex-direction: column; gap: 0.5rem; }
      .skill-info { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-weight: 600; }
      .skill-bar-bg { width: 100%; height: 0.5rem; background-color: rgba(150,150,150,0.2); border-radius: 99px; overflow: hidden; }
      .skill-bar-fg { height: 100%; border-radius: 99px; background-color: var(--accent-color, #6366f1); transition: width 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
      
      .timeline-block { position: relative; display: flex; flex-direction: column; gap: 2rem; width: 100%; }
      .timeline-header { font-size: 1.875rem; font-weight: bold; margin-bottom: 1rem; }
      .timeline-event { display: flex; gap: 1rem; position: relative; }
      .timeline-marker { width: 12px; height: 12px; border-radius: 99px; border: 3px solid var(--bg-color, #1e293b); background-color: var(--accent-color, #6366f1); margin-top: 0.35rem; z-index: 1; outline: 2px solid var(--accent-color, #6366f1); flex-shrink: 0; }
      .timeline-line { position: absolute; left: 5px; top: 1.5rem; bottom: -2rem; width: 2px; background-color: var(--accent-color, #6366f1); opacity: 0.3; }
      .timeline-event:last-child .timeline-line { display: none; }
      .timeline-year { font-weight: bold; font-size: 0.875rem; color: var(--accent-color, #6366f1); margin-bottom: 0.25rem; display: inline-block; padding: 0.15rem 0.5rem; background: rgba(255,255,255,0.05); border-radius: 0.25rem; }
      .timeline-title { font-size: 1.125rem; font-weight: bold; margin: 0.5rem 0 0.25rem; }
      .timeline-company { opacity: 0.7; }
      
      .code-snippet-block { border-radius: 0.5rem; overflow: hidden; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); width: 100%; }
      .code-header { background: rgba(0,0,0,0.5); padding: 0.5rem 1rem; display: flex; justify-content: space-between; font-family: monospace; font-size: 0.75rem; color: #888; }
      pre { margin: 0 !important; padding: 1.5rem !important; background: transparent !important; font-size: 0.875rem; white-space: pre-wrap !important; word-wrap: break-word !important; overflow-wrap: break-word !important; overflow-x: hidden !important; }
      code { white-space: pre-wrap !important; word-wrap: break-word !important; overflow-wrap: break-word !important; }
      
      .social-links-block { width: 100%; padding: 1.5rem; border-radius: 0.5rem; text-align: center; }
      .social-links-block h2 { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; }
      .social-links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }
      .social-link { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.75rem 1.5rem; border: 2px solid var(--accent-color, #6366f1); border-radius: 9999px; background-color: var(--accent-color-trans, rgba(99, 102, 241, 0.15)); text-decoration: none; color: inherit; transition: all 0.3s ease; }
      .social-link:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
      .social-icon { display: flex; align-items: center; justify-content: center; transition: transform 0.3s; }
      .social-link:hover .social-icon { transform: scale(1.1); }
      .social-label { font-size: 0.875rem; font-weight: bold; margin: 0; }
      
      .projects-block { width: 100%; display: flex; flex-direction: column; gap: 1rem; }
      .projects-title { font-size: 1.875rem; font-weight: bold; margin-bottom: 1rem; margin-top: 0; }
      .projects-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; width: 100%; }
      @media (min-width: 768px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
      .project-card { padding: 1.5rem; border-radius: 0.75rem; border: 2px solid var(--accent-color, #6366f1); background-color: var(--accent-color-trans, rgba(99, 102, 241, 0.1)); display: flex; flex-direction: column; transition: all 0.3s ease; height: 100%; }
      .project-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
      .project-card-title { font-size: 1.125rem; font-weight: bold; margin: 0 0 0.5rem 0; color: var(--text-color); }
      .project-card-desc { font-size: 0.875rem; opacity: 0.75; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-color); }
      .project-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: bold; color: var(--accent-color, #6366f1); background-color: var(--accent-color-trans, rgba(99, 102, 241, 0.1)); border-radius: 0.375rem; text-decoration: none; transition: all 0.2s ease; width: fit-content; }
      .project-link:hover { opacity: 0.8; transform: translateY(-1px); }
      .skills-block { width: 100%; }
      .skills-block h2 { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; margin-top: 0; }
    
      @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
      @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
      @keyframes fade-in-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
      @keyframes slide-in-right { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
      @keyframes slide-in-left { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
      @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 10px var(--accent-color-trans); } 50% { box-shadow: 0 0 20px var(--accent-color); } }
      @keyframes neon-pulse { 0%, 100% { box-shadow: 0 0 10px var(--accent-color-trans), inset 0 0 10px var(--accent-color-trans); } 50% { box-shadow: 0 0 25px var(--accent-color), inset 0 0 15px var(--accent-color); } }
      @keyframes matrix-glow { 0%, 100% { text-shadow: 0 0 10px #0f0; box-shadow: 0 0 10px #0f06; } 50% { text-shadow: 0 0 20px #3f3, 0 0 30px #3f3; box-shadow: 0 0 20px #0f0c; } }
      @keyframes aurora-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
      @keyframes lava-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
      @keyframes wave-flow { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
      @keyframes sunset-glow { 0%, 100% { background-position: 0% 50%; box-shadow: 0 0 20px rgba(249, 115, 22, 0.4); } 50% { background-position: 100% 50%; box-shadow: 0 0 40px rgba(249, 115, 22, 0.8); } }
      @keyframes forest-glow { 0%, 100% { background-position: 0% 50%; box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); } 50% { background-position: 100% 50%; box-shadow: 0 0 40px rgba(34, 197, 94, 0.7); } }
      @keyframes neon-border { 0%, 100% { border-color: rgba(0, 255, 255, 0.6); box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); } 50% { border-color: rgba(0, 255, 255, 1); box-shadow: 0 0 20px rgba(0, 255, 255, 0.8), inset 0 0 10px rgba(0, 255, 255, 0.2); } }
      @keyframes glow-effect { 0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.3); } 50% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.8); } }
      @keyframes blink-cursor { 50% { opacity: 0; } }
    
      .animate-fade-in { animation: fade-in 0.5s ease-out forwards; }
      .animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
      .animate-fade-in-down { animation: fade-in-down 0.6s ease-out forwards; }
      .animate-slide-in-right { animation: slide-in-right 0.5s ease-out forwards; }
      .animate-slide-in-left { animation: slide-in-left 0.5s ease-out forwards; }
      .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
      .animate-neon-pulse, .animate-neon { animation: neon-pulse 2s ease-in-out infinite; }
      .animate-matrix-glow, .animate-matrix { animation: matrix-glow 2s ease-in-out infinite; }
      .animate-aurora-shift, .animate-aurora { background-size: 200% 200%; animation: aurora-shift 6s ease infinite; }
      .animate-lava-flow, .animate-lava { background-size: 200% 200%; animation: lava-flow 5s ease infinite; }
      .animate-wave-flow, .animate-ocean { animation: wave-flow 3s ease-in-out infinite; }
      .animate-sunset-glow, .animate-sunset { background-size: 200% 200%; animation: sunset-glow 5s ease infinite; }
      .animate-forest-glow, .animate-forest { background-size: 200% 200%; animation: forest-glow 5s ease infinite; }
      .animate-neon-border { animation: neon-border 2s ease-in-out infinite; }
      .glow-cyan { animation: glow-effect 2s ease-in-out infinite; }
      .glow-green { animation: glow-effect 2s ease-in-out infinite; filter: hue-rotate(90deg); }
    
              [data-block-id="17ad5c7b-6b23-4508-b26d-22b9648533a8"] {
                --bg-color: linear-gradient(to right, #4f46e5, #ec4899);
                --text-color: #e0e6ff;
                --accent-color: #00d9ff;
                --accent-color-trans: #00d9ff66;
                --secondary-color: #00ff88;
                color: var(--text-color);
                
              }
              [data-block-id="17ad5c7b-6b23-4508-b26d-22b9648533a8"] .header-role, [data-block-id="17ad5c7b-6b23-4508-b26d-22b9648533a8"] .contact-link:hover { color: var(--accent-color); }
              [data-block-id="17ad5c7b-6b23-4508-b26d-22b9648533a8"] .skill-bar-fg { background-color: var(--accent-color); }
              [data-block-id="17ad5c7b-6b23-4508-b26d-22b9648533a8"] .timeline-marker { background-color: var(--accent-color); }
              [data-block-id="17ad5c7b-6b23-4508-b26d-22b9648533a8"] .timeline-line { background-color: var(--secondary-color); opacity: 0.3; }
              [data-block-id="17ad5c7b-6b23-4508-b26d-22b9648533a8"] .terminal-block { background: var(--bg-color); color: var(--text-color); }
              [data-block-id="17ad5c7b-6b23-4508-b26d-22b9648533a8"] .terminal-block .prompt-arrow { color: var(--secondary-color); }
              [data-block-id="17ad5c7b-6b23-4508-b26d-22b9648533a8"] .terminal-block .prompt-path { color: var(--accent-color); }