*{box-sizing:border-box;margin:0;padding:0}:root{--bg:teal;--surface:#d4d0c8;--surface2:#fff;--border:grey;--border-light:#fff;--border-dark:#404040;--titlebar:navy;--titlebar-text:#fff;--menubar:#d4d0c8;--tp:#000;--ts:#444;--tm:grey;--accent:navy;--accent2:#00a;--selected:#0a246a;--selected-text:#fff;--taskbar:#d4d0c8;--status-bar:#d4d0c8;--inset:grey;--radius:0px}html{scroll-behavior:smooth;color:var(--tp)}body,html{background:var(--bg)}body{font-family:Tahoma,"MS Sans Serif",Arial,sans-serif;font-size:11px;line-height:1.45;overflow-x:hidden;cursor:default}#cur-dot,#cur-ring{display:none!important}::-webkit-scrollbar{width:16px;height:16px}::-webkit-scrollbar-track{background:var(--surface);border-left:1px solid var(--border)}::-webkit-scrollbar-button,::-webkit-scrollbar-thumb{background:var(--surface);border-top:1px solid var(--border-light);border-left:1px solid var(--border-light);border-right:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark)}::-webkit-scrollbar-button{height:16px;width:16px}::selection{background:var(--selected);color:var(--selected-text)}.raised{border-top:1px solid var(--border-light);border-left:1px solid var(--border-light);border-right:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark)}.sunken{border-top:1px solid var(--border-dark);border-left:1px solid var(--border-dark);border-right:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}.win-window{background:var(--surface);border-top:2px solid var(--border-light);border-left:2px solid var(--border-light);border-right:2px solid var(--border-dark);border-bottom:2px solid var(--border-dark);position:relative}.win-titlebar{background:linear-gradient(to right,var(--titlebar) 0,#1084d0 100%);color:var(--titlebar-text);font-family:Tahoma,Arial,sans-serif;font-size:11px;font-weight:700;padding:3px 4px 3px 6px;display:flex;align-items:center;justify-content:space-between;user-select:none;height:22px}.win-titlebar-left{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.win-titlebar-icon{width:14px;height:14px;flex-shrink:0}.win-titlebar-title{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.win-titlebar-btns{display:flex;gap:2px;flex-shrink:0}.win-title-btn{width:16px;height:14px;background:var(--surface);border-top:1px solid var(--border-light);border-left:1px solid var(--border-light);border-right:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark);display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--tp);cursor:pointer;font-family:Marlett,Tahoma,sans-serif;line-height:1;padding:0}.win-title-btn:hover{background:#e8e8e8}.win-title-btn.close{background:silver}.win-title-btn.close:hover{background:#e05050;color:#fff}.win-menubar{background:var(--menubar);border-bottom:1px solid var(--border);padding:2px 4px;display:flex;gap:0}.win-menu-item{padding:3px 8px;font-size:11px;color:var(--tp);cursor:pointer;border:1px solid transparent;text-decoration:none}.win-menu-item:hover{background:var(--selected);color:var(--selected-text)}.win-toolbar{border-bottom:1px solid var(--border);padding:2px 4px;gap:2px;flex-wrap:wrap}.toolbar-btn,.win-toolbar{background:var(--surface);display:flex;align-items:center}.toolbar-btn{padding:3px 8px;border:1px solid transparent;font-size:11px;font-family:Tahoma,Arial,sans-serif;color:var(--tp);cursor:pointer;gap:3px;white-space:nowrap}.toolbar-btn:hover{border-top:1px solid var(--border-light);border-left:1px solid var(--border-light);border-right:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark)}.toolbar-btn:active{border-top:1px solid var(--border-dark);border-left:1px solid var(--border-dark);border-right:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}.toolbar-sep{width:1px;background:var(--border);height:20px;margin:0 4px}.win-addressbar{background:var(--surface);border-bottom:1px solid var(--border);padding:2px 4px;display:flex;align-items:center;gap:4px;font-size:11px}.win-addressbar label{font-size:11px;white-space:nowrap}.win-addressbar input{flex:1;height:20px;padding:2px 4px;font-size:11px;font-family:Tahoma,Arial,sans-serif;background:var(--surface2);border-top:1px solid var(--border-dark);border-left:1px solid var(--border-dark);border-right:1px solid var(--border-light);border-bottom:1px solid var(--border-light);color:var(--tp);outline:none}.win-statusbar{background:var(--status-bar);border-top:1px solid var(--border);padding:2px 8px;display:flex;align-items:center;gap:4px;font-size:11px;color:var(--tp)}.win-statusbar-panel{border-top:1px solid var(--border-dark);border-left:1px solid var(--border-dark);border-right:1px solid var(--border-light);border-bottom:1px solid var(--border-light);padding:1px 6px;font-size:11px}nav#nav{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:var(--taskbar);border-top:1px solid var(--border-light);height:30px;display:flex!important;align-items:center;transform:none!important;padding:0}.scroll-bar{display:none}.nav-inner{width:100%;height:100%;padding:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:none;grid-template-columns:unset!important}.logo,.nav-inner{display:flex!important;align-items:center}.logo{gap:4px;padding:3px 8px 3px 4px;margin:2px 4px;height:24px;font-family:Tahoma,Arial,sans-serif;font-size:11px;font-weight:700;color:var(--tp);background:var(--surface);border-top:1px solid var(--border-light);border-left:1px solid var(--border-light);border-right:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark);text-decoration:none;cursor:pointer;white-space:nowrap;letter-spacing:0;font-size:12px}.logo:before{content:"";width:16px;height:16px;flex-shrink:0;display:inline-block;background:linear-gradient(to bottom right,#e00 50%,transparent 0) 0 0/8px 8px,linear-gradient(to bottom left,#00c 50%,transparent 0) 8px 0/8px 8px,linear-gradient(to top right,#0a0 50%,transparent 0) 0 8px/8px 8px,linear-gradient(to top left,#bb0 50%,transparent 0) 8px 8px/8px 8px;background-repeat:no-repeat}.logo span{display:none}.nav-links{display:flex!important;align-items:center;gap:2px;padding:0 4px;flex:1;overflow:hidden}.nav-links a.nav-btn,.nav-links button{height:22px;padding:0 10px;background:var(--surface);border-top:1px solid var(--border-light);border-left:1px solid var(--border-light);border-right:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark);font-family:Tahoma,Arial,sans-serif;font-size:11px;font-weight:400;color:var(--tp);letter-spacing:0;text-transform:none;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:4px;text-decoration:none}.nav-links button:before{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='1' y='1' width='12' height='12' fill='%23d4d0c8' stroke='%23808080'/%3E%3Crect x='3' y='3' width='8' height='8' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat 50%/contain;flex-shrink:0}.nav-links a.nav-btn:active,.nav-links button:active{border-top:1px solid var(--border-dark);border-left:1px solid var(--border-dark);border-right:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}.nav-links a.nav-btn:hover,.nav-links button:hover{background:#e8e8e8}.nav-links button.active:after{display:none}.nav-cta-wrap{display:flex;align-items:center;gap:0;padding:0 8px;border-left:1px solid var(--border-dark);height:100%;flex-shrink:0}.nav-cta-label{white-space:nowrap}.nav-cta,.nav-cta-label{font-size:11px;font-family:Tahoma,Arial,sans-serif;color:var(--tp)}.nav-cta{background:transparent;border:none;padding:2px 4px;cursor:pointer;display:flex;align-items:center;width:auto;height:auto;border-radius:0}.nav-cta:hover{background:var(--selected);color:var(--selected-text)}.nav-cta svg{stroke:var(--tp);width:12px;height:12px}.nav-cta:hover svg{stroke:#fff}main{min-height:100vh;padding:8px 8px 38px 84px;background:var(--bg);display:flex;flex-direction:column;align-items:center;gap:8px}@media(max-width:768px){main{padding:8px 4px 38px}}#hero{width:100%;max-width:1100px;background:var(--surface);border-top:2px solid var(--border-light);border-left:2px solid var(--border-light);border-right:2px solid var(--border-dark);border-bottom:2px solid var(--border-dark);padding:0;position:relative;overflow:visible;min-height:unset;justify-content:unset;flex-direction:unset;display:block}.coords,.glow-bg,.grid-bg,.hero-mesh{display:none!important}#hero:before{content:"Yasir Arafath — UI/UX Designer Portfolio - Microsoft Internet Explorer";display:block;background:linear-gradient(90deg,navy 0,#1084d0);color:#fff;font-family:Tahoma,Arial,sans-serif;font-size:11px;font-weight:700;padding:3px 6px;height:22px;line-height:16px}.hero-content-inner{padding:16px 20px;background:var(--surface2);border-top:2px solid var(--border-dark);border-left:2px solid var(--border-dark);border-right:2px solid var(--border-light);border-bottom:2px solid var(--border-light);margin:4px}.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--border);background:var(--surface);font-family:Tahoma,Arial,sans-serif;font-size:11px;color:var(--tp);margin-bottom:12px;border-radius:0;animation:none;opacity:1;width:fit-content}.badge-dot{width:6px;height:6px;border-radius:50%;background:#00c000;box-shadow:none;animation:blink 2s infinite}.badge span{font-size:11px;color:var(--tp)}.h1-wrap{overflow:visible}.h1-line{font-family:Tahoma,Arial,sans-serif;font-weight:700;color:var(--tp);font-size:clamp(1.8rem,3.5vw,3.2rem);letter-spacing:-.01em;line-height:1.1;transform:none!important;opacity:1!important;animation:none!important}.h1-line[style*="color:#6366F1"]{color:var(--accent)!important}.hero-bottom{margin-top:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}.hero-sub{font-size:11px;color:var(--ts);line-height:1.6;max-width:500px;font-family:Tahoma,Arial,sans-serif}.hero-btns,.hero-sub{opacity:1;animation:none}.hero-btns{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.btn-p,.cf-submit,.drib-all-btn,.footer-btn-primary,.submit-btn{--btn-bg-1:unset;--btn-bg-2:unset;padding:4px 14px;min-width:75px;min-height:23px;font-family:Tahoma,Arial,sans-serif;font-size:11px;font-weight:400;letter-spacing:0;background:var(--surface)!important;background-image:none!important;background-size:auto!important;border-top:1px solid var(--border-light)!important;border-left:1px solid var(--border-light)!important;border-right:1px solid var(--border-dark)!important;border-bottom:1px solid var(--border-dark)!important;border-radius:0!important;color:var(--tp)!important;box-shadow:none!important;transition:none!important;display:inline-flex;align-items:center;justify-content:center;gap:4px;text-decoration:none;cursor:pointer}.btn-p:hover,.cf-submit:hover,.drib-all-btn:hover,.footer-btn-primary:hover,.submit-btn:hover{background:#e8e8e8!important}.btn-p:active,.cf-submit:active,.drib-all-btn:active,.footer-btn-primary:active,.submit-btn:active{border-top:1px solid var(--border-dark)!important;border-left:1px solid var(--border-dark)!important;border-right:1px solid var(--border-light)!important;border-bottom:1px solid var(--border-light)!important}.btn-p:is(:focus,:focus-visible),.cf-submit:is(:focus,:focus-visible),.drib-all-btn:is(:focus,:focus-visible),.footer-btn-primary:is(:focus,:focus-visible),.submit-btn:is(:focus,:focus-visible){outline:1px dotted var(--tp);outline-offset:2px;box-shadow:none!important}.btn-p:after,.btn-p:before,.cf-submit:after,.cf-submit:before,.drib-all-btn:after,.drib-all-btn:before,.footer-btn-primary:after,.footer-btn-primary:before,.submit-btn:after,.submit-btn:before{display:none!important}.btn-p svg,.cf-submit svg,.drib-all-btn svg,.footer-btn-primary svg,.submit-btn svg{stroke:var(--tp)!important;fill:none;width:12px;height:12px}.btn-o{padding:4px 14px;font-family:Tahoma,Arial,sans-serif;font-size:11px;font-weight:400;background:var(--surface);border-top:1px solid var(--border-light);border-left:1px solid var(--border-light);border-right:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark);border-radius:0;color:var(--tp);cursor:pointer;transition:none;backdrop-filter:none;display:inline-flex;align-items:center;gap:4px;text-decoration:none}.btn-o:hover{background:#e8e8e8;color:var(--tp);border-color:inherit}.btn-o:hover,.footer-btn-outline:hover{transform:none}.scroll-hint,.scroll-line{display:none!important}section{width:100%;max-width:1100px;background:var(--surface);border-left:2px solid var(--border-light);border-right:2px solid var(--border-dark);border-bottom:2px solid var(--border-dark);padding:0!important;margin:0 auto;position:relative}section,section+section{border-top:2px solid var(--border-light)}.sec-grid{display:grid;grid-template-columns:160px 1fr;gap:0;padding:8px 12px;background:var(--surface2);border-top:2px solid var(--border-dark);border-left:2px solid var(--border-dark);border-right:2px solid var(--border-light);border-bottom:2px solid var(--border-light);margin:4px}.sec-h2{font-weight:700;color:var(--tp);font-size:clamp(1rem,2vw,1.4rem);line-height:1.2;letter-spacing:0}.sec-h2,.sec-p{font-family:Tahoma,Arial,sans-serif}.sec-p{font-size:11px;color:var(--ts);line-height:1.6;max-width:100%}#about:before{content:"About — Yasir Arafath"}#work:before{content:"Work — Projects"}#process:before{content:"Process — How I Work"}#dribbble:before{content:"Dribbble — Design Shots"}#experience:before{content:"Experience — Work History"}#education:before{content:"Education"}#skills:before{content:"Skills & Certifications"}#contact:before{content:"Contact — Get In Touch"}section:before{display:block;background:linear-gradient(90deg,navy 0,#1084d0);color:#fff;font-family:Tahoma,Arial,sans-serif;font-size:11px;font-weight:700;padding:3px 6px;height:22px;line-height:16px}section:after{content:"";display:block;height:3px;background:var(--surface)}.section-body{padding:12px 16px;background:var(--surface2);border-top:2px solid var(--border-dark);border-left:2px solid var(--border-dark);border-right:2px solid var(--border-light);border-bottom:2px solid var(--border-light);margin:4px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;padding:8px;background:var(--surface);border-top:1px solid var(--border-dark);border-left:1px solid var(--border-dark);border-right:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}.stat{border-left:none;padding:8px;background:var(--surface2);border:1px solid var(--border);text-align:center}.stat-val{font-family:Tahoma,Arial,sans-serif;font-weight:700;font-size:1.4rem;color:var(--accent);letter-spacing:0}.stat-lbl{font-size:10px;color:var(--ts);margin-top:2px;line-height:1.3}#work{padding:0!important}.work-header{padding:8px 12px;background:var(--surface)}.work-header .label{font-size:10px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--ts);display:block;margin-bottom:4px}.work-header .label,.work-headline{font-family:Tahoma,Arial,sans-serif}.work-headline{font-weight:700;color:var(--tp);font-size:clamp(1rem,2vw,1.5rem);letter-spacing:0;line-height:1.2;max-width:100%}.work-headline em{color:var(--ts);font-style:normal}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px;background:var(--surface2);border-top:2px solid var(--border-dark);border-left:2px solid var(--border-dark);border-right:2px solid var(--border-light);border-bottom:2px solid var(--border-light);margin:4px}.pcard{background:var(--surface);border:1px solid var(--border);border-radius:0;min-height:180px;padding:0;display:flex;flex-direction:column;justify-content:flex-start;transition:none;box-shadow:none;overflow:hidden;position:static}.pcard:hover{background:#e8e8ff;border-color:var(--selected);transform:none;box-shadow:none}.pcard-1,.pcard-2,.pcard-3,.pcard-4,.pcard-5,.pcard-6{background:var(--surface)!important}.pcard:hover .pcard-1,.pcard:hover .pcard-2,.pcard:hover .pcard-3,.pcard:hover .pcard-4,.pcard:hover .pcard-5,.pcard:hover .pcard-6{background:#e8e8ff!important}.pcard:after,.pcard:before{display:none!important}.pc-top{background:linear-gradient(90deg,navy,#1084d0);padding:2px 4px;display:flex;align-items:center;justify-content:space-between;margin-bottom:0}.pc-idx{font-size:10px;font-weight:700;color:#fff;font-family:Tahoma,Arial,sans-serif;letter-spacing:0;text-transform:none}.pc-arrow{width:14px;height:12px;border-radius:0;border:1px solid var(--border-light);background:var(--surface);display:flex;align-items:center;justify-content:center}.pc-arrow svg{width:10px;height:10px;stroke:var(--tp);transition:none;transform:none!important}.pcard:hover .pc-arrow{border-color:var(--border-light);background:var(--surface)}.pcard:hover .pc-arrow svg{stroke:var(--tp)}.pc-bottom,.pc-mid{padding:6px 8px;position:static;z-index:auto}.pc-cat{font-size:10px;color:var(--ts);margin:6px 0 2px}.pc-cat,.pc-name{letter-spacing:0;font-family:Tahoma,Arial,sans-serif}.pc-name{font-weight:700;color:var(--tp);font-size:.9rem;line-height:1.2;margin-bottom:6px}.pc-desc{font-size:11px;color:var(--ts);line-height:1.5;flex:1}.pc-bottom{margin-top:6px;display:flex;flex-wrap:wrap;gap:3px;padding:4px 8px 8px}.pc-tag{font-size:10px;padding:1px 5px;border:1px solid var(--border);border-radius:0;color:var(--ts);font-family:Tahoma,Arial,sans-serif;font-weight:400;transition:none;letter-spacing:0;background:var(--surface)}.pcard:hover .pc-tag{border-color:var(--border);color:var(--ts)}#process{padding:0!important;background:var(--surface)}.process-header{grid-template-columns:160px 1fr;gap:0;padding:8px 12px;margin-bottom:0}.process-board,.process-header{display:grid;background:var(--surface)}.process-board{border:none;border-radius:0;overflow:visible;grid-template-columns:repeat(4,1fr);gap:4px;padding:0 8px 8px;margin:4px}.pstep{background:var(--surface2);border-right:1px solid var(--border);border:1px solid var(--border);padding:10px 10px 8px;cursor:default;display:flex;flex-direction:column;gap:0;transition:none;overflow:hidden;position:relative}.pstep:last-child{border-right:1px solid var(--border)}.process-board:hover .pstep{background:var(--surface2)}.process-board:hover .pstep .pstep-num{color:var(--ts)}.process-board:hover .pstep .pstep-icon{border-color:var(--border);background:var(--surface)}.process-board:hover .pstep .pstep-icon svg{stroke:var(--ts)}.process-board:hover .pstep .pstep-title{color:var(--tp)}.process-board:hover .pstep .pstep-desc,.process-board:hover .pstep .pstep-list-item{color:var(--ts)}.process-board:hover .pstep .pstep-list-item:before{background:var(--border)}.process-board:hover .pstep .pstep-big-num{color:rgba(0,0,128,.04)}.process-board:hover .pstep:hover{background:#e8e8ff}.process-board:hover .pstep:hover .pstep-num{color:var(--accent)}.process-board:hover .pstep:hover .pstep-icon{border-color:var(--accent);background:var(--surface)}.process-board:hover .pstep:hover .pstep-icon svg{stroke:var(--accent)}.process-board:hover .pstep:hover .pstep-title{color:var(--tp)}.process-board:hover .pstep:hover .pstep-desc,.process-board:hover .pstep:hover .pstep-list-item{color:var(--ts)}.process-board:hover .pstep:hover .pstep-list-item:before{background:var(--accent)}.process-board:hover .pstep:hover .pstep-big-num{color:rgba(0,0,128,.04)}.pstep-num{font-family:Tahoma,Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--accent)}.pstep-icon,.pstep-num{margin-bottom:8px;transition:none}.pstep-icon{width:28px;height:28px;border-radius:0;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0}.pstep-icon svg{width:14px;height:14px;stroke:var(--ts);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none;transition:none}.pstep-title{font-family:Tahoma,Arial,sans-serif;font-weight:700;font-size:.8rem;color:var(--tp);line-height:1.3}.pstep-desc,.pstep-title{margin-bottom:6px;transition:none}.pstep-desc{font-size:10px;color:var(--ts);line-height:1.55}.pstep-list{display:flex;flex-direction:column;gap:4px;margin-top:auto}.pstep-list-item{display:flex;align-items:flex-start;gap:6px;font-size:10px;color:var(--ts);line-height:1.4;transition:none}.pstep-list-item:before{content:"";width:3px;height:3px;border-radius:50%;background:var(--ts);flex-shrink:0;margin-top:5px;transition:none}.pstep:after{display:none!important}.pstep-big-num{position:absolute;bottom:4px;right:6px;font-family:Tahoma,Arial,sans-serif;font-weight:700;font-size:2.5rem;color:rgba(0,0,128,.04);letter-spacing:0;pointer-events:none;transition:none;line-height:1}#dribbble{padding:0!important}.drib-header{display:flex;align-items:flex-end;justify-content:space-between;padding:8px 12px;background:var(--surface);margin-bottom:0;border-bottom:1px solid var(--border)}.drib-label{display:block;margin-bottom:4px;font-size:10px;color:var(--ts);text-transform:uppercase;letter-spacing:.05em}.drib-heading,.drib-label{font-family:Tahoma,Arial,sans-serif}.drib-heading{font-weight:700;color:var(--tp);font-size:clamp(.9rem,1.5vw,1.2rem);line-height:1.2;letter-spacing:0}.drib-heading em{color:var(--ts);font-style:normal}.drib-viewport{overflow:hidden;width:100%;position:relative;background:var(--surface2);border-top:2px solid var(--border-dark);border-left:2px solid var(--border-dark);border-right:2px solid var(--border-light);border-bottom:2px solid var(--border-light);margin:4px}.drib-track{display:flex;gap:8px;transition:transform .3s ease;will-change:transform;width:100%;padding:8px}.dcard{flex:0 0 calc(50% - 8px);max-width:calc(50% - 8px);text-decoration:none;display:block;cursor:pointer}.dcard-img{width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:0;background:#ddd;border-right:2px solid var(--border-dark);border:2px solid var(--border-dark);border-right-color:var(--border-light);border-bottom:2px solid var(--border-light);position:relative}.dcard-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:none}.dcard:hover .dcard-img img{transform:none}.dcard-img-overlay{position:absolute;inset:0;background:rgba(0,0,128,0);display:flex;align-items:center;justify-content:center;transition:background .2s}.dcard:hover .dcard-img-overlay{background:rgba(0,0,128,.15)}.dcard-view-btn{display:flex;align-items:center;gap:4px;padding:4px 12px;border-radius:0;background:var(--surface);border-top:1px solid var(--border-light);border-left:1px solid var(--border-light);border-right:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark);color:var(--tp);font-family:Tahoma,Arial,sans-serif;font-size:11px;font-weight:400;opacity:0;transform:none;transition:opacity .2s}.dcard:hover .dcard-view-btn{opacity:1;transform:none}.dcard-view-btn svg{width:10px;height:10px;stroke:var(--tp);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none}.dcard-meta{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:6px;padding:0 2px}.dcard-title{font-weight:700;font-size:.8rem;color:var(--tp)}.dcard-title,.dcard-year{font-family:Tahoma,Arial,sans-serif;letter-spacing:0}.dcard-year{font-weight:400;font-size:10px;color:var(--ts)}.dcard-tags{display:flex;gap:4px;flex-wrap:wrap}.dcard-tag{font-size:10px;padding:1px 5px;border:1px solid var(--border);border-radius:0;color:var(--ts);font-family:Tahoma,Arial,sans-serif;font-weight:400;transition:none;background:var(--surface)}.dcard:hover .dcard-tag{border-color:var(--border);color:var(--ts)}.drib-footer{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:var(--surface);border-top:1px solid var(--border)}.drib-progress{flex:1;height:8px;background:var(--surface2);border-top:1px solid var(--border-dark);border-left:1px solid var(--border-dark);margin-right:8px;overflow:hidden}.drib-progress-fill{height:100%;background:var(--accent);transition:width .3s ease;width:50%}.drib-nav{display:flex;gap:4px}.drib-nav-btn{width:22px;height:22px;border-radius:0;border-top:1px solid var(--border-light);border-left:1px solid var(--border-light);border-right:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark);background:var(--surface);display:flex;align-items:center;justify-content:center;transition:none;cursor:pointer}.drib-nav-btn:hover{background:#e8e8e8}.drib-nav-btn:active{border-top:1px solid var(--border-dark);border-left:1px solid var(--border-dark);border-right:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}.drib-nav-btn svg{width:12px;height:12px;stroke:var(--tp);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none;transition:none}.drib-nav-btn:hover svg{stroke:var(--tp)}.drib-nav-btn:disabled{opacity:.4;pointer-events:none}.drib-all-btn-wrap{display:flex;justify-content:center;padding:8px}.exp-item{border-top:1px solid var(--border);padding:10px 0}.exp-role{font-weight:700;color:var(--tp);font-size:.85rem}.exp-co,.exp-role{font-family:Tahoma,Arial,sans-serif}.exp-co{color:var(--accent);font-size:.8rem;margin-top:2px;font-weight:400}.exp-loc,.exp-period{font-size:10px;color:var(--ts);font-family:Tahoma,Arial,sans-serif}.exp-bullets{display:flex;flex-direction:column;gap:4px;margin-top:8px}.eb{display:flex;gap:8px;align-items:flex-start}.edot{width:4px;height:4px;border-radius:50%;background:var(--ts);flex-shrink:0;margin-top:5px}.eb p{font-size:11px;color:var(--ts);line-height:1.5}#education .edu-row{display:flex;justify-content:space-between;align-items:flex-start;border-top:1px solid var(--border);padding:10px 0;gap:16px}.edu-degree{font-family:Tahoma,Arial,sans-serif;font-weight:700;color:var(--tp);font-size:.85rem;margin-bottom:3px}.edu-uni{font-size:11px}.edu-badge,.edu-uni{color:var(--ts);font-family:Tahoma,Arial,sans-serif}.edu-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid var(--border);border-radius:0;font-size:10px;font-weight:400;margin-top:6px;background:var(--surface)}.edu-right{text-align:right;flex-shrink:0}.edu-year{font-family:Tahoma,Arial,sans-serif;font-weight:700}.edu-loc,.edu-year{font-size:10px;color:var(--ts)}.edu-loc{margin-top:2px}.skill-groups{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.sg-title{margin-bottom:8px;font-weight:700;font-family:Tahoma,Arial,sans-serif;font-size:.8rem;color:var(--tp)}.skill-tags{display:flex;flex-wrap:wrap;gap:4px}.stag{font-size:10px;padding:3px 8px;border:1px solid var(--border);border-radius:0;color:var(--ts);transition:none;background:var(--surface);font-family:Tahoma,Arial,sans-serif}.stag:hover{color:var(--tp);border-color:var(--accent);background:#e8e8ff}.certs{border-top:1px solid var(--border);padding-top:10px}.cert-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:5px 0}.cert-name{font-size:.8rem;color:var(--tp);font-weight:700;font-family:Tahoma,Arial,sans-serif}.cert-org{margin-top:1px}.cert-org,.cert-yr{font-size:10px;color:var(--ts)}.cert-org,.cert-yr,.ch{font-family:Tahoma,Arial,sans-serif}.ch{font-weight:700;color:var(--tp);font-size:clamp(1.2rem,2vw,2rem);line-height:1.2;margin-bottom:12px}.clinks{margin-top:16px;border-top:1px solid var(--border)}.clink{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:6px 4px;border-radius:0;margin:0;transition:none}.clink:hover{background:#e8e8ff}.clink-lbl{font-size:10px;color:var(--ts);font-family:Tahoma,Arial,sans-serif}.clink-val{font-size:11px;color:var(--ts);display:flex;align-items:center;gap:4px;transition:none}.clink:hover .clink-val{color:var(--tp)}.carr{color:var(--accent)}.carr,.clink:hover .carr{opacity:1}#contact{padding:0!important;border-top:2px solid var(--border-light);overflow:visible}.contact-outer{display:grid;grid-template-columns:1fr 1fr;min-height:unset;background:var(--surface)}.contact-left-col{padding:16px;display:flex;flex-direction:column;justify-content:flex-start;position:relative;border-right:1px solid var(--border)}.contact-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--border);border-radius:0;font-size:10px;font-family:Tahoma,Arial,sans-serif;font-weight:700;color:var(--ts);margin-bottom:12px;background:var(--surface2);letter-spacing:.04em;text-transform:uppercase;width:fit-content}.contact-badge-dot{width:6px;height:6px;border-radius:50%;background:#00c000;animation:blink 2s infinite;flex-shrink:0}.contact-big-heading{font-family:Tahoma,Arial,sans-serif;font-weight:700;color:var(--tp);font-size:clamp(1.2rem,2.5vw,2.2rem);line-height:1.1;letter-spacing:0;margin-bottom:16px}.contact-big-heading .accent{color:var(--accent)}.contact-checklist{display:flex;flex-direction:column;gap:8px;margin-bottom:auto}.contact-check-item{display:flex;align-items:flex-start;gap:8px}.check-icon{width:16px;height:16px;border-radius:0;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.check-icon svg{width:9px;height:9px;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}.check-text{font-size:11px;color:var(--ts);line-height:1.5}.check-text strong{color:var(--tp);font-weight:700}.contact-links-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}.cstrip-link{font-size:11px;color:var(--ts);transition:none;text-decoration:none;display:flex;align-items:center;gap:4px;font-family:Tahoma,Arial,sans-serif;font-weight:400}.cstrip-link:hover{color:var(--accent);text-decoration:underline}.cstrip-link svg{display:none}.contact-form-col{background:var(--surface2);border-left:2px solid var(--border-dark);padding:16px;display:flex;flex-direction:column}.contact-form-col h3{font-family:Tahoma,Arial,sans-serif;font-weight:700;font-size:.85rem;color:var(--tp);margin-bottom:12px;letter-spacing:0}.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cf-field{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}.cf-field label{font-weight:700;letter-spacing:0;text-transform:none}.cf-field input,.cf-field label,.cf-field textarea{font-size:11px;font-family:Tahoma,Arial,sans-serif;color:var(--tp)}.cf-field input,.cf-field textarea{background:var(--surface2);border-top:1px solid var(--border-dark);border-left:1px solid var(--border-dark);border-right:1px solid var(--border-light);border-bottom:1px solid var(--border-light);border-radius:0;padding:3px 5px;outline:none;transition:none;width:100%}.cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--tm)}.cf-field input:focus,.cf-field textarea:focus{border-top:1px solid var(--border-dark);border-left:1px solid var(--border-dark);border-right:1px solid var(--border-light);border-bottom:1px solid var(--border-light);background:var(--surface2);box-shadow:none;outline:1px dotted var(--tp)}.cf-field textarea{resize:none;line-height:1.4}.cf-pills-label{font-size:11px;font-family:Tahoma,Arial,sans-serif;font-weight:700;color:var(--tp);letter-spacing:0;text-transform:none;margin-bottom:6px}.cf-pills{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.cf-pill{font-family:Tahoma,Arial,sans-serif;font-size:11px;font-weight:400;padding:2px 8px;border-radius:0;border:1px solid var(--border);color:var(--ts);background:var(--surface);transition:none;cursor:pointer}.cf-pill:hover{background:#e8e8e8;color:var(--tp)}.cf-pill.active{border-color:var(--accent)!important;color:var(--selected-text);background:var(--selected)}.cf-submit{width:100%;padding:4px 14px;margin-top:8px;font-family:Tahoma,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:0;transition:none}.cf-submit:hover{background-position:unset}.cf-submit:after,.cf-submit:before{display:none!important}.cf-submit svg{width:12px;height:12px;stroke:var(--tp);stroke-width:1.5}#cf-success{display:none;margin-top:8px;padding:6px 10px;border:1px solid green;border-radius:0;font-size:11px;color:#006000;align-items:center;gap:6px;font-family:Tahoma,Arial,sans-serif}#cf-success,.marquee-wrap{background:var(--surface2)}.marquee-wrap{width:100%;max-width:1100px;overflow:hidden;padding:4px 0;border-top:2px solid var(--border-dark);border-left:2px solid var(--border-dark);border-right:2px solid var(--border-light);border-bottom:2px solid var(--border-light);margin:0 auto}.marquee-track{display:flex;width:max-content;animation:marquee 22s linear infinite}.marquee-track:hover{animation-play-state:paused}.marquee-item{display:flex;align-items:center;gap:12px;padding:0 16px;white-space:nowrap;font-family:Tahoma,Arial,sans-serif;font-weight:700;font-size:.8rem;color:var(--tp);letter-spacing:0}.marquee-item .mi-icon{font-size:.9rem;line-height:1}@keyframes marquee{0%{transform:translateX(0)}to{transform:translateX(-50%)}}footer{width:100%;max-width:1100px;background:var(--surface);border-top:2px solid var(--border-light);border-left:2px solid var(--border-light);border-right:2px solid var(--border-dark);border-bottom:2px solid var(--border-dark);position:relative;overflow:visible;margin:0 auto}footer:before{content:"Yasir Arafath — UI/UX Designer Portfolio";display:block;background:linear-gradient(90deg,navy 0,#1084d0);color:#fff;font-family:Tahoma,Arial,sans-serif;font-size:11px;font-weight:700;padding:3px 6px;height:22px;line-height:16px}.footer-big-heading em{display:none}.footer-btn-primary{font-family:Tahoma,Arial,sans-serif;font-size:11px;font-weight:700;padding:4px 14px;background:var(--surface);color:var(--tp);border-top:1px solid var(--border-light);border-left:1px solid var(--border-light);border-right:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark);border-radius:0;transition:none;display:flex;align-items:center;gap:4px;cursor:pointer;text-decoration:none}.footer-btn-primary:hover{background:#e8e8e8;transform:none}.footer-btn-primary svg{width:12px;height:12px;stroke:var(--tp)}.footer-btn-outline{font-family:Tahoma,Arial,sans-serif;font-size:11px;font-weight:400;padding:4px 14px;border-top:1px solid var(--border-light);border-left:1px solid var(--border-light);border-right:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark);color:var(--tp);background:var(--surface);border-radius:0;transition:none;text-decoration:none;cursor:pointer}.footer-btn-outline:hover{background:#e8e8e8;color:var(--tp)}.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:0;padding:12px 16px;position:relative;z-index:1}.footer-col-label{font-size:10px;font-family:Tahoma,Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--ts);margin-bottom:8px;font-weight:700}.footer-col-links{display:flex;flex-direction:column;gap:2px}.footer-tagline{font-size:11px;color:var(--ts);line-height:1.5;max-width:180px;margin-bottom:10px;font-family:Tahoma,Arial,sans-serif}.footer-socials{display:flex;gap:4px;margin-top:8px}.fsocial{width:22px;height:22px;border:1px solid var(--border);border-radius:0;display:flex;align-items:center;justify-content:center;transition:none;text-decoration:none;background:var(--surface)}.fsocial:hover{background:#e8e8e8;border-color:var(--border)}.fsocial svg{display:block;transition:none}.fsocial:not(:hover) svg{opacity:.7}.fsocial:hover svg{opacity:1}.fclink{font-size:11px;color:var(--ts);transition:none;display:flex;align-items:center;gap:3px;padding:2px 0;text-decoration:none;font-family:Tahoma,Arial,sans-serif}.fclink:hover{color:var(--accent);text-decoration:underline}.brand-css,.fclink svg,.fclink-brand,.footer-name-divider{display:none}.footer-name-row{border-top:1px solid var(--border);padding:6px 16px;background:var(--surface);overflow:hidden;user-select:none;margin:0;line-height:1}.footer-name-text{font-family:Tahoma,Arial,sans-serif;font-weight:700;font-size:clamp(3rem,8vw,8rem);color:#c8c4bc;letter-spacing:.01em;white-space:nowrap;display:block}.footer-bottom{padding:4px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--border);background:var(--surface)}.footer-bottom-logo{font-family:Tahoma,Arial,sans-serif;font-size:.75rem;font-weight:700;color:var(--tp)}.footer-bottom-logo span{color:var(--accent)}.footer-bottom-copy{font-size:10px;color:var(--ts);font-family:Tahoma,Arial,sans-serif}.footer-bottom-links{display:flex;gap:12px}.footer-bottom-links a{font-size:10px;color:var(--ts);transition:none;text-decoration:none;font-family:Tahoma,Arial,sans-serif}.footer-bottom-links a:hover{color:var(--accent);text-decoration:underline}#about,#dribbble,#education,#experience,#process,#skills,#work{background:var(--surface);border-top:2px solid var(--border-light);border-left:2px solid var(--border-light);border-right:2px solid var(--border-dark);border-bottom:2px solid var(--border-dark)}#about .sec-grid,#education .sec-grid,#experience .sec-grid,#skills .sec-grid,div[style*="padding: 80px"],div[style*="padding:80px"]{padding:12px 16px!important}#about>:not(:before):not(:after),#education>:not(:before):not(:after),#experience>:not(:before):not(:after),#skills>:not(:before):not(:after),#work>.project-grid,#work>.work-header{margin:0}section>.contact-outer,section>.drib-all-btn-wrap,section>.drib-footer,section>.drib-header,section>.drib-viewport,section>.process-board,section>.process-header,section>.project-grid,section>.reveal,section>.sec-grid,section>.work-header,section>div:not([class*=win]){background:var(--surface2);margin:4px;padding:12px 16px}.label{font-family:Tahoma,Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ts)}a{text-decoration:none;color:var(--tp)}a:hover{text-decoration:underline;color:var(--accent)}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.reveal{transition:none!important}.reveal,.reveal.in{opacity:1!important;transform:none!important}#hero .badge,#hero .coords,#hero .h1-line,#hero .hero-btns,#hero .hero-sub,#hero .scroll-hint{opacity:1!important;animation:none!important;transform:none!important}.quick-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}@media (max-width:1024px){.nav-inner{padding:0;gap:0}.nav-links{gap:1px}.nav-links a.nav-btn,.nav-links button{padding:0 6px;font-size:10px}#hero,section{padding:0!important}.process-header{grid-template-columns:1fr;gap:0}.process-board{grid-template-columns:repeat(2,1fr)}.pstep:nth-child(2){border-right:1px solid var(--border)}.pstep:first-child,.pstep:nth-child(2){border-bottom:1px solid var(--border)}.project-grid{grid-template-columns:repeat(2,1fr)}.pcard:last-child{grid-column:span 2}.stats{grid-template-columns:repeat(2,1fr)}.contact-outer,.skill-groups{grid-template-columns:1fr}.contact-left-col{padding:12px;border-right:none;border-bottom:1px solid var(--border)}.contact-form-col{padding:12px}.footer-grid{grid-template-columns:1fr 1fr;gap:16px;padding:12px}.footer-name-text{font-size:clamp(3rem,10vw,8rem)}.footer-bottom{padding:6px 12px}div[style*="grid-template-columns:220px"]{grid-template-columns:1fr!important;gap:8px!important}}@media (max-width:768px){.nav-inner{padding:0;grid-template-columns:auto 1fr auto}.nav-links{display:none!important}#hero{padding:0!important}.h1-line{font-size:clamp(1.4rem,7vw,2.2rem)!important}.hero-bottom{flex-direction:column;align-items:flex-start;gap:8px}.hero-sub{max-width:100%}.hero-btns{flex-wrap:wrap}section{padding:0!important}.process-board{grid-template-columns:1fr}.pstep{border-right:1px solid var(--border)!important;border-bottom:1px solid var(--border)}.pstep:last-child{border-bottom:none}.project-grid{grid-template-columns:1fr}.pcard:last-child{grid-column:span 1}.dcard{flex:0 0 100%;max-width:100%}.stats{grid-template-columns:repeat(2,1fr);gap:6px}.skill-groups{grid-template-columns:1fr;gap:12px}.contact-form-col,.contact-left-col{padding:10px}.cf-row,.footer-grid{grid-template-columns:1fr}.footer-name-text{font-size:18vw}.footer-bottom{flex-direction:column;align-items:flex-start;gap:4px}.sec-grid{grid-template-columns:1fr!important}}@media (max-width:480px){.nav-inner{height:28px}section{padding:0!important}.h1-line{font-size:clamp(1.2rem,9vw,1.8rem)!important}.btn-o,.btn-p{padding:3px 10px}.btn-o,.btn-p,.cf-submit{font-size:11px}.stats{grid-template-columns:repeat(2,1fr)}.footer-name-text{font-size:20vw}.logo{font-size:11px;padding:2px 6px 2px 4px}}