{"version":3,"sourceRoot":"","sources":["../_sass/_partials/_typography.scss","../_sass/_partials/_variables.scss","../_sass/_partials/_base.scss","../_sass/_partials/_class.scss","../_sass/_partials/_syntax-highlighting.scss","../_sass/_partials/_navbar.scss","../_sass/_partials/_masthead.scss","../_sass/_partials/_mixins.scss","../_sass/_partials/_components.scss","../_sass/_partials/_animations.scss","../_sass/_partials/_responsive.scss"],"names":[],"mappings":"AACQ;ACGR;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACjGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE;;;AAGF;EACE,aDwFiB;ECvFjB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAIA;EAAY;;AACZ;EAAY;;AACZ;EAAY;;AACZ;EAAY;;AACZ;EAAY;;AACZ;EAAY;;AACZ;EAAY;;AACZ;EAAY;;AACZ;EAAY;;;AAIhB;EACE;EACA;;;AAIF;EACE;EACA;;;AAGF;EACE;;;AAIF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAAK;;;AACL;EAAK;;;AACL;EAAK;;;AACL;EAAK;;;AAGL;EACE;EACA;;;AAIF;EACE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CA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAAiB;EAAW;EAAU;;AACtC;EAAiB;;AACjB;EAAiB;;AACjB;EAAiB;EAAW;EAAU;;AAItC;EAAiB;;AACjB;EAAiB;;AACjB;EAAiB;;AACjB;EAAiB;;AAMvB;EACE;EACA;;AAEA;EACE;;AAGE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;;AAKJ;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;AAUN;EACE;;AAEF;EACE;;AAIJ;EACE;;;AAOJ;EAEI;IACE;;EAIF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;EAEA;IACE;IACA;IACA;IACA;;;AAUV;EAEI;IACE;;EAIF;IACE;;EAEA;IACE;;EAEA;IACE;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAIJ;IACE;;;AC5SV;EACE;EACA;EACA;EACA;ECNA;;ADSA;EACE;EACA;EACA;EACA;EACA;EACA;;AAQF;AAAA;AAAA;EAGE;EACA;EACA;EACA;;AAEA;EARF;AAAA;AAAA;IASI;;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EATF;IAUI;;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EATF;IAUI;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;;AEjHR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE,YACE;EAGF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAOR;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;AAQF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAKJ;EACE;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMN;EACE;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMN;EACE;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EAxHF;IAyHI;;EAEA;AAAA;AAAA;IAGE;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAGF;EAAQ;;AACR;EAAW;;AACX;EAAW;;AAEX;EACE;EACA;;;AAKJ;EACE;EACA;EACA;;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EAAK;;AACL;EAAY;;;AAMpB;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAGF;EAZF;IAaI;;;;AAMN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAMN;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAdF;IAeI;IACA;IACA;;;;AAKJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;;ACjlBJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IAAO;;EACP;IAAK;;;AAIP;EACE;;AAGE;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;;AAOJ;AAAA;EAEE;EACA;;;AAKJ;EACE;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAKJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;;ACzDF;EACE;IAAK;;EACL;IAAK;;EACL;IAAK;;EAEL;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;;;AAKJ;EACE;IAAK;;EACL;IAAK;;EAEL;IACE;;;AAKJ;EACE;IAAK;;EAEL;IACE","sourcesContent":["// Keep icon font for social icons (CSS import, not SCSS)\n@import url(\"fonts/Icons/Icons.css\");","// ================================================\n// CSS Custom Properties – Light/Dark theme system\n// ================================================\n\n:root {\n  // --- Colors ---\n  --bg-primary: #ffffff;\n  --bg-secondary: #faf8fc;\n  --bg-surface: #ffffff;\n  --text-primary: #1e1b2e;\n  --text-secondary: #64607b;\n  --text-muted: #9490a8;\n  --accent: #7c3aed;\n  --accent-hover: #6d28d9;\n  --accent-light: #f5f3ff;\n  --accent-secondary: #f43f5e;\n  --accent-secondary-hover: #e11d48;\n  --accent-secondary-light: #fff1f2;\n  --accent-tertiary: #f59e0b;\n  --accent-tertiary-hover: #d97706;\n  --accent-tertiary-light: #fffbeb;\n  --border-color: #e8e5f0;\n  --nav-bg: rgba(255, 255, 255, 0.85);\n  --nav-border: rgba(0, 0, 0, 0.06);\n  --tag-bg: var(--accent-light);\n  --tag-color: var(--accent);\n  --code-inline-bg: #f5f3ff;\n  --code-inline-color: #3b2e6e;\n  --blockquote-bg: #fffbeb;\n  --blockquote-border: #f59e0b;\n  --blockquote-text: #92400e;\n  --footer-bg: #1e1b2e;\n  --footer-text: #c4bfda;\n  --card-bg: #ffffff;\n  --card-border: #e8e5f0;\n  --card-shadow: 0 1px 3px rgba(124, 58, 237, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);\n  --card-shadow-hover: 0 10px 25px rgba(124, 58, 237, 0.1), 0 4px 10px rgba(0, 0, 0, 0.04);\n  --masthead-overlay: rgba(30, 27, 46, 0.6);\n  --social-twitter: #1DA1F2;\n  --social-feed: #f59e0b;\n  --social-youtube: #FF0000;\n  --search-bg: #f5f3ff;\n  --search-border: #e8e5f0;\n  --link-color: #7c3aed;\n  --link-hover: #6d28d9;\n\n  // --- Spacing ---\n  --space-xs: 4px;\n  --space-sm: 8px;\n  --space-md: 16px;\n  --space-lg: 24px;\n  --space-xl: 40px;\n  --space-2xl: 64px;\n\n  // --- Radius ---\n  --radius-sm: 6px;\n  --radius-md: 10px;\n  --radius-lg: 16px;\n  --radius-full: 9999px;\n\n  // --- Transitions ---\n  --transition-fast: 150ms ease;\n  --transition-base: 250ms ease;\n  --transition-slow: 400ms ease;\n}\n\n[data-theme=\"dark\"] {\n  --bg-primary: #110f1a;\n  --bg-secondary: #1c1930;\n  --bg-surface: #1c1930;\n  --text-primary: #e8e4f0;\n  --text-secondary: #a09bb5;\n  --text-muted: #706b85;\n  --accent: #a78bfa;\n  --accent-hover: #c4b5fd;\n  --accent-light: rgba(124, 58, 237, 0.15);\n  --accent-secondary: #fb7185;\n  --accent-secondary-hover: #fda4af;\n  --accent-secondary-light: rgba(244, 63, 94, 0.12);\n  --accent-tertiary: #fbbf24;\n  --accent-tertiary-hover: #fcd34d;\n  --accent-tertiary-light: rgba(245, 158, 11, 0.12);\n  --border-color: #2d2945;\n  --nav-bg: rgba(17, 15, 26, 0.92);\n  --nav-border: rgba(255, 255, 255, 0.06);\n  --tag-bg: var(--accent-light);\n  --tag-color: var(--accent);\n  --code-inline-bg: #1c1930;\n  --code-inline-color: #e8e4f0;\n  --blockquote-bg: rgba(245, 158, 11, 0.08);\n  --blockquote-border: #fbbf24;\n  --blockquote-text: #fcd34d;\n  --footer-bg: #0a0914;\n  --footer-text: #706b85;\n  --card-bg: #1c1930;\n  --card-border: #2d2945;\n  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  --card-shadow-hover: 0 10px 25px rgba(124, 58, 237, 0.15);\n  --masthead-overlay: rgba(10, 9, 20, 0.75);\n  --search-bg: #1c1930;\n  --search-border: #2d2945;\n  --link-color: #a78bfa;\n  --link-hover: #c4b5fd;\n}\n\n// ================================================\n// SCSS Variables (for mixins/non-custom-property use)\n// ================================================\n\n$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n$font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;\n$grid-gutter-width:           30px !default;\n","// ================================================\n// Base / Reset styles\n// ================================================\n@use \"variables\" as *;\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\nbody, h1, h2, h3, h4, h5, h6,\np, blockquote, pre, hr,\ndl, dd, ol, ul, figure {\n  margin: 0;\n  padding: 0;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\nbody {\n  font-family: $font-family-base;\n  font-size: 16px;\n  line-height: 1.7;\n  color: var(--text-primary);\n  background-color: var(--bg-primary);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  transition: background-color var(--transition-base), color var(--transition-base);\n  position: relative;\n  overflow-x: hidden;\n}\n\n// --- Fluent Ribbons ---\n.deco-shapes {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: -1;\n  overflow: hidden;\n\n  svg {\n    position: absolute;\n  }\n\n  .ribbon-1 {\n    width: 1000px;\n    height: 900px;\n    top: -180px;\n    right: -250px;\n    opacity: 0.1;\n  }\n\n  .ribbon-2 {\n    width: 800px;\n    height: 700px;\n    bottom: -200px;\n    left: -250px;\n    opacity: 0.08;\n  }\n\n  .ribbon-3 {\n    width: 600px;\n    height: 500px;\n    top: 35%;\n    right: -100px;\n    opacity: 0.06;\n  }\n\n  .ribbon-4 {\n    width: 500px;\n    height: 400px;\n    top: 10%;\n    left: -80px;\n    opacity: 0.07;\n  }\n\n  .ribbon-5 {\n    width: 700px;\n    height: 300px;\n    bottom: 15%;\n    right: 5%;\n    opacity: 0.05;\n  }\n\n  .ribbon-6 {\n    width: 500px;\n    height: 350px;\n    top: 55%;\n    left: 5%;\n    opacity: 0.06;\n  }\n\n  .ribbon-7 {\n    width: 900px;\n    height: 200px;\n    top: 25%;\n    left: -50px;\n    opacity: 0.04;\n  }\n\n  .ribbon-8 {\n    width: 400px;\n    height: 400px;\n    bottom: 5%;\n    right: -50px;\n    opacity: 0.07;\n  }\n\n  .ribbon-9 {\n    width: 1000px;\n    height: 900px;\n    bottom: -180px;\n    left: -250px;\n    opacity: 0.1;\n  }\n\n  [data-theme=\"dark\"] & {\n    .ribbon-1 { opacity: 0.07; }\n    .ribbon-2 { opacity: 0.05; }\n    .ribbon-3 { opacity: 0.04; }\n    .ribbon-4 { opacity: 0.05; }\n    .ribbon-5 { opacity: 0.03; }\n    .ribbon-6 { opacity: 0.04; }\n    .ribbon-7 { opacity: 0.03; }\n    .ribbon-8 { opacity: 0.05; }\n    .ribbon-9 { opacity: 0.07; }\n  }\n}\n\nmain {\n  display: block;\n  min-height: 100vh;\n}\n\n// Images\nimg {\n  max-width: 100%;\n  vertical-align: middle;\n}\n\nfigure > img {\n  display: block;\n}\n\n// Lists – scoped to content only (not nav)\n.container ul:not(.navbar-nav):not(.lang):not(.post-list-tag):not(.listing),\n.container ol {\n  margin-left: 24px;\n}\n\n.container li > ul,\n.container li > ol {\n  margin-bottom: 0;\n}\n\n// Headings\nh1, h2, h3, h4, h5, h6 {\n  font-weight: 600;\n  line-height: 1.3;\n  color: var(--text-primary);\n  margin-top: 1.5em;\n  margin-bottom: 0.6em;\n}\n\nh1 { font-size: 2rem; }\nh2 { font-size: 1.5rem; }\nh3 { font-size: 1.25rem; }\nh4 { font-size: 1.125rem; }\n\n// Paragraphs\np {\n  margin-bottom: 1em;\n  line-height: 1.75;\n}\n\n// Links\na {\n  color: var(--link-color);\n  text-decoration: none;\n  transition: color var(--transition-fast);\n\n  &:hover {\n    color: var(--link-hover);\n  }\n}\n\n// Blockquotes\nblockquote {\n  color: var(--blockquote-text);\n  background-color: var(--blockquote-bg);\n  border-left: 4px solid var(--blockquote-border);\n  padding: var(--space-md) var(--space-lg);\n  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;\n  margin: var(--space-lg) 0;\n  font-size: 1rem;\n\n  > :last-child {\n    margin-bottom: 0;\n  }\n\n  p {\n    color: var(--blockquote-text);\n  }\n}\n\n// Code\npre, code {\n  font-family: $font-family-mono;\n  font-size: 0.875rem;\n}\n\ncode {\n  padding: 2px 6px;\n  background-color: var(--code-inline-bg);\n  color: var(--code-inline-color);\n  border-radius: var(--radius-sm);\n  font-weight: 500;\n}\n\npre {\n  padding: var(--space-md) var(--space-lg);\n  overflow-x: auto;\n  border-radius: var(--radius-md);\n  margin: var(--space-lg) 0;\n\n  > code {\n    background-color: transparent;\n    padding: 0;\n    border-radius: 0;\n    color: inherit;\n    font-weight: 400;\n  }\n}\n\n// Tables\ntable {\n  border-collapse: collapse;\n  width: 100%;\n  margin: var(--space-lg) 0;\n\n  th, td {\n    padding: var(--space-sm) var(--space-md);\n    border: 1px solid var(--border-color);\n    text-align: left;\n  }\n\n  th {\n    background-color: var(--bg-secondary);\n    font-weight: 600;\n  }\n\n  tr:hover td {\n    background-color: var(--bg-secondary);\n  }\n}\n\n// Horizontal rule\nhr {\n  border: 0;\n  border-top: 1px solid var(--border-color);\n  margin: var(--space-xl) 0;\n}\n\n// Selection\n::selection {\n  background: var(--accent);\n  color: #fff;\n}",".text-none {\n  text-decoration: none !important;\n}\n\n.min-h-150 {\n  min-height: 150px !important;\n}\n\n.min-h70 {\n  min-height: 70vh;\n}\n\n@media screen and (min-width: 768px) {\n  .min-h-sm-4 {\n    min-height: 400px !important;\n  }\n}\n\nmain {\n  min-height: 100vh;\n}\n","/**\n * Syntax highlighting styles\n */\n\ncode.highlighter-rouge {\n  color: var(--code-inline-color);\n  font-weight: 500;\n  background-color: var(--code-inline-bg);\n  padding: 2px 6px;\n  border-radius: var(--radius-sm);\n}\n\n.highlight {\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  margin: var(--space-lg) 0;\n}\n\n.highlight .hll { background-color: #333333 }\n.highlight  { background: #1E1E1E; color: #ffffff }\n.highlight  code { background: #1E1E1E; color: #ffffff }\n.highlight .c { color: #5e993e; font-style: italic; background-color: #0f140f } /* Comment */\n.highlight .err { color: #ffffff } /* Error */\n.highlight .esc { color: #ffffff } /* Escape */\n.highlight .g { color: #ffffff } /* Generic */\n.highlight .k { color: #358cd6; font-weight: bold } /* Keyword */\n.highlight .l { color: #ffffff } /* Literal */\n.highlight .n { color: #7bdcf0 } /* Name */\n.highlight .o { color: #ffffff } /* Operator */\n.highlight .x { color: #ffffff } /* Other */\n.highlight .p { color: #ffffff } /* Punctuation */\n.highlight .ch { color: #5e993e; font-style: italic; background-color: #0f140f } /* Comment.Hashbang */\n.highlight .cm { color: #5e993e; font-style: italic; background-color: #0f140f } /* Comment.Multiline */\n.highlight .cp { color: #5e993e; font-weight: bold; font-style: italic; } /* Comment.Preproc */\n.highlight .cpf { color: #5e993e; font-style: italic; background-color: #0f140f } /* Comment.PreprocFile */\n.highlight .c1 { color: #5e993e; font-style: italic;} /* Comment.Single */\n.highlight .cs { color: #5e993e; font-style: italic; background-color: #0f140f } /* Comment.Special */\n.highlight .gd { color: #ffffff } /* Generic.Deleted */\n.highlight .ge { color: #ffffff } /* Generic.Emph */\n.highlight .gr { color: #ffffff } /* Generic.Error */\n.highlight .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */\n.highlight .gi { color: #ffffff } /* Generic.Inserted */\n.highlight .go { color: #358cd6; } /* Generic.Output */\n.highlight .gp { color: #ffffff } /* Generic.Prompt */\n.highlight .gs { color: #ffffff } /* Generic.Strong */\n.highlight .gu { color: #ffffff; font-weight: bold } /* Generic.Subheading */\n.highlight .gt { color: #ffffff } /* Generic.Traceback */\n.highlight .kc { color: #358cd6; font-weight: bold } /* Keyword.Constant */\n.highlight .kd { color: #ce723b; font-weight: bold } /* Keyword.Declaration */\n.highlight .kn { color: #ce723b; font-weight: bold } /* Keyword.Namespace */\n.highlight .kp { color: #ce723b } /* Keyword.Pseudo */\n.highlight .kr { color: #ce723b; font-weight: bold } /* Keyword.Reserved */\n.highlight .kt { color: #cdcaa9; font-weight: bold } /* Keyword.Type */\n.highlight .ld { color: #ffffff } /* Literal.Date */\n.highlight .m { color: #358cd6; font-weight: bold } /* Literal.Number */\n.highlight .s { color: #ce723b } /* Literal.String */\n.highlight .na { color: #7bdcf0; font-weight: bold } /* Name.Attribute */\n.highlight .nb { color: #ffffff } /* Name.Builtin */\n.highlight .nc { color: #ffffff } /* Name.Class */\n.highlight .no { color: #358cd6; font-weight: bold } /* Name.Constant */\n.highlight .nd { color: #ffffff } /* Name.Decorator */\n.highlight .ni { color: #ffffff } /* Name.Entity */\n.highlight .ne { color: #ffffff } /* Name.Exception */\n.highlight .nf { color: #d0a342; font-weight: bold } /* Name.Function */\n.highlight .nl { color: #7bdcf0 } /* Name.Label */\n.highlight .nn { color: #3ac9b0 } /* Name.Namespace */\n.highlight .nx { color: #ffffff } /* Name.Other */\n.highlight .py { color: #ffffff } /* Name.Property */\n.highlight .nt { color: #358cd6; font-weight: bold } /* Name.Tag */\n.highlight .nv { color: #ce723b } /* Name.Variable */\n.highlight .ow { color: #ffffff } /* Operator.Word */\n.highlight .w { color: #888888 } /* Text.Whitespace */\n.highlight .mb { color: #358cd6; font-weight: bold } /* Literal.Number.Bin */\n.highlight .mf { color: #358cd6; font-weight: bold } /* Literal.Number.Float */\n.highlight .mh { color: #358cd6; font-weight: bold } /* Literal.Number.Hex */\n.highlight .mi { color: #358cd6; font-weight: bold } /* Literal.Number.Integer */\n.highlight .mo { color: #358cd6; font-weight: bold } /* Literal.Number.Oct */\n.highlight .sa { color: #0086d2 } /* Literal.String.Affix */\n.highlight .sb { color: #0086d2 } /* Literal.String.Backtick */\n.highlight .sc { color: #0086d2 } /* Literal.String.Char */\n.highlight .dl { color: #0086d2 } /* Literal.String.Delimiter */\n.highlight .sd { color: #0086d2 } /* Literal.String.Doc */\n.highlight .s2 { color: #ce723b } /* Literal.String.Double */\n.highlight .se { color: #0086d2 } /* Literal.String.Escape */\n.highlight .sh { color: #0086d2 } /* Literal.String.Heredoc */\n.highlight .si { color: #0086d2 } /* Literal.String.Interpol */\n.highlight .sx { color: #0086d2 } /* Literal.String.Other */\n.highlight .sr { color: #0086d2 } /* Literal.String.Regex */\n.highlight .s1 { color: #ce723b } /* Literal.String.Single */\n.highlight .ss { color: #0086d2 } /* Literal.String.Symbol */\n.highlight .bp { color: #ffffff } /* Name.Builtin.Pseudo */\n.highlight .fm { color: #ff0086; font-weight: bold } /* Name.Function.Magic */\n.highlight .vc { color: #ce723b } /* Name.Variable.Class */\n.highlight .vg { color: #ce723b } /* Name.Variable.Global */\n.highlight .vi { color: #ce723b } /* Name.Variable.Instance */\n.highlight .vm { color: #ce723b } /* Name.Variable.Magic */\n.highlight .il { color: #358cd6; font-weight: bold } /* Literal.Number.Integer.Long */\n\n","// ================================================\n// Navbar – Modern glassmorphism style\n// ================================================\n\n#wrapper {\n  header {\n    .navbar {\n      background-color: var(--bg-primary);\n      border-bottom: 1px solid var(--nav-border);\n      padding: 10px 0;\n      transition: background-color var(--transition-base), \n                  border-color var(--transition-base),\n                  box-shadow var(--transition-base);\n      z-index: 1030;\n\n      &.fixed-top {\n        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);\n      }\n\n      // Use flexbox container for proper alignment\n      .container {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n        gap: 12px;\n      }\n\n      // Language switcher – inline, flex shrink 0\n      .nav-lang {\n        flex-shrink: 0;\n        display: flex;\n        align-items: center;\n\n        .lang {\n          padding: 0;\n          margin: 0;\n          display: flex;\n          list-style: none;\n\n          > li {\n            a {\n              text-decoration: none;\n              color: var(--text-secondary);\n              text-transform: uppercase;\n              font-size: 0.8rem;\n              font-weight: 500;\n              letter-spacing: 0.05em;\n              transition: color var(--transition-fast);\n\n              &.en:lang(en),\n              &.fr:lang(fr) {\n                font-weight: 700;\n                color: var(--accent);\n              }\n\n              &:hover {\n                color: var(--accent);\n              }\n            }\n\n            &:first-child {\n              padding-right: 8px;\n              border-right: 2px solid var(--border-color);\n              margin-right: 8px;\n            }\n          }\n        }\n      }\n\n      // Brand / Logo – centered naturally via flex\n      .navbar-brand {\n        flex-shrink: 0;\n        padding: 0;\n        margin: 0;\n        transition: opacity var(--transition-fast);\n\n        > img {\n          height: 42px;\n          display: block;\n          transition: transform var(--transition-fast), filter var(--transition-base);\n        }\n\n        &:hover > img {\n          transform: scale(1.05);\n        }\n      }\n\n      // Toggler (mobile) – pushed to right\n      .navbar-toggler {\n        border: none;\n        padding: 6px;\n        margin-left: auto;\n        background: transparent;\n        box-shadow: none !important;\n\n        &:focus {\n          box-shadow: none;\n        }\n\n        #nav-toggler-icon {\n          width: 24px;\n          height: 24px;\n          position: relative;\n          cursor: pointer;\n          transition: 0.3s ease-in-out;\n\n          > span.nav-icon {\n            display: block;\n            position: absolute;\n            height: 2px;\n            width: 100%;\n            background-color: var(--text-primary);\n            border-radius: 4px;\n            opacity: 1;\n            left: 0;\n            transition: 0.25s ease-in-out;\n          }\n\n          &.open span.nav-icon {\n            &:nth-child(1) { top: 11px; width: 0; left: 50%; }\n            &:nth-child(2) { transform: rotate(45deg); }\n            &:nth-child(3) { transform: rotate(-45deg); }\n            &:nth-child(4) { top: 11px; width: 0; left: 50%; }\n          }\n\n          span.nav-icon {\n            &:nth-child(1) { top: 3px; }\n            &:nth-child(2) { top: 11px; }\n            &:nth-child(3) { top: 11px; }\n            &:nth-child(4) { top: 19px; }\n          }\n        }\n      }\n\n      // Nav links container\n      .navbar-collapse {\n        flex-basis: 100%;\n        flex-grow: 1;\n\n        .navbar-nav {\n          gap: 4px;\n\n          > .nav-item {\n            .nav-link {\n              color: var(--text-secondary);\n              font-weight: 500;\n              font-size: 0.95rem;\n              padding: 8px 14px;\n              border-radius: var(--radius-sm);\n              transition: color var(--transition-fast), background-color var(--transition-fast);\n              white-space: nowrap;\n\n              &:hover {\n                color: var(--accent);\n                background-color: var(--accent-light);\n              }\n            }\n\n            &.active .nav-link {\n              color: var(--accent);\n              font-weight: 600;\n            }\n          }\n\n          // Search icon – slightly smaller padding\n          > .nav-search .nav-link {\n            display: flex;\n            align-items: center;\n            padding: 8px 10px;\n          }\n\n          // Theme toggle item\n          > .nav-theme-toggle {\n            display: flex;\n            align-items: center;\n            padding-left: 6px;\n          }\n        }\n      }\n\n      // Theme toggle button\n      .theme-toggle {\n        background: none;\n        border: 2px solid var(--border-color);\n        border-radius: var(--radius-full);\n        width: 36px;\n        height: 36px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        padding: 0;\n        color: var(--text-secondary);\n        transition: all var(--transition-fast);\n\n        &:hover {\n          color: var(--accent);\n          border-color: var(--accent);\n          background-color: var(--accent-light);\n        }\n\n        .icon-sun {\n          display: none;\n        }\n\n        .icon-moon {\n          display: block;\n        }\n      }\n    }\n  }\n}\n\n// Dark mode: show sun, hide moon + invert logo\n[data-theme=\"dark\"] {\n  #wrapper header .navbar .theme-toggle {\n    .icon-sun {\n      display: block;\n    }\n    .icon-moon {\n      display: none;\n    }\n  }\n\n  #wrapper header .navbar .navbar-brand > img {\n    filter: brightness(0) invert(0.85);\n  }\n}\n\n// ==================\n// Mobile (< lg)\n// ==================\n@media screen and (max-width: 991px) {\n  #wrapper header .navbar {\n    .container {\n      position: relative;\n    }\n\n    // Collapse dropdown\n    .navbar-collapse {\n      position: absolute;\n      width: 100%;\n      top: 100%;\n      left: 0;\n      background-color: var(--nav-bg);\n      backdrop-filter: blur(12px);\n      -webkit-backdrop-filter: blur(12px);\n      border-bottom: 1px solid var(--nav-border);\n      padding: var(--space-md);\n      border-radius: 0 0 var(--radius-md) var(--radius-md);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n      z-index: 1031;\n\n      .navbar-nav {\n        gap: 2px;\n\n        > .nav-theme-toggle {\n          margin-top: 8px;\n          padding-top: 8px;\n          padding-left: 0;\n          border-top: 1px solid var(--border-color);\n        }\n      }\n    }\n  }\n}\n\n// ==================\n// Desktop (>= lg)\n// ==================\n@media screen and (min-width: 992px) {\n  #wrapper header .navbar {\n    .container {\n      flex-wrap: nowrap;\n    }\n\n    // Collapse takes remaining space, pushes nav to right\n    .navbar-collapse {\n      flex-basis: auto;\n\n      .navbar-nav {\n        gap: 2px;\n\n        > .nav-item .nav-link {\n          position: relative;\n\n          &::after {\n            content: '';\n            position: absolute;\n            bottom: 2px;\n            left: 14px;\n            right: 14px;\n            height: 2px;\n            background-color: var(--accent);\n            transform: scaleX(0);\n            transition: transform var(--transition-base);\n            border-radius: 1px;\n          }\n\n          &:hover::after {\n            transform: scaleX(1);\n          }\n        }\n\n        > .nav-item.active .nav-link::after {\n          transform: scaleX(1);\n        }\n      }\n    }\n  }\n}\n","// ================================================\n// Masthead / Hero sections\n// ================================================\n@use \"mixins\" as *;\n\n.masthead {\n  margin-bottom: var(--space-2xl);\n  background: no-repeat center center;\n  background-color: var(--bg-secondary);\n  position: relative;\n  @include background-cover;\n\n  .overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    background: linear-gradient(\n      to bottom,\n      rgba(15, 23, 42, 0.5) 0%,\n      rgba(15, 23, 42, 0.75) 50%,\n      rgba(15, 23, 42, 0.85) 100%\n    );\n  }\n\n  .page-heading,\n  .post-heading,\n  .site-heading {\n    padding: 120px 0 80px;\n    color: #fff;\n    position: relative;\n    z-index: 1;\n\n    @media only screen and (min-width: 768px) {\n      padding: 160px 0 100px;\n    }\n  }\n\n  .page-heading {\n    h1 {\n      font-weight: 800;\n      font-size: 2.5rem;\n      letter-spacing: -0.02em;\n      color: #fff;\n      text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);\n\n      @media (min-width: 768px) {\n        font-size: 3.5rem;\n      }\n    }\n\n    .subheading {\n      font-weight: 400;\n      line-height: 1.5;\n      display: block;\n      margin: var(--space-md) 0 var(--space-lg);\n      color: rgba(255, 255, 255, 0.92);\n      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);\n      font-size: 1.1rem;\n\n      @media (min-width: 768px) {\n        font-size: 1.3rem;\n      }\n    }\n  }\n\n  .post-heading {\n    h1 {\n      font-weight: 800;\n      font-size: 1.8rem;\n      letter-spacing: -0.02em;\n      color: #fff;\n      text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);\n\n      @media (min-width: 768px) {\n        font-size: 2.5rem;\n      }\n    }\n\n    .subheading {\n      font-weight: 400;\n      line-height: 1.5;\n      display: block;\n      margin: var(--space-md) 0 var(--space-lg);\n      color: rgba(255, 255, 255, 0.92);\n      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);\n      font-size: 1rem;\n\n      @media (min-width: 768px) {\n        font-size: 1.15rem;\n      }\n    }\n\n    .meta {\n      font-weight: 300;\n      color: rgba(255, 255, 255, 0.85);\n      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n      font-size: 0.9rem;\n\n      a {\n        color: #fff;\n      }\n    }\n  }\n\n  .credits {\n    position: absolute;\n    bottom: 10px;\n    right: 0;\n    z-index: 1;\n\n    > span {\n      color: rgba(255, 255, 255, 0.7);\n      padding: 0 var(--space-md);\n      font-size: 0.8rem;\n\n      > a {\n        color: rgba(255, 255, 255, 0.9);\n      }\n    }\n  }\n}","@use \"variables\" as *;\n\n@mixin background-cover() {\n  background-size: cover;\n}\n\n@mixin serif-font() {\n  font-family: 'Georgia', 'Times New Roman', serif;\n}\n\n@mixin sans-serif-font() {\n  font-family: $font-family-base;\n}","// ================================================\n// Components – Cards, Tags, Footer, Search, etc.\n// ================================================\n\n// --- Post Cards ---\n.post-card-link-wrap {\n  display: block;\n  cursor: pointer;\n\n  &:hover .post-card {\n    box-shadow: var(--card-shadow-hover);\n    transform: translateY(-2px);\n    border-color: var(--accent);\n  }\n\n  &:hover .post-card-title {\n    color: var(--accent);\n  }\n}\n\n.post-card {\n  background: \n    radial-gradient(ellipse 150px 120px at 55% 45%, rgba(124, 58, 237, 0.04) 0%, transparent 70%),\n    radial-gradient(ellipse 100px 80px at 35% 60%, rgba(245, 158, 11, 0.03) 0%, transparent 70%),\n    var(--card-bg);\n  border: 1px solid var(--card-border);\n  border-radius: var(--radius-md);\n  padding: var(--space-lg);\n  margin-bottom: var(--space-lg);\n  box-shadow: var(--card-shadow), inset 0 0 80px -20px rgba(124, 58, 237, 0.05);\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n  transition: box-shadow var(--transition-base), \n              transform var(--transition-base),\n              border-color var(--transition-base),\n              background-color var(--transition-base);\n\n  .post-card-link {\n    text-decoration: none;\n    color: var(--text-primary);\n\n    &:hover {\n      color: var(--accent);\n    }\n  }\n\n  .post-card-title {\n    font-weight: 700;\n    font-size: 1.25rem;\n    margin-top: 0;\n    margin-bottom: var(--space-sm);\n    line-height: 1.4;\n    transition: color var(--transition-fast);\n  }\n\n  .post-card-excerpt {\n    color: var(--text-secondary);\n    font-weight: 400;\n    font-size: 0.95rem;\n    line-height: 1.6;\n    margin-bottom: var(--space-md);\n  }\n\n  .post-card-link:hover .post-card-title {\n    color: var(--accent);\n  }\n}\n\n// --- Tags ---\n.post-list-tag {\n  display: flex;\n  flex-wrap: wrap;\n  list-style: none;\n  margin: 0 0 var(--space-sm) 0;\n  padding: 0;\n  gap: var(--space-sm);\n\n  li {\n    .post-tag {\n      font-weight: 500;\n      font-size: 0.8rem;\n      background-color: var(--tag-bg);\n      padding: 4px 12px;\n      color: var(--tag-color);\n      border-radius: var(--radius-full);\n      transition: all var(--transition-fast);\n      letter-spacing: 0.02em;\n      text-decoration: none;\n      display: inline-block;\n\n      &:hover {\n        background-color: var(--accent);\n        color: #fff;\n        text-decoration: none;\n      }\n    }\n  }\n}\n\n// --- Post Meta ---\n.post-meta {\n  display: block;\n  font-weight: 400;\n  font-size: 0.85rem;\n  color: var(--text-muted);\n}\n\n// --- Post List Heading ---\n.post-list-heading {\n  padding: var(--space-xl) 0 var(--space-lg);\n  font-size: 1.8rem;\n  font-weight: 700;\n  letter-spacing: -0.02em;\n  color: var(--text-primary);\n}\n\n// --- Tile Grid (Tutorials) ---\n// 3 combos on a 3-col grid:\n//   Combo 1 – full width (3 cols)\n//   Combo 2 – large (2 cols) + small (1 col)\n//   Combo 3 – small (1 col) + large (2 cols)\n.tile-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--space-lg);\n  margin-bottom: var(--space-xl);\n\n  .tile-item {\n    min-width: 0;\n\n    .post-card-link-wrap {\n      height: 100%;\n    }\n\n    .post-card {\n      height: 100%;\n      margin-bottom: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .post-card-excerpt {\n      flex: 1;\n    }\n  }\n\n  // Combo 1: full-width row\n  .tile-full {\n    grid-column: span 3;\n\n    .post-card {\n      position: relative;\n      overflow: hidden;\n\n      &::before {\n        content: '';\n        position: absolute;\n        top: -20px;\n        right: -30px;\n        width: 120px;\n        height: 120px;\n        background: linear-gradient(135deg, var(--accent) 0%, transparent 70%);\n        border-radius: 50%;\n        opacity: 0.08;\n        pointer-events: none;\n      }\n\n      &::after {\n        content: '';\n        position: absolute;\n        bottom: -15px;\n        right: 40px;\n        width: 60px;\n        height: 60px;\n        background: linear-gradient(135deg, var(--accent-secondary) 0%, transparent 70%);\n        border-radius: 50%;\n        opacity: 0.06;\n        pointer-events: none;\n      }\n    }\n  }\n\n  // Combo 2 & 3: large tile (2 cols)\n  .tile-lg {\n    grid-column: span 2;\n\n    .post-card {\n      position: relative;\n      overflow: hidden;\n\n      &::before {\n        content: '';\n        position: absolute;\n        top: -10px;\n        left: -20px;\n        width: 90px;\n        height: 90px;\n        background: linear-gradient(120deg, var(--accent-tertiary) 0%, transparent 70%);\n        border-radius: 50%;\n        opacity: 0.1;\n        pointer-events: none;\n      }\n\n      &::after {\n        content: '';\n        position: absolute;\n        bottom: -25px;\n        right: -15px;\n        width: 70px;\n        height: 70px;\n        background: linear-gradient(120deg, var(--accent) 0%, transparent 70%);\n        border-radius: 50%;\n        opacity: 0.06;\n        pointer-events: none;\n      }\n    }\n  }\n\n  // Combo 2 & 3: small tile (1 col)\n  .tile-sm {\n    grid-column: span 1;\n\n    .post-card {\n      position: relative;\n      overflow: hidden;\n\n      &::before {\n        content: '';\n        position: absolute;\n        bottom: -15px;\n        left: -15px;\n        width: 80px;\n        height: 80px;\n        background: linear-gradient(150deg, var(--accent-secondary) 0%, transparent 70%);\n        border-radius: 50%;\n        opacity: 0.07;\n        pointer-events: none;\n      }\n    }\n  }\n\n  @media (max-width: 767.98px) {\n    grid-template-columns: 1fr;\n\n    .tile-full,\n    .tile-lg,\n    .tile-sm {\n      grid-column: span 1;\n    }\n  }\n}\n\n// --- \"See All\" Button ---\n.post-all {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-sm);\n  background: var(--accent-tertiary-light);\n  padding: 12px 32px;\n  color: var(--accent-tertiary-hover);\n  font-weight: 600;\n  font-size: 0.9rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  border-radius: var(--radius-full);\n  transition: all var(--transition-base);\n  text-decoration: none;\n\n  &:hover {\n    background: var(--accent-tertiary);\n    color: #fff;\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);\n  }\n\n  .arrow_img {\n    width: 14px;\n    filter: brightness(0) invert(1);\n  }\n}\n\n// --- Post content area ---\n.post-message {\n  padding-top: var(--space-lg);\n  color: var(--text-secondary);\n  font-size: 1rem;\n\n  a {\n    font-weight: 500;\n  }\n}\n\n// --- Footer ---\n.site-footer {\n  margin-top: var(--space-2xl);\n\n  .footer-content {\n    background-color: var(--footer-bg);\n    padding: var(--space-xl) 0 var(--space-lg);\n    transition: background-color var(--transition-base);\n  }\n\n  .footer-avatar {\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    border: 3px solid rgba(255, 255, 255, 0.15);\n    transition: transform var(--transition-base);\n\n    &:hover {\n      transform: scale(1.08);\n    }\n  }\n\n  .social-group {\n    margin-top: var(--space-md);\n\n    .social-link {\n      display: flex;\n      color: var(--footer-text);\n      text-decoration: none;\n      align-items: center;\n      justify-content: center;\n      width: 42px;\n      height: 42px;\n      border-radius: var(--radius-full);\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      transition: all var(--transition-fast);\n\n      &:hover {\n        color: #fff;\n        background-color: rgba(255, 255, 255, 0.1);\n        border-color: rgba(255, 255, 255, 0.25);\n        transform: translateY(-2px);\n      }\n\n      i {\n        font-size: 20px;\n      }\n    }\n  }\n\n  .credits {\n    font-size: 0.85rem;\n    text-align: center;\n    color: var(--footer-text);\n    margin-top: var(--space-lg);\n    opacity: 0.7;\n  }\n\n  .feed { color: var(--social-feed); }\n  .twitter { color: var(--social-twitter); }\n  .youtube { color: var(--social-youtube); }\n\n  .icon-x {\n    vertical-align: middle;\n    margin-right: 4px;\n  }\n}\n\n// Inline X icon in article follow links\n.post-message .icon-x {\n  vertical-align: -2px;\n  margin-right: 2px;\n  color: var(--text-primary);\n}\n\n// --- Search ---\n#search {\n  .form-control {\n    background-color: var(--search-bg);\n    border: 2px solid var(--search-border);\n    border-radius: var(--radius-md);\n    padding: 14px 20px;\n    font-size: 1rem;\n    color: var(--text-primary);\n    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);\n\n    &::placeholder {\n      color: var(--text-muted);\n    }\n\n    &:focus {\n      border-color: var(--accent);\n      box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);\n      outline: none;\n      background-color: var(--bg-primary);\n    }\n  }\n}\n\n// --- Video / Tutorial series ---\n.tutorial-series {\n  max-height: 550px;\n  overflow-y: auto;\n  border: 1px solid var(--border-color);\n  border-radius: var(--radius-md);\n  background: var(--card-bg);\n\n  .listing {\n    padding: var(--space-md);\n    margin: 0;\n    list-style: none;\n    display: flex;\n    flex-flow: wrap;\n\n    li {\n      margin: 4px 0;\n      padding: 0;\n      width: 100%;\n\n      .video-item {\n        position: relative;\n        margin: 0 0 var(--space-md) 0;\n        display: flex;\n        text-decoration: none;\n        padding: var(--space-sm);\n        border-radius: var(--radius-sm);\n        transition: background-color var(--transition-fast);\n\n        &:hover {\n          background-color: var(--bg-secondary);\n        }\n\n        article {\n          display: flex;\n          align-items: center;\n          flex-wrap: wrap;\n        }\n\n        .icon {\n          flex: 0 0 40px;\n          display: flex;\n          align-items: center;\n          padding: 0 8px 0 0;\n\n          svg {\n            width: 28px;\n            height: 28px;\n            fill: var(--text-muted);\n            transition: all var(--transition-fast);\n          }\n        }\n\n        &:hover .icon svg {\n          fill: var(--accent);\n        }\n\n        h3 {\n          margin: 0;\n          font-size: 0.95rem;\n          color: var(--text-primary);\n          font-weight: 600;\n        }\n\n        p {\n          margin: 4px 0 0 0;\n          color: var(--text-muted);\n          font-size: 0.85rem;\n        }\n      }\n\n      &.active .video-item {\n        background-color: var(--accent-light);\n\n        h3 { color: var(--accent); }\n        .icon svg { fill: var(--accent); }\n      }\n    }\n  }\n}\n\n.video_wrapper {\n  width: 100%;\n  > iframe {\n    display: block;\n    margin: 0 auto;\n    width: 100%;\n    height: 300px;\n    border-radius: var(--radius-md);\n    border: none;\n\n    @media (min-width: 768px) {\n      height: 400px;\n    }\n\n    @media (min-width: 1366px) {\n      height: 550px;\n    }\n  }\n}\n\n// --- Thumbnail (video cards) ---\n.thumbnail {\n  position: relative;\n  border-radius: var(--radius-md);\n  overflow: hidden;\n\n  img {\n    width: 100%;\n    height: auto;\n    transition: transform var(--transition-base);\n  }\n\n  &:hover img {\n    transform: scale(1.03);\n  }\n\n  .playlist {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    background: rgba(0, 0, 0, 0.7);\n    backdrop-filter: blur(4px);\n    color: #fff;\n    padding: 6px 12px;\n    border-radius: var(--radius-sm) 0 0 0;\n    font-size: 0.8rem;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n      fill: #fff;\n    }\n  }\n}\n\n// --- About page ---\n.about-section {\n  padding-top: var(--space-xl);\n\n  h1 {\n    font-size: 2.2rem;\n    font-weight: 800;\n    margin-bottom: var(--space-sm);\n  }\n\n  h2 {\n    font-size: 1.4rem;\n    font-weight: 600;\n    color: var(--accent);\n    margin-bottom: var(--space-md);\n  }\n\n  .icon-x {\n    color: var(--text-primary);\n    vertical-align: -2px;\n  }\n\n  p {\n    font-size: 1.05rem;\n    line-height: 1.8;\n    color: var(--text-secondary);\n    margin-bottom: var(--space-md);\n  }\n}\n\n.about-photo {\n  width: 220px;\n  height: 220px;\n  border-radius: 50%;\n  object-fit: cover;\n  border: 4px solid var(--accent);\n  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.2);\n  transition: transform var(--transition-base), box-shadow var(--transition-base);\n\n  &:hover {\n    transform: scale(1.05);\n    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.3);\n  }\n\n  @media (max-width: 991px) {\n    margin-top: var(--space-xl);\n    width: 180px;\n    height: 180px;\n  }\n}\n\n// --- Tool items ---\n.post-link {\n  color: var(--text-primary);\n  text-decoration: none;\n\n  h2 {\n    font-weight: 600;\n  }\n\n  h3 {\n    font-weight: 400;\n    color: var(--text-secondary);\n    font-size: 1rem;\n  }\n\n  &:hover {\n    color: var(--accent);\n  }\n}\n","// ================================================\n// Animations & Transitions\n// ================================================\n\n// Fade-in animation for page elements\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n// Apply to post cards\n.post-card {\n  animation: fadeInUp 0.5s ease both;\n\n  @for $i from 1 through 10 {\n    &:nth-child(#{$i}) {\n      animation-delay: #{$i * 0.06}s;\n    }\n  }\n}\n\n// Masthead content fade-in\n.masthead {\n  .page-heading,\n  .post-heading {\n    animation: fadeInUp 0.6s ease both;\n    animation-delay: 0.1s;\n  }\n}\n\n// Sticky nav animation\n.navbar.fixed-top {\n  animation: slideDown 0.3s ease;\n}\n\n@keyframes slideDown {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n// Smooth color transitions for theme switching\nbody,\n.site-footer .footer-content,\n.post-card,\n.navbar,\n#search .form-control,\n.tutorial-series {\n  transition: background-color var(--transition-base), \n              color var(--transition-base),\n              border-color var(--transition-base);\n}\n","// ================================================\n// Responsive overrides\n// ================================================\n\n// --- Small screens (mobile) ---\n@media screen and (max-width: 767px) {\n  h1 { font-size: 1.6rem; }\n  h2 { font-size: 1.3rem; }\n  h3 { font-size: 1.1rem; }\n  \n  .container {\n    padding-left: var(--space-md);\n    padding-right: var(--space-md);\n  }\n\n  .post-list-heading {\n    font-size: 1.5rem;\n    padding: var(--space-lg) 0;\n  }\n\n  .post-card {\n    padding: var(--space-md);\n  }\n}\n\n// --- Medium screens (tablet+) ---\n@media screen and (min-width: 768px) {\n  h1 { font-size: 2rem; }\n  h2 { font-size: 1.5rem; }\n\n  .post-list-heading {\n    font-size: 2rem;\n  }\n}\n\n// --- Large screens (desktop) ---\n@media screen and (min-width: 1366px) {\n  h1 { font-size: 2.2rem; }\n\n  .tutorial-series {\n    height: 550px;\n  }\n}\n"],"file":"main.css"}