*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{background:#210604;color:#111;font-family:Impact,"Arial Black","Microsoft YaHei",Arial,sans-serif}.site{position:relative;width:100vw;height:100vh;perspective:1400px;overflow:hidden}.page{position:absolute;inset:0;min-height:100vh;padding:42px 52px;overflow:hidden;opacity:0;transform:translateX(100%) rotateY(-18deg) scale(.96);transform-origin:right center;pointer-events:none;transition:opacity .45s ease,transform .75s cubic-bezier(.2,.9,.2,1)}.page.no-motion{transition:none!important}.page.active{opacity:1;transform:translateX(0) rotateY(0) scale(1);pointer-events:auto;z-index:8;overflow:hidden}.page.go-left{opacity:0;transform:translateX(-100%) rotateY(18deg) scale(.96);z-index:6}.page.go-right{opacity:0;transform:translateX(100%) rotateY(-18deg) scale(.96);z-index:6}.paper{position:absolute;inset:0;z-index:1;opacity:.22;pointer-events:none;background-image:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1px),linear-gradient(45deg,rgba(255,255,255,.14),transparent 45%);background-size:5px 5px,100% 100%;mix-blend-mode:multiply}.edge-trigger{position:fixed;right:0;top:0;width:26px;height:100vh;z-index:9000}.edge-trigger span{position:absolute;right:8px;top:50%;width:4px;height:180px;transform:translateY(-50%);background:#ffd21f;border:2px solid #111;box-shadow:4px 4px 0 #d71913}.quick-index{position:fixed;right:20px;top:50%;z-index:9001;width:260px;max-height:78vh;padding:22px;overflow-y:auto;color:#111;background:#f4dfaa;border:6px solid #111;box-shadow:14px 14px 0 #111;transform:translate(115%,-50%) rotate(1deg);opacity:0;transition:.35s cubic-bezier(.2,.9,.2,1)}.edge-trigger:hover+.quick-index,.quick-index:hover{transform:translate(0,-50%) rotate(1deg);opacity:1}.quick-index p{margin-bottom:16px;color:#d71913;font-size:24px;letter-spacing:2px}.quick-index button{width:100%;margin-bottom:8px;color:#111;background:#ffd21f;border:3px solid #111;text-align:left}.quick-index button:hover{background:#111;color:#f4dfaa}.cover{background:radial-gradient(circle at 70% 30%,rgba(255,210,31,.28),transparent 25%),linear-gradient(135deg,#3b0906 0%,#9d130d 42%,#240503 100%);color:#f2dfb5}.nav{position:relative;z-index:20;display:flex;justify-content:space-between;align-items:center;color:#f2dfb5;font-family:Arial,sans-serif;font-weight:900;letter-spacing:4px;font-size:12px}.nav nav{display:flex;gap:12px}button,.nav button{cursor:pointer;font-family:Arial,sans-serif;font-weight:900;letter-spacing:2px;color:#f2dfb5;background:rgba(0,0,0,.18);border:3px solid #f2dfb5;padding:9px 12px;transition:.25s}button:hover,.nav button:hover{color:#111;background:#ffd21f;border-color:#111}.cover-content{position:relative;z-index:10;min-height:calc(100vh - 130px);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:42px}.tagline{font-family:Arial,sans-serif;font-weight:900;letter-spacing:7px;font-size:13px;margin-bottom:26px}.name-title{display:grid;grid-template-columns:repeat(2,max-content);gap:22px 42px;width:fit-content;transform:rotate(-3deg)}.name-title span{display:block;color:#ffd21f;font-size:clamp(96px,12vw,205px);line-height:.88;letter-spacing:0;text-shadow:7px 7px 0 #111,14px 14px 0 #d71913;animation:punch .9s ease both}.name-title span:nth-child(2){transform:translateY(22px) rotate(2deg);animation-delay:.08s}.name-title span:nth-child(3){grid-column:1/span 2;justify-self:center;transform:translateY(-4px) rotate(-1deg);animation-delay:.16s}.slogan{margin-top:42px;max-width:800px;color:#f6e4b8;font-family:"Microsoft YaHei",Arial,sans-serif;font-weight:900;font-size:clamp(20px,2.2vw,34px);line-height:1.45;padding-left:24px;border-left:14px solid #ffd21f;text-shadow:3px 3px 0 #111}.comic-panel{position:relative;z-index:10;width:min(460px,95%);justify-self:end;padding:34px;color:#111;background:#f4dfaa;border:6px solid #111;box-shadow:16px 16px 0 #111;transform:rotate(3deg);animation:floatCard 4s ease-in-out infinite alternate}.comic-panel p{font-family:"Microsoft YaHei",Arial,sans-serif;font-weight:900;font-size:26px;padding:14px 0;border-bottom:4px solid #111}.boom{display:inline-block;margin-bottom:14px;padding:10px 18px;color:#d71913;background:#ffd21f;border:5px solid #111;box-shadow:7px 7px 0 #111;font-size:48px;transform:rotate(-8deg)}.cover-footer{position:absolute;z-index:20;left:52px;right:52px;bottom:30px;display:flex;justify-content:space-between;color:#f2dfb5;font-family:Arial,sans-serif;font-weight:900;letter-spacing:4px;font-size:12px}.shape{position:absolute;z-index:4;pointer-events:none}.red-box{width:190px;height:190px;left:43%;top:16%;background:#d71913;border:6px solid #111;transform:rotate(12deg);animation:driftOne 6s ease-in-out infinite alternate}.yellow-box{width:130px;height:360px;right:11%;bottom:5%;background:#ffd21f;border:6px solid #111;transform:rotate(-14deg);animation:driftTwo 7s ease-in-out infinite alternate}.black-bar{width:120px;height:620px;left:5%;top:18%;background:#111;transform:rotate(-20deg)}.black-slash{width:440px;height:10px;right:20%;top:22%;background:#111;transform:rotate(-16deg)}.red-slash{width:360px;height:12px;left:28%;bottom:17%;background:#ffd21f;border:3px solid #111;transform:rotate(-8deg)}.dots{position:absolute;z-index:2;width:460px;height:460px;background-image:radial-gradient(#111 2.4px,transparent 2.8px);background-size:13px 13px;opacity:.22;transform:rotate(-12deg)}.dots-one{right:3vw;top:13vh}.dots-two{left:-10vw;bottom:-16vh;opacity:.14}.dots-three{right:-5vw;bottom:-8vh;opacity:.18}.resume{padding:28px 44px;background:radial-gradient(circle at 8% 10%,rgba(255,210,31,.22),transparent 24%),linear-gradient(135deg,#f0d7a0 0%,#d94b24 48%,#2a0605 100%)}.resume-red-slab,.resume-yellow-slab{position:absolute;z-index:3;pointer-events:none}.resume-red-slab{width:340px;height:980px;right:-80px;top:-120px;background:rgba(215,25,19,.45);transform:rotate(18deg)}.resume-yellow-slab{width:120px;height:460px;left:4%;bottom:-160px;background:#ffd21f;border:5px solid #111;transform:rotate(84deg)}.page-index{position:absolute;right:44px;top:26px;z-index:10;color:#ffd21f;font-size:78px;line-height:1;text-shadow:5px 5px 0 #111}.resume-header{position:relative;z-index:10}.resume-header p{font-family:Arial,sans-serif;font-weight:900;letter-spacing:7px;font-size:11px;margin-bottom:4px}.resume-header h2{color:#ffd21f;font-size:clamp(56px,6.6vw,108px);line-height:.78;text-shadow:6px 6px 0 #111}.resume-board{position:relative;z-index:10;margin-top:14px;display:grid;grid-template-columns:.72fr 1.28fr;gap:22px;height:calc(100vh - 190px);align-items:stretch}.resume-about{min-height:0;height:100%;padding:26px;color:#f4dfaa;background:#111;border:6px solid #111;box-shadow:16px 16px 0 #ffd21f;transform:rotate(-1deg);display:flex;flex-direction:column;animation:resumeCardIn .8s ease both}.mini-num{color:#d71913;font-size:38px;margin-bottom:6px}.resume-about h3{color:#ffd21f;font-size:clamp(42px,4.8vw,76px);line-height:.9;margin-bottom:8px}.resume-role{color:#d71913;font-family:"Microsoft YaHei",Arial,sans-serif;font-weight:900;font-size:15px;margin-bottom:16px}.about-text{font-family:"Microsoft YaHei",Arial,sans-serif;font-weight:850;font-size:14px;line-height:1.65;margin-bottom:10px}.resume-highlight{margin-top:auto;display:grid;gap:6px}.resume-highlight span{padding-top:7px;border-top:3px solid rgba(255,255,255,.18);font-family:"Microsoft YaHei",Arial,sans-serif;font-weight:900;font-size:13px;line-height:1.35}.resume-main{height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:14px}.resume-card{padding:18px 20px;color:#111;background:#f4dfaa;border:6px solid #111;box-shadow:8px 8px 0 #111;animation:resumePanelIn .75s ease both}.resume-card:nth-child(2){animation-delay:.1s}.resume-card:nth-child(3){animation-delay:.2s}.card-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}.card-head span{color:#d71913;font-size:38px}.card-head h4{font-family:"Microsoft YaHei",Arial,sans-serif;font-weight:900;font-size:24px}.edu-grid strong,.edu-grid p{display:block;font-family:"Microsoft YaHei",Arial,sans-serif;font-weight:900;font-size:15px;line-height:1.5}.edu-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.edu-tags span,.chips span{padding:7px 10px;color:#111;background:#ffd21f;border:3px solid #111;font-family:"Microsoft YaHei",Arial,sans-serif;font-weight:900;font-size:13px}.method-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:3px solid #111;border-left:3px solid #111}.method-grid div{min-height:82px;padding:10px 12px;border-right:3px solid #111;border-bottom:3px solid #111;background:rgba(255,255,255,.22)}.method-grid b{display:block;color:#d71913;font-size:28px;line-height:1;margin-bottom:4px}.method-grid strong{display:block;font-family:"Microsoft YaHei",Arial,sans-serif;font-size:14px;line-height:1.25}.method-grid small{display:block;margin-top:2px;font-family:Arial,sans-serif;font-weight:900;font-size:11px;color:#4a2b1d}.skill-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.skill-columns div{padding:12px;background:#111;color:#f4dfaa;border:4px solid #111;box-shadow:5px 5px 0 #d71913}.skill-columns h5{color:#ffd21f;font-family:"Microsoft YaHei",Arial,sans-serif;font-size:15px;margin-bottom:6px}.skill-columns p{font-family:"Microsoft YaHei",Arial,sans-serif;font-weight:800;font-size:13px;line-height:1.45}.works{padding-bottom:42px;background:linear-gradient(135deg,#221f1a 0%,#8d100c 44%,#f0d7a0 100%);display:grid;grid-template-columns:.8fr 1.2fr;gap:46px;align-items:center}.works-title{position:relative;z-index:10;color:#f4dfaa}.works-title p{font-family:Arial,sans-serif;font-weight:900;letter-spacing:7px;font-size:13px;margin-bottom:12px}.works-title h2{color:#ffd21f;font-size:clamp(82px,10vw,160px);line-height:.9;text-shadow:6px 6px 0 #111}.big-mark{display:inline-block;margin-top:32px;padding:16px 28px;color:#d71913;background:#ffd21f;border:6px solid #111;box-shadow:10px 10px 0 #111;font-size:clamp(54px,8vw,120px);transform:rotate(-8deg)}.works-list{position:relative;z-index:10;display:grid;gap:18px}.works-list a{display:grid;grid-template-columns:105px 1fr;align-items:center;text-decoration:none;color:#111;background:#f4dfaa;border:6px solid #111;padding:20px;box-shadow:12px 12px 0 #111;transform:skewX(-5deg);transition:.25s}.works-list a:hover{background:#ffd21f;transform:translateX(-12px) skewX(-5deg);box-shadow:18px 18px 0 #d71913}.works-list a span{color:#d71913;font-size:56px;line-height:1}.works-list h3{font-family:"Microsoft YaHei",Arial,sans-serif;font-weight:900;font-size:28px;margin-bottom:8px}.works-list p{color:#4a2b1d;font-family:Arial,sans-serif;font-weight:900;letter-spacing:2px}.project-page{padding-bottom:42px;background:radial-gradient(circle at 80% 20%,rgba(255,210,31,.2),transparent 25%),linear-gradient(135deg,#2a0605 0%,#90120c 48%,#f0d7a0 100%)}.project-layout{position:relative;z-index:10;height:calc(100vh - 84px);display:grid;grid-template-columns:.9fr 1.25fr;gap:42px;align-items:center}.project-kicker{color:#ffd21f;font-family:Arial,sans-serif;font-weight:900;letter-spacing:7px;font-size:13px;margin-bottom:22px}.project-left h2{color:#ffd21f;font-size:clamp(66px,8vw,140px);line-height:.92;text-shadow:6px 6px 0 #111;margin-bottom:34px}.project-desc{max-width:680px;color:#f4dfaa;font-family:"Microsoft YaHei",Arial,sans-serif;font-weight:900;font-size:clamp(20px,2vw,34px);line-height:1.55;padding-left:22px;border-left:12px solid #ffd21f;text-shadow:3px 3px 0 #111}.project-visual{min-height:520px;display:grid;place-items:center;color:#111;background:#f4dfaa;border:7px solid #111;box-shadow:18px 18px 0 #111;transform:rotate(1.5deg);font-size:clamp(30px,5vw,82px);text-align:center;padding:34px}.final-page{background:radial-gradient(circle at 20% 25%,rgba(255,210,31,.26),transparent 25%),linear-gradient(135deg,#111 0%,#3b0906 45%,#d71913 100%)}.cursor{position:fixed;z-index:9999;left:-20px;top:-20px;width:18px;height:18px;pointer-events:none;border-radius:50%;background:#ffd21f;border:3px solid #111;transform:translate(-50%,-50%);mix-blend-mode:difference}.flip-flash{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:hidden;opacity:0}.flip-flash.active{animation:transitionHold 1.05s ease both}.wipe{position:absolute;inset:-25%;transform:translateX(-120%) skewX(-18deg) rotate(-4deg);will-change:transform}.wipe-red{background:#d71913;z-index:1}.wipe-yellow{background:#ffd21f;z-index:2;inset:-22%}.wipe-black{background:#111;z-index:3;inset:-18%}.wipe-cream{background:#f4dfaa;z-index:4;inset:-20%}.flip-flash.active .wipe-red{animation:colorWipe 1.05s cubic-bezier(.76,0,.24,1) both}.flip-flash.active .wipe-yellow{animation:colorWipe 1.05s cubic-bezier(.76,0,.24,1) both;animation-delay:.08s}.flip-flash.active .wipe-black{animation:colorWipe 1.05s cubic-bezier(.76,0,.24,1) both;animation-delay:.16s}.flip-flash.active .wipe-cream{animation:colorWipe 1.05s cubic-bezier(.76,0,.24,1) both;animation-delay:.24s}.resume-curtain{position:absolute;inset:-10%;z-index:6;background:linear-gradient(90deg,#111 0 18%,#ffd21f 18% 28%,#f4dfaa 28% 100%);transform:translateX(-115%) rotate(-2deg);border-right:10px solid #111;opacity:0}.flip-flash.resume-special.active{animation:resumeHold 1.2s ease both}.flip-flash.resume-special.active .wipe{animation:none}.flip-flash.resume-special.active .resume-curtain{opacity:1;animation:resumeReveal 1.2s cubic-bezier(.7,0,.2,1) both}.wipe-grain{position:absolute;inset:0;z-index:8;opacity:0;background-image:radial-gradient(rgba(0,0,0,.25) 1px,transparent 1.4px),linear-gradient(90deg,rgba(255,255,255,.18),transparent);background-size:5px 5px,100% 100%;mix-blend-mode:multiply}.flip-flash.active .wipe-grain{animation:grainShow 1.05s ease both}@keyframes colorWipe{0%{transform:translateX(-120%) skewX(-18deg) rotate(-4deg)}38%{transform:translateX(-8%) skewX(-18deg) rotate(-4deg)}62%{transform:translateX(8%) skewX(-18deg) rotate(-4deg)}100%{transform:translateX(125%) skewX(-18deg) rotate(-4deg)}}@keyframes transitionHold{0%{opacity:0}8%{opacity:1}88%{opacity:1}100%{opacity:0}}@keyframes resumeHold{0%{opacity:0}8%{opacity:1}92%{opacity:1}100%{opacity:0}}@keyframes resumeReveal{0%{transform:translateX(-115%) rotate(-2deg)}45%{transform:translateX(-8%) rotate(-2deg)}65%{transform:translateX(6%) rotate(-2deg)}100%{transform:translateX(115%) rotate(-2deg)}}@keyframes grainShow{0%{opacity:0}20%{opacity:.32}70%{opacity:.22}100%{opacity:0}}@keyframes punch{from{opacity:0;transform:scale(.88) rotate(-7deg) translateY(40px)}to{opacity:1;transform:scale(1) rotate(0) translateY(0)}}@keyframes floatCard{from{transform:rotate(3deg) translateY(-10px)}to{transform:rotate(1deg) translateY(12px)}}@keyframes driftOne{from{transform:rotate(12deg) translate(0,0)}to{transform:rotate(18deg) translate(24px,-18px)}}@keyframes driftTwo{from{transform:rotate(-14deg) translate(0,0)}to{transform:rotate(-8deg) translate(-22px,24px)}}@keyframes resumeCardIn{from{opacity:0;transform:translateX(-36px) rotate(-3deg)}to{opacity:1;transform:translateX(0) rotate(-1deg)}}@keyframes resumePanelIn{from{opacity:0;transform:translateX(42px)}to{opacity:1;transform:translateX(0)}}@media(max-width:980px){.page{padding:28px 24px}.cover-content,.resume-board,.works,.project-layout{grid-template-columns:1fr}.cover-content{padding-top:70px}.nav nav{display:none}.name-title{gap:14px 24px}.name-title span{font-size:clamp(82px,25vw,140px)}.comic-panel{justify-self:start;width:100%}.cover-footer{position:absolute;left:24px;right:24px;bottom:20px;gap:10px;flex-direction:column}.page-index{right:24px;top:24px;font-size:60px}.resume{padding:24px}.resume-board{height:auto}.method-grid,.skill-columns{grid-template-columns:1fr 1fr}.works-list a{grid-template-columns:70px 1fr}.works-list h3{font-size:21px}.project-visual{min-height:300px}.cursor{display:none}}
/* ===== Resume v3: fuller left copy + education/practice card, one-screen layout ===== */
.resume {
padding: 26px 44px !important;
}
.resume-header h2 {
font-size: clamp(62px, 7vw, 118px) !important;
}
.resume-board {
grid-template-columns: 0.86fr 1.14fr !important;
gap: 24px !important;
height: calc(100vh - 176px) !important;
margin-top: 12px !important;
}
.resume-about {
padding: 28px 30px !important;
justify-content: flex-start !important;
}
.resume-about h3 {
font-size: clamp(56px, 6.1vw, 96px) !important;
margin-bottom: 8px !important;
}
.resume-role {
font-size: 18px !important;
margin-bottom: 18px !important;
}
.about-text {
font-size: clamp(14px, 1.05vw, 17px) !important;
line-height: 1.72 !important;
margin-bottom: 12px !important;
}
.lead-text {
color: #fff1bd;
font-size: clamp(15px, 1.15vw, 18px) !important;
}
.life-text {
opacity: 0.92;
}
.resume-highlight {
margin-top: 16px !important;
gap: 7px !important;
}
.resume-highlight span {
font-size: clamp(12px, 0.88vw, 14px) !important;
line-height: 1.35 !important;
padding-top: 7px !important;
}
.resume-main {
grid-template-rows: 0.92fr 1.05fr 0.58fr !important;
gap: 13px !important;
}
.resume-card {
padding: 16px 18px !important;
}
.card-head {
margin-bottom: 8px !important;
}
.card-head span {
font-size: 36px !important;
}
.card-head h4 {
font-size: 25px !important;
}
.edu-practice-grid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 16px;
}
.edu-block,
.practice-block {
min-height: 0;
}
.edu-block strong,
.practice-block strong {
display: block;
font-family: "Microsoft YaHei", Arial, sans-serif;
font-weight: 900;
font-size: clamp(15px, 1vw, 18px);
line-height: 1.45;
margin-bottom: 5px;
}
.edu-block p,
.practice-block p {
font-family: "Microsoft YaHei", Arial, sans-serif;
font-weight: 900;
font-size: clamp(13px, 0.9vw, 15px);
line-height: 1.45;
}
.practice-block {
padding-left: 16px;
border-left: 4px solid #111;
}
.edu-tags {
gap: 6px !important;
margin-top: 8px !important;
}
.edu-tags span {
padding: 6px 9px !important;
font-size: clamp(11px, 0.78vw, 13px) !important;
}
.method-grid div {
min-height: 76px !important;
padding: 8px 10px !important;
}
.method-grid b {
font-size: 26px !important;
}
.method-grid strong {
font-size: clamp(12px, 0.9vw, 14px) !important;
}
.method-grid small {
font-size: 10px !important;
}
.skill-columns div {
padding: 10px 12px !important;
}
.skill-columns h5 {
font-size: 15px !important;
}
.skill-columns p {
font-size: clamp(11px, 0.85vw, 13px) !important;
}
@media (max-width: 980px) {
.resume-board {
height: auto !important;
grid-template-columns: 1fr !important;
}
.edu-practice-grid {
grid-template-columns: 1fr;
}
.practice-block {
padding-left: 0;
padding-top: 12px;
border-left: none;
border-top: 4px solid #111;
}
}
/* ===== Resume V4: loosen the second page without internal scrolling ===== */
.resume {
padding: 22px 42px !important;
}
.resume-header p {
font-size: 10px !important;
letter-spacing: 6px !important;
margin-bottom: 2px !important;
}
.resume-header h2 {
font-size: clamp(48px, 5.8vw, 92px) !important;
line-height: 0.76 !important;
}
.resume .page-index {
font-size: 70px !important;
top: 20px !important;
right: 42px !important;
}
.resume-board {
margin-top: 12px !important;
grid-template-columns: 0.82fr 1.18fr !important;
gap: 26px !important;
height: calc(100vh - 148px) !important;
}
.resume-about {
padding: 30px 32px !important;
box-shadow: 18px 18px 0 #ffd21f !important;
}
.mini-num {
font-size: 40px !important;
margin-bottom: 8px !important;
}
.resume-about h3 {
font-size: clamp(48px, 5.2vw, 82px) !important;
margin-bottom: 10px !important;
}
.resume-role {
font-size: clamp(14px, 1vw, 17px) !important;
margin-bottom: 18px !important;
}
.about-text {
font-size: clamp(13px, 0.95vw, 15.5px) !important;
line-height: 1.72 !important;
margin-bottom: 12px !important;
}
.lead-text {
font-size: clamp(14px, 1.02vw, 16px) !important;
}
.life-text {
opacity: 0.92;
}
.resume-highlight {
gap: 9px !important;
margin-top: auto !important;
}
.resume-highlight span {
font-size: clamp(12px, 0.9vw, 14px) !important;
line-height: 1.38 !important;
padding-top: 9px !important;
}
.resume-main {
grid-template-rows: 0.9fr 1fr 0.55fr !important;
gap: 18px !important;
}
.resume-card {
padding: 22px 24px !important;
box-shadow: 10px 10px 0 #111 !important;
}
.card-head {
margin-bottom: 12px !important;
gap: 16px !important;
}
.card-head span {
font-size: 40px !important;
}
.card-head h4 {
font-size: clamp(23px, 1.7vw, 30px) !important;
}
.edu-practice-grid {
grid-template-columns: 0.9fr 1.1fr !important;
gap: 20px !important;
}
.edu-block strong,
.practice-block strong {
font-size: clamp(14px, 1vw, 18px) !important;
line-height: 1.5 !important;
margin-bottom: 6px !important;
}
.edu-block p,
.practice-block p {
font-size: clamp(12px, 0.88vw, 15px) !important;
line-height: 1.52 !important;
}
.practice-block {
padding-left: 20px !important;
}
.edu-tags {
gap: 8px !important;
margin-top: 10px !important;
}
.edu-tags span {
padding: 7px 10px !important;
font-size: clamp(10px, 0.78vw, 13px) !important;
}
.method-grid div {
min-height: 82px !important;
padding: 10px 12px !important;
}
.method-grid b {
font-size: clamp(25px, 1.9vw, 34px) !important;
margin-bottom: 5px !important;
}
.method-grid strong {
font-size: clamp(11px, 0.9vw, 14px) !important;
line-height: 1.3 !important;
}
.method-grid small {
font-size: clamp(9px, 0.72vw, 11px) !important;
}
.skill-columns {
gap: 16px !important;
}
.skill-columns div {
padding: 14px 16px !important;
}
.skill-columns h5 {
font-size: clamp(14px, 1vw, 16px) !important;
margin-bottom: 7px !important;
}
.skill-columns p {
font-size: clamp(11px, 0.86vw, 13px) !important;
line-height: 1.48 !important;
}
@media (max-height: 850px) {
.resume-board {
height: calc(100vh - 138px) !important;
}
.resume-about {
padding: 24px 26px !important;
}
.about-text {
font-size: 13px !important;
line-height: 1.58 !important;
margin-bottom: 8px !important;
}
.resume-card {
padding: 16px 18px !important;
}
.resume-main {
gap: 12px !important;
}
.method-grid div {
min-height: 70px !important;
padding: 7px 9px !important;
}
}
/* ===== Resume V5: compact one-screen fix; no extra scrolling, no splitting content ===== */
.resume {
padding: 20px 42px !important;
}
.resume-header p {
font-size: 10px !important;
letter-spacing: 6px !important;
margin-bottom: 0 !important;
}
.resume-header h2 {
font-size: clamp(46px, 5.4vw, 86px) !important;
line-height: 0.76 !important;
}
.resume .page-index {
font-size: 66px !important;
top: 18px !important;
right: 42px !important;
}
.resume-board {
margin-top: 8px !important;
grid-template-columns: 0.82fr 1.18fr !important;
gap: 22px !important;
height: calc(100vh - 168px) !important;
}
.resume-about {
padding: 22px 26px !important;
border-width: 5px !important;
box-shadow: 14px 14px 0 #ffd21f !important;
}
.mini-num {
font-size: 34px !important;
margin-bottom: 5px !important;
}
.resume-about h3 {
font-size: clamp(44px, 4.8vw, 72px) !important;
margin-bottom: 6px !important;
}
.resume-role {
font-size: clamp(13px, 0.95vw, 15px) !important;
margin-bottom: 12px !important;
}
.about-text {
font-size: clamp(12px, 0.86vw, 14px) !important;
line-height: 1.56 !important;
margin-bottom: 8px !important;
}
.lead-text {
font-size: clamp(12.5px, 0.92vw, 14.5px) !important;
}
.resume-highlight {
gap: 5px !important;
margin-top: auto !important;
}
.resume-highlight span {
font-size: clamp(10.5px, 0.78vw, 12.5px) !important;
line-height: 1.24 !important;
padding-top: 6px !important;
border-top-width: 2px !important;
}
.resume-main {
grid-template-rows: 0.8fr 1fr 0.48fr !important;
gap: 12px !important;
}
.resume-card {
padding: 14px 16px !important;
border-width: 5px !important;
box-shadow: 7px 7px 0 #111 !important;
}
.card-head {
margin-bottom: 7px !important;
gap: 12px !important;
}
.card-head span {
font-size: 32px !important;
}
.card-head h4 {
font-size: clamp(20px, 1.45vw, 24px) !important;
}
.edu-practice-grid {
grid-template-columns: 0.88fr 1.12fr !important;
gap: 14px !important;
}
.edu-block strong,
.practice-block strong {
font-size: clamp(12.5px, 0.9vw, 14.5px) !important;
line-height: 1.35 !important;
margin-bottom: 4px !important;
}
.edu-block p,
.practice-block p {
font-size: clamp(10.5px, 0.76vw, 12.5px) !important;
line-height: 1.38 !important;
}
.practice-block {
padding-left: 14px !important;
border-left-width: 3px !important;
}
.edu-tags {
gap: 6px !important;
margin-top: 7px !important;
}
.edu-tags span,
.chips span {
padding: 5px 8px !important;
font-size: clamp(9.5px, 0.68vw, 11.5px) !important;
border-width: 3px !important;
}
.method-grid {
border-top-width: 3px !important;
border-left-width: 3px !important;
}
.method-grid div {
min-height: 64px !important;
padding: 7px 9px !important;
border-right-width: 3px !important;
border-bottom-width: 3px !important;
}
.method-grid b {
font-size: clamp(21px, 1.55vw, 27px) !important;
margin-bottom: 2px !important;
}
.method-grid strong {
font-size: clamp(10.5px, 0.78vw, 12.5px) !important;
line-height: 1.18 !important;
}
.method-grid small {
font-size: clamp(8px, 0.62vw, 9.5px) !important;
margin-top: 1px !important;
}
.skill-columns {
gap: 10px !important;
}
.skill-columns div {
padding: 9px 11px !important;
box-shadow: 4px 4px 0 #d71913 !important;
}
.skill-columns h5 {
font-size: clamp(12px, 0.86vw, 14px) !important;
margin-bottom: 4px !important;
}
.skill-columns p {
font-size: clamp(10px, 0.74vw, 12px) !important;
line-height: 1.28 !important;
}
/* ===== Resume v6: fill four blocks, keep one-screen layout ===== */
@media (min-width: 981px) {
.resume {
padding: 30px 64px 34px;
}
.resume .page-index {
right: 64px;
top: 28px;
font-size: 76px;
}
.resume-header h2 {
font-size: clamp(54px, 6.2vw, 98px);
line-height: 0.78;
}
.resume-board {
margin-top: 18px;
height: calc(100vh - 176px);
grid-template-columns: 0.76fr 1.24fr;
gap: 30px;
}
.resume-about,
.resume-card {
border-width: 5px;
}
.resume-about {
padding: 24px 28px;
box-shadow: 12px 12px 0 #ffd21f;
}
.mini-num {
font-size: 34px;
margin-bottom: 6px;
}
.resume-about h3 {
font-size: clamp(40px, 4.2vw, 68px);
margin-bottom: 6px;
}
.resume-role {
font-size: 14px;
margin-bottom: 14px;
}
.about-text {
font-size: 13.6px;
line-height: 1.58;
margin-bottom: 8px;
}
.lead-text {
font-size: 14.2px;
}
.about-matrix {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 10px;
margin-bottom: 10px;
}
.about-matrix div {
min-height: 74px;
padding: 10px;
background: rgba(255, 210, 31, 0.08);
border: 3px solid rgba(244, 223, 170, 0.32);
}
.about-matrix b {
display: block;
color: #ffd21f;
font-size: 18px;
line-height: 1;
margin-bottom: 7px;
}
.about-matrix span {
display: block;
color: #f4dfaa;
font-family: "Microsoft YaHei", Arial, sans-serif;
font-weight: 900;
font-size: 11px;
line-height: 1.35;
}
.resume-highlight {
margin-top: auto;
gap: 6px;
}
.resume-highlight span {
font-size: 12px;
line-height: 1.28;
padding-top: 6px;
}
.resume-main {
grid-template-rows: 0.92fr 1.08fr 0.72fr;
gap: 16px;
}
.resume-card {
padding: 16px 18px;
box-shadow: 8px 8px 0 #111;
overflow: hidden;
}
.card-head {
margin-bottom: 10px;
}
.card-head span {
font-size: 34px;
}
.card-head h4 {
font-size: 22px;
}
.education-card {
display: flex;
flex-direction: column;
}
.edu-practice-grid {
flex: 1;
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 18px;
align-items: stretch;
}
.edu-block,
.practice-block {
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
}
.edu-grid strong,
.edu-grid p,
.edu-practice-grid strong,
.edu-practice-grid p {
font-size: 14px;
line-height: 1.42;
}
.practice-block {
border-left: 4px solid #111;
padding-left: 18px;
}
.practice-points {
margin: 7px 0 8px 18px;
font-family: "Microsoft YaHei", Arial, sans-serif;
font-weight: 900;
font-size: 11.5px;
line-height: 1.45;
}
.edu-tags {
gap: 7px;
margin-top: 8px;
}
.edu-tags span,
.chips span {
padding: 6px 9px;
font-size: 12px;
border-width: 3px;
}
.methods-card {
display: flex;
flex-direction: column;
}
.method-grid {
flex: 1;
min-height: 0;
grid-template-columns: repeat(4, 1fr);
}
.method-grid div {
min-height: 0;
padding: 10px 12px;
display: flex;
flex-direction: column;
justify-content: center;
}
.method-grid b {
font-size: 26px;
margin-bottom: 4px;
}
.method-grid strong {
font-size: 13px;
}
.method-grid small {
font-size: 10.5px;
}
.skills-card {
display: flex;
flex-direction: column;
}
.skill-columns {
flex: 1;
gap: 14px;
}
.skill-columns div {
padding: 12px 14px;
display: flex;
flex-direction: column;
justify-content: center;
}
.skill-columns h5 {
font-size: 14px;
}
.skill-columns p {
font-size: 12.5px;
}
}
/* ===== Resume V7: tighter hierarchy, fuller modules, hover focus ===== */
.resume-header h2 {
font-size: clamp(40px, 4.8vw, 74px) !important;
line-height: 0.82 !important;
}
.resume-board {
margin-top: 16px !important;
gap: 28px !important;
height: calc(100vh - 172px) !important;
}
.resume-about {
padding: 24px 28px !important;
}
.resume-about h3 {
font-size: clamp(42px, 4.4vw, 70px) !important;
}
.resume-role {
font-size: 14px !important;
margin-bottom: 14px !important;
}
.about-text {
font-size: clamp(14px, 0.96vw, 15.6px) !important;
line-height: 1.62 !important;
margin-bottom: 10px !important;
}
.lead-text {
font-size: clamp(15px, 1.03vw, 16.6px) !important;
}
.life-text {
margin-bottom: 12px !important;
}
.about-matrix {
gap: 10px !important;
margin-top: 12px !important;
margin-bottom: 14px !important;
}
.about-matrix div {
min-height: 78px !important;
padding: 12px 11px !important;
}
.about-matrix b {
font-size: 20px !important;
margin-bottom: 8px !important;
}
.about-matrix span {
font-size: 11.5px !important;
line-height: 1.36 !important;
}
.resume-highlight span {
font-size: 12.2px !important;
}
.resume-main {
grid-template-rows: 0.88fr 0.98fr 0.46fr !important;
gap: 15px !important;
}
.resume-card {
padding: 16px 18px !important;
}
.card-head {
margin-bottom: 10px !important;
}
.edu-practice-grid {
grid-template-columns: 0.98fr 1.02fr !important;
gap: 18px !important;
}
.edu-practice-grid strong,
.edu-block strong,
.practice-block strong {
font-size: clamp(16px, 1.08vw, 18px) !important;
line-height: 1.35 !important;
}
.edu-practice-grid p,
.edu-block p,
.practice-block p {
font-size: clamp(14px, 0.94vw, 15.5px) !important;
line-height: 1.42 !important;
}
.practice-points {
font-size: 12.5px !important;
line-height: 1.42 !important;
margin: 9px 0 10px 18px !important;
}
.edu-tags {
gap: 7px !important;
margin-top: 8px !important;
}
.edu-tags span,
.chips span {
font-size: 12px !important;
padding: 6px 9px !important;
}
.methods-card {
overflow: hidden !important;
}
.method-grid {
flex: 1 !important;
grid-template-columns: repeat(4, 1fr) !important;
grid-auto-rows: 1fr !important;
}
.method-grid div {
min-height: 0 !important;
padding: 8px 10px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
gap: 2px !important;
}
.method-grid b {
font-size: clamp(40px, 2.5vw, 50px) !important;
line-height: 0.9 !important;
margin-bottom: 2px !important;
}
.method-grid strong {
font-size: clamp(15px, 1.05vw, 17px) !important;
line-height: 1.08 !important;
}
.method-grid small {
display: block !important;
margin-top: 1px !important;
font-size: clamp(11px, 0.78vw, 12.5px) !important;
line-height: 1.1 !important;
text-align: center !important;
}
.skills-card {
overflow: hidden !important;
}
.skill-columns {
gap: 12px !important;
}
.skill-columns div {
padding: 11px 13px !important;
}
.skill-columns h5 {
font-size: 15px !important;
margin-bottom: 6px !important;
}
.skill-columns p {
font-size: 12.6px !important;
line-height: 1.38 !important;
}
/* hover focus for the four resume modules */
.resume-module {
position: relative;
transition:
transform 0.28s ease,
filter 0.28s ease,
opacity 0.28s ease,
box-shadow 0.28s ease;
transform-origin: center center;
}
.resume-board.focus-mode .resume-module {
filter: saturate(0.8) brightness(0.9);
}
.resume-board.focus-mode .resume-module.module-dim {
opacity: 0.72;
filter: blur(1.1px) saturate(0.58) brightness(0.88);
}
.resume-board.focus-mode .resume-module.module-active {
z-index: 20;
opacity: 1;
filter: none;
transform: scale(1.028);
}
.resume-board.focus-mode .resume-about.module-active {
box-shadow: 18px 18px 0 #ffd21f !important;
}
.resume-board.focus-mode .resume-card.module-active {
box-shadow: 12px 12px 0 #111 !important;
}
@media (max-height: 860px) {
.resume-header h2 {
font-size: clamp(38px, 4.3vw, 66px) !important;
}
.resume-board {
height: calc(100vh - 164px) !important;
gap: 22px !important;
}
.resume-about {
padding: 22px 24px !important;
}
.about-text {
font-size: 13.4px !important;
line-height: 1.52 !important;
margin-bottom: 8px !important;
}
.about-matrix div {
min-height: 72px !important;
padding: 10px !important;
}
.resume-main {
gap: 12px !important;
}
.edu-practice-grid strong,
.edu-block strong,
.practice-block strong {
font-size: 15px !important;
}
.edu-practice-grid p,
.edu-block p,
.practice-block p {
font-size: 13px !important;
}
.practice-points {
font-size: 11.5px !important;
margin: 7px 0 8px 16px !important;
}
.method-grid b {
font-size: 34px !important;
}
.method-grid strong {
font-size: 13.5px !important;
}
.method-grid small {
font-size: 10.5px !important;
}
.skill-columns p {
font-size: 12px !important;
}
}
/* ===== Boat Map Main Entrance ===== */
.quick-index a {
display: block;
width: 100%;
margin-bottom: 8px;
padding: 9px 12px;
color: #111;
background: #f4dfaa;
border: 3px solid #111;
text-align: left;
text-decoration: none;
font-family: Arial, "Microsoft YaHei", sans-serif;
font-weight: 900;
letter-spacing: 1px;
}
.quick-index a:hover {
background: #111;
color: #f4dfaa;
}
.boat-map-page {
background:
radial-gradient(circle at 70% 20%, rgba(255,210,31,.22), transparent 26%),
linear-gradient(135deg, #f4dfaa 0%, #d94b24 42%, #240503 100%);
color: #111;
}
.boat-map-page .paper {
opacity: .28;
}
.map-paper {
position: absolute;
inset: 28px;
z-index: 2;
border: 6px solid #111;
background:
linear-gradient(rgba(255,255,255,.12), rgba(0,0,0,.08)),
url("assets/scroll_texture.png");
background-size: cover;
box-shadow: 18px 18px 0 #111;
transform: rotate(-0.5deg);
pointer-events: none;
}
.map-ui {
position: absolute;
z-index: 20;
left: 72px;
top: 60px;
max-width: 620px;
pointer-events: none;
}
.map-ui p {
font-family: Arial, sans-serif;
font-weight: 900;
letter-spacing: 8px;
font-size: 13px;
margin-bottom: 14px;
}
.map-ui h2 {
color: #ffd21f;
font-size: clamp(58px, 7vw, 128px);
line-height: .88;
text-shadow: 6px 6px 0 #111;
}
.map-help {
display: inline-block;
margin-top: 24px;
padding: 13px 16px;
color: #f4dfaa;
background: #111;
border: 4px solid #111;
box-shadow: 8px 8px 0 #d71913;
font-family: "Microsoft YaHei", Arial, sans-serif;
font-weight: 900;
}
.river-viewport {
position: absolute;
z-index: 10;
left: 52px;
right: 52px;
bottom: 54px;
height: 56vh;
overflow: hidden;
border: 6px solid #111;
background: #284956;
box-shadow: 14px 14px 0 #111;
}
.river-world {
position: relative;
width: 3600px;
height: 100%;
transform: translateX(0);
transition: transform .18s ease-out;
}
.water-layer {
position: absolute;
inset: 0;
background:
linear-gradient(rgba(255,255,255,.08), rgba(0,0,0,.12)),
url("assets/map_water_bg.png");
background-size: 100% 100%;
}
.water-layer::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 12% 80%, rgba(255,210,31,.16), transparent 16%),
radial-gradient(circle at 40% 55%, rgba(255,255,255,.18), transparent 10%),
radial-gradient(circle at 72% 70%, rgba(255,255,255,.18), transparent 12%);
mix-blend-mode: screen;
}
.island {
position: absolute;
width: 240px;
height: 240px;
text-decoration: none;
transform: translate(-50%, -50%);
transition: .28s ease;
}
.island img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(12px 12px 0 rgba(0,0,0,.75));
}
.island span {
position: absolute;
left: 50%;
bottom: -18px;
transform: translateX(-50%);
white-space: nowrap;
padding: 8px 12px;
color: #111;
background: #ffd21f;
border: 4px solid #111;
box-shadow: 5px 5px 0 #111;
font-family: "Microsoft YaHei", Arial, sans-serif;
font-weight: 900;
}
.island:hover,
.island.near {
transform: translate(-50%, -50%) scale(1.12) rotate(-3deg);
z-index: 20;
}
.island:hover span,
.island.near span {
background: #f4dfaa;
box-shadow: 8px 8px 0 #d71913;
}
.island-child { left: 620px; top: 58%; }
.island-polar { left: 1320px; top: 36%; }
.island-ai { left: 2050px; top: 62%; }
.island-astory { left: 2780px; top: 38%; }
.island-more { left: 3300px; top: 68%; }
.island.featured {
width: 310px;
height: 310px;
}
.boat-wrap {
position: absolute;
left: 420px;
top: 68%;
width: 220px;
height: 140px;
transform: translate(-50%, -50%);
transition: left .18s ease-out, transform .2s ease;
z-index: 15;
}
.boat-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(10px 10px 0 rgba(0,0,0,.65));
}
.boat-wrap.rowing {
transform: translate(-50%, -50%) rotate(-2deg) scale(1.04);
}
.map-progress {
position: absolute;
z-index: 30;
left: 70px;
right: 70px;
bottom: 22px;
display: grid;
grid-template-columns: 72px 1fr;
gap: 14px;
align-items: center;
color: #f4dfaa;
font-family: Arial, sans-serif;
font-weight: 900;
letter-spacing: 3px;
}
.map-progress div {
height: 8px;
background: rgba(0,0,0,.42);
border: 2px solid #111;
}
.map-progress i {
display: block;
width: 0%;
height: 100%;
background: #ffd21f;
}
@media (max-width: 980px) {
.map-paper { inset: 18px; }
.map-ui { left: 36px; top: 44px; }
.river-viewport { left: 24px; right: 24px; height: 50vh; }
}
/* ===== v2: personal logo + extra UI/UX island ===== */
.river-world{
width:4300px !important;
}
.island-uiux{
left:3350px;
top:43%;
}
.island-more{
left:3930px !important;
top:68%;
}
/* ===== v4 FIX: keep page 01/02, only rebuild page 03 boat map ===== */
.river-world{
width: 6600px !important;
}
.water-layer{
background:
linear-gradient(rgba(255,255,255,.08), rgba(0,0,0,.12)),
url("assets/map_water_bg.png") !important;
background-size: 1600px 100% !important;
background-repeat: repeat-x !important;
background-position: 0 0 !important;
}
/* correct island order: child → polar → astory → ai → uiux → other → experiments */
.island-child { left: 620px !important; top: 58% !important; animation: islandFloatKid 3.2s ease-in-out infinite; }
.island-polar { left: 1450px !important; top: 34% !important; animation: islandFloatPolar 3.9s ease-in-out infinite; }
.island-astory { left: 2350px !important; top: 62% !important; animation: islandFloatAstory 4.2s ease-in-out infinite; }
.island-ai { left: 3250px !important; top: 36% !important; animation: islandFloatAi 3.6s ease-in-out infinite; }
.island-uiux{ left: 4150px !important; top: 60% !important; animation: islandFloatUiux 3.3s ease-in-out infinite; }
.island-other{ left: 5050px !important; top: 35% !important; animation: islandFloatOther 4s ease-in-out infinite; }
.island-more{ left: 5950px !important; top: 66% !important; animation: islandFloatMore 3.5s ease-in-out infinite; }
.island.entering{
z-index: 80;
animation: islandClickPunch .7s cubic-bezier(.2,.9,.2,1) both !important;
}
.boat-speech{
position:absolute;
left:62%;
top:-32px;
z-index:30;
min-width:190px;
max-width:280px;
padding:10px 13px;
color:#111;
background:#fff0b8;
border:4px solid #111;
box-shadow:5px 5px 0 #111;
font-family:"Microsoft YaHei", Arial, sans-serif;
font-size:13px;
line-height:1.45;
font-weight:900;
opacity:0;
transform:translateY(10px) scale(.96) rotate(-1deg);
transition:opacity .18s ease, transform .18s ease;
pointer-events:none;
}
.boat-speech.show{
opacity:1;
transform:translateY(0) scale(1) rotate(-1deg);
}
.boat-speech:after{
content:"";
position:absolute;
left:18px;
bottom:-14px;
width:18px;
height:18px;
background:#fff0b8;
border-right:4px solid #111;
border-bottom:4px solid #111;
transform:rotate(45deg);
}
.island-enter-flash{
position:absolute;
inset:0;
z-index:120;
overflow:hidden;
pointer-events:none;
opacity:0;
}
.island-enter-flash.active{
opacity:1;
}
.enter-wipe{
position:absolute;
inset:-12%;
background:#d73925;
border-right:14px solid #111;
transform:translateX(-118%) skewX(-13deg);
}
.island-enter-flash.active .enter-wipe{
animation: enterWipe 1.05s cubic-bezier(.74,.01,.18,1) forwards;
}
.enter-title{
position:absolute;
left:50%;
top:50%;
z-index:5;
min-width:min(620px,80vw);
padding:18px 28px;
transform:translate(-50%,-50%) rotate(-2deg) scale(.65);
color:#111;
background:#f6d643;
border:7px solid #111;
box-shadow:10px 10px 0 #111;
text-align:center;
font-size:clamp(30px,5.6vw,78px);
line-height:.95;
font-weight:1000;
text-shadow:4px 4px 0 rgba(215,57,37,.44);
opacity:0;
}
.island-enter-flash.active .enter-title{
animation: enterTitle .95s ease both;
}
.island-enter-flash.child .enter-wipe{ background:#7bd7ff; }
.island-enter-flash.child .enter-wipe:after{
content:"";position:absolute;inset:0;opacity:.45;
background-image:radial-gradient(circle,#fff 0 8px,transparent 9px);
background-size:90px 90px;
animation:bubbleDrift 1s linear infinite;
}
.island-enter-flash.polar .enter-wipe{ background:linear-gradient(135deg,#e8fbff,#2f74b7); }
.island-enter-flash.polar .enter-wipe:after{
content:"";position:absolute;inset:0;opacity:.5;
background:repeating-linear-gradient(120deg,transparent 0 32px,rgba(255,255,255,.55) 33px 40px);
}
.island-enter-flash.astory .enter-wipe{ background:#17110c; }
.island-enter-flash.astory .enter-wipe:after{
content:"";position:absolute;inset:9%;background:#f0dfb8;border:5px solid #111;box-shadow:12px 12px 0 rgba(0,0,0,.7);transform:rotate(-2deg);
}
.island-enter-flash.aihome .enter-wipe{ background:radial-gradient(circle at 28% 44%,#8affdf,transparent 24%),#111827; }
.island-enter-flash.aihome .enter-wipe:after{
content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(138,255,223,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(138,255,223,.24) 1px,transparent 1px);background-size:46px 46px;
}
.island-enter-flash.uiux .enter-wipe{ background:linear-gradient(135deg,#ffd93d,#ef3b2d); }
.island-enter-flash.uiux .enter-wipe:after{
content:"UI UX";position:absolute;right:7vw;bottom:4vh;font-size:16vw;color:rgba(0,0,0,.18);font-weight:1000;letter-spacing:-.12em;transform:rotate(-8deg);
}
.island-enter-flash.other .enter-wipe{ background:linear-gradient(135deg,#2d2d2d,#d8d8d8); }
.island-enter-flash.experiments .enter-wipe{ background:radial-gradient(circle at 18% 28%,#fff06e 0 9%,transparent 10%),radial-gradient(circle at 72% 62%,#d73925 0 12%,transparent 13%),#0d0d0d; }
@keyframes islandFloatKid{0%,100%{margin-top:0}50%{margin-top:-8px}}
@keyframes islandFloatPolar{0%,100%{filter:brightness(1)}50%{filter:brightness(1.14)}}
@keyframes islandFloatAstory{0%,100%{rotate:-.5deg}50%{rotate:1.5deg}}
@keyframes islandFloatAi{0%,100%{filter:drop-shadow(0 0 0 rgba(138,255,223,0))}50%{filter:drop-shadow(0 0 18px rgba(138,255,223,.42))}}
@keyframes islandFloatUiux{0%,100%{margin-top:0;rotate:0deg}50%{margin-top:-6px;rotate:-1.5deg}}
@keyframes islandFloatOther{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(calc(-50% + 4px),-50%)}}
@keyframes islandFloatMore{0%,100%{rotate:-1deg}50%{rotate:2deg}}
@keyframes islandClickPunch{0%{transform:translate(-50%,-50%) scale(1) rotate(0)}35%{transform:translate(-50%,-50%) scale(1.22) rotate(-4deg)}100%{transform:translate(-50%,-50%) scale(1.08) rotate(2deg)}}
@keyframes enterWipe{0%{transform:translateX(-118%) skewX(-13deg)}48%{transform:translateX(0) skewX(-13deg)}100%{transform:translateX(118%) skewX(-13deg)}}
@keyframes enterTitle{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(.52)}28%{opacity:1;transform:translate(-50%,-50%) rotate(2deg) scale(1.08)}70%{opacity:1;transform:translate(-50%,-50%) rotate(-2deg) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(4deg) scale(1.15)}}
@keyframes bubbleDrift{from{background-position:0 0}to{background-position:90px -90px}}
/* ===== 04 / 05: method summary + ending poster ===== */
.method-page,
.ending-page {
background:
radial-gradient(circle at 15% 20%, rgba(255, 218, 58, .16), transparent 28%),
radial-gradient(circle at 82% 18%, rgba(210, 45, 30, .18), transparent 30%),
linear-gradient(125deg, #150706 0%, #7f1d12 44%, #ba3b21 100%);
color: #111;
}
.method-page .paper,
.ending-page .paper { opacity: .28; }
.method-red-block,
.method-yellow-strip,
.method-black-sun,
.ending-red,
.ending-yellow,
.ending-black,
.ending-dots {
position: absolute;
pointer-events: none;
z-index: 2;
}
.method-red-block {
width: 42vw;
height: 34vh;
right: -10vw;
top: 5vh;
background: rgba(202, 48, 35, .92);
transform: skewX(-13deg) rotate(-4deg);
border: 8px solid #111;
animation: methodBlockDrift 7s ease-in-out infinite alternate;
}
.method-yellow-strip {
width: 58vw;
height: 5.8vh;
left: 4vw;
bottom: 6vh;
background: #f6d84a;
border: 5px solid #111;
transform: rotate(-3deg);
box-shadow: 12px 12px 0 #111;
animation: methodStripPulse 3.6s ease-in-out infinite;
}
.method-black-sun {
width: 18vw;
height: 18vw;
right: 8vw;
bottom: 8vh;
border-radius: 50%;
background: repeating-radial-gradient(circle, #111 0 8px, transparent 9px 18px);
opacity: .35;
animation: slowSpin 28s linear infinite;
}
.method-hero {
position: relative;
z-index: 4;
max-width: 980px;
}
.method-hero p,
.ending-kicker {
font-size: clamp(12px, 1vw, 18px);
letter-spacing: .72em;
font-weight: 900;
color: #111;
margin-bottom: 10px;
}
.method-hero h2,
.ending-content h2 {
font-size: clamp(74px, 10.4vw, 172px);
line-height: .86;
color: #f6d84a;
text-shadow: 8px 8px 0 #111, 16px 16px 0 #d23625;
letter-spacing: -.05em;
animation: titlePunchIn .85s cubic-bezier(.18,.92,.22,1.2) both;
}
.method-hero span {
display: block;
margin-top: 24px;
width: min(780px, 58vw);
font-family: "Microsoft YaHei", Arial, sans-serif;
font-size: clamp(18px, 1.55vw, 28px);
line-height: 1.5;
font-weight: 900;
color: #fff1bd;
text-shadow: 3px 3px 0 #111;
}
.method-flow {
position: relative;
z-index: 5;
display: flex;
align-items: center;
gap: 14px;
margin: 26px 0 20px;
width: min(880px, 62vw);
}
.method-flow span {
display: grid;
place-items: center;
min-width: 112px;
height: 48px;
background: #fff1bd;
border: 5px solid #111;
box-shadow: 7px 7px 0 #111;
font-size: 22px;
font-weight: 900;
transform: rotate(-1.5deg);
}
.method-flow i {
flex: 1;
height: 6px;
background: #111;
position: relative;
overflow: hidden;
}
.method-flow i::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, #f6d84a, transparent);
animation: flowLight 1.65s linear infinite;
}
.method-grid {
position: relative;
z-index: 5;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
height: min(42vh, 390px);
margin-top: 18px;
}
.method-card {
position: relative;
overflow: hidden;
background: #fff1bd;
border: 7px solid #111;
box-shadow: 12px 12px 0 #111;
padding: 24px 22px 18px;
transition: transform .35s cubic-bezier(.18,.9,.2,1.18), filter .35s ease, opacity .35s ease;
animation: methodCardRise .7s ease both;
}
.method-card:nth-child(2) { animation-delay: .08s; }
.method-card:nth-child(3) { animation-delay: .16s; }
.method-card:nth-child(4) { animation-delay: .24s; }
.method-card::before {
content: "";
position: absolute;
right: -40px;
top: -40px;
width: 140px;
height: 140px;
background: #d23625;
border: 6px solid #111;
transform: rotate(18deg);
}
.method-card::after {
content: "";
position: absolute;
inset: auto 14px 12px 14px;
height: 4px;
background: repeating-linear-gradient(90deg, #111 0 18px, transparent 18px 28px);
opacity: .45;
}
.method-num {
position: relative;
z-index: 2;
display: inline-block;
font-size: 38px;
line-height: 1;
color: #d23625;
text-shadow: 3px 3px 0 #111;
margin-bottom: 16px;
}
.method-card h3 {
position: relative;
z-index: 2;
font-size: clamp(28px, 2.35vw, 44px);
line-height: 1;
margin-bottom: 18px;
}
.method-card p {
position: relative;
z-index: 2;
font-family: "Microsoft YaHei", Arial, sans-serif;
font-size: clamp(14px, 1.02vw, 17px);
line-height: 1.62;
font-weight: 900;
}
.method-tags {
position: absolute;
z-index: 3;
left: 18px;
right: 18px;
bottom: 28px;
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.method-tags span {
background: #111;
color: #f6d84a;
border: 3px solid #111;
padding: 5px 8px;
font-size: 12px;
font-weight: 900;
font-family: "Microsoft YaHei", Arial, sans-serif;
}
.method-grid:hover .method-card { opacity: .56; filter: grayscale(.42) contrast(.9); }
.method-grid .method-card:hover {
opacity: 1;
filter: none;
transform: translateY(-18px) rotate(-1deg) scale(1.07);
z-index: 9;
}
.method-card:hover::before { animation: cornerPop .55s ease both; }
.method-side-note {
position: absolute;
z-index: 6;
right: 58px;
bottom: 48px;
width: min(360px, 23vw);
background: #111;
color: #fff1bd;
border: 6px solid #f6d84a;
box-shadow: 10px 10px 0 #d23625;
padding: 22px 22px 20px;
transform: rotate(2deg);
animation: sideNoteFloat 3.2s ease-in-out infinite alternate;
}
.method-side-note b {
display: block;
color: #f6d84a;
letter-spacing: .2em;
margin-bottom: 8px;
}
.method-side-note p {
font-family: "Microsoft YaHei", Arial, sans-serif;
font-weight: 900;
font-size: clamp(14px, 1.05vw, 18px);
line-height: 1.55;
}
.ending-red {
width: 54vw;
height: 36vh;
left: -12vw;
top: 12vh;
background: #d23625;
border: 8px solid #111;
transform: rotate(-12deg) skewX(-10deg);
box-shadow: 18px 18px 0 #111;
animation: endingSlideIn .85s cubic-bezier(.18,.92,.22,1) both;
}
.ending-yellow {
width: 42vw;
height: 22vh;
right: -8vw;
bottom: 10vh;
background: #f6d84a;
border: 8px solid #111;
transform: rotate(8deg);
box-shadow: -14px 14px 0 #111;
animation: endingSlideIn .95s cubic-bezier(.18,.92,.22,1) .15s both;
}
.ending-black {
width: 18vw;
height: 88vh;
right: 14vw;
top: -12vh;
background: #111;
transform: rotate(18deg);
opacity: .9;
animation: blackBarDrop .9s ease .1s both;
}
.ending-dots {
width: 36vw;
height: 36vw;
left: 54vw;
top: 8vh;
background: radial-gradient(rgba(0,0,0,.32) 2px, transparent 3px);
background-size: 16px 16px;
opacity: .4;
transform: rotate(-8deg);
}
.ending-content {
position: relative;
z-index: 6;
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - 84px);
max-width: 1100px;
}
.ending-content h2 {
font-size: clamp(86px, 12vw, 210px);
margin-bottom: 34px;
}
.ending-content blockquote {
position: relative;
background: #fff1bd;
border: 8px solid #111;
box-shadow: 14px 14px 0 #111, 26px 26px 0 #d23625;
padding: 28px 34px;
width: min(980px, 68vw);
font-family: "Microsoft YaHei", Arial, sans-serif;
font-size: clamp(27px, 2.7vw, 52px);
line-height: 1.42;
font-weight: 900;
animation: quoteStamp .75s cubic-bezier(.18,.92,.22,1.2) .18s both;
}
.ending-content cite {
display: block;
margin-top: 28px;
color: #fff1bd;
font-size: clamp(20px, 1.7vw, 32px);
font-style: normal;
letter-spacing: .16em;
text-shadow: 4px 4px 0 #111;
}
.ending-actions {
display: flex;
gap: 16px;
margin-top: 30px;
}
.ending-actions button {
cursor: pointer;
background: #111;
color: #f6d84a;
border: 5px solid #f6d84a;
box-shadow: 8px 8px 0 #d23625;
padding: 13px 18px;
font-weight: 900;
font-size: 17px;
font-family: "Microsoft YaHei", Arial, sans-serif;
transition: transform .25s ease, background .25s ease;
}
.ending-actions button:hover {
transform: translateY(-6px) rotate(-1deg);
background: #d23625;
color: #fff1bd;
}
.ending-poster {
position: absolute;
z-index: 7;
right: 54px;
top: 50%;
transform: translateY(-50%) rotate(3deg);
display: grid;
gap: 12px;
color: #f6d84a;
text-shadow: 7px 7px 0 #111;
font-size: clamp(48px, 5.8vw, 112px);
line-height: .86;
letter-spacing: -.04em;
animation: posterFloat 3.4s ease-in-out infinite alternate;
}
.ending-poster span:nth-child(2) { color: #fff1bd; }
.ending-poster span:nth-child(3) { color: #d23625; }
@keyframes methodBlockDrift {
from { transform: skewX(-13deg) rotate(-4deg) translate(0, 0); }
to { transform: skewX(-10deg) rotate(-1deg) translate(-28px, 20px); }
}
@keyframes methodStripPulse {
0%, 100% { transform: rotate(-3deg) scaleX(1); }
50% { transform: rotate(-2deg) scaleX(1.04); }
}
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes titlePunchIn {
from { opacity: 0; transform: translateX(-44px) rotate(-3deg) scale(.94); }
to { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
}
@keyframes flowLight {
from { transform: translateX(-110%); }
to { transform: translateX(110%); }
}
@keyframes methodCardRise {
from { opacity: 0; transform: translateY(42px) rotate(2deg); }
to { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes cornerPop {
0% { transform: rotate(18deg) scale(1); }
55% { transform: rotate(25deg) scale(1.14); }
100% { transform: rotate(18deg) scale(1.04); }
}
@keyframes sideNoteFloat {
from { transform: rotate(2deg) translateY(0); }
to { transform: rotate(-1deg) translateY(-14px); }
}
@keyframes endingSlideIn {
from { opacity: 0; transform: translateX(-80px) rotate(-18deg) skewX(-10deg); }
to { opacity: 1; }
}
@keyframes blackBarDrop {
from { transform: rotate(18deg) translateY(-120%); }
to { transform: rotate(18deg) translateY(0); }
}
@keyframes quoteStamp {
from { opacity: 0; transform: scale(.86) rotate(-3deg); }
to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes posterFloat {
from { transform: translateY(-50%) rotate(3deg) translateX(0); }
to { transform: translateY(-53%) rotate(-1deg) translateX(-18px); }
}
@media (max-width: 1100px) {
.method-grid { grid-template-columns: repeat(2, 1fr); height: auto; }
.method-side-note { display: none; }
.ending-poster { opacity: .18; right: 24px; }
.ending-content blockquote { width: 86vw; }
}
/* ===== style switcher shared ===== */
.quick-index a {
display: block;
width: 100%;
margin-bottom: 8px;
padding: 9px 12px;
color: #111;
background: rgba(255,255,255,.58);
border: 3px solid #111;
text-decoration: none;
font-family: Arial, "Microsoft YaHei", sans-serif;
font-weight: 900;
letter-spacing: 1px;
transition: .22s ease;
}
.quick-index a:hover,
.quick-index a.active-style {
color: #111;
background: #ffd21f;
transform: translateX(-5px);
}
.style-switcher {
margin-top: 16px;
padding-top: 14px;
border-top: 4px solid currentColor;
}
.style-switcher p {
margin: 0 0 10px;
font-size: 16px;
letter-spacing: 2px;
}
/* file package marker */
body::before {
content: attr(class);
position: fixed;
left: 14px;
bottom: 12px;
z-index: 9997;
opacity: .35;
pointer-events: none;
font: 900 10px/1 Arial, sans-serif;
letter-spacing: 2px;
}
/* ===== THEME 07 / DESIGN MAGAZINE ===== */
body.theme-magazine { background:#efe7dc !important; color:#1c1714 !important; font-family:Georgia,"Times New Roman","Microsoft YaHei",serif !important; }
body.theme-magazine .page { background:#efe7dc !important; color:#1c1714 !important; }
body.theme-magazine .paper { opacity:.15 !important; background-image:linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px) !important; background-size:84px 100%,100% 32px !important; }
body.theme-magazine .cover { background:linear-gradient(100deg,#efe7dc 0 58%,#d63b34 58% 100%) !important; }
body.theme-magazine .cover-content { grid-template-columns:1.25fr .75fr !important; align-items:end !important; }
body.theme-magazine .nav, body.theme-magazine .cover-footer { color:#1c1714 !important; font-family:Helvetica,Arial,sans-serif !important; }
body.theme-magazine .tagline { color:#d63b34 !important; letter-spacing:3px; }
body.theme-magazine .name-title { display:block !important; transform:none !important; }
body.theme-magazine .name-title span { color:#1c1714 !important; font-size:clamp(100px,15vw,250px) !important; line-height:.74 !important; text-shadow:none !important; letter-spacing:-10px; margin-right:18px; }
body.theme-magazine .slogan { color:#1c1714 !important; border-left:0 !important; border-top:4px solid #1c1714; text-shadow:none !important; padding:26px 0 0 !important; max-width:950px !important; }
body.theme-magazine .comic-panel { background:#fffaf1 !important; color:#1c1714 !important; border:0 !important; box-shadow:0 24px 60px rgba(40,20,10,.16) !important; transform:rotate(2deg) !important; }
body.theme-magazine .comic-panel p { border-bottom:1px solid rgba(0,0,0,.2) !important; font-family:Georgia,"Times New Roman","Microsoft YaHei",serif !important; }
body.theme-magazine .boom { background:#1c1714 !important; color:#fffaf1 !important; border:0 !important; box-shadow:none !important; transform:none !important; }
body.theme-magazine button, body.theme-magazine .nav button, body.theme-magazine .quick-index a, body.theme-magazine .quick-index button { background:#fffaf1 !important; color:#1c1714 !important; border:1px solid #1c1714 !important; box-shadow:none !important; }
body.theme-magazine button:hover, body.theme-magazine .quick-index a.active-style, body.theme-magazine .quick-index a:hover { background:#d63b34 !important; color:#fffaf1 !important; }
body.theme-magazine .quick-index { background:#fffaf1 !important; color:#1c1714 !important; border:1px solid #1c1714 !important; box-shadow:0 20px 70px rgba(40,20,10,.18) !important; }
body.theme-magazine .resume { background:#efe7dc !important; }
body.theme-magazine .resume-board { grid-template-columns:.7fr 1.3fr !important; }
body.theme-magazine .resume-about, body.theme-magazine .resume-card, body.theme-magazine .method-card, body.theme-magazine .method-side-note, body.theme-magazine .ending-content, body.theme-magazine .ending-poster { background:#fffaf1 !important; color:#1c1714 !important; border:1px solid rgba(0,0,0,.25) !important; box-shadow:0 20px 45px rgba(40,20,10,.12) !important; transform:none !important; }
body.theme-magazine .resume-header h2, body.theme-magazine .resume-about h3, body.theme-magazine .page-index, body.theme-magazine .card-head span, body.theme-magazine .method-title h2, body.theme-magazine .ending-content h2 { color:#1c1714 !important; text-shadow:none !important; font-family:Georgia,"Times New Roman","Microsoft YaHei",serif !important; letter-spacing:-4px; }
body.theme-magazine .resume-role, body.theme-magazine .card-head h4, body.theme-magazine .method-num { color:#d63b34 !important; }
body.theme-magazine .about-matrix div, body.theme-magazine .skill-columns div { background:#efe7dc !important; color:#1c1714 !important; border:1px solid rgba(0,0,0,.25) !important; box-shadow:none !important; }
body.theme-magazine .edu-tags span, body.theme-magazine .chips span, body.theme-magazine .method-tags span { background:#1c1714 !important; color:#fffaf1 !important; border:none !important; }
body.theme-magazine .boat-map-page { background:linear-gradient(100deg,#efe7dc 0 68%,#d63b34 68% 100%) !important; }
body.theme-magazine .river-viewport { background:#fffaf1 !important; border:1px solid #1c1714 !important; box-shadow:0 30px 70px rgba(40,20,10,.18) !important; }
body.theme-magazine .map-ui { background:#fffaf1; padding:18px 24px; border-bottom:3px solid #1c1714; }
body.theme-magazine .map-ui h2, body.theme-magazine .map-ui p, body.theme-magazine .map-help { color:#1c1714 !important; text-shadow:none !important; }
body.theme-magazine .island span { background:#fffaf1 !important; color:#1c1714 !important; border:1px solid #1c1714 !important; box-shadow:0 14px 35px rgba(40,20,10,.16) !important; }
body.theme-magazine .island.near span { background:#d63b34 !important; color:#fffaf1 !important; }
body.theme-magazine .method-page, body.theme-magazine .ending-page { background:#efe7dc !important; }
body.theme-magazine .ending-content blockquote { font-family:Georgia,"Times New Roman",serif !important; font-style:italic; }
body.theme-magazine .cursor { background:#d63b34 !important; border-color:#1c1714 !important; }
/* ===== FINAL READABILITY + LAYOUT PATCH ===== */
body::before{display:none!important;}
.page{overflow:hidden!important;}
.map-ui h2{letter-spacing:-.04em;}
.method-hero h2,.ending-content h2{letter-spacing:-.05em;}
.method-card p{max-width:100%;}
.method-tags{bottom:20px!important;}
@media(max-width:1200px){.method-card h3{font-size:28px!important}.method-card p{font-size:13px!important}.method-tags span{font-size:10px!important}}
/* ===== DESIGN MAGAZINE v2: editorial spread layout, not a skin ===== */
body.theme-magazine .map-paper{display:none!important;}
body.theme-magazine .boat-map-page{background:linear-gradient(90deg,#efe7dc 0 58%,#d63b34 58% 100%)!important;}
body.theme-magazine .map-ui{left:58px!important;top:52px!important;width:490px!important;max-width:490px!important;background:#fffaf1!important;border:0!important;border-top:7px solid #1c1714!important;padding:22px 24px 24px!important;box-shadow:0 20px 50px rgba(40,20,10,.16)!important;}
body.theme-magazine .map-ui p{font-size:12px!important;letter-spacing:.42em!important;color:#d63b34!important;}
body.theme-magazine .map-ui h2{font-size:clamp(48px,5vw,88px)!important;color:#1c1714!important;text-shadow:none!important;line-height:.9!important;}
body.theme-magazine .map-help{background:#1c1714!important;color:#fffaf1!important;border:0!important;box-shadow:none!important;text-shadow:none!important;}
body.theme-magazine .river-viewport{left:58px!important;right:58px!important;bottom:54px!important;height:58vh!important;border:0!important;box-shadow:0 30px 70px rgba(40,20,10,.22)!important;}
body.theme-magazine .method-page{background:linear-gradient(90deg,#efe7dc 0 66%,#d63b34 66% 100%)!important;}
body.theme-magazine .method-red-block,.theme-magazine .method-yellow-strip,.theme-magazine .method-black-sun{display:none!important;}
body.theme-magazine .method-hero{position:absolute!important;left:64px!important;top:56px!important;width:48vw!important;}
body.theme-magazine .method-hero p{color:#d63b34!important;letter-spacing:.42em!important;}
body.theme-magazine .method-hero h2{font-family:Georgia,serif!important;font-size:clamp(72px,8vw,136px)!important;color:#1c1714!important;text-shadow:none!important;}
body.theme-magazine .method-hero span{width:100%!important;color:#1c1714!important;text-shadow:none!important;border-top:3px solid #1c1714!important;padding-top:18px!important;font-size:clamp(18px,1.45vw,25px)!important;}
body.theme-magazine .method-flow{position:absolute!important;left:64px!important;bottom:60px!important;width:48vw!important;display:flex!important;gap:8px!important;margin:0!important;}
body.theme-magazine .method-flow span{min-width:0!important;flex:1!important;background:#1c1714!important;color:#fffaf1!important;border:0!important;box-shadow:none!important;font-size:18px!important;}
body.theme-magazine .method-flow i{display:none!important;}
body.theme-magazine .method-grid{position:absolute!important;right:58px!important;top:70px!important;bottom:70px!important;width:40vw!important;height:auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:1.15fr .85fr!important;gap:18px!important;margin:0!important;}
body.theme-magazine .method-card{background:#fffaf1!important;color:#1c1714!important;border:1px solid rgba(0,0,0,.22)!important;box-shadow:0 22px 55px rgba(40,20,10,.18)!important;padding:22px 22px 70px!important;}
body.theme-magazine .method-card:nth-child(1){grid-column:1/-1!important;display:grid!important;grid-template-columns:.55fr 1fr!important;gap:18px!important;}
body.theme-magazine .method-card:nth-child(1) .method-tags{left:auto!important;right:20px!important;bottom:20px!important;}
body.theme-magazine .method-card h3{font-family:Georgia,serif!important;font-size:clamp(24px,2.2vw,40px)!important;color:#1c1714!important;}
body.theme-magazine .method-card p{font-size:clamp(12px,.92vw,15px)!important;line-height:1.5!important;}
body.theme-magazine .method-num{color:#d63b34!important;text-shadow:none!important;font-family:Georgia,serif!important;}
body.theme-magazine .method-tags span{background:#1c1714!important;color:#fffaf1!important;border:0!important;font-size:11px!important;}
body.theme-magazine .method-side-note{left:64px!important;right:auto!important;bottom:145px!important;width:410px!important;background:#1c1714!important;color:#fffaf1!important;border:0!important;box-shadow:none!important;}
body.theme-magazine .ending-page{background:linear-gradient(90deg,#efe7dc 0 64%,#1c1714 64% 100%)!important;}
body.theme-magazine .ending-content{position:absolute!important;left:64px!important;top:72px!important;width:58vw!important;min-height:auto!important;background:#fffaf1!important;border:0!important;box-shadow:0 30px 70px rgba(40,20,10,.18)!important;padding:52px!important;}
body.theme-magazine .ending-content h2{font-family:Georgia,serif!important;font-size:clamp(80px,8vw,140px)!important;color:#1c1714!important;text-shadow:none!important;}
body.theme-magazine .ending-content blockquote{width:100%!important;background:transparent!important;color:#1c1714!important;border:0!important;border-top:2px solid #1c1714!important;border-bottom:2px solid #1c1714!important;box-shadow:none!important;font-size:clamp(25px,2.5vw,44px)!important;}
body.theme-magazine .ending-content cite{color:#d63b34!important;text-shadow:none!important;}
body.theme-magazine .ending-poster{right:58px!important;color:#fffaf1!important;text-shadow:none!important;font-family:Georgia,serif!important;}
/* ===== MAGAZINE FINAL: sunny seaside editorial spread ===== */
body.theme-magazine{
background:#f6efe3 !important;
color:#2a221c !important;
font-family: Georgia, "Times New Roman", "Noto Serif SC", "Songti SC", serif !important;
}
body.theme-magazine .page{
background:#f6efe3 !important;
color:#2a221c !important;
}
body.theme-magazine .paper{
opacity:.12 !important;
background-image:
linear-gradient(90deg, rgba(70,52,42,.06) 1px, transparent 1px),
linear-gradient(rgba(70,52,42,.04) 1px, transparent 1px) !important;
background-size: 88px 100%, 100% 36px !important;
}
body.theme-magazine .cursor{ background:#7ec8c6 !important; border-color:#2a221c !important; }
body.theme-magazine button,
body.theme-magazine .nav button,
body.theme-magazine .quick-index a,
body.theme-magazine .quick-index button{
background:#fffaf4 !important;
color:#2a221c !important;
border:1px solid rgba(42,34,28,.55) !important;
box-shadow:none !important;
}
body.theme-magazine button:hover,
body.theme-magazine .nav button:hover,
body.theme-magazine .quick-index a:hover,
body.theme-magazine .quick-index a.active-style{
background:#d46f4d !important;
color:#fffaf4 !important;
border-color:#d46f4d !important;
}
body.theme-magazine .quick-index{
background:#fffaf4 !important;
border:1px solid rgba(42,34,28,.25) !important;
box-shadow:0 18px 48px rgba(61,40,28,.14) !important;
}
body.theme-magazine .page-index,
body.theme-magazine .card-head span,
body.theme-magazine .method-num{
color:#d46f4d !important;
text-shadow:none !important;
}
/* cover */
body.theme-magazine .cover{
background:
radial-gradient(circle at 86% 20%, rgba(126,200,198,.35) 0 2.4%, transparent 2.6%),
linear-gradient(101deg, #f6efe3 0 63%, #d15a40 63% 100%) !important;
}
body.theme-magazine .cover .black-bar,
body.theme-magazine .cover .yellow-box{ opacity:.84; }
body.theme-magazine .cover .red-box{
background:#cf3b22 !important;
border:5px solid #201712 !important;
box-shadow:0 16px 32px rgba(0,0,0,.08);
}
body.theme-magazine .cover .red-slash{ background:#e4cb57 !important; }
body.theme-magazine .cover .dots{ opacity:.18 !important; }
body.theme-magazine .nav,
body.theme-magazine .cover-footer{
color:#2a221c !important;
font-family: Arial, Helvetica, sans-serif !important;
}
body.theme-magazine .cover-content{
grid-template-columns: minmax(0,1.1fr) minmax(320px,.72fr) !important;
align-items:center !important;
gap:42px !important;
}
body.theme-magazine .cover-main{ max-width:760px; }
body.theme-magazine .tagline{
color:#d46f4d !important;
letter-spacing:4px !important;
font-size:14px !important;
margin-bottom:18px !important;
}
body.theme-magazine .name-title{
display:flex !important;
flex-direction:column !important;
gap:0 !important;
transform:none !important;
margin-bottom:22px !important;
}
body.theme-magazine .name-title span{
color:#1f1814 !important;
text-shadow:none !important;
font-size:clamp(118px, 10.2vw, 172px) !important;
line-height:.82 !important;
letter-spacing:-.08em !important;
margin:0 !important;
}
body.theme-magazine .slogan{
margin-top:0 !important;
max-width:620px !important;
color:#1f1814 !important;
font-size:clamp(20px,2.1vw,30px) !important;
line-height:1.42 !important;
border-left:0 !important;
border-top:3px solid #1f1814 !important;
padding:22px 0 0 0 !important;
text-shadow:none !important;
}
body.theme-magazine .comic-panel{
justify-self:end !important;
width:min(410px, 95%) !important;
padding:34px 34px 28px !important;
background:#fffaf4 !important;
border:1px solid rgba(42,34,28,.14) !important;
border-radius:10px !important;
box-shadow:0 22px 60px rgba(67,43,29,.15) !important;
transform:rotate(-3deg) translateY(28px) !important;
}
body.theme-magazine .comic-panel::before{
content:"";
position:absolute;
left:-14px; right:18px; top:-16px;
height:28px;
background:rgba(244,162,97,.28);
border-radius:16px;
transform:rotate(4deg);
z-index:-1;
}
body.theme-magazine .comic-panel p{
font-family: "Microsoft YaHei", Arial, sans-serif !important;
font-weight:700 !important;
font-size:23px !important;
border-bottom:1px solid rgba(42,34,28,.16) !important;
padding:14px 0 !important;
}
body.theme-magazine .boom{
background:#201712 !important;
color:#fffaf4 !important;
box-shadow:none !important;
border-radius:0 !important;
font-family: Georgia, serif !important;
font-size:58px !important;
padding:12px 18px !important;
}
body.theme-magazine .cover-footer{ letter-spacing:3px !important; }
/* resume page: relaxed but compact */
body.theme-magazine .resume{
background:linear-gradient(90deg, #f6efe3 0 50%, #f2eadc 50% 100%) !important;
padding:28px 38px !important;
}
body.theme-magazine .resume-red-slab{ background:rgba(212,111,77,.28) !important; }
body.theme-magazine .resume-yellow-slab{ background:#e9d35a !important; }
body.theme-magazine .resume-header p{
letter-spacing:4px !important;
font-size:11px !important;
}
body.theme-magazine .resume-header h2{
color:#1f1814 !important;
text-shadow:none !important;
font-size:clamp(70px,7vw,96px) !important;
line-height:.8 !important;
}
body.theme-magazine .resume-board{
margin-top:14px !important;
grid-template-columns: .8fr 1.2fr !important;
gap:20px !important;
height: calc(100vh - 168px) !important;
}
body.theme-magazine .resume-about{
background:#fffaf4 !important;
color:#2a221c !important;
border:1px solid rgba(42,34,28,.18) !important;
box-shadow:0 20px 44px rgba(61,40,28,.10) !important;
padding:24px 26px !important;
}
body.theme-magazine .mini-num{ font-size:34px !important; color:#d46f4d !important; }
body.theme-magazine .resume-about h3{
color:#1f1814 !important;
text-shadow:none !important;
font-size:clamp(56px,5.4vw,82px) !important;
line-height:.9 !important;
letter-spacing:-.06em !important;
margin-bottom:8px !important;
}
body.theme-magazine .resume-role{
color:#d46f4d !important;
font-size:16px !important;
margin-bottom:14px !important;
}
body.theme-magazine .about-text{
color:#2c241d !important;
font-size:13.2px !important;
line-height:1.6 !important;
margin-bottom:8px !important;
}
body.theme-magazine .about-matrix{
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:8px !important;
margin-top:10px !important;
}
body.theme-magazine .about-matrix div{
background:#f4ede3 !important;
border:1px solid rgba(42,34,28,.14) !important;
border-radius:8px !important;
padding:12px 10px !important;
}
body.theme-magazine .about-matrix b{
display:block;
font-size:22px;
color:#d8b95c;
margin-bottom:4px;
}
body.theme-magazine .about-matrix span{
display:block;
font:700 12px/1.45 "Microsoft YaHei", Arial, sans-serif;
color:#c7b79a;
}
body.theme-magazine .resume-highlight{
margin-top:14px !important;
gap:6px !important;
}
body.theme-magazine .resume-highlight span{
font:700 12px/1.35 "Microsoft YaHei", Arial, sans-serif !important;
color:#2c241d !important;
padding-top:8px !important;
border-top:1px solid rgba(42,34,28,.16) !important;
}
body.theme-magazine .resume-main{
grid-template-rows: auto auto auto !important;
gap:14px !important;
}
body.theme-magazine .resume-card{
background:#fffaf4 !important;
border:1px solid rgba(42,34,28,.18) !important;
box-shadow:0 18px 40px rgba(61,40,28,.08) !important;
padding:16px 18px !important;
}
body.theme-magazine .card-head{ margin-bottom:10px !important; }
body.theme-magazine .card-head span{
font-family:Georgia,serif !important;
font-size:30px !important;
}
body.theme-magazine .card-head h4{
color:#d46f4d !important;
font:700 22px/1.1 "Microsoft YaHei", Arial, sans-serif !important;
}
body.theme-magazine .edu-practice-grid{
display:grid !important;
grid-template-columns: .95fr 1.05fr !important;
gap:16px !important;
}
body.theme-magazine .edu-block strong,
body.theme-magazine .practice-block strong{
display:block;
font:700 15px/1.45 "Microsoft YaHei", Arial, sans-serif;
margin-bottom:12px;
}
body.theme-magazine .edu-block p,
body.theme-magazine .practice-block p,
body.theme-magazine .practice-points li{
font:700 12.6px/1.58 "Microsoft YaHei", Arial, sans-serif;
color:#2a221c;
}
body.theme-magazine .practice-block{
padding-left:18px;
border-left:2px solid rgba(42,34,28,.14);
}
body.theme-magazine .practice-points{ margin-top:10px; padding-left:18px; }
body.theme-magazine .edu-tags{
display:flex !important;
flex-wrap:wrap !important;
gap:8px !important;
margin-top:12px !important;
}
body.theme-magazine .edu-tags span{
background:#201712 !important;
color:#fffaf4 !important;
border:none !important;
border-radius:2px !important;
font:700 11px/1 Arial, sans-serif !important;
padding:8px 10px !important;
}
/* IMPORTANT: resume methods card only */
body.theme-magazine .resume .methods-card .method-grid{
position:static !important;
width:100% !important;
height:auto !important;
display:grid !important;
grid-template-columns:repeat(2, 1fr) !important;
gap:10px 14px !important;
border:none !important;
margin:0 !important;
}
body.theme-magazine .resume .methods-card .method-grid div{
min-height:0 !important;
background:#f3ede4 !important;
border:none !important;
border-radius:16px !important;
padding:12px 14px 12px 14px !important;
display:grid !important;
grid-template-columns:68px 1fr !important;
align-items:center !important;
column-gap:12px !important;
}
body.theme-magazine .resume .methods-card .method-grid b{
color:#d46f4d !important;
font:700 30px/1 Georgia, serif !important;
margin:0 !important;
}
body.theme-magazine .resume .methods-card .method-grid strong{
font:700 13px/1.25 "Microsoft YaHei", Arial, sans-serif !important;
color:#2a221c !important;
}
body.theme-magazine .resume .methods-card .method-grid small{
display:block !important;
margin-top:2px !important;
color:#8f7c6c !important;
font:700 10px/1.2 Arial, sans-serif !important;
}
body.theme-magazine .resume .skills-card .skill-columns{
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:12px !important;
}
body.theme-magazine .resume .skills-card .skill-columns div{
background:#f3ede4 !important;
border:none !important;
box-shadow:none !important;
padding:14px 14px !important;
}
body.theme-magazine .resume .skills-card h5{
color:#d8b95c !important;
font:700 18px/1.2 "Microsoft YaHei", Arial, sans-serif !important;
}
body.theme-magazine .resume .skills-card p{
color:#2a221c !important;
font:700 13px/1.45 "Microsoft YaHei", Arial, sans-serif !important;
}
/* directory page: keep all content in one spread */
body.theme-magazine .directory-page{
background:linear-gradient(90deg, #f6efe3 0 54%, #f2eadf 54% 100%) !important;
padding:20px 32px 18px !important;
}
body.theme-magazine .directory-page .page-index{
left:18px !important;
top:48px !important;
right:auto !important;
font-size:66px !important;
color:#1f1814 !important;
}
body.theme-magazine .directory-wash{
position:absolute; inset:54px 22px auto 22px; height:76px;
background:rgba(42,34,28,.12); z-index:2; pointer-events:none;
}
body.theme-magazine .directory-header{
position:relative; z-index:6;
margin:62px 0 14px 58px;
max-width:740px;
}
body.theme-magazine .directory-header p{
color:#d46f4d; letter-spacing:5px; font:700 12px/1 Arial, sans-serif; margin-bottom:8px;
}
body.theme-magazine .directory-header h2{
font-size:clamp(74px, 7vw, 118px); line-height:.88; letter-spacing:-.06em; color:#1f1814; margin-bottom:10px;
}
body.theme-magazine .directory-header span{
display:block; max-width:780px; color:#4b4036; font:700 18px/1.55 "Microsoft YaHei", Arial, sans-serif;
}
body.theme-magazine .directory-board{
position:relative; z-index:6;
height:calc(100vh - 186px);
margin:10px 18px 0 58px;
display:grid;
grid-template-columns: 0.38fr 0.62fr;
gap:18px;
align-items:stretch;
}
body.theme-magazine .directory-intro-card{
background:#fffaf4;
border-radius:24px;
box-shadow:0 20px 48px rgba(61,40,28,.12);
padding:24px 24px 18px;
display:flex; flex-direction:column; justify-content:flex-start;
}
body.theme-magazine .cover-mini{
width:100%; aspect-ratio:1.1/1; margin-bottom:18px; background:#f3ede3; border-radius:18px; position:relative; box-shadow:0 12px 30px rgba(61,40,28,.08);
}
body.theme-magazine .cover-block{ position:absolute; left:26px; top:26px; width:96px; height:132px; background:#cc6a45; }
body.theme-magazine .cover-lines{ position:absolute; left:142px; top:32px; right:32px; bottom:36px; background:repeating-linear-gradient(to bottom, #a6998f 0 6px, transparent 6px 24px); }
body.theme-magazine .cover-plus{ position:absolute; right:28px; bottom:22px; width:70px; height:70px; border-radius:50%; background:#1f1814; color:#fffaf4; font:700 60px/66px Georgia,serif; text-align:center; }
body.theme-magazine .intro-label{ color:#d46f4d; letter-spacing:2px; font:700 15px/1 Arial, sans-serif; margin-bottom:10px; }
body.theme-magazine .intro-copy{ font:700 17px/1.65 "Microsoft YaHei", Arial, sans-serif; color:#2a221c; }
body.theme-magazine .directory-grid{
height:100%;
display:grid;
grid-template-columns: 1.02fr .98fr .48fr;
grid-template-rows: 1.06fr .68fr .48fr;
gap:14px;
}
body.theme-magazine .dir-card{
display:flex; flex-direction:column; justify-content:flex-start;
background:#fffaf4; color:#1f1814; text-decoration:none;
border-top:6px solid #cc6a45; border-radius:0;
box-shadow:0 14px 36px rgba(61,40,28,.12);
padding:16px 16px 14px;
min-width:0;
}
body.theme-magazine .dir-card h3{
font-size:clamp(26px,2.5vw,52px); line-height:.95; letter-spacing:-.04em; margin:8px 0 12px;
}
body.theme-magazine .dir-card p{ font:700 14px/1.55 "Microsoft YaHei", Arial, sans-serif; color:#443830; }
body.theme-magazine .dir-kicker{ color:#cc6a45; font:700 12px/1.2 Arial,sans-serif; letter-spacing:2.3px; }
body.theme-magazine .dir-polar{ grid-column:1; grid-row:1 / span 2; }
body.theme-magazine .dir-child{ grid-column:2 / span 2; grid-row:1; }
body.theme-magazine .dir-ai{ grid-column:2; grid-row:2; }
body.theme-magazine .dir-astory{ grid-column:3; grid-row:2 / span 2; background:#cc6a45; color:#fffaf4; }
body.theme-magazine .dir-astory .dir-kicker,
body.theme-magazine .dir-astory p{ color:#fff4e9; }
body.theme-magazine .dir-uiux{ grid-column:1; grid-row:3; }
body.theme-magazine .dir-other{ grid-column:2; grid-row:3; }
body.theme-magazine .dir-more{ grid-column:3; grid-row:3; }
/* method page: airy magazine spread instead of old cards */
body.theme-magazine .method-page{
background:linear-gradient(90deg, #f7f0e5 0 55%, #efe7d9 55% 100%) !important;
padding:30px 44px !important;
}
body.theme-magazine .method-red-block,
body.theme-magazine .method-yellow-strip,
body.theme-magazine .method-black-sun{ display:none !important; }
body.theme-magazine .method-page .page-index{
right:42px !important; top:26px !important; font-size:78px !important; color:#1f1814 !important;
}
body.theme-magazine .method-hero{
position:absolute !important; left:64px !important; top:44px !important; width:44vw !important; z-index:5;
}
body.theme-magazine .method-hero p{
color:#d46f4d !important; letter-spacing:7px !important; font:700 14px/1.3 Arial,sans-serif !important;
}
body.theme-magazine .method-hero h2{
font-size:clamp(92px,9vw,154px) !important; line-height:.88 !important; letter-spacing:-.06em !important; color:#1f1814 !important; text-shadow:none !important; font-family:Georgia,serif !important; margin:8px 0 12px !important;
}
body.theme-magazine .method-hero span{
display:block !important; width:100% !important; padding-top:18px !important; border-top:3px solid #1f1814 !important;
color:#1f1814 !important; font:700 clamp(18px,1.6vw,30px)/1.5 "Microsoft YaHei", Arial, sans-serif !important; text-shadow:none !important;
}
body.theme-magazine .method-flow{
position:absolute !important; left:64px !important; bottom:44px !important; width:42vw !important;
display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:12px !important;
}
body.theme-magazine .method-flow i{ display:none !important; }
body.theme-magazine .method-flow span{
background:#1f1814 !important; color:#fffaf4 !important; border:none !important; box-shadow:none !important;
padding:16px 10px !important; font:700 18px/1 "Microsoft YaHei", Arial, sans-serif !important;
}
body.theme-magazine .method-grid[aria-label="能力总结"]{
position:absolute !important; right:50px !important; top:64px !important; bottom:72px !important; width:42vw !important;
display:grid !important; grid-template-columns:1fr 1fr !important; grid-template-rows:1.04fr .82fr .92fr !important; gap:16px !important;
border:none !important; margin:0 !important; height:auto !important;
}
body.theme-magazine .method-page .method-card{
position:relative !important;
background:#fffaf4 !important; color:#1f1814 !important;
border:1px solid rgba(42,34,28,.12) !important;
border-radius:0 !important;
box-shadow:0 18px 44px rgba(61,40,28,.10) !important;
padding:18px 18px 66px !important;
overflow:hidden !important;
}
body.theme-magazine .method-page .method-card::after{
content:""; position:absolute; right:0; top:0; width:92px; height:92px;
background:rgba(212,111,77,.9); clip-path:polygon(26% 0,100% 0,100% 100%,0 74%);
}
body.theme-magazine .method-page .card-system{ grid-column:1 / -1 !important; display:grid !important; grid-template-columns: .74fr 1.26fr !important; align-items:start !important; gap:18px !important; }
body.theme-magazine .method-page .card-interaction{ grid-column:1; grid-row:2; }
body.theme-magazine .method-page .card-prototype{ grid-column:2; grid-row:2; }
body.theme-magazine .method-page .card-delivery{ grid-column:1; grid-row:3; }
body.theme-magazine .method-page .method-num{
font:700 24px/1.1 Georgia, serif !important; margin-bottom:8px !important;
}
body.theme-magazine .method-page h3{
font:700 clamp(34px,2.45vw,52px)/.95 Georgia,serif !important; color:#1f1814 !important; margin:0 0 12px !important;
}
body.theme-magazine .method-page p{
font:700 clamp(15px,1.05vw,19px)/1.5 "Microsoft YaHei", Arial, sans-serif !important; color:#2a221c !important; max-width:none !important;
}
body.theme-magazine .method-page .method-tags{
position:absolute !important; left:18px !important; right:18px !important; bottom:16px !important;
display:flex !important; flex-wrap:wrap !important; gap:8px !important;
}
body.theme-magazine .method-page .method-tags span{
background:#1f1814 !important; color:#fffaf4 !important; border:none !important;
padding:8px 10px !important; font:700 11px/1 Arial,sans-serif !important; letter-spacing:1px !important;
}
body.theme-magazine .method-side-note{
position:absolute !important; left:64px !important; bottom:118px !important; width:394px !important;
background:#1f1814 !important; color:#fffaf4 !important; border:none !important; box-shadow:none !important;
padding:22px 22px 20px !important;
}
body.theme-magazine .method-side-note b{
display:block; color:#e3cb64 !important; letter-spacing:3px !important; margin-bottom:10px !important; font:700 14px/1 Arial,sans-serif !important;
}
body.theme-magazine .method-side-note p{
color:#fffaf4 !important; font:700 18px/1.55 "Microsoft YaHei", Arial, sans-serif !important;
}
/* ending page keep relaxed */
body.theme-magazine .ending-page{
background:linear-gradient(90deg, #f7f0e5 0 63%, #1f1a17 63% 100%) !important;
}
body.theme-magazine .ending-content{
background:#fffaf4 !important; color:#1f1814 !important; border:none !important; box-shadow:0 24px 56px rgba(61,40,28,.14) !important;
}
body.theme-magazine .ending-content h2{ color:#1f1814 !important; text-shadow:none !important; }
body.theme-magazine .ending-content blockquote{
border-top:2px solid #1f1814 !important; border-bottom:2px solid #1f1814 !important;
background:none !important; box-shadow:none !important;
}
body.theme-magazine .ending-content cite{ color:#d46f4d !important; }
@media (max-width: 1200px){
body.theme-magazine .cover-content,
body.theme-magazine .resume-board,
body.theme-magazine .directory-board,
body.theme-magazine .method-grid[aria-label="能力总结"]{
grid-template-columns:1fr !important;
}
}
/* ===== MAGAZINE SUNNY LOGIC FIX: page 03 wheel + page 04 breathing room ===== */
/* Third page should be a fixed spread, not an inner scrolling surface. */
body.theme-magazine .directory-page,
body.theme-magazine .directory-board,
body.theme-magazine .directory-grid,
body.theme-magazine .dir-card {
overflow: hidden !important;
}
body.theme-magazine .directory-page {
touch-action: pan-y !important;
}
/* Keep directory links clickable but don't let them create a nested scroll trap. */
body.theme-magazine .directory-grid {
max-height: calc(100vh - 190px) !important;
}
/* Page 04: make it less crowded, more beach-magazine airy. */
body.theme-magazine .method-page {
padding: 32px 46px !important;
}
body.theme-magazine .method-hero {
width: 41vw !important;
top: 50px !important;
}
body.theme-magazine .method-hero h2 {
font-size: clamp(78px, 7.6vw, 132px) !important;
margin-bottom: 10px !important;
}
body.theme-magazine .method-hero span {
font-size: clamp(17px, 1.35vw, 24px) !important;
line-height: 1.45 !important;
}
body.theme-magazine .method-side-note {
width: 360px !important;
bottom: 128px !important;
padding: 18px 20px !important;
}
body.theme-magazine .method-side-note p {
font-size: 16px !important;
line-height: 1.45 !important;
}
body.theme-magazine .method-flow {
width: 40vw !important;
bottom: 46px !important;
gap: 10px !important;
}
body.theme-magazine .method-flow span {
padding: 13px 8px !important;
font-size: 16px !important;
}
body.theme-magazine .method-grid[aria-label="能力总结"] {
top: 72px !important;
bottom: 70px !important;
width: 43vw !important;
gap: 18px !important;
grid-template-rows: .95fr .78fr .78fr !important;
}
body.theme-magazine .method-page .method-card {
padding: 16px 18px 58px !important;
box-shadow: 0 14px 34px rgba(61,40,28,.09) !important;
}
body.theme-magazine .method-page .method-card::after {
width: 74px !important;
height: 74px !important;
opacity: .88 !important;
}
body.theme-magazine .method-page h3 {
font-size: clamp(28px, 2.1vw, 44px) !important;
margin-bottom: 8px !important;
}
body.theme-magazine .method-page p {
font-size: clamp(13px, .95vw, 17px) !important;
line-height: 1.45 !important;
}
body.theme-magazine .method-page .method-tags {
bottom: 14px !important;
gap: 7px !important;
}
body.theme-magazine .method-page .method-tags span {
padding: 6px 8px !important;
font-size: 10px !important;
}
@media (max-height: 850px) {
body.theme-magazine .method-hero h2 {
font-size: 92px !important;
}
body.theme-magazine .method-grid[aria-label="能力总结"] {
top: 62px !important;
bottom: 54px !important;
gap: 12px !important;
}
body.theme-magazine .method-page .method-card {
padding: 13px 14px 48px !important;
}
body.theme-magazine .method-page p {
font-size: 13px !important;
line-height: 1.34 !important;
}
body.theme-magazine .method-side-note {
bottom: 106px !important;
}
}