body{margin:0;font-family:Arial,sans-serif;background:url(/images/background.jpg) no-repeat 50% fixed;background-size:cover;color:#333}.app-container{display:flex;flex-direction:column;place-items:center;min-height:100vh;max-width:100vw;background-color:rgba(255,255,255,.5)}.app-container.dark-mode{background-color:rgba(0,0,0,.7)}html{scroll-behavior:smooth}.navbar{display:flex;justify-content:space-between;align-items:center;padding:10px 10vw;background-color:rgba(255,255,255,.7);backdrop-filter:blur(10px);position:fixed;width:100%;top:0;z-index:1000;box-shadow:0 2px 5px rgba(0,0,0,.1)}.navbar.dark-mode{background-color:rgba(0,0,0,.3)}.logo{display:flex;justify-content:space-between;align-items:center;width:160px}.logo img{height:40px;width:40px;border-radius:50%}.logo strong{color:#333}.logo strong.dark-mode{color:#fff}.nav-links{display:flex;align-items:center;flex-wrap:nowrap}@media (max-width:768px){.navbar{flex-direction:row;align-items:center}.nav-links .theme-switch{margin-top:7px}.nav-links a{margin-left:0;margin-top:10px}.small-screen-menu{width:25px;margin-top:5px}}.mobile-menu{display:flex;flex-direction:column;gap:10px;padding:20px 10vw 20px 40px;position:fixed;right:-300px;top:0;bottom:0;width:260px;height:100vh;background-color:#f5f5f5;transition:all .3s ease-in-out}.mobile-menu.open{transform:translateX(-18rem)}.mobile-menu.dark-mode{background-color:#2e2614;color:#fff}.close-btn-row{justify-content:flex-start!important;padding-left:7.5rem}.nav-links a{margin-left:20px;text-decoration:none;color:#007BFF;font-weight:700;white-space:nowrap}.nav-links a.dark-mode{color:#D2B48C}.nav-links .theme-switch{margin-left:20px;width:50px;height:25px;background-color:#ccc;border-radius:25px;position:relative;cursor:pointer;transition:background-color .3s ease;flex-shrink:0;border:none;padding:0;appearance:none;-webkit-appearance:none;outline:none}.nav-links .theme-switch.switch-on{background-color:#007BFF}.nav-links .theme-switch.switch-on.dark-mode{background-color:#efc76f}.nav-links .theme-switch .switch{width:23px;height:23px;background-color:#fff;border-radius:50%;position:absolute;top:1px;left:1px;transition:left .3s ease}.nav-links .theme-switch.switch-on .switch,.nav-links .theme-switch.switch-on.dark-mode .switch{left:26px}.main-content h1,h2{color:#007BFF}.main-content h1.dark-mode,h2.dark-mode{color:#D2B48C}ul{list-style:disc;margin-left:20px}ul.dark-mode{color:#D2B48C}article{margin-top:20px}article.dark-mode{color:#D2B48C}.main-content{width:90%;max-width:1800px;margin:120px auto;padding:20px;background:rgba(255,255,255,.6);border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.1)}.main-content.dark-mode{background:rgba(0,0,0,.4);box-shadow:0 0 45px 10px rgba(245,212,111,.3);color:#fbf9f7}.intro{text-align:center;margin-bottom:40px}.intro h1{font-size:2.5em;margin-bottom:10px}.intro p{font-size:1.2em}.connect-me,.education,.interests,.latest-blog,.skills{margin-bottom:40px}.education-list{list-style:none;padding-left:1%;margin:0}.education-list li,education-list li{display:flex;align-items:center;margin-bottom:10px;font-size:1.2rem}.edu-icon{flex-shrink:0;width:32px;height:32px;display:flex;align-self:flex-start;justify-content:center;margin-right:10px;padding-top:3px}.interests ul{list-style:disc;padding-left:1%}.interests li{display:list-item;align-items:center;font-size:1.2rem}.interests li,h2{margin-bottom:10px}h2{font-size:1.8em;border-bottom:2px solid #007bff;padding-bottom:5px}.dark-mode h2{border-bottom:2px solid #d2b48c}.skills ul{list-style:none;padding:0}.skills li{background:#f0f0f0;margin:5px 0;padding:10px;border-radius:5px;font-size:1.2rem}.dark-mode .skills li{background:rgba(39,39,39,.8)}.latest-blog article{background:#f0f0f0;margin-left:20px;cursor:pointer;padding:20px;border-radius:5px;font-size:1.2rem}.dark-mode .latest-blog article{background:rgba(39,39,39,.8)}.connect-me p{font-size:1.2em;margin:5px 0}.social-icons{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:10px}.section-container{width:90%;max-width:1800px;margin:40px auto 0;padding:20px;background:rgba(255,255,255,.6);border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.1)}.dark-mode .section-container{background:rgba(0,0,0,.4);box-shadow:0 0 45px 10px rgba(245,212,111,.12)}.section-container h2{display:flex;align-items:center;gap:8px;color:#007BFF}.dark-mode .section-container h2{color:#D2B48C}.section-card{background:transparent;box-shadow:none;padding:0;margin-top:10px}.section-title{font-size:1.25rem;font-weight:600}.section-meta{opacity:.8;font-size:.92rem;margin:6px 0 10px}.section-summary{font-size:1rem}.links-list,.says-list{list-style:none;padding:0;margin:0}.says-list li{padding:8px 0;border-bottom:1px dashed rgba(0,0,0,.1)}.dark-mode .says-list li{border-bottom-color:rgba(255,255,255,.2)}.links-list li{padding:6px 0}.links-list a{text-decoration:underline}.system-overview{width:90%;max-width:1800px;margin:120px auto 0}.system-overview .overview-inner{display:grid;grid-template-columns:1fr;gap:20px}@media (min-width:900px){.system-overview .overview-inner{grid-template-columns:1fr 1fr}}@media (min-width:1200px){.system-overview .overview-inner{grid-template-columns:1fr 1fr 1fr}}.system-overview .comments-card,.system-overview .server-card,.system-overview .visitor-card{background:rgba(255,255,255,.6);border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.1);padding:16px 20px 18px}.system-overview.dark-mode .comments-card,.system-overview.dark-mode .server-card,.system-overview.dark-mode .visitor-card{background:rgba(0,0,0,.4);box-shadow:0 0 45px 10px rgba(245,212,111,.12);color:#fbf9f7}.system-overview .visitor-row{display:flex;align-items:center;gap:8px;font-size:1.05rem;margin:8px 0}.system-overview .visitor-row .visitor-location{font-size:1.2rem;font-weight:500;line-height:1.25}.system-overview .visitor-row .visitor-primary{font-size:1.5rem;font-weight:600;line-height:1.25}@media (min-width:900px){.system-overview .visitor-row .visitor-location{font-size:1.32rem}.system-overview .visitor-row .visitor-primary{font-size:1.7rem}}.system-overview .row-icon{opacity:.9}.system-overview .stat-item{margin:10px 0 14px}.system-overview .stat-label{display:flex;align-items:center;justify-content:space-between;font-size:.95rem}.system-overview .stat-label .row-icon{margin-right:8px}.system-overview .stat-value{font-weight:600}.system-overview .meter{height:10px;background:rgba(0,0,0,.08);border-radius:999px;overflow:hidden}.dark-mode .system-overview .meter{background:rgba(255,255,255,.15)}.system-overview .meter>span{display:block;height:100%;background:linear-gradient(90deg,#4facfe,#00f2fe)}.dark-mode .system-overview .meter>span,.system-overview.dark-mode .meter>span{background:linear-gradient(90deg,#D2B48C,#f5d46f)}.system-overview h2{display:flex;align-items:center;gap:8px}.system-overview .comments-list{list-style:none;margin:0;padding:0}.system-overview .comments-list li{padding:10px 0;margin:6px 0;background:transparent;font-size:.98rem}.dark-mode .system-overview .comments-list li strong{color:#D2B48C}.dark-mode .system-overview .comments-list li,.dark-mode .system-overview .comments-list li span{color:#fbf9f7}.latest-blog-section{width:90%;max-width:1800px;margin:40px auto 0;padding:20px;background:rgba(255,255,255,.6);border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.1)}.dark-mode .latest-blog-section{background:rgba(0,0,0,.4);box-shadow:0 0 45px 10px rgba(245,212,111,.12)}.latest-blog-section h2{display:flex;align-items:center;gap:8px;color:#007BFF}.dark-mode .latest-blog-section h2{color:#D2B48C}.latest-blog-section .section-title{font-size:1.25rem;font-weight:600}.latest-blog-section .section-meta{opacity:.8;font-size:.92rem;margin:6px 0 10px}.latest-blog-section .section-summary{font-size:1rem}.dark-mode .latest-blog-section .section-card,.dark-mode .latest-blog-section .section-card .section-meta,.dark-mode .latest-blog-section .section-card .section-summary,.dark-mode .latest-blog-section .section-card p{color:#fbf9f7}.latest-blog-section .blog-list{display:grid;gap:14px;margin-top:10px}.blog-list .skeleton-wrapper{display:grid;width:100%}.latest-blog-section .section-card{background:rgba(255,255,255,.55);border-radius:10px;padding:14px 16px;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;cursor:pointer;min-height:160px}.latest-blog-section .section-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12);background:rgba(255,255,255,.7)}@media (min-width:900px){.latest-blog-section .blog-list{grid-template-columns:1fr 1fr}}.dark-mode .latest-blog-section .section-card{background:rgba(0,0,0,.28);box-shadow:0 0 22px rgba(245,212,111,.08)}.dark-mode .latest-blog-section .section-card:hover{background:rgba(0,0,0,.38);box-shadow:0 0 36px rgba(245,212,111,.14)}.latest-says-section{width:90%;max-width:1800px;margin:40px auto 0;padding:20px;background:rgba(255,255,255,.6);border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.1)}.dark-mode .latest-says-section{background:rgba(0,0,0,.4);box-shadow:0 0 45px 10px rgba(245,212,111,.12)}.latest-says-section h2{display:flex;align-items:center;gap:8px;color:#007BFF}.dark-mode .latest-says-section h2{color:#D2B48C}.latest-says-section .section-card{background:transparent;box-shadow:none;padding:0;margin-top:10px}.latest-says-section .says-list{list-style:none;padding:0;margin:0}.latest-says-section .says-list li{padding:8px 0;border-bottom:1px dashed rgba(0,0,0,.1)}.dark-mode .latest-says-section .says-list li{border-bottom-color:rgba(255,255,255,.2)}.dark-mode .latest-says-section .says-list li,.dark-mode .latest-says-section .section-card,.dark-mode .section-container.friend-links .links-list a,.dark-mode .section-container.friend-links .links-list li,.dark-mode .section-container.friend-links .section-card{color:#fbf9f7}.dark-mode .section-container.friend-links .links-list a:hover{text-decoration:underline}.search-bar{display:flex;justify-content:center;align-items:center;margin-top:150px;margin-bottom:100px;width:90%;max-width:700px;transition:opacity .3s,transform .3s}.search-bar input{flex:1;padding:10px;margin-right:10px;background-color:rgba(255,255,255,.7);border:1px solid #ccc;border-radius:5px}.search-bar button{padding:10px;border:none;background-color:#007BFF;color:#fff;border-radius:5px;cursor:pointer}.dark-mode .search-bar input{background-color:#333333c9;color:#fff;border:1px solid #d2b48c}.dark-mode .search-bar button{background-color:#a77b42;color:#fff}.sidebar{flex:0 0 15vw;border-radius:5px;padding:10px;background-color:rgba(255,255,255,.6);box-shadow:0 4px 10px rgba(0,0,0,.1);min-width:200px}.dark-mode .sidebar{background-color:rgba(0,0,0,.4);box-shadow:0 0 45px 10px rgba(245,212,111,.3);color:#f9f0e6}.sidebar h3{margin:10px;color:#0056b3;font-size:1.2em}.dark-mode .sidebar h3{color:#D2B48C}.sidebar ul{list-style:none;padding:10px}.sidebar li{margin:5px 0;line-height:2}.content-switcher{flex:1;border-radius:5px;padding:10px;background-color:rgba(255,255,255,.6);box-shadow:0 4px 10px rgba(0,0,0,.1)}.dark-mode .content-switcher{background-color:rgba(0,0,0,.4);box-shadow:0 0 45px 10px rgba(245,212,111,.3);color:#fbf9f7}.tabs{display:flex;gap:10px;margin-bottom:10px}.tab{padding:10px;cursor:pointer;border-radius:4px;transition:background-color .3s}.tab.active{background-color:#007BFF;color:#fff}.dark-mode .tab.active{background-color:#a77b42;color:#fff}.content{padding:10px;border-radius:5px}.content,.dark-mode .content{background-color:rgba(255,255,255,0)}.dark-mode .content{border-color:#555;color:#fff}.blog-list{display:flex;flex-direction:column;gap:20px}.blog-item{display:flex;align-items:center;position:relative;padding:0 20px}.blog-content{background:rgba(255,255,255,.55);border-radius:10px;padding:10px;width:100%;height:150px;cursor:pointer}.blog-content h3{margin:0;font-size:1.2em}.blog-content .date{font-size:.9em;color:#888}.blog-content p{margin:5px 0}.dark-mode .blog-content{background-color:rgba(39,39,39,.8);box-shadow:0 0 10px 1px rgba(245,212,111,.3);border-color:#555;color:#f9f0e6}.dark-mode .blog-content .date{color:#bbb}.skeleton-row{background:rgba(255,255,255,.55);border-radius:10px;padding:18px 20px 22px;box-shadow:0 4px 10px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:14px;min-height:140px}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e6e6e6 37%,#f0f0f0 63%);background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite;border-radius:6px}.skeleton-title{width:55%;height:24px}.skeleton-text{width:100%;height:16px}.skeleton-text.short{width:72%}.dark-mode .skeleton-row{background:rgba(0,0,0,.35);box-shadow:0 0 20px rgba(245,212,111,.08)}.dark-mode .skeleton{background:linear-gradient(90deg,#333 25%,#2a2a2a 37%,#333 63%)}.BlogMain{display:flex;gap:20px;margin-bottom:20px;width:70vw;height:90vh}@media (max-width:1000px){.BlogMain{width:700px}}@media (max-width:800px){.BlogMain{flex-direction:column;width:90vw}.sidebar{display:none}.content-switcher{flex:0 0 9vw}}.blog-detail-container{display:flex;flex-direction:column;place-items:center;min-height:100vh;max-width:100vw;background-color:rgba(255,255,255,.5)}.blog-detail-container.dark-mode{background-color:rgba(0,0,0,.7)}.blog-detail-content{width:90%;max-width:1500px;margin-top:120px;padding:0 2% 100px;background:rgba(255,255,255,.6);border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.1);color:#333}.blog-detail-content.dark-mode{background:rgba(0,0,0,.4);box-shadow:0 0 45px 10px rgba(245,212,111,.3);color:#fbf9f7}.markdown-body{padding:0 10%;font-size:1.3rem}.markdown-body h1{font-size:2.2rem;margin:1.2em 0 .6em}.markdown-body h2{font-size:1.7rem;margin:1em 0 .5em}.markdown-body h3{font-size:1.3rem;margin:.8em 0 .4em}.blog-detail-content.dark-mode .markdown-body,.dark-mode .markdown-body{color:#fbf9f7}.dark-mode .markdown-body a{color:#9ecbff}.dark-mode .markdown-body strong{color:#fff}.dark-mode .markdown-body code{background:rgba(255,255,255,.08);color:#ffdf9e;padding:.15em .35em;border-radius:4px}.dark-mode .markdown-body pre code{background:transparent;color:#fbf9f7}.dark-mode .markdown-body blockquote{color:#e8e6e3;border-left:4px solid #d2b48c;background:rgba(255,255,255,.06)}.dark-mode .markdown-body hr{border-color:#7a6a50}.blog-detail-content.dark-mode a{color:inherit}.giscus-container{width:90%;max-width:1500px;margin:70px;padding:2%;background:rgba(255,255,255,.6);border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.1);color:#333}.giscus-container.dark-mode{background:rgba(0,0,0,.4);box-shadow:0 0 45px 10px rgba(245,212,111,.3);color:#fbf9f7}body{background-image:url(/images/background.jpg)}.skeleton{position:relative;overflow:hidden;background:linear-gradient(90deg,#eee,#f5f5f5,#eee);background-size:200% 100%;animation:skeleton-loading 1.2s ease-in-out infinite;border-radius:4px}.dark-mode .skeleton{background:linear-gradient(90deg,#333,#3a3a3a,#333)}@keyframes skeleton-loading{0%{background-position:0 0}to{background-position:-200% 0}}.skeleton-card{cursor:default}.skeleton-title{height:20px;margin-bottom:12px;width:60%}.skeleton-text{height:14px;margin-bottom:8px;width:90%}.skeleton-text.short{width:40%}