:root{--black:#000;--blurple:#5865f2;--gold:#d4af37;--text:#e6e6ec;--text-dim:#9a9aa5;--border:#5865f240;--sans:"Tajawal", system-ui, sans-serif;--pixel:"Pixelify Sans", monospace;font:18px/145% var(--sans);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--black);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (width<=1024px){:root{font-size:16px}}*{box-sizing:border-box}body{background:var(--black);margin:0}#root{text-align:center;flex-direction:column;align-items:center;width:100%;min-height:100svh;display:flex}#page{flex-direction:column;align-items:center;gap:96px;width:100%;max-width:720px;margin:0 auto;padding:96px 24px 64px;display:flex}#hero{flex-direction:column;align-items:center;gap:28px;display:flex}.greeting{font-family:var(--sans);color:var(--gold);margin:0 0 24px;font-size:48px;font-weight:700}@media (width<=600px){.greeting{font-size:34px}}.avatar{border:2px solid var(--blurple);object-fit:cover;border-radius:50%;width:160px;height:160px;box-shadow:0 0 32px #5865f259}.handle{font-family:var(--pixel);color:var(--blurple);text-shadow:0 0 18px #5865f273;align-items:baseline;min-height:1.2em;margin:0;font-size:42px;font-weight:500;display:inline-flex}@media (width<=600px){.handle{font-size:30px}}.cursor{background:var(--gold);align-self:stretch;width:.55ch;margin-left:4px;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.brief{max-width:480px;color:var(--text-dim);margin:0;font-size:16px;line-height:150%}#skills,#contact{flex-direction:column;align-items:center;gap:32px;width:100%;display:flex}#skills h2,#contact h2{color:var(--text);margin:0;font-size:26px;font-weight:700;position:relative}:is(#skills h2,#contact h2) .note{color:var(--text-dim);vertical-align:middle;margin-left:8px;font-size:12px;font-weight:400}#skills h2:after,#contact h2:after{content:"";background:var(--gold);border-radius:2px;width:48px;height:3px;margin:12px auto 0;display:block}.skill-groups{flex-direction:column;gap:20px;width:100%;display:flex}.skill-group{flex-wrap:wrap;align-items:baseline;gap:14px;display:flex}.skill-group h3{letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);text-align:right;flex:0 0 90px;margin:0;font-size:13px;font-weight:700}.skill-pills{flex-wrap:wrap;flex:auto;justify-content:center;gap:10px;display:flex}.pill{color:var(--text);border:1px solid var(--border);background:#5865f214;border-radius:999px;padding:6px 16px;font-size:14px;transition:border-color .2s,box-shadow .2s}.pill:hover{border-color:var(--gold);box-shadow:0 0 12px #d4af374d}@media (width<=560px){.skill-group{flex-direction:column;align-items:center;gap:8px}.skill-group h3{text-align:center;flex:none}}.contact-form{flex-direction:column;gap:16px;width:100%;max-width:420px;display:flex}.contact-form input,.contact-form textarea{width:100%;font:inherit;color:var(--text);border:1px solid var(--border);resize:vertical;background:#ffffff08;border-radius:8px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--text-dim)}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--blurple);outline:none;box-shadow:0 0 0 3px #5865f233}.contact-form button{font:inherit;color:var(--black);background:var(--gold);cursor:pointer;border:none;border-radius:8px;padding:12px 20px;font-weight:700;transition:transform .15s,box-shadow .15s}.contact-form button:hover{transform:translateY(-1px);box-shadow:0 0 20px #d4af3773}.contact-form button:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.form-note{margin:0;font-size:14px}.form-note-success{color:var(--gold)}.form-note-error{color:#f26666}