:root{color-scheme:dark;--bg:#0b0f14;--ink:#f4f1eb;--muted:#a1a9b4;--cyan:#5ce1df;--red:#fe2c55;--line:#ffffff15}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Bahnschrift,"Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 85% 5%,#14363770,transparent 45%),radial-gradient(ellipse at 0% 90%,#521b2525,transparent 45%)}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.shell{position:relative;max-width:1100px;margin:auto;padding:32px 40px 24px}.masthead{display:flex;align-items:center;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16px;letter-spacing:1px}.brand-icon{width:34px;height:34px;display:grid;place-items:center;background:var(--cyan);color:var(--bg);border-radius:10px}.brand-icon svg{width:20px;height:20px}.edition{font-size:10px;letter-spacing:2px;color:var(--muted)}.stage{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;padding-top:48px}.hero{position:relative;padding:18px 0}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--cyan);font-size:11px;letter-spacing:2.5px}.dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px #5ce1df80}h1{font-size:clamp(44px,5vw,64px);line-height:1.22;letter-spacing:-2px;margin:24px 0 18px;font-weight:800}h1 span{color:var(--cyan)}.intro{color:var(--muted);font-size:14px;line-height:1.9;margin:0;max-width:300px}
.reel{position:absolute;right:4px;top:61px;width:98px;height:132px;transform:rotate(16deg);border:1px solid #5ce1df40;border-radius:15px;background:linear-gradient(145deg,#5ce1df18,#5ce1df03);display:grid;place-items:center;box-shadow:13px 14px 0 -1px var(--bg),13px 14px 0 0 #fe2c5545;opacity:.8}.reel svg{width:40px;height:40px;color:var(--cyan);stroke-width:1}.reel:before,.reel:after{content:"";position:absolute;top:10px;bottom:10px;width:4px;border-left:4px dotted #5ce1df55}.reel:before{left:8px}.reel:after{right:8px}.hero-copy{position:relative;z-index:1}
.open-main{display:flex;align-items:center;gap:13px;background:var(--red);border:1px solid #ff496a;border-radius:15px;padding:17px 19px;margin-top:30px;transition:transform .2s,background .2s;box-shadow:0 10px 35px #fe2c551c}.open-main:hover{transform:translateY(-2px);background:#e8244a}.open-main>svg:first-child{width:25px;height:25px}.button-copy{display:flex;flex-direction:column;gap:4px}.button-copy strong{font-size:17px}.button-copy small{font-size:11px;letter-spacing:.7px;color:#fff9}.open-main .arrow{margin-left:auto}.secondary{display:flex;justify-content:space-between;align-items:center;margin:17px 0 0;font-size:12px;color:var(--muted)}.secondary a{display:flex;gap:6px;align-items:center;color:var(--ink);padding:8px 0}.secondary svg{width:14px;height:14px}.guide{display:flex;align-items:center;gap:9px;margin-top:30px;color:#87929e;font-size:10px;letter-spacing:1px}.guide b{color:var(--cyan);font-weight:400}.guide i{height:1px;width:20px;background:#ffffff25}
.playlist{padding-top:15px}.list-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.list-heading h2{margin:0;font-size:18px;font-weight:600}.list-heading p{margin:7px 0 0;color:var(--muted);font-size:11px}.count{font-size:29px;line-height:1;color:var(--cyan);font-weight:300}.count small{font-size:10px;color:var(--muted);margin-left:4px}.video-list{list-style:none;padding:0;margin:0;display:grid;gap:11px}.video{display:flex;align-items:center;gap:14px;padding:13px;background:#ffffff04;border:1px solid var(--line);border-radius:15px;transition:background .2s,border-color .2s,transform .2s}.video:hover{background:#ffffff08;border-color:#5ce1df40;transform:translateX(3px)}.cover{position:relative;flex:0 0 62px;height:76px;border-radius:9px;overflow:hidden;background:#16352f;display:grid;place-items:center}.cover svg{width:28px;height:28px;stroke-width:1.2;opacity:.9}.cover:before{content:"";position:absolute;width:75px;height:75px;border:1px solid #ffffff30;transform:rotate(-30deg);left:24px;top:29px}.cover:after{content:"";position:absolute;width:48px;height:48px;border:1px solid #ffffff20;border-radius:50%;left:-26px;top:-15px}.cover-1{background:linear-gradient(145deg,#264842,#142329);color:#a9e3cb}.cover-2{background:linear-gradient(145deg,#33444c,#14232f);color:#c7dce8}.cover-3{background:linear-gradient(145deg,#654c31,#30251c);color:#f4d39b}.cover-4{background:linear-gradient(145deg,#773345,#331922);color:#ffb3c1}.info{min-width:0;flex:1}.row-top{display:flex;gap:8px;align-items:center;font-size:9px;letter-spacing:1px;color:#87929e;margin-bottom:7px}.row-top .number{color:var(--muted);font-size:11px}.task-tag{color:#ff8b9f;border:1px solid #fe2c5540;background:#fe2c5510;padding:2px 6px;border-radius:4px;font-size:9px;letter-spacing:0}.info h3{font-size:14px;margin:0 0 5px;font-weight:600;line-height:1.45}.info p{font-size:11px;line-height:1.5;margin:0;color:var(--muted)}.video>.go{width:20px;height:20px;color:#7c8795;flex-shrink:0}.current .video{border-color:#fe2c5530;background:#fe2c5505}
.note{border-top:1px solid var(--line);margin-top:23px;padding-top:17px;display:flex;align-items:flex-start;gap:8px}.note svg{width:14px;height:14px;flex-shrink:0;color:#8994a0;margin-top:2px}.note p{font-size:11px;color:#8994a0;line-height:1.8;margin:0}.footer{display:flex;justify-content:space-between;color:#87929e;font-size:9px;letter-spacing:1.8px;border-top:1px solid var(--line);margin-top:50px;padding-top:20px}.reveal{animation:arrive .65s both}.playlist{animation-delay:.12s}@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:800px){.hero{padding-right:18px}.reel{right:5px;top:100px}.open-main,.secondary{max-width:350px}}@media(max-width:799px){.shell{max-width:510px;padding:22px 24px 25px}.masthead{padding-bottom:18px}.stage{display:block;padding-top:25px}.hero{padding:0}.eyebrow{font-size:10px}h1{font-size:44px;margin:17px 0 12px}.intro{font-size:12px;max-width:250px}.reel{width:75px;height:105px;right:12px;top:52px;opacity:.65}.reel svg{width:31px;height:31px}.open-main{margin-top:23px;padding:15px 17px}.secondary{margin-top:10px}.guide{margin-top:17px}.playlist{padding-top:29px}.list-heading{margin-bottom:15px}.list-heading h2{font-size:17px}.video-list{gap:9px}.video{padding:11px;gap:12px}.cover{flex-basis:54px;height:66px}.info h3{font-size:13px}.footer{margin-top:26px}.note{margin-top:18px}}@media(max-width:360px){.shell{padding:18px}.reel{right:0;width:65px}.info p{font-size:10px}}@media(prefers-reduced-motion:reduce){.reveal{animation:none}a{transition:none!important}}