@charset "UTF-8";
/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body { font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }

/** `main` element */
main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption { font-size: 14px; }

/** Lists */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

/** Links */
a { color: #2a7ae2; text-decoration: none; }
a:visited { color: #1756a9; }
a:hover { color: #111; text-decoration: underline; }
.social-media-list a:hover { text-decoration: none; }
.social-media-list a:hover .username { text-decoration: underline; }

/** Blockquotes */
blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }
blockquote > :last-child { margin-bottom: 0; }

/** Code formatting */
pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; }

code { padding: 1px 5px; }

pre { padding: 8px 12px; overflow-x: auto; }
pre > code { border: 0; padding-right: 0; padding-left: 0; }

/** Wrapper */
.wrapper { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }
@media screen and (max-width: 800px) { .wrapper { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } }

/** Clearfix */
.wrapper:after, .footer-col-wrapper:after { content: ""; display: table; clear: both; }

/** Icons */
.svg-icon { width: 16px; height: 16px; display: inline-block; fill: #828282; padding-right: 5px; vertical-align: text-top; }

.social-media-list li + li { padding-top: 5px; }

/** Tables */
table { margin-bottom: 30px; width: 100%; text-align: left; color: #3f3f3f; border-collapse: collapse; border: 1px solid #e8e8e8; }
table tr:nth-child(even) { background-color: #f7f7f7; }
table th, table td { padding: 10px 15px; }
table th { background-color: #f0f0f0; border: 1px solid #dedede; border-bottom-color: #c9c9c9; }
table td { border: 1px solid #e8e8e8; }

/** Site header */
.site-header { border-top: 5px solid #424242; border-bottom: 1px solid #e8e8e8; min-height: 55.95px; position: relative; }

.site-title { font-size: 26px; font-weight: 300; line-height: 54px; letter-spacing: -1px; margin-bottom: 0; float: left; }
.site-title, .site-title:visited { color: #424242; }

.site-nav { float: right; line-height: 54px; }
.site-nav .nav-trigger { display: none; }
.site-nav .menu-icon { display: none; }
.site-nav .page-link { color: #111; line-height: 1.5; }
.site-nav .page-link:not(:last-child) { margin-right: 20px; }
@media screen and (max-width: 600px) { .site-nav { position: absolute; top: 9px; right: 15px; background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; }
  .site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; }
  .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; }
  .site-nav .menu-icon > svg { fill: #424242; }
  .site-nav input ~ .trigger { clear: both; display: none; }
  .site-nav input:checked ~ .trigger { display: block; padding-bottom: 5px; }
  .site-nav .page-link { display: block; padding: 5px 10px; margin-left: 20px; }
  .site-nav .page-link:not(:last-child) { margin-right: 0; } }

/** Site footer */
.site-footer { border-top: 1px solid #e8e8e8; padding: 30px 0; }

.footer-heading { font-size: 18px; margin-bottom: 15px; }

.contact-list, .social-media-list { list-style: none; margin-left: 0; }

.footer-col-wrapper { font-size: 15px; color: #828282; margin-left: -15px; }

.footer-col { float: left; margin-bottom: 15px; padding-left: 15px; }

.footer-col-1 { width: -webkit-calc(35% - (30px / 2)); width: calc(35% - (30px / 2)); }

.footer-col-2 { width: -webkit-calc(20% - (30px / 2)); width: calc(20% - (30px / 2)); }

.footer-col-3 { width: -webkit-calc(45% - (30px / 2)); width: calc(45% - (30px / 2)); }

@media screen and (max-width: 800px) { .footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (30px / 2)); width: calc(50% - (30px / 2)); }
  .footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
@media screen and (max-width: 600px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
/** Page content */
.page-content { padding: 30px 0; flex: 1; }

.page-heading { font-size: 32px; }

.post-list-heading { font-size: 28px; }

.post-list { margin-left: 0; list-style: none; }
.post-list > li { margin-bottom: 30px; }

.post-meta { font-size: 14px; color: #828282; }

.post-link { display: block; font-size: 24px; }

/** Posts */
.post-header { margin-bottom: 30px; }

.post-title { font-size: 42px; letter-spacing: -1px; line-height: 1; }
@media screen and (max-width: 800px) { .post-title { font-size: 36px; } }

.post-content { margin-bottom: 30px; }
.post-content h2 { font-size: 32px; }
@media screen and (max-width: 800px) { .post-content h2 { font-size: 28px; } }
.post-content h3 { font-size: 26px; }
@media screen and (max-width: 800px) { .post-content h3 { font-size: 22px; } }
.post-content h4 { font-size: 20px; }
@media screen and (max-width: 800px) { .post-content h4 { font-size: 18px; } }

/** Syntax highlighting styles */
.highlight { background: #fff; }
.highlighter-rouge .highlight { background: #eef; }
.highlight .c { color: #998; font-style: italic; }
.highlight .err { color: #a61717; background-color: #e3d2d2; }
.highlight .k { font-weight: bold; }
.highlight .o { font-weight: bold; }
.highlight .cm { color: #998; font-style: italic; }
.highlight .cp { color: #999; font-weight: bold; }
.highlight .c1 { color: #998; font-style: italic; }
.highlight .cs { color: #999; font-weight: bold; font-style: italic; }
.highlight .gd { color: #000; background-color: #fdd; }
.highlight .gd .x { color: #000; background-color: #faa; }
.highlight .ge { font-style: italic; }
.highlight .gr { color: #a00; }
.highlight .gh { color: #999; }
.highlight .gi { color: #000; background-color: #dfd; }
.highlight .gi .x { color: #000; background-color: #afa; }
.highlight .go { color: #888; }
.highlight .gp { color: #555; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #aaa; }
.highlight .gt { color: #a00; }
.highlight .kc { font-weight: bold; }
.highlight .kd { font-weight: bold; }
.highlight .kp { font-weight: bold; }
.highlight .kr { font-weight: bold; }
.highlight .kt { color: #458; font-weight: bold; }
.highlight .m { color: #099; }
.highlight .s { color: #d14; }
.highlight .na { color: #008080; }
.highlight .nb { color: #0086B3; }
.highlight .nc { color: #458; font-weight: bold; }
.highlight .no { color: #008080; }
.highlight .ni { color: #800080; }
.highlight .ne { color: #900; font-weight: bold; }
.highlight .nf { color: #900; font-weight: bold; }
.highlight .nn { color: #555; }
.highlight .nt { color: #000080; }
.highlight .nv { color: #008080; }
.highlight .ow { font-weight: bold; }
.highlight .w { color: #bbb; }
.highlight .mf { color: #099; }
.highlight .mh { color: #099; }
.highlight .mi { color: #099; }
.highlight .mo { color: #099; }
.highlight .sb { color: #d14; }
.highlight .sc { color: #d14; }
.highlight .sd { color: #d14; }
.highlight .s2 { color: #d14; }
.highlight .se { color: #d14; }
.highlight .sh { color: #d14; }
.highlight .si { color: #d14; }
.highlight .sx { color: #d14; }
.highlight .sr { color: #009926; }
.highlight .s1 { color: #d14; }
.highlight .ss { color: #990073; }
.highlight .bp { color: #999; }
.highlight .vc { color: #008080; }
.highlight .vg { color: #008080; }
.highlight .vi { color: #008080; }
.highlight .il { color: #099; }

/* overrides */
.important { border-left: 0.25em solid #f0b400; /* Yellow border */ background-color: #fff8dc; /* Light yellow bg */ padding: 1em; margin: 1em 0; border-radius: 6px; color: #000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; }

.important strong { display: block; margin-bottom: 0.5em; color: #735c0f; /* Dark gold for header */ }

.doc-embed-container { border: 1px solid #ddd; border-radius: 8px; padding: 0.5rem; background: #fafafa; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); margin-bottom: 1.5rem; }

.doc-embed-container iframe { width: 100%; height: 700px; border: none; border-radius: 4px; }

.doc-embed-container .doc-link { text-align: right; margin-top: 0.5rem; }

.doc-embed-container .doc-link a { font-size: 0.9rem; color: #0366d6; text-decoration: none; }

.doc-embed-container .doc-link a:hover { text-decoration: underline; }

.box-grid { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }

.tech-box { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.25rem; background: white; border: 1px solid #e1e4e8; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); border-radius: 6px; text-decoration: none; color: #1a1a1a; font-weight: 500; transition: transform 0.15s ease, box-shadow 0.15s ease; }

.tech-box:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); }

.tech-box span { font-size: 1rem; }

/* Hide nav-trigger checkbox by default (desktop) */
#nav-trigger { display: none; }

/* Show nav-trigger (hamburger) only on small screens */
@media (max-width: 700px) { #nav-trigger { display: block; position: absolute; right: 1em; top: 1.5em; width: 2em; height: 2em; opacity: 0; z-index: 2; }
  .menu-icon { display: inline-block; } }
#scrollToTopBtn { position: fixed; bottom: 30px; right: 30px; z-index: 100; background-color: #007bff; color: white; border: none; border-radius: 50%; padding: 0.7em 0.9em; font-size: 1.5rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); cursor: pointer; display: none; /* Hidden by default */ transition: opacity 0.3s ease, transform 0.3s ease; }

#scrollToTopBtn:hover { background-color: #0056b3; transform: scale(1.1); }

.nav-items { display: flex; gap: 2rem; /* space between nav links */ align-items: center; justify-content: flex-end; /* align to the right, or use flex-start/center as needed */ height: 100%; }

.nav-item { text-decoration: none; color: #23527c; font-size: 1rem; padding: 0.5rem 0; transition: color 0.2s; }

.nav-item:hover { color: #1a1a1a; }

@media (max-width: 700px) { .nav-items { flex-direction: row !important; gap: 1.2rem; background: none; box-shadow: none; position: static; padding: 0; }
  .nav-item { display: inline-block; width: auto; padding: 0.5rem 0; } }
/* Section & Container */
#calendar { padding: 5rem 0; /* py-20 */ background-color: white; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; color: #1a202c; /* default text color */ }

#calendar .container { max-width: 1200px; margin: 0 auto; padding-left: 1.5rem; /* px-6 */ padding-right: 1.5rem; }

/* Headings */
#calendar h3 { font-size: 2.25rem; /* text-4xl */ font-weight: 700; /* font-bold */ text-align: center; margin-bottom: 3rem; /* mb-12 */ opacity: 0; animation: fadeIn 1s forwards; }

#calendar h4 { font-size: 1.5rem; /* text-2xl or text-xl */ font-weight: 600; /* font-semibold */ margin-bottom: 1.5rem; /* mb-6 or mb-4 */ }

#calendar h5 { font-weight: 600; /* font-semibold */ margin: 0 0 0.5rem 0; }

/* Fade-in animation */
@keyframes fadeIn { to { opacity: 1; } }
/* Calendar Box */
#calendar > .container > div.bg-gray-50 { background-color: #f9fafb; /* bg-gray-50 */ border-radius: 0.5rem; /* rounded-lg */ padding: 2rem; /* p-8 */ max-width: 768px; /* max-w-4xl */ margin-left: auto; margin-right: auto; }

/* Controls */
#calendar .flex { display: flex; }

#calendar .justify-between { justify-content: space-between; }

#calendar .items-center { align-items: center; }

#calendar .gap-2 { gap: 0.5rem; }

#calendar .mb-6 { margin-bottom: 1.5rem; }

/* Buttons */
#calendar button { padding: 0.5rem; border-radius: 0.375rem; /* rounded */ background-color: transparent; border: 1px solid transparent; cursor: pointer; transition: background-color 0.3s ease; }

#calendar button:hover { background-color: #e5e7eb; /* hover:bg-gray-200 */ }

/* Calendar Grid */
#calendar .grid { display: grid; }

#calendar .grid-cols-7 { grid-template-columns: repeat(7, 1fr); }

#calendar .gap-2 { gap: 0.5rem; }

#calendar .text-center { text-align: center; }

/* Day headers */
#calendar .font-semibold { font-weight: 600; }

#calendar .p-2 { padding: 0.5rem; }

#calendar .p-4 { padding: 1rem; }

#calendar .rounded { border-radius: 0.375rem; }

/* Calendar day colors */
.bg-red-100 { background-color: #fee2e2; }

.text-red-600 { color: #dc2626; }

.bg-blue-100 { background-color: #dbeafe; }

.text-blue-600 { color: #2563eb; }

.bg-green-100 { background-color: #dcfce7; }

.text-green-600 { color: #16a34a; }

.font-semibold { font-weight: 600; }

.text-xs { font-size: 0.75rem; }

/* Upcoming Events container */
#calendar > .container > .mt-12 { margin-top: 3rem; max-width: 768px; margin-left: auto; margin-right: auto; }

/* Upcoming Events Cards */
#calendar .space-y-4 > div { background-color: #f9fafb; /* bg-gray-50 */ border-radius: 0.5rem; /* rounded-lg */ padding: 1rem; /* p-4 */ display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background-color 0.3s ease; margin-bottom: 1rem; }

#calendar .space-y-4 > div:hover { background-color: #e5e7eb; }

#calendar .text-gray-600 { color: #4b5563; }

#calendar .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }

#calendar .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }

#calendar .rounded-full { border-radius: 9999px; }

#calendar .text-sm { font-size: 0.875rem; }

/* Utility classes for margin-bottom on h4 inside upcoming */
#calendar h4.mb-4 { margin-bottom: 1rem; }

.calendar-day:hover { background-color: #ffe4e6; /* a soft light pink */ cursor: pointer; transition: background-color 0.3s ease; }

.text-gray-400 { color: #9ca3af; }

.modal { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; }

.modal-content { background: white; padding: 2rem; border-radius: 0.5rem; max-width: 500px; width: 90%; position: relative; margin: auto; }

.close { position: absolute; top: 0.5rem; right: 1rem; font-size: 1.5rem; cursor: pointer; }

.tag { padding: 0.25rem 0.75rem; /* px-3 py-1 */ border-radius: 9999px; /* rounded-full */ font-size: 0.875rem; /* text-sm */ font-weight: 600; display: inline-block; }

/* Specific colors for each tag type */
.tag.workshop { background-color: #bfdbfe; /* bg-blue-100 */ color: #2563eb; /* text-blue-600 */ }

.tag.meeting { background-color: #bbf7d0; /* bg-green-100 */ color: #15803d; /* text-green-600 */ }

.tag.competition { background-color: #fecaca; /* bg-red-100 */ color: #b91c1c; /* text-red-600 */ }

.modal-link-button { display: inline-block; padding: 0.6rem 1.2rem; background-color: #1976d2; /* MUI Blue */ color: white; border-radius: 0.5rem; text-decoration: none; font-weight: 600; font-size: 1rem; box-shadow: 0 4px 6px rgba(25, 118, 210, 0.4); transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease; cursor: pointer; user-select: none; }

.modal-link-button:hover, .modal-link-button:focus { background-color: #1565c0; /* Darker MUI Blue */ box-shadow: 0 6px 12px rgba(21, 101, 192, 0.6); transform: translateY(-2px); outline: none; }

.modal-link-button:active { transform: translateY(0); box-shadow: 0 3px 6px rgba(21, 101, 192, 0.4); }

.page-wrapper { display: flex; gap: 2rem; /* space between columns */ max-width: 1200px; /* optional max width */ margin: 0 auto; /* center container */ padding: 1rem; }

/* Main content takes up about 70% of width */
.content-column { flex: 7; }

/* TOC takes about 30%, sticks to right */
.toc-column { flex: 3; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding-left: 1rem; border-left: 2px solid #eee; font-size: 0.9rem; line-height: 1.4; }

/* Style the TOC links */
.toc-column a { color: #3b82f6; /* blue */ text-decoration: none; }

.toc-column a:hover { text-decoration: underline; }

.apply-button { background-color: #4CAF50; /* Green */ color: white; border: none; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: background-color 0.3s, transform 0.2s; }

.apply-button:hover { background-color: #45a049; /* Darker green */ transform: scale(1.05); }

.apply-button:active { background-color: #3e8e41; /* Even darker green */ }

.training-grid { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }

.training-card { flex: 1 1 250px; background: #f6f8fa; /* GitHub-style gray */ border: 1px solid #d0d7de; border-radius: 8px; padding: 1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: transform 0.15s ease, box-shadow 0.15s ease; }

.training-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }

.training-card h4 { margin-top: 0; font-size: 1.1rem; }

.training-card a { color: #0969da; /* GitHub link blue */ text-decoration: none; font-weight: 500; }

.training-card a:hover { text-decoration: underline; }

.training-grid { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }

.training-card { flex: 1 1 250px; background: #f6f8fa; /* GitHub gray */ border: 1px solid #d0d7de; border-radius: 10px; padding: 1rem; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: transform 0.15s ease, box-shadow 0.15s ease; }

.training-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }

.training-card .card-icon { width: 48px; height: 48px; margin-bottom: 0.5rem; }

.training-card h4 { margin: 0.5rem 0; font-size: 1.1rem; }

.training-card a { color: #0969da; text-decoration: none; font-weight: 500; }

.training-card a:hover { text-decoration: underline; }

.copy-button { position: absolute; top: 0.5em; right: 0.5em; padding: 4px; border: none; background: #2d333b; color: #c9d1d9; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s, background 0.2s, color 0.2s; }

pre:hover .copy-button { opacity: 1; }

.copy-button:hover { background: #444c56; }

.copy-button.copied { background: #2ea043; /* green */ color: #ffffff; }

/* Section Layout */
.projects-section { padding: 5rem 0; background-color: #f9fafb; /* gray-50 */ }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* Headings */
.section-title { font-size: 2.25rem; font-weight: 700; text-align: center; margin-bottom: 3rem; }

.sub-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 2rem; text-align: center; }

/* Prototype Grid */
.prototype-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }

@media (min-width: 768px) { .prototype-grid { grid-template-columns: 1fr 1fr; } }
.prototype-card { background: #fff; border-radius: 0.5rem; padding: 1.5rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); }

.prototype-img { width: 100%; height: 12rem; object-fit: cover; border-radius: 0.375rem; margin-bottom: 1rem; }

.prototype-name { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }

.prototype-desc { color: #4b5563; /* gray-600 */ margin-bottom: 1rem; }

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.tag { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; }

.tag-red { background: #fee2e2; color: #dc2626; }

.tag-blue { background: #dbeafe; color: #2563eb; }

.tag-green { background: #d1fae5; color: #059669; }

.tag-yellow { background: #fef3c7; color: #d97706; }

.tag-purple { background: #ede9fe; color: #7c3aed; }

.tag-pink { background: #fce7f3; color: #db2777; }

/* Updates */
.updates-box { background: #fff; border-radius: 0.5rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); padding: 2rem; }

.updates { display: flex; flex-direction: column; gap: 1rem; }

.update-item { padding-left: 1rem; }

.update-header { display: flex; justify-content: space-between; align-items: flex-start; }

.update-title { font-weight: 600; font-size: 1.125rem; }

.update-text { color: #4b5563; margin-top: 0.25rem; }

.update-date { font-size: 0.875rem; color: #6b7280; }

/* Button */
.updates-btn { margin-top: 1.5rem; color: #dc2626; font-weight: 600; background: none; border: none; cursor: pointer; }

.updates-btn:hover { color: #b91c1c; }

/* Animations */
.fade-in { animation: fadeIn 1s ease-in-out forwards; }

@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }
.slide-in-left { animation: slideInLeft 0.8s ease-out forwards; }

@keyframes slideInLeft { from { transform: translateX(-30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; } }
.slide-in-right { animation: slideInRight 0.8s ease-out forwards; }

@keyframes slideInRight { from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; } }
/* Prototype Card Hover Glow */
.prototype-card { background: #fff; border-radius: 0.5rem; padding: 1.5rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); transition: box-shadow 0.3s ease, transform 0.2s ease; }

.prototype-card:hover { box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3); /* light red glow */ transform: translateY(-2px); /* subtle lift */ }

/* Weekly Updates: Red Border Line */
.update-item { padding-left: 1rem; border-left: 4px solid #991b1b; /* dark red */ }

/* Grid layout */
.box-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }

/* Tech boxes */
.tech-box { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: #fff; border-radius: 0.5rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); text-decoration: none; color: #1f2937; /* neutral dark gray */ font-weight: 600; font-size: 1rem; transition: all 0.25s ease; border: 1px solid #f3f4f6; /* light border */ }

/* Hover effect like prototype cards */
.tech-box:hover { box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25); /* red glow */ transform: translateY(-2px); color: #991b1b; /* dark red text */ border-color: #fee2e2; /* light red border */ }

/* Inner text */
.tech-box span { text-align: center; }

/* Base wrapper */
.wrapper { max-width: 900px; margin: 0 auto; padding: 4rem 2rem; box-sizing: border-box; /* makes padding not add extra width */ }

/* Mobile: tighter margins */
@media screen and (max-width: 600px) { .wrapper { max-width: 100%; /* don’t force a wide container */ padding: 1.5rem 1rem; /* less padding */ } }
/* Prevent content overflow */
img, pre, code, table { max-width: 100%; overflow-x: auto; /* let wide stuff scroll instead of breaking layout */ box-sizing: border-box; }

#home, #home h2, #home p, #home a { color: white; }

/* Make header content flexbox */
.site-header .wrapper { display: flex; justify-content: space-between; /* push logo left, nav right */ align-items: center; flex-wrap: wrap; /* allow wrapping if needed */ }

/* Logo + title styling */
.site-title { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: bold; color: inherit; }

/* By default, show nav inline */
.site-nav { display: flex; gap: 1.5rem; align-items: center; }

/* Hide the checkbox + menu icon on desktop */
.site-nav input[type="checkbox"], .site-nav label { display: none; }

/* On small screens: collapse nav */
@media (max-width: 768px) { .site-nav { display: none; /* hide by default */ flex-direction: column; gap: 1rem; width: 100%; margin-top: 1rem; }
  /* Show nav when toggled */
  #nav-trigger:checked ~ ul { display: flex; }
  /* Show hamburger button */
  .site-nav label { display: block; cursor: pointer; } }
/* Light theme (default) */
body { background: #ffffff; color: #111111; }

/* Dark theme (when toggled) */
body.dark { background: #111111; color: #f3f3f3; }

body.dark .site-header { background: #1a1a1a; color: #f3f3f3; }

body.dark .site-nav a { color: #f3f3f3; }

/* Hamburger menu icon */
.menu-icon { display: inline-block; width: 18px; height: 2px; background: #333; position: relative; vertical-align: middle; }

.menu-icon::before, .menu-icon::after { content: ''; display: block; width: 18px; height: 2px; background: #333; position: absolute; left: 0; transition: all 0.3s ease; }

.menu-icon::before { top: -6px; }

.menu-icon::after { top: 6px; }

/* Special styling for onboarding cards */
.onboarding-box { background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%); /* light blue gradient */ border: 1px solid #bae6fd; /* soft blue border */ transition: all 0.3s ease; border-radius: 14px; /* slightly more rounded */ }

.onboarding-box:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3); /* blue glow */ }