*{margin:0;padding:0;box-sizing:border-box}
        :root{--sidebar-width:260px}
        html,body{width:100%;min-height:100vh;background:#eef1f6;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;overflow-x:hidden}
        body.dark{background:#0f172a}
        a{text-decoration:none;color:inherit}
        .main-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center}
        @media(min-width:1001px){
            .main-wrapper{margin-left:max(calc(260px + 40px),calc((100% - 1350px + 260px + 40px)/2));margin-right:auto;max-width:1350px;width:100%}
        }
        @media(max-width:1000px){
            .main-wrapper{margin-left:0;max-width:100%;width:100%}
        }
        .page-container{width:100%;padding:2.5rem 2rem;max-width:1350px;margin:0 auto}
        .page-header{text-align:center;margin-bottom:3rem}
        .page-header .eyebrow{display:inline-block;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:#4a6a85;background:rgba(255,255,255,.6);backdrop-filter:blur(8px);padding:.2rem 1.2rem;border-radius:40px;margin-bottom:.6rem;border:1px solid rgba(255,255,255,.4)}
        body.dark .page-header .eyebrow{background:rgba(30,41,59,.6);color:#94a3b8}
        .page-header h1{font-size:2.4rem;font-weight:700;color:#0b1a2b;letter-spacing:-.03em;line-height:1.2}
        body.dark .page-header h1{color:#f1f5f9}
        .page-header h1 .highlight{background:linear-gradient(135deg,#2d7aff,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
        .page-header .sub{font-size:.85rem;color:#6a849c;margin-top:.3rem;font-weight:400}
        body.dark .page-header .sub{color:#94a3b8}

        .cards-stack{display:flex;justify-content:center;align-items:flex-start;padding:1rem 0 2rem;min-height:380px;position:relative}
        .focus-card{flex:0 0 auto;min-width:220px;width:auto;height:320px;border-radius:24px;padding:1.2rem 1.6rem 1rem;display:flex;flex-direction:column;cursor:pointer;transition:transform 0.55s cubic-bezier(0.34,1.2,0.64,1),filter 0.5s ease,box-shadow 0.5s ease,min-width 0.5s ease,max-width 0.5s ease,padding 0.5s ease,z-index 0s,margin 0.5s ease;position:relative;box-shadow:0 6px 24px rgba(0,0,0,0.04);border:1px solid rgba(255,255,255,0.12);overflow:hidden;color:#ffffff;user-select:none;transform-origin:center center;backface-visibility:hidden;will-change:transform}
        .focus-card:not(:first-child){margin-left:-150px}
        .focus-card.active + .focus-card{margin-left:0}
        .focus-card:nth-child(1){z-index:1}.focus-card:nth-child(2){z-index:2}.focus-card:nth-child(3){z-index:3}.focus-card:nth-child(4){z-index:4}.focus-card:nth-child(5){z-index:5}.focus-card:nth-child(6){z-index:6}
        .focus-card.active{min-width:420px;max-width:680px;height:500px;padding:1.8rem 2.2rem 1.6rem;transform:none;z-index:20!important;box-shadow:0 30px 80px rgba(0,0,0,0.10);border-color:rgba(255,255,255,0.25);backdrop-filter:blur(4px);background-size:200% 200%;filter:brightness(1) saturate(1);margin-right:118px}

        .focus-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.02);pointer-events:none;z-index:1;border-radius:24px}
        .focus-card::after{content:'';position:absolute;top:-30%;right:-15%;width:160px;height:160px;background:radial-gradient(circle,rgba(255,255,255,0.08) 0%,transparent 70%);border-radius:50%;pointer-events:none;transition:all 0.6s ease;z-index:0}
        .focus-card.active::after{width:220px;height:220px;top:-20%;right:-10%}
        .focus-card:hover::after{transform:scale(1.4) translate(-10%,-10%);opacity:0.8}

        /* ===== 六种颜色 ===== */
        .focus-card.card-g1{background:linear-gradient(145deg,#2d7aff,#6a9eff,#a8c8ff);animation:gradientShiftBlue 14s ease-in-out infinite alternate}
        .focus-card.card-g2{background:linear-gradient(145deg,#7c3aed,#b08cfa,#d8c4fc);animation:gradientShiftPurple 14s ease-in-out infinite alternate}
        .focus-card.card-g3{background:linear-gradient(145deg,#059669,#45c99a,#8ae0c0);animation:gradientShiftGreen 14s ease-in-out infinite alternate}
        .focus-card.card-g4{background:linear-gradient(145deg,#d97706,#f59e0b,#fcd34d);animation:gradientShiftOrange 14s ease-in-out infinite alternate}
        .focus-card.card-g5{background:linear-gradient(145deg,#db2777,#f472b6,#f9a8d4);animation:gradientShiftPink 14s ease-in-out infinite alternate}
        .focus-card.card-g6{background:linear-gradient(145deg,#06b6d4,#67e8f9,#a5f3fc);animation:gradientShiftCyan 14s ease-in-out infinite alternate}
        @keyframes gradientShiftBlue{0%{background-position:0% 50%}100%{background-position:100% 50%}}
        @keyframes gradientShiftPurple{0%{background-position:0% 50%}100%{background-position:100% 50%}}
        @keyframes gradientShiftGreen{0%{background-position:0% 50%}100%{background-position:100% 50%}}
        @keyframes gradientShiftOrange{0%{background-position:0% 50%}100%{background-position:100% 50%}}
        @keyframes gradientShiftPink{0%{background-position:0% 50%}100%{background-position:100% 50%}}
        @keyframes gradientShiftCyan{0%{background-position:0% 50%}100%{background-position:100% 50%}}

        /* Non-active card default styles */
        .focus-card:not(.active){transform:scale(0.85);filter:brightness(0.75) saturate(0.35);opacity:1;min-width:180px;max-width:260px;padding:0.8rem 1rem 0.6rem;height:320px;overflow:hidden}

        .card-title-area{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative;z-index:2;padding:.2rem 0 0 0;flex-shrink:0;min-height:40px;transition:all .4s ease}
        .card-title-area .grade-name{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;text-shadow:0 2px 20px rgba(0,0,0,.04);white-space:nowrap}
        .focus-card.active .card-title-area .grade-name{font-size:2rem}
        .focus-card.active .card-title-area{min-height:50px;padding:.1rem 0 .2rem}
        .focus-card:not(.active) .card-title-area{flex:1;justify-content:center;align-items:flex-start;text-align:left;min-height:auto;padding:.5rem .5rem .5rem 0.3rem}
        .focus-card:not(.active) .card-title-area .grade-name{font-size:1.5rem;white-space:nowrap}

        .card-content{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:.4rem .8rem;padding-top:.5rem;margin-top:.1rem;opacity:0;max-height:0;overflow:hidden;transition:opacity .5s cubic-bezier(.34,1.2,.64,1),max-height .5s cubic-bezier(.34,1.2,.64,1),padding .5s ease,margin .5s ease;flex-shrink:0}
        .focus-card.active .card-content{opacity:1;max-height:500px;padding-top:.8rem;margin-top:.2rem;flex:1;overflow:visible}
        .card-content .col{display:flex;flex-direction:column;gap:.08rem}
        .card-content .col .col-title{font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.5;margin-bottom:.1rem;padding-bottom:.08rem;border-bottom:2px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:.4rem}
        .card-content .col .col-title i{font-size:.6rem;opacity:.5}
        .focus-card.active .card-content .col .col-title{opacity:.7;font-size:1rem;border-bottom-color:rgba(255,255,255,.18)}
        .card-content .col .chapter-item{font-size:.85rem;font-weight:450;padding:.08rem .1rem;border-radius:4px;opacity:.55;display:flex;align-items:center;gap:.25rem;transition:all .2s ease}
        .card-content .col .chapter-item .num-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;font-size:.65rem;font-weight:600;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.04);padding:0 .05rem;flex-shrink:0;font-feature-settings:"tnum"}
        .focus-card.active .card-content .col .chapter-item .num-badge{min-width:26px;height:26px;font-size:.75rem;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.08)}
        .focus-card.active .card-content .col .chapter-item{opacity:.8;font-size:.95rem;padding:.1rem .12rem}
        .focus-card.active .card-content .col .chapter-item:hover{background:rgba(255,255,255,.06);opacity:1;border-radius:4px}
        .card-footer-indicator{position:absolute;bottom:.6rem;right:1.2rem;z-index:2;display:flex;align-items:center;gap:.25rem;opacity:0;transition:opacity .4s ease}
        .card-footer-indicator .dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.15);transition:all .3s ease}
        .card-footer-indicator .dot.active{background:rgba(255,255,255,.5);width:14px;border-radius:4px}
        .card-footer-indicator .page-label{font-size:.4rem;opacity:.3;margin-left:.3rem;letter-spacing:.06em;font-weight:500}

        .hint{text-align:center;margin-top:1.5rem;font-size:.7rem;color:#7b8fa0;letter-spacing:.04em}
        body.dark .hint{color:#94a3b8}
        .hint i{margin-right:.4rem;color:#2d7aff;animation:pulse 2s ease-in-out infinite}
        @keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
        .footer{margin-top:2.5rem;padding:1.2rem 1.5rem 0;border-top:1px solid rgba(0,0,0,.04);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem}
        body.dark .footer{border-top-color:rgba(255,255,255,.06)}
        .footer .meta{font-size:.75rem;color:#7b8fa0}
        body.dark .footer .meta{color:#94a3b8}
        .footer .meta i{margin-right:.3rem}
        .footer .meta span{margin-right:1.2rem}
        .footer .action{background:rgba(255,255,255,.6);backdrop-filter:blur(8px);padding:.3rem 1.2rem;border-radius:40px;font-size:.75rem;color:#1a2c3f;border:1px solid rgba(255,255,255,.4);cursor:default;transition:.2s}
        body.dark .footer .action{background:rgba(30,41,59,.6);color:#e2e8f0}.footer .action:hover{background:rgba(255,255,255,.8);border-color:rgba(255,255,255,.8)}
        body.dark .footer .action:hover{background:rgba(30,41,59,.8)}
        .footer .action i{margin-right:.4rem;color:#2d7aff}

        @media(max-width:1200px){
            .focus-card{min-width:180px;max-width:280px;height:280px;padding:1rem 1.2rem 0.8rem;transform:scale(0.85)}
            .focus-card:not(:first-child){margin-left:-110px}
        .focus-card.active + .focus-card{margin-left:0}
            .focus-card.active{min-width:340px;max-width:540px;height:430px;padding:1.3rem 1.5rem 1.1rem;transform:none;z-index:20!important;margin-right:96px}
            .focus-card:not(.active){min-width:150px;max-width:200px;height:280px;padding:0.6rem 0.8rem 0.4rem}
            .focus-card:not(.active) .card-title-area .grade-name{font-size:1.3rem}
            .focus-card.active .card-title-area .grade-name{font-size:1.8rem}
            .card-content .col .col-title{font-size:0.85rem}
            .card-content .col .chapter-item .num-badge{min-width:20px;height:20px;font-size:0.6rem}
            .focus-card.active .card-content .col .chapter-item .num-badge{min-width:24px;height:24px;font-size:0.7rem}
        }
        @media(max-width:1000px){
            .page-container{padding:1rem}
            .page-header h1{font-size:1.6rem}
            .cards-stack{flex-wrap:wrap;justify-content:center;gap:.8rem;padding:.5rem}
            .focus-card{flex:0 0 calc(50% - .8rem)!important;min-width:calc(50% - .8rem)!important;max-width:calc(50% - .8rem)!important;width:auto!important;height:auto!important;margin-left:0!important;padding:.8rem 1rem .6rem;border-radius:24px;transform:scale(1)!important;filter:brightness(1) saturate(1)!important;opacity:1!important}
            .focus-card:not(.active) .card-title-area .grade-name{font-size:1.3rem}
            .focus-card .card-footer-indicator{opacity:.2!important}
            .focus-card .card-content{opacity:1!important;max-height:500px!important;padding-top:.6rem!important;overflow:visible!important}
            .focus-card.active{margin-right:0!important;box-shadow:none!important}
            .card-content .col .col-title{font-size:.7rem!important}
            .card-content .col .chapter-item{font-size:.7rem!important}
            .card-content .col .chapter-item .num-badge{min-width:18px!important;height:18px!important;font-size:.55rem!important}
            .focus-card.active .card-content .col .chapter-item .num-badge{min-width:22px!important;height:22px!important;font-size:.65rem!important}
        }
        @media(max-width:600px){
            .page-container{padding:1rem .5rem}
            .page-header h1{font-size:1.5rem}
            .page-header .sub{font-size:.7rem}
            .cards-stack{gap:.6rem;padding:.3rem .2rem;width:auto!important;margin:0!important}
            .focus-card{position:relative;left:auto!important;top:auto!important;transform:scale(1)!important;filter:brightness(1) saturate(1)!important;flex:0 0 calc(50% - .5rem)!important;min-width:calc(50% - .5rem)!important;max-width:calc(50% - .5rem)!important;padding:.6rem .6rem .4rem;border-radius:16px;height:auto!important}
            .focus-card .card-title-area .grade-name{font-size:1.1rem}
            .card-content .col .chapter-item{font-size:.5rem!important}
            .card-content .col .chapter-item .num-badge{min-width:16px!important;height:16px!important;font-size:.45rem!important}
            .focus-card.active .card-content .col .chapter-item .num-badge{min-width:18px!important;height:18px!important;font-size:.5rem!important}
            .card-content .col .col-title{font-size:.6rem!important}
            .focus-card .card-footer-indicator{display:none}
            .focus-card.active{margin-right:0!important}
            .footer .meta span{font-size:.5rem;margin-right:.4rem}
            .footer .action{font-size:.5rem;padding:.15rem .5rem}
            .hint{font-size:.55rem;margin-top:1rem}
        }
        @media(max-width:420px){
            .focus-card{flex:0 0 calc(50% - .3rem)!important;min-width:calc(50% - .3rem)!important;max-width:calc(50% - .3rem)!important;padding:.5rem .4rem .3rem!important;border-radius:14px}
            .focus-card.active{margin-right:0!important}
            .focus-card .card-title-area .grade-name{font-size:.95rem}
            .card-content .col .chapter-item{font-size:.45rem!important}
            .card-content .col .chapter-item .num-badge{min-width:14px!important;height:14px!important;font-size:.4rem!important}
            .focus-card.active .card-content .col .chapter-item .num-badge{min-width:16px!important;height:16px!important;font-size:.45rem!important}
            .card-content .col .col-title{font-size:.5rem!important}
        }