.project-detail-page{width:100%;@media(max-width:1023px){padding-bottom: clamp(6rem,15vh,10rem);}}.project-showcase{display:flex;flex-direction:column;justify-content:center;padding:2rem 0 1rem;border-bottom:1px solid var(--color-border);background:radial-gradient(circle at top right,var(--color-glow),transparent 60%);@media(min-width:1024px){min-height: 90vh;}}.project-hero{position:relative;padding:1rem 0 0;display:flex;justify-content:center;padding:1rem;& .project-hero__content{width:100%;max-width:1200px}}.back-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--color-accent);text-decoration:none;font-family:var(--font-mono);font-size:.85rem;font-weight:600;margin-bottom:1.5rem;transition:transform .3s ease;&:hover{transform:translateX(-5px)}}.project-category{display:block;font-family:var(--font-mono);font-size:.8rem;color:var(--color-text);text-transform:uppercase;letter-spacing:.15em;margin-bottom:.5rem}.project-title{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;color:var(--color-text-heading);line-height:1.1;margin-bottom:1.5rem}.project-meta{display:flex;flex-direction:column;gap:1.25rem;@media(min-width:768px){flex-direction: row; align-items: center; justify-content: space-between;}& .project-meta-details{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}& .project-date{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.9rem;color:var(--color-text)}& .status-badge{padding:.4rem 1rem;background:var(--color-accent-dim);color:var(--color-accent);border:1px solid var(--color-accent);font-family:var(--font-mono);font-size:.7rem;font-weight:800;border-radius:4px}}.project-carousel-wrapper{position:relative;width:100%;@media(min-width:1024px){padding: 0.5rem 0 3rem;}}.project-carousel{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 5%;padding:1rem 5%;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}.carousel-item{flex:0 0 85%;scroll-snap-align:center;border-radius:12px;overflow:hidden;border:1px solid var(--color-border);transition:transform .4s ease,opacity .4s ease,border-color .4s ease,box-shadow .4s ease;opacity:.5;transform:scale(.95);cursor:pointer;@media(min-width:1024px){flex: 0 0 70%;}&.active, &:hover, &:focus-within{opacity:1;transform:scale(1);z-index:10;border-color:var(--color-accent);box-shadow:0 8px 40px rgba(16,185,129,.15)}& img{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:16/9}}.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);background:var(--color-surface);border:1px solid var(--color-border);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;color:var(--color-text);transition:all .3s ease;&:hover{background:var(--color-accent);color:var(--color-bg-base);border-color:var(--color-accent)}&.prev-arrow{left:.5rem;@media(min-width:768px){left: 1rem;}}&.next-arrow{right:.5rem;@media(min-width:768px){right: 1rem;}}}.project-layout-grid{display:grid;grid-template-columns:minmax(0,1fr);column-gap:4rem;max-width:1200px;margin:0 auto;padding:clamp(1.5rem,5vw,2.5rem)clamp(1rem,5vw,2rem);@media(min-width:1024px){grid-template-columns: minmax(0,1fr) 320px; align-items: start; padding: 2rem 2rem 0;}}.project-main-content{min-width:0;overflow:hidden}.custom-article{font-size:1.1rem;line-height:1.8;color:var(--color-text);overflow-wrap:break-word;word-break:break-word;min-width:0;max-width:100%;& h2{font-size:1.8rem;color:var(--color-text-heading);font-weight:700;background:0 0;-webkit-text-fill-color:unset;margin-top:1rem}& h3{font-size:1.4rem;color:var(--color-text-heading);margin:2rem 0 1rem}& p{margin-bottom:1.5rem}& table{display:block!important;width:fit-content!important;min-width:0!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;border-collapse:collapse;margin-bottom:1.5rem}& th, & td{padding:.6rem .75rem;border:1px solid var(--color-border);font-size:.9rem;vertical-align:middle;white-space:nowrap}& thead th{color:var(--color-accent);font-weight:700;text-align:left}& details{margin:1.25rem 0;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);overflow:hidden}& summary{color:var(--color-text-heading);opacity:1}& details>summary{padding:.75rem .9rem;background:0 0}& details>summary:hover{background:0 0}& details>div{padding:.9rem 1rem 1rem}& .hx\:overflow-x-auto.hx\:flex{margin-bottom:1.5rem!important}& .hextra-cards{margin-bottom:1.5rem!important;& .hextra-card{background:var(--color-surface)!important;border:1px solid var(--color-border)!important;border-radius:12px!important;text-decoration:none!important;box-shadow:0 4px 20px rgba(0,0,0,8%)!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important;cursor:pointer!important;& .hextra-card-icon{font-family:var(--font-sans)!important;font-size:1.05rem!important;font-weight:600!important;color:var(--color-text-heading)!important;display:flex!important;align-items:center!important;gap:.75rem!important;padding-top:1.25rem!important;padding-left:1.25rem!important;padding-right:1.25rem!important;& svg{color:var(--color-accent)!important;stroke:var(--color-accent)!important;width:1.35rem!important;height:1.35rem!important;flex-shrink:0!important;transition:transform .3s ease!important}}& .hextra-card-subtitle{font-family:var(--font-sans)!important;font-size:.88rem!important;line-height:1.6!important;color:var(--color-text)!important;padding-left:1.25rem!important;padding-right:1.25rem!important;margin-bottom:1.25rem!important;margin-top:.5rem!important}&:hover{background:color-mix(in srgb,var(--color-accent) 4%,var(--color-surface))!important;border-color:var(--color-accent)!important;transform:translateY(-4px)!important;& .hextra-card-icon svg{transform:scale(1.15)!important}}}}& ul{list-style-type:disc;padding-left:1.5rem;margin-bottom:1.5rem}& li{margin-bottom:.5rem}& strong{color:var(--color-text-heading);font-weight:600}& :not(pre)>code{font-family:var(--font-mono);background:rgba(16,185,129,8%);padding:.15em .4em;border-radius:4px;font-size:.875em;color:var(--color-accent);border:1px solid rgba(16,185,129,.2);box-shadow:none}}html.light .custom-article th,html.light .custom-article td{background:#fff;color:#1e293b;border-color:#e2e8f0}html.light .custom-article thead th{background:#f0fdf4;color:#059669;border-color:#d1fae5}html.dark .custom-article thead th{background:color-mix(in srgb,var(--color-accent) 14%,#0f172a 86%);color:#34d399;border-color:color-mix(in srgb,var(--color-accent) 18%,#1e293b 82%)}html.dark .custom-article details{background:rgba(15,23,42,.72);border-color:color-mix(in srgb,var(--color-accent) 16%,#1e293b 84%)}html.dark .custom-article details>summary{background:0 0}html.dark .custom-article details>summary:hover{background:0 0}html.light .custom-article details{background:#fff;border-color:#e2e8f0}.custom-article .hextra-steps{border-color:var(--color-border)!important;& h3:not(.no-step-marker), & h2:not(.no-step-marker){position:relative!important;&::before{top:50%!important;transform:translateY(-50%)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important}}}.custom-article .hextra-steps h3:not(.no-step-marker)::before,.custom-article .hextra-steps h2:not(.no-step-marker)::before{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface))!important;border-color:var(--color-surface)!important;color:var(--color-accent)!important;box-shadow:0 0 0 1px var(--color-border)}html.light .custom-article .hextra-steps h3:not(.no-step-marker)::before,html.light .custom-article .hextra-steps h2:not(.no-step-marker)::before{background:#f0fdf4!important;border-color:#fff!important;color:#059669!important;box-shadow:0 0 0 1px #d1fae5}html.dark .custom-article .hextra-steps h3:not(.no-step-marker)::before,html.dark .custom-article .hextra-steps h2:not(.no-step-marker)::before{background:color-mix(in srgb,var(--color-accent) 18%,#0f172a 82%)!important;border-color:#0f172a!important;color:#34d399!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--color-accent) 18%,#1e293b 82%)}.hextra-code-block{border-radius:12px;border:1px solid rgba(255,255,255,7%);background:#0d1117;box-shadow:0 8px 24px rgba(0,0,0,.4);margin:1.75rem 0;overflow:hidden;& pre{background:#0d1117!important;color:#c9d1d9!important;border:none;border-radius:0;box-shadow:none;margin:0;padding:1.1rem 1.4rem;overflow-x:auto}& code{background:0 0!important;border:none;padding:0;font-family:var(--font-mono);font-size:.875rem;line-height:1.75}& .chroma{background:#0d1117!important;color:#c9d1d9!important}& .hextra-code-filename{background:#161b22;border-bottom:1px solid rgba(255,255,255,7%);color:#8b949e;font-family:var(--font-mono);font-size:.8rem;border-radius:0}}.hextra-code-copy-btn-container{background:0 0}.hextra-code-copy-btn{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.35);border-radius:6px;color:var(--color-accent);padding:.35rem;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;backdrop-filter:none;opacity:1;&:hover{background:rgba(16,185,129,.28);border-color:var(--color-accent)}}.hextra-copy-icon,.hextra-success-icon{color:var(--color-accent);fill:none;stroke:var(--color-accent)}.sticky-sidebar{position:sticky;top:2rem;display:flex;flex-direction:column;gap:1.25rem;align-self:start;max-height:calc(100vh - 4rem);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-border)transparent;&::-webkit-scrollbar{width:6px}&::-webkit-scrollbar-track{background:0 0}&::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:10px}@media(max-width:1023px){position: static; max-height: none; overflow: visible; margin-top: 2rem;}}.sidebar-block{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:1.25rem;& h3{font-family:var(--font-mono);font-size:.9rem;color:var(--color-text-heading);text-transform:uppercase;letter-spacing:.1em;margin-top:0;margin-bottom:1.25rem;border-bottom:1px solid var(--color-border);padding-bottom:.75rem}&.project-links-block{@media(max-width:1023px){position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: rgba(3,7,18,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--color-border); border-radius: 0; box-shadow: 0 -10px 40px rgba(0,0,0,0.5); display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.75rem 1rem calc(0.75rem+env(safe-area-inset-bottom)); overflow-x: auto; scrollbar-width: none; @supports (justify-content: safe center){justify-content:safe center}&::-webkit-scrollbar{display:none}& h3,& .sidebar-hint,& .sidebar-separator,& .sidebar-note{display:none}& .sidebar-sub-section,& .project-links,& .code-buttons-grid,& .vertical-links{display:contents}& .btn-primary,& .btn-secondary{flex:none;width:auto;min-width:120px;max-width:180px;font-size:.8rem;padding:.6rem 1.25rem;white-space:nowrap}}}& .sidebar-note{@media(max-width:1023px){display: block; text-align: center; margin: 1.5rem 0 0.5rem; font-size: 0.85rem; opacity: 0.7; padding: 0 1.5rem; line-height: 1.5;}}}html.light .sidebar-block.project-links-block{@media(max-width:1023px){background: rgba(241,245,249,0.9); border-top-color: rgba(0,0,0,0.1);}}.info-list{list-style:none;padding:0;margin:0;& li{display:grid;grid-template-columns:minmax(5.75rem,.42fr)1fr;gap:.75rem;align-items:baseline;margin-bottom:.75rem;font-size:.9rem;line-height:1.45;& strong{color:var(--color-text-heading);font-size:.78rem}}}.project-links{display:flex;flex-direction:column;gap:.85rem}.code-buttons-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;@media(min-width:380px){grid-template-columns: repeat(auto-fit,minmax(120px,1fr));}}.btn-primary,.btn-secondary{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.85rem 1rem;border-radius:8px;font-weight:600;font-size:.95rem;text-decoration:none;transition:all .3s ease;cursor:pointer}.btn-small{padding:.6rem .5rem;font-size:.85rem}.btn-primary{background:var(--color-accent);color:var(--color-bg-base);border:none;&:hover{background:#0ea171;transform:translateY(-2px);box-shadow:0 10px 20px var(--color-accent-dim)}}.btn-secondary{border:1px solid var(--color-border);color:var(--color-text-heading);background:0 0;&:hover{background:var(--color-surface);border-color:var(--color-accent);color:var(--color-accent);transform:translateY(-2px)}}.btn-lang-html{border-color:color-mix(in srgb,var(--tech-html) 40%,transparent);color:var(--tech-html)}.btn-lang-html:hover{background:color-mix(in srgb,var(--tech-html) 12%,transparent);border-color:var(--tech-html);color:var(--tech-html)}.btn-lang-css{border-color:color-mix(in srgb,var(--tech-css) 40%,transparent);color:var(--tech-css)}.btn-lang-css:hover{background:color-mix(in srgb,var(--tech-css) 12%,transparent);border-color:var(--tech-css);color:var(--tech-css)}.btn-lang-js{border-color:color-mix(in srgb,var(--tech-js) 40%,transparent);color:var(--tech-js)}.btn-lang-js:hover{background:color-mix(in srgb,var(--tech-js) 12%,transparent);border-color:var(--tech-js);color:var(--tech-js)}.btn-lang-schema,.btn-lang-json{border-color:color-mix(in srgb,var(--tech-json) 40%,transparent);color:var(--tech-json)}.btn-lang-schema:hover,.btn-lang-json:hover{background:color-mix(in srgb,var(--tech-json) 12%,transparent);border-color:var(--tech-json);color:var(--tech-json)}.btn-lang-xml{border-color:color-mix(in srgb,var(--tech-xml) 40%,transparent);color:var(--tech-xml)}.btn-lang-xml:hover{background:color-mix(in srgb,var(--tech-xml) 12%,transparent);border-color:var(--tech-xml);color:var(--tech-xml)}.btn-lang-xsl{border-color:color-mix(in srgb,var(--tech-xslt) 40%,transparent);color:var(--tech-xslt)}.btn-lang-xsl:hover{background:color-mix(in srgb,var(--tech-xslt) 12%,transparent);border-color:var(--tech-xslt);color:var(--tech-xslt)}.btn-lang-sh{border-color:color-mix(in srgb,var(--tech-sh) 40%,transparent);color:var(--tech-sh)}.btn-lang-sh:hover{background:color-mix(in srgb,var(--tech-sh) 12%,transparent);border-color:var(--tech-sh);color:var(--tech-sh)}.btn-lang-xsd{border-color:color-mix(in srgb,var(--tech-xsd) 40%,transparent);color:var(--tech-xsd)}.btn-lang-xsd:hover{background:color-mix(in srgb,var(--tech-xsd) 12%,transparent);border-color:var(--tech-xsd);color:var(--tech-xsd)}.btn-lang-dtd{border-color:color-mix(in srgb,var(--tech-dtd) 40%,transparent);color:var(--tech-dtd)}.btn-lang-dtd:hover{background:color-mix(in srgb,var(--tech-dtd) 12%,transparent);border-color:var(--tech-dtd);color:var(--tech-dtd)}.btn-lang-sql{border-color:color-mix(in srgb,var(--tech-sql) 40%,transparent);color:var(--tech-sql)}.btn-lang-sql:hover{background:color-mix(in srgb,var(--tech-sql) 12%,transparent);border-color:var(--tech-sql);color:var(--tech-sql)}.btn-lang-mysql{border-color:color-mix(in srgb,var(--tech-mysql) 40%,transparent);color:var(--tech-mysql)}.btn-lang-mysql:hover{background:color-mix(in srgb,var(--tech-mysql) 12%,transparent);border-color:var(--tech-mysql);color:var(--tech-mysql)}.margin-top-large{margin-top:1.5rem!important}.vertical-links{display:flex;flex-direction:column;gap:.75rem}.btn-alt{background:rgba(16,185,129,.1)!important;color:var(--color-accent)!important;border:1px solid rgba(16,185,129,.3)!important}.btn-alt:hover{background:rgba(16,185,129,.2)!important;border-color:var(--color-accent)!important}.sidebar-hint{font-size:.75rem;color:var(--color-text-muted,#94a3b8);margin-top:-.25rem;margin-bottom:.5rem;opacity:.7;line-height:1.4}.sidebar-note{font-size:.85rem;color:var(--color-text);margin-bottom:1rem;line-height:1.5;opacity:.9}.sidebar-tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem;& li{background:var(--color-surface-brighter);border:1px solid var(--color-border);padding:.35rem .65rem;border-radius:6px;font-size:.8rem;font-family:var(--font-mono);color:var(--color-text-heading)}}.metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.metric-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:.75rem;background:var(--color-bg-base);border:1px solid var(--color-border);border-radius:8px}.metric-val{font-size:1.15rem;font-weight:700;color:var(--color-accent);font-family:var(--font-mono)}.metric-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-top:.25rem}.iframe-container{width:100%;height:75vh;max-height:700px;background-color:var(--color-surface);border-radius:0 0 12px 12px;overflow:hidden;@media(max-width:768px){height: 100%; max-height: none; border-radius: 0; flex: 1;}}.preview-iframe{width:100%;height:100%;border:none;display:block}.sidebar-separator{height:1px;background:var(--color-border);margin:1.5rem 0;width:100%;@media(max-width:1023px){display: none;}}.sidebar-sub-section{display:flex;flex-direction:column;gap:.5rem;@media(max-width:1023px){display: contents;}}.btn-playground-launch{width:100%;justify-content:center;gap:.75rem;@media(max-width:1023px){width: auto; flex: 0 0 auto;}}.sql-console-body{padding:0!important;display:flex;flex-direction:column}.sql-console-layout{display:flex;flex-direction:column;height:70vh;min-height:500px;background:var(--color-bg-base);@media(min-width:992px){flex-direction: row;}}.sql-console-editor-panel{flex:1;display:flex;flex-direction:column;border-bottom:1px solid var(--color-border);@media(min-width:992px){border-bottom: none; border-right: 1px solid var(--color-border);}}.sql-console-results-panel{flex:1;display:flex;flex-direction:column;background:var(--color-surface)}.sql-editor-header,.sql-results-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--color-surface-brighter);border-bottom:1px solid var(--color-border)}.sql-editor-title,.sql-results-title{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}#sql-query-input{flex:1;width:100%;padding:1rem;background:0 0;color:var(--color-text);font-family:var(--font-mono);font-size:.9rem;line-height:1.5;border:none;resize:none;outline:none}.sql-results-container{flex:1;padding:1rem;overflow:auto}.sql-status{font-size:.8rem;padding:.2rem .6rem;border-radius:4px}.status-loading{color:var(--color-text-muted)}.status-success{color:#10b981;background:rgba(16,185,129,.1)}.status-error{color:#ef4444;background:rgba(239,68,68,.1)}.sql-results-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:.85rem}.sql-results-table th,.sql-results-table td{padding:.5rem;border:1px solid var(--color-border);text-align:left}.sql-results-table th{background:var(--color-surface-brighter);font-weight:600;color:var(--color-text-heading)}.sql-empty-state,.sql-error{padding:2rem;text-align:center;color:var(--color-text-muted);font-size:.95rem}.sql-error{color:#ef4444;text-align:left;background:rgba(239,68,68,5%);border-radius:6px;padding:1rem}