.youtube-embed-container{width:100%;margin:2rem 0}.youtube-wrapper{background:var(--card-bg,#1a1a1a);border-radius:12px;width:100%;height:0;padding-bottom:56.25%;position:relative;overflow:hidden;box-shadow:0 10px 40px #00000026}.youtube-wrapper iframe{border-radius:12px;width:100%;height:100%;position:absolute;top:0;left:0}@media (max-width:768px){.youtube-embed-container{margin:1.5rem 0}.youtube-wrapper{border-radius:8px}}
.project-detail-container{color:#e0e0e0;scroll-behavior:smooth;background-color:#020202;min-height:100vh;font-family:Inter,sans-serif;line-height:1.6}.breadcrumb-nav{color:#888;max-width:1400px;margin:0 auto;padding:140px 40px 20px;font-size:1.1rem}.breadcrumb-nav a{color:#aaa;text-decoration:none;transition:color .3s}.breadcrumb-nav a:hover{color:var(--color-light-purple)}.breadcrumb-separator{margin:0 10px}.breadcrumb-current{color:#fff}.detail-header{justify-content:space-between;align-items:flex-end;gap:40px;max-width:1400px;margin:0 auto;padding:40px;display:flex}.header-left{flex:1}.metadata-badges{gap:15px;margin-bottom:20px;display:flex}.meta-badge{color:#fff;background:#ffffff14;border:1px solid #ffffff26;border-radius:12px;align-items:center;gap:12px;padding:8px 20px;font-size:1.7rem;font-weight:500;display:flex}.meta-badge strong{color:var(--color-light-purple)}.project-large-title{background:linear-gradient(#fff,#999);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0 0 15px;font-size:clamp(2.5rem,5vw,4.5rem);font-weight:800;line-height:1.1}.project-one-liner{color:#bbb;max-width:800px;margin:0;font-size:1.5rem}.header-right{gap:15px;padding-bottom:10px;display:flex}.action-button{border-radius:14px;align-items:center;gap:10px;padding:16px 32px;font-size:1.2rem;font-weight:700;text-decoration:none;transition:all .3s cubic-bezier(.23,1,.32,1);display:flex}.visit-btn{color:#000;background:#fff}.github-link{color:#fff;background:#ffffff0d;border:1px solid #ffffff1a}.action-button:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0006}.detail-main-layout{grid-template-columns:1fr 320px;gap:80px;max-width:1400px;margin:0 auto;padding:60px 40px 100px;display:grid}.detail-content-side{flex-direction:column;gap:100px;display:flex}.project-main-visual{aspect-ratio:16/9;cursor:pointer;background:#111;border:1px solid #ffffff0d;border-radius:30px;width:100%;transition:transform .3s;position:relative;overflow:hidden;box-shadow:0 40px 80px #0009}.project-main-visual:hover{transform:scale(1.01)}.lightbox-overlay{z-index:1000;cursor:zoom-out;background:#000000f2;justify-content:center;align-items:center;padding:40px;display:flex;position:fixed;inset:0}.lightbox-content{max-width:100%;max-height:100%;position:relative}.detail-section-title{color:#fff;letter-spacing:-.02em;margin-bottom:45px;font-size:3.5rem;font-weight:900}.detail-text{color:#e0e0e0;font-size:2rem;line-height:1.9}.arch-grid{gap:30px;display:grid}.arch-card{border:1px solid #ffffff0d;border-left:5px solid var(--color-light-purple);background:#ffffff05;border-radius:20px;padding:30px}.arch-card h4{color:var(--color-light-purple);text-transform:uppercase;letter-spacing:.2em;margin:0 0 15px;font-size:1.5rem;font-weight:800}.arch-card p{color:#fff;margin:0;font-size:2rem;line-height:1.7}.roadmap-items{flex-direction:column;gap:15px;display:flex}.roadmap-step{background:#a855f70d;border:1px solid #a855f71a;border-radius:16px;align-items:center;gap:15px;padding:20px 30px;font-size:2rem;display:flex}.roadmap-step:before{content:"●";color:var(--color-light-purple);font-size:.8rem}.detail-sidebar{position:relative}.on-this-page-card{border-left:1px solid #ffffff1a;padding:10px 0 10px 25px;position:sticky;top:140px}.nav-title{letter-spacing:.15em;color:#888;text-transform:uppercase;margin-bottom:30px;margin-left:-5px;font-size:3rem;font-weight:900}.side-nav-links{flex-direction:column;gap:22px;display:flex}.side-link{color:#888;font-size:1.7rem;font-weight:600;text-decoration:none;transition:all .3s;position:relative}.side-link:hover{color:#aaa}.side-link.active{color:#fff;font-weight:700}.side-link.active:before{content:"";background:var(--color-light-purple);width:2px;height:100%;box-shadow:0 0 10px var(--color-light-purple);position:absolute;top:50%;left:-26px;transform:translateY(-50%)}.highlight-icon{font-size:3rem}.highlight-title{color:#fff;margin:0;font-size:2.2rem;font-weight:800}.standout-grid{grid-template-columns:repeat(2,1fr);gap:30px;display:grid}.standout-card{background:linear-gradient(135deg,#a855f71a 0%,#0000 100%);border-radius:24px;padding:40px}.challenges-list{flex-direction:column;gap:25px;display:flex}.challenge-card{background:#ffffff08;border:1px solid #ffffff1a;border-radius:16px;padding:30px}.challenge-problem{color:#ff6b6b;border-bottom:1px solid #ffffff14;margin-bottom:15px;padding-bottom:15px;font-size:1.6rem}.challenge-solution{color:#69db7c;font-size:1.6rem}.challenge-problem strong,.challenge-solution strong{color:#fff;margin-right:8px}.structure-list{background:#0000004d;border-radius:12px;flex-direction:column;gap:12px;padding:25px 30px;font-family:Fira Code,Monaco,monospace;display:flex}.structure-item{color:#a5d6ff;border-bottom:1px solid #ffffff0d;padding:8px 0;font-size:1.4rem}.structure-item:last-child{border-bottom:none}.mobile-action-bar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:900;background:#0a0a0acc;border-top:1px solid #ffffff1a;gap:15px;padding:15px 20px;display:none;position:fixed;bottom:0;left:0;right:0}@media screen and (max-width:1200px){.detail-main-layout{grid-template-columns:1fr}.detail-sidebar{display:none}}@media screen and (max-width:768px){.detail-header{flex-direction:column;align-items:flex-start;padding:20px}.header-right{display:none}.mobile-action-bar{display:flex}.detail-main-layout{gap:40px;padding:0 20px 100px}.breadcrumb-nav{padding:120px 20px 15px;font-size:1rem}.project-large-title{font-size:clamp(2rem,8vw,3.5rem)}.project-one-liner{font-size:1.3rem}.detail-section-title{text-align:center;margin-bottom:25px;font-size:2.5rem}.detail-text{font-size:1.6rem;line-height:1.7}.arch-card{border-radius:14px;padding:20px}.arch-card h4{font-size:1.3rem}.arch-card p{font-size:1.6rem}.standout-grid{grid-template-columns:1fr;gap:20px}.standout-card{padding:25px}.highlight-title{font-size:1.8rem}.highlight-icon{font-size:2.5rem}.roadmap-step{padding:15px 20px;font-size:1.6rem}.challenge-card{padding:20px}.challenge-problem,.challenge-solution{font-size:1.4rem}.structure-list{padding:15px 20px}.structure-item{font-size:1.2rem}.detail-content-side{gap:60px}.meta-badge{padding:6px 14px;font-size:1.3rem}.metadata-badges{flex-wrap:wrap;gap:10px}.project-main-visual{border-radius:20px}.lightbox-overlay{padding:15px}.action-button{padding:12px 24px;font-size:1.1rem}.mobile-action-bar{gap:10px;padding:12px 15px}.mobile-action-bar .action-button{flex:1;justify-content:center;padding:12px 16px;font-size:1rem}}@media screen and (max-width:480px){.detail-header{padding:15px}.project-large-title{font-size:clamp(1.8rem,7vw,2.5rem)}.project-one-liner{font-size:1.1rem}.detail-main-layout{gap:30px;padding:0 15px 100px}.breadcrumb-nav{padding:110px 15px 10px;font-size:.9rem}.detail-section-title{margin-bottom:20px;font-size:2rem}.detail-text,.arch-card p{font-size:1.4rem}.highlight-title{font-size:1.5rem}.roadmap-step{padding:12px 15px;font-size:1.4rem}.challenge-problem,.challenge-solution{font-size:1.2rem}.detail-content-side{gap:40px}.meta-badge{gap:8px;padding:5px 10px;font-size:1.1rem}.standout-card{padding:20px}}