/* CSS Reset & Global Rules */
   *,
   *::before,
   *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   html {
       scroll-behavior: smooth;
   }
   
   img {
       max-width: 100%;
       height: auto;
       display: block;
   }
   
   /* CSS Custom Properties (Design System) */
   :root {
       /* Colors */
       --clr-primary: hsl(215, 80%, 45%);
       --clr-primary-dark: hsl(215, 80%, 35%);
       --clr-secondary: hsl(160, 60%, 40%);
       --clr-accent: hsl(45, 90%, 55%);
   
       --clr-neutral-100: #ffffff;
       --clr-neutral-200: #f4f4f4;
       --clr-neutral-300: #e0e0e0;
       --clr-neutral-700: #333333;
       --clr-neutral-900: #111111;
   
       --clr-success: #2ecc71;
       --clr-warning: #f39c12;
       --clr-danger: #e74c3c;
       --clr-info: #3498db;
   
       /* Typography */
       --ff-base: "Inter", Arial, Helvetica, sans-serif;
       --ff-mono: "Courier New", monospace;
   
       --fs-xs: 0.75rem;
       --fs-sm: 0.875rem;
       --fs-md: 1rem;
       --fs-lg: 1.25rem;
       --fs-xl: 1.75rem;
       --fs-xxl: 2.25rem;
   
       --fw-light: 300;
       --fw-regular: 400;
       --fw-semibold: 600;
       --fw-bold: 700;
   
       /* Spacing */
       --space-1: 0.25rem;
       --space-2: 0.5rem;
       --space-3: 1rem;
       --space-4: 1.5rem;
       --space-5: 2.5rem;
   
       /* Borders & Shadows */
       --radius-sm: 4px;
       --radius-md: 8px;
       --radius-lg: 16px;
       --radius-round: 50%;
   
       --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
       --shadow-md: 0 8px 20px rgba(0,0,0,0.15);
   
       /* Transitions */
       --transition-fast: 0.2s ease-in-out;
       --transition-normal: 0.35s ease;
   
       /* Z-index */
       --z-nav: 100;
       --z-overlay: 500;
   }
   
   /* Base Typography */
   body {
       font-family: var(--ff-base);
       font-size: var(--fs-md);
       line-height: 1.6;
       color: var(--clr-neutral-700);
       background: linear-gradient(
           to bottom,
           var(--clr-neutral-100),
           var(--clr-neutral-200)
       );
   }
   
   h1, h2, h3 {
       color: var(--clr-neutral-900);
       letter-spacing: 0.03em;
   }
   
   h1 {
       font-size: var(--fs-xxl);
   }
   
   h2 {
       font-size: var(--fs-xl);
       margin-bottom: var(--space-2);
   }
   
   h3 {
       font-size: var(--fs-lg);
   }
   
   p {
       margin-bottom: var(--space-3);
   }
   
   a {
       color: var(--clr-primary);
       text-decoration: none;
   }
   
   a:hover,
   a:focus {
       text-decoration: underline;
   }
   
   /* External links */
   a[target="_blank"]::after {
       content: " ↗";
       font-size: var(--fs-sm);
   }
   
   /* Layout (Grid & Flexbox) */
   body {
       display: grid;
       grid-template-rows: auto 1fr auto;
   }
   
   main {
       max-width: 1200px;
       margin: auto;
       padding: var(--space-4);
       display: grid;
       gap: var(--space-5);
   }
   
   /* Header & Navigation */
   header {
       background: linear-gradient(
           135deg,
           var(--clr-primary),
           var(--clr-secondary)
       );
       color: var(--clr-neutral-100);
       padding: var(--space-5);
       text-align: center;
   }
   
   header img {
       border-radius: var(--radius-round);
       margin: var(--space-3) auto;
       box-shadow: var(--shadow-md);
   }
   
   nav ul {
       display: flex;
       justify-content: center;
       gap: var(--space-3);
       list-style: none;
   }
   
   nav a {
       color: var(--clr-neutral-100);
       font-weight: var(--fw-semibold);
       transition: color var(--transition-fast);
   }
   
   nav a:hover {
       color: var(--clr-accent);
   }
   
   /* Main Content & Sections */
   section {
       background: var(--clr-neutral-100);
       padding: var(--space-4);
       border-radius: var(--radius-md);
       box-shadow: var(--shadow-sm);
   }
   
   section:first-child h2::before {
       content: "★ ";
       color: var(--clr-accent);
   }
   
   /* Aside */
   aside {
       border-left: 6px solid var(--clr-primary);
       padding: var(--space-4);
       background-color: var(--clr-neutral-200);
   }
   
   /* Tables */
   table {
       width: 100%;
       border-collapse: collapse;
       margin-top: var(--space-3);
   }
   
   caption {
       font-weight: var(--fw-semibold);
       margin-bottom: var(--space-2);
   }
   
   th {
       background-color: var(--clr-primary);
       color: white;
   }
   
   th, td {
       padding: var(--space-2);
       border: 1px solid var(--clr-neutral-300);
   }
   
   tbody tr:nth-child(even) {
       background-color: var(--clr-neutral-200);
   }
   
   tbody tr:hover {
       background-color: hsla(215, 80%, 45%, 0.1);
   }
   
   /* Form */
   form {
       display: flex;
       flex-direction: column;
       gap: var(--space-3);
   }
   
   input,
   textarea,
   select {
       padding: var(--space-2);
       border-radius: var(--radius-sm);
       border: 1px solid var(--clr-neutral-300);
   }
   
   input:focus,
   textarea:focus,
   select:focus {
       outline: 2px solid var(--clr-primary);
   }
   
   input:invalid {
       border-color: var(--clr-danger);
   }
   
   button {
       background: linear-gradient(
           to right,
           var(--clr-primary),
           var(--clr-secondary)
       );
       color: white;
       padding: var(--space-3);
       border-radius: var(--radius-md);
       border: none;
       cursor: pointer;
       transition: transform var(--transition-fast);
   }
   
   button:hover {
       transform: translateY(-2px);
   }
   
   /* Footer */
   footer {
       text-align: center;
       padding: var(--space-4);
       background-color: var(--clr-neutral-900);
       color: var(--clr-neutral-100);
   }
   
   /* Animations */
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(10px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   section {
       animation: fadeInUp 0.6s ease both;
   }
   
   /* Reduced motion */
   @media (prefers-reduced-motion: reduce) {
       * {
           animation: none !important;
           transition: none !important;
       }
   }
   
   /* Responsive Design */
   @media (min-width: 768px) {
       nav ul {
           justify-content: space-around;
       }
   
       main {
           grid-template-columns: 2fr 1fr;
       }
   
       aside {
           grid-column: 3;
       }
   }
   
   @media (min-width: 1024px) {
       main {
           grid-template-columns: repeat(3, 1fr);
       }
   
       section {
           grid-column: span 2;
       }
   }
   
   @media (min-width: 1200px) {
       body {
           font-size: 1.1rem;
       }
   }