/* 新增一排纸片入口；天空以原图上方纯色区域延长，原画保持比例。 */
body{background-size:100% auto;background-position:center bottom;background-repeat:no-repeat;background-attachment:scroll;background-color:#a7e9ff}
.room-grid{row-gap:48px}
.room[data-room=timeline]{--lean:2deg;--lift:0px;--tape-color:#fff2a9}
.room[data-room=sketches]{--lean:-3deg;--lift:18px;--tape-color:#80d6ff}
.room[data-room=stories]{--lean:2deg;--lift:0px;--tape-color:#f06868}
.mini-tree{position:absolute;left:25%;top:33%;bottom:12%;width:8px;background:#426f49;border-radius:80% 15% 50% 10%;transform:rotate(-6deg)}
.mini-tree i{position:absolute;width:32px;height:22px;left:-25px;top:8%;background:#fffbea;border:3px solid #426f49;border-radius:90% 0 90% 0;transform:rotate(15deg)}
.mini-tree i:nth-child(2){left:3px;top:37%;transform:rotate(85deg)}.mini-tree i:nth-child(3){left:-25px;top:68%;transform:rotate(5deg)}
.mini-photo{position:absolute;width:48%;aspect-ratio:4/5;right:13%;bottom:12%;background:#fffbea;padding:10px 10px 24px;transform:rotate(9deg);box-shadow:3px 4px 0 #426f4933;transition:transform .25s}
.mini-photo span{display:block;width:100%;height:100%;background:#80d6ff;position:relative;overflow:hidden}.mini-photo span::before{content:'';position:absolute;width:140%;height:60%;background:#a3de83;bottom:-22%;left:-20%;transform:rotate(-25deg);border-radius:30%}.mini-photo span::after{content:'';position:absolute;top:12%;right:14%;width:26%;aspect-ratio:1;border-radius:50%;background:#fff2a9}
.room.is-active .mini-photo{transform:translateY(-5px) rotate(-5deg)}
.sketch-stack{position:absolute;left:22%;bottom:12%;width:55%;height:53%;background:#fffbea;box-shadow:-6px 5px 0 #e6ddca,-11px 10px 0 #fffbea;transform:rotate(-8deg)}
.sketch-stack i{position:absolute;left:17%;right:17%;top:25%;height:3px;background:#aba391;transform:rotate(-7deg)}.sketch-stack i:nth-child(2){top:43%;right:26%;transform:rotate(6deg)}.sketch-stack i:nth-child(3){top:63%;right:35%;transform:rotate(-3deg)}
.draw-pencil{position:absolute;width:12px;height:46%;background:#f06868;right:18%;bottom:13%;transform:rotate(28deg);border-left:3px solid #e35151;border-right:3px solid #ffb3a1;transition:transform .25s}.draw-pencil::before{content:'';position:absolute;bottom:-16px;left:-3px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:16px solid #fff2a9}.draw-pencil::after{content:'';position:absolute;top:-6px;left:-3px;width:12px;height:12px;background:#80d6ff;border-radius:4px 4px 0 0}.room.is-active .draw-pencil{transform:translate(-7px,-5px) rotate(16deg)}
.future-note{position:absolute;inset:23% 18% 16%;background:#fffbea;border-radius:3px;transform:rotate(-8deg);box-shadow:3px 4px 0 #747bad44}.room[data-room=stories] h2{top:45%;left:0;width:100%;transform:rotate(-8deg);font-size:52px;letter-spacing:8px}
.bottom-row{margin-top:50px}
@media(max-width:700px){.room-grid{row-gap:35px}.mini-tree{width:5px}.mini-tree i{width:23px;height:15px;left:-18px;border-width:2px}.mini-tree i:nth-child(3){left:-18px}.mini-photo{padding:7px 7px 16px}.room[data-room=stories] h2{font-size:38px}.draw-pencil{width:10px;height:40%}.bottom-row{margin-top:32px}}
@media(max-width:520px){.room[data-room=timeline]{--lift:15px}.room[data-room=sketches]{--lift:0px}.room[data-room=stories]{--lift:14px}.bottom-row{display:grid;grid-template-columns:1fr 2fr;margin-left:0;margin-top:40px;min-height:0;gap:10px}.bottom-row .more-square{width:86%}.bottom-row .footer-friend{width:100%;max-width:100%;grid-column:2;margin-top:0;align-self:center}.mini-tree i:nth-child(2){left:2px}.site-footer{padding-top:20px}}
@media(prefers-reduced-motion:reduce){.room.is-active .mini-photo{transform:rotate(9deg)}.room.is-active .draw-pencil{transform:rotate(28deg)}}

/* 憨宇宙星轨：图案在上，标题落在左下。 */
.room[data-room=timeline] h2{top:auto;bottom:10%;left:12%;z-index:2;transform:rotate(-3deg)}
.orbit-scene{position:absolute;left:10%;top:5%;width:82%;height:66%;overflow:visible;transform:rotate(-7deg)}
.orbit-route{fill:none;stroke:#426549;stroke-width:3;stroke-dasharray:5 7;stroke-linecap:round}
.orbit-dot{fill:#fffbea}.orbit-dot.dot-blue{fill:#80d6ff}
.orbit-star{fill:#fffbea;stroke:#426549;stroke-width:1.5;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;opacity:.7}
.orbit-cat{transform-origin:112px 75px;transition:transform 260ms ease}
.room.is-active .orbit-cat{transform:translateY(-4px) rotate(8deg)}
.room.is-active .orbit-star{animation:orbit-light 550ms ease both}
.room.is-active .star-one{animation-delay:180ms}.room.is-active .star-two{animation-delay:360ms}.room.is-active .star-three{animation-delay:540ms}.room.is-active .star-four{animation-delay:720ms;--star-fill:#f06868}
@keyframes orbit-light{0%{fill:#fffbea;opacity:.7;transform:scale(1)}60%{fill:var(--star-fill,#ffe56c);opacity:1;transform:scale(1.3) rotate(10deg)}100%{fill:var(--star-fill,#ffe56c);opacity:1;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.room.is-active .orbit-star{animation:none;fill:#ffe56c;opacity:1}.room.is-active .orbit-cat{transform:none;transition:none}}

/* 三颗笑脸星星沿弯曲虚线串联，沿用依次点亮的节奏。 */
.orbit-scene{left:7%;top:0;width:86%;height:84%;transform:none}
.orbit-route{stroke:#fff2a9;stroke-width:4;stroke-dasharray:8 10}
.orbit-star{fill:#ffe45c;stroke:none;opacity:1}
.star-face{fill:#f6c23f}.star-face path{fill:none;stroke:#f6c23f;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
@keyframes orbit-light{0%{fill:#ffe45c;opacity:1;transform:scale(1)}60%{fill:#fff2a9;opacity:1;transform:scale(1.3) rotate(10deg)}100%{fill:#ffec80;opacity:1;transform:scale(1.08)}}
.room[data-room=timeline] .second-row-spark{left:10%;right:auto;top:13%;color:#fffbea;font-size:25px}
.room[data-room=sketches] .second-row-spark{right:12%;top:18%;color:#fff2a9}
.room[data-room=stories] .second-row-spark{right:11%;top:17%;color:#f06868}

/* 柔和的短虚线与统一的雪花悬停旋转。 */
.orbit-route{stroke-width:3.5;stroke-dasharray:6 9;stroke-linecap:round;stroke-linejoin:round}
.room[data-room=wallpapers] .second-row-spark{right:9%;top:12%;color:#f06868;z-index:2;font-size:32px}
.room .little-star{transform-origin:center;animation:spark-spin 2.4s linear infinite;animation-play-state:paused}
.room.is-active .little-star{animation-play-state:running}
@keyframes spark-spin{from{transform:rotate(12deg)}to{transform:rotate(372deg)}}
@media(max-width:700px){.room[data-room=wallpapers] .second-row-spark{font-size:27px}}
@media(prefers-reduced-motion:reduce){.room .little-star{animation:none}}

.room[data-room=stories] h2{top:12%;left:12%;width:auto;font-size:clamp(30px,4vw,44px);letter-spacing:0;transform:rotate(-3deg)}
.story-comic{position:absolute;left:19%;right:18%;top:34%;bottom:12%;background:#fffbea;padding:9%;display:grid;grid-template-columns:1fr 1fr;gap:9%;transform:rotate(-8deg);box-shadow:3px 4px 0 #42654933;border-radius:42% 38% 44% 40%}
.story-comic i{border:2px solid #657957;border-radius:50%}.story-comic i:first-child{grid-column:1/-1;border-radius:999px}.story-bubble{position:absolute;right:9%;bottom:15%;width:30%;height:22%;border:2px solid #657957;background:#fff2a9;border-radius:45%;font-size:24px;line-height:1;display:grid;place-items:center;transform:rotate(8deg)}
.room.is-active .story-bubble{transform:translateY(-4px) rotate(-5deg)}
@media(max-width:700px){.room[data-room=stories] h2{font-size:29px}}@media(max-width:520px){.room[data-room=stories] h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){.room.is-active .story-bubble{transform:rotate(8deg)}}
.room[data-room=stories] h2{top:auto;bottom:10%;left:12%;transform:rotate(-3deg)}
.room[data-room=stories] .second-row-spark{left:12%;right:auto;top:15%;z-index:2}
.art-stories .story-comic{left:29%;right:12%;top:16%;bottom:30%;transform:rotate(8deg)}
.art-stories .story-bubble{right:8%;bottom:28%;transform:rotate(-8deg)}
.room.is-active .story-bubble{transform:translateY(-4px) rotate(5deg)}
@media(prefers-reduced-motion:reduce){.room.is-active .story-bubble{transform:rotate(-8deg)}}

/* 草图纸上的憨猫与持续画画的铅笔。 */
.sketch-cat{position:absolute;left:8%;top:8%;width:84%;height:84%;overflow:visible}
.art-sketches .draw-pencil{transform-origin:50% 50%}
.room.is-active .draw-pencil{animation:pencil-scribble 400ms ease-in-out infinite;transition:none}
@keyframes pencil-scribble{
  0%{transform:rotate(28deg) translate(0,0)}
  20%{transform:rotate(42deg) translate(-2px,-2px)}
  45%{transform:rotate(15deg) translate(2px,2px)}
  70%{transform:rotate(40deg) translate(-1px,-1px)}
  100%{transform:rotate(28deg) translate(0,0)}
}
@media(prefers-reduced-motion:reduce){.room.is-active .draw-pencil{animation:none;transform:rotate(28deg)}}

/* Center the resting cat; retain room for the original jump during playback. */
.sketch-cat-gif{position:absolute;left:-33.5%;top:-64%;width:165%;height:165%;max-width:none;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1);opacity:.68;pointer-events:none}
.sketch-cat-gif[src$=".gif"]{left:-10%;top:-2%;width:115%;height:115%}


/* 故事入口：白色爆炸星底 + 作者原画 + 红胶带 + 雪花 + 憨字。 */
.story-burst{position:absolute;left:3%;right:3%;top:2%;bottom:2%;background:#fffbea;clip-path:polygon(50.00% 0.00%,59.32% 15.23%,75.00% 6.70%,75.46% 24.54%,93.30% 25.00%,84.77% 40.68%,100.00% 50.00%,84.77% 59.32%,93.30% 75.00%,75.46% 75.46%,75.00% 93.30%,59.32% 84.77%,50.00% 100.00%,40.68% 84.77%,25.00% 93.30%,24.54% 75.46%,6.70% 75.00%,15.23% 59.32%,0.00% 50.00%,15.23% 40.68%,6.70% 25.00%,24.54% 24.54%,25.00% 6.70%,40.68% 15.23%);transform:rotate(-3deg) translate(3%,4%)}
.story-hero{position:absolute;right:2%;bottom:3%;width:76%;height:auto;transform:rotate(1deg);filter:drop-shadow(2px 3px 0 rgba(66,101,73,.16))}
.story-tape{position:absolute;left:13%;top:5%;width:33%;height:8%;background:#f06868;transform:rotate(-13deg);box-shadow:1px 2px 0 rgba(38,51,46,.12)}
.story-spark{position:absolute;left:12%;top:19%;width:13%;aspect-ratio:1;background:#f06868;-webkit-mask:url(assets/icons/spark.svg) center/contain no-repeat;mask:url(assets/icons/spark.svg) center/contain no-repeat;transform:rotate(-8deg)}

@media(prefers-reduced-motion:reduce){.story-burst,.story-hero,.story-tape,.story-spark{transform:none}}

/* Story sticker: one organic silhouette, clear space for the bottom-left label. */
.art-stories .story-burst{left:12%;right:2%;top:7%;bottom:24%;transform:rotate(-8deg)}
.art-stories .story-hero{right:8%;bottom:23%;width:60%;transform:rotate(5deg);transform-origin:50% 85%}
.art-stories .story-tape{display:none}
.art-stories .story-spark{left:11%;top:15%;width:12%;animation:story-spark-spin 2.4s linear infinite;animation-play-state:paused}
.room.is-active .story-spark{animation-play-state:running}
.room.is-active .story-hero{animation:story-hop 1.25s ease-in-out infinite}
@keyframes story-hop{0%,100%{transform:translateY(0) rotate(5deg)}45%{transform:translateY(-3%) rotate(-2deg)}70%{transform:translateY(-1%) rotate(2deg)}}
@keyframes story-spark-spin{from{transform:rotate(-8deg)}to{transform:rotate(352deg)}}
@media(prefers-reduced-motion:reduce){.art-stories .story-spark,.room.is-active .story-hero{animation:none}}