* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
            background: #c0c0c0;
            overflow: hidden;
            user-select: none;      
            -webkit-user-select: none; 
            -moz-user-select: none;   
            -ms-user-select: none; 
        }

        .left-container {
            display: flex;
            flex: 1;
            overflow: hidden;
            border: 3px solid #000;
            margin: 6px;
            background: #dcdcdc;
        }

        .window {
            width: 100vw;
            height: 100vh;
            background: #898989;
            display: flex;
            flex-direction: column;
            border: 2px solid #000;      
            padding: 4px;                 
            box-shadow:
                inset 0 0 0 2px #f0f0f0,     
                inset 0 0 0 3px #000;  
            display: flex;
            flex-direction: column;
        }

        .sidebar {
            position: relative;    
            width: 270px;
            background: transparent; 
            border: 3px solid;
            border-color: #ffffff #2a2a2a #808080 #ffffff;
            box-sizing: border-box;
            padding: 6px;           
            overflow: visible;
        }

        .sidebar-clock {
            width: 100%;
            height: 32px;
            background: #c0c0c0;
            border: 3px solid;
            border-color: #808080 #ffffff#ffffff #808080 ;
            display: flex;
            justify-content: center;  
            align-items: center;
            font-family: "Stack Sans Text", sans-serif;
            font-size: 20px;
            font-weight: 500;
            pointer-events: none; 
        }

        .clock-item {
            position: absolute;
            left: 45px;
        }

        .divider {
            width: 4px;
            height: 26px;
            background: #808080;
            border-left: 2px solid #ffffff;
            position: absolute;
            left:160px;
        }

        .clock-status {
            font-size: 16px;
            position: absolute;
            left: 186px;
        }

        .sidebar-buttons-bg {
            position: absolute;
            z-index: 5;             
            left: 8px;               
            right: 8px;
            top: 50px;               
            bottom: 10px;        
            background: #6d72d2;
            border: 2px solid;
            border-color: #000000 #ffffff #ffffff #000000;
            pointer-events: none;   
        }

        .sidebar-buttons {
            position: absolute;
            z-index: 10;             
            left: 8px;
            right: 8px;
            top: 70px;               
            display: grid;
            grid-template-columns: 110px 110px;
            row-gap: 10px;
            justify-content: center;
        }

        .nav-button {
            width: 90px;
            height: 90px;
            background: #c0c0c0;
            border: 3px solid;
            border-color: #ffffff #000000 #000000 #ffffff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            transition: all 0.3s;
        }

        .nav-button:hover {
            background: #c8cdd4;
        }

        .nav-button.active {
            border: 4px solid;
            border-color: #000000 #a0a0a0 #a0a0a0 #000000;
            background: #a0a0a0;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .nav-label {
            font-size: 18px;
            margin-top: 4px;
            text-align: center;
            font-weight: 400;
            font-family: "Stack Sans Text", sans-serif;
            color:white;
        }

        #talkbox {
            position: absolute;
            z-index: 100;
            bottom: 140px;   
            left: 47px;
            width: 200px;   
            display: none;

        }

        .dog{
            position: absolute;
            z-index: 100;
            bottom: 30px;   
            left: 100px;
            width: 110px;
            cursor: pointer;
        }

        #tooltip-box {
            position: absolute;
            z-index: 101;
            bottom:170px;
            left: 60px;
            width: 178px;
            height: 98px;
            background: rgba(255, 0, 0, 0);
            color: rgb(0, 0, 0);
            font-family: "Stack Sans Text", sans-serif;
            font-size: 16px;
            font-weight: 500;
            text-align: left;
            line-height: 1.1em;
            display: none;
        }

        .right-container {
            flex: 1;
            background: #dcdcdc;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .subwindow-titlebar {
            background: #000000;
            color: white;
            height: 120px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            font-weight: bold;
            border-bottom: 2px solid #000;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 100px;
            font-weight: 10;
            position: relative;
            transition: height 0.5s ease, font-size 0.5s ease;
            overflow: hidden;
        }

        .close-btn {
            position: absolute;
            top: 3px;
            right: 3px;
            width: 30px;
            height: 30px;
            background: #c0c0c0;
            border: 3px solid;
            border-color: #ffffff #000000 #000000 #ffffff;
            cursor: pointer;
            font-size: 22px;
            padding: 0;
        }

        .close-btn:active {
            border-color: #000000 #ffffff #ffffff #000000;
        }

        .subwindow {
            margin: 10px;
            background: #c0c0c0;
            border: 2px solid #000;
            box-shadow:
                inset 0 0 0 2px #fff,
                inset 0 0 0 3px #000;
            height: calc(100% - 20px);
            display: flex;
            padding: 2px; 
            box-sizing: border-box;
            flex-direction: column;
            width: 1190px;
            animation: win95-open 0.5s steps(6) forwards;
        }

        .subwindow-title {
            transition: transform 0.4s ease;
            will-change: transform; /* 提前优化 */
        }
        @keyframes win95-open {
            0% {
                width: 0;
                height: 0;
            }
            100% {
                width: 1190px;  /* 你的窗口最终宽度 */
                height: calc(100% - 20px);
            }
        }

        @keyframes win95-close {
            0% {
                width: 1190px;
                height: calc(100% - 20px);
            }
            100% {
                width: 0;
                height: 0;
            }
        }

        .subwindow.closing {
            animation: win95-close 0.5s steps(6) forwards;
        }

        .subwindow-body {
            display: flex;
            flex-direction: column;
            padding: 7px;
            flex: 1;              
            overflow-y: auto;   
            width: 1182px;
            position: relative; 
        }

        .tabs-container {
            background: #c0c0c0;
            padding: 0 10px;
            border-bottom: 2px solid #808080;
            margin-bottom: 10px;
        }


        .tabs {
            display: flex;
            flex-direction: row;
            width: 1147px;
            background: #c0c0c0;
            padding: 2px;
            position: sticky;  
            top: -7px;
            left: 0px;
            z-index: 100;
            border: 3px solid;
            border-color: #ffffff #4a4a4a #4a4a4a #ffffff;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: -20px; 
            margin-bottom: 10px; 
            margin-left: -30px;
        }

        .tab {
            padding: 5px 12px;
            border: 2px solid;
            border-color: #ffffff #000000 #000000 #ffffff;
            cursor: pointer;
            background: #c0c0c0;
            font-family: "Stack Sans Text", sans-serif;
            letter-spacing: 0px;
            font-size: 18px;
            font-weight: 400;
            text-align: left;
            transition: all 0.3s;
        }

        .tab.active {
            border: 2px solid;
            border-color: #000000 #ffffff #ffffff #000000;
            background: #a0a0a0;
            color:white;
            font-style: italic;
        }

        .tabevent{
            padding: 5px 12px;
            border: 2px solid;
            cursor: pointer;
            border-color: #000000 #ffffff #ffffff #000000;
            background: #a0a0a0;
            font-family: "Stack Sans Text", sans-serif;
            letter-spacing: 0px;
            font-size: 18px;
            font-weight: 400;
            text-align: left;
        }

        .projects-container {
            width: 1147px;
            background: #e5e5e5;
            border: 2px solid #000;
            padding: 15px 30px 30px 30px;
            flex: 1;
        }

        .project-title {
            display: inline-block;
            font-weight: 400;
            font-family: "Google Sans Flex", sans-serif;
            font-size: 30px;
            position: relative;
            left: 10px;
            top: 5px
        }

        .project-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .tag {
            padding: 3px 12px;
            font-size: 15px;
            border: 1px solid #252525;
            background: white;
            border-radius: 20px;
            font-family: "Google Sans Flex", sans-serif;
            font-weight: 400;
            z-index: 1; 
        }

        .hidden {
            display: none;
        }

        /* Windows 98 滚动条样式 */
        ::-webkit-scrollbar {
            width: 18px;
            height: 16px;
        }

        ::-webkit-scrollbar-track {
            background: rgb(212, 212, 212);
        }

        ::-webkit-scrollbar-thumb {
            background: #dfdfdf;
            border: 2px solid;
            border-color: #ffffff #808080 #808080 #ffffff;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #e8e8e8;
        }

        ::-webkit-scrollbar-thumb:active {
            background: #c0c0c0;
        }

        ::-webkit-scrollbar-button {
            background: #c0c0c0;
            border: 2px solid;
            border-color: #ffffff #808080 #808080 #ffffff;
            height: 16px;
            width: 16px;
        }

        ::-webkit-scrollbar-button:hover {
            background: #d4d0c8;
        }

        ::-webkit-scrollbar-button:active {
            background: #a0a0a0;
            border-color: #808080 #ffffff #ffffff #808080;
        }

        ::-webkit-scrollbar-button:vertical:decrement {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 4 L4 10 L12 10 Z" fill="%23000"/></svg>');
            background-repeat: no-repeat;
            background-position: center;
        }

        ::-webkit-scrollbar-button:vertical:increment {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 12 L4 6 L12 6 Z" fill="%23000"/></svg>');
            background-repeat: no-repeat;
            background-position: center;
        }

        #F2 { height: 540px;}
        #RR { height: 400px; }
        #Hammer { height: 400px;}
        #S3 { height: 540px; }
        #F4 { height: 485px; }
        #VerySmartPen { height: 485px; }
        #Examiner{height: 471px;}
        #Cover1{height: 471px;}
        #zinetea{height: 500px;}
        #checkingpoint{height: 500px;}
        #wildlife1{height: 380px;}
        #klank{height: 380px;}
        #soundquilt{height:380px}

        #sweet{height: 470px;}
        #noisekitchen2{height: 470px;}

        #noisekitchen1{height: 460px;}
        #soda{height: 460px;}

        #soundbox{height: 490px;}
        #hetarchief{height: 490px;}
        #beer{height: 415px;}

        #varia{height:430px}
        #worm{height: 415px; width: 700px;}

        [class^="bk"]:hover {
            outline: 3px solid rgb(0, 0, 0);
            outline-offset: 0px; /* 让它贴着边 */
            transition: outline 0.5s ease;
        }

        .game-row {
            display: flex;
            gap: 15px;
        }

        .g-title {
            font-weight: 400;
            font-family: "Google Sans Flex", sans-serif;
            font-size: 40px;
            margin-bottom: 12px;
            padding-left: 10px;
            width: 270px;
            border: 0cap solid #000;
            background-color: #ffd238;
            color: white;
            border-top: 3px solid #ffffff;
            border-left: 3px solid #ffffff;
            border-bottom: 3px solid #804000; /* 深一点的橙/棕 */
            border-right: 3px solid #804000;
        }

        .g-intro {
            font-family: "Pixelify Sans", sans-serif;
            font-size: 20px;
            width: 270px;
            padding: 10px;
            background-color: #dadada;
            border-top:    2px solid #808080;
            border-left:   2px solid #808080;
            border-right:  2px solid #ffffff;
            border-bottom: 2px solid #ffffff;
        }

        .win-play {
            font-family: "Google Sans Flex", sans-serif;
            font-size: 14px;
            font-weight: bold;
            padding: 6px 16px;
            background: #f85400; /* 你的背景颜色，也可以改 */
            color: #000;
            border-top: 2px solid #ffffff;
            border-left: 2px solid #ffffff;
            border-bottom: 2px solid #804000; /* 深一点的橙/棕 */
            border-right: 2px solid #804000;
            cursor: pointer;
            user-select: none;
            transition: all 0.5s ease;
            margin-bottom: 12px;
            width: 270px;
            }

        .win-play:hover {
            background: #ffd238; 
        }

        .win-play:active {
            border-top: 2px solid #804000;
            border-left: 2px solid #804000;
            border-bottom: 2px solid #ffffff;
            border-right: 2px solid #ffffff;
            transform: translate(1px, 1px);
        }


        .bk1{
            background-color: white;
            width: 675px;
            height: 600px;
            display: inline-block; 
            vertical-align: top;  
             
        }
        .bk2{
            background-color: white;
            width: 764px;
            height: 500px;
            display: inline-block;
            vertical-align: top;    
            margin-right: 40px;  
        }

        .bk3{
            background-color: white;
            width: 266px;
            height: 500px;
            display: inline-block; 
            vertical-align: top;   
            position: relative; 
            overflow: hidden;   
        }

        .bk3 img {
            transition: transform 0.5s ease;
            position: relative;
            z-index: 2; 
            display: block; 
            width: 100%;
        }

        .bk3::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width:266px;
            height: 400px;
            background-image: url('/projects/Hammer/Spoon.jpg'); 
            background-size: cover;
            background-position: center;
            transform: translateX(100%); 
            transition: transform 0.5s ease;
            z-index: 1;
        }

        .bk3:hover img {
            transform: translateX(-100%); 
        }

        .bk3:hover::before {
            transform: translateX(0); 
        }

        .bk4{
            background-color: white;
            width: 360px;
            height: 600px;
            display: inline-block; 
            vertical-align: top; 
            margin-right: 35px;  
            position: relative; 
            overflow: hidden;     
        }

        .bk4 img {
            transition: transform 0.5s ease;
            position: relative;
            z-index: 2; 
            display: block; 
            width: 100%;
        }

        .bk4::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width:360px;
            height: 540px;
            background-image: url('/projects/Wildlife/P2.jpg'); 
            background-size: cover;
            background-position: center;
            transform: translateX(100%); 
            transition: transform 0.5s ease;
            z-index: 1;
            
        }

        .bk4:hover img {
            transform: translateX(-100%); 
        }

        .bk4:hover::before {
            transform: translateX(0); 
        }

        .bk5{
            background-color: white;
            width: 704px;
            height: 585px;
            display: inline-block;
            vertical-align: top; 
        }

        .bk51{
            background-color: white;
            width: 684px;
            height: 570px;
            display: inline-block;
            vertical-align: top; 
        }

        .bk6{
            background-color: white;
            width: 323px;
            height: 585px;
            display: inline-block;
            vertical-align: top;
            margin-right: 42px;  
        }

        .bk61{
            background-color: white;
            width: 314px;
            height: 570px;
            display: inline-block;
            vertical-align: top;
        }

        .bk7{
            background-color: white;
            width: 666px;
            height: 570px;
            display: inline-block; 
            vertical-align: top;   
            margin-right: 50px; 
        }

        .bk8{
            background-color: white;
            width: 333px;
            height: 600px;
            display: inline-block;
            vertical-align: top;  
            margin-right: 20px;  
        }

        .bk9{
            background-color: white;
            width: 357px;
            height: 600px;
            display: inline-block;  
            vertical-align: top;   
            margin-right: 20px; 
        }

        .bk10{
            background-color: white;
            width: 568px;
            height: 480px;
            display: inline-block; 
            vertical-align: top;    
            margin-right: 23px; 
        }

        .bk11{
            background-color: white;
            width: 353px;
            height: 570px;
            display: inline-block; 
            vertical-align: top; 
        }

        .bk13{
            background-color: white;
            width: 477px;
            height: 480px;
            display: inline-block; 
            vertical-align: top; 
        }

        .bk14{
            background-color: white;
            width: 705px;
            height: 570px;
            display: inline-block; 
            vertical-align: top; 
        }

        .bk15{
            background-color: white;
            display: inline-block; 
            vertical-align: top; 
        }

        .bk16{
            background-color: white;
            width: 613px;
            height: 560px;
            display: inline-block; 
            vertical-align: top; 
            margin-right: 40px; 
        }

        .bk17{
            background-color: white;
            width: 412px;
            height: 560px;
            display: inline-block; 
            vertical-align: top; 
        }

        .bk18{
            background-color: white;
            width: 653px;
            height: 590px;
            display: inline-block; 
            vertical-align: top; 
            margin-right: 44px; 
        }

        .bk19{
            background-color: white;
            width: 368px;
            height: 590px;
            display: inline-block; 
            vertical-align: top; 
        }
        .bk191{
            background-color: white;
            width: 311px;
            height: 520px;
            display: inline-block; 
            vertical-align: top; 
        }

        .bk22{
            background-color: white;
            width: 738px;
            height: 520px;
            display: inline-block; 
            vertical-align: top; 
            margin-right: 24px; 
        }
        .bk222{
            background-color: white;
            width: 900px;
            height: 520px;
            display: inline-block; 
            vertical-align: top; 
        }

        .bk23{
            background-color: white;
            width: 644px;
            height: 530px;
            display: inline-block; 
            vertical-align: top; 
            margin-right: 24px; 
        }

        .bk24{
            background-color: white;
            width: 700px;
            height: 520px;
            display: inline-block; 
            vertical-align: top; 
            margin-right: 25px; 
        }

        .bkre5{
            background-color: white;
            width: 585px;
            height: 480px;
            display: inline-block; 
            vertical-align: top; 
        }

        .bkmore {
            display: inline-block;
            vertical-align: top;
            width: 300px;
            height: 250px;
            background: #f4ffc8;
            border: 2px solid #000;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .bkmore::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: rgb(255, 221, 0);
            transition: left 0.4s ease;
            z-index: 0;
        }

        .bkmore:hover::before {
            left: 0;
            background: rgb(255, 221, 0);
        }

        .bkmore .project-title {
            position: relative;
            z-index: 1;
            transition: color 0.4s ease;
        }

        .bkmore:hover .project-title {
            color: white;
        }
        .bkmore:hover{outline: none}

        .tab-body {
            display: none;  
        }

        .tab[data-tab="list"] {
            margin-left: auto;
        }

        .tab-icon {
            padding: 0px 4px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tab-icon img {
            width: 28px;
            height: 28px;
        }

        .tab-icon.active {
            background: #a0a0a0;
        }

        .project-list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 12px;
            border-bottom: 1px solid #c0c0c0;
            margin-bottom: 10px;
            background: #f0f0f0;
            border-radius: 4px;
            position: relative; 
            overflow: hidden; 
        }

        .project-name {
            font-weight: 400;
            font-family: "Google Sans Flex", sans-serif;
            font-size: 30px;
            color: black;
            position: relative;
            z-index: 1;  
            transition: color 0.5s;
        }

        .project-list-item::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;      /* 初始宽度为 0 */
            height: 100%;
            background: black;
            z-index: 0;    /* 在文字下方 */
            transition: width 0.5s ease;
        }

        /* hover 时，背景扩展到全宽 */
        .project-list-item:hover::before {
            width: 100%;
        }

        /* hover 时文字变白 */
        .project-list-item:hover .project-name {
            color: white;
        }

        #all-body {
            display: block; 
        }
        
        .edu-title{font-weight: 450; font-family: Google Sans Flex, sans-serif; font-size: 20px;margin-bottom: 5px;}

        .edu-major{font-weight: 400; font-family: Google Sans Flex, sans-serif; font-size: 18px; font-style: italic;}

        .win-divider {
            border-top: 2px solid #c9c9c9;
            border-bottom: 2px solid #ffffff;
            margin: 0px 0;
        }

        .event-row {
            position: relative;
            padding: 4px 0px;
        }

        .col {
            display: inline-block;
            vertical-align: top;
        }

        .col {
            padding: 4px 0px;
            font-size: 20px;
            font-weight: 400; font-family: Google Sans Flex, sans-serif; font-size: 20px;
        }

        .col.title {
            width: 400px;
            position: relative;
            left: 10px;
        }

        .col.location {
            width: 400px;
            position: relative;
            left: 10px;
        }

        .col.time {
            width: 230px;
            text-align: left;
            position: relative;
            left: 60px;
        }

        .help-title{
            color: OrangeRed; 
            font-weight:bold; 
            font-size:40px; 
            font-family: Georgia, serif; 
            text-shadow: 1px 1px 1px #000000;
            border-bottom: 1px solid rgb(37, 37, 37);
            padding-bottom: 5px;
            margin-bottom: 10px;
            cursor: pointer;

        }

        .help-text{
            font-weight: 500; 
            font-family: "Josefin Slab", serif;
            font-size: 25px;
            line-height: 1.2;
            user-select: text; 
            -webkit-user-select: text;
            overflow: hidden;
            height: 0;
            transition: height 1s steps(8, end);
            margin: 0px 10px 0px 10px;
        }

        .help-code {
            background-color: #171717;
            border: 3px solid;
            border-color: #606060 #dfdfdf #dfdfdf #808080;
            padding: 0px;
            font-family: 'Courier New', monospace;
            font-size: 18px;
            color: #ffffff;
            margin: 0px 0;
            overflow-x: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
            font-weight: 500;
            user-select: text;
        }

        .section {
            position: relative;
        }

        .section.open .toggle-btn {
            transform: rotate(-90deg);
        }

        .toggle-btn {
            position: absolute;
            right: 12px;
            top: 14px;
            cursor: pointer;
            transition: transform 0.5s steps(4, end);
        }

        .back-btn{
            padding: 2px 12px;
            border: 2px solid;
            border-color: #ffffff #000000 #000000 #ffffff;
            cursor: pointer;
            background: #c0c0c0;
            font-family: "Stack Sans Text", sans-serif;
            letter-spacing: 0px;
            font-size: 18px;
            font-weight: 400;
            text-align: left;
            transition: all 0.3s;
        }

        .center{
            text-align: center;
        }

        .rain {
            position: fixed;
            z-index: 20;
            top: -30px;
            left: 0;
            pointer-events: none;
        }

        .raindrop {
            position: absolute;
            width: 2px;
            height: 30px;
            background-color: rgba(0, 0, 255, 0.6); 
            animation: fall linear infinite;
        }

        @keyframes fall {
            0% {
                top: -10px;
            }
            100% {
                top: 100vh;
            }
        }
        
        .toolbox{
            background-color: white;
            border: 2.5px solid black;
            width: 340px;
            height: 375px;
            box-shadow: 8px 8px 0 0 black;
            transition: box-shadow 0.5s steps(6, end);   
            color: inherit;
        }

        .toolbox:hover{
            box-shadow: 20px 20px 0 rgb(56, 29, 191);
            color: inherit;
        }