@media (prefers-color-scheme: dark) {
          :root {
            --icon: 100%;
            --blur: rgba(19, 23, 31, 0.69);
            --border: rgba(255, 255, 255, 0.2);
          }
        }
        @media (prefers-color-scheme: light) {
            :root {
                --icon: 0;
                --blur: rgba(255, 255, 255, 0.69);
                --border: rgba(25, 25, 25, 0.2);

            }
        }
        html::-webkit-scrollbar {
            display: none;
        }

        body {
            max-width: 100vw;
            overflow-x: hidden;
            min-height:100vh;
        }
        article{
            border-radius: 1rem;
        }
        h1{
            margin-bottom:0.4rem;
        }
        h2{
            margin-bottom:0.4rem;
        }

        .invert-icon{
            filter: invert(var(--icon));
        }

        .top-image{
            width: 100vw;
            height: 40vh;
            min-height: 200px;
            overflow: hidden;
            position: relative;
        }
        .carousel-container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        .carousel-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            filter: blur(20px);
        }
        .carousel-slide.active {
            opacity: 1;
            filter: blur(0px);
        }
        .carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .carousel-controls {
            position: absolute;
            bottom: 1rem;
            right: 1rem;
            display: flex;
            align-items: center;
            z-index: 10;
            padding: 12px 20px;
            background:  var(--blur);
            border-radius: 0.6rem;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(128, 128, 128, 0.6);
            font-weight: bold;
            font-size: 0.7rem;
        }
        .carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background:  var(--blur);
            color: var(--pico-text-color);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(128, 128, 128, 0.6);
            font-size: 1rem;
            width: 2.3rem;
            height: 2.3rem;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: normal;
        }
        .carousel-nav:hover {
            transform: translateY(-50%) scale(1.1);
            filter: none;
        }
        .carousel-nav.prev {
            left: 20px;
        }
        .carousel-nav.next {
            right: 20px;
        }
        .top-title{
            position:relative;
            margin-top:-5rem;
            font-size: 2.5rem;
            font-weight: bold;
            line-height:.8;
            background-color: var(--blur);
            padding:1rem;
            width:20rem;
            max-width:90vw;
            padding-bottom:.5rem;
            border-radius:1.2rem 1.2rem 0 0;
            min-height:2rem;
            backdrop-filter: saturate(180%) blur(15px);
            -webkit-backdrop-filter: saturate(180%) blur(15px);
            z-index: 10;
        }
        .top-title small{
            font-size: 1.5rem;
        }
        .main-title{
            font-weight: 500;
            font-size: 2.3rem;
            background: linear-gradient(90deg, #434343 0%,black 100%);
            background-clip: text;
            color: transparent; 
            filter: drop-shadow(0 0 5px rgb(255,250,255));
        }
        .bottom-box{
            width: 100vw;
            overflow: hidden;
            min-height: 200px;
            height:auto;
            background-color:rgba(125, 125, 145, 0.05);
            padding-bottom: 2rem;
        }
        @media(max-width:750px){
            .carousel-controls{
              display: none;
            }
        }
        @media(max-width:575px){
            .top-title{
                width: 300px;
            }
            .carousel-nav {
                width: 40px;
                height: 40px;
                font-size: 20px;
            }
            .carousel-nav.prev {
                left: 10px;
            }
            .carousel-nav.next {
                right: 10px;
            }
        }
        @media(min-width:1080px){
            .container{
                padding-left:5rem;
                padding-right:5rem;
            }
        }
        .stick-img{
          position: relative;
        }
        .stick-img h4{
          padding-left:2.3rem;
        }
        .stick-img:hover{
          filter: none;
        }
        .stick-img img {
          position: absolute;
          bottom: 0;
          height: 3rem;
          right: auto;
          left: 0;
          transition: all .3s cubic-bezier(0.42, 0, 0.58, 1);
          margin-left: -5px;
        }
        .stick-img-r h4{
            padding-left: 0;
          padding-right:2.3rem;
        }
        .stick-img-r img {
          left: auto;
          right: 0;
        }
        .stick-img img:hover {
          height: 7rem;
          width: auto;
        }
        .search {
          padding-bottom: 0;
          position: relative;
          z-index: 100;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          overflow: hidden;
        }
        
        .search.collapsed {
          height: 5.1rem;
        }
        
        .search.expanded {
          height: 18rem;
          padding-bottom: 0;
        }
        
        .search input{
          border-radius: 8px;
          transition: all 0.3s ease;
        }
        
        .search-content {
          padding-top: 1rem;
          opacity: 0;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          transform: translateY(-10px);
          height: calc(100% - 60px);
        }
        
        .search-content.show {
          opacity: 1;
          transform: translateY(0);
        }
        
        .search-placeholder {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          font-size: 1.1rem;
          font-weight: 300;
          opacity: 0.7;
          margin-top: -2rem;
          font-weight: bold;
        }
        
        .search-results {
          height: 100%;
          overflow-y: auto;
          padding: 0 1rem 1rem 1rem;
        }
        
        .search-results::-webkit-scrollbar {
          display: none;
        }
        
        .search-item {
          display: flex;
          align-items: center;
          padding: 0.8rem;
          margin-bottom: 0.5rem;
          border-radius: 12px;
          cursor: pointer;
          transition: all 0.3s ease;
          border: 1px solid rgba(128, 128, 128, 0.3);
          opacity: .8;
        }
        
        .search-item:hover {
          opacity: 1;
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        
        .search-item:last-child {
          margin-bottom: 0;
        }
        
        .search-item-image {
          width: 50px;
          height: 50px;
          border-radius: 3px;
          object-fit: cover;
          margin-right: 1rem;
          flex-shrink: 0;
        }
        
        .search-item-content {
          flex: 1;
          min-width: 0;
        }
        
        .search-item-title {
          font-weight: 600;
          font-size: 0.95rem;
          margin-bottom: 0.2rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .search-item-meta {
          font-size: 0.8rem;
          opacity: 0.7;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .search-item-category {
          font-size: 0.7rem;
          padding: 0.2rem 0.6rem;
          border-radius: 8px;
          margin-left: 0.5rem;
          font-weight: 500;
          flex-shrink: 0;
          font-weight: bold;
        }
        .search-item-category.video{
          background: rgba(100,149,237, 0.2);
          color: rgb(100,149,237);
        }
        .search-item-category.music{
          background: rgba(220,20,60, 0.2);
          color: rgb(220,20,60);
        }
        .search-item-category.game{
          background: rgba(64,224,208, 0.2);
          color: rgb(64,224,208);
        }
        .search-item-category.book{
          background: rgba(244,164,96, 0.2);
          color: rgb(244,164,96);
        }
        
        .search-item-rating {
          font-size: 0.8rem;
          font-weight: 600;
          color: #ff6b6b;
          margin-left: auto;
          flex-shrink: 0;
        }

        .tag.outline {
            height: auto;
            padding: 0.5rem;
            line-height: 1.4;
            font-size: 0;
            border-radius: 1rem;
            max-height: 10rem;
            overflow-y: auto;
        }

        .tag.outline::-webkit-scrollbar {
            display: none;
        }

        .tag-item {
            display: inline-block;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 0.3rem 0.5rem;
            margin: 0.2rem;
            line-height: 1.2;
            vertical-align: middle;
            font-weight: 500;
            border-radius: 0.4rem;
            background: rgba(128, 128, 128, 0.05);
            border: 1px solid rgba(128, 128, 128, 0.2);
            position: relative;
            overflow: hidden;
            font-size: 0.9rem;
            /* 添加背景渐变的基础层 */
            background-image: linear-gradient(135deg, rgba(44,216,213,0) 0%, rgba(197,193,255,0) 56%, rgba(255,186,195,0) 100%);
        }

        .tag-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }

        .tag-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(212,255,236,.5) 0%,rgba(87,242,204,.5) 48%,rgba(69,150,251,.5) 100%);
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: -1;
        }

        .tag-item:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            border-color: rgba(128, 128, 128, 0.4);
        }

        .tag-item:hover::before {
            left: 100%;
        }

        .tag-item:hover::after {
            opacity: 1;
        }

        .tag-item:active {
            transform: translateY(0) scale(0.98);
            transition-duration: 0.1s;
        }

        @media (prefers-color-scheme: dark) {
            .tag-item {
                background: rgba(255, 255, 255, 0.05);
                border-color: rgba(255, 255, 255, 0.1);
                /* 深色模式下的渐变基础层 */
                background-image: linear-gradient(135deg, rgba(44,216,213,0) 0%, rgba(197,193,255,0) 56%, rgba(255,186,195,0) 100%);
            }
            
            .tag-item::after {
                /* 深色模式下稍微调暗渐变色彩 */
                background: linear-gradient(135deg, rgba(212,255,236,.5) 0%,rgba(87,242,204,.5) 48%,rgba(69,150,251,.5) 100%);
            }
            
            .tag-item:hover {
                border-color: rgba(255, 255, 255, 0.2);
            }
        }


        .section {
            margin-bottom: 1rem;
        }
        
        .section-title {
            margin-bottom: 0.3rem;
            margin-left: -0.3rem;
            height: auto;
            display: flex;
            align-items: center;
            font-size: 1.2rem;
        }
        .section-title img {
            width: 2.3rem;
            height: auto;
            z-index: 2;
            opacity: .6;
            transition: all 0.3s ease;
            margin-right: 0.5rem;
        }
        .section:hover img{
            opacity: 1;
        }
        .video-title,
        .music-title,
        .game-title,
        .book-title {
            transition: all 0.3s ease;
        }
        .section:hover .video-title{
            color:#6495ed;
        }
        .section:hover .game-title{
            color:#40e0d0;
        }
        .section:hover .music-title{
            color:#dc143c;
        }
        .section:hover .book-title{
            color:#f4a460;
        }

        .items-container {
            display: flex;
            gap: 0.5rem;
            overflow-x: auto;
            padding-bottom: 0.5rem;
            scrollbar-width: thin;
            scrollbar-color: #c1c1c1 transparent;
            position: relative;
            -webkit-overflow-scrolling: touch;
        }
        
        .items-container::-webkit-scrollbar {
            height: 1rem;
        }
        .items-container::-webkit-scrollbar-thumb {
            background: rgba(128, 128, 128, 0.3);
            border-radius: 5px;
        }
        
        .item {
            flex-shrink: 0;
            overflow: hidden;
            filter: drop-shadow(5px 5px 5px rgba(0,0,0,.01));
            transition: all 0.3s ease;
        }
        
        .item img {
            display: block;
            border-radius: 0.2rem;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: 1px solid rgba(128, 128, 128, .3);
        }
        .item:hover{
            transform: scale(1.03);
            filter: drop-shadow(0 0 10px rgba(0,0,0,.3));
        }
        
        .video .item {
            width: 7rem;
            aspect-ratio: 2 / 3;
            object-fit: cover;
        }
        
        .music .item,
        .game .item {
            width: 7rem;
            aspect-ratio: 1 / 1;
            object-fit: cover;
        }
        
        .book .item {
            width: 7rem;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            box-shadow:none;
            border-radius: 0;
        }
        .book .item img {
            object-fit: contain;
            height: auto;
            max-height: 100%;
        }

        .floating-button {
            position: absolute;
            right: 0.3rem;
            bottom: -0.5rem;
            width: auto;
            border-radius: 0.5rem;
            border: 1px solid rgba(128, 128, 128, 0.3);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.7rem;
            z-index: 10;
            transition: all 0.3s ease;
            background: var(--blur);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            color: var(--pico-text-color);
            padding: 0.5rem;
            padding-left: 1rem;
            padding-right: 1rem;
        }
        
        .floating-button:hover {
            transform: scale(1.05);
        }

        @media (max-width: 1024px) {
            .floating-button{
                right: 0.3rem;
                bottom: 0.6rem;
            }
        }
        
        @media (min-width: 1024px) {
            .items-container {
                overflow-x: visible;
                white-space:nowrap;
            }
            
            .video .item {
                width: calc((100% - 50px) / 6);
            }
            
            .music .item,
            .game .item {
                width: calc((100% - 50px) / 6);
            }

            .book .item {
                width: calc((100% - 50px) / 6);
            }
        }