/* ===== Fonts ===== */
@font-face {
    font-family: IBM Plex Mono;
    font-weight: 400;
    font-display: swap;
    src: url(/_build/assets/ibm-plex-mono-latin-400-normal-DT5Ssy3Y.woff2) format('woff2');
}

/* ===== Variables ===== */
:root {
    --bg: #101010;
    --bg-elevated: #000000;
    --border: #1f1f1f;
    --text: #ffffff;
    --muted: #8b8b8b;
    --subtle: #5c5c5c;
    --faint: #4a4a4a;
    --accent: #0f0;
    --s1: .5rem;
    --s2: 1rem;
    --s3: 1.5rem;
    --s4: 2rem;
    --s6: 3rem;
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font:1em/1.6 IBM Plex Mono,monospace;color:var(--text);background:var(--bg);min-height:100vh}
a{color:inherit;text-decoration:none;transition:color .15s}
a:hover{color:var(--text)}
h1,h2{font-weight:400;line-height:1.3;letter-spacing:-.02em}
h1{font-size:2.25rem;letter-spacing:-.03em}
code,pre{font:inherit;color:var(--subtle);line-height:1.5}
::selection{background:var(--text);color:var(--bg)}

/* ===== Layout ===== */
.page-border{border:2px solid var(--border);margin:0 var(--s6);min-height:100vh}
.container{max-width:1280px;margin:0 auto;padding:0 var(--s3)}
@media(max-width:768px){.page-border{border:none;margin:0}}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:100;background:rgba(16,16,16,.95);border-bottom:2px solid var(--border);backdrop-filter:blur(10px)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) 0}
.nav-logo{font-size:1.125rem;letter-spacing:-.05em}
.nav-links{display:flex;gap:var(--s4);list-style:none;font-size:.875rem;color:var(--muted);align-items:center}
.nav-link{color:var(--subtle);transition:color .15s;text-decoration:none}
#contact-btn{font-size:1.125rem}
.nav-link:hover{color:var(--text)}

/* Breadcrumb Navigation */
.nav-breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:1.125rem;letter-spacing:-.05em}
.breadcrumb-item.muted{color:var(--muted)}
.nav-separator{color:var(--subtle);opacity:0.6}
.nav-current{color:var(--muted);font-weight:400}

/* Project Status in Header */
.project-status-header{display:flex;align-items:center;gap:var(--s1)}
.project-status-header .status-indicator{width:8px;height:8px;border-radius:50%}
.project-status-header .status-text{font-size:.875rem;color:var(--muted);text-transform:lowercase}

/* ===== Dropdown ===== */
.dropdown{position:relative}
.dropdown-content{display:none;position:absolute;top:100%;right:0;margin-top:var(--s2);background:var(--bg);border:2px solid var(--border);border-radius:.5rem;min-width:280px;max-width:calc(100vw - 2rem);padding:var(--s3);box-shadow:0 10px 40px rgba(0,0,0,.5);z-index:200}
.dropdown.active .dropdown-content{display:block;animation:dropdownSlide .2s ease}
.dropdown-header{font-size:.875rem;color:var(--text);margin-bottom:var(--s2);font-weight:500}
.dropdown-content a{display:block;padding:var(--s2) 0;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border);transition:color .15s;word-break:break-word}
.dropdown-content a:last-child{border-bottom:none}
.dropdown-content a:hover{color:var(--muted)}
.dropdown-text{padding:var(--s2) 0;color:var(--subtle);font-size:.875rem}
.dropdown-divider{height:1px;background:var(--border);margin:var(--s2) 0}
@keyframes dropdownSlide{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* ===== Hero ===== */
.hero{max-width:900px;padding:8rem 0 var(--s6)}
.hero-version{font-size:.875rem;color:var(--subtle);margin-bottom:.5rem}
.hero-title{margin-bottom:.5rem;line-height:1.2}
.hero-description{font-size:1rem;color:var(--muted);max-width:700px;margin-bottom:var(--s4)}

/* ===== Button ===== */
.btn{display:inline-flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s3);font-size:.875rem;border:2px solid var(--border);border-radius:.25rem;background:transparent;color:var(--text);cursor:pointer;transition:all .15s}
.btn-primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn-primary:hover{background:var(--muted);border-color:var(--muted)}

/* ===== Tabs ===== */
/* ===== Tabs ===== */
[data-tabs]{background:#171717;border:1px solid #272727;border-radius:.5rem;overflow:hidden}
.tabs-list{display:flex;gap:var(--s3);padding:0 var(--s3);border-bottom:1px solid #272727;background:#171717}
[role=tab]{padding:var(--s2) 0;background:none;border:none;border-bottom:2px solid transparent;font:inherit;font-size:.875rem;color:#5a5a5a;cursor:pointer;transition:all .15s;outline:none}
[role=tab]:hover{color:#999}
[role=tab][aria-selected=true]{color:#fff;border-bottom-color:#fff;margin-bottom:-1px}
[role=tabpanel]{padding:var(--s3);color:#fff}
[role=tabpanel] pre{margin:0;overflow-x:auto}
[role=tabpanel] code{font-family:inherit;font-size:.875rem;line-height:1.6;color:#fff}
[role=tabpanel] .prompt{color:#5a5a5a;margin-right:var(--s1)}
[role=tabpanel] a{color:#fff;text-decoration:none}
[role=tabpanel] a:hover{text-decoration:underline}

/* ===== Code ===== */
.highlight{color:var(--text)}
.copy{padding:0;float:right;margin-top:-2px;background:none;border:none;font-size:1rem;color:var(--faint);opacity:.7;cursor:pointer;transition:all .15s}
.copy:hover{color:var(--muted);opacity:1}
.copy.copied{color:var(--accent);opacity:1}

/* ===== Pinned Projects ===== */
.pinned-projects{padding:var(--s6) 0;border-top:2px solid var(--border);margin-top:var(--s6)}
.pinned-projects h2{font-size:1.5rem;margin-bottom:var(--s5)}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s4)}
.project-card-wrapper{display:flex;flex-direction:column}
.project-card{display:block;position:relative;border:1px solid var(--border);border-radius:.5rem;background:var(--bg);transition:all .2s;overflow:hidden;text-decoration:none;color:inherit;height:220px;margin-bottom:.25rem}
.project-card:hover{border-color:var(--subtle)}
.project-title{font-size:1.125rem;margin:0;color:var(--text);text-align:left;text-transform:lowercase}

/* Project Preview */
.project-preview{position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;overflow:hidden}
.project-preview iframe{display:block;border:0;width:140%;height:140%;overflow:hidden;pointer-events:none;transform:scale(0.75);transform-origin:top left;filter:grayscale(40%) brightness(0.8) contrast(0.9);opacity:0.85}

/* Project Content - Overlay */
.project-content{position:absolute;bottom:0;left:0;right:0;padding:var(--s2);background:rgba(16,16,16,0.9);backdrop-filter:blur(1px);height:2.5rem;display:flex;align-items:flex-end}
.project-card p{color:var(--muted);margin-bottom:var(--s3);line-height:1.6;font-size:.875rem}

/* Project Tags */
.project-tags{display:flex;gap:var(--s1);margin-bottom:var(--s2);flex-wrap:wrap;margin-top:.5rem}
.project-tags .tag{background:var(--border);border:1px solid var(--faint);border-radius:.25rem;padding:.25rem var(--s1);font-size:.75rem;color:var(--text);font-family:inherit;letter-spacing:-.01em}
.project-card .project-tags{margin:0;flex:1}

/* Project Links */
.project-links{display:flex;gap:var(--s3)}
.project-links a{color:var(--subtle);text-decoration:none;font-size:.875rem;transition:color .15s}
.project-links a:hover{color:var(--text)}

/* ===== Features ===== */
.features{padding:var(--s6) 0;border-top:2px solid var(--border);margin-top:var(--s6)}
.features h2{font-size:1.5rem;margin-bottom:var(--s5)}
.features-list{list-style:none;display:grid;gap:var(--s4)}
.features-list li{display:flex;flex-direction:column;gap:var(--s1)}
.features-list strong{color:var(--text);font-weight:500}
.features-list span{color:var(--muted);font-size:.875rem}

/* ===== Footer ===== */
.footer{border-top:1px solid var(--border);padding:var(--s4) 0;margin-top:var(--s6);font-size:.875rem;color:var(--subtle)}
.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s3)}
.footer-links{display:flex;gap:var(--s3);list-style:none}
.footer-links a:hover{color:var(--muted)}

/* ===== Project Page ===== */
.project-content-section{padding:var(--s3) 0}

/* Project Info Section */
.project-info-section{margin-bottom:var(--s4)}
.project-status{display:flex;align-items:center;gap:var(--s1);margin-bottom:var(--s3)}
.status-indicator{width:8px;height:8px;border-radius:50%}
.status-indicator.active{background:#22c55e}
.status-indicator.in-development{background:#3b82f6}
.status-indicator.planned{background:#a855f7}
.status-indicator.on-hold{background:#f59e0b}
.status-indicator.archived{background:#6b7280}
.status-text{font-size:.875rem;color:var(--muted);text-transform:lowercase;font-family:inherit}
.project-description{margin-bottom:.5rem}
.project-description p{color:var(--muted);line-height:1.6;font-size:1rem}
.project-tags{margin-bottom:var(--s2)}
.project-meta-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.project-status-inline{margin-bottom:0}
.project-status-inline .status-text{font-size:.875rem;color:var(--muted)}
.project-links-section{display:flex;flex-direction:row;gap:var(--s2);margin-bottom:0}

/* Project Preview */
.project-iframe-container{background:#fff;border-radius:.5rem;overflow:hidden;margin-bottom:var(--s4);margin-top:0}
.project-iframe-container iframe{display:block;border:0;width:100%;height:600px;background:#fff}

/* Project Meta */
.project-meta-section{display:flex;flex-direction:column;gap:var(--s3)}
.project-links-section{display:flex;flex-direction:row;gap:var(--s2);margin-bottom:.5rem}
.project-link-item{display:inline-block;color:var(--text);text-decoration:none;transition:color .15s}
.project-link-item:hover{color:var(--muted)}

/* ===== Animations ===== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
[data-animate]{opacity:0}
[data-animate].animate-in{animation:fadeInUp .6s ease forwards}

/* ===== Responsive ===== */
/* ===== Responsive ===== */
@media(max-width:768px){
    :root{--s3:1rem}
    h1{font-size:2rem}
    .nav-links{gap:var(--s3)}
    .hero{padding:var(--s6) 0}
    .dropdown-content{right:1rem;min-width:auto;width:calc(100vw - 4rem)}
}
@media(max-width:400px){
    .dropdown-content{right:.5rem;width:calc(100vw - 3rem)}
}
@media(max-width:480px){
    .container{padding:0 var(--s2)}
}