/* Compiled utility CSS — replaces the Tailwind CDN runtime.
   Generated by hand from this project's tailwind.config (colors, spacing,
   fontFamily, fontSize, borderRadius) plus every utility class actually
   used in portfolio-ammar-alghamdi-v3.html. No build step required. */

:root{
  --color-on-surface:#e7e2da;
  --color-surface-variant:#37342f;
  --color-text-muted:#B8AFA3;
  --color-energy-violet:#7C3AED;
  --color-secondary:#ffb59f;
  --color-primary:#ccc5c0;
  --color-background:#15130f;
  --color-energy-azure:#3B82F6;
  --color-surface:#15130f;
  --color-primary-container:#1a1714;
  --color-surface-container-lowest:#100e0a;
  --color-surface-elevation-1:#242019;
  --color-surface-elevation-2:#2D2821;
  --color-surface-container:#211f1b;
  --color-on-secondary-container:#ff9b7d;
  --color-border-low-contrast:#38322A;
}

/* Minimal reset (Tailwind preflight equivalent) */
*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--color-border-low-contrast)}
html{-webkit-text-size-adjust:100%;font-family:'Inter',sans-serif}
body{margin:0;line-height:inherit}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:inherit}
button{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;background-color:transparent;background-image:none;padding:0;border:0;cursor:pointer}
img,svg{display:block;vertical-align:middle;max-width:100%}
ul,ol{list-style:none;margin:0;padding:0}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Display / position */
.absolute{position:absolute}
.fixed{position:fixed}
.relative{position:relative}
.hidden{display:none}
.flex{display:flex}
.inline-flex{display:inline-flex}
.inline-block{display:inline-block}
.grid{display:grid}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}
.z-0{z-index:0}
.z-10{z-index:10}
.z-50{z-index:50}

/* Flex / grid */
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-grow{flex-grow:1}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.space-y-4>*+*{margin-top:1rem}
.space-y-6>*+*{margin-top:1.5rem}

/* Sizing */
.w-2{width:.5rem}
.w-auto{width:auto}
.w-full{width:100%}
.h-4{height:1rem}
.h-48{height:12rem}
.h-px{height:1px}
.h-\[18px\]{height:18px}
.min-h-screen{min-height:100vh}
.min-h-\[200px\]{min-height:200px}
.min-h-\[716px\]{min-height:716px}
.max-w-2xl{max-width:42rem}
.max-w-xl{max-width:36rem}
.max-w-container-max{max-width:980px}

/* Spacing */
.mx-auto{margin-left:auto;margin-right:auto}
.mb-4{margin-bottom:1rem}
.mb-12{margin-bottom:3rem}
.ml-1{margin-left:.25rem}
.ml-4{margin-left:1rem}
.mt-auto{margin-top:auto}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.p-component-padding{padding:24px}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-gutter{padding-left:32px;padding-right:32px}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-section-lg{padding-top:90px;padding-bottom:90px}
.py-stack-md{padding-top:16px;padding-bottom:16px}
.pb-1{padding-bottom:.25rem}
.pt-2{padding-top:.5rem}
.pt-4{padding-top:1rem}
.pt-\[100px\]{padding-top:100px}

/* Typography */
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-xs{font-size:.75rem;line-height:1rem}
.text-\[16px\]{font-size:16px}
.text-\[20px\]{font-size:20px}
.leading-tight{line-height:1.25}
.leading-relaxed{line-height:1.625}
.tracking-tighter{letter-spacing:-0.05em}
.tracking-wider{letter-spacing:.05em}
.uppercase{text-transform:uppercase}
.font-bold{font-weight:700}

.font-headline-md,.font-headline-sm,.font-headline-lg,.font-headline-lg-mobile{font-family:'Space Grotesk',sans-serif}
.font-label-mono,.font-label-mono-micro{font-family:'JetBrains Mono',monospace}
.font-body-sm,.font-body-lg{font-family:'Inter',sans-serif}

.text-headline-md{font-size:28px;line-height:1.3;font-weight:600}
.text-label-mono{font-size:13px;line-height:1;font-weight:400}
.text-headline-lg-mobile{font-size:32px;line-height:1.2;font-weight:600}
.text-label-mono-micro{font-size:11px;line-height:1;font-weight:400}
.text-body-sm{font-size:14px;line-height:1.5;font-weight:400}
.text-headline-sm{font-size:22px;line-height:1.3;font-weight:600}
.text-headline-lg{font-size:46px;line-height:1.18;letter-spacing:-0.01em;font-weight:600}
.text-body-lg{font-size:16px;line-height:1.6;font-weight:400}

/* Colors — text */
.text-on-surface{color:var(--color-on-surface)}
.text-on-secondary-container{color:var(--color-on-secondary-container)}
.text-secondary{color:var(--color-secondary)}
.text-text-muted{color:var(--color-text-muted)}
.text-text-muted\/30{color:rgba(184,175,163,.3)}

/* Colors — border */
.border-border-low-contrast{border-color:var(--color-border-low-contrast)}
.border-low-contrast{border-color:var(--color-border-low-contrast)}
.border-on-secondary-container{border-color:var(--color-on-secondary-container)}
.border-energy-violet\/20{border-color:rgba(124,58,237,.2)}
.border-t-energy-azure\/20{border-top-color:rgba(59,130,246,.2)}
.border-t-energy-violet\/20{border-top-color:rgba(124,58,237,.2)}
.border-t-secondary\/20{border-top-color:rgba(255,181,159,.2)}

/* Colors — background */
.bg-background{background-color:var(--color-background)}
.bg-background\/80{background-color:rgba(21,19,15,.8)}
.bg-border-low-contrast{background-color:var(--color-border-low-contrast)}
.bg-energy-azure\/10{background-color:rgba(59,130,246,.1)}
.bg-energy-violet\/10{background-color:rgba(124,58,237,.1)}
.bg-secondary{background-color:var(--color-secondary)}
.bg-secondary\/10{background-color:rgba(255,181,159,.1)}
.bg-surface-container-lowest{background-color:var(--color-surface-container-lowest)}
.bg-surface-elevation-2{background-color:var(--color-surface-elevation-2)}
.bg-surface-elevation-2\/50{background-color:rgba(45,40,33,.5)}

/* Gradients */
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}
.bg-gradient-to-bl{background-image:linear-gradient(to bottom left,var(--tw-gradient-stops))}
.from-energy-violet\/5{--tw-gradient-from:rgba(124,58,237,.05);--tw-gradient-to:rgba(124,58,237,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-surface-elevation-2{--tw-gradient-from:#2D2821;--tw-gradient-to:rgba(45,40,33,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-energy-azure\/5{--tw-gradient-to:rgba(59,130,246,.05)}
.to-surface-container{--tw-gradient-to:#211f1b}

/* Radius / borders */
.rounded-full{border-radius:9999px}
.rounded-round-eight{border-radius:8px}
.border{border-width:1px}
.border-b{border-bottom-width:1px}
.border-t{border-top-width:1px}

/* Effects / transitions */
.backdrop-blur-xl{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.opacity-0{opacity:0}
.opacity-60{opacity:.6}
.overflow-hidden{overflow:hidden}
.overflow-x-hidden{overflow-x:hidden}
.pointer-events-none{pointer-events:none}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-colors{transition-property:color,background-color,border-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.duration-300{transition-duration:300ms}
.duration-500{transition-duration:500ms}
.duration-700{transition-duration:700ms}
.brightness-0.invert{filter:brightness(0) invert(1)}

/* Hover / group-hover */
.hover\:-translate-y-1:hover{transform:translateY(-.25rem)}
.hover\:bg-surface-elevation-1:hover{background-color:var(--color-surface-elevation-1)}
.hover\:bg-surface-elevation-2\/80:hover{background-color:rgba(45,40,33,.8)}
.hover\:border-energy-azure\/30:hover{border-color:rgba(59,130,246,.3)}
.hover\:border-energy-violet\/30:hover{border-color:rgba(124,58,237,.3)}
.hover\:border-energy-violet\/50:hover{border-color:rgba(124,58,237,.5)}
.hover\:border-secondary\/30:hover{border-color:rgba(255,181,159,.3)}
.hover\:text-energy-violet:hover{color:var(--color-energy-violet)}
.hover\:text-on-surface:hover{color:var(--color-on-surface)}
.hover\:text-secondary:hover{color:var(--color-secondary)}
.group:hover .group-hover\:opacity-100{opacity:1}
.group:hover .group-hover\:text-energy-azure{color:var(--color-energy-azure)}

/* Selection */
.selection\:bg-energy-violet\/30 *::selection,.selection\:bg-energy-violet\/30::selection{background-color:rgba(124,58,237,.3)}
.selection\:text-white *::selection,.selection\:text-white::selection{color:#fff}

/* Icon sizing (used by inline GitHub/LinkedIn SVGs) */
.icon-16{width:16px;height:16px;flex-shrink:0}
.icon-18{width:18px;height:18px;flex-shrink:0}

/* Responsive (md: 768px) */
@media (min-width:768px){
  .md\:flex{display:flex}
  .md\:hidden{display:none}
  .md\:flex-row{flex-direction:row}
  .md\:items-start{align-items:flex-start}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:col-span-2{grid-column:span 2 / span 2}
  .md\:w-1\/2{width:50%}
  .md\:h-auto{height:auto}
  .md\:p-12{padding:3rem}
  .md\:font-headline-lg{font-family:'Space Grotesk',sans-serif}
  .md\:text-headline-lg{font-size:46px;line-height:1.18;letter-spacing:-0.01em;font-weight:600}
}