:root{--bg:#f2f1ed;--surface:#e6e5e0;--surface-strong:#ebeae5;--surface-light:#f7f7f4;--text:#26251e;--muted:rgba(38,37,30,0.65);--muted-strong:rgba(38,37,30,0.9);--accent:#f54e00;--error:#cf2d56;--border:rgba(38,37,30,0.1);--border-strong:rgba(38,37,30,0.2);--shadow-card:0 28px 70px rgba(0,0,0,0.14),0 14px 32px rgba(0,0,0,0.1),0 0 0 1px rgba(38,37,30,0.1);--shadow-soft:0 0 0 1px rgba(38,37,30,0.1),0 0 16px rgba(0,0,0,0.02),0 0 8px rgba(0,0,0,0.008)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:jjannon,Georgia,'Times New Roman',serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:focus,a:hover{color:var(--error);text-decoration:underline}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}
.container-fluid{padding-left:1rem;padding-right:1rem}
.page-shell{display:grid;grid-template-columns:280px minmax(0,1fr) 320px;gap:1.5rem;align-items:start;padding-top:1.5rem}
@media (max-width:1200px){.page-shell{grid-template-columns:1fr minmax(0,1fr)}
.page-shell>.page-right{order:2}
}
@media (max-width:900px){.page-shell{display:block}
.page-shell>.page-left,.page-shell>.page-right{position:relative;width:100%}
.page-left{position:relative}
}
.header-bar{display:none;justify-content:space-between;align-items:center;padding:1rem 0}
.header-bar .brand-title{font-family:CursorGothic,system-ui,sans-serif;font-size:1.125rem;letter-spacing:-.04em;font-weight:600}
.page-left{position:sticky;top:1.5rem;align-self:start}
.article-card,.card-alt,.sidebar-card{background:var(--surface);border:1px solid var(--border);border-radius:.75rem;box-shadow:var(--shadow-soft)}
.sidebar-card{padding:1rem;background: transparent;}
.brand-logo{font-family:CursorGothic,system-ui,sans-serif;font-size:1.65rem;letter-spacing:-.04em;margin-bottom:1rem}
.site-nav{display:grid;gap:.35rem}
.site-nav a{display:block;padding:.9rem 1rem;border-radius:.75rem;color:var(--text);background:rgba(255,255,255,.55);border:1px solid transparent}
.site-nav a:focus,.site-nav a:hover{border-color:var(--border-strong);color:var(--accent)}
.side-heading{margin-bottom:1rem;font-size:.95rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-strong)}
.link-cloud,.related-grid,.tag-cloud,.widget-list{list-style:none;margin:0;padding:0}
.related-grid li,.widget-list li{margin-bottom:.8rem}
.widget-list li+li{border-top:1px solid var(--border);padding-top:.8rem}
.widget-list a{color:var(--text)}
.widget-list a:hover{color:var(--accent)}
.tag-cloud{display:flex;flex-wrap:wrap;gap:.5rem}
.tag-cloud a{display:inline-flex;align-items:center;padding:.45rem .75rem;border-radius:9999px;background:rgba(255,255,255,.7);color:var(--muted-strong);border:1px solid var(--border);font-size:.85rem}
.tag-cloud a:hover{background:var(--surface-strong);color:var(--accent)}
.footer-site{padding:2rem 0 2.5rem;color:var(--muted)}
.footer-site a{color:var(--muted-strong)}
.footer-links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem}
.footer-links a{white-space:nowrap}
.section-title{margin-bottom:1rem;font-family:CursorGothic,system-ui,sans-serif;font-size:1.75rem;line-height:1.1;letter-spacing:-.05em}
.article-card{padding:1.25rem;background: transparent;}
.article-card .card-content{display:grid;gap:1rem}
.article-card h2{margin:0 0 .65rem;font-family:CursorGothic,system-ui,sans-serif;font-size:1.35rem;line-height:1.25;letter-spacing:-.04em}
.article-card h2 a{color:var(--text)}
.article-meta,.article-meta span{color:var(--muted);font-size:.92rem}
.article-summary{color:var(--muted);margin:0}
.article-card figure{margin:0}
.article-card .card-image{border-radius:.75rem;overflow:hidden}
.article-card .card-image img{width:100%;aspect-ratio:16/9;object-fit:cover}
.article-card .media-layout{display:grid;gap:1rem}
.article-card.one-image .media-layout{grid-template-columns:0.6fr 1.45fr}
.article-card.four-image .gallery-grid,.article-card.three-image .gallery-grid{display:grid;gap:.75rem}
.article-card.three-image .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.article-card.four-image .gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.article-card.four-image .gallery-grid img,.article-card.three-image .gallery-grid img{aspect-ratio:5/3;width:100%;object-fit:cover;border-radius:.75rem}
.article-card .body-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.article-card .title-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.article-card .summary-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.article-card .summary-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.article-card.no-image .media-layout{grid-template-columns:1fr}
.article-card.no-image h2{margin-bottom:.5rem}
.article-card.no-image .article-summary{margin-top:.5rem}
.article-card .meta-row{display:flex;flex-wrap:wrap;gap:1rem;font-size:.92rem}
.breadcrumbs{margin-bottom:1rem;font-size:.95rem;color:var(--muted)}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--accent)}
.article-body{margin-top:1.5rem;color:var(--muted-strong)}
.article-body h3{margin-top:1.75rem;font-family:CursorGothic,system-ui,sans-serif;font-size:1.15rem;letter-spacing:-.02em}
.article-body ol,.article-body p,.article-body ul{margin-bottom:1rem}
.article-body img{border-radius:.75rem;margin:1rem 0}
.tag-list{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.tag-list a{padding:.55rem .85rem;background:var(--surface-strong);border-radius:9999px;font-size:.9rem;color:var(--muted-strong)}
.tag-list a:hover{color:var(--accent)}
.related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.related-card{display:block;overflow:hidden;border-radius:5px;background:var(--surface-light);border:1px solid var(--border)}
.related-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.related-card .related-body{padding:.9rem}
.related-card h3{margin:0;font-size:1rem;line-height:1.25}
.pagination-nav{margin-top:2rem}
.page-link-custom{border-radius:.75rem;border:1px solid var(--border);background:var(--surface-light);color:var(--text);margin:0 5px}
.active.page-link-custom,.page-link-custom:focus,.page-link-custom:hover{background:var(--surface-strong);color:var(--accent)}
.tag-archive{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem}
.tag-archive a{display:block;padding:.85rem 1rem;border-radius:.75rem;background:var(--surface-light);border:1px solid var(--border);color:var(--muted-strong)}
.tag-archive a:hover{color:var(--accent)}
.link-cloud{display:flex;flex-wrap:wrap;gap:.75rem}
.link-cloud a{display:inline-block;padding:.5rem .85rem;border-radius:9999px;background:rgba(255,255,255,.7);color:var(--muted-strong);border:1px solid var(--border)}
.link-cloud a:hover{background:var(--surface-strong);color:var(--accent)}
@media (max-width:900px){.header-bar{display:flex}
.page-shell{padding-top:0}
.article-card.one-image .media-layout{grid-template-columns:1fr}
.related-grid{grid-template-columns:1fr}
}
@media (max-width:700px){.page-shell{gap:1rem}
.article-card,.sidebar-card{border-radius:1rem}
}
.carousel.fixed-height{height:400px;overflow:hidden}
.carousel.fixed-height .carousel-caption{position:absolute;bottom:1rem;left:1rem;right:auto;z-index:2;max-width:55%;display:block!important;color:var(--text)!important;text-align:left;background:rgba(255,255,255,.88);padding:1rem;border-radius:1rem}
.carousel.fixed-height .carousel-item{height:100%}
.carousel.fixed-height .carousel-item img{width:100%;height:100%;object-fit:cover}
.carousel-inner{border-radius:10px}
.carousel-item .card-img{width:100%;height:320px;background-color:#eee;background-size:cover;background-position:50%;background-repeat:no-repeat;transition:.5s all;object-fit:cover}
.page-link.active{border:0}
.related-item{ color:#555}

    .tech-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background: 
        radial-gradient(circle at 10% 20%, rgba(180, 220, 255, 0.35) 0%, transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(210, 190, 255, 0.28) 0%, transparent 45%),
        radial-gradient(circle at 40% 85%, rgba(175, 235, 240, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(200, 225, 255, 0.25) 0%, transparent 35%);
      background-size: 120% 120%;
      animation: gradientFlow 18s ease infinite;
    }

    .grid-line {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-image: 
        linear-gradient(rgba(140, 180, 230, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(140, 180, 230, 0.12) 1px, transparent 1px);
      background-size: 60px 60px;
      opacity: 0.7;
    }

    .light-dot {
      position: fixed;
      border-radius: 50%;
      filter: blur(8px);
      z-index: -1;
      animation: floatLight 12s ease-in-out infinite;
    }
    .dot1 {
      width: 180px;
      height: 180px;
      background: rgba(160, 210, 255, 0.4);
      top: 15%;
      left: 10%;
      animation-delay: 0s;
    }
    .dot2 {
      width: 220px;
      height: 220px;
      background: rgba(205, 185, 255, 0.32);
      top: 60%;
      right: 12%;
      animation-delay: -4s;
    }
    .dot3 {
      width: 140px;
      height: 140px;
      background: rgba(155, 230, 245, 0.35);
      bottom: 20%;
      left: 30%;
      animation-delay: -8s;
    }

    .tech-card {
      width: min(90%, 700px);
      padding: 60px 40px;
      background: rgba(255, 255, 255, 0.65);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(165, 200, 245, 0.3);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(130, 170, 220, 0.15);
      text-align: center;
    }

    .tech-card h1 {
      font-size: 2.4rem;
      color: #1d2b48;
      margin-bottom: 16px;
      background: linear-gradient(90deg, #2578d8, #8258e8);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .tech-card p {
      font-size: 1.05rem;
      color: #445475;
      line-height: 1.8;
    }

    @keyframes gradientFlow {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    @keyframes floatLight {
      0% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(40px, -30px) scale(1.1); }
      66% { transform: translate(-25px, 20px) scale(0.9); }
      100% { transform: translate(0, 0) scale(1); }
    }