:root{--font-size:1rem;--bg-color:#ffffff;--header-bg:#f5f5f5;--text-color:#5a5a5a;--a-color:#5a5a5a;--sidebar-bg-color:#505050;--sidebar-font-color:#fff;--sidebar-hover-color:#444;--sidebar-active-color:#333;--item-bg:#fafafa;--item-border:#bdbdbd;--item-p-color:#999;--scrollbar-track-color:#252525;--scrollbar-thumb-color:#4e4e4e;--icon-color:#555;--star-color:orange;--heart-color:#ccc;--heart-active-color:#ff4757}
html.dark-mode{--bg-color:#1e1e1e;--header-bg:#2d2d2d;--text-color:#e0e0e0;--a-color:#cccccc;--sidebar-bg-color:#252525;--sidebar-font-color:#ddd;--item-bg:#333333;--item-border:#444444;--item-p-color:#aaa;--scrollbar-track-color:#1a1a1a;--scrollbar-thumb-color:#555}
html{font-size:16px}
body{margin:0;padding:0;font-size:var(--font-size);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-color);transition:background-color 0.3s,color 0.3s}
h1,h2,h3,h4,p{margin:0;padding:0}
a{text-decoration:none;color:var(--a-color);transition:color 0.2s}
a:hover,a:active{color:var(--a-color)}
html::-webkit-scrollbar{width:0.625rem}
html::-webkit-scrollbar-track{background-color:var(--scrollbar-track-color)}
html::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:0.625rem}
.container{display:flex;max-width:87.5rem;margin:0 auto;padding:0 1.25rem}
.sidebar{width:16.25rem;background-color:var(--sidebar-bg-color);color:var(--sidebar-font-color);position:fixed;height:100%;overflow-y:auto}
.content{flex-grow:1;margin-left:16.25rem;padding:1.25rem;min-width:62.5rem;scroll-behavior:smooth}
.logo{margin-top:1.25rem;font-size:2em;text-align:center}
.logo img{width:14.0625rem}
.aboutWeb{width:80%;padding:0.125rem 0;margin:0 auto;font-size:0.875rem}
.sidebar .ad{margin:1.25rem 0;height:6.25rem;background-color:#ccc}
.sidebar ul{list-style:none;padding:0;text-align:center}
.sidebar ul li{margin:0;padding:0;cursor:pointer}
.sidebar ul li a{display:block;padding:0.625rem;text-decoration:none;color:#fff;transition:background-color 0.3s;scroll-behavior:smooth}
.sidebar ul li a:hover{background-color:var(--sidebar-hover-color)}
.active{background-color:var(--sidebar-active-color)}
.sidebar::-webkit-scrollbar{width:0.3125rem}
.sidebar::-webkit-scrollbar-track{background-color:var(--scrollbar-track-color)}
.sidebar::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:0.3125rem}
.top-controls{display:flex;justify-content:flex-end;align-items:center;padding:10px 20px;background-color:var(--header-bg);margin-bottom:10px;gap:15px;border-radius:4px}
.btn-control{cursor:pointer;font-size:0.85rem;color:var(--text-color);padding:5px 12px;border:1px solid var(--item-border);border-radius:4px;background:var(--item-bg);user-select:none}
.btn-control:hover{background-color:#e0e0e0}
html.dark-mode .btn-control:hover{background-color:#444}
#notice{font-size:18px;height:22px;overflow:hidden;position:relative}
#notice li{list-style:none;padding:0}
#notice::before{content:'\1F4E3';font-size:20px;position:absolute;left:10px;top:50%;transform:translateY(-50%)}
#notice a{text-decoration:underline;text-decoration-color:rgb(243 152 0/20%);text-decoration-skip-ink:none;text-decoration-thickness:0.4rem;text-underline-offset:-0.2rem;transition:text-decoration 0}
.header{margin-bottom:1rem}
section{margin-bottom:1.25rem;position:relative;display:flex;align-items:flex-start;gap:1.25rem}
section > h1{writing-mode:vertical-lr;text-align:center;margin:0;font-size:1rem;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-weight:normal;color:var(--text-color)}
section > h1::before{content:'';position:absolute;width:2px;background-color:#bdbdbd;top:0;bottom:-22px;left:30px}
section > h1::after{content:'';position:absolute;width:10px;height:10px;background-color:white;border:2px solid #bdbdbd;border-radius:50%;left:24px;top:18px;z-index:1}
.weblink{display:flex}
.weblink > h1::before{top:0;bottom:0;left:30px}
.weblink h4{margin:10px 0 0 1.25rem}
.weblink .links-content{flex:1;display:flex;flex-direction:column}
.row,.row6{display:grid;grid-gap:1.25rem;flex-grow:1;margin-left:1.25em}
.row{grid-template-columns:repeat(4,1fr);grid-auto-rows:120px}
.row6{grid-template-columns:repeat(6,1fr)}
.row6 a{font-size:0.8em;text-align:center}
section:last-child .item a{font-size:0.8em}
.item{background-color:var(--item-bg);padding:1rem;position:relative;border-radius:5px;border:1px solid var(--item-border);overflow:hidden;transition:box-shadow 0.25s ease-out,transform 0.25s ease-out,background 0.3s}
.item:hover{box-shadow:0 1.25rem 1.25rem -1.25rem rgba(0,0,0,0.5)}
.item a{display:block;text-decoration:none}
.item .title{display:flex;margin-bottom:0.625rem}
.item a img,.item svg{height:2rem;width:2rem}
.item h4{line-height:2rem;color:var(--text-color);font-weight:bold;padding-left:0.9375rem;height:2rem;overflow:hidden}
.item p{color:var(--item-p-color);overflow:hidden;word-break:break-all;font-size:0.8em}
.heart-icon{position:absolute;top:8px;right:8px;width:18px;height:18px;cursor:pointer;z-index:10;display:none;fill:var(--heart-color);background-color:transparent !important;transition:fill 0.2s,transform 0.1s}
.heart-icon.active{fill:var(--heart-active-color)}
.heart-icon:active{transform:scale(1.2);background-color:transparent !important}
body.is-editing .item:not(.no-edit) .heart-icon{display:block}
#favorites{display:none;border-bottom:2px dashed var(--item-border);padding-bottom:20px;margin-bottom:20px}
#favorites.has-data{display:flex}
body.is-editing #favorites .item{cursor:move;border:1px dashed #999}
#links .item .heart-icon{display:none !important}
.hidden-section{display:none !important}
.other-tag{position:absolute;font-size:0.7em;top:0;right:0;padding:0.3125rem 0.625rem}
.tag-javascript{background-color:#f0db4f;color:#000}
.tag-python{background-color:#306998;color:#fff}
.tag-php{background-color:#4F5D95;color:#fff}
.tag-html{background-color:#e34c26;color:#fff}
.tag-css{background-color:#264de4;color:#fff}
.tag-bat{background-color:#4f94cd;color:#000}
.tag-csharp{background-color:#178600;color:#fff}
.tag-java{background-color:#007396;color:#fff}
.tag-nodejs{background-color:#8cc84b;color:#000}
.tag-typescript{background-color:#007acc;color:#fff}
.tag-unity{background-color:#000;color:#fff}
.tag-bash{background-color:#000080;color:#fff}
.tag-go{background-color:#29b0c7;color:#000}
.tag-other{background-color:#f0f0f0;color:#000}
.other-star{position:absolute;right:0.3125rem;bottom:0}
.five-pointed-star{width:0;height:0;border-right:0.625rem solid transparent;border-bottom:0.4375rem solid var(--star-color);border-left:0.625rem solid transparent;transform:rotate(35deg);position:relative;margin:1em auto;font-size:0.75rem;text-align:center;line-height:1.25rem}
.five-pointed-star:before{border-bottom:0.5rem solid var(--star-color);border-left:0.1875rem solid transparent;border-right:0.1875rem solid transparent;position:absolute;top:-0.28125rem;left:-0.40625rem;content:"";transform:rotate(-35deg)}
.five-pointed-star:after{position:absolute;top:0.01875rem;left:-0.65625rem;border-right:0.625rem solid transparent;border-bottom:0.4375rem solid var(--star-color);border-left:0.625rem solid transparent;transform:rotate(-70deg);content:""}
.update-icon{width:1.125rem;height:1.125rem;position:relative;margin:0.5em auto;box-sizing:border-box;display:block;border:0.125rem solid var(--icon-color);border-radius:50%;border-right-color:transparent;transform:rotate(-45deg)}
.update-icon::before{content:'';position:absolute;top:-0.09rem;right:-0.13rem;width:0;height:0;border-top:0.1875rem solid transparent;border-bottom:0.1875rem solid transparent;border-left:0.25rem solid var(--icon-color);transform:rotate(-85deg)}
.update-icon::after{content:'';position:absolute;top:50%;left:50%;width:0.3125rem;height:0.375rem;border-left:0.125rem solid var(--star-color);border-bottom:0.125rem solid var(--star-color);border-radius:1px;transform:translate(-25%,-50%) rotate(45deg)}
.footer{font-size:0.8em;margin-top:1.875rem;text-align:center}
.footer div{margin-top:0.5rem}
.to-top-button{position:fixed;bottom:8.4375rem;right:5rem;display:none;background-color:#333;color:#fff;border:none;padding:1rem 1.25rem;cursor:pointer;z-index:9999}
.to-top-button:hover{background-color:#555}
@media screen and (max-width:768px){.logo img{width:5.625rem}
.aboutWeb{width:80%;padding:0.125rem 0;margin:0 auto;font-size:0.625rem}
.sidebar{width:6.25rem;overflow:hidden}
.content{flex-grow:1;margin-left:6.25rem;margin-right:1.25rem;padding:1.25rem;min-width:calc(100% - 7.5rem)}
.row,.row6{grid-template-columns:1fr}
.to-top-button{position:fixed;bottom:0rem;right:0rem}}

#favorites .item{}
#wenben .item{}
#jisuan .item{}
#qianduan .item{}
#zifu .item{}
#youxi .item{}
#shouce .item{}
#chaxun .item{}
#tupian .item{}
#links .item{}