:root { --ink: #292e2a; --muted: #8a9188; --green: #4f755f; --coral: #ce755a; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--green); outline-offset: 7px; }
::selection { background: #cce2cf; }
.handwritten { font-family: "Comic Sans MS", "Segoe Print", Georgia, "KaiTi", cursive; font-style: italic; }
.skip-link { position: fixed; z-index: 5; left: 20px; top: -100px; background: #e3eddf; padding: 15px; }
.skip-link:focus { top: 15px; }
.wallpaper { min-height: 720px; height: 100svh; display: grid; grid-template-rows: 72px minmax(0,1fr) 58px; }
.topbar, .bottom-bar { display: flex; align-items: center; margin-inline: 36px; gap: 18px; }
.signature { font: italic 700 34px Georgia, serif; }
.topbar-caption { margin-right: auto; font: 8px Consolas, monospace; color: var(--muted); }
.hello { font-size: 11px; display: flex; min-height: 44px; align-items: center; gap: 28px; }
.hello > span { color: var(--coral); font-size: 19px; }
.world { position: relative; min-height: 0; }
.scene { position: relative; width: min(1200px, calc(100% - 70px)); height: 100%; max-height: 920px; min-height: 590px; margin: auto; isolation: isolate; }
.identity { position: absolute; top: 12%; left: 50%; width: 530px; transform: translateX(-50%) rotate(-4deg); text-align: center; }
.welcome { font-size: 16px; color: var(--muted); margin: 0 0 5px; }
h1 { font: 900 145px/.95 Arial, sans-serif; margin: 0; }
h1 > span { color: var(--coral); }
.portrait { position: absolute; width: 295px; left: 50%; top: 36%; transform: translateX(-50%); margin: 0; z-index: 1; }
.portrait > img { display: block; width: 100%; height: auto; }
.portrait figcaption { text-align: center; color: var(--green); font-size: 13px; margin-top: 10px; }
.object { position: absolute; padding: 0; border: 0; background: transparent; display: flex; align-items: center; flex-direction: column; text-align: center; transition: transform .22s ease; transform: rotate(var(--tilt,0deg)); }
.object > img { width: 100%; height: auto; display: block; object-fit: contain; }
.object-label { display: block; font-size: 12px; font-weight: 500; line-height: 1.5; margin-top: 10px; }
.object-label > span { color: var(--coral); margin-left: 6px; }
.object-subtitle { font: italic 10px/1.7 Georgia, serif; color: var(--muted); margin-top: 3px; }
.object:hover { transform: rotate(0deg) translateY(-7px); }
.object:hover .object-label { color: var(--green); }
.object-skills { --tilt: -10deg; width: 200px; top: 8%; left: 3%; }
.object-json { --tilt: 8deg; width: 230px; top: 6%; right: 1%; }
.object-about { --tilt: -7deg; width: 185px; left: 8%; bottom: 12%; }
.note-paper { display: block; width: 170px; padding: 28px 16px 18px; background: #e2ead9; border: 1px solid #d4dfc9; box-shadow: 2px 4px 0 #f1f3ed; position: relative; text-align: left; }
.note-pin { position: absolute; top: -8px; left: 61px; width: 51px; height: 16px; background: #e7b9a9b0; transform: rotate(4deg); clip-path: polygon(0 4%,98% 0,100% 96%,2% 100%); }
.note-salutation { display: block; font-size: 16px; margin-bottom: 12px; color: var(--green); }
.note-text { display: block; font-size: 11px; line-height: 1.8; }
.note-sign { display: block; font-size: 14px; margin-top: 10px; text-align: right; }
.object-lab { --tilt: 8deg; width: 190px; bottom: 10%; right: 5%; }
.plant { position: absolute; width: 155px; height: 105px; object-fit: contain; left: 30%; bottom: 5%; transform: rotate(-7deg); }
.side-note { position: absolute; right: 28%; bottom: 6%; font-size: 17px; color: #9caa8a; line-height: 1.4; transform: rotate(-9deg); }
.spark { position: absolute; font: 38px Georgia, serif; pointer-events: none; }
.spark-coral { top: 10%; right: 30%; color: var(--coral); transform: rotate(12deg); }
.spark-green { top: 52%; left: 28%; color: #8eaa75; font-size: 23px; }
.floor-line { position: absolute; z-index: -1; bottom: 13%; left: 27%; width: 44%; height: 15px; border-bottom: 1px solid #e5e9df; border-radius: 50%; transform: rotate(-2deg); }
.bottom-bar { justify-content: space-between; color: var(--muted); font-size: 8px; }
.bottom-links { display: flex; align-items: center; gap: 18px; font-size: 10px; }
.bottom-links button { border: 0; background: transparent; padding: 12px 4px; min-height: 44px; }
.bottom-links > span { color: #c8cdc3; }
.bottom-links a { padding-block: 12px; }
.beian { overflow-wrap: anywhere; }
dialog { padding: 28px; width: min(440px,calc(100% - 40px)); border: 1px solid #cfd8c9; border-radius: 4px; background: #fff; color: var(--ink); box-shadow: 0 18px 80px #26352a18; }
dialog::backdrop { background: #fff9; backdrop-filter: blur(5px); }
.dialog-top { display: flex; justify-content: space-between; align-items: center; }
.dialog-index { font: 9px Consolas, monospace; color: var(--muted); }
.close-dialog { background: transparent; border: 0; width: 44px; height: 44px; font-size: 27px; margin: -12px -12px 0 0; }
.dialog-kicker { color: var(--green); font-size: 19px; margin: 24px 0 12px; }
dialog h2 { font-size: 26px; font-weight: 600; margin: 0 0 22px; }
dialog p:not(.dialog-kicker) { font-size: 13px; line-height: 1.95; color: #626b5f; }
.dialog-link { display: flex; justify-content: space-between; border-top: 1px solid #e2e7dc; padding: 18px 0 0; font-size: 12px; margin-top: 26px; color: var(--green); }
dialog .dialog-footnote { padding-top: 12px; font-size: 11px !important; }
@media (min-height:900px) and (min-width:1101px) {
  .portrait { width: 340px; top: 34%; }
  .identity { top: 14%; }
  h1 { font-size: 166px; }
  .object-skills { top: 16%; width: 230px; }
  .object-json { top: 13%; width: 260px; }
  .object-about { bottom: 18%; }
  .object-lab { bottom: 15%; width: 215px; }
}
@media (max-width:1000px) and (min-width:601px) {
  .scene { width: calc(100% - 50px); }
  .identity { width: 410px; top: 17%; }
  h1 { font-size: 112px; }
  .welcome { font-size: 13px; }
  .portrait { width: 240px; top: 39%; }
  .object-skills { width: 155px; left: 0; top: 0; }
  .object-json { width: 170px; right: 0; top: 0; }
  .object-about { width: 150px; left: 0; bottom: 12%; }
  .note-paper { width: 140px; padding: 20px 12px 14px; }
  .note-salutation { font-size: 13px; }
  .note-text { font-size: 10px; }
  .object-lab { width: 145px; right: 0; bottom: 10%; }
  .plant { width: 100px; left: 28%; bottom: 0; }
  .side-note { font-size: 13px; right: 23%; bottom: 0; }
  .spark-coral { top: 0; right: 36%; font-size: 26px; }
  .spark-green { left: 23%; }
}
@media (max-width:600px) {
  .wallpaper { min-height: 790px; grid-template-rows: 64px minmax(0,1fr) 70px; }
  .topbar,.bottom-bar { margin-inline: 20px; gap: 10px; }
  .topbar-caption { font-size: 6px; }
  .signature { font-size: 29px; }
  .hello { font-size: 10px; gap: 8px; }
  .scene { width: calc(100% - 36px); min-height: 656px; }
  .identity { width: 100%; top: 2%; }
  .welcome { font-size: 12px; }
  h1 { font-size: 94px; }
  .portrait { width: 190px; top: 36%; }
  .portrait figcaption { font-size: 11px; margin-top: 8px; white-space: nowrap; }
  .object-skills { width: 120px; top: 20%; left: 0; }
  .object-json { width: 130px; top: 19%; right: 0; }
  .object-label { font-size: 10px; margin-top: 5px; }
  .object-subtitle { display: none; }
  .object-about { width: 118px; bottom: 7%; left: 3%; }
  .note-paper { width: 110px; padding: 17px 10px 9px; }
  .note-salutation { font-size: 11px; margin-bottom: 7px; }
  .note-text { font-size: 9px; }
  .note-sign { font-size: 11px; margin-top: 5px; }
  .note-pin { left: 36px; width: 39px; height: 13px; }
  .object-lab { width: 117px; bottom: 8%; right: 2%; }
  .plant { width: 73px; height: 55px; left: 39%; bottom: -1%; }
  .side-note { display: none; }
  .spark-coral { top: 1%; right: -2px; font-size: 23px; }
  .spark-green { top: 49%; left: 2%; font-size: 18px; }
  .floor-line { bottom: 28%; width: 62%; left: 19%; }
  .bottom-bar { flex-wrap: wrap; justify-content: space-between; align-content: center; row-gap: 0; font-size: 7px; }
  .bottom-links { font-size: 9px; gap: 13px; }
  .bottom-links button,.bottom-links a { min-height: 36px; padding-block: 10px; }
  .beian { width: 100%; text-align: center; font-size: 7px; }
}
@media (max-width:360px) {
  h1 { font-size: 79px; }
  .welcome { font-size: 10px; }
  .portrait { width: 170px; top: 38%; }
  .object-skills { width: 104px; }
  .object-json { width: 112px; }
  .object-about { left: 0; }
  .object-lab { width: 102px; right: 0; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}