:root {
  --ink: #3d2735;
  --muted: #6f5361;
  --paper: #f9e8ef;
  --panel: #fff9fb;
  --line: #e7cbd6;
  --lime: #f4a6c1;
  --blue: #d8c5eb;
  --orange: #f5a2a2;
  --kai: KaiTi, '楷体', 'STKaiti', cursive;
  --times: 'Times New Roman', Times, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background-color: var(--paper); background-image: radial-gradient(rgba(137,72,103,.1) .7px, transparent .7px); background-size: 9px 9px; font-family: var(--kai); min-height: 100vh; }
body::before, body::after { position: fixed; z-index: 0; pointer-events: none; color: #b45b83; font-family: var(--kai); font-size: 19px; letter-spacing: 18px; line-height: 2.4; opacity: .5; white-space: pre-wrap; animation: cute-float 7s ease-in-out infinite alternate; }
body::before { content: '✦  ♡  ✿  ☁  🐱\A♡  ✧  ✿  ☁  ✦'; top: 86px; right: 15px; transform: rotate(7deg); }
body::after { content: '♡  ✦  ☁  ✿  ♡\A✧  🐱  ✿  ♡  ☁'; bottom: 22px; left: 250px; transform: rotate(-5deg); animation-delay: -2.5s; }
.cute-swarm { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.cute-swarm span { position: absolute; display: block; color: #b45b83; font-family: var(--kai); font-size: 20px; opacity: .65; animation: character-drift 5s ease-in-out infinite; }
.cute-swarm span:nth-child(1) { left: 25%; top: 17%; animation-delay: -.6s; }
.cute-swarm span:nth-child(2) { left: 39%; top: 30%; animation-delay: -2.1s; }
.cute-swarm span:nth-child(3) { left: 77%; top: 20%; animation-delay: -1.4s; }
.cute-swarm span:nth-child(4) { left: 88%; top: 61%; animation-delay: -3.2s; }
.cute-swarm span:nth-child(5) { left: 7%; top: 73%; animation-delay: -.9s; }
.cute-swarm span:nth-child(6) { left: 67%; top: 84%; animation-delay: -2.7s; }
.cute-swarm span:nth-child(7) { left: 48%; top: 91%; animation-delay: -1.8s; }
.cute-swarm span:nth-child(8) { left: 16%; top: 43%; animation-delay: -3.8s; }
.cute-swarm span:nth-child(9) { left: 94%; top: 35%; animation-delay: -2.4s; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
aside { background: #f4d4e0; border-right: 1px solid #dfb8c9; padding: 28px 18px; display: flex; flex-direction: column; gap: 32px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.brand-mark { width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: 50%; position: relative; }
.brand-mark::after { content: ''; width: 8px; height: 8px; background: var(--orange); border-radius: 50%; position: absolute; right: -3px; top: -3px; }
.brand strong { font-size: 14px; letter-spacing: .08em; }
.eyebrow { color: var(--muted); font: 500 10px var(--times); letter-spacing: .13em; text-transform: uppercase; }
nav { display: grid; gap: 5px; }
.nav-item { border: 0; background: transparent; border-radius: 8px; display: flex; align-items: center; gap: 12px; padding: 11px 12px; text-align: left; font-size: 13px; }
.nav-item.active, .nav-item:hover { background: rgba(255,250,240,.72); transform: rotate(-1deg); }
.nav-icon { font-size: 16px; width: 18px; text-align: center; }
.side-bottom { margin-top: auto; padding: 15px; border: 1px solid #dfb8c9; border-radius: 3px; background: rgba(255,249,251,.55); transform: rotate(1deg); }
.side-bottom p { font-size: 12px; line-height: 1.6; margin: 9px 0 14px; }
.progress { height: 5px; border-radius: 10px; background: #d4ded2; overflow: hidden; }
.progress span { display: block; height: 100%; width: 72%; background: #9b426b; }
main { padding: 32px 4.5vw 48px; max-width: 1500px; width: 100%; }
header { display: grid; grid-template-columns: 1fr 310px; gap: 35px; align-items: start; margin-bottom: 35px; }
h1 { font-size: clamp(30px, 4vw, 52px); letter-spacing: -.05em; line-height: .98; margin: 10px 0 9px; }
h1 em { font-family: var(--kai); font-style: normal; font-weight: 700; letter-spacing: 0; }
.sub { color: var(--muted); font-size: 13px; margin: 0; }
.hero-detail { color: #593b4b; font-size: 14px; margin: 12px 0 0; }
.hero-detail::first-letter { color: #9b426b; }
.header-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.icon-button, .add-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--panel); border-radius: 7px; min-height: 38px; padding: 0 13px; line-height: 1.2; white-space: nowrap; }
.icon-button { width: 40px; font-size: 17px; padding: 0; }
.add-button { background: #9b426b; color: #fff9fb; font-size: 12px; font-weight: 700; }
.add-button:hover { background: #773050; }
.signal-board { min-height: 155px; border: 1px solid #9b426b; border-radius: 3px; background: #f4a6c1; color: #6f3150; position: relative; overflow: hidden; padding: 16px; transition: transform .18s ease-out; box-shadow: 7px 7px 0 rgba(155,66,107,.16); }
.signal-board::before { content: ''; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(#8fa39a 1px, transparent 1px), linear-gradient(90deg, #8fa39a 1px, transparent 1px); background-size: 25px 25px; transform: perspective(200px) rotateX(45deg) scale(1.4); transform-origin: bottom; }
.signal-title { position: relative; display: flex; justify-content: space-between; font: 10px var(--times); color: #6f3150; }
.signal-title strong { color: #6f3150; font-weight: 500; }
.constellation { position: absolute; inset: 39px 22px 23px; }
.constellation i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff9fb; box-shadow: 0 0 13px #fff9fb; animation: pulse 3s infinite ease-in-out; }
.constellation i:nth-child(1) { left: 14%; top: 61%; } .constellation i:nth-child(2) { left: 37%; top: 28%; animation-delay: .4s; } .constellation i:nth-child(3) { left: 57%; top: 69%; animation-delay: .8s; } .constellation i:nth-child(4) { left: 82%; top: 33%; animation-delay: 1.2s; }
.signal-line { position: absolute; height: 1px; background: #718c7c; transform-origin: left center; opacity: .75; }
.line-one { width: 69px; left: calc(14% + 3px); top: calc(61% + 3px); transform: rotate(-27deg); }
.line-two { width: 64px; left: calc(37% + 3px); top: calc(28% + 3px); transform: rotate(36deg); }
.line-three { width: 74px; left: calc(57% + 3px); top: calc(69% + 3px); transform: rotate(-27deg); }
.signal-foot { position: absolute; bottom: 12px; left: 16px; right: 16px; display: flex; justify-content: space-between; font-size: 10px; color: #6f3150; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.8); opacity: 1; } }
.personal-hero { display: grid; grid-template-columns: 1.25fr .75fr; gap: 24px; margin-bottom: 24px; }
.intro-panel { display: flex; flex-direction: column; justify-content: center; padding: 30px; min-height: 330px; background: var(--lime); border: 1px solid #dc789d; border-radius: 3px; position: relative; overflow: hidden; box-shadow: 8px 8px 0 rgba(155,66,107,.12); transform: rotate(-.35deg); }
.intro-panel::before { content: '♡  ✦  ✿  ☁  ♡'; position: absolute; top: 18px; right: 22px; color: rgba(155,66,107,.65); font-size: 17px; letter-spacing: 7px; animation: twinkle 2.8s ease-in-out infinite; }
.intro-panel::after { content: '01'; position: absolute; right: 22px; bottom: -24px; font: 170px/1 var(--kai); color: rgba(24,34,31,.08); }
.intro-panel h1 { max-width: 600px; font-size: clamp(43px, 6vw, 76px); margin-top: 34px; }
.intro-panel h1 em { display: block; }
.intro-copy { max-width: 490px; font-size: 14px; line-height: 1.8; position: relative; z-index: 1; }
.hero-photo { background: #6f3150; border: 1px solid #6f3150; border-radius: 3px; min-height: 330px; padding: 16px; position: relative; overflow: hidden; transform: rotate(.55deg); box-shadow: -7px 8px 0 rgba(155,66,107,.13); }
.hero-photo img { width: 100%; height: 100%; min-height: 296px; display: block; object-fit: cover; filter: grayscale(18%); opacity: .9; animation: photo-drift 9s ease-in-out infinite alternate; }
.hero-photo::after { content: ''; position: absolute; left: 16px; right: 16px; top: -20%; height: 2px; background: var(--lime); box-shadow: 0 0 18px 4px rgba(244,166,193,.45); animation: scan 4.8s ease-in-out infinite; pointer-events: none; }
.photo-label { position: absolute; bottom: 28px; left: 28px; right: 28px; display: flex; justify-content: space-between; color: white; font: 10px var(--times); }
.hero-actions { display: flex; align-items: center; gap: 16px; margin-top: 23px; position: relative; z-index: 1; }
.outline-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid var(--ink); background: transparent; border-radius: 7px; padding: 0 14px; font-size: 12px; line-height: 1.2; white-space: nowrap; }
.outline-button:hover { background: rgba(255,255,255,.35); }
.section-label { display: flex; justify-content: space-between; align-items: baseline; margin: 37px 0 15px; }
.section-label h2 { font-size: 18px; margin: 0; letter-spacing: -.04em; }
.section-label p { color: var(--muted); font-size: 11px; margin: 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.about-card { min-height: 145px; padding: 19px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); box-shadow: 4px 5px 0 rgba(126,85,2,.08); }
.about-card:nth-child(2) { background: var(--blue); border-color: #c3a9db; transform: rotate(1deg); }
.about-card:nth-child(3) { background: var(--orange); border-color: #df8585; transform: rotate(-.8deg); }
.about-card h3 { margin: 31px 0 8px; font-size: 15px; }
.about-card p { margin: 0; color: #593f4d; font-size: 12px; line-height: 1.65; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.project-card { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 19px; min-height: 190px; display: flex; flex-direction: column; animation: rise-in .7s both; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; box-shadow: 4px 5px 0 rgba(155,66,107,.08); }
.project-card:nth-child(2) { animation-delay: .12s; } .project-card:nth-child(3) { animation-delay: .24s; }
.project-card:hover { transform: translateY(-7px) rotate(-1.5deg); border-color: #9b426b; box-shadow: 7px 7px 0 var(--lime); }
.project-card h3 { font-size: 16px; margin: 34px 0 8px; }
.project-card p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0; }
.project-meta { display: flex; justify-content: space-between; margin-top: auto; padding-top: 19px; color: var(--muted); font: 10px var(--times); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 22px; box-shadow: 4px 5px 0 rgba(155,66,107,.08); }
.timeline { display: flex; align-items: center; gap: 0; margin: 29px 0 10px; }
.milestone { flex: 1; position: relative; border-top: 2px solid var(--line); padding-top: 17px; font-size: 11px; color: var(--muted); }
.milestone::before { content: ''; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.milestone.done { border-color: var(--ink); color: var(--ink); }
.milestone.done::before { background: var(--ink); }
.milestone:last-child { flex: .8; }
.contact-strip { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 22px 0; margin-top: 37px; }
.contact-strip h2 { margin: 0; font: 25px var(--kai); }
.contact-links { display: flex; gap: 20px; font: 11px var(--times); }
.contact-links a { color: var(--ink); text-underline-offset: 4px; }
.landing-nav { margin-top: 20px; }
.landing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.landing-card { min-height: 185px; display: flex; flex-direction: column; padding: 22px; position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; box-shadow: 4px 5px 0 rgba(155,66,107,.08); transition: transform .25s ease, box-shadow .25s ease; }
.landing-card:nth-child(2) { background: var(--blue); transform: rotate(.7deg); }
.landing-card:nth-child(3) { background: var(--orange); transform: rotate(-.7deg); }
.landing-card:hover { transform: translateY(-6px) rotate(0); box-shadow: 7px 8px 0 rgba(155,66,107,.16); }
.landing-card strong { margin-top: 34px; font-size: 22px; }
.landing-card p { max-width: 180px; margin: 9px 0 0; color: #593f4d; font-size: 12px; line-height: 1.7; }
.landing-arrow { margin-top: auto; align-self: flex-end; color: #9b426b; font: 22px var(--times); }
.welcome-note { margin-top: 24px; background: rgba(255,249,251,.72); }
.welcome-note blockquote { margin: 22px 0 5px; }
.welcome-note p { margin: 0; color: #694d5b; font-size: 12px; }
.quote { background: var(--orange); border-color: #df8585; min-height: 178px; display: flex; flex-direction: column; justify-content: space-between; }
blockquote { font: 24px/1.2 var(--kai); margin: 8px 0; max-width: 520px; }
.quote cite { font: 10px var(--times); font-style: normal; }
.footer-note { font: 10px var(--times); color: var(--muted); margin-top: 28px; }
.page-hero { display: flex; justify-content: space-between; align-items: end; gap: 25px; border-bottom: 1px solid var(--ink); padding-bottom: 24px; margin-bottom: 24px; }
.page-hero h1 { margin-bottom: 0; }
.page-hero p { max-width: 420px; color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.detail-card { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 24px; min-height: 210px; box-shadow: 4px 5px 0 rgba(155,66,107,.08); }
.detail-card.highlight { background: var(--blue); border-color: #c3a9db; }
.detail-card.warm { background: var(--orange); border-color: #df8585; }
.detail-card h2 { font-size: 20px; margin: 38px 0 10px; }
.detail-card p { color: #593f4d; font-size: 13px; line-height: 1.8; margin: 0; }
.detail-card ul { color: #593f4d; font-size: 13px; line-height: 2; padding-left: 18px; }
.project-list { display: grid; gap: 14px; }
.project-wide { display: grid; grid-template-columns: 130px 1fr auto; gap: 20px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 22px; transition: transform .25s ease, box-shadow .25s ease; box-shadow: 4px 5px 0 rgba(155,66,107,.08); }
.project-wide:hover { transform: translateX(7px); box-shadow: -7px 0 var(--lime); }
.project-number { font: 28px var(--times); color: var(--muted); }
.project-wide h2 { font-size: 18px; margin: 0 0 8px; }
.project-wide p { color: #694d5b; font-size: 12px; line-height: 1.7; margin: 0; }
.project-wide .tag { white-space: nowrap; }
.contact-card { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-item { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 22px; min-height: 130px; box-shadow: 4px 5px 0 rgba(155,66,107,.08); }
.contact-item h2 { font-size: 17px; margin: 24px 0 8px; }
.contact-item p, .contact-item a { color: #694d5b; font-size: 13px; }
.contact-item .webmail-link { display: inline-block; margin-top: 12px; color: #9b426b; font-size: 12px; }
.page-back { display: inline-block; color: #694d5b; font: 11px var(--times); margin-bottom: 27px; }
.page-back:hover { color: var(--ink); }
section[id] { scroll-margin-top: 76px; }
.gradient-stage { --active-gradient: #f4a6c1; position: relative; min-height: 430px; overflow: hidden; border: 1px solid #9b426b; border-radius: 3px; padding: 30px; background: radial-gradient(circle at 75% 35%, color-mix(in srgb, var(--active-gradient) 85%, white), transparent 32%), linear-gradient(125deg, #fff9fb, var(--active-gradient)); transition: background .7s ease; cursor: grab; touch-action: pan-y; user-select: none; }
.gradient-stage.dragging { cursor: grabbing; }
.gradient-copy { position: relative; z-index: 2; max-width: 310px; }
.gradient-copy h2 { font-size: clamp(29px, 4vw, 50px); letter-spacing: -.06em; line-height: 1; margin: 22px 0 12px; }
.gradient-copy h2 em { display: block; font: 700 1.05em var(--kai); letter-spacing: 0; }
.gradient-copy p { font-size: 12px; line-height: 1.7; max-width: 235px; }
.gradient-track { position: absolute; inset: 0; perspective: 1000px; }
.gradient-card { position: absolute; top: 57%; left: 50%; width: 156px; aspect-ratio: .76; padding: 17px; display: flex; flex-direction: column; justify-content: space-between; background: var(--card-color, #f4a6c1); border: 1px solid rgba(61,39,53,.45); box-shadow: 8px 9px 0 rgba(61,39,53,.16); transform: translate(-50%, -50%) translateX(var(--x, 0px)) rotate(var(--r, 0deg)) scale(var(--s, 1)); transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease, filter .4s ease; }
.gradient-card:nth-child(1) { --card-color: #f4a6c1; } .gradient-card:nth-child(2) { --card-color: #f5a2a2; } .gradient-card:nth-child(3) { --card-color: #d8c5eb; } .gradient-card:nth-child(4) { --card-color: #e7b6d0; }
.gradient-card span { font: 11px var(--times); } .gradient-card strong { font: 700 27px var(--kai); } .gradient-card small { font-size: 10px; }
.gradient-card.is-active { --s: 1.12; z-index: 4; box-shadow: 12px 14px 0 rgba(52,44,36,.2); }
.gradient-card.is-near { filter: saturate(.85); z-index: 3; } .gradient-card.is-far { filter: blur(1px) saturate(.7); opacity: .68; z-index: 1; }
.gradient-controls { position: absolute; z-index: 5; left: 30px; right: 30px; bottom: 18px; display: flex; justify-content: space-between; font: 10px var(--times); }
@keyframes scan { 0%, 15% { top: -20%; opacity: 0; } 30% { opacity: 1; } 78% { top: 110%; opacity: 1; } 90%, 100% { top: 110%; opacity: 0; } }
@keyframes photo-drift { from { transform: scale(1.01) translate3d(0, 0, 0); } to { transform: scale(1.06) translate3d(-1%, -1%, 0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cute-float { from { margin-top: -5px; } to { margin-top: 9px; } }
@keyframes twinkle { 0%, 100% { opacity: .45; transform: scale(.96) rotate(-2deg); } 50% { opacity: 1; transform: scale(1.08) rotate(2deg); } }
@keyframes character-drift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg) scale(.94); opacity: .45; } 35% { transform: translate3d(8px, -13px, 0) rotate(8deg) scale(1.08); opacity: .85; } 70% { transform: translate3d(-6px, -3px, 0) rotate(-3deg) scale(1); opacity: .62; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }
@media print { aside, .signal-board, .header-actions, .hero-actions { display: none !important; } .app { display: block; } main { max-width: none; padding: 20px; } }
@media (max-width: 900px) { .app { grid-template-columns: 70px 1fr; } aside { padding: 22px 10px; align-items: center; } .brand strong, .nav-item span:not(.nav-icon), .side-bottom { display: none; } .brand { padding: 0; } .nav-item { padding: 11px; } .personal-hero { grid-template-columns: 1fr; } .hero-photo { min-height: 260px; } .hero-photo img { min-height: 226px; } .project-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .app { display: block; } aside { position: sticky; top: 0; z-index: 10; flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; } .brand { flex: 0 0 auto; } nav { display: flex; flex: 1; justify-content: flex-end; gap: 3px; } .brand strong, .nav-item span:not(.nav-icon), .side-bottom { display: none; } .nav-item { padding: 9px 10px; } main { padding: 24px 18px 40px; } header { grid-template-columns: 1fr; gap: 18px; } .personal-hero, .about-grid, .project-grid, .detail-grid, .contact-card, .landing-grid { grid-template-columns: 1fr; } .hero-photo { min-height: 280px; } .hero-photo img { min-height: 246px; } .page-hero { display: block; } .page-hero p { margin-top: 15px; } }
@media (max-width: 700px) { .detail-grid, .contact-card { grid-template-columns: 1fr; } .page-hero { display: block; } .page-hero p { margin-top: 15px; } .project-wide { grid-template-columns: 48px 1fr; } .project-wide .tag { grid-column: 2; justify-self: start; } .gradient-stage { min-height: 470px; padding: 22px; } .gradient-card { width: 132px; } .gradient-controls { left: 22px; right: 22px; } }
@media (max-width: 560px) { main { padding: 25px 16px 35px; } header { grid-template-columns: 1fr; gap: 15px; } .header-actions { flex-wrap: wrap; justify-content: flex-end; } .header-actions .add-button { order: -1; } .about-grid { gap: 8px; grid-template-columns: 1fr; } .panel { padding: 17px; } .contact-strip { display: block; } .contact-links { margin-top: 17px; flex-wrap: wrap; } }