/* ===== Yuna 的家 =====
   整个网站是一个家，往下滑就是从一个角落走到下一个角落。
   每个角落一整面墙一个颜色；标题用得意黑，正文用系统字体。 */

:root{
  /* 莫兰迪色：灰一点、柔一点，相邻两面墙的深浅接近，往下滑不会跳色 */
  --ink:#3E4352;          /* 文字、描边 */
  --paper:#F6F2EC;        /* 纸、便条 */
  --coral:#B98480;        /* 灰玫瑰：小暖的鼻子、强调 */
  --mustard:#D8C39B;      /* 燕麦黄 */
  --sky:#C8D0D2;          /* 雾蓝灰：门口 */
  --linen:#E7E0D5;        /* 亚麻：书桌 */
  --sage:#BCC5B5;         /* 鼠尾草绿：电视墙 */
  --oat:#DDD3C4;          /* 燕麦：毛毡板那面墙 */
  --rose:#D2B5AF;         /* 灰粉：唱片机 */
  --mist:#BFC9CF;         /* 雾蓝：画板 */
  --lilac:#C7BFCC;        /* 灰紫：冰箱 */
  --night:#3E4555;        /* 夜里的床头 */
  --mint:#B9C9BF; --peach:#DDD3C4;
  --wood:#A88B6E; --wood-d:#8A6F57;
  --felt:#8B6E5A;         /* 棕色毛毡 */
  --soft:rgba(62,67,82,.68);
  --display:"Yuna Display",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --room-wall:#F7F1E6; --room-wall2:#EADFCF;
  --n0:#E9D3CF; --n1:#EDE3CB; --n2:#F6F2EC; --n3:#D9E0E3; --n4:#E1DAE6;
  --line:rgba(62,67,82,.18);
  --bg:var(--paper);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:8px;z-index:60}
.skip:focus{left:8px}

h1,h2,.gn-title{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1}
h2{font-size:clamp(48px,7.5vw,80px);margin-bottom:14px}
h3{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.2}
.lead{font-size:17px;max-width:32em;color:var(--soft);margin-bottom:40px}

.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:12px 26px;font-size:15px;font-weight:600;background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;transition:transform .16s ease-out,background-color .2s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:default}
.soon{display:none;font-family:var(--display);font-size:24px;padding:20px 0}
.offline .soon{display:block}
.offline .live{display:none!important}

/* 每面墙的颜色 */
.spot{position:relative;padding:clamp(80px,11vw,128px) 0}
.f-mustard{background:var(--mustard)}
.f-paper{background:var(--paper)}
.f-ink{background:var(--ink);color:var(--paper)}
.f-coral{background:var(--coral)}
.f-sky{background:var(--sky)}
.f-mint{background:var(--mint)}
.f-linen{background:var(--linen)}
.f-sage{background:var(--sage)}
.f-oat{background:var(--oat)}
.f-mist{background:var(--mist)}
.f-peach{background:var(--peach)}
.f-rose{background:var(--rose)}
.f-lilac{background:var(--lilac)}
.f-night{background:var(--night);color:var(--paper)}
.f-ink .lead,.f-night .lead{color:rgba(255,253,248,.72)}

/* ---------- 顶栏 ---------- */
.bar{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:2.5px solid var(--ink)}
.bar .wrap{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;user-select:none}
.brand svg{width:34px;height:34px;transition:transform .3s ease-out}
.brand:active svg{transform:rotate(-12deg) scale(.94)}
.brand span{font-family:var(--display);font-size:24px;line-height:1}
.links{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
.links::-webkit-scrollbar{display:none}
.links a{flex:none;text-decoration:none;font-size:15px;padding:6px 10px;border-radius:999px;transition:background-color .2s}
.links a:hover{background:var(--mustard)}
@media(min-width:900px){.links{-webkit-mask-image:none}}

/* ---------- 门口 ---------- */
.hero{background:var(--sky);min-height:calc(100svh - 60px);display:flex;align-items:center;overflow:hidden;padding-bottom:180px;transition:background-color .6s}
.hero-in{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,64px);align-items:center;position:relative;z-index:2;width:100%}
.logo-e{width:clamp(180px,26vw,300px);height:auto;display:block}
.logo-e .peek{animation:peek .9s .25s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes peek{from{transform:translateY(34px)}}
.hero h1{font-size:clamp(72px,13vw,150px);margin-bottom:22px}
.hero .lead{font-size:clamp(17px,2vw,20px);color:var(--ink);margin-bottom:30px;max-width:24em}
.skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:170px;display:block}
.skyline .win{fill:var(--paper);opacity:.35;transition:fill .6s,opacity .6s}
.stars{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1s}
.stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFF3CF;animation:tw 3s ease-in-out infinite}
@keyframes tw{50%{opacity:.25;transform:scale(.6)}}
html.night .hero{background:#353B4A;color:var(--paper)}
html.night .hero .lead{color:rgba(255,253,248,.8)}
html.night .hero .btn{background:var(--paper);color:var(--ink)}
html.night .stars{opacity:1}
html.night .skyline .win{fill:#F1E2B8;opacity:.9}
html.night .skyline .bm{fill:#8F8066}
html:not(.night) .logo-e .moon{fill:#F2C14E}
@media(max-width:700px){
  .hero-in{grid-template-columns:1fr;gap:20px}
  .logo-e{width:150px}
  .hero{padding-top:56px;align-items:flex-start}
}

/* ---------- 书桌 ---------- */
.desk{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.room{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:28px;padding:10px;overflow:hidden}
.room svg{width:100%;height:auto;display:block;border-radius:18px}
.room-time{margin-top:14px;font-size:15px}
.room-time b{font-weight:700}
.w-wall{fill:var(--room-wall)} .w-wall2{fill:var(--room-wall2)}
.w-wood{fill:var(--wood)} .w-wood-d{fill:var(--wood-d)}
.w-line{stroke:var(--wood-d);stroke-width:3;fill:none;stroke-linecap:round}
.obj{cursor:pointer;transition:transform .25s ease-out;transform-box:fill-box;transform-origin:center bottom}
.obj:hover{transform:translateY(-4px)}
.obj:focus{outline:none}
.obj:focus-visible{outline:3px solid var(--coral)}
.obj.wiggle{animation:wig .45s ease-out}
@keyframes wig{30%{transform:rotate(-3deg)}70%{transform:rotate(2deg)}}
.lamp-light{fill:#FFE9A8;opacity:0;transition:opacity .4s}
.room.lit .lamp-light{opacity:.45}
.steam path{fill:none;stroke:#8a7d76;stroke-width:2;stroke-linecap:round;opacity:.5;animation:steam 3s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:-1.4s}
@keyframes steam{0%{transform:translateY(6px);opacity:0}40%{opacity:.55}100%{transform:translateY(-12px);opacity:0}}
.room.puff .steam path{animation-duration:.9s;stroke-width:3.5}
.sky-day,.sky-dusk,.sky-night{transition:opacity 1s}
.room .sky-dusk,.room .sky-night{opacity:0}
.room.dusk .sky-day,.room.night .sky-day{opacity:0}
.room.dusk .sky-dusk,.room.night .sky-night{opacity:1}
.cloud{animation:drift 26s linear infinite alternate}
@keyframes drift{from{transform:translateX(-30px)}to{transform:translateX(30px)}}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:2}
.flash.go{animation:flash .5s ease-out}
@keyframes flash{10%{opacity:.85}100%{opacity:0}}
.desk-text p{font-size:17px;margin-bottom:16px;max-width:30em}
.xiaonuan b{font-weight:700}
.memo{margin-top:30px;background:var(--paper);border:3px solid var(--ink);border-radius:6px;padding:20px 24px 16px;transform:rotate(-1.2deg);max-width:420px}
.memo h3{font-size:22px;margin-bottom:10px}
.memo dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px}
.memo dt{font-weight:700}
.memo dd.todo{color:var(--soft)}
.memo-date{font-size:13px;color:var(--soft);margin-top:10px}
@media(max-width:820px){.desk{grid-template-columns:1fr}}

/* ---------- 书架 ---------- */
.shelf{position:relative;display:flex;align-items:flex-end;gap:10px;padding:0 28px;min-height:300px;border-bottom:18px solid var(--wood);box-shadow:0 3px 0 var(--ink);max-width:760px}
.spine{width:clamp(62px,9vw,84px);height:var(--h);background:var(--c);border:3px solid var(--ink);border-bottom:0;border-radius:8px 8px 0 0;cursor:pointer;writing-mode:vertical-rl;font-family:var(--display);font-size:clamp(22px,3vw,28px);letter-spacing:.12em;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .25s cubic-bezier(.2,.9,.3,1.2)}
.spine::before,.spine::after{content:"";position:absolute;left:10px;right:10px;height:3px;background:var(--ink);opacity:.8}
.spine::before{top:18px}.spine::after{bottom:22px}
.spine:hover{transform:translateY(-6px)}
.spine.on{transform:translateY(-28px)}
.spine:active{transform:translateY(-22px) scale(.98)}
.shelf-deco{margin-left:auto;align-self:flex-end;padding-bottom:0}
.pot{display:block;width:56px;height:46px;background:#C9A19B;border:3px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;position:relative}
.pot::before{content:"";position:absolute;left:4px;bottom:100%;width:42px;height:58px;background:radial-gradient(ellipse 9px 26px at 30% 60%,#7F9284 98%,transparent),radial-gradient(ellipse 9px 30px at 55% 45%,#9AAB9C 98%,transparent),radial-gradient(ellipse 9px 24px at 80% 62%,#7F9284 98%,transparent)}
.book-note{margin-top:36px;max-width:560px}
.book-note h3{font-size:34px}
.bn-author{color:var(--soft);margin:4px 0 10px}
@media(max-width:560px){.shelf{padding:0 12px;gap:6px}.shelf-deco{display:none}}

/* ---------- 毛毡板 ---------- */
.felt{position:relative;background-color:var(--felt);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .9  0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E"),radial-gradient(ellipse at 30% 20%,rgba(255,240,225,.12),transparent 60%);box-shadow:inset 0 0 40px rgba(40,25,15,.35);border:14px solid var(--wood);outline:3px solid var(--ink);border-radius:10px;padding:40px clamp(16px,3vw,36px) 46px;color:var(--ink)}
.tape{display:inline-block;font-family:var(--display);font-size:22px;background:rgba(246,242,236,.9);color:var(--ink);padding:2px 16px;transform:rotate(-2deg);margin-bottom:22px}
.tape-2{margin-top:44px;transform:rotate(1.5deg)}
.films,.tvs{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px;align-items:start}
.film,.tv{position:relative;background:var(--paper);border-radius:4px;transform:rotate(-1.5deg)}
.film:nth-child(even),.tv:nth-child(even){transform:rotate(1.3deg)}
.film::before,.tv::before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--coral);border:2.5px solid var(--ink);z-index:3}
.tv:nth-child(3n+2)::before,.film:nth-child(3n+2)::before{background:var(--mustard)}
.film{display:flex;background:var(--fc)}
.stub{flex:none;width:40px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12px 0;border-right:2.5px dashed rgba(34,48,74,.4)}
.stub .yr{font-family:var(--display);font-size:18px;writing-mode:vertical-rl}
.stub .no{font-size:11px;writing-mode:vertical-rl;opacity:.7}
.fbody{padding:14px 14px 14px;min-width:0}
.film h3,.tv h3{font-size:22px}
.fen{font-size:12.5px;opacity:.72;margin:3px 0 8px;line-height:1.45}
.film p.line,.tv p.line{font-size:14px;line-height:1.55}
.tv{padding:10px 10px 14px}
.set{cursor:pointer}
.set:active{transform:scale(.98)}
.screen{position:relative;aspect-ratio:4/3;overflow:hidden;background:#111;margin-bottom:10px}
.screen svg,.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0 1px,transparent 1px 3px);z-index:2}
.screen i{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");background-size:120px}
.tv.zap .screen i{opacity:1;animation:noise .12s steps(3) infinite}
@keyframes noise{33%{background-position:40px 70px}66%{background-position:-60px 20px}100%{background-position:15px -45px}}
.tv p.line .by{display:block;font-size:12px;opacity:.65;margin-top:5px}
.spin{transform-origin:80px 60px;animation:spin 9s linear infinite}
.twinkle{animation:tw 2.6s ease-in-out infinite}
/* ♡ 也喜欢 / 也在看 */
.like{all:unset;cursor:pointer;margin-top:10px;font-size:12.5px;display:inline-flex;gap:5px;align-items:center;padding:3px 10px;border-radius:999px;border:2px solid var(--ink);transition:background-color .2s,transform .16s ease-out}
.like:active{transform:scale(.95)}
.like[hidden]{display:none}
.like.on{background:var(--ink);color:var(--paper)}
.like:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
@media(max-width:960px){.films,.tvs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.films,.tvs{grid-template-columns:1fr}.felt{border-width:10px}}

/* ---------- 唱片机旁 ---------- */
.duo{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,5vw,56px);align-items:start}
.player-in{display:flex;gap:28px;align-items:center;margin-top:28px}
.tt{flex:none;width:clamp(200px,24vw,260px)}
.tt svg{width:100%;display:block;border:3px solid var(--ink);border-radius:20px}
.vinyl{transform-origin:80px 82px;animation:spin 3.2s linear infinite;animation-play-state:paused}
.player.playing .vinyl{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.arm{transform-origin:150px 22px;transition:transform .8s ease-out}
.player.playing .arm{transform:rotate(22deg)}
.tracks{flex:1;min-width:0}
.np-title{font-family:var(--display);font-size:26px;line-height:1.25;margin-bottom:14px;min-height:34px}
.tracks ol{list-style:none;display:flex;flex-direction:column;gap:6px}
.tracks li button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;gap:12px;align-items:baseline;padding:9px 14px;border-radius:12px;background:rgba(255,253,248,.35);font-size:15px;transition:background-color .2s}
.tracks li button:hover{background:rgba(255,253,248,.6)}
.tracks li button.cur{background:var(--paper)}
.tracks li button:focus-visible{outline:3px solid var(--ink)}
.tracks .n{font-weight:700;width:20px}
.tracks .ar{margin-left:auto;opacity:.7;font-size:13px;white-space:nowrap}
.playlist{font-size:18px;margin-bottom:6px;opacity:.85}
.hint{font-size:14px;margin-top:14px;opacity:.8}
.full{display:inline-block;font-size:14px;margin-top:6px;font-weight:600}
.full[hidden]{display:none}
.fortune{background:var(--paper);border:3px solid var(--ink);border-radius:24px;padding:26px;text-align:center;display:flex;flex-direction:column;align-items:center;perspective:900px}
.fortune h3{font-size:34px}
.fortune > p{font-size:14px;color:var(--soft);margin:4px 0 18px}
.lot{width:100%;max-width:260px;height:180px;position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.3,.5,1)}
.lot.open{transform:rotateY(180deg)}
.lot .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;border:3px solid var(--ink)}
.lot .front{background:var(--mustard);font-family:var(--display);font-size:34px}
.lot .back{transform:rotateY(180deg);background:var(--paper)}
.lot .no{font-size:13px;color:var(--soft)}
.lot .msg{font-size:17px;line-height:1.6;margin:8px 0 12px;font-weight:600}
.lot .lucky{font-size:13px;color:var(--soft);display:flex;align-items:center;gap:6px}
.lot .lucky b{width:14px;height:14px;border-radius:50%;display:inline-block;border:2px solid var(--ink)}
.fortune .btn{margin-top:20px}
.again{font-size:13px;color:var(--soft);margin-top:10px;min-height:20px}
@media(max-width:900px){.duo{grid-template-columns:1fr}}
@media(max-width:560px){.player-in{flex-direction:column;align-items:stretch}.tt{margin:0 auto}}

/* ---------- 画板 ---------- */
.easel-wrap{display:grid;grid-template-columns:1fr minmax(0,520px);gap:clamp(28px,5vw,64px);align-items:start}
.easel{position:relative;padding-bottom:70px}
.easel::before,.easel::after{content:"";position:absolute;bottom:0;width:14px;height:110px;background:var(--wood);border:3px solid var(--ink);border-radius:4px;z-index:0}
.easel::before{left:18%;transform:rotate(10deg)}.easel::after{right:18%;transform:rotate(-10deg)}
.board{position:relative;z-index:1;display:grid;grid-template-columns:repeat(24,1fr);aspect-ratio:1;width:100%;background:var(--paper);border:12px solid var(--wood);outline:3px solid var(--ink);border-radius:6px;touch-action:manipulation}
.board i{display:block;box-shadow:inset 0 0 0 .5px rgba(34,48,74,.08);cursor:crosshair}
.board i:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.board i.pop{animation:pop .35s ease-out}
@keyframes pop{50%{transform:scale(1.5)}}
.pal{display:grid;grid-template-columns:repeat(5,44px);gap:12px;margin-bottom:18px}
.pal button{width:44px;height:44px;border-radius:50% 46% 52% 48%;border:3px solid var(--ink);cursor:pointer;transition:transform .16s ease-out}
.pal button:active{transform:scale(.92)}
.pal button.sel{transform:translateY(-4px);box-shadow:0 4px 0 var(--ink)}
.pix-status{font-size:15px;max-width:22em}
@media(max-width:820px){.easel-wrap{grid-template-columns:1fr}}

/* ---------- 冰箱门 ---------- */
.fridge{position:relative}
.fridge::before{content:"";position:absolute;left:0;top:10px;width:14px;height:180px;background:var(--paper);border:3px solid var(--ink);border-radius:999px}
.fridge-head{padding-left:40px;position:relative}
.robot-sticker{position:absolute;right:4%;top:-6px;width:150px;height:150px;border-radius:50%;background:var(--mustard);border:3px solid var(--ink);box-shadow:0 0 0 7px var(--paper),0 0 0 10px var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-12deg);font-family:var(--display);line-height:.95;text-align:center}
.robot-sticker span{font-size:22px;letter-spacing:.04em}
.robot-sticker b{font-weight:400;font-size:38px;color:var(--coral);-webkit-text-stroke:1.2px var(--ink)}
@media(max-width:860px){.robot-sticker{position:relative;right:auto;top:auto;width:120px;height:120px;margin:0 0 30px 12px}.robot-sticker span{font-size:18px}.robot-sticker b{font-size:30px}}
.fridge > .soon{padding-left:40px}
.fridge-in{display:grid;grid-template-columns:320px 1fr;gap:clamp(24px,4vw,48px);align-items:start;padding-left:40px}
.pad{background:var(--paper);border:3px solid var(--ink);border-radius:8px;padding:30px 22px 22px;display:grid;gap:8px;position:relative;transform:rotate(-1deg)}
.pad::before{content:"";position:absolute;top:-12px;left:50%;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:var(--coral);border:3px solid var(--ink)}
.pad label,.pad-label{font-size:14px;font-weight:700}
.pad input,.pad textarea{font:inherit;font-size:15px;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:10px;padding:9px 12px;outline:none}
.pad input:focus,.pad textarea:focus{border-color:var(--coral)}
.pad textarea{resize:vertical;min-height:96px}
.pad-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.pad-label{margin-right:4px}
.swatches{display:flex;gap:8px}
.swatches button{width:28px;height:28px;border-radius:6px;border:2px solid var(--ink);cursor:pointer}
.swatches button.sel{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}
.stickers button{font-size:18px;line-height:1;width:34px;height:34px;border-radius:10px;border:2px solid transparent;background:none;cursor:pointer;transition:transform .16s ease-out}
.stickers button:active{transform:scale(.9)}
.stickers button.sel{border-color:var(--ink);background:#fff}
.stickers button.none{font-size:13px;width:auto;padding:0 8px}
.pad-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;margin-top:8px}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:26px 20px;padding-top:12px}
.note{position:relative;padding:24px 16px 14px;min-height:140px;color:var(--ink);border:2.5px solid var(--ink);border-radius:4px;animation:land .45s ease-out both}
.note::before{content:"";position:absolute;top:-11px;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--ink);box-shadow:inset -4px -4px 0 rgba(255,255,255,.18)}
.note:nth-child(3n+2)::before{background:var(--coral)}
.note:nth-child(3n)::before{background:var(--mustard)}
.note p{font-size:15px;line-height:1.65;word-break:break-word}
.note .by{margin-top:12px;font-size:12px;opacity:.75;display:flex;justify-content:space-between;gap:8px}
.note .stk{position:absolute;right:-10px;bottom:-12px;font-size:30px}
@keyframes land{from{opacity:0;transform:translateY(-10px) rotate(-6deg)}}
.wall-empty{grid-column:1/-1;font-family:var(--display);font-size:22px;padding:20px 0}
@media(max-width:860px){.fridge-in{grid-template-columns:1fr}}
@media(max-width:520px){.fridge::before{display:none}.fridge-head,.fridge-in,.fridge > .soon{padding-left:0}}

/* ---------- 床头 ---------- */
.f-night{background-color:var(--night);background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff8 99%,transparent),radial-gradient(1.5px 1.5px at 78% 12%,#fff8 99%,transparent),radial-gradient(2px 2px at 64% 36%,#fff6 99%,transparent),radial-gradient(1.5px 1.5px at 32% 62%,#fff5 99%,transparent),radial-gradient(1.5px 1.5px at 90% 70%,#fff6 99%,transparent)}
.posts{display:flex;flex-direction:column;gap:12px;max-width:720px}
.post{border:2.5px solid rgba(255,253,248,.4);border-radius:16px}
.post[open]{border-color:var(--paper)}
.post summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:baseline;gap:16px}
.post summary::-webkit-details-marker{display:none}
.post .d{font-size:14px;opacity:.7;flex:none;width:70px}
.post .t{font-family:var(--display);font-size:24px;line-height:1.2;flex:1}
.post .plus{font-size:24px;transition:transform .25s ease-out}
.post[open] .plus{transform:rotate(45deg)}
.post .body{padding:0 22px 20px 108px}
.post .body p{margin-bottom:10px;font-size:16px}
.tag{display:inline-block;font-size:12px;padding:2px 10px;border-radius:999px;background:rgba(255,253,248,.15);margin-right:6px}
@media(max-width:620px){.post summary{flex-wrap:wrap;gap:4px 12px}.post .d{width:auto}.post .body{padding:0 22px 18px}}
.goodnight{margin-top:110px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:40px}
.sleepy{width:180px;height:auto;margin-bottom:10px}
.gn-title{font-size:clamp(44px,7vw,68px);margin-bottom:10px}
.goodnight a{color:var(--mustard)}
.visitor{margin-top:20px;font-size:15px;min-height:24px}
.visitor b{font-family:var(--display);font-size:22px;font-weight:400;color:var(--mustard)}
.copy{font-size:13px;opacity:.5;margin-top:16px}

/* ---------- 背景音乐开关 ---------- */
.music{position:fixed;left:14px;bottom:14px;z-index:30;-webkit-transform:translateZ(0);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 120px);font-size:13px;color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);border-radius:999px;padding:7px 14px 7px 12px;cursor:pointer;transition:transform .16s ease-out}
.music:active{transform:scale(.96)}
.music[hidden]{display:none}
.music .mtxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music .eq{display:flex;align-items:flex-end;gap:2px;height:12px;flex:none}
.music .eq i{width:3px;height:4px;border-radius:2px;background:var(--coral)}
.music.on .eq i{animation:eq 1s ease-in-out infinite}
.music.on .eq i:nth-child(2){animation-delay:-.4s}
.music.on .eq i:nth-child(3){animation-delay:-.7s}
@keyframes eq{0%,100%{height:4px}50%{height:12px}}

/* ---------- 小暖 ---------- */
.dog{position:fixed;right:14px;bottom:14px;z-index:30;transform:translateZ(0);-webkit-transform:translateZ(0);isolation:isolate;width:86px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.dog svg{width:100%;display:block;overflow:visible;pointer-events:none}
.dog svg *{pointer-events:none}
.dog .head{transform-origin:60px 70px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.dog.petted .head{transform:rotate(-12deg)}
.dog .tail{transform-origin:84px 100px;animation:wag 1.6s ease-in-out infinite}
.dog.petted .tail{animation-duration:.22s}
@keyframes wag{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(14deg)}}
.dog .happy,.dog .tongue{opacity:0;transition:opacity .2s}
.dog.petted .happy,.dog.petted .tongue{opacity:1}
.dog.petted .open{opacity:0}
.dog .ear-l,.dog .ear-r{transition:transform .35s cubic-bezier(.3,1.6,.5,1);transform-box:fill-box}
.dog .ear-l{transform-origin:85% 8%}.dog .ear-r{transform-origin:15% 8%}
.dog.petted .ear-l{transform:rotate(14deg)}.dog.petted .ear-r{transform:rotate(-14deg)}
.dog .look{transform-origin:60px 70px;transition:transform .3s ease-out}
.dog .open{transition:transform .25s ease-out,opacity .2s}
.dog .sleep{opacity:0;transition:opacity .3s}
.dog.asleep .open{opacity:0}
.dog.asleep .sleep{opacity:1}
.dog.asleep .head{transform:rotate(9deg) translateY(4px)}
.dog.asleep .tail{animation-duration:4s}
.dog .zzz{position:absolute;right:2px;top:-6px;pointer-events:none;font-family:var(--display);color:var(--coral);opacity:0;transition:opacity .4s}
.dog.asleep .zzz{opacity:1}
.dog .zzz i{position:absolute;right:0;font-style:normal;font-size:14px;animation:zz 3s ease-in infinite;opacity:0}
.dog .zzz i:nth-child(2){animation-delay:1s;font-size:17px}
.dog .zzz i:nth-child(3){animation-delay:2s;font-size:21px}
@keyframes zz{0%{opacity:0;transform:translate(0,10px)}30%{opacity:.95}100%{opacity:0;transform:translate(14px,-22px)}}
.dog .bubble{position:absolute;right:4px;bottom:100%;margin-bottom:6px;white-space:nowrap;font-size:13px;background:var(--paper);color:var(--ink);border:2.5px solid var(--ink);border-radius:14px 14px 4px 14px;padding:6px 12px;opacity:0;transform:translateY(6px);transition:opacity .25s ease-out,transform .25s ease-out;pointer-events:none}
.dog .bubble small{display:block;font-size:11px;opacity:.65;margin-top:1px}
.dog:hover .bubble,.dog.petted .bubble,.dog.hello .bubble{opacity:1;transform:none}
.dog.asleep:not(:hover) .bubble{opacity:0}
.heart{position:fixed;z-index:31;pointer-events:none;font-size:18px;animation:up 1.1s ease-out forwards}
@keyframes up{to{transform:translate(var(--dx),-70px) scale(1.3);opacity:0}}
.runner{position:fixed;bottom:18px;left:-120px;width:90px;z-index:40;pointer-events:none;animation:run 3.6s linear forwards}
.runner svg{width:100%;animation:hop .32s ease-in-out infinite}
@keyframes run{to{left:calc(100% + 120px)}}
@keyframes hop{50%{transform:translateY(-14px)}}
@media(max-width:620px){.dog{width:68px;right:10px;bottom:10px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .logo-e .peek,.vinyl,.cloud,.steam path,.dog .tail,.stars i,.spin,.twinkle,.music.on .eq i,.note{animation:none}
}

/* ---------- 书桌上的便条 ---------- */
.memo{margin-top:30px;background:#EFE6CF;border:0;border-radius:2px;padding:22px 26px 20px;transform:rotate(-1.5deg);max-width:380px;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.memo p{font-size:17px;margin:0 0 6px;max-width:none}
.memo p:last-child{margin-bottom:0}
.memo b{display:inline-block;width:2em;font-family:var(--display);font-weight:400;font-size:20px;color:var(--coral)}

/* ---------- 电视墙 ---------- */
.tvwall{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(28px,5vw,64px);align-items:center}
.bigtv-set{background:#6E6458;border:3px solid var(--ink);border-radius:26px;padding:18px 18px 14px;max-width:620px}
.bigtv-screen{position:relative;aspect-ratio:16/10;background:#2D313B;border:3px solid var(--ink);border-radius:18px/22px;overflow:hidden;color:var(--paper)}
.bigtv-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.35));z-index:2}
.channel{position:absolute;inset:0;padding:clamp(18px,4vw,36px);display:none;flex-direction:column;justify-content:center}
.channel.on{display:flex}
.ch-no{font-size:13px;opacity:.6;margin-bottom:6px}
.channel h3{font-size:clamp(34px,5vw,52px);line-height:1.05}
.ch-meta{font-size:13.5px;opacity:.7;margin:8px 0 14px}
.ch-line{font-size:clamp(15px,1.8vw,18px);line-height:1.6;max-width:28em}
.channel .like{margin-top:16px;align-self:flex-start;border-color:rgba(246,242,236,.7);color:var(--paper)}
.channel .like.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.channel:nth-child(1){background:#4C5A66}.channel:nth-child(2){background:#6A5866}.channel:nth-child(3){background:#6E654F}.channel:nth-child(4){background:#4F6159}
.static{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");background-size:120px}
.bigtv-screen.zap .static{opacity:1;animation:noise .12s steps(3) infinite}
.bigtv-panel{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:12px}
.speaker{width:90px;height:14px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 3px,transparent 3px 7px);border-radius:4px}
.knob-row{display:flex;gap:8px}
.knob-btn{width:38px;height:38px;border-radius:50%;border:2.5px solid var(--ink);background:var(--paper);font-family:var(--display);font-size:18px;cursor:pointer;transition:transform .16s ease-out,background-color .2s}
.knob-btn:active{transform:scale(.92)}
.knob-btn.on{background:var(--coral);color:var(--paper)}
.tv-cabinet{display:flex;justify-content:space-between;height:34px;margin:0 -10px;max-width:640px;background:var(--wood);border:3px solid var(--ink);border-radius:8px;position:relative;top:-2px}
.tv-cabinet span{width:14px;height:22px;background:var(--wood-d);border:3px solid var(--ink);border-top:0;margin:30px 34px 0}
@media(max-width:860px){.tvwall{grid-template-columns:1fr}}

/* ---------- 床头：一整片星空 ---------- */
#journal{overflow:hidden;padding-bottom:60px}
.f-night{background-image:none;background:linear-gradient(180deg,#2F3544 0%,#3E4555 60%,#4A4F5E 100%)}
.sky-field{position:absolute;inset:0;pointer-events:none}
.sky-field::before{content:"";position:absolute;top:9%;right:11%;width:76px;height:76px;border-radius:50%;background:#EFE6CF;box-shadow:0 0 40px 10px rgba(239,230,207,.25)}
.sky-field::after{content:"";position:absolute;top:calc(9% - 8px);right:calc(11% - 14px);width:72px;height:72px;border-radius:50%;background:#353B4A}
.sky-field i{position:absolute;border-radius:50%;background:#F3EAD6;opacity:.75;animation:tw 4s ease-in-out infinite}
.sky-field i.big{box-shadow:0 0 6px 1px rgba(243,234,214,.6)}
.shoot{position:absolute;top:14%;left:70%;width:120px;height:2px;background:linear-gradient(90deg,rgba(243,234,214,.9),transparent);border-radius:2px;transform:rotate(-20deg);opacity:0;animation:shoot 9s ease-in 3s infinite}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(-20deg)}3%{opacity:1}10%{opacity:0;transform:translate(-320px,120px) rotate(-20deg)}100%{opacity:0}}
.bed{position:relative;z-index:1}
.bed .lead{margin-bottom:60px}
.bedscene{position:relative;max-width:900px;margin:0 auto}
.bedscene svg{width:100%;height:auto;display:block}
.pillow{cursor:pointer;transform-box:fill-box;transform-origin:center bottom;transition:transform .2s ease-out}
.pillow:hover{transform:translateY(-3px)}
.pillow.squish{animation:squish .45s ease-out}
@keyframes squish{30%{transform:scale(1.06,.86)}65%{transform:scale(.97,1.04)}}
.sleeper .zz{animation:zzf 3s ease-in-out infinite}
.sleeper .zz2{animation-delay:1.2s}
@keyframes zzf{0%,100%{opacity:.2;transform:translateY(4px)}50%{opacity:1;transform:translateY(-2px)}}
.pillow-say{text-align:center;min-height:28px;margin-top:10px;font-family:var(--display);font-size:22px;color:#E9DFC6}
.goodnight{margin-top:70px}
@media(prefers-reduced-motion:reduce){.shoot,.sky-field i,.sleeper .zz{animation:none}}